/* Polices auto-hébergées, en instances fixes, contours fusionnés et
   **hintées** (ttfautohint) — 2026-09-15. Les variables servies par Google
   sont sans hinting : sur Windows (DirectWrite, 96 dpi) le texte est flou
   et inégal, et Baloo 2 y montrait une ligne claire à chaque recouvrement
   de contours. Mac et iPhone n'en ont jamais souffert. Sous-ensemble latin.
   Fabrication : SITE.md. */
@font-face { font-family: "Baloo 2"; font-weight: 700; font-style: normal; font-display: swap; src: url("fontes/baloo2-700-v3.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-style: normal; font-display: swap; src: url("fontes/baloo2-800-v3.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap; src: url("fontes/nunito-400-v3.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap; src: url("fontes/nunito-600-v3.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("fontes/nunito-700-v3.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap; src: url("fontes/nunito-800-v3.woff2") format("woff2"); }
/* ---------------------------------------------------------------------------
   Les pages de texte du site (confidentialité, mentions légales) : les mêmes
   jetons que la page d'accueil (recopiés de site/index.html, eux-mêmes
   recopiés de src/index.css), la même barre, le même pied — et une colonne
   de lecture, rien d'autre.
   --------------------------------------------------------------------------- */
:root {
  --ground: #fff8f1; --ground-2: #fceeea; --surface: #fffdfb; --surface-2: #f9f0fb;
  --border: #ece0ef; --ink: #2e2a3a; --ink-2: #6b6478; --ink-3: #837b93;
  --nuit: #353070; --ambre: #f0a64b;
  --bouton: #3f3a80; --bouton-bas: #2a2660; --bouton-ink: #fffaf4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #17142a; --ground-2: #1c1832; --surface: #241f3e; --surface-2: #2b2350;
    --border: #392f5c; --ink: #f4f0fc; --ink-2: #c6bee0; --ink-3: #a29ac0;
    --nuit: #0f0d1e; --bouton: #6f66cf; --bouton-bas: #47408f;
  }
}
:root[data-theme="dark"] {
  --ground: #17142a; --ground-2: #1c1832; --surface: #241f3e; --surface-2: #2b2350;
  --border: #392f5c; --ink: #f4f0fc; --ink-2: #c6bee0; --ink-3: #a29ac0;
  --nuit: #0f0d1e; --bouton: #6f66cf; --bouton-bas: #47408f;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Baloo 2", "Nunito", sans-serif; font-weight: 700; font-synthesis: none; line-height: 1.14; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 3px; border-radius: 6px; }

.enveloppe { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.barre { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.barre__contenu { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 24px; max-width: 1080px; margin: 0 auto; }
.mot { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 23px; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.mot .marque { width: 1.2em; height: 1.2em; flex: 0 0 auto; overflow: visible; }
.retour { font-size: 15px; color: var(--ink-2); text-decoration: none; }
.retour:hover { color: var(--ink); }

/* La colonne de lecture : 34em, comme `.mesure` sur l'accueil. */
.texte { max-width: 34em; margin: 0 auto; padding: 56px 24px 72px; }
.texte .eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; margin-bottom: 12px; }
.texte h1 { font-size: clamp(30px, 4.6vw, 40px); margin-bottom: 8px; }
.texte .date { color: var(--ink-3); font-size: 14.5px; margin-bottom: 36px; }
.texte h2 { font-size: 22px; margin: 40px 0 12px; }
.texte h3 { font-size: 17.5px; margin: 24px 0 6px; }
.texte p { margin: 0 0 14px; }
.texte ul { margin: 0 0 14px; padding-left: 1.2em; }
.texte li { margin: 0 0 8px; }
.texte li::marker { color: var(--ink-3); }
.texte strong { font-weight: 800; }
.texte .encadre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin: 18px 0 22px; font-size: 15.5px; color: var(--ink-2); }
.texte .encadre strong { color: var(--ink); }
.texte table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 18px; }
.texte th, .texte td { text-align: left; vertical-align: top; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); }
.texte th { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }
.texte .defiler { overflow-x: auto; }
.texte code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }

.pied { background: var(--ground); padding: 40px 0 52px; border-top: 1px solid var(--border); }
.pied__contenu { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; justify-content: space-between; }
.pied nav { display: flex; gap: 26px; flex-wrap: wrap; }
.pied a { color: var(--ink-2); font-size: 15px; }
.pied small { color: var(--ink-3); font-size: 13.5px; }