/* Pages documentaires générées au build (/methodology, /sources, et /fr/…).
   Complète privacy.css, dont elles reprennent l'habillage (tokens, topbar, sections) : ce
   fichier n'ajoute que ce qu'un document chiffré demande en plus, des tableaux et une
   navigation. Externe pour la même raison que privacy.css : la CSP `style-src 'self'`. */

.doc main,
.doc .page-header,
.doc footer {
  max-width: 980px;
}

/* `min-width: 0` N'EST PAS DÉCORATIF, et son absence se voyait à 390 px.
   `.doc-nav` est un élément flex de `.page-header` ; un élément flex a `min-width: auto` par
   défaut, donc il refuse de rétrécir sous la largeur de son contenu — et son propre
   `flex-wrap: wrap` ne s'applique jamais, faute de place contrainte. L'en-tête débordait ainsi
   de 59 px en espagnol (407 px de contenu dans 348), sur une police large. Mesuré au lot 41. */
.doc-nav {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0;
}
.doc-nav-link {
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  color: var(--ink-dim);
  font-size: 0.85rem;
  font-weight: 600;
}
.doc-nav-link:hover {
  color: var(--ink);
  text-decoration: none;
}
.doc-nav-link.is-current {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
}
/* Les autres langues du document. Sans règle propre, ces liens s'affichaient côte à côte comme
   du texte, sans aucun espace : « EnglishEspañolPortuguês (Brasil) », vu sur une capture le
   2026-10-04. Flex avec un écart, et les deux mêmes garde-fous que `.doc-nav` : passer à la
   ligne plutôt que déborder à 390 px, ce que `min-width: auto` empêcherait. */
.doc-langs {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-width: 0;
}
.doc-lang {
  font-size: 0.85rem;
  font-weight: 600;
}

/* privacy.css coche chaque puce (liste d'engagements) ; ici ce sont des listes ordinaires. */
.doc main section ul,
.doc main section ol {
  display: block;
  padding-left: 1.3rem;
  margin: 0.6rem 0;
}
.doc main section ul {
  list-style: disc;
}
.doc main section ol {
  list-style: decimal;
}
.doc main section li {
  padding-left: 0.2rem;
  margin: 0.35rem 0;
}
.doc main section li::before {
  content: none;
}

.doc h3 {
  font-size: 1rem;
  margin: 1.6rem 0 0.4rem;
}
.doc code {
  font-size: 0.86em;
  padding: 0.05rem 0.3rem;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.06);
  overflow-wrap: anywhere;
}

/* Tableaux : défilement horizontal dans leur propre boîte, jamais celui de la page. */
.table-scroll {
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  line-height: 1.45;
}
.doc caption {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.8rem;
  color: var(--ink-dim);
  font-size: 0.82rem;
}
.doc th,
.doc td {
  padding: 0.4rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--hairline);
}
.doc thead th {
  color: var(--ink-faint);
  font-weight: 600;
  white-space: nowrap;
}
.doc tbody th {
  font-weight: 600;
  white-space: nowrap;
}
.doc td {
  color: var(--ink-dim);
}
.doc .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .doc-nav {
    order: 3;
    width: 100%;
  }
}

/* Rapport complet par source : replié par défaut, un tableau par source. */
.doc-details {
  margin: 0.6rem 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 0 0.8rem;
}
.doc-details summary {
  cursor: pointer;
  padding: 0.6rem 0;
  font-weight: 600;
  color: var(--ink);
}
.doc-details[open] summary {
  border-bottom: 1px solid var(--hairline);
}

/* Une longue URL dans le texte ne doit jamais élargir la page sur mobile. */
.doc main a {
  overflow-wrap: anywhere;
}

/* ET UNE URL QUI N'EST PAS UN LIEN NON PLUS. La règle ci-dessus ne couvrait que les ancres et
   `code` ; la citation Zenodo est du TEXTE BRUT dans un `blockquote`, et son DOI ne se coupe
   nulle part. Mesuré à 390 px : 335 px de contenu dans une boîte de 220, donc la page entière
   s'élargissait. Invisible sur une machine dont la police est étroite — les huit pages générées
   passaient sur Windows et débordaient de 33 px sur le runner Linux de la CI, où la pile de
   polices retombe sur DejaVu Sans. C'est la garde du lot 41 qui l'a vu à son premier passage.

   `break-word` et non `anywhere` : il ne coupe QUE le mot qui ne tient pas seul sur sa ligne,
   là où `anywhere` autorise une coupure à chaque caractère et hache un paragraphe étroit. */
.doc main p,
.doc main li,
.doc main blockquote,
.doc main dd {
  overflow-wrap: break-word;
}
.table-scroll:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
}

/* LES FICHES D'ACTIVITÉ (lot 58). « En bref » et le corrigé sont des listes de définitions ; la
   fiche élève laisse des lignes pour écrire, et commence sur une nouvelle feuille à l'impression,
   comme dans les fiches « teach with space » de l'ESA qui ont servi de modèle. */
.activity-glance,
.activity-answers {
  margin: 0.6rem 0;
}
.activity-glance > div,
.activity-answers > div {
  padding: 0.45rem 0;
  border-top: 1px solid var(--hairline);
}
.activity-glance > div:first-child,
.activity-answers > div:first-child {
  border-top: none;
}
.activity-glance dt,
.activity-answers dt {
  font-weight: 600;
  color: var(--ink);
}
.activity-glance dd,
.activity-answers dd {
  margin: 0.2rem 0 0;
  color: var(--ink-dim);
}
.doc h4 {
  font-size: 0.9rem;
  margin: 1rem 0 0.2rem;
  color: var(--ink-dim);
}
.activity-note {
  font-size: 0.86rem;
  color: var(--ink-dim);
}
.activity-pupil-title {
  font-weight: 700;
  font-size: 1.05rem;
}
/* L'adresse de la scène est imprimée EN CLAIR : un lien ne se clique pas sur du papier. Elle
   n'a aucun espace, donc elle doit pouvoir se couper n'importe où à 390 px. */
.activity-url {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.86em;
  overflow-wrap: anywhere;
}
.activity-question {
  margin-top: 1rem;
  font-weight: 600;
}
/* Le niveau d'un prolongement (lot 58, pas 3) : un libellé en tête de la question, pas une
   couleur seule, pour qu'il survive à l'impression en noir et blanc. */
.activity-level {
  font-style: italic;
  font-weight: 600;
}
.activity-lines {
  height: 4.5rem;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1.5rem - 1px),
    var(--hairline-strong) calc(1.5rem - 1px),
    var(--hairline-strong) 1.5rem
  );
}

/* L'impression : du noir sur blanc, sans la navigation ni le pied de page du site, et la fiche
   élève sur sa propre feuille. Les lignes d'écriture restent visibles en gris. */
@media print {
  .doc {
    --ink: #000;
    --ink-dim: #222;
    --ink-faint: #444;
    --hairline: #bbb;
    --hairline-strong: #888;
    background: #fff !important;
    color: #000;
  }
  .doc .page-header,
  .doc footer,
  .doc .updated {
    display: none;
  }
  .doc main,
  .doc section {
    max-width: none;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0;
    color: #000;
  }
  /* Tout le texte en noir : les titres gardaient le bleu d'accent du site, 2,52:1 sur papier
     blanc, et c'est la garde axe de la fiche imprimée qui l'a vu à son premier passage. */
  .doc main,
  .doc main * {
    color: #000 !important;
  }
  /* `color-scheme: dark` (privacy.css) peint le CANEVAS en sombre, et c'est lui qui remplit les
     marges de la feuille : imprimé avec ses arrière-plans, chaque page avait un cadre noir (vu sur
     un PDF A4 le 2026-10-19 ; un fond blanc sur `html` seul ne suffisait pas). */
  :root {
    color-scheme: light;
  }
  html {
    background: #fff !important;
  }
  .doc h2,
  .doc h3,
  .doc h4 {
    break-after: avoid;
  }
  .doc h2.activity-pupil {
    break-before: page;
  }
  .activity-screen-only {
    display: none;
  }
  .activity-question,
  .activity-lines {
    break-inside: avoid;
  }
  .activity-lines {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}