/* STATION.24 · aperçu « Le défilé » (MadeByAura) */
:root {
  --peche: #FFE9DC;
  --peche-trame: #F5A57C;
  --blanc: #FFF8F1;
  --encre: #1E1A2B;
  --encre-douce: #4A4458;
  --orange: #FF6A1F;
  --titre: 'Unbounded', 'Arial Black', sans-serif;
  --texte: 'DM Sans', system-ui, sans-serif;
  --hh: 72px;           /* hauteur de l'en-tête */
  --pw: 420px;          /* largeur d'une pièce (jamais plus que la moitié de sa taille native) */
  --ph: 380px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
sup { font-size: .5em; vertical-align: super; line-height: 0; }

/* Bandeau d'aperçu */
.bandeau {
  background: var(--encre);
  color: var(--peche);
  font-size: 16px;
  text-align: center;
  padding: 7px 16px;
}

/* En-tête */
.entete {
  position: sticky; top: 0; z-index: 50;
  height: var(--hh);
  display: flex; align-items: center; gap: 40px;
  padding: 0 40px;
  background: var(--blanc);
  border-bottom: 2px solid var(--encre);
}
.logo {
  font-family: var(--titre); font-weight: 800;
  font-size: 22px; letter-spacing: .02em; text-decoration: none;
}
.logo span { color: var(--orange); }
.menu { display: flex; gap: 32px; margin-right: auto; }
.menu a {
  font-size: 18px; font-weight: 500; text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.menu a:hover, .menu a:focus-visible { border-bottom-color: var(--orange); }
.outils { display: flex; gap: 8px; }
.icone {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--encre); background: var(--blanc);
  display: grid; place-items: center;
}
.icone svg { width: 22px; height: 22px; fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pastille {
  position: absolute; top: -6px; right: -6px;
  min-width: 22px; height: 22px; border-radius: 11px;
  background: var(--orange); color: var(--encre);
  font-size: 13px; font-weight: 700; line-height: 22px; text-align: center;
}
section { scroll-margin-top: var(--hh); }

/* ---------- 1. Le défilé ---------- */
.defile { position: relative; background: var(--peche); }
.anim .defile { height: 500vh; }
.scene { position: relative; }
.anim .scene {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  padding-top: var(--hh);
}
.fonds { position: absolute; inset: 0; background: var(--peche); }
.fonds i { position: absolute; inset: 0; opacity: 0; }
.fonds i:first-child { opacity: 1; }

/* Grands aplats flous et formes géométriques : plus clairs (blanc) ou plus foncés (multiply) que la couleur de la pièce */
.formes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.formes span { position: absolute; display: block; will-change: transform; }
.tache { border-radius: 50%; }
.tache-1 { width: 900px; height: 700px; left: -220px; top: -200px; background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,.35) 55%, transparent); }
.tache-2 { width: 820px; height: 820px; right: -260px; bottom: -320px; background: radial-gradient(closest-side, rgba(150,120,170,.55), rgba(150,120,170,.18) 60%, transparent); mix-blend-mode: multiply; }
.tache-3 { width: 620px; height: 480px; left: 38%; top: 30%; background: radial-gradient(closest-side, rgba(255,106,31,.22), transparent); }
.geo.cercle { width: 520px; height: 520px; right: 8%; top: -180px; border-radius: 50%; background: rgba(255,255,255,.45); }
.geo.arche { width: 460px; height: 620px; left: 26%; bottom: -330px; border-radius: 230px 230px 0 0; background: #D8CCE0; mix-blend-mode: multiply; opacity: .35; }
.geo.lune { width: 300px; height: 150px; left: 4%; bottom: 90px; border-radius: 150px 150px 0 0; background: rgba(255,255,255,.55); }

.titre-scene {
  position: relative; z-index: 3;
  padding: 44px 0 0 64px;
  max-width: 900px;
}
.etiquette {
  display: inline-block;
  font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre);
  border: 2px solid var(--encre); border-radius: 999px;
  padding: 4px 14px;
  background: var(--blanc);
}
.titre-scene h1 {
  font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  font-size: clamp(56px, 6.4vw, 96px); line-height: .95; white-space: nowrap; letter-spacing: -.01em;
  margin-top: 18px;
}
.aide { font-size: 19px; margin-top: 14px; color: var(--encre-douce); }

/* Anneau 3D */
.anneau {
  position: absolute; z-index: 2;
  left: 0; right: 420px; top: calc(var(--hh) + 190px); bottom: 54px;
  perspective: 1200px;
  perspective-origin: 50% 30%;
}
.roue {
  position: absolute; left: 50%; top: 52%;
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.piece {
  position: absolute;
  left: calc(var(--pw) / -2); top: calc(var(--ph) / -2);
  width: var(--pw); height: var(--ph);
  backface-visibility: hidden;
}
.piece img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(30, 26, 43, .18));
}
.anim .piece figcaption { display: none; }
.sol {
  position: absolute; left: 50%; top: 52%;
  width: 560px; height: 90px; margin-left: -280px; margin-top: 150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 26, 43, .16), transparent);
}

/* Fiche de la pièce de devant */
.fiche {
  position: absolute; z-index: 4;
  right: 64px; top: 50%;
  width: 360px;
  transform: translateY(-40%);
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: 24px;
  padding: 28px 28px 24px;
  box-shadow: 8px 8px 0 var(--encre);
}
.compteur { font-size: 17px; font-weight: 700; letter-spacing: .06em; color: var(--encre-douce); }
.compteur .num { color: var(--orange); }
.marque {
  font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  font-size: 34px; line-height: 1.05; margin-top: 10px;
}
.nom { font-size: 19px; margin-top: 8px; }
.details { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.details span {
  font-size: 17px; font-weight: 700;
  border: 2px solid var(--encre); border-radius: 999px; padding: 3px 14px;
}
.details .prix { background: var(--encre); color: var(--blanc); }
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 20px; width: 100%; min-height: 54px;
  background: var(--orange); color: var(--encre);
  border: 2px solid var(--encre); border-radius: 999px;
  font-size: 18px; font-weight: 700; text-decoration: none;
  transition: transform .15s ease;
}
.bouton:hover { transform: translateY(-2px); }
.barre { height: 6px; margin-top: 20px; border-radius: 3px; background: rgba(30, 26, 43, .12); overflow: hidden; }
.barre span { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(.11); }

/* Ruban qui glisse au défilement */
.ruban {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  height: 54px; overflow: hidden;
  background: var(--encre); color: var(--peche);
  display: flex; align-items: center;
}
.ruban-texte {
  white-space: nowrap;
  font-family: var(--titre); font-weight: 600; font-size: 18px; letter-spacing: .06em;
}

/* Repli sans animation : grille statique, tout visible */
html:not(.anim) .titre-scene { padding-bottom: 32px; }
html:not(.anim) .anneau { position: static; padding: 0 64px 64px; }
html:not(.anim) .roue {
  position: static; width: auto; height: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px;
}
html:not(.anim) .piece {
  position: static; width: auto; height: auto;
  background: var(--blanc); border: 2px solid var(--encre); border-radius: 20px; padding: 18px;
}
html:not(.anim) .piece img { height: 240px; }
html:not(.anim) .piece figcaption { display: grid; gap: 2px; margin-top: 12px; font-size: 17px; }
html:not(.anim) .piece figcaption strong { font-family: var(--titre); font-size: 20px; text-transform: uppercase; }
html:not(.anim) .sol, html:not(.anim) .fiche, html:not(.anim) .aide { display: none; }
html:not(.anim) .ruban { position: relative; }

/* ---------- Sections suivantes ---------- */
.contenu { max-width: 1200px; margin: 0 auto; padding: 120px 64px; }
.titre-section {
  font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  font-size: clamp(36px, 4.6vw, 68px); line-height: 1.02; margin-top: 22px; max-width: 900px;
}

.concept { position: relative; overflow: clip; }
.chiffres { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 64px; }
.chiffres li {
  border: 2px solid var(--encre); border-radius: 24px; padding: 32px 28px;
  background: var(--peche);
}
.chiffres li:nth-child(2) { background: #BFE1FA; }
.chiffres li:nth-child(3) { background: #F8C3D4; }
.chiffres strong {
  display: block; font-family: var(--titre); font-weight: 800;
  font-size: clamp(64px, 7vw, 104px); line-height: 1; color: var(--encre);
}
.chiffres strong small { font-size: .45em; }
.chiffres li > span { display: block; margin-top: 14px; font-size: 19px; }

.event { position: relative; overflow: clip; }
.intro { font-size: 20px; margin-top: 20px; max-width: 560px; }
.rebours { display: grid; grid-template-columns: repeat(4, minmax(0, 170px)); gap: 18px; margin-top: 44px; }
.rebours div {
  background: var(--blanc); border: 2px solid var(--encre); border-radius: 20px;
  padding: 22px 12px; text-align: center; box-shadow: 6px 6px 0 var(--encre);
}
.rebours strong { display: block; font-family: var(--titre); font-weight: 800; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; }
.rebours span { display: block; margin-top: 8px; font-size: 17px; }
.bouton-plein { width: auto; padding: 0 34px; margin-top: 48px; }

.contact { position: relative; min-height: calc(100vh - var(--hh)); display: flex; flex-direction: column; justify-content: space-between; }
.grille-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.adresse { font-size: 24px; font-weight: 500; margin-top: 24px; line-height: 1.4; }
.horaires { border-top: 2px solid var(--encre); }
.horaires div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 2px solid var(--encre); font-size: 19px; }
.horaires dt { font-weight: 700; }
.pied {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 28px 64px; background: var(--encre); color: var(--peche); font-size: 17px;
}

/* Message de démonstration */
.toast {
  position: fixed; z-index: 80; left: 50%; bottom: 28px;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px);
  background: var(--encre); color: var(--blanc);
  padding: 14px 22px; border-radius: 14px; font-size: 17px;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Écrans moyens ---------- */
@media (max-width: 1100px) {
  :root { --pw: 320px; --ph: 290px; }
  .anneau { right: 360px; }
  .fiche { right: 32px; width: 320px; }
  .titre-scene { padding-left: 40px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root { --hh: 104px; --pw: 310px; --ph: 290px; }
  body { font-size: 17px; }
  .bandeau { font-size: 16px; padding: 6px 16px; line-height: 1.3; }
  .entete {
    flex-wrap: wrap; gap: 0 12px; padding: 8px 16px 0;
    align-content: flex-start;
  }
  .logo { font-size: 19px; line-height: 46px; }
  .outils { margin-left: auto; }
  .icone { width: 42px; height: 42px; }
  .menu { order: 3; width: 100%; justify-content: space-between; gap: 8px; margin: 2px 0 0; }
  .menu a { font-size: 17px; padding: 8px 0; }
  .anim .defile { height: 500svh; }
  .anim .scene { height: 100svh; }
  .titre-scene { padding: 18px 16px 0; }
  .titre-scene h1 { font-size: 46px; margin-top: 10px; white-space: normal; }
  .aide { display: none; }
  .etiquette { font-size: 16px; padding: 3px 12px; }
  .anneau { left: 0; right: 0; top: calc(var(--hh) + 120px); bottom: 196px; perspective: 900px; }
  .roue { top: 50%; }
  .sol { width: 300px; height: 50px; margin-left: -150px; margin-top: 100px; }
  .fiche {
    left: 12px; right: 12px; width: auto; top: auto; bottom: 56px;
    transform: none; padding: 10px 12px; border-radius: 16px;
    box-shadow: 4px 4px 0 var(--encre);
    display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; align-items: center;
  }
  .compteur { font-size: 15px; grid-column: 1; margin: 0; }
  .marque { font-size: 20px; margin: 0; grid-column: 1; }
  .nom { display: none; }
  .details { margin-top: 4px; gap: 6px; grid-column: 1; }
  .details span { font-size: 15px; padding: 1px 10px; }
  .bouton { grid-column: 2; grid-row: 1 / span 3; margin: 0; min-height: 44px; font-size: 15px; padding: 0 14px; width: auto; }
  .barre { grid-column: 1 / -1; margin-top: 8px; }
  .ruban { height: 44px; }
  .ruban-texte { font-size: 16px; }

  html:not(.anim) .anneau { padding: 0 16px 40px; }
  html:not(.anim) .roue { grid-template-columns: 1fr; }

  .contenu { padding: 80px 16px; }
  .titre-section { font-size: 34px; }
  .chiffres { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
  .chiffres strong { font-size: 64px; }
  .chiffres li > span { font-size: 17px; }
  .intro { font-size: 18px; }
  .rebours { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 32px; }
  .rebours div { padding: 14px 4px; border-radius: 14px; box-shadow: 4px 4px 0 var(--encre); }
  .rebours strong { font-size: 30px; }
  .rebours span { font-size: 16px; }
  .bouton-plein { width: 100%; margin-top: 36px; }
  .grille-contact { grid-template-columns: 1fr; gap: 36px; }
  .adresse { font-size: 20px; }
  .horaires div { font-size: 17px; }
  .pied { padding: 24px 16px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton, .toast { transition: none; }
}

/* Repli sans animation : chaque carte prend la couleur de sa pièce */
html:not(.anim) .piece:nth-child(1) { background: #BFE1FA; }
html:not(.anim) .piece:nth-child(2) { background: #FFCFA6; }
html:not(.anim) .piece:nth-child(3) { background: #F8C3D4; }
html:not(.anim) .piece:nth-child(4) { background: #CFEEDD; }
html:not(.anim) .piece:nth-child(5) { background: #D3D5FA; }
html:not(.anim) .piece:nth-child(6) { background: #FFD3C8; }
html:not(.anim) .piece:nth-child(7) { background: #E3EBB5; }
html:not(.anim) .piece:nth-child(8) { background: #F7E3A3; }
html:not(.anim) .piece:nth-child(9) { background: #BDE6EC; }

/* ---------- Motion des sections (Concept, Event, Contact) ---------- */
main { position: relative; }
.toile { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.toile i { position: absolute; inset: 0; opacity: 0; }
.toile .t1 { background: var(--blanc); opacity: 1; }
.toile .t2 { background: #FFE2CF; }
.toile .t3 { background: #E7F1EA; }
.contenu { position: relative; z-index: 2; }

/* Concept : mots en contour qui glissent en sens opposés, vestes qui flottent */
.mots { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 0; pointer-events: none; }
.mot-ligne {
  white-space: nowrap; font-family: var(--titre); font-weight: 800;
  font-size: clamp(90px, 11vw, 170px); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(30, 26, 43, .16);
  will-change: transform;
}
.flotte { position: absolute; z-index: 1; width: 190px; height: auto; pointer-events: none; will-change: transform; filter: drop-shadow(0 14px 18px rgba(30,26,43,.16)); }
.flotte-1 { right: 4%; top: 90px; }
.flotte-2 { left: 2%; bottom: 120px; width: 170px; }
.flotte-3 { right: 12%; bottom: 40px; width: 160px; }
.chiffres li { position: relative; }
.chiffres strong small { font-size: .32em; font-weight: 600; margin-right: .1em; }
.compte { font-variant-numeric: tabular-nums; }
.trait { display: block; height: 6px; margin-top: 14px; border-radius: 3px; background: var(--orange); transform-origin: 0 50%; }

/* Event : grand bloc de couleur qui s'élargit, lettres qui se lèvent, chiffres qui se retournent */
.bloc {
  position: absolute; z-index: 0; inset: 40px 24px;
  background: var(--orange); border-radius: 40px;
  transform-origin: 30% 50%; will-change: transform;
}
.event .etiquette { background: var(--blanc); }
.event .intro { font-weight: 500; }
.event .bouton-plein { background: var(--encre); color: var(--blanc); }
.lettres .mot { display: inline-block; white-space: nowrap; }
.lettres .l { display: inline-block; }
.rebours div { perspective: 400px; }
.rebours strong { transform-origin: 50% 50%; }

/* Contact : carte-arche qui se dévoile, bandeau défilant */
.arche-carte { position: relative; padding: 70px 48px 48px; }
.arche-fond {
  position: absolute; inset: 0; z-index: 0;
  background: #BFE1FA; border: 2px solid var(--encre);
  border-radius: 400px 400px 28px 28px;
  transform-origin: 50% 100%; will-change: transform;
}
.arche-texte { position: relative; z-index: 1; }
.ruban-bas { position: relative; }

/* Entrées : uniquement quand le script est prêt et le mouvement autorisé. Jamais d'opacité 0 : le texte reste lisible. */
.anim.pret .entre { opacity: .2; transform: translateY(40px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.anim.pret .horaires .entre { transform: translateX(-60px); }
.anim.pret .entre.vu { opacity: 1; transform: none; }
.anim.pret .chiffres .entre:nth-child(2), .anim.pret .rebours .entre:nth-child(2), .anim.pret .horaires .entre:nth-child(2) { transition-delay: .12s; }
.anim.pret .chiffres .entre:nth-child(3), .anim.pret .rebours .entre:nth-child(3), .anim.pret .horaires .entre:nth-child(3) { transition-delay: .24s; }
.anim.pret .rebours .entre:nth-child(4), .anim.pret .horaires .entre:nth-child(4) { transition-delay: .36s; }
.anim.pret .trait { transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.7,.2,1) .3s; }
.anim.pret .vu .trait { transform: scaleX(1); }
.anim.pret .lettres .l { opacity: .2; transform: translateY(.45em); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.anim.pret .lettres.vu .l { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .mot-ligne { font-size: 72px; -webkit-text-stroke-width: 1.5px; }
  .flotte { width: 110px; }
  .flotte-1 { top: auto; bottom: 20px; right: -16px; }
  .flotte-2 { width: 100px; top: 20px; bottom: auto; left: auto; right: -20px; }
  .flotte-3 { display: none; }
  .bloc { inset: 24px 8px; border-radius: 28px; }
  .arche-carte { padding: 56px 24px 32px; }
  .geo.cercle { width: 300px; height: 300px; top: -60px; right: -80px; }
  .geo.arche { width: 220px; height: 340px; left: 50%; bottom: -160px; }
  .tache-1 { width: 520px; height: 480px; }
  .tache-2 { width: 520px; height: 520px; }
}