/* Palette de site/static/css/site.css ; alias des variables admin existantes.
   html:root est volontairement plus spécifique que les :root inline des pages,
   même si ce fichier est chargé avant eux. Aucun changement de grille/composant. */
html:root {
  --bg: #FFFDF8;
  --bg2: #F8F1E3;
  --card: #FFFFFF;
  --card2: #FBF6EC;
  --ink: #1D1A15;
  --soft: #57524A;
  /* Plus contrasté que le texte tertiaire public, pour les petits chiffres. */
  --light: #6C655B;
  --line: rgb(29 26 21 / .10);
  --line2: rgb(29 26 21 / .18);
  --apricot: #F4A261;
  --apricot-soft: #FDE7D3;
  --apricot-text: #A34F22;
  --on-apricot: #1D1A15;
  --mint: #216E3A;
  --mint-soft: #D6EED0;
  --sky: #5B8DEF;
  --sky-soft: #D6E4F7;
  --rose: #E77A98;
  --lav: #8B7CF0;
  --red: #B93828;
  --error-bg: #F9D2CB;
  --error-ink: #7A1F12;
  --focus: #9B471A;
  --control-line: #8A8273;
  --button-edge: #1D1A15;
  --elev: 0 1px 2px rgb(29 26 21 / .05), 0 10px 30px -12px rgb(29 26 21 / .16);
  color-scheme: light;
  background: var(--bg);
}

html:root[data-theme="dark"] {
  --bg: #101827;
  --bg2: #16222F;
  --card: #1C2B3A;
  --card2: #233447;
  --ink: #F4F1EA;
  --soft: #C9D1DB;
  --light: #9EADBE;
  --line: rgb(244 241 234 / .10);
  --line2: rgb(244 241 234 / .18);
  --apricot-soft: #29394A;
  --apricot-text: #F6B27A;
  --mint: #82D59B;
  --mint-soft: #193C34;
  --sky-soft: #203C5B;
  --red: #FF9F92;
  --error-bg: #472D38;
  --error-ink: #FFC1B7;
  --focus: #F6B27A;
  --control-line: #7D90A6;
  --button-edge: #101827;
  --elev: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -12px rgb(0 0 0 / .7);
  color-scheme: dark;
}

/* Repli système si JavaScript est bloqué ; un choix explicite reste prioritaire. */
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme]) {
    --bg: #101827;
    --bg2: #16222F;
    --card: #1C2B3A;
    --card2: #233447;
    --ink: #F4F1EA;
    --soft: #C9D1DB;
    --light: #9EADBE;
    --line: rgb(244 241 234 / .10);
    --line2: rgb(244 241 234 / .18);
    --apricot-soft: #29394A;
    --apricot-text: #F6B27A;
    --mint: #82D59B;
    --mint-soft: #193C34;
    --sky-soft: #203C5B;
    --red: #FF9F92;
    --error-bg: #472D38;
    --error-ink: #FFC1B7;
    --focus: #F6B27A;
    --control-line: #7D90A6;
    --button-edge: #101827;
    --elev: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -12px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}

html body { background: var(--bg); color: var(--ink); }
html .card { box-shadow: var(--elev); }
html .pill.err { background: var(--error-bg); color: var(--error-ink); }

/* Garde les actions abricot et leur relief, y compris le bouton du login. */
html .btn:not(.ghost), html #f button {
  background: var(--apricot);
  color: var(--on-apricot);
  border-color: var(--button-edge);
  box-shadow: 2px 2px 0 var(--button-edge);
}
html .btn.ghost { border-color: var(--control-line); }
html input, html select { border-color: var(--control-line); }
html input::placeholder { color: var(--light); opacity: 1; }
html .icon, html .mini { color: var(--ink); background: var(--card2); }

/* Le même bouton fonctionne dans le header ou dans la carte de connexion. */
html #theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--control-line);
  border-radius: 999px;
  background: var(--card2);
  color: var(--ink);
  box-shadow: none;
  font: 600 13px/1.4 system-ui, -apple-system, sans-serif;
  text-align: center;
  cursor: pointer;
}
html :is(button, .btn, .icon, input, select):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* Barre du haut du tableau de bord : même bouton, en rond, comme ses voisins. */
html #theme[data-compact] { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; }
html :is(button, .btn):disabled { cursor: not-allowed; opacity: .6; }
html ::selection { background: var(--apricot); color: var(--on-apricot); }

@media (hover: hover) {
  html #theme:hover, html .icon:hover, html .mini:hover { background: var(--line2); }
  html .btn:hover, html #f button:hover { filter: brightness(1.06); }
}

/* Aucun fondu de thème : le choix initial est rendu directement. Les animations
   CSS du dashboard s'arrêtent aussi quand la réduction des mouvements est active.
   Les compteurs et confettis pilotés par son JS restent du ressort du dashboard. */
@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  html #theme, html .btn, html #f button { border: 2px solid ButtonText; }
  html :is(button, .btn, .icon, input, select):focus-visible { outline-color: Highlight; }
}