/*
 * public/css/atelier-formulaire.css — Atelier : LE FORMULAIRE D'UNE INSTALLATION DE WINDOWS (mot de passe, type d'agent, logiciels,
 * Office 365, boîtes mail, modèle, demande) et LE RAPPORT D'INTERVENTION (onglet « Rapport » de la bande), public/js/atelier-formulaire.js.
 * 16/10/2026.
 *
 * Feuille à part de style.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. Les formes sont celles du socle (.hx-champ, .hx-saisie, .hx-case,
 * .hx-groupe, .hx-filtre, .hx-def, .hx-tableau, .hx-statut) : ici seulement ce qui manque. Préfixe : .atlf-.
 * UNE seule barre de défilement (la page) : la liste des logiciels montre 12 lignes au plus (la recherche affine), jamais une boîte qui
 * défile dans la page.
 */

.atlf { min-width: 0; }
.atlf[hidden] { display: none; }
.atlf .hx-champ { min-width: 0; }
.atlf .hx-groupe { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.atlf .hx-groupe[disabled] { opacity: .55; }

/* La recherche, la catégorie et le compteur des logiciels : une ligne qui passe à la ligne sur un écran étroit. */
.atlf-filtres { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; }
.atlf-filtres .hx-saisie { flex: 1 1 160px; min-width: 0; }
.atlf-n { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Les logiciels : des cases sur deux colonnes ; un nom long se coupe par une ellipse (son texte entier est dans le title). */
.atlf-logiciels { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-1) var(--space-3); min-width: 0; }
.atlf-logiciel { min-width: 0; }
.atlf-logiciel .hx-tronque { min-width: 0; }
.atlf-plus { grid-column: 1 / -1; }

/* Les logiciels cochés : des pastilles, un clic les retire. */
.atlf-puces { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; }
.atlf-puces[hidden] { display: none; }
.atlf-puce { max-width: 100%; min-width: 0; gap: var(--space-1); }
.atlf-puce .hx-tronque { max-width: 220px; }

/* Une boîte mail : adresse, type, mot de passe, retirer. */
.atlf-boite { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--space-2); align-items: end; min-width: 0; }
@media (max-width: 640px) { .atlf-boite { grid-template-columns: minmax(0, 1fr) auto; } }

/* Le modèle : la liste, « Enregistrer comme modèle », « Bibliothèque des modèles ». */
.atlf-modele { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; }
.atlf-modele .hx-saisie { flex: 1 1 200px; min-width: 0; }
/* 19/10/2026 (Jérôme : « le choix du modèle devrait être en 1er ») : le modèle en tête du formulaire (#atlf-o-modele) — la liste, puis
   ses deux gestes ENSEMBLE (.atlf-modele__gestes) ; grisée, avec « Enregistrer comme modèle », hors des deux modes de Windows
   (public/js/atelier-formulaire.js : peindreModeleZone). Revue du 19/10 (2) : la rangée passe à la ligne selon la place de LA LISTE, plus
   selon la largeur de l'écran (le menu de gauche n'y était pas compté) — les gestes restent à sa droite tant qu'elle garde 20 rem
   (320 px : « Vieux modèle (sans formulaire) · v1 », le plus long des modèles mesurés, demande 263 px), sinon ils passent dessous,
   ensemble, et elle prend sa ligne, 32 rem au plus. À 901 px d'écran avec le menu de gauche, la liste tombait à 162 px (« Poste
   comptable · v1 » coupé) ; dans la fenêtre du mur à 720 px, à 189 px. Revue du 19/10 : dans la bande en deux ou trois colonnes
   (#atl-panneau-nouvelle, conteneur atl-nouvelle : 880 et 1 340 px, comme la grille d'atelier-banc.css), elle a la largeur d'une
   colonne et « Enregistrer comme modèle » commence avec la deuxième (16 px de marge et 8 px d'écart : les 24 px entre deux colonnes). */
.atlf-tete .atlf-modele > .hx-saisie { flex: 1 1 20rem; min-width: min(100%, 20rem); max-width: 32rem; }
.atlf-modele__gestes { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; }
@container atl-nouvelle (min-width: 880px) {
  .atl-o--colonnes .atlf-tete .atlf-modele > .hx-saisie { flex: 0 0 calc((100% - var(--space-6)) / 2); max-width: none; margin-inline-end: var(--space-4); }
}
@container atl-nouvelle (min-width: 1340px) {
  .atl-o--colonnes .atlf-tete .atlf-modele > .hx-saisie { flex-basis: calc((100% - 2 * var(--space-6)) / 3); }
}
/* 19/10/2026 (Jérôme : « le champ texte doit être plus haut ») : la demande, sous les colonnes, sur toute la largeur — huit lignes (rows),
   redimensionnable en hauteur, jamais moins de quatre. */
textarea.hx-saisie.atlf-demande { display: block; width: 100%; resize: vertical; line-height: 1.5; min-height: calc(4 * 1.5em + 2 * var(--space-2) + 2px); }

/* Le fond d'écran (17/10/2026) : la liste, l'aperçu (16/9, bordé), le lien de la bibliothèque. */
.atlf-fond { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; }
.atlf-fond .hx-saisie { flex: 1 1 200px; min-width: 0; }
.atlf-fond__apercu { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); }
.atlf-fond__apercu[hidden] { display: none; }
/* Revue du 19/10/2026 : dans une colonne étroite du formulaire (moins de 32 rem, conteneur atl-o-col d'atelier-banc.css : la bande en
   trois colonnes à 1 680 px avec le menu de gauche, en deux sous 1 366 px, un téléphone), la recherche des logiciels prend sa ligne,
   la catégorie et le compteur la suivent (« Rechercher un logiciel » et « Toutes les catégories » se coupaient à 443 px) ; la liste
   des fonds aussi, l'aperçu et « Bibliothèque des fonds » ensemble dessous (le lien passait seul à la ligne). */
@container atl-o-col (width < 32rem) {
  .atlf-filtres > #atlf-q { flex-basis: 100%; }
  .atlf-fond > select.hx-saisie { flex-basis: 100%; }
}

/* La bibliothèque des fonds d'écran (public/js/atelier-fonds-ecran.js) : des vignettes en grille, le dépôt sur une ligne. */
.atfe-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); min-width: 0; }
.atfe-fond { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.atfe-fond__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); }
.atfe-fond__nom { min-width: 0; }
.atfe-depot { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; min-width: 0; }
.atfe-depot .hx-champ { flex: 1 1 200px; min-width: 0; }

/* ── Le rapport d'intervention ─────────────────────────────────────────────────────────────────────────────────────────────── */
.atlf-r { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.atlf-r[hidden] { display: none; }
.atlf-r .hx-entete { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.atlf-r .hx-entete .atlf-r__gestes { margin-left: auto; }
.atlf-r .hx-sous-titre { margin: 0; }
.atlf-r__resume { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.atlf-r__ligne { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
@media (max-width: 640px) { .atlf-r__ligne { grid-template-columns: minmax(0, 1fr); } }
.atlf-r__params { margin: 0; }
.atlf-r__params dd { overflow-wrap: anywhere; }
.atlf-r__etapes td:first-child { white-space: nowrap; width: 1%; }
.atlf-r__etapes td.hx-num { white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }

/* L'impression : le rapport seul, sur papier, aux couleurs du système (CanvasText sur Canvas) ; les gestes ne s'impriment pas. */
@media print {
  body.atlf-impression * { visibility: hidden !important; }
  body.atlf-impression #atl-intervention, body.atlf-impression #atl-intervention * { visibility: visible !important; }
  body.atlf-impression #atl-intervention { position: absolute; left: 0; top: 0; width: 100%; border: 0; box-shadow: none; background: Canvas; color: CanvasText; }
  body.atlf-impression #atl-intervention .atlf-r__gestes { display: none !important; }
  body.atlf-impression #atl-intervention .hx-defile { overflow: visible; }
}