/* * public/css/atelier-prompt.css — Atelier : le DÉMARRAGE PAR PROMPT d'un banc (« Que faut-il faire sur ce PC ? », * public/js/atelier-prompt.js) et la carte « Démarrage » avec sa fenêtre « Redémarrer sur… » (public/js/atelier-demarrage.js). * Session 259, 14/10/2026. * * Feuille à part de style.css (que seul l'intégrateur touche) : 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-carte, .hx-bouton, .hx-filtre, .hx-badge, .hx-bandeau, .hx-case, .hx-groupe) : ici seulement ce qui manque. * Préfixes : .atp- (prompt), .atd- (démarrage). La colonne du banc est étroite (300 à 380 px) : rien ne déborde, un libellé long se * coupe par une ellipse (son texte entier est dans le title). */ /* ── La zone prend la place de « Aucune session » ───────────────────────────────────────────────────────────────────────────── Tant que la zone est affichée sur un banc sans session, la carte « Session » de la page ne montre plus son état vide (ni son bouton « Ouvrir une session ») : UN seul bouton principal. La règle ne vise que cet état : une erreur de la console ou une session ouverte restent visibles, même si l'écran du prompt a du retard. */ .atp-remplace > #atl-session:has([data-atl-action="ouvrir"]) { display: none; } /* ── La carte ───────────────────────────────────────────────────────────────────────────────────────────────────────────────── */ .atp, .atd { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .atp[hidden], .atd[hidden] { display: none; } .atp > *, .atd > * { margin-top: 0; margin-bottom: 0; } .atp .hx-entete, .atd .hx-entete { margin: 0; } .atp form, .atd form { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin: 0; } .atp-validite { font-variant-numeric: tabular-nums; white-space: nowrap; } /* La demande : trois lignes ; elle grandit si la personne la tire. */ textarea.hx-saisie.atp-texte { display: block; width: 100%; resize: vertical; line-height: 1.5; } /* Les exemples, les raccourcis, les réponses : des pilules qui passent à la ligne ; une pilule plus large que la colonne se coupe. */ .atp-pilules { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; } .atp-pilules > .hx-filtre { max-width: 100%; min-width: 0; } .atp-pilules > .hx-filtre > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Les gestes de la zone : le bouton principal d'abord, ce qui est discret au bout. */ .atp-gestes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; } .atp-gestes > .hx-bouton { max-width: 100%; } .atp .hx-bouton > span, .atd .hx-bouton > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .atp-lancer { flex: 1 1 auto; } /* L'historique et « Pourquoi pas autre chose ? » : repliés. */ .atp-repli { min-width: 0; font-size: var(--fs-sm); } .atp-repli > summary { color: var(--dim); cursor: pointer; } .atp-repli > summary:hover { color: var(--text); } .atp-repli > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } .atp-repli[open] > summary { margin-bottom: var(--space-2); } .atp-liste { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; margin: 0; padding: 0; list-style: none; } .atp-liste > li { min-width: 0; } .atp-liste .hx-bouton { justify-content: flex-start; width: 100%; max-width: 100%; text-align: left; } .atp-liste p { margin: 0; color: var(--dim); line-height: 1.5; overflow-wrap: anywhere; } .atp-liste strong { color: var(--text); font-weight: 600; } /* ── Le plan ────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */ /* La demande rappelée (deux lignes au plus) et « Modifier la demande ». */ .atp-demande { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); min-width: 0; } .atp-demande > q { min-width: 0; color: var(--dim); font-size: var(--fs-sm); line-height: 1.5; quotes: "« " " »"; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; } .atp-demande > .hx-bouton { flex: none; } /* Ce PC : son nom et son client sur une ligne, ses faits en pastilles. */ .atp-pc { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .atp-pc__nom { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--fs-sm); } .atp-pc__nom > .ni { flex: none; margin: 0; } .atp-pc__nom > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atp-pc__nom > .hx-bouton { flex: none; margin-left: auto; } .atp-pastilles { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; } /* La phrase : ce qui va se passer. C'est le cœur du plan : texte à la taille de base, liseré de la marque (pas une alerte). */ .atp-phrase { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); font-size: var(--fs-base); line-height: 1.5; overflow-wrap: anywhere; } .atp-phrase > strong { display: block; font-weight: 600; } .atp-phrase > .hx-badge { margin-top: var(--space-1); } /* Une note du plan (ce que la demande voulait et qui n'est pas possible ici, le déjà-vu, HeXaIA consultée). */ .atp-note { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; margin: 0; color: var(--dim); font-size: var(--fs-sm); line-height: 1.5; } .atp-note > .ni { flex: none; width: 14px; height: 1.5em; margin: 0; } .atp-note > .hx-spinner { flex: none; margin: 0; } .atp-note > span { min-width: 0; overflow-wrap: anywhere; } .atp-note .hx-bouton { margin-top: var(--space-1); } /* Une question fermée, la check-list, les saisies : des groupes serrés. */ .atp .hx-groupe, .atd .hx-groupe, .atd-fenetre .hx-groupe { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); } .atd-fenetre .hx-groupe { gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-4); } .atp .hx-groupe .hx-case, .atd .hx-groupe .hx-case, .atd-fenetre .hx-groupe .hx-case { align-items: flex-start; min-width: 0; line-height: 1.5; } .atp .hx-groupe .hx-case > input, .atd .hx-groupe .hx-case > input, .atd-fenetre .hx-groupe .hx-case > input { margin-top: var(--space-1); } .atp .hx-groupe .hx-case > span, .atd .hx-groupe .hx-case > span, .atd-fenetre .hx-groupe .hx-case > span { min-width: 0; overflow-wrap: anywhere; } .atp-case--vue { color: var(--dim); cursor: default; } .atp-manque { color: var(--dim); font-size: var(--fs-xs); line-height: 1.5; } /* « Plutôt » : une méthode par ligne, lisible en entier dans la colonne. */ .atp-plutot { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .atp-plutot > .hx-bouton { justify-content: flex-start; width: 100%; max-width: 100%; text-align: left; } .atp-plutot > .hx-bouton > .hx-badge { flex: none; margin-left: auto; } /* Le choix de la fiche du PC. */ .atp-fiches { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } /* La phrase épinglée en tête d'une session lancée par un prompt. */ .atp--epingle { gap: var(--space-2); } .atp--epingle .atp-phrase { font-size: var(--fs-sm); padding: var(--space-2) var(--space-3); } /* ── La carte « Démarrage » ─────────────────────────────────────────────────────────────────────────────────────────────────── */ /* Les cinq étapes du parcours : une barre en cinq segments, le texte dit laquelle (« Étape 2 sur 5 : Redémarrer »). */ .atd-pas { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .atd-pas__barre { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); } .atd-pas__barre > span { height: var(--space-1); border-radius: 999px; background: var(--border-strong); } .atd-pas__barre > span.is-fait { background: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); } .atd-pas__barre > span.is-actuel { background: var(--accent); } .atd-pas__texte { margin: 0; color: var(--dim); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .atd-pas__texte > strong { color: var(--text); font-weight: 600; } .atd-gestes { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; } .atd-gestes > .hx-bouton { max-width: 100%; } .atd form.atd-code { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); min-width: 0; } .atd-code > .hx-champ { flex: 1 1 120px; } .atd-code > .hx-aide { flex: 1 1 100%; } input.hx-saisie.atd-code__saisie { font-variant-numeric: tabular-nums; letter-spacing: .12em; } /* ── La fenêtre « Redémarrer sur… » ─────────────────────────────────────────────────────────────────────────────────────────── */ .atd-fenetre { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; margin: 0; } .atd-fenetre > * { margin-top: 0; margin-bottom: 0; } .atd-cepc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: var(--space-4); align-items: start; } .atd-vignette { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-0); } /* Les cibles : une famille par bloc, une cible par ligne (le bouton radio, le nom, ses badges). ⚠ La règle générale du socle pour un