/* Névé — démonstration « expérience produit » (ZataLabs, V7.7).
   Une scène de studio (projecteur, socle, gourde en SVG), des coloris qui
   changent les variables CSS, des compteurs animés et un simulateur. */

:root {
  --fond: #0f1216;
  --fond-2: #161a20;
  --encre: #eef2f5;
  --doux: #9aa4ae;
  --accent: #8fd3ff;
  --trait: rgb(238 242 245 / .1);
  --affiche: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Coloris (Glacier par défaut) */
  --corps: #dfe7ec;
  --ombre: #8d9ba5;
  --reflet: #ffffff;
  --teinte: 143 211 255;
}
body[data-coloris="lichen"] { --corps: #7f9170; --ombre: #3f4a37; --reflet: #c6d4b5; --teinte: 170 214 140; }
body[data-coloris="basalte"] { --corps: #3a3e44; --ombre: #15171a; --reflet: #8a9099; --teinte: 190 196 205; }
body[data-coloris="aurore"] { --corps: #e9aaa1; --ombre: #a45f58; --reflet: #fff0ec; --teinte: 255 170 160; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--affiche); font-weight: 800; line-height: .95; margin: 0; text-transform: uppercase; letter-spacing: .01em; }
.accent { color: rgb(var(--teinte)); transition: color .6s; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.evitement { position: absolute; left: -999px; top: .5rem; z-index: 50; padding: .6rem 1rem; background: var(--encre); color: var(--fond); border-radius: 8px; }
.evitement:focus { left: .5rem; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.surtitre { margin: 0 0 1rem; font: 600 .75rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--doux); }

.bouton { display: inline-flex; align-items: center; justify-content: center; padding: .9rem 1.6rem; border: 0; border-radius: 999px; background: var(--encre); color: var(--fond); font: 600 1rem var(--sans); text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background .25s; }
.bouton:hover { transform: translateY(-1px); background: #fff; }
.bouton:active { transform: scale(.97); }
.bouton--contour { background: none; color: var(--encre); box-shadow: inset 0 0 0 1px rgb(238 242 245 / .35); }
.bouton--contour:hover { background: rgb(238 242 245 / .08); }

/* ---------- En-tête ---------- */
.entete { position: relative; z-index: 5; display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem clamp(1rem, 4vw, 3rem); }
.logo { font: 800 1.6rem/1 var(--affiche); letter-spacing: .12em; text-decoration: none; }
.entete__nav { display: flex; gap: 1.6rem; margin-left: auto; }
.entete__nav a { text-decoration: none; font-size: .92rem; color: var(--doux); }
.entete__nav a:hover { color: var(--encre); }
.entete__appel { padding: .5rem 1.1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(238 242 245 / .3); text-decoration: none; font-size: .9rem; }
@media (max-width: 640px) { .entete__nav { display: none; } .entete__appel { margin-left: auto; } }

/* ---------- La scène ---------- */
.scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 2rem;
  min-height: calc(100svh - 4.5rem);
  padding: 1rem clamp(1.2rem, 6vw, 5rem) 3rem;
  overflow: hidden;
  background: radial-gradient(60rem 40rem at 70% 60%, rgb(var(--teinte) / .12), transparent 65%);
  transition: background .8s;
}
.scene__texte { position: relative; z-index: 2; max-width: 30rem; }
.scene h1 { font-size: clamp(3.4rem, 8vw, 7rem); margin-bottom: 1.4rem; }
.scene__texte > p:not(.surtitre) { color: #c3cbd2; margin: 0 0 1.6rem; }

.coloris { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 2rem; padding: 0; border: 0; min-width: 0; }
.coloris legend { width: 100%; margin-bottom: .7rem; padding: 0; font-size: .9rem; color: var(--doux); }
.coloris legend span { color: var(--encre); font-weight: 600; }
.coloris label { position: relative; cursor: pointer; }
.coloris input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.coloris__pastille { display: block; width: 2.4rem; height: 2.4rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); transition: box-shadow .25s, transform .25s var(--ease); }
.coloris input:checked + .coloris__pastille { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), 0 0 0 3px var(--fond), 0 0 0 5px var(--encre); }
.coloris input:focus-visible + .coloris__pastille { outline: 2px solid var(--accent); outline-offset: 7px; }
.coloris label:hover .coloris__pastille { transform: scale(1.08); }
.coloris__pastille--glacier { background: linear-gradient(135deg, #fff, #b7c4cc); }
.coloris__pastille--lichen { background: linear-gradient(135deg, #b4c4a2, #56644a); }
.coloris__pastille--basalte { background: linear-gradient(135deg, #7c828a, #1c1f23); }
.coloris__pastille--aurore { background: linear-gradient(135deg, #ffe0da, #c9776e); }

.plateau { position: relative; height: min(78svh, 680px); display: grid; place-items: end center; perspective: 900px; }
.plateau__projecteur {
  position: absolute; left: 50%; top: -10%; width: 70%; height: 110%; translate: -50% 0;
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgb(255 255 255 / .09) 172deg, rgb(255 255 255 / .12) 180deg, rgb(255 255 255 / .09) 188deg, transparent 200deg);
  mask-image: linear-gradient(#000 60%, transparent);
  pointer-events: none;
}
.plateau__socle {
  position: absolute; bottom: 3%; left: 50%; width: min(64%, 360px); aspect-ratio: 4 / 1; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, #2a3038, #171b21 70%, transparent 71%);
  box-shadow: 0 30px 60px rgb(0 0 0 / .5), inset 0 2px 0 rgb(255 255 255 / .08);
}
.plateau__socle::after { content: ""; position: absolute; inset: 22% 18%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--teinte) / .35), transparent); filter: blur(6px); }
.gourde {
  position: relative; z-index: 2;
  width: min(34%, 190px);
  margin-bottom: calc(3% + min(64%, 360px) / 8);
  transform-style: preserve-3d;
  animation: flotter 6s ease-in-out infinite;
  filter: drop-shadow(0 30px 30px rgb(0 0 0 / .45));
}
.gourde svg { display: block; width: 100%; height: auto; transform: rotateY(var(--incl, 0deg)); transition: transform .5s var(--ease); }
.gourde__logo { font: 800 30px var(--affiche); letter-spacing: 10px; fill: #000; opacity: .16; }
.gourde__balayage { transform: translateX(var(--balayage, 110px)); transition: transform .5s var(--ease); }
@keyframes flotter { 50% { transform: translateY(-12px); } }

.plateau__givre i { position: absolute; bottom: 20%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--teinte) / .6); opacity: 0; animation: givre 5s linear infinite; }
.plateau__givre i:nth-child(2) { left: 42%; animation-delay: .8s; width: 4px; height: 4px; }
.plateau__givre i:nth-child(3) { left: 57%; animation-delay: 1.7s; }
.plateau__givre i:nth-child(4) { left: 46%; animation-delay: 2.6s; width: 3px; height: 3px; }
.plateau__givre i:nth-child(5) { left: 54%; animation-delay: 3.4s; width: 5px; height: 5px; }
.plateau__givre i:nth-child(6) { left: 50%; animation-delay: 4.2s; width: 3px; height: 3px; }
@keyframes givre { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-340px) translateX(12px); opacity: 0; } }

@media (max-width: 800px) {
  .scene { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }
  .plateau { order: -1; height: 56svh; }
  .gourde { width: min(36%, 150px); }
}

/* ---------- Chiffres ---------- */
.enveloppe { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 3rem); }
.enveloppe--etroite { max-width: 40rem; }
.chiffres, .epreuve, .coupe, .precommande { padding: clamp(4.5rem, 11vw, 8rem) 0; border-top: 1px solid var(--trait); }
.chiffres__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem; margin: 0 0 clamp(3rem, 8vw, 5rem); padding: 0; list-style: none; }
.chiffres__liste strong { display: block; font: 800 clamp(3rem, 7vw, 5rem)/1 var(--affiche); font-variant-numeric: tabular-nums; }
.chiffres__liste li > span { display: block; margin-top: .4rem; color: var(--doux); }
.compteur-geant { padding: clamp(2rem, 5vw, 3rem); border-radius: 28px; background: linear-gradient(135deg, var(--fond-2), rgb(var(--teinte) / .1)); box-shadow: inset 0 0 0 1px var(--trait); text-align: center; }
.compteur-geant__nombre { margin: 0; font: 800 clamp(3.4rem, 13vw, 10rem)/1 var(--affiche); font-variant-numeric: tabular-nums; color: rgb(var(--teinte)); transition: color .6s; }
.compteur-geant__nombre.is-pulse { animation: pulse .6s var(--ease); }
@keyframes pulse { 40% { transform: scale(1.025); } }
.compteur-geant__legende { max-width: 34rem; margin: 1rem auto 0; color: #c3cbd2; }
.compteur-geant__legende small { display: block; margin-top: .3rem; color: var(--doux); }

/* ---------- L'épreuve ---------- */
.epreuve h2, .coupe h2, .precommande h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: 1.4rem; }
.epreuve__intro { max-width: 36rem; margin: 0 0 2rem; color: #c3cbd2; }
.epreuve__controles { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.8rem; }
.bascule { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--fond-2); box-shadow: inset 0 0 0 1px var(--trait); }
.bascule label { position: relative; }
.bascule input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bascule span { display: block; padding: .6rem 1.1rem; border-radius: 999px; font-size: .92rem; color: var(--doux); transition: background .25s, color .25s; }
.bascule input:checked + span { background: var(--encre); color: var(--fond); }
.bascule input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.curseur { display: grid; gap: .8rem; margin-bottom: 2.4rem; color: var(--doux); }
.curseur output { color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }
.curseur input { width: 100%; accent-color: rgb(var(--teinte)); height: 2rem; }

.thermos { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: clamp(1.5rem, 5vw, 4rem); }
.thermo { display: grid; justify-items: center; gap: .8rem; margin: 0; }
.thermo__tube { position: relative; width: 44px; height: 240px; border-radius: 22px; background: var(--fond-2); box-shadow: inset 0 0 0 1px var(--trait); overflow: hidden; }
.thermo__niveau { position: absolute; left: 6px; right: 6px; bottom: 6px; height: calc(100% - 12px); border-radius: 16px; background: var(--couleur, #8fd3ff); transform-origin: bottom; transform: scaleY(.1); transition: background .3s; }
.thermo figcaption { display: grid; justify-items: center; text-align: center; }
.thermo strong { font: 800 2.6rem/1 var(--affiche); font-variant-numeric: tabular-nums; }
.thermo figcaption > span { font-size: .88rem; color: var(--doux); }
.thermo--neve figcaption > span { color: var(--encre); font-weight: 600; }
.thermos__verdict { align-self: center; max-width: 24rem; margin: 0; font-size: 1.15rem; color: #c3cbd2; }
.epreuve__note { margin: 2.2rem 0 0; font-size: .82rem; color: var(--doux); }
@media (max-width: 640px) {
  .thermos { grid-template-columns: 1fr 1fr; }
  .thermos__verdict { grid-column: 1 / -1; }
  .thermo__tube { height: 180px; }
}

/* ---------- La coupe ---------- */
.coupe__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: 3rem; }
.coupe__liste { margin: 0; padding: 0; list-style: none; counter-reset: couche; }
.coupe__liste li { position: relative; padding: .9rem 0 .9rem 3rem; border-top: 1px solid var(--trait); color: var(--doux); counter-increment: couche; opacity: .35; transition: opacity .5s, color .5s; }
.coupe__liste li::before { content: counter(couche); position: absolute; left: 0; top: .75rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(238 242 245 / .3); font: 800 1rem var(--affiche); color: var(--encre); }
.coupe__liste li b { display: block; color: var(--encre); font-weight: 600; }
.coupe.is-visible .coupe__liste li { opacity: 1; }
.coupe.is-visible .coupe__liste li:nth-child(2) { transition-delay: .35s; }
.coupe.is-visible .coupe__liste li:nth-child(3) { transition-delay: .7s; }
.coupe.is-visible .coupe__liste li:nth-child(4) { transition-delay: 1.05s; }
.coupe__schema { width: 100%; max-width: 340px; justify-self: center; overflow: visible; }
.c { transform-origin: 160px 160px; transform: scale(.85); opacity: 0; transition: transform .8s var(--ease), opacity .8s; }
.c1 { fill: var(--corps); }
.c2 { fill: #0b0e12; }
.c3 { fill: #c07a4e; }
.c4 { fill: #b9c3cb; }
.c5 { fill: rgb(var(--teinte) / .35); }
.coupe.is-visible .c { transform: none; opacity: 1; }
.coupe.is-visible .c2 { transition-delay: .35s; }
.coupe.is-visible .c3 { transition-delay: .7s; }
.coupe.is-visible .c4, .coupe.is-visible .c5 { transition-delay: 1.05s; }
/* Chaque numéro de la liste porte la couleur de sa couche sur le schéma. */
.coupe__liste li:nth-child(1)::before { background: var(--corps); color: #111; }
.coupe__liste li:nth-child(2)::before { background: #0b0e12; }
.coupe__liste li:nth-child(3)::before { background: #c07a4e; color: #111; }
.coupe__liste li:nth-child(4)::before { background: #b9c3cb; color: #111; }
@media (max-width: 760px) { .coupe__grille { grid-template-columns: 1fr; } .coupe__schema { max-width: 240px; order: -1; } }

/* ---------- Précommande ---------- */
.commande fieldset { margin: 0 0 1.4rem; padding: 0; border: 0; min-width: 0; }
.commande legend { margin-bottom: .8rem; color: var(--doux); font-size: .9rem; }
.tailles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.tailles label { position: relative; }
.tailles input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tailles span { display: grid; gap: .2rem; justify-items: center; padding: 1rem .5rem; border-radius: 16px; background: var(--fond-2); box-shadow: inset 0 0 0 1px var(--trait); font: 800 1.6rem var(--affiche); transition: box-shadow .25s; }
.tailles small { font: 500 .85rem var(--sans); color: var(--doux); }
.tailles input:checked + span { box-shadow: inset 0 0 0 2px rgb(var(--teinte)); }
.tailles input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.commande__resume { margin: 0 0 1.4rem; color: var(--doux); }
.commande__resume strong { color: var(--encre); }
.commande__message { min-height: 1.5em; margin: 1rem 0 0; color: rgb(var(--teinte)); }

.pied { padding: 2rem 1.2rem 2.5rem; text-align: center; font-size: .85rem; color: var(--doux); border-top: 1px solid var(--trait); }

/* Animations réduites : la gourde est posée, rien ne flotte ni ne file ;
   compteurs et coupe arrivent directement à leur état final (script.js). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .plateau__givre { display: none; }
  .coupe__liste li, .c { opacity: 1; transform: none; }
}