/* =====================================================================
   RMZ Cars — Premium Car Rental (Rouge · Bleu · Or sur Blanc)
   ===================================================================== */
:root{
  /* ---- Identité (rouge / bleu / or) — inchangée, c'est la marque ---- */
  --red:#c41e2a;--red-d:#a21720;--red-050:#fef0f0;
  --blue:#1a3a8f;--blue-2:#2550b8;--blue-3:#4a72d6;--blue-050:#eef3ff;
  --gold:#c9982e;--gold-2:#b8871f;--gold-050:#fdf8ec;
  /* Version assombrie de l'or, réservée au texte sur fond clair : --gold seul
     ne passe pas le contraste AA (≈2.6:1) pour du petit texte sur blanc. */
  --gold-ink:#8a6415;
  --red-glow:rgba(196,30,42,.4);--gold-glow:rgba(201,152,46,.4);
  --void:#08090f;

  /* ---- Rampe neutre (13 crans) calibrée en OKLCH pour une luminance perçue
     régulière ; chaque cran est déclaré deux fois (hex puis oklch) pour que
     les navigateurs sans support oklch() gardent silencieusement le repli hex ---- */
  --n-0:#ffffff;   --n-0:oklch(100% 0 0);
  --n-100:#f5f6f8; --n-100:oklch(96% .004 264);
  --n-200:#e8eaf0; --n-200:oklch(91% .006 264);
  --n-300:#d6d9e1; --n-300:oklch(85% .008 264);
  --n-400:#b7bac8; --n-400:oklch(78% .01 264);
  --n-500:#969aab; --n-500:oklch(68% .012 264);
  --n-600:#767a8c; --n-600:oklch(58% .012 264);
  --n-700:#5a5e70; --n-700:oklch(48% .012 264);
  --n-800:#424656; --n-800:oklch(38% .012 264);
  --n-900:#2d3040; --n-900:oklch(28% .012 264);
  --n-1000:#1b1d29;--n-1000:oklch(20% .012 264);
  --n-1100:#101219;--n-1100:oklch(13% .01 264);
  --n-1200:#08090c;--n-1200:oklch(7% .008 264);

  /* ---- Tokens sémantiques — mêmes noms qu'avant, branchés sur la rampe ---- */
  /* --muted : #6b6f80 plutôt que --n-600 (#767a8c) — --n-600 sur blanc ne
     passe pas le contraste AA pour du texte normal (≈4.26:1, faut 4.5:1) ;
     --n-700 le passe large mais alourdit visuellement tout le texte
     secondaire du site. Valeur intermédiaire choisie pour rester la plus
     proche possible du --n-600 d'origine tout en passant AA (~4.98:1). */
  --ink:var(--n-1100);--ink-2:var(--n-900);--muted:#6b6f80;--muted-2:var(--n-500);
  --bg:var(--n-0);--bg-2:var(--n-100);--surface:var(--n-0);--sand:#f5f3ee;
  --line:var(--n-200);--line-2:var(--n-100);
  --surface-elevated:var(--n-0);--surface-sunken:var(--n-100);
  --border-subtle:var(--n-200);--border-strong:var(--n-400);
  --ok:#1c9b68;--ok-bg:#e6f5ee;--warn:#c07d1c;--warn-bg:#faf0dd;--bad:#c9504a;--bad-bg:#fbe9e7;

  /* ---- Ombres à deux couches (contact + diffusion), teintées du noir de marque ---- */
  --sh-sm:0 1px 2px rgba(8,9,15,.06),0 1px 4px rgba(8,9,15,.05);
  --sh-md:0 2px 6px rgba(8,9,15,.08),0 14px 32px -14px rgba(8,9,15,.22);
  --sh-lg:0 4px 12px rgba(8,9,15,.1),0 30px 60px -20px rgba(8,9,15,.28);
  --sh-gold:0 2px 8px rgba(201,152,46,.18),0 14px 30px -10px rgba(201,152,46,.35);

  /* ---- Rayons resserrés (14-20px lisait "app mobile") ---- */
  --r-sm:6px;--r:10px;--r-lg:16px;--r-full:999px;

  /* ---- Espacement, base 4px ---- */
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;
  --sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--sp-16:4rem;--sp-20:5rem;--sp-24:6rem;--sp-32:8rem;
  --section-y:clamp(5rem,12vw,10rem);

  /* ---- Typographie ---- */
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --lh-display:1.05;--lh-body:1.65;--ls-tight:-.035em;
  --fs-xs:clamp(.6875rem,.66rem + .1vw,.75rem);
  --fs-sm:clamp(.8125rem,.78rem + .15vw,.875rem);
  --fs-base:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-lg:clamp(1.125rem,1.08rem + .25vw,1.25rem);
  --fs-xl:clamp(1.25rem,1.15rem + .45vw,1.5rem);
  --fs-2xl:clamp(1.5rem,1.32rem + .8vw,1.875rem);
  --fs-3xl:clamp(1.875rem,1.6rem + 1.2vw,2.375rem);
  --fs-4xl:clamp(2.25rem,1.85rem + 1.8vw,3rem);
  --fs-5xl:clamp(2.75rem,2.15rem + 2.8vw,3.75rem);
  --fs-6xl:clamp(3.25rem,2.4rem + 3.8vw,4.5rem);
  --fs-7xl:clamp(3.75rem,2.6rem + 5vw,5.5rem);
  --fs-8xl:clamp(4.25rem,2.7rem + 6.5vw,6.25rem);
  --fs-9xl:clamp(2.75rem,1.4rem + 6.2vw,5.5rem); /* titres hero cinématographiques */

  --wrap:1200px;

  /* ---- Motion — vocabulaire obligatoire pour tout le CSS/JS d'animation ---- */
  --dur-instant:120ms;--dur-fast:220ms;--dur-base:380ms;--dur-slow:640ms;--dur-slower:1000ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  /* alias conservés : tout le CSS existant utilise déjà --ease / --spring */
  --ease:var(--ease-out);--spring:var(--ease-spring);
}

/* Thème sombre natif : on ne redéfinit que les tokens, jamais les composants */
@media(prefers-color-scheme:dark){
  :root{
    --bg:var(--void);--bg-2:var(--n-1100);--surface:var(--n-1000);
    --surface-elevated:var(--n-900);--surface-sunken:var(--n-1100);
    --ink:var(--n-100);--ink-2:var(--n-300);--muted:var(--n-500);--muted-2:var(--n-600);
    --line:var(--n-800);--line-2:var(--n-900);
    --border-subtle:var(--n-800);--border-strong:var(--n-600);
    /* Les sections "claires" deviennent sombres en thème sombre : l'or
       assombri (AA-safe sur blanc) redevient l'or vif (AA-safe sur fond
       sombre), voir la note sur --gold-ink plus haut */
    --gold-ink:var(--gold);
  }
}

/* Transitions de page natives (Chromium) : remplace l'ancien rideau JS.
   Ignoré silencieusement par les navigateurs qui ne le supportent pas —
   aucun JS ni repli n'est nécessaire, la navigation reste instantanée. */
@view-transition{navigation:auto}

*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);font-size:var(--fs-base);line-height:var(--lh-body);font-feature-settings:"ss01","cv11","tnum";-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
img[loading="lazy"]{transition:opacity var(--dur-base) var(--ease-out)}
img[loading="lazy"].img-loading{opacity:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.08;letter-spacing:-.02em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink);display:inline-block;margin-bottom:.7rem}
/* Sur fond sombre (hero), le ton clair d'origine reste lisible et est même plus contrasté */
.eyebrow.on-dark{color:var(--gold)}

/* ---- Accessibilité transversale ---- */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.skip-link{position:fixed;top:-60px;left:1rem;z-index:2000;background:var(--red);color:#fff;padding:.75rem 1.3rem;border-radius:var(--r-sm);font-weight:600;font-size:.9rem;transition:top var(--dur-fast) var(--ease-out)}
.skip-link:focus{top:1rem}
html.nav-open{overflow:hidden}

/* ---- Boutons ---- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;justify-content:center;font-weight:600;font-size:.95rem;border:none;cursor:pointer;padding:.82rem 1.4rem;border-radius:var(--r-sm);transition:transform .2s var(--spring),box-shadow .25s,background .2s;line-height:1;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
/* Remplissage radial qui naît du point d'entrée du curseur (--fx/--fy posés en JS) */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.18);transform:scale(0);transform-origin:var(--fx,50%) var(--fy,50%);transition:transform var(--dur-slow) var(--ease-out)}
.btn:hover::after{transform:scale(2.4)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 20px -8px rgba(196,30,42,.5)}
.btn-primary:hover{background:var(--red-d);box-shadow:0 14px 28px -10px rgba(196,30,42,.55)}
.btn-gold{background:var(--gold);color:#fff;box-shadow:var(--sh-gold)}
.btn-gold:hover{background:var(--gold-2)}
.btn-light{background:#fff;color:var(--blue);box-shadow:var(--sh-sm);border:1px solid var(--line)}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn-ghost.dark{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-wa{background:#1fab54;color:#fff}.btn-wa:hover{background:#199a4a}
.btn-lg{padding:1rem 1.9rem;font-size:1.02rem}
.btn-spinner{animation:btnSpin .8s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ---- Préchargeur ---- */
.preloader{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;background:#fff;transition:opacity .6s var(--ease),visibility .6s}
.preloader.done{opacity:0;visibility:hidden}
.pl-logo{width:min(65vw,320px);animation:plPulse 1.6s ease-in-out infinite}
@keyframes plPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.02)}}
.pl-bar-wrap{width:min(50vw,240px);height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.pl-bar{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--red),var(--gold),var(--blue));animation:plBar 1.6s var(--ease) forwards}
@keyframes plBar{to{width:100%}}

/* ---- Révélations (héritage — encore utilisé par les pages non migrées) ---- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* ---- Moteur de révélation déclaratif (data-anim) ----
   Un seul IntersectionObserver (voir front.js) pilote tous ces types.
   data-anim-delay / data-anim-duration passent par --_delay / --_d (posés en JS).
   Toutes les transitions ne portent que sur transform/opacity/filter/clip-path/
   stroke-dashoffset : jamais de propriété qui déclenche un reflow. */
[data-anim]{--_d:var(--dur-base);--_delay:0ms}
[data-anim="fade-up"]{opacity:0;transform:translateY(32px);transition:opacity var(--_d) var(--ease-out) var(--_delay),transform var(--_d) var(--ease-out) var(--_delay)}
[data-anim="fade-in"]{opacity:0;transition:opacity var(--_d) var(--ease-out) var(--_delay)}
[data-anim="scale-in"]{opacity:0;transform:scale(.92);transition:opacity var(--_d) var(--ease-out) var(--_delay),transform var(--_d) var(--ease-spring) var(--_delay)}
[data-anim="slide-x"]{opacity:0;transform:translateX(var(--_sx,-40px));transition:opacity var(--_d) var(--ease-out) var(--_delay),transform var(--_d) var(--ease-out) var(--_delay)}
[data-anim="blur-in"]{opacity:0;filter:blur(14px);transition:opacity var(--_d) var(--ease-out) var(--_delay),filter var(--_d) var(--ease-out) var(--_delay)}
[data-anim="clip-reveal"]{opacity:0;clip-path:inset(0 100% 0 0);transition:opacity var(--dur-fast) linear var(--_delay),clip-path var(--_d) var(--ease-expo) var(--_delay)}
[data-anim].anim-in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}

[data-anim="mask-up"]{display:inline-block;overflow:hidden}
[data-anim="mask-up"] .anim-mask-inner{display:inline-block;transform:translateY(110%);transition:transform var(--dur-slow) var(--ease-expo) var(--_delay)}
[data-anim="mask-up"].anim-in .anim-mask-inner{transform:none}

/* mask-word : variante mot-par-mot pour les titres hero — le découpage en
   mots se fait côté PHP (chaque .word-in porte son propre transition-delay
   inline), pas ici : ce type ne fait qu'appliquer le masque visuel. */
[data-anim="mask-word"] .word-mask{display:inline-block;overflow:hidden;vertical-align:top}
[data-anim="mask-word"] .word-in{display:inline-block;transform:translateY(110%);transition:transform var(--dur-slow) var(--ease-expo)}
[data-anim="mask-word"].anim-in .word-in{transform:none}

[data-anim="stagger-children"]>*{opacity:0;transform:translateY(24px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
[data-anim="stagger-children"].anim-in>*{opacity:1;transform:none}

[data-anim="draw-line"]{stroke-dasharray:var(--_len,1000);stroke-dashoffset:var(--_len,1000);transition:stroke-dashoffset var(--dur-slower) var(--ease-expo) var(--_delay)}
[data-anim="draw-line"].anim-in{stroke-dashoffset:0}

@media(prefers-reduced-motion:reduce){
  [data-anim],[data-anim="mask-up"] .anim-mask-inner,[data-anim="mask-word"] .word-in,[data-anim="stagger-children"]>*{
    opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;stroke-dashoffset:0!important;transition:none!important
  }
}

/* ---- Navigation ---- */
.nav-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:150;background:linear-gradient(90deg,var(--red),var(--gold));pointer-events:none}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:1.2rem;transition:padding-top var(--dur-base) var(--ease-out)}
.nav.scrolled{padding-top:.7rem}
.nav-in{position:relative;max-width:var(--wrap);margin-inline:auto;padding:.5rem 1.4rem;display:flex;align-items:center;gap:1.6rem;border-radius:var(--r-full);border:1px solid transparent;transition:max-width var(--dur-base) var(--ease-out),padding var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.nav.scrolled .nav-in{max-width:900px;padding:.5rem .6rem .5rem 1.3rem;background:rgba(8,9,15,.7);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-color:rgba(255,255,255,.09);box-shadow:var(--sh-lg)}
.nav-brand-link{position:relative;z-index:2}
.nav-logo{height:52px;transition:transform var(--dur-fast) var(--ease-spring)}
.nav-logo:hover{transform:scale(1.04)}
.nav-links{position:relative;margin-left:auto;display:flex;align-items:center;gap:.2rem}
.nav-indicator{position:absolute;top:0;left:0;height:100%;width:0;border-radius:var(--r-full);background:rgba(255,255,255,.14);opacity:0;transition:transform var(--dur-base) var(--ease-spring),width var(--dur-base) var(--ease-spring),opacity var(--dur-fast) var(--ease-out)}
.nav-links:hover .nav-indicator,.nav-links:focus-within .nav-indicator{opacity:1}
.nav-links>a{position:relative;z-index:1;font-weight:600;color:#fff;font-size:.9rem;padding:.55rem .95rem;border-radius:var(--r-full);transition:color var(--dur-fast) var(--ease-out)}
.nav-links>a.active{color:var(--gold)}
.nav-cta{flex:0 0 auto;margin-left:.4rem;padding:.65rem 1.2rem;font-size:.86rem;border-radius:var(--r-full)}
.nav-burger{position:relative;z-index:2;display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:10px;margin-left:auto;flex:0 0 auto}
.nav-burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.page{min-height:60vh}

/* ---- Hero cinématographique plein écran ----
   Une seule variante existe désormais (photo + dégradé de lisibilité) :
   l'ancien modifier .hero-photo et le fond en dégradé plat qu'il
   remplaçait ont fusionné en un seul jeu de règles. */
.hero{position:relative;overflow:hidden;min-height:100dvh;display:flex;align-items:center;color:#fff}
.hero-media{position:absolute;inset:-6% -6%;z-index:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center right}
.hero-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(8,9,15,.9) 0%, rgba(8,9,15,.6) 40%, rgba(8,9,15,.18) 72%, rgba(8,9,15,.06) 100%),
    linear-gradient(180deg, rgba(8,9,15,.3) 0%, rgba(8,9,15,0) 26%, rgba(8,9,15,.45) 100%)}
.hero-in{position:relative;z-index:2;width:100%;padding-block:9rem 4rem}
.hero-copy{max-width:700px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-title{display:block;font-family:var(--display);font-weight:800;font-size:var(--fs-9xl);line-height:var(--lh-display);letter-spacing:var(--ls-tight)}
.hero-title .word-mask{display:inline-block;overflow:hidden;vertical-align:top}
.hero-title .word-in{display:inline-block;transform:translateY(110%);transition:transform var(--dur-slow) var(--ease-expo)}
.hero-title.anim-in .word-in{transform:none}
.hero-title .accent{color:var(--gold)}
.hero-copy p{color:rgba(255,255,255,.82);font-size:var(--fs-lg);margin:1.4rem 0 2.2rem;max-width:38ch}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 0;padding:0;margin:2.6rem 0 0;font-size:.86rem;color:rgba(255,255,255,.7)}
.hero-trust li{display:flex;align-items:center;gap:.5rem;padding:0 1.4rem;border-left:1px solid rgba(255,255,255,.2)}
.hero-trust li:first-child{padding-left:0;border-left:none}
.hero-trust svg{color:var(--gold);flex:0 0 auto}
.hero-scroll{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:2;width:1px;height:46px;background:rgba(255,255,255,.22);overflow:hidden}
.hero-scroll::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:linear-gradient(var(--gold),transparent)}
@media(min-width:681px){.hero-scroll::after{animation:scrollPulse 2.2s ease-in-out infinite}}
@keyframes scrollPulse{0%{top:-100%}100%{top:100%}}
@media(max-width:960px){
  .hero-media img{object-position:60% center}
  .hero-media::after{background:linear-gradient(180deg, rgba(8,9,15,.8) 0%, rgba(8,9,15,.5) 45%, rgba(8,9,15,.7) 100%)}
  .hero-in{padding-block:8rem 3.5rem}
}
@media(max-width:680px){.hero-scroll{display:none}}

/* ---- Barre de recherche flottante ---- */
.searchbar{position:relative;z-index:5;max-width:var(--wrap);margin:-3.2rem auto 0;padding-inline:24px}
.searchbar-in{background:rgba(255,255,255,.82);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border:1px solid rgba(255,255,255,.6);border-radius:var(--r);box-shadow:var(--sh-lg);padding:.9rem;display:flex;flex-wrap:wrap;align-items:flex-end;transition:box-shadow var(--dur-base) var(--ease-out)}
.searchbar-in:focus-within{box-shadow:var(--sh-lg),0 0 0 3px var(--gold-glow)}
.sb-field{flex:1;min-width:130px;display:flex;flex-direction:column;gap:.3rem;padding:.2rem 1.1rem;border-left:1px solid var(--line)}
.sb-field:first-child{border-left:none}
.sb-field label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sb-field input,.sb-field select{appearance:none;-webkit-appearance:none;border:none;background:transparent;padding:.35rem 0;font:inherit;font-size:.92rem;color:var(--ink)}
.sb-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23767a8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;background-size:14px;padding-right:1.3rem}
.sb-field input:focus,.sb-field select:focus{outline:none}
.searchbar-in .btn{align-self:stretch;padding-inline:1.8rem;margin-left:.3rem}
@media(max-width:680px){
  .sb-field{border-left:none;border-top:1px solid var(--line);padding:.7rem 0 0}
  .sb-field:first-child{border-top:none;padding-top:.2rem}
  .searchbar-in .btn{width:100%;margin:.4rem 0 0}
}

/* ---- Sections ---- */
.section{padding-block:clamp(4rem,9vw,7rem);position:relative}
.section.tint{background:var(--bg-2)}
.section.dark{background:linear-gradient(160deg,#0d1130,var(--blue));color:#fff}
.sec-head{text-align:center;max-width:660px;margin:0 auto 3rem}
.sec-head h2{font-size:clamp(2rem,4.2vw,2.9rem);font-weight:700}
.sec-head p{color:var(--muted);margin-top:.8rem;font-size:1.05rem}
.sec-head.left{text-align:left;margin-left:0}
.gold-line{width:50px;height:3px;background:var(--gold);border-radius:3px;margin:1rem auto 0}
.sec-head.left .gold-line{margin-left:0}

/* ---- Chips ---- */
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:600;padding:.3rem .65rem;border-radius:999px}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip-ok{background:var(--ok-bg);color:var(--ok)}.chip-loue{background:var(--bad-bg);color:var(--bad)}.chip-maintenance{background:var(--warn-bg);color:var(--warn)}

/* ---- Cartes voitures ---- */
.cars-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));gap:1.6rem}
.car-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:transform var(--dur-base) var(--ease-spring),opacity var(--dur-fast) var(--ease-out),box-shadow .35s var(--ease);display:flex;flex-direction:column}
.car-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
/* États transitoires du filtrage FLIP (voir front.js, module filtersFlip) */
.car-card--out{opacity:0;transform:scale(.92)!important;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.car-card--in{opacity:0;transform:scale(.92)}
/* isolation:isolate est indispensable : l'<img> porte un view-transition-name
   (voir car_card()) qui le promeut dans son propre calque de composition et
   le fait peindre au-dessus de ses frères en position:absolute (badge,
   compteur photos) même sans transition en cours — sans isolation, ce calque
   promu ignore le z-index normal et masque complètement le badge. */
.car-media{position:relative;aspect-ratio:16/10;background:var(--sand);overflow:hidden;isolation:isolate}
.car-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.car-card:hover .car-media img{transform:scale(1.08)}
.car-media .chip{position:absolute;top:12px;left:12px;z-index:1;background:#fff;box-shadow:var(--sh-sm)}
.car-media .count{position:absolute;bottom:12px;right:12px;z-index:1;background:rgba(14,16,26,.65);color:#fff;font-size:.72rem;font-weight:600;padding:.24rem .6rem;border-radius:999px;backdrop-filter:blur(4px)}
.car-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.car-body h3{font-size:1.22rem}
.car-cat{font-size:.82rem;color:var(--muted);margin-top:-.2rem}
.car-specs{display:flex;flex-wrap:wrap;gap:.4rem 1rem;color:var(--muted);font-size:.85rem;margin-top:.2rem}
.car-specs span{display:inline-flex;align-items:center;gap:.3rem}
.car-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line-2)}
.price b{font-family:var(--display);font-size:1.45rem;color:var(--red);font-feature-settings:"tnum"}
.price span{font-size:.82rem;color:var(--muted);margin-left:.3rem}
.car-cta{display:flex;gap:.5rem;margin-top:.8rem}
.car-cta .btn{flex:1;padding:.65rem;font-size:.88rem}
.car-cta .btn svg{transition:transform var(--dur-fast) var(--ease-out)}
.car-cta .btn:hover svg{transform:translate(2px,-2px)}
.car-card.off{opacity:.72}

/* ---- Flotte en vedette (accueil) : grille éditoriale asymétrique ----
   Le rendu de car_card() ne change pas d'une page à l'autre ; seule cette
   grille, propre à la home, casse la répétition auto-fill de voitures.php. */
.cars-grid--featured{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.cars-grid--featured .car-card:first-child{grid-column:span 2}
.cars-grid--featured .car-card:first-child .car-media{aspect-ratio:21/9}
.cars-grid--featured .car-card:nth-child(3n+2){transform:translateY(2rem)}
@media(max-width:960px){
  .cars-grid--featured{grid-template-columns:1fr 1fr}
  .cars-grid--featured .car-card:first-child{grid-column:span 2}
  .cars-grid--featured .car-card:nth-child(3n+2){transform:none}
}
@media(max-width:680px){
  .cars-grid--featured{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-inline:-24px;padding:.2rem 24px .6rem}
  .cars-grid--featured .car-card{flex:0 0 82vw;scroll-snap-align:start}
  .cars-grid--featured .car-card:first-child{grid-column:auto}
  .cars-grid--featured .car-card:first-child .car-media{aspect-ratio:16/10}
}

/* ---- L'avantage RMZ : colonne fixe + liste qui s'illumine au scroll ---- */
.advantage{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start}
.advantage-head{position:sticky;top:7rem}
.advantage-head p{color:var(--muted);margin-top:.9rem;font-size:1.05rem;max-width:42ch}
.advantage-list{display:flex;flex-direction:column}
.advantage-item{display:flex;gap:1.4rem;padding:2.2rem 0;border-top:1px solid var(--line);opacity:.4;transition:opacity var(--dur-base) var(--ease-out)}
.advantage-item:last-child{border-bottom:1px solid var(--line)}
.advantage-item.is-active{opacity:1}
.advantage-item .ico{width:52px;height:52px;flex:0 0 52px;border-radius:var(--r);display:grid;place-items:center;background:var(--bg-2);color:var(--red);transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.advantage-item.is-active .ico{background:var(--red);color:#fff}
.advantage-item h3{font-size:1.2rem;margin-bottom:.4rem}
.advantage-item p{color:var(--ink-2);font-size:.94rem;margin:0}
@media(max-width:960px){
  .advantage{grid-template-columns:1fr;gap:1.5rem}
  .advantage-head{position:static}
  .advantage-item{opacity:1}
}

/* ---- Louez en 3 étapes : timeline horizontale ---- */
.steps-track{position:relative;padding-top:1rem}
.steps-line{position:absolute;top:3.6rem;left:0;right:0;height:2px;background:var(--line)}
.steps-progress{position:absolute;top:3.6rem;left:0;height:2px;width:100%;background:linear-gradient(90deg,var(--red),var(--gold));transform:scaleX(0);transform-origin:left}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:step}
.step{position:relative;text-align:left}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--display);font-size:var(--fs-3xl);font-weight:800;color:var(--line-2);display:block;margin-bottom:1rem}
.step .sico{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;margin-bottom:1.1rem;color:var(--gold)}
.step h3{font-size:1.1rem;margin-bottom:.4rem}.step p{color:var(--ink-2);font-size:.92rem;margin:0}
@media(max-width:680px){
  .steps{grid-template-columns:1fr;gap:2.4rem}
  .steps-line,.steps-progress{display:none}
}

/* ---- Stats : fond void + filigrane géométrique discret ---- */
.stats-band{position:relative;overflow:hidden;background:var(--void);color:#fff;border-radius:var(--r-lg);padding:2.8rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.5rem;text-align:center}
.stats-band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:
    linear-gradient(45deg,transparent 48%,#fff 49%,#fff 51%,transparent 52%),
    linear-gradient(-45deg,transparent 48%,#fff 49%,#fff 51%,transparent 52%);
  background-size:34px 34px}
.stats-band .s{position:relative}
.stats-band .s b{font-family:var(--display);font-size:2.6rem;display:block;font-feature-settings:"tnum";background:linear-gradient(135deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats-band .s span{color:rgba(255,255,255,.7);font-size:.9rem}

/* ---- Témoignages : rail défilant en continu ---- */
/* display:flex est indispensable ici : .marquee-track (l'original + le clone
   ajouté par le JS) doivent être posés côte à côte pour que la boucle
   translateX(-50%) soit continue — sans ça, les deux pistes s'empilent en
   bloc l'une sous l'autre (comportement par défaut) et l'effet défilement
   disparaît complètement, une piste au-dessus de l'autre au lieu d'une
   seule ligne. */
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:1.5rem;width:max-content;flex:0 0 auto}
.marquee.is-running .marquee-track{animation:marqueeScroll 36s linear infinite}
.marquee.is-paused .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{to{transform:translateX(-50%)}}
.testimonial{position:relative;overflow:hidden;flex:0 0 min(400px,84vw);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem;box-shadow:var(--sh-sm);transition:transform var(--dur-base) var(--ease-spring),box-shadow .35s var(--ease)}
.testimonial:hover,.testimonial:focus-visible{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.testimonial::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--gold))}
.testimonial .quote-mark{position:absolute;top:.6rem;right:1rem;width:64px;height:64px;color:var(--bg-2);z-index:0}
.testimonial .stars{position:relative;z-index:1}
.testimonial p{color:var(--ink-2);font-size:.96rem;font-style:italic;margin:0 0 1.2rem;position:relative;z-index:1;line-height:1.6}
.testimonial .author{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;border-top:1px solid var(--line-2);padding-top:.9rem}
.testimonial .author b{font-family:var(--display);font-size:1rem}
/* #8a6415 fixe (pas --gold-ink) : la carte reste #fff même en thème sombre */
.testimonial .author span{font-size:.76rem;color:#8a6415;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.stars{color:#8a6415;font-size:.85rem;letter-spacing:.1em;margin-bottom:.5rem}

/* ---- Casablanca et au-delà (destinations) ---- */
.destinations{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.dest-card{display:flex;align-items:center;gap:1rem;padding:1.4rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast) var(--ease-out)}
.dest-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.dest-card .ico{width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-sm);background:var(--blue-050);color:var(--blue);display:grid;place-items:center}
.dest-card h3{font-size:1rem;margin-bottom:.2rem}
.dest-card span{color:var(--muted);font-size:.85rem}

/* ---- FAQ : accordéon fluide (grid-template-rows animé en JS) ---- */
.faq-list{max-width:800px;margin-inline:auto;display:flex;flex-direction:column;gap:.7rem}
.faq-item{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.faq-item summary{list-style:none;cursor:pointer;padding:1.2rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:600;font-family:var(--display)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{flex:0 0 auto;color:var(--gold);transition:transform var(--dur-base) var(--ease-out)}
.faq-item.is-open summary svg{transform:rotate(45deg)}
.faq-body{display:grid}
.faq-item.js-anim .faq-body{grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-out)}
.faq-item.js-anim.is-open .faq-body{grid-template-rows:1fr}
.faq-body-in{overflow:hidden;min-height:0}
.faq-body-in p{margin:0 1.4rem 1.3rem;color:var(--ink-2);font-size:.94rem;line-height:1.7}

/* ---- CTA ---- */
.cta{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--blue),#0d1130);color:#fff;border-radius:var(--r-lg);padding:3.5rem;text-align:center}
.cta::before{content:"";position:absolute;top:-30%;right:-10%;width:300px;height:300px;background:radial-gradient(circle,rgba(201,152,46,.2),transparent 70%);border-radius:50%}
.cta h2{font-size:clamp(1.9rem,3.8vw,2.8rem);position:relative}
.cta p{color:rgba(255,255,255,.75);margin:.8rem auto 1.8rem;max-width:48ch;position:relative}

/* ---- CTA plein écran (accueil, section finale) ---- */
.cta-full{position:relative;overflow:hidden;min-height:70dvh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--void);color:#fff}
.cta-full::before{content:"";position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(201,152,46,.16),transparent 70%);pointer-events:none}
.cta-full-in{position:relative;max-width:720px;padding-inline:24px}
.cta-full h2{font-size:var(--fs-7xl);font-weight:800;letter-spacing:var(--ls-tight);line-height:var(--lh-display)}
.cta-full p{color:rgba(255,255,255,.72);margin:1.4rem auto 2.2rem;max-width:46ch;font-size:var(--fs-lg)}
.cta-full-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ---- Page head (internes) ---- */
.pagehead{padding:9rem 0 3.5rem;background:linear-gradient(160deg,#0d1130,var(--blue));color:#fff;position:relative;overflow:hidden}
.pagehead::after{content:"";position:absolute;inset:0;background-image:linear-gradient(30deg,transparent 46%,rgba(255,255,255,.03) 46% 54%,transparent 54%);background-size:44px 44px}
.pagehead h1{font-size:clamp(2.1rem,4.8vw,3.2rem);font-weight:800;position:relative}
.pagehead p{color:rgba(255,255,255,.72);margin-top:.6rem;position:relative;font-size:1.05rem}
.breadcrumb{position:relative;font-size:.85rem;color:var(--gold);margin-bottom:.8rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:0;padding:0;margin:0}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb li:not(:last-child)::after{content:"›";margin:0 .5rem;opacity:.5}
.breadcrumb a{color:rgba(255,255,255,.6)}.breadcrumb a:hover{color:#fff}
.breadcrumb.on-light{color:var(--ink-2)}
.breadcrumb.on-light a{color:var(--muted)}.breadcrumb.on-light a:hover{color:var(--ink)}
/* Variante réduite (flotte) : garde le fond sombre pour la lisibilité de la
   nav transparente, mais renonce à la bannière haute et au sous-titre */
.pagehead-compact{padding:7.5rem 0 2.2rem}
.pagehead-compact h1{font-size:var(--fs-5xl);letter-spacing:var(--ls-tight)}

/* ---- Filtres (page voitures) : barre sticky sous la nav ---- */
.filterbar{position:sticky;top:5.4rem;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);padding:1rem 0;margin-bottom:2.6rem}
.filterbar-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.filter-select,.filter-toggle{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:var(--r-full);padding:.55rem 1.1rem;font:inherit;font-size:.86rem;font-weight:500;color:var(--ink-2);background:#fff;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.filter-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23767a8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:14px;padding-right:2.2rem}
.filter-select:hover,.filter-toggle:hover{border-color:var(--red)}
.filter-select:focus,.filter-toggle:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.filter-toggle.on{background:var(--red);border-color:var(--red);color:#fff}
.filter-sort{margin-left:auto}
.filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem;min-height:1px}
.filter-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-full);padding:.35rem .5rem .35rem .85rem;font-size:.8rem;color:var(--ink-2)}
.filter-chip button{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:none;background:var(--line);color:var(--ink-2);cursor:pointer;padding:0;font-size:.85rem;line-height:1;transition:background var(--dur-fast),color var(--dur-fast)}
.filter-chip button:hover{background:var(--red);color:#fff}
.filter-count{margin-top:.7rem;font-size:.85rem;color:var(--muted);font-feature-settings:"tnum"}
@media(max-width:680px){
  .filterbar{top:4.6rem}
  .filterbar-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem;-webkit-overflow-scrolling:touch}
  .filter-select,.filter-toggle{flex:0 0 auto}
  .filter-sort{margin-left:0}
}

/* ---- État vide ---- */
.empty-state{text-align:center;padding:4.5rem 1rem;max-width:420px;margin-inline:auto}
.empty-state svg{width:110px;height:110px;color:var(--line);margin:0 auto 1.4rem}
.empty-state h3{font-size:1.3rem;margin-bottom:.5rem}
.empty-state p{color:var(--muted);margin-bottom:1.6rem}

/* ---- Detail page ---- */
.detail{display:grid;grid-template-columns:1.2fr .8fr;gap:2.8rem;align-items:start;padding-top:8.5rem}
.detail-gallery{display:grid;grid-template-columns:84px 1fr;gap:.8rem}
/* Une seule photo : pas de colonne de vignettes (voir voiture.php) — sans
   ça .dgal-main hérite quand même de la 1ère piste (84px) faute d'un 2e
   enfant, et la photo s'affiche minuscule. */
.detail-gallery.single{grid-template-columns:1fr}
.dgal-main{position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;background:var(--sand);box-shadow:var(--sh-md);cursor:zoom-in;isolation:isolate}
.dgal-main img{width:100%;height:100%;object-fit:cover}
.dgal-main .chip{position:absolute;top:14px;left:14px;background:#fff;z-index:1}
.dgal-zoom{position:absolute;bottom:14px;right:14px;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-sm);z-index:1;color:var(--ink)}
.dgal-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.92);cursor:pointer;display:grid;place-items:center;box-shadow:var(--sh-sm);z-index:1;color:var(--ink)}
.dgal-prev{left:12px}.dgal-next{right:12px}
.dgal-thumbs{display:flex;flex-direction:column;gap:.6rem;overflow-y:auto;max-height:520px}
.dgal-thumbs img{width:84px;height:60px;object-fit:cover;border-radius:9px;cursor:pointer;opacity:.5;border:2.5px solid transparent;flex:0 0 auto;transition:opacity var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.dgal-thumbs img.on{opacity:1;border-color:var(--red)}
.detail-body{margin-top:2rem}
.detail-info h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.detail-cat{color:var(--muted);margin:.4rem 0 1.3rem}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.5rem}
.spec-grid .s{display:flex;align-items:center;gap:.7rem;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem}
.spec-grid .s .ico{flex:0 0 auto;color:var(--gold)}
.spec-grid .s b{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;display:block}
.spec-grid .s span{font-weight:600}
.detail-desc{color:var(--ink-2);margin-bottom:1.5rem;line-height:1.7}
.detail-sidebar{position:sticky;top:6rem}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--sh-sm)}
.price-row{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid var(--line-2)}
.price-row:last-of-type{border:none}
.price-row b{font-family:var(--display);color:var(--red);font-size:1.15rem;font-feature-settings:"tnum"}
.detail-actions{display:flex;gap:.7rem;margin-top:1.3rem}
.detail-actions .btn{flex:1;min-width:0}
@media(max-width:960px){.detail-sidebar{position:static}}
@media(max-width:680px){
  .detail-gallery{grid-template-columns:1fr}
  .dgal-thumbs{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
  .detail-actions{flex-direction:column}
  .price-calc-dates{grid-template-columns:1fr}
}

/* Calculateur de prix en direct : bascule automatiquement sur le tarif
   semaine (≥7j) puis mois (≥28j) — voir front.js, module priceCalculator */
.price-calc{border-top:1px solid var(--line-2);margin-top:1rem;padding-top:1.1rem}
.price-calc-dates{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.9rem}
.price-calc-dates>div{min-width:0}
.price-calc-dates label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.3rem}
.price-calc-dates input{border:1px solid var(--line);border-radius:8px;padding:.55rem .6rem;font:inherit;font-size:.85rem;width:100%}

/* Champs date pilotés par le calendrier personnalisé (voir attachDatePicker
   dans front.js) : le picker natif est neutralisé (readonly), on masque son
   icône pour ne pas laisser croire qu'elle ouvre encore quelque chose. */
input[type="date"][readonly]{cursor:pointer;background:#fff}
input[type="date"][readonly]::-webkit-calendar-picker-indicator{display:none}

/* Calendrier personnalisé */
.date-pop{position:absolute;z-index:500;width:272px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:.9rem}
.date-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;font-family:var(--display);font-weight:700;font-size:.92rem}
.date-pop-nav{background:none;border:none;cursor:pointer;padding:.4rem;border-radius:50%;color:var(--ink-2);display:grid;place-items:center;transition:background var(--dur-fast) var(--ease-out)}
.date-pop-nav:hover{background:var(--bg-2)}
.date-pop-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.15rem;text-align:center}
.date-pop-dow{font-size:.66rem;color:var(--muted);font-weight:600;padding:.3rem 0}
.date-pop-day{background:none;border:none;border-radius:8px;padding:.5rem 0;font-size:.84rem;font:inherit;cursor:pointer;color:var(--ink);transition:background var(--dur-fast) var(--ease-out)}
.date-pop-day:hover:not(:disabled){background:var(--bg-2)}
.date-pop-day.on{background:var(--blue);color:#fff;font-weight:700}
.date-pop-day:disabled{color:var(--line);cursor:not-allowed;text-decoration:line-through}
.date-pop-day.booked:disabled{color:var(--bad);background:var(--bad-bg);text-decoration:line-through}
.price-calc-total{display:flex;align-items:baseline;justify-content:space-between;background:var(--bg-2);border-radius:10px;padding:.8rem .9rem}
.price-calc-total span{font-size:.82rem;color:var(--muted)}
.price-calc-total b{font-family:var(--display);font-size:1.5rem;color:var(--red);font-feature-settings:"tnum"}
.price-calc-note{font-size:.76rem;color:var(--muted);margin-top:.5rem}

/* Lightbox plein écran */
.lightbox{position:fixed;inset:0;z-index:1800;background:rgba(8,9,15,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility 0s var(--dur-base)}
.lightbox.open{opacity:1;visibility:visible;transition:opacity var(--dur-base) var(--ease-out)}
.lightbox img{max-width:90vw;max-height:82vh;object-fit:contain;border-radius:var(--r-sm)}
.lightbox-close,.lightbox-nav{position:absolute;border:none;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.22)}
.lightbox-close{top:1.4rem;right:1.4rem;width:46px;height:46px;border-radius:50%}
.lightbox-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%}
.lightbox-prev{left:1.4rem}.lightbox-next{right:1.4rem}
.lightbox-count{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:.85rem;font-feature-settings:"tnum"}
@media(max-width:680px){.lightbox-nav{width:44px;height:44px}.lightbox-close{width:40px;height:40px;top:1rem;right:1rem}}

/* ---- Page agence : éditorial ---- */
.editorial{max-width:68ch;margin-inline:auto}
.editorial p{color:var(--ink-2);font-size:1.08rem;line-height:1.8;margin-bottom:1.4rem}
.editorial p:first-of-type::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:4.2rem;line-height:.8;padding:.1rem .5rem 0 0;color:var(--red)}

/* "Qui sommes-nous" + "Notre parcours" fusionnés en une seule section :
   texte à gauche, timeline à droite — plutôt que deux sections empilées. */
.about-combo{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:start}
.about-combo .editorial{max-width:none;margin-inline:0}
.about-combo .about-timeline-head{display:flex;align-items:center;gap:.6rem;font-size:1.3rem;margin-bottom:1.6rem;color:var(--gold-ink)}
@media(max-width:960px){.about-combo{grid-template-columns:1fr;gap:3rem}}

/* Timeline verticale (histoire de l'agence) */
.timeline-v{position:relative;max-width:640px;margin-inline:auto;padding-left:2.2rem}
.about-combo .timeline-v{max-width:none;margin-inline:0}
.timeline-v::before{content:"";position:absolute;left:7px;top:.4rem;bottom:.4rem;width:2px;background:var(--line)}
.timeline-item{position:relative;padding-bottom:2.6rem}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{content:"";position:absolute;left:-2.2rem;top:.3rem;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--gold)}
.timeline-item h3{font-size:1.1rem;margin-bottom:.4rem}
.timeline-item p{color:var(--ink-2);font-size:.94rem;margin:0}

/* Valeurs en trois cartes égales (agence) */
.value-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.value-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:2.2rem 1.8rem;text-align:center;box-shadow:var(--sh-sm);transition:transform var(--dur-base) var(--ease-spring),box-shadow .35s var(--ease)}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.value-card .ico{width:72px;height:72px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--bg-2);color:var(--red);margin-inline:auto}
.value-card h3{font-size:1.2rem;margin:1.1rem 0 .5rem}
.value-card p{color:var(--ink-2);line-height:1.7;margin:0}
@media(max-width:680px){.value-cards{grid-template-columns:1fr}}


/* ---- Forms ---- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:2.2rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fld{display:flex;flex-direction:column;gap:.35rem}
.fld.wide{grid-column:1/-1}
.fld label{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{appearance:none;-webkit-appearance:none;width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;padding:.72rem .8rem;font:inherit;background:#fff;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23767a8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:16px;padding-right:2.4rem}
/* box-shadow (calque de peinture séparé) plutôt que border-color seul : sur
   certains moteurs de rendu, le cadre natif d'un input/select ignore les
   changements de border-color en :focus — l'anneau reste visible dans tous les cas */
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.fld.is-invalid input,.fld.is-invalid textarea{border-color:var(--bad)}
.fld.is-valid input,.fld.is-valid textarea{border-color:var(--ok)}
.form-ok{background:var(--ok-bg);color:#0f6b46;border:1px solid #bfe6d3;border-radius:10px;padding:.8rem;text-align:center;font-weight:600;margin-top:1rem;display:none}
.form-ok.show{display:block;animation:formOkIn var(--dur-slow) var(--ease-spring)}
.form-warn:not([hidden]){display:flex;align-items:center;gap:.4rem;background:var(--bad-bg);color:var(--bad);border-radius:10px;padding:.7rem .9rem;font-size:.86rem;font-weight:600;margin-top:1rem}
.price-calc-warn:not([hidden]){display:flex;align-items:center;gap:.35rem;color:var(--bad);margin-top:.6rem}
@keyframes formOkIn{from{opacity:0;transform:scale(.94) translateY(-6px)}to{opacity:1;transform:none}}
.contact-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:2.8rem;align-items:start}
.contact-info .ci{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.5rem;transition:transform var(--dur-fast) var(--ease-spring)}
.contact-info .ci:hover{transform:translateX(4px)}
.contact-info .ci .ico{width:48px;height:48px;flex:0 0 48px;border-radius:13px;display:grid;place-items:center}
.contact-info .ci .ico.red{background:var(--red-050);color:var(--red)}
.contact-info .ci .ico.blue{background:var(--blue-050);color:var(--blue)}
.contact-info .ci .ico.gold{background:var(--gold-050);color:var(--gold)}
.contact-info .ci b{display:block;font-family:var(--display)}
.contact-info .ci span{color:var(--muted);font-size:.92rem}
.contact-map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;margin-top:1.6rem}
.contact-map iframe{width:100%;height:100%;border:0;display:block}
.hours-list{list-style:none;padding:0;margin:1.2rem 0 0;font-size:.9rem;color:var(--ink-2)}
.hours-list li{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--line-2)}
.hours-list li:last-child{border:none}
.hours-list b{font-weight:600}

/* ---- Footer ---- */
.footer{position:relative;overflow:hidden;background:var(--void);color:#c2c6d3}
.footer-glow{position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);white-space:nowrap;font-family:var(--display);font-weight:800;font-size:clamp(6rem,18vw,15rem);line-height:1;color:#fff;opacity:.04;letter-spacing:-.02em;pointer-events:none;user-select:none}
.footer-in{position:relative;max-width:var(--wrap);margin-inline:auto;padding:5rem 24px 2.6rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:2.6rem}
.f-logo{height:44px;margin-bottom:.8rem;filter:brightness(0) invert(1)}
.f-brand p{color:#8b90a2;margin:.3rem 0 1.3rem;font-size:.92rem}
.f-socials{display:flex;gap:.6rem}
.f-socials a{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);background:rgba(255,255,255,.07);color:#fff;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring)}
.f-socials a:hover{background:var(--gold);color:var(--void);transform:translateY(-2px)}
.f-col h4{color:#fff;margin-bottom:1.1rem;font-size:1rem}
.f-col a,.f-col span{display:block;color:#9ca1b2;font-size:.93rem;margin-bottom:.6rem}
.f-col a:hover{color:#fff}
.f-line{display:flex!important;align-items:center;gap:.6rem}
.f-line svg{flex:0 0 auto;color:var(--gold)}
.f-note{color:#8b90a2;font-size:.9rem;margin:0 0 1rem}
.footer-bottom{position:relative;max-width:var(--wrap);margin-inline:auto;padding:1.3rem 24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;font-size:.85rem;color:#6b6f80}
.admin-link{color:#6b6f80}.admin-link:hover{color:#fff}

/* ---- Toast ---- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(24px);z-index:1200;background:var(--ink);color:#fff;padding:.85rem 1.3rem;border-radius:12px;box-shadow:var(--sh-lg);opacity:0;overflow:hidden;transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring);font-weight:500}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--red),var(--gold));transform-origin:left;transform:scaleX(0)}
.toast.show::after{animation:toastLife 3s linear forwards}
@keyframes toastLife{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---- Responsive ---- */
@media(max-width:960px){
  .detail{grid-template-columns:1fr;padding-top:7rem}
  .contact-grid{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  /* --fs-9xl (clamp + vw) fait échouer le retour à la ligne du titre hero sur
     mobile : dans ce conteneur précis (.hero flex > .wrap padding-inline >
     .hero-copy max-width), Chrome calcule la largeur disponible du texte à
     partir d'une taille de police liée au viewport, ce qui désynchronise le
     point de césure et fait déborder "Louez l'excellence" hors de l'écran.
     Une taille fixe (non-vw) au même point de rupture supprime le bug ;
     overflow-wrap reste en filet de sécurité pour les très petits écrans. */
  .hero-title{font-size:2.5rem;overflow-wrap:break-word}
  .nav-in{padding:.5rem .6rem .5rem 1.1rem}
  .nav-links{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:8vh 9vw;background:var(--void);transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none;transition:transform var(--dur-slow) var(--ease-expo),opacity var(--dur-fast) var(--ease-out),visibility 0s var(--dur-slow)}
  .nav-links.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform var(--dur-slow) var(--ease-expo),opacity var(--dur-fast) var(--ease-out)}
  .nav-indicator{display:none}
  .nav-links>a{width:100%;color:#fff;font-family:var(--display);font-size:clamp(2rem,10vw,2.6rem);font-weight:700;padding:.5rem 0;opacity:0;transform:translateY(18px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
  .nav-links.open>a{opacity:1;transform:none}
  .nav-links>a:nth-of-type(1){transition-delay:.08s}
  .nav-links>a:nth-of-type(2){transition-delay:.14s}
  .nav-links>a:nth-of-type(3){transition-delay:.2s}
  .nav-links>a:nth-of-type(4){transition-delay:.26s}
  .nav-cta{display:none}
  .nav-burger{display:flex}
  .form-grid,.spec-grid{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr}
  .stats-band{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.15s!important;scroll-behavior:auto!important}.preloader{display:none}}

/* ---- Logo (badge image pré-recadré en carré + nom) ----
   Le badge (assets/img/logo-badge-*.png) a déjà son propre fond/contour/
   arrondi intégrés à l'image (recadrage carré centré depuis logo-new.png,
   coins transparents) : le conteneur ne fait que réserver l'espace exact,
   sans fond/ombre superposés qui feraient doublon. */
.brand-logo{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;color:var(--blue)}
.brand-logo .brand-mark{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center}
.brand-logo .brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand-logo .brand-name{font-size:1.4rem;letter-spacing:-.01em}
.nav-brand .brand-name{color:var(--ink)}
.nav-brand .brand-mark{width:40px;height:40px;flex-basis:40px}
.pl-logo.brand-logo{flex-direction:column;gap:1rem}
.pl-logo.brand-logo .brand-mark{width:76px;height:76px;flex-basis:76px}
.pl-logo.brand-logo .brand-name{font-size:2rem;color:var(--blue)}
.f-brand-logo{color:#fff;margin-bottom:.6rem}
.f-brand-logo .brand-name{color:#fff}
.f-brand-logo .brand-mark{width:38px;height:38px;flex-basis:38px}

/* ---- Bulle WhatsApp flottante ---- */
.wa-bubble{position:fixed;right:22px;bottom:22px;z-index:1300;display:flex;align-items:center;gap:0;background:#1fab54;color:#fff;height:60px;padding:0 16px;border-radius:34px;box-shadow:0 12px 30px -8px rgba(31,171,84,.6);overflow:hidden;max-width:60px;transition:max-width .35s var(--ease),box-shadow .25s;white-space:nowrap}
.wa-bubble svg{flex:0 0 auto}
.wa-bubble-txt{font-weight:600;font-size:.95rem;margin-left:10px;opacity:0;transition:opacity .25s ease .05s}
.wa-bubble:hover{max-width:280px;box-shadow:0 16px 36px -8px rgba(31,171,84,.7)}
.wa-bubble:hover .wa-bubble-txt{opacity:1}
.wa-bubble::after{content:"";position:absolute;inset:0;border-radius:34px;box-shadow:0 0 0 0 rgba(31,171,84,.5);animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(31,171,84,.45)}70%{box-shadow:0 0 0 16px rgba(31,171,84,0)}100%{box-shadow:0 0 0 0 rgba(31,171,84,0)}}
@media(max-width:680px){.wa-bubble{right:16px;bottom:16px;height:56px;max-width:56px}.wa-bubble:hover{max-width:56px}.wa-bubble:hover .wa-bubble-txt{opacity:0}}

/* Halo de contraste derrière le logo/les liens quand le fond transparent
   laisse passer une photo claire (le texte de nav reste blanc en permanence :
   hero et pagehead sont toujours sombres, et la pilule défilée l'est aussi) */
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,11,26,.5) 0%, rgba(8,11,26,0) 100%);transition:opacity var(--dur-base) var(--ease-out)}
.nav.scrolled::before{opacity:0}
.nav-brand .brand-name{color:#fff}

/* ============ Bannière des en-têtes de pages (breadcrumb) ============ */
.pagehead{
  background:
    linear-gradient(90deg, rgba(8,11,26,.9) 0%, rgba(8,11,26,.65) 45%, rgba(8,11,26,.4) 100%),
    url('../img/pagehead.jpg') center / cover no-repeat;
}
.pagehead::after{opacity:.35}

/* ---- Curseur personnalisé (desktop à pointeur fin uniquement) ----
   html.cursor-ready n'est posé par le JS qu'une fois les deux éléments
   créés : un utilisateur sans JS garde toujours son curseur natif. */
@media(hover:hover) and (pointer:fine){
  html.cursor-ready,html.cursor-ready a,html.cursor-ready button,html.cursor-ready [role="button"]{cursor:none}
  /* Le curseur natif reste visible sur les champs de saisie (curseur texte) */
  html.cursor-ready input,html.cursor-ready textarea,html.cursor-ready select{cursor:auto}
}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:2100;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
html.cursor-ready .cursor-dot,html.cursor-ready .cursor-ring{opacity:1}
.cursor-dot{width:6px;height:6px;background:var(--gold)}
.cursor-ring{width:34px;height:34px;border:1.5px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;transition:width var(--dur-fast) var(--ease-spring),height var(--dur-fast) var(--ease-spring),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.cursor-ring.is-grow{width:56px;height:56px;border-color:var(--gold)}
.cursor-ring.is-card{width:80px;height:80px;border-color:transparent;background:rgba(8,9,15,.75);backdrop-filter:blur(6px)}
.cursor-label{opacity:0;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:opacity var(--dur-fast) var(--ease-out)}
.cursor-ring.is-card .cursor-label{opacity:1}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
  .cursor-dot,.cursor-ring{display:none}
}