/* [Atelier — coffre] début
   Références au coffre dans les plans de l'Atelier (public/js/atelier-coffre.js ; session 240, lot « ecrans », 12/10/2026).
   Chargée après style.css (crochet H-E1) ; rangée à part pour ne pas toucher style.css pendant que six flux codent en
   parallèle — l'intégration peut la verser dans style.css telle quelle. Le socle fait l'essentiel (hx-bandeau, hx-badge,
   hx-statut, hx-code, hx-bloc-code, hx-fenetre, hx-tableau, hx-defile) ; ces règles ne posent que le bloc d'une étape,
   ses créneaux, la liste du sélecteur et le récapitulatif. Jetons seuls, espacements de l'échelle (4, 8, 12, 16), clair et
   sombre par les jetons. Préfixe .atlc-. Jamais une valeur de secret dans le DOM : rien ici ne « masque » du texte. */

/* Le bloc « Coffre » d'une étape : un cadre atténué, l'icône à l'accent, un créneau par ligne. */
.atlc-bloc { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-0); min-width: 0; }
.atlc-bloc__tete { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.atlc-bloc__tete > .ni { flex: none; margin: 0; color: var(--accent); }
.atlc-creneaux { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
/* Un créneau : un liseré à gauche au ton de son état (à choisir, proposée, liée). */
.atlc-creneau { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-left: 2px solid var(--border-strong); min-width: 0; }
.atlc-creneau--a_lier { border-left-color: var(--color-warn); }
.atlc-creneau--proposee { border-left-color: var(--accent); }
.atlc-creneau--liee { border-left-color: var(--color-ok); }
.atlc-creneau__tete { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.atlc-creneau__tete > .ni { flex: none; margin: 0; }
.atlc-creneau__aide { flex: 1 1 10rem; min-width: 0; color: var(--dim); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.atlc-creneau__entree { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.atlc-creneau__entree > .ni { flex: none; margin: 0; color: var(--dim); }
.atlc-creneau__titre { min-width: 0; overflow-wrap: anywhere; }
.atlc-creneau__champs { align-items: center; }
/* « Secret servi » : chiffres tabulaires, atténué, l'icône sur la première ligne. */
.atlc-servi { display: flex; align-items: flex-start; gap: var(--space-1); margin: 0; color: var(--dim); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.atlc-servi > .ni { flex: none; margin: 0; }

/* Le sélecteur : la ligne de contexte, la liste des entrées (une case radio par entrée), l'entrée choisie marquée d'un liseré d'accent. */
.atlc-choix__contexte { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; min-width: 0; }
.atlc-choix__contexte > .ni { flex: none; margin: 0; }
.atlc-choix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); max-height: 40vh; overflow: auto; min-width: 0; }
label.atlc-choix__item { align-items: flex-start; gap: var(--space-3); margin-top: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-1); min-width: 0; }
label.atlc-choix__item:has(> input:checked) { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
label.atlc-choix__item:has(> input:disabled) { cursor: not-allowed; color: var(--dim) !important; }
label.atlc-choix__item:has(> input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
label.atlc-choix__item > input { flex: none; margin-top: var(--space-1); }
.atlc-choix__corps { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 auto; min-width: 0; }
.atlc-choix__ligne { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.atlc-choix__ligne > strong { min-width: 0; overflow-wrap: anywhere; }
.atlc-vide { padding: var(--space-2) 0; }
.atlc-hors-client { margin-top: var(--space-3); }
.atlc-hors-client > summary { cursor: pointer; color: var(--dim); font-size: var(--fs-sm); }

/* Le récapitulatif avant validation : le tableau défile dans son cadre (hx-defile), jamais la page. */
.atlc-recap td, .atlc-recap th { vertical-align: top; }
.atlc-recap__entree { min-width: 12rem; overflow-wrap: anywhere; }

/* La fiche d'un script : le corps à relire, borné en hauteur, défilant dans son cadre. */
.hx-bloc-code.atlc-code { max-height: 16rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.atlc-script-etat, .atlc-script-geste { display: inline-flex; align-items: center; }

/* L'avis du dialogue HeXaIA, l'aide de syntaxe de la ligne # COFFRE. */
.atlc-avis { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 0; }
.atlc-avis > .ni { flex: none; margin: 0; }
.atlc-aide { margin-top: var(--space-2); }
.atlc-aide > summary { cursor: pointer; color: var(--dim); font-size: var(--fs-sm); }

@media (max-width: 600px) {
  .atlc-creneau__aide { flex-basis: 100%; }
  .atlc-choix { max-height: 50vh; }
  .atlc-recap__entree { min-width: 8rem; }
}
/* [Atelier — coffre] fin */