/* =====================================================================
   MOVELY — REFONTE 2026
   Chargée en dernier. Elle ne remplace pas « Nuit & Or » ni « Silence
   Doré » : elle leur donne un rythme.

   Trois partis pris, pris en regardant ce que font les maisons qui
   vendent cher (Wheely, Apple) et celles qui convertissent (Revolut) :

   1. Le haut de site tient en trois éléments. On ne fait pas choisir
      avant d'avoir donné envie. Le reste vit dans un tiroir, y compris
      sur grand écran.
   2. Un message par écran, en pleine largeur quand il y a une image.
      Fini les grilles de six cartes identiques qu'on déroule.
   3. Un geste toujours à portée de pouce, jamais dans le passage.
   ===================================================================== */

/* =========================================================
   1 — HAUT DE SITE
   ========================================================= */
.nav-v2 .nav-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--e3);
  padding:16px 26px;
}
/* Le menu existe aussi sur grand écran : c'est le choix, pas une limite. */
.nav-v2 .burger{display:flex;justify-self:start;order:0}
.nav-v2 .nav-logo{justify-self:center;order:0}
.nav-v2 .nav-cta{justify-self:end;display:flex;align-items:center;gap:10px}
.nav-v2 .btn-nav{padding:11px 22px;font-size:.92rem}
.nav-v2.pose .nav-inner{padding:10px 26px}

/* Le tiroir : il descend, il ne surgit pas. */
.nav-v2 .nav-links{
  position:absolute;left:0;right:0;top:100%;
  display:grid;grid-template-columns:1fr;gap:0;
  background:rgba(8,10,14,.97);backdrop-filter:blur(18px) saturate(1.1);
  border-top:1px solid var(--verre-bord);
  border-bottom:1px solid var(--verre-bord);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  padding:8px 0;
  /* fermé par défaut, sur toutes les tailles */
  max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .42s var(--ease-in-out),visibility 0s linear .42s;
}
.nav-v2 .nav-links.on{max-height:70vh;overflow:auto;visibility:visible;transition-delay:0s}
.nav-v2 .nav-links a{
  display:block;padding:15px 26px;font-size:1.02rem;font-weight:500;
  color:rgba(255,255,255,.86);border-bottom:1px solid rgba(255,255,255,.055);
  max-width:var(--maxw);margin-inline:auto;width:100%;
}
.nav-v2 .nav-links a:last-child{border-bottom:none}
.nav-v2 .nav-links a:after{display:none}
@media (hover:hover){
  .nav-v2 .nav-links a:hover{color:var(--or-clair);background:rgba(203,162,75,.06)}
}
.nav-v2 .nav-links .nav-tel{color:var(--or-clair);font-weight:600}
.nav-v2 .nav-links .espace-lien-m{display:block}

@media(max-width:620px){
  .nav-v2 .nav-inner{padding:12px 18px;grid-template-columns:auto 1fr auto}
  .nav-v2 .nav-cta .espace-lien{display:none}
  .nav-v2 .btn-nav{padding:10px 16px;font-size:.86rem}
  .nav-v2 .nav-logo img{height:28px}
}

/* =========================================================
   2 — HERO
   ========================================================= */
.hero-v2{min-height:min(92vh,880px);padding:168px 0 var(--e7)}
.hero-v2 .hero-lead{max-width:46ch;margin-top:var(--e4)}
.hero-v2 .hero-cta{align-items:center;gap:var(--e4)}
.lien-suite{
  color:var(--txt-doux);font-size:.95rem;position:relative;
  border-bottom:1px solid rgba(244,241,234,.28);padding-bottom:2px;
  transition:color .22s ease,border-color .22s ease;
}
@media (hover:hover){ .lien-suite:hover{color:var(--or-clair);border-color:var(--or)} }

@media(max-width:700px){
  .hero-v2{min-height:auto;padding:116px 0 var(--e6)}
  .hero-v2 .hero-cta{flex-direction:column;align-items:stretch;gap:var(--e3)}
  .hero-v2 .lien-suite{text-align:center;border:none;text-decoration:underline;text-underline-offset:4px}
}

/* =========================================================
   3 — LE CODE MOVELY
   Le cœur de la marque. Chaque règle occupe sa ligne, le chiffre
   tient la marge comme un numéro de chapitre.
   ========================================================= */
.code{background:var(--noir);padding:var(--e8) 0;position:relative;overflow:hidden}
.code::before{
  content:"";position:absolute;left:50%;top:-20%;width:min(900px,120%);height:70%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%,rgba(203,162,75,.10),transparent 70%);
}
.code-tete{max-width:62ch;margin-inline:auto;text-align:center;position:relative}
.code-tete h2{margin-top:var(--e2);color:#fff}
.code-tete .lead-l{margin-top:var(--e3)}

.code-liste{list-style:none;margin:var(--e8) auto 0;padding:0;max-width:880px;position:relative}
.code-liste li{
  display:grid;grid-template-columns:96px 1fr;gap:var(--e4);
  padding:var(--e5) 0;border-top:1px solid rgba(255,255,255,.09);
}
.code-liste li:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
/* Trois enfants dans une grille à deux colonnes : le paragraphe retombait
   sous le chiffre, dans 96 px de large. Le chiffre tient les deux rangs,
   le texte garde la colonne de droite. */
.code-liste .c-num{grid-column:1;grid-row:1 / span 2}
.code-liste h3{grid-column:2;grid-row:1}
.code-liste p{grid-column:2;grid-row:2}
.c-num{
  font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:2.4rem;line-height:1;
  color:var(--or);letter-spacing:.02em;
}
.code-liste h3{
  font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(1.4rem,2.6vw,1.95rem);line-height:1.2;color:#fff;
  margin:0 0 var(--e2);letter-spacing:-.01em;
}
.code-liste p{color:var(--txt-doux);font-size:1rem;line-height:1.7;max-width:56ch;margin:0}

.code-prix{
  margin:var(--e6) auto 0;text-align:center;
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.7rem);color:var(--champagne);
}

@media(max-width:700px){
  .code-liste li{grid-template-columns:1fr;gap:var(--e2);padding:var(--e4) 0}
  .c-num{font-size:1.5rem;color:var(--or)}
}

/* =========================================================
   4 — NOS MISSIONS (rail horizontal)
   Sur téléphone on fait glisser au pouce. Six blocs empilés, personne
   ne les lit.
   ========================================================= */
.missions{background:var(--noir-2);padding:var(--e8) 0;border-top:1px solid rgba(255,255,255,.055)}
.mission-rail{
  display:flex;gap:18px;margin-top:var(--e6);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px calc((100vw - min(var(--maxw),100vw - 48px))/2) var(--e4);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.mission-rail::-webkit-scrollbar{display:none}
.mcard{
  scroll-snap-align:start;flex:0 0 clamp(248px,30%,318px);
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--verre-bord);border-radius:20px;padding:26px 24px 28px;
  display:flex;flex-direction:column;gap:12px;min-width:0;
  transition:transform 240ms var(--ease-out),border-color 240ms ease,background-color 240ms ease;
}
@media (hover:hover){
  .mcard:hover{transform:translateY(-5px);border-color:rgba(203,162,75,.45);background:rgba(203,162,75,.055)}
}
.mico{
  width:48px;height:48px;border-radius:14px;flex:none;
  background:rgba(203,162,75,.12);border:1px solid rgba(203,162,75,.22);
  display:inline-flex;align-items:center;justify-content:center;
}
.mico .ic{width:24px;height:24px}
.mcard h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.22rem;color:#fff;margin:4px 0 0}
.mcard p{color:var(--txt-doux);font-size:.95rem;line-height:1.65;margin:0}
.mcard .lien-or{margin-top:auto;padding-top:8px;font-size:.92rem}
.mcard-sur-mesure{
  background:linear-gradient(165deg,rgba(203,162,75,.16),rgba(203,162,75,.03));
  border-color:rgba(203,162,75,.42);
}

.rail-ctrl{display:flex;gap:10px;margin-top:var(--e2)}
.rail-ctrl button{
  width:46px;height:46px;border-radius:50%;background:var(--verre);
  border:1px solid var(--verre-bord);color:#fff;cursor:pointer;font-size:1.2rem;
  font-family:inherit;line-height:1;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s var(--ease-out),opacity .2s ease;
}
.rail-ctrl button:active{transform:scale(.97)}
.rail-ctrl button[disabled]{opacity:.32;cursor:default}
@media (hover:hover){
  .rail-ctrl button:not([disabled]):hover{border-color:var(--or);color:var(--or-clair)}
}
@media(max-width:700px){ .rail-ctrl{display:none} }

/* =========================================================
   5 — LA BANDE PHOTO
   Une image pleine largeur qui casse la colonne.
   ========================================================= */
.bande{position:relative;min-height:min(78vh,660px);display:flex;align-items:flex-end;
  padding:var(--e8) 0 var(--e7);overflow:hidden;background:var(--noir)}
.bande-fond{position:absolute;inset:0;z-index:0}
.bande-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.bande-dedans{position:relative;z-index:2;max-width:var(--maxw)}
.bande-dedans h2{color:#fff;margin-top:var(--e2);max-width:18ch}
.bande-dedans .lead-l{margin-top:var(--e3);max-width:52ch}
.bande-dedans .lien-or{display:inline-block;margin-top:var(--e4)}
.bande .voile:after{
  background:linear-gradient(100deg,rgba(6,8,12,.93) 0%,rgba(6,8,12,.76) 38%,
             rgba(6,8,12,.38) 64%,rgba(6,8,12,.10) 100%);
}
@media(max-width:900px){
  .bande{min-height:auto;padding:var(--e7) 0 var(--e6)}
  .bande .voile:after{
    background:linear-gradient(180deg,rgba(6,8,12,.52) 0%,rgba(6,8,12,.80) 55%,rgba(6,8,12,.94) 100%);
  }
}

/* =========================================================
   6 — LA BARRE D'ACTION
   Elle arrive quand le hero est passé, elle s'efface sur l'estimateur :
   on ne propose pas d'aller là où on se trouve déjà.
   ========================================================= */
.barre-action{
  position:fixed;left:50%;bottom:18px;z-index:95;
  transform:translateX(-50%) translateY(140%);
  display:flex;align-items:center;gap:var(--e4);
  width:min(640px,calc(100vw - 32px));
  padding:12px 12px 12px 22px;border-radius:var(--r-rond);
  background:rgba(11,13,16,.90);backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(203,162,75,.30);
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  transition:transform .5s var(--ease-out),opacity .35s ease;
  opacity:0;
}
.barre-action.on{transform:translateX(-50%) translateY(0);opacity:1}
.ba-txt{flex:1;min-width:0}
.ba-txt b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:1.02rem;color:#fff;letter-spacing:-.01em}
.ba-txt span{display:block;font-size:.84rem;color:var(--txt-doux);margin-top:2px}
.ba-geste{display:flex;align-items:center;gap:10px;flex:none}
.ba-geste .btn{padding:12px 22px;font-size:.94rem}
.ba-tel{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--verre-bord);background:var(--verre);
  transition:border-color .2s ease,background-color .2s ease,transform .2s var(--ease-out);
}
.ba-tel .ic{width:20px;height:20px;stroke:var(--or-clair)}
.ba-tel:active{transform:scale(.97)}
@media (hover:hover){ .ba-tel:hover{border-color:var(--or);background:rgba(203,162,75,.1)} }

@media(max-width:620px){
  .barre-action{bottom:12px;padding:10px 10px 10px 16px;gap:12px}
  .ba-txt span{display:none}
  .ba-txt b{font-size:.94rem}
  .ba-geste .btn{padding:11px 16px;font-size:.88rem}
  /* le bouton flottant WhatsApp remonte pour ne pas se cogner à la barre */
  .fab{bottom:88px}
}

/* Mouvement réduit : la barre arrive sans glisser */
@media (prefers-reduced-motion:reduce){
  .barre-action{transition:opacity .2s ease;transform:translateX(-50%) translateY(0)}
  .barre-action:not(.on){opacity:0;pointer-events:none}
}

/* =========================================================
   CONTRASTE — le gris du thème clair n'a rien à faire sur le noir
   ========================================================= */
/* socle.css donne `color:var(--ardoise)` à .lead-l, un gris choisi pour un
   fond ivoire. Seul `.sur-nuit .lead-l` le rattrape, et mes nouvelles
   sections ne portent pas cette classe. Mesuré au navigateur : contraste
   2,12 sur la bande photo. Le texte était là, on ne le lisait pas. */
.code-tete .lead-l,
.missions .sec-head p{color:var(--txt-doux)}
/* Sur une photo, un cran plus clair : l'image bouge sous le texte. */
.bande-dedans .lead-l{color:rgba(244,241,234,.82)}

/* Bouton d'appel permanent dans la nav.
   Mesuré : sans lui, trouver le numéro coûtait un clic sur le menu plus un
   balayage. Pour un prescripteur (hôtel, conciergerie) qui donne le numéro
   à un client devant lui, c'est un clic de trop. */
.nav-appel{
  width:42px;height:42px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);
  transition:border-color .2s ease,background-color .2s ease,transform .2s var(--ease-out);
}
.nav-appel .ic{width:19px;height:19px;stroke:var(--or-clair)}
.nav-appel:active{transform:scale(.97)}
@media (hover:hover){
  .nav-appel:hover{border-color:var(--or);background:rgba(203,162,75,.12)}
}
@media(max-width:620px){ .nav-appel{width:38px;height:38px} .nav-appel .ic{width:17px;height:17px} }

/* styles.css masque `.nav-cta .btn-or` sous 900 px : dans l'ancien design le
   burger remplaçait le bouton. Ici le burger est permanent, et le geste de
   réservation doit l'être aussi. Mesuré : à 760 px le bouton faisait 0 px
   de large, le visiteur n'avait plus aucun appel à l'action en haut de page. */
.nav-v2 .nav-cta .btn-or{display:inline-flex}

/* =====================================================================
   LA VOITURE  (remplace l'ancienne « flotte » à trois silhouettes)

   Une voiture appartient à Movely, deux viennent de partenaires. La mise
   en page dit cette différence avant que le texte ne l'explique : la Q3
   occupe toute la largeur avec ses vraies photos, les partenaires tiennent
   dans deux cartes sobres, sans image — on ne montre pas une voiture qu'on
   n'a pas photographiée.
   ===================================================================== */
.voiture{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);
  gap:30px;align-items:stretch;margin-top:42px;
}
.voiture-vues{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto;gap:12px;min-width:0;
}
.voiture-vues figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-m,18px);
  border:1px solid var(--verre-bord);background:#0b1016}
.voiture-vues img{display:block;width:100%;height:100%;object-fit:cover}
.vv-grande{grid-column:1 / -1;aspect-ratio:16/10}
.vv-petite{aspect-ratio:1/1}
.voiture-vues figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;
  font-size:.76rem;letter-spacing:.01em;color:rgba(244,241,234,.86);
  background:linear-gradient(to top,rgba(6,8,12,.85),transparent);
}

.voiture-fiche{
  background:linear-gradient(165deg,#10151f,#0a0e15);
  border:1px solid var(--verre-bord);border-radius:var(--r-l,24px);
  padding:30px 30px 32px;display:flex;flex-direction:column;min-width:0;
}
.badge-maison{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#120d02;background:var(--or);padding:6px 12px;border-radius:var(--r-rond,999px);
}
.badge-maison .ic{width:14px;height:14px;stroke:#120d02}
.voiture-fiche h3{font-family:"Fraunces",serif;font-size:clamp(1.5rem,3.4vw,2rem);
  color:#fff;margin:16px 0 8px;line-height:1.14}
.voiture-sous{color:var(--txt-doux);font-size:.95rem;line-height:1.6;margin:0 0 22px}

.voiture-faits{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:2px}
.voiture-faits li{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 12px;
  padding:13px 0;border-top:1px solid rgba(255,255,255,.07);
}
.voiture-faits li:first-child{border-top:none}
.voiture-faits .ic{width:18px;height:18px;stroke:var(--or);grid-row:1 / 3;margin-top:2px}
.voiture-faits b{color:#fff;font-size:.95rem;font-weight:600}
.voiture-faits span{color:var(--txt-doux);font-size:.86rem;line-height:1.5}

.voiture-prix{margin-top:auto;padding:16px 0 20px;border-top:1px solid rgba(255,255,255,.07)}
.voiture-prix b{display:block;font-family:"Fraunces",serif;font-size:1.5rem;color:var(--or-clair)}
.voiture-prix span{display:block;margin-top:4px;color:var(--txt-doux);font-size:.85rem}
.voiture-fiche .btn{width:100%;justify-content:center}

/* --- Les véhicules partenaires --- */
.partenaires{margin-top:48px;padding-top:40px;border-top:1px solid rgba(255,255,255,.08)}
.part-titre{font-family:"Fraunces",serif;font-size:1.35rem;color:#fff;margin:0 0 10px}
.part-intro{color:var(--txt-doux);font-size:.95rem;line-height:1.65;max-width:62ch;margin:0 0 26px}
.part-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pcard{
  background:var(--verre);border:1px solid var(--verre-bord);border-radius:var(--r-m,18px);
  padding:24px;min-width:0;display:flex;flex-direction:column;
}
.pc-tag{
  align-self:flex-start;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--or-clair);border:1px solid rgba(203,162,75,.4);
  padding:4px 10px;border-radius:var(--r-rond,999px);
}
.pcard h4{font-family:"Fraunces",serif;font-size:1.25rem;color:#fff;margin:14px 0 6px}
.pcard p{color:var(--txt-doux);font-size:.9rem;line-height:1.6;margin:0 0 16px}
.pc-prix{margin-top:auto}
.pc-prix b{display:block;color:var(--or-clair);font-weight:600;font-size:1.05rem}
.pc-prix span{display:block;color:var(--txt-faible);font-size:.8rem;margin-top:2px}
.pc-lien{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  color:var(--or-clair);font-weight:600;font-size:.9rem;border-bottom:1px solid rgba(203,162,75,.35);
  padding-bottom:3px;align-self:flex-start}
.pc-lien .ic{width:16px;height:16px;stroke:var(--or-clair)}
.pc-lien:hover{border-bottom-color:var(--or-clair)}

.part-note{
  display:flex;gap:11px;align-items:flex-start;margin:24px 0 0;
  color:var(--txt-doux);font-size:.86rem;line-height:1.6;max-width:72ch;
}
.part-note .ic{width:17px;height:17px;stroke:var(--or);flex:none;margin-top:2px}

@media(max-width:980px){
  .voiture{grid-template-columns:minmax(0,1fr);gap:22px}
  .voiture-fiche{padding:26px 22px 28px}
}
@media(max-width:620px){
  .part-grid{grid-template-columns:minmax(0,1fr)}
  .vv-petite{aspect-ratio:4/3}
}

/* =====================================================================
   LA NATURE DU DÉPLACEMENT  (formulaire de réservation)
   Cinq pastilles, une seule allumée. Celle qui correspond aux adresses
   est déjà choisie : le plus souvent, le client ne touche à rien.
   ===================================================================== */
.nature{border:0;margin:0 0 4px;padding:0;min-width:0}
.nature legend{
  padding:0;font-size:.8rem;font-weight:600;color:var(--txt-doux);
  letter-spacing:.02em;margin-bottom:10px;
}
.nature-choix{display:flex;flex-wrap:wrap;gap:8px}
.nat{
  display:inline-flex;align-items:center;gap:8px;font-family:inherit;
  font-size:.86rem;font-weight:500;color:var(--txt-doux);
  background:var(--verre);border:1px solid var(--verre-bord);
  padding:9px 14px;border-radius:var(--r-rond,999px);cursor:pointer;
  transition:color var(--t-court,.18s),border-color var(--t-court,.18s),background var(--t-court,.18s);
}
.nat .ic{width:16px;height:16px;stroke:currentColor;flex:none}
.nat:hover{color:var(--txt);border-color:rgba(203,162,75,.45)}
.nat.on{color:#120d02;background:var(--or);border-color:var(--or);font-weight:600}
.nat.on .ic{stroke:#120d02}
.nature-aide{margin:10px 0 0;font-size:.82rem;color:var(--txt-faible);line-height:1.5}

/* =====================================================================
   L'HISTORIQUE  (espace client)
   On doit reconnaître une course sans la lire : un pictogramme, un mot,
   une couleur. Transfert, journée, colis, accompagnement ne se ressemblent
   plus. Les couleurs restent sourdes — aucune n'alarme.
   ===================================================================== */
.esp-filtres{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.ef{
  font-family:inherit;font-size:.78rem;font-weight:500;color:var(--txt-doux);
  background:transparent;border:1px solid var(--verre-bord);
  padding:6px 11px;border-radius:var(--r-rond,999px);cursor:pointer;
}
.ef i{font-style:normal;opacity:.55;margin-left:4px}
.ef:hover{color:var(--txt);border-color:rgba(203,162,75,.4)}
.ef.on{color:#120d02;background:var(--or-clair);border-color:var(--or-clair);font-weight:600}

.esp-courses{list-style:none;margin:0;padding:0}
.esp-courses .ec{
  --teinte:var(--txt-doux);
  position:relative;list-style:none;padding:16px 16px 14px 18px;margin-bottom:10px;
  background:var(--verre);border:1px solid var(--verre-bord);border-radius:var(--r-m,18px);
  overflow:hidden;
}
/* Le filet de couleur sur la tranche : visible au coin de l'œil, jamais criard */
.esp-courses .ec::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teinte);opacity:.75}
.ec.t-ardoise{--teinte:#8A95A3}
.ec.t-ciel{--teinte:#7FA8C9}
.ec.t-or{--teinte:#CBA24B}
.ec.t-vert{--teinte:#74B892}
.ec.t-prune{--teinte:#A98BC0}

.ec-tete{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.ec-pic{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:8px;background:color-mix(in srgb,var(--teinte) 18%,transparent);flex:none;
}
.ec-pic .ic{width:15px;height:15px;stroke:var(--teinte)}
.ec-nature{font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teinte)}
.ec-quand{font-size:.8rem;color:var(--txt-faible)}
.ec-etat{
  margin-left:auto;font-size:.72rem;font-weight:600;letter-spacing:.04em;
  padding:3px 9px;border-radius:var(--r-rond,999px);
}
.ec-avenir{color:var(--or-clair);background:rgba(203,162,75,.14);border:1px solid rgba(203,162,75,.3)}
.ec-passee{color:var(--txt-faible);background:rgba(255,255,255,.05);border:1px solid var(--verre-bord)}

.ec-trajet{display:block;color:#fff;font-size:.96rem;font-weight:600;line-height:1.45;
  overflow-wrap:anywhere}
.ec-trajet i{font-style:normal;color:var(--teinte);margin:0 7px}
.ec-infos{margin-top:5px;font-size:.82rem;color:var(--txt-doux);line-height:1.5}
.ec-remb{list-style:none;margin:8px 0 0;padding:8px 12px;border-radius:12px;background:rgba(95,211,155,.07);border:1px solid rgba(95,211,155,.22);
  font-size:.82rem;line-height:1.5;color:var(--txt-doux)}
.ec-remb li + li{margin-top:4px}
.ec-remb b{display:block;color:#cfeedd;font-weight:600}
.ec-remb-note{margin:4px 0 0;font-size:.75rem;color:var(--txt-doux)}
.ec-act.ec-gerer{display:inline-flex;align-items:center;text-decoration:none;color:var(--or-clair);border-color:rgba(232,201,126,.45)}
.ec-act.ec-gerer:hover{color:#fff;border-color:var(--or-clair)}
.ec-attente-client{margin:8px 0 0;padding:8px 12px;border-radius:12px;font-size:.82rem;line-height:1.5;color:#f0d9a8;background:rgba(232,176,75,.08);border:1px solid rgba(232,176,75,.26)}

.ec-bas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.ec-prix{font-style:normal;font-family:"Fraunces",serif;font-size:1.12rem;color:var(--or-clair)}
.ec-prix.ec-sansprix{font-family:inherit;font-size:.84rem;color:var(--txt-faible);font-style:italic}
.ec-actions{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap}
.ec-act{
  font-family:inherit;font-size:.78rem;font-weight:600;color:var(--txt-doux);
  background:transparent;border:1px solid var(--verre-bord);
  padding:7px 12px;border-radius:var(--r-rond,999px);cursor:pointer;
  transition:color var(--t-court,.18s),border-color var(--t-court,.18s);
}
.ec-act:hover{color:var(--or-clair);border-color:rgba(203,162,75,.45)}
.esp-attente{margin-top:12px}

/* --- Proposition d'ajout à l'écran d'accueil --- */
.app-ajout{
  margin:20px 0 0;padding:18px;border-radius:var(--r-m,18px);
  background:rgba(203,162,75,.07);border:1px solid rgba(203,162,75,.26);
}
.app-ajout b{display:block;color:#fff;font-size:.95rem;margin-bottom:6px}
.app-ajout span{display:block;color:var(--txt-doux);font-size:.85rem;line-height:1.6}
.app-ajout .btn{margin-top:14px;width:100%;justify-content:center}

/* =====================================================================
   LE RETOUR D'UN CLIENT CONNU  (haut de page)
   Une carte de verre comme une liste iOS : un en-tête (qui, dans quel
   état), puis UNE action, la plus utile maintenant. Grille de 4 px :
   rangées de 64, icônes de 36, marges de 16, texte 15/20 et 13/18.
   ===================================================================== */
.accueil-perso{
  width:100%;max-width:440px;margin:0 0 24px;padding:0;border-radius:20px;overflow:hidden;
  font-size:15px;line-height:20px;color:var(--txt);
  background:rgba(12,16,24,.66);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 40px rgba(0,0,0,.35);
}
.accueil-perso b{color:inherit}
.ap-tete{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:68px;padding:14px 16px}
.ap-av{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(203,162,75,.16);box-shadow:0 0 0 1px rgba(203,162,75,.55);
  color:var(--or-clair);font-family:"Fraunces",serif;font-size:16px;font-weight:600;line-height:1}
.ap-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ap-av.connecte::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:#5fd39b;box-shadow:0 0 0 2px #10151f}
.ap-qui{flex:1;min-width:0}
.ap-mot{margin:0;font-size:15px;line-height:20px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-sous{margin:2px 0 0;font-size:13px;line-height:18px;color:var(--txt-doux);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-e{font-size:.72em;line-height:0;vertical-align:.42em;margin-left:1px}
.ap-lien{flex:none;display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:-12px -6px -12px 0;padding:0 6px 0 8px;
  background:none;border:0;border-radius:10px;font:inherit;font-size:13px;line-height:18px;font-weight:600;color:var(--or-clair);cursor:pointer}
.ap-lien .ic,.ap-chev{width:14px;height:14px;stroke:currentColor;stroke-width:2;transform:rotate(-90deg)}

.ap-ligne{box-sizing:border-box;position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 14px;align-items:center;column-gap:12px;
  width:100%;min-height:64px;padding:11px 16px 12px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:transparent;border:0;border-top:1px solid rgba(255,255,255,.08);transition:background-color .15s ease}
.ap-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(203,162,75,.14)}
.ap-ic .ic{width:18px;height:18px;stroke:var(--or-clair)}
.ap-txt{min-width:0}
.ap-txt b,.ap-txt span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-txt b{font-size:15px;line-height:20px;font-weight:600;color:#fff}
.ap-txt span{margin-top:2px;font-size:13px;line-height:18px;color:var(--txt-doux)}
.ap-etat{font-style:normal;font-weight:600}
.ap-etat-confirmee{color:#bfe8d1}
.ap-etat-payee{color:var(--or-clair)}
.ap-etat-demandee,.ap-etat-paiement_en_attente{color:#f0d9a8}
.ap-chev{color:var(--txt-faible,rgba(244,241,234,.55))}
@media(hover:hover){
  .ap-ligne:hover{background:rgba(255,255,255,.04)}
  .ap-lien:hover{background:rgba(203,162,75,.1)}
}
.ap-ligne:active{background:rgba(255,255,255,.07)}
.ap-ligne:focus-visible,.ap-lien:focus-visible{outline-offset:-3px !important}
@media(prefers-reduced-motion:reduce){ .ap-ligne{transition-duration:.01s} }

/* =====================================================================
   MODE APPLICATION  (site ajouté à l'écran d'accueil)
   Une barre d'onglets en bas, quatre destinations. Elle ne s'affiche
   jamais dans un navigateur ordinaire : là, la page suffit.
   ===================================================================== */
.onglets{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(8,11,17,.94);backdrop-filter:blur(18px);
  border-top:1px solid var(--verre-bord);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.ong{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:10px 4px 9px;color:var(--txt-faible);font-size:.68rem;font-weight:500;
  text-align:center;min-height:54px;
}
.ong .ic{width:21px;height:21px;stroke:currentColor}
.ong.on{color:var(--or-clair)}
.en-app body{padding-bottom:70px}
.en-app .capture-band{display:none}

@media(prefers-reduced-motion:reduce){
  .ec-act,.ef,.nat{transition-duration:.01ms}
}

/* Les pastilles disent la phrase entière quand la place existe, et le
   mot juste quand elle manque : cinq lignes empilées sur un téléphone,
   c'est un formulaire qui s'allonge pour rien. */
.nat-bref{display:none}
@media(max-width:560px){
  .nat-long{display:none}
  .nat-bref{display:inline}
  .nat{padding:8px 12px;font-size:.84rem}
  .nature-aide{margin-top:12px}
}

/* Un véhicule partenaire n'a pas de photo : il a un cadre qui le dit.
   Mieux vaut un vide honnête qu'une voiture dessinée qui promet un
   modèle que personne n'a encore réservé. */
.veh-sans{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;height:100%;
}
.veh-sans .ic{width:30px;height:30px;stroke:var(--or);opacity:.75}
.veh-sans span{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--txt-faible)}

/* La barre des jeux de test (locale) ne doit pas se poser sur les onglets. */
.en-app .dev-jeux{bottom:78px}

/* =====================================================================
   MON ESPACE — trois onglets
   Mes courses, Mon profil, Messages. Un nouveau venu n'a qu'un onglet à
   lire, un habitué atteint le sien d'un geste.
   ===================================================================== */
.esp-onglets{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
  background:rgba(255,255,255,.05);border:1px solid var(--verre-bord);
  border-radius:var(--r-rond,999px);padding:4px;margin:0 0 20px;
}
.eo{
  font-family:inherit;font-size:.82rem;font-weight:600;color:var(--txt-doux);
  background:transparent;border:0;padding:9px 6px;border-radius:var(--r-rond,999px);
  cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color var(--t-court,.18s),background var(--t-court,.18s);
}
.eo:hover{color:var(--txt)}
.eo.on{color:#120d02;background:var(--or)}

/* --- La photo de profil --- */
.esp-av-photo{object-fit:cover;padding:0;border:1px solid rgba(203,162,75,.5)}
.pf-photo{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;
  padding:16px;margin-bottom:22px;border-radius:var(--r-m,18px);
  background:var(--verre);border:1px solid var(--verre-bord);
}
.pf-photo b{display:block;color:#fff;font-size:.92rem}
.pf-photo span{display:block;color:var(--txt-doux);font-size:.8rem;line-height:1.5;margin-top:3px}
.pf-photo-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.pf-photo-actions label{cursor:pointer}

/* --- Les champs --- */
.esp-profil .field{margin-bottom:14px}
.pf-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.esp-profil .esp-h{margin-top:26px}
.esp-profil .esp-note{margin:0 0 12px}

/* --- Le nom affiché sous les avis --- */
.pf-avis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:4px}
.pf-opt{
  position:relative;display:block;cursor:pointer;min-width:0;
  padding:12px 14px;border-radius:var(--r-s,12px);
  background:var(--verre);border:1px solid var(--verre-bord);
  transition:border-color var(--t-court,.18s),background var(--t-court,.18s);
}
.pf-opt input{position:absolute;opacity:0;width:1px;height:1px}
.pf-opt b{display:block;color:#fff;font-size:.9rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-opt span{display:block;color:var(--txt-faible);font-size:.76rem;margin-top:2px}
.pf-opt:hover{border-color:rgba(203,162,75,.4)}
.pf-opt.on{border-color:var(--or);background:rgba(203,162,75,.1)}
.pf-opt input:focus-visible + b{outline:2px solid var(--or-clair);outline-offset:3px}

/* --- Ce qui attend un serveur : on le dit, on ne le mime pas --- */
.pf-bloc{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;
  padding:16px;border-radius:var(--r-m,18px);
  background:rgba(255,255,255,.035);border:1px dashed var(--verre-bord);
}
.pf-bloc .ic{width:19px;height:19px;stroke:var(--or);margin-top:2px}
.pf-bloc b{display:block;color:#fff;font-size:.9rem}
.pf-bloc span{display:block;color:var(--txt-doux);font-size:.83rem;line-height:1.6;margin-top:5px}

.pf-pied{margin-top:26px;padding-top:18px;border-top:1px solid var(--verre-bord)}
.pf-pied .btn{width:100%;justify-content:center}
.pf-ok{margin:12px 0 0;font-size:.85rem;color:var(--or-clair);text-align:center;min-height:1.2em}
.pf-ok.non{color:#E8B06A}

/* --- Messages --- */
.msg-zone .field{margin-bottom:14px}
.msg-zone .btn{width:100%;justify-content:center}
.msg-zone .esp-note{margin-top:12px}
.msg-liste{list-style:none;margin:0;padding:0}
.msg-liste li{
  padding:14px 16px;margin-bottom:10px;border-radius:var(--r-m,18px);
  background:var(--verre);border:1px solid var(--verre-bord);
}
.msg-tete{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.msg-tete span{font-size:.78rem;color:var(--txt-faible)}
.msg-tete em{font-style:normal;font-size:.78rem;color:var(--or-clair);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.msg-liste p{margin:0;color:var(--txt);font-size:.9rem;line-height:1.6;overflow-wrap:anywhere}

.esp-avis-signe{margin:8px 0 0;font-size:.8rem;color:var(--txt-faible)}
.esp-avis-signe b{color:var(--txt-doux);font-weight:600}

@media(max-width:420px){
  .pf-avis{grid-template-columns:minmax(0,1fr)}
  .pf-duo{grid-template-columns:minmax(0,1fr)}
  .eo{font-size:.76rem;padding:9px 4px}
}


/* =====================================================================
   LA BARRE DE RECHERCHE DU HERO

   Le visiteur ne vient pas lire : il vient savoir combien et quand. La
   barre est donc la première chose sous le titre, posée sur la photo,
   comme un comptoir éclairé dans la nuit.
   ===================================================================== */
.hero-recherche{
  display:grid;gap:10px;margin-top:var(--e5,38px);max-width:980px;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:end;
  background:rgba(10,14,21,.72);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-m,18px);
  padding:12px;
}
.hr-champ{display:flex;flex-direction:column;gap:5px;min-width:0}
.hr-champ label{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:rgba(244,241,234,.62);padding-left:2px;
}
.hr-champ input,.hr-champ select{
  width:100%;min-width:0;font-family:inherit;font-size:.94rem;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-s,12px);padding:11px 13px;
  transition:border-color var(--t-court,.18s),background var(--t-court,.18s);
}
.hr-champ input::placeholder{color:rgba(244,241,234,.42)}
.hr-champ input:focus,.hr-champ select:focus{
  outline:none;border-color:var(--or);background:rgba(255,255,255,.1);
}
.hr-champ select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(244,241,234,.5) 50%),
                   linear-gradient(135deg,rgba(244,241,234,.5) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:30px}
/* Les champs de date du navigateur sont clairs par défaut : on les
   rhabille, sinon deux rectangles blancs crèvent la barre. */
.hr-champ input[type="date"],.hr-champ input[type="time"]{color-scheme:dark}
.hero-recherche .hr-go{height:44px;white-space:nowrap;padding:0 22px}

/* La ligne « ou nous appeler » se range sous la barre, discrète. */
.hero-v2 .hero-cta{margin-top:16px}

@media(max-width:1080px){
  .hero-recherche{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .hero-recherche .hr-quand,.hero-recherche .hr-pax{display:none}
  .hero-recherche .hr-go{grid-column:3;align-self:end}
}
@media(max-width:640px){
  .hero-recherche{grid-template-columns:minmax(0,1fr);padding:14px;gap:12px}
  .hero-recherche .hr-go{grid-column:1;width:100%;justify-content:center;height:48px;margin-top:2px}
}

/* Sur un téléphone, le hero doit tenir : l'accueil d'un habitué, le titre,
   une phrase, et la barre. Au-delà, le bouton « Voir mon prix » passe sous
   la ligne de flottaison et la page perd son unique geste utile. */
@media(max-width:640px){
  .hero.hero-v2{padding-top:104px}
  .hero-v2 .hero-lead{font-size:.98rem;line-height:1.6;margin-top:14px;max-width:34ch}
  .hero-v2 .hero-recherche{margin-top:22px}
  .accueil-perso{max-width:none;margin-bottom:20px;border-radius:18px}
  .ap-tete{min-height:64px;padding:12px 14px}
  .ap-ligne{min-height:60px;padding:9px 14px 10px}
   /* 9 + 40 + 10 + 1 de filet = 60 */
  .hero-rassure{gap:8px 16px;margin-top:16px}
  .hero-rassure span{font-size:.84rem}
}

/* =====================================================================
   L'ÉCHELLE  (proportions, une seule, partout)

   Relevé au navigateur avant cette couche : trois tailles de h2 selon la
   section (24, 27, 32 px sur téléphone), des sections espacées de 56, 60
   ou 68 px selon l'humeur du fichier, et 34 commandes sous 40 px de haut.
   Une page se lit comme une partition : même interligne, mêmes marges,
   mêmes touches. Cette couche impose l'échelle, et elle est chargée en
   dernier pour qu'aucune feuille plus ancienne ne la contredise.

   Échelle de texte (mobile → écran large, fluide) :
     eyebrow .78   small .875   body 1   lead 1.08→1.15
     h3 1.3→1.6    h2 1.9→2.6   h1 2.5→4   (rem)
   Échelle d'espace : sections 56 → 96 px ; blocs 24 / 40 ; touches 44 px.
   ===================================================================== */
:root{
  --fs-eyebrow:.78rem;
  --fs-small:.875rem;
  --fs-body:1rem;
  --fs-lead:clamp(1.05rem,.98rem+.35vw,1.15rem);
  --fs-h3:clamp(1.3rem,1.05rem + 1.1vw,1.6rem);
  --fs-h2:clamp(1.9rem,1.35rem + 2.3vw,2.6rem);
  --fs-h1:clamp(2.5rem,1.55rem + 4.1vw,4rem);
  --lh-titre:1.08;
  --lh-texte:1.6;
  --sec-pad:clamp(56px,36px + 4.2vw,96px);
  --sec-tete:clamp(28px,20px + 1.6vw,44px);   /* entre l'en-tête de section et son contenu */
  --cible:44px;
}

/* --- Rythme vertical : toutes les sections respirent pareil --- */
section.code,section.missions,section.bande,section.estim,section.flotte,
section.loyalty,section.proof,section.booking,section.zones,section#faq,
section.capture-band{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.sec-head{margin-bottom:var(--sec-tete)}
.voiture{margin-top:0}
.flotte-grid{margin-top:0}

/* --- Titres : une seule hiérarchie --- */
.hero h1,.hero .display.t-xxl{font-size:var(--fs-h1);line-height:1.02}
.sec-head h2,.code .display.t-xl,.bande .display.t-xl,.missions h2,.loyalty h2,
.booking h2,.zones h2,#faq h2,.capture-band h2,.proof h2,.estim h2{
  font-size:var(--fs-h2);line-height:var(--lh-titre);
}
.voiture-fiche h3,.mcard h3,.part-titre,.pcard h4,.faq-q,.loy-card h3{font-size:var(--fs-h3);line-height:1.15}
.eyebrow{font-size:var(--fs-eyebrow)}
.lead-l,.hero-lead,.sec-head p{font-size:var(--fs-lead);line-height:var(--lh-texte)}
.voiture-sous,.part-intro,.pcard p,.mcard p,.code-liste p{font-size:var(--fs-body);line-height:var(--lh-texte)}
@media(max-width:640px){
  .hero-v2 .hero-lead{font-size:var(--fs-body)}     /* le hero tient dans l'écran */
}

/* --- Touches : 44 px de haut, 8 px entre deux ---
   Tout ce qu'on peut presser du pouce. Les puces d'une même rangée
   gardent 40 px avec leur écart de 8 px (règle WCAG 2.2 et HIG). */
.nat,.shortcuts .chip,.modes .mode,.eo,#map-vue,.esp-sortie,
.hero-recherche .hr-go,.pc-lien,.lien-suite,.lien-or,.mcard .lien-or{
  min-height:var(--cible);
}
.pc-lien,.lien-suite,.lien-or{display:inline-flex;align-items:center}
.ec-act,.ef{min-height:40px}
.ec-actions,.esp-filtres,.nature-choix,.shortcuts{gap:8px}
.geo-btn,.sheet-close,#espace-fermer,.esp-stars button{width:var(--cible);height:var(--cible)}
.nav-appel,.nav-v2 .nav-appel{width:var(--cible);height:var(--cible)}
.nav-v2 .nav-logo{min-height:var(--cible)}
.nav-v2 .nav-links a{min-height:48px;display:flex;align-items:center}
.hr-champ input,.hr-champ select{min-height:46px}
.swap-btn{min-height:var(--cible)}
.e-opt label,.e-options label,.paiements label{min-height:var(--cible);display:flex;align-items:center}
/* Les commandes de la carte sont celles de Leaflet : on les agrandit. */
.leaflet-bar a,.leaflet-bar a:hover{width:40px;height:40px;line-height:40px}
@media(max-width:620px){
  .nav-appel,.nav-v2 .nav-appel{width:var(--cible);height:var(--cible)}
}

/* =====================================================================
   RÉSERVER ET PAYER  (la feuille avant Stripe)
   ===================================================================== */
.sheet-bd{position:fixed;inset:0;background:rgba(3,5,8,.62);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity var(--t-moyen,.34s);z-index:100}
.sheet-bd.on{opacity:1;pointer-events:auto}
.paie-sheet{max-height:92vh;overflow:auto;padding-bottom:max(18px,env(safe-area-inset-bottom))}
.paie-recap{padding:14px 16px;border-radius:var(--r-s,12px);background:var(--verre);border:1px solid var(--verre-bord);margin-bottom:12px}
.paie-recap b{display:block;color:#fff;font-size:.98rem;line-height:1.45;overflow-wrap:anywhere}
.paie-recap b i{font-style:normal;color:var(--or);margin:0 7px}
.paie-recap span{display:block;margin-top:5px;color:var(--txt-doux);font-size:.84rem;line-height:1.5}
.paie-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 2px 16px}
.paie-total span{color:var(--txt-doux);font-size:.88rem}
.paie-total b{font-family:"Fraunces",serif;font-size:1.7rem;color:var(--or-clair)}
#paie-form .field{margin-bottom:12px}
#paie-form .btn{width:100%;justify-content:center;min-height:48px;font-size:1rem}
.paie-erreur{margin:0 0 12px;padding:10px 13px;border-radius:var(--r-s,12px);
  background:rgba(232,176,106,.12);border:1px solid rgba(232,176,106,.4);color:#F1D3A7;font-size:.88rem;line-height:1.5}
.paie-code-msg{margin:6px 0 0;font-size:.82rem;line-height:1.45;color:#cfeedd}
.paie-code-msg.non{color:#f0d9a8}
.paie-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;color:var(--txt-doux);font-size:.82rem;line-height:1.55}
.paie-note .ic{width:16px;height:16px;stroke:var(--or);flex:none;margin-top:2px}
/* Les deux boutons du résultat : payer d'abord, écrire ensuite. */
.result-cta{display:grid;gap:10px}
.result-cta .btn{width:100%;justify-content:center;min-height:var(--cible,44px)}
#e-payer{order:-1}
@media(min-width:640px){.result-cta{grid-template-columns:1fr 1fr}#e-payer{grid-column:1 / -1}}

/* Retouches de l'échelle, mesurées après la première passe. */
.hero-v2 .hero-lead,.bande-dedans .lead-l,.code-tete .lead-l{font-size:var(--fs-lead)}
.leaflet-touch .leaflet-bar a,.leaflet-touch .leaflet-bar a:hover{width:40px;height:40px;line-height:40px}

/* =====================================================================
   FIDÉLITÉ  (espace client) — palier, points, parrainage
   ===================================================================== */
.fid{display:grid;gap:8px;margin:0 0 22px}
.fid-ligne{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 12px;align-items:start;
  padding:14px 16px;border-radius:var(--r-m,18px);background:rgba(203,162,75,.07);border:1px solid rgba(203,162,75,.22)}
.fid-ligne .ic{width:18px;height:18px;stroke:var(--or);margin-top:2px;grid-row:1 / 3}
.fid-ligne b{display:block;color:#fff;font-size:.93rem;line-height:1.4}
.fid-ligne span{display:block;color:var(--txt-doux);font-size:.83rem;line-height:1.55;margin-top:3px}
.fid-ligne code{font-family:"Fraunces",serif;font-size:1.05rem;color:var(--or-clair);letter-spacing:.06em}
.fid-parrain .ec-act{margin-top:10px;justify-self:start}
/* La remise de palier dans la feuille de paiement */
.paie-remise{display:flex;justify-content:space-between;gap:12px;padding:0 2px 10px;font-size:.88rem;color:var(--txt-doux)}
.paie-remise b{color:#74B892;font-weight:600}
.paie-total s{color:var(--txt-faible);font-size:1rem;margin-right:8px;font-family:inherit}
/* Le chapeau du hero suit l'échelle, quelle que soit la profondeur du sélecteur. */
.hero-v2 .hero-dedans .hero-lead,.hero.hero-v2 p.hero-lead{font-size:var(--fs-lead)}
@media(max-width:640px){.hero-v2 .hero-dedans .hero-lead,.hero.hero-v2 p.hero-lead{font-size:var(--fs-body)}}
/* Les liens du pied de page se pressent au pouce comme les autres. */
footer .foot-grid a,footer .foot-col a{display:inline-flex;align-items:center;min-height:var(--cible,44px)}


/* =====================================================================
   APRÈS LE FILM — ce qui se superposait, ce qui se répétait
   ===================================================================== */
/* Sur téléphone, la bulle WhatsApp recouvrait le champ « Destination »
   (plans 1, 6, 30, 31). La barre d'action porte déjà le téléphone, et
   WhatsApp est dans la réservation : la bulle n'existe que sur ordinateur. */
@media(max-width:899px){ .fab{display:none !important} }
/* Sur ordinateur, la barre flottante répétait le bouton « Réserver » de la
   navigation, toujours visible (plans 13 à 21) : elle reste au pouce, sur
   téléphone seulement. */
@media(min-width:900px){ .barre-action{display:none !important} }
/* Sur téléphone, la barre tient sur une ligne : le texte court, pas de
   sous-titre (plans 22, 32). */
@media(max-width:899px){
  .barre-action .ba-txt span{display:none}
  .barre-action .ba-txt b{font-size:.92rem;white-space:nowrap}
}
@media(max-width:400px){
  .barre-action .ba-txt{display:none}
  .barre-action .ba-geste{width:100%;justify-content:center}
  .barre-action .ba-geste .btn{flex:1;justify-content:center}
}

/* F1 — Le lien discret sous les deux boutons du résultat. */
.lien-discret{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;width:100%;
  background:none;border:0;font-family:inherit;font-size:.88rem;font-weight:500;
  color:var(--txt-doux);cursor:pointer;min-height:var(--cible,44px);padding:4px 8px;
}
.lien-discret .ic{width:16px;height:16px;stroke:#25D366}
.lien-discret:hover{color:#fff}
@media(min-width:640px){ .result-cta .lien-discret{grid-column:1 / -1} }

/* F3 — La carte sur téléphone : la légende tient sur deux lignes courtes
   en haut à gauche, le bouton « Voir la zone » et le badge ne se gênent
   plus, et la phrase d'explication vit sous la carte. */
.map-legende{top:14px;bottom:auto;left:14px;gap:5px}
.map-badge{top:auto;bottom:16px;left:14px;right:auto;max-width:calc(100% - 28px)}
.map-btn{top:auto;bottom:16px;right:14px}
.map-phrase{margin:12px 0 0;font-size:.86rem;line-height:1.55;color:var(--txt-doux);max-width:72ch}
@media(max-width:640px){
  .map-legende{display:none}   /* la phrase sous la carte suffit : la carte reste lisible */
  .map-badge{font-size:.78rem}
}

/* F5 — Les moyens de paiement, en liste propre. */
.pay-rail{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pay-rail span{display:inline-flex;align-items:center;gap:8px}

/* Plan 24 — l'intitulé « Au-delà du trajet » sur la photo manquait de contraste. */
.bande .mention,.bande .eyebrow{color:var(--or-clair);text-shadow:0 1px 10px rgba(6,8,12,.8)}
/* Plan 31 (320 px) — le champ de l'estimateur portait son propre cadre à
   l'intérieur du cadre du champ : deux boîtes l'une dans l'autre. */
.search-field input,.search-field select{background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none}
/* Plan 3 (après correction) — la ligne « 27,2 km · 1 · Audi Q3 » sous le
   prix restait presque invisible. */
#e-meta,#e-meta span{color:var(--txt-doux)}
#e-meta .ic{stroke:var(--or)}
/* Plan 5 (après correction) — le badge et « Voir la zone » se croisaient
   en bas de la carte : le bouton remonte en haut à droite, le badge reste
   en bas à gauche, et la légende (ordinateur) en haut à gauche. */
.map-btn{top:14px;bottom:auto}
@media(max-width:640px){ .map-badge{max-width:calc(100% - 28px)} }

/* =====================================================================
   LOT ROUGE — lisibilité et clavier (failles 17 à 23, 31)
   Les restes du thème ivoire : du gris #5A6573 et des 12 px sur fond
   noir. Tout passe à --txt-doux et à 14 px minimum.
   ===================================================================== */
.opt .od,.pay .pn,.tc-body span,.disclaimer,.field-aide,.opt-lab,.esp-note,.loy-specimen,
.veh-body .vx,.ec-quand,.msg-tete span,.pf-opt span,.fid-ligne span{
  font-size:.875rem;color:var(--txt-doux);line-height:1.5;
}
.veh-body .vp{font-size:.875rem}
.es span,.ef-tete span,.pc-tag,.badge-maison,.eyebrow,.ec-nature,.lg{font-size:.8125rem}   /* 13 px : étiquettes courtes, en capitales */
.esp-sortie{color:var(--txt-doux);font-size:.875rem;text-decoration:underline;text-underline-offset:3px}
.tc-tag{color:var(--txt);background:rgba(255,255,255,.1);font-size:.8125rem}
.tc-tag.good{color:#9FDDB6;background:rgba(46,158,107,.2)}
.detail .l b.gratuit{color:#9FDDB6}
/* Le focus clavier se voit : un anneau or clair, partout, même sur les
   boutons dont une vieille règle effaçait le contour. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible,label:focus-visible{
  outline:3px solid var(--or-clair) !important;outline-offset:3px !important;
}
/* Lu par les lecteurs d'écran, invisible pour les autres. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Le champ piège : hors de portée des humains. */
.piege{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* =====================================================================
   LOT ORANGE — polices locales, hero, missions, poids
   ===================================================================== */
/* 63 — les @font-face vivent dans assets/polices.css, chargée par toutes les pages. */

/* 22 — les libellés de la barre se lisent sur n'importe quelle photo. */
.hr-champ label{color:rgba(244,241,234,.86)}

/* 4 — Un trajet / Une journée, en tête de la barre. */
.hr-modes{grid-column:1 / -1;display:inline-flex;gap:4px;padding:3px;border-radius:var(--r-rond,999px);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);justify-self:start}
.hr-mode{font-family:inherit;font-size:.84rem;font-weight:600;color:var(--txt-doux);background:transparent;border:0;
  padding:7px 14px;border-radius:var(--r-rond,999px);cursor:pointer;min-height:36px}
.hr-mode.on{color:#120d02;background:var(--or)}
.hr-duree select{min-height:46px}

/* 15 — les raccourcis sous la barre : un tap, l'adresse est là. */
.hr-raccourcis{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;margin-top:-2px}
.hr-raccourcis:empty{display:none}
.hr-rac{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:.8rem;font-weight:500;
  color:var(--txt-doux);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  padding:6px 11px;border-radius:var(--r-rond,999px);cursor:pointer;min-height:36px}
.hr-rac .ic{width:14px;height:14px;stroke:var(--or)}
.hr-rac:hover{color:#fff;border-color:rgba(203,162,75,.45)}

/* 2 — le bouton dit qu'il travaille. */
.hr-go.en-cours,#e-go.en-cours{opacity:.75;pointer-events:none}
.hr-go.en-cours::after,#e-go.en-cours::after{content:"";width:14px;height:14px;margin-left:10px;border-radius:50%;
  border:2px solid rgba(18,13,2,.35);border-top-color:#120d02;animation:mv-tourne .8s linear infinite}
@keyframes mv-tourne{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hr-go.en-cours::after,#e-go.en-cours::after{animation-duration:1.6s}}

/* 7 — les cartes de missions : une image, un geste. */
.mcard{position:relative;overflow:hidden}
.mcard-img{margin:-20px -20px 14px;aspect-ratio:16/10;overflow:hidden;background:#0b1016}
.mcard-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:saturate(.92) brightness(.92)}
.mcard .mico{position:relative;z-index:1}
.mcard-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;
  color:var(--or-clair);font-weight:600;font-size:.9rem;background:none;border:0;font-family:inherit;cursor:pointer;min-height:var(--cible,44px)}
.mcard-go .ic{width:15px;height:15px;stroke:var(--or-clair)}

/* 38 — sur un écran bas (iPhone SE en paysage ou petit téléphone), le chapeau s'efface. */
@media(max-height:700px) and (max-width:640px){
  .hero-v2 .hero-lead{display:none}
  .hero.hero-v2{padding-top:92px}
}

/* 44 — la barre d'action ne couvre plus le dernier bouton d'une section. */
@media(max-width:899px){ body.barre-visible{padding-bottom:84px} }
/* Un champ caché le reste, même s'il est en flex. */
.hr-champ[hidden],.hr-raccourcis[hidden]{display:none !important}

/* =====================================================================
   VAGUE 2 — après le troisième film (14/10 soir)
   ===================================================================== */
/* La barre du hero sur grand écran : douze colonnes, deux rangées. Les
   raccourcis prennent une rangée entière ; avant, ils cassaient la rangée
   et « Voir mon prix » tombait dans une colonne trop étroite. */
.hero-recherche .hr-adresse,.hero-recherche .hr-duree{grid-column:span 6}
.hero-recherche .hr-jour{grid-column:span 4}
.hero-recherche .hr-hh{grid-column:span 3}
.hero-recherche .hr-pax{grid-column:span 2}
.hero-recherche .hr-go{grid-column:span 3;justify-self:stretch}
@media(max-width:1080px){
  .hero-recherche .hr-adresse,.hero-recherche .hr-duree{grid-column:auto}
  .hero-recherche .hr-go{grid-column:3}
}
@media(max-width:640px){ .hero-recherche .hr-go{grid-column:1} }

/* La légende de la carte : le montant est un enfant de plus dans une boîte
   flex, et le « gap » le séparait de son texte (« +  10  € »). */
.lg{gap:0}
.lg::before{margin-right:8px}

/* 55 — la mention de mise en scène, près de l'image et pas à 19 000 px. */
.hero.hero-v2{position:relative}
.hero-mention{position:absolute;right:18px;bottom:12px;z-index:3;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(244,241,234,.42);pointer-events:none}

/* 32 — « Mon espace » est un bouton (il ouvre un panneau), habillé comme avant. */
button.espace-lien,button.espace-lien-m{font-family:inherit;background:transparent;cursor:pointer;line-height:1.25}
.nav-v2 .nav-links button.espace-lien-m{
  display:flex;align-items:center;width:100%;max-width:var(--maxw);margin-inline:auto;text-align:left;
  padding:15px 26px;font-size:1.02rem;font-weight:500;color:rgba(255,255,255,.86);
  border:0;border-bottom:1px solid rgba(255,255,255,.055);border-radius:0;min-height:48px;
}

/* 33 — les cases à cocher : une vraie case, et toute la carte répond. */
.tc input,.opt input{width:20px;height:20px;accent-color:var(--or)}
.tc,.opt{min-height:var(--cible,44px)}

/* 16 — ce qui est vérifiable, sous le prix : la société, le paiement, et le
   reste quand il sera renseigné (jamais un crochet à l'écran). */
.preuves{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;
  font-size:.8125rem;color:var(--txt-doux);line-height:1.4}
.preuves li{display:inline-flex;align-items:center;gap:7px}
.preuves li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--or);flex:none}

/* 6 — une liste se replie : on montre l'essentiel, un bouton ouvre le reste. */
.est-plie{display:none !important}
.voir-plus{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px auto 0;
  font-family:inherit;font-size:.9rem;font-weight:600;color:var(--or-clair);background:none;
  border:1px solid rgba(203,162,75,.35);border-radius:var(--r-rond,999px);padding:10px 20px;
  min-height:var(--cible,44px);cursor:pointer}
.voir-plus:hover{border-color:var(--or);color:#fff}
.voir-plus .ic{width:14px;height:14px;stroke:currentColor;transition:transform .25s}
.voir-plus[aria-expanded="true"] .ic{transform:rotate(180deg)}

/* 10 — dans la feuille : l'autre porte, discrète, et la confirmation. */
.paie-sans{margin:12px auto 0;display:flex;justify-content:center;text-align:center;line-height:1.4}
.paie-ok{margin-top:6px;padding:20px 18px;border:1px solid rgba(203,162,75,.35);border-radius:var(--r-m,18px);
  background:rgba(203,162,75,.06);line-height:1.55}
.paie-ok h4{margin:0 0 4px;font-family:"Fraunces",serif;font-weight:500;font-size:1.3rem;color:#fff}
.paie-ok .ref{display:inline-block;font-family:"Fraunces",serif;font-size:1.25rem;letter-spacing:.06em;
  color:var(--or-clair);margin:4px 0 10px}
.paie-ok p{margin:0 0 10px;font-size:.92rem;color:var(--txt-doux)}
.paie-ok .btn{margin-top:6px}

/* L'espace client : une demande envoyée, pas encore confirmée. */
.ec-demande{color:var(--txt-doux);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}

/* Le formulaire « par message » : la confirmation et ses portes. */
.ok-msg .ok-alt .btn .ic{width:16px;height:16px;margin-right:6px}

/* Suite de la vague 2, après les captures. */
#e-reserver[hidden]{display:none !important}            /* la règle .btn gagnait sur [hidden] */
.faq-grid .voir-plus,.zones-grid .voir-plus{grid-column:1 / -1;justify-self:center}
/* 40 — les tuiles de la section zones, sur une colonne à 390 : le chiffre à
   gauche, le mot à droite, plus rien ne s'enroule. */
@media(max-width:640px){
  .zones-stats{grid-template-columns:1fr;gap:10px}
  .zstat{display:flex;align-items:center;gap:16px;text-align:left;padding:14px 18px}
  .zstat b{font-size:1.75rem;min-width:84px;flex:none}
  .zstat span{margin-top:0;font-size:.9rem}
}

/* =====================================================================
   COMPTE CONNECTÉ, VOTRE VOITURE (14/10/2026, 20h30)
   ===================================================================== */
/* La navigation : un avatar, le prénom et un point vert quand le compte
   est connecté. Un espace d'appareil ou un visiteur gardent le bouton
   texte. Sur téléphone, l'avatar seul reste visible. */
.nav-v2 .nav-cta .espace-lien.connecte{display:inline-flex;align-items:center;gap:9px;padding:4px 15px 4px 4px;
  min-height:var(--cible,44px);border-color:rgba(203,162,75,.5);color:#fff}
.el-av{position:relative;width:32px;height:32px;border-radius:50%;flex:none;display:inline-grid;place-items:center;
  background:rgba(203,162,75,.16);color:var(--or-clair);font-family:"Fraunces",serif;font-size:1rem;font-weight:600;
  box-shadow:0 0 0 1.5px var(--or)}
.el-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.espace-lien.connecte .el-av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;
  background:#5fd39b;box-shadow:0 0 0 2px #0a0e15}
.el-nom{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
@media(max-width:620px){
  .nav-v2 .nav-cta .espace-lien.connecte{padding:5px;border-radius:50%;width:var(--cible,44px);justify-content:center}
  .nav-v2 .nav-cta .espace-lien.connecte .el-nom{display:none}
}
@media(max-width:374px){
  html.client-connecte .nav-v2 .nav-cta .nav-appel{display:none}   /* le téléphone reste dans le menu */
}

/* L'en-tête du panneau : qui, et dans quel état. */
.esp-statut{display:flex !important;align-items:center;gap:6px;margin-top:3px;font-size:.8125rem;color:var(--txt-doux)}
.esp-statut .ic{width:14px;height:14px;flex:none}
.esp-statut-ok{color:#bfe8d1 !important}
.esp-statut-ok .ic{stroke:#5fd39b}
.esp-relier{margin:0 0 18px;padding:16px;border:1px solid rgba(203,162,75,.35);border-radius:var(--r-m,18px);background:rgba(203,162,75,.06)}
.esp-relier > b{display:block;color:#fff;font-size:.95rem}
.esp-relier > span{display:block;margin-top:4px;font-size:.875rem;color:var(--txt-doux);line-height:1.5}
.esp-lien-form{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.esp-lien-form input{flex:1 1 180px;min-width:0;min-height:var(--cible,44px)}
.esp-lien-form .btn{flex:0 0 auto;justify-content:center}
.esp-lien-form[hidden]{display:none}
.esp-lien-grand{flex-direction:column;gap:12px;margin-top:4px}
.esp-lien-grand .field{margin:0}
.esp-lien-grand .btn{width:100%}
[data-lien-msg]:empty{display:none}
[data-lien-msg].non,.esp-note.non{color:#f0c27a}
.esp-autre{display:block;margin-top:6px}
.esp-sans-compte{margin-top:18px;border-top:1px solid var(--verre-bord,rgba(255,255,255,.08));padding-top:6px}
.esp-sans-compte summary{cursor:pointer;color:var(--txt-doux);font-size:.9rem;text-decoration:underline;text-underline-offset:3px;
  min-height:var(--cible,44px);display:flex;align-items:center}
.esp-sans-compte[open] summary{margin-bottom:10px}
.esp-console{width:100%;justify-content:center;margin-bottom:14px}

/* Le profil connecté : l'email est un identifiant, il se change par lien. */
.pf-lab{display:block;font-size:.8125rem;font-weight:600;color:var(--txt-doux);margin-bottom:6px}
.pf-email-fixe{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--verre-bord,rgba(255,255,255,.1));border-radius:var(--r-s,12px)}
.pf-email-fixe b{color:#fff;font-weight:600;overflow-wrap:anywhere}
.pf-email-neuf{margin:10px 0 4px;padding:12px;border-radius:var(--r-s,12px);background:rgba(255,255,255,.03)}

/* Les états d'une course : couleurs calmes, jamais de rouge. */
.ec-payee{color:var(--or-clair);background:rgba(203,162,75,.14);border:1px solid rgba(203,162,75,.32)}
.ec-confirmee{color:#bfe8d1;background:rgba(46,158,107,.16);border:1px solid rgba(95,211,155,.35)}
.ec-attente{color:#f0d9a8;background:rgba(232,176,75,.12);border:1px solid rgba(232,176,75,.3)}
.ec-annulee{color:var(--txt-faible,rgba(244,241,234,.6));background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.ec-voiture-zone{margin-top:12px}

/* Le fil avec Movely. */
.fil{list-style:none;margin:4px 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.fil li{display:flex;flex-direction:column;max-width:88%}
.fil-moi{align-self:flex-end;align-items:flex-end}
.fil-movely{align-self:flex-start}
.fil-bulle{padding:10px 13px;border-radius:16px;font-size:.92rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.fil-moi .fil-bulle{background:rgba(203,162,75,.18);color:#fff;border-bottom-right-radius:5px}
.fil-movely .fil-bulle{background:rgba(255,255,255,.07);color:var(--txt);border-bottom-left-radius:5px}
.fil-meta{margin-top:4px;font-size:.75rem;color:var(--txt-faible,rgba(244,241,234,.6))}


/* La pause des réservations payées (console). */
.paie-pause{margin:0 0 10px;padding:10px 12px;border-radius:var(--r-s,12px);font-size:.875rem;line-height:1.5;
  color:#f0d9a8;background:rgba(232,176,75,.1);border:1px solid rgba(232,176,75,.28)}
.paie-alerte{margin:0 0 12px;padding:10px 12px;border-radius:var(--r-s,12px);font-size:.875rem;line-height:1.5;
  color:#f0d9a8;background:rgba(232,176,75,.1);border:1px solid rgba(232,176,75,.28)}

/* ---------- Votre voiture : après la réservation ---------- */
.vt{margin:22px 0 4px;padding:18px;border:1px solid rgba(203,162,75,.28);border-radius:var(--r-m,18px);
  background:linear-gradient(180deg,rgba(203,162,75,.06),rgba(255,255,255,.015));text-align:left}
.vt-sur{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--or)}
.vt-tete h3{margin:4px 0 0;font-family:"Fraunces",serif;font-weight:500;font-size:1.35rem;color:#fff;line-height:1.2}
.vt-desc{margin:6px 0 0;font-size:.9rem;color:var(--txt-doux);line-height:1.5}
.vt-galerie{display:flex;gap:10px;margin:14px -18px 0;padding:0 18px 6px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-left:18px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.vt-vue{flex:0 0 min(78%,340px);margin:0;scroll-snap-align:start;border-radius:var(--r-s,12px);overflow:hidden;background:#0b1016}
.vt-vue img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.vt-vue figcaption{padding:7px 10px;font-size:.8rem;color:var(--txt-doux)}
.vt-compact{padding:14px;margin-top:14px}
.vt-compact .vt-galerie{margin:10px -14px 0;padding:0 14px 4px;scroll-padding-left:14px}
.vt-compact .vt-vue{flex-basis:min(62%,220px)}
.vt-compact .vt-tete h3{font-size:1.1rem}
.vt-atouts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.vt-atouts li{display:grid;grid-template-columns:22px 1fr;column-gap:10px;align-items:start}
.vt-atouts .ic{width:20px;height:20px;stroke:var(--or-clair);grid-row:1 / 3;margin-top:2px}
.vt-atouts b{color:#fff;font-size:.92rem}
.vt-atouts span{font-size:.85rem;color:var(--txt-doux)}
.vt-note{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:.85rem;color:var(--txt-doux);line-height:1.5}
.vt-note .ic{width:16px;height:16px;flex:none;margin-top:2px;stroke:var(--or-clair)}
.vt-sans{display:flex;gap:12px;align-items:center;margin-top:12px;padding:14px;border-radius:var(--r-s,12px);background:rgba(255,255,255,.04)}
.vt-sans .ic{width:28px;height:28px;stroke:var(--or-clair);flex:none}
.vt-sans b{display:block;color:#fff}
.vt-sans span{display:block;font-size:.85rem;color:var(--txt-doux)}

/* Écran étroit : le libellé « Mes courses » mangeait le prénom. Le chevron
   reste, et toute la ligne d'en-tête devient la cible, comme une rangée iOS. */
@media(max-width:420px){
  .ap-lien{min-width:28px;justify-content:flex-end;padding:0 4px}
  .ap-lien-mot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .ap-lien::after{content:"";position:absolute;inset:0}
  .ap-lien .ic{width:16px;height:16px;color:var(--txt-faible,rgba(244,241,234,.55))}
}


/* =====================================================================
   FAÇON APPLE (14/10/2026, 22h) — menu, étiquettes, réassurance,
   mention d'image, contact. Grille de 4 px ; textes 28/36, 17/24, 15/20,
   13/18 ; icônes 16 à 32 ; une couleur d'accent, l'or clair.
   ===================================================================== */

/* ---------- Le menu ----------
   Il glisse et s'éclaire au lieu de se déplier ; les liens arrivent l'un
   après l'autre, en grand ; le compte et le téléphone viennent après un
   filet, plus petits. La page derrière se voile et ne défile plus. */
.nav-v2 .nav-links{
  position:absolute;left:0;right:0;top:100%;display:block;padding:0;
  background:rgba(6,8,12,.96);-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  border:0;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 24px 48px rgba(0,0,0,.45);
  max-height:calc(100dvh - 64px);overflow:hidden auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;transform:translateY(-8px);
  transition:opacity .2s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s;
}
.nav-v2 .nav-links.on{visibility:visible;opacity:1;transform:none;max-height:calc(100dvh - 64px);transition-delay:0s}
.nl{box-sizing:border-box;max-width:var(--maxw,1180px);margin:0 auto;padding:12px 24px 32px}
.nl-liens{list-style:none;margin:0;padding:0}
.nl-liens li{opacity:0;transform:translateY(-6px);transition:opacity .28s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.nav-links.on .nl-liens li{opacity:1;transform:none}
.nav-links.on .nl-liens li:nth-child(1){transition-delay:.03s}
.nav-links.on .nl-liens li:nth-child(2){transition-delay:.06s}
.nav-links.on .nl-liens li:nth-child(3){transition-delay:.09s}
.nav-links.on .nl-liens li:nth-child(4){transition-delay:.12s}
.nav-links.on .nl-liens li:nth-child(5){transition-delay:.15s}
.nav-links.on .nl-liens li:nth-child(6){transition-delay:.18s}
header.nav .nav-links .nl-liens a{
  display:block;width:auto;max-width:none;margin:0;padding:6px 0;min-height:0;border:0;background:none;
  font-size:28px;line-height:36px;font-weight:600;letter-spacing:-.015em;color:#f4f1ea;
}
header.nav .nav-links .nl a::after{display:none}
@media(hover:hover){ header.nav .nav-links .nl-liens a:hover{color:var(--or-clair);background:none} }
.nl-second{display:grid;gap:0;margin-top:24px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
header.nav .nav-links .nl-second a,header.nav .nav-links .nl-second button{
  display:flex;align-items:center;gap:12px;width:auto;max-width:none;margin:0;padding:10px 0;min-height:44px;
  border:0;border-radius:0;background:none;text-align:left;font-family:inherit;
  font-size:17px;line-height:24px;font-weight:500;letter-spacing:-.005em;color:rgba(244,241,234,.78);
}
header.nav .nav-links .nl-second .nav-tel{color:var(--or-clair);font-weight:500}
.nl-second a::before,.nl-second button::before{content:"";width:20px;height:20px;flex:none;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.nl-second .espace-lien-m{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5'/%3E%3C/svg%3E")}
.nl-second .nav-tel{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.6l1.4 4-1.9 1.3a11 11 0 006.5 6.5l1.3-1.9 4 1.4v2.6a2 2 0 01-2.1 2A15.9 15.9 0 014.6 5.6a2 2 0 012-2.1z'/%3E%3C/svg%3E")}
@media(hover:hover){ header.nav .nav-links .nl-second a:hover,header.nav .nav-links .nl-second button:hover{color:#fff} }
/* La page derrière : voilée, figée. Un clic dessus referme (config.js). */
html.menu-ouvert{overflow:hidden}
html.menu-ouvert body::after{content:"";position:fixed;inset:0;z-index:55;background:rgba(6,8,12,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:mv-voile .2s ease both}
@keyframes mv-voile{from{opacity:0}to{opacity:1}}
@media(min-width:900px){
  .nl{padding:24px 26px 40px}
  header.nav .nav-links .nl-liens a{font-size:24px;line-height:32px;padding:6px 0}
}
@media(max-width:640px){
  .nav-v2 .nav-links.on{min-height:calc(100dvh - 64px)}
  .nl{padding:8px 20px 32px}
}
@media(prefers-reduced-motion:reduce){
  .nav-v2 .nav-links,.nl-liens li{transition-duration:.12s}
  .nl-liens li,.nav-v2 .nav-links{transform:none}
}

/* ---------- Les étiquettes de section ----------
   Plus de tiret ni de capitales espacées : un mot en or, en demi-gras,
   au-dessus du titre, comme sur les pages produit d'Apple. */
.mention,.eyebrow{
  display:inline-flex;align-items:center;gap:0;margin-bottom:12px;
  font-family:"Inter",system-ui,sans-serif;font-size:15px;line-height:20px;font-weight:600;
  letter-spacing:-.005em;text-transform:none;color:var(--or-clair)
}
.mention::before,.mention:before{display:none}
@media(min-width:900px){ .mention,.eyebrow{font-size:17px;line-height:24px} }

/* ---------- La réassurance du hero ----------
   Trois engagements, chacun avec son pictogramme, sous un filet. */
.hero-rassure{display:flex;flex-wrap:wrap;gap:8px 24px;margin:24px 0 0;padding:16px 0 0;list-style:none;
  border-top:1px solid rgba(255,255,255,.08);max-width:720px}
.hero-rassure li{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:18px;color:var(--txt-doux)}
.hero-rassure li .ic{width:16px;height:16px;flex:none;stroke:var(--or-clair)}
.hero-rassure span::before{display:none}
@media(max-width:640px){
  .hero-rassure{display:grid;gap:10px;margin-top:20px}
}

/* ---------- La mention d'image ----------
   Une légende, pas un tampon : minuscules, discrète, au coin de l'image. */
.hero-mention{right:24px;bottom:16px;font-size:11px;line-height:16px;letter-spacing:0;text-transform:none;
  color:rgba(244,241,234,.58)}
@media(max-width:640px){ .hero-mention{right:16px;bottom:12px} }

/* ---------- Le contact : une liste groupée ---------- */
.bc-liste{display:block;margin-top:28px;max-width:520px;border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.bc-ligne{box-sizing:border-box;position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) 14px;align-items:center;column-gap:12px;
  min-height:60px;padding:10px 16px;color:var(--txt);text-decoration:none;transition:background-color .15s ease}
.bc-ligne + .bc-ligne::before{content:"";position:absolute;top:0;left:60px;right:0;height:1px;background:rgba(255,255,255,.08)}
.bc-ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:rgba(203,162,75,.14)}
.bc-ic .ic{width:18px;height:18px;stroke:var(--or-clair)}
.bc-txt{min-width:0}
.bc-txt b,.bc-txt span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-txt b{font-size:15px;line-height:20px;font-weight:600;color:#fff}
.bc-txt span{margin-top:2px;font-size:13px;line-height:18px;color:var(--txt-doux)}
.bc-chev{width:14px;height:14px;stroke:var(--txt-faible,rgba(244,241,234,.55));stroke-width:2;transform:rotate(-90deg)}
@media(hover:hover){ .bc-ligne:hover{background:rgba(255,255,255,.04)} }
.bc-ligne:active{background:rgba(255,255,255,.07)}
.bc-ligne:focus-visible{outline-offset:-3px !important}

/* Retouches après les captures (22h55). */
@media(min-width:901px){ header.nav .nav-links .nl-second .espace-lien-m{display:none} }   /* la barre porte déjà le compte */
@media(max-width:640px){ .nav-v2 .nav-links,.nav-v2 .nav-links.on{max-height:calc(100dvh - 72px)} .nav-v2 .nav-links.on{min-height:calc(100dvh - 72px)} }
/* « ou nous appeler » : un lien texte en or avec son chevron, sans trait
   souligné qui doublait le filet de la réassurance. */
.hero-v2 .hero-cta .lien-suite{border:0;text-decoration:none;padding:0;min-height:44px;font-size:15px;line-height:20px;font-weight:500;color:var(--or-clair)}
.hero-v2 .hero-cta .lien-suite::after{content:"\203A";margin-left:6px;font-size:18px;line-height:1;transform:translateY(-1px)}
@media(hover:hover){ .hero-v2 .hero-cta .lien-suite:hover{color:#fff} }

/* Les avis publiés (assets/avis.js) : la note moyenne à partir de 10 avis, la réponse de Movely. */
.avis-moyenne{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;font-size:.9375rem;color:var(--txt-doux)}
.avis-moyenne b{color:#fff;font-weight:600}
.avis-reponse{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:rgba(203,162,75,.08);font-size:.85rem;line-height:1.5;color:var(--txt-doux)}
.avis-reponse b{display:block;color:var(--or-clair);font-size:.78rem;margin-bottom:2px}

/* ---------- Movely Affaires dans l'espace (compte.js > blocAffaires) ---------- */
.af{margin:16px 0 0;padding:16px;border-radius:16px;background:rgba(203,162,75,.06);border:1px solid rgba(203,162,75,.28)}
.af-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:8px}
.af-tete b{font-family:"Fraunces",serif;font-weight:500;font-size:1.15rem;color:#fff}
.af-tete span{font-size:.8rem;color:var(--txt-doux)}
.af-badge{flex-basis:100%;font-size:.72rem!important;font-weight:600;color:var(--or-clair)!important}
.af-avantages{margin:8px 0 12px;padding-left:18px;font-size:.85rem;line-height:1.55;color:var(--txt-doux)}
.af-formules{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.af-formule{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;border:1px solid var(--verre-bord);background:rgba(255,255,255,.03);color:var(--txt);text-align:left;cursor:pointer;font:inherit}
.af-formule:hover{border-color:var(--or-clair)}
.af-formule b{font-weight:600}
.af-formule span{font-family:"Fraunces",serif;font-size:1.25rem;color:var(--or-clair)}
.af-formule small{font-size:.75rem;color:var(--txt-doux)}
.af-h{margin:16px 0 6px;font-size:.8rem;font-weight:600;color:var(--or-clair)}
.af-liste{list-style:none;margin:0;padding:0}
.af-liste li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;border-top:1px solid var(--verre-bord);font-size:.85rem;color:var(--txt-doux);overflow-wrap:anywhere}
.af-liste li:first-child{border-top:0}
.af-liste i{font-style:normal;color:var(--or-clair);font-size:.75rem}
.af-ajout{display:flex;gap:8px;margin-top:8px}
.af-ajout input{flex:1;min-width:0;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid var(--verre-bord);background:rgba(255,255,255,.04);color:var(--txt);font:inherit}
.esp-lien{margin-top:12px;background:none;border:0;padding:8px 0;min-height:44px;color:var(--txt-doux);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;font-size:.82rem}
.af-msg:empty{display:none}
.paie-case{display:flex;align-items:center;gap:8px;min-height:44px;font-size:.88rem;color:var(--txt-doux);cursor:pointer}
.paie-case input{width:18px;height:18px;accent-color:var(--or)}
.paie-invite-champs{display:grid;gap:8px;margin-top:4px}

/* =====================================================================
   15/10/2026 — L'accueil façon application (assets/vitrine.js)
   Feuilles qui montent du bas, carrousel qui avance seul, scène du
   véhicule, réglages en liste groupée. Grille de 4 px, cibles de 44 px.
   ===================================================================== */

/* ---------- La feuille ---------- */
html.vt-fige,html.vt-fige body{overflow:hidden}
.vt-voile{position:fixed;inset:0;z-index:1200;background:rgba(3,5,8,.56);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
.vt-voile.on{opacity:1}
.vt-voile[hidden],.vt-feuille[hidden]{display:none}
.vt-feuille{position:fixed;left:0;right:0;bottom:0;z-index:1201;margin:0 auto;padding:0;max-width:600px;
  max-height:min(92dvh,880px);display:flex;flex-direction:column;
  background:#0E131C;color:var(--txt);border:1px solid rgba(255,255,255,.10);border-bottom:0;
  border-radius:24px 24px 0 0;box-shadow:0 -24px 64px rgba(0,0,0,.5);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,0,1)}
.vt-feuille.on{transform:translateY(0)}
@media(min-width:768px){
  .vt-feuille{bottom:24px;border-bottom:1px solid rgba(255,255,255,.10);border-radius:24px;max-height:calc(100dvh - 48px)}
  .vt-feuille:not(.on){transform:translateY(calc(100% + 32px))}
}
.vt-poignee{flex:none;height:24px;display:grid;place-items:center;cursor:grab;touch-action:none}
.vt-poignee span{width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.28)}
.vt-tete{flex:none;display:flex;align-items:center;gap:12px;padding:0 12px 12px 20px}
.vt-tete h2{flex:1;margin:0;font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.375rem;line-height:1.25;color:#fff}
.vt-fermer{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);
  color:var(--txt);font:inherit;font-size:.9375rem;cursor:pointer;display:grid;place-items:center}
.vt-fermer:active{transform:scale(.94)}
.vt-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:0 20px calc(24px + env(safe-area-inset-bottom))}
.vt-image{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;margin:0 0 16px}
.vt-texte{margin:0 0 20px;font-size:1.0625rem;line-height:1.5;color:var(--txt)}
.vt-action{width:100%;justify-content:center}
/* Ce qu'on range dans la feuille perd son habit de carte. */
.vt-feuille form.book{background:transparent!important;border:0!important;padding:0;border-radius:0;box-shadow:none!important}
.vt-feuille .pays{background:transparent!important;border:0!important;padding:0}
.vt-feuille .pay{min-height:64px}
.vt-feuille .zone-explain{background:transparent!important;border:0!important;padding:0;display:block}
.vt-feuille .zone-explain .eyebrow{display:none}
.vt-feuille .ze-list{margin-top:16px}
@media(prefers-reduced-motion:reduce){
  .vt-feuille{transition-duration:.2s}
  .vt-feuille:not(.on){transform:translateY(24px)}
}

/* ---------- Le carrousel des missions ---------- */
.mission-rail{scroll-padding-inline:calc((100vw - min(var(--maxw),100vw - 48px))/2)}
.mcard{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mcard:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px}
.mcard-img img{transition:transform 6s cubic-bezier(.2,.8,.2,1),filter .6s ease}
.mcard.actif .mcard-img img{transform:scale(1.08);filter:saturate(1) brightness(1)}
@media(max-width:767px){
  .mcard{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s ease,border-color .3s ease}
  .mcard:not(.actif){transform:scale(.95);opacity:.6}
}
.rail-points{display:flex;justify-content:center;gap:2px;margin-top:4px}
.rail-points button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.rail-points button::before{content:"";display:block;width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.28);
  transition:width .35s cubic-bezier(.2,.8,.2,1),background-color .35s ease}
.rail-points button[aria-selected="true"]::before{width:20px;background:var(--or-clair)}
@media(prefers-reduced-motion:reduce){
  .mcard-img img{transition-duration:.6s}
  .mcard.actif .mcard-img img{transform:none}
}

/* ---------- La demande écrite, rangée ---------- */
#booking-form.book-range{display:none}
.book-carte{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;
  padding:20px;border-radius:20px;background:linear-gradient(165deg,rgba(203,162,75,.14),rgba(203,162,75,.03));
  border:1px solid rgba(203,162,75,.32)}
.book-carte-ic{width:48px;height:48px;border-radius:14px;background:rgba(203,162,75,.16);display:grid;place-items:center}
.book-carte-ic .ic{width:24px;height:24px;stroke:var(--or-clair)}
.book-carte b{display:block;font-size:1.0625rem;line-height:1.4;color:#fff}
.book-carte span{display:block;margin-top:4px;font-size:.9375rem;line-height:1.45;color:var(--txt-doux)}
.book-carte .btn{grid-column:1/-1;width:100%;justify-content:center}

/* ---------- L'estimateur : la carte et le prix restent en vue ---------- */
.detail-grid.e-grille{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-top:16px}
.e-grille > *,.e-grille .e-droite > *{min-width:0}
.e-q input{min-width:0}
.e-grille .e-droite{display:contents}
.e-grille .estim-map-wrap{order:1;margin-top:0;height:clamp(240px,38vh,340px)}
.e-grille .map-phrase{order:2;margin:-4px 4px 0}
.e-grille .map-legende{display:none}   /* la phrase sous la carte le dit déjà */
.e-grille .e-reglages{order:3}
.e-grille .result-col{order:4;position:relative;top:auto}
@media(min-width:1024px){
  .detail-grid.e-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
  .e-grille .e-droite{display:flex;flex-direction:column;gap:16px;position:sticky;top:88px}
  .e-grille .e-reglages{order:0}   /* à gauche les réglages, à droite la carte et le prix */
  .e-grille .estim-map-wrap{height:clamp(260px,34vh,360px)}
}
.e-grille .e-reglages{padding:16px}
@media(min-width:768px){ .e-grille .e-reglages{padding:20px} }
.e-pourquoi{background:none;border:0;padding:0;margin-left:4px;font:inherit;font-weight:600;cursor:pointer;min-height:24px}

/* La scène du véhicule : une grande image qui se glisse, le nom dessous. */
.veh-scene{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.veh-scene:empty{display:none}
.vs-photo{position:relative;margin:0;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#0b1016}
.vs-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%;pointer-events:none}
.vs-sans{background:radial-gradient(120% 100% at 50% 0%,rgba(203,162,75,.22),rgba(203,162,75,0) 62%),linear-gradient(180deg,#121926,#0a0e15)}
.vs-ico{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:24px;
  background:rgba(203,162,75,.12);border:1px solid rgba(203,162,75,.28);display:grid;place-items:center}
.vs-ico .ic{width:40px;height:40px;stroke:var(--or-clair);stroke-width:1.4}
.vs-mention{position:absolute;left:0;right:0;bottom:16px;text-align:center;padding:0 24px;font-size:.8125rem;line-height:1.4;color:var(--txt-doux)}
.vs-txt{padding:12px 2px 0}
.vs-sur{display:block;font-size:.8125rem;font-weight:600;color:var(--or-clair)}
.vs-txt h3{margin:2px 0 0;font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.5rem;line-height:1.2;color:#fff}
.vs-txt p{margin:4px 0 0;font-size:.9375rem;line-height:1.4;color:var(--txt-doux)}
.vs-faits{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0}
.vs-faits li{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:14px;
  background:rgba(255,255,255,.07);font-size:.8125rem;font-weight:600;color:var(--txt)}
.vs-faits .ic{width:14px;height:14px;stroke:var(--or-clair)}
.vs-nav{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;gap:2px;padding:2px;border-radius:24px;
  background:rgba(6,8,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.vs-nav button{width:40px;height:40px;border-radius:50%;border:0;background:none;color:#fff;font:inherit;font-size:1.375rem;line-height:1;cursor:pointer}
.vs-nav button:active{background:rgba(255,255,255,.14)}
.vs-compte{min-width:36px;text-align:center;font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums}
@keyframes vs-de-droite{from{opacity:0;transform:translateX(28px)}}
@keyframes vs-de-gauche{from{opacity:0;transform:translateX(-28px)}}
@keyframes vs-fondu{from{opacity:.2}}
.veh-scene.vs-d .vs-photo img,.veh-scene.vs-d .vs-txt{animation:vs-de-droite .42s cubic-bezier(.2,.8,.2,1) both}
.veh-scene.vs-g .vs-photo img,.veh-scene.vs-g .vs-txt{animation:vs-de-gauche .42s cubic-bezier(.2,.8,.2,1) both}
.veh-scene.vs-d .vs-ico,.veh-scene.vs-g .vs-ico{animation:vs-fondu .42s ease both}

/* Les véhicules en pastilles : une vignette ronde et un nom. */
.e-reglages .veh-rail{background:transparent!important;border:0!important;padding:12px 0 4px;gap:8px;margin:0;scroll-snap-type:x proximity}
.e-reglages .veh{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 16px 6px 6px;
  border-radius:26px!important;border:1px solid var(--verre-bord)!important;background:rgba(255,255,255,.04)!important;cursor:pointer;transform:none}
.e-reglages .veh.on{border-color:var(--or)!important;background:rgba(203,162,75,.14)!important;box-shadow:none}
.e-reglages .veh-photo{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:rgba(203,162,75,.12)}
.e-reglages .veh-sans{width:100%;height:100%;min-height:0;display:grid;place-items:center;padding:0;border:0;background:none}
.e-reglages .veh-sans span{display:none}
.e-reglages .veh-sans .ic{width:20px;height:20px;opacity:1;stroke:var(--or-clair)}
.e-reglages .veh-body{padding:0}
.e-reglages .veh-body .vn{font-size:.9375rem;line-height:1.25;white-space:nowrap}
.e-reglages .veh-body .vx,.e-reglages .veh-body .vp{display:none}

/* Les réglages : une liste groupée, comme sur un iPhone. */
.e-liste{margin-top:12px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--verre-bord);overflow:hidden}
.e-liste .e-ligne{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:60px;margin:0;padding:10px 14px;
  background:transparent;border:0;border-radius:0;color:var(--txt);font:inherit;text-align:left;cursor:default}
.e-liste button.e-ligne,.e-liste label.e-ligne{cursor:pointer}
.e-liste .e-ligne.sheet-open{margin:0;background:transparent!important;border:0!important;border-radius:0;color:var(--txt)!important}
.e-liste .e-ligne:not(:first-child)::before{content:"";position:absolute;top:0;left:58px;right:0;height:1px;background:var(--verre-bord)}
.e-liste button.e-ligne:active,.e-liste label.e-ligne:active{background:rgba(255,255,255,.05)!important}
.e-ligne-ic{flex:none;width:32px;height:32px;border-radius:9px;background:rgba(203,162,75,.14);display:grid;place-items:center}
.e-ligne-ic .ic{width:18px;height:18px;stroke:var(--or-clair)}
.e-ligne-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.e-ligne-txt b{font-size:.9375rem;line-height:1.35;font-weight:600;color:#fff}
.e-ligne-txt span{font-size:.8125rem;line-height:1.35;color:var(--txt-doux)}
.e-liste .e-chev{flex:none;width:16px;height:16px;transform:rotate(-90deg);stroke:var(--txt-faible)}
.e-liste .so-right{display:flex;align-items:center;gap:8px;color:var(--txt-doux)}
.e-liste .so-right b{color:var(--or-clair);font-size:.875rem}
.e-ligne-txt .tc-tag{align-self:flex-start;margin-top:6px;padding:2px 8px;border-radius:6px;font-size:.75rem;font-weight:700;color:var(--txt)}
.e-ligne-txt .tc-tag.good{color:#9FDDB6}
.e-ligne-txt .tc-tag:empty{display:none}
/* Date et heure : deux lignes, le libellé à gauche, la valeur à droite. */
.e-quand-champs{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.e-q{display:flex;align-items:center;justify-content:space-between;gap:12px}
.e-q label{margin:0;font-size:.9375rem;font-weight:600;color:#fff}
.detail-col .e-q input{width:auto;min-width:0;max-width:62%;min-height:40px;padding:6px 10px;border-radius:10px;font-size:.9375rem;text-align:right}
.e-pas{flex:none;display:flex;align-items:center;border-radius:12px;background:rgba(255,255,255,.08)}
.e-pas button{width:44px;height:40px;border:0;background:none;color:#fff;font:inherit;font-size:1.25rem;line-height:1;cursor:pointer;border-radius:12px}
.e-pas button:active{background:rgba(255,255,255,.12)}
.e-pas button:disabled{opacity:.3;cursor:default}
.e-pas output{min-width:24px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;color:#fff}
.detail-col select.e-pax-cache{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;
  border:0!important;opacity:0;pointer-events:none;clip:rect(0 0 0 0);overflow:hidden}
.e-liste .pax-alerte{margin:0 14px 10px}
/* L'interrupteur, comme sur iOS. */
.detail-col input.e-switch[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:51px;height:31px;margin:0;
  border-radius:16px;background:rgba(255,255,255,.18);cursor:pointer;transition:background-color .25s ease}
.detail-col input.e-switch[type=checkbox]::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.detail-col input.e-switch[type=checkbox]:checked{background:var(--or)}
.detail-col input.e-switch[type=checkbox]:checked::before{transform:translateX(20px)}
.detail-col input.e-switch[type=checkbox]:focus-visible{outline:2px solid var(--or-clair);outline-offset:2px}
.e-pay-source{display:none}

/* Le prix vide : une ligne calme, pas un grand cadre. */
.e-grille .result-empty{background:transparent!important;border:0!important;display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 14px;align-items:center;text-align:left;padding:4px}
.e-grille .result-empty .re-ico{grid-row:1/3;margin:0;width:48px;height:48px;border-radius:14px;background:rgba(203,162,75,.12);display:grid;place-items:center;opacity:1}
.e-grille .result-empty .re-ico .ic{width:24px!important;height:24px!important;stroke:var(--or-clair)}
.e-grille .result-empty b{margin:0;font-size:1rem}
.e-grille .result-empty span{margin:0;max-width:none;font-size:.875rem;line-height:1.45}
.e-grille .result-empty.off{display:none}
/* Une carte de mission se lit d'un coup d'œil : l'image dit déjà le métier, le texte entier s'ouvre au toucher. */
.mcard:has(.mcard-img) .mico{display:none}
.mcard p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
@media(min-width:768px){ .mcard p{-webkit-line-clamp:4;line-clamp:4} }
/* Restes du thème clair sous le prix : texte encre sur fond nuit, illisible. */
.trip-meta b{color:#fff}
.price-tag{color:var(--or-clair)}
@media(min-width:600px){ .vs-photo{width:100%;max-height:340px} }   /* largeur imposée : sinon le plafond de hauteur rétrécit aussi la photo */
/* Le visiteur voit toujours où se connecter : une silhouette dans la barre, à la place de l'avatar du client. */
.nav-v2 .nav-cta .espace-lien.visiteur{display:inline-flex;align-items:center;gap:8px;min-height:var(--cible,44px)}
.espace-lien .el-ic{width:18px;height:18px;stroke:currentColor;flex:none}
@media(max-width:900px){
  .nav-v2 .nav-cta .espace-lien.visiteur{width:var(--cible,44px);height:var(--cible,44px);padding:0;border-radius:50%;justify-content:center}
  .nav-v2 .nav-cta .espace-lien.visiteur .el-nom{display:none}
}
@media(max-width:374px){
  html.nav-compte .nav-v2 .nav-cta .nav-appel{display:none}   /* le téléphone reste dans le menu */
}

/* ===== Cycle 1 (15/10, 02h) : ce que le parcours écran par écran a montré ===== */
/* Le code Movely : sur téléphone, un accordéon (vitrine.js pose .accordeon). */
.code-liste .c-corps{grid-column:2;grid-row:2}
.code-liste.accordeon{margin-top:var(--e5)}
.code-liste.accordeon li{grid-template-columns:40px minmax(0,1fr);gap:0 12px;padding:4px 0;align-items:center}
.code-liste.accordeon .c-num{grid-row:1;font-size:1.375rem}
.code-liste.accordeon h3{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;margin:0;
  font-size:1.25rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.code-liste.accordeon h3::after{content:"";flex:none;width:9px;height:9px;margin-right:6px;border-right:2px solid var(--or-clair);
  border-bottom:2px solid var(--or-clair);transform:rotate(45deg);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.code-liste.accordeon li.ouvert h3::after{transform:rotate(-135deg)}
.code-liste.accordeon h3:focus-visible{outline:2px solid var(--or-clair);outline-offset:4px;border-radius:6px}
.code-liste.accordeon .c-corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}
.code-liste.accordeon li.ouvert .c-corps{grid-template-rows:1fr}
.code-liste.accordeon .c-corps > div{overflow:hidden;min-height:0}
.code-liste.accordeon .c-corps p{padding:0 0 16px}
@media(prefers-reduced-motion:reduce){ .code-liste.accordeon .c-corps{transition-duration:.15s} }

/* Le Club : le paiement derrière un lien, expliqué dans une feuille. */
.club-paiement{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:0;background:none;border:0;font:inherit;font-weight:600;cursor:pointer}
.vt-feuille .pay-rail{margin-bottom:16px}
.vt-feuille .pay-note{margin:0;color:var(--txt-doux);font-size:.9375rem;line-height:1.55}

/* L'avis « vérifié » : l'icône reste à côté de son texte. */
.proof-src{flex-wrap:nowrap;align-items:flex-start;gap:12px}
.proof-src > .ic{flex:none;margin-top:1px}

/* Le pied de page : des colonnes, un lien par ligne. */
footer .foot-grid > div{display:flex;flex-direction:column;align-items:flex-start}
@media(min-width:901px){ .foot-grid{grid-template-columns:2fr 1fr 1fr 1fr} }

/* Le bandeau final : créer son espace (un email, puis le portail). Masqué pour un client connecté. */
.espace-capture{display:flex;gap:10px;flex-wrap:wrap;width:100%;max-width:520px}
#espace-capture input{flex:1 1 220px;min-width:0;min-height:48px;padding:0 16px;border:0 !important;border-radius:14px;
  background:rgba(255,255,255,.9) !important;color:#120d02 !important;font:inherit;font-size:1rem}
#espace-capture input::placeholder{color:rgba(18,13,2,.55)}
.espace-capture input:focus-visible{outline:2px solid #120d02;outline-offset:2px}
.espace-capture .btn{min-height:48px}
html.client-connecte .capture-band{display:none}
/* Sur grand écran, les cinq règles tiennent sur deux colonnes : la moitié de la hauteur. */
@media(min-width:1024px){
  .code-liste{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;max-width:1120px}
  .code-liste li{grid-template-columns:64px 1fr;gap:var(--e3)}
  .code-liste li:nth-last-child(2){border-bottom:1px solid rgba(255,255,255,.09)}
  .code-liste .c-num{font-size:2rem}
}
/* La carte du Club : dix cases, trois tamponnées pour l'exemple. */
.loy-tampons{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:260px;margin:14px 0 6px}
.loy-tampons i{aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(232,201,126,.4);display:grid;place-items:center;font-style:normal}
.loy-tampons i.plein{border:0;background:radial-gradient(circle at 35% 30%,#F0D48F,#CBA24B 70%)}
.loy-tampons i.der{border-style:solid;border-color:rgba(232,201,126,.65);font-size:.6875rem;font-weight:700;color:var(--or-clair)}
.paie-remise[hidden]{display:none}   /* le display de la classe gagnait sur [hidden] : lignes de crédit vides chez un visiteur */

/* Un élément marqué hidden reste caché, quel que soit le display de sa classe (piège récurrent, 15/10). */
[hidden]{display:none !important}
/* Le carrousel : une seule ligne de commande, centrée (‹ points ›). Flèches dès 700 px. */
.rail-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px}
.rail-nav .rail-points{margin-top:0}
.rail-nav #mission-prev,.rail-nav #mission-next{display:none;width:44px;height:44px;border-radius:50%;background:var(--verre);
  border:1px solid var(--verre-bord);color:#fff;font:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
.rail-nav #mission-prev[disabled],.rail-nav #mission-next[disabled]{opacity:.32;cursor:default}
@media(min-width:700px){ .rail-nav #mission-prev,.rail-nav #mission-next{display:inline-grid;place-items:center} }
@media (hover:hover){ .rail-nav #mission-prev:not([disabled]):hover,.rail-nav #mission-next:not([disabled]):hover{border-color:var(--or);color:var(--or-clair)} }
.zone-lien{display:inline-flex;margin-top:12px;font-size:.9375rem}
/* Contraste mesuré (15/10, 03h) : chaque texte au-dessus de 4,5:1. */
.e-grille .result-empty span{color:rgba(244,241,234,.74)}
@media(max-width:767px){
  .mcard:not(.actif){opacity:.9}                                   /* 0,6 faisait tomber le texte à 3,1:1 */
  .mcard:not(.actif) .mcard-img img{filter:saturate(.8) brightness(.7)}   /* l'image porte la mise en retrait */
}
.mcard-sur-mesure .lien-or{color:#F2DA9C}
/* Le badge de la carte : sur les tuiles claires, un fond nuit opaque, sinon le texte disparaît (1,1:1 mesuré). */
.estim-map-wrap .map-badge{background:rgba(10,14,21,.9) !important;border-color:rgba(255,255,255,.12) !important;color:#fff !important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#e-price small{color:rgba(244,241,234,.74)}
button.lien-discret{background:none;border:0;padding:0;font:inherit;cursor:pointer}
/* Sur téléphone, l'inversion départ/arrivée est un petit rond posé entre les deux champs, pas une ligne entière. */
@media(max-width:700px){
  .search-row .swap-btn{position:relative;z-index:2;align-self:flex-end;width:36px !important;height:36px !important;min-height:36px !important;min-width:36px;margin:-23px 64px -23px 0;
    padding:0;border-radius:50% !important;background:#151B27 !important;border:1px solid var(--verre-bord) !important;font-size:1rem;line-height:1}
}
/* Idem pour la carte « Préférez écrire ? » : l'icône au centre de sa tuile, sans la marge du texte. */
.book-carte .book-carte-ic{display:grid;place-items:center;margin-top:0}
/* La feuille « Options et services » prend l'allure des autres feuilles : poignée, fermeture sombre, interrupteurs. */
#e-sheet{background:#0E131C !important;border-radius:24px 24px 0 0}
#e-sheet .sheet-handle{width:36px;height:5px;background:rgba(255,255,255,.28)}
#e-sheet .sheet-close{width:44px;height:44px;background:rgba(255,255,255,.08) !important;color:var(--txt)}
#e-sheet .opts{background:rgba(255,255,255,.035) !important;border:1px solid var(--verre-bord) !important;border-radius:16px;overflow:hidden}
#e-sheet .opt{border-radius:0;border:0 !important;background:transparent !important}
#e-sheet .opt + .opt{border-top:1px solid var(--verre-bord) !important}
#e-sheet .opt input[type=checkbox]{-webkit-appearance:none;appearance:none;grid-column:4;grid-row:1/3;justify-self:end;flex:none;position:relative;width:51px;height:31px;margin:0 0 0 8px;
  border-radius:16px;background:rgba(255,255,255,.18);cursor:pointer;transition:background-color .25s ease}
#e-sheet .opt input[type=checkbox]::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
#e-sheet .opt input[type=checkbox]:checked{background:var(--or)}
#e-sheet .opt input[type=checkbox]:checked::before{transform:translateX(20px)}
#e-sheet .opt input[type=checkbox]:focus-visible{outline:2px solid var(--or-clair);outline-offset:2px}
#e-sheet .opt{grid-template-columns:auto minmax(0,1fr) auto auto;padding:12px 14px}
#e-sheet .opt .oi{grid-column:1;grid-row:1/3}
#e-sheet .opt .ol{grid-column:2;grid-row:1}
#e-sheet .opt .od{grid-column:2;grid-row:2}
#e-sheet .opt .op{grid-column:3;grid-row:1/3}
#e-sheet .opt:has(input:checked){background:rgba(203,162,75,.08) !important}
/* nuit.css impose un fond « !important » à tout input : les interrupteurs le reprennent, sinon cochés ils restent gris. */
.detail-col input.e-switch[type=checkbox],#e-sheet .opt input[type=checkbox]{background:rgba(255,255,255,.18) !important;border:0 !important}
.detail-col input.e-switch[type=checkbox]:checked,#e-sheet .opt input[type=checkbox]:checked{background:var(--or) !important}

/* ---------- Les arrêts en route (15/10) ---------- */
.e-arrets{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.e-arrets:empty{display:none}
.e-arret .sf-dot.dot-s{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:rgba(232,201,126,.16);
  color:var(--or-clair);font-size:.75rem;font-weight:700;flex:none}
.e-arret-x{flex:none;width:44px;height:44px;border:0;background:none;color:var(--txt-faible);font:inherit;font-size:1rem;cursor:pointer;border-radius:50%}
.e-arret-x:hover{color:#fff;background:rgba(255,255,255,.06)}
.e-arret-ajout{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;padding:0 4px;background:none;border:0;
  color:var(--or-clair);font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer}
.e-arret-ajout .ic{width:18px;height:18px;stroke:currentColor}
.pin.pin-s{background:#151B27;color:var(--or-clair);border:2px solid var(--or-clair);font-size:.75rem;font-weight:700}
.paie-arrets{display:block;margin-top:4px;font-size:.8125rem;color:var(--txt-doux)}
.e-arrets .search-field{flex:0 0 auto}   /* en colonne, la base de 230 px devenait une hauteur */

/* ===== Audit d'accessibilité (15/10, 08h45) ===== */
/* La barre du haut sur téléphone : le bouton menu gardait 24 px de large, écrasé par la place
   prise à droite. Il reste un rond de 44 px ; le logo rétrécit sans se déformer. */
header.nav-v2 .burger{flex:0 0 var(--cible,44px);width:var(--cible,44px)}
header.nav-v2 .nav-logo{flex:0 0 auto}
header.nav-v2 .nav-logo img{width:auto}
@media(max-width:430px){
  header.nav-v2 .nav-inner{gap:8px}
  header.nav-v2 .nav-cta{gap:6px}
  header.nav-v2 .nav-logo img{height:22px}
}
@media(max-width:389px){
  html.nav-compte .nav-v2 .nav-cta .nav-appel,html.client-connecte .nav-v2 .nav-cta .nav-appel{display:none}   /* le téléphone reste dans le menu et dans la barre du bas */
}
@media(max-width:359px){
  header.nav-v2 .nav-logo img{height:20px}
  header.nav-v2 .btn-nav{padding:9px 12px}
}
/* Feuilles et panneau fermés : hors de l'écran, ils restaient atteignables au clavier et au lecteur
   d'écran. Cachés une fois le glissement fini, visibles dès l'ouverture. */
.sheet,.espace{visibility:hidden;transition:transform .32s cubic-bezier(.3,.9,.3,1),visibility 0s linear .32s}
.sheet.on,.espace.on{visibility:visible;transition:transform .32s cubic-bezier(.3,.9,.3,1),visibility 0s}
/* Client connecté (le serveur pose html.accueil-attendu) : la coque de la carte « Bonjour » tient sa place
   pendant que le compte arrive, le titre ne saute plus. Hauteurs mesurées : 134 px, 126 px sur téléphone. */
html.accueil-attendu .accueil-perso:empty{display:block;min-height:134px}
@media(max-width:640px){ html.accueil-attendu .accueil-perso:empty{min-height:126px} }