/* ============================================================
   FRENCH CAB CAR — feuille de style principale
   Thème : nuit alpine, accent or unique, verrouillé sombre.
   ============================================================ */

:root{
  --bg:#070c14;
  --bg-2:#0c1420;
  --bg-3:#111c2c;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --txt:#eef3fa;
  --txt-2:#9aa9bd;
  --txt-3:#6b7d94;
  --gold:#d2a44e;
  --gold-2:#f0c877;
  --gold-soft:rgba(210,164,78,.14);
  --ok:#4ec98a;
  --radius:14px;
  --radius-sm:10px;
  --maxw:1280px;
  --nav-h:72px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}

/* L'attribut hidden doit l'emporter sur tout display: déclaré en CSS.
   Sans cela, #blocTransfert (display:grid) restait visible en mode
   « mise à disposition » et deux champs de départ s'affichaient. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font:400 16px/1.6 "Outfit","Helvetica Neue",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:600}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
img{max-width:100%;display:block}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Barre de navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;
  background:rgba(7,12,20,0);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
}
.nav.solid{
  background:rgba(7,12,20,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:28px}

.brand{display:flex;flex-direction:column;line-height:1;margin-right:auto}
.brand b{font-size:17px;font-weight:600;letter-spacing:.14em}
.brand span{font-size:8.5px;letter-spacing:.30em;color:var(--gold);margin-top:5px}

.nav-links{display:flex;gap:26px;font-size:13.5px;letter-spacing:.05em;color:var(--txt-2)}
.nav-links a{transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--gold-2)}

.nav-tools{display:flex;align-items:center;gap:14px}

.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:7px;padding:7px 11px;
  background:transparent;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  font-size:13px;cursor:pointer;transition:border-color .2s,background .2s;
}
.lang-btn:hover{border-color:var(--gold);background:var(--gold-soft)}
.lang-btn .flag{font-size:15px;line-height:1}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:172px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .22s var(--ease);box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  background:none;border:0;border-radius:7px;font-size:13.5px;cursor:pointer;text-align:left;
  transition:background .16s;
}
.lang-menu button:hover{background:rgba(255,255,255,.06)}
.lang-menu button[aria-current="true"]{color:var(--gold-2)}

.tel{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;white-space:nowrap}
.tel svg{width:15px;height:15px;fill:var(--gold)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-size:14px;font-weight:600;letter-spacing:.03em;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .25s,background .25s,border-color .25s;
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#20160a;box-shadow:0 6px 22px rgba(210,164,78,.26);
}
.btn-gold:hover{box-shadow:0 10px 32px rgba(210,164,78,.42)}
.btn-ghost{border-color:var(--line-2);background:rgba(255,255,255,.03);color:var(--txt)}
.btn-ghost:hover{border-color:var(--gold);background:var(--gold-soft)}
.btn-wa{background:#22ac52;color:#fff}
.btn-wa:hover{background:#1c9647}
.btn-lg{padding:17px 36px;font-size:15px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:7px}
.burger i{display:block;width:22px;height:1.5px;background:var(--txt);transition:.3s var(--ease)}

/* ---------- Sections plein écran ---------- */
.screen{min-height:100dvh;position:relative;display:flex;flex-direction:column;justify-content:center}

/* ---------- HÉROS ---------- */
.hero{padding-top:var(--nav-h);overflow:hidden}
.slide-bg{position:absolute;inset:0;z-index:0}
.slide-bg img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.01);
  /* Zoom volontairement minime : la source fait 756 px de large,
     tout agrandissement supplémentaire se voit immédiatement. */
  animation:kenburns 40s ease-in-out infinite alternate;
  filter:contrast(1.06) saturate(1.06);   /* redonne du mordant */
}
@keyframes kenburns{from{transform:scale(1.01)}to{transform:scale(1.05)}}
/* Voile ciblé : sombre à gauche derrière le texte, transparent à droite
   pour laisser voir le van et la vallée. Plus de voile global. */
.slide-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(7,12,20,.88) 0%, rgba(7,12,20,.62) 32%,
                            rgba(7,12,20,.18) 56%, transparent 74%),
    linear-gradient(to top, var(--bg) 0%, rgba(7,12,20,.45) 14%, transparent 38%);
}
/* nappes de nuages en dérive */
.clouds{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cloud{
  position:absolute;border-radius:50%;filter:blur(52px);opacity:.30;
  background:radial-gradient(circle,rgba(190,214,245,.55),transparent 68%);
}
.cloud.c1{width:62vw;height:26vh;top:8%;left:-22vw;animation:drift 62s linear infinite}
.cloud.c2{width:48vw;height:20vh;top:26%;left:-30vw;opacity:.20;animation:drift 88s linear infinite 9s}
.cloud.c3{width:72vw;height:30vh;top:0;left:-40vw;opacity:.14;animation:drift 112s linear infinite 22s}
@keyframes drift{to{transform:translateX(175vw)}}
/* halo des lumières du village */
.glow{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  width:78vw;height:30vh;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(232,178,92,.30),transparent 66%);
  filter:blur(46px);animation:breathe 7.5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:.95}}
#snow{position:absolute;inset:0;z-index:2;pointer-events:none}

.hero-inner{position:relative;z-index:3;width:100%}
.hero-copy{max-width:660px}
.hero h1{font-size:clamp(2.6rem,6.4vw,5rem);font-weight:600}
.hero h1 .accent{
  background:linear-gradient(120deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  margin-top:20px;font-size:clamp(1rem,1.6vw,1.2rem);
  color:var(--txt-2);max-width:46ch;line-height:1.55;
}
.hero-tel{
  display:inline-flex;align-items:center;gap:11px;margin-top:26px;
  font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:600;letter-spacing:.01em;
}
.hero-tel svg{width:22px;height:22px;fill:var(--gold)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.scroll-hint{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.20em;color:var(--txt-3);text-transform:uppercase;
}
.scroll-hint i{
  display:block;width:1px;height:36px;
  background:linear-gradient(to bottom,var(--gold),transparent);
  animation:drop 2.1s ease-in-out infinite;
}
@keyframes drop{0%{opacity:0;transform:scaleY(.2);transform-origin:top}
                45%{opacity:1;transform:scaleY(1);transform-origin:top}
                100%{opacity:0;transform:scaleY(1);transform-origin:bottom}}

/* ---------- Titres de section ---------- */
.head{text-align:center;margin-bottom:52px}
.head h2{font-size:clamp(2rem,4.2vw,3.2rem)}
.head p{margin-top:16px;color:var(--txt-2);font-size:1.14rem}
.head .rule{width:56px;height:2px;margin:20px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---------- SIMULATEUR ---------- */
.booking{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 45%,var(--bg) 100%);padding:96px 0}
.panel{
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--line-2);border-radius:20px;padding:32px;
  box-shadow:0 26px 70px rgba(0,0,0,.42);
}
.grid-form{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end}
.field{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.control{
  display:flex;align-items:center;gap:11px;padding:14px 15px;
  background:rgba(0,0,0,.34);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.control:focus-within{border-color:var(--gold);background:rgba(0,0,0,.5);box-shadow:0 0 0 3px var(--gold-soft)}
.control svg{width:16px;height:16px;fill:var(--gold);flex-shrink:0}
.control input,.control select{
  width:100%;min-width:0;background:none;border:0;outline:none;font-size:15px;
}
.control select{cursor:pointer;appearance:none}
.control select option{background:var(--bg-2);color:var(--txt)}
.control input::placeholder{color:var(--txt-3)}
.control input[type="date"],.control input[type="time"]{cursor:pointer}
.control input::-webkit-calendar-picker-indicator{filter:invert(.75) sepia(1) saturate(3) hue-rotate(2deg);cursor:pointer}

.swap{
  width:46px;height:46px;flex-shrink:0;margin-bottom:1px;
  border-radius:50%;border:1px solid var(--line-2);background:rgba(0,0,0,.34);
  display:grid;place-items:center;cursor:pointer;transition:.25s var(--ease);
}
.swap:hover{border-color:var(--gold);background:var(--gold-soft);transform:rotate(180deg)}
.swap svg{width:17px;height:17px;fill:var(--gold)}

.row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}

/* autocomplétion */
.ac{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  max-height:290px;overflow-y:auto;box-shadow:0 20px 46px rgba(0,0,0,.6);display:none;
}
.ac.show{display:block}
.ac-item{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;cursor:pointer;transition:background .14s}
.ac-item:hover,.ac-item.sel{background:rgba(210,164,78,.13)}
.ac-item .ic{font-size:14px;line-height:1.3;flex-shrink:0;width:17px;text-align:center}
.ac-item .tx b{display:block;font-size:14px;font-weight:500}
.ac-item .tx span{font-size:11.5px;color:var(--txt-3)}
.ac-empty{padding:14px;font-size:13px;color:var(--txt-3);text-align:center}

/* choix du véhicule */
.veh-title{margin:30px 0 15px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);text-align:center}
.vehicles{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.veh{
  position:relative;text-align:left;padding:0;overflow:hidden;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:var(--radius);
  transition:border-color .25s,transform .25s var(--ease),box-shadow .25s;
}
.veh:hover{transform:translateY(-3px);border-color:rgba(210,164,78,.5)}
.veh.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 1px var(--gold),0 12px 30px rgba(210,164,78,.16)}
.veh-img{height:88px;background:#0a121e;overflow:hidden}
.veh-img img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:.4s var(--ease)}
.veh:hover .veh-img img{opacity:1;transform:scale(1.06)}
.veh-body{padding:12px 13px 14px}
.veh-body b{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.veh-meta{display:flex;gap:13px;margin-top:7px;font-size:12px;color:var(--txt-2)}
.veh-meta span{display:flex;align-items:center;gap:4px}
.veh-price{margin-top:9px;font-size:12px;color:var(--txt-3)}
.veh-price b{display:inline;font-size:15px;color:var(--gold-2);text-transform:none;letter-spacing:0}
.veh .tick{
  position:absolute;top:9px;right:9px;width:21px;height:21px;border-radius:50%;
  border:1.5px solid var(--line-2);background:rgba(0,0,0,.5);display:grid;place-items:center;
  transition:.25s;
}
.veh.on .tick{background:var(--gold);border-color:var(--gold)}
.veh .tick svg{width:11px;height:11px;fill:#20160a;opacity:0;transition:.2s}
.veh.on .tick svg{opacity:1}

.calc-wrap{margin-top:26px;text-align:center}
.calc-note{margin-top:13px;font-size:12px;color:var(--txt-3)}

/* résultat tarif */
.result{
  margin-top:22px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:rgba(0,0,0,.3);overflow:hidden;
  max-height:0;opacity:0;transition:max-height .6s var(--ease),opacity .45s;
}
.result.show{max-height:900px;opacity:1}
.result-in{padding:26px}
.result-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.trip{font-size:14.5px;color:var(--txt-2)}
.trip b{color:var(--txt);font-weight:500}
.trip-meta{display:flex;gap:18px;margin-top:8px;font-size:12.5px;color:var(--txt-3)}
.price-box{text-align:right}
.price-box .amount{font-size:clamp(2.2rem,4.6vw,3rem);font-weight:600;color:var(--gold-2);line-height:1}
.price-box .per{font-size:12px;color:var(--txt-3);margin-top:5px}
.breakdown{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.brk-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13.5px;color:var(--txt-2)}
.brk-row.tot{margin-top:8px;padding-top:12px;border-top:1px solid var(--line);color:var(--txt);font-weight:600;font-size:15px}
.result .btn{margin-top:20px;width:100%}
.err{margin-top:14px;padding:12px 15px;border-radius:var(--radius-sm);
     background:rgba(220,80,80,.12);border:1px solid rgba(220,80,80,.35);
     font-size:13.5px;color:#ffb3b3;display:none}
.err.show{display:block}

.assur{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin-top:26px;
       font-size:12.5px;color:var(--txt-3)}
.assur span{display:flex;align-items:center;gap:7px}
.assur svg{width:14px;height:14px;fill:var(--gold)}

/* ---------- SERVICES ---------- */
.services{padding:112px 0;background:var(--bg)}
/* 3 colonnes : les 9 services forment exactement 3 rangées pleines.
   Cartes volontairement généreuses — la section est plus longue mais
   le texte reste confortable à lire. */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1000px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){  .svc-grid{grid-template-columns:1fr} }
.svc{
  position:relative;padding:38px 34px;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--line);min-height:296px;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .35s var(--ease),border-color .35s;
}
.svc:hover{transform:translateY(-5px);border-color:rgba(210,164,78,.45)}
.svc-ic{
  width:62px;height:62px;border-radius:15px;display:grid;place-items:center;margin-bottom:auto;
  background:var(--gold-soft);border:1px solid rgba(210,164,78,.3);
}
.svc-ic svg{width:28px;height:28px;fill:var(--gold)}
.svc h3{font-size:1.42rem;margin-top:26px;line-height:1.2}
.svc p{margin-top:13px;font-size:16px;color:var(--txt-2);line-height:1.65}

/* ---------- DESTINATIONS ---------- */
.dest{padding:96px 0;background:linear-gradient(180deg,var(--bg),var(--bg-2))}
/* 2 colonnes : 6 stations = 3 rangées pleines. Les visuels sont
   panoramiques (756x329), donc affichés à 628 px de large ils restent
   sous leur taille native — nets, sans agrandissement. */
.dest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:760px){ .dest-grid{grid-template-columns:1fr} }
.card{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:2.3/1;
  border:1px solid var(--line);cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.5)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover img{transform:scale(1.09)}
.card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,12,20,.94) 6%,rgba(7,12,20,.42) 48%,transparent 78%);
}
.card-txt{position:absolute;left:0;right:0;bottom:0;padding:28px;z-index:2}
.card-txt h3{font-size:1.75rem;letter-spacing:-.015em}
.card-txt .from{margin-top:8px;font-size:15.5px;color:var(--gold-2);font-weight:500}
.card-meta{display:flex;gap:20px;margin-top:13px;font-size:14px;color:var(--txt-2)}
.card-meta span{display:flex;align-items:center;gap:5px}
.card-meta svg{width:12px;height:12px;fill:var(--txt-3)}

/* ---------- Révélation au défilement ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- Pied de page ---------- */
footer{padding:52px 0 34px;background:var(--bg);border-top:1px solid var(--line);font-size:13.5px;color:var(--txt-3)}
.foot-top{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;margin-bottom:30px}
.foot-col h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-2);margin:0 0 13px;font-weight:600}
.foot-col a{display:block;padding:4px 0;transition:color .2s}
.foot-col a:hover{color:var(--gold-2)}
.foot-bot{padding-top:22px;border-top:1px solid var(--line);text-align:center;font-size:12px}

/* bouton WhatsApp flottant */
.wa-float{
  position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;
  background:#22ac52;display:grid;place-items:center;z-index:90;
  box-shadow:0 8px 26px rgba(34,172,82,.45);transition:transform .25s var(--ease);
}
.wa-float:hover{transform:scale(1.09)}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav-links{display:none}
  .burger{display:flex}
  .vehicles{grid-template-columns:repeat(2,1fr)}
  .row-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .tel span{display:none}
  .grid-form{grid-template-columns:1fr;gap:14px}
  .swap{margin:-4px auto;transform:rotate(90deg)}
  .swap:hover{transform:rotate(270deg)}
  .panel{padding:22px 18px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .result-top{flex-direction:column;align-items:flex-start}
  .price-box{text-align:left}
  .booking,.services,.dest{padding:72px 0}
  .foot-top{flex-direction:column;gap:26px}
}
@media (max-width:480px){
  .vehicles{grid-template-columns:1fr}
  .row-4{grid-template-columns:1fr 1fr}
}

/* ============================================================
   SCÈNE 3D DU HÉROS
   Plans superposés en profondeur, déplacés par la souris,
   le gyroscope et le défilement (voir parallaxe3D dans app.js).
   ============================================================ */
.scene{
  position:absolute;inset:0;z-index:0;
  perspective:1200px;transform-style:preserve-3d;overflow:hidden;
}
.layer{will-change:transform}
.scene .slide-bg{position:absolute;inset:-2.5%}   /* marge pour que la parallaxe ne découvre pas les bords */

/* Aurore : voile de couleur qui ondule lentement */
.aurora{
  position:absolute;inset:-10% -10% auto -10%;height:62%;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 100% at 20% 0%, rgba(96,150,220,.20), transparent 62%),
    radial-gradient(50% 100% at 78% 8%, rgba(150,120,210,.14), transparent 60%),
    radial-gradient(40% 90%  at 50% 0%, rgba(120,200,220,.12), transparent 66%);
  filter:blur(24px);
  animation:aurore 22s ease-in-out infinite alternate;
}
@keyframes aurore{
  0%  {transform:translateX(-2%) scaleY(1);   opacity:.75}
  50% {transform:translateX(2%)  scaleY(1.12);opacity:1}
  100%{transform:translateX(-1%) scaleY(.96); opacity:.8}
}

/* Faisceaux lumineux obliques */
.beams{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.beams i{
  position:absolute;top:-40%;width:2px;height:180%;
  background:linear-gradient(to bottom,transparent,rgba(240,200,119,.16),transparent);
  filter:blur(2px);transform-origin:top center;
}
.beams i:nth-child(1){left:22%;transform:rotate(11deg); animation:faisceau 9s  ease-in-out infinite}
.beams i:nth-child(2){left:54%;transform:rotate(-8deg); animation:faisceau 13s ease-in-out infinite 2.5s}
.beams i:nth-child(3){left:79%;transform:rotate(14deg); animation:faisceau 11s ease-in-out infinite 5s}
@keyframes faisceau{0%,100%{opacity:.25}50%{opacity:.75}}

/* Masque serré sur la carrosserie : le décor d'origine (rue urbaine) est
   écrasé dans le noir par la baisse de luminosité et le fondu des bords.
   Pour remplacer par une vraie photo du véhicule en montagne, il suffit
   d'échanger le fichier et de retirer le filtre ci-dessous. */

/* ============================================================
   WHATSAPP MIS EN AVANT
   ============================================================ */
.nav-wa{
  padding:11px 18px;
  box-shadow:0 4px 18px rgba(34,172,82,.34);
  animation:waPulse 3.4s ease-in-out infinite;
}
@keyframes waPulse{
  0%,100%{box-shadow:0 4px 18px rgba(34,172,82,.34)}
  50%    {box-shadow:0 6px 26px rgba(34,172,82,.62)}
}
.nav-wa svg{flex-shrink:0}

/* Bandeau WhatsApp pleine largeur, avant le pied de page */
.wa-band{
  padding:44px 0;
  background:linear-gradient(135deg,rgba(34,172,82,.14),rgba(34,172,82,.05));
  border-top:1px solid rgba(34,172,82,.28);
  border-bottom:1px solid rgba(34,172,82,.28);
}
.wa-band-in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.wa-band-txt{display:flex;align-items:center;gap:18px}
.wa-band-logo{width:52px;height:52px;fill:#25d366;flex-shrink:0;filter:drop-shadow(0 3px 10px rgba(34,172,82,.5))}
.wa-band-txt h3{font-size:1.3rem}
.wa-band-txt p{margin-top:6px;color:var(--txt-2);font-size:14px}

/* ============================================================
   AVIS CLIENTS
   ============================================================ */
.reviews{padding:96px 0;background:var(--bg-2)}
.rev-score{display:flex;align-items:center;gap:20px;justify-content:center;margin-bottom:40px}
.rev-num{font-size:3.4rem;font-weight:600;color:var(--gold-2);line-height:1}
.stars{color:var(--gold-2);font-size:19px;letter-spacing:3px}
.rev-count{color:var(--txt-3);font-size:13.5px;margin-top:5px}

.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.rev{
  padding:26px;border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line);
  transition:transform .35s var(--ease),border-color .35s;
}
.rev:hover{transform:translateY(-4px);border-color:rgba(210,164,78,.4)}
.rev-txt{margin:14px 0 20px;font-size:14.5px;line-height:1.62;color:var(--txt-2);font-style:italic}
.rev-who{display:flex;align-items:center;gap:12px}
.rev-av{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--gold-soft);border:1px solid rgba(210,164,78,.32);
  color:var(--gold-2);font-size:14px;font-weight:600;
}
.rev-who b{display:block;font-size:14px;font-weight:500}
.rev-loc{font-size:13px}
.rev-warn{
  margin-top:26px;text-align:center;font-size:12.5px;color:#e0b060;
  padding:11px;border:1px dashed rgba(224,176,96,.4);border-radius:var(--radius-sm);
  background:rgba(224,176,96,.06);
}

/* ============================================================
   AUTOCOMPLÉTION — en-tête de groupe et lieux épinglés
   ============================================================ */
.ac-head{
  padding:9px 13px 7px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);border-bottom:1px solid var(--line);
}
.ac-item.pin{background:rgba(210,164,78,.055)}
.ac-item.pin:hover,.ac-item.pin.sel{background:rgba(210,164,78,.16)}
.ac-item.pin .tx b{color:var(--gold-2)}

/* ============================================================
   FLOTTE — traitement uniforme pour que les photos forment
   une série cohérente malgré des arrière-plans différents.
   ============================================================ */

/* ============================================================
   Responsive des nouveaux blocs
   ============================================================ */
@media (max-width:1024px){
  .nav-wa .nav-wa-txt{display:none}          /* icône seule sur tablette */
  .nav-wa{padding:11px 13px}
}
@media (max-width:760px){
  .reviews{padding:72px 0}
  .wa-band-in{flex-direction:column;text-align:center}
  .wa-band-txt{flex-direction:column;text-align:center;gap:12px}
  .wa-band .btn{width:100%}
  .rev-score{margin-bottom:30px}
  .beams{display:none}                        /* allège le rendu mobile */
}

/* ============================================================
   CARROUSEL D'AMBIANCES DU HÉROS
   4 photos, chacune avec ses propres effets. Une seule active
   à la fois ; le fondu est géré par la classe .on.
   ============================================================ */
.slide{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity 1.5s var(--ease),visibility 0s linear 1.5s;
}
.slide.on{opacity:1;visibility:visible;transition:opacity 1.5s var(--ease),visibility 0s}
/* Le zoom lent ne tourne que sur l'ambiance visible */
.slide .slide-bg img{animation-play-state:paused}
.slide.on .slide-bg img{animation-play-state:running}

/* Pastilles de navigation */
.slide-dots{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:5;display:flex;gap:9px;
}
.slide-dots button{
  width:30px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.26);transition:background .3s,width .3s var(--ease);
}
.slide-dots button:hover{background:rgba(255,255,255,.5)}
.slide-dots button[aria-selected="true"]{background:var(--gold-2);width:46px}


@media (max-width:760px){
  .flare{width:60vw;height:60vw}
  .slide-dots{bottom:76px}
}

/* ============================================================
   AMBIANCE 1 — CRÉPUSCULE EMBRASÉ
   ============================================================ */

/* Halo solaire derrière les crêtes, côté gauche de la photo */
.sunburst{
  position:absolute;left:18%;top:22%;width:46vw;height:46vw;
  max-width:620px;max-height:620px;transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,168,72,.34) 0%,
                            rgba(255,120,40,.16) 32%,
                            transparent 66%);
  filter:blur(26px);
  animation:braise 8s ease-in-out infinite;
}
@keyframes braise{
  0%,100%{opacity:.62;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:1;  transform:translate(-50%,-50%) scale(1.09)}
}
.glow.chaud{
  background:radial-gradient(ellipse at center,rgba(255,166,80,.30),transparent 68%);
  bottom:6%;height:32vh;
}

/* ============================================================
   AMBIANCE 2 — AURORE BORÉALE
   Trois rubans indépendants qui ondulent à des vitesses
   différentes, calés sur le ciel de la photo.
   ============================================================ */
.rubans{position:absolute;inset:0 0 46% 0;z-index:1;pointer-events:none;overflow:hidden}
.rubans i{
  position:absolute;left:-14%;width:128%;height:58%;
  border-radius:50%;
  filter:blur(30px);
  mix-blend-mode:screen;         /* l'aurore est claire : elle s'ajoute au ciel */
  transform-origin:center;
}
.rubans .r1{
  top:4%;
  background:linear-gradient(96deg,transparent 4%,rgba(64,232,166,.42) 30%,
                             rgba(122,244,196,.30) 52%,rgba(70,200,230,.22) 74%,transparent 96%);
  animation:ondule1 14s ease-in-out infinite alternate;
}
.rubans .r2{
  top:16%;height:44%;
  background:linear-gradient(84deg,transparent 8%,rgba(96,210,240,.28) 34%,
                             rgba(150,120,235,.24) 62%,transparent 92%);
  animation:ondule2 19s ease-in-out infinite alternate;
}
.rubans .r3{
  top:-4%;height:40%;
  background:linear-gradient(104deg,transparent 12%,rgba(180,255,214,.22) 44%,
                             rgba(80,220,180,.18) 70%,transparent 94%);
  animation:ondule3 25s ease-in-out infinite alternate;
}
@keyframes ondule1{
  0%  {transform:translateX(-4%) translateY(0)     skewY(-2deg) scaleY(1);   opacity:.72}
  50% {transform:translateX(3%)  translateY(-2.5%) skewY(1.5deg) scaleY(1.16);opacity:1}
  100%{transform:translateX(-2%) translateY(1.5%)  skewY(-1deg) scaleY(.94); opacity:.8}
}
@keyframes ondule2{
  0%  {transform:translateX(3%)  skewY(2deg)  scaleY(.96); opacity:.55}
  50% {transform:translateX(-4%) skewY(-2deg) scaleY(1.2); opacity:.9}
  100%{transform:translateX(2%)  skewY(1deg)  scaleY(1);   opacity:.62}
}
@keyframes ondule3{
  0%  {transform:translateX(-2%) skewY(-1.5deg) scaleY(1.08);opacity:.42}
  50% {transform:translateX(4%)  skewY(2deg)    scaleY(.9);  opacity:.72}
  100%{transform:translateX(-3%) skewY(-1deg)   scaleY(1.14);opacity:.5}
}
.glow.froid{
  background:radial-gradient(ellipse at center,rgba(96,200,230,.20),transparent 70%);
  bottom:4%;height:26vh;
}

/* Ciel étoilé */
.stars{
  position:absolute;inset:0 0 52% 0;z-index:1;pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 18%,  rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px     at 19% 32%, rgba(255,255,255,.72),transparent),
    radial-gradient(1.4px 1.4px at 28% 12%, rgba(255,255,255,.85),transparent),
    radial-gradient(1px 1px     at 41% 26%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.3px 1.3px at 53% 9%,  rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px     at 64% 30%, rgba(255,255,255,.72),transparent),
    radial-gradient(1.5px 1.5px at 76% 16%, rgba(255,255,255,.88),transparent),
    radial-gradient(1px 1px     at 87% 27%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 94% 11%, rgba(255,255,255,.8), transparent);
  animation:scintille 4.6s ease-in-out infinite alternate;
}

/* Lumières du village — calées sur la vallée, à gauche dans les deux photos */
.twinkle.vallee-gauche{
  position:absolute;left:0;right:52%;bottom:22%;height:30%;
  z-index:2;pointer-events:none;
  background-image:
    radial-gradient(1.7px 1.7px at 14% 40%, rgba(255,206,130,.95), transparent),
    radial-gradient(1.3px 1.3px at 26% 58%, rgba(255,222,160,.85), transparent),
    radial-gradient(1.9px 1.9px at 35% 30%, rgba(255,198,120,.9),  transparent),
    radial-gradient(1.2px 1.2px at 48% 62%, rgba(255,232,180,.8),  transparent),
    radial-gradient(1.6px 1.6px at 58% 44%, rgba(255,206,130,.9),  transparent),
    radial-gradient(1.4px 1.4px at 71% 26%, rgba(255,222,160,.85), transparent),
    radial-gradient(1.8px 1.8px at 83% 52%, rgba(255,198,120,.88), transparent);
  animation:scintille 3.1s ease-in-out infinite alternate;
}
@keyframes scintille{0%{opacity:.4}100%{opacity:1}}

@media (max-width:760px){
  .sunburst{width:80vw;height:80vw;left:30%}
  .rubans i{filter:blur(22px)}
}

/* ---------- Carte « et bien d'autres » en fin de destinations ---------- */
.card.autres{
  background:linear-gradient(150deg,rgba(210,164,78,.13),rgba(255,255,255,.02));
  border:1px dashed rgba(210,164,78,.42);
  display:grid;place-items:center;text-align:center;
}
.card.autres::after{content:none}
.card.autres:hover{border-color:var(--gold);background:linear-gradient(150deg,rgba(210,164,78,.2),rgba(255,255,255,.03))}
.autres-in{padding:30px;position:relative;z-index:2}
.autres-plus{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;
  border-radius:50%;border:1px solid rgba(210,164,78,.45);background:var(--gold-soft);
  color:var(--gold-2);font-size:26px;font-weight:300;line-height:1;
  transition:transform .35s var(--ease);
}
.card.autres:hover .autres-plus{transform:rotate(90deg) scale(1.08)}
.autres-in h3{font-size:1.5rem}
.autres-in p{margin-top:10px;font-size:14.5px;color:var(--txt-2);max-width:34ch;line-height:1.55}
.autres-cta{display:inline-block;margin-top:16px;font-size:14px;font-weight:500;color:var(--gold-2)}

/* Détail des avis : drapeau, ville et trajet effectué */
.rev-flag{font-size:14px;margin-left:3px}
.rev-who > span:last-child{display:flex;flex-direction:column;gap:1px}
.rev-loc{font-size:12.5px;color:var(--txt-3)}
.rev-trajet{font-size:12px;color:var(--gold);margin-top:2px}
.rev-txt{min-height:auto}

/* ============================================================
   FORMULAIRE DE RÉSERVATION (fenêtre modale)
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:24px;opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility 0s linear .35s;
}
.modal.on{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s}
.modal-fond{position:absolute;inset:0;background:rgba(3,6,11,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-boite{
  position:relative;width:100%;max-width:760px;max-height:92vh;overflow-y:auto;
  background:linear-gradient(168deg,#101a28,#0a1119);
  border:1px solid var(--line-2);border-radius:20px;
  box-shadow:0 40px 100px rgba(0,0,0,.7);
  transform:translateY(24px) scale(.98);
  transition:transform .45s var(--ease);
}
.modal.on .modal-boite{transform:none}
.modal-x{
  position:absolute;top:16px;right:18px;z-index:3;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(0,0,0,.35);color:var(--txt-2);font-size:24px;line-height:1;
  cursor:pointer;transition:.2s;
}
.modal-x:hover{border-color:var(--gold);color:var(--gold-2);background:var(--gold-soft)}

.modal-tete{padding:34px 34px 0}
.modal-tete h2{font-size:1.85rem}
.modal-tete p{margin-top:8px;color:var(--txt-2);font-size:14.5px}

/* Récapitulatif du trajet */
.recap{
  margin:24px 34px 0;padding:20px 22px;border-radius:var(--radius);
  background:var(--gold-soft);border:1px solid rgba(210,164,78,.28);
}
.recap-trajet{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:1.05rem;font-weight:500}
.recap-fleche{color:var(--gold)}
.recap-lignes{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-size:12.5px;color:var(--txt-2)}
.recap-prix{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(210,164,78,.24);
  font-size:14px;color:var(--txt-2);
}
.recap-prix b{font-size:1.7rem;color:var(--gold-2)}

/* Champs */
#formResa{padding:8px 34px 30px}
#formResa fieldset{border:0;padding:26px 0 0;margin:0}
#formResa legend{
  display:flex;align-items:center;gap:11px;padding:0;margin-bottom:16px;
  font-size:1.05rem;font-weight:600;letter-spacing:-.01em;
}
#formResa legend .num{
  display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;
  border-radius:50%;background:var(--gold-soft);border:1px solid rgba(210,164,78,.4);
  color:var(--gold-2);font-size:13px;font-weight:600;
}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-grid-4{grid-template-columns:repeat(4,1fr)}
.f-large{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f > span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.f input,.f textarea{
  width:100%;padding:13px 14px;border-radius:var(--radius-sm);
  background:rgba(0,0,0,.34);border:1px solid var(--line-2);
  font-size:15px;outline:none;resize:vertical;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.f input:focus,.f textarea:focus{
  border-color:var(--gold);background:rgba(0,0,0,.5);box-shadow:0 0 0 3px var(--gold-soft);
}
.f input::placeholder,.f textarea::placeholder{color:var(--txt-3)}
.f input:invalid:not(:placeholder-shown){border-color:rgba(220,90,90,.55)}
.f-aide{margin-top:11px;font-size:12.5px;color:var(--txt-3);line-height:1.5}

.f-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:14px;color:var(--txt-2);line-height:1.5}
.f-check input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--gold)}
.f-retour{margin-top:16px}

.f-radios{display:flex;flex-wrap:wrap;gap:11px}
.f-radio{
  display:flex;align-items:center;gap:9px;padding:12px 17px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:rgba(0,0,0,.26);font-size:14px;transition:.2s;
}
.f-radio:hover{border-color:rgba(210,164,78,.5)}
.f-radio input{accent-color:var(--gold);width:16px;height:16px}
.f-radio:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}

.f-erreur{
  display:none;margin-top:22px;padding:13px 16px;border-radius:var(--radius-sm);
  background:rgba(220,80,80,.13);border:1px solid rgba(220,80,80,.4);
  font-size:14px;color:#ffb3b3;
}
.f-erreur.on{display:block}

.modal-pied{display:flex;gap:13px;margin-top:28px}
.modal-pied .btn{flex:1}
.f-note{margin-top:14px;text-align:center;font-size:12px;color:var(--txt-3)}

/* Écran de confirmation */
.resa-ok{padding:64px 40px;text-align:center}
.resa-ok-rond{
  width:76px;height:76px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;
  background:rgba(78,201,138,.14);border:1px solid rgba(78,201,138,.45);
  color:var(--ok);font-size:36px;
}
.resa-ok h2{font-size:1.7rem}
.resa-ok p{margin:14px auto 28px;max-width:42ch;color:var(--txt-2);line-height:1.6}

@media (max-width:700px){
  .modal{padding:0}
  .modal-boite{max-width:100%;max-height:100vh;border-radius:0;border:0}
  .modal-tete{padding:26px 20px 0}
  .recap{margin:20px 20px 0;padding:16px}
  #formResa{padding:8px 20px 28px}
  .f-grid,.f-grid-4{grid-template-columns:1fr 1fr}
  .modal-pied{flex-direction:column}
}

/* ---------- Menu « Nos autres destinations » ---------- */
.nav-dest{position:relative}
.nav-dest-btn{
  display:flex;align-items:center;gap:7px;padding:0;
  background:none;border:0;cursor:pointer;
  font-size:13.5px;letter-spacing:.05em;color:var(--txt-2);
  transition:color .2s;white-space:nowrap;
}
.nav-dest-btn:hover,.nav-dest.open .nav-dest-btn{color:var(--gold-2)}
.nav-dest-btn svg{transition:transform .28s var(--ease)}
.nav-dest.open .nav-dest-btn svg{transform:rotate(180deg)}
.nav-dest-menu{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:292px;padding:8px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:0 22px 50px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transition:all .24s var(--ease);
}
.nav-dest.open .nav-dest-menu{opacity:1;visibility:visible;transform:translateX(-50%)}
.nav-dest-menu a{
  display:flex;align-items:flex-start;gap:12px;padding:12px 13px;border-radius:9px;
  transition:background .16s;
}
.nav-dest-menu a:hover{background:rgba(210,164,78,.11)}
.nav-dest-menu a[aria-current="page"]{background:var(--gold-soft)}
.nav-dest-menu a[aria-current="page"] b{color:var(--gold-2)}
.nd-ic{font-size:19px;line-height:1.2;flex-shrink:0}
.nav-dest-menu b{display:block;font-size:14px;font-weight:500}
.nav-dest-menu em{display:block;margin-top:3px;font-size:12px;color:var(--txt-3);font-style:normal}

/* ---------- Halos lumineux (Paris et Côte d'Azur) ----------
   Remplacent les rubans d'aurore : nappes qui pulsent lentement
   au-dessus de la ville ou de la baie. */
.halos{position:absolute;inset:0 0 30% 0;z-index:1;pointer-events:none;overflow:hidden}
.halos i{position:absolute;border-radius:50%;filter:blur(46px);mix-blend-mode:screen}
.halos i:nth-child(1){left:8%;top:22%;width:44vw;height:26vh;
  background:radial-gradient(circle,rgba(255,196,110,.26),transparent 68%);
  animation:halo 11s ease-in-out infinite}
.halos i:nth-child(2){left:48%;top:8%;width:38vw;height:22vh;
  background:radial-gradient(circle,rgba(140,190,255,.18),transparent 66%);
  animation:halo 16s ease-in-out infinite 3s}
.halos i:nth-child(3){left:70%;top:30%;width:34vw;height:20vh;
  background:radial-gradient(circle,rgba(255,170,120,.20),transparent 70%);
  animation:halo 13s ease-in-out infinite 6s}
@keyframes halo{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.95;transform:scale(1.12)}}

/* Repli quand un visuel de destination manque encore */
.card img{background:linear-gradient(150deg,#16243a,#0c1420)}

/* Cartes de la flotte : format 16:9, adapté aux photos de véhicules
   (le 2,3:1 des destinations couperait le toit et les roues). */
#fleetGrid .card{aspect-ratio:16/9}
#fleetGrid .card::after{
  background:linear-gradient(to top,rgba(7,12,20,.92) 4%,rgba(7,12,20,.34) 42%,transparent 72%);
}

/* ---------- Bandeau de suggestion de page ---------- */
.bascule{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);
  z-index:150;width:calc(100% - 36px);max-width:660px;
  opacity:0;transition:transform .5s var(--ease),opacity .4s;
}
.bascule.on{transform:translate(-50%,0);opacity:1}
.bascule-in{
  display:flex;align-items:center;gap:16px;padding:16px 18px;
  background:linear-gradient(160deg,#16233a,#0d1624);
  border:1px solid rgba(210,164,78,.42);border-radius:var(--radius);
  box-shadow:0 22px 54px rgba(0,0,0,.62);
}
.bascule-ic{
  display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;
  border-radius:50%;background:var(--gold-soft);border:1px solid rgba(210,164,78,.4);
  color:var(--gold-2);font-size:18px;
}
.bascule p{flex:1;font-size:14px;line-height:1.5;color:var(--txt-2);min-width:0}
.bascule p b{color:var(--txt);font-weight:500}
.bascule .btn{flex-shrink:0;padding:11px 20px;font-size:13.5px}
.bascule-x{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line-2);background:transparent;color:var(--txt-3);
  font-size:19px;line-height:1;cursor:pointer;transition:.2s;
}
.bascule-x:hover{border-color:var(--gold);color:var(--gold-2)}
@media (max-width:700px){
  .bascule-in{flex-wrap:wrap}
  .bascule p{flex:1 1 100%;order:2}
  .bascule .btn{flex:1;order:3}
}

/* ---------- Étape de paiement en ligne ---------- */
.f-radio-ligne{border-color:rgba(78,201,138,.45);background:rgba(78,201,138,.08)}
.f-radio-ligne:hover{border-color:var(--ok)}
.f-radio-ligne:has(input:checked){border-color:var(--ok);background:rgba(78,201,138,.16)}
.f-part{
  margin-top:16px;padding:16px;border-radius:var(--radius-sm);
  background:rgba(78,201,138,.06);border:1px solid rgba(78,201,138,.28);
  display:flex;flex-wrap:wrap;gap:11px;
}
.f-part .f-aide{flex:1 1 100%;margin-top:4px}

/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.legal{max-width:820px;margin:0 auto;padding:calc(var(--nav-h) + 64px) 24px 96px}
.legal h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:10px}
.legal .maj{color:var(--txt-3);font-size:13.5px;margin-bottom:44px}
.legal h2{
  font-size:1.35rem;margin:44px 0 16px;padding-top:24px;
  border-top:1px solid var(--line);
}
.legal h3{font-size:1.05rem;margin:26px 0 10px;color:var(--gold-2)}
.legal p,.legal li{color:var(--txt-2);line-height:1.75;font-size:15.5px}
.legal p+p{margin-top:14px}
.legal ul,.legal ol{margin:14px 0;padding-left:22px}
.legal li+li{margin-top:9px}
.legal a{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px}
.legal strong{color:var(--txt);font-weight:500}
.legal table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
.legal th,.legal td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line)}
.legal th{color:var(--txt-3);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.legal td{color:var(--txt-2)}

.legal-retour{
  display:inline-flex;align-items:center;gap:8px;margin-top:52px;
  font-size:14px;color:var(--txt-3);transition:color .2s;
}
.legal-retour:hover{color:var(--gold-2)}
.foot-legal{display:block;margin-top:10px;font-size:12.5px}
.foot-legal a{color:var(--txt-3);transition:color .2s}
.foot-legal a:hover{color:var(--gold-2)}

/* ============================================================
   SÉLECTEUR DE MODE — transfert ou mise à disposition
   ============================================================ */
.mode-switch{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  max-width:640px;margin:0 auto 26px;
}
.mode-switch button{
  display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;text-align:left;
  transition:border-color .25s,background .25s,transform .2s var(--ease);
}
.mode-switch button:hover{border-color:rgba(210,164,78,.5);transform:translateY(-2px)}
.mode-switch button[aria-selected="true"]{
  border-color:var(--gold);background:var(--gold-soft);
  box-shadow:0 0 0 1px var(--gold);
}
.ms-ic{
  display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;
  border-radius:11px;background:rgba(0,0,0,.3);border:1px solid var(--line-2);
  font-size:17px;color:var(--gold-2);
}
.mode-switch button[aria-selected="true"] .ms-ic{background:rgba(210,164,78,.2);border-color:rgba(210,164,78,.4)}
.mode-switch b{display:block;font-size:15px;font-weight:500}
.mode-switch em{display:block;margin-top:3px;font-size:12.5px;color:var(--txt-3);font-style:normal}

/* Durées proposées */
.durees{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.duree{
  padding:16px 8px;text-align:center;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);transition:.25s var(--ease);
}
.duree:hover{border-color:rgba(210,164,78,.5);transform:translateY(-2px)}
.duree.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 1px var(--gold)}
.duree b{display:block;font-size:1.25rem;font-weight:600}
.duree span{display:block;margin-top:4px;font-size:11.5px;color:var(--txt-3)}
.duree em{display:block;margin-top:7px;font-size:12.5px;color:var(--gold-2);font-style:normal}

/* Circuits suggérés */
.circuits{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.circuit{
  padding:18px;cursor:pointer;border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--line);transition:.3s var(--ease);
}
.circuit:hover{border-color:rgba(210,164,78,.45);transform:translateY(-3px)}
.circuit.on{border-color:var(--gold);background:var(--gold-soft)}
.circuit b{display:block;font-size:15px;font-weight:500}
.circuit .etapes{display:block;margin-top:7px;font-size:12.5px;color:var(--txt-3);line-height:1.5}
.circuit .duree-prix{display:flex;justify-content:space-between;margin-top:12px;font-size:13px}
.circuit .duree-prix span{color:var(--txt-2)}
.circuit .duree-prix b{color:var(--gold-2);font-size:14px}

@media (max-width:900px){
  .durees{grid-template-columns:repeat(3,1fr)}
  .circuits{grid-template-columns:1fr}
}
@media (max-width:560px){
  .mode-switch{grid-template-columns:1fr}
  .durees{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Durée sur mesure et plusieurs jours ---------- */
.duree-sur-mesure{margin-top:16px}
.sur-mesure-champs{
  margin-top:14px;padding:16px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.sm-ligne{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sm-f{display:flex;flex-direction:column;gap:7px;flex:1;min-width:130px}
.sm-f > span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.sm-f input{
  padding:13px 14px;border-radius:var(--radius-sm);
  background:rgba(0,0,0,.34);border:1px solid var(--line-2);
  font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s;
}
.sm-f input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.sm-ou{padding-bottom:14px;font-size:13px;color:var(--txt-3)}

.durees.jours{grid-template-columns:repeat(4,1fr)}
.durees.jours .duree b{font-size:1.15rem}

.circuit-libre{margin-top:26px}
.circuit-libre > label{
  display:block;margin-bottom:7px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
}
@media (max-width:560px){
  .durees.jours{grid-template-columns:repeat(2,1fr)}
  .sm-ou{display:none}
}

/* Le paiement en ligne occupe toute la largeur : c'est le choix mis en avant */
#optEnLigne{flex:1 1 100%;justify-content:center;padding:15px 20px;font-weight:500}