/* =====================================================================
   tokens.css : système de design commun du portail Rapports SI OneRetail
   (refonte du 20/10/2026, skill « apple-hig-designer » ; palette bleue
   validée le 28/10/2026, maquette docs/app_web/maquette/palette_bleu_v1.html).

   Palette (décision du 28/10/2026) :
   - dominante bleu / blanc / gris bleuté : actions, liens, focus, page
     courante et élément de menu sélectionné en bleu #0A5BB5 ;
   - orange : alertes (« Critique » orange plein, « Alerte » orange clair),
     mise en valeur (meilleur jour des graphiques sans enseigne) et
     enseigne Franprix (pastille ronde) ;
   - rouge : enseigne Monoprix (pastille carrée, série hachurée) et erreurs
     bloquantes seulement (octogone, mot « Erreur » / « Échec ») ;
   - « Information » en gris-bleu ; montants négatifs en bordeaux, toujours
     avec le signe − ;
   - le rouge OneRetail (--brand) ne reste que dans le logo.
   Fichier autonome et réutilisable : toute page ou tout document HTML
   peut le charger seul (aucune dépendance) puis utiliser ses variables.

   - Thème clair par défaut (:root sans attribut) ; thème sombre :
       · choisi sur le poste : <html data-theme="dark"> (sélecteur
         Clair / Sombre / Auto, script en tête de page, 21/10/2026) ;
       · automatique (prefers-color-scheme) sauf <html data-theme="light">.
     Les deux blocs sombres portent EXACTEMENT les mêmes déclarations
     (contrôlé par tests/web/statique_accueil_fusion.py) et ne définissent
     aucune variable absente du bloc clair. Écran seulement : l'impression
     reste claire.
   - Classe .theme-clair : force le thème clair dans un sous-arbre
     (diapositives, documents, aperçus d'impression).
   - Contrastes vérifiés (WCAG 2.1 AA) : textes ≥ 4,5:1 sur leur fond,
     éléments d'interface ≥ 3:1 (calculs de la maquette palette_bleu_v1,
     repris dans docs/app_web/00_decisions.md, décision du 28/10/2026).
   - Les pages de connexion gardent leur aspect d'avant (rouge) : leurs
     couleurs sont figées dans connexion.css (décision de l'utilisateur).
   ===================================================================== */

:root, .theme-clair {
  color-scheme: light;

  /* ---------- Typographie : police système Apple, Inter sur Windows ---------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace;
  /* échelle iOS : taille / interligne (px) */
  --fs-caption2: 11px;  --lh-caption2: 13px;
  --fs-caption1: 12px;  --lh-caption1: 16px;
  --fs-footnote: 13px;  --lh-footnote: 18px;
  --fs-subhead: 15px;   --lh-subhead: 20px;
  --fs-body: 17px;      --lh-body: 22px;
  --fs-headline: 17px;  --lh-headline: 22px;
  --fs-title3: 20px;    --lh-title3: 25px;
  --fs-title2: 22px;    --lh-title2: 28px;
  --fs-title1: 28px;    --lh-title1: 34px;
  --fs-large: 34px;     --lh-large: 41px;
  /* graisses : la hiérarchie passe par la graisse */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  /* approche (Inter rend plus large que SF : léger resserrement des grands corps) */
  --tr-caption: .01em; --tr-text: -.006em; --tr-title: -.012em; --tr-large: -.02em;

  /* ---------- Grille de 8 pt ---------- */
  --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --sidebar-w: 264px;       /* menu latéral */

  /* ---------- Rayons concentriques (intérieur + marge = extérieur) ---------- */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px;
  --radius-card: var(--radius-xl);      /* cartes, listes groupées */
  --radius-field: var(--radius-md);     /* champs */
  --radius-sheet: var(--radius-2xl);    /* feuilles, palette */
  --radius-popover: 14px;               /* menus, alertes */

  /* ---------- Cibles et contrôles ---------- */
  --touch: 44px;            /* cible minimale (HIG) */
  --control-h: 44px;        /* champs, boutons standard */
  --control-h-sm: 32px;     /* boutons de barre d'outils au pointeur fin (44 px au doigt) */
  --row-h: 44px;            /* lignes de listes et de tableaux */
  --seg-h: 32px;            /* contrôle segmenté */

  /* ---------- Mouvement (courbes et durées Apple) ---------- */
  --ease-default: cubic-bezier(.25, .1, .25, 1);
  --ease-in: cubic-bezier(.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, .58, 1);
  --ease-in-out: cubic-bezier(.42, 0, .58, 1);
  --ease-spring: cubic-bezier(.175, .885, .32, 1.275);
  --dur-instant: 100ms; --dur-fast: 200ms; --dur-normal: 300ms; --dur-slow: 500ms;

  /* ---------- Marque (fixe dans les deux thèmes) ---------- */
  --brand: #C72226;          /* rouge OneRetail : logo seulement (jamais dans l'interface) */
  --on-brand: #FFFFFF;
  --logo-plate: #FFFFFF;     /* le logo est toujours posé sur blanc (charte), dans les deux thèmes */
  --navy: #1F3864;           /* bleu nuit du template Excel : titres de documents, diapositives */
  --stage: #000000;          /* scène du plein écran (présentation) */
  --on-stage: #FFFFFF;

  /* ---------- Accent : bleu d'action (bouton principal, menu sélectionné, liens, focus) ---------- */
  --accent: #0A5BB5;                 /* texte, icônes, filets : 6,6:1 sur blanc, 6,1:1 sur #F3F5F8 */
  --accent-fill: #0A5BB5;            /* fond des boutons pleins, menu sélectionné : texte blanc 6,6:1 */
  --accent-fill-hover: #084C99;
  --accent-fill-active: #073F80;
  --accent-tint: rgba(10, 91, 181, .10);      /* bouton teinté, sélection */
  --accent-tint-hover: rgba(10, 91, 181, .16);
  --accent-ring: rgba(10, 91, 181, .30);      /* anneau de focus 4 px */
  --on-accent: #FFFFFF;

  /* ---------- Libellés (opaques : contrastes garantis) ---------- */
  --label: #16202E;                  /* 16:1 sur blanc */
  --label-2: #556173;                /* secondaire : 6,2:1 sur blanc, 5,4:1 sur #EEF1F5 */
  --label-3: #8792A2;                /* tertiaire : décoratif, pictogrammes, désactivé (forme 3,2:1) */
  --label-4: #C5CCD6;                /* quaternaire : filigranes */

  /* ---------- Fonds (style groupé) ---------- */
  --bg: #F3F5F8;                     /* fond de page */
  --bg-elevated: #FFFFFF;            /* cartes, listes, feuilles, menu latéral */
  --bg-inset: #EEF1F5;               /* zone encastrée dans une carte, ligne Total */
  --bg-hover: rgba(51, 65, 85, .06);
  --bg-pressed: rgba(51, 65, 85, .12);
  --bg-chrome: rgba(248, 250, 252, .84);     /* barre supérieure translucide */
  --bg-chrome-solid: #F8FAFC;                /* repli sans effet verre */
  --bg-tooltip: #16202E;
  --on-tooltip: #FFFFFF;
  --scrim: rgba(15, 23, 42, .40);            /* voile sous les feuilles */

  /* ---------- Remplissages (contrôles) ---------- */
  --fill-1: rgba(100, 116, 139, .20);
  --fill-2: rgba(100, 116, 139, .16);
  --fill-3: rgba(100, 116, 139, .12);
  --fill-4: rgba(100, 116, 139, .08);
  --seg-track: rgba(100, 116, 139, .12);
  --seg-thumb: #FFFFFF;
  --seg-thumb-shadow: 0 3px 8px rgba(15, 23, 42, .12), 0 3px 1px rgba(15, 23, 42, .04);

  /* ---------- Séparateurs ---------- */
  --separator: rgba(51, 65, 85, .22);
  --separator-soft: rgba(51, 65, 85, .11);
  --separator-opaque: #D3D9E1;
  --field-border: rgba(51, 65, 85, .22);

  /* ---------- Couleurs sémantiques (états) ---------- */
  --green: #1E7A34;   --green-fill: #34C759;  --green-tint: #E6F4EA;     /* succès, données à jour (4,9:1 sur la teinte) */
  /* alerte (orange) : toujours un triangle, un mot (« Alerte », « Critique ») et un fond teinté ou un filet */
  --alert: #A64B00;                  /* texte et icône d'alerte : 5,2:1 sur --alert-tint */
  --alert-fill: #E07200;             /* forme : filet, icône pleine (3,2:1 sur blanc) */
  --alert-tint: #FFF1E0;             /* fond d'alerte, badge « Alerte » */
  --orange: #A64B00;  --orange-fill: #E07200; --orange-tint: #FFF1E0;   /* noms historiques = alerte */
  --critical: #B85700;               /* badge « Critique » plein (texte --on-critical 4,8:1) */
  --on-critical: #FFFFFF;
  --critical-tint: rgba(184, 87, 0, .12);
  /* erreur bloquante (rouge) : octogone, mot « Erreur » / « Échec », fond rose ; jamais une alerte */
  --danger: #B0121F;                 /* 6,1:1 sur --danger-tint */
  --danger-tint: #FCE9EA;
  --info: #3B5B85;                   /* « Information » : gris-bleu, 6,1:1 sur --info-tint */
  --info-tint: #EDF1F6;
  --negative: #7A0C12;               /* montants négatifs, toujours avec le signe − (texte seulement) */
  --neutral: #475263;  --neutral-tint: rgba(100, 116, 139, .14);
  /* enseignes : forme pleine (pastille ronde Franprix, carrée Monoprix), jamais d'icône ni de fond teinté */
  --franprix: #D96C00;               /* forme 3,5:1 sur blanc */
  --monoprix: #D0142C;               /* forme 5,3:1 sur blanc */

  /* ---------- Ombres discrètes ---------- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);
  --shadow-2: 0 4px 16px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .05);
  --shadow-3: 0 24px 60px rgba(15, 23, 42, .18), 0 6px 18px rgba(15, 23, 42, .08);
  --shadow-focus: 0 0 0 4px var(--accent-ring);

  /* ---------- Graphiques (hexadécimal : lus aussi par les scripts) ---------- */
  --chart-1: #0A5BB5;      /* série principale : marge, taux */
  --chart-1b: #1F3864;     /* bleu nuit : marge après démarque */
  --chart-2: #33475F;      /* ardoise */
  --chart-3: #8792A2;
  --chart-4: #C5CCD6;
  --chart-5: #E07200;      /* orange : au-dessus d'un seuil (alerte) */
  --chart-6: #5E7591;
  --chart-bar: #5E7591;    /* barres neutres */
  --chart-bar-nc: #C5CCD6; /* « (Non classé) » */
  --chart-best: #E07200;   /* mise en valeur (meilleur jour) dans les graphiques sans enseigne */
  --chart-ramp-0: #EEF3FA;  /* rampe séquentielle bleue, du faible au fort */
  --chart-ramp-1: #D6E3F4;
  --chart-ramp-2: #B3CBEA;
  --chart-ramp-3: #6F9AD3;
  --chart-ramp-4: #1F4F8F;
  --chart-ink-dark: #16202E;   /* encre sur case claire */
  --chart-ink-light: #FFFFFF;  /* encre sur case foncée */
  --chart-hatch-bg: #E6EBF1;
  --chart-hatch-line: #A9B4C2;
  --chart-grid: #E6EBF1;
  --chart-axis: #C5CCD6;
  --chart-track: #E6EBF1;      /* fond des jauges et anneaux */
}

/* ---------- Thème sombre (écran seulement : l'impression reste claire) ----------
   1. choisi sur le poste (« Sombre » dans le menu du compte ou sur la page de connexion) ;
   2. automatique (« Auto », par défaut) : suit Windows / le navigateur, sauf choix « Clair ».
   Les deux blocs doivent rester identiques. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    --navy: #A9C4E8;

    --accent: #6CB0FF;                 /* 7,9:1 sur #161B22 */
    --accent-fill: #2B6FC9;            /* texte blanc 5,0:1 */
    --accent-fill-hover: #2667BE;
    --accent-fill-active: #215FAF;
    --accent-tint: rgba(108, 176, 255, .16);
    --accent-tint-hover: rgba(108, 176, 255, .24);
    --accent-ring: rgba(108, 176, 255, .45);

    --label: #E8EDF3;
    --label-2: #9AA6B5;                /* 6,6:1 sur #161B22, 5,6:1 sur #21262D */
    --label-3: #6B7685;
    --label-4: #3A4350;

    --bg: #0D1117;
    --bg-elevated: #161B22;
    --bg-inset: #21262D;
    --bg-hover: rgba(148, 163, 184, .08);
    --bg-pressed: rgba(148, 163, 184, .16);
    --bg-chrome: rgba(13, 17, 23, .84);
    --bg-chrome-solid: #11161D;
    --bg-tooltip: #2D343E;
    --on-tooltip: #E8EDF3;
    --scrim: rgba(0, 0, 0, .60);

    --fill-1: rgba(148, 163, 184, .28);
    --fill-2: rgba(148, 163, 184, .22);
    --fill-3: rgba(148, 163, 184, .16);
    --fill-4: rgba(148, 163, 184, .10);
    --seg-track: rgba(148, 163, 184, .16);
    --seg-thumb: #3A4350;
    --seg-thumb-shadow: 0 3px 8px rgba(0, 0, 0, .3);

    --separator: rgba(148, 163, 184, .30);
    --separator-soft: rgba(148, 163, 184, .16);
    --separator-opaque: #2D343E;
    --field-border: rgba(148, 163, 184, .32);

    --green: #4CC26E;  --green-fill: #4CC26E;  --green-tint: #15291C;
    --alert: #FFA94D;
    --alert-fill: #FF9F2E;
    --alert-tint: #2A2118;
    --orange: #FFA94D; --orange-fill: #FF9F2E; --orange-tint: #2A2118;
    --critical: #F5922A;
    --on-critical: #1C1206;
    --critical-tint: rgba(245, 146, 42, .18);
    --danger: #FF7B84;
    --danger-tint: #2A1719;
    --info: #8FB3E0;
    --info-tint: #1A2433;
    --negative: #FF9AA0;
    --neutral: #C5CCD6; --neutral-tint: rgba(148, 163, 184, .22);
    --franprix: #F5922A;
    --monoprix: #FF5A66;

    --shadow-1: 0 0 0 1px rgba(255, 255, 255, .04);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    --shadow-3: 0 24px 70px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);

    --chart-1: #4C93E6;
    --chart-1b: #A9C4E8;
    --chart-2: #C5CCD6;
    --chart-3: #7C8796;
    --chart-4: #5E6878;
    --chart-5: #FF9F2E;
    --chart-6: #8E9BAD;
    --chart-bar: #A9B7C9;
    --chart-bar-nc: #3A4350;
    --chart-best: #FF9F2E;
    --chart-ramp-0: #1B2330;
    --chart-ramp-1: #1E3350;
    --chart-ramp-2: #24497A;
    --chart-ramp-3: #35639F;
    --chart-ramp-4: #8DBBF2;
    --chart-ink-dark: #0D1117;
    --chart-ink-light: #FFFFFF;
    --chart-hatch-bg: #2D343E;
    --chart-hatch-line: #4A5363;
    --chart-grid: #2D343E;
    --chart-axis: #4A5363;
    --chart-track: #2D343E;
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --navy: #A9C4E8;

    --accent: #6CB0FF;                 /* 7,9:1 sur #161B22 */
    --accent-fill: #2B6FC9;            /* texte blanc 5,0:1 */
    --accent-fill-hover: #2667BE;
    --accent-fill-active: #215FAF;
    --accent-tint: rgba(108, 176, 255, .16);
    --accent-tint-hover: rgba(108, 176, 255, .24);
    --accent-ring: rgba(108, 176, 255, .45);

    --label: #E8EDF3;
    --label-2: #9AA6B5;                /* 6,6:1 sur #161B22, 5,6:1 sur #21262D */
    --label-3: #6B7685;
    --label-4: #3A4350;

    --bg: #0D1117;
    --bg-elevated: #161B22;
    --bg-inset: #21262D;
    --bg-hover: rgba(148, 163, 184, .08);
    --bg-pressed: rgba(148, 163, 184, .16);
    --bg-chrome: rgba(13, 17, 23, .84);
    --bg-chrome-solid: #11161D;
    --bg-tooltip: #2D343E;
    --on-tooltip: #E8EDF3;
    --scrim: rgba(0, 0, 0, .60);

    --fill-1: rgba(148, 163, 184, .28);
    --fill-2: rgba(148, 163, 184, .22);
    --fill-3: rgba(148, 163, 184, .16);
    --fill-4: rgba(148, 163, 184, .10);
    --seg-track: rgba(148, 163, 184, .16);
    --seg-thumb: #3A4350;
    --seg-thumb-shadow: 0 3px 8px rgba(0, 0, 0, .3);

    --separator: rgba(148, 163, 184, .30);
    --separator-soft: rgba(148, 163, 184, .16);
    --separator-opaque: #2D343E;
    --field-border: rgba(148, 163, 184, .32);

    --green: #4CC26E;  --green-fill: #4CC26E;  --green-tint: #15291C;
    --alert: #FFA94D;
    --alert-fill: #FF9F2E;
    --alert-tint: #2A2118;
    --orange: #FFA94D; --orange-fill: #FF9F2E; --orange-tint: #2A2118;
    --critical: #F5922A;
    --on-critical: #1C1206;
    --critical-tint: rgba(245, 146, 42, .18);
    --danger: #FF7B84;
    --danger-tint: #2A1719;
    --info: #8FB3E0;
    --info-tint: #1A2433;
    --negative: #FF9AA0;
    --neutral: #C5CCD6; --neutral-tint: rgba(148, 163, 184, .22);
    --franprix: #F5922A;
    --monoprix: #FF5A66;

    --shadow-1: 0 0 0 1px rgba(255, 255, 255, .04);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    --shadow-3: 0 24px 70px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);

    --chart-1: #4C93E6;
    --chart-1b: #A9C4E8;
    --chart-2: #C5CCD6;
    --chart-3: #7C8796;
    --chart-4: #5E6878;
    --chart-5: #FF9F2E;
    --chart-6: #8E9BAD;
    --chart-bar: #A9B7C9;
    --chart-bar-nc: #3A4350;
    --chart-best: #FF9F2E;
    --chart-ramp-0: #1B2330;
    --chart-ramp-1: #1E3350;
    --chart-ramp-2: #24497A;
    --chart-ramp-3: #35639F;
    --chart-ramp-4: #8DBBF2;
    --chart-ink-dark: #0D1117;
    --chart-ink-light: #FFFFFF;
    --chart-hatch-bg: #2D343E;
    --chart-hatch-line: #4A5363;
    --chart-grid: #2D343E;
    --chart-axis: #4A5363;
    --chart-track: #2D343E;
  }
}

/* ---------- Contraste renforcé ---------- */
@media (prefers-contrast: more) {
  :root, .theme-clair { --label-2: #3F4A5A; --separator: rgba(51, 65, 85, .5); --separator-soft: rgba(51, 65, 85, .3); --field-border: rgba(51, 65, 85, .45); }
}
@media screen and (prefers-contrast: more) {
  :root[data-theme="dark"] { --label-2: #C5CCD6; --separator: rgba(148, 163, 184, .6); --separator-soft: rgba(148, 163, 184, .4); --field-border: rgba(148, 163, 184, .7); }
}
@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --label-2: #C5CCD6; --separator: rgba(148, 163, 184, .6); --separator-soft: rgba(148, 163, 184, .4); --field-border: rgba(148, 163, 184, .7); }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-normal: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}