/* ==========================================================================
   mesure.css — l'ecran de saisie
   ==========================================================================
   Quatre contraintes commandent ce fichier :

   UNE MAIN    tout ce qui se touche vit dans la moitie basse. Le haut ne
               porte que de l'information et les commandes d'etat.
   DES GANTS   aucune cible sous 64 px. Pas un seul champ texte : le clavier
               systeme est inutilisable avec des gants, il est remplace par
               un pave maison a touches de 64 px.
   DU SOLEIL   contraste renforce partout, plus un mode plein soleil qui
               bascule en noir sur blanc pur (voir base.css).
   SANS RESEAU rien ici ne depend d'une ressource distante. Aucune police
               chargee, aucune icone telechargee.

   Les variables de charte vivent dans base.css.

   --- Densite, 2026-08-28 ------------------------------------------------
   Objectif tenu ici : la grille des points ET la zone de saisie tiennent
   dans un ecran de 390 x 844 sans defilement. Ce qui l'a permis, dans
   l'ordre du gain :

     . pave numerique en 4 colonnes x 3 rangees au lieu de 3 x 4  -> -70 px
     . points en 5 colonnes : 9 points en 2 rangees au lieu de 3  -> -68 px
     . sens / fil / grandeur en rangees a titre lateral           -> -54 px
     . anomalie repliee dans la barre d'action                    -> -80 px
     . recapitulatif loge DANS l'afficheur, a gauche du nombre    -> -26 px
     . marges, interlignes et titres secondaires resserres        -> -60 px

   Les TOUCHES n'ont pas maigri : 64 px partout, var(--cible). Ce qui a
   maigri, c'est tout ce qui n'est pas un bouton.
   ========================================================================== */

.etape { margin-bottom: var(--ecart); }

.etape-titre {
  margin: 0 0 var(--ecart);
  font-size: 11px; font-weight: 750; line-height: 1.2;
  letter-spacing: .7px; text-transform: uppercase;
  color: var(--pierre);
}
body.soleil .etape-titre { color: #000; }

/* ------------------------------------------------------------ les choix */
.choix { display: grid; gap: var(--ecart); }
.choix-3 { grid-template-columns: repeat(3, 1fr); }
/* Cinq colonnes : a 390 px de large, une colonne fait 66 px — au-dessus de
   la cible de 64 px, et les neuf points tiennent sur DEUX rangees au lieu
   de trois. La cible n'a pas bouge, la hauteur a fondu. */
.choix-points { grid-template-columns: repeat(5, 1fr); }

.choix button {
  min-height: var(--cible);
  padding: 2px;
  border: var(--trait) solid var(--brume);
  background: var(--ivoire-vif);
  border-radius: var(--r);
  font-size: 15px; font-weight: 650;
  display: grid; place-items: center; gap: 1px;
  line-height: 1.1;
  overflow: hidden;
}
/* Le libelle de zone est une ETIQUETTE dans le bouton, plus une ligne sous
   la grille : il informe sans commander de hauteur. */
.choix button .sous { font-size: 10px; font-weight: 500; color: var(--pierre); }
.choix button[aria-pressed="true"] {
  background: var(--nuit); border-color: var(--nuit); color: var(--ivoire);
}
.choix button[aria-pressed="true"] .sous { color: rgba(255,255,255,.75); }
body.soleil .choix button[aria-pressed="true"] { background: #000; color: #FFF; }
body.soleil .choix button[aria-pressed="true"] .sous { color: #FFF; }
.choix button:active { transform: scale(.97); }

/* ---------------------------------------------------------- les rangees
   Sens, fil, grandeur : trois choix a trois options. Le titre passe SUR LE
   COTE au lieu de manger une ligne au-dessus. Trois lignes de titre
   gagnees, aucune cible reduite. */
.rangee {
  display: grid; grid-template-columns: 50px 1fr;
  align-items: center; gap: 6px;
  margin-bottom: var(--ecart);
}
.rangee-titre {
  margin: 0;
  font-size: 10px; font-weight: 750; line-height: 1.15;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--pierre);
}
body.soleil .rangee-titre { color: #000; }

/* ------------------------------------------------------------ afficheur */
.etape-valeur { margin-bottom: 0; }

.afficheur {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px; min-height: 46px;
  background: var(--nuit); color: var(--ivoire);
  border-radius: var(--r); margin-bottom: var(--ecart);
}
body.soleil .afficheur { background: #000; color: #FFF; }

/* Le recapitulatif — et, tant que la mesure n'est pas complete, l'invite —
   occupent la place restee vide a gauche du nombre. Zero pixel de hauteur
   en plus, une ligne de moins dans la zone du pouce. */
.afficheur-recap {
  flex: 1; min-width: 0;
  font-size: 11px; font-weight: 600; line-height: 1.25;
  opacity: .82; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.soleil .afficheur-recap { opacity: 1; }

.afficheur-valeur {
  font-size: 34px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.afficheur-unite { font-size: 16px; font-weight: 650; opacity: .8; }
.afficheur.afficheur-vide .afficheur-valeur { opacity: .35; }

/* -------------------------------------------------------- pave numerique
   Quatre colonnes, trois rangees : douze touches, une rangee de moins.
   Chaque touche reste a 64 px de haut et fait 88 px de large a 390 px
   d'ecran — la cible a grossi en largeur pendant que l'ecran maigrissait. */
.pave { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ecart); }
.pave button {
  height: var(--cible);
  border: var(--trait) solid var(--brume);
  background: var(--ivoire-vif);
  border-radius: var(--r);
  font-size: 30px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pave .touche-secondaire { font-size: 24px; background: var(--ivoire); }
.pave button:active { background: var(--nuit); color: var(--ivoire); }

/* ------------------------------------------------------------- anomalie
   Repliee dans la barre d'action : meme cible de 64 px, une section de
   moins a faire defiler. Son etat se lit a la couleur ET a la coche. */
.anomalie {
  width: var(--cible); height: var(--cible);
  display: grid; place-items: center;
  border: var(--trait) solid var(--brume);
  background: var(--ivoire-vif);
  border-radius: var(--r);
}
.anomalie-case {
  width: 30px; height: 30px; flex: none;
  border: 3px solid var(--pierre); border-radius: 8px;
}
/* L'anomalie se signale en AMBRE. Aucun rouge nulle part (Directive §12). */
.anomalie[aria-pressed="true"] {
  background: var(--ambre-fond); border-color: var(--ambre); color: var(--ambre-texte);
}
.anomalie[aria-pressed="true"] .anomalie-case {
  background: var(--ambre); border-color: var(--ambre); position: relative;
}
.anomalie[aria-pressed="true"] .anomalie-case::after {
  content: "";                     /* decor pur : aucun texte lu par un humain */
  position: absolute; left: 8px; top: 2px;
  width: 8px; height: 15px;
  border: solid #FFF; border-width: 0 4px 4px 0;
  transform: rotate(42deg);
}
body.soleil .anomalie[aria-pressed="true"] .anomalie-case::after { border-color: #FFF; }

/* --------------------------------------- zone du pouce, action finale */
.validation {
  flex: none;
  padding: 6px 8px calc(6px + var(--bas));
  background: var(--ivoire);
  border-top: var(--trait) solid var(--brume);
}
.barre-action {
  display: grid; grid-template-columns: var(--cible) 1fr;
  gap: 8px; align-items: stretch;
}

.valider {
  width: 100%; min-height: var(--cible);
  border: 0; border-radius: var(--r);
  background: var(--vert); color: #FFFFFF;
  font-size: 19px; font-weight: 750;
}
.valider:disabled { background: var(--brume); color: var(--pierre); }
body.soleil .valider { background: #000; color: #FFF; border: 3px solid #000; }
body.soleil .valider:disabled { background: #FFF; color: #000; }
.valider:active:not(:disabled) { transform: scale(.985); }

/* Ecran large en paysage : deux colonnes, le pave reste a droite,
   sous le pouce de la main qui tient l'appareil. */
@media (min-width: 700px) and (orientation: landscape) {
  #vue-saisie .ecran {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 16px; align-content: start;
  }
  #vue-saisie .etape-valeur { grid-column: 2; grid-row: 1 / span 4; }
}