/* ═══════════════════════════════════════════════════════════════════════════
   LES CHAMPS — habillage. structure.md §17 à §27, §142.

   Aucune valeur brute : tout remonte à tokens.css. Le bord d'un contrôle est
   `--bord-controle` (≥ 3:1 sur toutes les surfaces), jamais `--ligne` — voir
   §141.3.1.
   ═══════════════════════════════════════════════════════════════════════════ */

.champ__option {
  margin-left: var(--e-2); font-weight: var(--g-normal);
  color: var(--encre-faible); font-size: var(--t-menu);
}
.champ__b {
  width: 2rem; height: 2rem; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-puce); background: none;
  color: var(--encre-faible); cursor: pointer;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.champ__b:hover { background: var(--creuse); color: var(--encre); }
.champ__b.est-actif { background: var(--lavis-accent); color: var(--accent); }

/* ══════════════════════════════════════════════ NOMBRE ═════════════════ */

.nombre {
  position: relative;
  display: flex; align-items: stretch;
  background: var(--surface); border-radius: var(--r-controle);
  overflow: hidden; width: 100%; min-width: 9rem;
}

/* Le filet est un CALQUE au-dessus des boutons, pas une `box-shadow: inset` du
   conteneur. Une ombre interne est peinte SOUS les enfants : le fond plein des
   deux boutons la recouvrait sur trois cotes chacun, et le controle apparaissait
   ouvert en haut, en bas et sur les flancs. Voir structure.md §141.3.7. */
.nombre::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; z-index: 1;
  box-shadow: inset 0 0 0 1px var(--bord-controle);
  transition: box-shadow var(--duree) var(--courbe);
}
.nombre:focus-within::after { box-shadow: inset 0 0 0 2px var(--accent); }

/* La couture entre un bouton et la zone du chiffre : c'est un filet INTERNE a un
   controle, donc `--ligne` — le role exact de ce jeton. Le bord exterieur, lui,
   reste a `--bord-controle` (§141.3.1). */
.nombre__b:first-child { box-shadow: 1px 0 0 var(--ligne); }
.nombre__b:last-child  { box-shadow: -1px 0 0 var(--ligne); }

.nombre__b {
  width: var(--cible); flex: none;
  display: grid; place-items: center;
  border: 0; background: var(--creuse); color: var(--encre);
  cursor: pointer; touch-action: manipulation;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.nombre__b:hover:not(:disabled) { background: var(--lavis-accent); color: var(--accent-fort); }
.nombre__b:active:not(:disabled) { background: var(--accent-doux); }
/* Le bouton buté reste VISIBLE : le faire disparaître déplace le champ. */
.nombre__b:disabled { color: var(--encre-faible); opacity: 0.5; cursor: not-allowed; }

.nombre__saisie { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--e-1); padding: 0 var(--e-2); }
.nombre__saisie input {
  width: 100%; min-width: 2.5rem; border: 0; outline: none; background: none;
  font: inherit; font-family: var(--police-chiffre); font-variant-numeric: tabular-nums;
  font-size: var(--t-corps); font-weight: var(--g-moyen); color: var(--encre);
  text-align: center; height: var(--h-controle);
  /* Les flèches natives sont retirées : ce sont les deux boutons qui règlent. */
  appearance: textfield; -moz-appearance: textfield;
}
.nombre__saisie input::-webkit-outer-spin-button,
.nombre__saisie input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.nombre__unite { color: var(--encre-faible); font-size: var(--t-menu); white-space: nowrap; }

.champ.est-erreur .nombre::after { box-shadow: inset 0 0 0 1.5px var(--danger); }

/* ══════════════════════════════════════════════ ZONE ═══════════════════ */

.zone {
  background: var(--surface); border-radius: var(--r-controle);
  box-shadow: inset 0 0 0 1px var(--bord-controle);
  padding: var(--e-2) var(--e-3);
  transition: box-shadow var(--duree) var(--courbe);
}
.zone:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.zone textarea {
  display: block; width: 100%; border: 0; outline: none; background: none; resize: none;
  font: inherit; font-size: var(--t-corps); line-height: var(--i-texte); color: var(--encre);
  padding: var(--e-2) 0;
}
.zone textarea::placeholder { color: var(--encre-faible); }
.champ.est-erreur .zone { box-shadow: inset 0 0 0 1.5px var(--danger); background: var(--lavis-danger); }

.zone__compteur {
  margin: 0; text-align: right;
  font-size: var(--t-menu); font-family: var(--police-chiffre);
  color: var(--encre-faible);
  transition: color var(--duree) var(--courbe);
}
.zone__compteur.est-proche { color: var(--alerte); }
.zone__compteur.est-plein  { color: var(--danger); font-weight: var(--g-moyen); }

/* ══════════════════════════════════════════════ COMBO ══════════════════ */

.combo { position: relative; }
.combo__natif { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.combo__declencheur {
  display: flex; align-items: center; gap: var(--e-2);
  width: 100%; min-height: var(--h-controle); padding: var(--e-1) var(--e-3);
  background: var(--surface); border: 0; border-radius: var(--r-controle);
  box-shadow: inset 0 0 0 1px var(--bord-controle);
  font: inherit; font-size: var(--t-corps); color: var(--encre);
  text-align: left; cursor: pointer;
  transition: box-shadow var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.combo__declencheur:hover { background: var(--creuse); }
.combo__declencheur[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.combo__declencheur:disabled,
.combo__declencheur[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
/* Le declencheur multiple est un div : il n'herite pas des styles de bouton. */
.combo__declencheur { user-select: none; }

.combo__valeur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo__valeur.est-vide { color: var(--encre-faible); }
.combo__fleche { color: var(--encre-faible); transition: transform var(--duree) var(--courbe); }
.combo__declencheur[aria-expanded="true"] .combo__fleche { transform: rotate(180deg); }

.combo__puces { flex: 1; display: flex; flex-wrap: wrap; gap: var(--e-1); min-width: 0; }

/* Le panneau se dimensionne sur SON contenu, pas sur son déclencheur.
   Avec `left: 0; right: 0` il prenait la largeur du bouton : un déclencheur
   « Rabat » de 84 px donnait un panneau de 84 px, où « Casablanca » se coupait
   et où une barre de défilement horizontale apparaissait. Un menu ne doit
   jamais défiler latéralement — c'est le seul axe où l'œil ne cherche rien.

   `min-width: 100%` garde le lien visuel avec le déclencheur quand celui-ci est
   plus large ; `width: max-content` le laisse grandir quand il est plus étroit ;
   `max-width` l'empêche de sortir de l'écran. Voir structure.md §141.3.13. */
.combo__panneau {
  position: absolute; z-index: 40; left: 0; right: auto; top: calc(100% + 6px);
  min-width: 100%;
  width: max-content;
  max-width: min(24rem, calc(100vw - var(--e-6)));
  background: var(--surface); border-radius: var(--r-carte);
  box-shadow: var(--ombre-3); overflow: hidden;
  display: flex; flex-direction: column; max-height: 20rem;
}
/* Aligné à droite quand il déborderait par la droite — posé par le JS. */
.combo__panneau.est-a-droite { left: auto; right: 0; }
.combo__panneau[hidden] { display: none; }
.combo__panneau.est-au-dessus { top: auto; bottom: calc(100% + 6px); }

.combo__recherche {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3); border-bottom: 1px solid var(--ligne);
  color: var(--encre-faible); flex: none;
}
.combo__recherche input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font: inherit; font-size: var(--t-corps); color: var(--encre);
}

.combo__tout { display: flex; gap: var(--e-2); padding: var(--e-2) var(--e-3); flex: none; }
.combo__tout button {
  border: 0; background: none; padding: var(--e-1) var(--e-2);
  border-radius: var(--r-puce); font: inherit; font-size: var(--t-menu);
  color: var(--accent); cursor: pointer;
}
.combo__tout button:hover { background: var(--lavis-accent); }

/* `overflow-y: auto` seul fait calculer `overflow-x: auto` par le navigateur :
   c'est de là que venait la barre horizontale. On la refuse explicitement. */
.combo__liste { list-style: none; margin: 0; padding: var(--e-2);
                overflow-y: auto; overflow-x: hidden; flex: 1; }

.opt {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--cible); padding: var(--e-2) var(--e-3);
  border-radius: var(--r-controle); cursor: pointer;
  transition: background var(--duree) var(--courbe);
}
.opt[hidden] { display: none; }
.opt:hover, .opt.est-vise { background: var(--lavis-accent); }
.opt__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.opt__txt strong { font-weight: var(--g-normal); overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.opt__txt span { font-size: var(--t-menu); color: var(--encre-faible); }
.opt.est-choisi .opt__txt strong { font-weight: var(--g-moyen); }

/* Coche du choix unique : la place est TOUJOURS réservée, sinon toute la liste
   se décale de 20 px au moment où l'on choisit. */
.opt__coche { width: 1.25rem; flex: none; color: var(--accent); opacity: 0; }
.opt.est-choisi .opt__coche { opacity: 1; }

/* Case du choix multiple */
.opt__case {
  width: 1.25rem; height: 1.25rem; flex: none;
  display: grid; place-items: center; border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--bord-controle);
  color: transparent;
  transition: background var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.opt.est-choisi .opt__case {
  background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--sur-accent);
}

.combo__vide { margin: 0; padding: var(--e-5); text-align: center; color: var(--encre-faible); font-size: var(--t-menu); }
.combo__compte {
  margin: 0; padding: var(--e-2) var(--e-3); flex: none;
  background: var(--creuse); color: var(--encre-douce);
  font-size: var(--t-menu); text-align: right;
}

/* ══════════════════════════════════════ PUCES DE CHOIX ═════════════════ */

.puce-choix {
  display: inline-flex; align-items: center; gap: var(--e-1);
  height: 1.75rem;
  /* Asymetrique par construction : a gauche le texte a besoin d'air, a droite
     le cercle de la croix apporte le sien. Avec 4 px, ce cercle est CONCENTRIQUE
     au bout arrondi de l'etiquette — les deux rayons partagent le meme centre. */
  padding: 0 var(--e-1) 0 var(--e-3);
  background: var(--lavis-accent); color: var(--accent-fort);
  border-radius: var(--r-puce);
  font-size: var(--t-menu); font-weight: var(--g-moyen); white-space: nowrap;
  max-width: 14rem;
}
/* Le libelle se coupe, l'etiquette ne s'etire pas : dix etiquettes longues ne
   doivent pas pousser le champ hors de sa carte. */
.puce-choix { overflow: hidden; text-overflow: ellipsis; }

.puce-choix__x {
  position: relative;
  width: 1.25rem; height: 1.25rem; flex: none;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: none;
  color: currentColor; cursor: pointer; opacity: 0.65;
  transition: background var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}
/* La cible s'etend a toute la hauteur de l'etiquette. On ne peut pas atteindre
   44 px ici sans recouvrir le libelle voisin — 28 px est le maximum honnete
   dans une etiquette, et c'est ecrit plutot que tu. */
.puce-choix__x::after {
  content: ''; position: absolute; left: -2px; right: -2px;
  top: 50%; transform: translateY(-50%); height: 1.75rem;
}
.puce-choix__x:hover { background: var(--accent-doux); opacity: 1; }
.puce-choix__x:focus-visible { opacity: 1; }

/* ══════════════════════════════════════════ MOT DE PASSE ═══════════════ */

.force { display: flex; align-items: center; gap: var(--e-3); }
.force[hidden] { display: none; }
.force__rail { flex: 1; height: 4px; background: var(--creuse); border-radius: var(--r-puce); overflow: hidden; }
.force__jauge { display: block; height: 100%; width: 0; border-radius: var(--r-puce); }
.force__jauge--danger { background: var(--danger); }
.force__jauge--alerte { background: var(--alerte); }
.force__jauge--info   { background: var(--info); }
.force__jauge--ok     { background: var(--ok); }
.force__mot { font-size: var(--t-menu); font-weight: var(--g-moyen); min-width: 5rem; text-align: right; }
.force__mot--danger { color: var(--danger); }
.force__mot--alerte { color: var(--alerte); }
.force__mot--info   { color: var(--info); }
.force__mot--ok     { color: var(--ok); }

/* ══════════════════════════════════════════ ÉTIQUETTES ═════════════════ */

/* Le conteneur respire comme un champ, pas comme une barre d'outils : meme
   padding que `.champ__boite`, et un vrai `gap` pour que deux rangees
   d'etiquettes ne se collent pas quand ca deborde. */
.etiq {
  flex-wrap: wrap; align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  min-height: var(--h-controle);
  box-shadow: inset 0 0 0 1px var(--bord-controle);
}
.etiq__puces { display: contents; }
.etiq input[type="text"] {
  flex: 1; min-width: 7rem; border: 0; outline: none; background: none;
  font: inherit; font-size: var(--t-corps); color: var(--encre);
  /* Meme hauteur qu'une etiquette : la rangee ne saute pas quand la derniere
     etiquette est retiree et qu'il ne reste que le champ. */
  height: 1.75rem; padding: 0;
}

/* ══════════════════════════════════════════════ DÉPÔT ══════════════════ */

.depot__zone {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-1);
  padding: var(--e-6) var(--e-4); text-align: center;
  background: var(--creuse); border-radius: var(--r-carte);
  /* Un pointillé : c'est le seul endroit du système où il dit quelque chose —
     « cette zone attend qu'on y dépose », et non « cette zone est un objet ». */
  outline: 2px dashed var(--bord-controle); outline-offset: -6px;
  cursor: pointer;
  transition: background var(--duree) var(--courbe), outline-color var(--duree) var(--courbe);
}
.depot__zone:hover { background: var(--lavis-neutre); }
.depot__zone.est-survol { background: var(--lavis-accent); outline-color: var(--accent); }
.depot__ic {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: var(--surface); color: var(--accent); border-radius: var(--r-puce);
  margin-bottom: var(--e-2);
}
.depot__zone strong { font-weight: var(--g-moyen); }
.depot__zone > span:last-child { font-size: var(--t-menu); color: var(--encre-faible); }

.depot__liste { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.depot__liste:empty { display: none; }
.depot__liste li {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3); background: var(--surface);
  border-radius: var(--r-controle); box-shadow: var(--ombre-1);
}
.depot__liste svg { color: var(--encre-faible); }
.depot__nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot__poids { font-size: var(--t-menu); color: var(--encre-faible); font-family: var(--police-chiffre); }

/* ══════════════════════════════════════════ INTERVALLE ═════════════════ */

.interv { --piste-h: 1.75rem; --rail-h: 6px; --pouce: 1.125rem; }
.interv__tete { display: flex; justify-content: space-between; margin-bottom: var(--e-2); }
.interv__tete output {
  font-family: var(--police-chiffre); font-weight: var(--g-moyen);
  font-size: var(--t-menu); color: var(--encre);
  background: var(--lavis-accent); padding: 2px var(--e-2); border-radius: var(--r-puce);
}

/* La PISTE porte le centre. Tout ce qui suit se centre sur elle, donc plus
   aucune valeur devinee : change la densite ou la taille de police, le pouce
   reste sur le rail. */
.interv__piste { position: relative; height: var(--piste-h); }

.interv__rail {
  position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: var(--rail-h); background: var(--creuse); border-radius: var(--r-puce);
}
.interv__plage { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: var(--r-puce); }

/* Deux `range` empilés sur le même rail. `pointer-events: none` sur la piste et
   `auto` sur la poignée : sans ça, celui du dessus bloque l'autre partout. */
.interv input[type="range"] {
  position: absolute; inset: 0;
  width: 100%; height: var(--piste-h); margin: 0;
  appearance: none; -webkit-appearance: none; background: none; pointer-events: none;
}
/* La piste native est rendue transparente mais GARDE sa hauteur : c'est d'elle
   que WebKit deduit ou poser le pouce. Une piste a zero, et le pouce n'a plus
   aucune reference verticale — c'etait la cause du decentrage. */
.interv input[type="range"]::-webkit-slider-runnable-track {
  height: var(--rail-h); background: none; border: 0;
}
.interv input[type="range"]::-moz-range-track { height: var(--rail-h); background: none; border: 0; }

.interv input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; pointer-events: auto;
  width: var(--pouce); height: var(--pouce); border-radius: 50%; box-sizing: border-box;
  /* WebKit pose le pouce sur le HAUT de la piste : on le remonte de la moitie de
     leur difference pour que son centre tombe sur le centre du rail. */
  margin-top: calc((var(--rail-h) - var(--pouce)) / 2);
  background: var(--surface); border: 3px solid var(--accent);
  box-shadow: var(--ombre-1); cursor: grab;
}
.interv input[type="range"]::-moz-range-thumb {
  pointer-events: auto; box-sizing: border-box; border: 3px solid var(--accent);
  width: var(--pouce); height: var(--pouce); border-radius: 50%;
  background: var(--surface); box-shadow: var(--ombre-1); cursor: grab;
}
.interv input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.interv input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.interv input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ══════════════════════════════════ CODE À USAGE UNIQUE ════════════════ */

.code-uu { display: flex; gap: var(--e-2); }
.code-uu input {
  width: 2.75rem; height: 3.25rem; flex: none;
  text-align: center; border: 0; outline: none;
  background: var(--surface); border-radius: var(--r-controle);
  box-shadow: inset 0 0 0 1px var(--bord-controle);
  font: inherit; font-family: var(--police-chiffre);
  font-size: var(--t-sous); font-weight: var(--g-fort); color: var(--encre);
  transition: box-shadow var(--duree) var(--courbe);
}
.code-uu input:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.code-uu input:not(:placeholder-shown) { background: var(--lavis-accent); }
@media (max-width: 30rem) { .code-uu input { width: 2.25rem; height: 2.75rem; } }