/* Apparence de la version écran. Aucun de ces choix n'existe dans le contenu :
   changer le cours ne demande pas de toucher ce fichier, et inversement. */

/* Le code couleur du cahier (vert = ce qu'on définit, rouge = ce qu'on
   retient, bleu = ce qui aide à comprendre, noir = ce qui encadre) vit dans
   la charte graphique unique du projet, themes/charte-graphique.json :
   outils/construire.mjs en tire charte.css, importé ci-dessous. */
@import "charte.css";

:root {
  --fond: #ffffff;
  --fond-doux: #f8fafc;
  --texte: #0f172a;
  --texte-doux: #475569;
  --bord: #e2e8f0;
  --accent: #1d4ed8;

  --largeur-texte: 46rem;
}

/* Pas de mode sombre : l'écran reprend les couleurs du papier, fond blanc
   compris, pour que le cours ait le même visage dans les deux versions. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.65 "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

.page { max-width: var(--largeur-texte); margin: 0 auto; padding: 2rem 1.25rem 6rem; }

/* --- Navigation --------------------------------------------------------- */
.site-nav {
  border-bottom: 1px solid var(--bord);
  background: var(--fond-doux);
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
}
.site-nav > div {
  max-width: var(--largeur-texte); margin: 0 auto; padding: 0.7rem 1.25rem;
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; justify-content: center;
}
.site-nav a { color: var(--texte-doux); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
/* La marque occupe sa propre ligne, centrée ; les liens du chapitre viennent dessous. */
.site-nav .marque {
  flex-basis: 100%; text-align: center;
  font-weight: 600; font-size: 1.3rem; color: var(--texte);
}

/* --- En-tête du document ------------------------------------------------ */
.doc-entete { margin: 2rem 0 2.5rem; border-bottom: 2px solid var(--texte); padding-bottom: 1rem; }
.doc-niveau {
  margin: 0; font-family: system-ui, sans-serif; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-doux);
}
.doc-entete h1 { margin: 0.3rem 0 0; font-size: 2.1rem; line-height: 1.15; }

/* Même hiérarchie que themes/pdf.typ : titres de partie en rouge, sous-titres
   dans le noir de la charte. */
.doc-corps h2 { font-size: 1.5rem; margin: 2.6rem 0 1rem; color: var(--rouge); }
.doc-corps h3 { font-size: 1.05rem; color: var(--noir); }

/* --- Blocs de cours ----------------------------------------------------- */
.bloc {
  --couleur: var(--noir);
  margin: 1.6rem 0; padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--couleur);
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--couleur) 6%, var(--fond));
  color: var(--couleur);
}
.famille-vert { --couleur: var(--vert); }
.famille-rouge { --couleur: var(--rouge); }
.famille-bleu { --couleur: var(--bleu); }
.famille-noir { --couleur: var(--noir); }

/* Un « Texte » n'a pas d'intitulé : il ne mérite pas d'encadrement non plus. */
.bloc-texte {
  border-left: none; background: none; padding-left: 0; padding-right: 0;
}

.doc-corps .bloc-titre {
  margin: 0 0 0.5rem;
  font-size: 1em; font-weight: 700; text-decoration: underline;
  color: var(--couleur);
}
.bloc > :last-child { margin-bottom: 0; }
details.bloc > summary { cursor: pointer; margin-bottom: 0; }
details.bloc[open] > summary { margin-bottom: 0.6rem; }

.important { color: var(--rouge); }
.verifie { color: var(--vert); }
.contrexemple { color: var(--rouge); }

/* --- Schémas ------------------------------------------------------------ */
.schema { margin: 2rem 0; padding: 0; }
/* La largeur suit la forme de la figure : une droite graduée prend toute la
   colonne, un schéma carré n'a aucune raison de le faire. */
.schema-dessin { max-width: calc(var(--ratio, 1) * 13rem); }
.schema-dessin {
  margin: 0 auto;
  background: #fff; border: 1px solid var(--bord); border-radius: 6px;
  padding: 0.5rem;
}
.schema svg, .schema img { display: block; width: 100%; height: auto; }
.schema figcaption {
  margin-top: 0.6rem; font-size: 0.92rem; color: var(--texte-doux);
}
.schema-controles {
  display: grid; gap: 0.5rem; margin-top: 0.8rem;
  font-family: system-ui, sans-serif; font-size: 0.85rem;
}
.schema-controle { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.8rem; align-items: center; }
.schema-controle label { color: var(--texte-doux); }
.schema-controle output { font-variant-numeric: tabular-nums; font-weight: 600; }
.schema-controle input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }

/* --- Exercices ---------------------------------------------------------- */
.exercice { margin: 1.8rem 0; padding-top: 1rem; border-top: 1px solid var(--bord); }
.doc-corps .exercice-titre { margin: 0 0 0.5rem; font-size: 1em; color: var(--texte); }
.exercice-saisie { display: flex; gap: 0.5rem; align-items: center; margin: 0.8rem 0; flex-wrap: wrap; }
.exercice-saisie input {
  font: inherit; padding: 0.35rem 0.6rem; width: 9rem;
  border: 1px solid var(--bord); border-radius: 4px;
  background: var(--fond); color: var(--texte);
}
.exercice-saisie button {
  font: 0.9rem system-ui, sans-serif; padding: 0.4rem 0.9rem; cursor: pointer;
  border: 1px solid var(--accent); border-radius: 4px;
  background: var(--accent); color: #fff;
}
.verdict { font-family: system-ui, sans-serif; font-size: 0.9rem; }
.verdict[data-etat="juste"] { color: var(--vert); }
.verdict[data-etat="faux"] { color: var(--rouge); }
.exercice-correction summary {
  cursor: pointer; font-family: system-ui, sans-serif; font-size: 0.9rem;
  color: var(--texte-doux);
}

/* --- Sommaire ----------------------------------------------------------- */
.sommaire { list-style: none; padding: 0; }
.sommaire li { margin: 0.9rem 0; }
.sommaire a { color: var(--texte); font-size: 1.15rem; }
.sommaire .liens { font-family: system-ui, sans-serif; font-size: 0.85rem; }
.sommaire .liens a { color: var(--texte-doux); margin-right: 0.8rem; }

/* Page d'un niveau : tous les chapitres à la suite. */
.table-niveau { columns: 2; column-gap: 2rem; padding-left: 1.4rem; margin: 0 0 3rem; }
.table-niveau li { break-inside: avoid; margin: 0.3rem 0; }
.table-niveau a { color: var(--texte); }
.chapitre { margin-top: 4rem; }
.chapitre + .chapitre { border-top: 2px solid var(--texte); padding-top: 1rem; }
.chapitre-liens { font-family: system-ui, sans-serif; font-size: 0.85rem; margin-top: 2rem; }
.chapitre-liens a { color: var(--texte-doux); margin-right: 0.8rem; }
@media (max-width: 40rem) { .table-niveau { columns: 1; } }

math { font-size: 1.05em; }

/* --- Tableaux ----------------------------------------------------------- */
.doc-corps table {
  border-collapse: collapse; margin: 1.4rem 0; font-size: 0.95rem;
}
.doc-corps :is(th, td) {
  border: 1px solid var(--bord); padding: 0.3rem 0.6rem; text-align: center;
}
.doc-corps th { background: var(--fond-doux); font-weight: 600; }
.doc-corps figure { margin: 1.6rem 0; }

/* Lien vers le recueil complet d'un niveau, posé à côté de son titre. */
.lien-recueil {
  font-size: 0.55em;
  font-weight: 400;
  vertical-align: middle;
  margin-left: 0.6em;
}