/* =====================================================================
   base.css — thème taxi (commun à toutes les marques). Seuls --accent et
   --on-accent changent par client (injectés par lib/css.js depuis config).
   Mobile-first. Bloc fluidité tactile intégré. Zéro dépendance.
   ===================================================================== */

/* ============ TOKENS ============ */
:root{
  --bg:#0d1015; --surface:#161b23; --surface-2:#1e2530; --surface-3:#28303c;
  --text:#eef1f5; --muted:#9aa3b0; --line:rgba(255,255,255,.10);
  --accent:#3b6ef5;
  --accent-strong:color-mix(in srgb, var(--accent) 82%, black);
  --accent-soft:color-mix(in srgb, var(--accent) 16%, transparent);
  --on-accent:#ffffff;
  --good:#22c55e; --danger:#f87171; --focus:var(--accent);

  --fd:"Archivo","Helvetica Neue",Arial,sans-serif;
  --fb:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --step--1:clamp(.83rem,.80rem + .15vw,.92rem);
  --step-0 :clamp(1rem,.96rem + .20vw,1.06rem);
  --step-1 :clamp(1.2rem,1.10rem + .50vw,1.40rem);
  --step-2 :clamp(1.55rem,1.30rem + 1.2vw,2.20rem);
  --step-3 :clamp(2.1rem,1.60rem + 2.6vw,3.40rem);
  --step-4 :clamp(2.5rem,1.75rem + 4.0vw,4.30rem);

  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --maxw:1140px; --gutter:clamp(16px,5vw,22px);
  --r-1:10px; --r-2:14px; --r-3:18px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.3);
  --sh-2:0 10px 34px rgba(0,0,0,.5);
  --sh-focus:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);

  --tap:48px; --tap-lg:54px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --header-h:64px;
  --bar-h:calc(var(--tap-lg) + 20px + var(--safe-b));
}

/* ============ RESET MOBILE-FIRST ============ */
*{box-sizing:border-box; margin:0; min-width:0}
html{background:var(--bg); scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden}
body{background:var(--bg); color:var(--text); font-family:var(--fb); font-size:var(--step-0);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-bottom:var(--bar-h)}
@media(min-width:720px){ body{padding-bottom:0} }
h1,h2,h3,h4{font-family:var(--fd); line-height:1.1; letter-spacing:-.02em; text-wrap:balance; margin:0}
a{color:inherit; text-decoration:none}
img,svg,video{max-width:100%; height:auto; display:block}
ul{list-style:none; padding:0; margin:0}
[id]{scroll-margin-top:calc(var(--header-h) + 12px)}
.muted{color:var(--muted)} .sm{font-size:var(--step--1)} .center{text-align:center}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.narrow{max-width:820px}
:where(a,button,summary,input,select,textarea):focus-visible{outline:none; box-shadow:var(--sh-focus); border-radius:var(--r-1)}
.ic{width:1.2em; height:1.2em; flex:0 0 auto; vertical-align:-.16em}

/* skip link */
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:var(--r-1)}
.skip:focus{left:12px}

/* ====== BLOC FLUIDITÉ TACTILE (correctif clé) ====== */
a,button,summary,label,.chip,.card,input,select,textarea,[role="button"]{ -webkit-tap-highlight-color:transparent }
a,button,summary,[role="button"],.chip{ touch-action:manipulation }
.btn:active,.chip:active,.card-link:active,.action-bar a:active,.stepper button:active,.seg-b:active,.est-chip:active{ transform:scale(.98); filter:brightness(.96) }
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{filter:brightness(1.08)}
  .btn-ghost:hover{border-color:var(--accent); color:var(--text)}
  .chip:hover{border-color:var(--accent)}
  .card-link:hover{border-color:var(--accent); transform:translateY(-3px)}
  .nav-links a:hover{color:var(--text)}
  .est-chip:hover{border-color:var(--accent)}
  .lang a:hover{color:var(--text)}
  .foot-col a:hover,.foot-contact a:hover{color:var(--text)}
}
@media (hover:none){
  .btn-primary:hover,.btn-ghost:hover,.chip:hover,.card-link:hover{transform:none; filter:none}
  .btn-primary:hover{background:var(--btn-grad)}
}

/* ====== BOUTONS ====== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:var(--tap);
  font-family:var(--fd); font-weight:700; font-size:var(--step-0); padding:.8em 1.4em;
  border-radius:var(--r-2); cursor:pointer; border:1px solid transparent;
  transition:transform .12s, filter .15s, background .18s, border-color .18s}
.btn-primary{background:var(--btn-grad); color:var(--on-btn); box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 32%, transparent)}
.btn-ghost{background:rgba(255,255,255,.05); color:var(--text); border-color:var(--line)}
.btn-lg{padding:.95em 1.7em; font-size:1.05rem}
.btn-sm{padding:.55em 1em; font-size:var(--step--1); min-height:auto}
.btn-block{width:100%}

/* ====== HEADER ====== */
header{position:sticky; top:0; z-index:40; height:var(--header-h); display:flex; align-items:center;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%}
.brand{display:flex; align-items:center; gap:.5em; font-family:var(--fd); font-weight:800; font-size:1.3rem; letter-spacing:-.02em}
.brand .dot{flex:0 0 auto; width:11px; height:11px; border-radius:3px; background:var(--accent); box-shadow:0 0 14px var(--accent)}
.brand .wm{white-space:nowrap}
.brand .gr{background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.nav-links{display:flex; align-items:center; gap:1.05em; font-size:.93rem; color:var(--muted); white-space:nowrap}
.nav-links > a{white-space:nowrap}
.nav-links a.active{color:var(--accent)}
.nav-cta{display:flex; align-items:center; gap:.5em}
.nav-cta > *{flex-shrink:0}
.nav-cta .btn-ghost{white-space:nowrap}
.lang{display:inline-flex; gap:2px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px}
.lang a{font-size:.8rem; font-weight:700; color:var(--muted); padding:5px 9px; border-radius:var(--r-pill); line-height:1}
.lang a[aria-current="true"]{background:var(--accent); color:var(--on-accent)}
.lang.in-menu{display:none}
.lang.foot{margin-top:8px}
@media(max-width:400px){ .brand{font-size:1.12rem} .nav-cta .lang a{padding:5px 7px; font-size:.76rem} }
@media(min-width:961px) and (max-width:1180px){ .nav-cta .btn-ghost span{display:none} .nav-cta .btn-ghost{padding:.8em .95em} }
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:var(--tap); height:var(--tap); background:none; border:none; cursor:pointer; padding:12px}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s, opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-only{display:none}
body.nav-open{overflow:hidden}
@media(max-width:960px){
  .nav-toggle{display:flex}
  .nav-cta > .btn{display:none}
  .nav-cta > .lang.desk{display:inline-flex}
  .nav-links{position:fixed; top:var(--header-h); left:0; right:0; z-index:35; flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--sh-2);
    transform:translateY(-140%); transition:transform .32s cubic-bezier(.4,0,.2,1);
    max-height:calc(100dvh - var(--header-h)); overflow-y:auto; padding:6px var(--gutter) 22px}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:15px 4px; font-size:1.06rem; border-bottom:1px solid var(--line); color:var(--text)}
  .nav-links .btn{border-bottom:none; margin-top:14px; justify-content:center}
  .mob-only{display:inline-flex}
  .lang.in-menu{align-self:flex-start; margin:14px 0 4px}
}

/* ====== HERO ====== */
.hero{position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:flex-start; overflow:hidden; padding:calc(var(--header-h) + clamp(28px,5vh,56px)) 0 64px}
.hero-bg{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 78% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(90% 60% at 110% 110%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 55%),
    linear-gradient(180deg, #0b0f16 0%, #0d1219 45%, #090c12 100%)}
.hero-bg::after{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--text) 5%, transparent) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 0%, #000, transparent 75%);
  mask-image:radial-gradient(80% 70% at 50% 0%, #000, transparent 75%)}
.hero-in{position:relative; z-index:2; max-width:760px}
.badge{display:inline-flex; align-items:center; gap:.55em; background:rgba(255,255,255,.06);
  border:1px solid var(--line); padding:.42em .9em; border-radius:var(--r-pill); font-size:.82rem;
  color:var(--text); margin-bottom:20px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.badge .pulse{width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.hero h1{font-size:var(--step-4); font-weight:800; max-width:15ch}
.hero .lead{color:#cdd5e0; font-size:clamp(1.05rem,2vw,1.25rem); margin:18px 0 26px; max-width:46ch}
.cta{display:flex; gap:.7em; flex-wrap:wrap}
.trust{display:flex; gap:.6em 1.4em; flex-wrap:wrap; margin-top:26px; color:var(--muted); font-size:.9rem}
.trust li{display:flex; align-items:center; gap:.45em}
.trust .ic{color:var(--good)}
.hero--photo .hero-photo{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center}
.hero--photo .hero-veil{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(13,16,21,.62),rgba(13,16,21,.9)), linear-gradient(90deg,rgba(13,16,21,.92),rgba(13,16,21,.28) 72%)}

/* ====== ANIMATION TAXI (hero, décorative, CSS pur) ====== */
.hero-taxi{position:absolute; left:0; right:0; top:calc(var(--header-h) + 6px); bottom:auto; height:94px; z-index:1; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
@media(min-width:721px){ .hero-taxi{top:auto; bottom:var(--header-h); height:118px} }
.hero-taxi .road{position:absolute; left:0; right:0; bottom:30px; height:2px;
  background:repeating-linear-gradient(90deg, color-mix(in srgb,var(--text) 20%,transparent) 0 24px, transparent 24px 48px)}
.hero-taxi .road::after{content:""; position:absolute; left:0; right:0; top:6px; height:1px; background:color-mix(in srgb,var(--text) 8%,transparent)}
.hero-taxi .drive{position:absolute; bottom:20px; left:0; width:150px; will-change:transform; animation:taxi-drive 18s linear infinite}
.hero-taxi .taxi{width:150px; height:auto; display:block; animation:taxi-bob 1.1s ease-in-out infinite alternate; filter:drop-shadow(0 7px 9px rgba(0,0,0,.45))}
.hero-taxi .tx-body{fill:#1c2330; stroke:color-mix(in srgb,var(--accent) 55%, #2b3444); stroke-width:2; stroke-linejoin:round}
.hero-taxi .tx-glass{fill:color-mix(in srgb,var(--accent) 24%, #0e131b)}
.hero-taxi .tx-sign{fill:var(--accent)}
.hero-taxi .tx-txt{fill:var(--on-accent); font-family:var(--fd); font-weight:800; font-size:8px; letter-spacing:.4px}
.hero-taxi .tx-tire{fill:#0c0f14; stroke:color-mix(in srgb,var(--text) 28%,transparent); stroke-width:2.4}
.hero-taxi .tx-rim{fill:color-mix(in srgb,var(--accent) 70%, #d3dae4)}
.hero-taxi .tx-hub{stroke:#0c0f14; stroke-width:2}
.hero-taxi .tx-light{fill:#fff3c4}
.hero-taxi .tx-beam{fill:var(--accent); opacity:.16}
.hero-taxi .wheel{transform-box:fill-box; transform-origin:center; animation:taxi-wheel 1.05s linear infinite}
@keyframes taxi-drive{ from{transform:translateX(-180px)} to{transform:translateX(calc(100vw + 60px))} }
@keyframes taxi-bob{ from{transform:translateY(0)} to{transform:translateY(-2.5px)} }
@keyframes taxi-wheel{ to{transform:rotate(360deg)} }
@media(max-width:720px){ .hero{padding-top:calc(var(--header-h) + 108px); padding-bottom:44px} }
@media(max-width:560px){
  .hero-taxi{height:92px}
  .hero-taxi .drive,.hero-taxi .taxi{width:104px}
  .hero-taxi .road{bottom:24px}
  .hero-taxi .drive{bottom:14px; animation-duration:13s}
}
@media (min-width:721px) and (max-height:879px){ .hero-taxi{display:none} }
@media (prefers-reduced-motion:reduce){
  .hero-taxi .drive{animation:none; transform:translateX(9vw)}
}

/* ====== ESTIMATEUR ====== */
.est{background:color-mix(in srgb,var(--surface) 82%, transparent); border:1px solid var(--line); border-radius:var(--r-3);
  padding:14px; margin:8px 0 24px; max-width:560px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.est-row{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-2); padding:6px 6px 6px 12px}
.est-ic{display:flex; color:var(--muted)}
.est-row input{flex:1; background:none; border:none; color:var(--text); font-size:var(--step-0); font-family:inherit; padding:.6em 0; min-width:0}
.est-row input:focus{outline:none}
.est-row .btn{flex:0 0 auto; min-height:44px; padding:.6em 1.1em}
.est-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.est-chip{background:var(--surface-2); border:1px solid var(--line); color:var(--muted); padding:.5em .9em; border-radius:var(--r-pill); font-size:.85rem; font-family:inherit; cursor:pointer}
.estimate{min-height:0; overflow:hidden; opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s, min-height .2s; margin-top:0}
.estimate.show{opacity:1; transform:none; min-height:56px; margin-top:12px}
.estimate .e-in{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-2); padding:12px 14px}
.estimate .price{font-family:var(--fd); font-weight:800; font-size:var(--step-2); color:var(--text)}
.estimate .fixed{color:var(--good); font-weight:700; font-size:var(--step--1); display:inline-flex; align-items:center; gap:.3em}
.estimate .note{color:var(--muted); font-size:var(--step--1); flex-basis:100%}
@media(max-width:560px){
  .est-row{flex-wrap:wrap}
  .est-row .btn{flex:1 1 100%; margin-top:8px}
}

/* ====== SECTIONS ====== */
section{padding:clamp(56px,9vw,92px) 0; position:relative}
section.alt{background:var(--surface)}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
.eyebrow{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:800}
.sec-head{max-width:60ch; margin-bottom:38px}
.sec-head h2{font-size:var(--step-2); font-weight:800; margin-top:10px}
.sec-head p{color:var(--muted); margin-top:12px; font-size:1.04rem}
.lead-p{font-size:clamp(1.1rem,2vw,1.28rem); color:#d3dae4; max-width:60ch}

/* grilles + cartes */
.grid{display:grid; gap:16px}
.g2{grid-template-columns:1fr} .g3{grid-template-columns:1fr} .g4{grid-template-columns:1fr}
@media(min-width:560px){ .g4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:860px){ .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} }
.card{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-3); padding:26px; contain:content}
section.alt .card{background:var(--bg)}
.card h3{font-size:1.2rem; font-weight:700; margin-bottom:8px}
.card p{color:var(--muted); font-size:.98rem}
.card-link{display:flex; flex-direction:column; transition:border-color .16s, transform .14s}
.card-link .go{color:var(--accent); font-weight:700; font-size:.9rem; margin-top:auto; padding-top:14px; display:inline-block}
.tile{width:46px; height:46px; border-radius:var(--r-2); background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; margin-bottom:16px}
.tile .ic{width:24px; height:24px}

/* steps */
.steps .step{position:relative; padding-left:8px}
.step-n{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:var(--r-pill); background:var(--accent); color:var(--on-accent); font-family:var(--fd); font-weight:800; margin-bottom:14px}

/* air cards */
.air{gap:6px; padding:22px}
.air-top{display:flex; align-items:center; gap:.5em; font-family:var(--fd); font-weight:700; font-size:1.06rem}
.air-top .ic{color:var(--accent)}
.air-price{font-family:var(--fd); font-size:1.7rem; font-weight:800; margin-top:4px}
.air-price small{font-size:.8rem; color:var(--muted); font-weight:500}
.air-price.sur{font-size:1.05rem; color:var(--muted)}
.air-dur{display:inline-flex; align-items:center; gap:.35em; color:var(--muted); font-size:.88rem}

/* chips */
.chip-group{display:flex; flex-wrap:wrap; gap:10px}
.chip-group.tight{gap:8px; margin:2px 0 14px}
.chip{display:inline-flex; align-items:center; gap:.4em; background:var(--surface-2); border:1px solid var(--line); color:var(--text); padding:.6em 1em; border-radius:var(--r-pill); font-size:.92rem; cursor:pointer; font-family:inherit; transition:border-color .15s, transform .1s}
section.alt .chip{background:var(--bg)}
.chip-all{color:var(--accent); font-weight:700}

/* fleet */
.fleet-meta{display:flex; align-items:center; gap:1em; color:var(--muted); font-size:.9rem; margin-top:12px}
.fleet-meta .ic{color:var(--accent)}

/* reviews */
.rev{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-3); padding:24px}
.rev .stars{color:var(--accent); letter-spacing:.12em; margin-bottom:10px}
.rev blockquote{font-size:1rem; margin:0 0 12px}
.rev figcaption{font-size:.88rem; color:var(--muted)}

/* faq */
.faq{max-width:820px; margin:0 auto}
details.q{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-2); padding:0 20px; margin-bottom:12px}
section.alt details.q{background:var(--bg)}
details.q summary{list-style:none; cursor:pointer; padding:18px 0; font-family:var(--fd); font-weight:700; font-size:1.04rem; display:flex; justify-content:space-between; align-items:center; gap:14px}
details.q summary::-webkit-details-marker{display:none}
.q-ic{flex:0 0 auto; width:16px; height:16px; position:relative}
.q-ic::before,.q-ic::after{content:""; position:absolute; background:var(--accent); border-radius:2px}
.q-ic::before{top:7px; left:0; width:16px; height:2px}
.q-ic::after{top:0; left:7px; width:2px; height:16px; transition:transform .2s}
details.q[open] .q-ic::after{transform:scaleY(0)}
details.q p{color:var(--muted); padding:0 0 18px}

/* page hero (sous-pages) */
.page-hero{padding:calc(var(--header-h) + 30px) 0 46px; border-bottom:1px solid var(--line);
  background:radial-gradient(120% 130% at 82% -20%, var(--accent-soft), transparent 55%), linear-gradient(180deg,var(--surface),var(--bg))}
.page-hero h1{font-size:var(--step-3); font-weight:800; margin:10px 0}
.page-hero p{color:var(--muted); font-size:1.1rem; max-width:56ch}
.page-hero .cta{margin-top:22px}
.crumbs{color:var(--muted); font-size:.85rem; display:flex; gap:.5em; flex-wrap:wrap; align-items:center}
.crumbs a{color:var(--muted)} .crumbs .sep{opacity:.5}

/* detail (aéroport/trajet) */
.detail-grid{display:grid; gap:24px}
@media(min-width:860px){ .detail-grid{grid-template-columns:1.3fr .7fr; align-items:start} }
.ticks{display:grid; gap:12px; margin-top:20px}
.ticks li{display:flex; gap:.6em; color:#d3dae4} .ticks .ic{color:var(--good); margin-top:.2em}
.pricebox{background:var(--surface-2); border:1px solid var(--accent); border-radius:var(--r-3); padding:26px; display:flex; flex-direction:column; gap:8px; box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 18%, transparent)}
.pb-from{color:var(--muted); font-size:.85rem} .pb-amt{font-family:var(--fd); font-weight:800; font-size:2.6rem; line-height:1} .pb-amt.sur{font-size:1.15rem; color:var(--muted)}
.pb-fixed{color:var(--good); font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:.35em}
.pb-note{color:var(--muted); font-size:.9rem; display:inline-flex; align-items:center; gap:.35em}
.pricebox .btn{margin-top:8px}
.poi-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.poi{display:inline-flex; align-items:center; gap:.35em; color:var(--muted); font-size:.9rem; background:var(--surface); border:1px solid var(--line); padding:.4em .8em; border-radius:var(--r-pill)}
.legal-body p{margin-bottom:14px; color:#c9d1dc} .legal-body h2{margin:26px 0 10px; font-size:1.3rem}

/* ====== MODULE RÉSERVATION ====== */
.book{background:var(--surface)}
.book-grid{display:grid; gap:18px}
@media(min-width:860px){ .book-grid{grid-template-columns:1.15fr .85fr; align-items:start} }
.form{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-3); padding:26px}
.form-h{font-size:1.5rem; margin:8px 0 6px}
.field{margin-bottom:14px}
.field label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--text); border-radius:var(--r-1); padding:.8em .9em; font-size:16px; font-family:inherit}
.field textarea{resize:vertical; min-height:70px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:transparent; box-shadow:var(--sh-focus)}
.field .err{color:var(--danger); font-size:var(--step--1); margin-top:5px; min-height:0}
.field.invalid input,.field.invalid textarea{border-color:var(--danger)}
.hint{display:block; color:var(--muted); font-size:var(--step--1); margin-top:5px}
.two{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:560px){ .two{grid-template-columns:1fr 1fr} }
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-1); padding:3px; width:100%}
.seg-b{flex:1; background:none; border:none; color:var(--muted); font-family:inherit; font-size:.95rem; padding:.55em; border-radius:8px; cursor:pointer; min-height:44px}
.seg-b.active{background:var(--accent); color:var(--on-accent); font-weight:700}
.stepper{display:inline-flex; align-items:center; gap:8px; width:100%}
.stepper button{width:var(--tap); height:var(--tap); flex:0 0 auto; border-radius:var(--r-1); background:var(--surface-2); border:1px solid var(--line); color:var(--text); font-size:1.4rem; cursor:pointer; display:grid; place-items:center}
.stepper input{flex:1; text-align:center; background:var(--surface-2); border:1px solid var(--line); color:var(--text); border-radius:var(--r-1); padding:.7em; font-size:16px; font-family:var(--fd); font-weight:700}
.check{display:flex; align-items:center; gap:.6em; color:var(--muted); font-size:.95rem; padding:.4em 0}
.check input{width:20px; height:20px; accent-color:var(--accent)}
.more-toggle{background:none; border:none; color:var(--accent); font-family:inherit; font-weight:700; font-size:.95rem; cursor:pointer; padding:6px 0; margin:2px 0 10px}
.more{border-top:1px solid var(--line); padding-top:14px; margin-bottom:8px}
.or-call{text-align:center; margin-top:10px}
.book-success{background:color-mix(in srgb,var(--good) 12%, var(--surface-2)); border:1px solid color-mix(in srgb,var(--good) 40%, var(--line)); border-radius:var(--r-2); padding:18px; margin-top:14px}
.book-success h3{color:var(--good); font-size:1.1rem; margin-bottom:6px}
.aside{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-3); padding:26px}
.aside h3{font-size:1.2rem; margin-bottom:14px}
.aside-list{display:grid; gap:12px; margin-bottom:18px}
.aside-list li{display:flex; align-items:flex-start; gap:.6em; color:#d3dae4; font-size:.96rem}
.aside-list .ic{color:var(--accent); margin-top:.15em; flex:0 0 auto}

/* tables tarifs */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r-3); background:var(--surface-2)}
table.rates{width:100%; border-collapse:collapse; min-width:520px; font-size:.96rem}
table.rates th,table.rates td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line)}
table.rates th{font-family:var(--fd); font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
table.rates tr:last-child td{border-bottom:none}
table.rates .amt{font-family:var(--fd); font-weight:700; color:var(--accent)}

/* ====== FOOTER ====== */
footer{background:var(--surface); border-top:1px solid var(--line); padding:52px 0 0}
.foot{display:grid; gap:28px; grid-template-columns:1fr}
@media(min-width:720px){ .foot{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.foot-brand .brand{font-size:1.15rem} .foot-brand p{margin-top:10px; font-size:.94rem; max-width:34ch}
.foot-contact{display:flex; flex-direction:column; gap:6px; margin-top:12px}
.foot-contact a{display:inline-flex; align-items:center; gap:.4em; color:var(--muted); font-size:.92rem}
.soc{display:flex; gap:10px; margin-top:12px; text-transform:capitalize}
.foot-col h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:12px}
.foot-col a{display:block; color:var(--muted); font-size:.94rem; padding:5px 0}
.foot-bottom{padding:26px var(--gutter); margin-top:36px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem}

/* ====== BARRE D'ACTION MOBILE ====== */
.action-bar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:10px var(--gutter) calc(10px + var(--safe-b));
  background:color-mix(in srgb,var(--bg) 88%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line)}
.action-bar.has-wa{grid-template-columns:1fr 1fr auto}
.action-bar a{min-height:var(--tap-lg); display:flex; align-items:center; justify-content:center; gap:.5em; border-radius:var(--r-2); font-family:var(--fd); font-weight:800; font-size:1rem}
.action-bar .ab-call{background:var(--surface-2); color:var(--text); border:1px solid var(--line)}
.action-bar .ab-book{background:var(--btn-grad); color:var(--on-btn)}
.action-bar .ab-wa{background:#25d366; color:#fff; width:var(--tap-lg); padding:0}
@media(min-width:720px){ .action-bar{display:none} }

/* FAB WhatsApp (desktop surtout) */
.fab-wa{position:fixed; z-index:55; right:18px; bottom:calc(var(--bar-h) + 14px); width:54px; height:54px; border-radius:var(--r-pill); display:grid; place-items:center; background:#25d366; color:#fff; box-shadow:var(--sh-2)}
.fab-wa .ic{width:26px; height:26px}
@media(min-width:720px){ .fab-wa{bottom:22px} }
@media(max-width:719px){ .fab-wa{display:none} }

/* cookie */
.cookie{position:fixed; left:14px; right:14px; bottom:calc(var(--bar-h) + 14px); z-index:58; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-2); padding:14px 16px; display:flex; gap:14px; align-items:center; justify-content:space-between; box-shadow:var(--sh-2)}
@media(min-width:720px){ .cookie{max-width:420px; left:auto; right:22px; bottom:22px} }

/* ====== PERF ====== */
.card,.rev,.air,.pricebox{contain:content}
section:not(.hero):not(.page-hero){content-visibility:auto; contain-intrinsic-size:auto 640px}

/* ====== MOUVEMENT RÉDUIT ====== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .reveal,.estimate{opacity:1; transform:none}
}

/* ===== override marque (couleur + police + dégradés logo/boutons) ===== */
:root{--accent:#1ebbbe;--on-accent:#04211d;--accent-grad:linear-gradient(92deg,#1ebbbe 0%,#20a6e6 38%,#6b4bf2 72%,#c026d3 100%);--btn-grad:linear-gradient(95deg,#2b7ae8 0%,#4f63ee 42%,#8b40e0 76%,#b02fce 100%);--on-btn:#ffffff;--fd:"Archivo","Helvetica Neue",Arial,sans-serif;--fb:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}