/* ═══════════════════════════════════════════════════════════════════════
   PLOOM — le didacticiel.
   =======================
   Une page qui se regarde, pas une notice qui se lit. La référence tenue :
   OKX et Revolut — noir profond, un titre qui prend toute la place, une
   masse de couleur qui respire derrière, et une seule action à la fois.

   Trois choses font la différence entre « animé » et « fait à la main » :
     · le grain. Un dégradé propre a l'air d'un dégradé ; un dégradé
       grainé a l'air d'une matière ;
     · le tracking. Au-delà de 64px, un titre sans resserrement flotte ;
     · une seule chose bouge à la fois. Tout ce qui bouge ensemble fait
       du bruit.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bleu:        #0090D3;
  --bleu-clair:  #73D9FF;
  --bleu-profond:#375CAD;
  --noir:        #000000;
  --blanc:       #FFFFFF;
  --gris:        rgba(255,255,255,.62);
  --gris-2:      rgba(255,255,255,.36);
  --trait:       rgba(255,255,255,.10);
  --surface:     rgba(255,255,255,.045);
  --police: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
            "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --sortie: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

body {
  background: #000;
  color: var(--blanc);
  font-family: var(--police);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Le fond est NOIR. Pas « presque noir », pas « noir avec une nappe » :
      noir. C'est la demande de jules, et elle est juste — un dégradé de
      fond tire toujours vers le sale sur un écran mal calibré, et il
      écrase les objets qu'on veut regarder.

      La lumière vient donc des objets eux-mêmes : un liseré sur leur
      bord haut, une ombre portée profonde en dessous, et une lueur
      strictement contenue SOUS l'objet — jamais derrière le texte. ── */
#halo, #grain, #voile { display: none; }

/* ─────────────────────────── la scène ─────────────────────────── */

.scene {
  position: relative; z-index: 3;
  height: 100%; width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 88px 24px 120px;
  text-align: center;
}

.etape { display: none; width: 100%; max-width: 1080px; }
.etape.vue { display: block; }
.etape.vue > * { animation: monte 620ms var(--sortie) both; }
.etape.vue > *:nth-child(2) { animation-delay: 70ms; }
.etape.vue > *:nth-child(3) { animation-delay: 140ms; }
.etape.vue > *:nth-child(4) { animation-delay: 210ms; }

@keyframes monte {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.sur {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris-2); margin: 0 0 22px;
}

h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 7.4vw, 96px);
  font-weight: 760;
  letter-spacing: -.042em;
  line-height: .96;
}
h1 .bleu {
  background: linear-gradient(94deg, var(--bleu-clair), var(--bleu) 52%, var(--bleu-profond));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sous {
  margin: 0 auto; max-width: 660px;
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.55; color: var(--gris);
}

.faire {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 34px; padding: 14px 28px;
  background: var(--blanc); color: #000;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: transform 180ms var(--sortie), opacity 180ms;
}
.faire:hover { transform: translateY(-1px); }
.faire:active { transform: scale(.985); }
.faire.creux {
  background: transparent; color: var(--blanc);
  border: 1px solid rgba(255,255,255,.26);
}
.faire.creux:hover { background: rgba(255,255,255,.07); }

.commande {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 30px; padding: 15px 20px;
  background: rgba(255,255,255,.93); color: #0b0b0c;
  border-radius: 14px; font-family: var(--mono); font-size: 14px;
}
.commande .dollar { color: #23a35a; }

/* ─────────────────── le décor animé de chaque étape ─────────────────── */

/* L'objet. C'est lui qui porte la lumière : un liseré clair sur l'arête
   du haut, comme un reflet, et une ombre qui le décolle du noir. */
.demo {
  position: relative;
  margin: 44px auto 0; width: 100%; max-width: 860px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background: #0A0A0B;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,1),
              0 0 0 1px rgba(255,255,255,.02) inset;
  padding: 22px; text-align: left; overflow: hidden;
}
.demo::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent,
              rgba(255,255,255,.22) 22%, rgba(115,217,255,.34) 50%,
              rgba(255,255,255,.22) 78%, transparent);
}
/* Pas de lueur. Une première version en posait une sous l'objet — mais
   l'objet doit masquer son contenu (`overflow: hidden`), donc la lueur
   restait enfermée dedans et faisait une tache bleue dans un coin. Une
   tache, c'est précisément ce qu'on voulait éviter. Le liseré du haut et
   l'ombre portée suffisent à décoller l'objet du noir. */
.demo-tete {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--trait);
  font-size: 12px; color: var(--gris-2);
}
.pastille-fausse { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.pastille-fausse.on { background: var(--bleu); box-shadow: 0 0 0 4px rgba(0,144,211,.18); }

/* pièces qui tombent */
.pieces { display: flex; gap: 12px; flex-wrap: wrap; }
.piece {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--trait);
  font-size: 13px; color: var(--gris);
  opacity: 0; transform: translateY(-14px);
}
.piece.tombe { animation: tombe 560ms var(--sortie) both; }
.piece .coche { color: var(--bleu-clair); opacity: 0; transition: opacity 260ms; }
.piece.lue .coche { opacity: 1; }
.piece.lue { color: var(--blanc); border-color: rgba(115,217,255,.26); }
@keyframes tombe { to { opacity: 1; transform: none; } }

/* la grille de notation */
.critere-l { margin-bottom: 15px; }
.critere-l .haut { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.critere-l .pts { margin-left: auto; font-family: var(--mono); color: var(--gris); }
.critere-l .rail { height: 5px; border-radius: 999px; background: rgba(255,255,255,.07);
                   margin-top: 8px; overflow: hidden; }
.critere-l .rail i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--bleu-clair), var(--bleu));
  transition: width 1100ms var(--sortie);
}
.critere-l.hors { opacity: .42; }
.critere-l.hors .rail i { background: rgba(255,255,255,.22); }

/* les mots qui s'écrivent */
.plume { font-size: 14.5px; line-height: 1.75; color: var(--gris); min-height: 132px; }
.plume b { color: var(--blanc); font-weight: 560; }
.curseur {
  display: inline-block; width: 2px; height: 1.05em; background: var(--bleu-clair);
  vertical-align: -2px; margin-left: 2px; animation: clignote 1s steps(2) infinite;
}
@keyframes clignote { 50% { opacity: 0; } }

/* la jauge de score */
.jauge-ronde { display: flex; align-items: center; gap: 22px; }
.jauge-ronde svg { flex: none; }
.jauge-ronde .chiffre {
  font-size: 40px; font-weight: 720; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* le chat */
.bulles { display: flex; flex-direction: column; gap: 10px; }
.bulle-d { max-width: 82%; padding: 11px 16px; border-radius: 16px; font-size: 14px; opacity: 0; }
.bulle-d.moi { align-self: flex-end; background: var(--bleu); color: #fff;
               border-bottom-right-radius: 6px; }
.bulle-d.lui { align-self: flex-start; background: var(--surface);
               border: 1px solid var(--trait); color: var(--gris);
               border-bottom-left-radius: 6px; }
.bulle-d.entre { animation: monte 480ms var(--sortie) both; }

/* les pages du PDF */
.pages { display: flex; gap: 14px; justify-content: center; perspective: 900px; }
.page-p {
  width: 108px; height: 150px; border-radius: 8px; background: #fff;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9);
  opacity: 0; transform: rotateY(-26deg) translateY(22px);
  padding: 11px; overflow: hidden;
}
.page-p.pose { animation: pose 700ms var(--sortie) both; }
@keyframes pose { to { opacity: 1; transform: rotateY(-8deg) translateY(0); } }
.page-p .b { height: 4px; border-radius: 2px; background: #dbe3ec; margin-bottom: 5px; }
.page-p .b.t { background: #0090D3; width: 62%; height: 6px; margin-bottom: 9px; }
.page-p .b.c { width: 82%; }
.page-p .b.d { width: 54%; }

/* ─────────────────────────── la navigation ─────────────────────────── */

.barre {
  position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 6;
  background: rgba(255,255,255,.08);
}
.barre i { display: block; height: 100%; width: 0; background: var(--bleu);
           transition: width 520ms var(--sortie); }

.pied {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 18px;
  padding: 20px 28px;
  background: #000;
}
.pied .marque { font-size: 13px; font-weight: 640; letter-spacing: -.01em; }
.pied .marque span { color: var(--gris-2); font-weight: 400; margin-left: 8px; }
.points { margin: 0 auto; display: flex; gap: 7px; }
.points button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.22); cursor: pointer;
  transition: width 260ms var(--sortie), background 260ms;
}
.points button[aria-current="true"] { width: 22px; border-radius: 999px; background: var(--blanc); }
.fleches { display: flex; gap: 8px; }
.fleche {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); background: transparent;
  color: var(--blanc); cursor: pointer; font-size: 15px;
  display: grid; place-items: center;
  transition: background 200ms, opacity 200ms;
}
.fleche:hover { background: rgba(255,255,255,.08); }
.fleche[disabled] { opacity: .3; cursor: default; }

.quitter {
  position: fixed; top: 20px; right: 24px; z-index: 6;
  background: transparent; border: 0; color: var(--gris-2);
  font: inherit; font-size: 13px; cursor: pointer; padding: 8px 12px;
  border-radius: 999px; transition: color 200ms, background 200ms;
}
.quitter:hover { color: var(--blanc); background: rgba(255,255,255,.07); }

/* la touche « espace », dessinée : discrète, et absente sur téléphone */
.touche-aide { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gris-2); }
.touche-aide kbd {
  font: inherit; font-size: 11px; color: var(--gris);
  min-width: 64px; padding: 3px 10px 4px; text-align: center;
  border-radius: 7px; border: 1px solid rgba(255,255,255,.18);
  border-bottom-width: 3px; background: rgba(255,255,255,.04);
}

@media (max-width: 720px) {
  .touche-aide { display: none; }
  .scene { padding: 72px 18px 112px; }
  .demo { padding: 16px; margin-top: 30px; }
  .pages { gap: 8px; }
  .page-p { width: 78px; height: 110px; }
  .pied { padding: 14px 16px; gap: 10px; }
  .pied .marque span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .etape.vue > *, .piece.tombe, .page-p.pose, .bulle-d.entre { animation: none; opacity: 1; transform: none; }
  .critere-l .rail i { transition: none; }
}