/* Confort de lecture (08/11/2026) : police, taille et espacement choisis dans Paramètres (App\Domaine\Lecture).
   Attributs posés sur <html> par le gabarit du site et, dans les activités de documents/, par mathacoeur.js.
   La feuille ne se charge que si un réglage est actif. Les formules (KaTeX) et le code gardent leur police.
   Licences des polices : assets/fonts/LISEZMOI.md. */
@font-face {
  font-family: "MathACoeur Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-sans-regular-latin.woff2") format("woff2");
}
@font-face {
  font-family: "MathACoeur Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-sans-bold-latin.woff2") format("woff2");
}
@font-face {
  font-family: "MathACoeur Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-sans-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "MathACoeur Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-sans-bold-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "MathACoeur Lisible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-lisible-regular-latin.woff2") format("woff2");
}
@font-face {
  font-family: "MathACoeur Lisible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-lisible-bold-latin.woff2") format("woff2");
}
@font-face {
  font-family: "MathACoeur Lisible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-lisible-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "MathACoeur Lisible";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/mathacoeur-lisible-bold-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/opendyslexic-regular-latin.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/opendyslexic-bold-latin.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/opendyslexic-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/opendyslexic-bold-italic-latin.woff2") format("woff2");
}

/* ---------- Police ---------- */
html[data-lecture-police="sans"] body,
html[data-lecture-police="sans"] body *:not(.katex, .katex *, code, pre, kbd, samp, .code, .serie, .tex-brut) {
  font-family: "MathACoeur Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif !important;
}
html[data-lecture-police="lisible"] body,
html[data-lecture-police="lisible"] body *:not(.katex, .katex *, code, pre, kbd, samp, .code, .serie, .tex-brut) {
  font-family: "MathACoeur Lisible", "MathACoeur Sans", system-ui, sans-serif !important;
}
html[data-lecture-police="dyslexie"] body,
html[data-lecture-police="dyslexie"] body *:not(.katex, .katex *, code, pre, kbd, samp, .code, .serie, .tex-brut) {
  font-family: "OpenDyslexic", "MathACoeur Sans", system-ui, sans-serif !important;
}

/* ---------- Taille : tout grandit ensemble, figures et formules comprises ---------- */
html[data-lecture-taille="grande"] { zoom: 1.15; }
html[data-lecture-taille="tres-grande"] { zoom: 1.3; }
/* Agrandi sur un téléphone, rien ne doit déborder de l'écran (audit du 09/11/2026) : les blocs à icône passent à la ligne,
   leur texte peut rétrécir, un fieldset ne garde pas sa largeur minimale, un bouton reste dans la page. */
html[data-lecture-taille] .bloc { flex-wrap: wrap; }
html[data-lecture-taille] .bloc > * { min-width: 0; }
html[data-lecture-taille] fieldset { min-inline-size: 0; }
html[data-lecture-taille] .bouton, html[data-lecture-taille] .btn { max-width: 100%; white-space: normal; }

/* Plus de place prise : les barres d'activités et de boutons passent à la ligne au lieu de sortir de l'écran,
   et le grand titre de la page de classe ne coupe pas un mot en deux. */
html[data-lecture-taille] :is(div, nav, header, footer):has(> button, > a.btn, > .chip),
html[data-lecture-espacement] :is(div, nav, header, footer):has(> button, > a.btn, > .chip) {
  flex-wrap: wrap;
}
html[data-lecture-taille] .top .who,
html[data-lecture-espacement] .top .who {
  white-space: normal;
}
html[data-lecture-taille] .accueil-classe h1,
html[data-lecture-espacement] .accueil-classe h1 {
  font-size: clamp(1.3rem, .6rem + 1.2vw, 3rem) !important;
}

/* Sur petit écran : la barre d'activité ne reste plus collée en haut, elle y prendrait trop de place, et la mascotte
   (décorative) laisse sa place au titre. */
@media (max-width: 700px) {
  html[data-lecture-taille] .top,
  html[data-lecture-espacement] .top {
    position: static;
  }
  html[data-lecture-taille] .accueil-classe .mascotte,
  html[data-lecture-espacement] .accueil-classe .mascotte {
    display: none;
  }
}

/* ---------- Espacement ---------- */
html[data-lecture-espacement="aere"] body,
html[data-lecture-espacement="aere"] body *:not(.katex, .katex *, svg, svg *, code, pre, h1, h2, h3, h4) {
  line-height: 1.8 !important;
}
html[data-lecture-espacement="aere"] body *:not(.katex, .katex *, svg, svg *, code, pre, .code, .serie) {
  letter-spacing: .03em !important;
  word-spacing: .1em !important;
}
html[data-lecture-espacement="tres-aere"] body,
html[data-lecture-espacement="tres-aere"] body *:not(.katex, .katex *, svg, svg *, code, pre, h1, h2, h3, h4) {
  line-height: 2.1 !important;
}
html[data-lecture-espacement="tres-aere"] body *:not(.katex, .katex *, svg, svg *, code, pre, .code, .serie) {
  letter-spacing: .08em !important;
  word-spacing: .2em !important;
}

/* Le grand titre de la page de classe, dans sa colonne étroite : pas d'espace ajouté entre ses lettres. */
html[data-lecture-espacement] body .accueil-classe h1 {
  letter-spacing: 0 !important;
  hyphens: auto;
}