/* ════════════════════════════════════════════════════════════════════════ * MyESEF — Base * Reset léger + styles de base sur les éléments natifs. * Charge tokens.css AVANT ce fichier. * ════════════════════════════════════════════════════════════════════════ */ /* ── Polices auto-hébergées ───────────────────────────────────────────── */ /* PP Neue Montreal variable — remplace Inter partout. Le fichier variable couvre les poids 100-900 mais ne contient PAS d'axe italique dédié. On déclare donc UNE seule face (normal) et on laisse le browser SYNTHÉTISER l'italique en inclinant les glyphs quand `font-style: italic` est demandé — c'est ce que fait `font-synthesis: style` (activé par défaut). */ @font-face { font-family: 'PPNeueMontreal'; src: url('../assets/fonts/PPNeueMontrealVariable.woff2') format('woff2-variations'), url('../assets/fonts/PPNeueMontrealVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-base); color: var(--c-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* PP Neue Montreal n'a pas d'axe italique dédié — on demande explicitement au browser de synthétiser l'italique par inclinaison des glyphs (défaut CSS, mais on l'ancre pour ne pas dépendre des préférences UA). */ font-synthesis: style weight; } /* Background sur (pas ) pour que la signature en bas-gauche puisse se loger derrière le contenu via z-index négatif. Si le fond était sur , un z-index:-1 cacherait la signature derrière ce fond. */ html { background: var(--c-bg); scroll-behavior: smooth; } /* En mobile : réduit la base à 14px → toutes les tailles en rem suivent automatiquement (xs/sm/md/lg/xl/2xl/3xl + tous les composants). */ @media (max-width: 900px) { html { font-size: 14px; } } body { min-height: 100vh; display: flex; flex-direction: column; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5 { margin: 0 0 var(--sp-3); font-weight: 600; line-height: var(--lh-tight); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } p { margin: 0 0 var(--sp-3); } code, pre { font-family: var(--font-mono); font-size: 0.92em; } button { font-family: inherit; user-select: none; -webkit-user-select: none; } :focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; }