/* ════════════════════════════════════════════════════════════════════
   TOKENS — thème clair (défaut) puis thème sombre « Sombre chaud » (palette 2).
   Toute couleur passe par un token : une couleur écrite en dur reste claire en sombre.
   Guide d'usage : maia-vault/01 Projet/Mode sombre.md, « Guide de reprise d'une vue ».
   Thème : <html data-theme="light|dark"> (choix du compte) ; sans attribut = Système (prefers-color-scheme).
   ════════════════════════════════════════════════════════════════════ */
/* ── Palette extraite de kundal-yoga.com ─────────────────────── */
:root {
  color-scheme: light;

  /* Primaire : vivid-green-cyan (doré en sombre) */
  --primary:      #00d084;
  --primary-h:    #00a86a;
  --primary-l:    #d4faf0;
  --primary-ink:  #0e2118;   /* texte sur fond --primary : 8,2:1 (le blanc ne faisait que 2:1) */
  --primary-text: #007a4d;   /* vert lisible en texte sur fond clair : 5,6:1 */

  /* Fond : inspiré pale-ocean (rgb(255,245,203)) adouci */
  --bg:           #fdf8f0;   /* fond de page */
  --surface:      #ffffff;   /* cartes, champs */
  --surface-2:    #ffffff;   /* posé au-dessus : menus, fenêtres, infobulles riches, listes */
  --border:       #e8e2d8;
  --border-h:     #d8d2c8;   /* bordure / fond neutre au survol (bouton fermer) */
  --field-border: #9a907f;   /* contour des champs : contraste ≥ 3:1 */
  --text:         #1a1816;
  --muted:        #6e675e;   /* 5,3:1 sur --bg (l'ancien #7a736a était à 4,4:1) */
  --row-hover:    #fdf5e8;   /* ligne de tableau survolée */

  /* Nav */
  --nav-surface:  #ffffff;   /* barre du haut, panneau mobile */
  --nav-bg:       #0e2118;   /* fond sombre (bandeau « nouvelle version ») */
  --nav-accent:   #caf880;
  --nav-ink:      #ffffff;   /* texte sur --nav-bg */
  --nav-ink-muted:#cfe0d6;
  --brand:        #008453;   /* nom « Maia » : 4,8:1 (l'ancien #00a86a était à 3,1:1) */

  /* Statuts (texte -c sur fond -bg ≥ 4,5:1) */
  --success-bg:  #d4faf0; --success-c: #007a4d; --success-b: #7bdcb5;
  --error-bg:    #fde8e8; --error-c:   #c72c2c; --error-b:   #f78da7;   /* -c : 4,7:1 (ancien #cf2e2e 4,4:1) */
  --warning-bg:  #fff8e0; --warning-c: #966700; --warning-b: #fcb900;   /* -c : 4,7:1 (ancien #b07800 3,6:1) */
  --info-bg:     #e0f2fe; --info-c:    #0570ac; --info-b:    #8ed1fc;   /* -c : 4,7:1 (ancien #0693e3 2,9:1) */
  --seo-bg:      #e3f3f7; --seo-c:     #0f6e8c; --seo-b:     #9fd3e0;   /* rôle SEO (étiquette, bandeau du Catalogue) */
  --ok-strong:   #00a86a;   /* vert « réussi » des pastilles et chiffres (vert sauge en sombre, jamais --primary) */

  /* Colonnes stock */
  --wc-bg:      #e0f2fe; --wc-c:      #0570ac; --wc-b:      #8ed1fc;    /* -c : 4,7:1 (ancien #0693e3 2,9:1) */
  --garage-bg:  #fff8e0; --garage-c:  #a06000; --garage-b:  #fcb900;
  --stephanie-bg: #f3e8ff; --stephanie-c: #7e22ce; --stephanie-b: #d8b4fe;
  --suisse-bg:    #fff1f2; --suisse-c:    #be123c; --suisse-b:    #fda4af;
  --total-bg:   #d4faf0; --total-c:   #007a4d; --total-b:   #7bdcb5;

  /* Stock du site (bleu marine, distinct des lieux) */
  --site-bg: #eef3fb; --site-bg2: #f6f9fd; --site-c: #1d3f8f; --site-b: #5b7cc4; --site-ink: #13295e;

  /* Alertes et danger */
  --warn-text:   #8a5d00;   /* texte ambre lisible */
  --bad-text:    #a11d1d;   /* texte rouge lisible */
  --cell-low:    #fffbeb;   /* cellule sous le seuil */
  --danger:      #cf2e2e;   /* fond du bouton danger */
  --danger-ink:  #ffffff;   /* texte sur --danger */
  --danger-text: #c0392b;   /* rouge en texte (bouton contour, lien) */
  --danger-b:    #fca5a5;
  --danger-soft: #fee2e2;   /* fond rouge pâle (survol, zone) */
  --count-bg:    #f59e0b;   /* pastille de compteur (file d'emails) */
  --count-c:     #ffffff;

  /* Chiffres clés */
  --kpi-danger: #dc2626; --kpi-warn: #af6005; --kpi-info: #2563eb; --kpi-purple: #7c3aed;   /* --kpi-warn : 4,7:1 (ancien #d97706 3,2:1) */

  /* Bac à sable actif */
  --sb-on-bg: #fff7ed; --sb-on-c: #c2410c; --sb-on-b: #f97316;

  /* Toasts */
  --toast-ok-bg:  #ecfdf5; --toast-ok-c:  #065f46; --toast-ok-b:  #a7f3d0;
  --toast-err-bg: #fef2f2; --toast-err-c: #991b1b; --toast-err-b: #fca5a5;
  --toast-info-c: #075985;

  /* Infobulle compacte (data-tip) */
  --tipc-bg: #0e2118; --tipc-c: #ffffff;

  /* Divers */
  --highlight-bg: #fff1b8; --highlight-b: #e0c25a;   /* surlignage d'un terme recherché */
  --chip-on:      #ffffff;                            /* texte d'une pastille sélectionnée (fond --primary-text) */
  --overlay:      rgba(0,0,0,.45);                    /* voile derrière une fenêtre (showConfirm) */
  --scrim:        rgba(20,30,22,.55);                 /* voile flouté (chargement, fenêtre d'info) */
  --focus-ring:   0 0 0 3px rgba(0,208,132,.15);      /* anneau de focus des champs */

  --radius: 10px;
  --shadow: 0 1px 4px rgba(0,0,0,.07);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.25);           /* fenêtres, menus flottants */
  --shadow-k: 1;   /* multiplicateur d'opacité des ombres écrites en dur : rgb(0 0 0 / calc(.12 * var(--shadow-k))) */
}

/* ── Thème sombre « Sombre chaud » ─────────────────────────────────────
   Deux blocs : choix explicite (data-theme="dark") et Système (pas d'attribut ou "auto", appareil en sombre).
   ⚠ GARDER LES DEUX BLOCS IDENTIQUES (une modification = les deux). Valeurs : maquettes/dark-mode.html, palette « chaud ». */
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #e2b356;     --primary-h: #f0c771;   --primary-l: #3d2f15;
  --primary-ink: #1c1406; --primary-text: #ecc06a;
  --bg: #17120f;          --surface: #211a16;     --surface-2: #2b231e;
  --border: #3b3029;      --border-h: #4a3c33;    --field-border: #85725f;
  --text: #f3e9dc;        --muted: #bba995;       --row-hover: #2a211b;
  --nav-surface: #211a16; --nav-bg: #100c0a;      --nav-accent: #e8906f; --brand: #e8906f;
  --nav-ink: #f3e9dc;     --nav-ink-muted: #bba995;
  --success-bg: #1b3123;  --success-c: #8fd9a5;   --success-b: #3f7a52;
  --error-bg: #3d1a1a;    --error-c: #ff9a8f;     --error-b: #8f3a33;
  --warning-bg: #3a2b0c;  --warning-c: #ffd36b;   --warning-b: #b08515;
  --info-bg: #172836;     --info-c: #8cc8f0;      --info-b: #36678c;
  --seo-bg: #142f37;      --seo-c: #7fcde3;       --seo-b: #2c6474;
  --ok-strong: #8fd9a5;
  --wc-bg: #172836;       --wc-c: #8cc8f0;        --wc-b: #3e7299;
  --garage-bg: #3a2a10;   --garage-c: #f3bd62;    --garage-b: #8f6516;
  --stephanie-bg: #2e1f35; --stephanie-c: #dcb6f2; --stephanie-b: #71508a;
  --suisse-bg: #3c1b20;   --suisse-c: #ffa5ad;    --suisse-b: #99404d;
  --total-bg: #1b3123;    --total-c: #8fd9a5;     --total-b: #3f7a52;
  --site-bg: #1c2333;     --site-bg2: #1a1e29;    --site-c: #aec3f0;     --site-b: #6a83b8; --site-ink: #d6e0f7;
  --warn-text: #ffd36b;   --bad-text: #ff9a8f;    --cell-low: #33270f;
  --danger: #c4473f;      --danger-ink: #ffffff;  --danger-text: #ff9a8f; --danger-b: #8f3a33; --danger-soft: #3d1a1a;
  --count-bg: #ffd36b;    --count-c: #1c1406;
  --kpi-info: #8cc8f0;    --kpi-purple: #d0aef0;  --kpi-danger: #ff9a8f; --kpi-warn: #ffd36b;
  --sb-on-bg: #3d2114;    --sb-on-c: #f5a07e;     --sb-on-b: #c0623c;
  --toast-ok-bg: #1b3123; --toast-ok-c: #a6e6b9;  --toast-ok-b: #3f7a52;
  --toast-err-bg: #3d1a1a; --toast-err-c: #ffb0a6; --toast-err-b: #8f3a33;
  --toast-info-c: #a9d6f5;
  --highlight-bg: #5c4412; --highlight-b: #a07a22;
  --overlay: rgba(10,6,4,.65); --scrim: rgba(10,6,4,.7);
  --shadow: 0 1px 3px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.65);
  --shadow-k: 3.5;
  --tipc-bg: #f3e9dc;     --tipc-c: #17120f;
  --focus-ring: 0 0 0 3px rgba(240,199,113,.30);
  --chip-on: #17120f;
  --ts-error: #ff9a8f;    --ts-active-text: #f3e9dc; --ts-chip-text: #f3e9dc;
  --ts-ring: 0 0 0 3px rgba(240,199,113,.30);
  --ts-error-ring: 0 0 0 3px rgba(255,154,143,.25); --ts-shadow: 0 12px 32px rgba(0,0,0,.6);
  --ts-search-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bba995' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --primary: #e2b356;     --primary-h: #f0c771;   --primary-l: #3d2f15;
    --primary-ink: #1c1406; --primary-text: #ecc06a;
    --bg: #17120f;          --surface: #211a16;     --surface-2: #2b231e;
    --border: #3b3029;      --border-h: #4a3c33;    --field-border: #85725f;
    --text: #f3e9dc;        --muted: #bba995;       --row-hover: #2a211b;
    --nav-surface: #211a16; --nav-bg: #100c0a;      --nav-accent: #e8906f; --brand: #e8906f;
    --nav-ink: #f3e9dc;     --nav-ink-muted: #bba995;
    --success-bg: #1b3123;  --success-c: #8fd9a5;   --success-b: #3f7a52;
    --error-bg: #3d1a1a;    --error-c: #ff9a8f;     --error-b: #8f3a33;
    --warning-bg: #3a2b0c;  --warning-c: #ffd36b;   --warning-b: #b08515;
    --info-bg: #172836;     --info-c: #8cc8f0;      --info-b: #36678c;
    --seo-bg: #142f37;      --seo-c: #7fcde3;       --seo-b: #2c6474;
    --ok-strong: #8fd9a5;
    --wc-bg: #172836;       --wc-c: #8cc8f0;        --wc-b: #3e7299;
    --garage-bg: #3a2a10;   --garage-c: #f3bd62;    --garage-b: #8f6516;
    --stephanie-bg: #2e1f35; --stephanie-c: #dcb6f2; --stephanie-b: #71508a;
    --suisse-bg: #3c1b20;   --suisse-c: #ffa5ad;    --suisse-b: #99404d;
    --total-bg: #1b3123;    --total-c: #8fd9a5;     --total-b: #3f7a52;
    --site-bg: #1c2333;     --site-bg2: #1a1e29;    --site-c: #aec3f0;     --site-b: #6a83b8; --site-ink: #d6e0f7;
    --warn-text: #ffd36b;   --bad-text: #ff9a8f;    --cell-low: #33270f;
    --danger: #c4473f;      --danger-ink: #ffffff;  --danger-text: #ff9a8f; --danger-b: #8f3a33; --danger-soft: #3d1a1a;
    --count-bg: #ffd36b;    --count-c: #1c1406;
    --kpi-info: #8cc8f0;    --kpi-purple: #d0aef0;  --kpi-danger: #ff9a8f; --kpi-warn: #ffd36b;
    --sb-on-bg: #3d2114;    --sb-on-c: #f5a07e;     --sb-on-b: #c0623c;
    --toast-ok-bg: #1b3123; --toast-ok-c: #a6e6b9;  --toast-ok-b: #3f7a52;
    --toast-err-bg: #3d1a1a; --toast-err-c: #ffb0a6; --toast-err-b: #8f3a33;
    --toast-info-c: #a9d6f5;
    --highlight-bg: #5c4412; --highlight-b: #a07a22;
    --overlay: rgba(10,6,4,.65); --scrim: rgba(10,6,4,.7);
    --shadow: 0 1px 3px rgba(0,0,0,.5);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.65);
    --shadow-k: 3.5;
    --tipc-bg: #f3e9dc;     --tipc-c: #17120f;
    --focus-ring: 0 0 0 3px rgba(240,199,113,.30);
    --chip-on: #17120f;
    --ts-error: #ff9a8f;    --ts-active-text: #f3e9dc; --ts-chip-text: #f3e9dc;
    --ts-ring: 0 0 0 3px rgba(240,199,113,.30);
    --ts-error-ring: 0 0 0 3px rgba(255,154,143,.25); --ts-shadow: 0 12px 32px rgba(0,0,0,.6);
    --ts-search-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bba995' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  }
}

/* ── Couleurs d'un lieu (LocationManager::styleVars() / MaiaTheme.locVars() posent --loc-bg/-c/-b et -bg-d/-c-d/-b-d)
   --loc-fill / --loc-ink / --loc-line = la paire du thème affiché. Utilitaires : .loc-tint (fond + texte),
   .loc-ink (texte), .loc-line (bordure), .loc-dot (pastille pleine), .loc-vars (variables seules). */
:where(.loc-vars, .loc-tint, .loc-ink, .loc-line, .loc-dot) {
  --loc-fill: var(--loc-bg, var(--bg)); --loc-ink: var(--loc-c, var(--text)); --loc-line: var(--loc-b, var(--border));
}
:root[data-theme="dark"] :where(.loc-vars, .loc-tint, .loc-ink, .loc-line, .loc-dot) {   /* identique au bloc suivant */
  --loc-fill: var(--loc-bg-d, var(--loc-bg, var(--bg))); --loc-ink: var(--loc-c-d, var(--loc-c, var(--text))); --loc-line: var(--loc-b-d, var(--loc-b, var(--border)));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :where(.loc-vars, .loc-tint, .loc-ink, .loc-line, .loc-dot) {
    --loc-fill: var(--loc-bg-d, var(--loc-bg, var(--bg))); --loc-ink: var(--loc-c-d, var(--loc-c, var(--text))); --loc-line: var(--loc-b-d, var(--loc-b, var(--border)));
  }
}
.loc-tint { background: var(--loc-fill); color: var(--loc-ink); }
.loc-ink  { color: var(--loc-ink); }
.loc-line { border-color: var(--loc-line); }
.loc-dot  { background: var(--loc-ink); }

/* Repère ⚠ devant un ambre qui signale une alerte (en sombre, l'ambre est proche du doré de l'accent :
   ne pas reposer sur la couleur seule). Ignoré par les lecteurs d'écran (le texte dit déjà l'alerte). */
.warn-mark::before { content: "\26A0\FE0E\00A0"; content: "\26A0\FE0E\00A0" / ""; }

/* Images (photos produit à fond blanc) : cadre clair assumé dans les deux thèmes */
.img-frame { background: #fff; padding: 4px; border: 1px solid var(--border); border-radius: 6px; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
}

h1, h2, h3, h4,
.topnav .brand,
.page-title,
.stat-card .stat-value {
  font-family: 'Lato', sans-serif;
}

/* ── Nav ──────────────────────────────────────────────────────── */
/* Une seule ligne, jamais de libellé coupé : liens rares dans « Plus », compte dans un menu,
   et sous 1100 px les pages passent dans un menu repliable (bouton ☰). */
.topnav {
  background: var(--nav-surface);
  color: var(--text);
  display: flex;
  align-items: center;
  padding: 0 24px;
  min-height: 60px;
  gap: 8px;
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 10px rgb(0 0 0 / calc(.07 * var(--shadow-k)));
}
.topnav .brand {
  font-size: 18px; font-weight: 800; letter-spacing: -.3px;
  margin-right: 12px; flex-shrink: 0; white-space: nowrap;
  color: var(--brand);
}
.topnav .brand span { color: var(--muted); font-weight: 300; }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav-links a, .nav-more-btn {
  color: var(--muted);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background .15s, color .15s;
  display: flex; align-items: center; gap: 6px;
}
.nav-more-btn { background: none; border: 0; font-family: inherit; cursor: pointer; }
.nav-links a:hover, .nav-more-btn:hover { background: var(--bg); color: var(--text); }
.nav-links a.active, .nav-more-btn.active { background: var(--primary-l); color: var(--primary-h); font-weight: 700; }
.nav-links a .ico, .nav-more-btn .ico, .nav-menu .ico { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.topnav :is(a, button):focus-visible { outline: 2px solid var(--primary-h); outline-offset: 2px; }
.topnav .nav-chev { transition: transform .15s; }
.topnav .open > [data-navmenu] .nav-chev { transform: rotate(180deg); }

/* Menus déroulants (Plus, compte) */
.nav-more, .nav-acct { position: relative; }
.nav-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 120;
  min-width: 210px; padding: 6px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / calc(.12 * var(--shadow-k)));
}
.nav-menu--right { left: auto; right: 0; }
.open > .nav-menu { display: grid; gap: 2px; }
.nav-menu a {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px;
  color: var(--text); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.nav-menu a:hover { background: var(--bg); }
.nav-menu a.active { background: var(--primary-l); color: var(--primary-h); font-weight: 700; }
.nav-menu-head { padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); line-height: 1.45; }
.nav-menu-head b { color: var(--text); }
.nav-menu--acct { min-width: 252px; }
/* Thème (menu Compte) : Clair / Sombre / Système, boutons à bascule (aria-pressed) — comme la maquette dark-mode.html */
.nav-theme { padding: 2px 4px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.nav-theme-lbl { display: block; padding: 0 6px 5px; font-size: 12px; color: var(--muted); }
.theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); }
.theme-seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 6px;
  border: 0; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.theme-seg button:hover { color: var(--text); background: var(--bg); }
.theme-seg button[aria-pressed="true"] { background: var(--primary-l); color: var(--primary-text); }
.theme-seg button:focus-visible { outline: 2px solid var(--primary-h); outline-offset: 2px; }
@media (forced-colors: active) { .theme-seg button[aria-pressed="true"] { outline: 2px solid Highlight; } }

/* Côté droit : repère de contexte, bac à sable, compte */
.topnav .nav-user { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--muted); flex-shrink: 0; }
.nav-sb {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 7px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; cursor: pointer;
}
.nav-sb.is-on { border-color: var(--sb-on-b); background: var(--sb-on-bg); color: var(--sb-on-c); }
.nav-acct-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.nav-acct-btn:hover { background: var(--bg); }
.nav-acct-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.nav-burger {
  display: none; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer;
}

@media (max-width: 1280px) {
  .topnav { padding: 0 16px; }
  .topnav .brand span { display: none; }
  .nav-acct-name { display: none; }
}
/* Tablette, téléphone : les pages dans un panneau sous la barre */
@media (max-width: 1100px) {
  .nav-burger { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 12px 12px;
    background: var(--nav-surface); border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px rgb(0 0 0 / calc(.1 * var(--shadow-k)));
    max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .topnav.nav-open .nav-links { display: flex; }
  .nav-links a { padding: 10px 12px; font-size: 15px; }
  .nav-more-btn { display: none; }
  .nav-more .nav-menu { display: grid; position: static; box-shadow: none; border: 0; background: transparent; padding: 0; min-width: 0; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; border-radius: 0; }
  .nav-more .nav-menu a { padding: 10px 12px; font-size: 15px; color: var(--muted); }
}
@media (max-width: 560px) {
  .nav-sb-txt { display: none; }
  .topnav { gap: 6px; padding: 0 12px; }
}

/* ── Page wrapper ─────────────────────────────────────────────── */
.page { max-width: 1600px; margin: 0 auto; padding: 32px 32px 80px; }

/* ── Flash ────────────────────────────────────────────────────── */
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--radius); padding: 13px 16px;
  margin-bottom: 22px; font-size: 14px; border: 1px solid;
}
.flash .flash-ico               { font-size: 18px; flex-shrink: 0; }
.flash.success { background: var(--success-bg); color: var(--success-c); border-color: var(--success-b); }
.flash.error   { background: var(--error-bg);   color: var(--error-c);   border-color: var(--error-b);   }
.flash.warning { background: var(--warning-bg); color: var(--warning-c); border-color: var(--warning-b); }
.flash.info    { background: var(--info-bg);    color: var(--info-c);    border-color: var(--info-b);    }

/* ── Card ─────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-header h2 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-body      { padding: 22px; }

/* ── Page title ───────────────────────────────────────────────── */
.page-title {
  font-size: 22px; font-weight: 800;
  margin-bottom: 24px; letter-spacing: -.3px;
  display: flex; align-items: center; gap: 10px;
}
.page-title .ico { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; vertical-align:middle; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 18px; height: 38px; border-radius: 7px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1;
  white-space: nowrap; box-sizing: border-box;
  transition: filter .12s, transform .08s;
}
.btn:active                     { transform: scale(.97); }
.btn-primary                    { background: var(--primary); color:var(--primary-ink); }
.btn-primary:hover              { filter: brightness(1.08); }
.btn-outline {
  background: transparent; color: var(--primary-text);
  border: 1.5px solid var(--primary-h);
}
.btn-outline:hover              { background: var(--primary-l); }
.btn-danger                     { background: var(--danger); color: var(--danger-ink); }
.btn-danger:hover               { filter: brightness(1.1); }
.btn-danger-outline             { background: transparent; color: var(--danger-text); border: 1.5px solid var(--danger-b); }
.btn-danger-outline:hover       { background: var(--danger-soft); }
.btn-sm                         { height: 30px; padding: 0 11px; font-size: 13px; }
.btn:disabled                   { opacity: .38; cursor: not-allowed; filter: none; transform: none; pointer-events: none; }

/* Form transparent dans un flex container (wrapping a single button) */
form.btn-form                   { display: contents; }

/* ── Table ────────────────────────────────────────────────────── */
.table-wrap                     { overflow-x: auto; }
table                           { width: 100%; border-collapse: collapse; font-size: 14px; }
thead tr                        { background: var(--bg); }
th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td                { border-bottom: none; }
tr:hover td                     { background: var(--row-hover); }

/* ── Badges ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
}
.badge-green  { background: var(--success-bg); color: var(--success-c); }
.badge-red    { background: var(--error-bg);   color: var(--error-c);   }
.badge-orange { background: var(--warning-bg); color: var(--warning-c); }
.badge-gray   { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* ── KPI bar ─────────────────────────────────────────────────── */
.kpi-bar {
  display: flex; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.kpi-item {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; flex: 1; min-width: 0;
  border-right: 1px solid var(--border);
}
.kpi-item:last-child { border-right: none; }
.kpi-ico { font-size: 15px; flex-shrink: 0; line-height: 1; }
.kpi-num { font-size: 17px; font-weight: 800; line-height: 1; color: var(--text); flex-shrink: 0; }
.kpi-num.ok     { color: var(--ok-strong); }
.kpi-num.danger { color: var(--kpi-danger); }
.kpi-num.warn   { color: var(--kpi-warn); }
.kpi-num.info   { color: var(--kpi-info); }
.kpi-num.purple { color: var(--kpi-purple); }
.kpi-lbl { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) {
  .kpi-bar { flex-wrap: wrap; }
  .kpi-item { flex: 1 1 33%; border-bottom: 1px solid var(--border); }
  .kpi-item:nth-child(3) { border-right: none; }
  .kpi-item:nth-child(4), .kpi-item:nth-child(5), .kpi-item:nth-child(6) { border-bottom: none; }
}
@media (max-width: 480px) {
  .kpi-item { flex: 1 1 50%; }
  .kpi-item:nth-child(3) { border-right: 1px solid var(--border); }
  .kpi-item:nth-child(odd):last-child { border-right: none; }
}

/* ── Forms ────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--text); }
input[type=text], input[type=password], input[type=number], input[type=email], select {
  width: 100%; padding: 10px 13px; border: 1.5px solid var(--field-border);
  border-radius: 7px; font-size: 14px; color: var(--text);
  background: var(--surface); transition: border-color .12s;
}
input:focus, select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.form-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Texte lu par les lecteurs d'écran, invisible à l'écran */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Version de l'application (bas de page) ───────────────────── */
.app-version { margin: 32px 0 8px; text-align: center; font-size: 11px; color: var(--muted); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* ── Infobulles (composant JS MaiaTip dans layout.php) ────────── */
.tip {
  position: fixed; z-index: 100000; top: 0; left: 0; max-width: min(20rem, calc(100vw - 16px));
  opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease;
  font-size: 13px; line-height: 1.4; text-align: left;
}
.tip[data-side="top"] { transform: translateY(4px); }
.tip.is-visible { opacity: 1; transform: none; }
.tip__inner { position: relative; display: block; }
.tip__arrow { position: absolute; left: calc(var(--ax, 50%) - 6px); width: 12px; height: 12px; transform: rotate(45deg); }
.tip[data-side="bottom"] .tip__arrow { top: -6px; }
.tip[data-side="top"] .tip__arrow { bottom: -6px; }
.tip__title { font-weight: 800; }
.tip__desc { display: block; color: var(--muted); margin-top: 2px; }
.tip__keys { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.tip__keys span { font-size: 11px; color: var(--muted); }
.tip kbd {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 2px 5px; min-width: 18px; text-align: center;
  border: 1px solid var(--field-border); border-bottom-width: 2px; border-radius: 4px; background: var(--bg); color: var(--text);
}
/* compacte (data-tip) : bulle sombre */
.tip--compact { max-width: min(16rem, calc(100vw - 16px)); }
.tip--compact .tip__inner { background: var(--tipc-bg); color: var(--tipc-c); padding: 5px 9px; border-radius: 6px; font-size: 12px; box-shadow: 0 4px 14px rgb(0 0 0 / calc(.18 * var(--shadow-k))); }
.tip--compact .tip__title { font-weight: 600; }
.tip--compact .tip__arrow { display: none; }
/* riche (data-tipkey) : titre + raccourci, description, état */
.tip--rich .tip__inner {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgb(14 33 24 / calc(.16 * var(--shadow-k))); padding: 10px 12px 9px;
}
.tip--rich .tip__arrow { background: var(--surface-2); border: 1px solid var(--border); }
.tip--rich[data-side="bottom"] .tip__arrow { border-right: none; border-bottom: none; }
.tip--rich[data-side="top"] .tip__arrow { border-left: none; border-top: none; }
.tip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tip__state { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border); font-size: 12px; font-weight: 700; }
.tip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-strong); flex-shrink: 0; }
.tip__state--warn .tip__dot { background: var(--warning-b); }
.tip__state--info .tip__dot { background: var(--info-c); }
.tip__state--busy .tip__dot { background: var(--info-c); border-radius: 2px; animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .tip { transition: none; transform: none !important; }
  .tip__state--busy .tip__dot { animation: none; }
}

/* ── Modal header (partagé entre vues) ───────────────────────── */
.modal-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 20px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.modal-header-title { font-size: 17px; font-weight: 800; color: var(--text); }
.modal-header-sub   { font-size: 12px; color: var(--muted); margin-top: 3px; }
.modal-close-btn {
  background: var(--border); border: none; color: var(--muted);
  border-radius: 8px; padding: 5px 11px; cursor: pointer;
  font-size: 16px; line-height: 1; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.modal-close-btn:hover { background: var(--border-h); color: var(--text); }

/* ── Spinners ─────────────────────────────────────────────────── */
@keyframes spin    { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }

/* Spinner générique — ring mince et délicat */
.spinner {
  display: inline-block;
  border-radius: 50%;
  border-style: solid;
  --spin-track: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: var(--spin-track) var(--spin-track) var(--spin-track) var(--primary);
  animation: spin .72s cubic-bezier(.4, 0, .6, 1) infinite;
}
.spinner-lg { width: 48px; height: 48px; border-width: 3px; }
.spinner-md { width: 34px; height: 34px; border-width: 2.5px; }
.spinner-sm { width: 18px; height: 18px; border-width: 2px; vertical-align: middle; }

/* ── Toast ───────────────────────────────────────────────────── */
.toast {
  position: fixed; top: 22px; left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 10000;
  padding: 10px 22px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 24px rgb(0 0 0 / calc(.13 * var(--shadow-k)));
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}
.toast.toast-visible {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.toast-success { background: var(--toast-ok-bg); color: var(--toast-ok-c); border: 1px solid var(--toast-ok-b); }
.toast-error   { background: var(--toast-err-bg); color: var(--toast-err-c); border: 1px solid var(--toast-err-b); cursor: pointer; }
.toast-info    { background: var(--info-bg); color: var(--toast-info-c); border: 1px solid var(--info-b); cursor: pointer; }

/* ── Overlay de chargement (partagé entre toutes les vues) ──── */
.app-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: var(--scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 20px;
}
.app-overlay-card {
  background: var(--surface-2); border-radius: 18px;
  width: 100%; max-width: 440px; overflow: hidden;
  box-shadow: 0 20px 60px rgb(0 0 0 / calc(.22 * var(--shadow-k)));
  animation: fadeUp .2s ease both;
}
.overlay-body { padding: 24px 36px 28px; text-align: center; }
.overlay-bar-track { background: var(--border); border-radius: 20px; height: 6px; margin-bottom: 10px; overflow: hidden; position: relative; }
.overlay-bar-fill  { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--primary), var(--primary-h)); transition: width .45s cubic-bezier(.4,0,.2,1); width: 0%; }
.overlay-bar-indeterminate { position: absolute; width: 40% !important; animation: indeterminate 1.6s ease infinite; }
@keyframes indeterminate { 0% { left:-40% } 60% { left:40% } 100% { left:100% } }
.overlay-progress { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); gap: 12px; }
.overlay-pct  { font-weight: 800; color: var(--primary); font-size: 14px; flex-shrink: 0; }
.overlay-hint { font-size: 11px; color: var(--muted); opacity: .5; margin-top: 12px; }
/* Alias rétrocompat */
.stock-overlay-card { background:var(--surface-2);border-radius:18px;width:100%;max-width:440px;overflow:hidden;box-shadow:0 20px 60px rgb(0 0 0 / calc(.22 * var(--shadow-k))); }

/* ── Utilitaires ──────────────────────────────────────────────── */
.text-muted  { color: var(--muted); }
.mt-1        { margin-top: 8px; }
.mt-2        { margin-top: 16px; }
.flex-row    { display: flex; align-items: center; gap: 10px; }

/* ── Lucide icons ─────────────────────────────────────────────── */
.lc { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.lc svg { display:block; }