/* ==========================================================================
   B18 V2 — Socle d'application (story S1.1)

   Aucune couleur littérale ici : tout passe par les jetons de jetons.css.
   Contrôlé par `node outils-v2/contraste.mjs`, qui fait échouer le build
   au premier #hex ou rgba() trouvé dans ce fichier.

   Le seuil mobile est écrit en clair (820px) dans les media queries : une
   media query ne sait pas lire une variable CSS. La valeur de référence est
   --seuil-mobile dans jetons.css, ces répétitions la suivent.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Empêche l'ajustement automatique de la taille de texte au passage en
     paysage sur iOS, qui grossit certains blocs et pas d'autres. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Reset explicite de la police sur les éléments de formulaire. Sans lui, ils
   retombent sur la police par défaut du navigateur au lieu de la police
   système — règle standing KAIROZ, déjà payée une fois. */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Les champs de saisie ne descendent jamais sous 16 px : en dessous, Safari
   iOS zoome tout seul au toucher et la mise en page part de travers
   (B18_REGLES_AFFICHAGE.md §2). Le resserrement éventuel du texte ne
   s'applique qu'à partir du grand écran, jamais l'inverse. */
input,
select,
textarea {
  font-size: var(--t-champ);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
  font-weight: var(--graisse-appui);
}

p {
  margin: 0;
}

/* Focus clavier visible partout. 28 éléments de la V1 sont passés de
   <div onclick> à <button> pour cette raison : sans focus visible et sans
   élément focalisable, l'application n'est utilisable qu'à la souris
   (B18_REGLES_AFFICHAGE.md §11). */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

/* Respecté explicitement : une animation qui ne peut pas être coupée rend
   l'application pénible à qui y est sensible. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Mise en page de la page de référence des jetons
   ========================================================================== */

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--e-6) var(--e-5) var(--e-7);
}

.entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--trait);
  margin-bottom: var(--e-6);
}

.marque {
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--graisse-caps);
  color: var(--encre3);
  margin-bottom: var(--e-2);
}

.entete h1 {
  font-size: var(--t-titre-l);
}

/* Bascule de vue : pilules compactes, modèle repris de BIE. Compact veut dire
   libellé léger sur une seule ligne — pas cible minuscule : la hauteur reste
   à 44 px, c'est le texte qui est discret (B18_REGLES_AFFICHAGE.md §7). */
.bascule {
  display: inline-flex;
  gap: var(--e-1);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-p);
  padding: var(--e-1);
}

.bascule button {
  min-height: var(--cible);
  padding: 0 var(--e-4);
  border: 0;
  background: transparent;
  color: var(--encre2);
  border-radius: var(--r-p);
  font-size: var(--t-petit);
  cursor: pointer;
}

.bascule button[aria-pressed="true"] {
  background: var(--teal);
  color: var(--sur-teal);
  font-weight: var(--graisse-appui);
}

/* Le bilan de mesure est un paragraphe isolé, hors section : il lui faut sa
   propre respiration, sinon il se colle au titre du groupe suivant. */
#bilan {
  color: var(--encre2);
  font-size: var(--t-appui);
  margin-bottom: var(--e-6);
}

#bilan[data-verdict="sous-seuil"] {
  color: var(--lave);
  font-weight: var(--graisse-appui);
}

.section {
  margin-bottom: var(--e-6);
}

.section > h2 {
  font-size: var(--t-titre);
  margin-bottom: var(--e-2);
}

.section > .note {
  color: var(--encre2);
  font-size: var(--t-appui);
  max-width: 68ch;
  margin-bottom: var(--e-4);
}

/* Vues aérées : des cartes individuelles côte à côte, jamais un grand bloc
   pleine largeur qui empile tout. */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--e-3);
}

.jeton {
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--ombre-basse);
}

.jeton .pave {
  height: 62px;
  border-bottom: 1px solid var(--trait);
  display: flex;
  align-items: flex-end;
  padding: var(--e-2);
}

/* L'échantillon de texte est posé SUR le pavé, pas à côté : c'est la seule
   façon de voir ce qu'on mesure. */
.jeton .pave span {
  font-size: var(--t-petit);
  font-weight: var(--graisse-appui);
}

.jeton .corps {
  padding: var(--e-3);
}

.jeton .nom {
  font-family: var(--police-mono);
  font-size: var(--t-petit);
  color: var(--encre);
}

.jeton .valeur {
  font-family: var(--police-mono);
  font-size: var(--t-micro);
  color: var(--encre3);
  margin-top: var(--e-1);
}

.jeton .mesure {
  margin-top: var(--e-2);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--graisse-forte);
}

.jeton .mesure[data-verdict="ok"] {
  color: var(--pousse);
}

.jeton .mesure[data-verdict="sous-seuil"] {
  color: var(--lave);
}

.jeton .mesure[data-verdict="indicatif"] {
  color: var(--encre3);
}

/* Démonstration des jetons non chromatiques : rythme, rayons, cibles. */
.demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: flex-end;
}

.demo-item {
  text-align: center;
}

.demo-item .bloc {
  background: var(--lagon-f);
  border: 1px solid var(--teal);
}

.demo-item .etiquette {
  display: block;
  margin-top: var(--e-1);
  font-family: var(--police-mono);
  font-size: var(--t-micro);
  color: var(--encre3);
}

.echelle-texte > div {
  padding: var(--e-1) 0;
  border-bottom: 1px solid var(--trait2);
}

.echelle-texte .etiquette {
  font-family: var(--police-mono);
  font-size: var(--t-micro);
  color: var(--encre3);
  margin-left: var(--e-2);
}

/* Message d'écran vide — rédigé, jamais générique. Le composant est posé ici
   dès S1.1 parce que c'est le comportement le plus facile à perdre dans une
   réécriture : une carte qui disparaît fait croire à un bug
   (CLAUDE.md §4). */
.vide {
  border: 1px dashed var(--trait);
  border-radius: var(--r-m);
  background: var(--surface2);
  padding: var(--e-5);
  color: var(--encre2);
  font-size: var(--t-appui);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Seuil mobile unique : 820 px (--seuil-mobile). Sur téléphone, une grille
   devient une LISTE — jamais une petite grille (B18_REGLES_AFFICHAGE.md §4).
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .page {
    padding: var(--e-5) var(--e-4) var(--e-7);
  }

  .entete h1 {
    font-size: var(--t-titre);
  }

  .grille {
    grid-template-columns: 1fr;
  }

  /* La bascule reste compacte sur mobile. Elle a été étirée en pleine largeur
     dans une première version, et la relecture visuelle l'a rejetée à juste
     titre : la pastille active devenait un aplat teal de 164 px, l'objet le
     plus lourd de l'écran, plus présent que le titre juste au-dessus.
     C'est le motif récurrent des retours de Cédric — un composant pensé pour
     le grand écran, étiré au lieu d'être repensé (B18_REGLES_AFFICHAGE.md §7
     et §13). La hauteur de 44 px, elle, ne bouge pas : c'est le plancher
     tactile, et ce n'est pas lui qui posait problème. */
  .bascule {
    align-self: flex-start;
  }

  /* Sur une carte de surface, la bande de couleur ne porte pas de texte :
     62 px de haut sur bureau, moins sur mobile où 25 cartes s'empilent. */
  .jeton .pave {
    height: 48px;
  }
}

/* --------------------------------------------------------------------------
   Échantillons de la page de référence.

   Un jeton par sélecteur d'attribut, plutôt qu'un style en ligne posé par le
   JS. C'est plus verbeux, et c'est le prix de la règle : aucun style écrit
   en ligne dans un gabarit JS (B18_REGLES_AFFICHAGE.md §11). Les 281 styles
   en ligne de la V1 ont été retirés un par un, on ne les réintroduit pas ici
   sous prétexte que c'est une page de référence.
   -------------------------------------------------------------------------- */
.pave[data-fond="fond"] { background: var(--fond); }
.pave[data-fond="surface"] { background: var(--surface); }
.pave[data-fond="surface2"] { background: var(--surface2); }
.pave[data-fond="trait"] { background: var(--trait); }
.pave[data-fond="trait2"] { background: var(--trait2); }
.pave[data-fond="teal"] { background: var(--teal); }
.pave[data-fond="teal-d"] { background: var(--teal-d); }
.pave[data-fond="lagon"] { background: var(--lagon); }
.pave[data-fond="lagon-f"] { background: var(--lagon-f); }
.pave[data-fond="focus"] { background: var(--focus); }
.pave[data-fond="pousse"] { background: var(--pousse); }
.pave[data-fond="pousse-f"] { background: var(--pousse-f); }
.pave[data-fond="ambre"] { background: var(--ambre); }
.pave[data-fond="ambre-f"] { background: var(--ambre-f); }
.pave[data-fond="lave"] { background: var(--lave); }
.pave[data-fond="lave-f"] { background: var(--lave-f); }
.pave[data-fond="ev1"] { background: var(--ev1); }
.pave[data-fond="ev1f"] { background: var(--ev1f); }
.pave[data-fond="ev2"] { background: var(--ev2); }
.pave[data-fond="ev2f"] { background: var(--ev2f); }
.pave[data-fond="ev3"] { background: var(--ev3); }
.pave[data-fond="ev3f"] { background: var(--ev3f); }
.pave[data-fond="ev4"] { background: var(--ev4); }
.pave[data-fond="ev4f"] { background: var(--ev4f); }
.pave[data-fond="ev5"] { background: var(--ev5); }
.pave[data-fond="ev5f"] { background: var(--ev5f); }

.pave[data-encre="encre"] span { color: var(--encre); }
.pave[data-encre="encre2"] span { color: var(--encre2); }
.pave[data-encre="encre3"] span { color: var(--encre3); }
.pave[data-encre="teal"] span { color: var(--teal); }
.pave[data-encre="pousse"] span { color: var(--pousse); }
.pave[data-encre="ambre"] span { color: var(--ambre); }
.pave[data-encre="lave"] span { color: var(--lave); }
.pave[data-encre="ev1"] span { color: var(--ev1); }
.pave[data-encre="ev2"] span { color: var(--ev2); }
.pave[data-encre="ev3"] span { color: var(--ev3); }
.pave[data-encre="ev4"] span { color: var(--ev4); }
.pave[data-encre="ev5"] span { color: var(--ev5); }
.pave[data-encre="sur-teal"] span { color: var(--sur-teal); }
.pave[data-encre="sur-lave"] span { color: var(--sur-lave); }
.pave[data-encre="sur-ambre"] span { color: var(--sur-ambre); }
.pave[data-encre="sur-pousse"] span { color: var(--sur-pousse); }

/* Rythme, rayons et cibles : mêmes valeurs, montrées à l'échelle. */
.bloc[data-e="1"] { width: var(--e-1); height: var(--e-1); }
.bloc[data-e="2"] { width: var(--e-2); height: var(--e-2); }
.bloc[data-e="3"] { width: var(--e-3); height: var(--e-3); }
.bloc[data-e="4"] { width: var(--e-4); height: var(--e-4); }
.bloc[data-e="5"] { width: var(--e-5); height: var(--e-5); }
.bloc[data-e="6"] { width: var(--e-6); height: var(--e-6); }
.bloc[data-e="7"] { width: var(--e-7); height: var(--e-7); }

.bloc[data-r="s"] { width: 64px; height: 44px; border-radius: var(--r-s); }
.bloc[data-r="m"] { width: 64px; height: 44px; border-radius: var(--r-m); }
.bloc[data-r="l"] { width: 64px; height: 44px; border-radius: var(--r-l); }
.bloc[data-r="p"] { width: 64px; height: 44px; border-radius: var(--r-p); }

.bloc[data-cible="cible"] { width: var(--cible); height: var(--cible); }
.bloc[data-cible="cible-secondaire"] { width: var(--cible-secondaire); height: var(--cible-secondaire); }

.t[data-t="micro"] { font-size: var(--t-micro); }
.t[data-t="petit"] { font-size: var(--t-petit); }
.t[data-t="appui"] { font-size: var(--t-appui); }
.t[data-t="base"] { font-size: var(--t-base); }
.t[data-t="champ"] { font-size: var(--t-champ); }
.t[data-t="titre-s"] { font-size: var(--t-titre-s); }
.t[data-t="titre"] { font-size: var(--t-titre); }
.t[data-t="titre-l"] { font-size: var(--t-titre-l); }

/* Un nom de jeton ne se coupe jamais en fin de ligne. Sans ça, « --lagon »
   se scinde en « -- » / « lagon » sur mobile : le navigateur traite le tiret
   comme une occasion de couper, et le sujet même de la page devient illisible.
   Relevé par la relecture visuelle sur les deux captures mobiles. */
.note code,
.nom code {
  font-family: var(--police-mono);
  font-size: 0.92em;
  white-space: nowrap;
}

/* Le titre de section appartient à sa section, pas au paragraphe qui suit :
   il lui faut plus d'air au-dessus qu'en dessous. */
.section > h2 {
  margin-top: var(--e-2);
}