/* SSOT ENVOL — feuille de style unique, sans dépendance externe (docs/ux.md §2).
   Polices et icônes servies par l'application (static/vendor). */

/* --- Polices ------------------------------------------------------------------------------------ */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(vendor/inter/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(vendor/inter/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(vendor/inter/inter-greek-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(vendor/montserrat/montserrat-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(vendor/montserrat/montserrat-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Thèmes ------------------------------------------------------------------------------------
   Sombre par défaut. `data-theme` est posé sur <html> avant l'affichage (cookie, sinon préférence
   système) ; il peut aussi être posé sur un conteneur (page /styleguide : deux modes côte à côte). */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1220;
  --surface: #111A2C;
  --surface-2: #172338;
  --surface-3: #1F2C45;
  --border: #22304A;
  --border-strong: #34455F;
  --text: #E6EBF4;
  --text-muted: #94A0B8;
  --accent: #1B84FF;            /* bleu AndroMach : sélection, focus, onglet actif */
  --accent-strong: #1570E6;     /* fond du bouton principal : texte blanc ≥ 4,5:1 */
  --accent-text: #5BA5FF;       /* liens et texte d'accent sur fond sombre */
  --accent-soft: rgba(27, 132, 255, .14);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --overlay: rgba(3, 7, 15, .55);
  --overlay-strong: rgba(3, 7, 15, .88);
  --logo-on-dark: block;
  --logo-on-light: none;

  --st-non_conforme: #FF7B7B;  --st-non_conforme-bg: rgba(255, 90, 90, .13);
  --st-a_demontrer: #F2C14E;   --st-a_demontrer-bg: rgba(242, 193, 78, .13);
  --st-a_recalculer: #FF9D5C;  --st-a_recalculer-bg: rgba(255, 157, 92, .13);
  --st-conforme: #4ADE94;      --st-conforme-bg: rgba(74, 222, 148, .12);
  --st-a_renseigner: #A9B3C6;  --st-a_renseigner-bg: rgba(169, 179, 198, .12);
  --st-non_suivi: #8D98AE;     --st-non_suivi-bg: transparent;
  --st-en_validation: #C4B5FD; --st-en_validation-bg: rgba(196, 181, 253, .12);
  --st-a_structurer: #E6EBF4;  --st-a_structurer-bg: rgba(230, 235, 244, .10);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --surface-2: #F0F3F8;
  --surface-3: #E6EBF3;
  --border: #DDE3EC;
  --border-strong: #C4CDDB;
  --text: #0B1220;
  --text-muted: #566175;
  --accent: #1B84FF;
  --accent-strong: #1570E6;
  --accent-text: #0B63D6;       /* #1B84FF sur blanc = 3,6:1, insuffisant pour du texte courant */
  --accent-soft: rgba(27, 132, 255, .10);
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .12);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --overlay: rgba(11, 18, 32, .28);
  --overlay-strong: rgba(11, 18, 32, .86);
  --logo-on-dark: none;
  --logo-on-light: block;

  --st-non_conforme: #B42318;  --st-non_conforme-bg: #FDE8E6;
  --st-a_demontrer: #855700;   --st-a_demontrer-bg: #FCF0CF;
  --st-a_recalculer: #B04A06;  --st-a_recalculer-bg: #FDEADB;
  --st-conforme: #12733F;      --st-conforme-bg: #DEF4E7;
  --st-a_renseigner: #4A5467;  --st-a_renseigner-bg: #E9EDF3;
  --st-non_suivi: #566175;     --st-non_suivi-bg: transparent;
  --st-en_validation: #6A3DBF; --st-en_validation-bg: #F1EBFD;
  --st-a_structurer: #0B1220;  --st-a_structurer-bg: #E6EBF3;
}
[data-theme] { background: var(--bg); color: var(--text); }

/* --- Base --------------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { font-size: 14px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01"; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); }
h1, .h1 { font-family: "Montserrat", "Inter", sans-serif; font-size: 1.55rem; font-weight: 650; letter-spacing: -.01em; margin: 0; }
/* Libellés de section : petites capitales espacées, partout. */
h2, .section-label {
  font-size: .74rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 .7rem;
}
h3 { font-size: .95rem; font-weight: 600; margin: .8rem 0 .35rem; color: var(--text-muted); }
h4 { font-size: .9rem; margin: .6rem 0 .2rem; }
main { padding: 0 24px 48px; max-width: 1600px; margin: 0 auto; }
.mono { font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace; font-size: .9em; }
.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.warn { color: var(--st-non_conforme); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.2rem 0; }

/* Icônes Lucide (sprite) */
.icon { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.icon.lg { width: 20px; height: 20px; }
.icon.xl { width: 28px; height: 28px; }

/* --- En-tête ------------------------------------------------------------------------------------ */
.top {
  /* Bleu nuit dans les deux modes (data-theme="dark" posé sur l'en-tête). */
  position: sticky; top: 0; z-index: 30; height: 56px;
  display: flex; align-items: center; gap: 1.25rem; padding: 0 20px;
  background: #0A1222; border-bottom: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 -1px 0 rgba(27, 132, 255, .10);
}
.brand { display: flex; align-items: center; gap: .75rem; color: var(--text); flex: none; }
.brand:hover { text-decoration: none; }
.brand img { height: 22px; width: auto; }
.brand .product {
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); padding-left: .75rem; border-left: 1px solid var(--border-strong);
}
/* Logo selon le thème le plus proche (variables héritées : fonctionne aussi dans un conteneur). */
img.logo-dark { display: var(--logo-on-dark); }
img.logo-light { display: var(--logo-on-light); }

.tabs { display: flex; align-items: stretch; gap: .15rem; height: 100%; }
.tabs > a, .tabs > details > summary {
  display: flex; align-items: center; gap: .35rem; padding: 2px .75rem 0; height: 100%;
  color: var(--text-muted); font-weight: 500; border-bottom: 2px solid transparent; cursor: pointer;
}
.tabs > a:hover, .tabs > details > summary:hover { color: var(--text); text-decoration: none; }
.tabs [aria-current="page"], .tabs details.current > summary { color: #fff; border-bottom-color: var(--accent); }
.tabs > details { position: relative; }
.tabs > details > .menu-pop { top: calc(100% + 4px); }

.top-tools { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.brand .brand-mark { display: none; }
.count {
  position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center;
  background: var(--accent-strong); color: #fff; box-shadow: 0 0 0 2px var(--surface);
}
.testmode { font-size: .72rem; color: var(--text-muted); padding: 0 .4rem; white-space: nowrap; }

/* --- Menus déroulants (<details>) ---------------------------------------------------------------- */
details.menu { position: relative; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
  padding: .3rem; display: flex; flex-direction: column;
}
.tabs .menu-pop { left: 0; right: auto; }
.menu-pop a, .menu-pop button {
  display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border-radius: 6px;
  color: var(--text); background: none; border: 0; text-align: left; font: inherit; cursor: pointer; width: 100%;
}
.menu-pop a:hover, .menu-pop button:hover { background: var(--surface-2); text-decoration: none; }
.menu-pop a[aria-current] { background: var(--accent-soft); }
.menu-pop .menu-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: .4rem .6rem .2rem; }
.menu-pop hr { margin: .3rem 0; }

/* --- Boutons ------------------------------------------------------------------------------------ */
.btn, button, select, input, textarea {
  font: inherit; font-size: .92rem; color: var(--text);
}
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 34px; padding: 0 .85rem; border-radius: 8px; cursor: pointer; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border); font-weight: 500;
  transition: background .12s, border-color .12s;
}
.btn:hover, button:hover { background: var(--surface-3); border-color: var(--border-strong); text-decoration: none; }
.btn.primary, button.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; font-weight: 600; }
.btn.primary:hover, button.primary:hover { background: #1262CC; border-color: #1262CC; }
.btn.ghost { background: none; border-color: transparent; color: var(--text-muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.icon-only { width: 34px; padding: 0; position: relative; }
.btn.sm { height: 28px; padding: 0 .6rem; font-size: .85rem; border-radius: 6px; }
.btn.sm.icon-only { width: 28px; }
.btn.danger, button.danger { color: var(--st-non_conforme); }
button:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Contrôle segmenté */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }
.segmented a, .segmented button, .segmented label {
  height: 28px; padding: 0 .8rem; border-radius: 6px; border: 0; background: none; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; cursor: pointer;
}
.segmented a:hover, .segmented label:hover { color: var(--text); text-decoration: none; }
.segmented [aria-current], .segmented input:checked + span { color: var(--text); }
.segmented [aria-current], .segmented label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }

/* --- Champs ------------------------------------------------------------------------------------- */
select, input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 .65rem;
}
select, input:not([type=checkbox]):not([type=radio]):not([type=file]) { height: 34px; }
textarea { padding: .5rem .65rem; line-height: 1.45; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 15px; height: 15px; }
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--text-muted); font-weight: 500; }
.field-hint { font-size: .78rem; color: var(--text-muted); font-weight: 400; }
.search { position: relative; display: flex; align-items: center; }
.search .icon { position: absolute; left: .65rem; color: var(--text-muted); pointer-events: none; }
.search input { padding-left: 2.1rem !important; width: 100%; }

/* --- Pastille RE, liseré système ---------------------------------------------------------------- */
.re-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  background: var(--re); color: var(--re-ink, #0B1220); box-shadow: 0 0 0 2px var(--surface);
}
.re-chip.lg { width: 34px; height: 34px; font-size: .8rem; }
.re-chip.long { width: auto; min-width: 24px; padding: 0 6px; border-radius: 12px; letter-spacing: 0; }
.re-chip.sm.long { min-width: 20px; padding: 0 5px; border-radius: 10px; }
/* Membre qui n'est pas RE (admin, contributeur, lecteur) : jamais de couleur d'identité. */
.re-chip.neutral { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-strong); }
.re-chip.sm { width: 20px; height: 20px; font-size: .58rem; }
.re { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.re-stack { display: inline-flex; }
.re-stack .re-chip + .re-chip { margin-left: -6px; }
.stripe, .card.stripe, tr.stripe > td:first-child { border-left: 4px solid var(--sys, var(--border)); }
.card.stripe { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.sys-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--sys); vertical-align: 1px; }

/* --- Badges de statut : toujours libellé + icône + couleur (ux.md §3) --------------------------- */
.st {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  height: 24px; padding: 0 .55rem 0 .45rem; border-radius: 6px; font-size: .8rem; font-weight: 600;
  color: var(--c); background: var(--c-bg); border: 1px solid transparent; cursor: default;
}
.st .icon { width: 14px; height: 14px; vertical-align: 0; }
.st.lg { height: 32px; padding: 0 .8rem 0 .6rem; font-size: .95rem; border-radius: 8px; gap: .45rem; }
.st.lg .icon { width: 17px; height: 17px; }
.st.dashed { border: 1px dashed var(--c); }
.st-non_conforme { --c: var(--st-non_conforme); --c-bg: var(--st-non_conforme-bg); }
.st-a_demontrer { --c: var(--st-a_demontrer); --c-bg: var(--st-a_demontrer-bg); }
.st-a_recalculer { --c: var(--st-a_recalculer); --c-bg: var(--st-a_recalculer-bg); }
.st-conforme, .st-a_jour { --c: var(--st-conforme); --c-bg: var(--st-conforme-bg); }
.st-a_renseigner { --c: var(--st-a_renseigner); --c-bg: var(--st-a_renseigner-bg); }
.st-non_suivi { --c: var(--st-non_suivi); --c-bg: var(--st-non_suivi-bg); border: 1px dashed var(--border-strong); }
.st-en_validation { --c: var(--st-en_validation); --c-bg: var(--st-en_validation-bg); border: 1px dashed var(--c); height: 22px; font-size: .74rem; }
.st-a_structurer, .st-a_rattacher { --c: var(--st-a_structurer); --c-bg: var(--st-a_structurer-bg); }
.st-a_rattacher { border: 1px dashed var(--c); }
.st-externe { --c: var(--text-muted); --c-bg: var(--surface-2); border: 1px solid var(--border-strong); }

/* Badges neutres */
.tag {
  display: inline-flex; align-items: center; gap: .3rem; height: 22px; padding: 0 .5rem; border-radius: 6px;
  font-size: .74rem; font-weight: 600; white-space: nowrap; color: var(--text-muted); background: var(--surface-2);
  border: 1px solid var(--border);
}
.tag .icon { width: 13px; height: 13px; vertical-align: 0; }
.tag.frozen { color: var(--text); }

/* Statuts hérités (pages pas encore refaites) : mêmes couleurs que le nouveau vocabulaire. */
.status { display: inline-block; padding: .1rem .5rem; border-radius: 6px; font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--c); background: var(--c-bg); }
.s-rouge { --c: var(--st-non_conforme); --c-bg: var(--st-non_conforme-bg); }
.s-orange { --c: var(--st-a_demontrer); --c-bg: var(--st-a_demontrer-bg); }
.s-gris { --c: var(--st-a_renseigner); --c-bg: var(--st-a_renseigner-bg); }
.s-vert { --c: var(--st-conforme); --c-bg: var(--st-conforme-bg); }
.s-non_suivi { --c: var(--st-non_suivi); --c-bg: transparent; border: 1px dashed var(--border-strong); }
.s-non_valide { --c: var(--st-en_validation); --c-bg: var(--st-en_validation-bg); }
.badge {
  display: inline-block; padding: 0 .4rem; border-radius: 5px; font-size: .72rem; font-weight: 600;
  vertical-align: 1px; white-space: nowrap; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
}
.badge.pending { background: var(--st-en_validation-bg); color: var(--st-en_validation); border: 1px dashed var(--st-en_validation); cursor: help; }
.badge.stale { background: var(--st-a_recalculer-bg); color: var(--st-a_recalculer); border-color: transparent; }
.badge.ok { background: var(--st-conforme-bg); color: var(--st-conforme); border-color: transparent; }
.badge.review { background: var(--st-a_renseigner-bg); color: var(--st-a_renseigner); }
.late { color: var(--st-non_conforme); font-weight: 600; }

/* --- Cartes, sections --------------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem 1.2rem; margin: 1rem 0;
}
.card.flat { box-shadow: none; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.card-title h2 { margin: 0; }
.kpi { display: flex; flex-direction: column; gap: .15rem; }
.kpi .value { font-family: "Montserrat", sans-serif; font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .label { font-size: .8rem; color: var(--text-muted); }
.empty {
  padding: 2rem 1rem; text-align: center; color: var(--text-muted);
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 12px;
}
.note {
  padding: .6rem .9rem; border-left: 3px solid var(--accent); background: var(--surface);
  border-radius: 0 8px 8px 0; margin: .8rem 0; font-size: .9rem;
}
.page-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 1rem; margin: 1.6rem 0 1rem;
}
.page-head .sub { color: var(--text-muted); margin-top: .25rem; }
.inline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: .6rem; }

/* --- Tableaux ----------------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: .55rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
tbody tr:last-child > td { border-bottom: 0; }
thead th {
  background: var(--surface); font-weight: 600; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.neg { color: var(--st-non_conforme); font-weight: 600; }
tbody tr:hover > td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
tr.group th, tr.group td { background: var(--surface-2); font-size: .88rem; color: var(--text); }
/* Modifié depuis ma dernière visite : simple point bleu devant l'identifiant. */
.modified-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: .35rem; vertical-align: 1px; }
.reason { font-size: .78rem; color: var(--text-muted); margin-top: .2rem; }
tr.clickable { position: relative; cursor: pointer; }
tr.clickable .rowlink::after { content: ""; position: absolute; inset: 0; }
tr.clickable td a:not(.rowlink) { position: relative; z-index: 1; }
tr[aria-selected="true"] > td { background: var(--accent-soft) !important; }

/* Groupe repliable */
details.group-block { margin: .8rem 0; }
details.group-block > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
details.group-block > summary::-webkit-details-marker { display: none; }
details.group-block > summary .chev { transition: transform .15s; color: var(--text-muted); }
details.group-block[open] > summary .chev { transform: rotate(90deg); }
details.group-block[open] > summary { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
details.group-block > .table-wrap { border-radius: 0 0 10px 10px; }
.group-summary { color: var(--text-muted); font-size: .85rem; margin-left: auto; }

/* --- Panneau latéral (ux.md §1.2) --------------------------------------------------------------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .18s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: clamp(420px, 40vw, 780px); max-width: 100vw;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  visibility: hidden;
}
.panel.open { transform: none; visibility: visible; }
.panel.wide { width: clamp(560px, 62vw, 1100px); }
.panel:focus, .viewer:focus { outline: none; }
.panel .panel-close { position: absolute; top: .8rem; right: .8rem; z-index: 2; }
.panel-content { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.2rem 1.4rem 2.5rem; }
.panel-head { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 0 2.8rem 1rem 0; }
.panel-content > section { padding: 1.1rem 0; border-top: 1px solid var(--border); }

.panel-title { font-family: "Montserrat", sans-serif; font-size: 1.25rem; font-weight: 650; line-height: 1.25; margin: 0; }
.panel-loading { padding: 3rem 0; text-align: center; color: var(--text-muted); }
body.panel-open { overflow: hidden; }

/* Fiche clé / valeur */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: 0; }
.facts dt { color: var(--text-muted); font-size: .85rem; }
.facts dd { margin: 0; }
.bigvalue { font-family: "Montserrat", sans-serif; font-size: 1.7rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Vignette de justificatif */
.thumb {
  display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; width: 100%; height: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; text-align: left; color: var(--text);
  cursor: zoom-in; justify-content: flex-start; white-space: normal;
}
.thumb:hover { border-color: var(--accent); background: var(--surface-2); }
.thumb .thumb-icon {
  width: 46px; height: 56px; flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
}
.thumb .thumb-name { font-weight: 600; }
.thumb .thumb-meta { font-size: .8rem; color: var(--text-muted); }

/* --- Visionneuse plein écran (ux.md §5.5) ------------------------------------------------------- */
.viewer {
  position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column;
  background: var(--overlay-strong); backdrop-filter: blur(4px);
}
.viewer.open { display: flex; }
.viewer-bar {
  display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; color: #E6EBF4;
  background: rgba(11, 18, 32, .65); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.viewer-bar .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.viewer-bar .btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #E6EBF4; }
.viewer-bar .btn:hover { background: rgba(255, 255, 255, .14); }
.viewer-bar .tag { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #E6EBF4; }
.viewer-stage { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 2rem 1rem; }
.viewer-page {
  width: min(860px, 100%); background: var(--surface); color: var(--text); border-radius: 10px;
  padding: 2.4rem 2.8rem; box-shadow: var(--shadow); min-height: 40vh;
}
.viewer-page.md { font-size: 1rem; line-height: 1.65; }
.viewer-image { max-width: 100%; transition: transform .15s; transform-origin: top center; cursor: zoom-in; border-radius: 6px; }
.viewer-card {
  margin: auto; width: min(460px, 100%); background: var(--surface); color: var(--text); border-radius: 14px;
  padding: 2rem; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.viewer-card .icon.xl { color: var(--text-muted); width: 44px; height: 44px; }

/* --- Formulaires (pages d'écriture existantes) -------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1rem;
  padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.filters label { display: flex; flex-direction: column; font-size: .8rem; color: var(--text-muted); gap: .25rem; }
.filters label.grow { flex: 1 1 180px; }
.filters label.grow input { width: 100%; }
.filters fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: center; }
.filters legend { font-size: .8rem; color: var(--text-muted); padding: 0; margin-bottom: .25rem; }
.filters label.check { flex-direction: row; align-items: center; color: var(--text); font-size: .85rem; gap: .3rem; }
.filters .reset { font-size: .85rem; align-self: center; }
.summary { margin: 1rem 0 .6rem; color: var(--text-muted); }
.summary strong { color: var(--text); }
.toggle { display: flex; flex-wrap: wrap; gap: .3rem; }
.toggle a { padding: .3rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.toggle a[aria-current] { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.toggle a[aria-current] .muted { color: #DCE8FB; }
.toc { display: flex; flex-wrap: wrap; gap: .3rem .7rem; margin: .4rem 0 .8rem; font-size: .9rem; }
.pending-list { list-style: none; padding: 0; margin: .3rem 0; font-size: .88rem; }
.pending-list li { margin: .25rem 0; }
.pending-card { border-color: var(--st-en_validation); border-style: dashed; }
.meta { margin: 0 0 .3rem; font-size: .85rem; color: var(--text-muted); }
.io { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: .5rem 1.2rem; }
pre.raw { margin: .1rem 0; font-size: .85rem; white-space: pre-wrap; background: var(--surface-2); padding: .3rem .5rem; border-radius: 6px; }
.note-text { white-space: pre-wrap; font-size: .85rem; }
.sha { word-break: break-all; color: var(--text-muted); }
td.just { max-width: 28rem; }
table.journal td { font-size: .82rem; }

/* Notes Markdown + LaTeX */
.md { font-size: .9rem; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; }
.md pre, .md code { background: var(--surface-2); border-radius: 4px; font-size: .86em; }
.md code { padding: .05rem .3rem; }
.md pre { padding: .6rem .8rem; overflow-x: auto; }
.md table { width: auto; }
.md h1, .md h2, .md h3 { color: var(--text); text-transform: none; letter-spacing: 0; }
.math.display { overflow-x: auto; margin: .5rem 0; }
.just-view + .just-view { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--border); }

form.edit { display: flex; flex-direction: column; gap: .9rem; max-width: 980px; }
/* Page brouillon : barre fine collante, colonne centrée ; justificatif « à plat » (aussi dans « Publier »). */
.draft-bar { position: sticky; top: 56px; z-index: 20; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  min-height: 48px; padding: .35rem 0; background: var(--bg); border-bottom: 1px solid var(--border); }
.draft-bar-title { font-weight: 600; }
.draft-bar-tools { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.draft-bar-tools select { max-width: 18rem; height: 30px; }
.draft-col { max-width: 760px; margin: 2rem auto 0; }
.jf-flat .jf-title { font-size: .8rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.jf-flat .jf-title input[type=text] { height: auto; padding: .2rem 0; font: 650 1.6rem/1.3 "Montserrat", "Inter", sans-serif;
  color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.jf-flat .jf-title input[type=text]:focus { box-shadow: none; border-bottom-color: var(--accent); }
.jf-flat .note-editor, .jf-flat .note-editor:focus-within { border: 0; border-radius: 0; padding: 0; min-height: 0;
  background: transparent; box-shadow: none; }
.jf-flat .note-editor .ProseMirror { min-height: 10rem; }
form.edit label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--text-muted); }
form.edit label.check { flex-direction: row; align-items: center; gap: .4rem; color: var(--text); }
form.edit fieldset { border: 1px solid var(--border); border-radius: 12px; padding: .7rem 1rem .9rem; background: var(--surface); }
form.edit legend { font-weight: 600; padding: 0 .4rem; color: var(--text); }
form.edit .row { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: flex-end; }
form.edit .row > label { flex: 1 1 160px; }
form.edit .row > label.narrow { flex: 0 1 110px; }
form.edit input[type=text], form.edit input[type=email], form.edit input[type=date], form.edit select, form.edit textarea { width: 100%; }
textarea.note-input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85rem; }
.choices { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-bottom: .4rem; }
.just-fields .jf-title { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .6rem; }
.just-fields:has(input[value="note"]:checked) .jf-note,
.just-fields:has(input[value="document"]:checked) .jf-document,
.just-fields:has(input[value="heavy_ref"]:checked) .jf-heavy_ref { display: flex; flex-direction: column; gap: .4rem; }
.kind-fields .kf, .cmp-fields .cf { display: none; }
.kind-fields:has(input[value="scalar"]:checked) .kf-scalar,
.kind-fields:has(input[value="complex"]:checked) .kf-complex,
.kind-fields:has(input[value="artifact"]:checked) .kf-artifact,
.kind-fields:has(input[value="requirement"]:checked) .kf-requirement { display: flex; flex-direction: column; gap: .3rem; }
.kind-fields:has(input[value="scalar"]:checked) .kf-scalar { flex-direction: row; }
.cmp-fields:has(input[value="in_range"]:checked) .cf-in_range,
.cmp-fields:has(input[value="eq_tol"]:checked) .cf-eq_tol { display: flex; }
.output { border-top: 1px solid var(--border); padding-top: .4rem; margin-top: .4rem; }
.output:first-of-type { border-top: 0; margin-top: 0; }
.note-preview:not(:empty) { border: 1px dashed var(--border-strong); border-radius: 8px; padding: .6rem .8rem; background: var(--surface-2); }
.actions-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.error { padding: .6rem .9rem; border-left: 3px solid var(--st-non_conforme); background: var(--st-non_conforme-bg); color: var(--st-non_conforme); border-radius: 0 8px 8px 0; }
.success { padding: .6rem .9rem; border-left: 3px solid var(--st-conforme); background: var(--st-conforme-bg); color: var(--st-conforme); border-radius: 0 8px 8px 0; margin-top: 1rem; }
a.unlink { color: var(--text-muted); font-size: .8rem; padding: 0 .2rem; }
a.unlink:hover { color: var(--st-non_conforme); text-decoration: none; }
.tools { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .84rem; margin: .3rem 0 .4rem; }
.tools a, a.tool { white-space: nowrap; }
.tools a::before, a.tool::before { content: "✎ "; color: var(--text-muted); }

/* Assistant de restructuration */
ol.steps { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; padding-left: 1.2rem; margin: .4rem 0 .8rem; color: var(--text-muted); }
ol.steps li[aria-current] { color: var(--text); font-weight: 600; }
.target-row { border-top: 1px solid var(--border); padding-top: .5rem; margin-top: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.target-row:first-of-type { border-top: 0; margin-top: 0; }
table.distribution th.col { white-space: normal; min-width: 7rem; max-width: 12rem; font-size: .74rem; text-transform: none; letter-spacing: 0; }
table.distribution td.pick-cell { text-align: center; vertical-align: middle; }

/* File de validation */
.sticky-bar { position: sticky; top: 56px; z-index: 5; background: var(--bg); padding: .5rem 0; }
.review-group > h2 { margin-top: 1.4rem; }
.review-head { display: flex; gap: .6rem; align-items: flex-start; }
.review-head input[type=checkbox] { margin-top: .25rem; }
.review-head h3 { margin: 0; color: var(--text); font-size: 1rem; }
table.diff td.before { color: var(--text-muted); }
table.diff tr.changed td.after { font-weight: 600; background: var(--accent-soft); }
.forecasts { list-style: none; padding: 0; margin: .2rem 0 .4rem; font-size: .88rem; }
.forecasts li { margin: .2rem 0; }
details.reject summary, details.just-details summary { cursor: pointer; font-size: .85rem; color: var(--text-muted); margin-top: .4rem; }

/* Arbres */
table.tree tr.context td { color: var(--text-muted); }
table.tree tr.depth-0 td:first-child { font-weight: 600; }
details.fn-notes summary { cursor: pointer; }
details.pbs-node { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .8rem; margin: .5rem 0; }
details.pbs-node details.pbs-node { margin-left: .4rem; }
details.pbs-node > summary { cursor: pointer; }
.pbs-body { padding: .2rem 0 .1rem .6rem; }
ul.plain { list-style: none; padding: 0; margin: .2rem 0 .4rem; }
ul.plain li { margin: .25rem 0; }
.outputs { margin-left: 1rem; }

/* Administration */
table.admin input[type=text], table.admin input[type=email] { width: 100%; min-width: 8rem; }
table.admin tr.inactive td { opacity: .6; }
tr.current td { background: var(--accent-soft); }
label.inline-check { display: inline-flex; gap: .3rem; align-items: center; margin-right: .6rem; font-size: .85rem; }
.alloc-picks { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.alloc-wrap { max-height: 75vh; }
table.alloc-matrix { width: auto; font-size: .8rem; }
table.alloc-matrix th.rowh { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; white-space: nowrap; }
table.alloc-matrix thead th.rowh { z-index: 3; }
table.alloc-matrix th.col { writing-mode: vertical-rl; transform: rotate(180deg); padding: .3rem .1rem; font-family: ui-monospace, Consolas, monospace; text-transform: none; }
table.alloc-matrix td.alloc { text-align: center; padding: .15rem; border-left: 1px solid var(--border); }
table.alloc-matrix td.alloc.on { background: var(--accent-soft); }

/* Matrice N2 */
table.n2 { width: auto; }
table.n2 td, table.n2 th { border: 1px solid var(--border); text-align: center; vertical-align: middle; }
table.n2 th.rowh { text-align: right; white-space: nowrap; background: var(--surface); position: sticky; left: 0; z-index: 1; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--text); }
table.n2 th.corner { font-size: .72rem; text-align: left; }
table.n2 th.col { white-space: nowrap; min-width: 4.5rem; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--text); }
table.n2 td { min-width: 4.5rem; height: 2.6rem; padding: 0; font-variant-numeric: tabular-nums; }
table.n2 td a { display: block; padding: .6rem .4rem; color: inherit; font-weight: 600; }
table.n2 td.diag { background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--surface-2) 6px 12px); }
.n2-rouge { background: var(--st-non_conforme-bg); color: var(--st-non_conforme); }
.n2-orange { background: var(--st-a_demontrer-bg); color: var(--st-a_demontrer); }
.n2-gris { background: var(--st-a_renseigner-bg); color: var(--st-a_renseigner); }
.n2-vert { background: var(--st-conforme-bg); color: var(--st-conforme); }
.n2-non_suivi { color: var(--st-non_suivi); outline: 1px dashed var(--border-strong); outline-offset: -4px; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; }
.cell-sample { padding: .15rem .5rem; border-radius: 4px; }

/* Priorités */
.prio { display: inline-block; min-width: 2rem; text-align: center; padding: 0 .35rem; border-radius: 5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prio.p0 { background: var(--surface-2); }
.prio.p1 { background: var(--st-a_renseigner-bg); color: var(--st-a_renseigner); }
.prio.p2 { background: var(--st-a_demontrer-bg); color: var(--st-a_demontrer); }
.prio.p3, .prio.p4 { background: var(--st-non_conforme-bg); color: var(--st-non_conforme); }

/* --- Page /styleguide --------------------------------------------------------------------------- */
.sg-modes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.sg-mode { padding: 1.4rem 1.6rem 2rem; min-width: 0; }
.sg-mode > h2.mode-title { font-family: "Montserrat", sans-serif; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.sg-section { margin-top: 1.6rem; }
.sg-section > h3 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .7rem; }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.swatch { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: .74rem; background: var(--surface); }
.swatch i { display: block; height: 38px; background: var(--sw); border-bottom: 1px solid var(--border); }
.swatch span { display: block; padding: .3rem .45rem; }
.swatch code { color: var(--text-muted); font-size: .7rem; }
.contrast td, .contrast th { padding: .35rem .55rem; font-size: .8rem; }
.contrast .ok { color: var(--st-conforme); font-weight: 600; }
.contrast .ko { color: var(--st-non_conforme); font-weight: 600; }
.sg-panel { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; height: 300px; background: var(--bg); }
.sg-panel .panel { position: absolute; transform: none; visibility: visible; width: 72%; }
.sg-panel .scrim { position: absolute; opacity: 1; }

/* --- Petits écrans ------------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .brand .product, .testmode { display: none; }
  .tabs > a, .tabs > details > summary { padding: 0 .45rem; }
  .top { gap: .6rem; padding: 0 12px; }
  .top-tools { gap: 0; }
  .top > * { min-width: 0; }
  .sg-modes { grid-template-columns: minmax(0, 1fr); }
}
/* Entre 761 et 1180 px : les libellés seuls ; en dessous, les icônes seules (infobulle), cf. plus bas. */
@media (min-width: 761px) and (max-width: 1180px) {
  .tabs > a > .icon { display: none; }
}
@media (max-width: 760px) {
  main { padding: 0 16px 32px; }
  .top { gap: .35rem; padding: 0 10px; }
  .brand img { height: 18px; width: auto; }
  /* En-tête replié (ux.md §2) : le sigle seul, pour qu'un membre connecté tienne sur un téléphone. */
  .brand img:not(.brand-mark) { display: none; }
  .brand .brand-mark { display: block; height: 24px; }
  .tabs > a, .tabs > details > summary { padding: 2px .35rem 0; min-width: 28px; justify-content: center; }
  .tabs { gap: 0; }
  .top-tools { gap: 0; }
  .top-tools a[href="/export.xlsx"], .top-tools a[href="/admin"] { display: none; }
  table.settings thead { display: none; }
  table.settings, table.settings tbody, table.settings tr, table.settings td { display: block; width: 100%; }
  table.settings tr { padding: .5rem 0; border-bottom: 1px solid var(--border); }
  table.settings td { border: 0; padding: .15rem .6rem; }
  table.settings .segmented { flex-wrap: wrap; }
  .whoami summary .small { display: none; }
  .sg-mode { padding: 1rem; }
  .tabs .tab-label { display: none; }
  .io { grid-template-columns: 1fr; }
  .panel, .panel.wide { width: 100vw; }
  .viewer-page { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .scrim, .btn, button { transition: none; }
}

/* Liste d'actions (panneau cloche et page /actions) */
.action-list { list-style: none; margin: 0; padding: 0; }
.action-list li { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem 0; border-top: 1px solid var(--border); }
.action-list li:first-child { border-top: 0; }
.action-list .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.action-kind { font-weight: 600; }
.empty .icon.xl { color: var(--st-conforme); }

/* --- Tableau SSOT : barre d'outils (ux.md §5.3) ------------------------------------------------- */
.toolbar { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .4rem; }
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.toolbar-row .search.grow { flex: 1 1 260px; max-width: 460px; }
.inline-field { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-muted); }
details.advanced > summary {
  list-style: none; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  color: var(--text-muted); font-size: .88rem; font-weight: 500; padding: .2rem 0;
}
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary:hover { color: var(--text); }
details.advanced > summary .chev { transition: transform .15s; }
details.advanced[open] > summary .chev { transform: rotate(180deg); }
.advanced-body {
  margin-top: .5rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .9rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.advanced-body fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.advanced-body legend { font-size: .74rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .4rem; padding: 0; }
.advanced-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem 1rem; }
label.check { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--text); cursor: pointer; }
table.ssot td { vertical-align: middle; }
table.ssot .data-cell { min-width: 260px; }
table.ssot .data-name { font-weight: 500; }
table.ssot .pair .re-chip { box-shadow: 0 0 0 2px var(--surface); }
table.ssot td .st-en_validation { margin-left: .3rem; }
details.group-block > summary .re + .re { margin-left: .2rem; }
details.group-block > summary.stripe { border-left-width: 4px; }

/* --- Panneau donnée (ux.md §5.4) ---------------------------------------------------------------- */
.panel-head .flow { gap: .45rem; }
.value-meta { margin: .3rem 0 .8rem; color: var(--text-muted); font-size: .88rem; }
.thumbs { display: flex; flex-direction: column; gap: .5rem; }
.thumb { position: relative; }
.thumb .thumb-icon { overflow: hidden; position: relative; }
.thumb .thumb-icon img, .thumb .thumb-icon canvas { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.thumb .thumb-icon canvas { position: absolute; inset: 0; opacity: 0; background: #fff; }
.thumb .thumb-icon.has-preview canvas { opacity: 1; }
.thumb .thumb-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.thumb .thumb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb .thumb-meta .icon { width: 13px; height: 13px; vertical-align: -2px; }
.thumb .thumb-open { color: var(--text-muted); opacity: 0; transition: opacity .12s; }
.thumb:hover .thumb-open { opacity: 1; }
.proposed { margin-top: .9rem; padding: .7rem .8rem; border: 1px dashed var(--st-en_validation); border-radius: 10px; }
.proposed p { margin: .4rem 0 0; }
table.criteria td { vertical-align: middle; }
table.criteria .row-tools { width: 1%; }
.panel-actions { gap: .5rem; }
.panel-actions .menu-pop { left: 0; right: auto; }
details.history > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .45rem; }
details.history > summary::-webkit-details-marker { display: none; }
details.history > summary .chev { transition: transform .15s; color: var(--text-muted); }
details.history[open] > summary .chev { transform: rotate(90deg); }
details.history h3 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin: 1.2rem 0 .5rem; }
.revision { padding: .7rem 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .5rem; }
.revision:first-of-type { border-top: 0; }

/* --- Visionneuse : PDF et classeur ------------------------------------------------------------- */
.pdf-stage { align-items: flex-start; }
.pdf-viewer { width: 100%; display: flex; justify-content: center; }
.pdf-pages { --pdf-zoom: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.pdf-page { width: min(calc(860px * var(--pdf-zoom)), calc(100% * var(--pdf-zoom))); max-width: none; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.sheet-page { width: min(1200px, 100%); padding: 1.4rem 1.6rem; }
.sheet-tabs { margin-bottom: 1rem; flex-wrap: wrap; }
.sheet-tabs button { height: 28px; padding: 0 .8rem; border-radius: 6px; border: 0; background: none; color: var(--text-muted); }
.sheet-tabs button[aria-current] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.sheet-wrap { max-height: 70vh; overflow: auto; }
table.sheet { font-size: .82rem; width: auto; min-width: 100%; }
table.sheet th, table.sheet td { padding: .3rem .6rem; border: 1px solid var(--border); white-space: nowrap; }
table.sheet thead th { text-align: center; letter-spacing: 0; background: var(--surface-2); }
table.sheet th.rown { position: sticky; left: 0; background: var(--surface-2); color: var(--text-muted); font-weight: 500; text-align: right; }
.viewer-card.left { text-align: left; align-items: stretch; }

/* Colonnes de largeur fixe : alignées d'un groupe à l'autre. */
table.ssot { table-layout: fixed; min-width: 980px; }
table.ssot col.c-status { width: 160px; }
table.ssot col.c-crit { width: 140px; }
table.ssot col.c-val { width: 120px; }
table.ssot col.c-margin { width: 110px; }
table.ssot col.c-mat { width: 140px; }
table.ssot col.c-pair { width: 200px; }
table.ssot col.c-who { width: 150px; }
table.ssot td { overflow-wrap: anywhere; }
table.ssot td.nowrap, table.ssot td.num { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  table.criteria .re > span:last-child:not(.re-chip) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* --- Arbre PBS graphique (ux.md §5.1) ----------------------------------------------------------- */
.pz {
  position: relative; height: calc(100vh - 230px); min-height: 420px; overflow: hidden; touch-action: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; cursor: grab;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1.2px); background-size: 22px 22px;
}
.pz.dragging { cursor: grabbing; }
.pz.editing { border-color: var(--accent); border-style: dashed; }
.pz-tools { position: absolute; right: 12px; top: 12px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.pz-tools .btn { background: var(--surface); box-shadow: var(--shadow-sm); }
.pz-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pbs-links { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.pbs-links path { fill: none; stroke: var(--sys, var(--border-strong)); stroke-width: 1.6; opacity: .55; }
.pbs-node { position: absolute; width: 230px; height: 48px; }
.pbs-card {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; height: 100%;
  padding: 0 .7rem 0 .85rem; border-radius: 10px; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-left: 4px solid var(--sys, var(--border-strong));
  box-shadow: var(--shadow-sm); transition: border-color .12s, transform .12s;
}
.pbs-card:hover { text-decoration: none; border-color: var(--accent); border-left-color: var(--sys, var(--accent)); }
.pbs-node.level-0 .pbs-card { background: var(--bg); font-family: "Montserrat", sans-serif; font-weight: 650; }
.pbs-node.level-1 .pbs-card { font-weight: 600; }
.pbs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbs-card.just-saved { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pbs-node-tools { position: absolute; right: -10px; top: -12px; display: flex; gap: 4px; }
.pbs-node-tools .btn { background: var(--surface); box-shadow: var(--shadow-sm); }
.pbs-node-tools form { margin: 0; }
.kpi-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: .6rem; }
.kpi-link { color: var(--text); }
.kpi-link:hover { text-decoration: none; }
.kpi-link:hover .label { color: var(--accent-text); }

/* --- Administration ---------------------------------------------------------------------------- */
.admin-tabs { margin: 0 0 1.2rem; flex-wrap: wrap; }
.swatch-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--border-strong); }
.color-pop { min-width: 230px; padding: .6rem; gap: .5rem; }
.color-opt { display: flex; align-items: center; gap: .45rem; font-size: .88rem; }
.color-opt input[type=color] { width: 34px; height: 24px; padding: 0; border: 0; background: none; margin-left: auto; }
.swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.swatch-opt { display: flex; justify-content: center; cursor: pointer; }
.swatch-opt input { position: absolute; opacity: 0; }
.swatch-opt span { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px var(--surface); }
.swatch-opt input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.swatch-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
table.admin td { vertical-align: middle; }

/* Sélecteur de RE en pastilles (Fonctions, Process) */
.chip-picker { margin: 0 0 1rem; gap: .4rem .5rem; }
.chip-link { display: inline-flex; align-items: center; padding: 3px 10px 3px 4px; border-radius: 999px; color: var(--text); border: 1px solid var(--border); background: var(--surface); }
.chip-link:hover { text-decoration: none; border-color: var(--border-strong); }
.chip-link.current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sys-tag { display: inline-flex; align-items: center; gap: .35rem; margin: 2px 6px 2px 0; padding: 1px 8px 1px 6px; border-radius: 6px; font-size: .84rem; color: var(--text); background: var(--surface-2); border-left: 3px solid var(--sys, var(--border-strong)); }
.sys-tag:hover { text-decoration: none; background: var(--surface-3); }
.sys-tag .sys-dot { display: none; }
td.alloc-cell { max-width: 30rem; }

/* --- Process (ux.md §5.6) ---------------------------------------------------------------------- */
.process-list { display: flex; flex-direction: column; gap: .5rem; }
details.process-row { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--sys, var(--border-strong)); border-radius: 12px; }
details.process-row > summary {
  list-style: none; cursor: pointer; display: grid; align-items: center; gap: .4rem 1rem; padding: .75rem 1rem;
  grid-template-columns: 170px minmax(0, 1fr) auto auto auto auto 20px;
}
details.process-row > summary::-webkit-details-marker { display: none; }
details.process-row > summary:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); border-radius: 12px; }
details.process-row[open] > summary { border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; }
.pr-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-meta { font-size: .82rem; color: var(--text-muted); display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.pr-meta .sys-dot { background: var(--sys, var(--border-strong)); }
.pr-io { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-tools { display: inline-flex; align-items: center; gap: .4rem; }
.pr-tools .menu-pop { right: 0; }
.pr-chev { color: var(--text-muted); transition: transform .15s; }
details.process-row[open] .pr-chev { transform: rotate(180deg); }
.pr-body { padding: .9rem 1.1rem 1.1rem; }
.pr-body h3 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .5rem; }
.io-list { list-style: none; margin: 0; padding: 0; }
.io-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--border); }
.io-list li:first-child { border-top: 0; }
.io-data { min-width: 0; overflow-wrap: anywhere; }
.io-state { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.discipline-tabs { margin-bottom: 1rem; flex-wrap: wrap; }
@media (max-width: 1100px) {
  details.process-row > summary { grid-template-columns: minmax(0, 1fr) auto 20px; }
  .pr-status { grid-column: 1 / -1; }
  .pr-owner, .pr-run { display: none; }
  .pr-tools { grid-column: 1 / -1; }
}

/* File de validation */
.review-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.review-head h3 { font-size: 1.05rem; }
.review-head .meta { margin: 0; }
.review-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 1rem 1.4rem; margin-top: .8rem; }
.review-body:not(:has(.review-just)) { grid-template-columns: minmax(0, 1fr); }
.review-just { display: flex; flex-direction: column; gap: .4rem; }
.review-just h4 { margin-top: 0; }
.forecasts li { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 900px) { .review-body { grid-template-columns: minmax(0, 1fr); } }

/* Matrice N2 : statut = couleur + icône dans la case, libellé en infobulle et en légende. */
.n2-non_conforme { background: var(--st-non_conforme-bg); color: var(--st-non_conforme); }
.n2-a_demontrer { background: var(--st-a_demontrer-bg); color: var(--st-a_demontrer); }
.n2-a_recalculer { background: var(--st-a_recalculer-bg); color: var(--st-a_recalculer); }
.n2-a_renseigner { background: var(--st-a_renseigner-bg); color: var(--st-a_renseigner); }
.n2-conforme { background: var(--st-conforme-bg); color: var(--st-conforme); }
table.n2 td a { display: flex; align-items: center; justify-content: center; gap: .3rem; }
table.n2 td a .icon { width: 13px; height: 13px; }
table.n2 th.rowh .re, table.n2 th.col .re { font-weight: 500; }
.legend .cell-sample { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 6px; }
.legend .icon { width: 13px; height: 13px; }
.n2-wrap { max-height: calc(100vh - 220px); }

/* Formulaires de push et d'administration */
.actions-bar > a:not(.btn) { display: inline-flex; align-items: center; height: 34px; padding: 0 .85rem; border-radius: 8px; color: var(--text-muted); }
.actions-bar > a:not(.btn):hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.just-fields .segmented.choices { margin-bottom: .7rem; flex-wrap: wrap; }
.note .st { vertical-align: 1px; }
.note > .icon:first-child { margin-right: .2rem; color: var(--accent-text); }
form.edit h3 { color: var(--text); }
.not-frozen { color: var(--st-en_validation); }
.to-recompute { color: var(--st-a_recalculer); }
.structure-banner {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px;
}
.structure-banner .grow { flex: 1; min-width: 220px; }
.chip-link.chip-all { padding: 4px 12px; font-weight: 500; }

/* --- Formulaires de push en panneau (session 4c) ----------------------------------------------- */
.note.circuit { margin: 0; display: flex; gap: .45rem; align-items: flex-start; }
.note.circuit.applied { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.panel-content form.edit fieldset { margin-bottom: .9rem; }
.chip-checks { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin: .3rem 0 .2rem; }
.chip-check { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem .2rem .35rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); cursor: pointer; }
.chip-check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.chip-check input { margin: 0; }
details.criteria-block { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .9rem; }
details.criteria-block > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; font-weight: 600; }
details.criteria-block > summary::-webkit-details-marker { display: none; }
details.criteria-block[open] > summary .chev { transform: rotate(90deg); }
.crit-row { border-top: 1px dashed var(--border); padding-top: .6rem; margin-top: .6rem; }
.crit-row .cf { display: none; }
.crit-row:has(option[value="in_range"]:checked) .cf-in_range,
.crit-row:has(option[value="eq_tol"]:checked) .cf-eq_tol { display: flex; }
.label { font-size: .85rem; font-weight: 600; color: var(--text-muted); margin-top: .4rem; }
.panel-head .rationale { margin: 0; padding: .35rem .6rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 6px 6px 0; }
.flow .unattached .re-chip { outline: 1.5px dashed var(--st-a_structurer); outline-offset: 1px; opacity: .75; }
form:has(input[name=kind][value=scalar]:checked) .crit-q { display: none; }

/* --- Page Process : + Entrée / + Sortie, interfaces à rattacher (session 4c) ------------------- */
.io-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.io-head h3 { margin: 0; }
.picker-search { display: flex; margin: .2rem 0 .6rem; }
ul.picker { list-style: none; margin: 0 0 .8rem; padding: 0; border: 1px solid var(--border); border-radius: 10px; }
ul.picker > li { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-top: 1px solid var(--border); }
ul.picker > li:first-child { border-top: 0; }
ul.picker > li[hidden] { display: none; }
.picker-meta { gap: .45rem; flex-wrap: wrap; margin-top: .2rem; }
.attach-card h2 { display: flex; align-items: center; gap: .4rem; }
ul.attach-list { list-style: none; margin: .4rem 0 0; padding: 0; }
ul.attach-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .45rem 0; border-top: 1px solid var(--border); }
ul.attach-list > li:first-child { border-top: 0; }
.attach-form { margin-left: auto; gap: .4rem; }
.attach-form select { max-width: 22rem; }

/* --- Réponses (session 4d) ---------------------------------------------------------------------- */
.imposed { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; margin: .2rem 0 .8rem; background: var(--surface-2); }
.imposed-value { font-size: 1.15rem; font-weight: 600; margin-top: .2rem; white-space: pre-line; }
.verdict-fields .vf { display: none; }
.verdict-fields:has(input[value="value"]:checked) .vf-value { display: flex; }
.verdict-fields:has(input[value="derogation_requested"]:checked) .vf-derogation_requested { display: block; }
.st-a_revoir { --c: var(--st-a_renseigner); --c-bg: var(--st-a_renseigner-bg); border: 1px dashed var(--c); }

/* Réponses (session 4d) : commentaire, justificatif, dérogation à décider. */
.response-comment { margin-top: .25rem; padding: .25rem .5rem; border-left: 2px solid var(--border); white-space: pre-line; }
table.responses td .thumbs { margin-top: .35rem; }
.derogation-pending { margin-top: .35rem; }
.derogation-pending .btn { margin-top: .25rem; }
table.responses .thumbs .thumb { max-width: 13rem; }
table.responses td:last-child { white-space: nowrap; }
table.responses td:last-child .reason, table.responses td:last-child .derogation-pending { white-space: normal; }
.up-to-date { margin-bottom: .75rem; }
.up-to-date .segmented { margin: .35rem 0; }

/* Simplification 2026-10 : motif d'une interface sur une seule ligne dans le tableau SSOT. */
.rationale-line { max-width: 42rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-list .action-status { min-width: 9.5rem; }
.n2-a_revoir { background: var(--st-a_renseigner-bg); color: var(--st-a_renseigner); outline: 1px dashed var(--st-a_renseigner); outline-offset: -4px; }
.process-row .feeds { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .6rem; }
.process-row .feeds .chip-link { padding: .1rem .55rem; font-size: .8rem; }

/* Process : nom complet, sur plusieurs lignes si besoin (liste et arbre). */
details.process-row > summary { display: flex; flex-wrap: nowrap; }
details.process-row > summary .pr-main { flex: 1; }
.pr-name { white-space: normal; overflow: visible; }
.process-tree .pbs-name { white-space: normal; overflow: visible; line-height: 1.25; }
.process-tree .pbs-card { padding-top: .35rem; padding-bottom: .35rem; }
/* Process liés dans les entrées / sorties : texte courant, pas la couleur des liens d'interface. */
.io-process { color: var(--text); }
.io-process:hover { color: var(--text); text-decoration: underline; }

/* Arbre des process : dessin statique à taille réelle (capture d'écran), défilement horizontal si besoin. */
.process-tree { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.process-tree .pt-world { position: relative; }
.pt-links { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.pt-links > path { fill: none; stroke: var(--text-muted); stroke-width: 1.3; opacity: .75; }
.pt-arrow { fill: var(--text-muted); }
.pt-band { position: absolute; left: 24px; font-weight: 600; }

/* Tableau SSOT : « Producteur | Valeur » et « Consommateur(s) | Critère » regroupés deux à deux. */
table.ssot th.grp, table.ssot td.grp { border-left: 1px solid var(--border); padding-right: .4rem; }
table.ssot th.tight, table.ssot td.tight { padding-left: .4rem; }
table.ssot td.value { font-variant-numeric: tabular-nums; font-weight: 500; }
table.ssot col.c-prod { width: 190px; }
table.ssot col.c-cons { width: 230px; }
table.ssot .pair-line { display: inline-flex; align-items: center; gap: .45rem; }
table.ssot div.pair-line { display: flex; }
table.ssot .late-rev { color: var(--st-a_demontrer, #c2410c); font-weight: 600; font-size: .85em; }
table.ssot .ok-rev { color: var(--st-conforme); font-weight: 700; }

/* Publier : une sortie cochée montre son champ (valeur + unité, ou fichier). */
.output.publish .pub-toggle { font-weight: 600; }
.output.publish .pub-fields { display: none; margin: .4rem 0 0 1.6rem; }
.output.publish:has(input.pub:checked) .pub-fields { display: block; }

/* Panneau d'une interface : producteur, puis un bloc par consommateur. */
.side h2 { margin-bottom: .4rem; }
.side-process { margin: .1rem 0 .3rem; }
.consumer-block { padding: .6rem 0; border-top: 1px solid var(--border); }
.consumer-block:first-of-type { border-top: 0; }
.consumer-block p { margin: .25rem 0; }
.consumer-block .criterion-text { white-space: pre-wrap; }
.consumer-block .gap { color: var(--st-non_conforme); font-weight: 600; margin-left: .4rem; }
.consumer-block .comment { white-space: pre-wrap; border-left: 3px solid var(--st-non_conforme); padding-left: .5rem; }

/* Onglet Justificatifs */
.link-like { all: unset; cursor: pointer; color: var(--accent-text); font-weight: 500; }
.link-like:hover { text-decoration: underline; }
table.justifs td { vertical-align: top; }
table.justifs .versions { margin-top: .25rem; }
table.justifs .versions ul { margin: .3rem 0 0; padding-left: 1rem; font-size: .85rem; }
.justif-history li { grid-template-columns: minmax(0, 1fr) auto auto; }
.io-rev { display: block; font-size: .78rem; color: var(--text-muted); }
.io-rev .late-rev { color: var(--st-a_demontrer, #c2410c); font-weight: 600; }
.pr-justifs { display: inline-block; margin-top: .6rem; font-size: .85rem; }

/* Éléments du PBS d'une interface : cases à cocher regroupées par système */
.pbs-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .15rem .8rem;
  margin-bottom: .8rem; max-height: 18rem; overflow-y: auto; padding: .4rem .2rem; border: 1px solid var(--border);
  border-radius: 8px; }
.pbs-check { font-size: .85rem; }
.pbs-check.level-0, .pbs-check.level-1 { font-weight: 600; grid-column: 1 / -1; margin-top: .3rem; }
.pbs-check.level-2 { padding-left: 1rem; }
.pbs-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.pbs-chip { font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.pbs-chip:hover { border-color: var(--accent); }
.plain-list { list-style: none; margin: 0; padding: 0; }
.pbs-interfaces li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-top: 1px solid var(--border); }
.pbs-interfaces li:first-child { border-top: 0; }
/* Panneau : consommateur en retard, demande en validation */
.to-take { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .35rem 0; }
.late-badge { display: inline-block; font-weight: 600; font-size: .85rem; padding: .15rem .55rem; border-radius: 999px;
  color: var(--st-a_demontrer, #c2410c); border: 1px solid currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }
.pending-line { margin: .35rem 0 0; color: var(--text-muted); }
.maturity { cursor: help; border-bottom: 1px dotted currentColor; }

/* Onglet Activité : un jour par section, une ligne par événement (heure, pastille, phrase). */
.activity { max-width: 980px; }
.activity-day h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
  margin: 1.4rem 0 .4rem; }
.activity-list, .activity-refs { list-style: none; margin: 0; padding: 0; }
.activity-line { display: grid; grid-template-columns: 3.2rem 1.8rem minmax(0, 1fr); align-items: baseline;
  gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.activity-time { font-size: .78rem; }
.activity-body { min-width: 0; overflow-wrap: anywhere; }
.activity-text { color: var(--text); }
a.activity-text:hover { text-decoration: underline; }
.activity-more > summary { display: block; cursor: pointer; list-style: none; }
.activity-more > summary::-webkit-details-marker { display: none; }
.activity-more > summary::after { content: "▶"; font-size: .7em; color: var(--text-muted); margin-left: .45em; }
.activity-more[open] > summary::after { content: "▼"; }
.activity-refs { margin: .35rem 0 .15rem 1.2rem; font-size: .9rem; }
.activity-refs li { padding: .1rem 0; }
.activity-older { margin: 1rem 0; }
@media (max-width: 760px) { .activity-line { grid-template-columns: 2.6rem 1.8rem minmax(0, 1fr); gap: .4rem; } }

/* Brouillon : choix du process (recherche), menu « Proposer à… / Renvoyer », renvoi, lecture seule. */
.draft-process-search { width: 9rem; height: 30px; }
.draft-menu { min-width: 280px; }
.draft-menu-row { display: flex; gap: .4rem; align-items: center; padding: .2rem .6rem .5rem; }
.draft-menu-row select, .draft-menu-row textarea { flex: 1; min-width: 0; }
.draft-returned { margin: 0 0 1.4rem; padding: .8rem 1rem; border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent); border-radius: 8px; background: var(--surface); }
.draft-returned-head { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin-bottom: .35rem; }
.draft-returned-text { margin: 0; white-space: pre-wrap; color: var(--text); }
.draft-readonly-title { font-family: "Montserrat", "Inter", sans-serif; font-size: 1.6rem; margin: 0 0 1rem; }
.drafted-by { color: var(--text-muted); font-size: .85em; }

/* Connexion par clé d'accès : carte centrée, sans menu. */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.auth-card { width: min(420px, calc(100vw - 32px)); padding: 2rem; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow); }
.auth-card h1 { font-size: 1.35rem; margin: .4rem 0 1rem; }
.auth-logo { height: 22px; width: auto; }
.auth-product { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin: .4rem 0 0; }
.auth-main { width: 100%; justify-content: center; margin: .6rem 0; }
.auth-form { display: flex; flex-direction: column; gap: .8rem; }
.auth-form label { display: flex; flex-direction: column; gap: .3rem; }