/* =====================================================================
   Design System — Application Budgétaire Gendarmerie
   §7 Directives UI/UX : épuré, moderne, clair/sombre automatique,
   code couleur sémantique.
   ===================================================================== */

:root {
  --bg: #f5f6f8;
  --bg-elevated: #ffffff;
  --bg-subtle: #eef0f3;
  --border: #e2e5ea;
  --text: #1a1d24;
  --text-muted: #6b7280;
  --text-faint: #9aa1ac;
  --accent: #3b5bfd;
  --accent-fg: #ffffff;
  --accent-soft: #e8ecff;

  --vert: #16a34a;
  --vert-bg: #e9f9ef;
  --bleu: #2563eb;
  --bleu-bg: #eaf1ff;
  --orange: #d97706;
  --orange-bg: #fff3e0;
  --rouge: #dc2626;
  --rouge-bg: #fdeaea;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
  --radius: 10px;
  --radius-lg: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1116;
    --bg-elevated: #171a21;
    --bg-subtle: #1d212a;
    --border: #2a2f3a;
    --text: #e7e9ee;
    --text-muted: #9aa1ac;
    --text-faint: #6b7280;
    --accent: #6d8bff;
    --accent-fg: #0f1116;
    --accent-soft: #202749;

    --vert: #34d399;
    --vert-bg: #12291f;
    --bleu: #60a5fa;
    --bleu-bg: #16233d;
    --orange: #fbbf24;
    --orange-bg: #332411;
    --rouge: #f87171;
    --rouge-bg: #3a1717;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --bg: #0f1116; --bg-elevated: #171a21; --bg-subtle: #1d212a; --border: #2a2f3a;
  --text: #e7e9ee; --text-muted: #9aa1ac; --text-faint: #6b7280;
  --accent: #6d8bff; --accent-fg: #0f1116; --accent-soft: #202749;
  --vert: #34d399; --vert-bg: #12291f; --bleu: #60a5fa; --bleu-bg: #16233d;
  --orange: #fbbf24; --orange-bg: #332411; --rouge: #f87171; --rouge-bg: #3a1717;
}
:root[data-theme="light"] {
  --bg: #f5f6f8; --bg-elevated: #ffffff; --bg-subtle: #eef0f3; --border: #e2e5ea;
  --text: #1a1d24; --text-muted: #6b7280; --text-faint: #9aa1ac;
  --accent: #3b5bfd; --accent-fg: #ffffff; --accent-soft: #e8ecff;
  --vert: #16a34a; --vert-bg: #e9f9ef; --bleu: #2563eb; --bleu-bg: #eaf1ff;
  --orange: #d97706; --orange-bg: #fff3e0; --rouge: #dc2626; --rouge-bg: #fdeaea;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; letter-spacing: -.01em; }
a { color: var(--accent); }
button { font-family: inherit; }

/* --- Layout ----------------------------------------------------------- */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 232px; flex-shrink: 0;
  background: var(--bg-elevated); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 16px 12px;
}
.sidebar__brand { font-weight: 700; font-size: 15px; padding: 8px 10px 20px; }
.sidebar__brand small { display: block; font-weight: 400; color: var(--text-muted); font-size: 11px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 25px; border-radius: var(--radius); color: var(--text-muted);
  cursor: pointer; font-size: 13.5px; font-weight: 500; margin-bottom: 2px;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--bg-subtle); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-category {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0063ff; padding: 14px 12px 4px;
}
.nav-category:first-child { padding-top: 4px; }
.sidebar__footer { margin-top: auto; padding: 10px; font-size: 12px; color: var(--text-faint); }

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 16px;
  padding: 0 24px; border-bottom: 1px solid var(--border); background: var(--bg-elevated);
}
.topbar__title { font-size: 16px; font-weight: 600; flex-shrink: 0; }
.topbar__spacer { flex: 1; }
.content { flex: 1; overflow-y: auto; padding: 24px; }

.year-select {
  width: auto; flex-shrink: 0; padding: 6px 10px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-subtle); color: var(--text); font-size: 13px; font-weight: 500;
}
.badge-statut-annee {
  flex-shrink: 0; white-space: nowrap; font-size: 12px; padding: 4px 11px; border-radius: 999px; font-weight: 600;
}
.badge-statut-annee.previsionnelle { background: var(--bleu-bg); color: var(--bleu); }
.badge-statut-annee.actee { background: var(--vert-bg); color: var(--vert); }

/* --- Search (Ctrl+K) ---------------------------------------------------- */
.search-trigger {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-subtle);
  color: var(--text-muted); font-size: 13px; cursor: pointer; min-width: 280px;
}
.search-trigger kbd {
  margin-left: auto; font-size: 11px; padding: 1px 6px; border-radius: 5px;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-faint);
}
.search-overlay {
  position: fixed; inset: 0; background: rgba(10, 12, 16, .5); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.search-panel {
  width: 560px; max-width: 92vw; background: var(--bg-elevated); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden;
}
.search-panel input {
  width: 100%; border: none; background: transparent; padding: 18px 20px; font-size: 16px;
  color: var(--text); outline: none; border-bottom: 1px solid var(--border);
}
.search-results { max-height: 50vh; overflow-y: auto; padding: 8px; }
.search-result-item {
  padding: 10px 12px; border-radius: var(--radius); cursor: pointer; display: flex;
  justify-content: space-between; gap: 10px; align-items: center;
}
.search-result-item:hover { background: var(--bg-subtle); }
.search-result-item .type-tag { font-size: 11px; color: var(--text-faint); }

/* --- Cards / KPI -------------------------------------------------------- */
.grid { display: grid; gap: 16px; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 13px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Carte de catégorie (Niveau 2) cliquable pour filtrer le tableau Niveau 3. */
.kpi-categorie-carte { cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.kpi-categorie-carte:hover { box-shadow: var(--shadow-md); }
.kpi-categorie-carte.active { border-color: var(--categorie-couleur, var(--accent)); box-shadow: 0 0 0 2px var(--categorie-couleur, var(--accent)); }

.kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Variante compacte pour des indicateurs secondaires côte à côte (ex: Niveau 2
   comparatif par catégorie) : évite le retour à la ligne disgracieux d'une
   valeur composite "X / Y" à la taille normale (26px) dans une colonne étroite. */
.kpi-value--compact { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-top: 4px; white-space: nowrap; }

.kpi-value.ok { color: var(--vert); }
.kpi-value.warn { color: var(--orange); }
/* Indicateur "dont ..." : information complémentaire déjà incluse dans un autre total
   affiché à côté (ex: "Dont Prévisionnel" est un sous-ensemble de "Total") — grisé
   pour ne pas rivaliser visuellement avec les montants principaux. */
.kpi-value.muted { color: var(--text-faint); }
.kpi-value.danger { color: var(--rouge); animation: pulse-danger 1.4s ease-in-out infinite; }

/* Utilitaires de couleur réutilisables sur n'importe quel élément (ex: un <span>
   isolé dans une valeur composite "X / Y"), contrairement à .kpi-value.ok/.danger
   qui exigent la classe .kpi-value sur le même élément. */
.text-ok { color: var(--vert); }
.text-danger { color: var(--rouge); }
.valeur-previsionnelle { color: var(--bleu); }

/* --- Tuiles Niveau 1 (§2.1.2) : mise en avant visuelle des 5 indicateurs
   globaux — BASE Globale à gauche (sur 2 rangées), Consommé/Prévisionnel
   au centre, Reste/Reste Prévisionnel à droite, chacun coloré par famille. -- */
.kpi-showcase {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  gap: 16px;
}
.kpi-tile {
  background: var(--bg-elevated); border-radius: var(--radius-lg); border: 1.5px solid var(--border);
  padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.kpi-tile--base { grid-row: span 2; justify-content: center; }
.kpi-tile__titre {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: 9px; margin-bottom: 10px; border-bottom: 1px dotted currentColor;
}
.kpi-tile--base .kpi-tile__titre { font-size: 14px; }
.kpi-tile__valeur { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.kpi-tile--base .kpi-tile__valeur { font-size: 34px; }
.kpi-tile__sub { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }

.kpi-tile--base { border-color: var(--bleu); }
.kpi-tile--base .kpi-tile__titre, .kpi-tile--base .kpi-tile__valeur { color: var(--bleu); }

.kpi-tile--ok { border-color: var(--vert); }
.kpi-tile--ok .kpi-tile__titre, .kpi-tile--ok .kpi-tile__valeur { color: var(--vert); }

/* --- Variante "flux" (test, cf. §2.1.2 RECAP_PROJET) : les 5 tuiles alignées
   sur une seule rangée dans l'ordre de dépendance du calcul (BASE → Consommé
   → Reste → Prévisionnel → Reste Prévisionnel), la tuile pivot (Reste) mise en
   valeur en plus grand pour marquer visuellement qu'elle est LE résultat
   intermédiaire dont dépend le Reste Prévisionnel. Coexiste avec
   `.kpi-showcase` (non modifié) pour permettre un retour en arrière trivial :
   il suffit de changer la classe du conteneur et l'ordre des tuiles dans
   `Dashboard.render()`, aucune des deux structures CSS n'a été touchée. */
.kpi-flow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kpi-flow .kpi-tile { flex: 1 1 170px; }
.kpi-flow .kpi-tile--pivot { flex-basis: 210px; padding: 26px 22px; box-shadow: var(--shadow-md); }
.kpi-flow .kpi-tile--pivot .kpi-tile__titre { font-size: 14px; }
.kpi-flow .kpi-tile--pivot .kpi-tile__valeur { font-size: 32px; }

.kpi-tile--previsionnel { border-color: var(--orange); }
.kpi-tile--previsionnel .kpi-tile__titre, .kpi-tile--previsionnel .kpi-tile__valeur { color: var(--orange); }

.kpi-tile--danger { border-color: var(--rouge); }
.kpi-tile--danger .kpi-tile__titre, .kpi-tile--danger .kpi-tile__valeur { color: var(--rouge); }

/* --- Cartes KPI Niveau 1 (cf. maquette kpi-reporting.png) : 3 cartes (Budget
   Alloué vert, Budget Restant orange/pivot, Budget Restant Prévisionnel
   rouge) regroupées dans un `.card` englobant (même esprit que `.card
   .kpi-categorie-carte` au Niveau 2 : un cadre neutre contenant des tuiles
   colorées), plutôt qu'un aplat de couleur plein. Fond transparent — la
   bordure et le texte portent la couleur de famille, via `currentColor` posé
   une fois sur `.kpi-report-carte--*` (les traits de séparation internes
   restent neutres, cf. `.kpi-report-carte__trait` plus bas).
   Couleurs volontairement fixes (pas les variables --vert/--orange/--rouge,
   éclaircies en thème sombre) pour rester identiques dans les deux thèmes.
   Le texte de formule, autrefois toujours visible sous chaque tuile, est
   dans le (i) affiché au survol via le mécanisme `.tooltip` existant (§7). */
.kpi-report { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kpi-report-carte { background: transparent; border-radius: var(--radius); border: 1.5px solid currentColor; padding: 12px 14px; }
.kpi-report-carte--alloue { color: #16a34a; }
.kpi-report-carte--restant { color: #d97706; }
.kpi-report-carte--restant-previsionnel { color: #dc2626; }
.kpi-report-carte.danger { color: #dc2626; }

/* Valeur centrée (horizontalement + verticalement) dans l'espace restant sous
   l'en-tête/le trait, quelle que soit la hauteur de ceux-ci (titre sur une ou
   deux lignes, tailles "mini") : flex column sur la carte, la valeur prend le
   reste de la hauteur (`flex:1`) et centre son propre contenu — plus robuste
   qu'un padding-top fixe, qui ne suit pas si l'en-tête change de hauteur. */
.kpi-report-carte--restant-previsionnel { display: flex; flex-direction: column; }
.kpi-report-carte--restant-previsionnel .kpi-report-carte__valeur {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0;
}

.kpi-report-carte__entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* `color: inherit` nécessaire pour l'emporter sur `.card h3` (texte gris) : même
   spécificité, cette règle gagne car déclarée après dans la feuille de style. */
.kpi-report-carte__entete h3 { color: inherit; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* Trait neutre (gris translucide), volontairement indépendant de la couleur de
   famille de la carte — simple séparateur visuel, pas un élément porteur de sens. */
.kpi-report-carte__trait { border: none; border-top: 2px solid rgb(128 128 128 / 20%); margin: 6px 0 8px; }
.kpi-report-carte__trait--sous { margin: 4px 0 6px; }

.kpi-report-carte__valeur { font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.kpi-report-carte__valeur.danger { animation: pulse-danger 1.4s ease-in-out infinite; }
/* Mise en avant : seule la carte Budget Restant Prévisionnel a une valeur agrandie. */
.kpi-report-carte--restant-previsionnel .kpi-report-carte__valeur { font-size: 40px; }

/* Calé à droite (Consommé Acté / Consommé Prévisionnel), pour distinguer
   visuellement ce second indicateur du montant principal aligné à gauche. */
.kpi-report-carte__sous { margin-top: 8px; text-align: right; }
.kpi-report-carte__sous-libelle { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.kpi-report-carte__sous-valeur { font-size: 17px; font-weight: 700; }

/* Icône (i) : réutilise le mécanisme `.tooltip` (data-tip + ::after au survol),
   sans le soulignement pointillé (cf. `.chip.tooltip`), pour un badge rond
   dans la couleur de famille (`currentColor`) plutôt qu'un disque blanc plein. */
.kpi-info {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%; background: transparent; color: inherit;
  border: 1.5px solid currentColor; font-size: 11px; font-style: italic; font-weight: 700; font-family: Georgia, serif;
}
.kpi-info.tooltip { border-bottom: none; cursor: help; }
/* La carte KPI est tout en haut de la zone de contenu défilante (`.content`, cf.
   même remarque pour `.filter-chips` plus bas) : une bulle ouverte vers le haut
   (`bottom:125%` par défaut) déborderait hors de cette zone et serait rognée par
   le scroll. On l'ouvre donc vers le bas, avec un z-index renforcé pour qu'elle
   passe toujours au-dessus des cartes voisines et du graphique en dessous. */
.kpi-report-carte .tooltip:hover::after { left: auto; right: 0; transform: none; bottom: auto; top: 125%; z-index: 60; }

/* --- Variante "mini" des cartes KPI (Niveau 2, un exemplaire par catégorie) :
   même forme que le bandeau Niveau 1 (3 cartes, second indicateur calé à
   droite, valeur agrandie sur Budget Restant Prévisionnel), simplement
   réduite pour tenir dans une carte de catégorie. Pas de (i) : la formule de
   calcul est déjà expliquée une fois au Niveau 1, identique pour toutes les
   catégories. Colonnes fixes (3, pas `auto-fit`) : la carte de catégorie qui
   contient ce bloc est plus étroite que la pleine largeur de page. */
.kpi-report--mini { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.kpi-report--mini .kpi-report-carte { padding: 6px 8px; border-width: 1px; }
.kpi-report--mini .kpi-report-carte__entete h3 { font-size: 9px; }
.kpi-report--mini .kpi-report-carte__trait { margin: 3px 0 4px; }
.kpi-report--mini .kpi-report-carte__trait--sous { margin: 2px 0 3px; }
.kpi-report--mini .kpi-report-carte__valeur { font-size: 12.5px; }
.kpi-report--mini .kpi-report-carte--restant-previsionnel .kpi-report-carte__valeur { font-size: 20px; }
.kpi-report--mini .kpi-report-carte__sous { margin-top: 4px; }
.kpi-report--mini .kpi-report-carte__sous-libelle { font-size: 8px; }
.kpi-report--mini .kpi-report-carte__sous-valeur { font-size: 9.5px; }

/* --- `.kpi-flow`/`.kpi-tile` (ex-Niveau 1 puis ex-Niveau 2 mini, cf. `carteKpiVisuelle()`
   dans dashboard.js) : plus appelées nulle part depuis le passage du Niveau 2 aux cartes
   `.kpi-report--mini` ci-dessus. Conservées intactes pour un retour en arrière trivial,
   même logique que `.kpi-showcase` (cf. plus haut). */
.kpi-flow--mini { gap: 8px; margin-top: 12px; }
.kpi-flow--mini .kpi-tile { flex: 1 1 85px; padding: 8px 10px; border-width: 1px; }
.kpi-flow--mini .kpi-tile__titre { font-size: 9px; padding-bottom: 4px; margin-bottom: 5px; }
.kpi-flow--mini .kpi-tile__valeur { font-size: 13.5px; }
.kpi-flow--mini .kpi-tile__sub { font-size: 9.5px; margin-top: 3px; }
.kpi-flow--mini .kpi-tile--pivot { flex-basis: 105px; padding: 10px 12px; box-shadow: none; }
.kpi-flow--mini .kpi-tile--pivot .kpi-tile__titre { font-size: 9.5px; }
.kpi-flow--mini .kpi-tile--pivot .kpi-tile__valeur { font-size: 16px; }

@keyframes pulse-danger {
  0%, 100% { opacity: 1; } 50% { opacity: .55; }
}

/* Surbrillance temporaire d'une ligne ouverte depuis la recherche globale (Ctrl/Cmd+K). */
.row-surlignee { animation: flash-surlignage 2.5s ease-out; }
@keyframes flash-surlignage {
  0%, 15% { background: var(--accent-soft); } 100% { background: transparent; }
}

/* --- Badges de statut (couleurs sémantiques §7) -------------------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.badge.engage, .badge.service_fait { background: var(--vert-bg); color: var(--vert); }
.badge.previsionnel { background: var(--bleu-bg); color: var(--bleu); }
.badge.warn { background: var(--orange-bg); color: var(--orange); }
.badge.danger { background: var(--rouge-bg); color: var(--rouge); }
.badge.neutral { background: var(--bg-subtle); color: var(--text-muted); }
.badge-togglable { cursor: pointer; }
.badge-togglable:hover { filter: brightness(1.1); }

/* --- Boutons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius); border: 1px solid transparent;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: filter .1s, background .1s;
}
.btn:active { filter: brightness(.92); }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-secondary { background: var(--bg-subtle); color: var(--text); border-color: var(--border); }
.btn-danger { background: var(--rouge-bg); color: var(--rouge); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Formulaires --------------------------------------------------------- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
input, select, textarea {
  width: 100%; padding: 8px 11px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 13.5px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="color"] { padding: 3px; height: 38px; cursor: pointer; background: var(--bg-elevated); }
.field { margin-bottom: 14px; }
.field-row { display: flex; gap: 12px; }
.field-row > .field { flex: 1; }

/* --- Tables --------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-elevated);
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
tbody tr:hover { background: var(--bg-subtle); }
tbody td.editable { cursor: text; }
tbody td.editable:hover { outline: 1px dashed var(--accent); outline-offset: -2px; }
tfoot td { padding: 10px 12px; border-top: 2px solid var(--border); background: var(--bg-subtle); }
.table-jalons td { padding: 6px 12px; }
.table-jalons select, .table-jalons input { padding: 5px 8px; font-size: 13px; margin: 0; }
.table-jalons-etendue { table-layout: fixed; min-width: 720px; }
.table-jalons-etendue th, .table-jalons-etendue td { text-align: center; padding: 6px 4px; width: 45px; }
.table-jalons-etendue input { width: 100%; padding: 5px 2px; text-align: center; }
.table-jalons-etendue td.jalon-final { background: var(--vert-bg); border-radius: var(--radius); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mono { font-variant-numeric: tabular-nums; }

/* --- Chips de filtre (§7 Filtres Intelligents) ---------------------------- */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated);
  font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--text-muted);
}
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.chip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* --- Toasts (§7 notifications) ------------------------------------------- */
.toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast {
  min-width: 300px; max-width: 380px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px;
  animation: toast-in .18s ease-out;
}
.toast.succes { border-left-color: var(--vert); }
.toast.avertissement { border-left-color: var(--orange); }
.toast.erreur { border-left-color: var(--rouge); }
.toast__msg { flex: 1; }
.toast__action { color: var(--accent); font-weight: 600; cursor: pointer; white-space: nowrap; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- Modales --------------------------------------------------------------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(10, 12, 16, .5); z-index: 150; display: flex; align-items: center; justify-content: center; }
.modal {
  background: var(--bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--border); width: 480px; max-width: 92vw; max-height: 88vh; overflow-y: auto;
  padding: 24px;
}
.modal h2 { margin-bottom: 16px; }
.modal--large { width: 80vw; max-width: 80vw; }
/* Formulaire de dépense (édition/création) ouvert depuis la fiche thème
   (`Dashboard.ouvrirFicheTheme`, cf. `Depense.ouvrirModalEdition/Creation`) :
   plus large que le `.modal` par défaut (480px) pour ses nombreux champs +
   panneau de pièces jointes, sans affecter la même popin ouverte depuis
   l'écran Dépenses (`#depenseModalRoot`, resté à 480px). */
#ficheDepenseModalRoot .modal { width: 700px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* --- Wizard tri-zone (§7) ---------------------------------------------------- */
.wizard-layout { display: grid; grid-template-columns: 1fr 260px; gap: 14px; align-items: start; }
.wizard-zone1 { display: flex; flex-direction: column; gap: 12px; }
.wizard-zone2 { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
.wizard-footer {
  grid-column: 1 / -1; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 18px; display: flex; align-items: center; gap: 28px; box-shadow: var(--shadow-sm);
}
.wizard-footer .totaux { display: flex; gap: 28px; flex: 1; }
.wizard-block { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); }
.wizard-block__header { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.wizard-block__header h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--text-muted); }
.wizard-block__body { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.session-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; background: var(--bg-subtle); font-size: 13px; }
.session-card .kpi-sub { margin: 1px 0; }
.session-card .tarif { font-weight: 700; color: var(--text); margin: 1px 0; }
.mono-fort { font-weight: 700; }
.wizard-block__recap {
  display: flex; justify-content: space-between; align-items: center; margin-top: 4px;
  padding-top: 8px; border-top: 1px dashed var(--border); font-weight: 700;
}
.apprenants-list { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.apprenant-row {
  display: flex; gap: 4px; align-items: center; font-size: 11.5px; line-height: 1.4;
  padding: 1px 8px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border);
}
.apprenant-row .grade { color: var(--text-muted); }
.session-card .mt-16 { margin-top: 8px; }

/* --- Drag & drop import ------------------------------------------------------ */
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 48px 24px;
  text-align: center; color: var(--text-muted); cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* --- Tooltip (§7 info-bulles) -------------------------------------------------- */
.tooltip { position: relative; border-bottom: 1px dotted var(--text-faint); cursor: help; }
.tooltip:hover::after {
  content: attr(data-tip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 6px 10px; border-radius: 6px; font-size: 11.5px;
  white-space: normal; width: max-content; max-width: 240px; text-align: left;
  box-shadow: var(--shadow-md); z-index: 50;
}
/* Les chips de filtre n'ont pas de soulignement pointillé (déjà un fond coloré/bordure propre). */
.chip.tooltip { border-bottom: none; }
/* Les chips sont toujours tout en haut de la zone de contenu défilante (`.content`) :
   un tooltip au-dessus déborderait hors de cette zone et serait rogné par le scroll,
   se retrouvant visuellement masqué sous la barre du haut. On l'affiche donc en dessous. */
.filter-chips .tooltip:hover::after { bottom: auto; top: 125%; }

/* --- Utilitaires ---------------------------------------------------------------- */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-16 { margin-top: 16px; } .mb-16 { margin-bottom: 16px; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-faint); }

.login-error { background: var(--rouge-bg); color: var(--rouge); padding: 10px 12px; border-radius: var(--radius); font-size: 12.5px; margin-bottom: 14px; }

/* --- login.html : seul point d'entrée de l'application ------------------------
   Formulaire public de saisie guidée par email (écran par défaut, #demandeRoot)
   + connexion P1/P2/P3 classique (#ecranLoginAdmin, masquée par défaut, cf.
   #btnBasculerAdmin). Top-aligné (pas de centrage vertical) et assez large :
   contenu variable (arbre, cartes KPI, liste de demandes) potentiellement plus
   haut que la fenêtre, doit pouvoir défiler. Remplace les anciennes .login-page/
   .login-card (page de connexion seule, désormais fusionnée ici). */
.demande-page { min-height: 100vh; display: flex; justify-content: center; background: var(--bg); padding: 40px 16px; }
.demande-card {
  width: 900px; max-width: 100%; align-self: flex-start;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 32px;
}
.demande-card h1 { font-size: 20px; margin-bottom: 4px; }
.demande-card p.subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }

/* =====================================================================
   Impression (§7) : masquer la navigation (menu latéral, barre du haut,
   actions non actionnables sur papier) et garantir que le contenu tient
   en largeur sur une page — jamais de coupure/débordement horizontal,
   quel que soit l'écran (tableau de bord, dépenses, wizard...).
   ===================================================================== */
@media print {
  @page { size: landscape; margin: 12mm; }

  /* Toujours imprimer en mode clair, quel que soit le thème actif à l'écran
     (préférence système sombre ou bascule manuelle data-theme="dark") :
     !important l'emporte sur les surcharges de thème indépendamment de leur
     spécificité, donc inutile de dupliquer le sélecteur par thème. */
  :root {
    --bg: #f5f6f8 !important; --bg-elevated: #ffffff !important; --bg-subtle: #eef0f3 !important; --border: #e2e5ea !important;
    --text: #1a1d24 !important; --text-muted: #6b7280 !important; --text-faint: #9aa1ac !important;
    --accent: #3b5bfd !important; --accent-fg: #ffffff !important; --accent-soft: #e8ecff !important;
    --vert: #16a34a !important; --vert-bg: #e9f9ef !important; --bleu: #2563eb !important; --bleu-bg: #eaf1ff !important;
    --orange: #d97706 !important; --orange-bg: #fff3e0 !important; --rouge: #dc2626 !important; --rouge-bg: #fdeaea !important;
  }
  body { background: #fff !important; color: #000 !important; }

  .sidebar, .topbar, #searchOverlay, .toast-container,
  .btn, input[type="checkbox"] { display: none !important; }

  .app-shell { display: block !important; height: auto !important; overflow: visible !important; }
  .main { display: block !important; overflow: visible !important; }

  /* Neutralise tout scroll (horizontal ET vertical) actif à l'écran :
     zone de contenu, modales (US "div ouverte"), tableaux larges, aperçu
     d'import... Sur papier il n'y a pas de scrollbar, donc tout ce qui
     dépendait d'un overflow/max-height pour rester compact à l'écran doit
     s'afficher en entier et se répartir naturellement sur plusieurs pages. */
  .content, .card, table, .wizard-layout, .modal,
  [style*="overflow"], [style*="max-height"] {
    max-width: 100% !important; width: auto !important;
    overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important;
    max-height: none !important; height: auto !important;
  }
  .wizard-layout { display: block !important; }
  table { font-size: 10px; }

  /* Une modale ouverte au moment de l'impression : on l'imprime comme un
     bloc de contenu normal plutôt que comme une fenêtre flottante centrée
     par-dessus un fond assombri (qui n'a aucun sens sur papier). */
  .modal-overlay { position: static !important; background: none !important; display: block !important; padding: 0 !important; }
  .modal { position: static !important; box-shadow: none !important; margin: 0 !important; }

  a { color: inherit; text-decoration: none; }
}