/* ============================================================
   MILLE & UNE PISTES — Édition Immersive
   Design system mobile-first, tokenisé · v2 (refonte 2026)
   --------------------------------------------------------
   Sommaire :
   01. Tokens (:root)        06. Header / Nav (mobile-first)
   02. Reset & base          07. Splash screen
   03. Typographie           08. Hero immersif (vidéo-ready)
   04. Layout primitives     09. Sections accueil
   05. Composants UI         10. Footer + barre d'action mobile
                             11. Animations & reveals · reduced-motion
   ============================================================ */

/* ====== 01. TOKENS ========================================= */
:root{
  /* — Couleurs de marque (conservées) — */
  --clay:#C75B39;        --clay-deep:#8E3416;   --clay-soft:#E08A6B;
  --ochre:#D98E32;       --gold:#C9A24B;        --gold-soft:#E3C77E;
  --majorelle:#2C4B9B;   --majorelle-soft:#5B79CF;
  /* terracotta assombrie pour les PETITS textes sur fond clair (contraste AA ≥ 4.5:1) */
  --accent-text:#A8431E;
  --ink:#1B130D;         --ink-2:#2A1E14;       --ink-3:#3A2A1C;
  --sand:#F3E9D7;        --cream:#FBF5EA;        --paper:#FDFAF3;
  --muted:#6F5F4E;       --muted-2:#8A7A66;
  --line:rgba(27,19,13,.12);
  --line-strong:rgba(27,19,13,.2);
  --white:#fff;
  --wa:#25D366;

  /* — Surfaces sémantiques — */
  --bg:var(--paper);
  --bg-warm:var(--cream);
  --fg:var(--ink);
  --fg-soft:var(--muted);

  /* — Dégradés signature — */
  --grad-clay:linear-gradient(135deg,var(--clay),var(--clay-deep));
  --grad-sun:linear-gradient(135deg,var(--gold-soft),var(--ochre) 55%,var(--clay));
  --grad-night:linear-gradient(180deg,rgba(27,19,13,0) 0%,rgba(27,19,13,.55) 60%,rgba(20,13,8,.92) 100%);
  --grad-mark:linear-gradient(135deg,var(--gold-soft),var(--clay));

  /* — Typo — */
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Jost",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* échelle fluide nommée */
  --fs-700:clamp(2.9rem,8.5vw,7.5rem);   /* hero h1 */
  --fs-600:clamp(2.3rem,5.6vw,4.4rem);   /* h1 pages / h2 forts */
  --fs-500:clamp(1.95rem,4.4vw,3.3rem);  /* h2 sections */
  --fs-400:clamp(1.35rem,2.4vw,1.9rem);  /* h3 */
  --fs-300:clamp(1.12rem,1.6vw,1.32rem); /* h4 / lead */
  --fs-body:1.04rem;
  --fs-sm:.92rem;
  --fs-xs:.78rem;
  --fs-eyebrow:.74rem;

  /* — Espacements (échelle) — */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --gut:clamp(18px,5vw,28px);          /* gouttière latérale */
  --sec-y:clamp(56px,9vw,128px);        /* respiration verticale des sections */
  --maxw:1240px;
  --maxw-narrow:880px;

  /* — Rayons — */
  --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:26px; --r-xl:34px; --r-pill:999px;

  /* — Ombres — */
  --sh-sm:0 8px 24px -14px rgba(27,19,13,.4);
  --sh:0 22px 50px -24px rgba(27,19,13,.42);
  --sh-lg:0 40px 90px -36px rgba(27,19,13,.5);
  --sh-gold:0 28px 60px -28px rgba(142,52,22,.42);

  /* — Mouvement — */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --t-fast:.22s;  --t:.4s;  --t-slow:.7s;  --t-rev:.9s;

  /* — Couches (z-index) — */
  /* scrim SOUS la nav (190 < 200) : le drawer, imbriqué dans <nav> (contexte 200),
     reste ainsi au-dessus du voile. */
  --z-scrim:190; --z-nav:200; --z-drawer:250; --z-actionbar:180;
  --z-overlay:900; --z-lightbox:1000; --z-splash:3000; --z-toast:3200;

  /* — Motifs SVG inline (réutilisables via background) — */
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C9A24B' d='M12 2c.4 4.6 2.4 6.6 7 7-4.6.4-6.6 2.4-7 7-.4-4.6-2.4-6.6-7-7 4.6-.4 6.6-2.4 7-7z'/%3E%3C/svg%3E");
  --zellige:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23E3C77E' stroke-width='1' opacity='.6'%3E%3Cpath d='M30 0l30 30-30 30L0 30z'/%3E%3Cpath d='M30 14l16 16-16 16-16-16z'/%3E%3Ccircle cx='30' cy='30' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ====== 02. RESET & BASE ================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* quand le drawer / un overlay est ouvert */
body.no-scroll{overflow:hidden}
/* pendant le splash, on bloque le scroll */
body.splash-lock{overflow:hidden}

img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul{list-style:none;padding:0}
:focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:4px}
::selection{background:var(--clay);color:#fff}

/* Smooth-scroll JS (Lenis) — désactive le natif quand actif */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ====== 03. TYPOGRAPHIE ==================================== */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:var(--fs-600)}
h2{font-size:var(--fs-500)}
h3{font-size:var(--fs-400)}
h4{font-size:var(--fs-300);font-weight:600}
p{text-wrap:pretty}
b,strong{font-weight:600}
em,.serif-it{font-style:italic}
.serif-it{font-family:var(--display);font-style:italic;font-weight:500}

.eyebrow{
  font-family:var(--body);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--accent-text);
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:var(--sp-4);
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:currentColor;opacity:.6;
}
.eyebrow.no-rule::before{display:none}

.lead{font-size:var(--fs-300);color:var(--ink-2);line-height:1.55}
.muted{color:var(--fg-soft)}

/* ====== 04. LAYOUT PRIMITIVES ============================= */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap.narrow{max-width:var(--maxw-narrow)}
.sec{padding-block:var(--sec-y);position:relative}
.bg-cream{background:var(--cream)}
.bg-paper{background:var(--paper)}
.bg-sand{background:var(--sand)}
.bg-ink{background:var(--ink);color:var(--cream)}
.bg-ink h2,.bg-ink h3,.bg-ink h4{color:var(--cream)}

.sec-head{max-width:680px;margin-bottom:var(--sp-7)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p:last-child{color:var(--fg-soft);margin-top:var(--sp-3)}
.sec-head.center .eyebrow{justify-content:center}

.stack>*+*{margin-top:var(--sp-4)}

/* ====== 05. COMPOSANTS UI ================================= */
/* — Boutons — */
.btn{
  --bg:var(--clay);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:600;font-size:.96rem;
  letter-spacing:.01em;
  padding:15px 26px;min-height:52px;
  border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
  will-change:transform;
}
.btn svg{width:19px;height:19px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* éclat doré au survol */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translateX(-120%) skewX(-12deg);
  transition:transform var(--t-slow) var(--ease);
}
.btn:hover::after{transform:translateX(120%) skewX(-12deg)}
.btn-primary{--bg:var(--clay);box-shadow:var(--sh-gold)}
.btn-primary:hover{--bg:var(--clay-deep)}
.btn-dark{--bg:var(--ink);--fg:var(--cream)}
.btn-dark:hover{--bg:#000}
.btn-gold{--bg:var(--gold);--fg:var(--ink)}
.btn-ghost{--bg:transparent;--fg:var(--ink);border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--clay);color:var(--clay)}
.btn-ghost::after{display:none}
.btn-glass{
  --fg:#fff;background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.32);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn-glass:hover{background:rgba(255,255,255,.18)}
.btn-sm{padding:11px 18px;min-height:44px;font-size:.88rem}
.btn-block{display:flex;width:100%}

/* — Liens fléchés — */
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--accent-text);
  border-bottom:1.5px solid transparent;transition:gap var(--t-fast) var(--ease),border-color var(--t-fast)}
.link-arrow svg{width:18px;height:18px;transition:transform var(--t-fast) var(--ease)}
.link-arrow:hover{border-color:var(--clay)}
.link-arrow:hover svg{transform:translateX(4px)}

/* — Carte générique — */
.card{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(201,162,75,.45)}

/* — Pilule / badge — */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;
  padding:6px 14px;border-radius:var(--r-pill);
  background:rgba(199,91,57,.1);color:var(--clay-deep);
}
.pill.gold{background:rgba(201,162,75,.16);color:#8a6d1e}
.pill.blue{background:rgba(44,75,155,.12);color:var(--majorelle)}
.pill.glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* — Sélecteur de langue — */
.lang-switch{display:inline-flex;align-items:center;gap:2px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:3px;background:rgba(255,255,255,.06)}
.lang-switch button{padding:5px 11px;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;
  letter-spacing:.05em;color:inherit;opacity:.6;transition:all var(--t-fast) var(--ease)}
.lang-switch button.on{opacity:1;background:var(--clay);color:#fff}

/* ====== 06. HEADER / NAV (mobile-first) =================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;align-items:center;
  padding-block:14px;
  transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease),padding var(--t) var(--ease);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);width:100%}
.nav.scrolled{
  background:rgba(251,245,234,.82);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(27,19,13,.5);
  padding-block:9px;
}
/* sur fond clair (pages intérieures) la nav démarre déjà solide */
.nav.solid{background:rgba(251,245,234,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 var(--line)}

/* marque */
.brand{display:inline-flex;align-items:center;gap:11px;min-width:0}
.brand .mark{
  width:42px;height:42px;flex:none;border-radius:13px;
  background:var(--grad-mark);
  display:grid;place-items:center;box-shadow:var(--sh-sm);overflow:hidden;
}
.brand .mark svg{width:23px;height:23px}
.brand .mark img{width:100%;height:100%;object-fit:cover}
.brand .bt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand b{font-family:var(--display);font-weight:600;font-size:1.16rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600}
/* couleur de marque sur hero sombre (avant scroll) */
.nav:not(.scrolled):not(.solid) .brand b{color:#fff}
.nav:not(.scrolled):not(.solid) .brand small{color:rgba(255,255,255,.7)}

/* liens desktop */
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links>a:not(.btn){
  padding:9px 13px;border-radius:var(--r-pill);font-weight:500;font-size:.94rem;
  color:var(--ink);position:relative;transition:color var(--t-fast) var(--ease)}
.nav:not(.scrolled):not(.solid) .nav-links>a:not(.btn){color:rgba(255,255,255,.92)}
.nav-links>a:not(.btn)::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;
  background:var(--clay);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease)}
.nav-links>a:not(.btn):hover::after,.nav-links>a.active::after{transform:scaleX(1)}
.nav-links>a.active{color:var(--clay)}
.nav .btn{margin-left:6px}
.nav-tools{display:flex;align-items:center;gap:10px}

/* burger */
.nav-toggle{
  width:46px;height:46px;border-radius:13px;flex:none;
  display:none;place-items:center;position:relative;z-index:2;
  background:var(--clay);color:#fff;box-shadow:var(--sh-sm);
}
/* Verrou couleur du burger au scroll/solid : sans ça, sur fond crème flouté (iPhone),
   l'icône ☰ blanche se fondait dans la barre = illisible. */
.nav.scrolled .nav-toggle,.nav.solid .nav-toggle{background:var(--clay)!important;color:#fff!important;box-shadow:var(--sh-sm)}
.nav-toggle svg{width:24px;height:24px}

/* Mobile : drawer plein écran */
@media (max-width:1080px){
  .nav-toggle{display:grid}
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;
    width:min(86vw,360px);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;
    padding:88px var(--sp-5) var(--sp-6);
    background:var(--ink);color:var(--cream);
    box-shadow:-30px 0 80px -30px rgba(0,0,0,.6);
    transform:translateX(102%);
    transition:transform var(--t) var(--ease-out);
    overflow-y:auto;z-index:var(--z-drawer);
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links>a:not(.btn){color:var(--cream) !important;font-family:var(--display);font-size:1.5rem;
    padding:13px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-links>a:not(.btn)::after{display:none}
  .nav-links>a.active{color:var(--gold-soft) !important}
  .nav-links .btn{margin:var(--sp-4) 0 0;width:100%}
  .nav-links .lang-switch{margin-top:var(--sp-5);align-self:flex-start}
  /* voile derrière le drawer */
  .nav-scrim{position:fixed;inset:0;background:rgba(15,10,6,.5);opacity:0;visibility:hidden;
    backdrop-filter:blur(2px);transition:opacity var(--t) var(--ease);z-index:var(--z-scrim);}
  .nav-scrim.show{opacity:1;visibility:visible}
}

/* ====== 07. SPLASH SCREEN ================================= */
#splash{
  position:fixed;inset:0;z-index:var(--z-splash);
  display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 35%,#241a12,#140d08 70%);
  transition:opacity .7s var(--ease),visibility .7s;
}
#splash.gone{opacity:0;visibility:hidden;pointer-events:none}
.splash-in{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;padding:24px}
.splash-mark{position:relative;width:min(34vw,128px);aspect-ratio:1;display:grid;place-items:center}
.splash-mark svg{width:100%;height:100%;overflow:visible}
.splash-star{fill:none;stroke:var(--gold-soft);stroke-width:1.4;
  stroke-dasharray:240;stroke-dashoffset:240;
  animation:starDraw 1.6s var(--ease-out) forwards}
.splash-star.fill{animation:starDraw 1.6s var(--ease-out) forwards,starFill .9s 1.3s ease forwards}
.splash-ring{position:absolute;inset:-14%;border:1px solid rgba(201,162,75,.25);border-radius:50%;
  animation:splashPulse 2.4s var(--ease) infinite}
.splash-word{font-family:var(--display);font-size:clamp(1.7rem,5vw,2.6rem);color:var(--cream);
  letter-spacing:.02em;opacity:0;animation:fadeUp .9s .5s var(--ease-out) forwards}
.splash-word small{display:block;font-family:var(--body);font-size:.66rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold-soft);margin-top:8px;font-weight:600}
.splash-bar{width:120px;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;
  opacity:0;animation:fadeUp .6s .7s var(--ease-out) forwards}
.splash-bar i{display:block;height:100%;width:40%;background:var(--grad-sun);border-radius:2px;
  animation:splashLoad var(--splash-dur,4.2s) var(--ease) forwards}
@keyframes starDraw{to{stroke-dashoffset:0}}
@keyframes starFill{to{fill:rgba(201,162,75,.16)}}
@keyframes splashPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.08);opacity:.15}}
@keyframes splashLoad{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}

/* ====== 08. HERO IMMERSIF (vidéo-ready) =================== */
.hero{
  position:relative;min-height:100svh;min-height:100dvh;
  display:flex;align-items:safe flex-end;
  /* padding-top = hauteur de la nav : le contenu ne passe JAMAIS dessous */
  padding-top:clamp(92px,12vh,112px);
  padding-bottom:clamp(28px,7vh,72px);
  overflow:hidden;color:#fff;isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero-fallback{position:absolute;inset:0;background:var(--grad-clay)}
.hero-media img,.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* diaporama d'images (fond) — fondus enchaînés couvrant tout le cycle.
   nth-of-type : robuste même avec les éléments .hero-fallback / video voisins. */
.hero-slide{opacity:0;animation:heroFade 28s var(--ease-in-out) infinite}
.hero-slide:nth-of-type(1){animation-delay:-1s}
.hero-slide:nth-of-type(2){animation-delay:6s}
.hero-slide:nth-of-type(3){animation-delay:13s}
.hero-slide:nth-of-type(4){animation-delay:20s}
@keyframes heroFade{0%{opacity:0}3%{opacity:1}25%{opacity:1}30%{opacity:0}100%{opacity:0}}
/* vidéo prioritaire si présente (masque le diaporama) */
.hero-media.has-video .hero-slide{display:none}
.hero-video{opacity:0;transition:opacity 1s var(--ease)}
.hero-video.ready{opacity:1}

/* étalonnage cinéma + vignette */
.hero-grade{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(20,13,8,.45) 0%,rgba(20,13,8,0) 30%),
    linear-gradient(0deg,rgba(16,10,6,.86) 2%,rgba(16,10,6,.35) 42%,rgba(16,10,6,.12) 70%),
    radial-gradient(130% 90% at 70% 18%,rgba(199,91,57,.22),transparent 60%);
}
.hero-grain{position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:var(--zellige);background-size:120px}
.hero-media{transform-origin:center;will-change:transform}
/* halo lumineux qui suit le curseur (desktop) */
.hero-spot{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(280px 280px at var(--mx,50%) var(--my,40%),rgba(227,199,126,.16),transparent 70%);
  transition:background .2s linear}
[data-pll]{will-change:transform;transition:transform .15s var(--ease)}

.hero-in{position:relative;z-index:1;width:100%;display:grid;gap:var(--sp-6)}
.hero-eyebrow{color:var(--gold-soft)}
.hero-eyebrow .livedot{width:8px;height:8px;border-radius:50%;background:var(--gold-soft);
  box-shadow:0 0 0 0 rgba(227,199,126,.6);animation:livePulse 2.4s infinite;margin-right:2px}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(227,199,126,.5)}70%{box-shadow:0 0 0 10px rgba(227,199,126,0)}100%{box-shadow:0 0 0 0 rgba(227,199,126,0)}}
.hero h1{
  font-size:var(--fs-700);font-weight:500;color:#fff;line-height:.98;
  text-shadow:0 2px 30px rgba(0,0,0,.3);
  max-width:14ch;
}
.hero h1 .serif-it{color:var(--gold-soft)}
.hero .kick{max-width:54ch;font-size:clamp(1.02rem,1.5vw,1.22rem);color:rgba(255,255,255,.9);line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* chips de démarrage rapide */
.qstart{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:var(--sp-2)}
.qlabel{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-right:4px}
.qlabel svg{width:15px;height:15px}
.qchip{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:var(--r-pill);
  font-size:.86rem;font-weight:500;color:#fff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background var(--t-fast),transform var(--t-fast) var(--ease)}
.qchip:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.qchip .chip-st{width:14px;height:14px;color:var(--gold-soft)}

/* barre de stats en verre */
.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hero-stats .s{background:rgba(20,13,8,.28);padding:16px 18px;text-align:left}
.hero-stats b{font-family:var(--display);font-size:clamp(1.7rem,4.5vw,2.5rem);font-weight:600;
  color:#fff;display:block;line-height:1}
.hero-stats span{font-size:.74rem;color:rgba(255,255,255,.78);display:block;margin-top:5px;line-height:1.3}

/* carte avis flottante (desktop) */
.hero-card{display:none}

/* indice de scroll */
.scroll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;z-index:2;
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.scroll-hint i{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;
  background:var(--gold-soft);animation:scrollDot 1.8s var(--ease) infinite}
@keyframes scrollDot{0%{transform:translateY(-100%)}100%{transform:translateY(280%)}}

/* En-tête de page intérieure (hero court) */
.phead{position:relative;min-height:62svh;display:flex;align-items:safe flex-end;
  padding-top:clamp(92px,12vh,108px);
  padding-bottom:clamp(32px,6vh,64px);overflow:hidden;color:#fff;isolation:isolate}
.phead .hero-media,.phead .hero-grade,.phead .hero-grain{position:absolute}
.phead h1{font-size:var(--fs-600);color:#fff;max-width:18ch}
.phead .kick{max-width:56ch;color:rgba(255,255,255,.9);margin-top:var(--sp-3)}
.phead .hero-in{gap:var(--sp-4)}

/* ====== 09. SECTIONS ACCUEIL ============================== */
/* marquee défilant */
.marquee{background:var(--ink);color:var(--cream);overflow:hidden;padding:13px 0;
  border-block:1px solid rgba(255,255,255,.06);position:relative}
.marquee-track{display:flex;gap:0;width:max-content;animation:scrollx 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:16px;padding-inline:22px;
  font-family:var(--display);font-style:italic;font-size:1.18rem;color:var(--gold-soft);white-space:nowrap}
.marquee span::after{content:"✦";font-style:normal;font-size:.7rem;color:var(--clay);opacity:.8}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* bandeau confiance */
.trust-bar{background:var(--paper);border-bottom:1px solid var(--line)}
.trust-in{display:grid;grid-template-columns:1fr;gap:var(--sp-4);padding-block:var(--sp-6)}
.trust-item{display:flex;align-items:center;gap:13px}
.trust-item .ti-ic{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:rgba(199,91,57,.1);color:var(--clay)}
.trust-item .ti-ic svg{width:24px;height:24px}
.trust-item b{display:block;font-size:.96rem}
.trust-item small{color:var(--fg-soft);font-size:.82rem}

/* concept */
.concept-grid{display:grid;gap:var(--sp-7)}
.concept-cards{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.cc{padding:var(--sp-5);border-radius:var(--r);background:var(--white);border:1px solid var(--line);
  box-shadow:var(--sh-sm);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.cc:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.cc .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:var(--sp-3);
  background:var(--grad-sun);color:var(--ink)}
.cc .ic svg{width:25px;height:25px}
.cc:nth-child(2) .ic{background:linear-gradient(135deg,var(--majorelle-soft),var(--majorelle))}
.cc:nth-child(2) .ic svg{color:#fff}
.cc:nth-child(3) .ic{background:linear-gradient(135deg,var(--clay-soft),var(--clay))}
.cc:nth-child(3) .ic svg{color:#fff}
.cc h3,.cc h4{margin-bottom:6px;font-size:var(--fs-300);font-weight:600}
.cc p{font-size:var(--fs-sm);color:var(--fg-soft)}
.cc em{color:var(--accent-text);font-style:italic;font-weight:500}

/* fondateur */
.founder{background:linear-gradient(180deg,var(--cream),var(--paper));overflow:hidden}
.founder-grid{display:grid;gap:var(--sp-7)}
.founder-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/5;max-width:440px;margin-inline:auto;width:100%;
  background:var(--grad-clay);box-shadow:var(--sh-lg)}
.founder-photo img{width:100%;height:100%;object-fit:cover}
.founder-photo.noimg img{display:none}
.founder-initials{position:absolute;inset:0;display:none;place-items:center;
  font-family:var(--display);font-size:5rem;color:rgba(255,255,255,.5)}
.founder-photo.noimg .founder-initials{display:grid}
/* arche mauresque en surimpression */
.founder-photo::before{content:"";position:absolute;inset:12px;border:1.5px solid rgba(255,255,255,.4);
  border-radius:200px 200px var(--r) var(--r);pointer-events:none;z-index:2}
.founder-badge{position:absolute;left:18px;bottom:18px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-pill);font-size:.74rem;font-weight:700;letter-spacing:.08em;
  background:rgba(20,13,8,.6);color:#fff;border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.founder-badge svg{width:16px;height:16px;color:var(--gold-soft)}
.founder-copy .langs{display:grid;gap:var(--sp-3);margin:var(--sp-5) 0}
.founder-copy .lang{display:block;padding-left:16px;border-left:2.5px solid var(--clay)}
.founder-copy .lang b{font-size:1rem}
.founder-copy .lang small{display:block;color:var(--fg-soft);font-size:.84rem}
.founder-sign{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.7rem);
  color:var(--clay-deep);line-height:1.3;margin-bottom:var(--sp-5);position:relative;padding-left:18px}
.founder-sign::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:3px;background:var(--grad-sun)}
.founder-name{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--ink);
  line-height:1.1;margin-bottom:var(--sp-5)}
.founder-name span{display:block;font-family:var(--body);font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-top:5px}

/* rail de destinations (scroll-snap, swipe mobile) */
.city-rail{display:flex;gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--sp-4);margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);
  scrollbar-width:none}
.city-rail::-webkit-scrollbar{display:none}
.rail-card{position:relative;flex:0 0 78%;max-width:340px;scroll-snap-align:start;
  border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;color:#fff;
  box-shadow:var(--sh);background:var(--ink)}
.rail-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.rail-card:hover img{transform:scale(1.06)}
.rail-card::after{content:"";position:absolute;inset:0;background:var(--grad-night)}
.rail-card .rc-in{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  justify-content:flex-end;padding:var(--sp-5)}
.rail-card .rc-tag{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:6px}
.rail-card h3{color:#fff;font-size:1.5rem}
.rail-card p{font-size:.84rem;color:rgba(255,255,255,.82);margin-top:4px}

/* témoignages */
.testi-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.tcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-5);
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:var(--sp-3)}
.tcard .stars{color:var(--gold);letter-spacing:2px}
.tcard .tq{font-family:var(--display);font-style:italic;font-size:1.16rem;line-height:1.4;color:var(--ink-2)}
.tcard .tw{display:flex;flex-direction:column;margin-top:auto}
.tcard .tw b{font-size:.96rem}
.tcard .tw small{color:var(--fg-soft);font-size:.8rem}

/* partenaires */
.partners{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.partner{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-5);
  text-align:center;box-shadow:var(--sh-sm);transition:transform var(--t) var(--ease),box-shadow var(--t)}
.partner:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.partner .plogo{width:74px;height:74px;margin:0 auto var(--sp-3);border-radius:18px;display:grid;place-items:center;
  background:var(--sand);overflow:hidden}
.partner .plogo img{max-width:78%;max-height:78%;object-fit:contain}
.partner .ptag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.partner b{display:block;font-family:var(--display);font-size:1.3rem;margin:5px 0 7px}
.partner span{font-size:var(--fs-sm);color:var(--fg-soft)}
a.partner{text-decoration:none;color:inherit;display:block}
.partner .pvisit{display:inline-block;margin-top:12px;font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--accent-text)}
a.partner:hover .pvisit{text-decoration:underline}

/* FAQ */
.faq-wrap{max-width:var(--maxw-narrow)}
.faq{display:grid;gap:var(--sp-3)}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;transition:border-color var(--t) var(--ease)}
.faq details[open]{border-color:rgba(201,162,75,.5);box-shadow:var(--sh-sm)}
.faq summary{padding:18px 20px;font-family:var(--display);font-size:1.22rem;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-size:1.5rem;color:var(--clay);
  transition:transform var(--t) var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 20px 20px;color:var(--fg-soft);font-size:var(--fs-sm)}

/* CTA bandeau */
.cta{background:
    linear-gradient(rgba(16,10,6,.78),rgba(16,10,6,.86)),
    var(--ink);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background-image:var(--zellige);background-size:90px;opacity:.05}
.cta-in{position:relative;text-align:center;max-width:640px;margin-inline:auto;display:grid;gap:var(--sp-4);justify-items:center}
.cta-in h2{color:#fff;font-size:var(--fs-600)}
.cta-in .eyebrow{color:var(--gold-soft);justify-content:center}
.cta-in p{color:rgba(255,255,255,.85)}

/* ====== 9bis. PAGES VILLES ============================== */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.78rem;
  color:rgba(255,255,255,.78);margin-bottom:var(--sp-3)}
.breadcrumb a{color:rgba(255,255,255,.78);transition:color var(--t-fast)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{opacity:.5}
.breadcrumb b{color:var(--gold-soft);font-weight:600}
.phead .ptag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-3)}

.ville-intro{display:grid;gap:var(--sp-6)}
.ville-lead .eyebrow{color:var(--clay)}
.ville-lead .récit{font-size:var(--fs-300);color:var(--ink-2);line-height:1.65}
.ville-lead .récit+.récit{margin-top:var(--sp-4)}
.facts{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-5);box-shadow:var(--sh-sm);align-self:start}
.facts h3{margin-bottom:var(--sp-4);font-size:1.2rem;font-weight:600}
.facts .fact{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.facts .fact:last-child{border-bottom:0}
.facts .fact svg{width:20px;height:20px;flex:none;color:var(--clay);margin-top:2px}
.facts .fact b{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.facts .fact span{font-size:.96rem;color:var(--ink)}

.exp-cards{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.exp-card{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--sp-4);box-shadow:var(--sh-sm)}
.exp-card .n{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-sun);color:var(--ink);font-family:var(--display);font-weight:600;font-size:1.1rem}
.exp-card p{font-size:.98rem;color:var(--ink-2);padding-top:6px}

/* galerie */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.gallery figure{position:relative;margin:0;border-radius:var(--r-sm);overflow:hidden;cursor:zoom-in;
  aspect-ratio:4/3;background:var(--sand)}
.gallery figure.tall{grid-row:span 2;aspect-ratio:3/4}
.gallery figure.wide{grid-column:span 2;aspect-ratio:16/9}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;
  background:linear-gradient(transparent,rgba(20,13,8,.8));color:#fff;font-size:.78rem;
  opacity:0;transform:translateY(6px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.gallery figure:hover figcaption{opacity:1;transform:none}

/* mini-carte */
.ville-map{height:340px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh-sm);background:var(--sand)}
.leaflet-container{font-family:var(--body)}
.mup-pin{background:none;border:0}
/* crédit photo (attribution CC) discret en coin de hero */
.photo-credit{position:absolute;right:10px;bottom:8px;z-index:2;
  font-size:.62rem;letter-spacing:.02em;color:rgba(255,255,255,.6);
  background:rgba(20,13,8,.3);padding:3px 9px;border-radius:var(--r-pill);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);max-width:80vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ====== 9ter. PAGE DESTINATIONS ========================= */
.dest-map{height:clamp(380px,62vh,580px);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh);background:var(--sand)}
.map-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sp-4);font-size:.8rem;color:var(--fg-soft)}
.map-legend span{display:inline-flex;align-items:center;gap:7px}
.map-legend i{width:12px;height:12px;border-radius:50%;flex:none}

/* filtres régions */
.filter-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:var(--sp-6)}
.chip-f{padding:9px 17px;border-radius:var(--r-pill);font-size:.86rem;font-weight:600;
  background:var(--white);border:1.5px solid var(--line);color:var(--ink);
  transition:all var(--t-fast) var(--ease)}
.chip-f:hover{border-color:var(--clay);color:var(--clay)}
.chip-f.on{background:var(--clay);border-color:var(--clay);color:#fff}

/* grille de villes */
.cities-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.dcity{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  color:#fff;box-shadow:var(--sh-sm);background:var(--ink);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.dcity:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.dcity img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.dcity:hover img{transform:scale(1.07)}
.dcity::after{content:"";position:absolute;inset:0;background:var(--grad-night)}
.dcity .dc-in{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  justify-content:flex-end;padding:var(--sp-4)}
.dcity .dc-tag{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
.dcity h3{color:#fff;font-size:1.4rem;margin-top:3px}
.dcity .dc-go{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transform:translateY(-4px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.dcity:hover .dc-go{opacity:1;transform:none}
.dcity .dc-go svg{width:17px;height:17px}
.dcity.hide{display:none}
.gallery figure.hide{display:none}

/* ====== 10. FOOTER + BARRE D'ACTION MOBILE =============== */
footer{background:var(--ink);color:rgba(251,245,234,.82);position:relative;overflow:hidden;
  padding-block:var(--sp-8) var(--sp-6)}
footer::before{content:"";position:absolute;inset:0;background-image:var(--zellige);background-size:100px;opacity:.04}
.foot-grid{position:relative;display:grid;grid-template-columns:1fr;gap:var(--sp-6);
  padding-bottom:var(--sp-6);border-bottom:1px solid rgba(255,255,255,.1)}
footer .brand b{color:#fff}
footer .brand small{color:var(--gold-soft)}
footer .about{margin-top:var(--sp-3);font-size:var(--fs-sm);max-width:42ch;color:rgba(251,245,234,.7)}
footer h5{color:var(--gold-soft);font-family:var(--body);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:var(--sp-3)}
footer ul li{margin-bottom:9px}
footer ul a{color:rgba(251,245,234,.8);font-size:var(--fs-sm);transition:color var(--t-fast)}
footer ul a:hover{color:#fff}
.foot-bot{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:var(--sp-5);
  font-size:.78rem;color:rgba(251,245,234,.55)}
.foot-bot a{color:var(--gold-soft)}

/* WhatsApp flottant */
.wa-float{position:fixed;right:16px;bottom:84px;z-index:var(--z-actionbar);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--wa);color:#fff;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:transform var(--t-fast) var(--ease)}
.wa-float svg{width:30px;height:30px}
.wa-float:hover{transform:scale(1.08)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);
  animation:waPulse 2.4s var(--ease) infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
/* bulle d'accroche WhatsApp (pages vitrine) */
.wa-bubble{position:fixed;z-index:var(--z-actionbar);right:16px;bottom:152px;max-width:236px;
  background:#fff;color:var(--ink);border-radius:16px;border-bottom-right-radius:5px;
  padding:13px 32px 13px 15px;font-size:.85rem;line-height:1.45;cursor:pointer;
  box-shadow:0 18px 44px -14px rgba(27,19,13,.4);
  opacity:0;transform:translateY(10px) scale(.95);transform-origin:bottom right;
  transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none}
.wa-bubble.show{opacity:1;transform:none;pointer-events:auto}
.wa-bubble b{color:#128C7E}
.wa-bubble .wb-x{position:absolute;top:5px;right:7px;border:none;background:transparent;
  font-size:1.15rem;line-height:1;cursor:pointer;color:#9a8f80;padding:3px}

/* barre d'action collante (mobile) */
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-actionbar);
  display:none;gap:10px;padding:10px var(--sp-4) calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,245,234,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px rgba(27,19,13,.5)}
.action-bar .btn{flex:1}
@media (max-width:720px){
  .action-bar{display:flex}
  .wa-float{bottom:calc(80px + env(safe-area-inset-bottom))}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
}

/* — Lightbox (galeries) — */
.lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);display:none;place-items:center;
  background:rgba(12,8,5,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:24px}
.lightbox.show{display:grid;animation:fadeUp .3s var(--ease)}
.lightbox img{max-width:min(94vw,1200px);max-height:84vh;border-radius:var(--r-sm);
  box-shadow:var(--sh-lg);object-fit:contain}
.lightbox .lb-cap{color:rgba(255,255,255,.85);text-align:center;margin-top:14px;font-size:.9rem}
.lightbox .lb-close{position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.2rem;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.25)}
.lightbox .lb-close:hover{background:rgba(255,255,255,.22)}

/* ====== 11. ANIMATIONS & REVEALS ========================= */
.reveal{opacity:0;transform:translateY(28px);filter:blur(4px);
  transition:opacity var(--t-rev) var(--ease-out),transform var(--t-rev) var(--ease-out),filter var(--t-rev) var(--ease-out)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* titre animé lettre par lettre */
.t-char{display:inline-block;opacity:0;transform:translateY(40%) rotate(2deg);
  animation:charRise .8s var(--ease-out) forwards}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;filter:none !important}
  .hero-slide,.marquee-track,.splash-bar i,.splash-star,.splash-word,.scroll-hint i::after,
  .wa-float::after,.hero-eyebrow .livedot,.t-char{animation:none !important}
  .hero-slide:first-of-type{opacity:1}   /* au moins une image visible sans animation */
  .splash-star{stroke-dashoffset:0}.splash-word,.splash-bar{opacity:1}
  *{scroll-behavior:auto !important}
}
@keyframes charRise{to{opacity:1;transform:none}}

/* ====== RESPONSIVE — montée en gamme (mobile-first) ====== */
@media (min-width:600px){
  .trust-in{grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
  .concept-cards{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:repeat(2,1fr)}
  .partners{grid-template-columns:repeat(3,1fr)}
  .hero-stats{grid-template-columns:repeat(4,1fr)}
  .cities-grid{grid-template-columns:repeat(2,1fr)}
  .exp-cards{grid-template-columns:repeat(2,1fr)}
  .ville-intro{grid-template-columns:1.5fr .9fr;align-items:start}
  .rail-card{flex-basis:46%}
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr}
  .foot-bot{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (min-width:900px){
  .trust-in{grid-template-columns:repeat(4,1fr)}
  .concept-grid{grid-template-columns:1.05fr 1fr;align-items:center}
  .concept-cards{gap:var(--sp-4)}
  .founder-grid{grid-template-columns:.85fr 1.15fr;align-items:center;gap:var(--sp-9)}
  .testi-grid{grid-template-columns:repeat(3,1fr)}
  .cities-grid{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .rail-card{flex-basis:30%}
  .foot-grid{grid-template-columns:1.7fr 1fr 1fr 1fr}
  /* la carte d'avis flottante revient en desktop */
  .hero{align-items:safe center}
  .hero-in{grid-template-columns:1.4fr;align-content:center;gap:var(--sp-5)}
  .hero-card{display:block;position:absolute;right:var(--gut);top:18%;width:300px;z-index:2;
    background:rgba(20,13,8,.42);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);
    padding:var(--sp-5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--sh-lg)}
  .hero-card .hc-stars{color:var(--gold);letter-spacing:2px}
  .hero-card .hc-q{font-family:var(--display);font-style:italic;font-size:1.16rem;color:#fff;margin:10px 0 14px;line-height:1.4}
  .hero-card .hc-who{display:flex;align-items:center;gap:11px}
  .hero-card .hc-av{width:38px;height:38px;border-radius:50%;background:var(--grad-sun);color:var(--ink);
    display:grid;place-items:center;font-weight:700}
  .hero-card .hc-who b{color:#fff;font-size:.92rem;display:block}
  .hero-card .hc-who small{color:rgba(255,255,255,.72);font-size:.76rem}
  .hero-card .hc-seal{position:absolute;top:-26px;right:-18px;width:78px;height:78px}
  .hero-card .hc-seal svg{width:100%;height:100%;animation:sealSpin 22s linear infinite}
  .hero-card .hc-seal text{font-size:9.2px;letter-spacing:1.2px;fill:var(--gold-soft);
    font-family:var(--body);font-weight:600;text-transform:uppercase}
  .hero-card .hc-seal i{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold-soft);font-style:normal}
  @keyframes sealSpin{to{transform:rotate(360deg)}}
}
@media (min-width:1080px){
  .hero h1{max-width:16ch}
}
@media (min-width:1200px){
  .hero-stats{max-width:760px}
}