/*
 * Jetons de conception (design tokens) — palette claire (defaut) et sombre.
 * Identite sobre, proche des outils de developpement (IDE, terminal,
 * GitHub) : typographie systeme, bordures plutot que des ombres, une seule
 * couleur d'accent. Contraste vise : WCAG 2.1 AA minimum (verifie par
 * axe-core en E2E, Task 9 de ce plan — la source de verite finale).
 */

:root {
  --color-bg: #ffffff;
  --color-bg-muted: #f4f4f5;
  --color-fg: #18181b;
  --color-fg-muted: #52525b;
  --color-border: #d4d4d8;
  /* Bordure de controle interactif (bouton, etc.) — jeton distinct de
     --color-border : WCAG 2.1 SC 1.4.11 exige >= 3:1 contre --color-bg pour
     la delimitation d'un composant d'interface, ce que --color-border
     (~1,46:1 ici) n'atteint pas. #71717a sur #ffffff ≈ 4,83:1 (calcule a la
     main, axe-core n'implemente pas ce critere). */
  --color-control-border: #71717a;
  --color-accent: #2563eb;
  --color-accent-fg: #ffffff;
  --color-focus: #2563eb;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

[data-theme="dark"] {
  --color-bg: #18181b;
  --color-bg-muted: #27272a;
  --color-fg: #fafafa;
  --color-fg-muted: #a1a1aa;
  --color-border: #3f3f46;
  /* #8b8b93 sur #18181b ≈ 5,23:1 (calcule a la main) — meme raison qu'en
     theme clair, valeur propre car #18181b n'a pas le meme contraste requis. */
  --color-control-border: #8b8b93;
  --color-accent: #3b82f6;
  --color-accent-fg: #0b1220;
  --color-focus: #3b82f6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-ui);
  line-height: 1.6;
}

/* Le soulignement reste au survol : la couleur seule ne doit jamais etre le
   seul signal (spec maitre §6.9, WCAG 1.4.1) — retirer text-decoration au
   survol romprait cette regle. */
a { color: var(--color-accent); text-decoration: underline; }

button {
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-control-border);
  border-radius: 4px;
  padding: .4em .8em;
  cursor: pointer;
}

/* Style de bouton "actif/enfonce" : scope au panneau d'accessibilite pour ne
   pas laisser fuir ce traitement visuel a tout futur bouton aria-pressed de
   l'application (jeton de conception != style de composant). */
button.a11y-btn--active,
.a11y-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border-color: var(--color-accent);
}

code, pre, .mono { font-family: var(--font-mono); }

/* Focus visible obligatoire (WCAG 2.4.7) — jamais outline:none sans remplacement. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

header, footer {
  border-color: var(--color-border);
}
header { border-bottom: 1px solid var(--color-border); padding: .75em 1em; }
footer { border-top: 1px solid var(--color-border); padding: .75em 1em; color: var(--color-fg-muted); }

/* ═══════════════════════════════════════════════
   Accessibilite — police OpenDyslexic (auto-hebergee, jamais de CDN)
═══════════════════════════════════════════════ */

@font-face {
  font-family: 'OpenDyslexic';
  src: url('/fonts/opendyslexic/OpenDyslexic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

[data-font="dyslexic"] body,
[data-font="dyslexic"] p,
[data-font="dyslexic"] span,
[data-font="dyslexic"] div,
[data-font="dyslexic"] a,
[data-font="dyslexic"] button,
[data-font="dyslexic"] label,
[data-font="dyslexic"] input,
[data-font="dyslexic"] textarea,
[data-font="dyslexic"] select,
[data-font="dyslexic"] li,
[data-font="dyslexic"] h1,
[data-font="dyslexic"] h2,
[data-font="dyslexic"] h3,
[data-font="dyslexic"] h4 {
  font-family: 'OpenDyslexic', sans-serif;
  letter-spacing: .03em;
  word-spacing: .15em;
  line-height: 1.9;
}

/* ═══════════════════════════════════════════════
   Panneau d'accessibilite — bouton dans l'en-tete (templates/layout.php),
   panneau en surcouche fixe ancree sous l'en-tete (reste structurellement
   en fin de <body>, positionne ici uniquement par CSS).
═══════════════════════════════════════════════ */

#a11y-toggle-btn,
#nav-pwa {
  margin-left: .5em;
}

.a11y-panel {
  position: fixed;
  top: 3.5em;
  right: 1em;
  z-index: 100;
  width: 260px;
  max-width: calc(100vw - 2em);
  background: var(--color-bg);
  border: 1px solid var(--color-control-border);
  border-radius: 6px;
  padding: 1em;
}

.a11y-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75em;
}

.a11y-panel-title { font-weight: bold; }

.a11y-close { border: none; background: none; padding: .2em .5em; }

.a11y-group { margin-bottom: 1em; }
.a11y-group:last-child { margin-bottom: 0; }

.a11y-label { margin: 0 0 .4em; font-size: .9em; color: var(--color-fg-muted); }

.a11y-theme-btns { display: flex; gap: .4em; }

.a11y-btn { flex: 1; padding: .3em .5em; font-size: .9em; }
.a11y-btn-full { width: 100%; }

/* ═══════════════════════════════════════════════
   PWA — bannière de mise à jour du service worker (public/js/app.js)
═══════════════════════════════════════════════ */

#sw-update-banner {
  position: fixed;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--color-bg);
  border: 1px solid var(--color-control-border);
  border-radius: 6px;
  padding: .6em 1em;
  display: flex;
  align-items: center;
  gap: .6em;
}

/* ═══════════════════════════════════════════════
   Champ honeypot (anti-bot, formulaire de contact — module 0 §3.8)
   Dimensions nulles plutot que position hors ecran : reste robuste
   independamment de la CSP (aucun style inline requis) et satisfait les
   detections d'"element cache" standard (bounding box vide) — position
   hors ecran seule ne suffit pas pour ces detections.
═══════════════════════════════════════════════ */

.hp-field {
  display: none;
}