/* ═══════════════════════════════════════════════════════════════════
   ACCUEIL EXPANSIF — version HTML/CSS/JS pur
   Équivalent du « Scroll Expansion Hero » de 21st.dev, sans React,
   sans Tailwind, sans framer-motion, sans compilation.
   Mobile d'abord.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --encre:#0B0C0E;
  --papier:#FFFFFF;
  --papier-2:#F3F4F6;
  --trait:#E3E6EA;
  --gris:#6B7280;
  --accent:#C9A227;
  --sortie:cubic-bezier(.23,1,.32,1);
  --g:20px;
}

*{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
h1,h2{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.05}
p{margin:0 0 1rem}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--papier-2);padding:.1em .35em;border-radius:4px}
.wrap{width:100%;max-width:880px;margin:0 auto;padding:0 var(--g)}

/* ── la piste donne la course ; le cadre reste collé ── */
.exp{background:var(--encre)}
.exp__piste{height:230svh}                 /* ~1 écran collé + 1,3 de course */
.exp__cadre{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;contain:layout paint;
}

/* le fond, qui s'efface */
.exp__fond{position:absolute;inset:0;z-index:0;will-change:opacity}
.exp__fond img{width:100%;height:100%;object-fit:cover;object-position:center}
.exp__voile{position:absolute;inset:0;background:rgba(11,12,14,.22)}

/* le média, qui s'ouvre. C'est lui qui porte tout l'effet. */
.exp__media{
  position:relative;z-index:1;margin:0;overflow:hidden;border-radius:14px;
  width:300px;height:400px;max-width:95vw;max-height:85svh;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
  will-change:width,height;
}
.exp__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.exp__ombre{position:absolute;inset:0;background:rgba(0,0,0,.5);will-change:opacity}

/* le titre, qui s'écarte en deux */
.exp__titre{
  position:absolute;z-index:2;inset:auto 0 auto 0;
  display:flex;flex-direction:column;align-items:center;gap:.1em;
  text-align:center;pointer-events:none;color:#fff;
  font-size:clamp(2.3rem,11vw,4.6rem);padding:0 var(--g);
  text-shadow:0 2px 24px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);
}
.exp__mot{display:block;will-change:transform,opacity}

/* la légende, qui s'écarte dans l'autre sens */
.exp__legende{
  position:absolute;z-index:2;left:0;right:0;bottom:8svh;
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  pointer-events:none;color:rgba(255,255,255,.88);
}
.exp__date{margin:0;font-size:1rem;font-weight:500;will-change:transform}
.exp__invite{margin:0;font-size:.85rem;color:rgba(255,255,255,.62);
  will-change:transform,opacity}
.exp__invite::after{content:"";display:block;width:1px;height:22px;margin:.5rem auto 0;
  background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);
  animation:filet 2.2s var(--sortie) infinite}
@keyframes filet{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ── la suite, qui arrive quand le média est ouvert ── */
.suite{padding:58px 0 50px;opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--sortie),transform .7s var(--sortie)}
.suite.vu{opacity:1;transform:none}
.no-js .suite{opacity:1;transform:none}
.suite__t{font-size:clamp(1.6rem,6.5vw,2.3rem);margin:0 0 1rem}
.suite__p{font-size:1.02rem;color:#3A4049;max-width:62ch}
.suite__p--s{font-size:.92rem;color:var(--gris)}
.suite__ch{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  margin:2.2rem 0;padding:1.4rem 0 0;border-top:1px solid var(--trait)}
.suite__ch dt{font-size:clamp(2.2rem,10vw,3rem);font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--accent)}
.suite__ch dd{margin:.3rem 0 0;font-size:.92rem;font-weight:600}
.suite__ch dd span{display:block;font-weight:400;font-size:.8rem;color:var(--gris)}

.pied{background:var(--papier-2);padding:24px 0;font-size:.82rem;color:var(--gris)}
.pied p{margin:0}

@media (min-width:760px){
  :root{--g:32px}
  .exp__piste{height:260svh}
  .suite{padding:84px 0 72px}
  .exp__legende{bottom:6svh;flex-direction:row;gap:1.2rem;align-items:baseline}
}

/* ── mouvement réduit : tout se pose, rien ne bouge ── */
@media (prefers-reduced-motion:reduce){
  .exp__piste{height:auto}
  .exp__cadre{position:static;height:auto;min-height:100svh;padding:90px 0}
  .exp__media{width:min(1100px,92vw)!important;height:auto!important;aspect-ratio:16/9}
  .exp__ombre{opacity:0}
  .exp__mot{transform:none!important}
  .exp__titre{position:static;margin-bottom:1.6rem;text-shadow:none}
  .exp__legende{position:static;margin-top:1.4rem;color:rgba(255,255,255,.8)}
  .exp__invite::after{animation:none}
  .suite{opacity:1;transform:none}
}