/* ============================================================
   Jira Family Games — socle de design partagé  ·  v2 « papier de famille »
   Thème clair et chaleureux issu du benchmark (Puzzmo : tons chauds sans
   noir pur · papergames : papier millimétré · GameTable : plateaux bois).
   Tous les contrastes texte sont validés WCAG AA par calcul.
   Source de vérité des tokens. Jamais de couleur en dur ailleurs.
   ============================================================ */

:root {
  /* Papier & encre */
  --bg-color: #faf5ec;       /* crème chaleureux */
  --surface: #ffffff;        /* cartes, plateaux */
  --surface-2: #f3ead8;      /* creux, cellules */
  --border: #d9cbb2;
  --text-color: #3b3127;     /* encre espresso — jamais de noir pur */
  --text-muted: #6b5f4e;
  --text-faint: #8a7d69;
  --grid-line: rgba(122, 102, 74, .07);

  /* Compat tokens v1 (mêmes noms, valeurs claires) */
  --bg-deep: #f3ead8;
  --board-bg: #ffffff;
  --cell-bg: #f3ead8;
  --cell-hover: #eadfc6;

  /* Accents — variantes « texte » conformes AA sur blanc/crème */
  --x-color: #1c66b8;        /* bleu — Morpion X / accent site */
  --o-color: #b82d68;        /* rose — Morpion O */
  --win-color: #1e7a45;      /* vert victoire */
  --gold: #d99a06;           /* surbrillance des prises (dames) */
  --gold-soft: #f7e3b0;

  /* Accents par jeu */
  --ttt-accent: #1c66b8;
  --c4-accent: #8a5a00;      /* ambre lisible (texte) */
  --c4-yellow: #f5b91e;      /* jeton jaune */
  --c4-red: #e2574a;         /* jeton rouge */
  --c4-red-text: #c0392b;
  --c4-board: #2b64c4;       /* le plateau bleu classique */
  --dam-accent: #1e7a45;
  --dam-board-dark: #bb8a52; /* bois */
  --dam-board-light: #f0dcb0;
  --dam-frame: #8a6238;      /* cadre du damier */
  --dam-piece-w: #fffdf6;
  --dam-piece-b: #47362a;
  --kol-accent: #b82d68;
  --kol-red: #e0403a;
  --kol-yellow: #f6b90c;
  --kol-yellow-ink: #4a3503;
  --kol-green: #238b48;
  --kol-blue: #3467d6;

  /* Formes */
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 9px;
  --r-pill: 9999px;

  --shadow-board: 0 10px 28px rgba(122, 96, 60, .18);
  --shadow-card: 0 3px 10px rgba(122, 96, 60, .12);

  --font-stack: ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; font-size: 106.25%; /* 17px — écritures bien visibles */ }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--bg-color);
  /* papier millimétré — la signature papergames */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text-color);
  font-family: var(--font-stack);
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- header commun ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 2.5rem);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.05rem;
}
.wordmark svg { display: block; }

.lang-toggle {
  background: var(--surface);
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: .3rem .4rem;
  display: inline-flex;
  gap: .15rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.lang-toggle button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 800;
  font-size: .82rem;
  padding: .3rem .65rem;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] {
  background: var(--text-color);
  color: var(--surface);
}
.lang-toggle button:focus-visible { outline: 2.5px solid var(--x-color); outline-offset: 2px; }

/* ---------- boutons ---------- */
.btn {
  background-color: var(--surface);
  color: var(--text-color);
  border: 1.5px solid var(--border);
  padding: .8rem 1.7rem;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform .1s, background-color .2s, border-color .2s;
  min-height: 48px;
}
.btn:hover { background-color: var(--surface-2); border-color: var(--text-faint); }
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline: 2.5px solid var(--x-color); outline-offset: 2px; }
.btn--accent { border-color: var(--accent, var(--x-color)); color: var(--accent, var(--x-color)); }

/* ---------- contrôle segmenté (modes, niveaux) ---------- */
.seg {
  display: inline-flex;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: .25rem;
  gap: .25rem;
  flex-wrap: wrap;
  justify-content: center;
  box-shadow: var(--shadow-card);
}
.seg button {
  background: none;
  border: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 38px;
}
.seg button[aria-pressed="true"] {
  background: var(--text-color);
  color: var(--surface);
}
.seg button:focus-visible { outline: 2.5px solid var(--accent, var(--x-color)); outline-offset: 1px; }

/* ---------- pilule de statut ---------- */
.status {
  font-size: 1.2rem;
  font-weight: 800;
  padding: .55rem 1.6rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 2.5px solid var(--border);
  display: inline-block;
  box-shadow: var(--shadow-card);
  transition: color .3s, border-color .3s;
}

/* ---------- page de jeu : gabarit ---------- */
.game-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 0 1rem 3rem;
  user-select: none;
  -webkit-user-select: none;
}
.game-title {
  font-size: clamp(1.8rem, 5.5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.03em;
  margin: .2rem 0 0;
  text-align: center;
}
.game-title .dot { color: var(--accent, var(--x-color)); }

.controls-row {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* ---------- panneau règles ---------- */
.rules-panel {
  max-width: 580px;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  margin-top: 1rem;
  user-select: text;
  box-shadow: var(--shadow-card);
}
.rules-panel summary {
  cursor: pointer;
  font-weight: 800;
  padding: 1rem 1.3rem;
  border-radius: var(--r-lg);
  list-style: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.rules-panel summary::-webkit-details-marker { display: none; }
.rules-panel summary::before { content: "▸"; color: var(--accent, var(--x-color)); transition: transform .2s; }
.rules-panel[open] summary::before { transform: rotate(90deg); }
.rules-panel summary:focus-visible { outline: 2.5px solid var(--accent, var(--x-color)); outline-offset: -2px; }
.rules-body {
  padding: 0 1.3rem 1.2rem;
  color: var(--text-muted);
  font-size: .98rem;
  line-height: 1.7;
}
.rules-body p { margin: .55rem 0; }
.rules-body strong { color: var(--text-color); }

/* ---------- utilitaires ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a { color: var(--x-color); }

.back-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.back-link:hover { color: var(--text-color); }

/* ---------- mode coach ---------- */
.coach-bar {
  width: 100%;
  max-width: 580px;
  background: var(--gold-soft);
  border: 2px solid var(--gold);
  border-radius: var(--r-lg);
  padding: .8rem 1.1rem;
  box-shadow: var(--shadow-card);
}
.coach-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.coach-name { font-size: 1rem; }
.coach-dots { color: var(--c4-accent); font-size: .95rem; letter-spacing: .15em; }
.coach-dots.mastered { color: var(--win-color); font-weight: 800; letter-spacing: 0; }
.coach-quit { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.coach-tip { margin: .45rem 0 0; font-size: .98rem; font-weight: 600; color: var(--text-color); min-height: 1.4em; }
.coach-tip--good { color: var(--win-color); }
.coach-tip--warn { color: var(--c4-red-text); }

/* surbrillance du coup recommandé */
@keyframes coachPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 10px 2px rgba(217, 154, 6, .45); }
  50% { box-shadow: 0 0 0 3px var(--gold), 0 0 20px 6px rgba(217, 154, 6, .65); }
}
.coach-glow { animation: coachPulse 1.4s infinite; border-radius: inherit; }
.coach-warn-col { outline: 3px dashed var(--c4-red); outline-offset: -3px; }

/* bouton d'accès aux stratégies depuis la page de jeu */
.learn-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-weight: 800;
  font-size: .95rem;
  color: var(--text-color);
  background: var(--gold-soft);
  border: 2px solid var(--gold);
  border-radius: var(--r-pill);
  padding: .55rem 1.2rem;
}
.learn-link:hover { background: var(--gold); color: var(--surface); }

/* ---------- pages de stratégie ---------- */
.strat-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  max-width: 640px;
}
.strat-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 6px solid var(--accent, var(--x-color));
  border-radius: var(--r-lg);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-card);
}
.strat-card h2 {
  margin: 0 0 .2rem;
  font-size: 1.18rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.strat-badge { font-size: .8rem; color: var(--c4-accent); letter-spacing: .12em; }
.strat-badge.mastered { color: var(--win-color); letter-spacing: 0; font-weight: 800; }
.strat-kid { margin: .3rem 0 .6rem; font-size: 1.02rem; color: var(--text-color); }
.strat-more {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  margin: .5rem 0;
}
.strat-more summary {
  cursor: pointer;
  font-size: .88rem;
  font-weight: 800;
  color: var(--text-muted);
  padding: .55rem .9rem;
  list-style: none;
}
.strat-more summary::-webkit-details-marker { display: none; }
.strat-more[open] summary { border-bottom: 1.5px solid var(--border); }
.strat-more .strat-more-body { padding: .6rem .9rem .8rem; font-size: .92rem; color: var(--text-muted); line-height: 1.65; }
.strat-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .6rem; }
.strat-actions .btn { padding: .6rem 1.2rem; min-height: 42px; font-size: .95rem; }
.btn--lesson { border-color: var(--accent, var(--x-color)); color: var(--accent, var(--x-color)); }
.btn--live { background: var(--accent, var(--x-color)); border-color: var(--accent, var(--x-color)); color: var(--surface); }
.btn--live:hover { filter: brightness(.92); background: var(--accent, var(--x-color)); }

/* leçon interactive */
.lesson {
  background: var(--surface);
  border: 2px solid var(--accent, var(--x-color));
  border-radius: var(--r-lg);
  padding: 1.1rem 1.3rem;
  margin-top: .8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.lesson-prompt { margin: 0; font-size: 1rem; font-weight: 700; text-align: center; }
.lesson-feedback { margin: 0; min-height: 1.4em; font-size: .98rem; font-weight: 700; text-align: center; }
.lesson-feedback.good { color: var(--win-color); }
.lesson-feedback.bad { color: var(--c4-red-text); }