/* Les écrans de la chaîne commune des boîtes (modules/commun/boites/ecrans/) : la boîte, la page
   d'un envoi, ce qui part au contrôle. Les jetons sont ceux de Vision (assets/style.css) ; le violet
   (--ia) marque ce que fait le modèle de langue. Aucun texte n'a de largeur bornée. */

/* La boîte */
.bx-titre { display:flex; align-items:flex-start; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
.bx-titre h1 { min-width:0; }
/* Les puces : chaque variable à la suite des autres, sur autant de lignes qu'il faut. */
.bx-filtrer { margin:6px 0 10px; }
.bx-filtrer > summary { cursor:pointer; font-size:13px; color:var(--primary); padding:4px 0; }
@media (min-width:701px){ .bx-filtrer > summary { display:none; } }
.bx-filtres { display:flex; flex-wrap:wrap; align-items:center; gap:0 22px; }
.bx-filtres .puces { padding:3px 0; gap:5px; }
.bx-filtres .puces .filtre { padding:2px 10px; }
.bx-grille-carte { padding:0 0 6px; }
.bx-avis.sur { background:var(--lo-w); color:var(--lo); }
.bx-avis.hes { background:var(--md-w); color:var(--md); }
.bx-avis.att { background:var(--hi-w); color:var(--hi); }

/* Qui fait une étape : le modèle de langue (violet), une règle, une personne */
.bx-qui { display:inline-block; font-size:11px; font-weight:600; border-radius:999px; padding:1px 8px; white-space:nowrap;
  background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); }
.bx-qui.modele { background:var(--ia-w); color:var(--ia); border-color:var(--ia-l); }
.bx-qui.personne { background:var(--primary-weak); color:var(--primary); border-color:#C9D5F2; }
.bx-par { font-size:12px; color:var(--muted); margin-left:6px; }
.bx-intro { color:var(--ink-soft); font-size:13px; margin:2px 0 12px; }
.bx-h { margin:20px 0 10px; font-size:15px; }

/* La page d'un envoi : le document à gauche, l'indexation à droite */
.bx-deux { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:16px; align-items:start; }
@media (max-width:980px){ .bx-deux { grid-template-columns:minmax(0, 1fr); } }
.bx-doc, .bx-droite { display:flex; flex-direction:column; gap:14px; min-width:0; }
.bx-doc .card, .bx-droite .card { margin:0; }
.bx-entete { width:100%; border-collapse:collapse; font-size:13px; margin:0 0 10px; }
.bx-entete th { text-align:left; color:var(--muted); font-weight:600; padding:3px 12px 3px 0; white-space:nowrap; vertical-align:top; width:1%; }
.bx-entete td { padding:3px 0; overflow-wrap:anywhere; }
.bx-lignes { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.bx-ligne { display:grid; grid-template-columns:24px minmax(0, 1fr) auto; gap:2px 10px; align-items:start; padding:6px 8px 6px 10px; border-radius:8px;
  border-left:3px solid var(--line); background:var(--surface); font-size:13.5px; }
.bx-ligne.part { border-left-color:var(--ia); background:var(--ia-w); }
.bx-ligne.r-formule, .bx-ligne.r-signature, .bx-ligne.r-cite { color:var(--muted); }
.bx-ligne.r-cite { font-style:italic; }
.bx-n { color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums; padding-top:2px; }
.bx-texte { overflow-wrap:anywhere; }
.bx-role { font-size:11px; color:var(--muted); white-space:nowrap; padding-top:2px; }
.bx-dem { grid-column:2 / -1; justify-self:start; background:var(--ia-w); color:var(--ia); }
.bx-legende { font-size:12px; color:var(--muted); margin:10px 0 0; }
.bx-trait { display:inline-block; width:10px; height:10px; border-radius:2px; background:var(--ia); margin-right:6px; vertical-align:-1px; }
.bx-fichier h3 { font-size:13.5px; margin:10px 0 6px; overflow-wrap:anywhere; }
.bx-piece { border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px; margin:0 0 10px; background:var(--surface); }
.bx-piece-tete { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.bx-piece p { margin:6px 0; }
/* Les champs lus d'une pièce : trois colonnes qui reviennent à la ligne, jamais une table plus large que sa carte. */
.bx-champs { width:100%; table-layout:fixed; border-collapse:collapse; font-size:12.5px; margin:6px 0; }
.bx-champs th { text-align:left; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:4px 8px 4px 0; white-space:normal; }
.bx-champs th:nth-child(1) { width:28%; } .bx-champs th:nth-child(2) { width:30%; }
.bx-champs td { padding:4px 8px 4px 0; border-top:1px solid var(--line-soft); vertical-align:top; overflow-wrap:anywhere; white-space:normal; }
.bx-entete td, .bx-entete th { white-space:normal; }
.bx-passage { color:var(--ink-soft); }
.bx-allume { outline:2px solid var(--ia); outline-offset:1px; background:var(--ia-w) !important; }

/* L'indexation */
.bx-index h2 { margin:0 0 4px; }
.bx-var { border-top:1px solid var(--line-soft); padding:12px 0 10px; }
.bx-var-tete { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.bx-var-nom { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.bx-var-qui { margin-left:auto; display:inline-flex; align-items:center; flex-wrap:wrap; gap:2px 0; }
.bx-val { font-size:15px; font-weight:600; margin:4px 0 2px; overflow-wrap:anywhere; }
.bx-val .muted { font-size:13px; font-weight:400; }
.bx-pq { display:grid; grid-template-columns:84px minmax(0, 1fr); gap:2px 10px; font-size:13px; margin:5px 0; align-items:start; }
.bx-l { font-size:11px; font-weight:600; color:var(--muted); padding-top:2px; }
.bx-v { min-width:0; overflow-wrap:anywhere; }
.bx-dit { font-size:13px; margin:6px 0 2px; color:var(--ink-soft); overflow-wrap:anywhere; }
.bx-src { font:inherit; text-align:left; border:0; background:none; padding:0; color:var(--primary); cursor:pointer; overflow-wrap:anywhere; }
.bx-src:hover { text-decoration:underline; }
.bx-autre { color:var(--md); }
.bx-ret b { color:var(--lo); }
.bx-sus b { color:var(--md); }
.bx-ecart { color:var(--hi); }
.bx-autres { list-style:none; margin:4px 0; padding:0 0 0 94px; display:flex; flex-direction:column; gap:4px; font-size:13px; }
.bx-autres li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
@media (max-width:600px){ .bx-pq { grid-template-columns:minmax(0, 1fr); } .bx-autres { padding-left:0; } }

/* Corriger */
.bx-corr { margin:6px 0 0; }
.bx-corr > summary { display:inline-block; list-style:none; cursor:pointer; font-size:12px; color:var(--primary); border:1px solid var(--line); border-radius:8px; padding:3px 10px; background:var(--surface); }
.bx-corr > summary::-webkit-details-marker { display:none; }
.bx-corr[open] > summary { background:var(--primary-weak); border-color:#C9D5F2; }
.bx-corr form { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:flex-end; margin:8px 0 4px; padding:10px 12px; border:1px solid var(--line-soft); border-radius:10px; background:var(--bg); }
.bx-corr label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--ink-soft); min-width:0; flex:1 1 200px; }
.bx-corr label.bx-large { flex:1 1 100%; }
.bx-corr select, .bx-corr input[type=text] { font:inherit; font-size:13px; border:1px solid var(--line); border-radius:8px; padding:5px 8px; background:var(--surface); color:var(--ink); width:100%; }
.bx-msg { flex:1 1 100%; margin:0; font-size:12.5px; color:var(--hi); }
.bx-msg:empty { display:none; }
.bx-aide { flex:1 1 100%; margin:0; font-size:12px; color:var(--muted); }

/* Où le modèle intervient */
.bx-ligne-p { display:block; }
.bx-ligne-p + .bx-ligne-p { margin-top:3px; }
.bx-etapes tr:has(.bx-qui.modele) > td { background:var(--ia-w); }
.bx-etapes tr:has(.bx-qui.modele) > td:first-child { box-shadow:inset 3px 0 0 var(--ia); }
.bx-appel h4 { text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--ink-soft); }
.bx-appel-2 h4 { text-transform:uppercase; letter-spacing:.04em; font-size:12px; color:var(--muted); }
.bx-appel code { font-family:var(--mono); font-size:12px; color:var(--ia); }
.bx-appel { border-color:var(--ia-l); margin:0 0 12px; }
.bx-appel h3 { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 8px; font-size:14.5px; }
.bx-appel h4 { margin:8px 0 4px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.bx-appel ul { margin:0; padding-left:18px; font-size:13px; }
.bx-appel-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:4px 18px; }
.bx-brut { margin:8px 0 0; }
.bx-brut > summary { cursor:pointer; font-size:12.5px; color:var(--primary); }
.bx-json { white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--mono); font-size:11.5px; background:var(--bg); border:1px solid var(--line-soft); border-radius:8px; padding:8px 10px; margin:6px 0 0; }