/*
 * Feuille propre au bureau de Thalamus. La feuille compilée de Filament ne contient que ses classes :
 * nos gabarits utilisent ces classes préfixées « th- » (leçon de Synapse et d'Axone).
 * Jetons de la maquette du 2026-10-25, famille « Environnement IA amplifié » : style commun à toutes
 * les applications, seul l'accent change, ici bleu ciel #4FB2F5, assombri en clair pour le texte
 * (décision A4, EF-04). Les trois domaines de Cortex forment une rampe d'une seule teinte.
 */
:root {
  --th-ground: #F5F7FB; --th-surface: #FFFFFF; --th-raised: #F1F4F9; --th-active: #E6ECF4;
  --th-border: #E1E6EE; --th-rule: #ECEFF4; --th-control: #C7D0DC;
  --th-text: #15213A; --th-muted: #4B5870; --th-faint: #5D6A81;
  --th-primary: #15213A; --th-on-primary: #FFFFFF;
  --th-hue: #1665A3; --th-hue-mark: #2F8FD8; --th-hue-tint: #E2EFFA;
  --th-d1: #155C99; --th-d2: #2F8FD8; --th-d3: #7DBDEB; --th-d4: #B9DAF2; --th-cancel: #8792A6;
  --th-positive: #1E7A4C; --th-pos-bg: #DCF3E6; --th-pos-ink: #12512F;
  --th-negative: #C0262D; --th-neg-bg: #FDE8E7; --th-neg-ink: #8A1C21;
  --th-warn-bg: #FFF1D6; --th-warn-ink: #7A4300;
  --th-neutral-bg: #EAEEF4; --th-neutral-ink: #3D4960;
  --th-grid: #E3E8EF; --th-track: #E6EBF2; --th-seg-on: #FFFFFF;
  --th-id-cortex: #0F8F78; --th-id-synapse: #B4690E; --th-id-axone: #C93A5C; --th-id-thalamus: #1F7FC4;
  --th-r-card: 16px; --th-r-inner: 10px; --th-gap: 16px; --th-pad: 20px;
}
.dark {
  --th-ground: #08152F; --th-surface: #0E1D3B; --th-raised: #132447; --th-active: #1B2E56;
  --th-border: #1C2E52; --th-rule: #172845; --th-control: #34496F;
  --th-text: #F4F7FC; --th-muted: #B6C2D8; --th-faint: #98A6BF;
  --th-primary: #F4F7FC; --th-on-primary: #08152F;
  --th-hue: #7CC8FB; --th-hue-mark: #4FB2F5; --th-hue-tint: #123357;
  --th-d1: #A9DCFF; --th-d2: #4FB2F5; --th-d3: #2470B0; --th-d4: #1A4F80; --th-cancel: #6F7E9A;
  --th-positive: #5AD394; --th-pos-bg: #123323; --th-pos-ink: #8BE7B7;
  --th-negative: #FF808B; --th-neg-bg: #3B1824; --th-neg-ink: #FFB9BF;
  --th-warn-bg: #39290E; --th-warn-ink: #FFD08A;
  --th-neutral-bg: #1A2B4D; --th-neutral-ink: #C9D3E5;
  --th-grid: #1D3055; --th-track: #1C2E52; --th-seg-on: #2A4170;
  --th-id-cortex: #42DDC1; --th-id-synapse: #FFBB66; --th-id-axone: #FF7896; --th-id-thalamus: #4FB2F5;
}

.th-bureau { container: bureau / inline-size; color: var(--th-text); line-height: 1.45; display: flex; flex-direction: column; gap: var(--th-gap); }
.th-bureau h2, .th-bureau h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.th-bureau p { margin: 0; }
.th-num { font-variant-numeric: tabular-nums; }
.th-muted { color: var(--th-muted); }
.th-faint { color: var(--th-faint); }
.th-small { font-size: .9rem; }
.th-bureau a { color: inherit; text-decoration: none; }
.th-bureau a.th-lien { color: var(--th-hue); font-weight: 500; }
.th-bureau a.th-lien:hover { text-decoration: underline; }
.th-bureau :focus-visible { outline: 2px solid var(--th-hue-mark); outline-offset: 2px; border-radius: 6px; }

/* En-tête : date, phase, rituels (CdC 9, EF-07, EF-12) */
.th-entete { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 12px 20px; background: var(--th-surface); border: 1px solid var(--th-border); border-radius: var(--th-r-card); }
.th-contexte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-contexte .th-date { font-weight: 600; font-size: 1.15rem; }
.th-contexte .th-phase { color: var(--th-muted); font-size: .95rem; }
.th-rituels { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.th-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; height: 28px; padding: 0 12px; border-radius: 999px; font-size: .9rem; font-weight: 500; }
.th-chip svg { width: 14px; height: 14px; flex: none; }
.th-chip.neg { background: var(--th-neg-bg); color: var(--th-neg-ink); }
.th-chip.pos { background: var(--th-pos-bg); color: var(--th-pos-ink); }
.th-chip.warn { background: var(--th-warn-bg); color: var(--th-warn-ink); }
.th-chip.neutral { background: var(--th-neutral-bg); color: var(--th-neutral-ink); }
.th-chip.hue { background: var(--th-hue-tint); color: var(--th-hue); }
.th-chip.faded { opacity: .62; }
.th-chip.small { height: 24px; padding: 0 10px; font-size: .84rem; }

.th-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--th-raised); border-radius: 999px; }
.th-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--th-muted); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; }
.th-seg button[aria-pressed="true"] { background: var(--th-seg-on); color: var(--th-text); box-shadow: 0 1px 2px rgba(8,21,47,.08); }
.th-seg button[disabled] { color: var(--th-faint); opacity: .55; cursor: not-allowed; }

/*
 * La grille (EF-15) calcule elle-même son nombre de colonnes selon la largeur du bureau (requête de
 * conteneur : le menu replié ou déplié compte) : six sur le Samsung Odyssey Neo G9 32:9, quatre sur un
 * grand écran, trois sur le MacBook, deux sur une tablette, une sur un téléphone. Une zone large de
 * trois colonnes se replie sur ce qui existe.
 */
.th-grille { --th-cols: 1; display: grid; gap: var(--th-gap); grid-template-columns: repeat(var(--th-cols), minmax(0, 1fr)); grid-auto-flow: row dense; align-items: stretch; }
@container bureau (min-width: 860px) { .th-grille { --th-cols: 2; } }
@container bureau (min-width: 1240px) { .th-grille { --th-cols: 3; } }
@container bureau (min-width: 2100px) { .th-grille { --th-cols: 4; } }
@container bureau (min-width: 3000px) { .th-grille { --th-cols: 6; } }
.th-zone { grid-column: span 1; min-width: 0; }
@container bureau (min-width: 860px) { .th-zone.th-w2, .th-zone.th-w3 { grid-column: span 2; } }
@container bureau (min-width: 1240px) { .th-zone.th-w3 { grid-column: span 3; } }

.th-card { background: var(--th-surface); border: 1px solid var(--th-border); border-radius: var(--th-r-card); padding: var(--th-pad); min-width: 0; display: flex; flex-direction: column; height: 100%; }
.th-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.th-card-head h2 { font-size: 1.15rem; }
.th-card-head .th-meta { color: var(--th-muted); font-size: .9rem; }
.th-constat { margin-top: 6px; color: var(--th-muted); font-size: .98rem; max-width: 80ch; }
.th-constat b { color: var(--th-text); font-weight: 600; }
.th-vide { margin-top: 12px; padding: 12px 14px; border-radius: var(--th-r-inner); background: var(--th-raised); color: var(--th-muted); font-size: .95rem; }
.th-avert { margin-top: 10px; padding: 8px 12px; border-radius: var(--th-r-inner); background: var(--th-warn-bg); color: var(--th-warn-ink); font-size: .9rem; }

/* Aujourd'hui, trois choses (CdC 21.3, EF-14) */
.th-ordre { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.th-ordre li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 10px 16px; background: var(--th-raised); border-radius: var(--th-r-inner); }
.th-rang { grid-row: span 3; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--th-surface); border: 1px solid var(--th-border); font-weight: 600; font-size: 1.07rem; }
.th-ordre h3 { font-size: 1.2rem; line-height: 1.25; }
.th-pourquoi { color: var(--th-muted); }
.th-pourquoi b { color: var(--th-text); font-weight: 500; }
.th-tags { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 2px; color: var(--th-muted); font-size: .9rem; }
.th-tags span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.th-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; display: inline-block; background: var(--th-faint); }
.th-dot.cortex { background: var(--th-id-cortex); } .th-dot.synapse { background: var(--th-id-synapse); }
.th-dot.axone { background: var(--th-id-axone); } .th-dot.thalamus { background: var(--th-id-thalamus); }
.th-pied { margin-top: auto; padding-top: 12px; color: var(--th-faint); font-size: .86rem; }

/* Pilotage de la phase (CdC 21.1, EF-08 à EF-10) */
.th-kpis { margin-top: 8px; display: flex; flex-direction: column; }
.th-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 16px; align-items: center; padding: 9px 0; border-top: 1px solid var(--th-rule); }
.th-kpi:first-child { border-top: 0; }
.th-kpi .th-label { font-weight: 500; }
.th-kpi .th-sub { grid-column: 1; color: var(--th-muted); font-size: .9rem; }
.th-kpi .th-val { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-size: 1.85rem; font-weight: 500; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.th-kpi .th-val small { font-size: .9rem; color: var(--th-muted); font-weight: 400; margin-left: 3px; letter-spacing: 0; }
.th-kpi .th-val.th-inconnu { color: var(--th-faint); }
.th-kpi .th-etat { grid-row: 1 / span 2; grid-column: 3; display: flex; justify-content: flex-end; min-width: 132px; }
.th-mieux { color: var(--th-positive); font-weight: 500; }
.th-pire { color: var(--th-negative); font-weight: 500; }

/* Important et urgent (CdC 21.2, EF-13) */
.th-matrice { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
.th-case { padding: 12px; border-radius: var(--th-r-inner); background: var(--th-raised); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.th-case.th-premiere { background: var(--th-hue-tint); }
.th-case h3 { font-size: .95rem; display: flex; justify-content: space-between; gap: 8px; }
.th-case h3 .th-n { color: var(--th-muted); font-weight: 500; }
.th-case .th-conseil { color: var(--th-faint); font-size: .84rem; margin-top: -6px; }
.th-case ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.th-case li { font-size: .93rem; line-height: 1.3; }
.th-case li .th-raison { display: block; color: var(--th-muted); font-size: .84rem; margin-top: 2px; }
.th-case .th-plus { color: var(--th-hue); font-size: .88rem; font-weight: 500; margin-top: auto; }

/* Tableau de charge (CdC 4.3, EF-11) */
.th-controles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.th-legende { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 10px; color: var(--th-muted); font-size: .9rem; }
.th-legende span { display: inline-flex; align-items: center; gap: 6px; }
.th-legende i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.th-graphe { position: relative; margin-top: 6px; }
.th-graphe svg { display: block; width: 100%; overflow: visible; }
.th-graphe text { font-family: inherit; font-size: 11.5px; fill: var(--th-faint); font-variant-numeric: tabular-nums; }
.th-graphe .th-cap { fill: var(--th-muted); font-weight: 500; }
.th-graphe .th-ligne-grille { stroke: var(--th-grid); stroke-width: 1; }
.th-graphe .th-axe { stroke: var(--th-muted); stroke-width: 1.5; }
.th-graphe .th-cible { fill: transparent; cursor: crosshair; }
.th-graphe .th-cible:hover { fill: var(--th-text); fill-opacity: .05; }
.th-graphe .th-courbe { fill: none; stroke: var(--th-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.th-g1 { fill: var(--th-d1); } .th-g2 { fill: var(--th-d2); } .th-g3 { fill: var(--th-d3); } .th-g4 { fill: var(--th-d4); }
.th-stock { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--th-muted); font-size: .9rem; }
.th-stock b { color: var(--th-text); font-weight: 600; }
.th-bulle { position: absolute; pointer-events: none; z-index: 5; min-width: 190px; padding: 8px 10px; border-radius: 8px; background: var(--th-primary); color: var(--th-on-primary); font-size: .9rem; line-height: 1.35; box-shadow: 0 6px 18px rgba(8,21,47,.25); display: none; }
.th-detail { margin-top: 12px; }
.th-detail summary { cursor: pointer; color: var(--th-hue); font-weight: 500; font-size: .92rem; }
.th-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 8px; }
.th-table th { text-align: left; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--th-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--th-rule); }
.th-table td { padding: 6px 8px; border-bottom: 1px solid var(--th-rule); }
.th-table tr:last-child td { border-bottom: 0; }
.th-table .th-n { text-align: right; font-variant-numeric: tabular-nums; }

/* Piles (EF-17) et Systèmes (EF-16) */
.th-lignes { margin-top: 8px; display: flex; flex-direction: column; }
.th-pile { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 8px; border-top: 1px solid var(--th-rule); }
.th-pile:first-child { border-top-color: transparent; }
.th-pile:hover { background: var(--th-raised); }
.th-pile .th-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.th-pile b { font-weight: 600; }
.th-pile .th-chiffres { color: var(--th-muted); font-size: .92rem; }
.th-pile .th-chiffres strong { color: var(--th-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.th-sys { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--th-rule); font-size: .93rem; }
.th-sys:first-child { border-top: 0; }
.th-sys .th-nom { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.th-sys .th-info { grid-column: 1 / -1; color: var(--th-muted); font-size: .86rem; }
.th-barre { height: 8px; border-radius: 999px; background: var(--th-track); overflow: hidden; }
.th-barre i { display: block; height: 100%; border-radius: 999px; background: var(--th-hue-mark); }
.th-barre i.th-plein { background: var(--th-negative); }
.th-montant { text-align: right; color: var(--th-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.th-montant b { color: var(--th-text); font-weight: 500; }

.th-pied-bureau { color: var(--th-faint); font-size: .84rem; display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; }

/* Réglage du bureau (EF-15) */
.th-reglage { display: grid; gap: var(--th-gap); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 1100px) { .th-reglage { grid-template-columns: 1fr; } }
.th-reglage-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--th-rule); }
.th-reglage-ligne:first-child { border-top: 0; }
.th-reglage-ligne.th-cachee { opacity: .55; }
.th-fleches { display: flex; flex-direction: column; gap: 2px; }
.th-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--th-control); background: var(--th-surface); color: var(--th-text); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; }
.th-bouton:hover { background: var(--th-raised); }
.th-bouton[disabled] { opacity: .4; cursor: not-allowed; }
.th-bouton.th-icone { width: 30px; padding: 0; }
.th-bouton.th-principal { background: var(--th-primary); color: var(--th-on-primary); border-color: var(--th-primary); }
.th-apercu { display: grid; gap: 6px; margin-top: 8px; grid-auto-flow: row dense; }
.th-apercu div { border-radius: 6px; background: var(--th-hue-tint); color: var(--th-hue); font-size: .78rem; font-weight: 600; padding: 10px 8px; min-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 759px) {
  .th-entete { padding: 12px 14px; }
  .th-rituels { margin-left: 0; width: 100%; }
  .th-card { padding: 16px; }
  .th-ordre li { grid-template-columns: 32px 1fr; padding: 12px; }
  .th-rang { width: 30px; height: 30px; }
  .th-kpi { grid-template-columns: minmax(0, 1fr) auto; }
  .th-kpi .th-etat { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
  .th-matrice { grid-template-columns: 1fr; }
  .th-reglage-ligne { grid-template-columns: 36px minmax(0, 1fr); }
  .th-reglage-ligne > .th-seg, .th-reglage-ligne > .th-bouton { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .th-seg button, .th-pile, .th-bouton { transition: background-color .15s ease, opacity .15s ease; }
}