/* ------------------------------------------------------------------
   SHEMS — thèmes Blanc & Bordeaux / Bordeaux & Noir
   Toutes les couleurs du site passent par ces variables globales.
   Le thème est posé sur <html data-theme="light|dark"> avant l'affichage
   (script d'amorçage dans index.html), donc sans flash au chargement.
   ------------------------------------------------------------------ */

/* MODE 1 — Blanc & Bordeaux (par défaut) */
:root,
:root[data-theme="light"] {
  --paper: #FFFFFF;
  --surface: #FAF7F7;
  --ink: #171515;
  --ink-2: #3B3536;
  --mineral: #6F6668;
  --line: #E8E1E2;
  --brass: #651D32;          /* accent fin : logo, numéros, repères */
  --brass-soft: #F3E6EA;     /* halo de focus, fonds légers */
  --accent: #651D32;         /* bordeaux signature : boutons */
  --accent-hover: #7A2640;
  --accent-ink: #FFFFFF;
  --on-ink: #FFFFFF;
  --band: #651D32;
  --band-line: #84435A;
  --overlay: rgba(255, 255, 255, 0.9);
  --scrim: rgba(23, 21, 21, 0.38);
  --ok: #2F6B4F;
  --err: #A2402A;
  --sphere-a: #FFFFFF; --sphere-b: #F1E8EA; --sphere-c: #C9AEB5;
  color-scheme: light;
}

/* MODE 2 — Bordeaux & Noir */
:root[data-theme="dark"] {
  --paper: #171515;
  --surface: #201C1D;
  --ink: #F6F1EF;
  --ink-2: #D9D1CF;
  --mineral: #ABA19F;
  --line: #352E30;
  --brass: #CC8EA0;          /* bordeaux éclairci pour rester lisible sur noir */
  --brass-soft: #3D1F29;
  --accent: #651D32;
  --accent-hover: #7E2A43;
  --accent-ink: #FFFFFF;
  --on-ink: #FFFFFF;
  --band: #651D32;
  --band-line: #84435A;
  --overlay: rgba(32, 28, 29, 0.9);
  --scrim: rgba(0, 0, 0, 0.55);
  --ok: #7CC09E;
  --err: #E8957F;
  --sphere-a: #5A3440; --sphere-b: #2A1D21; --sphere-c: #120F10;
  color-scheme: dark;
}

/* ---------- Boutons : bordeaux signature, texte blanc ---------- */
.btn { --b-bg: var(--accent); --b-fg: var(--accent-ink); }
.btn:not(.ghost):hover { --b-bg: var(--accent-hover); }
.btn.brass { --b-bg: var(--accent); --b-fg: var(--accent-ink); }
.btn.ghost:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.band .btn:not(.ghost):hover { --b-bg: var(--on-ink); filter: brightness(.94); }
.band .btn.ghost:hover { background: var(--on-ink); color: var(--band); border-color: var(--on-ink); }
.hints .btn:not(.ghost):hover { --b-bg: #FFFFFF; }
.acro .tile, .preview-banner { background: var(--accent); color: var(--accent-ink); }
:root[data-theme="dark"] .btn:not(.ghost) { border-color: color-mix(in srgb, var(--accent) 70%, #ffffff 12%); }
:root[data-theme="dark"] .band .btn:not(.ghost) { border-color: var(--on-ink); }

/* Liens et repères actifs */
.nav a[aria-current="page"]::after, .nav a:hover::after { background: var(--brass); }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Transition douce lors du changement ---------- */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .26s ease, color .26s ease, border-color .26s ease, fill .26s ease, stroke .26s ease, box-shadow .26s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: none !important; }
}

/* ---------- Sélecteur de thème ---------- */
.theme-pick { position: relative; flex: none; }
.theme-btn { display: inline-grid; place-items: center; }
.theme-btn svg { display: block; }
.theme-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 272px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; box-shadow: 0 2px 4px rgba(23, 21, 21, .06), 0 24px 48px -20px rgba(23, 21, 21, .35);
  transform-origin: top right; animation: tm-in .22s var(--ease) both;
}
.theme-menu[hidden] { display: none; }
@keyframes tm-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.theme-menu .tm-h { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mineral); padding: 6px 8px 8px; }
.tm-opt {
  display: grid; grid-template-columns: 56px 1fr 18px; gap: 12px; align-items: center; width: 100%;
  padding: 8px; border: 1px solid transparent; border-radius: 9px; background: none; color: inherit;
  text-align: left; cursor: pointer; font: inherit; transition: background-color .2s, border-color .2s;
}
.tm-opt + .tm-opt { margin-top: 4px; }
.tm-opt:hover { background: var(--surface); }
.tm-opt:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--brass-soft); }
.tm-opt[aria-checked="true"] { border-color: var(--brass); background: var(--surface); }
.tm-opt b { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.tm-opt small { display: block; font-size: var(--fs-xs); color: var(--mineral); margin-top: 1px; }
.tm-opt b svg { flex: none; }
.tm-check { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s var(--ease); }
.tm-opt[aria-checked="true"] .tm-check { opacity: 1; transform: none; }
/* Mini aperçu des couleurs */
.tm-sw { width: 56px; height: 42px; border-radius: 6px; border: 1px solid rgba(23, 21, 21, .14); position: relative; overflow: hidden; }
.tm-sw i { position: absolute; display: block; border-radius: 2px; }
.tm-sw .l1 { left: 7px; top: 8px; width: 24px; height: 3px; }
.tm-sw .l2 { left: 7px; top: 15px; width: 34px; height: 3px; opacity: .45; }
.tm-sw .bt { left: 7px; bottom: 7px; width: 22px; height: 9px; border-radius: 5px; background: #651D32; }
.tm-sw .dt { right: 7px; top: 8px; width: 6px; height: 6px; border-radius: 2px; background: #651D32; }
.tm-sw.light { background: #FFFFFF; }
.tm-sw.light .l1, .tm-sw.light .l2 { background: #171515; }
.tm-sw.dark { background: #171515; border-color: rgba(255, 255, 255, .14); }
.tm-sw.dark .l1, .tm-sw.dark .l2 { background: #F6F1EF; }
.tm-sw.dark .dt { background: #CC8EA0; }

@media (max-width: 1440px) {
  .site-header .theme-pick { margin-left: auto; }
  .site-header .menu-btn { margin-left: -12px; }
}
@media (max-width: 420px) { .theme-menu { width: min(272px, calc(100vw - 32px)); right: -52px; } }

/* Bandeau bordeaux : textes secondaires bien lisibles */
.band .eyebrow, .band .muted { opacity: 1; color: rgba(255, 255, 255, .74); }
.band .perks p { color: rgba(255, 255, 255, .8); }