/* ==========================================================================
   LuxMLG — lab.css (chargé uniquement par demos.html)
   --------------------------------------------------------------------------
   Styles de la page « Démos / Ce qu'on sait faire » : une grille bento de
   démonstrations interactives, recréées à la main aux couleurs LuxMLG,
   inspirées des composants les plus populaires de 21st.dev et des prompts
   de motionsites.ai (aurora, lamp, sparkles, gooey text, orbital timeline,
   tubelight nav, image comparison, background paths…).

   Logique partagée avec styles.css : tokens, .io reveals, boutons, page-hero.
   La partie interactive vit dans js/lab.js.

   SOMMAIRE
     1. Hero du lab (chemins dorés animés + mot rotatif)
     2. Grille bento & squelette des tuiles
     3. d1  Avant / Après (comparateur)
     4. d2  Lampe (faisceau doré)
     5. d3  Texte qui se décode
     6. d4  Mots qui fondent (morphing)
     7. d5  Aurore champagne + étincelles
     8. d6  Cartes projecteur (spotlight)
     9. d7  Orbite de la méthode
    10. d8  Boutons cousus main
    11. d9  Chiffres vivants
    12. d10 Galerie en relief (coverflow 3D)
    13. d11 Dessinez avec la lumière (canvas)
    14. d12 Navigation incandescente (tubelight)
    15. Manifeste au scroll
    16. Responsive & reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO DU LAB
   -------------------------------------------------------------------------- */

/* Chemins dorés qui dérivent derrière le titre (21st.dev "Background Paths") */
.lab-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.lab-paths path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 6 14;
  animation: lab-dash 26s linear infinite;
}
.lab-paths path:nth-child(2) { opacity: 0.55; animation-duration: 34s; animation-direction: reverse; }
.lab-paths path:nth-child(3) { opacity: 0.35; animation-duration: 44s; }
.lab-paths path:nth-child(4) { opacity: 0.22; animation-duration: 56s; animation-direction: reverse; }
@keyframes lab-dash { to { stroke-dashoffset: -400; } }

/* Mot rotatif façon machine à écrire, avec curseur doré */
.lab-rot {
  display: inline-block;
  color: var(--gold);
  font-style: italic;
  min-width: 6ch;
  text-align: left;
}
.lab-rot::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 4px;
  background: var(--gold-bright);
  vertical-align: -0.08em;
  animation: lab-caret 1.05s steps(1) infinite;
}
@keyframes lab-caret { 50% { opacity: 0; } }

.lab-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--faint);
}
.lab-note::before { content: "✦"; font-size: 0.6rem; color: var(--gold); }

/* --------------------------------------------------------------------------
   2. GRILLE BENTO & TUILES
   -------------------------------------------------------------------------- */
.lab-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.lab-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 30px);
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.5s ease, transform 0.45s var(--ease-out);
}
.lab-tile:hover {
  border-color: var(--line-gold);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 122, 0.05);
}

.lab-tile--w2 { grid-column: span 2; }
.lab-tile--w3 { grid-column: span 3; }
.lab-tile--w4 { grid-column: span 4; }

.lab-tile__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.lab-tile__title { font-size: 1.18rem; font-weight: 380; }
.lab-tile__num {
  flex: none;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}

.lab-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
}

.lab-tile__cap {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   3. d1 — AVANT / APRÈS (21st.dev "Image Comparison")
   -------------------------------------------------------------------------- */
.ba {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-2);
  touch-action: pan-y;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Version « avant » : le même visuel, éteint */
.ba__before img { filter: grayscale(1) brightness(0.62) contrast(0.92); }
/* Version « après » : pleine lumière, révélée à droite du curseur (--pos) */
.ba__after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 1.5px;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(212, 175, 122, 0.65);
  pointer-events: none;
}
.ba__line::after {
  content: "✦";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: #14101A;
  font-size: 0.8rem;
  border-radius: 50%;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.ba:focus-within .ba__line { box-shadow: 0 0 0 3px rgba(212, 175, 122, 0.35), 0 0 18px rgba(212, 175, 122, 0.65); }
.ba__tag {
  position: absolute;
  top: 12px;
  z-index: 2;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(242, 238, 229, 0.18);
  background: rgba(10, 10, 15, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.ba__tag--before { left: 12px; }
.ba__tag--after { right: 12px; color: var(--gold-bright); border-color: var(--line-gold); }
.ba__hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.74rem;
  color: rgba(242, 238, 229, 0.75);
  background: rgba(10, 10, 15, 0.55);
  padding: 5px 12px;
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.ba.is-used .ba__hint { opacity: 0; }

/* --------------------------------------------------------------------------
   4. d2 — LAMPE (21st.dev "Lamp")
   -------------------------------------------------------------------------- */
.lamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding-top: 26px;
}
.lamp__bar {
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: var(--gold-bright);
  box-shadow:
    0 0 14px rgba(233, 203, 148, 0.9),
    0 0 50px rgba(212, 175, 122, 0.55);
  transition: width 1.1s var(--ease-luxe) 0.15s;
}
.lamp__glow {
  width: 230px;
  height: 130px;
  margin-top: -8px;
  background: radial-gradient(ellipse 50% 80% at 50% 0%, rgba(212, 175, 122, 0.4), transparent 70%);
  filter: blur(14px);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: top center;
  transition: opacity 1.2s ease 0.35s, transform 1.2s var(--ease-out) 0.35s;
  pointer-events: none;
}
.lamp__word {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 380;
  margin-top: -86px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease 0.6s, transform 0.9s var(--ease-out) 0.6s;
}
.lamp__line {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.9s ease 0.85s;
}
.lab-tile.in-view .lamp__bar { width: min(190px, 70%); }
.lab-tile.in-view .lamp__glow { opacity: 1; transform: scaleX(1); }
.lab-tile.in-view .lamp__word { opacity: 1; transform: none; }
.lab-tile.in-view .lamp__line { opacity: 1; }

/* --------------------------------------------------------------------------
   5. d3 — TEXTE QUI SE DÉCODE
   -------------------------------------------------------------------------- */
.scramble {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 380;
  text-align: center;
  min-height: 3em;
  display: flex;
  align-items: center;
  word-break: break-word;
}
.scramble .alt { color: var(--gold); }
.lab-replay {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 18px;
  min-height: 42px;
  border: 1px solid rgba(242, 238, 229, 0.2);
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--muted);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.lab-replay:hover { color: var(--gold-bright); border-color: var(--line-gold); transform: translateY(-2px); }
.lab-replay::before { content: "↻"; color: var(--gold); }

/* --------------------------------------------------------------------------
   6. d4 — MOTS QUI FONDENT (21st.dev "Gooey Text Morphing")
   -------------------------------------------------------------------------- */
.gooey {
  position: relative;
  width: 100%;
  height: 120px;
}
.gooey span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  color: var(--gold-bright);
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.92);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s var(--ease-out);
  will-change: opacity, filter;
}
.gooey span.is-on {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* --------------------------------------------------------------------------
   7. d5 — AURORE CHAMPAGNE (21st.dev "Aurora Background" + "Sparkles")
   -------------------------------------------------------------------------- */
.aurora {
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0B0A12;
}
.aurora i {
  position: absolute;
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(46px);
  mix-blend-mode: screen;
  opacity: 0.5;
}
.aurora i:nth-child(1) { background: radial-gradient(circle, rgba(212,175,122,.5), transparent 65%); animation: aur-a 13s ease-in-out infinite alternate; top: -20%; left: -12%; }
.aurora i:nth-child(2) { background: radial-gradient(circle, rgba(122,90,180,.38), transparent 65%); animation: aur-b 17s ease-in-out infinite alternate; bottom: -25%; right: -10%; }
.aurora i:nth-child(3) { background: radial-gradient(circle, rgba(233,203,148,.32), transparent 60%); animation: aur-c 21s ease-in-out infinite alternate; top: 30%; left: 30%; }
@keyframes aur-a { to { transform: translate(26%, 18%) scale(1.25); } }
@keyframes aur-b { to { transform: translate(-22%, -16%) scale(1.15); } }
@keyframes aur-c { to { transform: translate(-18%, 14%) scale(0.85); } }

.aurora b {
  position: absolute;
  font-size: 0.55rem;
  color: var(--gold-bright);
  animation: aur-tw 2.6s ease-in-out infinite;
  font-weight: 400;
}
.aurora b:nth-child(4) { top: 22%; left: 16%; }
.aurora b:nth-child(5) { top: 64%; left: 28%; animation-delay: 0.7s; }
.aurora b:nth-child(6) { top: 34%; left: 74%; animation-delay: 1.3s; font-size: 0.75rem; }
.aurora b:nth-child(7) { top: 76%; left: 64%; animation-delay: 1.9s; }
.aurora b:nth-child(8) { top: 14%; left: 52%; animation-delay: 0.4s; }
@keyframes aur-tw { 0%, 100% { opacity: 0.15; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }

.aurora__word {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  font-weight: 360;
}

/* --------------------------------------------------------------------------
   8. d6 — CARTES PROJECTEUR (spotlight au curseur)
   -------------------------------------------------------------------------- */
.spot-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
}
.spot {
  position: relative;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.35s var(--ease-out);
}
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 175, 122, 0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.spot:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.spot:hover::before { opacity: 1; }
.spot__name {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.spot__name::before { content: "✦"; font-size: 0.55rem; color: var(--gold); }

/* --------------------------------------------------------------------------
   9. d7 — ORBITE DE LA MÉTHODE (21st.dev "Radial Orbital Timeline")
   -------------------------------------------------------------------------- */
.orbit {
  position: relative;
  width: min(290px, 86%);
  aspect-ratio: 1;
}
.orbit__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 122, 0.16), transparent 70%);
  color: var(--gold-bright);
  font-size: 1.15rem;
}
.orbit__center::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  animation: orbit-pulse 3.2s ease-in-out infinite;
}
@keyframes orbit-pulse { 50% { transform: scale(1.35); opacity: 0.25; } }

.orbit__ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(212, 175, 122, 0.3);
  border-radius: 50%;
  animation: orbit-spin 36s linear infinite;
}
.orbit__ring--inner {
  inset: 21%;
  border-color: rgba(242, 238, 229, 0.1);
  animation-duration: 24s;
  animation-direction: reverse;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* Chaque nœud est posé sur le bord du grand cercle ; le conteneur tourne,
   le contenu contre-tourne pour rester lisible. */
.orbit__node {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
}
.orbit__node span {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 450;
  letter-spacing: 0.06em;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-gold);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  animation: orbit-spin 36s linear infinite reverse;
}
/* le « bras » porteur tourne avec l'anneau ; les nœuds vivent dedans
   (chacun contre-tourne via .orbit__node span pour rester lisible) */
.orbit__arm {
  position: absolute;
  inset: 0;
  animation: orbit-spin 36s linear infinite;
}
.orbit__arm .orbit__node:nth-child(1) { transform: translate(0, -145px); }
.orbit__arm .orbit__node:nth-child(2) { transform: translate(145px, 0); }
.orbit__arm .orbit__node:nth-child(3) { transform: translate(0, 145px); }
.orbit__arm .orbit__node:nth-child(4) { transform: translate(-145px, 0); }

/* --------------------------------------------------------------------------
   10. d8 — BOUTONS COUSUS MAIN
   -------------------------------------------------------------------------- */
.btnlab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.btnlab .btn { min-width: 200px; }

/* Brillance : un éclat qui traverse au survol */
.btn--shine { position: relative; overflow: hidden; }
.btn--shine::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -70%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 248, 232, 0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease-out);
}
.btn--shine:hover::after { left: 135%; }

/* Encre dorée : l'or monte du bas */
.btn--ink { position: relative; overflow: hidden; }
.btn--ink span { position: relative; z-index: 1; transition: color 0.35s ease; }
.btn--ink::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  background: var(--gold);
  transition: height 0.4s var(--ease-luxe);
}
.btn--ink:hover::before { height: 100%; }
.btn--ink:hover span { color: #14101A; }
.btn--ink:hover { border-color: var(--gold); transform: translateY(-2px); }

/* Morph : devient une confirmation au clic */
.btn--morph.is-done {
  background: var(--gold-bright);
  box-shadow: 0 10px 30px -8px rgba(233, 203, 148, 0.5);
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   11. d9 — CHIFFRES VIVANTS
   -------------------------------------------------------------------------- */
.count-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 14px;
  width: 100%;
}
.count { text-align: center; padding: 12px 4px; border-top: 1px solid var(--line); }
.count__num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 380;
  color: var(--gold);
  line-height: 1.1;
}
.count__label { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }

/* --------------------------------------------------------------------------
   12. d10 — GALERIE EN RELIEF (coverflow 3D)
   -------------------------------------------------------------------------- */
.gal { width: 100%; }
.gal__stage {
  position: relative;
  height: 290px;
  perspective: 1100px;
  touch-action: pan-y;
}
.gal__item {
  position: absolute;
  top: 50%; left: 50%;
  width: min(330px, 62%);
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface-2), #0B0A10);
  transition: transform 0.65s var(--ease-out), opacity 0.65s ease, filter 0.65s ease;
  will-change: transform;
  user-select: none;
}
.gal__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.gal__item--cta {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold-bright);
  background:
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(212, 175, 122, 0.18), transparent 70%),
    linear-gradient(160deg, var(--surface-2), #0B0A10);
}
.gal__item[data-pos="0"]  { transform: translate(-50%, -50%); z-index: 5; opacity: 1; filter: brightness(1); border-color: var(--line-gold); }
.gal__item[data-pos="1"]  { transform: translate(-50%, -50%) translateX(46%) rotateY(-32deg) scale(0.82); z-index: 4; opacity: 0.75; filter: brightness(0.6); }
.gal__item[data-pos="-1"] { transform: translate(-50%, -50%) translateX(-46%) rotateY(32deg) scale(0.82); z-index: 4; opacity: 0.75; filter: brightness(0.6); }
.gal__item[data-pos="2"]  { transform: translate(-50%, -50%) translateX(78%) rotateY(-42deg) scale(0.66); z-index: 3; opacity: 0.35; filter: brightness(0.4); }
.gal__item[data-pos="-2"] { transform: translate(-50%, -50%) translateX(-78%) rotateY(42deg) scale(0.66); z-index: 3; opacity: 0.35; filter: brightness(0.4); }

.gal__controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.gal__btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 238, 229, 0.2);
  border-radius: 50%;
  color: var(--text);
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out);
}
.gal__btn:hover { border-color: var(--line-gold); color: var(--gold-bright); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   13. d11 — DESSINEZ AVEC LA LUMIÈRE
   -------------------------------------------------------------------------- */
.draw {
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(212, 175, 122, 0.08), transparent 70%),
    #0B0A12;
  cursor: crosshair;
  touch-action: none;
}
.draw canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.draw__hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  color: rgba(242, 238, 229, 0.65);
  background: rgba(10, 10, 15, 0.5);
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 0.5s ease;
  white-space: nowrap;
}
.draw.is-used .draw__hint { opacity: 0; }

/* --------------------------------------------------------------------------
   14. d12 — NAVIGATION INCANDESCENTE (21st.dev "Tubelight Navbar")
   -------------------------------------------------------------------------- */
.tube {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(242, 238, 229, 0.03);
}
.tube__item {
  position: relative;
  z-index: 1;
  padding: 10px 18px;
  min-height: 42px;
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--muted);
  transition: color 0.3s ease;
  white-space: nowrap;
}
.tube__item:hover { color: var(--text); }
.tube__item[aria-pressed="true"] { color: var(--gold-bright); }

/* La pilule + le néon qui glissent (position pilotée par js/lab.js) */
.tube__pill {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: var(--x, 6px);
  width: var(--w, 90px);
  border-radius: 999px;
  background: rgba(212, 175, 122, 0.1);
  border: 1px solid rgba(212, 175, 122, 0.22);
  transition: left 0.45s var(--ease-luxe), width 0.45s var(--ease-luxe);
  pointer-events: none;
}
.tube__pill::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 18%;
  right: 18%;
  height: 2.5px;
  border-radius: 999px;
  background: var(--gold-bright);
  box-shadow:
    0 0 12px rgba(233, 203, 148, 0.9),
    0 4px 22px 4px rgba(212, 175, 122, 0.45);
}

/* --------------------------------------------------------------------------
   15. MANIFESTE AU SCROLL — les mots s'allument en lisant
   -------------------------------------------------------------------------- */
.manifesto { padding-block: clamp(80px, 11vh, 130px); }
.manifesto__text {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(1.55rem, 3.3vw, 2.5rem);
  line-height: 1.45;
  max-width: 26ch;
  text-wrap: pretty;
}
.manifesto__text .w {
  opacity: 0.5; /* resting state stays readable (≈4.7:1 on --bg-2) — lit words go to 1 */
  transition: opacity 0.3s ease;
}
.manifesto__text .w.is-lit { opacity: 1; }
.manifesto .eyebrow { margin-bottom: 26px; }

/* --------------------------------------------------------------------------
   15b. DEUXIÈME MOUVEMENT — pièces pleine largeur (d13–d16)
   -------------------------------------------------------------------------- */

/* Séparateur de section */
.lab-divider { margin: clamp(64px, 9vw, 110px) 0 clamp(36px, 5vw, 56px); }
.lab-divider .eyebrow { margin-bottom: 18px; }
.lab-divider__title { font-size: clamp(2rem, 4.6vw, 3.3rem); }
.lab-divider__intro { color: var(--muted); margin-top: 16px; max-width: 50ch; }

/* Carte pleine largeur réutilisable (même langage que .lab-tile) */
.lab-feature {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  overflow: hidden;
  margin-bottom: clamp(16px, 2vw, 24px);
  transition: border-color 0.4s ease, box-shadow 0.5s ease;
}
.lab-feature:hover { border-color: var(--line-gold); }
.lab-feature__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px) 0; }

/* — d13 · 3D interactif + projecteur — */
.scene3d {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 420px;
  background: radial-gradient(ellipse 90% 80% at 80% 20%, rgba(212,175,122,.06), transparent 60%), #07060B;
}
.spotlight {
  position: absolute;
  top: -40%; left: -10%;
  width: 130%; height: 170%;
  pointer-events: none;
  background: radial-gradient(ellipse 32% 36% at 50% 50%, rgba(233,203,148,.16), transparent 62%);
  transform: rotate(-14deg);
  filter: blur(28px);
  opacity: 0;
  animation: spot-in 2.6s var(--ease-out) forwards, spot-drift 11s ease-in-out infinite alternate 2.6s;
}
@keyframes spot-in { to { opacity: 1; } }
@keyframes spot-drift { from { transform: rotate(-14deg) translateX(-4%); } to { transform: rotate(-8deg) translateX(10%); } }
.scene3d__copy { position: relative; z-index: 2; padding: clamp(26px, 3.4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.scene3d__h {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.08;
  background: linear-gradient(180deg, #FBF7EE, #9a93a0);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.scene3d__p { color: var(--muted); margin-top: 14px; max-width: 40ch; }
.scene3d__stage { position: relative; display: grid; place-items: center; perspective: 900px; min-height: 320px; }
.scene3d__stage::after { content: ""; position: absolute; width: 220px; height: 60px; bottom: 18%; border-radius: 50%; background: radial-gradient(ellipse, rgba(212,175,122,.22), transparent 70%); filter: blur(12px); }

/* Cristal en CSS 3D (6 faces translucides dorées) */
.gem { width: 150px; height: 150px; position: relative; transform-style: preserve-3d; will-change: transform; }
.gem__f {
  position: absolute; inset: 0;
  border: 1px solid rgba(212,175,122,.55);
  background: linear-gradient(135deg, rgba(233,203,148,.20), rgba(212,175,122,.04));
  box-shadow: inset 0 0 34px rgba(212,175,122,.18);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.gem__f:nth-child(1) { transform: translateZ(75px); }
.gem__f:nth-child(2) { transform: rotateY(180deg) translateZ(75px); }
.gem__f:nth-child(3) { transform: rotateY(90deg) translateZ(75px); }
.gem__f:nth-child(4) { transform: rotateY(-90deg) translateZ(75px); }
.gem__f:nth-child(5) { transform: rotateX(90deg) translateZ(75px); }
.gem__f:nth-child(6) { transform: rotateX(-90deg) translateZ(75px); }
.scene3d__hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 0.74rem; color: var(--faint); }

/* — d14 · mise en scène au défilement (carte épinglée qui se redresse) —
   La zone .cscroll est volontairement haute (220vh) : son enfant sticky reste
   épinglé plein écran pendant tout ce parcours, ce qui donne la « course »
   nécessaire pour voir la carte passer de 50° couchée à 0° à plat.
   ⚠ Aucun ancêtre du sticky ne doit porter transform/perspective/overflow
   (ça casserait l'épinglage) — la perspective est donc dans le transform JS. */
.cscroll-sec { margin-bottom: clamp(16px, 2vw, 24px); }
.cscroll { position: relative; height: 220vh; margin-top: 10px; }
.cscroll__sticky {
  position: -webkit-sticky; /* Safari iOS */
  position: sticky; top: 0;
  height: 100vh; min-height: 540px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(14px, 3vh, 34px);
  padding: 24px clamp(16px, 3vw, 40px);
  overflow: hidden;
}
.cscroll__title { text-align: center; max-width: 60ch; will-change: transform; }
.cscroll__title h3 { font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 360; }
.cscroll__title .big { display: block; font-size: clamp(2rem, 6vw, 4.2rem); font-weight: 430; margin-top: 4px; line-height: 1.04; }
.cscroll__card {
  width: min(900px, 94%);
  border: 4px solid #2C2820; border-radius: 26px;
  background: #15131C; padding: clamp(6px, 1vw, 12px);
  box-shadow: 0 50px 110px -38px rgba(0,0,0,.85), 0 0 0 1px rgba(212,175,122,.06);
  transform-origin: center center;
  transform: perspective(1200px) rotateX(50deg) scale(.82); /* état initial : couchée */
  will-change: transform;
}
.cscroll__frame { border-radius: 16px; overflow: hidden; background: #0B0A12; }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #100E16; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3640; display: inline-block; }
.browser-bar i:nth-child(1) { background: #C9645B; } .browser-bar i:nth-child(2) { background: #D3A24C; } .browser-bar i:nth-child(3) { background: #6FA86A; }
.browser-bar span { margin-left: 10px; font-size: 0.74rem; color: var(--faint); letter-spacing: .04em; }
.cscroll__shot { position: relative; aspect-ratio: 16 / 9; }
.cscroll__shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); }
.cscroll__shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(212,175,122,.12), transparent 40%, rgba(10,10,15,.5)); }
.cscroll__badge { position: absolute; left: 22px; bottom: 20px; z-index: 2; font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem,2.4vw,1.9rem); color: #F2EEE5; }
.cscroll__badge b { color: var(--gold-bright); font-style: normal; font-weight: 420; }

/* — d15 · cartes empilées — */
.dcards { display: grid; grid-template-areas: "stack"; place-items: center; min-height: 240px; width: 100%; }
.dcard {
  grid-area: stack;
  width: min(300px, 84%); height: 132px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px 18px;
  border: 1px solid var(--line-gold); border-radius: var(--r-md);
  background: var(--surface-2);
  transform: skewY(-8deg);
  transition: transform 0.6s var(--ease-out), filter 0.6s ease, box-shadow 0.6s ease, opacity 0.6s ease;
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.7);
}
.dcard:nth-child(1) { transform: skewY(-8deg) translate(-46px, -28px); filter: grayscale(1) brightness(.7); z-index: 1; }
.dcard:nth-child(2) { transform: skewY(-8deg) translate(0, 0); filter: grayscale(.6) brightness(.85); z-index: 2; }
.dcard:nth-child(3) { transform: skewY(-8deg) translate(46px, 28px); z-index: 3; }
.dcards:hover .dcard:nth-child(1) { transform: skewY(-8deg) translate(-64px, -40px); filter: none; }
.dcards:hover .dcard:nth-child(2) { transform: skewY(-8deg) translate(0, -6px); filter: none; }
.dcards:hover .dcard:nth-child(3) { transform: skewY(-8deg) translate(64px, 40px); }
.dcard__top { display: flex; align-items: center; gap: 10px; }
.dcard__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(212,175,122,.16); color: var(--gold-bright); font-size: .7rem; flex: none; }
.dcard__title { font-family: var(--font-display); font-size: 1.1rem; }
.dcard__desc { font-size: .9rem; color: var(--text); }
.dcard__tag { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }

/* — d16 · boutons précieux — */
.btns2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 22px; width: 100%; }
.btns2__glassbed {
  position: relative; display: grid; place-items: center;
  padding: 26px 30px; border-radius: var(--r-md); overflow: hidden;
  background:
    radial-gradient(circle at 25% 30%, rgba(212,175,122,.5), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(122,90,180,.45), transparent 45%),
    linear-gradient(120deg, #1a1726, #0d0c14);
}
/* Verre liquide : anneau lumineux + distorsion du fond (où le filtre est supporté) */
.liquid-btn {
  position: relative; z-index: 1;
  padding: 15px 34px; border-radius: 999px;
  font-weight: 500; letter-spacing: .01em; color: #fff;
  background: transparent; cursor: pointer;
  transition: transform .3s var(--ease-out);
}
.liquid-btn:hover { transform: scale(1.05); }
.liquid-btn__layer {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  box-shadow:
    inset 3px 3px .5px -3px rgba(255,255,255,.85),
    inset -3px -3px .5px -3px rgba(255,255,255,.85),
    inset 0 0 6px 6px rgba(255,255,255,.12),
    0 0 12px rgba(0,0,0,.25);
}
@supports (backdrop-filter: url(#lux-glass)) {
  .liquid-btn__layer { backdrop-filter: url(#lux-glass) blur(1px); }
}
.liquid-btn span { position: relative; z-index: 1; }

/* Boutons métal (or / bronze) : 3 couches dégradées */
.metal { position: relative; display: inline-flex; border-radius: 11px; padding: 1.25px; transition: transform .25s var(--ease-out), box-shadow .25s ease; }
.metal__inner { position: absolute; inset: 1px; border-radius: 10px; }
.metal__btn { position: relative; z-index: 1; margin: 1px; border-radius: 9px; padding: 13px 28px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.metal:active { transform: translateY(2px) scale(.99); }
.metal--gold { background: linear-gradient(to bottom, #917100, #EAD98F); box-shadow: 0 6px 18px -6px rgba(212,175,122,.5); }
.metal--gold .metal__inner { background: linear-gradient(to bottom, #FFFDDD 0%, #856807 55%, #FFF1B3 100%); }
.metal--gold .metal__btn { background: linear-gradient(to bottom, #FFEBA1, #9B873F); color: #FFFDE5; text-shadow: 0 -1px 0 rgba(120,94,2,.9); }
.metal--bronze { background: linear-gradient(to bottom, #864813, #E9B486); box-shadow: 0 6px 18px -6px rgba(180,110,60,.4); }
.metal--bronze .metal__inner { background: linear-gradient(to bottom, #EDC5A1 0%, #5F2D01 55%, #FFDEC1 100%); }
.metal--bronze .metal__btn { background: linear-gradient(to bottom, #FFE3C9, #A36F3D); color: #FFF7F0; text-shadow: 0 -1px 0 rgba(124,45,18,.9); }

/* — d17 · curseur chiffré (slider accessible + chiffres qui roulent) —
   Les réels (colonnes 0–9) glissent verticalement : l'effet « odomètre ».
   Le easing à léger dépassement (y2 = 1.2) donne le petit rebond. */
.nslider-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(22px, 3vw, 34px);
  padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 40px) clamp(20px, 2.4vw, 28px);
}
.nslider__display {
  display: inline-flex; align-items: flex-end;
  font-family: var(--font-display); font-weight: 430;
  font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 0.9;
  color: var(--gold-bright);
}
.nslider__unit { font-size: 0.5em; color: var(--gold); margin-left: 0.14em; align-self: center; }
.nflow { display: inline-flex; }
.reel { display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; }
.reel.is-hidden { width: 0; }
.reel__col {
  display: flex; flex-direction: column;
  transform: translateY(calc(var(--d, 0) * -1em));
  transition: transform 0.55s cubic-bezier(0.2, 1.2, 0.36, 1);
  will-change: transform;
}
.reel__col span { height: 1em; line-height: 1; display: block; text-align: center; font-variant-numeric: tabular-nums; }

.nslider { position: relative; width: min(360px, 86%); height: 24px; display: flex; align-items: center; touch-action: none; cursor: pointer; }
.nslider__track { position: relative; height: 4px; width: 100%; border-radius: 999px; background: rgba(242, 238, 229, 0.12); }
.nslider__range { position: absolute; left: 0; top: 0; height: 100%; width: var(--pct, 50%); border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }
.nslider__thumb {
  position: absolute; top: 50%; left: var(--pct, 50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: #FBF7EE; transform: translate(-50%, -50%);
  box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,122,.45);
  transition: box-shadow 0.2s ease; cursor: grab;
}
.nslider__thumb:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(212,175,122,.32), 0 4px 14px rgba(0,0,0,.45); }
.nslider__thumb:active { cursor: grabbing; box-shadow: 0 0 0 7px rgba(212,175,122,.16), 0 4px 14px rgba(0,0,0,.45); }
.nslider__label { font-size: 0.82rem; color: var(--faint); text-align: center; }
.nslider__label .nslider__hint { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .reel__col { transition: none; } }

/* Responsive — deuxième mouvement */
@media (max-width: 880px) {
  .scene3d { grid-template-columns: 1fr; }
  .scene3d__stage { min-height: 280px; order: -1; }
}
@media (max-width: 640px) {
  .gem { width: 116px; height: 116px; }
  .gem__f:nth-child(1) { transform: translateZ(58px); } .gem__f:nth-child(2) { transform: rotateY(180deg) translateZ(58px); }
  .gem__f:nth-child(3) { transform: rotateY(90deg) translateZ(58px); } .gem__f:nth-child(4) { transform: rotateY(-90deg) translateZ(58px); }
  .gem__f:nth-child(5) { transform: rotateX(90deg) translateZ(58px); } .gem__f:nth-child(6) { transform: rotateX(-90deg) translateZ(58px); }
  .dcard { width: min(280px, 92%); }
  .dcard:nth-child(1) { transform: skewY(-8deg) translate(-30px, -22px); }
  .dcard:nth-child(3) { transform: skewY(-8deg) translate(30px, 22px); }
  .dcards:hover .dcard:nth-child(1) { transform: skewY(-8deg) translate(-40px, -30px); }
  .dcards:hover .dcard:nth-child(3) { transform: skewY(-8deg) translate(40px, 30px); }
}

/* Reduced motion — deuxième mouvement */
@media (prefers-reduced-motion: reduce) {
  .spotlight { animation: none; opacity: 1; }
  .gem { animation: none; }
  /* pas d'effet au scroll : on remet la carte à plat, on retire la course */
  .cscroll { height: auto; }
  .cscroll__sticky { position: static; height: auto; min-height: 0; padding-block: clamp(30px, 5vw, 56px); }
  .cscroll__card { transform: none !important; }
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE & REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .lab-bento { grid-template-columns: 1fr 1fr; }
  .lab-tile--w2, .lab-tile--w3 { grid-column: span 1; }
  .lab-tile--w4 { grid-column: span 2; }
  .manifesto__text { max-width: 32ch; }
}

@media (max-width: 640px) {
  .lab-bento { grid-template-columns: 1fr; }
  .lab-tile--w2, .lab-tile--w3, .lab-tile--w4 { grid-column: span 1; }
  .lab-stage { min-height: 200px; }
  .spot-row { grid-template-columns: 1fr; }
  .spot { min-height: 92px; }
  .orbit { width: min(250px, 92%); }
  .orbit__arm .orbit__node:nth-child(1) { transform: translate(0, -125px); }
  .orbit__arm .orbit__node:nth-child(2) { transform: translate(125px, 0); }
  .orbit__arm .orbit__node:nth-child(3) { transform: translate(0, 125px); }
  .orbit__arm .orbit__node:nth-child(4) { transform: translate(-125px, 0); }
  .gal__stage { height: 230px; }
  .tube__item { padding: 10px 13px; font-size: 0.8rem; }
  .lab-rot { display: block; min-height: 1.2em; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-paths path,
  .aurora i,
  .aurora b,
  .orbit__ring,
  .orbit__arm,
  .orbit__node span,
  .orbit__center::after { animation: none !important; }
  .lab-rot::after { animation: none; }
  .lamp__bar { width: min(190px, 70%); }
  .lamp__glow { opacity: 1; transform: none; }
  .lamp__word, .lamp__line { opacity: 1; transform: none; }
  .gooey span { filter: none; }
  .manifesto__text .w { opacity: 1; }
  .btn--shine::after { display: none; }
}