/* ========================================================================== Reset minimal + fondations typographiques ========================================================================== */ /* -------------------------------------------------------------------------- Fontes — toutes auto-hébergées dans /fonts. Aucune requête vers fonts.googleapis.com ni fonts.gstatic.com : les quatre familles sont servies par le même domaine que les pages. Un tiers de moins à joindre avant le premier texte, et rien à demander à Google — ce qui compte autant pour la vie privée des lecteurs (RGPD) que pour le rendu hors ligne. Les woff2 de DM Sans, DM Mono et Bitter sont les fichiers que Google Fonts servait lui-même (sous-ensembles latin / latin-ext) ; celui de Libertinus Serif, absent de Google Fonts, vient du paquet @fontsource/libertinus-serif. Les quatre licences SIL Open Font 1.1 sont jointes à côté des fichiers. Deux sous-ensembles par famille, avec leurs `unicode-range` d'origine : le navigateur ne télécharge le second que si la page en a besoin. « latin » suffit au français, accents, ligatures et guillemets compris ; « latin-ext » porte les diacritiques d'Europe centrale — Žižek, Šestov, Kołakowski — inévitables dans les pages de la revue. DM Sans est une fonte variable : un seul fichier couvre les graisses 400, 500 et 700 de la maquette. Bitter et DM Mono sont des instances fixes, la maquette n'utilisant d'elles qu'une graisse. Si un woff2 vient à manquer, les piles de repli de `tokens.css` prennent le relais : le rendu reste lisible mais s'écarte de la maquette. Le contrôle `tools/checks/typo.js` lit `FontFace.status` et signale la fonte absente. -------------------------------------------------------------------------- */ /* latin */ @font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Variable-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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; } /* latin-ext */ @font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Variable-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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; } /* latin */ @font-face { font-family: "Bitter"; src: url("../fonts/Bitter-Bold-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; 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; } /* latin-ext */ @font-face { font-family: "Bitter"; src: url("../fonts/Bitter-Bold-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; 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; } /* latin */ @font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-Regular-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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; } /* latin-ext */ @font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-Regular-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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; } @font-face { font-family: "Libertinus Serif"; src: url("../fonts/LibertinusSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- Reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--pm-color-page); color: var(--pm-color-ink); /* « Texte hors édito » : le style de corps de texte du système. Les composants d'interface redéclarent le leur ; ceci n'est que le défaut de la page, et son interligne de 1.3 vaut mieux que le 1.1 d'un libellé. */ font-family: var(--pm-text-courant-family); font-size: var(--pm-text-courant-size); font-weight: var(--pm-text-courant-weight); line-height: var(--pm-text-courant-height); -webkit-font-smoothing: antialiased; } /* Reset scopé, et non global : la refonte cohabite avec des pages encore en ancien design, qu'un reset global déshabillerait. `.pm-2026` couvre les pages déjà migrées ; `.pm-header`, `.pm-footer` et `.pm-menu` couvrent le balisage 2026 rendu sur toutes les pages, y compris les autres. Le panneau de menu a besoin d'être nommé : dans le gabarit il est frère du header, pas descendant, donc `.pm-header` ne l'atteint pas. Sans lui, ses listes retrouvent puces et retrait sur toute page hors périmètre. @see philomag.theme, _philomag_is_2026_page() ========================================================================== */ :where(.pm-header, .pm-footer, .pm-menu, .pm-2026) { /* Les marges par défaut du navigateur ne servent jamais ici : tous les espacements viennent des `gap` de la maquette. `blockquote` était oublié — ses 22px/40px décalaient la citation de 40px par rapport à sa signature. La liste couvre désormais toutes les balises auxquelles le navigateur applique une marge, y compris celles qu'aucune page n'utilise encore : elles arriveront avec le corps de texte servi par Drupal et avec le formulaire de la page newsletter, et l'oubli ne se verrait qu'à ce moment-là. Le contrôle `tools/checks/page.js` sonde cette liste balise par balise. */ h1, h2, h3, h4, h5, h6, p, figure, figcaption, blockquote, dl, dd, pre, fieldset, hr { margin: 0; } /* Le navigateur donne aussi à `fieldset` un padding et une bordure, et à `hr` une bordure en relief. Ni l'un ni l'autre n'existe dans la maquette. */ fieldset { padding: 0; border: 0; } hr { border: 0; border-top: var(--pm-border-width) solid var(--pm-color-ink); } ul, ol { margin: 0; padding: 0; list-style: none; } .clearfix::after { content: none; } a { color: inherit; text-decoration: none; } button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } /* img, svg { display: block; max-width: 100%; } */ } /* ---------- Composants inclus --------------------------------------------- est un élément inconnu du CSS, donc `inline` par défaut : il créerait des boîtes anonymes et des espaces parasites autour des blocs qu'il enveloppe, et fragiliserait le `position: sticky` du bandeau. `display: contents` le fait disparaître de la mise en page : ses enfants se comportent comme des enfants directs du parent. C'est exactement ce que fera un {% include %} Twig, où aucun wrapper n'existe. -------------------------------------------------------------------------- */ html-include { display: contents; } /* ---------- Accessibilité ------------------------------------------------- */ /* Anneau de focus visible au clavier uniquement. La maquette ne définit aucun état de focus ; celui-ci est un ajout délibéré, sans lequel l'intégration serait inutilisable au clavier. */ :focus-visible { outline: 2px solid var(--pm-color-blue); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* Masque un élément à l'écran en le laissant lisible par un lecteur d'écran. */ .pm-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Icônes -------------------------------------------------------- */ /* Toutes les icônes de la maquette font 24×24 et sont des SVG exportés depuis Figma. Elles ne sont pas rendues en mais en masque CSS, coloré par `currentColor` : les états de survol de la maquette recolorent l'icône en même temps que le texte (bleu #1510DE), ce qu'un ne permet pas. Conséquence utile : plus besoin de variante blanche d'une icône. La flèche du bouton sombre est blanche parce que le bouton met `color: #FFFFFF`. Le glyphe vient de --pm-icon-src, déclaré par les classes de icons.css. Si cette classe manque, l'icône s'affiche en carré plein : c'est voulu, une icône manquante doit se voir plutôt que disparaître silencieusement. Ne jamais réécrire un tracé à la main : les données vectorielles viennent de Figma et ne sont pas reproductibles de mémoire. */ .pm-icon { /* inline-block indispensable : width et height ne s'appliquent pas à un élément inline non remplacé. Sans cette ligne, toute icône dont le parent n'est pas un conteneur flex mesure 0×0 et disparaît — ce qui était le cas de l'icône « Mon compte » du header. */ display: inline-block; flex: 0 0 auto; width: var(--pm-icon-size); height: var(--pm-icon-size); background-color: currentColor; -webkit-mask: var(--pm-icon-src, none) center / contain no-repeat; mask: var(--pm-icon-src, none) center / contain no-repeat; }