/* =====================================================================
   MOVELY — NUIT & OR  (direction artistique cinématographique)
   Chargée EN DERNIER. Unifie tout le site dans un registre nuit + or :
   noir profond, typographie serif de caractère, grain de film, vignette,
   or signature. Ne modifie aucun ID/classe utilisé par le JavaScript.
   « Luxe silencieux » — raffiné, sobre, intemporel.
   ===================================================================== */

/* ---------- Tokens nuit ---------- */
:root{
  --noir:#06080C;            /* fond de page */
  --noir-2:#0A0E15;          /* sections alternées */
  --noir-3:#0E131C;          /* cartes */
  --verre:rgba(255,255,255,.045);
  --verre-bord:rgba(255,255,255,.10);
  --or:#CBA24B;
  --or-clair:#E8C97E;
  --or-sourd:#9C7C34;
  --champagne:#F2E7CC;
  --txt:rgba(244,241,234,.90);
  --txt-doux:rgba(244,241,234,.60);
  --txt-faible:rgba(244,241,234,.42);
}

/* ---------- Base ---------- */
html{background:var(--noir)}
body{
  background:var(--noir);
  color:var(--txt);
}
::selection{background:var(--or);color:#0a0a0a}

/* Typographie display — serif de caractère */
h1,h2,h3,.display,.t-xxl,.t-xl,.dc-title,.sec-head h2,.loy-card h3{
  font-family:"Fraunces","Inter",Georgia,serif;
  letter-spacing:-.015em;
  font-optical-sizing:auto;
}
h1,.t-xxl{font-weight:600}
h2,.t-xl{font-weight:500}
.hero h1,.lp-hero h1{font-weight:500;letter-spacing:-.025em;line-height:1.02}
.eyebrow,.mention{color:var(--or);font-weight:600;letter-spacing:.2em}

/* Filets or */
.filet:after{background:linear-gradient(90deg,var(--or),transparent)}

/* ---------- Grain de film + vignette (inject par motion.js : #grain) ---------- */
#grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:""; position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(130% 110% at 50% 38%,transparent 55%,rgba(0,0,0,.55) 100%);
}

/* ---------- Barre de progression (inject par motion.js) ---------- */
.sig-progress{
  position:fixed; inset:0 auto auto 0; height:2px; width:100%; z-index:9999;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--or-sourd),var(--or-clair));
  box-shadow:0 0 10px rgba(203,162,75,.55); pointer-events:none;
}

/* Curseur sur-mesure : retiré avec son JS (motion.js) — il masquait le
   curseur natif sur les formulaires et la carte. */


/* ---------- NAV : ancrée au noir une fois posée ---------- */
header.nav.pose{background:rgba(6,8,12,.72);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 10px 40px rgba(0,0,0,.4)}
header.nav.pose .nav-links a{color:rgba(255,255,255,.82)}
header.nav.pose .nav-links a:hover{color:#fff}
header.nav.pose .nav-logo img{filter:brightness(0) invert(1)}
header.nav.pose .espace-lien{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.22)}
header.nav.pose .burger{background:transparent;border-color:rgba(255,255,255,.22)}
header.nav.pose .burger span{background:#fff}

/* ---------- HERO : nuit profonde + lueur de phares ---------- */
.hero{background:var(--noir)}
.hero-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.conf-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Ligne de réassurance sous le hero (usages FR/CH : dispo, prix, paiement) */
.hero-rassure{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;list-style:none;padding:0}
.hero-rassure span{font-size:.9rem;color:var(--txt-doux);display:inline-flex;align-items:center;gap:7px}
.hero-rassure span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--or);box-shadow:0 0 8px rgba(203,162,75,.6)}
.hero .voile::before,.hero-fond.voile::before{
  background:linear-gradient(180deg,rgba(6,8,12,.35) 0%,rgba(6,8,12,.78) 60%,var(--noir) 100%)}
/* lueur chaude basse (phares) */
.hero::before{
  content:""!important;display:block!important;position:absolute;left:50%;bottom:-30%;
  width:120%;height:70%;transform:translateX(-50%);z-index:1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(203,162,75,.14),transparent 70%)}
.hero-dedans{z-index:3}
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem)}
.hero-preuves{border-top:1px solid rgba(255,255,255,.08);padding-top:26px;margin-top:40px}
.hero-preuves b{font-family:"Fraunces",serif;font-weight:500;color:var(--champagne)}

/* ---------- Sections : alternance de noirs (fini le blanc générique) ---------- */
.sec-ivoire{background:var(--noir-2);color:var(--txt)}
.sec-ivoire h1,.sec-ivoire h2,.sec-ivoire h3{color:#fff}
.sec-ivoire .lead-l,.sec-ivoire .lead,.sec-ivoire p{color:var(--txt-doux)}
#avantages,#fonctionnement,.services,.booking,#faq{background:var(--noir-2);color:var(--txt)}
#avantages:nth-of-type(even),.services{background:var(--noir)}
#avantages h2,#fonctionnement h2,.services h2,.booking h2,#faq h2,
.sec-head h2{color:#fff}
.sec-head p,#avantages p,#fonctionnement p,.services p,.booking p{color:var(--txt-doux)}
section{position:relative}

/* Séparateur or discret entre sections */
#avantages,.compare,#fonctionnement,.services,.loyalty,.booking,.zones,#faq,.capture-band{
  border-top:1px solid rgba(255,255,255,.055)}

/* ---------- Le métier : table sombre ---------- */
.metier-table{background:var(--noir-3);border:1px solid var(--verre-bord)}
.mt-ligne{border-color:rgba(255,255,255,.07)}
.mt-ligne span{color:var(--txt-doux)}
.mt-entete{background:#0b1016}
.mt-nous{color:var(--champagne)!important;background:rgba(203,162,75,.10)}
.mt-entete .mt-nous{color:var(--or-clair)!important;background:rgba(203,162,75,.18)}
.metier-notes .bloc{background:var(--verre);border-color:var(--verre-bord)}
.metier-notes .bloc h3{color:#fff}
.metier-notes .bloc p{color:var(--txt-doux)}
.metier-notes .bloc em{color:var(--or-clair);font-style:normal}

/* ---------- Cartes génériques en verre sombre ---------- */
.card,.svc,.step,.cmp.them,.qa,.loy-card,.bc-item{
  background:var(--verre)!important;border:1px solid var(--verre-bord)!important;
  box-shadow:none!important;color:var(--txt)}
.card:hover,.svc:hover{border-color:rgba(203,162,75,.4)!important;background:rgba(203,162,75,.05)!important}
.card h3,.svc h3,.step h3,.cmp h3,.qa summary{color:#fff}
.card p,.svc p,.step p{color:var(--txt-doux)}
.card .ico,.svc .ico{background:rgba(203,162,75,.12)}
.step .num{color:var(--or);font-family:"Fraunces",serif}

/* Comparaison */
.compare{background:var(--noir)}
.cmp.us{background:linear-gradient(160deg,rgba(203,162,75,.14),rgba(203,162,75,.02));border:1px solid var(--or)}
.cmp.them li,.cmp.us li{border-color:rgba(255,255,255,.08);color:var(--txt-doux)}
.cmp.us li{color:var(--txt)}

/* FAQ */
#faq .qa{border-radius:14px;padding:4px 20px;margin-bottom:12px}
.qa summary{padding:16px 0;font-weight:600}
.qa div p{color:var(--txt-doux)}
.qa a{color:var(--or-clair)}

/* Fidélité */
.loyalty{background:linear-gradient(160deg,#0b1016,var(--noir))}
.loy-card{background:linear-gradient(135deg,#141b27,#0b1016)!important;border:1px solid var(--or)!important}
.loyalty h2,.loyalty p{color:#fff}
.loyalty p{color:var(--txt-doux)}
.pay-rail span{background:var(--verre);border:1px solid var(--verre-bord);color:var(--txt)}

/* ---------- Formulaires : champs sombres ---------- */
label,.dc-title{color:var(--champagne)}
input,select,textarea{
  background:rgba(255,255,255,.04)!important;border:1px solid var(--verre-bord)!important;
  color:#fff!important}
input::placeholder,textarea::placeholder{color:var(--txt-faible)!important}
input:focus,select:focus,textarea:focus{border-color:var(--or)!important;box-shadow:0 0 0 3px rgba(203,162,75,.18)!important}
select option{background:#0b1016;color:#fff}
.field-aide,.opt-lab{color:var(--txt-faible)}
.ok-msg.on{background:rgba(46,158,107,.12);border:1px solid rgba(46,158,107,.5)}
.ok-msg h4{color:#fff}
.ok-msg p{color:var(--txt-doux)}

/* ---------- Boutons : finition orfèvre ---------- */
.btn{border-radius:999px;letter-spacing:.01em}
.btn-or{background:linear-gradient(180deg,var(--or-clair),var(--or));color:#120d02;box-shadow:0 10px 30px rgba(203,162,75,.22)}
.btn-or:hover{background:linear-gradient(180deg,#f0d79a,var(--or-clair));transform:translateY(-2px)}
.btn-dark{background:#fff;color:#0a0a0a}
.btn-dark:hover{background:var(--champagne)}
.btn-outline{border-color:rgba(255,255,255,.4);color:#fff}
.btn-outline:hover{background:#fff;color:#0a0a0a}
.lien-or{color:var(--or-clair)}

/* ---------- Capture : bandeau or (ponctuation chaude) ---------- */
.capture-band{background:linear-gradient(135deg,var(--or),var(--or-sourd))}
.capture-band h2,.capture-inner h2{color:#120d02}
.capture-inner p{color:rgba(18,13,2,.72)}
.capture-band .btn-dark{background:#0a0a0a;color:#fff}

/* ---------- ESTIMATEUR : verre sombre cohérent ---------- */
.estim{background:var(--noir-2)}
.estim h2{color:#fff}
.search-card,.result,.result-empty,.detail-col,.zone-explain,.sheet,.veh-rail,.map-badge,.search-field,.tc,.pays,.opts{
  background:var(--verre)!important;border-color:var(--verre-bord)!important;color:var(--txt)}
.search-card{backdrop-filter:blur(10px)}
.estim .price,.result-head .price{color:var(--or-clair)}
.dc-title{color:var(--champagne)}
.result-empty b,.result-head,.trip-meta,.detail,.chaine{color:var(--txt)}
.zone-explain h3{color:#fff}
.zone-explain p{color:var(--txt-doux)}
.ze-list li{color:var(--txt-doux)}
.ze-list li b{color:#fff}
.disclaimer{color:var(--txt-faible)}
.mode{color:var(--txt-doux)}
.mode.on{color:#120d02;background:var(--or)}
.ac-list{background:#0b1016;border:1px solid var(--verre-bord)}
.shortcuts button,.sc{background:var(--verre);border:1px solid var(--verre-bord);color:var(--txt)}

/* La carte garde ses couleurs réelles (lisibilité itinéraire) */
#movely-map{filter:saturate(.9) brightness(.92)}

/* ---------- Zones (déjà sombre, on raffine sur le noir) ---------- */
.zones{background:var(--noir)}
.zstat b{font-family:"Fraunces",serif;font-weight:500}

/* ---------- Footer ---------- */
footer{background:#070a0f;border-top:1px solid rgba(255,255,255,.06)}
footer p,footer a{color:var(--txt-doux)}
footer a:hover{color:var(--or-clair)}
footer h4,footer h3{color:#fff;font-family:"Fraunces",serif;font-weight:500;line-height:1.6;letter-spacing:normal}

/* ---------- Révélations douces (classe .rv posée par motion.js) ---------- */
.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.16,.8,.24,1),transform .9s cubic-bezier(.16,.8,.24,1)}

/* ---------- Respect « animations réduites » ---------- */
@media (prefers-reduced-motion:reduce){
  #grain{display:none}
  .rv{opacity:1!important;transform:none!important}
}

/* ---------- Correctifs conteneurs internes (anti texte-clair-sur-blanc) ---------- */
/* Formulaire de réservation */
form.book{background:var(--verre)!important;border:1px solid var(--verre-bord)!important;box-shadow:none!important}
.bc-item .ico{background:rgba(255,255,255,.07)!important;box-shadow:none!important;color:#fff}

/* Estimateur — onglets, champs, véhicules, paiements, chaîne */
.modes{background:rgba(255,255,255,.05)!important}
.mode{color:var(--txt-doux)}
.mode:hover{color:#fff}
.mode.on{background:var(--or)!important;color:#120d02!important;box-shadow:none!important}
.geo-btn{background:rgba(255,255,255,.08)!important;color:#fff}
.geo-btn:hover{background:var(--or)!important;color:#120d02!important}
.swap-btn,.sheet-open,.chip,.veh,.tc,.pay,.ch{
  background:var(--verre)!important;border-color:var(--verre-bord)!important;color:var(--txt)!important}
.swap-btn:hover,.sheet-open:hover,.chip:hover{border-color:var(--or)!important}
.veh:hover,.tc:hover,.pay:hover{border-color:var(--or-clair)!important}
.veh.on,.pay.on,.tc:has(input:checked){border-color:var(--or)!important;background:rgba(203,162,75,.10)!important}
.veh-body .vn{color:#fff}
.veh-body .vx,.pay .pn{color:var(--txt-doux)}
.veh-body .vp,.pay .pl b{color:var(--or-clair)}
.pay .pl{color:#fff}
.chaine{background:rgba(255,255,255,.04)!important;border-color:var(--verre-bord)!important}
.ch-in{color:#5fd39b!important;background:rgba(46,158,107,.14)!important;border-color:rgba(46,158,107,.4)!important}

/* Feuille Options (bottom sheet) */
.sheet{background:#0b1016!important;color:var(--txt)!important;border:1px solid var(--verre-bord)}
.sheet h3,.sheet-head h3{color:#fff}

/* Espace client (panneau latéral) */
.espace{background:#0b1016!important;color:var(--txt)!important;border-left:1px solid var(--verre-bord)}
.espace h3,.espace-head h3,.espace-head h2{color:#fff;font-family:"Fraunces",serif}
.es,.esp-vide{background:var(--verre)!important;border-color:var(--verre-bord)!important;color:var(--txt)!important}
.esp-rep{background:rgba(255,255,255,.08)!important;color:var(--txt)!important}
.es b{color:#fff}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .hero h1{font-size:clamp(2.2rem,9vw,3.4rem)}
}