/* kevindolhin.fr — jetons de thème (piste C « La table de l'atelier »)
   Sombre par défaut, clair si l'appareil le demande, et choix forcé via [data-theme] sur <html>.
   Source : refonte/theme/theme.css. Ne jamais écrire de couleur en dur ailleurs (sauf exceptions en bas). */

@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-latin-wght-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/assets/fonts/geist-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0F1013;   /* fond « table » */
  --bg2: #121317;  /* blocs */
  --bg3: #0B0C0E;  /* pied de page */
  --fg: #ECE9E3;   /* texte */
  --fg2: #C9C5BD;  /* texte courant secondaire */
  --mut: #A29D94;  /* légendes, métadonnées (6,9:1) */
  --line: #24262B;
  --line2: #2C2E34;
  --bd: #45474E;   /* bordures de boutons */
  --card: #ECE9E3; /* cartes ivoire (texte toujours #0F1013 / #3A3830) */
  --acc: #E8B04A;  /* or (9,9:1) */
  --acc2: #E8B04A; /* accent sur les fonds les plus foncés du thème clair (pied de page) */
  --grid: #1A1C21; /* quadrillage 32 px */
  --ph1: #1A1B20;  /* zones image en attente */
  --ph2: #15161A;
  --ok: #7BD389; --okbg: #121A14; --oktx: #CDEBD3; --okbd: #2E4A34;
  --err: #F2A27A;
  --sh: rgba(0, 0, 0, .45);

  --f-serif: "Instrument Serif", Georgia, serif;
  --f-sans: Geist, system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;
  --ease-c: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F4F1EB; --bg2: #ECE7DE; --bg3: #E4DED3;
    --fg: #16171B; --fg2: #3E3C37; --mut: #5E5A52;
    --line: #DCD6CB; --line2: #D3CCBF; --bd: #8F887C;
    --card: #FFFFFF;
    --acc: #8A5A00;  /* bronze : l'or ne passe pas AA en texte sur fond clair (5,2:1) */
    --acc2: #6E4F0F; /* bronze foncé : 5,6:1 sur --bg3 (#8A5A00 n'y fait que 4,4:1) */
    --grid: #E7E2D8; --ph1: #E2DDD3; --ph2: #EAE6DE;
    --ok: #2E7A3E; --okbg: #E4F1E6; --oktx: #1F5A2C; --okbd: #9CC7A5;
    --err: #A3401A;
    --sh: rgba(60, 45, 20, .16);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F1EB; --bg2: #ECE7DE; --bg3: #E4DED3;
  --fg: #16171B; --fg2: #3E3C37; --mut: #5E5A52;
  --line: #DCD6CB; --line2: #D3CCBF; --bd: #8F887C;
  --card: #FFFFFF;
  --acc: #8A5A00;
  --acc2: #6E4F0F;
  --grid: #E7E2D8; --ph1: #E2DDD3; --ph2: #EAE6DE;
  --ok: #2E7A3E; --okbg: #E4F1E6; --oktx: #1F5A2C; --okbd: #9CC7A5;
  --err: #A3401A;
  --sh: rgba(60, 45, 20, .16);
}

/* Passerelle provisoire : les pages pas encore refaites (site.css) suivent le thème.
   À supprimer avec site.css quand toutes les pages seront passées en piste C. */
:root {
  --bg-2: var(--bg2); --surface: var(--bg2);
  --fg-2: var(--fg2); --fg-3: var(--mut);
  --accent: var(--acc); --danger: var(--err);
  /* utilisées aussi par showreel.css (lecteur repris tel quel sur l'Accueil) */
  --serif: var(--f-serif); --sans: var(--f-sans); --ease: var(--ease-c);
  --accent-ink: #1A1408; --r-l: 10px;
}

/* Règles fixes, quel que soit le thème :
   - boutons pleins or : fond #E8B04A, texte #0F1013 (l'or reste l'or dans les deux thèmes) ;
   - texte posé sur une carte ivoire/blanche : #0F1013 ou #3A3830, jamais var(--fg) ;
   - boutons sombres posés sur une carte (cookies « Accepter », bannière roman, CTA atelier) : #0F1013 / #ECE9E3 en dur ;
   - contour de focus : 2px solid #E8B04A, décalage 3px. */

body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 var(--f-sans); }
.mat {
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
:focus-visible { outline: 2px solid #E8B04A; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}