:root {
  --felt: #0e5232;
  --felt-dark: #082a1c;
  --felt-light: #146840;
  --wood: #8a5a2e;
  --cream: #f6f2e9;
  --ink: #201d18;
  --accent: #a92727;
  --accent-dark: #8a1f1f;
  --gold: #d9a441;
  --card-bg: #ffffff;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 10px rgba(20,20,10,0.10);
  --shadow-hover: 0 6px 18px rgba(20,20,10,0.16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  background: linear-gradient(135deg, var(--felt-dark), var(--felt));
  color: white;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  position: relative;
  z-index: 11;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}

.brand-icon {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

.brand-sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 1px;
}

.tabs {
  display: flex;
  overflow-x: auto;
  background: var(--felt-dark);
  position: sticky;
  top: 0;
  z-index: 10;
  -webkit-overflow-scrolling: touch;
  padding: 6px 8px;
  gap: 4px;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.68);
  padding: 9px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab-btn:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}

.tab-btn.active {
  color: var(--felt-dark);
  font-weight: 700;
  background: var(--gold);
}

#content {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 18px 70px;
}

.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  animation: fadein 0.25s ease;
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

h1 {
  font-size: 1.55rem;
  margin: 0 0 14px;
  color: var(--felt-dark);
  font-weight: 800;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.08rem;
  margin: 26px 0 10px;
  color: var(--felt);
  border-left: 4px solid var(--accent);
  padding-left: 10px;
  font-weight: 700;
}

h3 {
  margin: 0 0 6px;
  color: var(--felt-dark);
  font-weight: 700;
}

p, li {
  line-height: 1.6;
  font-size: 0.98rem;
  color: #2c2a24;
}

ul { padding-left: 20px; }

.formula {
  background: var(--felt-dark);
  color: #fff8e6;
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-family: "Courier New", monospace;
  margin: 6px 0 14px;
  box-shadow: var(--shadow);
}

.disclaimer {
  background: #fff4e0;
  border-left: 4px solid var(--gold);
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  margin-top: 18px;
  color: #5c4a1f;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 15px 16px;
  box-shadow: var(--shadow);
  cursor: pointer;
  border-top: 4px solid var(--felt);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.card:active { transform: scale(0.98); }

.card h3 { font-size: 1rem; }
.card p { font-size: 0.86rem; margin: 0; color: #4d4940; }

.shot-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 15px 17px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--wood);
  transition: box-shadow 0.15s ease;
}

.shot-card:hover { box-shadow: var(--shadow-hover); }

.calc-box {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 360px;
}

.calc-box label {
  font-size: 0.85rem;
  color: #3a372f;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.calc-box input, .calc-box select {
  padding: 9px 11px;
  border: 1.5px solid #d8d2c2;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: #fdfcf9;
  transition: border-color 0.15s ease;
}

.calc-box input:focus, .calc-box select:focus {
  outline: none;
  border-color: var(--felt);
}

.calc-box button {
  background: var(--felt);
  color: white;
  border: none;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.15s ease, transform 0.1s ease;
}

.calc-box button:hover { background: var(--felt-light); }
.calc-box button:active { background: var(--felt-dark); transform: scale(0.98); }

.calc-result {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}

.cta-btn {
  background: var(--felt);
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  margin: 6px 0 4px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.cta-btn:hover { background: var(--felt-light); }
.cta-btn:active { background: var(--felt-dark); transform: scale(0.98); }

.diagram-wrap {
  margin: 12px 0 6px;
  max-width: 360px;
}

.diagram {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.diagram .traj {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-dasharray: 4 3;
  opacity: 0.75;
}

.diagram .traj-ref {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.2;
  stroke-dasharray: 2 3;
  opacity: 0.4;
}

.diagram .diagram-label {
  font-size: 9px;
  fill: #f5f0e6;
  font-family: inherit;
}

.diagram-caption {
  font-size: 0.8rem;
  color: #57534a;
  margin: 6px 0 0;
}

.diagram .ghost {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.2;
  stroke-dasharray: 2 2;
  opacity: 0.85;
}

.diagram .impact {
  fill: #1a1a1a;
  stroke: #fff;
  stroke-width: 0.5;
}

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--card-bg);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 4px 0 18px;
  font-size: 0.82rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #2a2a2a;
}

.glossary dt {
  font-weight: 700;
  color: var(--felt-dark);
  margin-top: 12px;
}

.glossary dd {
  margin: 2px 0 0;
  font-size: 0.92rem;
  color: #2c2a24;
}

.rules-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 18px;
  font-size: 0.88rem;
}

.rules-table th, .rules-table td {
  border: 1px solid #ddd;
  padding: 7px 9px;
  text-align: left;
}

.rules-table th {
  background: var(--felt);
  color: white;
}

.foul-list li {
  margin-bottom: 6px;
}

.calc-box-wide {
  max-width: 420px;
}

.interactive-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.picker-controls {
  display: flex;
  gap: 8px;
}

.mode-btn {
  flex: 1;
  background: #e8e4d8;
  border: 2px solid transparent;
  color: #3a372f;
  padding: 8px 6px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.mode-btn.active {
  background: var(--felt);
  color: white;
  border-color: var(--felt-dark);
}

.picker-svg .pick-pt {
  fill: rgba(255,255,255,0.5);
  stroke: #232019;
  stroke-width: 1;
  cursor: pointer;
}

.picker-svg .pick-pt:hover {
  fill: #ffd54a;
}

.picker-svg .pick-label {
  font-size: 8px;
  fill: #f5f0e6;
  pointer-events: none;
}

.picker-line {
  stroke: #ffd54a;
  stroke-width: 2;
  stroke-dasharray: 3 3;
}

.picker-marker-depart { fill: #f5f5f0; stroke: #232019; stroke-width: 1.5; }
.picker-marker-arrivee { fill: #b22222; stroke: #6e1414; stroke-width: 1.5; }
.picker-marker-visee { fill: #ffd54a; stroke: #8a6a10; stroke-width: 1.5; }

.picker-result {
  font-size: 0.95rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 16px 0 22px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--felt);
}

.stat-label {
  font-size: 0.72rem;
  color: #57534a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 10px 0 4px;
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.history-table th, .history-table td {
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.history-table th {
  background: var(--felt-dark);
  color: white;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.del-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
}

.video-card {
  margin-bottom: 18px;
}

.video-embed {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding-top: 56.25%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  background: #000;
}

.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.quiz-q {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.quiz-q p.q-text {
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--felt-dark);
}

.quiz-q label {
  display: block;
  font-size: 0.9rem;
  padding: 4px 0;
  cursor: pointer;
}

.quiz-q.correct { border-left: 4px solid #2e8b3d; }
.quiz-q.incorrect { border-left: 4px solid var(--accent); }

.quiz-submit-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 11px 20px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 6px;
}

/* ===== Thème sombre ===== */
body.theme-dark {
  --cream: #14120e;
  --ink: #ece7dd;
  --card-bg: #241f18;
  --shadow: 0 2px 10px rgba(0,0,0,0.45);
  --shadow-hover: 0 6px 18px rgba(0,0,0,0.55);
}
body.theme-dark .diagram-caption,
body.theme-dark .stat-label,
body.theme-dark .settings-hint { color: #a49e93; }
body.theme-dark .history-table th, body.theme-dark .history-table td { border-bottom-color: #3a332a; }
body.theme-dark .disclaimer { background: #2c2620; }

/* ===== Réglages ===== */
.settings-toggle {
  margin-left: auto;
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.settings-toggle:hover { background: rgba(255,255,255,0.28); }
.settings-panel {
  background: var(--card-bg);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding: 12px 16px;
  box-shadow: var(--shadow);
  position: relative; z-index: 10;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 0; flex-wrap: wrap;
}
.settings-row + .settings-row { border-top: 1px solid rgba(0,0,0,0.06); }
.settings-hint { font-size: 0.78rem; color: #57534a; margin: 4px 0 6px; }
.seg-btn {
  background: var(--felt); color: #fff; border: none;
  padding: 7px 12px; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 600; cursor: pointer; margin-left: 6px;
}
.seg-btn:hover { background: var(--felt-light); }
.seg-btn[data-state="off"], .seg-btn[data-state="sombre"] { background: var(--gold); color: #201d18; }

/* ===== Recherche glossaire ===== */
.search-box {
  width: 100%; padding: 10px 12px; font-size: 0.95rem;
  border: 1px solid #ccc; border-radius: var(--radius-sm);
  margin: 4px 0 14px; background: var(--card-bg); color: var(--ink);
}
.glossary dt.hidden, .glossary dd.hidden { display: none; }

/* ===== Rejouer sous un schéma ===== */
.replay-mini {
  background: none; border: 1px solid var(--felt); color: var(--felt);
  font-size: 0.75rem; padding: 3px 9px; border-radius: 20px; cursor: pointer; margin-top: 2px;
}
.replay-mini:hover { background: var(--felt); color: #fff; }

/* ===== Exercices ===== */
.theme-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.theme-filter button {
  background: var(--card-bg); border: 1px solid var(--felt); color: var(--felt);
  padding: 6px 12px; border-radius: 20px; font-size: 0.82rem; cursor: pointer; font-weight: 600;
}
.theme-filter button.active { background: var(--felt); color: #fff; }
.exo-card {
  background: var(--card-bg); border-radius: 10px; padding: 14px 16px;
  margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  border-left: 4px solid var(--gold);
}
.exo-card.hidden { display: none; }
.exo-theme { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); font-weight: 700; }
.exo-card h3 { margin: 4px 0 6px; }
.exo-solution { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(0,0,0,0.15); font-size: 0.9rem; }
.exo-solution[hidden] { display: none; }
.exo-btn {
  background: none; border: 1px solid var(--felt); color: var(--felt);
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 600;
}
.exo-daily {
  background: linear-gradient(135deg, var(--felt-dark), var(--felt)); color: #fff;
  border-radius: 12px; padding: 16px; margin-bottom: 18px;
}
.exo-daily h2 { color: #fff; margin-top: 0; }

/* ===== Playground / interactif ===== */
.play-svg { touch-action: none; }
.play-ball { cursor: grab; }
.play-ball:active { cursor: grabbing; }
.play-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.play-controls label { font-size: 0.85rem; display: flex; align-items: center; gap: 5px; }

/* ===== Graphe & minuteur ===== */
.chart-box { background: var(--card-bg); border-radius: 10px; padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); margin: 8px 0 18px; }
.timer-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 18px; }
.timer-display { font-size: 1.6rem; font-weight: 800; color: var(--felt); font-variant-numeric: tabular-nums; }
.objective-line { font-size: 0.95rem; margin: 6px 0; }
.objective-line .ok { color: #2e8b3d; font-weight: 700; }
.objective-line .ko { color: var(--accent); font-weight: 700; }

/* ===== Pas-à-pas (steppers) ===== */
.stepper { background: var(--card-bg); border-radius: 12px; padding: 12px; box-shadow: var(--shadow); margin: 10px 0 20px; }
.step-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.step-btns .step-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--felt);
  background: var(--card-bg); color: var(--felt); font-weight: 700; cursor: pointer; font-size: 0.9rem;
}
.step-btns .step-btn.active { background: var(--felt); color: #fff; }
.step-nav { display: flex; gap: 8px; margin-top: 8px; }
.step-cap { font-size: 0.92rem; margin: 10px 0 0; min-height: 2.4em; }
.step-cap[hidden] { display: none; }
.step-cap strong { color: var(--accent); }

/* ===== Conseiller de coup ===== */
.advisor-reco { background: var(--card-bg); border-radius: 12px; padding: 6px 4px; box-shadow: var(--shadow); margin: 10px 0 16px; }
.reco-item { padding: 12px 14px; border-left: 4px solid #ccc; }
.reco-item + .reco-item { border-top: 1px solid rgba(0,0,0,0.07); }
.reco-item.best { border-left-color: var(--gold); background: rgba(217,164,65,0.08); }
.reco-rank { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; color: var(--accent); }
.reco-item h3 { margin: 3px 0 5px; font-size: 1.02rem; }
.reco-why { font-size: 0.88rem; margin: 0; color: var(--ink); }
.reco-score { float: right; font-size: 0.8rem; font-weight: 700; color: var(--felt); }
body.theme-dark .reco-item.best { background: rgba(217,164,65,0.14); }

/* ======================================================================
   LOT 1 — accessibilité, mouvement réduit, performance de rendu
   ====================================================================== */

/* A6 — état de focus visible et homogène sur tous les contrôles.
   :focus-visible ne s'affiche qu'au clavier : aucune bordure parasite à la souris. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.tabs .tab-btn:focus-visible {
  outline-color: var(--gold);
  outline-offset: -2px;
}
/* repli pour les navigateurs sans :focus-visible */
@supports not selector(:focus-visible) {
  button:focus, a:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
  }
}

/* A2 — lien d'évitement : premier élément focusable, invisible tant qu'il n'a pas le focus */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 30;
  background: var(--cream);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-hover);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

/* le panneau actif reçoit le focus au changement d'onglet : pas de contour permanent */
.tab-panel:focus { outline: none; }

/* P2 — les 12 panneaux inactifs ne sont plus mis en page au chargement.
   contain-intrinsic-size donne au navigateur une hauteur estimée pour la barre de défilement. */
.tab-panel:not(.active) {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

/* A3 — mouvement réduit : plus d'apparition de panneau ni de défilement animé.
   Les trajectoires SVG sont mises en pause par app.js, qui laisse le bouton « Rejouer » actif. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tab-panel.active { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* A5 — les schémas exposent une description : le curseur d'aide signale qu'elle est consultable */
svg.diagram[aria-label] { cursor: help; }

/* ======================================================================
   LOT 2 — confort d'usage
   ====================================================================== */

/* --- B5 : progression de lecture + retour en haut --- */
#read-progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 0;
  background: var(--gold); z-index: 20; transition: width 0.1s linear;
}
#to-top {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 19; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: var(--felt); color: #fff; font-size: 1.1rem; cursor: pointer;
  box-shadow: var(--shadow-hover); opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(8px);
}
#to-top.show { opacity: 0.94; pointer-events: auto; transform: none; }

/* --- B4 : sommaire d'onglet et ancres --- */
.toc {
  background: var(--card-bg); border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius); padding: 10px 14px; margin: 0 0 22px;
  box-shadow: var(--shadow);
}
.toc > summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--felt); }
.toc ol { margin: 10px 0 2px; padding-left: 20px; }
.toc li { margin: 3px 0; font-size: 0.9rem; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.anchor-link {
  opacity: 0; text-decoration: none; color: var(--felt); font-weight: 400;
  margin-left: 8px; font-size: 0.8em; transition: opacity 0.12s;
}
h2:hover .anchor-link, h3:hover .anchor-link, .anchor-link:focus { opacity: 0.7; }
:target { scroll-margin-top: 64px; }

/* --- B3 : recherche globale --- */
.search-overlay {
  position: fixed; inset: 0; z-index: 40; background: rgba(8,20,14,0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(48px, env(safe-area-inset-top, 0px)) 16px 16px;
}
.search-box {
  background: var(--cream); color: var(--ink); width: 100%; max-width: 560px;
  border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  overflow: hidden; display: flex; flex-direction: column; max-height: 78vh;
}
.search-box input {
  font: inherit; font-size: 1.05rem; border: none; border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 15px 18px; background: transparent; color: inherit; width: 100%;
}
.search-box input:focus { outline: none; }
.search-results { overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.search-results li { margin: 0; }
.search-results button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font: inherit; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; color: inherit;
}
.search-results button:hover, .search-results .sel button { background: rgba(14,82,50,0.09); }
.search-results .r-tab {
  display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--felt); background: rgba(14,82,50,0.1); border-radius: 4px; padding: 1px 6px; margin-bottom: 3px;
}
.search-results .r-title { display: block; font-weight: 600; font-size: 0.95rem; }
.search-results .r-snip { display: block; font-size: 0.85rem; color: #4d4940; margin-top: 2px; }
.search-results mark { background: var(--gold); color: var(--ink); border-radius: 2px; padding: 0 1px; }
.search-hint { font-size: 0.78rem; color: #57534a; padding: 8px 14px; border-top: 1px solid rgba(0,0,0,0.08); }
.search-empty { padding: 22px 16px; text-align: center; color: #57534a; font-size: 0.92rem; }
.search-hit { animation: hitflash 1.6s ease; }
@keyframes hitflash {
  0%, 60% { background: rgba(217,164,65,0.35); }
  100% { background: transparent; }
}

/* --- B7 : favoris --- */
.fav-btn {
  background: none; border: none; cursor: pointer; font-size: 1.15rem; line-height: 1;
  color: #c3bdb0; padding: 2px 4px; float: right; margin-left: 8px;
}
.fav-btn[aria-pressed="true"] { color: var(--gold); }
.fav-btn:hover { color: var(--gold); }
.fav-group { margin-bottom: 26px; }
.fav-item {
  background: var(--card-bg); border-radius: var(--radius); padding: 12px 15px;
  margin-bottom: 8px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: baseline;
}
.fav-item h3 { margin: 0 0 3px; font-size: 1rem; }
.fav-item p { margin: 0; font-size: 0.88rem; color: #4d4940; }
.fav-empty { color: #57534a; font-size: 0.93rem; }

/* --- B8 : termes du glossaire dans le texte --- */
.gloss-term {
  font: inherit; background: none; border: none; padding: 0; cursor: help; color: inherit;
  border-bottom: 1px dashed var(--felt-light); text-decoration: none;
}
.gloss-pop {
  position: absolute; z-index: 35; max-width: min(300px, calc(100vw - 32px));
  background: var(--ink); color: var(--cream); border-radius: var(--radius-sm);
  padding: 10px 13px; font-size: 0.85rem; line-height: 1.45; box-shadow: var(--shadow-hover);
}
.gloss-pop b { color: var(--gold); display: block; margin-bottom: 3px; }
.gloss-pop a { color: var(--gold); display: inline-block; margin-top: 6px; font-size: 0.8rem; }

/* --- B9 : bandeau d'installation --- */
#install-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 25; background: var(--felt-dark); color: #fff; border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow-hover);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
#install-bar p { margin: 0; flex: 1 1 180px; font-size: 0.9rem; }
#install-bar button { font: inherit; font-size: 0.85rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #fff; }
#install-bar button.primary { background: var(--gold); border-color: var(--gold); color: #241c05; font-weight: 600; }

/* --- C3 : exercices suivis et séance guidée --- */
.exo-score { font-size: 0.78rem; color: #57534a; display: block; margin-top: 6px; }
.exo-rate { display: flex; gap: 6px; margin-top: 8px; }
.exo-rate button { font: inherit; font-size: 0.8rem; padding: 5px 11px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(0,0,0,0.15); background: var(--cream); color: var(--ink); }
.exo-rate button.ok:hover { border-color: var(--felt); color: var(--felt); }
.exo-rate button.ko:hover { border-color: var(--accent); color: var(--accent); }
.seance-box { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 22px; }
.seance-progress { font-family: monospace; font-size: 0.82rem; color: #57534a; }

/* --- C2 : quiz --- */
.quiz-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.quiz-hist { font-size: 0.85rem; color: #4d4940; margin-top: 10px; }
.quiz-q.wrong { border-left: 3px solid var(--accent); padding-left: 10px; }
.quiz-q.right { border-left: 3px solid var(--felt); padding-left: 10px; }
.quiz-fix { font-size: 0.86rem; color: var(--accent); margin: 6px 0 0; }

/* --- A7 : billes manipulables au clavier --- */
.play-ball { cursor: grab; }
.play-ball:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ======================================================================
   B2 — au-delà de 1024 px : sommaire latéral au lieu du rail qui défile
   ====================================================================== */
@media (min-width: 1024px) {
  .topbar { position: sticky; top: 0; z-index: 12; }
  .tabs {
    position: fixed; top: var(--topbar-h, 64px); left: 0; bottom: 0; width: 236px;
    flex-direction: column; align-items: stretch; overflow-y: auto; overflow-x: hidden;
    padding: 14px 10px; gap: 2px; border-right: 1px solid rgba(0,0,0,0.12);
  }
  .tab-btn { text-align: left; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.9rem; }
  #content { max-width: 1060px; margin: 0 auto; padding: 30px 26px 80px calc(236px + 34px); }
  .settings-panel { right: 0; }
  #read-progress { left: 236px; }
  .toc { position: relative; }
}

/* --- C5 : échelle des quantités de bille --- */
.qb-scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
  max-width: 560px;
}
.qb-case { margin: 0; }
.qb-svg { border-radius: var(--radius-sm); }
.qb-case figcaption {
  font-size: 0.76rem;
  text-align: center;
  color: #4d4940;
  margin-top: 4px;
  font-weight: 600;
}
body.theme-dark .qb-case figcaption { color: #a49e93; }
.tab-panel ol { padding-left: 22px; }
.tab-panel ol li { margin-bottom: 7px; }

/* --- Familles dans la navigation : intitulés visibles seulement en sommaire latéral --- */
.tab-group { display: none; }
@media (min-width: 1024px) {
  .tab-group {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255,255,255,0.42);
    padding: 16px 14px 5px;
    font-weight: 700;
  }
  .tab-group:first-of-type { padding-top: 8px; }
}

/* --- Boutons d'action de la barre du haut : icônes dessinées, plus de glyphes --- */
.icon-btn {
  margin-left: 8px;
  background: rgba(255,255,255,0.12);
  border: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
  flex: 0 0 auto;
}
.icon-btn:first-of-type { margin-left: auto; }
.icon-btn:hover { background: rgba(255,255,255,0.26); }
.icon-btn svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.icon-btn[aria-expanded="true"] { background: var(--gold); }
.icon-btn[aria-expanded="true"] svg { stroke: #241c05; }

/* --- Sous-sommaire sous l'onglet actif, dans le sommaire latéral --- */
.tab-sub { display: none; }
@media (min-width: 1024px) {
  .tab-sub {
    display: block;
    list-style: none;
    margin: 2px 0 6px;
    padding: 0 0 0 14px;
    border-left: 1px solid rgba(255,255,255,0.14);
    margin-left: 18px;
  }
  .tab-sub li { margin: 0; }
  .tab-sub a {
    display: block;
    color: rgba(255,255,255,0.58);
    text-decoration: none;
    font-size: 0.8rem;
    padding: 5px 8px;
    border-radius: 6px;
    line-height: 1.3;
  }
  .tab-sub a:hover { color: #fff; background: rgba(255,255,255,0.07); }
  .tab-sub a.current {
    color: var(--gold);
    font-weight: 600;
    background: rgba(217,164,65,0.12);
  }
}

/* ======================================================================
   C7 — Feuille d'impression : on imprime la page consultée, pas l'app
   ====================================================================== */
@media print {
  .topbar, .tabs, .settings-panel, #read-progress, #to-top, #install-bar,
  .search-overlay, .replay-mini, .skip-link, .fav-btn, .exo-rate,
  .quiz-submit-btn, .quiz-meta, .step-nav, .play-controls, .cta-btn,
  .theme-filter, .anchor-link, .seance-box { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  #content { max-width: none; margin: 0; padding: 0; }
  .tab-panel:not(.active) { display: none !important; }
  .tab-panel.active { display: block !important; animation: none; }

  h1 { font-size: 20pt; color: #000; }
  h2 { font-size: 14pt; color: #000; border-left: 3px solid #000; page-break-after: avoid; }
  h3 { font-size: 12pt; color: #000; page-break-after: avoid; }
  p, li, td { font-size: 10.5pt; color: #000; }

  .card, .shot-card, .calc-box, .exo-card, .stepper, .chart-box, .stat-card,
  .advisor-reco, .toc, .fav-item, .seance-box {
    box-shadow: none !important;
    border: 1px solid #999;
    background: #fff !important;
    page-break-inside: avoid;
  }
  .diagram-wrap { page-break-inside: avoid; max-width: 100mm; }
  .diagram { box-shadow: none; border: 1px solid #999; }
  .disclaimer { background: #f2f2f2 !important; color: #000; border-left: 3px solid #666; }
  .rules-table th { background: #e5e5e5 !important; color: #000 !important; }
  .exo-solution[hidden] { display: block !important; }   /* une fiche imprimée porte sa solution */
  .gloss-term { border-bottom: none; }

  /* l'adresse des liens sortants, puisqu'on ne peut pas cliquer sur du papier */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #3a372f; }

  @page { margin: 14mm 12mm; }
}

/* --- C6 : étiquettes et filtres des coups typiques --- */
.coup-tags { margin: 0 0 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.coup-tag {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  color: var(--felt); background: rgba(14,82,50,0.09);
  border-radius: 4px; padding: 2px 7px;
}
body.theme-dark .coup-tag { background: rgba(76,177,131,0.16); color: #7fd3a8; }
.filter-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #57534a; font-weight: 700; align-self: center; margin-right: 2px;
}
.filter-label:not(:first-child) { margin-left: 10px; }
body.theme-dark .filter-label { color: #a49e93; }
.shot-card.hidden { display: none; }

/* Le sommaire en tête de page fait doublon avec le sous-sommaire du menu latéral :
   on ne le garde qu'en dessous de 1024 px, où le menu latéral n'existe pas. */
@media (min-width: 1024px) {
  .toc { display: none; }
}

/* Encadré « point à vérifier » : un doute assumé, pas une note de bas de page */
.verify {
  background: #fff4e0;
  border: 1px solid var(--gold);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin: 16px 0;
  font-size: 0.92rem;
  color: #5c4a1f;
}
.verify h3 { color: #7a5c14; margin: 0 0 6px; font-size: 0.95rem; }
.verify blockquote {
  margin: 8px 0; padding: 8px 12px;
  background: rgba(255,255,255,0.6);
  border-left: 3px solid rgba(122,92,20,0.35);
  font-style: italic;
}
.verify p:last-child { margin-bottom: 0; }
body.theme-dark .verify { background: #2c2620; color: #d8cfb8; border-color: #6b5520; }
body.theme-dark .verify h3 { color: var(--gold); }
body.theme-dark .verify blockquote { background: rgba(0,0,0,0.25); }

/* --- F13 : bandeau d'erreur discret --- */
#err-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 30; background: var(--accent-dark); color: #fff;
  border-radius: var(--radius); padding: 11px 14px; box-shadow: var(--shadow-hover);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.88rem;
}
#err-bar span { flex: 1 1 200px; }
#err-bar button {
  font: inherit; font-size: 0.82rem; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.4); background: transparent; color: #fff;
}
.settings-diag { margin: 6px 0 2px; }
.settings-diag summary { font-size: 0.8rem; color: #57534a; cursor: pointer; }
body.theme-dark .settings-diag summary { color: #a49e93; }

/* --- F4 : bandeau de mise à jour --- */
#maj-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 28; background: var(--felt-dark); color: #fff;
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-hover);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.9rem;
}
#maj-bar span { flex: 1 1 200px; }
#maj-bar button {
  font: inherit; font-size: 0.85rem; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #fff;
}
#maj-bar button.primary { background: var(--gold); border-color: var(--gold); color: #241c05; font-weight: 600; }

/* --- C10 : bouton de démonstration --- */
.demo-btn { background: var(--gold); color: #241c05; }
.demo-btn:hover { background: #e8b95a; }
.stepper[data-demo="1"] .step-cap { border-left: 3px solid var(--gold); padding-left: 10px; }

/* Titre de structure destiné aux lecteurs d'écran : il rétablit la hiérarchie
   h1 → h2 → h3 de l'accueil sans changer ce qui est affiché. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Texte clair sur les blocs à fond vert foncé : la règle générique `p, li`
   l'emportait sur la couleur héritée du conteneur, d'où un contraste de 1.07. */
.exo-daily p, .exo-daily li, .exo-daily strong,
#install-bar p, #maj-bar p, #err-bar p { color: #fff; }
.exo-daily .exo-solution { color: #f4f1e8; }

/* Tout ce vers quoi on peut défiler garde ses distances avec l'élément collé en haut
   (barre de titre en grand écran, rail d'onglets sur mobile). Sans cela, un titre
   atteint par le sommaire ou la recherche se range derrière et reste invisible. */
.tab-panel,
.tab-panel h1, .tab-panel h2, .tab-panel h3,
.shot-card, .exo-card, [id] {
  scroll-margin-top: var(--scroll-offset, 78px);
}

/* --- Points d'échelle : les trois modes, côte à côte --- */
.ech-scale { max-width: 420px; }
.ech-grid { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 8px; }
.ech-card {
  background: var(--card-bg); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow); border-left: 4px solid var(--gold);
}
.ech-card h3 { margin: 0 0 10px; }
.ech-sous { font-weight: 400; font-size: 0.85rem; color: #57534a; }
body.theme-dark .ech-sous { color: #a49e93; }
.ech-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.ech-table { flex: 1 1 260px; min-width: 0; }
.ech-table .diagram { max-width: 340px; }
.ech-side { display: flex; gap: 10px; flex: 0 0 auto; }
.ech-qb, .ech-attaque { width: 96px; height: auto; border-radius: var(--radius-sm); }
.ech-attaque { width: 76px; }
.ech-geste { font-size: 0.9rem; color: #4d4940; margin: 10px 0 0; }
body.theme-dark .ech-geste { color: #c7c1b5; }
@media (min-width: 1024px) {
  .ech-side { flex-direction: column; }
}

.calc-opt { font-weight: 400; color: #57534a; font-size: 0.78rem; }
body.theme-dark .calc-opt { color: #a49e93; }

/* --- Exercices du Système 4 --- */
#s4-exos { background: var(--card-bg); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.s4-consigne { font-size: 0.92rem; margin: 0 0 10px; }
#s4-exos .diagram { max-width: 380px; }
.s4-cible { cursor: pointer; transition: fill 0.12s; }
.s4-cible:hover { fill: rgba(255,213,74,0.75); }
.s4-verdict { font-size: 0.93rem; font-weight: 600; margin: 10px 0 0; padding: 8px 11px; border-radius: var(--radius-sm); }
.s4-verdict.bon { background: rgba(46,139,61,0.13); color: #1f6b30; }
.s4-verdict.faux { background: rgba(169,39,39,0.11); color: var(--accent); }
body.theme-dark .s4-verdict.bon { background: rgba(91,209,138,0.15); color: #7fd3a8; }
body.theme-dark .s4-verdict.faux { background: rgba(224,141,132,0.15); color: #e08d84; }
.s4-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.s4-actions .seg-btn { margin-left: 0; }
.s4-score { font-size: 0.8rem; color: #57534a; }
body.theme-dark .s4-score { color: #a49e93; }