/* Thèmes Saitora : blanc moderne et noir moderne (neutres, très légèrement chauds), l'orchidée du logo en seul accent.
   Le thème est posé sur <html data-theme="light|dark"> par le script en tête de page (choix mémorisé, sinon réglage du système). */
:root{
  --bg:#FAFAF9; --bg-alt:#F1F1EF; --surface:#FFFFFF; --surface-2:#EDEDEB;
  --ink:#111111; --muted:#5C5C60; --faint:#8E8E92;
  --line:rgba(17,17,17,.1); --line-hi:rgba(17,17,17,.28);
  --accent:#B174B2; --accent-hover:#C590C6; --on-accent:#111111; --accent-text:#874888;
  --invert-bg:#111111; --invert-ink:#F5F5F3; --invert-muted:#A3A3A7;
  --ok:#1F7A45; --warn:#946200;
  --logo-filter:none;
  --night:var(--bg);                           /* fond de recouvrement de transition.js */
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0C0C0D; --bg-alt:#141415; --surface:#19191B; --surface-2:#202023;
  --ink:#F5F5F3; --muted:#A3A3A7; --faint:#6E6E73;
  --line:rgba(255,255,255,.09); --line-hi:rgba(255,255,255,.26);
  --accent:#B174B2; --accent-hover:#C995CA; --on-accent:#0C0C0D; --accent-text:#D2A6D3;
  --invert-bg:#161618; --invert-ink:#F5F5F3; --invert-muted:#A3A3A7;
  --ok:#9FE0B1; --warn:#F0CF8A;
  --logo-filter:invert(1);
  color-scheme:dark;
}
/* pendant le changement de thème, pas de transitions de couleur décalées */
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:none!important}

/* bouton clair / sombre */
.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:1px solid var(--line-hi);border-radius:4px;background:none;color:var(--ink);cursor:pointer;transition:border-color 160ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:18px;height:18px;grid-area:1/1;transition:opacity 200ms ease,transform 300ms cubic-bezier(.23,1,.32,1)}
.theme-toggle .moon{opacity:0;transform:rotate(-40deg) scale(.6)}
[data-theme="dark"] .theme-toggle .sun{opacity:0;transform:rotate(40deg) scale(.6)}
[data-theme="dark"] .theme-toggle .moon{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.theme-toggle:hover{border-color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.theme-toggle svg{transition:opacity 200ms ease}.theme-toggle:active{transform:none}}