/* L'Observatoire, base.css : remise à zéro, typographie, liens, accessibilité, polices, entrée de page, barre de
   progression. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('polices/Outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('polices/Outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--haut) + 72px); }
html, body { margin: 0; }
body { font: 400 14.5px/1.5 var(--sans); color: var(--encre-2); background: var(--fond); -webkit-font-smoothing: antialiased; min-height: 100vh; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure, pre { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.015em; color: var(--encre); line-height: 1.25; }
h1 { font-size: 26px; letter-spacing: -0.02em; } h2 { font-size: 17px; } h3 { font-size: 15px; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--vert-fort); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; } svg { overflow: visible; }
code, .mono { font-family: var(--mono); font-size: .9em; }
b, strong { font-weight: 600; color: var(--encre); }
hr { border: 0; border-top: 1px solid var(--filet); margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.lucide, .ico { width: 16px; height: 16px; flex: none; }
:focus-visible { outline: 2px solid var(--jaune-fort); outline-offset: 2px; }
.mut, .muet { color: var(--encre-3); } .mention { font-size: 12.5px; color: var(--encre-3); }
.n, .date, .num { font-variant-numeric: tabular-nums; }
.evitement { position: absolute; left: 12px; top: -40px; z-index: 300; background: var(--encre); color: #fff; padding: 8px 12px; border-radius: var(--r); }
.evitement:focus { top: 8px; }
.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--filet-fort); border-bottom-width: 2px; background: var(--surface);
       font: 500 11px/1 var(--sans); color: var(--encre-2); white-space: nowrap; }
/* le surtitre : une courte mention en capitales espacées */
.sur { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
/* l'entrée d'une page : le contenu monte doucement, une seule fois */
@keyframes entree-page { from { opacity: 0; transform: translateY(6px); } }
.page { animation: entree-page .22s var(--doux) both; }
/* la barre de progression : un trait jaune en haut de la fenêtre pendant que la page suivante se charge */
.progres { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 400; background: var(--jaune); pointer-events: none; opacity: 0; }
.progres.vu { opacity: 1; animation: progres 6s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes progres { from { width: 0; } to { width: 92%; } }