/*
 * public/css/atelier-mission.css — Atelier : LE VOLET DE LA MISSION d'un banc dessiné d'après le modèle du serveur
 * (public/js/atelier-mission.js), la question du banc libre et l'accord ouvert en grand dans la bande, le rapport de la mission
 * (revue des bancs du 13/10/2026, § B.1.4 et B.4.3 ; disposition « bande » du 14/10 ; session « écrans », 15/10/2026).
 *
 * Feuille à part, chargée après atelier-banc.css et atelier-prompt.css : elle ne définit AUCUN jeton, elle les consomme (couleurs,
 * espacements 4 / 8 / 12 / 16 / 24, rayons, tailles de texte) ; les deux thèmes viennent donc des jetons. Préfixes : .atl-mn- (le
 * volet), .atl-libre (la suite de la question du banc libre), .atl-rapport (le rapport de la mission).
 *
 * LE VOLET NE DÉFILE JAMAIS EN LUI-MÊME (une seule barre de défilement : la page). Il est une colonne bornée à la rangée de l'image
 * (--atl-rangee-max, écrite par atlEcranAjuster) : la tête, le bloc « maintenant » et l'arrêt gardent leur hauteur ; seul le DÉTAIL
 * du bloc rétrécit (ses lignes se coupent, le document entier s'ouvre dans la bande). Le titre (deux lignes au plus) et les gestes
 * ne sont jamais coupés : aucun max-height ne les cache.
 */

/* ── Le volet ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1101px) {
  .atl-mission.atl-mn-volet { display: flex; flex-direction: column; max-height: var(--atl-rangee-max, none); overflow: hidden; }
}
.atl-mn { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; min-height: 0; min-width: 0; }
.atl-mn > * { min-width: 0; }
.atl-mn__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; }
.atl-mn__entete > .hx-titre { margin: 0; }
.atl-mn__tete { display: flex; flex-direction: column; gap: var(--space-1); }
.atl-mn__tete > p, .atl-mn__tete > q { margin: 0; }
.atl-mn__tete:empty, .atl-mn__plan:empty, .atl-mn__maintenant:empty, .atl-mn__demarrage:empty, .atl-mn__arret:empty { display: none; }

/* Le PC d'abord, son client ensuite : un client au nom long se coupe, jamais le PC (K9). */
.atl-mn__qui { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--fs-sm); }
.atl-mn__qui > .ni { flex: none; }
.atl-mn__pc { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-mn__client { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
.atl-mn__client::before { content: "· "; }

/* La phrase (deux lignes au plus) et la demande citée (une ligne : le texte entier au survol). */
.atl-mn__phrase { display: -webkit-box; overflow: hidden; font-size: var(--fs-sm); font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.atl-mn__demande { display: block; overflow: hidden; color: var(--dim); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }

/* La frise, toujours dans sa forme courte : un point par étape, l'étape en cours, « 3 sur 5 ». */
.atl-mn__frise { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--fs-sm); }
.atl-mn__points { display: flex; flex: none; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.atl-mn__point { width: 8px; height: 8px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--bg-2); }
.atl-mn__point--fait { border-color: var(--color-ok); background: var(--color-ok); }
.atl-mn__point--en_cours { border-color: var(--accent); background: var(--accent); }
.atl-mn__point--erreur { border-color: var(--color-crit); background: var(--color-crit); }
.atl-mn__point--saute { border-style: dashed; }
.atl-mn__etape { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.atl-mn__avancement { flex: none; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.atl-mn__aide { margin: 0; }

/* ── LE bloc « maintenant » : le titre et les gestes gardent leur place, seul le détail rétrécit ───────────────────────────── */
.atl-mn__maintenant { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.atl-mn__bloc { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-2); min-height: 0; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--bg-1); }
.atl-mn__bloc--attention { border-left-color: var(--color-warn); }
.atl-mn__bloc--alerte { border-left-color: var(--color-crit); }
.atl-mn__bloc--ok { border-left-color: var(--color-ok); }
.atl-mn__bloc--neutre { border-left-color: var(--border-strong); }
.atl-mn__titre { display: -webkit-box; flex: none; overflow: hidden; margin: 0; font-size: var(--fs-base); line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.atl-mn__duree { margin-left: var(--space-2); color: var(--dim); font-size: var(--fs-xs); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atl-mn__detail { flex: 0 1 auto; min-height: 20px; overflow: hidden; font-size: var(--fs-sm); line-height: 1.45; }
.atl-mn__detail > p, .atl-mn__detail > ul { margin: 0 0 var(--space-1); }
.atl-mn__detail:empty { display: none; }
.atl-mn__resume { padding-left: var(--space-4); color: var(--text); }
.atl-mn__gestes { display: flex; flex: none; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); min-width: 0; }
.atl-mn__gestes:empty { display: none; }
.atl-mn__gestes > .hx-bouton { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-mn__saisie { flex: 1 1 100%; min-width: 0; margin: 0; }
.atl-mn__message, .atl-mn__autres { flex: none; margin: 0; }
.atl-mn__arret { display: flex; flex: none; flex-direction: column; gap: var(--space-1); }
.atl-mn__arret-note { margin: 0; }

/* ── La bande : l'accord ouvert en grand (« Lire et décider ») et le rapport de la mission ──────────────────────────────────── */
#atl-accord .hx-titre, #atl-rapport .hx-titre { margin: 0 0 var(--space-2); }
.atl-mn__document { max-width: 72rem; font-size: var(--fs-base); line-height: 1.5; }
.atl-mn__document > p { margin: 0 0 var(--space-2); }
.atl-mn__gestes--accord { align-items: flex-end; }
.atl-mn__gestes--accord > .atl-mn__saisie { flex: 0 1 20rem; }
.atl-rapport__qui { margin: 0 0 var(--space-2); }
.atl-rapport__lignes { max-width: 72rem; margin: 0 0 var(--space-3); padding-left: var(--space-4); line-height: 1.5; }
.atl-rapport__gestes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
textarea.hx-saisie.atl-rapport__texte { display: block; width: 100%; max-width: 72rem; resize: vertical; line-height: 1.5; }

/* ── Banc libre : sous la question, le déjà-vu, les modèles, « Démarrer sur une image… », « Options… » ─────────────────────── */
.atl-libre { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin-top: var(--space-2); }
.atl-libre__rangee { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.atl-libre__rangee > .hx-libelle { flex: none; width: 6rem; margin: 0; }
.atl-libre__pilules { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.atl-libre__pilules > .hx-filtre { max-width: 100%; min-width: 0; }
.atl-libre__pilules > .hx-filtre > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-libre__tous { white-space: nowrap; }
.atl-libre__gestes { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* La question du banc libre est la PREMIÈRE ligne de la bande : sa carte est à plat dans le panneau, ses pilules d'exemples
   restent sur une rangée compacte. */
.atl-bande__panneau > #atl-prompt.hx-carte { padding: 0; border: 0; border-radius: 0; background: none; }
.atl-bande__panneau > #atl-prompt textarea.atp-texte { min-height: calc(2 * 1.5em + 2 * var(--space-2) + 2px); }

/* Une colonne (tablette, téléphone) : le volet suit l'image, rien n'est borné. */
@media (max-width: 1100px) {
  .atl-libre__rangee { flex-direction: column; gap: var(--space-1); }
  .atl-libre__rangee > .hx-libelle { width: auto; }
}
@media (max-width: 700px) {
  #atl-accord:not([hidden]) { position: fixed; inset: var(--topbar-h, 64px) 0 0 0; z-index: 40; overflow-y: auto; padding: var(--space-4); background: var(--bg-0); }
}
/* Vérification adverse du 15/10 (téléphone, accord critique) : le fondu d'entrée de la page (style.css : « main > * { animation:
   fadeIn … both } ») LAISSAIT sa transformation sur la page de l'Atelier, qui devenait le repère des éléments fixes : la feuille de
   l'accord s'ouvrait blanche, ses gestes 1 204 px plus haut. Le fondu se joue toujours, il ne laisse plus rien après lui, à toutes
   les largeurs (la feuille est fixe jusqu'à 700 px). */
main > .atl-page { animation-fill-mode: backwards; }
.atl-mn__gestes--accord > .atl-mn__fermer { margin-left: auto; }

/* ── Le volet d'aujourd'hui (réglages des lots éteints) : « Diagnostic sans image » et « Détails » se replient sous une ligne ───── */
/* Reste de la session 269 : à 1 366 × 657 en diagnostic, trois gestes passaient sous le bord du volet ; repliés, le volet tient dans
   la rangée de l'image sans défiler en lui-même. */
.atl-mission__repli > summary { width: fit-content; cursor: pointer; color: var(--dim); font-size: var(--fs-sm); }
.atl-mission__repli > summary:hover { color: var(--text); }
.atl-mission__repli > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
/* La carte « Démarrage » dans le volet de la mission : à plat, c'est le volet la carte. */
.atl-mn__demarrage > .atd.hx-carte { padding: 0; border: 0; border-radius: 0; background: none; }

/* ── Le mur : « Maintenant » sur deux lignes entières, le même bloc que la page du banc ──────────────────────────────────────── */
.atl-mur__maintenant { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--bg-1); }
.atl-mur__maintenant--attention { border-left-color: var(--color-warn); }
.atl-mur__maintenant--alerte { border-left-color: var(--color-crit); }
.atl-mur__maintenant--ok { border-left-color: var(--color-ok); }
.atl-mur__mn-titre { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.atl-mur__court { display: -webkit-box; overflow: hidden; margin: 0; font-size: var(--fs-sm); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.atl-mur__rapport { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-mur__decider { gap: var(--space-2); }
.atl-mur__oui { display: inline-flex; gap: var(--space-2); }
.atl-mur__oui[hidden] { display: none; }

/* Le plan à lancer dans le volet : la phrase du plan en texte (pas en bandeau), « Lancer » et « Plutôt » serrés. */
.atl-mn__plan { display: flex; flex-direction: column; gap: var(--space-2); }
.atl-mn__plan > * { margin: 0; }
.atl-mn__plan .atp-phrase--volet { display: -webkit-box; overflow: hidden; margin: 0; padding: 0; border: 0; background: none; font-size: var(--fs-sm); line-height: 1.45;
  -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.atl-mn__plan .atp-gestes { margin: 0; }
/* Vérification adverse du 15/10 (1366 × 657, plan chargé) : « Oui », « Non » et « Je ne sais pas » passaient sous le bord du volet ;
   sur un écran bas, la phrase du plan tient en deux lignes (le plan entier est dans la bande). */
@media (min-width: 1101px) and (max-height: 700px) {
  .atl-mn__plan .atp-phrase--volet { -webkit-line-clamp: 2; }
}
.atl-mn__plan .atp-plutot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.atl-mn__plan .atp-plutot > .hx-libelle { flex: 0 0 100%; margin: 0; }
.atl-mn__plan .atp-plutot > .hx-bouton { flex: 0 1 auto; max-width: 100%; width: auto; }

/* Téléphone : les onglets de la bande compacts (marges serrées) ; chacun garde son libellé sur une ligne, aucun n'est caché. */
@media (max-width: 700px) {
  .atl-bande__onglets > .hx-onglet { padding: var(--space-2); gap: var(--space-1); }
}

/* Le volet d'aujourd'hui : une valeur de la tête sur une ligne ; les deux replis côte à côte (un repli ouvert prend la largeur). */
.atl-mission .atl-mission__val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-mission__replis { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-4); }
.atl-mission__replis > .atl-mission__repli[open] { flex: 1 0 100%; }

/* ── Banc libre : la question à la place de la saisie, PREMIÈRE ligne de la bande (deux lignes, « Proposer » à droite) ──────── */
/* Comme la saisie de HeXaIA : la zone de texte large et, à sa droite, « Proposer » puis « Options avancées » ; les exemples et les
   raccourcis dessous. Le titre « Que faut-il faire sur ce PC ? » reste lu par les lecteurs d'écran (la zone le dit en clair). */
.atl-bande__panneau > #atl-prompt:has(#atp-f) > .hx-entete { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.atl-bande__panneau > #atl-prompt #atp-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-1) var(--space-3); }
.atl-bande__panneau > #atl-prompt #atp-f > * { grid-column: 1 / -1; }
.atl-bande__panneau > #atl-prompt #atp-f > textarea.atp-texte { grid-column: 1; grid-row: 1; height: calc(2 * 1.5em + 2 * var(--space-2) + 2px); resize: none; }
.atl-bande__panneau > #atl-prompt #atp-f > .atp-gestes { grid-column: 2; grid-row: 1; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; }
.atl-bande__panneau > #atl-prompt { gap: var(--space-2); }
@media (max-width: 700px) {
  .atl-bande__panneau > #atl-prompt #atp-f { grid-template-columns: minmax(0, 1fr); }
  .atl-bande__panneau > #atl-prompt #atp-f > .atp-gestes { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; }
}

/* Une colonne, le volet de la mission dessiné d'après le modèle : l'IMAGE, puis le VOLET (l'accord et ses boutons dans le premier
   écran du téléphone), puis la souris, les touches et la frappe ; la bande ensuite. La carte de l'image prête sa place (display:
   contents) : ses commandes se rangent sous le volet. Réglages des lots éteints, rien ne change. */
@media (max-width: 1100px) {
  .atl-haut:has(> #atl-session.atl-mn-volet) { display: flex; flex-direction: column; }
  .atl-haut:has(> #atl-session.atl-mn-volet) > .atl-ecran-carte { display: contents; }
  .atl-haut:has(> #atl-session.atl-mn-volet) > .atl-ecran-carte > .atl-ecran { order: -2; margin-bottom: 0; }
  .atl-haut:has(> #atl-session.atl-mn-volet) > #atl-session { order: -1; }
  .atl-haut:has(> #atl-session.atl-mn-volet) .atl-souris, .atl-haut:has(> #atl-session.atl-mn-volet) .atl-barre__image { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
}

/* La question d'un banc libre sur le mur : le champ prend la place, « Proposer » à sa droite. */
.atl-mur__question { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin: 0; }
.atl-mur__question > .hx-saisie { flex: 1 1 auto; min-width: 0; }
.atl-mur__question > .hx-bouton { flex: none; }

/* Le mur avec le modèle : les valeurs de la carte (technicien, client, fiche, PC) sur une ligne, leur texte entier au survol de la
   carte du banc ; la carte reste dans l'écran. */
.atl-mur__carte:has(.atl-mur__maintenant) .hx-def dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le pied du volet : l'entrée « Redémarrer sur… » (la carte « Démarrage », sans son titre ici) et l'arrêt sur une même rangée. */
.atl-mn__pied { display: flex; flex: none; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.atl-mn__pied:has(> .atl-mn__demarrage:empty):has(> .atl-mn__images:empty):has(> .atl-mn__arret:empty) { display: none; }
.atl-mn__images:empty { display: none; }
.atl-mn__demarrage > .atd > .hx-entete { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.atl-mn__demarrage > .atd { gap: var(--space-2); }
.atl-mn__demarrage:has(> .atd[hidden]) { display: none; }
/* La phrase épinglée d'une mission lancée par le prompt, dans le volet : la demande sur une ligne, la phrase en texte (deux lignes). */
.atl-mn__plan > .atp--epingle { gap: var(--space-1); padding: 0; border: 0; background: none; }
.atl-mn__plan > .atp--epingle .atp-demande q { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-mn__plan > .atp--epingle .atp-phrase { display: -webkit-box; overflow: hidden; margin: 0; padding: 0; border: 0; background: none; font-size: var(--fs-sm);
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* G. Le mur, le modèle allumé : la vignette à gauche, le texte à droite (la carte reste basse : le mur à deux bancs tient l'écran). */
@media (min-width: 600px) {
  .atl-mur__carte:has(.atl-mur__maintenant, .atl-mur__question) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas: "tete tete" "ecran corps"; align-items: start; }
  .atl-mur__carte:has(.atl-mur__maintenant, .atl-mur__question) > .atl-mur__tete { grid-area: tete; }
  .atl-mur__carte:has(.atl-mur__maintenant, .atl-mur__question) > .atl-mur__ecran { grid-area: ecran; }
  .atl-mur__carte:has(.atl-mur__maintenant, .atl-mur__question) > .atl-mur__corps { grid-area: corps; min-width: 0; }
}
.atl-mur__carte:has(.atl-mur__maintenant, .atl-mur__question) .atl-mur__gestes > .hx-bouton { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Session « compléments » (15/10) : la COMMANDE POWERSHELL dans la bande (public/js/atelier-mission.js, .atl-ps) ─────────────
   Basculée, elle prend la première ligne de l'onglet « HeXaIA » : la carte de HeXaIA se retire le temps du mode (aucun défilement
   emboîté : la liste des commandes suit la page, la dernière en premier ; la sortie entière s'ouvre dans une fenêtre). */
.atl-ps-actif > #atl-ia { display: none; }
.atl-ps { display: flex; flex-direction: column; gap: var(--space-2); }
.atl-ps__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.atl-ps__commande { flex: 1 1 24rem; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.atl-ps__mot { flex: 0 0 8rem; min-width: 0; text-transform: uppercase; }
.atl-ps__form > .hx-bouton, .atl-ps__form > .hx-filtre, .atl-ps__bascule { flex: none; white-space: nowrap; }
.atl-ps__aide, .atl-ps__message { margin: 0; }
.atl-ps__liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.atl-ps__liste[hidden] { display: none; }
.atl-ps__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.atl-ps__cmd { flex: 1 1 16rem; min-width: 0; overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.atl-ps__ligne > .hx-badge { flex: none; font-variant-numeric: tabular-nums; }
.atl-ps__qui { flex: none; color: var(--dim); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.atl-ps__sortie { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.atl-ps__sortie--cmd { color: var(--dim); }

/* ── « Démarrer sur une image… » : la liste de la bibliothèque, son véhicule et ses refus avant le clic (.atl-images) ──────────── */
.atl-images { display: flex; flex-direction: column; gap: var(--space-2); }
.atl-images__tete { display: flex; align-items: center; gap: var(--space-2); }
.atl-images__filtre { flex: 1 1 auto; min-width: 0; }
.atl-images__liste { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.atl-images__ligne { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-1); }
.atl-images__ligne:not(.atl-images__ligne--refus):hover { border-color: var(--accent); }
.atl-images__choix { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-width: 0; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.atl-images__choix:disabled { cursor: not-allowed; }
.atl-images__choix:focus-visible { border-radius: var(--radius-sm); outline: 2px solid var(--accent); outline-offset: 4px; }
.atl-images__choix > .hx-badge { flex: none; }
.atl-images__nom { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.atl-images__ligne--refus .atl-images__nom { color: var(--dim); }
.atl-images__detail { color: var(--dim); font-size: var(--fs-sm); }
.atl-images__detail > p { margin: 0; }
.atl-images__titre { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.atl-images__titre > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-images > .hx-note, .atl-images > p { margin: 0; }
.atl-images__gestes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }

/* ── Le TÉLÉPHONE (une colonne, nouveau volet seulement : .atl-banc--mission) : les commandes de la souris et du clavier repliées
   derrière « Prendre la main » ; toucher l'image l'ouvre en grand ; « Lancer » collé en bas de l'écran. Le fondu d'entrée de la
   page ne laisse plus sa transformation (plus haut, « main > .atl-page ») : les éléments fixes se posent contre l'écran. */
.atl-main-tel { display: none; }
@media (max-width: 640px) {
  /* Vérification adverse du 15/10 (téléphone, longueur de la page) : le titre « Atelier » sur sa ligne se retire de la vue (revue
     § 1.5 ; les lecteurs d'écran le lisent toujours), les onglets de l'Atelier se serrent (deux rangées au lieu de trois). */
  .atl-page:has(.atl-banc--mission) > h1 { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .atl-page:has(.atl-banc--mission) > #atl-onglets > .hx-onglet { padding: var(--space-1) var(--space-2); gap: var(--space-1); }
  .atl-banc--mission .atl-ecran-carte > .atl-main-tel { display: inline-flex; order: 1; }
  .atl-banc--mission .atl-ecran-carte:not(.atl-main-prise) > :is(.atl-barre, .atl-tenu-zone, .atl-touches, .atl-frappe, .hx-note) { display: none; }
  .atl-banc--mission #atp-lancer { position: fixed; right: var(--space-4); bottom: var(--space-3); left: var(--space-4); z-index: var(--z-sticky); justify-content: center;
    box-shadow: 0 4px 16px var(--accent-glow); }
  .atl-banc--mission:has(#atp-lancer) { padding-bottom: 48px; }
}
.atl-ecran.atl-ecran--grand { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--space-2);
  border: 0; border-radius: 0; }
.atl-ecran.atl-ecran--grand .atl-ecran__image { width: 100%; max-width: 100%; max-height: calc(100vh - 16px); object-fit: contain; }
.atl-ecran__fermer { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1; }
.atl-ecran__fermer[hidden] { display: none; }