:root{
  /* Replis seulement : les valeurs réelles viennent des réglages « Apparence »
     et sont injectées dans <style id="apparence">. Elles reprennent ici la
     charte DOZO Trade — bleu nuit, orange, Montserrat + Inter. */
  /* --- bleu nuit : la base de la charte --- */
  --bitume:#061F35; --terre:#0F334F; --surface:#163955; --surface2:#1D3F5A;
  /* --- accents --- */
  --orange:#FF8A00;      /* couleur d'action, l'orange du symbole */
  --orange2:#FFA640;
  --laterite:#023D7A;    /* bleu roi du symbole, employé sur fond clair */
  --laiton:#7FC0F5;      /* accent secondaire, lisible sur le bleu nuit */
  --laiton2:#A6D4FA;
  /* --- papier --- */
  --parchemin:#F2F6FA; --parchemin2:#E4EBF2; --encre:#061F35;
  --carte:#FBFCFE;   /* surfaces posées sur le fond clair */
  --fond-rvb:6,31,53;
  --encre2:#4A657B;  /* texte secondaire sur fond clair */
  /* --- textes sur fond sombre --- */
  --sable:#F2F6FA; --sable2:#93A7B8;
  --vert:#3F8560; --ambre:var(--orange2); --rouge:#B5432F;
  /* Le vert d'identité tient comme trait mais tombe à 3,6:1 en texte sur fond
     sombre. Les pastilles « vérifié », toutes sous 8 px, prennent ce cran plus
     clair ; les bordures gardent --vert, l'aspect ne bouge pas. */
  --vert-texte:#5CB184;
  --l1:rgba(242,246,250,.09); --l2:rgba(242,246,250,.18);
  --e:cubic-bezier(.16,1,.3,1); --eDoor:cubic-bezier(.5,0,.1,1);
  /* coins arrondis : cartes/boutons/champs adoucis. Les polaroids, la grille de stats, les tampons et le logo restent a angle vif : ca fait partie du theme "douane / caisse" et perdrait son sens arrondi. */
  --r-card:16px; --r-btn:10px; --r-tag:5px;
  /* --- rythme vertical et echelle des titres --- */
  --air:clamp(78px,8.5vw,148px);
  --air-ample:clamp(96px,11vw,190px);
  --titre-section:clamp(1.7rem,3.4vw,2.5rem);
  --titre-section-majeur:clamp(2.5rem,5.4vw,4rem);
  /* --- élévation ---
     Deux couches par niveau : une ombre de contact, courte et dense, qui pose
     l'objet sur son fond, et une ombre ambiante, large et diffuse, qui lui
     donne sa masse. Une seule couche donne le décalque, pas le relief. */
  --ombre-1:0 1px 2px rgba(2,10,20,.28), 0 4px 10px rgba(2,10,20,.14);
  --ombre-2:0 2px 4px rgba(2,10,20,.30), 0 14px 30px rgba(2,10,20,.22);
  --ombre-3:0 4px 8px rgba(2,10,20,.32), 0 28px 56px rgba(2,10,20,.34);
  /* Sur fond sombre, un liseré clair sur l'arête haute : c'est la lumière qui
     frappe le bord. Sans lui les surfaces sombres paraissent découpées. */
  --lueur-bord:inset 0 1px 0 rgba(255,255,255,.07);
  --lueur-bord-clair:inset 0 1px 0 rgba(255,255,255,.9);
  /* --- polices ---
     Trois rôles, pas trois familles : « ui » suit les titres et « chiffres »
     suit le texte, sauf réglage contraire. Le gérant n'en choisit que deux. */
  --police-titres:'Montserrat',sans-serif;
  --police-texte:'Inter',sans-serif;
  --police-ui:var(--police-titres);
  --police-chiffres:var(--police-texte);
}
*{box-sizing:border-box;margin:0;padding:0}
/* `#grain` est en `position:fixed` avec `inset:-120%` : il déborde de 900 px à
   droite pour que sa texture puisse dériver. Étant fixe, il échappe au
   `overflow-x:hidden` du body et étirait la zone de défilement de 17 px — la
   page glissait latéralement au doigt, ce qui donne l'impression d'un site
   cassé. `clip` bloque ce défilement sans créer de conteneur de défilement,
   donc sans casser `position:sticky` comme l'aurait fait `hidden`. Les
   navigateurs qui ignorent `clip` retombent simplement sur l'ancien
   comportement. */
html{overflow-x:clip}
body{background:var(--bitume);color:var(--sable);font-family:var(--police-texte);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Atmosphère du fond sombre. Deux lueurs très basses, fixes, qui empêchent
   l'aplat uniforme : la page garde une profondeur même entre deux sections.
   Posé sur le corps plutôt que sur chaque section, donc gratuit au défilement,
   et sous tout le reste (z-index négatif) donc sans effet sur les clics. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(118% 62% at 12% -8%, rgba(255,138,0,.055), transparent 58%),
    radial-gradient(96% 58% at 92% 8%, rgba(127,192,245,.05), transparent 62%),
    radial-gradient(130% 88% at 50% 120%, rgba(2,61,122,.16), transparent 70%)}
h1,h2,h3{font-family:var(--police-titres);font-weight:600;letter-spacing:-.005em;line-height:1.04}
h1{font-weight:600;letter-spacing:-.012em;line-height:1.02}
h1 em,h2 em{font-style:italic;font-weight:500}
/* utilitaire : sans condensé pour tout ce qui est étiquette / manifeste */
.lab{font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.11em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 22px}
/* Préférence système. Complémentaire de la classe `sans-animations` posée sur
   <body> par le réglage d'apparence : l'une vient du téléphone du visiteur,
   l'autre du choix du gérant. Aucune ne doit annuler l'autre. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;
    transition-delay:0s!important;animation-delay:0s!important;scroll-behavior:auto!important}
}
body.lock{overflow:hidden}

#grain{position:fixed;inset:-120%;z-index:190;pointer-events:none;opacity:.04;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");animation:gr .8s steps(3) infinite}
@keyframes gr{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

#cur,#curD{position:fixed;top:0;left:0;z-index:195;pointer-events:none;border-radius:50%;mix-blend-mode:difference;display:none}
@media(pointer:fine){#cur,#curD{display:block}body,a,button,.pol,.vh,.pc,.chip{cursor:none}}
#cur{width:6px;height:6px;background:var(--sable);margin:-3px 0 0 -3px}
#cur.dark{background:var(--laiton)}
#curD.dark{border-color:rgba(8,45,74,.55);mix-blend-mode:normal}
#cur.dark{mix-blend-mode:normal}
#curD{width:34px;height:34px;border:1px solid rgba(242,246,250,.45);margin:-17px 0 0 -17px;transition:width .35s var(--e),height .35s var(--e),margin .35s var(--e),border-color .35s}
#curD.big{width:76px;height:76px;margin:-38px 0 0 -38px;border-color:var(--orange)}

/* ============ RIDEAU CONTENEUR ============ */
#gate{position:fixed;inset:0;z-index:180;perspective:1800px;pointer-events:none}
#gate.gone{display:none}
.door{position:absolute;top:0;bottom:0;width:50.4%;background:linear-gradient(178deg,var(--couleur-terre),var(--couleur-terre));
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.24) 0 5px,rgba(255,255,255,.03) 5px 9px,transparent 9px 26px),linear-gradient(178deg,var(--couleur-terre),var(--couleur-terre));
  box-shadow:inset 0 0 90px rgba(0,0,0,.5);transition:transform 1.9s var(--eDoor)}
.door.l{left:0;transform-origin:left center}
.door.r{right:0;transform-origin:right center}
#gate.open .door.l{transform:rotateY(-108deg)}
#gate.open .door.r{transform:rotateY(108deg)}
.bar{position:absolute;top:6%;bottom:6%;width:9px;background:linear-gradient(90deg,var(--couleur-terre),var(--laiton),var(--couleur-terre));border-radius:3px;box-shadow:0 0 12px rgba(0,0,0,.5)}
.door.l .bar:nth-of-type(1){right:16%}.door.l .bar:nth-of-type(2){right:32%}
.door.r .bar:nth-of-type(1){left:16%}.door.r .bar:nth-of-type(2){left:32%}
.plaque{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--police-ui);font-weight:700;font-stretch:78%;text-transform:uppercase;font-size:clamp(1.7rem,5vw,3.7rem);letter-spacing:.14em;color:rgba(255,255,255,.9);text-shadow:0 3px 10px rgba(0,0,0,.5)}
.door.l .plaque{right:8%}.door.r .plaque{left:8%}
.serial{position:absolute;bottom:9%;font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.62rem;letter-spacing:.22em;color:rgba(255,255,255,.45)}
.door.l .serial{right:8%}.door.r .serial{left:8%}
.seam{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:rgba(0,0,0,.55);z-index:3;transition:opacity .5s .3s}
#gate.open .seam{opacity:0}

/* preloader dans le rideau */
#pre{position:absolute;inset:0;z-index:5;background:var(--bitume);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;transition:opacity .6s var(--e),visibility .6s}
#pre.done{opacity:0;visibility:hidden}
.pw{display:flex;font-family:var(--police-ui);font-weight:700;font-stretch:78%;text-transform:uppercase;font-size:clamp(2rem,6.6vw,3.3rem);letter-spacing:.13em}
.pw span{display:inline-block;opacity:0;transform:translateY(100%);animation:pu .75s var(--e) forwards}
@keyframes pu{to{opacity:1;transform:none}}
.pb{width:min(260px,60vw);height:2px;background:var(--l2);overflow:hidden}
.pb i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(0);animation:pbar 1.5s var(--e) forwards}
@keyframes pbar{to{transform:scaleX(1)}}
.pm{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sable2)}

/* ============ HUD ODOMETRE ============ */
#hud{position:fixed;left:22px;bottom:22px;z-index:120;font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;opacity:0;transform:translateY(14px);transition:opacity .9s var(--e),transform .9s var(--e);pointer-events:none}
body.go #hud{opacity:1;transform:none}
#hud{transition:opacity .9s var(--e),transform .9s var(--e),color .6s}
#hud.clair .lbl,#hud.clair .pos{color:var(--encre2)}
#hud.clair .km{color:var(--laterite)}
#hud.clair .track{background:rgba(8,45,74,.18)}
#hud .lbl{font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sable2);margin-bottom:4px}
#hud .km{font-family:var(--police-titres);font-weight:600;font-size:1.75rem;letter-spacing:0;color:var(--laiton2);line-height:1}
#hud .km small{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.6rem;color:var(--sable2);margin-left:6px;letter-spacing:.14em;align-self:center}
#hud .pos{font-size:.58rem;letter-spacing:.1em;color:var(--sable);margin-top:7px;display:flex;align-items:center;gap:7px}
#hud .pos b{width:5px;height:5px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange);animation:bl 1.8s ease-in-out infinite}
@keyframes bl{50%{opacity:.25}}
#hud .track{width:130px;height:1px;background:var(--l2);margin-top:9px;position:relative}
#hud .track i{position:absolute;left:0;top:0;height:100%;background:var(--orange);width:0}
@media(max-width:700px){#hud{left:16px;bottom:16px;transform:scale(.85);transform-origin:left bottom}body.go #hud{transform:scale(.85)}}
/* une fois arrive (vitrine, avis, devis, pied de page), le compteur n'a plus d'usage : on l'efface pour ne plus gener la lecture, surtout sur mobile ou l'espace manque */
#hud.away{opacity:0!important}
@media(max-width:700px){body.go #hud.away{transform:scale(.85) translateY(14px)}}
/* sur mobile, le hero est plus haut qu'un ecran : le bouton "Demander un devis" tombe pile sur le HUD au chargement. On retarde son apparition jusqu'a ce qu'on ait commence a defiler. */
@media(max-width:700px){body.go #hud{opacity:0}body.go #hud.show{opacity:1}}

/* ============ NAV ============ */
header{position:fixed;top:0;left:0;right:0;z-index:110;border-bottom:1px solid transparent;transition:background .45s,border-color .45s}
header.stuck{background:rgba(var(--fond-rvb),.82);backdrop-filter:blur(16px);border-bottom-color:var(--l1)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;max-width:1280px;margin:0 auto}
.logo{display:flex;align-items:center;gap:11px}
.logo .mk{width:38px;height:38px;object-fit:contain;display:block;transition:transform .7s var(--e)}
.logo:hover .mk{transform:rotate(360deg)}
.logo b{font-family:var(--police-ui);font-weight:700;font-stretch:78%;font-size:1.16rem;letter-spacing:.06em;text-transform:uppercase;display:block;line-height:1.05}
.logo small{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.48rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sable2)}
nav.lk{display:none;gap:26px;font-size:.83rem}
@media(min-width:980px){nav.lk{display:flex}}
nav.lk a{color:var(--sable2);overflow:hidden;height:1.3em;display:block}
nav.lk a i{font-style:normal;display:block;transition:transform .5s var(--e)}
nav.lk a i:last-child{color:var(--orange2)}
nav.lk a:hover i{transform:translateY(-100%)}
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;background:var(--vert-contact);color:var(--encre);padding:14px 26px;font-weight:600;font-size:.83rem;overflow:hidden;border-radius:var(--r-btn);transition:transform .4s var(--e)}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;background:var(--couleur-contact-sombre);transform:translateY(101%);transition:transform .5s var(--e)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:#fff}
.btn-g{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--l2);padding:13px 25px;font-size:.83rem;font-weight:500;border-radius:var(--r-btn);transition:border-color .35s,transform .4s var(--e)}
.btn-g:hover{border-color:var(--orange)}
.nav-btn{display:none}@media(min-width:980px){.nav-btn{display:inline-flex}}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 60px;overflow:hidden}
/* fond photo : preuve visuelle immediate, en fondu lent derriere le glow. Images deja optimisees (medium/webp), aucun poids supplementaire notable, pas de video (regle du cahier des charges). */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bitume)}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:brightness(.72) saturate(1);animation:heroFade 21s var(--e) infinite}
.hero-bg img:first-child{opacity:1}
.hero-bg img:nth-child(1){animation-delay:0s}
.hero-bg img:nth-child(2){animation-delay:7s}
.hero-bg img:nth-child(3){animation-delay:14s}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--fond-rvb),.93) 0%,rgba(var(--fond-rvb),.80) 26%,rgba(var(--fond-rvb),.30) 52%,rgba(var(--fond-rvb),.04) 100%),linear-gradient(180deg,rgba(var(--fond-rvb),.20) 0%,rgba(var(--fond-rvb),.10) 42%,rgba(var(--fond-rvb),.72) 82%,var(--bitume) 100%)}
@media(max-width:900px){/* En colonne, le texte passe au-dessus de toute la largeur : le voile redevient uniforme, sinon la fin des lignes tombe sur la photo nue. */.hero-bg::after{background:linear-gradient(180deg,rgba(var(--fond-rvb),.72) 0%,rgba(var(--fond-rvb),.66) 45%,rgba(var(--fond-rvb),.86) 78%,var(--bitume) 100%)}}
/* Les trois fonds se relaient toutes les 7 s sur un cycle de 21 s. L'ancien
   minutage laissait un trou : chaque image retombait à 0 avant que la suivante
   ne soit montée, et le hero virait au noir. Mesuré sur un cycle complet, le
   pire instant tombait à 0,02 d'opacité — un clignotement sombre trois fois
   par cycle, sur l'écran qui porte l'argument du site.
   Ici l'image est déjà pleine à 0 % et le redevient à 100 % : son fondu sortant
   (33→43 %) part exactement quand la suivante prend le relais, à 33,3 % —
   soit 7 s. Caler la sortie sur ce point plutôt qu'avant évite aussi le creux
   du tout premier cycle, quand les images 2 et 3 n'ont pas encore démarré leur
   animation et valent 0. Relevé après correction : jamais sous 0,97. */
@keyframes heroFade{0%,33%{opacity:1}43%,90%{opacity:0}100%{opacity:1}}
.glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1}
.g1{top:-22%;left:-12%;width:62%;height:72%;background:radial-gradient(circle,rgba(2,61,122,.55),rgba(255,138,0,.12) 45%,transparent 66%);animation:dr 20s ease-in-out infinite alternate}
.g2{bottom:-26%;right:-10%;width:56%;height:66%;background:radial-gradient(circle,rgba(127,192,245,.14),transparent 66%);animation:dr2 24s ease-in-out infinite alternate}
.hero>.wrap{position:relative;z-index:2}
.hero .scrolldown{z-index:2}
@keyframes dr{to{transform:translate(16%,10%) scale(1.2)}}
@keyframes dr2{to{transform:translate(-12%,-8%) scale(1.15)}}
.origin{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-bottom:26px;font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sable2);opacity:0;transform:translateY(14px);transition:.9s var(--e) .2s}
body.go .origin{opacity:1;transform:none}
.origin b{color:var(--orange2);font-weight:500}
.fl{width:18px;height:12px;display:inline-block;vertical-align:-1px;margin-right:6px;box-shadow:0 0 0 1px rgba(242,246,250,.2)}
.fl-cn{background:#DE2910}
.fl-ae{background:linear-gradient(90deg,#00732F 0 25%,transparent 25%),linear-gradient(180deg,#00732F 0 33%,#fff 33% 66%,#000 66%)}
.fl-bf{background:linear-gradient(180deg,#EF2B2D 0 50%,#009E49 50%)}
h1.ht{font-size:clamp(2.5rem,6.6vw,5.3rem);max-width:11ch;letter-spacing:-.014em;text-wrap:balance}
h1.ht .ln{display:block;overflow:hidden;padding-bottom:.05em}
.wd{display:inline-block;white-space:nowrap}
h1.ht .ch{display:inline-block;transform:translateY(110%) rotate(5deg);opacity:0;transition:transform 1.05s var(--e),opacity .8s var(--e)}
body.go h1.ht .ch{transform:none;opacity:1}
h1.ht em{font-style:normal;color:var(--orange2)}
.hb{display:grid;gap:32px;margin-top:40px;align-items:end}
@media(min-width:980px){.hb{grid-template-columns:1fr .85fr;gap:56px}}
.hsub{color:var(--sable2);font-size:1.06rem;max-width:430px;margin-bottom:24px;opacity:0;transform:translateY(16px);transition:.9s var(--e) .75s}
body.go .hsub{opacity:1;transform:none}
.hcta{display:flex;gap:12px;flex-wrap:wrap;opacity:0;transform:translateY(16px);transition:.9s var(--e) .88s}
body.go .hcta{opacity:1;transform:none}

/* bordereau */
.bord{border:1px solid var(--l2);background:var(--surface);padding:20px;border-radius:var(--r-card);opacity:0;transform:translateY(20px);transition:.9s var(--e) .95s}
body.go .bord{opacity:1;transform:none}
.bord .bh{display:flex;justify-content:space-between;font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sable2);padding-bottom:13px;border-bottom:1px dashed var(--l2)}
.bord .br{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px dashed var(--l1);font-size:.86rem}
.bord .br:last-child{border-bottom:none}
.bord .br .nm{font-weight:500}
.bord .br .mt{font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.58rem;color:var(--sable2);letter-spacing:.04em;margin-top:2px}
.tg{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.53rem;letter-spacing:.07em;text-transform:uppercase;padding:4px 8px;border:1px solid;border-radius:var(--r-tag)}
.tg.ok{color:var(--vert-texte);border-color:var(--vert)}
.tg.rt{color:var(--ambre);border-color:var(--ambre)}

.scrolldown{position:absolute;bottom:26px;right:22px;font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sable2);display:flex;align-items:center;gap:10px}
.scrolldown i{width:1px;height:34px;background:var(--l2);position:relative;overflow:hidden;display:block}
.scrolldown i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--orange);animation:sd 1.9s var(--e) infinite}
@keyframes sd{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}

/* MARQUEE */
.mq{border-top:1px solid var(--l1);border-bottom:1px solid var(--l1);overflow:hidden;padding:16px 0;background:var(--terre)}
.mq-in{display:flex;gap:42px;width:max-content;font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sable2);will-change:transform}
.mq-in b{color:var(--orange);font-weight:500}

/* SECTIONS */
section.pad{padding:var(--air) 0;position:relative}
.line{border-bottom:1px solid var(--l1)}
.eyeb{display:flex;align-items:center;gap:10px;font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--laiton);margin-bottom:18px}
.eyeb::before{content:"";width:0;height:1px;background:var(--laiton);transition:width .9s var(--e)}
.rv.in .eyeb::before{width:28px}
.shead{max-width:680px;margin-bottom:56px}
.shead h2,.hz-head h2{font-size:var(--titre-section);margin-bottom:16px;letter-spacing:-.008em;text-wrap:balance}
/* Niveau majeur. Les mêmes sections que celles qui respirent le plus :
   l'air et la taille disent la même chose, sinon l'un contredit l'autre. */
#preuves .shead h2,#produits .shead h2{font-size:var(--titre-section-majeur);letter-spacing:-.014em}
.shead h2 .ch{display:inline-block;transform:translateY(75%);opacity:0;transition:transform .85s var(--e),opacity .6s var(--e)}
.rv.in h2 .ch{transform:none;opacity:1}
.shead p{color:var(--sable2);font-size:1.02rem;max-width:56ch}
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}
.coord{font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.55rem;letter-spacing:.13em;color:var(--sable2);margin-bottom:10px}

/* TRAJET */
.rw{position:relative;height:260vh}
.rs{position:sticky;top:92px}
.map{width:100%;height:auto;overflow:visible}
.mpath{fill:none;stroke:var(--l2);stroke-width:1.3;stroke-dasharray:5 6}
.mprog{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(255,138,0,.75))}
#cargo{filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.node circle{fill:var(--bitume);stroke:var(--l2);stroke-width:1.4;transition:stroke .5s,fill .5s}
.node.on circle{stroke:var(--orange);fill:var(--orange)}
.node .halo{fill:none;stroke:var(--orange);opacity:0;transition:opacity .5s}
.node.on .halo{opacity:.4;animation:hal 2.4s ease-out infinite}
@keyframes hal{0%{r:8;opacity:.5}100%{r:22;opacity:0}}
.node text{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:8px;letter-spacing:.09em;text-transform:uppercase;fill:var(--sable2);transition:fill .5s}
.node.on text{fill:var(--sable)}
.stages{display:grid;gap:14px;margin-top:46px}
@media(min-width:880px){.stages{grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--l1)}}
.stg{padding:22px 20px;border-left:1px solid var(--l1);opacity:.26;transform:translateY(8px);transition:opacity .6s var(--e),transform .6s var(--e)}
.stg.on{opacity:1;transform:none}
.stg .k{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.61rem;letter-spacing:.09em;color:var(--ambre);display:block;margin-bottom:9px}
.stg h3{font-family:var(--police-titres);font-size:1.1rem;margin-bottom:8px;font-weight:600;letter-spacing:-.005em}
.stg p{font-size:.85rem;color:var(--sable2)}

/* STATS */
.stats-tete{padding-top:96px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--l1)}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}
.st{background:var(--bitume);padding:38px 22px;position:relative;overflow:hidden}
.st::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e)}
.rv.in .st::after{transform:scaleX(1)}
.st .n{font-family:var(--police-titres);font-weight:600;font-size:clamp(2.3rem,5vw,3.7rem);color:var(--laiton2);letter-spacing:-.005em}
.st .l{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sable2);margin-top:6px}

/* POLAROIDS qui se developpent */
.pinb{display:flex;flex-wrap:wrap;gap:28px 20px;perspective:1200px}
.pol{width:calc(50% - 10px);background:var(--surface2);border:1px solid var(--l2);padding:10px 10px 34px;position:relative;box-shadow:0 18px 36px rgba(0,0,0,.5);transition:transform .65s var(--e),box-shadow .5s}
@media(min-width:780px){.pol{width:calc(25% - 15px)}}
.pol:nth-child(4n+1){transform:rotate(-2.8deg)}
.pol:nth-child(4n+2){transform:rotate(1.9deg);margin-top:30px}
.pol:nth-child(4n+3){transform:rotate(-1.1deg)}
.pol:nth-child(4n+4){transform:rotate(2.7deg);margin-top:14px}
.pol{margin:0}
figure.pol{margin:0}
.pol:hover{transform:rotate(0) translateY(-16px) scale(1.06);box-shadow:0 36px 66px rgba(0,0,0,.7);z-index:5}
.pol::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-4deg);width:54px;height:18px;background:rgba(242,246,250,.13);border:1px solid rgba(242,246,250,.18)}
.fr{aspect-ratio:4/5;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:repeating-linear-gradient(135deg,rgba(242,246,250,.035) 0 2px,transparent 2px 16px),var(--surface);overflow:hidden;
  filter:brightness(.25) saturate(0) blur(5px);transition:filter 1.5s var(--e)}
.pinb.in .pol:nth-child(4n+1) .fr{transition-delay:.08s}
.pinb.in .pol:nth-child(4n+2) .fr{transition-delay:.26s}
.pinb.in .pol:nth-child(4n+3) .fr{transition-delay:.44s}
.pinb.in .pol:nth-child(4n+4) .fr{transition-delay:.62s}
.pinb.in .fr{filter:none}
.fr::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(242,246,250,.09),transparent);transform:skewX(-18deg);transition:left .85s var(--e)}
.pol:hover .fr::after{left:120%}
.fr svg{width:21px;height:21px;opacity:.42;color:var(--sable2)}
.fr span{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.5rem;letter-spacing:.04em;text-transform:uppercase;color:var(--sable2);opacity:.6}
.cp,figcaption.cp{position:absolute;bottom:8px;left:10px;right:10px;font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.56rem;color:var(--sable2)}
.sm{position:absolute;top:6px;right:6px;width:44px;height:44px;border:1.2px solid var(--vert);color:var(--vert-texte);border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.37rem;letter-spacing:.02em;text-transform:uppercase;line-height:1.1;background:rgba(8,45,74,.65);transform:rotate(-10deg);z-index:3;
  transition:transform .55s cubic-bezier(.32,1.7,.55,1),opacity .3s}
.sm.amb{border-color:var(--ambre);color:var(--ambre)}
.note-g{margin-top:42px;font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.66rem;color:var(--sable2);border-top:1px dashed var(--l2);padding-top:18px;max-width:580px}

/* Le tampon s'abat sur la vignette, la photo se développe sous les yeux du
   visiteur — reprend au pied de la lettre la promesse du hero (« Les photos
   se développent sous vos yeux »). `.developpe` est posée par site.js quand
   la carte entre à l'écran ; sans JS ou animations coupées, tout reste visible
   d'emblée (état de repli ci-dessous, avant la règle `:not`). */
.pol .sm{opacity:0;transform:rotate(-10deg) scale(2.4)}
.pol.developpe .sm{opacity:1;transform:rotate(-10deg) scale(1)}
.pol .fr img{transition:filter 1s ease-out,opacity 1s ease-out,transform 1.2s ease-out}
.pol:not(.developpe) .fr img{filter:blur(9px) saturate(.2) brightness(.55) sepia(.25);opacity:.5;transform:scale(1.07)}
.pol.developpe .fr img{filter:blur(0) saturate(1) brightness(1) sepia(0);opacity:1;transform:scale(1)}

/* VEHICULES horizontal */
.hz{position:relative}
.hzs{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.track{display:flex;gap:24px;padding-left:max(22px,calc((100vw - 1280px)/2 + 22px));will-change:transform}
.vh{flex:0 0 300px;background:var(--surface);border:1px solid var(--l1);border-radius:var(--r-card);box-shadow:var(--ombre-1),var(--lueur-bord);overflow:hidden;transition:border-color .4s,box-shadow .4s,transform .4s}
.vh:hover{box-shadow:var(--ombre-2),var(--lueur-bord);transform:translateY(-3px)}
@media(min-width:760px){.vh{flex-basis:352px}}
.vh:hover{border-color:var(--l2)}
.vh .im{aspect-ratio:4/3;position:relative;overflow:hidden;background:repeating-linear-gradient(45deg,rgba(242,246,250,.03) 0 2px,transparent 2px 16px),var(--surface2);display:flex;align-items:center;justify-content:center}
.vh .im svg{width:34px;height:34px;opacity:.3;transition:transform .8s var(--e)}
.vh:hover .im svg{transform:scale(1.18)}
.vh .flag{position:absolute;top:11px;left:11px;font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.53rem;letter-spacing:.05em;text-transform:uppercase;background:rgba(8,45,74,.8);padding:4px 8px;border:1px solid var(--l1);border-radius:var(--r-tag)}
.vh .bd{padding:20px}
.vh .nm{font-family:var(--police-titres);font-weight:600;font-size:1.16rem;letter-spacing:-.005em}
.vh .mt{font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.63rem;color:var(--sable2);letter-spacing:.03em;margin-top:5px}
.vh .ft{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--l1)}
.vh .pr{font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.83rem;color:var(--laiton2);font-weight:500}
.vh .lk2{font-size:.75rem;color:var(--sable2)}
.hz-head{position:absolute;top:13%;left:0;right:0;z-index:2;pointer-events:none}
.hz-bar{position:absolute;bottom:11%;left:max(22px,calc((100vw - 1280px)/2 + 22px));right:22px;height:1px;background:var(--l1)}
/* mobile : les cartes centrees remontaient sous le titre et le recouvraient. On les pousse vers le bas pour degager la place du titre en haut. */
@media(max-width:700px){
  .hzs{align-items:flex-end;padding-bottom:44px}
  .hz-head{top:7%}
}
.hz-bar i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(0)}

/* ====== CATALOGUE / VITRINE ====== */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px}
.chip{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--l2);border-radius:var(--r-btn);color:var(--sable2);background:none;transition:all .35s var(--e);display:inline-flex;align-items:center;gap:7px;position:relative}
.chip:hover{border-color:var(--orange);color:var(--sable)}
.chip.on{background:var(--orange);border-color:var(--orange);color:var(--encre);font-weight:500}
.chip .c{opacity:.65;font-size:.58rem}
/* Sélectionner une catégorie doit ressembler à un coup de tampon : la puce
   s'enfonce de biais, l'encre déborde brièvement du contour. Le filtre se
   manipule plusieurs fois par visite — d'où les 200 ms et l'absence de rebond
   appuyé. Le var(--e) du reste du site est trop tardif ici : il escamoterait
   l'enfoncement, qui doit rester lisible sur ses deux premières images. */
.chip.tamponne{animation:chipTampon .2s cubic-bezier(.4,0,.2,1)}
.chip.tamponne::after{content:'';position:absolute;inset:-1px;border:1px solid var(--orange);
  border-radius:inherit;pointer-events:none;opacity:0;animation:chipEncre .2s cubic-bezier(.4,0,.2,1)}
.jour .chip.tamponne::after{border-color:var(--encre)}
@keyframes chipTampon{0%{transform:none}30%{transform:rotate(-2.5deg) scale(.93)}65%{transform:rotate(.7deg) scale(1.02)}100%{transform:none}}
@keyframes chipEncre{0%{opacity:0;transform:scale(1)}35%{opacity:.9;transform:scale(1.01)}100%{opacity:0;transform:scale(1.16)}}
.cat-count{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sable2);margin-bottom:20px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(min-width:1040px){.grid{grid-template-columns:repeat(4,1fr)}}
.pc{background:var(--surface);border:1px solid var(--l1);border-radius:var(--r-card);box-shadow:var(--ombre-1),var(--lueur-bord);display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color .4s,transform .55s var(--e),opacity .45s var(--e)}
.pc:hover{border-color:var(--l2);transform:translateY(-6px)}
.pc.hide{display:none}
.pc.pop{animation:pop .5s var(--e) both}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.pc .im{aspect-ratio:1/1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,rgba(242,246,250,.032) 0 2px,transparent 2px 15px),var(--surface2)}
.pc .im svg{width:26px;height:26px;opacity:.3;color:var(--sable2);transition:transform .7s var(--e)}
.pc:hover .im svg{transform:scale(1.16)}
.pc .im::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(242,246,250,.08),transparent);transform:skewX(-18deg);transition:left .8s var(--e)}
.pc:hover .im::after{left:130%}
.pc .ph{position:absolute;bottom:7px;left:8px;font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.45rem;letter-spacing:.05em;text-transform:uppercase;color:var(--sable2)}
.pc .org{position:absolute;top:9px;left:9px;font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.5rem;letter-spacing:.05em;text-transform:uppercase;background:rgba(8,45,74,.82);padding:3px 7px;border:1px solid var(--l1);border-radius:var(--r-tag);display:flex;align-items:center}
.pc .stk{position:absolute;top:9px;right:9px;font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.46rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border:1px solid;border-radius:var(--r-tag)}
/* Le vert d'identité (--vert) tombe à 3,6:1 sur le fond sombre : à 0,46rem la
   pastille passait sous le seuil AA. Le contour garde la teinte d'origine. */
.stk.dispo{color:var(--vert-texte);border-color:var(--vert);background:rgba(63,133,96,.12)}
.stk.cmd{color:var(--ambre);border-color:var(--ambre);background:rgba(255,138,0,.12)}
.pc .bd{padding:14px;display:flex;flex-direction:column;flex:1}
.pc .kat{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.5rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sable2);margin-bottom:6px}
.pc .nm{font-family:var(--police-titres);font-weight:600;font-size:1.02rem;letter-spacing:-.005em;line-height:1.22}
.pc .ds{font-size:.74rem;color:var(--sable2);margin-top:5px;flex:1}
.pc .ft{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding-top:11px;border-top:1px solid var(--l1)}
.pc .pr{font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.75rem;color:var(--laiton);font-weight:500;letter-spacing:.01em}
.pc .ask{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;color:var(--sable2);border-bottom:1px solid var(--l2);padding-bottom:1px;transition:color .3s,border-color .3s}
.pc:hover .ask{color:var(--orange2);border-color:var(--orange)}
.empty{grid-column:1/-1;padding:50px 0;text-align:center;font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.7rem;letter-spacing:.08em;color:var(--sable2)}
.cat-note{margin-top:34px;font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.65rem;color:var(--sable2);border-top:1px dashed var(--l2);padding-top:18px;max-width:620px;line-height:1.7}

/* ====== SHOWROOM CLAIR : rupture volontaire avec le voyage sombre ====== */
.jour{background:var(--parchemin);color:var(--encre);border-bottom:none;position:relative}
.jour::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--laiton);opacity:.5}
/* Le pied de page vit dans une seconde enveloppe .jour, hors de <main> : il en
   hérite la palette claire, jamais le filet d'ouverture de l'acte. */
.jour-pied::before{display:none}
.jour .shead h2{color:var(--encre)}
.jour .shead p{color:var(--encre2)}
.jour .coord{color:var(--encre2);opacity:1}
.jour .eyeb{color:var(--laterite)}
.jour .eyeb::before{background:var(--laterite)}
.jour .chip{border-color:rgba(8,45,74,.16);color:var(--encre2);background:rgba(255,255,255,.35)}
.jour .chip:hover{border-color:var(--laterite);color:var(--encre)}
.jour .chip.on{background:var(--encre);border-color:var(--encre);color:var(--parchemin)}
.jour .cat-count{color:var(--encre2)}
.jour .pc{background:var(--carte);border-color:rgba(8,45,74,.08);box-shadow:0 1px 2px rgba(8,45,74,.06),0 6px 16px rgba(8,45,74,.05),var(--lueur-bord-clair)}
.jour .pc:hover{border-color:rgba(8,45,74,.16);box-shadow:0 2px 4px rgba(8,45,74,.07),0 20px 40px rgba(8,45,74,.13),var(--lueur-bord-clair)}
.jour .pc .im{background:repeating-linear-gradient(135deg,rgba(8,45,74,.03) 0 2px,transparent 2px 15px),var(--parchemin2)}
.jour .pc .im svg{color:var(--encre2);opacity:.55}
.jour .pc .im::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.jour .pc .org{background:rgba(242,246,250,.9);border-color:rgba(8,45,74,.12);color:var(--encre2)}
.jour .pc .ph{color:var(--encre2);opacity:1}
.jour .pc .kat{color:var(--encre2)}
.jour .pc .nm{color:var(--encre)}
.jour .pc .ds{color:var(--encre2)}
.jour .pc .ft{border-top-color:rgba(8,45,74,.1)}
.jour .pc .pr{color:var(--laterite);font-weight:600}
.jour .pc .ask{color:var(--encre2);border-bottom-color:rgba(8,45,74,.2)}
.jour .pc:hover .ask{color:var(--laterite);border-bottom-color:var(--laterite)}
.jour .stk.dispo{color:#286042;border-color:rgba(44,107,73,.5);background:rgba(44,107,73,.09)}
.jour .stk.cmd{color:var(--couleur-terre);border-color:rgba(2,61,122,.5);background:rgba(2,61,122,.09)}
.jour .cat-note{color:var(--encre2);border-top-color:rgba(8,45,74,.16)}
.jour .fl{box-shadow:0 0 0 1px rgba(8,45,74,.2)}
@media(pointer:fine){.jour{--curmix:normal}}

/* ================= ACTE II : LE JOUR ================= */
.jour{background:var(--parchemin);color:var(--encre)}
.jour section.pad{border-bottom:1px solid rgba(8,45,74,.1)}
.jour .line{border-bottom-color:rgba(8,45,74,.1)}
.jour h1,.jour h2,.jour h3{color:var(--encre)}
.jour .shead p,.jour p{color:var(--encre2)}
.jour .eyeb{color:var(--laterite)}
.jour .eyeb::before{background:var(--laterite)}
.jour .coord{color:var(--encre2);opacity:1}
/* avis sur papier */
.jour .nt{background:var(--carte);border-color:rgba(8,45,74,.1);box-shadow:0 2px 4px rgba(8,45,74,.06),0 16px 34px rgba(8,45,74,.09),var(--lueur-bord-clair)}
.jour .nt::before{background:rgba(8,45,74,.07);border-color:rgba(8,45,74,.12)}
.jour .nt p{color:var(--encre)}
.jour .nt .w{color:var(--encre2);border-top-color:rgba(8,45,74,.18)}
/* arrivée */
.jour .btn{background:var(--vert-contact-sombre);color:#fff}
.jour .btn::before{background:var(--vert-contact)}
.jour .btn:hover{color:var(--encre)}
.jour .cta-in{border-color:rgba(8,45,74,.16);background:var(--carte)}
.jour .cta-in .glow{background:radial-gradient(circle,rgba(127,192,245,.2),transparent 62%)}
.jour .cta-in p{color:var(--encre2)}
.jour .btn-g{border-color:rgba(8,45,74,.22);color:var(--encre)}
.jour .btn-g:hover{border-color:var(--laterite)}
.jour .tampon{border-color:#2C6B49;color:#2C6B49}
.jour .tampon i{background:#2C6B49}
/* pied de page papier */
.jour footer{background:var(--parchemin)}
.jour .fg{border-top-color:rgba(8,45,74,.14)}
.jour .fc h2{color:var(--encre2)}
.jour .fc a,.jour .fc p{color:var(--encre2)}
.jour .fc a:hover{color:var(--laterite)}
.jour .fb{border-top-color:rgba(8,45,74,.14);color:var(--encre2)}

/* ================= LEVER DU JOUR ================= */
.aube{position:relative;height:230vh}
.aube-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ciel{position:absolute;inset:0;background:linear-gradient(180deg,var(--couleur-fond) 0%,var(--terre) 55%,var(--surface) 100%)}
.soleil{position:absolute;left:50%;bottom:22%;width:210px;height:210px;border-radius:50%;
  transform:translate(-50%,60%) scale(.6);opacity:0;
  background:radial-gradient(circle,var(--laiton2) 0%,var(--orange2) 42%,rgba(255,138,0,.35) 62%,transparent 72%);
  filter:blur(2px)}
.poussiere{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 40% at 50% 88%,rgba(255,166,64,.28),transparent 70%)}
.horizon{position:absolute;left:0;right:0;bottom:0;width:100%;height:42%;min-height:180px}
.horizon #terrain{fill:#0B0806}
.horizon #baobab path,.horizon #silhouettes rect,.horizon #silhouettes path{fill:#0B0806;stroke:#0B0806}
.aube-txt{position:relative;z-index:3;text-align:center;padding:0 22px;transform:translateY(-8%)}
.aube-km{font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  font-size:.68rem;color:var(--laiton2);margin-bottom:18px;opacity:0;transition:opacity .8s var(--e)}
.aube-h{font-size:clamp(2.4rem,7vw,5rem);color:var(--sable);letter-spacing:-.01em;text-shadow:0 4px 40px rgba(0,0,0,.45)}
.aube-h em{font-style:italic;color:var(--laiton2)}
.aube-txt p{margin-top:18px;color:rgba(242,246,250,.72);font-size:1rem;opacity:0;transition:opacity .8s var(--e) .15s}
.aube.lit .aube-km,.aube.lit .aube-txt p{opacity:1}

/* ================= COMPTEUR MÉCANIQUE ================= */
#hud .km{display:flex;align-items:baseline;gap:1px}
.roll{display:inline-block;height:1.05em;overflow:hidden;position:relative;width:.62em}
.roll u{display:block;text-decoration:none;transition:transform .55s var(--e)}
.roll u b{display:block;height:1.05em;font-weight:600;line-height:1.05}
.gap{display:inline-block;width:.22em}

/* ================= BORDEREAU QUI S'IMPRIME ================= */
.bord{position:relative}
.bord .br{opacity:0;transform:translateY(10px)}
body.go .bord .br{animation:printRow .55s var(--e) forwards}
body.go .bord .br:nth-child(2){animation-delay:1.15s}
body.go .bord .br:nth-child(3){animation-delay:1.45s}
body.go .bord .br:nth-child(4){animation-delay:1.75s}
body.go .bord .br:nth-child(5){animation-delay:2.05s}
@keyframes printRow{to{opacity:1;transform:none}}
.printhead{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--laiton),transparent);
  top:52px;opacity:0}
body.go .printhead{animation:head 1.4s var(--e) 1.05s 4}
@keyframes head{0%{opacity:.9;transform:translateY(0)}100%{opacity:0;transform:translateY(52px)}}
.bord-seal{position:absolute;right:16px;bottom:12px;width:58px;height:58px;border:1.4px solid var(--vert);border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--vert-texte);
  font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.44rem;line-height:1.15;
  transform:rotate(-14deg) scale(2.4);opacity:0;background:rgba(8,45,74,.55)}
body.go .bord-seal{animation:sealHit .5s cubic-bezier(.2,1.5,.4,1) 2.5s forwards}
@keyframes sealHit{to{transform:rotate(-14deg) scale(1);opacity:.9}}

/* ================= POLAROIDS DÉPLAÇABLES ================= */
.pol{touch-action:none}
/* Reglage « photos deplacables » coupe : sans cela le doigt resterait bloque
   sur la photo et la page ne defilerait plus au toucher. */
body.sans-photos-deplacables .pol{touch-action:auto}
.pol.drag{transition:none;z-index:9;box-shadow:0 40px 70px rgba(0,0,0,.72)}
.pinb-hint{font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:.6rem;color:var(--sable2);margin-bottom:18px;display:flex;align-items:center;gap:9px}
.pinb-hint::before{content:"";width:18px;height:1px;background:var(--l2)}

/* ===== fiche d'arrivée posée sur le lever du jour ===== */
.aube-txt{max-width:1000px;margin:0 auto;transform:translateY(-4%)}
.aube-h{font-size:clamp(2rem,5.4vw,3.9rem)}
.fiche{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(242,246,250,.16);
  margin-top:34px;opacity:0;transform:translateY(18px);transition:opacity .9s var(--e) .1s,transform .9s var(--e) .1s}
@media(min-width:860px){.fiche{grid-template-columns:repeat(4,1fr)}}
.aube.lit .fiche{opacity:1;transform:none}
.fi{background:rgba(14,10,7,.42);backdrop-filter:blur(6px);padding:20px 16px;text-align:left}
.fi .k{font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  font-size:.58rem;color:rgba(242,246,250,.62);margin-bottom:9px}
.fi .v{font-family:var(--police-titres);font-weight:600;font-size:1.22rem;color:var(--sable);letter-spacing:-.005em;line-height:1.15}
.fi .d{font-size:.76rem;color:rgba(242,246,250,.6);margin-top:7px;line-height:1.45}
.fiche-douane{margin-top:1px;background:rgba(14,10,7,.42);backdrop-filter:blur(6px);padding:20px 18px;text-align:left;
  border-left:2px solid var(--laiton);opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--e) .25s,transform .9s var(--e) .25s;display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.aube.lit .fiche-douane{opacity:1;transform:none}
.fiche-douane .k{font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  font-size:.58rem;color:var(--laiton2);white-space:nowrap}
.fiche-douane .v{font-family:var(--police-titres);font-weight:600;font-size:1.18rem;color:var(--sable);white-space:nowrap}
.fiche-douane .d{font-size:.82rem;color:rgba(242,246,250,.68);flex:1;min-width:240px;line-height:1.5}
@media(max-width:620px){
  .aube{height:270vh}
  .aube-txt{transform:none;padding-top:8vh}
  .fi{padding:15px 12px}.fi .v{font-size:1.02rem}.fi .d{display:none}
  .fiche-douane{padding:15px 13px}.fiche-douane .v{font-size:1rem}
}

/* ===== médias réels dans les polaroids ===== */
.pol .fr img,.pol .fr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pol .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(242,246,250,.85);display:flex;align-items:center;justify-content:center;
  background:rgba(8,45,74,.35);backdrop-filter:blur(2px);z-index:2;transition:transform .4s var(--e),background .3s}
.pol:hover .play{transform:translate(-50%,-50%) scale(1.12);background:rgba(255,138,0,.85)}
.pol .play svg{width:12px;height:12px;fill:var(--sable);margin-left:2px}
.pol .geo{position:absolute;left:8px;top:8px;z-index:2;font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.5rem;letter-spacing:.04em;
  background:rgba(8,45,74,.72);border:1px solid var(--l1);padding:3px 6px;color:rgba(242,246,250,.8)}
.pol .dur{position:absolute;right:8px;bottom:38px;z-index:2;font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.52rem;
  background:rgba(8,45,74,.72);padding:2px 6px;color:rgba(242,246,250,.85)}

/* ===== visionneuse ===== */
.lb{position:fixed;inset:0;z-index:250;background:rgba(6,5,4,.94);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--e),visibility 0s .45s}
/* `visibility` bascule sans délai à l'ouverture et attend la fin du fondu à la
   fermeture : sinon le bouton de fermeture reste masqué une image de plus et
   n'accepte pas le focus au clavier. */
.lb.on{opacity:1;visibility:visible;transition:opacity .45s var(--e),visibility 0s}
.lb-in{max-width:min(92vw,520px);max-height:76vh;display:flex;align-items:center;justify-content:center}
.lb-in video,.lb-in img{max-width:100%;max-height:76vh;display:block;border:1px solid var(--l2)}
.lb-cap{font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  font-size:.66rem;color:var(--sable2);text-align:center}
.lb-cap b{color:var(--laiton2);display:block;margin-bottom:5px;font-size:.72rem}
.lb-x{position:absolute;top:18px;right:20px;background:none;border:1px solid var(--l2);color:var(--sable);
  width:44px;height:44px;border-radius:var(--r-btn);font-size:1.5rem;line-height:1;cursor:pointer;transition:border-color .3s}
.lb-x:hover{border-color:var(--orange)}
@media(pointer:fine){.lb,.lb *{cursor:none}}

/* ================= COMPOSEUR DE DEVIS ================= */
.devis{margin-top:38px;border-top:1px solid rgba(8,45,74,.14);padding-top:32px;position:relative}
.devis-t{font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--laterite);margin-bottom:18px}
.devis-row{display:grid;gap:12px;margin-bottom:14px}
@media(min-width:720px){.devis-row{grid-template-columns:1fr 1fr}}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.11em;font-size:.6rem;color:var(--encre2)}
.fld select,.fld input,.fld textarea{
  font-family:var(--police-texte);font-size:.92rem;color:var(--encre);
  background:var(--carte);border:1px solid rgba(8,45,74,.18);padding:12px 13px;
  transition:border-color .3s;border-radius:var(--r-btn);-webkit-appearance:none;appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A7C6B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.fld textarea{min-height:88px;resize:vertical;line-height:1.5}
.fld select:focus,.fld input:focus,.fld textarea:focus{border-color:var(--laterite)}
.devis-go{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px}
.btn-wa{display:inline-flex;align-items:center;gap:10px;background:#1F7A4D;color:#F4FBF6;padding:15px 26px;font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.11em;font-size:.74rem;border:none;border-radius:var(--r-btn);transition:transform .4s var(--e),background .3s}
.btn-wa:hover{background:#176038;transform:translateY(-2px)}
.btn-wa svg{width:17px;height:17px;fill:currentColor}
.devis-hint{font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.6rem;color:var(--encre2)}
.apercu{margin-top:16px;background:rgba(8,45,74,.045);border-left:2px solid var(--laiton);border-radius:0 var(--r-tag) var(--r-tag) 0;padding:13px 15px;font-size:.85rem;color:var(--encre2);white-space:pre-line;line-height:1.6}
.apercu b{font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.11em;font-size:.58rem;color:var(--encre2);display:block;margin-bottom:7px}
.num-choice{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px;border:0;padding:0;min-width:0}
.num-choice legend{font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.6rem;color:var(--encre2);float:left;width:100%;margin-bottom:8px}
.num-choice label{font-family:var(--police-chiffres);font-variant-numeric:tabular-nums;font-size:.7rem;padding:9px 13px;border:1px solid rgba(8,45,74,.18);border-radius:var(--r-btn);background:none;color:var(--encre2);transition:all .3s;cursor:pointer}
.num-choice label:has(input:checked){background:var(--encre);color:var(--parchemin);border-color:var(--encre)}
.num-choice input{position:absolute;opacity:0;width:1px;height:1px}

/* AVIS */
.notes{display:flex;flex-wrap:wrap;gap:26px 20px}
.nt{background:var(--surface2);border:1px solid var(--l2);border-radius:var(--r-card);padding:26px 22px;width:100%;position:relative;box-shadow:0 16px 30px rgba(0,0,0,.4);transition:transform .55s var(--e)}
@media(min-width:800px){.nt{width:calc(33.333% - 14px)}}
.nt:nth-child(1){transform:rotate(-1.1deg)}
.nt:nth-child(2){transform:rotate(.8deg)}
.nt:nth-child(3){transform:rotate(-.5deg)}
.nt:hover{transform:rotate(0) translateY(-8px)}
.nt::before{content:"";position:absolute;top:-8px;left:22px;width:44px;height:16px;background:rgba(242,246,250,.12);border:1px solid rgba(242,246,250,.18);transform:rotate(-5deg)}
.nt p{font-size:.92rem;margin-bottom:18px}
.nt .w{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sable2);border-top:1px dashed var(--l2);padding-top:12px;display:flex;justify-content:space-between;gap:8px}

/* La note sous le prix : elle explique pourquoi le montant bouge. Discrète,
   mais toujours lisible — c'est elle qui évite qu'un prix soit lu comme ferme. */
.fiche-prix-note{margin-top:8px;font-size:.82rem;line-height:1.5;color:var(--encre2);max-width:42ch}

/* PRESTATIONS + VALEURS
   Deux grilles nourries par l'administration : le gérant ajoute une carte, en
   retire une ou change l'ordre sans qu'une ligne de code bouge. Les deux
   s'adaptent au nombre d'éléments — trois, cinq ou huit tiennent aussi bien. */
.prests{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.prest{background:var(--surface);border:1px solid var(--l1);border-radius:var(--r-card);
  box-shadow:var(--ombre-1),var(--lueur-bord);padding:26px 22px;
  transition:border-color .4s,box-shadow .4s,transform .4s}
.prest:hover{border-color:var(--l2);box-shadow:var(--ombre-2),var(--lueur-bord);transform:translateY(-3px)}
.prest-i{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,138,0,.12);color:var(--orange);margin-bottom:16px}
.prest-i svg{width:21px;height:21px}
.prest h3{font-family:var(--police-titres);font-weight:600;font-size:1.02rem;letter-spacing:.01em;margin-bottom:6px}
.prest-p{color:var(--laiton2);font-size:.9rem;line-height:1.45}
.prest-d{color:var(--sable2);font-size:.83rem;line-height:1.5;margin-top:8px}

.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--l1);
  border:1px solid var(--l1);border-radius:var(--r-card);overflow:hidden}
.val{background:var(--surface);padding:30px 20px}
.val-i{color:var(--laiton);margin-bottom:14px}
.val-i svg{width:26px;height:26px}
.val h3{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sable);margin-bottom:8px}
.val p{color:var(--sable2);font-size:.86rem;line-height:1.5}

/* Sur fond clair, les mêmes blocs prennent les surfaces papier. */
.jour .prest,.jour .val{background:var(--carte);border-color:rgba(8,45,74,.08)}
.jour .prest{box-shadow:0 1px 2px rgba(8,45,74,.06),0 6px 16px rgba(8,45,74,.05),var(--lueur-bord-clair)}
.jour .prest h3,.jour .val h3{color:var(--encre)}
.jour .prest-p{color:var(--laterite)}
.jour .prest-d,.jour .val p{color:var(--encre2)}
.jour .val-i{color:var(--laterite)}
.jour .vals{background:rgba(8,45,74,.08);border-color:rgba(8,45,74,.08)}

/* ARRIVEE + TAMPON */
.cta{padding:var(--air-ample) 0}
/* Les deux moments qui portent la promesse — la preuve et la vitrine —
   respirent plus que les sections de soutien. */
#preuves.pad,#produits.pad{padding:var(--air-ample) 0}
.cta-in{border:1px solid var(--l2);border-radius:var(--r-card);padding:66px 34px;position:relative;overflow:hidden}
.cta-in .glow{top:-70%;right:-14%;width:58%;height:220%;background:radial-gradient(circle,rgba(37,211,102,.14),transparent 62%)}
.cta-in h2{font-size:clamp(2rem,5vw,3.5rem);max-width:15ch;margin-bottom:18px;position:relative;letter-spacing:-.008em}
.cta-in p{color:var(--sable2);margin-bottom:34px;max-width:440px;position:relative}
.cta-bt{display:flex;gap:12px;flex-wrap:wrap;position:relative}
.tampon{position:absolute;top:50%;right:6%;transform:translateY(-50%) rotate(-16deg) scale(2.6);opacity:0;
  width:158px;height:158px;border:3px solid var(--vert);border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:3px;color:var(--vert);text-align:center;pointer-events:none;
  transition:transform .55s cubic-bezier(.2,1.5,.4,1),opacity .3s}
.tampon.hit{transform:translateY(-50%) rotate(-16deg) scale(1);opacity:.85}
.tampon b{font-family:var(--police-ui);font-weight:700;font-stretch:78%;text-transform:uppercase;font-size:1.55rem;letter-spacing:.14em}
.tampon small{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase}
.tampon i{display:block;width:64%;height:1px;background:var(--vert);opacity:.6;margin:2px 0}
@media(max-width:900px){.tampon{width:112px;height:112px;right:-2%;opacity:0}.tampon.hit{opacity:.5}.tampon b{font-size:1.05rem}}

footer{padding:0 0 120px}
.fg{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;padding-top:46px;border-top:1px solid var(--l1)}
.fc h2{font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.6rem;line-height:1.4;letter-spacing:.13em;text-transform:uppercase;color:var(--sable2);margin-bottom:16px}
.fc a,.fc p{display:block;font-size:.85rem;color:var(--sable2);margin-bottom:8px;transition:color .3s}
.fc a:hover{color:var(--orange2)}
.fb{margin-top:40px;padding-top:20px;border-top:1px solid var(--l1);font-family:var(--police-ui);font-stretch:78%;font-weight:600;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sable2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.wa{position:fixed;bottom:22px;right:22px;z-index:100;width:54px;height:54px;border-radius:50%;background:var(--vert-contact);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(37,211,102,.42);transition:transform .45s var(--e)}
.wa:hover{transform:scale(1.12) rotate(6deg)}
.wa svg{width:24px;height:24px;position:relative;z-index:1}
/* Respiration du bouton WhatsApp : deux halos décalés d'un demi-cycle, pour
   que l'invite au clic reste perceptible sans agiter la page.
   S'arrête d'elle-même via la règle prefers-reduced-motion/.sans-animations
   plus haut, qui neutralise `animation` sur `*`. */
.wa::before,.wa::after{content:'';position:absolute;inset:0;border-radius:50%;z-index:0;pointer-events:none;animation:respirerWa 2.6s ease-out infinite}
.wa::after{background:var(--vert-contact);box-shadow:0 0 0 2px var(--vert-contact-sombre)}
.wa::before{background:var(--vert-contact);opacity:.55;animation-delay:1.3s}
@keyframes respirerWa{0%{transform:scale(1);opacity:.85}75%{transform:scale(2.1);opacity:0}100%{transform:scale(2.1);opacity:0}}

/* ============ CARTES RENDUES CÔTÉ SERVEUR ============
   La carte entière mène à la fiche dédiée, le bouton « Commander » ouvre
   WhatsApp directement (ADR-0002). Deux liens ne pouvant pas s'imbriquer, le
   lien de carte est une surface transparente posée sous le bouton. */
.pc-lien,.vh-lien{position:absolute;inset:0;z-index:1}
.vh{position:relative}
.pc .ask,.vh .lk2{position:relative;z-index:2}
/* Zone tactile des liens qui ouvrent WhatsApp.
   « Commander » ne faisait que 20 px de haut : c'est le geste central du site,
   et c'était sa plus petite cible. La zone est étendue par un pseudo-élément
   plutôt que par du remplissage, pour ne pas décaler le pied de carte — le
   trait de soulignement et l'alignement du prix restent où ils sont.
   Sur pointeur fin (souris), rien à corriger : la règle ne s'applique qu'aux
   écrans tactiles. */
@media (pointer:coarse){
  .pc .ask::after,.vh .lk2::after,.lk a::after,.fc a::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%);
  }
  .lk a,.fc a{position:relative}
}
.vh:hover .lk2{color:var(--orange2)}

/* ============ ACCESSIBILITÉ (T6.2) ============ */

/* Lien d'évitement : premier élément focusable de la page, hors écran tant
   qu'il n'a pas le focus. Il épargne au clavier les cinq liens de l'en-tête. */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--orange);color:var(--encre);
  font-family:var(--police-ui);font-stretch:78%;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.75rem;padding:14px 20px;cursor:pointer}
.skip:focus{left:0}

/* Repère de focus au clavier. L'orange porte sur le voyage sombre, la latérite
   sur l'acte clair et sur les fiches — les deux dépassent 3:1 sur leur fond.
   Aucune règle ne doit supprimer le contour sans fournir ce remplacement. */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.jour :focus-visible,.fiche-page :focus-visible{outline-color:var(--laterite)}
.num-choice label:focus-within,
.fld select:focus-visible,.fld input:focus-visible,.fld textarea:focus-visible{
  outline:2px solid var(--laterite);outline-offset:2px}
.fld select:focus-visible,.fld input:focus-visible,.fld textarea:focus-visible{border-color:var(--laterite)}
/* Les polaroids et les cartes se chevauchent : sans remontée de plan, le
   contour de focus passerait sous la carte voisine. */
.pol:focus-visible,.pc:focus-within,.vh:focus-within{z-index:6}

/* Profondeur au survol des véhicules : la carte s'incline de quelques degrés et
   la photo glisse en sens inverse, comme si l'on tournait autour du véhicule en
   showroom. Les variables restent à zéro tant que le script ne les alimente pas,
   la carte est donc identique sans JavaScript. */
.vh{
  transform:perspective(900px) rotateX(var(--vh-rx,0deg)) rotateY(var(--vh-ry,0deg));
  transform-origin:50% 50%;
  transition:border-color .4s,transform .6s var(--e)}
.vh .im img{
  transform:translate3d(var(--vh-ix,0px),var(--vh-iy,0px),0) scale(var(--vh-iz,1));
  transition:transform .6s var(--e);will-change:transform}
/* Pendant le survol, le retour élastique laisserait un retard visible derrière
   le curseur : on raccourcit la transition au suivi seulement. */
.vh.vh-suivi,.vh.vh-suivi .im img{transition:border-color .4s,transform .1s linear}
@media(prefers-reduced-motion:reduce){
  .vh{transform:none}
  .vh .im img{transform:none}}

/* ══════════════════════════════════════════════════════════════════════════
   AFFINAGE MOBILE — 2026-09-19

   Trois défauts relevés en inspectant le site à 390 px, pas en théorie :

   1. Le compteur de distance (#hud) est `position:fixed` et le script le
      montre dès 60 % du premier écran, puis le laisse jusqu'en bas de page.
      Sur un écran étroit il tombe donc en plein milieu du texte : « 12 161 ·
      Guangzhou, Chine » se lisait par-dessus la carte DOZO AUTO.
   2. 39 zones cliquables sous 44 px, dont le bouton « Demander un devis ».
   3. 143 textes sous 14 px, certains à 7,7 px.

   Le compteur n'est pas supprimé : il porte l'idée des 12 800 km, c'est-à-dire
   l'argument du site. Il reçoit un fond, ce qui le détache du texte au lieu de
   s'y mélanger — et le fait ressembler à l'instrument de bord qu'il prétend
   être.

   Les micro-libellés en capitales espacées font le style « dossier » du site :
   ils ne passent pas à 16 px, ce qui casserait la maquette. Ils passent
   au-dessus du seuil de lisibilité, et le corps de texte, lui, atteint 16 px.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {

  /* ── Le compteur devient un badge lisible ─────────────────────────────── */
  #hud {
    padding: 10px 14px 11px;
    border-radius: 14px;
    background: rgba(12, 8, 4, .62);
    backdrop-filter: blur(9px) saturate(120%);
    -webkit-backdrop-filter: blur(9px) saturate(120%);
    border: 1px solid rgba(242, 246, 250, .09);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .34);
  }
  /* Sur fond clair le badge s'inverse, sinon il fait un pavé noir sur la page
     « jour ». */
  #hud.clair {
    background: rgba(250, 246, 239, .72);
    border-color: rgba(8, 45, 74, .12);
  }
  /* Ces deux libellés tombaient à 8,5 et 9,3 px. */
  #hud .lbl { font-size: .66rem; margin-bottom: 3px; }
  #hud .pos { font-size: .72rem; margin-top: 5px; }
  #hud .km  { font-size: 1.62rem; }
  #hud .km small { font-size: .68rem; }

  /* ── Hiérarchie typographique ─────────────────────────────────────────── */
  /* `clamp(1.7rem, 3.4vw, 2.5rem)` : sous 700 px, le terme en `vw` ne pèse
     plus rien et le titre reste collé à sa borne basse, 27 px. Face à un corps
     de 17 px cela ne fait qu'un rapport de 1,57 — une hiérarchie molle, alors
     que c'est le premier marqueur d'un site soigné. Ici le titre suit à
     nouveau la largeur : 33,5 px à 390 px, soit un rapport de 1,94. */
  :root { --titre-section: clamp(1.95rem, 8.6vw, 2.5rem); }

  /* ── Zones cliquables : 48 px, le seuil confortable au pouce ──────────── */
  .btn, .btn-g {
    min-height: 48px;
    font-size: .95rem;
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .chip {
    min-height: 44px;
    font-size: .78rem;
    padding-left: 17px;
    padding-right: 17px;
  }
  /* « Commander » sur chaque carte : 31 px, la plus fréquente des cibles trop
     petites (21 occurrences sur la page d'accueil). */
  .ask { min-height: 44px; align-items: center; }
  .lk2 { min-height: 44px; display: inline-flex; align-items: center; }

  /* ── Plancher de lisibilité ───────────────────────────────────────────── */
  /* Corps de texte d'abord : c'est lui que l'on lit vraiment. */
  .hsub { font-size: 1.08rem; }
  .bord .br { font-size: .95rem; }
  .sh-sub, .lead { font-size: 1.04rem; }

  /* Puis les libellés qui tombaient sous le seuil de lisibilité. Ils restent
     en capitales espacées — c'est le style du site — mais cessent d'être des
     traces de fourmi : relevé fait à 390 px, valeurs d'origine en commentaire. */
  /* Les sélecteurs reprennent exactement ceux d'origine : écrits à un seul
     niveau, ils perdaient la bataille de spécificité contre `.pc .kat` & co.
     et ne s'appliquaient pas — vérifié au navigateur, pas supposé. */
  .pc .kat            { font-size: .72rem; }  /* 8 px    — catégorie de carte */
  .pc .stk            { font-size: .7rem; }   /* 7,36 px — pastille de stock */
  .pol .geo           { font-size: .7rem; }   /* 8 px    — coordonnées sur photo */
  .bord .br .mt       { font-size: .72rem; }  /* 9,28 px */
  .vh .mt             { font-size: .72rem; }  /* 10 px */
  .coord              { font-size: .7rem; }   /* 8,8 px */
  .eyeb               { font-size: .74rem; }  /* 10,56 px — surtitre de section */
  .bord .bh           { font-size: .66rem; }  /* 8,8 px */
  .origin             { font-size: .72rem; }
  small               { font-size: .7rem; }   /* 7,68 px */
  /* Le tampon « vérifié » est un ornement pivoté dans un cercle de 44 px : il
     ne peut pas grandir beaucoup sans déborder. Il monte juste assez pour ne
     plus ressembler à une salissure. */
  .sm                 { font-size: .5rem; }   /* 5,92 px */

  /* ── Le hero laissait à peine deviner la photo ────────────────────────── */
  /* La preuve visuelle est l'argument de DOZO : la montrer un peu plus, sans
     perdre le contraste du titre (mesuré après coup, voir le cahier). */
  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(var(--fond-rvb), .60) 0%,
      rgba(var(--fond-rvb), .56) 42%,
      rgba(var(--fond-rvb), .84) 76%,
      var(--bitume) 100%);
  }
  /* Cinq lignes de titre repoussaient tout le reste sous la ligne de flottaison. */
  h1.ht { font-size: clamp(2.1rem, 9.2vw, 3rem); max-width: 14ch; }

  /* ── Le pied des cartes produit ───────────────────────────────────────── */
  /* À deux colonnes sur 390 px, `.ft` ne fait que 128 px de large : le prix et
     « Commander » s'y disputaient la place et « À partir de 39 000 FCFA »
     tombait sur quatre lignes. Empilés, le prix tient sur deux lignes et le
     bouton gagne toute la largeur — donc une cible franche au pouce.
     Défaut antérieur à cet affinage, mesuré avant d'y toucher. */
  .pc .ft { flex-direction: column; align-items: stretch; gap: 10px; }
  .pc .ft .pr { font-size: .98rem; line-height: 1.25; }
  .pc .ft .ask { width: 100%; justify-content: space-between; }

  /* Le bouton WhatsApp flottant et le badge se disputaient le bas de l'écran. */
  .wa { bottom: 18px; }
}