/* Blindternet — la page d'accueil.
 *
 * Le prototype tient dans une fenêtre et ne défile pas ; cette page-ci
 * est une page, elle se lit de haut en bas. C'est la seule différence de
 * fond entre les deux habillages — le reste (le noir, l'ambre, le trait
 * fin) vient de « commun.css » et ne bouge pas.
 */

/* Space Mono sur toute la page. Une chasse fixe pose plus large et plus
   haut qu'une linéale : on descend d'un cran les corps et on ouvre
   l'interligne, sinon le texte se tasse et gagne des lignes. La barre
   dessinée fait exception — voir « commun.css ». */
body {
  --texte-faible: #b0b0b0;
  --police: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--police);
  line-height: 1.7;
  padding: 0 6vw 100px;

  /* Le gris secondaire est remonté ici, et ici seulement — le prototype
     garde le sien, réglé à l'oreille du karaoké. Space Mono a des fûts
     fins : à #9a9a9a elle passait le contraste (7,5:1) mais se lisait mal
     en petit corps sur du noir. #b0b0b0 la porte à 9,7:1.

     Et PAS de « -webkit-font-smoothing: antialiased » : il amincit les
     fûts, ce qui se paye deux fois sur un texte clair posé sur du noir. */
}

.page { max-width: 46em; margin: 0 auto; }

/* ------------------------------------------------------------------ *
 *  « Optimisé pour ordinateur »
 *
 *  Deux fois, parce que les deux moments diffèrent : la pastille prévient
 *  en arrivant, la note du bas prévient au moment de s'engager. Elle
 *  reprend la pilule des réglages du prototype — même trait, même rayon.
 *
 *  « pointer-events: none » : elle flotte au-dessus de la page, elle ne
 *  doit jamais intercepter un clic destiné à ce qu'elle survole.
 * ------------------------------------------------------------------ */
.note-ecran {
  position: fixed;
  top: 14px; right: 18px;
  z-index: 5;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texte-faible);
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 5px 12px;
  pointer-events: none;
}

.note-portes {
  margin-top: 20px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--texte-faible);
}

/* ------------------------------------------------------------------ *
 *  Le titre
 * ------------------------------------------------------------------ */

/* Le titre seul : la premiere phrase de la page dit deja ce qu'est
   Blindternet, et un sous-titre la redirait trois lignes plus haut. */
header {
  padding: 16vh 0 8vh;
  text-align: center;
}
/* Micro 5 est une fonte pixel : sa capitale n'occupe qu'une fraction du
   corps, d'où des valeurs qui paraissent énormes — elles ne le sont pas à
   l'œil. Un seul gras existe, on ne demande donc pas 700 : le navigateur
   le simulerait, et un gras synthétique sur une pixel bave. */
header h1 {
  font-family: "Micro 5", "Space Mono", ui-monospace, monospace;
  /* Micro 5 pose 3,95 px de large par px de corps sur « BLINDTERNET » :
     à 180 px le mot fait 710 px, soit la colonne de 736 moins une
     respiration. Le plancher est bas exprès — à 96 px le mot débordait
     l'écran sur un téléphone. */
  font-size: clamp(56px, 17vw, 180px);
  font-weight: 400;
  line-height: .85;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ------------------------------------------------------------------ *
 *  Les sections
 * ------------------------------------------------------------------ */

section { padding: 6vh 0; }

h2 {
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 22px;
}

h3 {
  font-size: 13px;
  font-weight: 700;
  /* La capitale d'une chasse fixe est déjà espacée : on n'en rajoute
     qu'une pointe, là où une linéale demandait .06em. */
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin: 44px 0 18px;
}

p { margin-bottom: 18px; font-size: 15px; }
p:last-child { margin-bottom: 0; }
p em { color: var(--accent); font-style: normal; }
p strong { color: var(--texte); font-weight: 600; }

/* ------------------------------------------------------------------ *
 *  Entrer — le choix de la voix, puis les trois portes
 * ------------------------------------------------------------------ */

#ligne-voix {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}
#ligne-voix .etiquette {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

/* Le menu des voix installées. Sur fond noir, les options du système
   n'héritent de rien : il faut les peindre à la main. */
#choix-voix {
  background: none;
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--texte);
  font: inherit;
  font-size: 13px;
  max-width: 14em;
  padding: 5px 10px;
  cursor: pointer;
}
#choix-voix option { background: #141414; color: var(--texte); }

/* Les trois portes. Chacune nomme une expérience et dit ce qu'on y vit —
   on n'entre pas dans un prototype en cochant des cases. */
#portes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.porte {
  width: 16em;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  background: none;
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 15px 17px;
  font: inherit;
  color: var(--texte);
  cursor: pointer;
}
.porte:hover:not(:disabled) { border-color: var(--trait-vif); }
.porte:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.porte .nom { font-size: 14px; font-weight: 700; color: var(--accent); }
.porte .dit { font-size: 12px; line-height: 1.6; color: var(--texte-faible); }
.porte:disabled { opacity: .38; cursor: default; }


/* ------------------------------------------------------------------ *
 *  Les règles — un énoncé, puis ce qu'il veut dire.
 * ------------------------------------------------------------------ */

.regles { margin-top: 4px; }
.regles dt {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 26px;
}
.regles dt:first-child { margin-top: 0; }
.regles dd {
  margin-top: 8px;
  padding-left: 18px;
  border-left: 1px solid var(--trait);
  color: var(--texte-faible);
  font-size: 15px;
}

/* ------------------------------------------------------------------ *
 *  Les schémas
 *
 *  Ils illustrent, ils ne portent pas le sens : tout ce qu'on y lit est
 *  dit dans la prose autour. Un seul accent, ambre, et le trait fin des
 *  icônes de la barre.
 * ------------------------------------------------------------------ */

#schema-structure, #schema-telecommande { margin: 34px 0; }

/* La télécommande sort de la colonne de prose. Douze touches à 74 px ne
   tiennent pas dans 46 em, et une barre qui se casse en trois lignes
   n'est plus une barre : on ne reconnaîtrait pas l'objet qu'on aura
   sous les doigts. Les cartes profitent de la même largeur — quatre
   colonnes plutôt que deux. */
/* 1140 px, parce que c'est ce que MESURE la barre : onze touches de
   74 px, le curseur de 190, les gouttières et le cadre — 1106 en tout.
   Un plafond plus bas la ferait défiler jusque sur grand écran, alors
   qu'elle y tient. */
#schema-telecommande {
  width: min(96vw, 1140px);
  margin-left: calc(50% - min(48vw, 570px));
}

.schema {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}

/* --- la barre --- *
   Son dessin vient de « commun.css », partagé avec le prototype : rien
   n'est recopié ici, et rien ne peut donc dériver. Il ne reste que deux
   choses qui n'appartiennent qu'à l'accueil. */

/* Un, la couleur. Les tracés sont en « currentColor » : poser la couleur
   sur la touche suffit à les passer en ambre, et les deux schémas de la
   page se répondent alors. La légende garde la sienne. */
.schema-tc .touche { color: var(--accent); cursor: default; }

/* Deux, l'étroit. La barre du prototype ne se replie jamais — elle est
   d'un seul tenant, c'est ce qui en fait un objet. Plutôt que de la
   casser en trois lignes, on la fait défiler dans son cadre ; la page,
   elle, ne bouge pas. */
.tc-cadre { overflow-x: auto; }
/* « max-content » plutôt que la largeur du cadre : dans le prototype, la
   barre se dimensionne sur son contenu et ses touches font 74 px pleins.
   Sans ça, le cadre défilant les comprimerait — et une barre aux touches
   étroites n'est plus la barre qu'on retrouvera. */
.tc-cadre .barre { width: max-content; margin: 0 auto; }

/* --- la grammaire des deux appuis, dite une fois --- */

.tc-grammaire {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin: 18px 0 24px;
  font-size: 13px;
  color: var(--texte-faible);
}
.tc-grammaire span { display: flex; align-items: center; }

/* Les deux glyphes : un trait pour l'appui court, deux pour le maintien.
   Ils reviennent à l'identique sur les douze cartes — c'est cette
   répétition qui fait qu'on n'a la règle à apprendre qu'une fois. */
i.court, i.maintenu {
  flex: none;
  width: 13px;
  margin-right: 9px;
  border-top: 1.6px solid var(--accent);
}
i.maintenu {
  height: 5px;
  border-bottom: 1.6px solid var(--accent);
}

/* --- une carte par touche --- */

.tc-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  gap: 10px;
}

.tc-carte {
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 14px 15px 15px;
  outline: none;
}
.tc-carte.eclaire { border-color: var(--accent); }
/* Éclairer une touche, c'est ce que fait déjà « .active » sous le doigt
   dans le prototype : le même fond, pour le même sens. */
.schema-tc .touche.eclaire { background: var(--trait); }
.schema-tc .touche.eclaire .legende { color: var(--texte); }

.tc-carte h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 12px;
}
.tc-carte h4 svg {
  flex: none;
  width: 19px; height: 19px;
  stroke: var(--accent); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.tc-carte h4 kbd {
  margin-left: auto;
  font: inherit;
  font-size: 10.5px;
  color: var(--texte-faible);
  border: 1px solid var(--trait);
  border-radius: 5px;
  padding: 1px 6px;
}

.tc-appui {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--texte-faible);
}
.tc-appui:last-child { margin-bottom: 0; }
/* Les glyphes s'alignent sur la première ligne du texte, pas sur le haut
   du bloc : sur trois lignes, un trait flottant en l'air ne rattache
   plus rien à rien. */
.tc-appui i { margin-top: 8px; }
/* Le maintien qui n'existe pas encore garde sa ligne : une touche à un
   seul étage se saurait, l'absence doit se voir. */
.tc-appui.vide { opacity: .45; font-style: italic; }
/* Le curseur n'a pas de glyphe, mais garde l'alignement des autres :
   13 px de trait plus 9 px de gouttière. */
.tc-appui.seul { padding-left: 22px; }

.tc-inactif {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--trait);
  font-size: 12px;
  color: var(--texte-faible);
}
.tc-inactif::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

/* ------------------------------------------------------------------ *
 *  Fenêtre étroite
 * ------------------------------------------------------------------ */

@media (max-width: 640px) {
  header { padding: 10vh 0 6vh; }
  /* Le dessin des poupées russes ne se replie pas : il perdrait
     l'emboîtement, qui EST son propos. On le laisse défiler dans son
     cadre plutôt que de le casser — et la page, elle, ne bouge pas. */
  #schema-structure { overflow-x: auto; }
  #schema-structure .schema { min-width: 560px; }
}