/* =====================================================================
   VISA DDP — Design System « D1 Cabinet »
   AD Associés · PKF Morocco
   ---------------------------------------------------------------------
   Feuille unique, CSS vanilla, custom properties.
   Portable Flask/Jinja + Bootstrap 5 (préfixe les classes si besoin).
   ===================================================================== */

/* =====================================================================
   1. TOKENS BLOCK
   ===================================================================== */
:root {
  /* ---- Couleurs de marque ---- */
  --ad-teal:        #008890;   /* Sarcelle AD — primaire */
  --ad-teal-700:    #006B72;   /* Sarcelle foncée (hover) */
  --ad-teal-050:    #E3F0F0;   /* Sarcelle très claire (fonds) */
  --pkf-navy:       #0F377F;   /* Navy PKF — texte fort / 2nd accent */
  --pkf-navy-700:   #0B2A63;
  --pkf-navy-050:   #E6ECF6;
  --gold:           #C9A24B;   /* Or — accent ponctuel */
  --gold-050:       #F4ECD7;

  /* ---- Encre & gris ---- */
  --ink:            #15243A;   /* Texte principal */
  --ink-soft:       #3A4658;   /* Texte secondaire fort */
  --gray:           #6B7280;   /* Texte tertiaire / libellés */
  --gray-soft:      #9AA1AC;   /* Texte désactivé / hints */

  /* ---- Surfaces & fonds ---- */
  --bg:             #F6F2EA;   /* Ivoire chaud — fond global */
  --bg-sunk:        #EFEADD;   /* Fond enfoncé (rails, zones) */
  --surface:        #FFFFFF;   /* Cartes */
  --surface-alt:    #FBF9F4;   /* Lignes alternées / entêtes table */
  --hairline:       #E8E0D2;   /* Filet fin */
  --hairline-soft:  #F0EADD;   /* Filet très léger (intra-carte) */

  /* ---- Statuts sémantiques ---- */
  /* couleur vive = fonds, barres, icônes ; -text = texte sur teinte -050 (AA ≥ 4.5:1) */
  --ok:             #2F7D5B;   /* Satisfaisant / concordant */
  --ok-050:         #E3F0E8;
  --ok-text:        #246B4D;   /* AA sur --ok-050 (4.7:1) */
  --warn:           #B07A1E;   /* Anomalie / à vérifier */
  --warn-050:       #F6ECD6;
  --warn-text:      #875A12;   /* AA sur --warn-050 (4.6:1) */
  --danger:        #C0392B;   /* Urgence — strict */
  --danger-050:    #F7E2DF;
  --danger-text:   #A82B1F;   /* AA sur --danger-050 (4.8:1) */
  --info:           #2563A8;   /* Information neutre */
  --info-050:       #E3ECF6;
  --info-text:      #1F5694;   /* AA sur --info-050 (5.5:1) */

  /* ---- Accent thématique (bascule cabinet) ---- */
  --accent:         var(--ad-teal);
  --accent-700:     var(--ad-teal-700);
  --accent-050:     var(--ad-teal-050);
  --accent-contrast:#FFFFFF;

  /* ---- Typographie ---- */
  --font-serif: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-sans:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* échelle typographique (rem @16px base) */
  --fs-overline: 0.6875rem; /* 11px */
  --fs-xs:       0.75rem;   /* 12px */
  --fs-sm:       0.8125rem; /* 13px */
  --fs-base:     0.875rem;  /* 14px */
  --fs-md:       1rem;      /* 16px */
  --fs-lg:       1.25rem;   /* 20px */
  --fs-xl:       1.625rem;  /* 26px */
  --fs-2xl:      2.25rem;   /* 36px */
  --fs-3xl:      3rem;      /* 48px */

  /* ---- Espacement (échelle 4) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ---- Rayons ---- */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* ---- Ombres (très légères) ---- */
  --sh-1: 0 1px 2px rgba(21,36,58,.04), 0 1px 3px rgba(21,36,58,.05);
  --sh-2: 0 2px 4px rgba(21,36,58,.05), 0 6px 16px rgba(21,36,58,.06);
  --sh-3: 0 10px 30px rgba(21,36,58,.10);

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --topbar-h:  68px;
  --maxw:      1320px;

  /* ---- Signature / droit d'auteur (point d'édition unique) ---- */
  --author-credit: "Conçu par Esaïe NIKIEMA · © 2026 · Tous droits réservés";
}

/* ---- Bascule cabinet : PKF ---- */
[data-cabinet="pkf"] {
  --accent:         var(--pkf-navy);
  --accent-700:     var(--pkf-navy-700);
  --accent-050:     var(--pkf-navy-050);
  --accent-contrast:#FFFFFF;
}

/* =====================================================================
   2. MODE SOMBRE « D2 Atelier » (fond marine PKF)
   ===================================================================== */
[data-theme="dark"] {
  /* D2 « Atelier nuit » — graphite chaud, lumière bleue minimale, repos nocturne */
  --ink:            #ECE2D2;   /* crème chaud, jamais blanc */
  --ink-soft:       #BCB0A0;
  --gray:           #8C8273;
  --gray-soft:      #6A6357;

  --bg:             #211D19;   /* charbon brun chaud */
  --bg-sunk:        #1A1714;
  --surface:        #2A2520;   /* carte — taupe foncé */
  --surface-alt:    #322C26;
  --hairline:       #403930;
  --hairline-soft:  #362F28;

  --ad-teal-050:    #1E2E2C;
  --accent-050:     #1E2E2C;
  --gold-050:       #38301D;
  --ok-050:         #25311F;
  --warn-050:       #3A311D;
  --danger-050:    #3A2620;
  --info:           #6E96C4;   /* bleu adouci, moins froid la nuit */
  --info-050:       #263242;
  /* texte sémantique clair sur teintes sombres (anti « îlot lumineux ») */
  --ok-text:        #8FC79B;
  --warn-text:      #E3C77A;
  --danger-text:   #E89A8E;
  --info-text:      #9BBCE4;

  --accent:         #5FAFA8;   /* sarcelle réchauffée, basse saturation */
  --accent-700:     #74BDB6;
  --accent-050:     #1E2E2C;
  --accent-contrast:#0E211F;

  --gold:           #D6B25C;   /* or plus lumineux sur fond chaud */

  --sh-1: 0 1px 2px rgba(0,0,0,.22);
  --sh-2: 0 2px 8px rgba(0,0,0,.28);
  --sh-3: 0 12px 32px rgba(0,0,0,.40);
}
[data-theme="dark"][data-cabinet="pkf"] {
  --accent:         #C0A256;   /* accent or chaud côté PKF la nuit (évite le bleu froid) */
  --accent-700:     #D2B566;
  --accent-050:     #38301D;
  --accent-contrast:#241D0C;
}

/* =====================================================================
   3. RESET & BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 560; color: var(--ink); margin: 0; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* anneau de focus clavier visible (AA) — jamais d'outline:none nu */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.btn:focus-visible, .nav-item:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tabular { font-variant-numeric: tabular-nums; }

/* libellé overline — capitales espacées */
.overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
}

.serif { font-family: var(--font-serif); }
.muted { color: var(--gray); }
.amount { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.amount .unit { font-weight: 500; color: var(--gray); font-size: .85em; margin-left: 2px; }

/* =====================================================================
   4. SHELL : sidebar + topbar + contenu
   ===================================================================== */
.app { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
}
[data-theme="dark"] .sidebar { background: var(--bg-sunk); }

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.brand-mark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: .02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.brand-mark .sep { width: 1px; height: 22px; background: var(--gold); display: inline-block; }
.brand-mark .ad  { color: var(--ad-teal); }
.brand-mark .pkf { color: var(--pkf-navy); }
[data-theme="dark"] .brand-mark .ad  { color: var(--accent); }
[data-theme="dark"] .brand-mark .pkf { color: #6E9FEA; }

/* lockup logos réels — sur plaque blanche pour lisibilité clair/sombre */
.brand-logos {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  background: #FFFFFF; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: 8px var(--sp-3); box-shadow: var(--sh-1);
}
.brand-logos .logo-ad  { height: 34px; width: auto; display: block; }
.brand-logos .logo-pkf { height: 22px; width: auto; display: block; }
.brand-logos.lg .logo-ad  { height: 46px; }
.brand-logos.lg .logo-pkf { height: 30px; }
.brand-logos.sm .logo-ad  { height: 26px; }
.brand-logos.sm .logo-pkf { height: 17px; }
.brand-sub {
  font-size: var(--fs-xs);
  color: var(--gray);
  padding: 0 var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-3);
}

.nav { padding: 0 var(--sp-3); overflow-y: auto; flex: 1; }
.nav-group { margin-bottom: var(--sp-5); }
.nav-group > .overline { padding: 0 var(--sp-3); margin-bottom: var(--sp-2); display: block; }
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-size: var(--fs-base);
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 2px;
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.nav-item .ico { width: 18px; height: 18px; flex: 0 0 18px; color: var(--gray); }
.nav-item.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-1);
  position: relative;
}
.nav-item.is-active::before {
  content: ""; position: absolute; left: -3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 3px; background: var(--accent);
}
.nav-item.is-active .ico { color: var(--accent); }
.nav-item .count {
  margin-left: auto; font-size: var(--fs-xs); font-weight: 600;
  color: var(--gray); font-variant-numeric: tabular-nums;
}
.sidebar-foot {
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--hairline);
}
.sidebar-foot::after {
  content: var(--author-credit);
  display: block;
  margin-top: var(--sp-3);
  font-size: 10px;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--gray-soft);
  text-align: center;
}
/* crédit autonome pour les pages sans barre latérale (login, sommaire) */
.author-credit { text-align: center; }
.author-credit::after {
  content: var(--author-credit);
  font-size: 10px; letter-spacing: .04em; color: var(--gray-soft);
}

/* ---- Topbar ---- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-8);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 20;
}
.menu-toggle { display: none; }
.search {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-pill); padding: 8px var(--sp-4);
  width: 340px; max-width: 38vw; color: var(--gray);
}
.search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); width: 100%; }
.search input::placeholder { color: var(--gray-soft); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.lang-switch { display: flex; border: 1px solid var(--hairline); border-radius: var(--r-pill); overflow: hidden; background: var(--surface); }
.lang-switch button { border: 0; background: transparent; padding: 6px 12px; font-size: var(--fs-xs); font-weight: 600; color: var(--gray); }
.lang-switch button.is-active { background: var(--accent); color: var(--accent-contrast); }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: var(--surface);
  display: grid; place-items: center; color: var(--ink-soft); position: relative;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 1.5px solid var(--surface); }
.profile-chip { display: flex; align-items: center; gap: var(--sp-3); padding-left: var(--sp-2); }
.profile-chip .meta { line-height: 1.2; }
.profile-chip .meta .name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.profile-chip .meta .role { font-size: var(--fs-xs); color: var(--gray); }

/* ---- Zone de contenu ---- */
.content { padding: var(--sp-8); flex: 1; }
.content-inner { max-width: var(--maxw); margin: 0 auto; }
.page-head { margin-bottom: var(--sp-8); }
.page-head .greeting { font-size: var(--fs-2xl); margin-bottom: var(--sp-1); }
.page-head .sub { color: var(--gray); font-size: var(--fs-md); }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }

/* utilitaires de mise en page */
.section { margin-bottom: var(--sp-10); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-4); gap: var(--sp-4); }
.section-head h2 { font-size: var(--fs-lg); }
.grid { display: grid; gap: var(--sp-5); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.row { display: flex; gap: var(--sp-3); align-items: center; }
.row-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* =====================================================================
   5. CARTES
   ===================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.card-pad { padding: var(--sp-5); }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--hairline-soft); gap: var(--sp-3); }
.card-head h3 { font-size: var(--fs-md); }
.card-body { padding: var(--sp-5); }

/* ---- Carte KPI ---- */
.kpi-card { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.kpi-card .kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-card .kpi-ico { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-050); color: var(--accent); }
.kpi-card .kpi-value { font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: 560; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.kpi-card .kpi-value .unit { font-size: var(--fs-md); color: var(--gray); font-weight: 500; }
.kpi-card .kpi-label { font-size: var(--fs-sm); color: var(--gray); }
.kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); }
.kpi-trend.up { color: var(--ok); background: var(--ok-050); }
.kpi-trend.down { color: var(--danger); background: var(--danger-050); }
.kpi-trend.flat { color: var(--gray); background: var(--bg-sunk); }

/* barre de progression fine */
.progress { height: 6px; border-radius: var(--r-pill); background: var(--bg-sunk); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.progress.gold > span { background: var(--gold); }
.progress.ok > span { background: var(--ok); }
.progress-row { display: flex; align-items: center; gap: var(--sp-3); }
.progress-row .pct { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* =====================================================================
   6. CHIPS / PILLS / BADGES / AVATARS
   ===================================================================== */
/* chip mission — monospace */
.mission-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: var(--surface-alt);
  color: var(--ink-soft);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.mission-chip.teal { border-color: color-mix(in srgb, var(--ad-teal) 35%, var(--hairline)); color: var(--ad-teal); background: var(--ad-teal-050); }
.mission-chip.gold { border-color: color-mix(in srgb, var(--gold) 45%, var(--hairline)); color: #8A6D1F; background: var(--gold-050); }
.mission-chip.navy { border-color: color-mix(in srgb, var(--pkf-navy) 30%, var(--hairline)); color: var(--pkf-navy); background: var(--pkf-navy-050); }
[data-theme="dark"] .mission-chip.gold { color: var(--gold); }
[data-theme="dark"] .mission-chip.navy { color: #6E9FEA; }

/* status pill */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 3px 10px 3px 8px; border-radius: var(--r-pill);
  background: var(--bg-sunk); color: var(--ink-soft);
  white-space: nowrap;
}
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.status-pill.ok     { background: var(--ok-050);     color: var(--ok-text); }
.status-pill.warn   { background: var(--warn-050);   color: var(--warn-text); }
.status-pill.danger { background: var(--danger-050); color: var(--danger-text); }
.status-pill.info   { background: var(--info-050);   color: var(--info-text); }
.status-pill.neutral{ background: var(--bg-sunk);    color: var(--ink-soft); } /* AA : ink-soft, pas gray */
.status-pill.accent { background: var(--accent-050); color: var(--accent-700); } /* AA : teal foncé */
.status-pill.dark   { background: color-mix(in srgb, var(--ink) 12%, var(--bg-sunk)); color: var(--ink-soft); }

/* badge de verdict */
.verdict {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.verdict .gly { width: 14px; height: 14px; }
.verdict.ok   { background: var(--ok-050);   color: var(--ok-text);   border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.verdict.warn { background: var(--warn-050); color: var(--warn-text); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.verdict.danger { background: var(--danger-050); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.verdict.pending { background: var(--bg-sunk); color: var(--gray); border-color: var(--hairline); }
.verdict.info { background: var(--info-050); color: var(--info-text); border-color: color-mix(in srgb, var(--info) 28%, transparent); }

/* micro-statut (cellules denses) */
.micro { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.micro .m-gly { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 4px; font-size: 11px; }
.micro.ok   { color: var(--ok-text); }
.micro.ok   .m-gly { background: var(--ok-050); }
.micro.warn { color: var(--warn-text); }
.micro.warn .m-gly { background: var(--warn-050); }
.micro.doc  { color: var(--info-text); }
.micro.doc  .m-gly { background: var(--info-050); }
.micro.none { color: var(--gray-soft); }

/* avatar à initiales */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--accent-contrast);
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em;
  flex: 0 0 auto;
}
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.avatar.lg { width: 44px; height: 44px; font-size: var(--fs-sm); }
.avatar.gold { background: var(--gold); color: #3A2E0E; }
.avatar.navy { background: var(--pkf-navy); }
.avatar.ink  { background: var(--ink); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { border: 2px solid var(--surface); margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* =====================================================================
   7. BOUTONS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600;
  padding: 9px var(--sp-5); border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; color: var(--ink);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  line-height: 1.2; white-space: nowrap; text-decoration: none;
}
.btn .ico { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-700); text-decoration: none; }
.btn-secondary { background: var(--surface); border-color: var(--hairline); color: var(--ink); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-ghost { color: var(--ink-soft); }
.btn-ghost:hover { background: var(--bg-sunk); text-decoration: none; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #A32E22; text-decoration: none; }
.btn-danger-outline { border-color: color-mix(in srgb, var(--danger) 40%, var(--hairline)); color: var(--danger); background: var(--surface); }
.btn-danger-outline:hover { background: var(--danger-050); text-decoration: none; }
.btn-sm { padding: 6px var(--sp-3); font-size: var(--fs-sm); }
.btn-lg { padding: 12px var(--sp-6); font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* =====================================================================
   8. CHAMPS DE FORMULAIRE
   ===================================================================== */
.field { margin-bottom: var(--sp-4); }
.field > label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); margin-bottom: var(--sp-2); }
.input, .select, .textarea {
  width: 100%; font: inherit; font-size: var(--fs-base);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 10px var(--sp-3); transition: border-color .12s ease, box-shadow .12s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--gray-soft); }
.input:focus, .select:focus, .textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.input-group { position: relative; display: flex; align-items: center; }
.input-group .ico { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--gray); pointer-events: none; }
.input-group .input { padding-left: 38px; }
.field .hint { font-size: var(--fs-xs); color: var(--gray); margin-top: var(--sp-2); }
.field-row { display: flex; align-items: center; justify-content: space-between; }

/* =====================================================================
   9. TABLEAU DE DONNÉES
   ===================================================================== */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.data-table thead th {
  text-align: left; font-family: var(--font-sans);
  font-size: var(--fs-overline); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-alt); border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.data-table tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--hairline-soft); vertical-align: middle; white-space: nowrap; }
/* les chiffres et la plupart des colonnes ne se replient jamais — on scrolle */
.data-table thead th { white-space: nowrap; }
.data-table td.wrap, .data-table th.wrap { white-space: normal; }
.data-table td.wrap { min-width: 180px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-alt); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .cell-main { font-weight: 600; color: var(--ink); }
.data-table .cell-sub { font-size: var(--fs-xs); color: var(--gray); }
.client-cell { display: flex; align-items: center; gap: var(--sp-3); }

/* densité « revue » */
.data-table.dense thead th, .data-table.dense tbody td { padding: var(--sp-2) var(--sp-3); }
.data-table.dense { font-size: var(--fs-sm); }
.data-table.lines tbody td { border-right: 1px solid var(--hairline-soft); }
.data-table.lines tbody td:last-child { border-right: 0; }
.data-table .sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 2; box-shadow: 1px 0 0 var(--hairline); }
.data-table thead .sticky-col { background: var(--surface-alt); z-index: 3; }
.data-table tbody tr:hover .sticky-col { background: var(--surface-alt); }
.row-flag-warn { box-shadow: inset 3px 0 0 var(--warn); }
.row-flag-danger { box-shadow: inset 3px 0 0 var(--danger); }

/* en-tête figé pour tableaux longs (centaines de lignes) */
.data-table.sticky-head thead th { position: sticky; top: 0; z-index: 4; }
.data-table.sticky-head thead .sticky-col { z-index: 5; }

/* teinte de ligne — RAS / à régulariser (zébrage sémantique, désaturé) */
.data-table tbody tr.ras   { background: color-mix(in srgb, var(--ok-050) 55%, transparent); }
.data-table tbody tr.ras:hover   { background: var(--ok-050); }
.data-table tbody tr.regul { background: color-mix(in srgb, var(--danger-050) 50%, transparent); }
.data-table tbody tr.regul:hover { background: var(--danger-050); }

/* cellules de concordance — tokens dédiés, corrects en clair ET sombre (anti-néon) */
.cell-state { text-align: center; font-variant-numeric: tabular-nums; }
.cell-ok   { background: var(--ok-050);     color: var(--ok-text); }
.cell-warn { background: var(--warn-050);   color: var(--warn-text); font-weight: 600; }
.cell-err  { background: var(--danger-050); color: var(--danger-text); font-weight: 600; }
.cell-na   { color: var(--gray-soft); }

/* barre de filtres collante + ligne de filtres par colonne (look data-grid) */
.grid-toolbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.grid-toolbar .count { font-size: var(--fs-sm); color: var(--gray); font-variant-numeric: tabular-nums; }
.col-filter { width: 100%; font: inherit; font-size: var(--fs-xs); color: var(--ink); background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 4px 8px; }
.col-filter::placeholder { color: var(--gray-soft); }
.col-filter:focus { outline: 0; border-color: var(--accent); background: var(--surface); }
.data-table thead tr.filters th { padding: var(--sp-2) var(--sp-3); background: var(--surface-alt); border-bottom: 1px solid var(--hairline); }

/* alignement chiffres comptables : mono tabulaire (option premium) */
.data-table .num.mono, .amount.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* bouton flottant début/fin de tableau */
.fab-scroll { position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 40; display: flex; flex-direction: column; gap: var(--sp-1); }
.fab-scroll .icon-btn { box-shadow: var(--sh-2); background: var(--surface); }

/* =====================================================================
   10. ONGLETS
   ===================================================================== */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--hairline); }
.tab {
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); font-weight: 600;
  color: var(--gray); background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab .count { font-size: var(--fs-xs); color: var(--gray); margin-left: 6px; font-variant-numeric: tabular-nums; }

/* =====================================================================
   11. MODALE
   ===================================================================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(21,36,58,.32); display: grid; place-items: center; z-index: 100; padding: var(--sp-6); }
.modal {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  width: 100%; max-width: 520px; overflow: hidden;
  /* La modale ne doit jamais dépasser l'écran : sinon (ex. liste de plusieurs
     fichiers joints) son bas — pied + bouton Uploader — était coupé et inaccessible.
     En-tête et pied restent fixes ; seul le corps défile. */
  max-height: calc(100vh - 2 * var(--sp-6));
  display: flex; flex-direction: column;
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--sp-5); border-bottom: 1px solid var(--hairline-soft); flex: 0 0 auto; }
.modal-head h3 { font-size: var(--fs-lg); }
/* Beaucoup de modales enveloppent corps + pied dans un <form> : sans ça, le form
   casserait la chaîne flex (corps non défilant, pied non épinglé → bouton coupé). */
.modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal-body { padding: var(--sp-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--hairline-soft); background: var(--surface-alt); flex: 0 0 auto; }

/* =====================================================================
   12. ÉTAT VIDE
   ===================================================================== */
.empty-state { text-align: center; padding: var(--sp-12) var(--sp-6); color: var(--gray); }
.empty-state .empty-ico { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--bg-sunk); display: grid; place-items: center; margin: 0 auto var(--sp-4); color: var(--gray); }
.empty-state h3 { color: var(--ink); margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.empty-state p { max-width: 360px; margin: 0 auto var(--sp-5); }

/* =====================================================================
   13. KANBAN LÉGER
   ===================================================================== */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: var(--sp-5); align-items: start; }
.kan-col { background: var(--bg-sunk); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--sp-3); }
.kan-col-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.kan-col-head .title { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.kan-col-head .title .stripe { width: 8px; height: 8px; border-radius: 2px; }
.kan-col-head .count { font-size: var(--fs-xs); font-weight: 600; color: var(--gray); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 1px 8px; }
.kan-cards { display: flex; flex-direction: column; gap: var(--sp-3); }
.kan-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--sh-1); cursor: grab; }
.kan-card:hover { box-shadow: var(--sh-2); }
.kan-card .kc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.kan-card .kc-client { font-weight: 600; color: var(--ink); font-size: var(--fs-base); }
.kan-card .kc-period { font-size: var(--fs-xs); color: var(--gray); }
.kan-card .kc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--hairline-soft); }

/* =====================================================================
   14. DÉTAIL DOSSIER — diligences
   ===================================================================== */
.diligence-list { display: flex; flex-direction: column; }
.diligence {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--hairline-soft);
}
.diligence:last-child { border-bottom: 0; }
.diligence:hover { background: var(--surface-alt); }
.diligence .d-idx { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--gray); }
.diligence .d-title { font-weight: 600; color: var(--ink); }
.diligence .d-desc { font-size: var(--fs-xs); color: var(--gray); margin-top: 2px; }
.diligence.done .d-idx { color: var(--ok); }

/* fiche méta (entête dossier) */
.meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.meta-item .overline { display: block; margin-bottom: 4px; }
.meta-item .val { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }

/* panneau conclusion */
.conclusion { border-left: 3px solid var(--accent); padding-left: var(--sp-4); }

/* liste d'actions prioritaires */
.action-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--hairline-soft); }
.action-item:last-child { border-bottom: 0; }
.action-item .act-ico { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: 0 0 auto; }
.action-item .act-ico.warn { background: var(--warn-050); color: var(--warn); }
.action-item .act-ico.danger { background: var(--danger-050); color: var(--danger); }

/* ── Zone de glisser-déposer unifiée (upload de documents) ───────────── */
.upload-drop{
  border:2px dashed var(--hairline); border-radius:12px;
  background:var(--bg-sunk); padding:22px 16px; text-align:center;
  cursor:pointer; transition:border-color .15s, background .15s; color:var(--gray);
}
.upload-drop:hover, .upload-drop:focus{
  outline:none; border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
}
.upload-drop.dragover{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}
.upload-drop.has-files{ border-style:solid; border-color:var(--accent); }
.upload-drop .upload-drop-ico,
.upload-drop > .bi{ font-size:1.7rem; line-height:1; color:var(--accent); }
.upload-drop-main{ font-weight:600; color:var(--ink); margin-top:6px; }
.upload-drop-sub{ font-size:.8rem; color:var(--gray); margin-top:2px; }
/* Trame de fond des en-têtes de colonnes des tableaux de résultats des tests */
#travauxData table thead th{
  background:var(--surface-alt); color:var(--ink); font-weight:600;
  border-bottom:2px solid var(--hairline);
}
#travauxData table.table-concordance thead tr:first-child th{
  background:var(--bg-sunk);
}

.upload-drop-list{
  list-style:none; margin:10px 0 0; padding:0; text-align:left;
  font-size:.8rem; color:var(--ink);
  /* Plafond + défilement interne : sinon, en sélectionnant plusieurs fichiers, la
     liste fait grandir la zone de dépôt à l'infini et repousse le bouton « Joindre »
     hors de portée. La liste défile dans la zone ; la zone reste compacte. */
  max-height:170px; overflow-y:auto;
}
.upload-drop-list li{
  padding:4px 8px; background:var(--surface); border:1px solid var(--hairline);
  border-radius:6px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.action-item .act-ico.info { background: var(--info-050); color: var(--info); }
.action-item .act-body { flex: 1; min-width: 0; }
.action-item .act-title { font-weight: 600; color: var(--ink); font-size: var(--fs-base); }
.action-item .act-sub { font-size: var(--fs-xs); color: var(--gray); margin-top: 2px; }

/* =====================================================================
   15. DIVIDERS / BANDEAUX UTILES
   ===================================================================== */
.divider { height: 1px; background: var(--hairline); border: 0; margin: var(--sp-5) 0; }
.gold-rule { height: 2px; width: 44px; background: var(--gold); border: 0; border-radius: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--gray); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* =====================================================================
   16. RESPONSIVE
   ===================================================================== */
.scrim { display: none; }
@media (max-width: 1100px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .kanban { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 860px) {
  .sidebar {
    position: fixed; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--sh-3);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(21,36,58,.32); z-index: 25; }
  .menu-toggle { display: grid; }
  .content { padding: var(--sp-5); }
  .topbar { padding: 0 var(--sp-5); }
  .search { width: auto; flex: 1; }
  .cols-4, .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: repeat(2, 1fr); }
  .page-head .greeting { font-size: var(--fs-xl); }
}
@media (max-width: 560px) {
  .meta-grid { grid-template-columns: 1fr; }
  .lang-switch, .profile-chip .meta { display: none; }
}

/* impression : laisser respirer */
@media print {
  .sidebar, .topbar { display: none; }
  body { background: #fff; }
  .card { box-shadow: none; }
}

/* ===== Préservé de l'app : flash messages Flask ===== */
/* ── Flash messages (intégration Flask) ─────────────────────────── */
.vddp-flashes { display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.vddp-flash {
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--hairline);
  border-left:3px solid var(--accent); color:var(--ink); font-size:var(--fs-sm);
}
.vddp-flash--success { border-left-color:var(--ok); }
.vddp-flash--danger, .vddp-flash--error { border-left-color:var(--danger); }
.vddp-flash--warning { border-left-color:var(--warn); }
.vddp-flash--info { border-left-color:var(--info); }