/* [Atelier — banc] début
   La page d'un banc de l'Atelier (#atelier/<id>, public/js/atelier.js : atlVueBanc ; public/js/atelier-ia-dialogue.js), session 266,
   14/10/2026 — « la partie de droite nécessite systématiquement de grands défilements pour voir le contenu et arriver au prompt ».
   Plus de colonne à droite. De haut en bas : le titre et les onglets des bancs sur UNE ligne ; la rangée du haut — l'image du PC
   et ses commandes, et à sa droite le volet de la MISSION (la carte de la session, largeur fixe) ; la BANDE, sur toute la largeur,
   avec ses onglets (« HeXaIA » : la saisie en première ligne, puis les messages du plus récent au plus ancien ; « Plan » ;
   « Solutions » ; « Matériel » ; « Nouvelle session » sur un banc libre) ; le journal. Sur un ordinateur (1 101 px et plus),
   l'image, le volet, les onglets de la bande et la saisie tiennent dans le premier écran (géométrie écrite par atlEcranAjuster :
   --atl-ecran-max, --atl-rangee-max) et la PAGE est la seule à défiler. Sur tablette et téléphone : une colonne — image, mission,
   bande, journal. Chargée après style.css, dont le bloc [Atelier] garde l'écran du PC, le clic maintenu, les listes et le journal.
   Jetons seuls, espacements de l'échelle (4, 8, 12, 16, 24), clair et sombre par les jetons. Préfixes .atl- et .atia-. */

/* ── L'en-tête des pages de l'Atelier : le titre et les onglets sur UNE ligne, la page plus près de la barre du haut ──────── */
main#view:has(> .atl-page, > .atim-page, > .atip-page, > .atkbs-page) { padding-top: var(--space-4); }
.atl-page, .atim-page, .atip-page, .atkbs-page { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--space-3) var(--space-6); }
.atl-page > *, .atim-page > *, .atip-page > *, .atkbs-page > * { grid-column: 1 / -1; min-width: 0; }
.atl-page > h1:first-child, .atim-page > h1:first-child, .atip-page > h1:first-child, .atkbs-page > h1:first-child { grid-column: 1; }
.atl-page > h1:first-child + .hx-onglets, .atim-page > h1:first-child + .hx-onglets, .atip-page > h1:first-child + .hx-onglets,
.atkbs-page > h1:first-child + .hx-onglets { grid-column: 2; margin: 0; }
@media (max-width: 700px) {
  .atl-page > h1:first-child + .hx-onglets, .atim-page > h1:first-child + .hx-onglets, .atip-page > h1:first-child + .hx-onglets,
  .atkbs-page > h1:first-child + .hx-onglets { grid-column: 1 / -1; }
}

/* Le focus clavier ne se cache jamais sous la barre du haut (fixe) : un élément qui prend le focus hors de la fenêtre y est amené
   SOUS elle (vérification adverse : en remontant la bande à Maj+Tab, « Relever » et l'onglet « Matériel » passaient dessous). */
html:has(.atl-page) { scroll-padding-top: calc(var(--topbar-h) + var(--space-2)); }

/* ── La page d'un banc : la rangée du haut, la bande, le journal ─────────────────────────────────────────────────────────── */
.atl-banc { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
/* L'image à gauche, le volet de la mission à droite : sa largeur est fixe (24 % de la fenêtre, de 300 à 380 px), elle ne dépend
   pas de l'image. Une seule colonne sous 1 100 px. */
.atl-haut { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px); gap: var(--space-3); align-items: stretch; min-width: 0; }
@media (max-width: 1100px) { .atl-haut { grid-template-columns: minmax(0, 1fr); } }

/* ── La carte de l'écran : l'image, puis les commandes de la souris et du clavier sur des rangées compactes ──────────────── */
/* Les commandes sont les éléments d'une même grappe qui passe à la ligne : la souris et les réglages de l'image, les touches, la
   frappe. Leur ORDRE à l'écran est posé ici (order), le document garde le sien : sur une carte étroite (portable), trois rangées —
   souris et image ; touches ; frappe — ; sur une carte large (1 400 px et plus, écran de 1 920), deux — souris et image ; touches
   et frappe. Sur un ordinateur, entre la souris et les touches, LA LIGNE réservée (plus bas) : l'aide, ou la ligne d'état du verrou. */
.atl-ecran-carte { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: var(--space-1) var(--space-2); padding: var(--space-2); }
.atl-ecran-carte > .atl-ecran { flex: 0 0 100%; margin-bottom: var(--space-1); }
.atl-ecran-carte > .atl-barre { display: contents; }
.atl-ecran-carte .atl-souris { order: 1; }
.atl-ecran-carte .atl-barre__image { order: 1; margin-left: auto; }
.atl-ecran-carte > .atl-tenu-zone { order: 2; flex: 0 0 100%; margin-top: 0; }
.atl-ecran-carte > .atl-touches { order: 3; margin-top: 0; gap: var(--space-1) var(--space-2); }
.atl-ecran-carte > .atl-frappe { order: 4; flex: 1 1 29rem; flex-wrap: nowrap; min-width: 0; }
.atl-ecran-carte > .hx-note { order: 5; flex: 1 1 12rem; min-width: 0; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* « Clavier direct » : sa ligne d'aide prend la place de celle du clic (une seule ligne d'aide à la fois). */
.atl-ecran-carte:has(> #atl-direct-note:not([hidden])) > #atl-ecran-note { display: none; }
/* 14/10/2026 (contrôle de la session 269) — LA LIGNE sous la souris, sur un ordinateur : l'aide du clic, l'aide du clavier direct et la
   ligne d'état du verrou de clic ou du bouton tenu (#atl-tenu-zone, « Relâcher » compris) se partagent UNE ligne réservée, sur toute
   la largeur, d'une hauteur fixe (celle d'un petit bouton) ; une seule à la fois — la ligne d'état, sinon l'aide du clavier direct,
   sinon l'aide du clic. Armer le verrou, tenir un bouton ou le lâcher ne déplace donc plus ni l'image ni la bande : la ligne d'état
   prenait une rangée de plus, la bande descendait de 24 px et, à 1 366 × 657, la saisie de HeXaIA passait sous le bord. Sur toute la
   largeur, l'aide se lit en entier dès 1 366 px (elle était coupée par des points de suspension) ; plus étroit, elle se coupe encore,
   son texte entier au survol (title). */
@media (min-width: 1101px) {
  .atl-ecran-carte > #atl-ecran-note, .atl-ecran-carte > #atl-direct-note, .atl-ecran-carte > .atl-tenu-zone { order: 2; flex: 0 0 100%; min-height: 28px; }
  .atl-ecran-carte > #atl-ecran-note, .atl-ecran-carte > #atl-direct-note { line-height: 28px; }
  .atl-ecran-carte:has(> .atl-tenu-zone:not([hidden])) > :is(#atl-ecran-note, #atl-direct-note) { display: none; }
  .atl-ecran-carte > .atl-tenu-zone { flex-wrap: nowrap; }
  .atl-ecran-carte > .atl-tenu-zone > .atl-tenu-ligne { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Les touches : des capuchons serrés (28 px au moins de large), les vingt-trois sur une rangée dès 900 px de carte. */
.atl-ecran-carte .atl-touches .hx-bouton { min-width: 28px; padding-inline: var(--space-1); }
/* La frappe : le champ prend la place, ses deux cases et « Taper » ne passent pas à la ligne. */
.atl-ecran-carte .atl-frappe .hx-saisie { min-width: 8rem; flex-basis: 8rem; }
.atl-ecran-carte .atl-frappe .hx-case { flex: none; white-space: nowrap; font-size: var(--fs-sm); }
/* La disposition du clavier du banc : sur un ordinateur, elle se lit au survol du champ de frappe (son title) et par les lecteurs
   d'écran (aria-describedby) ; elle ne prend pas de ligne sous l'image. */
.atl-ecran-carte > .atl-frappe__note { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1100px) {
  /* Une colonne : la place ne manque plus en hauteur, les aides se lisent en entier. */
  .atl-ecran-carte > .hx-note { flex: 0 0 100%; overflow: visible; text-overflow: clip; white-space: normal; }
  .atl-ecran-carte > .atl-frappe__note { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .atl-ecran-carte > .atl-frappe { flex-wrap: wrap; }
  .atl-ecran-carte .atl-barre__image { margin-left: 0; }
  .atl-ecran-carte .atl-frappe .hx-saisie { flex-basis: 100%; }
}
@media (pointer: coarse) { .atl-ecran-carte .atl-touches .hx-bouton { padding-inline: var(--space-2); } }

/* ── Le volet de la mission : la carte de la session, à la hauteur de la rangée de l'image ───────────────────────────────── */
/* Compact : il tient dans la rangée. Il ne la dépasse pas (--atl-rangee-max) et ne défile en lui-même qu'en dernier recours ; sur
   tablette et téléphone, rien n'est borné. 14/10/2026 (contrôle de la session 269) : ses gestes viennent avant le reste des détails
   (public/js/atelier.js, atlSessionHtml ; public/js/atelier-installation.js) — s'il défile, ce n'est que pour des détails. Ses deux
   listes, avant et après les gestes, partagent la même colonne de libellés (6 rem) : leurs valeurs s'alignent. */
.atl-mission { min-width: 0; }
@media (min-width: 1101px) { .atl-mission { max-height: var(--atl-rangee-max, none); overflow-y: auto; } }
.atl-mission:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.atl-mission > .hx-entete { margin-bottom: var(--space-2); }
.atl-mission .hx-def { grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); }
.atl-mission > .hx-mt-12, .atl-mission > .atli-etapes { margin-top: var(--space-2); }
.atl-mission > .hx-etat { padding: var(--space-3) var(--space-2); }
.atl-mission .hx-bandeau { padding: var(--space-2) var(--space-3); }

/* ── La bande : une carte sur toute la largeur, ses onglets en tête, un panneau à la fois ────────────────────────────────── */
.hx-carte.atl-bande { padding: 0; }
.hx-onglets.atl-bande__onglets { margin: 0; padding: 0 var(--space-2); }
/* Une alerte d'un panneau caché remonte sur son onglet (atlBandeRepere) : le point de l'état après le libellé. */
.atl-bande__repere { position: relative; display: inline-flex; align-items: center; }
.atl-bande__panneau { min-width: 0; padding: var(--space-2) var(--space-4) var(--space-4); }
/* Les cartes des lots (#atl-ia, #atl-plan, #atl-kb, #atl-alim, #atl-kvm, #atl-disque) sont à plat dans la bande : c'est elle, la carte. */
.atl-bande__panneau > .hx-carte { padding: 0; border: 0; border-radius: 0; background: none; }
/* « Matériel » : l'alimentation, le banc et le disque virtuel côte à côte. */
.atl-bande__panneau--colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); align-items: start; }
@media (max-width: 1100px) { .atl-bande__panneau--colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .atl-bande__panneau--colonnes { grid-template-columns: minmax(0, 1fr); } }
/* 19/10/2026 (revue du 19/10) — « Rapport » : ses sections s'empilent (rapport client, tests, rapport d'intervention, rapport de la
   mission, historique du banc) ; chacune se sépare de la précédente par un espace et un filet — l'historique se lisait comme la suite
   du rapport d'intervention, à 0 px. Limité à ce panneau : la grille de « Matériel » garde ses trois colonnes alignées.
   Relecture du 19/10 : limité à l'écran — à l'impression (« Imprimer » du rapport d'intervention ou des tests, rapport client affiché
   avant eux), la règle l'emportait sur les feuilles d'impression (body.atlf-impression #atl-intervention, body.atlt-impression
   #atl-tests : border 0) ; la page imprimée commençait par un filet et 40 px de plus. */
@media screen {
  #atl-panneau-rapport > section:not([hidden]) ~ section:not([hidden]) { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }
}
/* L'historique du banc : la date, en-tête de sa ligne pour les lecteurs d'écran, garde la graisse d'une cellule ; le cadre qui défile
   contient les libellés cachés (.hx-lecteur-seul est en position absolue : hors de lui, la page défilait en largeur à 360 px). */
#atl-historique tbody th { font-weight: 400; }
/* Relecture du 19/10 : la règle du socle « tbody tr:last-child td { border-bottom: none } » ne vise que les td ; la date (th) de la
   dernière ligne gardait seule le filet bas de .hx-tableau th. */
#atl-historique tbody tr:last-child th { border-bottom: 0; }
#atl-historique .hx-defile { position: relative; }

/* ── « Nouvelle session » : le formulaire d'ouverture dans la bande, ses champs en trois colonnes ────────────────────────── */
/* Dans sa fenêtre (le mur des bancs), le même formulaire reste une pile : .atl-o--colonnes n'est posée que dans la bande.
   19/10/2026 (Jérôme, sur ce formulaire en « Installer Windows » : « quasi tout est sur la gauche et le choix du modèle devrait être en
   1er », puis « le champ texte doit être plus haut » ; sa maquette « Trois colonnes équilibrées ») — de haut en bas : le MODÈLE et les
   MODES, sur toute la largeur ; trois colonnes, « Windows » (l'image, le nom du PC, le compte, la langue, le mot de passe, l'agent, le
   fond d'écran), « Le PC et son client » (la fiche, le client et le site, le contrat ; la marque et la touche, le PC en clair,
   #atl-o-ia) et « Après Windows » (les logiciels, OpenVPN, Office, les boîtes mail : public/js/atelier-formulaire.js) ; la DEMANDE,
   sur toute la largeur ; le pied. Sur toute la largeur : .atl-o__large (le modèle, la demande). */
/* Le nombre de colonnes se lit sur la largeur du PANNEAU qui reçoit le formulaire (#atl-panneau-nouvelle, requêtes de conteneur), pas
   sur celle de l'écran : le volet de gauche est revenu sur l'Atelier le 19/10 (« sur l'atelier il manque le menu de gauche! »,
   public/js/app.js) et prend sa part de la largeur. Trois colonnes dès 1 340 px de panneau, deux dès 880 px, une en dessous : une
   colonne garde ainsi au moins 430 px, et ses grilles à deux champs gardent « Touche du menu de démarrage » (coupée à 414 px) ou
   « Confirmation du mot de passe » sur une ligne (à 1 366 px d'écran avec le volet, trois colonnes de 338 px coupaient ces
   libellés). Les LIBELLÉS seulement : à 1 680 px avec le volet, les colonnes font 443 px et les VALEURS longues d'une paire (le
   fuseau, le site, la marque) y étaient encore coupées ; la règle des colonnes étroites, plus bas (revue du 19/10), les met sur
   leur ligne. */
#atl-panneau-nouvelle { container: atl-nouvelle / inline-size; }
.atl-o--colonnes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-6); align-items: start; }
.atl-o--colonnes > :is(.atl-o__modes, .atl-o__large, .atl-o__pied) { grid-column: 1 / -1; }
.atl-o--colonnes .hx-fenetre__pied { margin-top: 0; }
.atl-o--colonnes .hx-groupe .hx-case { align-items: flex-start; }
/* Une colonne sans rien à montrer se retire et les autres se partagent la largeur : « Windows » sans installation (diagnostic, console,
   aucun mode encore), « Après Windows » hors des deux modes de Windows. Sans « Après Windows », les deux groupes de « Le PC et son
   client » deviennent deux colonnes de la grille (diagnostic et console : comme avant) : rien ne s'étire sur toute la largeur. */
.atl-o > .atl-o__colonne[hidden], .atl-o > .atl-o__colonne:has(> #atl-o-install[hidden]) { display: none; }
.atl-o--colonnes:not(:has(> .atl-o__colonne--apres:not([hidden]))) > .atl-o__colonne--pc { display: contents; }
/* Deux colonnes : « Après Windows » passe dessous, sur toute la largeur. Trois : sans la colonne « Windows » (diagnostic, console,
   aucun mode encore), les deux groupes du PC et de son client se partagent la largeur. */
@container atl-nouvelle (min-width: 880px) {
  .atl-o--colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atl-o--colonnes > .atl-o__colonne--apres { grid-column: 1 / -1; }
}
/* Revue du 19/10/2026 (2) — deux colonnes, « Windows » montrée sans « Après Windows » (« Démarrer une ISO ») : « Windows » (l'image et sa
   note) prend toute la largeur, les deux groupes du PC et de son client se partagent la rangée suivante. Seuls dans les deux colonnes,
   les trois blocs se plaçaient l'un après l'autre : l'image seule à côté de la fiche et du client, puis la marque sous l'image après
   un trou de 100 à 125 px, la moitié droite de la deuxième rangée vide (1 366 à 1 600 px d'écran avec le menu de gauche). */
@container atl-nouvelle (880px <= width < 1340px) {
  .atl-o--colonnes:not(:has(> .atl-o__colonne--apres:not([hidden]))) > .atl-o__colonne--windows { grid-column: 1 / -1; }
}
@container atl-nouvelle (min-width: 1340px) {
  .atl-o--colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atl-o--colonnes > .atl-o__colonne--apres { grid-column: auto; }
  .atl-o--colonnes:has(> .atl-o__colonne > #atl-o-install[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* « Après Windows » en colonne : le compte et le mot de passe d'Office l'un sous l'autre ; une boîte mail, l'adresse sur sa ligne,
     puis le type, le mot de passe et « Retirer » (« Compte qui active Office (facultatif) » ou « Mot de passe (facultatif) » se
     coupaient à 443 px). */
  .atl-o--colonnes > .atl-o__colonne--apres .hx-grille--2col { grid-template-columns: minmax(0, 1fr); }
  .atl-o--colonnes > .atl-o__colonne--apres .atlf-boite { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .atl-o--colonnes > .atl-o__colonne--apres .atlf-boite > :first-child { grid-column: 1 / -1; }
}
/* Revue du 19/10/2026 — UNE COLONNE ÉTROITE : les listes dont une option est longue prennent toute leur ligne, chacune à son seuil, tiré
   de son option LA PLUS LONGUE (toutes les options des listes fermées, pas seulement celle qui est choisie) et non plus de la valeur par
   défaut. La largeur se lit sur la colonne elle-même (conteneur atl-o-col) : la bande en trois ou deux colonnes, la pile d'un
   téléphone, la fenêtre du mur. « Après Windows » et la liste des fonds suivent la même règle (atelier-formulaire.css).
   — Dans « Windows », le clavier et le fuseau, sous 40 rem (640 px : chaque liste d'une paire y aurait moins de 312 px). Revue du 19/10
   (2) : le seuil de 32 rem venait de « Paris, Bruxelles, Madrid (UTC+1) » (247 px), le fuseau par défaut ; « Berlin, Rome, Amsterdam,
   Zurich (UTC+1) » demande 305 px, « Néerlandais (américain international) » 275 px et « Londres, Lisbonne, Dublin (UTC+0) » 265 px
   (Inter ; 286 et 259 px en Segoe UI) — coupés dans des listes de 252 à 270 px, à 1 366, 1 440, 1 536 et 1 920 px avec le menu de gauche.
   — Dans « Le PC et son client », le client et le site, la marque et la touche du menu, sous 32 rem (512 px : chaque champ d'une paire y
   aurait moins de 248 px ; « Autre (PC monté) · menu F12 », la plus longue des marques, demande 224 px). */
.atl-o > .atl-o__colonne, .atl-o .atl-o__groupe { container: atl-o-col / inline-size; }
@container atl-o-col (width < 40rem) {
  #atl-o-windows > .hx-champ:has(> :is(#atl-o-clavier, #atl-o-fuseau)) { grid-column: 1 / -1; }
}
@container atl-o-col (width < 32rem) {
  .atl-o__groupe > .hx-grille--2col { grid-template-columns: minmax(0, 1fr); }
}
/* 17/10/2026 (Jérôme : « mets un texte plus explicite ») : les modes sur toute la largeur, chacun son titre en gras et ce qu'il fait
   dessous, sur deux lignes au plus ; la profondeur du diagnostic sous lui, décalée. */
label.hx-case.atl-o__choix { align-items: flex-start; }
label.atl-o__choix > input { margin-top: var(--space-1); }
.atl-o__choix-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.atl-o__choix-aide { color: var(--dim); font-size: var(--fs-sm); }
.atl-o__profondeur, .atl-o__lecture { margin-left: var(--space-6); }

/* ── « HeXaIA » : la saisie en première ligne, les avertissements sur une ligne, puis le fil ─────────────────────────────── */
.atia-form { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; margin: 0; }
/* La zone de texte, large, et à sa droite « Joindre l'écran », « Conclure », « Envoyer », puis les outils. */
.atia-saisie { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
/* Deux lignes, jusqu'à six : --atia-lignes est écrite par atiaSaisieAjuster. */
.atia-texte { flex: 1 1 auto; width: auto; min-width: 0; height: calc(var(--atia-lignes, 2) * 1.5em + 2 * var(--space-2) + 2px); line-height: 1.5; resize: none; }
.atia-envoi { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); max-width: 50%; min-width: 0; }
.atia-envoi .hx-case { white-space: nowrap; font-size: var(--fs-sm); }
.atia-envoi > #atia-outils { justify-content: flex-end; }
.atia-envoi > #atia-outils:empty { display: none; }
.atia-avis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); min-width: 0; }
.atia-avis > p { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.atia-avis > .atia-statut { margin-left: auto; }
.atia-avis > .atia-statut:empty { display: none; }
@media (max-width: 700px) {
  .atia-saisie { flex-direction: column; align-items: stretch; }
  .atia-envoi { align-items: stretch; max-width: none; }
  .atia-envoi > .hx-grappe { flex-wrap: wrap; }
  .atia-avis > p { white-space: normal; }
}
/* [Atelier — banc] fin */