/* PSEO1 (GTM-14). Tokens de couleur et polices repris tels quels de
   frontend/web/css/app.css (memes valeurs hexadecimales, meme pile de
   polices) : aucune nouvelle charte, une feuille de style separee parce que
   ces pages sont un contenu defilant statique, pas l'application 100vh a
   panneaux de frontend/web. Namespace .pseo-* distinct de .kr-* pour ne
   jamais laisser croire que les deux partagent un meme arbre de classes. */

:root {
  --paper: #fbfaf7; --ink: #1a1f1c; --secondary: #5c645f; --hairline: #e3e1da;
  --accent: #1f6b53; --accent-soft: #e2efe9;
  --font-serif: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-sans: "IBM Plex Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Geist Mono", monospace;
}

/* PSEO3-E10 : polices auto-hebergees, sous-ensemble latin (couvre les
   accents francais), telechargees depuis fonts.gstatic.com le 2026-09-25 --
   plus aucun appel a fonts.googleapis.com/fonts.gstatic.com au chargement
   de la page (transfert de l'IP du visiteur a Google sans base legale,
   LG Munich I, 20 janvier 2022, releve par le relecteur second passage). */
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/analyses/fonts/newsreader-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/analyses/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/analyses/fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/analyses/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

html, body { margin: 0; background: var(--paper); }
* { box-sizing: border-box; }
.pseo { color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; }
.pseo a { color: var(--accent); }
.pseo *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pseo-header { display: flex; align-items: center; gap: 24px; padding: 14px 20px;
  border-bottom: 1px solid var(--hairline); }
.pseo-brand { font-family: var(--font-serif); font-weight: 600; font-size: 20px;
  color: var(--ink); text-decoration: none; }
.pseo-nav { display: flex; gap: 16px; margin-left: auto; }
.pseo-nav a { text-decoration: none; color: var(--secondary); font-size: 13px; }
.pseo-nav a:hover { color: var(--ink); }

.pseo-main { max-width: 760px; margin: 0 auto; padding: 32px 20px 48px; }
.pseo-breadcrumb { font-size: 12.5px; color: var(--secondary); margin: 0 0 18px; }
.pseo-breadcrumb a { text-decoration: none; }
.pseo-breadcrumb a:hover { text-decoration: underline; }

h1 { font-family: var(--font-serif); font-weight: 600; font-size: 30px; margin: 0 0 12px; }
h2 { font-family: var(--font-serif); font-weight: 600; font-size: 19px; margin: 32px 0 10px; }
.pseo-lede { color: var(--secondary); font-size: 15px; max-width: 62ch; }
.pseo-section { margin-top: 8px; }
.pseo-chiffre { font-family: var(--font-mono); font-size: 15px; }

.pseo-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0; }
.pseo-table th, .pseo-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--hairline); }
.pseo-table td:last-child, .pseo-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pseo-table tfoot td { font-weight: 600; border-top: 1px solid var(--ink); border-bottom: none; }

.pseo-note { color: var(--secondary); font-size: 13px; margin: 8px 0; }

.pseo-liste-liens { list-style: none; margin: 0; padding: 0; }
.pseo-liste-liens li { padding: 4px 0; }
.pseo-liste-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
@media (max-width: 520px) { .pseo-liste-grille { grid-template-columns: 1fr; } }

.pseo-footer { border-top: 1px solid var(--hairline); padding: 14px 20px;
  color: var(--secondary); font-size: 12px; }
.pseo-footer a { color: var(--secondary); }

.pseo-maj { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--hairline);
  color: var(--secondary); font-size: 13px; }