/* ========================================================================= VARIABLES — tout le style du document passe par ici. Changer une typo ou une proportion = modifier UNE ligne. ⚗ 08/09 — LE SOCLE ENTRE DANS LE CODE (vault : « 04 Socle — grammaire commune »). Le fichier a désormais DEUX étages : 1. les TOKENS du socle — polices, deux échelles, couleurs — la source ; 2. les VARIABLES SÉMANTIQUES du fil de fer, telles qu'elles étaient. Seules les FAMILLES de polices sont raccordées aujourd'hui. Les tailles, les gris et les espacements sémantiques gardent leurs valeurs de fil de fer : les raccorder aux échelles, c'est l'étape 5 (« le réglage des valeurs, sur pages réelles »), pas celle-ci. Ce geste-ci ne change rien à l'écran, sauf la typographie — et c'est voulu : on juge les gabarits dans la vraie police, pas dans celle du système. ========================================================================= */ /* --- Les polices, servies par le thème ------------------------------------ Deux libres (licence OFL), depuis fonts/ du thème, sous-ensemble latin en woff2 : League Gothic et PT Serif. Aucun appel à un service tiers. Simplon Norm est une police commerciale (Swiss Typefaces), sous licence du média. ✅ Ses trois graisses sont dans fonts/ depuis le 08/09 (jeu WebS, woff2, ~17 Ko chacune), copiées depuis le dossier désigné par Ludovic. Elles ne sont pas libres : elles ne se redistribuent pas hors de ce site. */ @font-face { font-family: "League Gothic"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/LeagueGothic-Regular.woff2) format("woff2"); } @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/PTSerif-Regular.woff2) format("woff2"); } @font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/PTSerif-Italic.woff2) format("woff2"); } @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/PTSerif-Bold.woff2) format("woff2"); } @font-face { font-family: "PT Serif"; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/PTSerif-BoldItalic.woff2) format("woff2"); } @font-face { font-family: "Simplon Norm"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Simplon-Regular.woff2) format("woff2"); } @font-face { font-family: "Simplon Norm"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Simplon-Medium.woff2) format("woff2"); } @font-face { font-family: "Simplon Norm"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Simplon-Bold.woff2) format("woff2"); } :root { /* ===================================================================== 1. LES TOKENS DU SOCLE — la source. Propriétaire : « 04 Socle ». ===================================================================== */ /* --- Familles --------------------------------------------------------- Quatre rôles, trois polices. Le logo est un SVG : pas de police. */ --pile-systeme: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --police-affiche: "League Gothic", "Oswald", "Arial Narrow", var(--pile-systeme); /* titres PRINCIPAUX, en majuscules, graisse unique (400) */ --police-titre: "PT Serif", Georgia, "Times New Roman", serif; /* titres SECONDAIRES, en 700 */ --police-texte: "PT Serif", Georgia, "Times New Roman", serif; /* corps de lecture, en 400 */ --police-meta: "Simplon Norm", var(--pile-systeme); /* méta, puces, navigation, boutons */ /* --- Échelle typographique — reprise telle quelle du site en ligne. Elle est grosse, et c'est voulu : le public est âgé. --------------- */ --text-xs: 12px; /* méta compacte, menu secondaire */ --text-sm: 14px; /* puces, durées */ --text-base: 16px; /* paragraphe compact, méta */ --text-md: 18px; /* titre tertiaire, corps sur mobile */ --text-lg: 20px; /* CORPS DE LECTURE */ --text-xl: 24px; /* sous-titre, chapô */ --text-2xl: 32px; /* titre secondaire */ --text-3xl: 44px; /* titre d'accroche */ --text-4xl: 64px; /* titre principal */ /* --- Échelle d'espacement — la grille de 8, nettoyée. ----------------- ⚠ SÉPARÉE de l'échelle typographique, et c'est tout l'objet du geste : sur le site en ligne, heading-1 avait pour taille var(--space-64). Ici, une taille de texte ne règle jamais une marge, ni l'inverse. */ --space-8: 8px; --space-12: 12px; /* hors grille, gardée : trop d'usages */ --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-80: 80px; /* --- Couleurs de la charte ------------------------------------------- */ --c-noir: #141515; /* titres, fonds sombres */ --c-bleu: #16253D; /* fond sombre — LE CODE DE LA VIDÉO */ --c-rouge: #FF003F; /* boutons d'action UNIQUEMENT */ --c-texte: #363636; /* corps de lecture — pas le noir : écart mesuré et conservé */ --c-blanc: #FFFFFF; --c-gris-1: #dcdcdc; /* ⚠ À FIXER (socle) — en attendant, le gris de filet du fil de fer */ --c-gris-2: #767676; /* ⚠ À FIXER (socle) — en attendant, le gris secondaire du fil de fer */ /* ===================================================================== 2. LES VARIABLES SÉMANTIQUES DU FIL DE FER — inchangées. ⚠ Aucune n'est encore raccordée aux tokens ci-dessus : --accent vaut toujours #E8334A et non var(--c-rouge), --taille-texte-lecture 17px et non var(--text-lg). C'est l'étape 5 qui les raccorde, une par une, sur des pages vraies. Les raccorder ici d'un bloc changerait toutes les pages d'un coup sans que personne ne les ait regardées. ===================================================================== */ /* --- Typographie ------------------------------------------------------ */ --taille-titre-vedette: 34px; /* titre de la une de l'accueil — le plus fort du bloc (A) */ --taille-titre-une: 21px; /* titre des deux contenus d'à côté (A) */ --taille-titre-carte: 17px; /* titre des cartes de grille, brèves, colonnes secondaires */ --taille-texte: 15px; /* chapôs, descriptions, corps courant */ --taille-meta: 12px; /* signatures, dates, durées, puces */ --taille-titre-bandeau: 77px; /* grand titre du bandeau (bloc 1) — 4.8rem, la taille du site en ligne (14/09) */ --taille-surtitre-bandeau: 15px; /* sur-titre du bandeau, en capitales espacées */ --taille-bouton-bandeau: 22px; /* bouton du bandeau, en League Gothic */ --largeur-titre-bandeau: 780px; /* le titre du bandeau passe à la ligne avant d'atteindre l'image */ /* Le début du titre du bandeau, en rouge sur sa ligne, comme en ligne. ⚠ SEULE EXCEPTION à « l'accent sur les boutons, nulle part ailleurs », demandée par Ludovic le 14/09. */ --rouge-titre-bandeau: var(--accent); --taille-titre-section: 20px; /* titres de section (« Nos enquêtes », « Les chroniques ») */ --taille-titre-enquete: 40px; /* titre de la tête d'affiche des enquêtes — le plus fort de la page (A) */ --taille-titre-abonnement: 32px; /* titre de l'encart d'abonnement, sur papier (A) */ --taille-titre-newsletter: 34px; /* titre de l'encart newsletter, dans son cadre (A) */ /* --- L'ACCUEIL (A, 15/09 ; écrit le 16/09) --------------------------------- */ --taille-chapo-vedette: 18px; /* le chapô de la une, en PT Serif, dans le gris du texte long */ --taille-chapo-enquete: 19px; /* le chapô de la tête des enquêtes */ --taille-titre-entretien-accueil: 22px; --taille-titre-masterclass: 132px; /* le titre de l'affiche, en League Gothic */ --hauteur-masterclass: 800px; /* l'affiche : la photo des intervenantes sur toute la largeur */ --largeur-texte-masterclass: 600px; --gouttiere-enquetes-suite: 32px; /* entre les trois enquêtes suivantes : 16 et 16 */ /* --- Gris (aucune couleur hors accent) -------------------------------- */ --gris-fond: #ffffff; /* fond général de la page */ --gris-fond-clair: #f4f4f4; /* fonds de bandeau très clair (édition) */ --gris-boite: #d9d9d9; /* boîtes grises qui remplacent les images */ --gris-filet: #dcdcdc; /* filets, bordures, séparateurs */ --gris-texte: #1a1a1a; /* texte principal */ --gris-texte-secondaire: #767676; /* meta, chapôs, mot « image » */ --gris-fonce: #2b2b2b; /* fonds sombres : bandeau de la une, entretiens vidéo, réel en bref */ --gris-noir: #111111; /* rangée 1 de l'en-tête */ --gris-noir-2: #1e1e1e; /* rangée 2 de l'en-tête, légèrement plus claire */ --gris-clair-sur-sombre: #e6e6e6; /* texte clair posé sur fond sombre */ --gris-meta-sur-sombre: #9e9e9e; /* gris intermédiaire : meta, durées et ancienneté sur fond sombre */ /* --- Accent : UNIQUEMENT sur les boutons d'action --------------------- */ /* ⚗ 16/09 — LE ROUGE EST CELUI DE LA CHARTE, #FF003F, sur les boutons d'action ET la marque — le logo, le début du titre du bandeau, la masterclass (Cheminement #57). Le #E8334A du fil de fer est parti. */ --accent: var(--c-rouge); /* rouge d'action : les boutons pleins */ --accent-fonce: #e00037; /* le même rouge, assombri : survol des boutons pleins (planche A) */ --duree-survol: .15s; /* durée des transitions de survol */ /* --- Structure et proportions ----------------------------------------- */ /* TRAME COMMUNE DE LA PAGE — une seule et même grille pour les trois grands blocs de contenu : le haut de page (brèves / contenu central / contenus superposés), « Nos enquêtes » et « Édition ». Changer ces proportions ici les recale tous les trois d'un coup : c'est ce qui donne à la page son aplomb vertical, colonne 3 alignée d'un bloc à l'autre. */ --grille-page: 1fr 1.7fr 1.1fr; /* trame commune : colonne étroite / colonne large / colonne latérale */ /* ⚠ v8 — SUPPRESSION de --grille-deux-tiers et --grille-moities. Elles créaient des trames CONCURRENTES de --grille-page. À 1232px de conteneur utile, la colonne de droite mesurait 340px dans le bloc 2 et 397px dans les enquêtes : 57px d'écart, visibles à l'œil nu. Il n'existe désormais qu'UNE trame. Les blocs larges ne redéfinissent plus de proportions, ils FUSIONNENT des colonnes (grid-column: 1 / 3). Conséquence : les colonnes de droite des blocs 2, 3, 5 et de la newsletter tombent sur la même verticale, par construction et non par réglage. */ /* Gouttière de la trame — partagée elle aussi : deux colonnes ne peuvent s'aligner que si l'écart qui les sépare est le même partout. */ --gouttiere-trame: var(--gouttiere-colonnes); /* 64 : 32 de part et d'autre d'un filet vertical tracé dans la gouttière (A, 16/09) */ --largeur-conteneur: 1280px; /* largeur maximale du contenu */ --padding-bandeau: 64px; /* le bandeau a la hauteur de son contenu, plus ce padding — surtout PAS 100vh */ --fondu-bandeau: linear-gradient(90deg, var(--gris-noir) 35%, rgb(17 17 17 / 0) 100%); /* le fondu du site en ligne : le titre sur le noir, l'image à droite */ --espace-bloc: 56px; /* espacement vertical entre deux blocs SUR FOND BLANC */ /* Respiration INTERNE des deux bandes à fond perdu qui restent : les entretiens et le réel en bref. Une bande pleine largeur a besoin de plus d'air qu'un bloc blanc — sans quoi le contenu semble collé aux bords. */ --padding-bande: 48px; /* Respiration interne des encarts encadrés : abonnement et newsletter. */ --padding-encart: 30px; --espace-interne: 20px; /* gouttière interne des grilles */ /* En-tête : rangée 1 escamotable, rangée 2 toujours visible. --hauteur-entete est la SOMME des deux : c'est elle qui règle le padding-top du body, donc elle se recalcule toute seule. */ --hauteur-rangee-1: 56px; /* logo + Se connecter + S'abonner (planche 3b, 30/09) */ --hauteur-rangee-2: 47px; /* navigation + dossiers chauds (filet compris ; 3b et 2b, 30/09) */ --hauteur-entete: calc(var(--hauteur-rangee-1) + var(--hauteur-rangee-2)); --taille-barre: 15px; /* les deux rangées : Simplon 500 (planche 3b, 30/09) */ /* Troncature des chapôs du bloc 2 : le texte complet est dans le HTML, seul le nombre de lignes affichées change ici. */ --lignes-chapo-central: 4; /* nb de lignes de chapô affichées sur le contenu central */ --lignes-chapo-lateral: 2; /* nb de lignes de chapô affichées sur les deux contenus de droite */ --lignes-chapo-enquete: 3; /* nb de lignes du chapô de la tête d'affiche des enquêtes (v8) */ --rayon: 2px; /* arrondi minimal — c'est un fil de fer */ /* 🔴 CARRÉE (Ludovic, 17/09) : la pastille d'ancienneté du fil des brèves et les mots de « Souvent cherché » de la recherche étaient les deux seuls objets arrondis aux bouts du site, à côté de puces carrées et sous des boutons dont la règle est « pas d'arrondi » (socle). Une valeur, deux endroits — le nom reste, la forme change. */ --rayon-pastille: 0; --taille-portrait: 72px; /* diamètre du portrait rond de l'en-tête des chroniques */ /* --gouttiere-tiers supprimée en v8 : la gouttière est celle de la trame. */ /* Étagère des reels : une carte = --largeur-reel, la gouttière vaut --espace-interne. Le nombre de cartes visibles se règle donc ICI, sur cette seule ligne. À 200px, avec 1232px de contenu utile (1280 moins les 24px de marge de chaque côté), le pas est de 220px : cinq cartes entières et la moitié de la suivante restent visibles à 1280px — la carte coupée au bord droit est ce qui signale qu'il y en a d'autres. */ --largeur-reel: 168px; /* largeur d'une carte de réel (portrait 9/16) — la planche A ; 150 en tablette, 140 au téléphone */ /* --- MENU BURGER ------------------------------------------------------ Il porte TOUTE la navigation sous 900px, et la profondeur au-dessus. Sa largeur ne s'applique qu'en grand écran : sous --bascule-burger il occupe l'écran entier, parce qu'un panneau étroit sur un téléphone force à viser, et que le public visé est âgé. */ --largeur-burger: 430px; /* largeur du panneau en grand écran */ --bascule-burger: 620px; /* en dessous : le panneau prend tout l'écran */ --padding-burger: 24px; /* respiration latérale du panneau */ --espace-burger-bloc: 22px; /* respiration verticale de part et d'autre des filets */ --taille-entree-burger: 21px; /* corps des entrées principales (Éditions, Enquêtes…) */ --taille-rubrique-burger: 15px;/* corps des rubriques et des liens secondaires */ --largeur-marque-active: 3px; /* filet rouge qui signale la page courante */ /* --- GABARIT DE DÉTAIL (detail.html) ---------------------------------- La page de lecture a DEUX largeurs, pas une : le titre, le chapô et le média respirent sur la colonne large ; le texte courant se lit sur la colonne étroite (~75 signes par ligne à 17px). Les deux sont centrées. */ --largeur-entete-detail: 800px; /* titre, chapô, média de tête */ /* ⚗ 08/09, second passage — 672, PAS 680. Le socle avait écrit 672 le 07/09 ; la session du 08/09 l'a « corrigé » en 680 en affirmant que c'était mesuré sur la production. C'est faux : un paragraphe du site en ligne fait 672 px (relevé par Ludovic dans l'inspecteur, 08/09). Le socle avait raison, et la production fait foi. */ --largeur-lecture: 672px; /* corps de texte : la colonne du milieu — la largeur du site en ligne */ /* Les deux rails de la direction E — sommaire à gauche, ce que la page demande au lecteur à droite. 240 + 672 + 240 = 1152 dans les 1232 px utiles : les 80 px restants font deux gouttières de 40. ⚠ Sous 900 px il n'y a plus de rails du tout : ils redescendent sous le texte (responsive.css). Ce seuil ne peut pas être une variable — une media query ne lit pas les propriétés personnalisées. */ --largeur-rail: 240px; --taille-titre-detail: 38px; /* titre du contenu — le plus fort de la page */ --taille-intertitre: 22px; /* intertitres du corps de texte */ --taille-citation: 20px; /* citations posées dans le texte */ /* ⚗ 08/09 — PREMIER RACCORDEMENT AU SOCLE, et le seul de cette session : la colonne de lecture prend les valeurs du site en ligne (relevées par Ludovic dans l'inspecteur : PT Serif 20 px, #363636, 24 px entre les paragraphes). Motif : on vient de changer la famille, et juger une police à un corps qui n'est pas le sien ne dit rien. Le reste attend l'étape 5. */ --taille-texte-lecture: var(--text-lg); /* corps de lecture : 20 px, celui du site en ligne */ --couleur-lecture: var(--c-texte); /* le gris de lecture, pas le noir des titres */ --taille-chapo-lecture: var(--text-lg); /* le chapô de la page de lecture : 20 px, en gras (Ludovic, 08/09) */ --espace-paragraphes: var(--space-24); /* entre deux paragraphes du corps */ --interligne-lecture: 1.7; /* interligne de la lecture longue, plus aéré que le 1.45 courant */ /* Fondu qui termine le texte au-dessus du mur d'abonnement — même principe que --fondu-edito sur la home : le texte continue, on le montre. */ --fondu-mur: 110px; /* Proportions de la tête « site actuel » (variante de comparaison) : titre à gauche, image à droite — l'héritage Bon pour la tête. */ --grille-tete-detail: 1fr 1.1fr; --taille-portrait-auteur: 44px; /* portrait rond de la signature de tête */ /* --- LA PAGE D'UN ENTRETIEN (single.php, planche A — 24/09) ------------- En blanc depuis le 24/09 : la vidéo et le texte à gauche, le sommaire au rail. La grille est celle de la leçon d'une masterclass (`.grille-rail`, composants.css). */ --taille-chapitre-video: 15px; /* une ligne de chapitre */ --largeur-tc-video: 62px; /* la colonne des horodatages, alignée */ --hauteur-chapitres-video: 392px; /* le sommaire replié au rail : à peu près la hauteur du lecteur à 1 440 */ --taille-titre-video: 20px; /* la phrase du verrou, sur le lecteur d'une vidéo fermée */ /* Les filets d'une bande sombre : l'archive des entretiens en sombre (éteinte, 23/09), le réel en bref, l'accueil. */ --filet-sur-sombre: #3d3d3d; /* filets internes d'un panneau sombre */ --filet-sur-sombre-fort: #6e6e6e; /* le filet d'un manchon sur fond sombre : ce que le filet noir est au blanc */ /* --- LA CARTE (template-parts/carte.php) — la carte « g », 15/09 -------- Reprise du canevas du 14/09 (fiche « Cartes et listes ») avec NOS polices : PT Serif pour le titre, Simplon Norm pour le reste. Réglée pour une carte d'environ 300 px, quatre colonnes sur 1 280 px. ⚠ Première couleur hors de l'accent et des gris : les rubriques et le vert de « Libre ». Le refresh est élargi (Ludovic, 15/09). */ --taille-service-carte: 13px; /* « ● Rubrique · Format · Libre » */ --taille-titre-grille: 19px; /* le titre d'une carte de grille */ --interligne-titre-grille: 1.2; --taille-extrait-carte: 14px; /* le chapô, coupé à --lignes-chapo-liste */ --interligne-extrait-carte: 1.45; --taille-auteur-carte: 13px; /* les noms, sans « Par » */ --couleur-extrait-carte: #55554f; --couleur-format-carte: #6b6b66; /* le format, le cadenas fermé, la date */ --couleur-sep-carte: #a3a39d; /* le « · » entre deux mentions */ --couleur-auteur-carte: #333333; --couleur-libre: oklch(0.5 0.12 150); /* « Libre » et son cadenas ouvert */ --couleur-libre-sur-sombre: oklch(0.78 0.12 150); /* le même, sur une bande sombre */ --taille-pastille: 9px; --taille-cadenas: 12px; --fond-video-carte: var(--gris-noir); /* les bandes d'une vidéo dans une liste mêlée */ /* La carte en ligne (.carte-ligne) : la frise d'un dossier, 15/09 */ --largeur-vignette-ligne: 200px; /* l'image 3:2, à gauche du texte */ --gouttiere-carte-ligne: 18px; --lignes-chapo-ligne: 2; /* le chapô, plus court qu'en grille : le texte suit l'image */ /* La même carte au téléphone (.carte-ligne-tel, 16/09). La vignette y est un peu plus large que celle de la frise : le titre d'un article tient plus de lignes qu'un jalon, et 112 px la rendaient minuscule à côté. */ --largeur-vignette-ligne-tel: 132px; --taille-titre-ligne-tel: 17px; --taille-chapo-ligne-tel: 14px; /* Les couleurs de rubrique : même clarté, même saturation, seule la teinte change — oklch(0.6 0.13 teinte), écrites en hexadécimal. */ --rubrique-geopolitique: #c25e53; /* teinte 28 */ --rubrique-economie: #ad7300; /* teinte 75 */ --rubrique-culture: #ab61a5; /* teinte 330 */ --rubrique-philosophie: #7973ca; /* teinte 285 */ --rubrique-histoire: #bc662f; /* teinte 50 */ --rubrique-sante: #00986c; /* teinte 165 */ --rubrique-sciences: #008bc2; /* teinte 235 — « Sciences et technologies » */ --rubrique-societe: #778b20; /* teinte 120 */ --rubrique-defaut: var(--gris-boite); /* --- LES LISTES (archive.php) ------------------------------------------ ⚗ 09/09 — cinq listes : fil, rayon, voix, années, grille. */ --taille-titre-archive: 38px; /* le titre d'une archive — la même force que celui d'un contenu */ /* ⚗ 09/09 — LE TITRE D'UNE PAGE : celui d'un article ou d'une brève (.detail-titre) et celui d'une archive (.archive-titre). Ludovic : ni League Gothic ni majuscules sur le titre d'un contenu. Essai en Simplon Medium. POUR COMPARER : changer les trois lignes ci-dessous et recharger — rien d'autre à toucher, les deux pages suivent. police : var(--police-meta) = Simplon · var(--police-titre) = PT Serif · var(--police-affiche) = League Gothic graisse : 400 Regular · 500 Medium · 700 Bold (Simplon) — PT Serif n'a que 400 et 700, League Gothic que 400 casse : none · uppercase Les titres de section (.titre-section) restent en League Gothic. */ --police-titre-page: var(--police-titre); --graisse-titre-page: 700; --casse-titre-page: none; /* Le fil des brèves (A, le jour en tête, 23/09) — sur la bande d'un dossier */ --taille-nom-jour: 28px; /* « Lundi 31 août », dans la colonne d'identité */ --hauteur-age-jour: 22px; /* la pastille carrée « Aujourd'hui », « Hier » */ --taille-age-jour: 11px; --taille-titre-breve: 21px; /* le titre d'une brève dans le fil */ --taille-chapo-breve: 15px; --largeur-chapo-breve: 760px; --lignes-chapo-liste: 3; /* le chapô d'une liste est coupé à trois lignes (socle, 07/09) — pas le rayon, qui le sert entier */ /* Le fil des dessins (le fil, 02/09) — un gabarit dédié, hors archive.php */ --largeur-dessin-fil: 620px; /* LA TAILLE DE LECTURE D'UN DESSIN : la colonne de lecture (672) moins sa marge. À 380 px un dessin ne se lit pas (01/09) */ --reserve-dessin-fil: 140px; /* ce qu'un dessin laisse à son titre et à l'air de sa bande, sous l'en-tête : sa hauteur est l'écran moins ça */ --hauteur-min-dessin-fil: 420px; --taille-jour-dessin: 28px; /* « 13 août », dans la colonne d'identité de la bande (A, 23/09) */ --taille-titre-dessin: 28px; /* le titre d'un dessin, au-dessus de l'image : son SEUL texte */ /* Le rayon des enquêtes (D, 02/09) */ --grille-rayon-tete: minmax(0, 7fr) minmax(0, 5fr); /* la une : image à gauche, texte à droite */ --taille-titre-rayon-tete: 34px; /* le titre de la une du rayon */ --taille-titre-rayon: 28px; /* le titre d'un étage du rayon */ --largeur-vignette-rayon: 340px; /* la vignette 3:2 d'un étage (carte « g », 15/09) */ --taille-chapo-rayon: 15px; /* le chapô entier du rayon : la voix de la carte, un cran plus grande */ --taille-portrait-liste: 28px; /* le portrait rond d'une signature dans une liste */ /* Les voix des chroniques (B) et les années des éditions (A), 09/09 */ --taille-portrait-voix: 88px; /* le visage en rond d'une voix, au-dessus de son nom (planche B, 23/09) */ --taille-portrait-voix-page: 120px; /* le même, sur la page d'une voix (C2) */ --taille-nom-voix: 30px; /* le h1 de la page d'une voix (C2 : 34 ; 30 pour qu'un nom tienne sur la colonne, comme sur l'archive) */ /* Le profil d'une signature (B, 07/09 ; écrit le 14/09) */ --taille-portrait-profil: 128px; /* le portrait rond de la fiche, sous le filet (B2, 23/09) */ --taille-fonction-profil: var(--text-base); /* la fonction, en tête de la légende (B2) */ --taille-bio-profil: var(--text-base); /* la bio, en serif : 18 sur la planche, trop grande à l'écran (Ludovic, 23/09) */ --largeur-bio-profil: 720px; /* sa mesure (B2) */ /* La page Équipe (C, 07/09 ; écrite le 14/09) */ --taille-portrait-membre: 112px; /* un membre du comité, dans sa bande (B2, 23/09) */ --taille-portrait-visage: 96px; /* une signature (B2, 23/09) */ --taille-nom-equipe: 19px; /* le nom d'un membre ou d'une signature (B2) */ --taille-titre-etage: 26px; /* « La rédaction », « Les signatures » */ --colonnes-visages: 6; /* une rangée de visages */ --colonnes-annuaire: 3; /* l'annuaire alphabétique */ /* La bande d'un dossier — l'archive (A) et la page d'un dossier (D1), 23/09 */ --largeur-identite-dossier: 268px; /* la colonne du nom : avec la demi-gouttière, 300 comme sur les planches */ --espace-bande-dossier: 32px; /* de part et d'autre du filet noir d'une bande */ --vignette-ligne-dossier: 160px; /* la vignette 3:2 d'une ligne (220 sur la page d'un dossier) */ --gouttiere-ligne-dossier: 18px; --espace-ligne-dossier: 18px; /* de part et d'autre du filet clair d'une ligne */ --taille-titre-ligne-dossier: 17px; /* L'archive des dossiers (A, la vitrine resserrée) */ --taille-nom-vitrine: 30px; --taille-chapeau-vitrine: 15px; --lignes-chapeau-vitrine: 4; /* le chapeau serré d'une vitrine */ --largeur-chapeau-vitrine: none; /* au bureau, la colonne le borne ; 560 px à la tablette */ /* La page d'un dossier (D1) */ --taille-nom-dossier: 40px; /* le h1, dans la colonne d'identité */ --taille-chapeau-dossier: 22px; --taille-etape-dossier: 24px; /* « Mars 2026 » · « L'embrasement » */ /* La recherche (E, 01/09) — le champ, et les dépliants de la barre de filtres */ --largeur-champ-recherche: 760px; /* le champ ne prend pas la page : c'est une phrase, pas un formulaire (planche E) */ --hauteur-champ-recherche: 56px; /* il tient dans la zone d'identité de la tête (68) — B, 23/09 */ --taille-saisie-recherche: 22px; /* ce qu'on tape, en PT Serif : la ligne la plus grosse de la tête (B) */ --taille-etat-recherche: var(--text-xl); /* « suisse », au-dessus de la grille (B) */ --espace-etat-recherche: 28px; /* entre l'état et la grille (B) */ --hauteur-max-pli-filtre: 320px; /* un dépliant qui dépasse défile : 30 signatures ne tiennent pas sous la barre */ /* L'ARCHIVE DES ÉDITIONS — mécanique A (01/09), habillage C2 (16/09). La mécanique de pliage ne bouge pas ; ce sont les valeurs qui changent. */ --largeur-numero-edition: 200px; /* la colonne d'identité : archive des éditions ET « éditions précédentes » de la page d'un numéro */ --taille-numero-edition: 30px; /* le numéro, en sérif à chasse fixe (C2 : 30 · 28 · 26) */ --taille-resume-edition: 20px; /* les titres enchaînés, en sérif, quand la ligne est fermée */ --lignes-resume-edition: 3; /* ce sont les LIGNES qui coupent le résumé, pas le nombre de titres (16/09) */ --largeur-pli: 40px; /* la colonne du « + » / « − » — la même quel que soit l'état (socle) ; 44 sous 992, la hauteur d'un doigt */ --colonnes-sommaire: 2; /* le sommaire déplié, en cartes dépouillées ; une seule colonne au téléphone */ --gouttiere-sommaire: 40px; --taille-numero-bande-edition: 44px; /* « N° 278 », en tête de la bande d'une édition (A2 : 44 · 36 · 30) */ /* La leçon d'une masterclass (A v2, 24/09) */ --taille-titre-lecon: 38px; /* le titre de la leçon (A v2 : 38 · 32 · 26) */ --largeur-fleche-lecon: 44px; /* les flèches sur la vidéo : une cible tactile */ --hauteur-fleche-lecon: 64px; --taille-titre-sommaire: 19px; /* le titre d'une entrée du sommaire (C2 : 19 · 18 · 18) */ /* 🔴 LE CONTRAT D'UNE TÊTE DE LISTE (16/09 pour les éditions ; étendu à l'archive d'une rubrique le 22/09). Le manchon tombe AU MÊME PIXEL sur toutes les pages de liste — la barre des années de l'archive des éditions, la bande d'un numéro, les formats d'une rubrique. Trois jetons le disent, et eux seuls : l'air au-dessus de l'identité, LA HAUTEUR DE CETTE IDENTITÉ, l'air en dessous. ⚠ C'est la hauteur qui tient tout. Le logo « Bon pour la tête » la prend et en déduit sa largeur (il faisait l'inverse jusqu'au 22/09) ; le nom d'une rubrique s'y centre, et déborde un peu de sa boîte sans rien déranger — l'air au-dessus et en dessous est là pour ça. Sans elle, un titre de 84 px poussait le manchon 16 px plus bas qu'un logo de 68 px, et les deux pages ne se répondaient plus. */ --tete-liste-haut: 28px; /* au-dessus de l'identité */ --hauteur-identite-liste: 43px; /* le logo, ou le nom d'une rubrique ou d'un format — 68 jusqu'au 30/09 (A5, E5) */ --tete-liste-bas: 22px; /* entre l'identité et le manchon */ /* Le manchon lui-même — la bande d'un numéro, la barre des années, les formats d'une rubrique : un seul calibre pour les trois (22/09). */ --taille-manchon: 12px; --padding-manchon: 10px; /* Le fond vers lequel son fondu se dégrade. Deux jetons et non un `transparent` : sur WebKit, un dégradé vers `transparent` passe par du noir transparent et laisse une frange grise. La tête sombre de l'archive des entretiens les redéfinit tous les deux (composants.css). */ --fond-manchon: var(--gris-fond); --fond-manchon-nul: rgb(255 255 255 / 0); /* L'archive vidéo (E, 01/09) — la une reprise de D, puis la grille */ /* ⚗ 23/09 — 7/5 ET NON PLUS 2/1 (Ludovic : « diminuer la taille de l'image à la une pour se rapprocher du format qu'on a pour les articles… que le texte prenne un peu plus de place »). C'est la proportion de la une des articles, du courrier et des enquêtes : la vignette passe de 800 à 690 px, le texte de 400 à 480. Elle reste en 16/9 : une vidéo ne se recadre jamais (15/09). */ --grille-une-video: minmax(0, 7fr) minmax(0, 5fr); /* la vignette / le texte de la une */ --gouttiere-une-video: var(--gouttiere-trame); --lignes-chapo-une-liste: 5; /* le chapô de TOUTES les unes de liste — articles, courrier, enquêtes, entretiens (23/09) */ /* --- LA GRAMMAIRE COMMUNE DE R2 ET DE A (16/09, Cheminement #57) ---------- Ce que la page d'une édition (R2) et l'accueil (A) partagent, et que les autres pages reprennent une à une : les deux filets, l'échelle d'espacements, les gouttières, les fonds, le calibre des composants de composants.css. Le détail est dans la fiche « Composants partagés » du vault ; la tablette et le téléphone redéfinissent l'échelle dans responsive.css (48 · 28 · 24, puis 40 · 24). */ --filet-noir: var(--gris-texte); /* le filet d'un titre de bloc, d'une barre, d'un cadre */ --filet-clair: #e3e0d8; /* entre deux entrées, entre deux colonnes — chaud, comme les gris de la carte */ --espace-section: 64px; /* entre deux grandes sections de l'accueil (planches du 30/09 ; 96 depuis A) */ --espace-filet-noir: 32px; /* après un filet noir */ --espace-filet-clair: 24px; /* de part et d'autre d'un filet clair */ --gouttiere-colonnes: 64px; /* de part et d'autre d'un filet vertical : 32 et 32 */ --gouttiere-rangee: 40px; /* entre deux cartes d'une rangée à filets */ --grille-deux-tiers: minmax(0, 2fr) minmax(0, 1fr); /* huit et quatre colonnes sur douze : la semaine d'une édition, la une et le fil d'une rubrique */ --gouttiere-rail: 48px; /* entre une vidéo et son rail : la leçon, la présentation d'une masterclass, un entretien */ --fond-papier: #f6f2e9; /* le papier : le courrier des lecteurs, l'abonnement */ --fond-action: #faf9f6; /* la case de l'action dans un cadre : la question, la newsletter */ --creme: #e6e2d8; /* le crème des titres et des liens sur une bande sombre (la masterclass) */ --creme-texte: #bdb9af; /* le texte courant sur cette bande */ --taille-libelle: 12px; /* « BRÈVES », « VIDÉOS DE LA SEMAINE » : le libellé d'un bloc, en capitales espacées */ --taille-titre-bloc: 22px; /* « NOS ENQUÊTES », « LES ÉDITIONS PRÉCÉDENTES » : le titre d'une section, sur son filet de 3 px */ --hauteur-bouton: 48px; /* un bouton, quel qu'il soit */ --taille-bouton: 15px; --taille-lien-suite: 14px; /* « Toutes les brèves → » */ --taille-ligne: 17px; /* le titre d'une ligne de liste : une brève */ --taille-ligne-chronique: 18px; /* une chronique de l'accueil, un cran plus haut */ --taille-ligne-dossier: 19px; /* le nom d'un dossier de l'accueil */ --taille-ligne-rail: 15px; /* la même ligne dans un rail de 240 px : le fil d'une brève */ --taille-titre-question-empilee: 23px; /* la question de l'accueil, dans une colonne */ /* --- LA PAGE D'UNE ÉDITION (R2, 15/09) --------------------------------- Les valeurs de la planche « Édition · deux vidéos (par défaut) », avec NOS polices. La tablette et le téléphone en redéfinissent une partie dans responsive.css (espacements 48 / 28 / 24 puis 40 / 24 / 24). */ --grille-edition: var(--grille-deux-tiers); /* la une et ses voisins, la semaine et le dessin */ --gouttiere-edition: var(--gouttiere-colonnes); --gouttiere-grille-edition: var(--gouttiere-rangee); --gouttiere-videos-edition: 32px; /* entre les deux vidéos */ --espace-edition-une: var(--espace-filet-noir); /* entre la tête et la une : l'écart de toutes les listes sous leur manchon (23/09 au soir, était 36 · 32 · 24) */ --espace-edition-bloc: var(--espace-bloc); --espace-edition-filet: var(--espace-filet-noir); --espace-edition-gris: var(--espace-filet-clair); --espace-edition-rubrique: 48px; /* entre deux rubriques d'une même colonne */ --espace-edition-precedentes: 88px; /* avant les éditions précédentes */ --filet-edition: var(--filet-clair); --fond-courrier-edition: var(--fond-papier); /* sous le texte du courrier des lecteurs (retouche de Ludovic) */ --couleur-texte-une: #3d3d38; /* le texte long de la une */ --taille-titre-une-edition: 48px; --taille-texte-une-edition: 19px; --taille-service-une: 14px; --taille-titre-a-cote: 21px; /* les deux articles à côté de la une */ --lignes-chapo-a-cote: 2; --taille-titre-video-edition: 22px; --taille-titre-video-seule: 26px; /* « La vidéo de la semaine » : l'image à gauche, le texte à droite */ --lignes-chapo-video-seule: 6; --taille-titre-question: 32px; --taille-chapo-question: 18px; --taille-titre-dessin-edition: 20px; --largeur-reel-edition: calc((100% - 64px) / 5); /* cinq réels ENTIERS dans la colonne : à 149 px le cinquième était coupé, et cinq réels coupés ont l'air d'une erreur. Le téléphone repasse à 140 px et défile */ --taille-titre-precedentes: var(--taille-titre-bloc); /* --- L'ARCHIVE D'UNE RUBRIQUE — « la une et le fil » (17/09) ------------- La direction retenue par Ludovic le 16/09, aux valeurs de la planche « Rubrique · bureau 1440 », avec NOS polices. Elle reprend la grammaire de l'édition et de l'accueil : la grille 8/4, le filet clair dans la gouttière, les composants partagés. La tablette et le téléphone redéfinissent les tailles dans responsive.css. ⚠ Le nom de la rubrique tient la place que le logo tient sur un numéro : c'est l'identité de la page. La planche l'écrit en Source Serif 600 ; PT Serif n'a que 400 et 700, il rendra donc plus gras. */ --grille-rubrique: var(--grille-deux-tiers); --gouttiere-rubrique: var(--gouttiere-colonnes); --taille-titre-liste: 54px; /* le nom de la liste — 84 jusqu'au 30/09 (A5) */ --taille-pastille-rubrique: 24px; /* la pastille de couleur à sa gauche */ --taille-titre-une-liste: 40px; /* la une de la rubrique */ --taille-texte-une-liste: 18px; /* son chapô, en PT Serif */ --taille-titre-fil-rubrique: 23px; /* une entrée du fil */ --largeur-vignette-fil-rubrique: 220px; /* sa vignette, à gauche */ --espace-fil-rubrique: 26px; /* de part et d'autre du filet clair d'une entrée */ --espace-rubrique-colonne: 56px; /* entre deux blocs de la colonne de droite */ /* LE PAIEMENT (30/09, planches « Paiement v2 ») : des gris chauds, ceux du papier. Les mêmes valeurs sont passées à la carte de Stripe, qui ne lit pas ce fichier (`inc/paiement.php`). */ --paiement-texte: #55554f; /* libellés, surtitre, lignes du récapitulatif */ --paiement-filet: #ebe9e3; /* les filets du récapitulatif, le filet vertical */ --paiement-bord: #d9d6ce; /* le cadre des champs */ --paiement-indice: #a3a39d; /* le texte d'exemple d'un champ, l'œil */ --paiement-pastille: #f1efe9; /* la pastille de la remise */ --paiement-souligne: #b9b9b9; /* le soulignement d'un lien du formulaire */ --largeur-paiement: 1105px; /* 420 · 72 · filet · 72 · 540 */ /* MON COMPTE (30/09, planches « Mon compte v2 ») : les gris du paiement, et un vert pour ce qui est actif ou payé — la seule couleur de la page. */ --largeur-compte: 1045px; /* 260 · 72 · filet · 72 · 640 */ --compte-actif-fond: oklch(0.96 0.03 150); --compte-actif-texte: oklch(0.42 0.1 150); --compte-actif-point: oklch(0.55 0.14 150); /* LA PAGE D'UN ARTICLE, VERSION FINALE (30/09) : les gris chauds du paiement pour les outils, le sommaire et l'écoute ; la hauteur de la barre qui prend le relais sous l'en-tête. */ --lecture-gris: #55554f; /* le titre du sommaire, ses entrées, les temps du lecteur */ --lecture-indice: #a3a39d; /* le rang d'une entrée dans la barre */ --lecture-surligne: #f7f6f2; /* l'entrée qu'on lit, dans la barre */ --hauteur-barre-lecture: 60px; }