/* La fiche du sujet : colonne droite de 440 px, en-tête collé, blocs séparés d'un filet, champ
   multiligne maison au gabarit du DS, chiffres, documents, journal, actions (lot F). Copie des
   règles « Panneau du sujet » de docs/maquettes/support/maquette.css (lot M, validé le 04/09/2026),
   plus les quelques règles des états que la maquette ne dessinait pas (retrait d'un document,
   déplacement, correction, liens saisis). Jetons du DS uniquement : aucune couleur, aucun rayon,
   aucune ombre écrits en dur. Cette feuille est chargée après app.css : elle remplace les
   squelettes `.sb-panneau` et `.sb-panneau-tete` du socle. */

.sb-panneau { padding: 0; display: flex; flex-direction: column; gap: 0; overflow-y: auto; }
/* L'en-tête colle : le titre du sujet reste lisible quand le journal défile. */
.sb-panneau-tete { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 16px 10px; background: var(--surface-1); border-bottom: 1px solid var(--border-subtle); }
.sb-panneau-tete .ds-subhead { width: 100%; }
/* L'identifiant à recopier, le bouton qui le copie, et celui qui ferme la fiche au bout de la ligne. */
.sb-panneau-id { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.sb-panneau-id .sb-fin { margin-left: auto; display: flex; align-items: center; }
/* Un bloc de la fiche : son en-tête de section, puis son contenu. */
.sb-bloc { padding: 14px 16px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.sb-bloc:first-of-type { border-top: none; }
.sb-bloc > .ds-sechead { margin: 0; }
/* Un libellé de champ suivi d'un groupe de chips : même écart que le DS entre libellé et champ. */
.ds-field__label + .sb-chips { margin-top: 6px; }
/* L'état actuel : un champ multiligne au gabarit du DS, et son compteur sous lui. */
.sb-textarea {
  width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; padding: 9px 12px;
  font: var(--type-body); color: var(--text-1); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--ds-radius-control);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sb-textarea:hover { border-color: var(--border-strong); }
.sb-textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring-shadow); }
.sb-compteur { display: flex; align-items: baseline; gap: 10px; font: 400 12px/1 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.sb-compteur .sb-fin { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* Le texte écrit par quelqu'un d'autre pendant la saisie (409 sur l'état actuel, ADR-0008) :
   montré sous le sien, tel quel, sans rejeu. */
.sb-autre { margin: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--ds-radius-control); background: var(--surface-2); }
.sb-autre-tete { display: flex; align-items: baseline; gap: 8px; font: 600 12px/1.3 var(--font-sans); color: var(--text-1); font-variant-numeric: tabular-nums; }
.sb-autre-texte { margin: 4px 0 0; font: 400 13px/1.45 var(--font-sans); color: var(--text-1); white-space: pre-line; }
/* Les chiffres clés : libellé, valeur alignée à droite, période, et le geste de retrait. */
.sb-chiffres { list-style: none; margin: 0; padding: 0; }
.sb-chiffres > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border-subtle); }
.sb-chiffres > li:first-child { border-top: none; padding-top: 0; }
.sb-chiffre-libelle { font: 400 13px/1.35 var(--font-sans); color: var(--text-1); }
.sb-chiffre-valeur { font: 600 14px/1.35 var(--font-sans); color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-chiffre-valeur .sb-unite { font-weight: 400; color: var(--text-2); }
/* La ligne de contexte d'un chiffre : la période, puis qui l'a posé. */
.sb-ou { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; font: 400 12px/1.35 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* La saisie d'un chiffre : libellé sur toute la largeur, puis valeur, unité, période. */
.sb-chiffre-saisie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.sb-chiffre-saisie > .sb-large { grid-column: 1 / -1; }
/* Les documents : le type en icône, le nom, la taille, puis les gestes. */
.sb-documents { list-style: none; margin: 0; padding: 0; }
.sb-documents > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-subtle); }
.sb-documents > li:first-child { border-top: none; padding-top: 0; }
/* La colonne du milieu doit pouvoir rétrécir, sinon un nom long pousse les gestes hors de la fiche. */
.sb-documents .sb-doc-corps { min-width: 0; }
.sb-doc-icone { display: flex; align-items: center; color: var(--text-3); }
.sb-doc-nom { font: 500 13px/1.3 var(--font-sans); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-doc-detail { margin-top: 2px; font: 400 12px/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.sb-doc-gestes { display: flex; gap: 2px; }
/* Le retrait d'un document se confirme sur toute la largeur de sa ligne, à la place du geste. */
.sb-doc-confirmation { grid-column: 1 / -1; }
/* L'envoi d'un fichier : un bouton du DS et le nom du fichier choisi (« — » tant qu'il n'y en a pas). */
.sb-envoi { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.sb-envoi-choix { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-envoi-choix > .sb-doc-detail { margin-top: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le journal : le plus récent en tête, la saisie en bas. */
.sb-journal { list-style: none; margin: 0; padding: 0; }
.sb-journal > li { padding: 9px 0; border-top: 1px solid var(--border-subtle); }
.sb-journal > li:first-child { border-top: none; padding-top: 0; }
.sb-entree-tete { display: flex; align-items: baseline; gap: 8px; font: 400 12px/1.35 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.sb-entree-tete b { font: 600 12px/1.35 var(--font-sans); color: var(--text-1); }
.sb-entree-tete .sb-fin { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.sb-entree-texte { margin: 3px 0 0; font: 400 13px/1.45 var(--font-sans); color: var(--text-1); white-space: pre-line; }
.sb-entree-liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
/* Un lien du journal porte l'encre d'accent `--accent-ink` (6,50:1 en clair, 6,02:1 en sombre sur --surface-1).
   Redite volontaire de `.sb-lien` (app.css) : sur une balise <a>, `.ds-root a` du DS (0,1,1) l'emporte sur
   `.sb-lien` (0,1,0) et remet le solide, 2,51:1 en sombre ; ces deux règles (0,2,0 et 0,3,0) passent devant. */
.sb-entree-liens .sb-lien { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--accent-ink); }
.sb-entree-liens .sb-lien:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
/* Un lien vers un document qui n'existe plus : le libellé reste, en retrait, sans geste. */
.sb-lien-absent { display: inline-flex; align-items: center; gap: 4px; font: 400 13px/1.4 var(--font-sans); color: var(--text-2); }
/* Une entrée relue : le fait est daté et signé, en encre 2. */
.sb-entree-corrigee { margin: 4px 0 0; font: 400 12px/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* La correction d'une entrée, à la place de son texte. */
.sb-entree-correction { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sb-entree-saisie { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
/* Un lien saisi avec l'entrée : le libellé, l'adresse, et de quoi retirer la ligne. */
.sb-lien-saisie { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 8px; align-items: end; }
.sb-lien-saisie > .ds-iconbtn { margin-bottom: 4px; }
/* Les actions du sujet : les gestes de tous d'abord, ceux de l'éditeur ensuite, séparés d'un filet. */
.sb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-actions-editeur { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
/* La saisie d'un sujet enfant et le déplacement : un formulaire en ligne, à la place du bouton. */
.sb-saisie-enfant, .sb-deplacement { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }