/* Diacenter : jetons de couleur, thème clair (par défaut) et sombre.
   Le choix explicite (data-theme sur <html>, posé avant le rendu) gagne toujours sur le système. */

:root {
  color-scheme: light dark;

  /* Fonds et surfaces */
  --bg: #ffffff;
  --mist: #eef1f4;
  --surface: #ffffff;
  --surface-mist: var(--mist);
  --surface-sunk: #dfe4ea;
  --surface-glass: rgba(255, 255, 255, .6);
  --header-bg: rgba(255, 255, 255, .92);
  --input-bg: #ffffff;

  /* Texte et traits */
  --ink: #1c2430;
  --ink-soft: #5a6472;
  --line: #d9dee4;
  --line-strong: #c3ccd6;

  /* Accents */
  --red: #dc2b25;
  --red-dark: #b8211c;
  --sea: #1f6f8b;
  --sea-light: #7cc3da;
  --danger: #a31f1a;

  /* Toujours sombres / toujours clairs, quel que soit le thème */
  --night: #1c2430;
  --footer-bg: #1c2430;
  --footer-edge: transparent;
  --on-dark: #ffffff;
  --on-ink-soft: #b8c4d0;
  --dpe-ink: #111820;
  --btn-dark-bg: #1c2430;
  --btn-dark-fill: #1f6f8b;
  --logo-tile: transparent;

  /* États du formulaire */
  --invalid-bg: #fff8f7;
  --success-bg: #e8f6ef;
  --success-fg: #17603f;
  --error-bg: #fdecea;
  --error-fg: #a31f1a;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231c2430' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Le jeu sombre est déclaré deux fois : choix explicite, puis système sans choix. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131a24;
  --mist: #1a2330;
  --surface: #222d3b;
  --surface-sunk: #2a3646;
  --surface-glass: rgba(255, 255, 255, .04);
  --header-bg: rgba(19, 26, 36, .9);
  --input-bg: #131a24;
  --ink: #e8edf2;
  --ink-soft: #a9b4c0;
  --line: #2f3b4a;
  --line-strong: #445366;
  --sea: #6cc0dc;
  --sea-light: #8fd0e6;
  --danger: #ff8a80;
  --night: #0d1219;
  --footer-bg: #0d1219;
  --footer-edge: #2f3b4a;
  --btn-dark-bg: #2c3b4d;
  --logo-tile: #ffffff;
  --invalid-bg: #3a1d1d;
  --success-bg: #143326;
  --success-fg: #7fdcaa;
  --error-bg: #3a1d1d;
  --error-fg: #ffaba3;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23e8edf2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131a24;
    --mist: #1a2330;
    --surface: #222d3b;
    --surface-sunk: #2a3646;
    --surface-glass: rgba(255, 255, 255, .04);
    --header-bg: rgba(19, 26, 36, .9);
    --input-bg: #131a24;
    --ink: #e8edf2;
    --ink-soft: #a9b4c0;
    --line: #2f3b4a;
    --line-strong: #445366;
    --sea: #6cc0dc;
    --sea-light: #8fd0e6;
    --danger: #ff8a80;
    --night: #0d1219;
    --footer-bg: #0d1219;
    --footer-edge: #2f3b4a;
    --btn-dark-bg: #2c3b4d;
    --logo-tile: #ffffff;
    --invalid-bg: #3a1d1d;
    --success-bg: #143326;
    --success-fg: #7fdcaa;
    --error-bg: #3a1d1d;
    --error-fg: #ffaba3;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23e8edf2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* Transition douce des couleurs, seulement quand le visiteur change de thème (js/theme.js). */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    fill 200ms ease,
    stroke 200ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-transition,
  .theme-transition *,
  .theme-transition *::before,
  .theme-transition *::after {
    transition: none !important;
  }
}

/* ---------- Bascule de thème ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.theme-toggle:hover {
  border-color: var(--line-strong);
  background: var(--mist);
}

.theme-toggle .icon {
  width: 20px;
  height: 20px;
  transition: transform 300ms var(--ease);
}

.theme-toggle:hover .icon {
  transform: rotate(-20deg);
}

.theme-toggle__text {
  display: none;
}

@media (max-width: 959px) {
  .js .theme-toggle {
    justify-content: flex-start;
    width: fit-content;
  }

  .js .theme-toggle__text {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle:hover .icon {
    transform: none;
  }
}