/* Mon Coach de Maths — DA « La Démonstration » (CQFD), validée le 16/08/2026.
   La page EST une démonstration au propre : hypothèses, étapes numérotées,
   résultat encadré au double trait. Papier à petits carreaux 5 mm — TOUJOURS
   dans un bloc borné, jamais en fond plein. Accent unique : vert tableau.
   Le rouge correcteur ne sert QUE la sémantique « faux ». Aucun fond sombre. */

@font-face {
  font-family: 'STIX Two Text';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/stix-two-text-400-700.woff2') format('woff2');
}
@font-face {
  font-family: 'STIX Two Text';
  font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/stix-two-text-400-700-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-700.woff2') format('woff2');
}

:root {
  --papier:    #f9f8f3;
  --carreaux:  #d4dde8;
  --encre:     #1c1a17;
  --graphite:  #9aa2ab;
  --sourdine:  #6d747d;   /* graphite lisible pour le texte secondaire (contraste AA) */
  --vert:      #1e7a52;
  --vert-fonce:#155c3d;
  --rouge:     #cf3a2c;   /* sémantique « faux » SEULEMENT */
  --serif: 'STIX Two Text', Georgia, serif;
  --sans:  'Atkinson Hyperlegible', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}
a { color: var(--vert); text-decoration: none; }
a:hover { color: var(--vert-fonce); }
h1, h2, h3 { font-family: var(--serif); letter-spacing: -0.3px; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(26px, 4.5vw, 38px); margin: 0 0 10px; }
h2 { font-size: clamp(21px, 3vw, 27px); margin: 34px 0 12px; }
p  { margin: 10px 0; }
.num, .tabulaire { font-variant-numeric: tabular-nums; }

.acces-rapide {
  position: absolute; left: -9999px; top: 0;
  background: var(--vert); color: #fff; padding: 10px 16px; z-index: 100;
}
.acces-rapide:focus { left: 12px; top: 12px; color: #fff; }

/* ── L'en-tête ─────────────────────────────────────────────── */
.entete {
  border-bottom: 1px solid var(--carreaux);
  padding: 0 24px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  max-width: 1140px; margin: 0 auto; min-height: 72px;
}
.marque-bloc { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; }
.marque { display: inline-flex; align-items: center; gap: 11px; color: var(--encre); }
.marque-symbole { display: block; }
.marque-nom { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; }
.marque-nom span { font-weight: 400; }
.baseline { font-size: 12.5px; color: var(--sourdine); white-space: nowrap; }
.nav-haut { display: flex; gap: 22px; margin-left: auto; align-items: center; font-weight: 700; font-size: 15px; }
.nav-haut a { color: var(--encre); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-haut a:hover { color: var(--vert); }
.nav-haut a.actif { color: var(--vert); border-bottom-color: var(--vert); }
.nav-haut .nav-suivi {
  background: var(--vert); color: #fff; padding: 10px 18px; border-radius: 8px; border-bottom: 0;
}
.nav-haut .nav-suivi:hover, .nav-haut .nav-suivi.actif { background: var(--vert-fonce); color: #fff; }

main { max-width: 1140px; margin: 0 auto; padding: 32px 24px 72px; }

/* ── Le fil d'Ariane ───────────────────────────────────────── */
.fil { font-size: 14px; color: var(--sourdine); margin-bottom: 18px; }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.fil li + li::before { content: '·'; margin: 0 6px; color: var(--graphite); }
.fil span[aria-current] { color: var(--encre); font-weight: 700; }

/* ── Le papier à petits carreaux (5 mm ≈ 19 px) — bloc borné SEULEMENT ── */
.carreaux { position: relative; border: 1px solid var(--carreaux); background: var(--papier); }
.carreaux::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.38;
  background-image: linear-gradient(var(--carreaux) 1px, transparent 1px),
                    linear-gradient(90deg, var(--carreaux) 1px, transparent 1px);
  background-size: 19px 19px;
}
.carreaux > * { position: relative; }

/* ── L'encadré de résultat au double trait — toujours en encre, jamais rouge ── */
.resultat {
  display: inline-block;
  border: 2.5px solid var(--encre);
  outline: 1.5px solid var(--encre);
  outline-offset: 4px;
  padding: 10px 22px;
  margin: 4px;
  background: var(--papier);
  font-family: var(--serif); font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cqfd { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--graphite); }

/* ── La démonstration au propre : étapes numérotées ── */
.demo-etapes { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; font-size: 16.5px; }
.demo-etape { display: flex; gap: 14px; align-items: baseline; }
.demo-etape .no { font-family: var(--serif); font-weight: 700; color: var(--vert); flex: none; }
.demo-etape .formule, .formule { font-family: var(--serif); font-variant-numeric: tabular-nums; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--vert); text-transform: uppercase; }
.kicker--graphite { color: var(--graphite); }

/* ── Cartes et bento — bords fins, angles francs (la feuille, pas la vignette) ── */
.bento { display: grid; gap: 14px; }
.carte {
  display: block; border: 1px solid var(--carreaux); background: var(--papier);
  padding: 20px 22px; color: var(--encre);
  transition: border-color 0.15s ease;
}
a.carte:hover { border-color: var(--vert); color: var(--encre); }
.carte-titre { display: block; font-family: var(--serif); font-size: 22px; font-weight: 700; }
.carte-sous { display: block; font-size: 13.5px; color: var(--sourdine); margin-top: 5px; line-height: 1.5; }
.carte-action { display: block; font-size: 13.5px; font-weight: 700; color: var(--vert); margin-top: 10px; }

/* ── Boutons ── */
.btn {
  display: inline-block; background: var(--vert); color: #fff; font-weight: 700;
  font-size: 15px; font-family: var(--sans); padding: 12px 22px; border-radius: 8px;
  border: 0; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--vert-fonce); color: #fff; }
.btn--fantome {
  background: var(--papier); color: var(--encre); border: 1.5px solid var(--carreaux);
}
.btn--fantome:hover { background: var(--papier); color: var(--encre); border-color: var(--vert); }

/* ── Le QCM : choix, juste, faux ── */
.choix-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.choix {
  position: relative; border: 1.5px solid var(--carreaux); background: var(--papier);
  padding: 20px 12px; font-family: var(--serif); font-size: 24px; font-weight: 700;
  color: var(--encre); cursor: pointer; font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease;
  min-height: 68px;
}
.choix:hover { border-color: var(--vert); }
.choix:disabled { cursor: default; }
.choix .marque-coin {
  position: absolute; top: 5px; right: 10px; font-size: 20px; font-weight: 700;
  font-family: var(--sans);
}
.choix.juste { border: 2px solid var(--vert); background: rgba(30, 122, 82, 0.07); }
.choix.juste .marque-coin { color: var(--vert); }
.choix.faux { border: 2px solid var(--rouge); background: rgba(207, 58, 44, 0.06); }
.choix.faux .marque-coin { color: var(--rouge); }
.verdict { font-size: 15px; font-weight: 700; margin-top: 16px; min-height: 22px; color: var(--graphite); }
.verdict.bon { color: var(--vert); }
.verdict.mauvais { color: var(--rouge); }

/* La coche « trait de craie verte » : un tracé SVG qui se dessine. */
.craie { stroke: var(--vert); stroke-width: 3.5; fill: none; stroke-linecap: round;
  stroke-dasharray: 40; stroke-dashoffset: 40; }
.craie.trace { animation: craie-trace 0.45s ease forwards; }
@keyframes craie-trace { to { stroke-dashoffset: 0; } }

/* ── La barre de progression d'une série : traits, pas pourcentage ── */
.serie-barres { display: flex; gap: 4px; align-items: center; }
.serie-barres i { width: 18px; height: 5px; background: var(--carreaux); border-radius: 3px; }
.serie-barres i.fait { background: var(--vert); }
.serie-compteur { font-size: 13px; font-weight: 700; color: var(--sourdine); font-variant-numeric: tabular-nums; }

/* ── Le pied ───────────────────────────────────────────────── */
.pied {
  border-top: 1px solid var(--carreaux); padding: 20px 24px 26px;
  max-width: 1140px; margin: 0 auto; font-size: 13px; color: var(--sourdine);
}
.pied a { color: var(--vert); }
.pied-soeur { margin: 0 0 6px; }
.pied-liens { margin: 0; }

/* ── La barre du bas (mobile) ──────────────────────────────── */
.barre-bas { display: none; }
@media (max-width: 700px) {
  body { padding-bottom: 64px; }
  .entete { gap: 10px; padding: 0 16px; }
  .baseline { display: none; }
  .nav-haut { display: none; }
  main { padding: 22px 16px 56px; }
  .barre-bas {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--papier); border-top: 1px solid var(--carreaux);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .barre-bas-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px 6px; font-size: 11px; font-weight: 700; color: var(--sourdine);
  }
  .barre-bas-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .barre-bas-item.actif { color: var(--vert); }
}

/* ── Révélations en cascade. État de repos TOUJOURS visible (leçon du parc) :
      pas d'opacity:0 posé en base — le « backwards » du fill-mode ne cache
      l'élément que si l'animation tourne réellement. ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal-prete .reveal { animation: reveal-entre 0.5s ease backwards; }
  .reveal-prete .reveal:nth-child(2) { animation-delay: 0.07s; }
  .reveal-prete .reveal:nth-child(3) { animation-delay: 0.14s; }
  .reveal-prete .reveal:nth-child(4) { animation-delay: 0.21s; }
  .reveal-prete .reveal:nth-child(5) { animation-delay: 0.28s; }
  .reveal-prete .reveal:nth-child(6) { animation-delay: 0.35s; }
  @keyframes reveal-entre {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

/* ── Divers ── */
.page-simple { max-width: 640px; margin: 40px auto; }
.tampon {
  display: inline-block; border: 2px solid var(--graphite); color: var(--graphite);
  font-family: var(--serif); font-weight: 700; font-size: 14px; letter-spacing: 1.5px;
  padding: 4px 12px; transform: rotate(-2deg); text-transform: uppercase;
}
.sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Le focus clavier : un trait net à l'encre, visible sur papier, jamais supprimé. */
:focus-visible { outline: 2.5px solid var(--vert-fonce); outline-offset: 2px; }
.choix:focus-visible, .ch-table:focus-visible { outline-offset: 3px; }