/* Blindternet — ce que les deux pages partagent.
 *
 * L'accueil et le prototype sont deux documents, mais une seule maison.
 * Ce fichier ne porte que ce qui ne peut pas exister en double : la
 * palette, le reset, et le fond noir.
 *
 * ------------------------------------------------------------------ *
 *  Deux familles de couleurs, à ne jamais confondre :
 *  celles de TEXTE, toutes au-dessus de 4,5:1 sur le noir,
 *  et celles de TRAIT, réservées aux bordures.
 * ------------------------------------------------------------------ */
:root {
  --fond:          #000000;
  --texte:         #e8e8e8;   /* 16:1  */
  --texte-faible:  #9a9a9a;   /* 6,6:1 — légendes, mots à venir */
  --accent:        #ffb340;   /* 10,9:1 — le mot en cours */
  --trait:         #3a3a3a;   /* bordures uniquement */
  --trait-vif:     #6a5330;   /* bordure de la zone courante */

  /* La pile du système. Le prototype s'en tient là : il simule un
     navigateur, il doit avoir l'air de la machine. La page d'accueil, elle,
     remplace « --police » par Space Mono — mais la barre dessinée garde
     celle-ci, pour rester l'objet qu'on retrouvera en bas du prototype. */
  --police-systeme: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --police:         var(--police-systeme);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
}

/* ------------------------------------------------------------------ *
 *  La télécommande.
 *
 *  Elle se montre à deux endroits — en bas du prototype, où on l'a sous
 *  les doigts, et sur la page d'accueil, où on la présente. Un seul
 *  style pour les deux : le mode d'emploi doit montrer L'OBJET, pas une
 *  ressemblance qui dérivera. C'est la même raison qui met les tracés et
 *  les légendes dans « touches.js ».
 *
 *  D'où les classes plutôt que les identifiants : deux documents, deux
 *  barres, un seul dessin.
 * ------------------------------------------------------------------ */
.barre {
  /* Elle ne suit ni la police ni les gris de la page qui l'accueille :
     c'est un objet, pas du texte. Sur l'accueil — Space Mono, gris
     remonté pour la lisibilité — elle reste dessinée exactement comme on
     la retrouvera en bas du prototype. */
  font-family: var(--police-systeme);
  --texte-faible: #9a9a9a;
  flex: none;
  margin: 0 auto 22px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  border: 1px solid var(--trait);
  border-radius: 22px;
  padding: 12px 16px;
}

.touche {
  background: none;
  border: none;
  color: var(--texte);
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 74px;
  padding: 6px 2px 4px;
  border-radius: 12px;
}
.touche svg { width: 21px; height: 21px; stroke: currentColor; fill: none;
              stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.touche .legende {
  font-size: 10px;
  line-height: 1.25;
  color: var(--texte-faible);
  text-align: center;
  letter-spacing: .01em;
}
.touche:hover .legende { color: var(--texte); }
.touche.active { background: var(--trait); }
.touche.active .legende { color: var(--texte); }
.touche.inerte { opacity: .42; }

/* Le curseur, au milieu de la barre. */
.slider {
  width: 190px;
  height: 30px;
  margin: 6px 12px 0;
  border: 1px solid var(--trait);
  border-radius: 999px;
  flex: none;
  position: relative;
}
.slider::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--trait);
}