/* zm-tokens.css — jetons du design Zetamind Révision 6 (source : DESIGN.md Rév 6, skill zetamind-design) : clair ET sombre.
   Par défaut la page suit le réglage du système (prefers-color-scheme) ; forçage : <html data-theme="light|dark">
   (base/zm-theme.js, à charger dans le <head> : ZM.theme.set('light'|'dark'|'auto'), choix mémorisé). Le sombre est celui de la Révision 4.
   Zone toujours sombre (texte sur image ou vidéo) : data-theme="dark" sur l'élément (les jetons se redéclarent sur tout [data-theme]).
   Commun aux applis et aux decks. Aucune couleur hors fil spectral ; vert/rouge = points 6 px seulement.
   Inversion : ce qui est « blanc » en sombre (bouton principal 52 px, pastille du jour, badge) devient « noir » en clair :
   background: var(--texte); color: var(--fond). Avant-plan translucide : rgba(var(--avant-rgb), a) (blanc a en sombre, noir a en clair).
   Halo : rgba(var(--avant-rgb), calc(a * var(--halo-k))), sans halo en clair (une lueur sombre ferait une ombre). Point d'état posé dans une barre : box-shadow: var(--anneau-point). */
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
:root, [data-theme="dark"] {
  color-scheme: light dark;
  --fond: #000; --texte: #f5f5f7; --texte-2: #98989d; --texte-3: #7c7c80;
  --filet: rgba(255,255,255,.09); --surface: #1c1c1e; --trait-icone: rgba(255,255,255,.24);
  --gris-4: #48484a; --gris-5: #2c2c2e;
  --vert: #30d158; --rouge: #ff453a;
  --avant-rgb: 255,255,255; --inverse-2: #3a3a3c; --halo-k: 1; --anneau-point: 0 0 0 0 transparent;
  --sp1: #22e4ff; --sp2: #3d7bff; --sp3: #8b5cf6; --sp4: #c026d3; --sp5: #ff4fa3; --sp6: #ff8a3d; --sp7: #ffd84d; --sp8: #5cffb0;
  --spectre: var(--sp1), var(--sp2), var(--sp3), var(--sp4), var(--sp5), var(--sp6), var(--sp7), var(--sp8), var(--sp1);
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --duree: 220ms;
}
[data-theme="dark"] { color-scheme: dark; }
/* CLAIR (Révision 6) : même rôle et à peu près le même contraste avec le fond que le jumeau sombre. Mesures WCAG sur #fff :
   texte 16,8 · texte-2 7,1 · texte-3 5,1 (4,5 sur la surface) · vert 3,5 · rouge 5,4 · fil ≥ 3,05 sur la surface (même teinte, assombri).
   Le bloc est écrit deux fois (forçage, puis système) : les garder identiques. */
[data-theme="light"] {
  color-scheme: light;
  --fond: #fff; --texte: #1d1d1f; --texte-2: #58585d; --texte-3: #6e6e73;
  --filet: rgba(0,0,0,.09); --surface: #f2f2f7; --trait-icone: rgba(0,0,0,.28);
  --gris-4: #c7c7cc; --gris-5: #e5e5ea;
  --vert: #1f9d41; --rouge: #d70015;
  --avant-rgb: 0,0,0; --inverse-2: #c7c7cc; --halo-k: 0; --anneau-point: 0 0 0 2px var(--fond);
  --sp1: #0099ae; --sp2: #3d7bff; --sp3: #8b5cf6; --sp4: #c026d3; --sp5: #ff3395; --sp6: #ec5e00; --sp7: #ac8600; --sp8: #00a053;
  --spectre: var(--sp1), var(--sp2), var(--sp3), var(--sp4), var(--sp5), var(--sp6), var(--sp7), var(--sp8), var(--sp1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --fond: #fff; --texte: #1d1d1f; --texte-2: #58585d; --texte-3: #6e6e73;
    --filet: rgba(0,0,0,.09); --surface: #f2f2f7; --trait-icone: rgba(0,0,0,.28);
    --gris-4: #c7c7cc; --gris-5: #e5e5ea;
    --vert: #1f9d41; --rouge: #d70015;
    --avant-rgb: 0,0,0; --inverse-2: #c7c7cc; --halo-k: 0; --anneau-point: 0 0 0 2px var(--fond);
    --sp1: #0099ae; --sp2: #3d7bff; --sp3: #8b5cf6; --sp4: #c026d3; --sp5: #ff3395; --sp6: #ec5e00; --sp7: #ac8600; --sp8: #00a053;
    --spectre: var(--sp1), var(--sp2), var(--sp3), var(--sp4), var(--sp5), var(--sp6), var(--sp7), var(--sp8), var(--sp1);
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--fond); color: var(--texte); }
:where([data-theme]:not(:root)) { color: var(--texte); }
body { margin: 0; font-family: var(--police); font-size: 16px; line-height: 1.5; }
button { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }
.zm-gris { color: var(--texte-2); font-size: 13px; }
.zm-source { color: var(--texte-3); font-size: 12px; }
.zm-verbe { color: var(--texte-2); font-size: 13px; text-transform: lowercase; }
.zm-chiffre { font-size: 56px; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
/* fil spectral : 1 px, 12 s par tour ; ajouter .zm-epais pour 2 px */
.zm-fil { position: relative; border-radius: 999px; }
.zm-fil::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--a), var(--spectre));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; animation: zm-tour 12s linear infinite; pointer-events: none; }
.zm-fil.zm-epais::before { padding: 2px; }
@keyframes zm-tour { to { --a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .zm-fil::before { animation: none; } }
/* bascule du thème (Révision 6) : <div data-zm-bascule></div> + base/zm-theme.js → trois pilules « Auto · Clair · Sombre ».
   Choisie = surface + trait 64 % (comme le filtre de la fiche listes) ; jamais blanche : le bouton blanc reste unique à l'écran. */
.zm-bascule { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.zm-bascule button { min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--texte-2); font: inherit; font-size: 14px; cursor: pointer; }
.zm-bascule button[aria-checked="true"] { background: var(--surface); border-color: rgba(var(--avant-rgb),.64); color: var(--texte); }
/* pendant une bascule, aucune transition : pas de mélange des deux thèmes (classe posée deux images par zm-theme.js) */
html.zm-theme-bascule *, html.zm-theme-bascule *::before, html.zm-theme-bascule *::after { transition: none !important; }