/* Accueil — feuille du widget « Extincteur » (js/widgets/extincteur.js).

   UN WIDGET = UN FICHIER : rien de ceci n'a sa place dans components.css.
   Trois autres endroits doivent suivre, et leur oubli est MUET : la balise
   <link> d'index.html (après components.css, dont elle emploie les variables,
   et avant grid.css), l'entrée dans SOCLE de sw.js — sans quoi la feuille
   manque hors ligne, et le déploiement refuse de partir —, et la balise <link>
   de test-grille.html, sans quoi les assertions de rendu mesurent un style
   absent.

   DEUX BLOCS SANS PARENTÉ, et pas une règle mutualisée : `.ext__*` pour la
   carte, `.extfs__*` pour la projection. Le préfixe de projection est un bloc
   distinct, pas un modificateur du premier. */

/* ═══════════════ LA CARTE ═══════════════

   Rien ne redéclare `.widget` : la colonne flex et son écart sont déjà fournis
   par components.css. TROIS enfants directs, un seul élastique — c'est ce
   contrat de géométrie qui fait tenir sept phases sans jamais mesurer un
   débordement. */

.ext__bandeau { flex: none; }

.ext__cadran {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  /* Pour les 100cqw des chiffres. Le CSS sait ajuster une taille à la LARGEUR
     d'un conteneur, jamais à sa hauteur — `container-type: size` exigerait une
     hauteur définie, que la carte n'a pas en disposition en flux. D'où la
     variable numérique nue `--ext-h`, mesurée en JavaScript. */
  container-type: inline-size;
}

/* Cinq touches, hautes et carrées : à 23 h on clique sans viser. L'auto-fit
   passe seul de quatre colonnes à trois puis deux quand la carte rétrécit —
   aucun JavaScript n'a à s'en mêler. */
.ext__clavier {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  grid-auto-rows: minmax(34px, 1fr); gap: 6px; flex: 1 1 auto; min-height: 0;
}

/* Classe PROPRE, et non `.atl__b` : un bouton de barre fait 30 px et dirait
   que ce sont des accessoires, alors qu'ils SONT le widget. Même verre, même
   rayon, même transition pour ne pas détonner ; hauteur et typographie
   différentes. La divergence est assumée, et `.atl__b` reste la seule forme de
   la barre. */
.ext__touche {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 4px 6px; cursor: pointer;
  border-radius: var(--r-md);
  background: var(--glass-inner); border: 1px solid var(--glass-inner-border);
  transition: background .14s ease-out, border-color .14s ease-out;
}
.ext__touche:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.ext__touche-val { font: 500 15px/1 var(--mono); color: var(--text-strong); }
.ext__touche-uni { font: 400 11px/1.2 var(--sans); color: var(--text-5); }
/* Aucune touche ne prend l'accent : aucune n'est « la bonne », et un accent
   sur « 1 h » ferait croire à un état. */

.ext__chiffres {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 500; color: var(--text-strong);
  font-variant-numeric: tabular-nums; line-height: 1;
  /* Deux bornes, et la plus petite gagne : la hauteur disponible (nombre nu,
     mesuré en JS) et la largeur du conteneur divisée par la chasse de la
     monospace — 0,62 em, MESURÉE dans ce dépôt et réemployée telle quelle.
     `--ext-ch` est calé d'avance sur la forme la plus longue que le décompte
     prendra : les chiffres ne grossissent donc pas d'un coup en passant sous
     l'heure. */
  font-size: min(clamp(22px, calc(var(--ext-h, 150) * .16px), 84px),
                 calc(100cqw / (.62 * var(--ext-ch, 7))));
}

.ext__sous {
  flex: none; text-align: center; font: 400 11px/1.35 var(--sans); color: var(--text-5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ext__repli, .ext__libre {
  width: 100%; flex: none; padding: 8px 10px; border-radius: var(--r-md);
  background: var(--glass-field); border: 1px solid var(--glass-field-border);
  color: var(--text-2); font: 400 12.5px var(--mono); text-align: center;
}
.ext__libre:focus, .ext__repli:focus { outline: none; border-color: rgba(var(--accent-rgb), .5); }

/* Deux seuils fixes, posés en JavaScript. Celui de la LARGEUR l'est aussi
   parce que ce widget doit poser `atl--serre` sur la même racine — la brique
   se charge alors d'effacer les libellés de la barre. Le libellé n'est jamais
   retiré du DOM, seulement masqué : présent dans l'ordre du texte il
   pousserait l'icône hors du centre. */
.ext--bas .ext__sous { display: none; }

/* ═══════════════ LA PROJECTION ═══════════════

   SON PROPRE conteneur défilant. `.fs` est un `display:grid; place-items:
   center` sans max-height ni overflow, et la couche dépose le contenu dans un
   <div> nu : un document empilé plus haut que la fenêtre y déborderait des
   DEUX côtés, ses premiers blocs devenant inatteignables. Conséquence assumée
   et écrite : cet atelier est une page de RÉFÉRENCE, pas une projection — seul
   son premier bloc l'est. */
.extfs {
  max-height: 100vh; overflow-y: auto; width: min(900px, 92vw);
  padding: 4vh 2px; display: flex; flex-direction: column; gap: 2.4vh;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.extfs__bloc {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--glass-inner); border: 1px solid var(--glass-inner-border);
}
.extfs__bloc--tete { align-items: center; text-align: center; gap: 10px; }
.extfs__titre {
  font: 500 11px/1.3 var(--sans); color: var(--text-6);
  letter-spacing: .09em; text-transform: uppercase;
}
.extfs__chiffres {
  font-family: var(--mono); font-weight: 500; color: var(--text-strong);
  font-variant-numeric: tabular-nums; line-height: 1;
  font-size: min(20vh, calc(88vw / (.62 * var(--extfs-ch, 7))));
}
.extfs__heure { font: 400 clamp(15px, 3vh, 26px)/1.3 var(--sans); color: var(--text-2); }
.extfs__reserve { font: 400 clamp(11px, 1.6vh, 13px)/1.5 var(--sans); color: var(--text-5);
  max-width: 68ch; }
.extfs__ligne { margin: 0; font: 400 clamp(11.5px, 1.8vh, 13.5px)/1.55 var(--sans); color: var(--text-4); }
.extfs__note { margin: 0; font: 400 11.5px/1.55 var(--sans); color: var(--text-5); }

/* Un <input readonly>, JAMAIS un <code> : la couche pose `user-select: none`
   sur tout, et n'en exempte que `input` et `textarea`. Un texte annoncé
   « sélectionnable » y serait du texte mort — et ce champ est aussi le seul
   repli honnête quand le presse-papiers est refusé. */
.extfs__cmdBloc { display: flex; flex-direction: column; gap: 5px; }
.extfs__cmdRangee { display: flex; align-items: center; gap: 8px; }
.extfs__cmdNom { flex: none; width: 96px; font: 500 11.5px var(--sans); color: var(--text-5); }
.extfs__cmd {
  flex: 1 1 auto; min-width: 0; user-select: text;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--glass-field); border: 1px solid var(--glass-field-border);
  color: var(--text-strong); font: 400 clamp(12px, 2.2vh, 16px) var(--mono);
}

.extfs__diagnostic:empty { display: none; }
.extfs__diagTitre { font: 500 13px/1.35 var(--sans); color: var(--text-strong); margin-bottom: 3px; }
.extfs__journal { font: 400 11.5px/1.7 var(--mono); color: var(--text-5); user-select: text; }

.extfs__variante > summary {
  cursor: pointer; font: 400 11.5px var(--sans); color: var(--text-5); padding: 4px 0;
}
.extfs__variante[open] > summary { color: var(--text-3); margin-bottom: 6px; }
.extfs__variante .extfs__cmdRangee { margin-bottom: 5px; }

/* La seule animation du widget est la pulsation de l'icône « attente », et
   atelier.css la traite déjà sous prefers-reduced-motion : cette feuille n'en
   ajoute aucune. */