/* ═══════════════════════════════════════════════════════════════════════
   ECOOT — le mode d'emploi.
   =========================
   Même famille que celui de PLOOM (PLOOM/ploom/web/utiliser.*) : fond noir
   franc, titres très grands et serrés, une pilule blanche, et une seule
   chose qui bouge à la fois. Toujours sombre : pas de variante claire.

   Chaque écran porte une fausse fenêtre d'ECOOT qui mime l'interface :
   l'appel qui arrive, l'onde qui défile, les deux voix qui se séparent,
   la grille qui se remplit, la correction qui fait bouger la note, le
   dossier de signalement qui se prépare.

   Le grain vit sur les objets, pas sur la page : une tuile de bruit
   calculée une fois (utiliser.js), posée en overlay sur chaque fenêtre.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  --bleu:        #4c9eff;          /* l'accent d'ECOOT */
  --bleu-clair:  #9fd0ff;
  --bleu-profond:#2f6fd0;
  --vert:        #4caf88;          /* la voix du client, « Appliqué » */
  --jaune:       #ffd166;
  --orange:      #ff8c42;
  --rouge:       #ff4d6a;
  --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, Consolas, 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;                 /* noir franc, jamais de dégradé de fond */
  color: var(--blanc);
  font-family: var(--police);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 8px; }

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

.scene {
  position: relative; z-index: 3;
  height: 100%; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 72px 24px 100px; text-align: center;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
.etape { display: none; width: 100%; max-width: 1080px; }
.etape.vue { display: block; margin-block: auto; }
.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;           /* au-delà de 64 px, un titre se resserre */
  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: 680px; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.55; color: var(--gris); }
.sous b { color: var(--blanc); font-weight: 600; }

.faire {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px; padding: 14px 28px;
  background: var(--blanc); color: #000;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  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); }

/* ─────────────────────── la fausse fenêtre d'ECOOT ─────────────────────── */

.demo {
  position: relative;
  margin: 30px auto 0; width: 100%; max-width: 640px;
  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;
  font-size: 13.5px; color: var(--gris);
}
.demo::before {                      /* le liseré de lumière sur l'arête haute */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 22%,
              rgba(159,208,255,.36) 50%, rgba(255,255,255,.22) 78%, transparent);
}
.demo::after {                       /* le grain */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain, none); background-size: 128px 128px;
  mix-blend-mode: overlay; opacity: .5; border-radius: inherit;
}

.f-t { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-2); margin-bottom: 10px; }
.f-vide { color: var(--gris-2); }
.f-mono { font-family: var(--mono); font-size: 12px; }
.f-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.f-dit { margin-top: 10px; font-size: 12.5px; color: var(--gris-2); min-height: 1.4em; }

.f-bouton {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 8px 14px; border-radius: 9px;
  background: linear-gradient(180deg, var(--bleu), var(--bleu-profond)); color: #fff;
  font-weight: 600; font-size: 12.5px;
  transition: transform 160ms var(--sortie), box-shadow 160ms;
}
.f-bouton.second { background: rgba(255,255,255,.06); color: var(--blanc); border: 1px solid var(--trait); }
.f-bouton.presse { transform: scale(.94); box-shadow: 0 0 0 6px rgba(76,158,255,.25); }

/* le curseur qui mime la souris */
.f-curseur {
  position: absolute; left: 0; top: 0; z-index: 5; width: 20px; height: 20px;
  pointer-events: none; opacity: 0;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 1.5v15l4.2-4 2.8 6.3 2.6-1.1-2.8-6.2 5.9-.4z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.6));
}

/* pastilles d'état (comme l'en-tête d'ECOOT) */
.f-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 12px;
            margin-bottom: 14px; border-bottom: 1px solid var(--trait); }
.f-marque { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--blanc);
            font-weight: 700; letter-spacing: .1em; font-size: 13px; }
.f-logo { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
          background: linear-gradient(180deg, var(--bleu), var(--bleu-profond)); color: #fff;
          font-size: 12px; letter-spacing: 0; }
.f-pastille { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gris);
              background: rgba(255,255,255,.04); border: 1px solid var(--trait); border-radius: 20px;
              padding: 3px 9px; transition: color 300ms, border-color 300ms; }
.f-pastille i { width: 7px; height: 7px; border-radius: 50%; background: #98a2b2;
                box-shadow: 0 0 0 3px rgba(152,162,178,.16); transition: background 300ms, box-shadow 300ms; }
.f-pastille.vert i { background: var(--vert); box-shadow: 0 0 0 3px rgba(76,175,136,.2); }
.f-pastille.gris i { background: #98a2b2; box-shadow: 0 0 0 3px rgba(152,162,178,.16); }

/* 1 · la porte */
.f-porte { max-width: 330px; margin: 0 auto; }
.f-porte .f-marque { justify-content: center; margin: 0 0 4px; }
.f-porte .f-sous { text-align: center; font-size: 11.5px; color: var(--gris-2); margin-bottom: 14px; }
.f-label { display: block; font-size: 12px; color: var(--gris); margin-top: 9px; }
.f-champ {
  margin-top: 5px; padding: 9px 12px; border-radius: 9px; min-height: 36px;
  background: rgba(255,255,255,.04); border: 1px solid var(--trait);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--blanc);
  transition: border-color 260ms;
}
.f-champ.focus { border-color: rgba(159,208,255,.6); }
.f-porte .f-bouton { width: 100%; justify-content: center; margin-top: 14px; }
.f-connecte { opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 400ms var(--sortie); }
.f-connecte.on { opacity: 1; transform: none; }
.f-porte-zone { transition: opacity 360ms, transform 360ms var(--sortie); }
.f-porte-zone.part { opacity: 0; transform: scale(.97); }
.f-superpose { position: relative; }
.f-superpose > .f-connecte { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.f-superpose > .f-connecte.seul { position: static; }
.f-porte-zone[hidden] { display: none; }

/* 2 · les enregistrements */
.f-zone {
  position: relative; min-height: 92px; padding: 12px; border-radius: 12px; margin-top: 12px;
  border: 1.5px dashed rgba(255,255,255,.16); background: rgba(255,255,255,.025);
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  transition: border-color 260ms, background 260ms;
}
.f-zone.survol { border-color: var(--bleu); background: rgba(76,158,255,.08); }
.f-wav {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 7px; border-radius: 9px;
  background: #fff; color: #111; font-size: 11.5px; font-weight: 600; font-family: var(--mono);
  box-shadow: 0 12px 26px -10px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(-18px);
}
.f-wav b { background: var(--bleu-profond); color: #fff; font-size: 9px; letter-spacing: .04em;
           padding: 3px 5px; border-radius: 4px; font-family: var(--police); }
.f-wav.tombe { animation: tombe 520ms var(--sortie) both; }
@keyframes tombe { to { opacity: 1; transform: none; } }
.f-nom { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--blanc);
         opacity: 0; transition: opacity 300ms; overflow-wrap: anywhere; }
.f-nom.on { opacity: 1; }
.f-nom span { border-radius: 4px; padding: 1px 2px; transition: background 300ms, color 300ms; }
.f-nom span.lu { background: rgba(76,158,255,.22); color: var(--bleu-clair); }
.f-lu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.f-lu div { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--trait); background: var(--surface);
            font-size: 12px; opacity: 0; transform: translateY(6px); transition: opacity 360ms, transform 360ms var(--sortie); }
.f-lu div.on { opacity: 1; transform: none; }
.f-lu small { display: block; color: var(--gris-2); font-size: 11px; }
.f-lu b { color: var(--blanc); font-weight: 600; }

/* 3 · l'écoute : l'onde qui défile */
.f-onde { position: relative; height: 64px; overflow: hidden; border-radius: 10px;
          background: rgba(255,255,255,.025); border: 1px solid var(--trait); }
.f-onde .piste { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 3px;
                 padding: 0 3px; will-change: transform; }
.f-onde .piste i { flex: none; width: 3px; border-radius: 2px; background: rgba(159,208,255,.7); }
.f-onde.defile .piste { animation: defile 6s linear infinite; }
@keyframes defile { to { transform: translateX(-50%); } }
.f-onde::after { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1.5px;
                 background: var(--blanc); opacity: .55; }
.f-texte { margin-top: 12px; min-height: 42px; font-size: 12.5px; line-height: 1.55; color: var(--gris); }
.f-texte .c { display: inline-block; width: 2px; height: 1em; background: var(--bleu-clair);
              vertical-align: -2px; margin-left: 2px; animation: clignote 1s steps(2) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.f-file { margin-top: 10px; transition: opacity 420ms, transform 420ms var(--sortie), filter 420ms; }
.f-file.ferme { opacity: 0; transform: scale(.96); filter: blur(3px); }
.f-ligne { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--trait); font-size: 12px; }
.f-ligne .n { flex: 1; min-width: 0; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--blanc); }
.f-ligne .e { color: var(--gris-2); white-space: nowrap; }
.f-jauge { width: 80px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; flex: none; }
.f-jauge i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
             background: linear-gradient(90deg, var(--bleu-clair), var(--bleu)); transition: transform 700ms var(--sortie); }
.f-ferme-msg { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
               padding: 9px 16px; border-radius: 999px; font-size: 12.5px; white-space: nowrap;
               background: rgba(255,255,255,.08); border: 1px solid var(--trait); color: var(--gris);
               opacity: 0; transition: opacity 320ms; z-index: 3; }
.f-ferme-msg.on { opacity: 1; }
.f-rouvrir { opacity: 0; transition: opacity 320ms; }
.f-rouvrir.on { opacity: 1; }

/* 4 · qui parle : deux voix */
.f-voix { position: relative; height: 112px; border-radius: 10px; background: rgba(255,255,255,.025);
          border: 1px solid var(--trait); overflow: hidden; }
.f-voix .rang { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; }
.f-voix .rang i { flex: none; width: 4px; border-radius: 2px; background: rgba(255,255,255,.45);
                  transition: transform 700ms var(--sortie), background 500ms; }
.f-voix .rang i.e.parti { background: var(--bleu); }
.f-voix .rang i.c.parti { background: var(--vert); }
.f-qui { position: absolute; left: 12px; font-size: 11.5px; font-weight: 600; opacity: 0; transition: opacity 400ms; }
.f-qui.on { opacity: 1; }
.f-qui.e { top: 8px; color: var(--bleu-clair); }
.f-qui.c { bottom: 8px; color: var(--vert); }
.f-ton { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--trait);
         font-size: 12px; opacity: 0; transform: translateY(6px); transition: opacity 380ms, transform 380ms var(--sortie); }
.f-voix + .f-ton { margin-top: 12px; }
.f-ton.on { opacity: 1; transform: none; }
.f-ton .qui { min-width: 92px; font-weight: 600; color: var(--blanc); }
.f-echelle { display: inline-flex; gap: 3px; }
.f-echelle i { width: 14px; height: 7px; border-radius: 2px; background: rgba(255,255,255,.1); }
.f-echelle i.n1 { background: #7ec8a9; } .f-echelle i.n2 { background: var(--jaune); }
.f-echelle i.n3 { background: var(--orange); } .f-echelle i.n4 { background: var(--rouge); }
.f-ton .compte { margin-left: auto; font-size: 11px; color: var(--gris-2); }

/* 5 · la fiche et sa grille */
.f-tete4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.f-tete4 small { display: block; font-size: 10.5px; color: var(--gris-2); text-transform: uppercase; letter-spacing: .06em; }
.f-tete4 b { color: var(--blanc); font-weight: 600; font-size: 12.5px; }
.f-grille { width: 100%; border-collapse: collapse; font-size: 12px; }
.f-grille td { padding: 5px 4px; border-top: 1px solid var(--trait); vertical-align: middle; }
.f-grille td:last-child { text-align: right; font-family: var(--mono); color: var(--gris); white-space: nowrap; }
.f-grille tr.c td { opacity: .25; transition: opacity 300ms; }
.f-grille tr.c.on td { opacity: 1; }
.f-niv { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
         border: 1px solid currentColor; white-space: nowrap; }
.f-niv.applique { color: var(--vert); } .f-niv.partiel { color: var(--jaune); }
.f-niv.non_applique { color: var(--orange); } .f-niv.avertissement { color: var(--rouge); }
.f-niv.a_ecouter { color: #9aa3b2; border-style: dashed; }
.f-grille tr.total td { border-top: 1px solid rgba(255,255,255,.22); color: var(--blanc); font-weight: 600; }
.f-note { font-size: 22px; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--blanc); }
.f-note.ok { color: var(--vert); } .f-note.moyen { color: var(--jaune); } .f-note.bas { color: var(--rouge); }
.f-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.f-duo div { padding: 8px 10px; border-radius: 10px; font-size: 11.5px; border: 1px solid var(--trait);
             opacity: 0; transition: opacity 380ms; }
.f-duo div.on { opacity: 1; }
.f-duo b { display: block; color: var(--blanc); font-size: 12px; margin-bottom: 2px; }
.f-duo .non { border-color: rgba(152,162,178,.5); }

/* 6 · corriger */
.f-menu-l { position: relative; display: inline-block; }
.f-select { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px;
            background: rgba(255,255,255,.06); border: 1px solid var(--trait); font-size: 11.5px; font-weight: 700;
            transition: border-color 260ms; }
.f-select::after { content: "▾"; font-weight: 400; color: var(--gris-2); }
.f-select.focus { border-color: rgba(159,208,255,.6); }
.f-select.applique { color: var(--vert); } .f-select.partiel { color: var(--jaune); }
.f-select.non_applique { color: var(--orange); }
.f-options { position: absolute; left: 0; top: calc(100% + 4px); z-index: 4; min-width: 190px; padding: 4px;
             border-radius: 9px; background: #16181d; border: 1px solid rgba(255,255,255,.14);
             box-shadow: 0 18px 40px -12px rgba(0,0,0,.95); opacity: 0; transform: translateY(-4px);
             pointer-events: none; transition: opacity 220ms, transform 220ms var(--sortie); }
.f-options.on { opacity: 1; transform: none; }
.f-options div { padding: 5px 8px; border-radius: 6px; font-size: 11.5px; color: var(--gris); white-space: nowrap; }
.f-options div.sur { background: rgba(76,158,255,.18); color: var(--blanc); }
.f-corrige { display: block; font-size: 10.5px; color: var(--gris-2); margin-top: 2px; opacity: 0; transition: opacity 300ms; }
.f-corrige.on { opacity: 1; }
.f-garde { margin-top: 10px; font-size: 12px; color: var(--gris-2); min-height: 1.4em; transition: color 300ms; }
.f-garde.ok { color: var(--vert); }
.f-grille.corr td:nth-child(2) { width: 46%; }

/* 7 · signaler */
.f-alerte { padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,77,106,.55);
            background: rgba(255,77,106,.08); font-size: 12px; color: var(--gris);
            opacity: 0; transform: translateY(-6px); transition: opacity 380ms, transform 380ms var(--sortie); }
.f-alerte.on { opacity: 1; transform: none; }
.f-alerte b { color: var(--rouge); display: block; margin-bottom: 2px; }
.f-appel { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 10px;
           background: var(--surface); border: 1px solid var(--trait); font-size: 12px; }
.f-appel .n { flex: 1; min-width: 0; font-family: var(--mono); color: var(--blanc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-drapeau { opacity: 0; transform: scale(.4); transition: opacity 300ms, transform 400ms var(--sortie); }
.f-drapeau.on { opacity: 1; transform: none; }
.f-dossier { position: relative; margin-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; }
.f-pieces { display: flex; flex-direction: column; gap: 5px; }
.f-piece { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-family: var(--mono); color: var(--blanc);
           opacity: 0; transform: translateX(-8px); transition: opacity 320ms, transform 320ms var(--sortie); }
.f-piece.on { opacity: 1; transform: none; }
.f-piece small { font-family: var(--police); color: var(--gris-2); }
.f-piece .ic { width: 16px; text-align: center; }
.f-piste { position: relative; height: 22px; width: 150px; border-radius: 6px; background: rgba(255,255,255,.06);
           margin-left: 24px; overflow: hidden; }
.f-piste i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rouge); opacity: 0; transition: opacity 300ms; }
.f-piste.on i { opacity: 1; }
.f-zip { width: 64px; height: 76px; border-radius: 8px; background: #fff; color: #111; display: grid; place-items: center;
         font-size: 11px; font-weight: 700; box-shadow: 0 14px 30px -12px rgba(0,0,0,.95); opacity: 0;
         position: relative; overflow: hidden; }
.f-zip::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 34px; width: 6px; margin-left: -3px;
                 background: repeating-linear-gradient(180deg, #999 0 4px, #ddd 4px 8px); }
.f-zip span { position: absolute; bottom: 10px; }
.f-bac { display: inline-block; margin-top: 10px; padding: 7px 14px; border-radius: 999px; font-size: 12px;
         background: rgba(255,255,255,.06); border: 1px solid var(--trait); color: var(--gris);
         transition: border-color 300ms, color 300ms; }
.f-bac.recu { border-color: rgba(159,208,255,.55); color: var(--blanc); }

/* 8 · quota épuisé */
.f-bandeau { margin-top: 10px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--trait);
             font-size: 12px; line-height: 1.5; color: var(--gris);
             opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 400ms var(--sortie); }
.f-bandeau.on { opacity: 1; transform: none; }
.f-bandeau b { color: var(--blanc); }
.f-poste { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.f-ecran { width: 58px; height: 40px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.35); position: relative; flex: none; }
.f-ecran::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 22px; height: 5px; margin-left: -11px;
                  border-radius: 0 0 4px 4px; background: rgba(255,255,255,.35); }
.f-ecran i { position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px;
             background: rgba(255,255,255,.1); overflow: hidden; }
.f-ecran i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--bleu-clair);
                    animation: navette 1.6s ease-in-out infinite; }
@keyframes navette { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.f-poste .l { font-size: 12px; }
.f-poste .l b { color: var(--blanc); }

/* accueil : le sommaire */
.sommaire { margin: 0; padding: 0; list-style: none; counter-reset: s;
            display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.sommaire li { counter-increment: s; display: flex; gap: 10px; align-items: baseline;
               padding: 8px 0; border-bottom: 1px solid var(--trait); font-size: 13.5px;
               opacity: 0; transform: translateY(8px);
               transition: opacity 360ms, transform 360ms var(--sortie), color 360ms; }
.sommaire li::before { content: counter(s); font-family: var(--mono); font-size: 12px; color: var(--bleu-clair); }
.sommaire li.on { opacity: 1; transform: none; color: var(--blanc); }

/* fin */
.fin-boutons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fin-boutons .faire { margin-top: 34px; }

/* ─────────────────────────── 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: 100%; background: var(--bleu); transform-origin: left; transform: scaleX(0); transition: transform 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: .06em; }
.pied .marque span { color: var(--gris-2); font-weight: 400; margin-left: 8px; letter-spacing: 0; }
.points { margin: 0 auto; display: flex; gap: 7px; }
/* Chaque point occupe une place fixe ; c'est la pastille dessinée dedans qui
   s'étire (transform), pour ne pas décaler les voisins à chaque écran. */
.points button { position: relative; width: 22px; height: 7px; padding: 0; border: 0;
                 background: transparent; cursor: pointer; }
.points button::before { content: ""; position: absolute; inset: 0; border-radius: 999px;
                 background: rgba(255,255,255,.22); transform: scaleX(.318);
                 transition: transform 260ms var(--sortie), background 260ms; }
.points button[aria-current="true"]::before { transform: scaleX(1); 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-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);
}

/* Écran d'ordinateur peu haut (portable) : le titre cède un peu de place
   pour que la fausse fenêtre, là où tout bouge, reste en vue. */
@media (min-width: 721px) and (max-height: 920px) {
  .scene { padding-top: 56px; }
  h1 { font-size: clamp(38px, 5.6vw, 72px); margin-bottom: 14px; }
  .sur { margin-bottom: 14px; }
  .sous { font-size: 16px; line-height: 1.5; }
  .demo { margin-top: 22px; }
}

/* ─────────────────────────── téléphone ─────────────────────────── */

@media (max-width: 720px) {
  .touche-aide { display: none; }
  .scene { padding: 60px 16px 96px; }
  h1 { font-size: clamp(32px, 9.4vw, 44px); margin-bottom: 14px; }
  .sur { margin-bottom: 14px; }
  .sous { font-size: 15px; line-height: 1.5; }
  .demo { padding: 14px; font-size: 13px; margin-top: 24px; }
  .sommaire { grid-template-columns: 1fr; gap: 0; }
  .sommaire li { padding: 6px 0; }
  .f-tete4 { grid-template-columns: 1fr 1fr; }
  .f-lu, .f-duo { grid-template-columns: 1fr; }
  .pied { padding: 14px 16px; gap: 10px; }
  .pied .marque span { display: none; }
  .quitter { top: 12px; right: 10px; }
  .cache-tel { display: none; }
  .f-piste { width: 110px; }
  .f-voix .rang { left: 84px; justify-content: flex-start; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .etape.vue > *, .f-wav.tombe { animation: none; opacity: 1; transform: none; }
  .f-onde.defile .piste, .f-ecran i::after, .f-texte .c { animation: none; }
  .f-curseur { display: none; }
  .demo *, .demo, .barre i { transition: none !important; }
}