/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   controles.css — LE CHÂSSIS DES CONTRÔLES, ÉCRIT UNE FOIS.
   @registre /css/la-cote.css

   Les contrôles de ce produit sont émis par UN moteur — shared/control-renderer.js — et depuis
   `the-first-move` (2026-09-17) ils sont montés à DEUX endroits : le configurateur (/start) et
   l'amorce de l'accueil. Ce fichier est sorti d'atelier.css pour cette raison, et pour cette
   raison seulement : une seconde copie de « une touche de stepper est une cible de 48 px dans les
   deux sens » serait deux steppers qui n'obéissent pas à la même règle, et c'est précisément le
   motif que ce lot est écrit pour refuser.

   🔴 EXTRACTION NEUTRE, ET PROUVÉE COMME TELLE. Le bloc ci-dessous est celui d'atelier.css, au
   caractère près, sélecteurs et ordre compris. La cascade est préservée en le chargeant AVANT
   atelier.css sur /start — ce qui laisse atelier.css surcharger ce qu'il surchargeait déjà — et
   tests/the-first-move.test.js compare les styles calculés des nœuds de contrôle de /start avant
   et après. Une extraction de CSS qui « devrait » être neutre est une extraction non mesurée.

   Crochets conservés : `.seg[data-value=…]` est sélectionné par pinMetric() et par neuf
   spécifications e2e, et tests/control-renderer.test.js épingle le balisage au caractère. On
   renomme ce que rien ne sélectionne, jamais ce qui porte un contrat (règle d'atelier.css).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* La seule dimension de composant que la spécification ne donne pas et que ce châssis lit. Elle
   vient d'atelier.css, avec la règle qui la lit et avec son commentaire d'origine : §2.3 ferme la
   rampe d'espacement, les rayons, les traits, la typographie et la palette, mais pas la largeur
   d'un champ de stepper. Nommée en un seul endroit plutôt que cachée dans un style="". */
:root {
  --largeur-valeur: var(--espace-56);    /* champ d'un stepper : 74 publié → 56, sur la rampe */
}

/* ── Les contrôles émis par shared/control-renderer.js ─────────────────────────────────────────
   Crochets conservés (voir l'en-tête), valeurs du registre. */
/* `one-question-shape` — la TYPOGRAPHIE de l'intitulé et de l'aide vit dans le registre, sur les
   classes du gabarit (.question-pose__intitule / __aide, .ligne-reglage__intitule / __aide) que le
   moteur émet À CÔTÉ des crochets ci-dessous. Les crochets ne gardent que la disposition. */
.field-label { display: block; }
/* `labelStyle` déclarait « margin-top:18px » ou « 22px » selon le site : deux écritures d'une même
   intention, « un écart au-dessus d'un bloc frère », que le §2.3 chiffre à 16. La déclaration dit
   toujours qu'il y a un écart ; la VALEUR est passée au registre (décision consignée). */
.field-label--detache { margin-top: var(--espace-16); }
.seg-group { display: flex; flex-wrap: wrap; gap: var(--espace-8); }
/* La grille de choix : au-delà de trois réponses, la rangée devient une grille — les MÊMES boutons,
   une autre disposition, jamais un menu déroulant (il cache les options et empêche de comparer).
   Le moteur pose la classe d'après le NOMBRE de réponses, et de rien d'autre. Les paliers sont ceux
   de la seule grille de choix que le tunnel possédait déjà, le catalogue (.cat-grid, atelier.css) :
   une colonne, puis deux à 600, puis quatre à 880. */
.seg-group--grille { display: grid; grid-template-columns: 1fr; }
.seg-group--grille .seg { min-width: 0; }
.seg { flex: 1 1 0; min-height: var(--cible-tactile); padding: 0 var(--espace-12); background: var(--surface-donnee); color: var(--encre); border: var(--trait-filet) solid var(--filet-fort); border-radius: 0; font-family: var(--police-interface); font-weight: 500; font-size: var(--taille-bouton); line-height: var(--interligne-bouton); cursor: pointer; transition: background-color var(--duree), border-color var(--duree); }
.seg:hover { background: var(--encre-06); }
.seg[aria-pressed="true"] { background: var(--action); color: var(--papier); border-color: var(--action); }
.seg[aria-disabled="true"] { color: var(--encre-40); cursor: default; }
/* Un segment à deux lignes : l'intitulé s'actionne, la précision se lit. Il reste une cible. */
.seg--stacked { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--espace-4); padding-top: var(--espace-8); padding-bottom: var(--espace-8); text-align: left; line-height: var(--interligne-intitule); }
.seg__sub { font-weight: 400; font-size: var(--taille-etiquette); line-height: var(--interligne-etiquette); }

/* Le stepper − / valeur / + du §3. Les deux touches sont des cibles de 48 px dans les DEUX sens ;
   la valeur est une donnée tabulaire, donc Mono (§2.2). */
.control-row { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-16); flex-wrap: wrap; padding: var(--espace-12) 0; border-bottom: var(--trait-filet) solid var(--filet-liste); }
.control-row--last { border-bottom: 0; }
.control-row__clamp { font-size: var(--taille-donnee); line-height: var(--interligne-donnee); color: var(--alerte-encre); margin-top: var(--espace-4); }
.number-control { display: inline-flex; align-items: stretch; border: var(--trait-filet) solid var(--filet-fort); background: var(--surface-donnee); }
.stepper-btn { min-width: var(--cible-tactile); min-height: var(--cible-tactile); background: transparent; color: var(--encre); border: 0; border-radius: 0; font-family: var(--police-interface); font-size: var(--taille-h3); line-height: var(--interligne-bouton); cursor: pointer; transition: background-color var(--duree); }
.stepper-btn:hover { background: var(--encre-06); }
.stepper-btn:active { background: var(--encre-12); }
.stepper-btn[aria-disabled="true"], .stepper-btn:disabled { color: var(--encre-35); cursor: default; }
.number-control__value { display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-4); padding: 0 var(--espace-12); border-left: var(--trait-filet) solid var(--filet-liste); border-right: var(--trait-filet) solid var(--filet-liste); }
.number-control__input { width: var(--largeur-valeur); min-height: var(--cible-tactile); text-align: center; background: transparent; color: var(--encre); border: 0; border-radius: 0; padding: 0; font-family: var(--police-mesure); font-size: var(--taille-donnee); line-height: var(--interligne-donnee); font-variant-numeric: tabular-nums; }
.number-control__input::-webkit-outer-spin-button, .number-control__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.unit { font-family: var(--police-mesure); font-size: var(--taille-donnee); line-height: var(--interligne-donnee); color: var(--encre-etiquette); font-variant-numeric: tabular-nums; }
/* Une valeur DÉRIVÉE se lit, elle ne s'actionne pas : elle passe à l'encre désactivée du §3. */
.control-row--derived .control-row__name, .control-row--derived .number-control__input { color: var(--encre-45); }

/* ── §4 Paliers — la grille de choix suit ceux du catalogue ─────────────────────────────────── */
@media (min-width: 600px) {
  .seg-group--grille { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 880px) {
  .seg-group--grille { grid-template-columns: repeat(4, 1fr); }
}