/* =============================================================================
   Socle commun DIMOBI — base
   =============================================================================
   Remise à zéro, typographie des éléments et utilitaires. Contrairement aux
   jetons, ce fichier STYLE des éléments (body, titres, liens) : ne le charger
   que dans une page conçue pour le socle. Ordre de chargement : jetons.css,
   base.css, composants.css, puis la feuille propre à l'application.
   ============================================================================= */

/* Clair ou sombre suit le réglage du système (champs natifs compris). */
:root { color-scheme: light dark; }

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    font: 400 16px/1.55 var(--police);
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-survol); }
h1, h2, h3 {
    margin: 0;
    font-family: var(--police-titre);
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
    color: var(--texte);
}
h1 { font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.45rem); font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 650; }
h3 { font-size: 1.02rem; font-weight: 620; }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 650; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--logo-bleu) 22%, transparent); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone {
    width: 20px; height: 20px; flex: none;
    stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icone--s { width: 16px; height: 16px; }
.icone--l { width: 24px; height: 24px; }
.icone--xl { width: 32px; height: 32px; stroke-width: 1.5; }

.saut {
    position: absolute; left: -9999px; top: 12px; z-index: 100;
    padding: .6rem 1rem; border-radius: var(--rayon-s);
    background: var(--accent); color: var(--accent-texte); font-weight: 600;
}
.saut:focus { left: 12px; }
/* `overflow: hidden` ne rogne PAS les lignes d'un <table> : sans `clip-path`, le
   tableau accessible d'une courbe ajoutait 100 px de vide en bas de page (et la
   barre latérale, collée dans une coquille plus courte, décrochait). */
.visuellement-cache {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mono { font-family: var(--police-mono); font-variant-numeric: tabular-nums; }
.surtitre {
    font: 600 .72rem/1.2 var(--police-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texte-3);
}
.discret { color: var(--texte-3); font-size: .9rem; }
.chapo { color: var(--texte-2); font-size: 1.02rem; max-width: 62ch; }