/* ═══════════════════════════════════════════════════════════
   ÉCLAIR — hero épinglé (pinned hero + scroll-scrub)
   4 stations · 8 séquences d'images · aucun <video>
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Jaune de la marque, relevé du logotype fourni (#F8DE05).
     Éclatant sur le noir ; sur la crème il devient illisible, d'où
     une version assombrie réservée au texte sur fond clair.      */
  --gold:#f8de05;
  --gold-ink:#9c8000;
  --ink:#17171b;
  --muted:#857d70;
  --black:#0c0c0e;
  --cream:#f2efe9;

  /* EB Garamond : accents (û è â é) correctement posés, et œ présent.
     Cormorant a été écarté — ses accents flottent au-dessus du mot.
     Une seule famille pour toute la page, y compris les capitales
     espacées : c'est ainsi que le logotype est dessiné.            */
  --serif:"EB Garamond",Georgia,Cambria,"Times New Roman",serif;
  --sans:"Jost","Segoe UI",system-ui,-apple-system,sans-serif;
  --tan:#c2a071;   /* le beige chaud des boutons pleins */

  /* durée du pin : la porte + 3 stations */
  --pin:440vh;

  /* décalage latéral du plateau (desktop) */
  --shift:16vw;

  /* Largeur de composition du hero. Au-delà, le couple plateau/texte
     reste au milieu et laisse un tiers d'écran vide d'un seul côté ;
     borné et centré, le blanc devient une marge, pas un trou.      */
  --cw:1560px;
}

/* Au pouce, on scrolle plus vite : on rallonge le pin pour que
   la zone de repos reste lisible en distance réelle.          */
@media (max-width:767px){
  :root{ --pin:500vh }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}

/* ─── Préchargement ─────────────────────────────────────── */
.preload{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  background:#fff;
  transition:opacity .6s ease,visibility .6s ease;
}
.preload.is-done{opacity:0;visibility:hidden}
.preload__logo{width:190px;height:auto;opacity:.95}
.preload__bar{width:120px;height:1px;background:rgba(0,0,0,.10);overflow:hidden}
.preload__bar i{
  display:block;height:100%;width:0%;
  background:var(--gold);
  transition:width .3s ease;
}

/* ─── Structure du hero ─────────────────────────────────── */
.hero{
  position:relative;
  height:var(--pin);
}
.hero__pin{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  background:#fff;                       /* piloté en JS */
  transition:background-color .12s linear;
}
.hero__canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}

/* mot d'or sur le noir, entre deux stations */
.hero__flash{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif);
  font-size:clamp(22px,3.4vw,44px);
  font-weight:300;
  letter-spacing:.24em;
  color:var(--gold);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}

/* carte-titre de l'ouverture */
/* L'enseigne. Le panneau noir au-dessus de la porte a été généré
   vide exprès : le nom s'y pose en vrai fichier, net et exact,
   là où l'enseigne d'une boutique se trouve réellement. Position
   et taille sont calculées en JS pour suivre l'image dessinée,
   sinon le logo se décrocherait du bâtiment au recadrage.       */
/* Le logotype est horizontal (≈2:1), plus un carré : sa taille se
   règle en largeur, la hauteur suit. hero.js pose la largeur en
   fraction de la largeur du panneau d'enseigne.                  */
.hero__title{
  position:absolute;
  transform:translate(-50%,-50%);
  display:block;
  opacity:0;
  pointer-events:none;
  z-index:3;
  will-change:opacity;
}
.hero__title img{ width:100%;height:auto;display:block }

/* ─── Stations (texte) ──────────────────────────────────── */
.hero__stations{position:absolute;inset:0}
.station--door{pointer-events:none}

.station{
  position:absolute;inset:0;
  display:grid;
  align-items:center;
  pointer-events:none;
}
.station__still{display:none}            /* le canvas dessine à sa place */

.station__copy{
  position:relative;
  z-index:2;
  padding:0 4vw;
  min-width:0;
}

/* desktop : le texte occupe la moitié opposée au plateau */
@media (min-width:768px){
  .station{
    grid-template-columns:1fr 1fr;
    /* le texte s'aligne sur la même boîte de composition que le
       plateau, calculée à l'identique dans hero.js */
    padding-inline:calc(max(0px, 100vw - var(--cw)) / 2);
  }
  /* La boîte épouse le texte (fit-content) et se centre dans sa
     demi-colonne. Mesuré : 275 px de texte collés au bord intérieur
     d'une colonne de 780 px — tout le vide s'accumulait du même
     côté. Centrée, la respiration se répartit.                    */
  .station__copy{
    width:fit-content;
    /* en px, pas en ch : le « ch » suit la taille du texte courant
       (16 px) et plafonnait la colonne à 368 px, si bien que le titre
       ne pouvait pas grandir et se cassait en trois lignes courtes. */
    max-width:min(620px,40vw);
    justify-self:center;
  }
  .station[data-side="-1"] .station__copy{grid-column:2}
  .station[data-side="1"]  .station__copy{grid-column:1;text-align:right}
  .station[data-side="0"]  { grid-template-columns:1fr }
  .station[data-side="0"] .station__copy{
    grid-column:1;justify-self:center;text-align:center;
    align-self:end;padding-bottom:8vh;
  }
}
/* mobile : le texte passe sous le plateau */
@media (max-width:767px){
  .station{grid-template-rows:1fr auto;align-items:end}
  /* la marge basse est posée par hero.js : elle vaut la respiration
     calculée entre la nav, le dessert et le texte. Une valeur fixe
     en vh ne peut pas équilibrer deux textes de hauteurs différentes. */
  .station__copy{
    grid-row:2;text-align:center;justify-self:center;
    padding:0 6vw;
    max-width:none;width:100%;
  }
}

/* ─── Typographie ───────────────────────────────────────── */
/* capitales espacées, comme « É C L A I R » du logotype */
.eyebrow{
  font-family:var(--sans);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px;font-weight:500;
}
/* plus grand sur grand écran : à 64 px le bloc ne faisait que 275 px
   de large et flottait dans sa demi-colonne */
.title{
  font-family:var(--serif);
  font-size:clamp(34px,4.9vw,82px);
  font-weight:400;line-height:1.12;letter-spacing:-.008em;
  margin:0;
}
/* la liste doit tenir sur une ligne : les « · » ne doivent pas
   se retrouver seuls en fin de ligne */
.list{
  font-family:var(--serif);
  font-size:clamp(16px,1.9vw,31px);
  font-weight:400;line-height:1.5;margin:0;
  text-wrap:balance;
}
.list + .list{margin-top:2px;color:var(--gold-ink)}
.statement{
  font-family:var(--serif);
  font-size:clamp(23px,2.9vw,40px);
  font-weight:400;line-height:1.28;margin:0;
}
/* la conclusion, sous la liste : elle ferme, elle ne crie pas */
.statement--small{
  font-size:clamp(15px,1.35vw,20px);
  font-style:italic;
  color:var(--muted);
  line-height:1.6;
  margin-top:22px;
}
.station[data-ink="light"] .statement--small{color:rgba(242,239,233,.45)}
.station__logo{
  width:clamp(190px,17vw,260px);height:auto;margin:0 auto 26px;
  opacity:0;
  transform:scale(1.10);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),
             transform .5s cubic-bezier(.22,.61,.36,1);
}
.station.is-in .station__logo{opacity:1;transform:none}
/* Le bouton n'est pas découpé en mots : il apparaît d'un bloc,
   en dernier. Sans cette opacité, sa bordure resterait visible
   pendant les trois premières stations.                        */
.cta{
  display:inline-block;
  font-family:var(--sans);
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  color:#14100b;text-decoration:none;
  padding:17px 38px;
  background:var(--tan);
  border:1px solid var(--tan);
  border-radius:0;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,.61,.36,1) .34s,
             transform .45s cubic-bezier(.22,.61,.36,1) .34s,
             background-color .35s ease,border-color .35s ease,color .35s ease;
}
.station.is-in .cta{opacity:1;transform:none;pointer-events:auto}
.cta:hover,.cta:focus-visible{
  background:#d5b98c;border-color:#d5b98c;color:var(--black);
}

/* encre claire sur la station noire */
.station[data-ink="light"] .eyebrow{color:rgba(242,239,233,.5)}
.station[data-ink="light"] .title,
.station[data-ink="light"] .statement,
.station[data-ink="light"] .list{color:var(--cream)}

/* ─── Apparition du texte, mot par mot ──────────────────── */
/* Le scroll décide seulement in/out.
   La transition CSS impose un plancher de 280 ms : même si le
   visiteur scrolle d'un coup, le décalage entre mots survit.   */
.word{
  display:inline-block;
  opacity:0;
  transform:translateY(14px) scale(1.14);
  filter:blur(5px);
  transition:opacity .42s cubic-bezier(.22,.61,.36,1),
             transform .42s cubic-bezier(.22,.61,.36,1),
             filter   .42s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i) * 40ms);
  will-change:opacity,transform,filter;
}
.station.is-in .word{
  opacity:1;
  transform:none;
  filter:blur(0);
}
/* sortie : plus rapide que l'entrée, et sans décalage */
.station.is-out .word{
  opacity:0;
  transform:translateY(-9px) scale(.985);
  filter:blur(4px);
  transition-duration:.25s;
  transition-delay:0ms;
}
.station--final.is-in{pointer-events:auto}

/* ─── Indice de scroll ──────────────────────────────────── */
.hero__cue{
  position:absolute;left:50%;bottom:26px;
  transform:translateX(-50%);
  width:1px;height:46px;
  background:rgba(0,0,0,.12);
  overflow:hidden;
  transition:opacity .5s ease;
}
.hero__cue i{
  display:block;width:100%;height:40%;
  background:var(--gold);
  animation:cue 2.1s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes cue{
  0%{transform:translateY(-115%)}
  60%,100%{transform:translateY(260%)}
}
.hero__cue.is-hidden{opacity:0}

/* ─── Section suivante ──────────────────────────────────── */
.after{
  position:relative;z-index:1;
  background:var(--black);color:var(--cream);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:12vh 8vw;
}
.after__eyebrow{
  font-family:var(--serif);
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  color:var(--gold);margin:0 0 20px;
}
.after__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,5vw,64px);line-height:1.15;margin:0;
}
.after__note{color:rgba(242,239,233,.35);font-size:13px;margin-top:40px}

/* ═══ Repli : mouvement réduit / pas de JS ═══════════════ */
.no-motion .hero{height:auto}
.no-motion .hero__pin{position:static;height:auto;overflow:visible}
.no-motion .hero__canvas,
.no-motion .hero__flash,
.no-motion .hero__cue{display:none}
.no-motion .hero__stations{position:static}
.no-motion .station{
  position:static;
  min-height:100vh;
  padding:10vh 0;
  background:var(--bg-static,#fff);
}
.no-motion .station__still{
  display:block;
  width:min(48vw,780px);
  margin:0 auto;
  border-radius:4px;
}
.no-motion .word{opacity:1;transform:none;filter:none}
.no-motion .station{pointer-events:auto}
@media (max-width:767px){
  .no-motion .station__still{width:92vw}
}