/* Avalyz lot 32 (DEC-0319, 12 oct. 2026) — LES jetons de couleur de toute l'application : vitrine, banc, rapport, espace client,
   zone admin. Une seule source (Génération 1, SOCLE DESIGN.md § 3 et § 11 : « Thème : suit le système ; data-theme="light|dark"
   force le choix » ; aucune couleur écrite en dur dans un composant). Valeurs : la charte L1-UX d'Avalyz (orange), contrastes WCAG 2.2
   AA vérifiés par tests/test_avalyz_interface_unique.py en clair ET en sombre. E3 (DEC-0319) : le bouton principal est orange vif
   avec un texte foncé (5,4:1 en clair, 6,2:1 en sombre) — jamais de texte blanc sur l'orange (3,05:1).
   Les noms courts (--paper, --ink…) sont ceux des feuilles existantes ; les rôles SOCLE (--bg, --surface, --primary…) en sont des alias. */
:root {
  color-scheme: light;
  --paper: #FFFFFF; --fond: #F4F5F8; --soft: #F6F7F9; --ink: #1B1F24; --ink-2: #3A4350; --mute: #5B6B7A; --second: #5B6B7A;
  --hair: #E3E7EB; --stroke: #7A8794;
  --accent: #F26B1D; --accent2: #FF9A3C; --accent-fond: #F26B1D; --sur-accent: #1B1F24; --accent-txt: #C2410C; --accent-doux: #FFF1E8;
  --ok: #1F7A3E; --okt: #E9F6EE; --warn: #9A5A0C; --warnt: #FFF4E5; --bad: #C8322B; --badt: #FDECEB; --info: #087CA7;
  --focus: #C2410C;
  --verre: rgba(255, 255, 255, .80); --verre-haut: rgba(255, 255, 255, .74); --verre-lat: rgba(255, 255, 255, .55);
  --voile: rgba(16, 24, 40, .045); --champ: #FFFFFF; --ombre: 0 20px 50px -30px rgba(16, 24, 40, .30); --lueur: rgba(242, 107, 29, .22);
  --fond-page: radial-gradient(1200px 600px at 85% -10%, rgba(242, 107, 29, .10), transparent 60%),
               radial-gradient(900px 500px at -10% 30%, rgba(56, 189, 248, .08), transparent 60%),
               radial-gradient(800px 600px at 50% 120%, rgba(167, 139, 250, .07), transparent 60%), #F4F5F8;
  --gr-carte: #E6EAF0; --gr-carte-bord: rgba(16, 24, 40, .18); --gr-infobulle: rgba(255, 255, 255, .96);
  /* rôles SOCLE (Génération 1, DESIGN.md § 3.7) */
  --bg: var(--fond); --surface: var(--paper); --surface-soft: var(--soft); --text: var(--ink); --text-2: var(--ink-2);
  --text-secondary: var(--mute); --separator: var(--hair); --primary: var(--accent-fond); --on-primary: var(--sur-accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0F1216; --fond: #05070C; --soft: #171B21; --ink: #F2F4F7; --ink-2: #C8CDDB; --mute: #9AA8B5; --second: #9AA8B5;
    --hair: #262C36; --stroke: #5E6B7A;
    --accent: #F26B1D; --accent2: #FF9A3C; --accent-fond: #F26B1D; --sur-accent: #0F1216; --accent-txt: #FF8A4C; --accent-doux: #2B1A10;
    --ok: #4CC26F; --okt: #15301F; --warn: #F2B24A; --warnt: #33240E; --bad: #FF6B61; --badt: #3A1A1A; --info: #38BDF8;
    --focus: #FF8A4C;
    --verre: rgba(17, 21, 33, .72); --verre-haut: rgba(7, 9, 15, .70); --verre-lat: rgba(7, 9, 15, .45);
    --voile: rgba(255, 255, 255, .045); --champ: rgba(0, 0, 0, .30); --ombre: 0 20px 60px -30px rgba(0, 0, 0, .80); --lueur: rgba(242, 107, 29, .35);
    --fond-page: radial-gradient(1200px 600px at 85% -10%, rgba(242, 107, 29, .16), transparent 60%),
                 radial-gradient(900px 500px at -10% 30%, rgba(56, 189, 248, .10), transparent 60%),
                 radial-gradient(800px 600px at 50% 120%, rgba(167, 139, 250, .10), transparent 60%), #05070C;
    --gr-carte: #141A2B; --gr-carte-bord: rgba(255, 255, 255, .12); --gr-infobulle: rgba(12, 15, 24, .92);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0F1216; --fond: #05070C; --soft: #171B21; --ink: #F2F4F7; --ink-2: #C8CDDB; --mute: #9AA8B5; --second: #9AA8B5;
  --hair: #262C36; --stroke: #5E6B7A;
  --accent: #F26B1D; --accent2: #FF9A3C; --accent-fond: #F26B1D; --sur-accent: #0F1216; --accent-txt: #FF8A4C; --accent-doux: #2B1A10;
  --ok: #4CC26F; --okt: #15301F; --warn: #F2B24A; --warnt: #33240E; --bad: #FF6B61; --badt: #3A1A1A; --info: #38BDF8;
  --focus: #FF8A4C;
  --verre: rgba(17, 21, 33, .72); --verre-haut: rgba(7, 9, 15, .70); --verre-lat: rgba(7, 9, 15, .45);
  --voile: rgba(255, 255, 255, .045); --champ: rgba(0, 0, 0, .30); --ombre: 0 20px 60px -30px rgba(0, 0, 0, .80); --lueur: rgba(242, 107, 29, .35);
  --fond-page: radial-gradient(1200px 600px at 85% -10%, rgba(242, 107, 29, .16), transparent 60%),
               radial-gradient(900px 500px at -10% 30%, rgba(56, 189, 248, .10), transparent 60%),
               radial-gradient(800px 600px at 50% 120%, rgba(167, 139, 250, .10), transparent 60%), #05070C;
  --gr-carte: #141A2B; --gr-carte-bord: rgba(255, 255, 255, .12); --gr-infobulle: rgba(12, 15, 24, .92);
}
/* l'impression et le PDF restent toujours clairs, quel que soit le thème choisi à l'écran */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light;
    --paper: #FFFFFF; --fond: #F4F5F8; --soft: #F6F7F9; --ink: #1B1F24; --ink-2: #3A4350; --mute: #5B6B7A; --second: #5B6B7A;
    --hair: #E3E7EB; --stroke: #7A8794;
    --accent: #F26B1D; --accent2: #FF9A3C; --accent-fond: #F26B1D; --sur-accent: #1B1F24; --accent-txt: #C2410C; --accent-doux: #FFF1E8;
    --ok: #1F7A3E; --okt: #E9F6EE; --warn: #9A5A0C; --warnt: #FFF4E5; --bad: #C8322B; --badt: #FDECEB; --info: #087CA7;
    --focus: #C2410C;
    --verre: rgba(255, 255, 255, .80); --verre-haut: rgba(255, 255, 255, .74); --verre-lat: rgba(255, 255, 255, .55);
    --voile: rgba(16, 24, 40, .045); --champ: #FFFFFF; --ombre: 0 20px 50px -30px rgba(16, 24, 40, .30); --lueur: rgba(242, 107, 29, .22);
    --fond-page: radial-gradient(1200px 600px at 85% -10%, rgba(242, 107, 29, .10), transparent 60%),
                 radial-gradient(900px 500px at -10% 30%, rgba(56, 189, 248, .08), transparent 60%),
                 radial-gradient(800px 600px at 50% 120%, rgba(167, 139, 250, .07), transparent 60%), #F4F5F8;
    --gr-carte: #E6EAF0; --gr-carte-bord: rgba(16, 24, 40, .18); --gr-infobulle: rgba(255, 255, 255, .96);
    /* rôles SOCLE (Génération 1, DESIGN.md § 3.7) */
    --bg: var(--fond); --surface: var(--paper); --surface-soft: var(--soft); --text: var(--ink); --text-2: var(--ink-2);
    --text-secondary: var(--mute); --separator: var(--hair); --primary: var(--accent-fond); --on-primary: var(--sur-accent);
    --verre: #FFFFFF; --verre-haut: #FFFFFF; --verre-lat: #FFFFFF; --voile: transparent; --fond: #FFFFFF; --fond-page: #FFFFFF; --ombre: none;
  }
}

/* le choix du thème (Clair · Sombre · Auto) : le même contrôle partout (pied des pages publiques, menu latéral de l'espace connecté) */
.av-theme { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--voile); border: 1px solid var(--hair); }
.av-theme button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: none;
  color: var(--mute); font: 600 12.5px/1 inherit; cursor: pointer; white-space: nowrap; }
.av-theme button:hover { color: var(--ink); }
.av-theme button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), inset 0 0 0 1.5px var(--stroke); }  /* l'état pressé tient aussi par un contour ≥ 3:1 (WCAG 1.4.11), pas par la seule couleur */
.av-theme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.av-theme-etat { margin: 6px 0 0; color: var(--warn); font-size: 12.5px; }
.av-theme-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--mute); font-size: 13px; }
@media (max-width: 640px) { .av-theme button { min-height: 40px; } }