/* ============================================================
   Charte Hygie31 — tokens repris de
   myteam/.claude/skills/look-and-feel/references/design-tokens-hygie31.md
   Aucune valeur visuelle en dur ailleurs que dans ce bloc :root.
   ============================================================ */
:root {
  /* Verts de marque */
  --h31-forest: #0D342C;
  --h31-forest-deep: #0a2922;
  --h31-pine: #375E55;
  --h31-pine-deep: #2D4D46;
  --h31-sage: #6FBD7C;
  --h31-sage-deep: #5fa86b;
  --h31-teal: #31737F;

  /* Neutres chauds */
  --h31-paper: #FFFFFF;
  --h31-bone: #F6F2EC;
  --h31-fog: #ECE6DC;
  --h31-stone: #C9C2B6;
  --h31-graphite: #2A2A28;

  /* Couleurs vives */
  --h31-peach: #FFB57B;
  --h31-orange: #E9540F;
  --h31-red: #DB3A34;
  --h31-coral: #E15C57;
  --h31-clay: #A5674D;
  --h31-sky: #3599B8;
  --h31-marine: #2E5B8E;

  /* Sémantiques */
  --fg1: var(--h31-forest);
  --fg2: #4A5C57;
  --fg3: #788881;
  --fg-on-dark-1: #FFFFFF;
  --fg-on-dark-2: #C7D6CF;
  --fg-on-dark-3: var(--h31-sage);
  --bg1: var(--h31-bone);
  --bg2: var(--h31-paper);
  --color-error: #ef4444;
  --color-success: #16a34a;

  --border-subtle: rgba(13, 52, 44, 0.08);
  /* Separateur de journee : doit rester lisible sur --h31-fog, pas seulement sur blanc. */
  --separateur-jour: rgba(13, 52, 44, 0.32);
  --border-default: rgba(13, 52, 44, 0.16);
  /* Seul niveau qui passe WCAG 1.4.11 (3,05:1) : bordures de champs et de contrôles. */
  --border-control: rgba(13, 52, 44, 0.52);
  --border-on-dark: rgba(255, 255, 255, 0.10);

  --shadow-1: 0 1px 2px rgba(13, 52, 44, 0.06);
  --shadow-2: 0 8px 32px rgba(13, 52, 44, 0.08);
  --shadow-3: 0 24px 64px rgba(13, 52, 44, 0.14);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* Échelle NON linéaire : 24px = sp-5, 32px = sp-6, 48px = sp-7. 20px n'existe pas. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  --font-display: 'Segoe UI', 'Segoe UI Variable Display', 'Selawik', 'Helvetica Neue', system-ui, sans-serif;
  --font-body: 'Segoe UI', 'Segoe UI Variable Text', 'Selawik', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'Cascadia Code', 'Consolas', ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --tracking-eyebrow: 0.16em;
  --tracking-tight: -0.01em;

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* Statuts métier — paires fond clair + texte foncé (contraste garanti) */
  --st-todo-bg: var(--h31-fog);                  --st-todo-text: #4A5C57;
  --st-doing-bg: rgba(53, 153, 184, 0.14);       --st-doing-text: #1F5F73;
  --st-done-bg: rgba(111, 189, 124, 0.20);       --st-done-text: #2F7D43;
  --st-warn-bg: rgba(233, 84, 15, 0.13);         --st-warn-text: #B8420C;
  --st-off-bg: rgba(201, 194, 182, 0.35);        --st-off-text: #6B6B63;
  --st-bad-bg: rgba(219, 58, 52, 0.13);          --st-bad-text: #B62B26;

  /* Layout — seul token de mise en page de la charte (design-tokens-hygie31.md). */
  --sidebar-w: 264px;
}

/* ---------------- Base ---------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
::selection { background: var(--h31-sage); color: var(--h31-forest); }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: var(--tracking-tight); margin: 0; }
h1 { font-size: var(--text-2xl); font-weight: var(--font-bold); }
h2 { font-size: var(--text-xl); font-weight: var(--font-semibold); }
h3 { font-size: var(--text-lg); font-weight: var(--font-semibold); }
p { margin: 0; }
code { font-family: var(--font-mono); background: var(--h31-fog); padding: 2px var(--sp-1); border-radius: var(--radius-sm); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--fg3);
}
.hint { color: var(--fg2); font-size: var(--text-sm); line-height: 1.5; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.smallbad { color: var(--h31-red); font-weight: var(--font-semibold); }
.formError { color: var(--h31-red); font-size: var(--text-sm); font-weight: var(--font-medium); }
.formNote {
  background: var(--st-done-bg); color: var(--st-done-text);
  padding: var(--sp-3); border-radius: var(--radius-md); font-size: var(--text-sm);
}
.formNote.formError { background: var(--st-bad-bg); color: var(--st-bad-text); }

.skip-to-content {
  position: absolute; top: -100%; left: var(--sp-4); z-index: 9999;
  background: var(--h31-forest); color: var(--fg-on-dark-1);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-to-content:focus { top: var(--sp-4); }

/* ---------------- En-tête ---------------- */
.topbar {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-7);
  background: rgba(246, 242, 236, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 20;
}
.authLogo { height: 40px; width: auto; display: block; margin: 0 auto var(--sp-4); }
.topbarTitle { min-width: 0; }
.topbar h1 { font-size: var(--text-xl); color: var(--h31-forest); }
.topbar .subtitle { color: var(--fg3); font-size: var(--text-xs); margin-top: var(--sp-1); }
.userBlock { line-height: 1.3; }
.userBlock strong { font-size: var(--text-sm); }
.userBlock span { display: block; font-size: var(--text-xs); }

/* ---------------- Coquille : sidebar + colonne de contenu ---------------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
/* min-width:0 : sans lui, un tableau de 16 colonnes pousse la grille hors du viewport. */
.mainCol { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }

.sidebar {
  background: var(--h31-forest); color: var(--fg-on-dark-1);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  /* Le defilement est porte par .sidebarNav : un overflow ici rognerait le marqueur
     d'actif et les anneaux de focus. */
  overflow: hidden;
}
.sidebarBrand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.sidebarBrand img { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); }
.sidebarWordmark { font-family: var(--font-display); font-weight: var(--font-bold); font-size: var(--text-base); }
.sidebarWordmark span { color: var(--h31-sage); }

.sidebarNav {
  flex: 1; overflow-y: auto; padding: 0 var(--sp-3) var(--sp-4);
  scrollbar-width: thin; scrollbar-color: var(--fg-on-dark-2) transparent;
}
.sidebarNav ul { list-style: none; margin: 0; padding: 0; }
.navGroupLabel {
  margin: 0; padding: var(--sp-5) var(--sp-3) var(--sp-2);
  font-size: var(--text-xs); font-weight: var(--font-bold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--fg-on-dark-2); opacity: 0.6;
}
/* Seul filet de la navigation : il isole l'administration du travail quotidien. */
.navGroupOut { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--border-on-dark); }

.navItem {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: var(--sp-2) var(--sp-3); margin-bottom: 2px;
  border-radius: var(--radius-md); text-decoration: none;
  color: var(--fg-on-dark-2); font-size: var(--text-sm); font-weight: var(--font-medium);
  transition: background var(--transition-fast), color var(--transition-fast);
}
/* stroke: currentColor — l'icone suit la couleur de l'entree, survol et actif compris. */
.navIcon { width: 18px; height: 18px; flex: none; opacity: 0.85; }
.navItem:hover { background: var(--border-on-dark); color: var(--fg-on-dark-1); }
.navItem:hover .navIcon { opacity: 1; }
.navItem[aria-current="page"] .navIcon { opacity: 1; color: var(--h31-sage); }
/* Trois signaux pour l'entree active, dont deux non chromatiques : la graisse et
   aria-current. Le fond seul ne dit rien a un lecteur d'ecran. */
.navItem[aria-current="page"] {
  background: var(--h31-pine); color: var(--fg-on-dark-1); font-weight: var(--font-semibold);
}
.navItem[aria-current="page"]::before {
  content: ""; position: absolute; left: -3px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--h31-sage);
}
.navItem:focus-visible { outline: 2px solid var(--h31-sage); outline-offset: 1px; }

/* Le couple st-warn est une paire fond clair / texte fonce : illisible sur le forest. */
.navItem .pill { margin-left: auto; background: var(--h31-orange); color: var(--fg-on-dark-1); }
.navItem.navAlert::after {
  content: ""; margin-left: auto; width: 8px; height: 8px;
  border-radius: var(--radius-full); background: var(--h31-orange);
}

.sidebarFoot { border-top: 1px solid var(--border-on-dark); padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); }
.sidebarFoot .headerUser strong { color: var(--fg-on-dark-1); }
.sidebarFoot .headerUser span { color: var(--fg-on-dark-2); }

.topbarMenu, .sidebarClose {
  display: none; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-md); font-size: var(--text-xl); line-height: 1;
}
.topbarMenu { color: var(--fg1); }
.topbarMenu:hover { background: var(--h31-fog); }
.topbarMenu:focus-visible { outline: 2px solid var(--h31-forest); outline-offset: 2px; }
.sidebarClose { color: var(--fg-on-dark-2); margin-left: auto; }
.sidebarClose:hover { color: var(--fg-on-dark-1); background: var(--border-on-dark); }
.sidebarClose:focus-visible { outline: 2px solid var(--fg-on-dark-1); outline-offset: 2px; }

/* Barre d'etat : #log est ecrit depuis les trois fichiers JS, il doit rester visible. */
.statusBar {
  position: sticky; bottom: 0; z-index: 15;
  padding: var(--sp-3) var(--sp-7);
  background: rgba(246, 242, 236, 0.92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-subtle);
}

/* ---------------- Boutons ---------------- */
.btn {
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: var(--sp-3) var(--sp-5); font-size: var(--text-sm); font-weight: var(--font-semibold);
  cursor: pointer; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  min-height: 44px;
}
.btn.primary { background: var(--h31-forest); color: var(--fg-on-dark-1); }
.btn.primary:hover:not(:disabled) { background: var(--h31-forest-deep); }
.btn.secondary { background: var(--bg2); color: var(--h31-forest); border-color: var(--border-default); }
.btn.secondary:hover:not(:disabled) { background: var(--h31-fog); }
.btn.ghostOnDark { background: transparent; color: var(--fg-on-dark-1); border-color: var(--border-on-dark); }
.btn.ghostOnDark:hover { background: rgba(255, 255, 255, 0.08); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible, .linkBtn:focus-visible, .stBtn:focus-visible, .iconBtn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(111, 189, 124, 0.45);
}

.linkBtn {
  background: none; border: 0; padding: var(--sp-1) 0; cursor: pointer;
  color: var(--h31-teal); font-size: var(--text-sm); font-weight: var(--font-semibold);
  text-decoration: underline; text-underline-offset: 3px;
  /* Explicite : sinon le <button> prend le line-height UA et le <label> celui du body,
     et les deux libellés ne s'alignent plus dans .fileActions. */
  line-height: 1.4;
  transition: color var(--transition-fast);
}
.linkBtn:hover { color: var(--h31-forest); }
/* Neutralise le margin-bottom de la règle des labels de formulaire. */
label.linkBtn { display: inline-block; margin-bottom: 0; }

.iconBtn {
  background: none; border: 0; cursor: pointer; font-size: var(--text-2xl);
  line-height: 1; color: var(--fg3); padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-full); transition: color var(--transition-fast), background var(--transition-fast);
}
.iconBtn:hover { color: var(--fg1); background: var(--h31-fog); }

/* ---------------- Champs ---------------- */
label { display: block; color: var(--fg2); font-size: var(--text-sm); font-weight: var(--font-medium); margin-bottom: var(--sp-2); }
input, select, textarea {
  width: 100%; min-height: 44px;
  border: 1px solid var(--border-control); border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); font-family: inherit;
  background: var(--bg2); color: var(--fg1);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea { min-height: 0; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--h31-sage); box-shadow: 0 0 0 3px rgba(111, 189, 124, 0.18);
}
input[readonly] { background: var(--h31-fog); font-weight: var(--font-semibold); }

/* ---------------- Mise en page ---------------- */
main { flex: 1; padding: var(--sp-6) var(--sp-7) var(--sp-8); }
.card {
  background: var(--bg2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: var(--sp-5);
  box-shadow: var(--shadow-1); margin-bottom: var(--sp-5);
}
.sectionHead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.headActions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.fileCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.fileCard {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--sp-4); background: var(--bg2); min-width: 0;
  border-left: 4px solid var(--h31-sage);
}
.fileCard.missing { border-left-color: var(--h31-orange); background: var(--st-warn-bg); }
.fileName {
  font-weight: var(--font-semibold); margin-top: var(--sp-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fileName.missingText { color: var(--st-warn-text); }
.fileMeta { color: var(--fg3); font-size: var(--text-xs); margin-top: var(--sp-1); }
.fileActions { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); flex-wrap: wrap; }
.fileActions { align-items: center; }
.linkBtnStrong { color: var(--h31-forest); }

/* Lien SharePoint : la source de référence du fichier. */
.linkRow {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md); background: var(--st-done-bg); color: var(--st-done-text);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  overflow-wrap: anywhere;
}
.linkRow .fileMeta { color: inherit; opacity: 0.85; font-weight: var(--font-normal); }
.linkRow.linkRowBad { background: var(--st-bad-bg); color: var(--st-bad-text); }
.linkRow.linkRowNone { background: var(--h31-fog); color: var(--fg2); font-weight: var(--font-normal); }
.modalField { display: block; }

.params { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.actions { display: flex; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-4); flex-wrap: wrap; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.kpi { background: var(--bg2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-1); }
.kpi .label { font-size: var(--text-xs); color: var(--fg3); }
.kpi .value { font-size: var(--text-2xl); font-weight: var(--font-bold); margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }

.toolbar { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.toolbarFields { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.toolbarFields input, .toolbarFields select { width: auto; min-width: 200px; }

/* ---------------- Tableaux ---------------- */
.tablewrap { overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg2); }
table { border-collapse: collapse; width: 100%; font-size: var(--text-xs); }
th, td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
th {
  position: sticky; top: 0; background: var(--h31-fog); z-index: 2; text-align: left;
  font-weight: var(--font-semibold); color: var(--fg2);
}
tbody tr { transition: background var(--transition-fast); }
tbody tr:hover { background: var(--h31-bone); }
tr.activeRow { background: var(--st-done-bg); }
.supplier { font-weight: var(--font-semibold); color: var(--h31-pine); }

.pill {
  border-radius: var(--radius-pill); padding: 3px var(--sp-2);
  font-size: var(--text-xs); font-weight: var(--font-semibold); display: inline-block;
  /* Une pilule ne se coupe jamais : coupée, elle perd sa forme et décale la ligne. */
  white-space: nowrap;
}
.pill.ok, .pill.st-done { background: var(--st-done-bg); color: var(--st-done-text); }
.pill.warn, .pill.st-warn { background: var(--st-warn-bg); color: var(--st-warn-text); }
.pill.bad, .pill.top { background: var(--st-bad-bg); color: var(--st-bad-text); }
.pill.st-todo { background: var(--st-todo-bg); color: var(--st-todo-text); }
.pill.st-doing { background: var(--st-doing-bg); color: var(--st-doing-text); }
.pill.st-off { background: var(--st-off-bg); color: var(--st-off-text); }

/* Colonne Décision */
/* La colonne Décision porte l'action : elle reste épinglée à droite pendant que
   le reste du tableau défile. Blocs 1, 2 et 3 uniquement — le bloc 4 n'en a pas. */
#priorityBlock table th:last-child,
#advanceBlock table th:last-child,
#orderGroups table th:last-child,
#priorityBlock table td:last-child,
#advanceBlock table td:last-child,
#orderGroups table td:last-child {
  position: sticky;
  right: 0;
  /* Opaque, sinon les cellules qui passent dessous restent lisibles au travers. */
  background: var(--bg2);
  box-shadow: -10px 0 10px -10px rgba(13, 52, 44, 0.28);
}
#priorityBlock table th:last-child,
#advanceBlock table th:last-child,
#orderGroups table th:last-child {
  background: var(--h31-fog);
  /* Au-dessus de l'en-tête déjà collé en haut (z-index 2). */
  z-index: 3;
}
#priorityBlock table tbody tr:hover td:last-child,
#advanceBlock table tbody tr:hover td:last-child,
#orderGroups table tbody tr:hover td:last-child { background: var(--h31-bone); }

/* Les tableaux de résultat sont larges : on laisse les en-têtes et les libellés
   revenir à la ligne pour réduire le défilement horizontal. Les nombres, eux,
   restent sur une ligne — les couper les rendrait illisibles. */
#priorityBlock table th,
#advanceBlock table th,
#orderGroups table th { white-space: normal; max-width: 110px; vertical-align: bottom; }

#priorityBlock table td,
#advanceBlock table td,
#orderGroups table td { white-space: normal; max-width: 240px; }

#priorityBlock table td.num,
#advanceBlock table td.num,
#orderGroups table td.num,
#priorityBlock table td.decisionCell,
#advanceBlock table td.decisionCell,
#orderGroups table td.decisionCell { white-space: nowrap; max-width: none; }

.decisionCell { min-width: 148px; }

/* Action de mise en validation, sous le titre d'un fournisseur du bloc 3. */
.supplierNote {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4) 0;
}
.btnSmall { min-height: 36px; padding: var(--sp-2) var(--sp-4); }
/* Ligne deja portee par un devis non solde : visible mais non cochable. */
tr.rowLocked { opacity: 0.55; }
tr.rowLocked td { background: var(--h31-fog); }
.reqLine { width: 18px; min-height: 18px; accent-color: var(--h31-forest); }
.reqQty { width: 100px; min-height: 32px; padding: var(--sp-1) var(--sp-2); text-align: right; }

/* Arbitrage a la ligne : le CDG tranche OK / KO dans le tableau. */
.arbCell { min-width: 190px; }
.arbChoix { display: flex; gap: var(--sp-2); }
.arbBtn {
  display: inline-flex; align-items: center; gap: var(--sp-1); margin: 0; cursor: pointer;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  border: 1px solid var(--border-default); color: var(--fg2);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.arbBtn input { width: 14px; min-height: 14px; margin: 0; }
.arbBtn:has(input:checked).arbOk { background: var(--st-done-bg); color: var(--st-done-text); border-color: var(--st-done-text); }
.arbBtn:has(input:checked).arbKo { background: var(--st-bad-bg); color: var(--st-bad-text); border-color: var(--st-bad-text); }
.arbNote { margin-top: var(--sp-2); min-height: 34px; font-size: var(--text-xs); }

/* Section fournisseurs — listing */
.supplierTable { margin-top: var(--sp-4); max-height: calc(100vh - 320px); }
/* Activité : même maille que le listing fournisseurs, en plus haut — c'est
   l'écran où l'on fait défiler plusieurs centaines de lignes. */
.actTable { margin-top: var(--sp-4); max-height: calc(100vh - 300px); }
/* Séparateur de journée : Sarah travaille par lots hebdomadaires, la coupure
   par jour est sa maille de lecture. */
.actJour td {
  background: var(--h31-fog); color: var(--fg1);
  position: sticky; top: 33px; z-index: 1;
  padding: 0;
  /* Le trait doit contraster avec le fond DE LA BARRE, pas avec le blanc des lignes :
     --border-subtle (8 %) et meme --h31-stone sont du beige sur du beige, invisibles
     ici. On reprend le ton de l'ombre deja utilisee pour la colonne Decision.
     En box-shadow et non en border : la table est en border-collapse, ou la bordure
     appartient a la table et non a la cellule collante.
     Les deux traits sont necessaires : quand toutes les journees sont repliees, les
     barres se touchent, et sans celui du haut rien ne les separe. */
  box-shadow: inset 0 1px 0 var(--separateur-jour), inset 0 -1px 0 var(--separateur-jour);
}
/* Premiere barre juste sous l'en-tete colle : son trait du haut ferait doublon. */
.actTable tbody tr:first-child.actJour td { box-shadow: inset 0 -1px 0 var(--separateur-jour); }
/* L'en-tete de journee EST le bouton : la cible de clic couvre toute la ligne. */
.actJourBtn {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: var(--font-semibold); color: inherit; text-align: left;
  padding: var(--sp-2) var(--sp-3);
}
/* Pendant une recherche le bouton est desactive : il ne doit pas s'allumer au
   survol, ce serait promettre un clic qui ne se produira pas. */
.actJourBtn:not([disabled]):hover { color: var(--h31-teal); }
.actJourBtn:focus-visible { outline: 2px solid var(--h31-teal); outline-offset: -2px; }
/* Pendant une recherche le repli est desactive : le bouton ne doit pas faire
   croire a une action disponible. */
.actJourBtn[disabled] { cursor: default; }
.actJourBtn[disabled] .actChevron { visibility: hidden; }
/* --fg3 ne donne que 3,0:1 sur le beige de la barre, sous le minimum de 4,5:1.
   --fg2 monte a 5,7:1 sans changer la hierarchie visuelle. */
.actChevron { color: var(--fg2); font-size: var(--text-xs); width: 12px; }
.actJourN { font-weight: var(--font-normal); color: var(--fg2); margin-left: auto; }

/* Seules les lignes qui menent quelque part prennent le curseur de clic. */
.supplierTable tbody tr.ouvrable { cursor: pointer; }
.supplierTable td { vertical-align: middle; }
/* Le nom porte le seul bouton de la ligne : c'est lui qui donne l'accès clavier. */
.rowLink {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--h31-pine); font-weight: var(--font-semibold); text-align: left;
}
.rowLink:hover { text-decoration: underline; text-underline-offset: 3px; }
.rowLink:focus-visible { outline: 2px solid var(--h31-teal); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Une valeur absente ne doit pas peser autant qu'une valeur saisie. */
.vide { color: var(--h31-stone); }
/* L'en-tête entier est le bouton de tri : la zone cliquable couvre la cellule. */
.thSort {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit;
  color: inherit; font-weight: var(--font-semibold); width: 100%; text-align: inherit;
}
.thSort:hover { color: var(--h31-teal); }
.thSort:focus-visible { outline: 2px solid var(--h31-teal); outline-offset: 2px; }
.thSortOn { color: var(--h31-forest); }
#supplierSearch { width: auto; min-width: 240px; }
#supplierView { width: auto; min-width: 220px; }
/* Sans ça, les champs héritent du width:100% global et la barre de filtres
   s'empile sur cinq lignes au lieu de tenir sur une. */
#actSearch { width: auto; min-width: 260px; }
#actPeriode, #actStatut, #actAuteur { width: auto; min-width: 170px; }
.labelHint { font-weight: var(--font-normal); color: var(--fg3); font-size: var(--text-xs); }
.pill.st-bad { background: var(--st-bad-bg); color: var(--st-bad-text); }
.stBtn {
  border: 0; border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs); font-weight: var(--font-semibold); cursor: pointer;
  transition: filter var(--transition-fast);
}
.stBtn:hover { filter: brightness(0.94); }
.stBtn.st-todo { background: var(--st-todo-bg); color: var(--st-todo-text); }
.stBtn.st-doing { background: var(--st-doing-bg); color: var(--st-doing-text); }
.stBtn.st-done { background: var(--st-done-bg); color: var(--st-done-text); }
.stBtn.st-warn { background: var(--st-warn-bg); color: var(--st-warn-text); }
.stBtn.st-off { background: var(--st-off-bg); color: var(--st-off-text); }
.stWho { display: block; color: var(--fg3); font-size: var(--text-xs); margin-top: 2px; }

/* ---------------- Blocs de résultat ---------------- */
.summaryGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.groupCard { background: var(--bg2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-4); }
.groupTitle { font-weight: var(--font-bold); color: var(--h31-pine); }
.groupMeta { color: var(--fg3); font-size: var(--text-xs); margin-top: var(--sp-1); }

.priorityBox { border: 1px solid var(--h31-peach); background: var(--st-warn-bg); border-radius: var(--radius-xl); padding: var(--sp-4); margin-bottom: var(--sp-5); }
.priorityBox h3 { color: var(--st-warn-text); margin-bottom: var(--sp-2); }
.safeBox { border: 1px solid var(--h31-sage); background: var(--st-done-bg); border-radius: var(--radius-xl); padding: var(--sp-4); margin-top: var(--sp-5); }
.safeBox h3 { color: var(--st-done-text); margin-bottom: var(--sp-2); }

.supplierDetails { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--bg2); margin: var(--sp-3) 0; overflow: hidden; }
.supplierDetails summary {
  cursor: pointer; list-style: none; padding: var(--sp-3) var(--sp-4);
  background: var(--h31-fog); border-left: 4px solid var(--h31-sage);
  font-weight: var(--font-bold); color: var(--h31-pine);
}
.supplierDetails summary::-webkit-details-marker { display: none; }
.brandBlock { padding: var(--sp-3) var(--sp-4); }
.brandTitle { font-weight: var(--font-semibold); color: var(--fg2); margin-bottom: var(--sp-2); font-size: var(--text-sm); }

.debug {
  margin-top: var(--sp-2); background: var(--h31-fog); border: 1px solid var(--border-subtle);
  padding: var(--sp-3); border-radius: var(--radius-md); max-height: 160px; overflow: auto;
  white-space: pre-wrap; font-size: var(--text-xs); font-family: var(--font-mono);
}

/* ---------------- Activité ---------------- */
.activityList { list-style: none; margin: 0; padding: 0; }
.activityList li {
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.activityList li:last-child { border-bottom: 0; }
.activityWhen { color: var(--fg3); font-size: var(--text-xs); margin-left: auto; }

/* ---------------- Modales ---------------- */
.modalOverlay {
  position: fixed; inset: 0; background: rgba(13, 52, 44, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4); z-index: 100; overflow: auto;
}
.modalCard {
  background: var(--bg2); border-radius: var(--radius-xl); box-shadow: var(--shadow-3);
  /* On prend toute la hauteur disponible moins le retrait de l'overlay (--sp-4
     en haut et en bas) : ce qui reste à faire défiler, c'est le tableau, pas la
     fenêtre entière. */
  padding: var(--sp-5); width: min(560px, 100%); max-height: calc(100vh - var(--sp-6)); overflow: auto;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
/* En-tête, commentaire et boutons gardent leur hauteur : seul le tableau cède. */
.modalCard > * { flex-shrink: 0; }
.modalCard.wide { width: min(900px, 100%); }
/* Fenêtres qui portent un tableau de lignes : assez large pour qu'aucune colonne
   ne parte en défilement horizontal. */
.modalCard.xwide { width: min(1240px, 100%); }
/* Le tableau de lignes occupe tout ce que les autres blocs laissent. */
.modalLines { flex: 1 1 auto; min-height: 200px; }
/* Lignes resserrees : chaque pixel de hauteur gagne est une reference de plus
   visible sans defiler. La cible de clic reste celle de l'input, pas de la cellule. */
.modalLines td { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.modalHead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.modalMeta { color: var(--fg3); font-size: var(--text-xs); margin-top: var(--sp-1); }
.lastEdit { font-size: var(--text-sm); color: var(--fg2); background: var(--h31-fog); padding: var(--sp-3); border-radius: var(--radius-md); }
.modalGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); }
.modalActions { display: flex; justify-content: flex-end; gap: var(--sp-3); }
.histBox summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--h31-teal); }
.histList { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.histList li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-xs); }
.histNote { color: var(--fg2); font-style: italic; }

/* ---------------- Écrans d'authentification ---------------- */
.authScreen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.authCard {
  background: var(--bg2); border-radius: var(--radius-xl); box-shadow: var(--shadow-2);
  padding: var(--sp-7); width: min(420px, 100%); display: flex; flex-direction: column; gap: var(--sp-4);
}
.authHead { text-align: center; margin-bottom: var(--sp-2); }
.authHead p { margin-top: var(--sp-2); }

.usersGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); align-items: end; }
/* Le formulaire de création et le tableau des comptes ne doivent pas se toucher. */
#adminSection > .formNote,
#adminSection > .tablewrap { margin-top: var(--sp-5); }
.rowActions { display: flex; gap: var(--sp-3); white-space: nowrap; }

/* ---------------- Responsive ---------------- */
/* ---------------- Tiroir sous 1024px (seuil de la charte) ---------------- */
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  /* Le transform reste sur .sidebar SEULE : sur un ancetre commun il creerait un
     bloc contenant et decollerait les colonnes Decision et les en-tetes. */
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 200;
    width: var(--sidebar-w); height: 100vh;
    transform: translateX(-100%); transition: transform var(--transition-base);
  }
  body.drawerOpen .sidebar { transform: translateX(0); box-shadow: var(--shadow-3); }
  .sidebarScrim {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(13, 52, 44, 0.4); backdrop-filter: blur(3px);
  }
  .topbarMenu, .sidebarClose { display: inline-flex; }
}

@media (max-width: 820px) {
  main { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .topbar { padding: var(--sp-4); }
  .topbar h1 { font-size: var(--text-lg); }
  .statusBar { padding: var(--sp-3) var(--sp-4); }
  .modalCard { padding: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}