/* ==========================================================================
   AZUR GESTION — Accueil
   Palette : noir #0a0a0a / blanc / gris chaud #EFEDE9 / accent or #A8832E-#D4B876
   Typo : Cormorant Garamond (titres) + Jost (texte, nav)
   ========================================================================== */

/* Polices hébergées localement (site/assets/fonts/) plutôt que chargées
   depuis fonts.googleapis.com/fonts.gstatic.com : supprime le transfert d'IP
   vers Google au chargement des polices et les allers-retours DNS/TLS vers
   un tiers, sans dépendre d'un consentement cookies pour ça (ce n'est pas un
   traceur). Seul le sous-ensemble "latin" est inclus (couvre les caractères
   accentués français, U+0000-00FF) : les autres écritures (cyrillique, grec,
   vietnamien...) ne sont pas utilisées sur ce site. font-display: swap
   affiche le texte avec une police système le temps du chargement, jamais de
   texte invisible (FOIT). */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/jost-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jost-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jost-500.woff2') format('woff2');
}

:root {
  --black: #0a0a0a;
  --gray-bg: #EFEDE9;
  --gray-bg-alt: #E4E2DC;
  --gold-solid: #A8832E;
  --gold-light: #D4B876;

  /* fusion des teintes proches historiquement codées en dur (voir Phase 2
     du document de finalisation). Certaines variantes NE SONT PAS fusionnées
     ici malgré des noms de groupe suggérés au départ, parce qu'elles jouent
     un rôle visuel distinct et qu'une fusion aurait cassé un contraste ou un
     dégradé existant — voir commentaires sur place à chaque exception :
     #050505 (point final d'un dégradé, doit rester plus sombre que le
     départ), #755B20 (état hover de .btn--primary, doit rester plus sombre
     que le repos #866824) et #7a5c1e (.coverage__country, contexte propre,
     sans lien avec l'état hover d'un bouton). */
  --white: #ffffff;
  --gray-1: #4a4a4a;   /* fusionne #4a4a4a/#5a5a5a/#3a3a3a : texte gris atténué, même rôle partout */
  --gray-2: #5c5c5c;   /* texte gris sur fond CLAIR : 5,9:1 sur #EFEDE9, 5,0:1 sur #E4E2DC (AA). Ne pas utiliser sur fond sombre : --gray-3 */
  --gray-3: #9a9a9a;   /* fusionne #9a9a9a/#8a8a8a */
  --gray-4: #d5d5d5;   /* fusionne #d5d5d5/#d0d0d0/#d5d3cc/#e6e6e6/#e5e5e5 */
  --black-alt: #1c1c1c; /* fusionne #1c1c1c/#1e1e1e (2 unités d'écart, imperceptible) */
  --gold-dark: #866824; /* état repos de .btn--primary, contraste 5.22:1 vérifié — ne pas fusionner avec le hover */

  /* Breakpoints du projet — ne pas introduire de nouvelle valeur de @media
     sans l'ajouter ici (les media queries ne peuvent pas lire une variable) :
       mobile   : max-width: 600px
       tablette : 601px – 900px
       desktop  : min-width: 901px   (palier dominant : ~60 règles de mise en page)
       nav      : 1199px             (bascule menu burger <-> navigation desktop)
     Valeurs historiques conservées volontairement, chacune sur quelques règles
     dont le rendu a été validé tel quel (les harmoniser exigerait une campagne
     de tests visuels dédiée) : 769px / 767px (hero, sous-navigation), 640px,
     1024px / 1025px (carrousels et formulaires), 480px et 360px (retouches
     fines mobile), 1150px / 1400px (club-teaser, documentés sur place). */

  /* échelle de timing unique (Phase 2 du document de finalisation) : 4
     paliers de durée + la courbe déjà utilisée 23 fois dans le fichier,
     érigée en référence officielle. 3 transitions "signature" restent en
     dehors de cette échelle, documentées à leur emplacement plutôt que
     forcées dans le palier le plus proche (elles perdraient leur rythme
     volontairement long/dramatique) : le slide du carrousel "Trois métiers"
     (1.2s, courbe cubic-bezier(0.83,0,0.17,1) déjà justifiée en commentaire),
     le reflet lumineux du club-teaser (1.4s) et le tracé de la ligne de
     progression "Le parcours" sur Import (1.1s). */
  --ease-signature: cubic-bezier(0.16,1,0.3,1);
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 0.8s;
  --stagger-step: 0.08s;   /* pas de cascade des apparitions : delay = N x --stagger-step (via --reveal-delay) */

  /* échelle d'espacement unique — toute marge/padding fin (interne à un
     bloc, pas le rythme macro entre grandes sections) doit piocher dans
     cette liste plutôt que d'introduire une valeur en dur */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* grain léger réutilisé sur les sections sombres de l'accueil (page.page-home
     uniquement) pour éviter l'effet "aplat" — bruit blanc à très faible alpha,
     pensé pour être posé en couche supplémentaire d'un background-image existant */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- Design system (Lot A de l'audit UX/UI) : tout nouveau style doit piocher ici ---- */
  /* typographie */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;
  --text-xs: 12px;   /* plancher de lisibilité : libellés, kickers, mentions */
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --text-3xl: 42px;
  --text-4xl: 56px;
  --text-5xl: 72px;  /* très grands chiffres (bandeau "4 services") */

  /* rythme vertical / horizontal des sections (échelle macro, au-delà de --space-8) */
  --section-y-mobile: 72px;
  --section-y-desktop: 128px;
  --section-x-mobile: 20px;
  --section-x-desktop: 40px;

  /* couleurs complémentaires (avant : codées en dur dans le fichier) */
  --surface-soft: #ededea;      /* fond de bloc clair légèrement plus sombre que --gray-bg */
  --surface-raised: #f7f6f3;    /* tuile plus claire que le fond de page (tile-grid) */
  --surface-gold-tint: #f3ead6; /* survol doré clair des tuiles */
  --gray-5: #b0b0b0;            /* texte/filet gris clair sur fond sombre (fusionne #b0b0b0/#b8b8b8/#a8a8a8/#c9c9c9) */
  --accent-alert: #e07a5f;      /* erreurs de formulaire */
  --gold-darker: #755b20;       /* état hover de .btn--primary (plus sombre que --gold-dark) */
  --gold-brown: #7a5c1e;        /* .coverage__country et halos associés */
  --black-deep: #050505;        /* fin de dégradé, doit rester plus sombre que --black */
  --whatsapp: #25d366;
  --whatsapp-dark: #1faf57;

  /* rayons et ombres */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --shadow-soft: 0 8px 20px rgba(10,10,10,0.08);
  --shadow-card: 0 10px 28px rgba(10,10,10,0.08);
  --shadow-lift: 0 8px 24px rgba(0,0,0,0.25);
  --shadow-deep: 0 30px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-gold: 0 14px 36px rgba(168,131,46,0.28);
  --shadow-gold-glow: 0 0 22px rgba(212,184,118,0.35);

  /* ---- Tokens de motion (P1) ---- */
  --ease-standard: ease;
  --ease-out-soft: ease-out;
  --duration-cinematic: 1.2s;  /* tracé de la ligne de progression, carrousel mobile, reflet Club */
  --duration-hero: 1.6s;       /* respiration de l'image du hero */
  --duration-ambient: 12s;     /* mouvement continu quasi imperceptible (Ken Burns) */
  --duration-pulse: 2.4s;      /* pulsation des villes de la zone de couverture */
  --duration-sheen: 8s;        /* reflet métallique de la carte Club */
  --duration-autoplay: 6s;     /* durée d'affichage d'un pôle dans le carrousel mobile (= POLES_AUTOPLAY_MS) */
  --duration-quick: 0.25s;     /* bordures et ombres de survol */
  --duration-spin: 0.6s;       /* spinner des boutons */
  --space-9: 40px;
  /* alphas récurrents */
  --scrim: rgba(10,10,10,0.78);
  --scrim-strong: rgba(10,10,10,0.85);
  --border-subtle: rgba(10,10,10,0.08);
  --surface-glass: rgba(228,226,220,0.94);
  --gold-glow: rgba(212,184,118,0.35);
}

/* Filet de sécurité global : toute transition/animation non couverte par une
   règle prefers-reduced-motion dédiée plus bas est aussi neutralisée ici. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--gray-bg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* -------------------- shared bits -------------------- */

.kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.kicker--gold { color: var(--gold-light); }
.kicker--gray { color: var(--gray-2); }
/* sur fond sombre, --gray-3 (7:1) remplace --gray-2 */
.page-section--dark .kicker--gray,
.social-proof .kicker--gray,
.vision-teaser .kicker--gray,
.club-teaser .kicker--gray,
.cta-band .kicker--gray,
.newsletter .kicker--gray { color: var(--gray-3); }
.kicker--icon {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.kicker-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  color: var(--black);
  font-size: var(--text-2xl);
}
.section-title--light { color: var(--white); }

.section-subtitle {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--gray-2);
  font-weight: 300;
  max-width: 560px;
  /* margin auto : sans ça, le paragraphe (largeur bridée à 560px) reste
     collé au bord gauche de .section-head au lieu d'être centré sous le
     titre, alors que .section-head force déjà text-align:center — même
     centrage que .contact__subtitle, qui l'a déjà. */
  margin: var(--space-4) auto 0;
}

@media (min-width: 901px) {
  .section-title { font-size: var(--text-3xl); }}

.section-inner { max-width: 1520px; margin: 0 auto; }

.section-head {
  text-align: center;
  margin-bottom: 44px;
}
@media (min-width: 901px) {
  .section-head { margin-bottom: 72px; }}

.btn {
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-6);
  background: transparent;
  cursor: pointer;
  appearance: none;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-out-soft);
}
.btn:hover { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }}
.btn--outline-gold {
  color: var(--white);
  border: 1.5px solid var(--gold-light);
}
.btn--outline-gold:hover {
  background: var(--gold-solid);
  border-color: var(--gold-solid);
}

/* CTA WhatsApp : couleur/logo de marque WhatsApp plutôt que le traitement
   doré des autres boutons du site — un bouton WhatsApp doit rester
   identifiable au premier coup d'œil, indépendamment de la charte Azur Gestion. */
.btn--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--black); /* blanc sur #25d366 = 1,98:1 ; noir = 10,6:1 (AA) */
  background: var(--whatsapp);
  border: 1.5px solid var(--whatsapp);
}
.btn--whatsapp:hover {
  background: var(--whatsapp-dark);
  border-color: var(--whatsapp-dark);
}
.btn--whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }

/* variante de .btn--outline-gold pour fond clair (texte blanc illisible sur
   page-section clair) — ex. La Vision, CTA hors hero sur fond blanc/gris clair */
.btn--outline-dark {
  color: var(--black);
  border: 1.5px solid var(--black);
}
.btn--outline-dark:hover {
  background: var(--black);
  color: var(--white);
}

/* Niveau 1 — primaire : action de conversion macro-objectif (hero, Club dédié) */
/* --gold-solid sur fond blanc de texte ne passe pas WCAG AA (3.53:1) ;
   --gold-dark assombrit juste assez pour atteindre 5.22:1 avec du texte blanc. */
.btn--primary {
  color: var(--white);
  background: var(--gold-dark);
  border: 1.5px solid var(--gold-dark);
}
/* volontairement non fusionné avec --gold-dark (Phase 2) : c'est l'état
   hover, plus sombre que le repos pour donner un vrai retour au survol —
   les deux doivent rester distincts. */
.btn--primary:hover {
  background: var(--gold-darker);
  border-color: var(--gold-darker);
}

/* CTA "Devenir membre" : le plus exclusif du site, traitement différent —
   une bordure dorée qui se dessine au survol plutôt que le scale générique */
.btn--club {
  position: relative;
  overflow: visible;
}
.btn--club:hover {
  transform: none;
}
.btn--club::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--gold-light);
  clip-path: inset(0 100% 100% 0);
  transition: clip-path var(--duration-slow) var(--ease-out-soft);
  pointer-events: none;
}
.btn--club:hover::before {
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .btn--club::before { transition: none; }}

/* Niveau 3 — tertiaire : découverte, pas de transaction (Care, Club dans la grille).
   Même police/casse que .btn, cible tactile >= 44 px, flèche qui glisse de 4 px au survol,
   soulignement qui se dessine au survol (fond dégradé animé, signature répétée sur tous les liens texte) */
.btn--tertiary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  text-decoration: none;
  color: var(--gray-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(50% + 12px) / 0 1px;
  border: none;
  transition: color var(--duration-fast) var(--ease-standard), background-size var(--duration-base) var(--ease-out-soft);
}
.btn--tertiary:hover {
  color: var(--gold-light);
  background-size: 100% 1px;
}
.btn--tertiary::after {
  content: '\2192';
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.btn--tertiary:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .btn--tertiary, .btn--tertiary::after { transition: none; }}
/* var(--gray-3) passe l'AA sur fond noir (7.04:1) mais pas sur fond clair (2.41:1) ;
   var(--gray-2) (déjà utilisé pour le texte muet sur fond clair ailleurs) passe à 4.56:1. */
.fleet__card .btn--tertiary {
  color: var(--gray-2);
}
.fleet__card .btn--tertiary:hover {
  color: var(--gold-solid);
}

.link-underline {
  text-decoration: none;
  color: var(--white);
  border-bottom: 1.5px solid var(--gold-light);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 6px;
  display: inline-block;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.link-underline:hover {
  color: var(--gold-light);
  border-color: var(--white);
}
/* variante pour usage sur fond clair (--gray-bg / --gray-bg-alt) */
.link-underline--dark {
  color: var(--gold-brown);
  border-color: var(--gold-brown);
}
.page-section--dark .link-underline--dark,
.contact .link-underline--dark { color: var(--gold-light); border-color: var(--gold-light); }
.link-underline--dark:hover {
  color: var(--black);
  border-color: var(--black);
}

.cta-link-wrap { text-align: center; margin-top: var(--space-7); }

/* -------------------- image placeholder -------------------- */

/* Etat volontaire en attendant les vraies photos : dégradé sombre + nom de la
   marque en filigrane serif (plutôt qu'un hachurage qui lit comme une image
   cassée), légende en bas façon cartel de musée. Générique à dessein (pas de
   nom de modèle dans le placeholder lui-même) : le nom du véhicule figure
   déjà dans le bloc texte sous l'image, l'y dupliquer était redondant. */
.img-placeholder {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--black-alt) 0%, var(--black) 100%);
}
.img-placeholder::before {
  content: 'AZUR GESTION';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(26px, 9vw, 52px); /* titre fluide du hero mobile : seule taille hors échelle --text-*, volontaire */
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.05);
  white-space: nowrap;
  pointer-events: none;
}
.img-placeholder::after {
  content: attr(data-caption);
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 14px var(--space-4);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold-light);
}
/* variante claire : utilisée sur fond clair (--gray-bg / --gray-bg-alt) là où
   .img-placeholder (pensé pour un fond noir plein cadre) lirait comme un trou */
.img-placeholder--light { background: linear-gradient(160deg, var(--surface-soft) 0%, var(--gray-bg-alt) 100%); }
.img-placeholder--light::before { color: rgba(10,10,10,0.05); }
.img-placeholder--light::after { color: var(--gold-solid); }

/* -------------------- header -------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-slow) var(--ease-standard), border-color var(--duration-slow) var(--ease-standard);
}
.site-header.is-scrolled {
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header__bar {
  max-width: 1520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--space-9);
}
@media (max-width: 1199px) {
  .site-header__bar { padding: var(--space-2) 20px; }}

.site-header__logo {
  text-decoration: none;
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .site-header__logo { font-size: var(--text-xl); }}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 1199px) {
  .site-header__nav { display: none; }}

.site-header__link {
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-4);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.site-header__link:hover,
.site-header__link.is-active {
  color: var(--gold-light);
  border-bottom: 2px solid var(--gold-light);
}

.site-header__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  /* 15px/13px de marge autour des 3 barres (13px de contenu) porte la cible
     tactile à ~44px de haut / ~52px de large, conforme aux recommandations
     d'accessibilité tactile (mesuré à 42×29px avant ce correctif) */
  padding: 15px 13px;
}
@media (max-width: 1199px) {
  .site-header__burger { display: flex; }}
.site-header__burger span {
  display: block;
  height: 1px;
  background: var(--white);
  width: 26px;
}
.site-header__burger span:last-child { width: 26px; scale: 0.6923 1; transform-origin: left center; } /* 18 px visuels via scale (pas de width animée) */
/* burger -> croix : 3 traits espacés de 6 px (1 px + gap 5 px) */
.site-header__burger span {
  transition: translate var(--duration-base) var(--ease-signature), rotate var(--duration-base) var(--ease-signature),
              opacity var(--duration-fast) var(--ease-standard), scale var(--duration-base) var(--ease-signature);
}
.site-header__burger[aria-expanded="true"] span:nth-child(1) { translate: 0 6px; rotate: 45deg; }
.site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3) { scale: 1 1; translate: 0 -6px; rotate: -45deg; }

.site-header__mobile-menu {
  display: flex;
  visibility: hidden;
  opacity: 0;
  translate: 0 -8px;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-signature), translate var(--duration-base) var(--ease-signature),
              visibility 0s linear var(--duration-base);
  position: fixed;
  inset: 0;
  top: var(--header-height, 64px);
  background: var(--black);
  z-index: 999;
  flex-direction: column;
  padding: 44px 28px;
  gap: 30px;
  overflow-y: auto;
}
.site-header__mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
  transition-delay: 0s;
}
@media (min-width: 1200px) {
  .site-header__mobile-menu { display: none; }
}
/* le défilement de la page est verrouillé tant que le menu est ouvert */
html.is-menu-open { overflow: hidden; }
/* liens du menu : entrée en cascade */
.site-header__mobile-menu a {
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--duration-base) var(--ease-signature) calc(var(--i, 0) * var(--stagger-step)),
              translate var(--duration-base) var(--ease-signature) calc(var(--i, 0) * var(--stagger-step));
}
.site-header__mobile-menu.is-open a { opacity: 1; translate: 0 0; }
.site-header__mobile-menu a:nth-child(1) { --i: 1; }
.site-header__mobile-menu a:nth-child(2) { --i: 2; }
.site-header__mobile-menu a:nth-child(3) { --i: 3; }
.site-header__mobile-menu a:nth-child(4) { --i: 4; }
.site-header__mobile-menu a:nth-child(5) { --i: 5; }
.site-header__mobile-menu a:nth-child(6) { --i: 6; }
.site-header__mobile-menu a:nth-child(7) { --i: 7; }
.site-header__mobile-menu a {
  text-decoration: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* -------------------- hero -------------------- */

.hero {
  position: relative;
  min-height: 100vh; /* repli si 100svh non supporté */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  overflow: hidden;
  /* garantit un dégagement sous le header fixe : sur un écran à faible
     hauteur de viewport, un contenu de hero un peu long (Club : kicker +
     carte membre + titre + sous-titre) peut sinon passer sous le header
     au lieu d'au-dessus, puisque le centrage vertical ne réserve par
     défaut aucun espace pour lui. */
  padding-top: 96px;
  box-sizing: border-box;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform, translate;
  /* ancrée en bas : le zoom final (1.12) déborde vers le HAUT du cadre, ce qui
     donne la marge nécessaire au parallax (translate vers le bas, <= 12 % de la
     hauteur) sans jamais laisser apparaître de bande vide */
  transform-origin: center bottom;
  scale: 1.12;
  animation: hero-breathe var(--duration-hero) var(--ease-out-soft) forwards;
}
/* respiration sur la propriété `scale` : `transform`/`translate` restent libres pour le parallax JS */
@keyframes hero-breathe {
  from { scale: 1.2; }
  to { scale: 1.12; }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.65) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 0 var(--space-5);
  color: var(--white);
}
.hero__title,
.hero__subtitle,
.hero__cta-group {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slower) var(--ease-signature), transform var(--duration-slower) var(--ease-signature);
}
.hero.is-loaded .hero__title { opacity: 1; transform: translateY(0); }
.hero.is-loaded .hero__subtitle { opacity: 1; transform: translateY(0); transition-delay: calc(2 * var(--stagger-step)); }
.hero.is-loaded .hero__cta-group { opacity: 1; transform: translateY(0); transition-delay: calc(4 * var(--stagger-step)); }

@media (prefers-reduced-motion: reduce) {
  .hero__img { animation: none; scale: none; translate: none; }
  .hero__title, .hero__subtitle, .hero__cta-group {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--space-5) 0;
  letter-spacing: 0.01em;
}
@media (min-width: 901px) {
  .hero__title { font-size: var(--text-4xl); }
  /* accueil : H1 long (3 pays + 3 services) -> corps réduit pour rester sur 2-3 lignes */
  .page-home .hero__title { font-size: var(--text-3xl); }}
.hero__subtitle {
  font-size: var(--text-base);
  line-height: 1.7;
  font-weight: 300;
  color: var(--gray-4);
  max-width: 620px;
  margin: 0 auto var(--space-9);
}
@media (min-width: 901px) {
  .hero__subtitle { font-size: var(--text-lg); margin-bottom: var(--space-7); }}
.hero__cta-group {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .hero__cta-group { flex-direction: column; align-items: stretch; }}

/* rangée de boutons hors hero (ex. La Vision : manifeste, clôture "Nous rencontrer") —
   même mise en page que .hero__cta-group, sans l'animation d'entrée liée à .hero.is-loaded */
.btn-group {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
@media (max-width: 480px) {
  .btn-group { flex-direction: column; align-items: stretch; }}

/* -------------------- réassurance -------------------- */

.reassurance {
  background: var(--black);
  padding: var(--space-2) 20px var(--space-7);
}
.reassurance__bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-4);
  font-weight: 300;
}
.reassurance__sep { color: var(--gray-3); }
@media (max-width: 640px) {
  .reassurance__bar { flex-direction: column; gap: 10px; }
  .reassurance__sep { display: none; }}

/* -------------------- pôles intro -------------------- */

.poles-intro {
  background: var(--black);
  padding: var(--section-y-mobile) var(--section-x-mobile) var(--space-8);
}
@media (min-width: 901px) {
  .poles-intro { padding: var(--section-y-desktop) var(--section-x-desktop) 110px; } /* 110px : respiration avant le carrousel des services, exception documentée */
}
.poles-intro .section-title { color: var(--white); }
.poles-intro__text {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--gray-4);
  font-weight: 300;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}
@media (min-width: 901px) {
  .poles-intro__text { font-size: var(--text-lg); }}

/* -------------------- pôles -------------------- */

.pole {
  position: relative;
  height: 100vh; /* repli si 100svh non supporté */
  height: 100svh;
  display: flex;
  align-items: center;
  background: var(--black);
  overflow: hidden;
}
/* Surdimensionné (130% de haut, décalé de -15%) pour que le parallax ait de la
   marge à parcourir sans jamais découvrir le fond de la section suivante — le
   clipping réel se fait de toute façon au niveau de .pole (overflow:hidden),
   donc ce débordement ne casse jamais la mise en page. Le mask-image fond les
   bords haut/bas vers le noir (--black, déjà le fond de la section) : comme le
   fondu est porté par ce même élément que le parallax transforme, il reste
   toujours visible au bon endroit quel que soit le décalage appliqué. */
.pole__bg {
  position: absolute;
  top: -15%;
  left: 0;
  right: 0;
  height: 130%;
  z-index: 0;
  overflow: hidden;
  /* vignette resserrée aux bords haut/bas (au lieu d'un quart d'image fondu
     de chaque côté) : les pôles sont désormais des panels plein écran
     autonomes, plus des sections qui s'enchaînent en continu, la marge de
     sécurité pour le parallax n'a donc plus besoin d'un fondu aussi large */
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.pole__bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pole__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--grain);
  background-size: 180px 180px;
  background-repeat: repeat;
}
/* zone plate (pas juste un dégradé continu) sous toute la largeur du bloc de
   texte, puis fondu vers l'image : un dégradé qui s'éclaircit dès le premier
   pixel ne garantit un contraste AA que sur la toute première ligne — sur une
   zone claire de la photo, le texte en fin de paragraphe devient illisible.
   La zone plate couvre la largeur réelle de .pole__content (max-width 560px
   + le padding du row) quel que soit le contenu de l'image derrière. */
.pole__scrim--left { background-image: var(--grain), linear-gradient(90deg, var(--scrim) 0%, var(--scrim) 40%, rgba(10,10,10,0.32) 58%, rgba(10,10,10,0) 78%); }
.pole__scrim--right { background-image: var(--grain), linear-gradient(270deg, var(--scrim) 0%, var(--scrim) 40%, rgba(10,10,10,0.32) 58%, rgba(10,10,10,0) 78%); }
.pole__scrim--left, .pole__scrim--right { background-size: 180px 180px, auto; background-repeat: repeat, no-repeat; }
/* Photo produits Care : pas de zone "vide" dans le cadrage (flacons + étiquettes
   sur toute la largeur), le scrim directionnel standard laisse les textes des
   étiquettes concurrencer le texte du bloc — overlay plus soutenu et plus large. */
.pole__scrim--strong.pole__scrim--right { background-image: var(--grain), linear-gradient(270deg, var(--scrim-strong) 0%, var(--scrim-strong) 45%, rgba(10,10,10,0.4) 62%, rgba(10,10,10,0) 82%); background-size: 180px 180px, auto; background-repeat: repeat, no-repeat; }

/* padding horizontal calé sur l'empreinte des flèches du carrousel
   (.poles-carousel-arrow, position fixe left/right:20px, 44px de large —
   12px/36px en mobile) + une marge de respiration, pour qu'un panel avec le
   texte à gauche (.pole__row--start) ou à droite (.pole__row--end) ne passe
   jamais derrière une flèche, quel que soit le panel actif. */
.pole__row {
  position: relative;
  z-index: 2;
  max-width: 1520px;
  margin: 0 auto;
  width: 100%;
  padding: 0 96px;
  display: flex;
}
@media (max-width: 767px) {
  .pole__row { padding: 0 var(--space-8); }}
.pole__row--start { justify-content: flex-start; }
.pole__row--end { justify-content: flex-end; }

.pole__content {
  max-width: 560px;
  color: var(--white);
}
.pole__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 var(--space-5) 0;
}
@media (min-width: 901px) {
  .pole__title { font-size: var(--text-3xl); }}
.pole__desc {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--gray-4);
  font-weight: 300;
  margin: 0 0 var(--space-6) 0;
}

/* scroll-reveal: pole sections — stagger badge -> titre -> description -> CTA,
   même courbe que le hero (var(--ease-signature)), déclenché au scroll
   (voir IntersectionObserver dédié dans main.js, seuil 30%) */
.pole__content .kicker--icon,
.pole__content .pole__title,
.pole__content .pole__desc,
.pole__content > a {
  opacity: 0;
  translate: 0 24px;
  transition: opacity var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s), translate var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s);
}
.pole.is-in-view .pole__content .kicker--icon { opacity: 1; translate: 0 0; --reveal-delay: 0s; }
.pole.is-in-view .pole__content .pole__title { opacity: 1; translate: 0 0; --reveal-delay: calc(1 * var(--stagger-step)); }
.pole.is-in-view .pole__content .pole__desc { opacity: 1; translate: 0 0; --reveal-delay: calc(2 * var(--stagger-step)); }
.pole.is-in-view .pole__content > a { opacity: 1; translate: 0 0; --reveal-delay: calc(3 * var(--stagger-step)); }

/* Les images des 3 pôles n'ont plus d'effet de révélation qui leur est propre
   (balayage clip-path, flou de mise au point) : dans le carrousel épinglé,
   le panel entier glisse déjà à l'écran (voir .poles-carousel-track .pole dans
   main.js/plus bas) — ajouter une seconde animation sur l'image en plus de ce
   glissement donnait une entrée surchargée, pas le mouvement unique et doux
   demandé. L'image s'affiche donc net dès que le panel devient visible ; seul
   le texte (kicker/titre/description/CTA ci-dessus) garde son propre fondu. */

/* Care : léger zoom en boucle continue, quasi imperceptible (photo produit,
   doit rester "vivante" sans jamais lire comme un GIF qui tourne) */
.pole--kenburns .pole__bg-img {
  animation: pole-kenburns var(--duration-ambient) ease-in-out infinite alternate;
}
@keyframes pole-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .pole__content .kicker--icon,
  .pole__content .pole__title,
  .pole__content .pole__desc,
  .pole__content > a {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pole--kenburns .pole__bg-img {
    animation: none !important;
  }}

/* -------------------- flotte -------------------- */

.fleet {
  position: relative;
  background: var(--gray-bg);
  padding: var(--section-y-mobile) var(--section-x-mobile);
}
@media (min-width: 901px) {
  .fleet { padding: var(--section-y-desktop) var(--section-x-desktop); }}
.fleet__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
}
@media (min-width: 769px) {
  .fleet__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }}
.fleet__card {
  /* fond + bordure propres à la carte : sans ça, l'image (placeholder sombre)
     et le texte (assis directement sur le fond de la section) se lisent
     comme deux blocs empilés au hasard plutôt que comme une seule carte */
  background: var(--white);
  border: 1px solid var(--border-subtle);
  padding-bottom: var(--space-5);
  /* apparition = opacity + translate (décalage --reveal-delay), survols = transform/ombre
     SANS retard : le stagger ne s'applique plus qu'à l'entrée */
  opacity: 0;
  translate: 0 20px;
  transition: opacity var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s),
              translate var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s),
              transform var(--duration-fast) var(--ease-out-soft),
              border-color var(--duration-quick) var(--ease-standard), box-shadow var(--duration-quick) var(--ease-standard);
}
.fleet__card:hover {
  border-color: var(--gold-solid);
  box-shadow: var(--shadow-card);
}
.fleet[data-reveal].is-visible .fleet__card { opacity: 1; translate: 0 0; }
.fleet__card:nth-child(1) { --reveal-delay: 0s; }
.fleet__card:nth-child(2) { --reveal-delay: calc(1 * var(--stagger-step)); }
.fleet__card:nth-child(3) { --reveal-delay: calc(2 * var(--stagger-step)); }

.fleet__image {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-4);
  overflow: hidden;
}
/* variations de ratio pour éviter 5 rectangles identiques d'affilée sur une
   page longue (Import : "Nos derniers imports" en portrait, cross-sell en
   paysage large) — à documenter pour le brief image : livrer les photos
   correspondantes dans ces proportions dès le départ */
.fleet__image--portrait { aspect-ratio: 4 / 5; }
.fleet__image--wide { aspect-ratio: 16 / 9; }
.fleet__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out-soft);
}
.fleet__card:hover .fleet__image img {
  transform: scale(1.05);
}
.fleet__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  margin: 0 var(--space-5) var(--space-2) var(--space-5);
  color: var(--black);
}
.fleet__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--gray-2);
  font-weight: 300;
  margin: 0 var(--space-5) var(--space-4) var(--space-5);
}
.fleet__card > a.btn--tertiary {
  margin-left: var(--space-5);
}

/* -------------------- blog : scaffolding (Phase 6 du document de finalisation) --------------------
   Étiquette "à venir" posée sur les cartes placeholder du blog (pilier/
   satellite), tant qu'aucun article n'est rédigé — voir site/blog/. */
.blog-status {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-brown);
  border: 1px solid var(--gold-brown);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  margin: 0 var(--space-5) var(--space-2) var(--space-5);
}
.blog-status--pillar {
  color: var(--white);
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}

/* -------------------- pourquoi azur -------------------- */

/* fond légèrement différencié de --gray-bg (identique à .fleet juste avant et
   .social-proof juste après) pour éviter que ces 3 sections claires d'affilée
   ne se lisent comme un seul aplat sans respiration */
.why {
  background: var(--gray-bg-alt);
  padding: var(--section-y-mobile) var(--section-x-mobile);
}
@media (min-width: 901px) {
  .why { padding: var(--section-y-desktop) var(--section-x-desktop); }}

.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 20px;
}
/* -------------------- rupture de composition : carte "Un seul univers" mise en avant --------------------
   Sans ça, "Pourquoi choisir Azur Gestion" reste une grille symétrique
   classique alors que le scroll horizontal des Métiers et la carte Club en
   diagonale cassent déjà la grille ailleurs sur la page — contraste trop
   marqué. Le premier item (la promesse de marque la plus large : "un seul
   univers" vente/location/entretien) occupe un bloc 2×2, les trois autres
   se répartissent autour en bento plutôt qu'en 4 colonnes identiques. */
@media (min-width: 901px) {
  .why__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-6);
  }
  /* même padding, même taille d'icône et de titre que les 3 autres cartes
     (voir .why__item / .why__icon svg / .why__title plus bas) : seule la
     place occupée dans la grille change, pas le traitement interne de la
     carte, pour que les 4 restent cohérentes entre elles. */
  .why__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .why__item:nth-child(2) { grid-column: 3 / 4; grid-row: 1; }
  .why__item:nth-child(3) { grid-column: 4 / 5; grid-row: 1; }
  .why__item:nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
}

.why__item {
  position: relative;
  text-align: center;
  padding: var(--space-6) 20px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  opacity: 0;
  translate: 0 16px;
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard),
              opacity var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s),
              translate var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s);
}
.why__item:hover {
  border-color: var(--gold-solid);
  box-shadow: var(--shadow-card);
}
.why[data-reveal].is-visible .why__item { opacity: 1; translate: 0 0; }
.why__item:nth-child(1) { --reveal-delay: 0s; }
.why__item:nth-child(2) { --reveal-delay: calc(1 * var(--stagger-step)); }
.why__item:nth-child(3) { --reveal-delay: calc(2 * var(--stagger-step)); }
.why__item:nth-child(4) { --reveal-delay: calc(3 * var(--stagger-step)); }
.why__icon {
  display: inline-flex;
  color: var(--gold-solid);
  margin-bottom: var(--space-4);
  scale: 0.8;
  opacity: 0;
  /* rebond remplacé par --ease-signature (Phase 2) : c'était la seule courbe
     à ressort de tout le site, une entrée bondissante détonnant avec le
     langage de mouvement sobre utilisé partout ailleurs (fade + translateY
     sans dépassement), plutôt qu'un moment de délice pensé comme tel. */
  transition: scale var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s), opacity var(--duration-slow) var(--ease-out-soft) var(--reveal-delay, 0s);
}
.why[data-reveal].is-visible .why__icon {
  scale: 1;
  opacity: 1;
}
.why__icon svg {
  width: 40px;
  height: 40px;
}
.why__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  margin: 0 0 var(--space-3) 0;
  color: var(--black);
}
.why__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--gray-2);
  margin: 0;
  font-weight: 300;
}

/* scroll-reveal: fade + rise (why / club-teaser) */
section[data-reveal-variant="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slower) var(--ease-signature), transform var(--duration-slower) var(--ease-signature);
}
section[data-reveal-variant="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------- la vision -------------------- */

.vision-teaser {
  background-image: var(--grain), linear-gradient(0deg, var(--scrim-strong) 0%, var(--scrim) 100%), url('../assets/img/vision-mobile.webp');
  background-size: 180px 180px, cover, cover;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: center;
  padding: var(--section-y-mobile) var(--section-x-mobile);
  text-align: center;
}
@media (min-width: 901px) {
  .vision-teaser {
    background-image: var(--grain), linear-gradient(0deg, var(--scrim-strong) 0%, var(--scrim) 100%), url('../assets/img/vision-desktop.webp');
    background-size: 180px 180px, cover, cover;
    padding: var(--section-y-desktop) var(--section-x-desktop);
  }}
.vision-teaser__inner { max-width: 720px; }
.vision-teaser__text {
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--gray-5);
  font-weight: 300;
  margin: 0 0 30px 0;
}
@media (min-width: 901px) {
  .vision-teaser__text { font-size: var(--text-lg); }}
.vision-teaser .btn--tertiary { color: var(--gray-3); }
.vision-teaser .btn--tertiary:hover { color: var(--gold-light); }

/* -------------------- preuve sociale -------------------- */
/* Composant partagé par plusieurs pages (Import, Prestige Rent, Detailing
   Studio, Club, La Vision, l'accueil) sur fond clair par défaut. La variante
   sombre utilisée uniquement à l'accueil, à la suite de "La Vision", est
   scopée sous .page-home (voir plus bas) plutôt que modifiée ici. */
.social-proof {
  background: var(--gray-bg);
  padding: var(--section-y-mobile) var(--section-x-mobile);
}
@media (min-width: 901px) {
  .social-proof { padding: var(--section-y-desktop) var(--section-x-desktop); }}

.social-proof__testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto 56px;
}
@media (min-width: 769px) {
  .social-proof__testimonials { grid-template-columns: repeat(3, 1fr); }}
.social-proof__testimonial {
  margin: 0;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  opacity: 0;
  translate: 0 20px;
  transition: opacity var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s),
              translate var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s);
}
.social-proof[data-reveal].is-visible .social-proof__testimonial { opacity: 1; translate: 0 0; }
.social-proof__testimonial:nth-child(1) { --reveal-delay: 0s; }
.social-proof__testimonial:nth-child(2) { --reveal-delay: calc(1 * var(--stagger-step)); }
.social-proof__testimonial:nth-child(3) { --reveal-delay: calc(2 * var(--stagger-step)); }
.social-proof__testimonial p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.55;
  color: var(--black);
  margin: 0 0 var(--space-5) 0;
}
.social-proof__testimonial cite {
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-2);
}

.social-proof__partners {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 56px;
}
.social-proof__partner-tag {
  padding: 10px 18px;
  border: 1px solid rgba(10,10,10,0.15);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-2);
}

.social-proof__stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-7);
  text-align: center;
}
.social-proof__stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--gold-solid);
  margin-bottom: 6px;
}
.social-proof__stat-label {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-2);
}

/* -------------------- club teaser -------------------- */

/* mise en page complète (image plein format + parallax) définie plus bas,
   dans le bloc dédié "ACCUEIL — rupture de grille & micro-interactions" */

.club-teaser__desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--gray-5);
  font-weight: 300;
  margin: 0 0 30px 0;
  max-width: 460px;
}

.club-teaser__avantages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 0 0 34px 0;
  max-width: 460px;
}
@media (min-width: 601px) {
  .club-teaser__avantages { grid-template-columns: repeat(3, 1fr); }}
/* blanc cassé plutôt que doré : la section a déjà le badge "Azur Club" (kicker
   doré) comme accent, et le CTA "Devenir membre" ; répéter le doré sur les 3
   titres d'avantages en plus du sweep lumineux et de la carte membre diluait
   l'accent au lieu de le renforcer. */
.club-teaser__avantage h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--surface-soft);
  margin: 0 0 var(--space-2) 0;
}
.club-teaser__avantage p {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--gray-3);
  font-weight: 300;
  margin: 0;
}

/* -------------------- zone de couverture -------------------- */

/* Section volontairement claire (--gray-bg-alt, comme .why juste après
   .fleet) plutôt que la photo sombre d'origine : Vision/Avis/Stats + Club
   forment déjà un passage sombre continu juste avant, et Contact + Footer
   enchaînent en sombre juste après le FAQ clair. Sans cette section claire,
   la deuxième moitié de la page enchaînait 4 sections sombres quasi sans
   interruption (un seul point de respiration, le FAQ). Coverage clair +
   FAQ clair juste après recréent un vrai palier clair entre les deux blocs
   sombres, avec deux vraies ruptures de ton dans le scroll (Club → Coverage,
   FAQ → Contact) plutôt qu'une seule. La photo (déjà utilisée par la
   section avant sa mise en clair) reste en toile de fond mais voilée par un
   aplat --gray-bg-alt à forte opacité : la section garde sa profondeur/
   texture sans redevenir une section sombre qui casserait à nouveau le
   rythme corrigé. */
.coverage {
  background-image: linear-gradient(var(--surface-glass), var(--surface-glass)), var(--grain), url('../assets/img/coverage-mobile.webp');
  background-size: cover, 180px 180px, cover;
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: center;
  padding: var(--section-y-mobile) var(--section-x-mobile);
}
@media (min-width: 901px) {
  .coverage {
    background-image: linear-gradient(var(--surface-glass), var(--surface-glass)), var(--grain), url('../assets/img/coverage-desktop.webp');
    background-size: cover, 180px 180px, cover;
    padding: var(--section-y-desktop) var(--section-x-desktop);
  }}
.coverage__groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 601px) {
  .coverage__groups {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    max-width: 760px;
  }}
.coverage__country {
  color: var(--gold-brown);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
  font-weight: 600;
}
.coverage__tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* point géolocalisé pulsé : transforme la simple liste de villes en un effet
   "réseau actif" façon carte de couverture, sans avoir à dessiner une vraie
   carte géographique (les villes ne sont pas positionnées les unes par
   rapport aux autres dans ce layout en colonnes par pays). Le doré reste
   uniquement sur le point pulsé et le libellé de pays (accent unique de la
   section) : bordure et texte des 11 tags repassent en gris neutre plutôt
   que doré partout, pour ne pas diluer cet accent sur toute la grille. */
.coverage__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 22px;
  border: 1px solid rgba(10,10,10,0.18);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--gray-1);
  opacity: 0;
  scale: 0.9;
  transition: opacity var(--duration-slow) var(--ease-out-soft) var(--reveal-delay, 0s), scale var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s);
}
.coverage[data-reveal].is-visible .coverage__tag { opacity: 1; scale: 1; }
.coverage__tag:nth-child(1) { --reveal-delay: 0s; }
.coverage__tag:nth-child(2) { --reveal-delay: calc(1 * var(--stagger-step)); }
.coverage__tag:nth-child(3) { --reveal-delay: calc(2 * var(--stagger-step)); }
.coverage__tag:nth-child(4) { --reveal-delay: calc(3 * var(--stagger-step)); }
.coverage__tag:nth-child(5) { --reveal-delay: calc(3 * var(--stagger-step)); }
.coverage__tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--gold-brown);
  flex-shrink: 0;
  animation: coverage-pulse var(--duration-pulse) ease-in-out infinite;
}
.coverage__tag:nth-child(2)::before { animation-delay: calc(5 * var(--stagger-step)); }
.coverage__tag:nth-child(3)::before { animation-delay: calc(10 * var(--stagger-step)); }
.coverage__tag:nth-child(4)::before { animation-delay: calc(15 * var(--stagger-step)); }
@keyframes coverage-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122,92,30,0.45); }
  50% { box-shadow: 0 0 0 4px rgba(122,92,30,0); }
}
@media (prefers-reduced-motion: reduce) {
  .coverage__tag::before { animation: none; box-shadow: 0 0 0 2px rgba(122,92,30,0.25); }}

/* -------------------- faq -------------------- */

.faq {
  background: var(--gray-bg);
  padding: var(--section-y-mobile) var(--section-x-mobile);
}
@media (min-width: 901px) {
  .faq { padding: var(--section-y-desktop) var(--section-x-desktop); }}

.faq__list {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.faq__item {
  border-top: 1px solid rgba(10,10,10,0.12);
  padding-top: 28px;
}
.faq__item h3 { margin: 0; }
.faq__question {
  display: flex;
  align-items: center;
  min-height: 48px; /* cible tactile */
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--black);
}
@media (min-width: 901px) {
  .faq__question { font-size: var(--text-xl); }}
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gold-solid);
  transform: translate(-50%, -50%);
  transition: transform var(--duration-base) var(--ease-standard);
}
.faq__icon::before { width: 14px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 14px; }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* accordéon en CSS Grid : pas de JS pour calculer la hauteur, et ça reste
   fonctionnel (ouverture/fermeture) même sous prefers-reduced-motion —
   seule la transition disparaît via la règle globale, pas le mécanisme */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-signature);
  max-width: 720px;
}
.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}
.faq__answer > div {
  overflow: hidden;
}
.faq__answer p {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--gray-2);
  font-weight: 300;
  margin: 10px 0 0 0;
}
/* lien inline dans une réponse (pas un CTA autonome) : garde la casse et la
   taille du texte courant plutôt que le style bouton majuscules de
   .link-underline, pensé pour un lien isolé, pas une phrase */
.faq__answer-link {
  color: var(--gold-solid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq__answer-link:hover { color: var(--black); }

/* -------------------- contact -------------------- */

.contact {
  background: var(--black);
  padding: var(--section-y-mobile) var(--section-x-mobile);
}
@media (min-width: 901px) {
  .contact { padding: var(--section-y-desktop) var(--section-x-desktop); }}
/* grain réservé à l'accueil (voir --grain) : la section .contact est un
   composant partagé par toutes les pages, on ne touche pas son rendu ailleurs */
.page-home .contact {
  background-color: var(--black);
  background-image: var(--grain);
  background-size: 180px 180px;
  background-repeat: repeat;
}
.contact .section-head { text-align: center; }
.contact .contact__subtitle,
.page-section--dark .contact__subtitle,
.social-proof .contact__subtitle,
.cta-band .contact__subtitle,
.newsletter .contact__subtitle { color: var(--gray-5); }
.contact__subtitle {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--gray-2); /* fond clair par défaut (1,85:1 avec l'ancien --gray-5) ; sections sombres ci-dessous */
  font-weight: 300;
  max-width: 560px;
  margin: 18px auto 0;
}

/* widget de prise de RDV embarqué (Google Agenda, iframe) : l'apparence est pilotée par Google, seul l'espacement est géré ici. */
.booking-card {
  position: relative;
  max-width: 960px;
  margin: 0 auto var(--space-6);
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--gold-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-deep);
}
.gcal-embed {
  display: block;
  width: 100%;
  height: 760px;               /* le formulaire Google est plus haut en étroit */
  margin: 0;
  /* l'embed Google est transparent : sur les sections sombres du site, le texte
     (foncé) devenait illisible sur fond noir. Fond blanc opaque + thème clair
     forcé pour garantir le contraste, quelle que soit la section. */
  background: var(--white);
  color-scheme: light;
}
@media (min-width: 901px) {
  .gcal-embed { height: 680px; }}

/* -------------------- contact : regroupement visuel des champs --------------------
   Nouvelle structure (.contact__group), additive : ces règles ne s'activent
   que si des .contact__group existent dans le DOM (accueil et Import pour
   l'instant). Le formulaire "à plat" (.contact__form > .form-group
   directement, sans groupes) des autres pages n'est pas touché — leur
   comportement reste régi par les règles ci-dessus, inchangées. Objectif :
   remplacer un pavé de 7 champs sans hiérarchie par 2-3 groupes nommés,
   avec plus d'air entre eux, plutôt qu'un simple redécoupage en étapes qui
   aurait demandé de dupliquer la logique de validation JS existante. */
.contact__form .contact__group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-5);
  margin-bottom: var(--space-8);
}

/* -------------------- contact : champs secondaires repliables --------------------
   <details> natif plutôt qu'un toggle JS : accessible par défaut (clavier,
   lecteurs d'écran), pas de logique à dupliquer. Seuls des champs non
   requis sont masqués derrière (critères, téléphone, échéance) — jamais un
   champ required, pour ne pas piéger la validation JS existante sur un
   champ invisible que l'utilisateur ne peut pas corriger. */
.contact__form .contact__advanced {
  grid-column: 1 / -1;
  margin-bottom: var(--space-8);
}

/* une seule valeur pour l'écart entre deux lignes de champs, portée par la
   marge du .form-group plutôt que cumulée avec le row-gap de la grille
   (qui reste à 0) — évite un rythme vertical à deux vitesses */
.form-group { margin-bottom: var(--space-5); }
.form-group label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-3);
  margin-bottom: var(--space-2);
}
.form-group label em { color: var(--gray-2); font-style: normal; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-2); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(212, 184, 118, 0.18);
}
.form-group textarea { resize: vertical; }
.error-message {
  display: block;
  color: var(--accent-alert);
  font-size: var(--text-xs);
  margin-top: 6px;
  min-height: 14px;
}

/* -------------------- newsletter (Phase 7 du document de finalisation) --------------------
   Composant réutilisé en fin de page, juste avant le footer, sur
   l'ensemble des pages du site. Le snippet Brevo réel viendra remplacer
   ce formulaire de démonstration (voir TODO à chaque usage) —
   volontairement réduit à un champ email + un bouton, sans nom/téléphone,
   pour rester simple avant l'intégration réelle. Réutilise le style
   .form-group existant (pensé pour un fond sombre, cohérent avec
   page-section--dark) plutôt que d'en recréer un. */
/* Sur "La Vision", la newsletter suit directement le bandeau CTA sombre
   "Nous rencontrer" (au lieu d'une section claire comme sur les autres
   pages) : sans séparation les deux passages noirs se liraient comme un
   seul aplat. Même technique que .site-footer__bottom (bordure fine
   --black-alt) plutôt qu'une rupture de couleur. */
.page-la-vision .newsletter { border-top: 1px solid var(--black-alt); }
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}
.newsletter-form .form-group {
  flex: 1 1 240px;
  margin-bottom: 0;
}
/* le widget reCAPTCHA (304px de large) ne s'accorde pas avec le champ email
   flexible juste au-dessus : flex-basis 100% le force sur sa propre ligne
   dans ce conteneur flex-wrap, centré comme le reste du formulaire */
.newsletter-form .newsletter-recaptcha {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
}
.newsletter-form .newsletter-message {
  flex: 1 1 100%;
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--gold-light);
}
.newsletter-form .newsletter-message[hidden] { display: none; }
/* le widget reCAPTCHA fait 304 px : on le réduit sur les très petits écrans pour éviter tout débordement */
@media (max-width: 360px) {
  .newsletter-recaptcha .g-recaptcha { transform: scale(0.85); transform-origin: center top; }
}
.newsletter-form button[type="submit"] {
  flex-shrink: 0;
}

.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--white);
  border-radius: var(--radius-round);
  animation: btn-spin var(--duration-spin) linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after { animation-duration: var(--duration-cinematic); }}

/* -------------------- footer -------------------- */

.site-footer {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  padding: 56px 20px 28px;
  border-top: 1px solid var(--black-alt);
}
@media (min-width: 901px) {
  .site-footer { padding: 90px var(--space-9) var(--space-6); }}

.site-footer__grid {
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}
@media (min-width: 901px) {
  .site-footer__grid {
    grid-template-columns: minmax(240px, 1.3fr) 1fr 1fr 1fr;
    gap: var(--space-6);
  }}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.site-footer__desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--gray-3);
  max-width: 320px;
  margin: 0;
  font-weight: 300;
}

.site-footer__col-title {
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-3);
  margin: 0 0 20px 0;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.site-footer__links a {
  text-decoration: none;
  color: var(--gray-4);
  font-size: var(--text-sm);
  font-weight: 300;
}
/* même soulignement animé que le menu : trait doré qui se dessine depuis la gauche */
.site-footer__links a,
.site-footer__bottom a,
.site-footer__contact div a {
  background: linear-gradient(var(--gold-light), var(--gold-light)) no-repeat 0 calc(100% - 3px) / 0 1px;
  transition: color var(--duration-fast) var(--ease-standard), background-size var(--duration-base) var(--ease-signature);
}
.site-footer__links a:hover,
.site-footer__bottom a:hover,
.site-footer__contact div a:hover {
  color: var(--gold-light);
  background-size: 100% 1px;
  text-decoration: none;
}
.site-footer__whatsapp svg { transition: scale var(--duration-fast) var(--ease-out-soft); }
.site-footer__whatsapp:hover svg { scale: 1.12; }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: var(--text-sm);
  color: var(--gray-4);
  font-weight: 300;
  line-height: 1.6;
}
.site-footer__whatsapp {
  text-decoration: none;
  margin-top: var(--space-1);
  align-self: flex-start;
}

.site-footer__bottom {
  max-width: 1520px;
  margin: var(--space-6) auto 0;
  border-top: 1px solid var(--black-alt);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
@media (min-width: 901px) {
  .site-footer__bottom { margin-top: var(--space-9); }}
.site-footer__bottom div,
.site-footer__bottom a {
  font-size: var(--text-sm);
  color: var(--gray-3);
  font-weight: 300;
  text-decoration: none;
}
.site-footer__bottom a:hover { color: var(--gold-light); }

/* -------------------- page légale -------------------- */

.legal {
  background: var(--gray-bg);
  padding: 100px 20px 60px;
}
@media (min-width: 901px) {
  .legal { padding: 140px var(--space-9) 100px; }}
.legal__inner {
  max-width: 760px;
  margin: 0 auto;
}
.legal__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--black);
  margin: 0 0 var(--space-9) 0;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--black);
  margin: var(--space-9) 0 14px 0;
}
.legal p {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--gray-1);
  font-weight: 300;
  margin: 0 0 14px 0;
}
.legal a { color: var(--gold-brown); }

/* -------------------- pages secondaires (Import, Prestige Rent, Detailing
   Studio, Care, Club, La Vision, Contact) : composants génériques réutilisés
   d'une page à l'autre, dans le même langage visuel que l'accueil -------------------- */

.page-section {
  padding: var(--section-y-mobile) var(--section-x-mobile);
}
@media (min-width: 901px) {
  .page-section { padding: var(--section-y-desktop) var(--section-x-desktop); }}
.page-section--alt { background: var(--gray-bg-alt); }
.page-section--dark { background: var(--black); }
.page-section--dark .section-title,
.page-section--dark .manifesto__text { color: var(--white); }

/* hauteurs de hero secondaire : la page d'accueil garde .hero (100svh) pour
   elle seule, ces paliers évitent qu'une page de contenu secondaire n'impose
   un plein écran comme le hero principal */
/* min-height plutôt que height : si le contenu (ex. Club et sa carte membre)
   dépasse la hauteur cible sur un écran à faible hauteur de viewport, le
   hero s'agrandit pour rester entièrement visible plutôt que de chevaucher
   le header fixe ou de rogner le contenu. */
.hero--xl { min-height: 620px; }
@media (min-width: 901px) { .hero--xl { min-height: 92vh; }}
.hero--l { min-height: 560px; }
@media (min-width: 901px) { .hero--l { min-height: 86vh; }}
.hero--m { min-height: 460px; }
@media (min-width: 901px) { .hero--m { min-height: 70vh; }}
.hero--s { min-height: 360px; }
@media (min-width: 901px) { .hero--s { min-height: 52vh; }}
/* variante sans image (Club, quand le visuel est la carte membre elle-même) :
   carte à droite, titre/description/CTA à gauche. row-reverse plutôt que
   d'inverser l'ordre dans le HTML : la carte reste en premier dans le DOM
   (et donc en haut sur mobile, où les deux colonnes s'empilent), mais
   s'affiche visuellement à droite dès que la mise en page passe en ligne. */
.hero--card { justify-content: center; }
.hero--card .hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 1100px;
  text-align: center;
}
@media (min-width: 901px) {
  .hero--card .hero__content {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    text-align: left;
  }}
.hero--card .hero__text { min-width: 0; }
@media (min-width: 901px) {
  .hero--card .hero__text { flex: 1; }}

/* variante alignée à gauche (Import, Prestige Rent, Detailing Studio,
   Contact) : même conteneur que .pole__row plutôt que le centrage du hero
   d'accueil, pour un hero "page de contenu" cohérent avec les pôles */
.hero--left { justify-content: flex-start; }
.hero--left .hero__content {
  text-align: left;
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
@media (min-width: 901px) {
  .hero--left .hero__content { padding: 0 var(--space-9); }}
.hero--left .hero__title,
.hero--left .hero__subtitle { max-width: 680px; margin-left: 0; margin-right: 0; }
.hero--left .hero__subtitle { margin-bottom: 0; }

/* deux colonnes tête de section + liste (Import — Notre modèle) */
.model-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 901px) {
  .model-intro { grid-template-columns: 0.7fr 1.3fr; gap: var(--space-8); }}
.model-intro__head .section-title { max-width: 380px; }
.model-intro__text {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--gray-2);
  font-weight: 300;
  margin: var(--space-5) 0 0;
  max-width: 420px;
}

/* mesure resserrée, réutilisée pour tout panneau centré (formulaires,
   manifestes) qui n'a pas besoin de la largeur pleine de .section-inner */
.section-inner--narrow { max-width: 760px; margin: 0 auto; }

/* note sous une grille de tuiles (pays sourcés, etc.) */
.tile-grid-note {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gray-3);
  font-weight: 300;
}

/* liste numérotée (Import — Notre modèle) */
.numbered-list { display: flex; flex-direction: column; }
.numbered-list__item {
  display: flex;
  gap: var(--space-5);
  padding: 26px 0;
  border-top: 1px solid var(--gray-4);
}
.numbered-list__num {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--gray-5);
  min-width: 24px;
}
.numbered-list__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  margin: 0 0 var(--space-2) 0;
  color: var(--black);
}
.numbered-list__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--gray-2);
  margin: 0;
  font-weight: 300;
}

/* grille de tuiles séparées par un filet (marques Import, prestations
   Detailing, avantages Club) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gray-4);
  border: 1px solid var(--gray-4);
}
@media (min-width: 901px) {
  .tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .tile-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .tile-grid--6 { grid-template-columns: repeat(6, 1fr); }}
.tile-grid__item {
  background: var(--surface-raised);
  padding: var(--space-5) 20px;
  text-align: center;
  transition: background var(--duration-fast) var(--ease-standard);
}
.tile-grid__item:hover { background: var(--surface-gold-tint); }
.tile-grid__item--left {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 34px 26px;
}
.tile-grid__bar { width: 1px; height: 30px; background: var(--gold-light); }
.tile-grid__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--black);
}
.tile-grid__label--brand { font-size: var(--text-xl); letter-spacing: 0.02em; }

/* parcours en étapes numérotées (Import) */
.step-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4);
}
@media (min-width: 901px) {
  .step-list { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }}
/* display:flex column : sans lien, chaque .step-list__item se comporte
   exactement comme avant (empilement du haut vers le bas). Avec un lien
   (La Vision — "Notre modèle"), le comble via margin-top:auto ci-dessous
   pousse le lien en bas de la colonne, aligné avec les autres colonnes
   quelle que soit la longueur de la description au-dessus. */
.step-list__item { display: flex; flex-direction: column; text-align: center; }
.step-list__item .link-underline { margin-top: auto; padding-top: var(--space-3); }
.step-list__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--gold-brown);
  margin-bottom: var(--space-2);
}
.step-list__label {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--black);
  letter-spacing: 0.01em;
}

/* citation centrée façon manifeste (Prestige Rent, Club, La Vision) */
.manifesto { max-width: 860px; margin: 0 auto; text-align: center; }
.manifesto__text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.4;
  color: var(--black);
  margin: 0;
}
@media (min-width: 901px) {
  .manifesto__text { font-size: var(--text-2xl); }}
.manifesto--wide { max-width: 780px; text-align: left; }
.manifesto--wide .manifesto__text {
  font-size: var(--text-xl);
  line-height: 1.55;
  margin: 0 0 var(--space-6) 0;
}
@media (min-width: 901px) {
  .manifesto--wide .manifesto__text { font-size: var(--text-2xl); }}
.manifesto__body {
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--gray-2);
  font-weight: 300;
  margin: 0 0 var(--space-5) 0;
}
.manifesto__body:last-child { margin-bottom: 0; }

/* grille d'images portrait légendées (destinations Prestige Rent, gamme Care) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 901px) {
  .gallery-grid--4 { grid-template-columns: repeat(4, 1fr); }}
.gallery-grid__image {
  aspect-ratio: 3 / 4;
  margin-bottom: var(--space-4);
  position: relative;
  overflow: hidden;
}
.gallery-grid__caption {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  margin: 0;
  color: var(--black);
  text-align: center;
}
.gallery-grid__caption--small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* galerie avant / après (Detailing Studio) */
.before-after {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
}
@media (min-width: 901px) {
  .before-after { grid-template-columns: repeat(3, 1fr); }}
/* curseur de comparaison avant/après : deux calques photo superposés,
   celui du dessus (après) rogné via clip-path selon --pos (0-100%),
   piloté au pointeur/tactile/clavier en JS (main.js) — pas de défilement
   automatique, l'utilisateur fait glisser lui-même le curseur. */
.before-after__pair {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  --pos: 50%;
}
.before-after__img { position: absolute; inset: 0; }
.before-after__img--after { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.before-after__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* étiquettes fixes dans les coins, au-dessus des deux calques : elles ne
   doivent pas se déplacer ni disparaître quand le curseur glisse, donc
   posées sur .before-after__pair plutôt que sur un des deux calques
   (un calque rogné par clip-path emporterait son étiquette avec lui). */
.before-after__tag {
  position: absolute;
  bottom: 8px;
  z-index: 2;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(10,10,10,0.65);
  padding: 3px var(--space-2);
}
.before-after__tag--before { left: 8px; }
.before-after__tag--after { right: 8px; }
.before-after__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--white);
  pointer-events: none;
}
.before-after__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background: var(--white);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(10,10,10,0.3);
}
.before-after__handle svg { width: 18px; height: 18px; }
.before-after__caption {
  font-size: var(--text-sm);
  color: var(--gray-2);
  margin-top: 14px;
  text-align: center;
  font-weight: 300;
}

/* bloc image + texte deux colonnes (Detailing Studio — lien Import) */
.split-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 901px) {
  .split-feature { grid-template-columns: 1fr 1.1fr; gap: var(--space-8); }}
.split-feature__image { aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.split-feature__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-feature__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  margin: 0 0 18px 0;
  color: var(--black);
}
@media (min-width: 901px) {
  .split-feature__title { font-size: var(--text-3xl); }}
.split-feature__desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--gray-2);
  font-weight: 300;
  margin: 0;
}

/* carte de membre (Club — hero) : même carte que .club-teaser__card de la
   homepage (chip + ligne icône/label + brand/tier), redéfinie ici plutôt
   que réutilisée telle quelle car .club-teaser__card est cachée sous
   1150px sur la homepage (bonus décoratif quand l'espace le permet) — ici
   la carte est l'élément visuel principal du hero, toujours visible. */
.club-hero-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: 280px;
  height: 176px;
  padding: 22px var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--black-alt) 0%, var(--black) 70%, var(--black-deep) 100%);
  border: 1px solid var(--gold-glow);
  box-shadow: var(--shadow-deep);
  /* entrée 3D (propriétés individuelles) + tilt (variables écrites par le JS) ; la rotation de base reste dans `transform` */
  position: relative;
  overflow: hidden;
  opacity: 0;
  translate: 0 24px;
  rotate: y -14deg;
  transform: perspective(900px) rotate(-6deg) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: opacity var(--duration-cinematic) var(--ease-signature), translate var(--duration-cinematic) var(--ease-signature),
              rotate var(--duration-cinematic) var(--ease-signature), transform var(--duration-fast) var(--ease-out-soft);
}
@media (min-width: 901px) {
  .club-hero-card { width: 340px; height: 212px; padding: var(--space-5) 26px; }}
.club-hero-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: 0.04em;
}
.club-hero-card__top svg { width: 20px; height: 20px; flex-shrink: 0; }
.club-hero-card__chip {
  width: 42px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-solid) 100%);
  opacity: 0.85;
}
.club-hero-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.club-hero-card__brand {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--surface-soft);
}

/* piliers sur fond noir (La Vision) */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 901px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 56px; }}
.pillars__bar { width: 40px; height: 3px; background: var(--gold-solid); margin-bottom: 20px; }
.pillars__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--white);
  margin: 0 0 14px 0;
}
.pillars__desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--gray-5);
  font-weight: 300;
  margin: 0;
}

/* bande CTA centrée (Club — devenir membre) */
.cta-band { text-align: center; }
.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  margin: 0 0 30px 0;
  color: var(--white);
}
@media (min-width: 901px) {
  .cta-band__title { font-size: var(--text-3xl); }}

/* liste de canaux de distribution (Care) */
.channel-list {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 var(--space-9) 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 901px) {
  .channel-list { gap: 20px; }}
.channel-list__item {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--black);
  padding: 10px 20px;
}

/* panneau centré générique (distribution Care, etc.) */
.centered-panel { text-align: center; }

/* -------------------- Import : refonte structurelle -------------------- */

/* icône au-dessus du numéro, dans .numbered-list__item (même langage visuel
   que .why__icon : trait fin, couleur or, 24x24 mis à l'échelle) */
.numbered-list__icon {
  display: inline-flex;
  color: var(--gold-solid);
  margin-bottom: 14px;
}
/* même trait (1.5) et même famille line-art que .step-list__icon plus bas —
   seule la taille d'affichage diffère, section moins dense donc icône plus
   grande (40-48px vs 24-32px pour la timeline du parcours) */
.numbered-list__icon svg { width: 44px; height: 44px; }
.numbered-list__item > div:first-child { min-width: 44px; flex-shrink: 0; }

/* grille de tuiles à 2 colonnes (cross-sell Detailing / Prestige Rent) —
   même seuil que .fleet__grid (769px) pour ne jamais passer par un état
   intermédiaire à 3 colonnes pour seulement 2 cartes */
@media (min-width: 769px) {
  .fleet__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
}
/* cross-sell réduit à une seule carte (ex. Detailing Studio, Care masqué) :
   centrée plutôt qu'étirée sur toute la largeur, pour ne pas laisser un
   emplacement vide à la place de la 2e carte retirée. grid-template-columns
   doit être explicitement remis à 1 colonne : sans ça, la carte hérite du
   repeat(3, 1fr) de base et ne prend qu'un tiers du max-width ci-dessous */
.fleet__grid--1 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
/* variante à 4 cartes compactes (cross-sell Club, transversal aux 4 pôles) */
@media (min-width: 901px) {
  .fleet__grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* emplacement logo marque (Marques représentées) : le vrai logo de chaque
   constructeur nécessite une validation des conditions d'usage de marque —
   en attendant, un slot neutre au format logo (grayscale -> or au survol) */
.tile-grid__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gray-3);
  filter: grayscale(1);
  transition: color var(--duration-base) var(--ease-standard), filter var(--duration-base) var(--ease-standard);
}
.tile-grid__item:hover .tile-grid__logo {
  color: var(--gold-solid);
  filter: grayscale(0);
}

/* pays sourcés : rangée drapeau + libellé, plus lisible que le texte gris seul */
.sourcing-countries {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: var(--space-9);
}
.sourcing-countries__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--gray-1);
  font-weight: 300;
}
.sourcing-countries__flag { font-size: var(--text-xl); }

/* parcours : ligne de progression + icône + micro-description toujours
   visible (plus accessible qu'un survol, qui ne fonctionne pas au tactile) */
.step-list { position: relative; }
@media (min-width: 901px) {
  .step-list::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(10,10,10,0.14);
    z-index: 0;
  }}
.step-list__item { position: relative; z-index: 1; }
.step-list__icon {
  display: inline-flex;
  align-self: center;
  color: var(--gold-solid);
  margin-bottom: var(--space-2);
}
.step-list__icon svg { width: 28px; height: 28px; }
.step-list__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-round);
  background: var(--gold-solid);
  margin: 0 auto var(--space-4);
}
.step-list__desc {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--gray-2);
  font-weight: 300;
  margin: var(--space-3) auto 0;
  max-width: 190px;
}

/* groupe de cases à cocher multiples (ex. "Pôles déjà utilisés" — Club) :
   reset du fieldset natif, legend alignée sur le style des labels de champ */
.form-group--fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* bouton WhatsApp flottant, présent hors flux sur toute la page — couleur
   de marque WhatsApp (var(--whatsapp)) plutôt que le noir/doré du reste du site :
   reconnaissable immédiatement comme un bouton WhatsApp. */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--whatsapp);
  color: var(--black);
  text-decoration: none;
  border: 1.5px solid var(--whatsapp);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
  opacity: 1;
  transition: background var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-out-soft), opacity var(--duration-base) var(--ease-standard);
}
.whatsapp-float:hover {
  background: var(--whatsapp-dark);
  border-color: var(--whatsapp-dark);
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float:hover { transform: none; }}
/* masqué tant que le hero est à l'écran : sur les petits viewports (hauteur
   courte), le bouton flottant fixe peut chevaucher le CTA "Appeler / WhatsApp"
   du hero et le texte de la barre de réassurance juste en dessous — le hero
   propose déjà sa propre action WhatsApp, la version flottante ne sert donc
   qu'une fois qu'on a défilé au-delà */
.whatsapp-float.is-hidden {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float.is-hidden { transition: none; }}
.whatsapp-float svg { width: 22px; height: 22px; flex-shrink: 0; }
.whatsapp-float__label {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  padding-right: var(--space-1);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .whatsapp-float__label { display: none; }
  .whatsapp-float { right: 16px; bottom: 16px; }}

/* sous-navigation ancrée (Import) : reste visible pendant le scroll une fois
   le hero dépassé (position: sticky), juste sous le header fixe. Scrollable
   horizontalement au tactile plutôt que de passer à la ligne. */
.subnav {
  position: sticky;
  top: var(--header-height, 64px);
  z-index: 500;
  background: var(--gray-bg);
  border-bottom: 1px solid var(--border-subtle);
  transition: transform var(--duration-base) var(--ease-standard);
}
/* header fixe + sous-nav sticky empilés grignotent une hauteur importante
   au-dessus du contenu qui suit (ex. carrousel "Trois métiers" sur
   l'accueil) : masquée au scroll vers le bas (voir main.js), ne laissant
   que le header, réaffichée dès le premier scroll vers le haut. */
.subnav.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .subnav { transition: none; }}
.subnav__list {
  display: flex;
  align-items: center;
  max-width: 1520px;
  margin: 0 auto;
  padding: var(--space-3) 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
/* mobile : dégradé de bord = la barre défile horizontalement */
@media (max-width: 900px) {
  .subnav__list {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    padding-right: var(--space-7);
  }
}
.subnav__list::-webkit-scrollbar { display: none; }
@media (min-width: 901px) {
  .subnav__list { padding: var(--space-3) var(--space-9); justify-content: center; }}
.subnav__link {
  flex-shrink: 0;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-2);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.subnav__link:hover,
.subnav__link.is-active {
  color: var(--gold-brown);
  border-bottom-color: var(--gold-brown);
}
/* cible tactile élargie sur écrans à pointeur imprécis (doigt) : la hauteur
   cliquable réelle du lien mesurait ~15px avant ce correctif (juste la
   ligne de texte), difficile à toucher précisément dans une sous-nav
   scrollable — inchangé au clavier/souris (:hover reste sur le texte) */
@media (pointer: coarse) {
  .subnav__link { padding: 14px 0 var(--space-3); }
}
/* --space-3 de chaque côté = --space-5 (24px) entre deux items, séparateur
   centré dans cet espace plutôt qu'un gap de conteneur qui s'ajouterait à sa
   propre largeur */
.subnav__sep { flex-shrink: 0; font-size: var(--text-xs); color: var(--gray-2); margin: 0 var(--space-3); }

/* -------------------- Prestige Rent : refonte structurelle -------------------- */

/* regroupement des destinations par pays (10 destinations, plus adapté qu'une grille plate) */
.destinations__group + .destinations__group { margin-top: 56px; }
.destinations__country {
  text-align: center;
  margin-bottom: var(--space-5);
}

/* variante paysage de .gallery-grid__image (destinations, univers de
   véhicules) — le ratio 3:4 de base reste celui des produits Care */
.gallery-grid__image--wide { aspect-ratio: 16 / 9; }
.gallery-grid__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* 1-2 phrases d'ambiance sous la légende d'une carte destination */
.gallery-grid__desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gray-2);
  font-weight: 300;
  margin: var(--space-2) 0 0;
  text-align: center;
}

/* description courte dans une tuile (ex. "Pour quelle occasion ?") — le
   même .tile-grid__item--left n'avait jusqu'ici qu'un libellé */
.tile-grid__desc {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--gray-2);
  font-weight: 300;
  margin: 0;
}

/* image en tête d'une tuile "occasion" : pleine largeur de la carte (annule
   le padding de .tile-grid__item--left), 16/9 */
.tile-grid__image {
  margin: -34px -26px 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.tile-grid__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* timeline à 4 étapes (Prestige Rent — Comment ça se passe), même
   composant que .step-list (Import — Le parcours) avec une colonne de moins */
@media (min-width: 901px) {
  .step-list--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   MICRO-INTERACTIONS PARTAGÉES + ACCUEIL (page.page-home)
   Les micro-interactions des composants partagés (soulignement du menu, halo
   des boutons, survol et tilt des cartes, curseur) s'appliquent désormais à
   toutes les pages. Ce qui reste préfixé .page-home est propre à l'accueil
   (.pole, .poles-carousel, .club-teaser, preuve sociale sombre...).
   ========================================================================== */

/* -------------------- nav : soulignement animé au survol -------------------- */
.site-header__link {
  position: relative;
  border-bottom-color: transparent;
}
.site-header__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-signature);
}
.site-header__link:hover,
.site-header__link.is-active {
  border-bottom-color: transparent;
}
.site-header__link:hover::after,
.site-header__link.is-active::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .site-header__link::after { transition: none; }}

/* -------------------- glow doré au survol des CTA et cartes -------------------- */
.btn:hover {
  box-shadow: var(--shadow-gold-glow);
}
.fleet__card:hover {
  box-shadow: var(--shadow-gold);
}

/* -------------------- cartes véhicules : tilt 3D léger au survol (JS) + zoom -------------------- */
.fleet__image {
  perspective: 800px;
}
.fleet__card {
  /* le JS écrit --tilt-x / --tilt-y (jamais style.transform) ; la transition de
     .fleet__card (opacity/translate/transform/ombre) n'est PAS redéfinie ici */
  transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .fleet__card { transform: none !important; transition: box-shadow var(--duration-base) var(--ease-standard); translate: none; opacity: 1; }}

/* -------------------- preuve sociale : stagger sur les badges -------------------- */
.page-home .social-proof__partner-tag {
  opacity: 0;
  translate: 0 10px;
  transition: opacity var(--duration-slow) var(--ease-out-soft) var(--reveal-delay, 0s), translate var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s);
}
.page-home .social-proof[data-reveal].is-visible .social-proof__partner-tag {
  opacity: 1;
  translate: 0 0;
}
.page-home .social-proof__partner-tag:nth-child(1) { --reveal-delay: 0s; }
.page-home .social-proof__partner-tag:nth-child(2) { --reveal-delay: calc(1 * var(--stagger-step)); }
.page-home .social-proof__partner-tag:nth-child(3) { --reveal-delay: calc(2 * var(--stagger-step)); }
.page-home .social-proof__partner-tag:nth-child(4) { --reveal-delay: calc(3 * var(--stagger-step)); }

/* -------------------- "La Vision" + "Avis" : un seul passage sombre continu --------------------
   Uniquement à l'accueil : "La Vision" (fond photo cinématique) et "Avis"
   (citations, badge, stats) qui la suit doivent se lire comme un seul
   passage sombre du scroll. Auparavant, .vision-teaser portait un dégradé
   qui fondait la photo jusqu'au noir plein en bas de section pour rendre
   la jonction invisible — retiré (plus aucun fondu nulle part sur le
   site) : .vision-teaser reprend son fond photo par défaut (voir la règle
   de base plus haut), la jonction avec .social-proof (--black plein juste
   en dessous) redevient une coupure nette, cohérente avec le reste du
   rythme clair/sombre de la page qui alterne déjà par coupures nettes. */
.page-home .social-proof { background: var(--black); }
.page-home .social-proof__testimonials { gap: var(--space-7); margin-bottom: var(--space-8); }
@media (min-width: 769px) {
  .page-home .social-proof__testimonials { gap: var(--space-9); }}
/* citations posées à même le fond sombre, sans encadré ni fond de carte —
   effet "carnet de bord" plutôt que widget marketing */
.page-home .social-proof__testimonial {
  padding: 0;
  background: none;
  border: none;
}
.page-home .social-proof__testimonial p {
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--surface-soft);
}
@media (min-width: 901px) {
  .page-home .social-proof__testimonial p { font-size: var(--text-xl); }}
/* petit marqueur rond doré devant les initiales : sépare/identifie chaque
   citation, plutôt qu'un tiret cadratin générique */
.page-home .social-proof__testimonial cite {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gray-3); /* AA sur fond noir (7.04:1), cf. .fleet__card .btn--tertiary */
}
.page-home .social-proof__testimonial cite::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--gold-solid);
  flex-shrink: 0;
}
.page-home .social-proof__partners { margin-bottom: var(--space-8); }
/* label doré discret plutôt qu'un cadre gris plat : cohérent avec le reste
   du passage sombre, pas un badge séparé */
.page-home .social-proof__partner-tag {
  padding: 0;
  border: none;
  letter-spacing: 0.14em;
  color: var(--gold-light);
}
.page-home .social-proof__stat-label {
  color: var(--gray-3); /* AA sur fond noir (7.04:1) */
}

/* -------------------- "Trois métiers" (Phase 3 du document de finalisation) --------------------
   Desktop (>=1025px) : grille à 3 colonnes simultanée — les 3 métiers sont
   visibles d'un seul coup d'œil au lieu d'attendre un défilement automatique
   pour découvrir les deux autres. Cartes courtes (~520px) plutôt que plein
   écran, même contenu/images/parallax par carte (voir .pole__bg dans
   main.js). Tablette (601-1024px) : grille 2+1 (2 colonnes en première
   rangée, 3e carte en pleine largeur juste dessous) plutôt qu'une vraie
   grille 3 colonnes, trop étroite à cette largeur pour les paragraphes de
   description (300-450 caractères). Mobile (<=600px) : le carrousel
   horizontal auto-play d'origine est conservé tel quel (entrée droite ->
   gauche, flèches + points, voir main.js) — un empilement simultané des 3
   cartes en plein écran ferait défiler la page sur 3 écrans avant d'atteindre
   la section suivante, ce que la grille évite justement sur desktop/tablette. */
.poles-carousel {
  position: relative; /* conteneur positionné pour .poles-carousel-dots (absolute) en mode mobile */
}
.poles-carousel-viewport {
  position: relative;
  background: var(--black);
}
.poles-carousel-track {
  position: relative;
}

/* ---- mobile (<=600px) : carrousel plein écran d'origine, panels empilés ---- */
@media (max-width: 600px) {
  .poles-carousel-viewport {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }
  .poles-carousel-track {
    height: 100%;
  }
  .poles-carousel-track .pole {
    position: absolute;
    inset: 0;
    width: 100%;
    transform: translateX(100%);
    /* easeInOutQuint (symétrique) plutôt que easeOutExpo : cette dernière
       parcourt l'essentiel de la distance dans les 200 premières ms puis
       ralentit à peine perceptiblement sur le reste de la durée, ce qui se
       lit comme un "à-coup" suivi d'une pause plutôt que comme un mouvement
       lent et régulier. */
    transition: transform var(--duration-cinematic) cubic-bezier(0.83,0,0.17,1);
    will-change: transform;
  }
  /* le carrousel ne défile plus jamais tout seul (voir matchMedia dans
     main.js), et le changement de panel via les flèches/points devient
     instantané plutôt qu'animé */
  @media (prefers-reduced-motion: reduce) {
    .poles-carousel-track .pole {
      transition: none !important;
    }
  }
}

/* ---- tablette + desktop (>=601px) : grille simultanée, plus de carrousel ---- */
@media (min-width: 601px) {
  .poles-carousel-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1);
  }
  .poles-carousel-track .pole {
    height: 520px;
  }
  /* 3e carte ("Detailing Studio") en pleine largeur sous les 2 premières :
     grille 2+1 propre à la tablette, voir commentaire plus haut */
  .poles-carousel-track .pole:nth-child(3) {
    grid-column: 1 / -1;
  }
  /* padding réduit par rapport au carrousel mobile : plus besoin de dégager
     l'empreinte des flèches (masquées ci-dessous), et les cartes sont
     désormais bien plus étroites qu'un panel plein écran */
  .poles-carousel-track .pole__row {
    padding: 0 var(--space-6);
  }
}
@media (min-width: 1025px) {
  .poles-carousel-track {
    grid-template-columns: repeat(3, 1fr);
  }
  .poles-carousel-track .pole:nth-child(3) {
    grid-column: auto;
  }
  /* colonnes ~3x plus étroites qu'en tablette (2 colonnes) : le texte le plus
     long (Import, ~430 caractères) enchaîne alors trop de lignes pour tenir
     dans une carte de 520px avec la taille de description standard — sans
     ce resserrement, le contenu centré verticalement déborde de .pole
     (overflow:hidden) et rogne le kicker en haut de carte plutôt que du
     texte en bas, un défaut bien plus visible (la carte perd son étiquette
     de catégorie). Carte légèrement plus haute (560px, toujours dans la
     fourchette ~480-560px demandée) + description compactée : la marge
     obtenue absorbe la carte la plus chargée sans effet perceptible sur les
     deux autres, plus courtes. */
  .poles-carousel-track .pole {
    height: 560px;
  }
  .poles-carousel-track .pole__title {
    margin-bottom: var(--space-4);
  }
  .poles-carousel-track .pole__desc {
    font-size: var(--text-sm);
    line-height: 1.65;
    margin-bottom: var(--space-5);
  }}

.poles-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(10,10,10,0.3);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.poles-carousel-arrow:hover { border-color: var(--gold-light); background: rgba(10,10,10,0.5); }
.poles-carousel-arrow svg { width: 20px; height: 20px; }
.poles-carousel-arrow--prev { left: 20px; }
.poles-carousel-arrow--next { right: 20px; }
@media (max-width: 767px) {
  .poles-carousel-arrow { width: 36px; height: 36px; }
  .poles-carousel-arrow svg { width: 16px; height: 16px; }
  .poles-carousel-arrow--prev { left: 12px; }
  .poles-carousel-arrow--next { right: 12px; }}
.poles-carousel-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.poles-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  border: 1px solid var(--gold-light);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard);
}
.poles-carousel-dot.is-active { background: var(--gold-light); }
@media (max-width: 767px) {
  .poles-carousel-dots { bottom: 16px; }}
/* flèches/points de navigation : plus de sens en grille tablette/desktop où
   les 3 métiers sont déjà tous visibles simultanément — cette règle doit
   rester après les déclarations de base ci-dessus (même spécificité) pour
   l'emporter dans la cascade */
@media (min-width: 601px) {
  .poles-carousel-arrow,
  .poles-carousel-dots {
    display: none;
  }
}

/* -------------------- club : image plein format + parallax -------------------- */
.club-teaser {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 640px;
  display: flex;
  align-items: center;
}
.club-teaser__bg {
  position: absolute;
  top: -12%;
  left: 0;
  right: 0;
  height: 124%;
  z-index: 0;
}
.club-teaser__bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-teaser__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--grain), linear-gradient(100deg, rgba(5,5,5,0.93) 0%, rgba(5,5,5,0.72) 45%, rgba(5,5,5,0.35) 100%);
  background-size: 180px 180px, auto;
  background-repeat: repeat, no-repeat;
}
.club-teaser__sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.club-teaser__sweep::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(212,184,118,0.28) 50%, transparent 100%);
  translate: 0 0;
  transition: translate var(--duration-cinematic) var(--ease-signature);
}
/* -100% -> +100% du parent = 200 % / 60 % de largeur propre */
.club-teaser.is-visible .club-teaser__sweep::after { translate: 333.33% 0; }

.club-teaser__inner {
  display: block;
  position: relative;
  z-index: 2;
  max-width: 1520px;
  margin: 0 auto;
  width: 100%;
  padding: var(--section-y-mobile) var(--section-x-mobile);
}
@media (min-width: 901px) {
  .club-teaser__inner { padding: 0 var(--space-9); }}
.club-teaser__text { max-width: 560px; }

/* -------------------- carte membre (mockup) --------------------
   Sous 1150px la carte reste masquée : la composition texte seul suffit et
   il n'y a pas la place d'ajouter un second bloc sans tasser le texte ou le
   badge "3 avantages". Au-dessus de 1150px (le vide à droite de l'image
   devient visible, surtout >1600px), .club-teaser__inner passe en flex pour
   poser la carte comme point focal dans l'espace vide, plutôt que de laisser
   le texte seul plaqué à gauche sur l'image de fond. justify-content: center
   (plutôt que space-between) : sur les très grands écrans, space-between
   étirait tout l'espace restant entre les deux blocs et les plaquait chacun
   sur un bord de la section, créant un vide au milieu — center + gap fixe
   les garde proches l'un de l'autre comme un seul ensemble. */
.club-teaser__card { display: none; }
@media (min-width: 1150px) {
  .club-teaser__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
  }
  .club-teaser__text { flex-shrink: 0; }
  .club-teaser__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    width: 300px;
    height: 190px;
    padding: var(--space-5) 26px;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, var(--black-alt) 0%, var(--black) 70%, var(--black-deep) 100%);
    border: 1px solid var(--gold-glow);
    box-shadow: var(--shadow-deep);
    transform: rotate(-6deg);
    transition: transform var(--duration-slow) var(--ease-standard);
  }
  .club-teaser__card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gold-light);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: 0.04em;
  }
  .club-teaser__card-top svg { width: 20px; height: 20px; flex-shrink: 0; }
  .club-teaser__card-chip {
    width: 42px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-solid) 100%);
    opacity: 0.85;
  }
  .club-teaser__card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .club-teaser__card-brand {
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    color: var(--surface-soft);
  }
  .club-teaser__card-tier {
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    color: var(--gray-3);
  }}
@media (min-width: 1400px) {
  .club-teaser__inner { gap: 80px; }
  .club-teaser__card { width: 340px; height: 212px; }}

@media (prefers-reduced-motion: reduce) {
  .club-teaser__bg { transition: none !important; }
  .club-teaser__sweep::after { transition: none; translate: 333.33% 0; }
  .club-teaser__card { transition: none !important; }}

/* -------------------- fin de parcours : plus d'air entre FAQ, Contact et Footer --------------------
   FAQ → Contact → Footer enchaînent beaucoup de texte/champs sur un espace
   relativement court, alors que le haut de page (Hero, Métiers) est très
   aéré — la fin du parcours se lisait comme dense après un début ample.
   .faq/.contact sont des composants partagés par toutes les pages : scopé
   à .page-home pour ne pas changer leur rythme vertical ailleurs. */
@media (min-width: 901px) {
  .page-home .faq { padding-top: calc(var(--section-y-desktop) + var(--space-7)); padding-bottom: calc(var(--section-y-desktop) + var(--space-7)); }
  .page-home .contact { padding-top: calc(var(--section-y-desktop) + var(--space-7)); padding-bottom: calc(var(--section-y-desktop) + var(--space-7)); }
  .page-home .site-footer { padding-top: 120px; }
}

/* -------------------- curseur personnalisé (desktop uniquement, JS) --------------------
   position pilotée en left/top (avec transition = léger effet de retard "premium"),
   le grossissement au survol passe par transform:scale pour ne jamais entrer en
   conflit avec le positionnement ; le curseur natif reste visible en parallèle. */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: var(--radius-round);
  border: 1px solid var(--gold-light);
  pointer-events: none;
  z-index: 2000;
  opacity: 0;
  /* position écrite par le JS (transform: translate3d, interpolée en rAF) ; le
     grossissement passe par la propriété `scale`, sans conflit avec le positionnement */
  transform: translate3d(-100px, -100px, 0);
  scale: 1;
  transition: opacity var(--duration-base) var(--ease-standard), scale var(--duration-base) var(--ease-out-soft), background var(--duration-base) var(--ease-standard);
}
.custom-cursor.is-active { opacity: 0.8; }
.custom-cursor.is-hovering {
  background: rgba(212,184,118,0.18);
  scale: 1.7;
}

/* ==========================================================================
   IMPORT — ajustements propres à la page (scopés .page-import)
   ========================================================================== */

/* -------------------- "Chiffres clés" + "Témoignages" : passage sombre --------------------
   Sur l'accueil, Avis/Stats ont été fusionnés en un seul passage sombre
   continu. Sur Import, les deux sections équivalentes (déjà adjacentes,
   toutes deux .social-proof) étaient restées sur l'ancien traitement clair
   avec des cartes blanches plates — incohérent avec l'accueil. Même
   traitement ici, adapté au contexte : pas de photo de hero à faire fondre
   en fond (contrairement à "La Vision" sur l'accueil), donc un aplat
   --black uni sur les deux sections suffit pour une jonction invisible.
   Scopé à .page-import pour ne pas toucher .social-proof sur Club/
   Detailing-Studio/Prestige-Rent (mêmes classes, traitement clair conservé). */
.page-import .social-proof { background: var(--black); }
.page-import .social-proof__testimonial {
  padding: 0;
  background: none;
  border: none;
}
.page-import .social-proof__testimonial p {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--surface-soft);
}
.page-import .social-proof__testimonial cite {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gray-3);
}
.page-import .social-proof__testimonial cite::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--gold-solid);
  flex-shrink: 0;
}
.page-import .social-proof__stat-label { color: var(--gray-3); }

/* -------------------- "Notre méthode" : le chiffre clé ancré, pas flottant --------------------
   Première version : le chiffre "99+" comblait le vide sous le texte mais
   flottait seul, sans structure — la colonne de gauche (stretch par défaut
   dans la grille .model-intro) a déjà la même hauteur que la colonne de
   droite, mais son contenu ne remplissait que le haut. .model-intro__head
   passe en colonne flex : le texte reste en haut, la carte-chiffre est
   poussée en bas (margin-top: auto) pour s'aligner avec le bas de la liste
   de droite — les deux colonnes se lisent comme un seul ensemble structuré,
   pas comme un texte suivi d'un nombre isolé. Le chiffre est présenté dans
   une vraie carte (fond blanc, bordure) plutôt qu'en texte nu, cohérent
   avec .why__item sur l'accueil. .model-intro est partagé (Club/Detailing-
   Studio/La-Vision/Prestige-Rent) : cette mise en colonne est scopée à
   .page-import, ces pages n'ayant pas de .model-intro__stat dans leur DOM. */
@media (min-width: 901px) {
  .page-import .model-intro__head {
    display: flex;
    flex-direction: column;
  }
}
.model-intro__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-7);
}
@media (min-width: 901px) {
  .page-import .model-intro__stat { margin-top: auto; }}
.page-import .model-intro__stat {
  padding: var(--space-6) var(--space-5);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  max-width: 320px;
}
.model-intro__stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1;
  color: var(--black);
}
.model-intro__stat-label {
  font-size: var(--text-xs);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--gray-2);
}

/* -------------------- "Marques représentées" : traitement plus prestigieux --------------------
   .tile-grid__logo est exclusif à Import (seule page qui l'utilise) : pas
   besoin de scoper .page-import, mais la maquette du composant reste ici.
   Majuscules espacées façon "wall of brands" plutôt que le serif discret
   d'origine, avec une légère variation de lettrage + échelle au survol. */
.tile-grid__logo {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color var(--duration-base) var(--ease-standard), filter var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), letter-spacing var(--duration-base) var(--ease-standard);
}
.tile-grid__item:hover .tile-grid__logo {
  transform: scale(1.06);
  letter-spacing: 0.24em;
}

/* -------------------- "Le parcours" : numéros plus affirmés + ligne animée au scroll --------------------
   .step-list est partagé (Club/Detailing-Studio/La-Vision/Prestige-Rent),
   scopé à .page-import. Le numéro en grand serif italique devient l'élément
   dominant de chaque étape (l'icône, plus petite, passe en support) ; la
   ligne de connexion se remplit de gauche à droite au scroll plutôt que
   d'être visible d'un bloc, via le système de reveal existant (data-reveal
   sur la section #parcours). */
.page-import .step-list__num {
  font-size: var(--text-3xl);
  font-style: italic;
  color: var(--gold-brown);
}
.page-import .step-list__icon svg { width: 22px; height: 22px; }
/* la ligne de progression est désormais pilotée par le scroll pour toutes les pages (voir .step-list) */

/* -------------------- "Exprimer une recherche" : alléger le pavé --------------------
   Fond en léger dégradé (même langage que .img-placeholder) plutôt qu'un
   aplat --black uniforme, pour réduire le poids visuel du bloc. Espacement
   entre groupes augmenté par rapport à la valeur par défaut de
   .contact__form (var(--space-8), utilisée telle quelle sur l'accueil) :
   scopé à .page-import pour ne pas changer le rythme du formulaire accueil. */
.page-import #recherche {
  background: linear-gradient(165deg, var(--black-alt) 0%, var(--black) 100%);
}

/* -------------------- FAQ : numérotation discrète + survol --------------------
   Numéro serif discret devant chaque question (cohérent avec le langage
   numéroté déjà utilisé sur "Notre méthode" et "Le parcours"), et le texte
   passe en doré au survol plutôt que de rester figé — un composant qui
   reste par ailleurs volontairement simple (accordéon CSS Grid déjà fluide,
   inchangé). Scopé à .page-import : .faq est un composant partagé par
   Import/Club/Contact/l'accueil, ce traitement reste propre à Import pour
   l'instant. */
.page-import .faq__list { counter-reset: faq-count; }
.page-import .faq__item {
  counter-increment: faq-count;
  position: relative;
  padding-left: 44px;
}
.page-import .faq__item::before {
  content: counter(faq-count, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 28px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--gold-solid);
}
.page-import .faq__question {
  transition: color var(--duration-fast) var(--ease-standard);
}
.page-import .faq__question:hover {
  color: var(--gold-solid);
}

/* -------------------- hero : espace entre description et CTA --------------------
   .hero--left est partagé (Import/Prestige Rent/Detailing Studio/Contact) et
   met sciemment le margin-bottom du sous-titre à 0. Restauré sur Import,
   Prestige Rent et Detailing Studio : les deux blocs (texte, boutons) se
   touchaient sans air entre eux. */
.page-import .hero--left .hero__subtitle,
.page-prestige-rent .hero--left .hero__subtitle,
.page-detailing-studio .hero--left .hero__subtitle { margin-bottom: var(--space-9); }
@media (min-width: 901px) {
  .page-import .hero--left .hero__subtitle,
  .page-prestige-rent .hero--left .hero__subtitle,
  .page-detailing-studio .hero--left .hero__subtitle { margin-bottom: var(--space-7); }}

/* -------------------- "Marques représentées" : vrais logos --------------------
   .tile-grid__logo--img remplace le libellé texte quand un fichier logo est
   fourni (hauteur fixe + object-fit: contain plutôt que d'étirer l'image à
   la taille du texte, pour garder l'alignement vertical des 6 tuiles). */
.tile-grid__logo--img {
  height: 48px;
  filter: grayscale(1);
  transition: filter var(--duration-base) var(--ease-standard);
}
.tile-grid__logo--img img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.tile-grid__item:hover .tile-grid__logo--img { filter: grayscale(0); }

/* drapeaux des pays de sourcing : image ronde plutôt que l'emoji drapeau
   d'origine, même gabarit (20px) pour ne pas décaler la ligne de texte */
.sourcing-countries__flag img {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-round);
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   PRESTIGE RENT — ajustements propres à la page (scopés .page-prestige-rent
   sauf .destinations-tabs, exclusif à cette page)
   ========================================================================== */

/* -------------------- "Destinations" : onglets par pays + destination phare --------------------
   9 cartes identiques empilées sous 4 groupes pays (France/Maroc/Suisse/
   Espagne) lisaient plat et répétitif. Un système d'onglets affiche un seul
   pays à la fois (plus de 4 groupes empilés verticalement), et dans chaque
   panneau la première destination (ou l'unique, pour Suisse/Espagne) est
   mise en avant en grand format plutôt que des cartes toutes identiques —
   les deux pistes proposées combinées plutôt qu'un choix exclusif. Pas de
   JS custom : main.js gère le show/hide (voir "Prestige Rent : onglets
   destinations"), sur le même principe que l'accordéon FAQ déjà en place. */
.destinations-tabs__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-7);
  border-bottom: 1px solid rgba(10,10,10,0.1);
  margin-bottom: var(--space-7);
}
.destinations-tabs__btn {
  background: none;
  border: none;
  cursor: pointer;
  appearance: none;
  padding: 0 0 var(--space-4);
  margin-bottom: -1px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-2);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.destinations-tabs__btn:hover { color: var(--black); }
.destinations-tabs__btn.is-active {
  color: var(--black);
  border-bottom-color: var(--gold-solid);
}
.destinations-tabs__count {
  font-size: var(--text-xs);
  color: var(--gray-2);
  margin-left: 2px;
}
.destinations-tabs__btn.is-active .destinations-tabs__count { color: var(--gold-brown); }
.destinations-tabs__panel[hidden] { display: none; }

/* système de grille unique pour les 4 onglets (1 à 5 destinations) : cartes
   toujours au même gabarit, quel que soit le nombre d'éléments — pas de
   carte "vedette" agrandie, jamais de plein écran pour un pays à une seule
   destination (Suisse, Espagne). Le flex-wrap centré permet à une rangée
   incomplète (1, 2 ou 3 cartes) de rester centrée sans jamais s'étirer. */
.destinations-tabs__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.destinations-tabs__grid > div {
  width: 100%;
}
@media (min-width: 601px) {
  .destinations-tabs__grid > div { width: calc(50% - 10px); }}
@media (min-width: 901px) {
  .destinations-tabs__grid > div { width: calc(25% - 15px); }}

/* carrousel manuel (flèches, pas de défilement automatique) : uniquement
   pour les onglets qui dépassent 4 destinations (France) — activé en JS
   via .is-carousel sur .destinations-tabs__grid quand children.length > 4 */
.destinations-tabs__carousel { position: relative; }
.destinations-tabs__grid.is-carousel {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.destinations-tabs__grid.is-carousel::-webkit-scrollbar { display: none; }
.destinations-tabs__grid.is-carousel > div {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.destinations-tabs__arrow {
  display: none;
}
.destinations-tabs__arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* "Univers de véhicules" (Prestige Rent) : même mécanisme que les destinations
   (.is-carousel posé en JS), mais 1 carte + aperçu de la suivante en mobile,
   2 cartes + aperçu en tablette, 4 cartes pleines en desktop */
.gallery-grid--carousel.is-carousel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery-grid--carousel.is-carousel::-webkit-scrollbar { display: none; }
.gallery-grid--carousel.is-carousel > div {
  flex: 0 0 82%;
  scroll-snap-align: start;
}
@media (min-width: 601px) {
  .gallery-grid--carousel.is-carousel > div { flex-basis: calc(45% - 10px); }}
@media (min-width: 901px) {
  .gallery-grid--carousel.is-carousel > div { flex-basis: calc(25% - 15px); }}
.gallery-grid--carousel.is-carousel:focus-visible { outline: 2px solid var(--gold-solid); outline-offset: 4px; }
@media (min-width: 901px) {
  .destinations-tabs__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-round);
    border: 1px solid rgba(10,10,10,0.15);
    background: var(--white);
    color: var(--black);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    appearance: none;
    transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .destinations-tabs__arrow:hover { border-color: var(--gold-solid); color: var(--gold-solid); }
  .destinations-tabs__arrow--prev { left: -22px; }
  .destinations-tabs__arrow--next { right: -22px; }}

/* -------------------- "Une expérience sur-mesure" : retrait des numéros --------------------
   Sur-mesure / Présence internationale / Avec ou sans chauffeur sont 3
   caractéristiques indépendantes, pas des étapes séquentielles — les divs
   .numbered-list__num (01/02/03) ont été retirées du HTML ; l'icône seule
   suffit à identifier chaque point. */

/* -------------------- "Chiffres clés" + "Témoignages" : composition unique --------------------
   Fond noir commun ne suffisait pas : stats et témoignages restaient deux
   blocs empilés, lus l'un après l'autre au scroll. Ici les deux sont
   fusionnés dans une seule section (.social-proof__combined) : les 4
   chiffres forment une colonne étroite à côté des citations plutôt qu'une
   rangée au-dessus — les deux types de preuve sociale sont donc visibles
   ensemble, dans le même cadre. Règles structurelles non scopées à une
   page : réutilisées telles quelles partout où le balisage
   .social-proof__combined est présent (Prestige Rent, Import, l'accueil) ;
   la couleur des citations reste gérée par les règles .page-xxx propres
   à chaque page, déjà en place avant l'introduction de cette mise en page. */
.page-prestige-rent .social-proof { background: var(--black); }
.social-proof__combined {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 901px) {
  .social-proof__combined {
    grid-template-columns: 200px 1fr;
    gap: var(--space-8);
    align-items: center;
  }}
.social-proof__stats-col {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  text-align: center;
}
@media (min-width: 901px) {
  .social-proof__stats-col {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-9);
    text-align: left;
    border-right: 1px solid rgba(255,255,255,0.12);
    padding-right: var(--space-9);
  }}
.social-proof__quotes-col .section-head { text-align: center; margin-bottom: var(--space-6); }
@media (min-width: 901px) {
  .social-proof__quotes-col .section-head { text-align: left; }}
.social-proof__combined .social-proof__testimonials {
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0;
  gap: var(--space-5);
}
.page-prestige-rent .social-proof__testimonial {
  padding: 0;
  background: none;
  border: none;
}
.page-prestige-rent .social-proof__testimonial p {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--surface-soft);
}
.page-prestige-rent .social-proof__testimonial cite {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gray-3);
}
.page-prestige-rent .social-proof__testimonial cite::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--gold-solid);
  flex-shrink: 0;
}
.page-prestige-rent .social-proof__stat-label { color: var(--gray-3); }

/* -------------------- Detailing Studio : prestations (hiérarchie + visuel) --------------------
   La grille plate à 8 cases identiques (icône + titre + texte, aucune image)
   ne rendait pas justice à un métier ultra-visuel et traitait à égalité un
   simple lavage et une protection céramique complète. Découpée en deux
   niveaux : 3 cartes "signature" avec image (gabarit proche de .fleet__card,
   même langage que les autres cartes du site), puis les 5 prestations
   d'entretien courant dans le .tile-grid existant, avec reveal + stagger
   + micro-interaction au survol ajoutés aux deux niveaux. */
.services-signature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  margin-bottom: 56px;
}
@media (min-width: 769px) {
  .services-signature { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }}
.services-signature__card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  padding-bottom: var(--space-5);
  opacity: 0;
  translate: 0 20px;
  transition: opacity var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s),
              translate var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s),
              border-color var(--duration-quick) var(--ease-standard), box-shadow var(--duration-quick) var(--ease-standard);
}
.services-signature[data-reveal].is-visible .services-signature__card { opacity: 1; translate: 0 0; }
.services-signature__card:nth-child(1) { --reveal-delay: 0s; }
.services-signature__card:nth-child(2) { --reveal-delay: calc(1 * var(--stagger-step)); }
.services-signature__card:nth-child(3) { --reveal-delay: calc(2 * var(--stagger-step)); }
.services-signature__card:hover {
  border-color: var(--gold-solid);
  box-shadow: var(--shadow-card);
}
/* le curseur avant/après (.before-after__pair, même composant que la
   section "Avant / après" plus bas sur la page) définit lui-même son
   aspect-ratio et son overflow : ce wrapper ne sert qu'à positionner le
   badge "Signature" par-dessus. */
.services-signature__image { position: relative; margin-bottom: var(--space-4); }
.services-signature__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold-solid);
  padding: var(--space-1) 10px;
}
.services-signature__icon {
  display: inline-flex;
  color: var(--gold-solid);
  margin: 20px var(--space-5) 0;
}
.services-signature__icon svg { width: 34px; height: 34px; }
.services-signature__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  margin: var(--space-3) var(--space-5) var(--space-2);
  color: var(--black);
}
.services-signature__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--gray-2);
  font-weight: 300;
  margin: 0 var(--space-5);
}

/* prestations d'entretien courant : reveal + stagger (poursuit la
   temporisation des 3 cartes signature ci-dessus) + légère élévation au
   survol, en plus du fond doré déjà prévu par .tile-grid__item:hover.
   5 étant impair, la grille à 2 colonnes par défaut de .tile-grid
   laisserait une case vide sur mobile : 1 colonne en dessous de 601px. */
@media (max-width: 600px) {
  .tile-grid--services { grid-template-columns: 1fr; }
}
.tile-grid--services .tile-grid__item {
  opacity: 0;
  translate: 0 16px;
  transition: opacity var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s),
              translate var(--duration-slow) var(--ease-signature) var(--reveal-delay, 0s),
              box-shadow var(--duration-quick) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.tile-grid--services[data-reveal].is-visible .tile-grid__item { opacity: 1; translate: 0 0; }
.tile-grid--services .tile-grid__item:nth-child(1) { --reveal-delay: 0s; }
.tile-grid--services .tile-grid__item:nth-child(2) { --reveal-delay: calc(1 * var(--stagger-step)); }
.tile-grid--services .tile-grid__item:nth-child(3) { --reveal-delay: calc(2 * var(--stagger-step)); }
.tile-grid--services .tile-grid__item:nth-child(4) { --reveal-delay: calc(3 * var(--stagger-step)); }
.tile-grid--services .tile-grid__item:nth-child(5) { --reveal-delay: calc(3 * var(--stagger-step)); }
.tile-grid--services .tile-grid__item:hover {
  box-shadow: var(--shadow-soft);
  position: relative;
  z-index: 1;
}

/* -------------------- La Vision : bande chiffre unique -------------------- */
/* .social-proof est pensé pour 3-4 stats côte à côte (padding 72-140px) ;
   un seul chiffre distinctif ("4 pôles") n'y justifie pas cette hauteur,
   d'où ce composant dédié bien plus compact. */
.stat-highlight {
  padding: 56px 20px;
  text-align: center;
}
/* bandeau d'un chiffre unique : filets dorés haut/bas pour l'encadrer plutôt qu'un simple aplat */
.page-section--alt.stat-highlight {
  background: var(--gray-bg);
  border-top: 1px solid var(--gold-light);
  border-bottom: 1px solid var(--gold-light);
}
@media (min-width: 901px) {
  .stat-highlight { padding: var(--space-8) var(--space-9); }}
.stat-highlight__number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 500;
  color: var(--gold-brown);
  line-height: 1;
  margin: 0;
}
@media (min-width: 901px) {
  .stat-highlight__number { font-size: var(--text-5xl); }}
.stat-highlight__label {
  margin: 10px 0 0;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-2);
  font-weight: 300;
}

/* -------------------- Accessibilité : lien d'évitement + liens du pied de page -------------------- */
/* masqué hors focus, visible au premier Tab : permet de passer l'en-tête */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: var(--space-3) 18px;
  background: var(--white);
  color: var(--black);
  font-size: var(--text-sm);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--gold-solid); outline-offset: 2px; }
/* tel: / mailto: du pied de page : même rendu que le texte d'origine */
.site-footer__contact div a { color: inherit; text-decoration: none; }
.site-footer__contact div a:hover { text-decoration: underline; }
#main-content:focus { outline: none; }
/* libellé au-dessus des drapeaux (Import) */
.sourcing-countries__label {
  flex: 1 1 100%;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gray-2);
  font-weight: 300;
}

/* -------------------- Focus clavier global (audit UX/UI, Lot A) -------------------- */
/* un seul anneau visible, quel que soit l'élément interactif ; doré clair sur
   fond sombre (par défaut), doré foncé sur fond clair */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
.page-section:not(.page-section--dark) a:focus-visible,
.page-section:not(.page-section--dark) button:focus-visible,
.fleet a:focus-visible,
.faq button:focus-visible,
.subnav a:focus-visible,
.why a:focus-visible,
.coverage a:focus-visible {
  outline-color: var(--gold-dark);
}
#main-content:focus-visible { outline: none; }

/* ancres : le contenu ciblé ne doit jamais passer sous le header fixe + la sous-navigation sticky */
section[id], div[id] { scroll-margin-top: calc(var(--header-height, 64px) + 56px); }

/* sans JavaScript, rien ne doit rester masqué en attente de l'animation d'apparition */
@media (scripting: none) {
  [data-reveal], [data-reveal] * {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    transition: none !important;
  }
  .hero__title, .hero__subtitle, .hero__cta-group { opacity: 1 !important; transform: none !important; translate: none !important; }
  .pole__content .kicker--icon, .pole__content .pole__title, .pole__content .pole__desc, .pole__content > a { opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important; }
  .fleet__card, .why__item, .why__icon, .social-proof__testimonial, .coverage__tag, .services-signature__card, .tile-grid__item { opacity: 1 !important; translate: none !important; scale: none !important; }
}

/* Prestige Rent / Detailing Studio : « fonctionnement » et « étapes » forment un seul parcours
   (même fond, espacement réduit entre les deux) plutôt que deux sections séparées */
#approche, #methode { padding-bottom: var(--space-7); }
.page-prestige-rent #process, .page-detailing-studio #process { padding-top: var(--space-7); }

/* -------------------- Système de ratios des visuels véhicules (audit UX/UI, Lot D) --------------------
   - cartes « Sélection du moment » (accueil) : 4/3, sources 1600x873 (Porsche) et 1600x1195 (Ferrari, Range Rover) ;
     cible : portrait 4/5 dès que les visuels portrait (1600x2000) existent, comme sur Import
   - cartes « Les véhicules que nous importons » (Import) : portrait 4/5 (sources 1200x1490)
   - catégories (Prestige Rent) : 16/9 (sources 1600x893)
   Jamais de 4/3 appliqué à une source 16/9 : le cadrage est réglé par object-position sur chaque carte. */
.page-home #selection .fleet__card:nth-child(1) .fleet__image img { object-position: 38% center; }

/* cibles tactiles du pied de page : >= 24 px de haut (WCAG 2.2), sans changer l'espacement perçu */
.site-footer__links a,
.site-footer__bottom a,
.site-footer__contact div a { display: inline-block; padding: var(--space-1) 0; }
.site-footer__links { gap: var(--space-2); }
.site-footer__contact { gap: var(--space-3); }

/* défilement doux vers les ancres (le scroll-margin-top ci-dessus garde la cible sous le header) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ==========================================================================
   PRIMITIVES DE MOTION (P2) — voir DESIGN-SYSTEM.md, section « Motion »
   ========================================================================== */

/* texte accessible uniquement aux lecteurs d'écran */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 1. [data-split="words"] : révélation mot par mot, masque par mot */
.split__word {
  /* inline (pas inline-block) : la boîte de ligne est identique à celle du texte non découpé,
     donc aucun décalage de mise en page au moment du découpage (CLS 0). Le masque est un
     clip-path (boîte de contenu de la police : jambages de Cormorant inclus). */
  display: inline;
  clip-path: inset(-0.05em -0.1em -0.1em -0.1em);
}
.split__inner {
  display: inline-block;
  translate: 0 105%;
  transition: translate var(--duration-slower) var(--ease-signature) calc(var(--w, 0) * var(--stagger-step) / 2);
}
[data-split].is-split-in .split__inner { translate: 0 0; }
/* le titre du hero n'a plus besoin du fondu global : le masque suffit */
.hero__title.is-split { opacity: 1; transform: none; transition: none; }

/* 2. .reveal-img : rideau d'image (conteneur aux dimensions fixes -> aucun CLS) */
.reveal-img {
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--duration-cinematic) var(--ease-signature) var(--reveal-delay, 0s);
}
.reveal-img img {
  scale: 1.12;
  transition: scale var(--duration-cinematic) var(--ease-signature) var(--reveal-delay, 0s), transform var(--duration-slow) var(--ease-out-soft);
}
[data-reveal].is-visible .reveal-img { clip-path: inset(0); }
[data-reveal].is-visible .reveal-img img { scale: 1; }

/* 3. filet doré sous les kickers (positionné dans la marge basse existante : aucun décalage de mise en page) */
.section-head .kicker:not(.kicker--icon),
.model-intro__head .kicker:not(.kicker--icon) { position: relative; }
.section-head .kicker:not(.kicker--icon)::after,
.model-intro__head .kicker:not(.kicker--icon)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--space-3));
  width: 40px;
  height: 1px;
  margin-left: -20px;
  background: var(--gold-solid);
  transform-origin: left center;
  transition: scale var(--duration-slower) var(--ease-signature) var(--duration-fast);
}
.model-intro__head .kicker:not(.kicker--icon)::after { left: 0; margin-left: 0; }
[data-reveal]:not(.is-visible) .section-head .kicker:not(.kicker--icon)::after,
[data-reveal]:not(.is-visible) .model-intro__head .kicker:not(.kicker--icon)::after { scale: 0 1; }

/* 5. transitions entre pages (amélioration progressive : navigation normale hors support) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: var(--duration-base); }
  /* la barre du header reste fixe pendant le fondu (le menu mobile, hors de la barre, n'est pas touché) */
  .site-header__bar { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation-duration: 0s; }
}

/* 9. iframes Google Agenda : squelette léger tant que l'événement `load` n'a pas eu lieu */
.booking-card::before {
  content: '';
  position: absolute;
  inset: var(--space-4);
  background: linear-gradient(100deg, var(--surface-soft) 30%, var(--surface-raised) 50%, var(--surface-soft) 70%);
  background-size: 200% 100%;
  animation: booking-shimmer var(--duration-hero) linear infinite;
  transition: opacity var(--duration-base) var(--ease-standard);
}
@keyframes booking-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.booking-card .gcal-embed { position: relative; opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard); }
.booking-card.is-loaded .gcal-embed { opacity: 1; }
.booking-card.is-loaded::before { opacity: 0; animation: none; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .split__inner, .reveal-img, .reveal-img img { transition: none; }
  .booking-card::before { animation: none; }
  .site-header__mobile-menu, .site-header__mobile-menu a, .site-header__burger span { transition: none; }
}
/* sans JavaScript : tout est visible */
@media (scripting: none) {
  .split__inner { translate: none !important; }
  .reveal-img { clip-path: none !important; }
  .reveal-img img { scale: none !important; }
  .booking-card::before { display: none; }
  .booking-card .gcal-embed { opacity: 1 !important; }
  .site-header__mobile-menu a { opacity: 1 !important; translate: none !important; }
}

/* [data-stagger] : les enfants directs apparaissent en cascade quand le conteneur entre dans le viewport */
[data-stagger] > * {
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--duration-slow) var(--ease-signature) calc(var(--i, 0) * var(--stagger-step)),
              translate var(--duration-slow) var(--ease-signature) calc(var(--i, 0) * var(--stagger-step));
}
[data-stagger].is-stagger-in > * { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { [data-stagger] > * { opacity: 1; translate: none; transition: none; } }
@media (scripting: none) { [data-stagger] > * { opacity: 1 !important; translate: none !important; } }

/* chiffres : largeur constante pendant le count-up (aucun saut) */
.social-proof__stat-number, .model-intro__stat-number, .stat-highlight__number { font-variant-numeric: tabular-nums; }

/* repère de scroll du hero (accueil) */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  z-index: 2;
  width: 1px;
  height: 48px;
  background: linear-gradient(var(--gold-light), transparent);
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.hero__scroll span {
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-round);
  background: var(--gold-light);
  animation: hero-scroll-dot var(--duration-pulse) var(--ease-standard) infinite;
}
@keyframes hero-scroll-dot {
  from { translate: 0 0; opacity: 1; }
  to { translate: 0 44px; opacity: 0; }
}
.hero__scroll.is-hidden { opacity: 0; }
@media (max-height: 560px), (prefers-reduced-motion: reduce) { .hero__scroll { display: none; } }

/* « Pourquoi Azur Gestion » : filet doré qui se trace au-dessus de chaque bloc */
.why__item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-solid);
  transform-origin: left center;
  scale: 0 1;
  transition: scale var(--duration-slower) var(--ease-signature) calc(var(--reveal-delay, 0s) + var(--duration-fast));
}
.why[data-reveal].is-visible .why__item::before { scale: 1 1; }
@media (scripting: none), (prefers-reduced-motion: reduce) { .why__item::before { scale: 1 1; transition: none; } }

/* pôles : zoom de l'image et assombrissement du voile au survol (souris fine) */
@media (hover: hover) and (pointer: fine) {
  .pole__bg-img { transition: scale var(--duration-slower) var(--ease-out-soft); }
  .pole:hover .pole__bg-img { scale: 1.04; }
}

/* carte Club : reflet métallique lent, uniquement quand la section est visible */
@media (min-width: 1150px) {
  .club-teaser__card { position: relative; overflow: hidden; }
  .club-teaser__card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent 0%, var(--gold-glow) 50%, transparent 100%);
    opacity: 0.6;
    pointer-events: none;
  }
  .club-teaser.is-visible .club-teaser__card::after { animation: club-card-sheen var(--duration-sheen) var(--ease-standard) infinite; }
}
@keyframes club-card-sheen {
  0%, 60% { translate: 0 0; }
  100% { translate: 650% 0; }
}
@media (prefers-reduced-motion: reduce) { .club-teaser.is-visible .club-teaser__card::after { animation: none; } }

/* FAQ : la réponse apparaît en fondu, légèrement après le début de l'ouverture */
.faq__answer > div { opacity: 0; transition: opacity var(--duration-base) var(--ease-standard); }
.faq__item.is-open .faq__answer > div { opacity: 1; transition-delay: calc(var(--stagger-step) * 1.25); }
@media (prefers-reduced-motion: reduce) { .faq__answer > div { opacity: 1; transition: none; } }

/* carrousel « Trois services » mobile : swipe + indicateur de progression */
.poles-carousel { touch-action: pan-y; }
.poles-carousel-dot { position: relative; overflow: hidden; transition: background var(--duration-base) var(--ease-standard); }
.poles-carousel-dot.is-active { width: 28px; border-radius: var(--radius-pill); background: transparent; }
.poles-carousel-dot.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-light);
  transform-origin: left center;
  scale: 1 1;
}
.poles-carousel.is-progress .poles-carousel-dot.is-active::after {
  animation: pole-progress var(--autoplay-ms, var(--duration-autoplay)) linear forwards;
  animation-play-state: paused;
}
.poles-carousel.is-progress.is-playing .poles-carousel-dot.is-active::after { animation-play-state: running; }
@keyframes pole-progress { from { scale: 0 1; } to { scale: 1 1; } }

/* ==========================================================================
   P4–P6 : parcours piloté par le scroll, onglets, comparateur
   ========================================================================== */

/* .step-list : piste grise (::before) + remplissage doré (::after) piloté par --progress */
.step-list { --progress: 1; }
.step-list::after {
  content: '';
  position: absolute;
  background: var(--gold-solid);
  z-index: 0;
}
@media (min-width: 901px) {
  .step-list::after {
    top: 16px;
    left: 10%;
    right: 10%;
    height: 1px;
    transform-origin: left center;
    scale: var(--progress) 1;
  }
}
/* le TEXTE des étapes à venir reste pleinement lisible (contraste AA) : seuls l'icône, le point et le numéro s'allument */
.step-list.is-progress .step-list__icon { opacity: 0.45; scale: 0.85; transition: opacity var(--duration-slow) var(--ease-signature), scale var(--duration-slow) var(--ease-signature); }
.step-list.is-progress .step-list__dot { scale: 0.6; transition: scale var(--duration-slow) var(--ease-signature); }
.step-list.is-progress .step-list__num { color: var(--gray-2); transition: color var(--duration-slow) var(--ease-standard); }
.step-list.is-progress .step-list__item.is-active .step-list__icon { opacity: 1; scale: 1; }
.step-list.is-progress .step-list__item.is-active .step-list__dot { scale: 1; }
.step-list.is-progress .step-list__item.is-active .step-list__num { color: var(--gold-brown); }
@media (prefers-reduced-motion: reduce) {
  .step-list.is-progress .step-list__icon, .step-list.is-progress .step-list__dot { opacity: 1; scale: 1; transition: none; }
  .step-list.is-progress .step-list__num { color: var(--gold-brown); transition: none; }
}

/* sous 901 px : frise verticale, ligne à gauche des étapes */
@media (max-width: 900px) {
  .step-list { grid-template-columns: 1fr; gap: var(--space-6); padding-left: var(--space-7); }
  .step-list::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(10,10,10,0.14);
    z-index: 0;
  }
  .step-list::after {
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    transform-origin: top center;
    scale: 1 var(--progress);
  }
  .step-list__item { text-align: left; align-items: flex-start; }
  .step-list__dot { position: absolute; left: calc(-1 * var(--space-7)); top: 6px; margin: 0; }
  .step-list__icon { align-self: flex-start; }
  .step-list__desc { margin-left: 0; max-width: none; }
}

/* Import : projecteur sur la marque survolée (souris fine) */
@media (hover: hover) and (pointer: fine) {
  #marques .tile-grid__item { transition: opacity var(--duration-base) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
  #marques .tile-grid:has(.tile-grid__item:hover) .tile-grid__item:not(:hover) { opacity: 0.45; }
}

/* Prestige Rent : indicateur d'onglet, fondu croisé des panneaux, flèches */
.destinations-tabs__nav { position: relative; }
.destinations-tabs__indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 2px;
  background: var(--gold-solid);
  transform-origin: left center;
  translate: var(--ind-x, 0px) var(--ind-y, 0px);
  scale: var(--ind-s, 1) 1;
  transition: translate var(--duration-base) var(--ease-signature), scale var(--duration-base) var(--ease-signature);
}
.destinations-tabs__nav.has-indicator .destinations-tabs__btn.is-active { border-bottom-color: transparent; }
.destinations-tabs__panel { transition: opacity var(--duration-fast) var(--ease-standard), translate var(--duration-base) var(--ease-signature); }
.destinations-tabs__panel.is-leaving { opacity: 0; }
.destinations-tabs__panel.is-entering { opacity: 0; translate: 0 8px; }
@media (prefers-reduced-motion: reduce) {
  .destinations-tabs__panel, .destinations-tabs__indicator { transition: none; }
}
.destinations-tabs__arrow { transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), translate var(--duration-fast) var(--ease-out-soft), opacity var(--duration-base) var(--ease-standard); }
.destinations-tabs__arrow--prev:hover { translate: -2px 0; }
.destinations-tabs__arrow--next:hover { translate: 2px 0; }

/* cartes d'occasions et de catégories : zoom léger de l'image au survol (souris fine) */
@media (hover: hover) and (pointer: fine) {
  .tile-grid__image img, .gallery-grid__image img { transition: scale var(--duration-slow) var(--ease-out-soft); }
  .tile-grid__item:hover .tile-grid__image img,
  .gallery-grid > div:hover .gallery-grid__image img { scale: 1.04; }
}

/* Detailing : comparateur avant/après */
.before-after__handle { transition: scale var(--duration-base) var(--ease-out-soft); }
.before-after__pair:hover .before-after__handle { scale: 1.08; }
.before-after__tag { transition: opacity var(--duration-base) var(--ease-standard); }
.before-after__pair.is-before-covered .before-after__tag--before,
.before-after__pair.is-after-covered .before-after__tag--after { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .before-after__handle, .before-after__tag { transition: none; } }

/* ==========================================================================
   P7–P10 : Club, La Vision, blog
   ========================================================================== */
.hero--card .hero__content { perspective: 1000px; }
.hero.is-loaded .club-hero-card { opacity: 1; translate: 0 0; rotate: y 0deg; }
.club-hero-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, var(--gold-glow) 50%, transparent 100%);
  opacity: 0.6;
  pointer-events: none;
}
/* le reflet traverse la carte dès l'entrée (cycle décalé à 55 %), puis toutes les 8 s */
.hero.is-loaded .club-hero-card::after {
  animation: club-card-sheen var(--duration-sheen) var(--ease-standard) calc(var(--duration-sheen) * -0.55) infinite;
}
.club-hero-card__chip { transition: box-shadow var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.club-hero-card:hover .club-hero-card__chip { box-shadow: var(--shadow-gold-glow); background-color: var(--gold-light); }
@media (prefers-reduced-motion: reduce) {
  .club-hero-card { opacity: 1; translate: none; rotate: none; transition: none; }
  .hero.is-loaded .club-hero-card::after { animation: none; }
}
@media (scripting: none) { .club-hero-card { opacity: 1 !important; translate: none !important; rotate: none !important; } }

/* Club : avantages — l'icône se renforce au survol */
.tile-grid__item--left .numbered-list__icon { transition: scale var(--duration-base) var(--ease-out-soft), color var(--duration-base) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) {
  .tile-grid__item--left:hover .numbered-list__icon { scale: 1.06; }
}

/* [data-reveal-item] : apparition individuelle */
[data-reveal-item] {
  opacity: 0;
  translate: 0 16px;
  transition: opacity var(--duration-slower) var(--ease-signature), translate var(--duration-slower) var(--ease-signature);
}
[data-reveal-item].is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { [data-reveal-item] { opacity: 1; translate: none; transition: none; } }
@media (scripting: none) { [data-reveal-item] { opacity: 1 !important; translate: none !important; } }

/* La Vision : filet doré au-dessus de chaque valeur */
#valeurs .numbered-list__item { position: relative; }
#valeurs .numbered-list__item::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-solid);
  transform-origin: left center;
  scale: 0 1;
  transition: scale var(--duration-slower) var(--ease-signature) calc(var(--i, 0) * var(--stagger-step));
}
#valeurs .numbered-list.is-stagger-in .numbered-list__item::before { scale: 1 1; }
@media (prefers-reduced-motion: reduce), (scripting: none) { #valeurs .numbered-list__item::before { scale: 1 1; transition: none; } }

/* La Vision : chiffre « 4 » — un filet de 64 px se trace sous le chiffre une fois le count-up terminé */
.stat-highlight__number::after {
  content: '';
  display: block;
  width: var(--space-8);
  height: 1px;
  margin: var(--space-3) auto 0;
  background: var(--gold-solid);
  transform-origin: center;
  scale: 0 1;
  transition: scale var(--duration-slower) var(--ease-signature);
}
.stat-highlight__number.is-counted::after { scale: 1 1; }
@media (scripting: none) { .stat-highlight__number::after { scale: 1 1; } }

/* blog : barre de progression de lecture sous le header */
.reading-progress {
  position: fixed;
  top: var(--header-height, 64px);
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-solid);
  transform-origin: left center;
  scale: var(--read, 0) 1;
  z-index: 998;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .reading-progress { display: none; } }

/* iframe de réservation : anneau de focus visible au clavier */
.gcal-embed:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }

/* points du carrousel mobile : cible tactile 24 x 24 px (WCAG 2.2) autour d'un visuel de 8 px ; la pastille active devient une barre de progression */
.poles-carousel-dots { gap: var(--space-3); }
.poles-carousel-dot,
.poles-carousel-dot.is-active {
  position: relative;
  width: 24px;
  height: 24px;
  border: 0;
  background: none;
  overflow: visible;
  padding: 0;
}
.poles-carousel-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid var(--gold-light);
  border-radius: var(--radius-round);
  box-sizing: border-box;
}
.poles-carousel-dot.is-active::before { width: 28px; margin-left: -14px; border-radius: var(--radius-pill); }
.poles-carousel-dot.is-active::after {
  content: '';
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 8px;
  margin: -4px 0 0 -14px;
  border-radius: var(--radius-pill);
  background: var(--gold-light);
  transform-origin: left center;
  scale: 1 1;
}

/* crédit du pied de page : pastille discrète vers LinkedIn (palette dorée du site) */
.site-footer__bottom a.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gold-glow);
  border-radius: var(--radius-pill);
  background-image: none;
  color: var(--gold-light);
  font-weight: 400;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.site-footer__bottom a.footer-credit:hover {
  border-color: var(--gold-light);
  background-color: var(--gold-glow);
  color: var(--white);
}
.footer-credit svg { flex-shrink: 0; }
@media (max-width: 600px) {
  .site-footer__bottom { justify-content: center; text-align: center; }
}