/* Docufi : menu à gauche, tableau de la saison par étape, dossier en trois colonnes
   (documents · aperçu · lecture par l'IA). Espacements sur une échelle de 4 : 4 · 8 · 12 · 16 · 20 · 24 · 32. */

html { -webkit-text-size-adjust: 100% }
body { margin: 0 }
[hidden] { display: none !important }
img { max-width: 100% }
* { box-sizing: border-box }

:root {
  --bg: #F3F5F8; --surface: #FFFFFF; --sunk: #F7F9FB; --ink: #14202E; --muted: #556172; --line: #D6DCE5; --line-soft: #E7EBF1;
  --accent: #2F5BEA; --accent-ink: #FFFFFF; --accent-soft: #EAF0FB; --accent-txt: #1E3A8A; --accent-line: #B9CBF2;
  --side: #0F1B2D; --side-2: #1B2B44; --side-3: #2A3D5C; --side-line: #223452; --side-ink: #C9D3E0; --side-muted: #9AA8BA;
  --folder: #FBEFC9; --folder-ink: #5E440C;
  --ok: #14653F; --ok-soft: #E5F4EC; --warn: #7A4100; --warn-soft: #FFF1DB; --warn-line: #F3D9A8; --err: #B42318; --err-soft: #FDECEA;
  --e-recu: #64748B; --e-manquants: #C77700; --e-verifier: #6D4FD8; --e-pret: #1F8A57; --e-profile: #2F5BEA; --e-transmis: #14653F;
  --f-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --r: 10px; --r-lg: 14px; --r-sm: 8px; --champ: 36px;
  --ombre: 0 1px 2px rgba(15, 27, 45, .05);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0C131B; --surface: #141E2A; --sunk: #101923; --ink: #E3E9F1; --muted: #9AA8BA; --line: #2A3747; --line-soft: #1E2A38;
  --accent: #7C9CF5; --accent-ink: #0B1220; --accent-soft: #1C2A48; --accent-txt: #B8C9FA; --accent-line: #34508F;
  --side: #08101A; --side-2: #142236; --side-3: #22385A; --side-line: #1A2A40;
  --folder: #4A3D14; --folder-ink: #F5E3A8;
  --ok: #5FD39A; --ok-soft: #12321F; --warn: #F0B45A; --warn-soft: #33250F; --warn-line: #5A4317; --err: #F28B82; --err-soft: #3A1716;
  --e-recu: #94A3B8; --e-manquants: #F0A23A; --e-verifier: #A38BFA; --e-pret: #4CC38A; --e-profile: #7C9CF5; --e-transmis: #5FD39A;
  --ombre: none; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0C131B; --surface: #141E2A; --sunk: #101923; --ink: #E3E9F1; --muted: #9AA8BA; --line: #2A3747; --line-soft: #1E2A38;
  --accent: #7C9CF5; --accent-ink: #0B1220; --accent-soft: #1C2A48; --accent-txt: #B8C9FA; --accent-line: #34508F;
  --side: #08101A; --side-2: #142236; --side-3: #22385A; --side-line: #1A2A40;
  --folder: #4A3D14; --folder-ink: #F5E3A8;
  --ok: #5FD39A; --ok-soft: #12321F; --warn: #F0B45A; --warn-soft: #33250F; --warn-line: #5A4317; --err: #F28B82; --err-soft: #3A1716;
  --e-recu: #94A3B8; --e-manquants: #F0A23A; --e-verifier: #A38BFA; --e-pret: #4CC38A; --e-profile: #7C9CF5; --e-transmis: #5FD39A;
  --ombre: none; color-scheme: dark }

body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 14px; line-height: 1.45 }
h1, h2, h3, h4 { font-family: var(--f-display); text-wrap: balance; margin: 0; line-height: 1.25 }
p { margin: 0 }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums }
.hint { font-size: 12px; color: var(--muted); font-weight: 400 }
.nowrap { white-space: nowrap }
.break { word-break: break-all }
.small-mono { font-family: var(--f-mono); font-size: 12px }
.mr-auto { margin-right: auto }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.row.centre { justify-content: center }
.num { text-align: right }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.ico { flex: none }
.empty { padding: 20px 16px; color: var(--muted) }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--champ); border: 1px solid var(--line); background: var(--surface);
  padding: 0 14px; border-radius: var(--r-sm); cursor: pointer; font-weight: 500; white-space: nowrap; transition: border-color .12s, background .12s }
.btn:hover { border-color: var(--accent) }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600 }
.btn.primary:hover { filter: brightness(1.08) }
.btn.danger { color: var(--err); border-color: var(--err) }
.btn.danger.armed { background: var(--err); color: var(--surface) }
.btn.small { min-height: 30px; padding: 0 10px; font-size: 13px }
.btn.ghost { border-color: transparent; background: none }
.btn.ghost:hover { background: var(--surface); border-color: var(--line) }
.btn:disabled { opacity: .5; cursor: not-allowed }
.btn-icone { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); cursor: pointer; flex: none }
.btn-icone:hover { border-color: var(--accent) }
.btn-icone:disabled { opacity: .45; cursor: default }
.btn-icone.sombre { background: none; border-color: transparent; color: var(--side-muted) }
.btn-icone.sombre:hover { background: var(--side-2); color: #fff; border-color: var(--side-3) }
.linkbtn { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; font-size: 13px }
.linkbtn:disabled { color: var(--muted); text-decoration: none; cursor: default }
.select-doux { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 13px; max-width: 220px }

/* ---------- Coquille : menu et zone principale ---------- */
.shell { display: flex; min-height: 100vh }
.side { flex: 0 0 236px; background: var(--side); color: var(--side-ink); padding: 20px 12px 16px; display: flex; flex-direction: column; gap: 24px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto }
.marque { display: flex; align-items: center; gap: 10px; padding: 0 8px }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex: none }
.marque-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25 }
.marque-txt b { color: #fff; font-size: 16px; font-family: var(--f-display) }
.marque-txt small { color: var(--side-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.nav { display: flex; flex-direction: column; gap: 2px }
.nav-lien { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; min-height: 40px; border-radius: var(--r-sm); border: 0; background: none; color: var(--side-ink); cursor: pointer; text-align: left; text-decoration: none }
.nav-lien:hover { background: var(--side-2); color: #fff }
.nav-lien[aria-current="true"] { background: var(--side-2); color: #fff; font-weight: 500; box-shadow: inset 3px 0 0 var(--accent) }
.nav-txt { flex: 1 }
.compte { font-family: var(--f-mono); font-size: 12px; color: var(--side-muted); padding: 0 6px; border-radius: 10px }
.compte:empty { display: none }
.compte.vif { background: var(--side-3); color: #fff }
.side-bas { margin-top: auto; display: grid; gap: 14px; padding: 14px 8px 0; border-top: 1px solid var(--side-line) }
.annee { display: grid; gap: 4px; font-size: 12px; color: var(--side-muted) }
.annee select { height: 36px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--side-3); background: var(--side-2); color: #fff; font-size: 14px }
.moi { display: flex; align-items: center; gap: 10px }
.moi-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25 }
.moi-txt b { color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.moi-txt small { color: var(--side-muted); font-size: 12px }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--side-3); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none }
.avatar.petit { width: 24px; height: 24px; font-size: 11px; background: var(--accent-soft); color: var(--accent-txt) }

.principal { flex: 1; min-width: 0; padding: 20px 28px 48px; display: flex; flex-direction: column; gap: 20px }
.barre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px }
.barre-titre { margin-right: auto; display: grid; gap: 2px; min-width: 0 }
.barre-titre h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em }
.barre-titre p { color: var(--muted) }
.retour { padding-left: 8px; justify-self: start }
.recherche { flex: 1 1 300px; max-width: 460px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; min-height: 42px; color: var(--muted) }
.recherche:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.recherche input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); height: 40px }
.recherche kbd { font-family: var(--f-mono); font-size: 12px; border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; line-height: 18px }
.barre > .btn { min-height: 42px }

/* Carte blanche générique */
.panneau { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--ombre); min-width: 0 }
.bloc-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 24px }
.bloc-tete h2, .bloc-tete h3 { font-size: 15px; font-weight: 600; flex: 1 }
.bloc-tete .ico { color: var(--accent) }

/* ---------- Tableau de la saison ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 2px; text-align: left; cursor: pointer; box-shadow: var(--ombre) }
.kpi:hover { border-color: var(--accent) }
.kpi-l { font-size: 13px; color: var(--muted) }
.kpi-v { font-family: var(--f-mono); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2 }
.kpi-d { font-size: 12px; color: var(--muted) }
.tableau { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start }
.colonnes-zone { flex: 999 1 640px; min-width: 0; display: grid; gap: 12px }
.outils-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.colonnes-defile { overflow-x: auto; padding-bottom: 4px }
.colonnes { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 12px; min-width: 796px; align-items: start }
.colonne { background: color-mix(in srgb, var(--line-soft) 70%, var(--bg)); border-radius: var(--r-lg); padding: 10px; display: grid; gap: 8px }
.colonne-tete { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px }
.colonne-tete h2 { font-size: 14px; font-weight: 600; flex: 1 }
.colonne-tete .mono { font-size: 13px; color: var(--muted) }
.pastille { width: 10px; height: 10px; border-radius: 50%; flex: none }
.colonne-vide { padding: 12px 4px; color: var(--muted); font-size: 13px }
.colonne-plus { justify-self: start; padding: 2px 4px }
.carte { display: grid; gap: 6px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; cursor: pointer; box-shadow: var(--ombre); width: 100%; min-width: 0 }
.carte:hover { border-color: var(--accent) }
.carte-haut { display: flex; align-items: center; gap: 8px; min-height: 24px }
.carte-date { flex: 1; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.carte-nom { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere }
.carte-conj { font-size: 12px; color: var(--muted); margin-top: -4px }
.carte-docs { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted) }
.jauge { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--line-soft); overflow: hidden; color: var(--e-recu) }
.jauge::-webkit-progress-bar { background: var(--line-soft) }
.jauge::-webkit-progress-value { background: currentColor }
.jauge::-moz-progress-bar { background: currentColor }
.j-recu { color: var(--e-recu) } .j-manquants { color: var(--e-manquants) } .j-verifier { color: var(--e-verifier) } .j-pret { color: var(--e-pret) }
.puce { justify-self: start; max-width: 100%; font-size: 12px; font-weight: 500; border-radius: 6px; padding: 2px 8px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.puce.avert { background: var(--warn-soft); color: var(--warn) }
.puce.err { background: var(--err-soft); color: var(--err) }
.puce.info { background: var(--accent-soft); color: var(--accent-txt) }
.puce.ok { background: var(--ok-soft); color: var(--ok) }
.puce.neutre { background: var(--sunk); color: var(--muted); border: 1px solid var(--line-soft) }
.e-recu { background: var(--e-recu) } .e-manquants { background: var(--e-manquants) } .e-verifier { background: var(--e-verifier) }
.e-pret { background: var(--e-pret) } .e-profile { background: var(--e-profile) } .e-transmis { background: var(--e-transmis) }
.assistant { flex: 1 1 280px; display: grid; gap: 12px; align-content: start }
.assistant .bloc-tete { margin-bottom: 0 }
.sugg { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 4px }
.sugg-type { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase }
.sugg-type.avert { color: var(--warn) } .sugg-type.err { color: var(--err) } .sugg-type.info { color: var(--accent-txt) } .sugg-type.ok { color: var(--ok) } .sugg-type.neutre { color: var(--muted) }
.sugg-txt { font-size: 13px; color: var(--muted) }
.sugg .row { margin-top: 6px }

/* Bouton segmenté (filtres, Oui / Non) */
.seg { display: inline-flex; justify-self: start; min-height: var(--champ); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--sunk) }
.seg button { border: 0; background: none; padding: 0 14px; cursor: pointer; color: var(--muted) }
.seg button + button { border-left: 1px solid var(--line) }
.seg button:hover { color: var(--ink) }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink) }
.filtre-resp { min-height: 34px; background: var(--surface) }
.filtre-resp button { font-size: 13px; padding: 0 12px }
.filtre-resp button[aria-pressed="true"] { background: var(--ink); color: var(--surface) }

/* ---------- Répertoire ---------- */
.repertoire { padding: 0; overflow: hidden }
.rep-tete { padding: 14px 16px; display: grid; gap: 12px; border-bottom: 1px solid var(--line) }
.rep-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.rep-outils .btn { margin-left: auto }
.stats { display: flex; gap: 8px; flex-wrap: wrap }
.stat { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px; cursor: pointer; display: flex; align-items: baseline; gap: 6px; min-height: 32px }
.stat b { font-family: var(--f-mono); font-size: 14px; font-variant-numeric: tabular-nums }
.stat span { color: var(--muted); font-size: 13px }
.stat:hover { border-color: var(--accent) }
.stat[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft) }
.stat[aria-pressed="true"] span { color: var(--accent-txt) }
.stat.alert b { color: var(--err) }
.list { list-style: none; margin: 0; padding: 0 }
.item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 210px 10px; gap: 4px 14px; align-items: center; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; width: 100%; background: none; text-align: left; min-height: 56px }
.list li:last-child .item { border-bottom: 0 }
.item:hover { background: var(--sunk) }
.item .who { display: grid; min-width: 0; line-height: 1.3 }
.item .who b { font-weight: 600; overflow-wrap: anywhere }
.item .who small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.item-etape { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.item-info { font-size: 12px; color: var(--muted); text-align: right }
.tab { justify-self: start; font-family: var(--f-mono); font-size: 12px; font-weight: 600; line-height: 20px; background: var(--folder); color: var(--folder-ink); padding: 0 7px; border-radius: 6px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tab.vide { background: none; color: var(--muted); border: 1px dashed var(--line); font-weight: 400 }
.tab.grand { font-size: 15px; line-height: 30px; padding: 0 12px; max-width: none; border-radius: 8px }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; justify-self: end }
.dot.err { background: var(--err) } .dot.warn { background: var(--e-manquants) } .dot.ok { background: var(--e-pret) }
/* Sélection en lot */
.selbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--err); background: var(--err-soft) }
.selbar .tout { display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; cursor: pointer }
.selbar .btn { margin-left: auto }
.item.choix { grid-template-columns: 18px 64px minmax(0, 1fr) auto 210px 10px }
.item.choix::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--muted); border-radius: 4px }
.item.choix[aria-pressed="true"] { background: var(--err-soft) }
.item.choix[aria-pressed="true"]::before { background: var(--err); border-color: var(--err); box-shadow: inset 0 0 0 2px var(--surface) }

/* ---------- Puces ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-body); font-size: 12px; line-height: 20px; padding: 0 9px; border-radius: 999px;
  background: var(--sunk); border: 1px solid var(--line); color: var(--muted); white-space: nowrap }
.chip.e-recu, .chip.e-manquants, .chip.e-verifier, .chip.e-pret, .chip.e-profile, .chip.e-transmis { background: var(--sunk) }
.chip.e-recu { color: var(--muted) }
.chip.e-manquants { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft) }
.chip.e-verifier { color: var(--e-verifier); border-color: color-mix(in srgb, var(--e-verifier) 40%, transparent) }
.chip.e-pret, .chip.e-transmis { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft) }
.chip.e-profile { color: var(--accent-txt); border-color: var(--accent-line); background: var(--accent-soft) }
.chip.s-analyse, .chip.s-pret { color: var(--accent-txt); border-color: var(--accent-line) }
.chip.s-averifier { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft) }
.chip.s-prepare, .chip.s-revise { color: var(--ok); border-color: var(--ok) }
.chip.s-transmis { color: var(--ok); background: var(--ok-soft); border-color: var(--ok) }
.chip.new { color: var(--accent-txt); border-color: var(--accent-line) }
.chip.lecture { color: var(--accent-txt); border-color: var(--accent-line); background: var(--accent-soft) }
.chip.ia-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft) }
.chip.avert { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft) }
.chip.ia-err, .ia-err { color: var(--err); border-color: var(--err) }
.pill { display: inline-block; font-size: 12px; line-height: 20px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap }
.pill.off { color: var(--muted) }
.pill.on { color: var(--ok); border-color: var(--ok) }
.verif { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ok); font-weight: 500 }

/* ---------- Dossier ---------- */
.dossier { display: grid; gap: 16px }
.dos-tete { display: grid; gap: 16px; padding: 18px 20px }
.dt-ligne { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center }
.dt-titre { flex: 1 1 320px; min-width: 0; display: grid; gap: 2px }
.dt-titre h2 { font-size: 22px; font-weight: 600 }
.meta { color: var(--muted); font-size: 13px }
.dt-actions { display: flex; flex-wrap: wrap; gap: 8px }
.dt-ligne2 { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; flex: 1 1 520px }
.etapes li { display: grid; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0 }
.etapes li > span:last-child { line-height: 1.3 }
.barre-etape { height: 6px; border-radius: 3px; background: var(--line-soft) }
.etapes li.fait .barre-etape { background: var(--e-pret) }
.etapes li.courant .barre-etape { background: var(--accent) }
.etapes li.attente .barre-etape { background: var(--e-manquants) }
.etapes li.fait, .etapes li.courant, .etapes li.attente { color: var(--ink) }
.etapes li.courant, .etapes li.attente { font-weight: 600 }
.dt-champs { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; color: var(--muted) }
.dt-champs label { display: flex; gap: 8px; align-items: center }
.dt-champs select { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk); font-size: 13px; color: var(--ink); max-width: 200px }
.prep { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunk) }

.dos-colonnes { display: grid; grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) minmax(300px, 360px); gap: 16px; align-items: start }
.dos-docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start }
.dos-docs .bloc-tete { margin-bottom: 0 }
.groupe { display: grid; gap: 2px }
.groupe-nom { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 4px 4px }
.groupe.alerte .groupe-nom { color: var(--err) }
.doc-ligne { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid transparent; background: none; cursor: pointer; text-align: left }
.doc-ligne:hover { background: var(--sunk) }
.doc-ligne[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent-line) }
.doc-txt { display: grid; min-width: 0; line-height: 1.3 }
.doc-txt small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.point { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--e-recu) }
.point.ok { background: var(--e-pret) } .point.avert { background: var(--e-manquants) } .point.err { background: var(--err) }
.point.info, .point.lecture { background: var(--accent) }
.point.lecture { animation: pulse 1.2s ease-in-out infinite }
@keyframes pulse { 50% { opacity: .3 } }
.scan-etat { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 4px; justify-items: start; font-size: 13px }
.scan-etat.ok { border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: var(--ok-soft) }
.scan-etat.err { border-color: color-mix(in srgb, var(--err) 35%, transparent); background: var(--err-soft) }
.scan-etat.neutre { border-color: var(--line); background: var(--sunk) }
.scan-titre { display: flex; align-items: center; gap: 8px; font-weight: 600 }
.scan-etat.info .scan-titre { color: var(--accent-txt) } .scan-etat.ok .scan-titre { color: var(--ok) } .scan-etat.err .scan-titre { color: var(--err) }
.scan-txt { color: var(--ink) }
.check.scan-hors { flex-wrap: wrap; align-items: center }
.check.scan-hors .btn { background: var(--surface) }
.manquants { border: 1px solid var(--warn-line); background: var(--warn-soft); border-radius: var(--r); padding: 12px; display: grid; gap: 8px; justify-items: start }
.manquants.ok { border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: var(--ok-soft) }
.manq-titre { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--warn) }
.manquants.ok .manq-titre { color: var(--ok) }
.manq-ligne { display: grid; gap: 2px; width: 100%; font-size: 13px; color: var(--ink) }
.manq-ligne small { color: var(--muted) }
.manq-ligne .linkbtn { justify-self: start; font-size: 12px; color: var(--muted) }
.manq-ligne.barre > span { text-decoration: line-through; color: var(--muted) }
.manq-ignores { width: 100%; font-size: 13px }
.manq-ignores summary { cursor: pointer; color: var(--muted); font-size: 12px }
.manq-ignores[open] { display: grid; gap: 8px }
.manquants .btn { background: var(--surface); white-space: normal; max-width: 100%; text-align: left }

.dos-apercu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; padding: 12px }
.apercu-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.apercu-outils h3 { font-size: 15px; font-weight: 600; flex: 1 1 180px; min-width: 0 }
.apercu-scene { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r); height: min(78vh, 900px); overflow: auto; display: grid; place-items: start center }
.apercu-scene iframe { width: 100%; height: 100%; border: 0; background: #fff }
.apercu-scene img { max-width: 100%; height: auto; display: block; background: #fff; cursor: zoom-in }
.apercu-scene img.zoom { max-width: none; cursor: zoom-out }
.apercu-vide { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); text-align: center; padding: 24px; border: 1px dashed var(--line); border-radius: var(--r) }
.apercu-vide p { max-width: 300px }

.dos-droite { display: grid; gap: 16px; align-content: start; min-width: 0 }
.lecture { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px }
.lecture .bloc-tete { margin-bottom: 0 }
.lu-feuillet { display: grid; gap: 4px }
.lu-titre { font-size: 13px; font-weight: 600 }
.lu-case { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--sunk); border: 1px solid var(--line-soft); font-size: 13px }
.lu-case > span:first-child { display: grid; min-width: 0 }
.lu-case .mono { font-weight: 600; white-space: nowrap }
.lu-case small { font-size: 12px; color: var(--warn) }
.lu-case.doute { background: var(--warn-soft); border-color: var(--warn-line) }
.resume { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px }
.compar th, .compar td { padding: 6px 10px }

.dos-fiche { display: grid; gap: 28px; padding: 20px 24px 24px }
.section { display: grid; gap: 14px }
.section > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); display: flex; align-items: center; gap: 10px; font-weight: 600 }
.section > h3::after { content: ""; flex: 1; height: 1px; background: var(--line) }
.sous-titre { font-size: 13px; font-weight: 600; color: var(--ink) }

/* Champs */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 12px }
.field { display: grid; gap: 4px; min-width: 0; align-content: start }
.field > label, .lbl { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 16px }
.field input:not([type="checkbox"]):not([type="radio"]), .field select { width: 100%; height: var(--champ); padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk); min-width: 0 }
.field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk); resize: vertical; min-height: 60px; line-height: 1.5 }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--surface); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft) }
.field.wide { grid-column: 1 / -1 }
.valeur { min-height: var(--champ); display: flex; align-items: center }
.field label:has(> input[type="checkbox"]) { display: flex; gap: 8px; align-items: flex-start; color: var(--ink); font-size: 13px; font-weight: 400; line-height: 1.4; cursor: pointer }
.field label:has(> input[type="checkbox"]) input { margin: 2px 0 0; flex: none; width: 15px; height: 15px; accent-color: var(--accent) }
.cases-a-cocher { display: grid; gap: 8px }
.lecture .grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)) }

/* Champ avec bouton collé (mot de passe + Générer, nom du PC + Créer) */
.input-btn { display: flex; gap: 6px; align-items: center; min-width: 0 }
.input-btn input { flex: 1; min-width: 0; height: var(--champ); padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk) }
.input-btn input:focus { background: var(--surface); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft) }

/* Ménage : grilles à colonnes fixes pour que l'adresse se lise d'un coup d'œil */
.grid-menage { display: grid; gap: 12px }
.ligne-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.ligne-adresse { display: grid; grid-template-columns: 110px minmax(0, 1fr) 100px; gap: 12px }
.ligne-ville { display: grid; grid-template-columns: minmax(0, 1fr) 120px 130px; gap: 12px }

/* ---------- Vérifications ---------- */
.verifs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.verifs li { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--line-soft) }
.verifs li:last-child { border-bottom: 0 }
.verifs li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px) }
.verifs li.err { background: var(--err-soft); color: var(--err) } .verifs li.err::before { background: var(--err) }
.verifs li.warn { color: var(--ink) } .verifs li.warn::before { background: var(--e-manquants) }
.verifs li.ok { color: var(--ok) } .verifs li.ok::before { background: var(--ok) }
.verifs details summary { padding: 8px 12px 8px 30px; cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 500; list-style: none }
.verifs details summary::-webkit-details-marker { display: none }
.verifs details[open] summary { display: none }
.verifs details { border-top: 1px solid var(--line-soft) }

.checks { display: grid; gap: 6px }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-radius: var(--r-sm); font-size: 13px }
.check.err { background: var(--err-soft); color: var(--err) }
.check.warn { background: var(--warn-soft); color: var(--warn) }
.check.ok { background: var(--ok-soft); color: var(--ok) }
.check b { font-weight: 600 }
details.check { display: block }
details.check summary { cursor: pointer }
.liste-couples { margin: 8px 0 0; padding-left: 18px; max-height: 220px; overflow-y: auto; color: var(--ink); font-size: 12px }

/* ---------- Personnes ---------- */
.members { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px }
.member { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 14px; background: var(--sunk); min-width: 0; align-content: start }
.member .field input:not([type="checkbox"]), .member .field select, .member .field textarea, .member .seg { background: var(--surface) }
.member-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.member-head h4 { margin-right: auto; font-size: 16px }
.annual { border-top: 1px dashed var(--line); padding-top: 14px; display: grid; gap: 12px }
.months { display: flex; gap: 12px; flex-wrap: wrap; align-items: end }
.months .field { width: 96px }
.link-slot { border: 1px dashed var(--line); border-radius: var(--r); padding: 24px; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; color: var(--muted) }

/* ---------- Tableaux ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r) }
table { border-collapse: collapse; width: 100%; font-size: 13px }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle }
th { font-size: 12px; color: var(--muted); font-weight: 500; background: var(--sunk); white-space: nowrap }
th.num, td.num { text-align: right }
td input, td select { width: 100%; min-width: 90px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface) }
tr:last-child td { border-bottom: 0 }
td.actions, .actions { white-space: nowrap }
td.actions { text-align: right }
td.actions > * + * { margin-left: 6px }

/* ---------- Dépôt de documents ---------- */
.drop { border: 2px dashed var(--line); border-radius: var(--r); padding: 16px; text-align: center; color: var(--muted); display: grid; gap: 8px; justify-items: center }
.drop strong { color: var(--ink); font-weight: 600 }
.drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-txt) }
.upload-status { font-size: 13px; color: var(--muted) }
.btn.photo { display: none }
@media (pointer: coarse) { .btn.photo { display: inline-flex } }

/* Zone de suppression en bas du dossier */
.zone-danger { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between }

/* ---------- Fenêtres ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(8, 16, 26, .55); display: grid; place-items: center; z-index: 50;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); width: min(760px, 100%); max-height: 100%; overflow-y: auto;
  padding: 24px 24px 0; display: grid; gap: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25) }
.modal.large { width: min(960px, 100%) }
.modal h2 { font-size: 20px }
.modal > p:not(.check) { color: var(--muted) }
/* Pied toujours visible, même quand le contenu défile */
.modal-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 0 -24px; padding: 12px 24px 16px;
  background: var(--surface); border-top: 1px solid var(--line-soft); z-index: 1 }
.bloc { display: grid; gap: 12px }
.bloc-import { display: grid; gap: 16px }
.bloc + .bloc { border-top: 1px solid var(--line-soft); padding-top: 16px }
.bloc > h3 { font-size: 15px }
.pick { display: grid; gap: 6px; max-height: 260px; overflow-y: auto }
.pick button { text-align: left; border: 1px solid var(--line); background: var(--sunk); border-radius: var(--r-sm); padding: 8px 12px; cursor: pointer; line-height: 1.4 }
.pick button:hover { border-color: var(--accent) }
.pick button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft) }
.log { list-style: none; margin: 0; padding: 0; display: grid; font-size: 13px }
.log li { display: grid; grid-template-columns: 170px 150px minmax(0, 1fr); gap: 12px; border-bottom: 1px solid var(--line-soft); padding: 8px 0 }
.log .mono { color: var(--muted); white-space: nowrap; font-size: 12px; font-family: var(--f-body); font-variant-numeric: tabular-nums }
.secret { font-family: var(--f-mono); font-size: 18px; letter-spacing: .06em; background: var(--sunk); border: 1px dashed var(--line); border-radius: var(--r); padding: 12px; text-align: center; user-select: all; word-break: break-all }
.users td { white-space: nowrap }
.users td select { min-width: 140px }
.users tr.edition td { background: var(--sunk); white-space: normal }
.users tr.edition .input-btn { margin-bottom: 6px; max-width: 640px }
.mdp-grid { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)) }

/* ---------- Visionneuse ---------- */
.modal.viewer { width: min(1320px, 100%) }
.viewer-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.viewer-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start }
.stage { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r); overflow: auto; height: 72vh; display: grid; place-items: start center; padding: 8px }
.stage iframe { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 4px }
.stage img { max-width: 100%; height: auto; display: block; background: #fff; cursor: zoom-in }
.stage img.zoom { max-width: none; cursor: zoom-out }
.viewer-side { display: grid; gap: 12px; max-height: 72vh; overflow-y: auto; padding-right: 4px; align-content: start }
.feuillets { display: grid; gap: 12px }
.feuillet { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin: 0; display: grid; gap: 10px; background: var(--sunk); min-width: 0 }
.feuillet legend { font-size: 12px; font-weight: 600; padding: 0 4px }
.feuillet .field input, .feuillet .field select { background: var(--surface) }
.grid2 { display: grid; grid-template-columns: 1fr 90px; gap: 10px }
.grid2 .wide { grid-column: 1 / -1 }
table.cases { background: var(--surface); border-radius: var(--r-sm) }
table.cases th { background: none; padding: 4px }
table.cases td { padding: 3px 4px; border-bottom: 0 }
table.cases td input { min-width: 0; height: 28px; padding: 0 6px }
table.cases td:first-child { width: 58px }
table.cases td:nth-child(3) { width: 112px }
table.cases td:last-child { width: 34px }
table.cases .btn.small { min-height: 26px; padding: 0 8px }
tr.doute td, tr.doute input { background: var(--warn-soft) }
tr.doute input.num { border-color: var(--warn); color: var(--warn); font-weight: 600 }

/* Feuille de saisie */
.modal.saisie-modal { width: min(900px, 100%) }
.saisie { display: grid; gap: 20px }
.saisie-personne { display: grid; gap: 12px }
.saisie-personne h3 { font-size: 17px; border-bottom: 2px solid var(--ink); padding-bottom: 4px }
.saisie-feuillet h4 { margin: 0 0 6px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.saisie-feuillet table { border: 1px solid var(--line) }
.saisie-feuillet td:first-child { width: 70px }
.saisie-feuillet td:last-child { width: 140px }

/* ---------- Connexion ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--side) }
.auth-box { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px; display: grid; gap: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3) }
.auth-box h1 { font-size: 24px }
.auth-box > p { color: var(--muted) }
.auth-box > p b { color: var(--ink) }
.auth-box .field input { height: 44px; font-size: 16px }
.auth-box .btn.primary { min-height: 44px; font-size: 15px }
.auth-liens { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px }
.steps-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink) }
.code-input { font-family: var(--f-mono); font-size: 24px !important; letter-spacing: .35em; text-align: center; height: 52px !important }
#app > .empty { padding: 32px }

/* ---------- Messages ---------- */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(20px, env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: var(--r); z-index: 80; max-width: calc(100% - 32px); box-shadow: 0 6px 20px rgba(0,0,0,.2) }
.toast.err { background: var(--err); color: #fff }

/* ---------- Écrans moyens ---------- */
@media (max-width: 1440px) {
  .dos-colonnes { grid-template-columns: minmax(240px, 270px) minmax(0, 1fr) minmax(280px, 330px) }
}
@media (max-width: 1280px) {
  .dos-colonnes { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) }
  .dos-droite { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) }
  .ligne-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .item { grid-template-columns: 64px minmax(0, 1fr) auto 10px }
  .item.choix { grid-template-columns: 18px 64px minmax(0, 1fr) auto 10px }
  .item-info { display: none }
}
@media (max-width: 1100px) {
  .side { flex-basis: 76px; padding: 16px 10px }
  .marque-txt, .nav-txt, .side-bas .annee span, .moi-txt { display: none }
  .marque { padding: 0; justify-content: center }
  .nav-lien { justify-content: center; position: relative; padding: 10px 0 }
  .compte { position: absolute; top: 2px; right: 6px; font-size: 11px; padding: 0 4px }
  .side-bas { padding: 12px 0 0 }
  .annee select { padding: 0 4px; font-size: 12px }
  .moi { flex-direction: column; gap: 6px }
  .dos-colonnes { grid-template-columns: minmax(0, 1fr) }
  .apercu-scene { height: 70vh }
  .viewer-body { grid-template-columns: minmax(0, 1fr) }
  .stage { height: 55vh }
  .viewer-side { max-height: none; overflow: visible }
}

/* ---------- Téléphone et petite tablette ---------- */
@media (max-width: 760px) {
  .shell { flex-direction: column }
  .side { position: sticky; top: 0; z-index: 20; height: auto; flex: none; flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; overflow-x: auto; overflow-y: hidden }
  .nav { flex-direction: row; gap: 2px }
  .nav-lien { width: 44px; height: 44px; min-height: 0; padding: 0 }
  .nav-lien[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--accent) }
  .side-bas { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; align-items: center; gap: 6px }
  .moi { flex-direction: row }
  .moi .avatar { display: none }
  .principal { padding: 14px 16px 40px; gap: 14px }
  .barre-titre { flex-basis: 100% }
  .barre-titre h1 { font-size: 20px }
  .recherche { max-width: none }
  .barre > .btn { flex: 1 1 auto }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .kpi { padding: 12px }
  .kpi-v { font-size: 22px }
  .colonnes { min-width: 0; grid-template-columns: minmax(0, 1fr) }
  .item { grid-template-columns: 56px minmax(0, 1fr) 10px; padding: 10px 12px }
  .item.choix { grid-template-columns: 18px 56px minmax(0, 1fr) 10px }
  .item-etape { grid-column: 2 / -1; justify-content: flex-start }
  .item .dot { grid-row: 1; grid-column: -2 }
  .item.choix .item-etape { grid-column: 3 / -1 }
  .rep-outils .btn { margin-left: 0 }
  .dos-tete { padding: 16px }
  .dt-titre h2 { font-size: 19px }
  .etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); flex-basis: 100% }
  .etapes li { font-size: 11px }
  .dt-actions { width: 100% }
  .dt-actions .btn { flex: 1 1 auto }
  .apercu-scene { height: 60vh }
  .dos-fiche { padding: 16px; gap: 24px }
  .ligne-adresse { grid-template-columns: 90px minmax(0, 1fr) }
  .ligne-adresse > :last-child { grid-column: 1 / -1 }
  .ligne-ville { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .ligne-ville > :first-child { grid-column: 1 / -1 }
  .modal-bg { padding: 0; place-items: stretch }
  .modal { border-radius: 0; max-height: none; height: 100%; width: 100% !important; border: 0; padding: 20px 16px 0 }
  .modal-foot { margin: 0 -16px; padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px)) }
  .log li { grid-template-columns: 1fr; gap: 2px }
}
@media (max-width: 480px) {
  .ligne-4 { grid-template-columns: minmax(0, 1fr) }
  .etapes li > span:last-child { display: none }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

@media print {
  body { background: #fff; color: #000; padding: 0 }
  body > *:not(#modal) { display: none !important }
  .modal-bg { position: static; background: none; padding: 0; display: block }
  .modal { border: 0; max-height: none; overflow: visible; width: 100% !important; padding: 0; box-shadow: none }
  .modal-foot { display: none }
  .saisie-feuillet { break-inside: avoid }
  tr.doute td { background: #fff3d6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact }
}

/* Frais médicaux du ménage */
.compar tr.total td { font-weight: 600; border-top: 1px solid var(--line) }
.frais-med .check { margin-top: 8px }
.fm-detail { margin-top: 10px }
.fm-detail summary { cursor: pointer; font-size: 13px; color: var(--accent-txt) }
.fm-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px }
.fm-recu { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; width: 100%; text-align: left; background: none;
  border: 1px solid transparent; border-radius: var(--r-sm); padding: 6px 8px; font: inherit; font-size: 13px; color: inherit; cursor: pointer }
.fm-recu:hover, .fm-recu:focus-visible { border-color: var(--line); background: var(--sunk) }
.fm-recu small { display: block; color: var(--muted); margin: 2px 0 }
.fm-recu .chip { margin-top: 2px }
.fm-recu .mono { white-space: nowrap }
.saisie-feuillet .fm-saisie td:first-child { width: 104px; white-space: nowrap }

/* Sélection de documents (retrait de plusieurs documents d'un coup) */
.bloc-tete .docs-sel { margin-left: auto }
.docs-choix { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px }
.doc-ligne.choix .coche { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--muted); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: #fff }
.doc-ligne.choix[aria-pressed="true"] { background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 35%, transparent) }
.doc-ligne.choix[aria-pressed="true"] .coche { background: var(--err); border-color: var(--err) }

/* Robot ProFile : propositions à approuver, état des recettes, écarts de vérification */
.rb-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.rb-brouillon { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunk) }
.rb-brouillon ul, .rb-liste { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 13px }
.rb-json { max-height: 260px; overflow: auto; font-size: 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 8px; white-space: pre-wrap }
.prep-ecarts { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--err) }
.prep-ecarts .hint { color: var(--muted) }