/* =========================================================================== ARTICLES — mise à la charte du corps des articles Fichier : /wp-content/themes/infinite-child/css/articles.css Version : v1.8.0 — 23/08/2026 Enqueue : deploy/snippets/135-css-articles.php (articles uniquement) --------------------------------------------------------------------------- POURQUOI CE FICHIER EXISTE, ET PAS UNE LIGNE DANS UN AUTRE Le style des articles venait de DEUX sources que Fred avait construites : 1. Themify Options (Customize → BODY / HEADINGS) 2. un bloc écrit à la main dans le Themify Custom CSS Le 23/08/2026, Fred a vidé les Themify Options des titres (couleur, police ET taille) et nettoyé une grande partie du Custom CSS. C'est ce fichier qui reprend le relais — proprement, versionné, et chargé sur les articles seuls. ⚠️ LA RÈGLE DE SPÉCIFICITÉ, à ne jamais oublier ici : la feuille concaténée /uploads/themify-concate/…css est chargée EN FIN DE , donc APRÈS ce fichier. Être chargé après ne suffit pas — il faut une spécificité SUPÉRIEURE. D'où le préfixe `html body .module-post-content` (0,1,3) sur tout ce qui touche au corps de l'article. Aucun !important. ⛔ RÈGLE DE FRED (05/08/2026) : ne plus RIEN ajouter au Themify Custom CSS. ⛔ Le bloc « Mediavine Mobile CSS » du Custom CSS est INTOUCHABLE. MÉTHODE : par petites touches, validées une par une. Consigne de Fred : « ne pas détruire ce que l'on a fait, mais alléger du CSS obsolète. » =========================================================================== */ /* --------------------------------------------------------------------------- 1. LIENS DU CORPS DE L'ARTICLE (touche n°1 — ✅) --------------------------------------------------------------------------- Les liens rendaient en #326c31, l'ancien vert d'avant la charte, posé par `a{color:#326c31}` (0,0,1) dans les Themify Options. Ce réglage a été vidé le 23/08 ; `body a` dans charte-graphique.css prend désormais le relais sur tout le site. Les règles ci-dessous restent utiles pour le SURVOL, que la charte ne définit pas. Couleur : `--c-brand-deep` (#0b5a2f) — décision déjà inscrite dans charte-graphique.css (ligne 190), restée sans effet des années à cause de l'ordre de chargement. NON TOUCHÉ VOLONTAIREMENT : le soulignement permanent posé par Themify. Un lien souligné dans un article se repère mieux. --------------------------------------------------------------------------- */ .module-post-content p > a, .module-post-content li > a, .module-post-content td > a{ color: var(--c-brand-deep, #0b5a2f); } .module-post-content p > a:hover, .module-post-content li > a:hover, .module-post-content td > a:hover, .module-post-content p > a:focus-visible, .module-post-content li > a:focus-visible, .module-post-content td > a:focus-visible{ color: var(--c-brand, #107C41); } /* =========================================================================== LA TRAME TYPOGRAPHIQUE (touche n°2) --------------------------------------------------------------------------- Proposée le 23/08/2026, validée par Fred sur le principe. Cinq décisions, et la première est de loin la plus importante. ⭐ 1. UN TITRE APPARTIENT À CE QUI LE SUIT, PAS À CE QUI LE PRÉCÈDE. Beaucoup d'espace AU-DESSUS, très peu EN DESSOUS. C'est ce qui manquait : les espacements étaient symétriques, donc chaque titre flottait entre deux blocs sans qu'on sache à quoi il se rattachait. 2. UNE SEULE ÉCHELLE, de rapport ~1,25 entre deux niveaux. L'œil lit une hiérarchie, pas des tailles décidées une par une. 3. UN SEUL ESPACEMENT DE BASE (1em) entre paragraphes, listes et blocs. C'est la répétition d'une même valeur qui crée le rythme. 4. PUCES ET NUMÉROS AU MÊME RETRAIT. Le défaut venait de la règle `.module-post-content ul, ol{margin:… 1.6em}` : en CSS, le `1.6em` ne s'appliquait qu'à `ul`. Le `ol` n'héritait de rien, d'où les numéros dans la marge pendant que les puces partaient à droite. 5. LARGEUR DE LECTURE — PAS ENCORE POSÉE. Les lignes traversent tout l'écran ; au-delà de ~90 caractères l'œil perd la ligne suivante en revenant à gauche. ⚠️ Mais cette règle-là touche la mise en page générale, donc les emplacements Mediavine. Elle viendra en dernier, seule, avec un contrôle des pubs avant/après. ⚠️ h4 : Fred pensait ne pas en avoir. Relevé sur l'article EQUIV le 23/08/2026 : 2 h1, 9 h2, 3 h3 et **2 h4**. Ils sont donc traités ici — sans eux, ils resteraient à la taille par défaut du thème. =========================================================================== */ /* --------------------------------------------------------------------------- 2. LE TITRE DE L'ARTICLE --------------------------------------------------------------------------- Cible `.module-post-title .tbp_title` (0,2,0), le h1 rendu par Themify. Il faut battre `h1{font-size : 50px}`, écrit à la main dans le Custom CSS. 35px : c'est la valeur que le site avait AVANT le vidage des Options, et elle était juste. La charte propose `clamp(36px, 5vw, 56px)`, prévu pour des pages d'accueil — sur un article, ça monte à 56px et écrase tout le reste. --------------------------------------------------------------------------- */ html body .module-post-title .tbp_title{ font-size: 35px; line-height: 1.15; margin: 0 0 .5em; } /* --------------------------------------------------------------------------- 3. LES SOUS-TITRES DU CORPS — taille ET rythme vertical --------------------------------------------------------------------------- L'échelle : 19 (corps) → 21 (h4) → 23 (h3) → 28 (h2). Rapport ~1,25. Le rythme : marge haute généreuse, marge basse serrée (principe n°1). `padding-top:0` neutralise `.module-post-content h3{padding-top:30px}` du Custom CSS, qui ajoutait un espace en plus du nôtre. --------------------------------------------------------------------------- */ html body .module-post-content h2{ font-size: 28px; line-height: 1.2; margin: 2.4em 0 .8em; padding-top: 0; } html body .module-post-content h3{ font-size: 23px; line-height: 1.25; margin: 1.9em 0 .65em; padding-top: 0; } html body .module-post-content h4{ font-size: 21px; line-height: 1.3; margin: 1.5em 0 .5em; padding-top: 0; } /* Un titre en tout début d'article n'a rien au-dessus de lui : sa grande marge haute ne ferait qu'un trou. */ html body .module-post-content > :is(h2, h3, h4):first-child{ margin-top: 0; } /* --------------------------------------------------------------------------- 4. LES PARAGRAPHES — l'espacement de base --------------------------------------------------------------------------- Themify pose `p{margin:0 0 2.2em}` : plus du double de l'interligne, d'où des paragraphes qui semblent flotter. 1em = un interligne, la valeur que l'œil attend entre deux blocs de même niveau. --------------------------------------------------------------------------- */ html body .module-post-content p{ margin: 0 0 1.3em; line-height: 1.55; } /* --------------------------------------------------------------------------- 5. LES LISTES — puces et numéros au même retrait ET à la même taille --------------------------------------------------------------------------- ⭐ v1.4.0 — ON NE LAISSE PLUS RIEN À L'HÉRITAGE. Toutes les propriétés sont déclarées explicitement, sur `ul`, `ol` ET `li`. POURQUOI. Les v1.1 à v1.3 corrigeaient les symptômes un par un, et à chaque fois une règle oubliée reprenait la main par un chemin détourné. Le compte final des règles qui se disputaient les listes d'un article — trois sources différentes, découvertes une par une dans la journée du 23/08/2026 : Snippet 23 « styles globaux » (Code Snippets) : ol li { margin:0; font-size:16px; padding-left:15px } (0,0,2) Themify Custom CSS : .module-post-content ul, ol { margin:.8em 1px .8em 1.6em; padding-left:10px; padding-right:8px; line-height:1.5em; font-size:18px; color:#113111 } (0,1,1)/(0,0,1) .module-post-content li { margin-bottom:.1em; font-size:18px } (0,1,1) .tb_text_wrap li { margin:0 } (0,1,1) ⚠️ Le piège de la VIRGULE, à retenir : dans `.module-post-content ul, ol`, la virgule sépare DEUX sélecteurs indépendants. Cette ligne signifie « les `ul` d'un article » **et** « tous les `ol` du site ». C'est ce qui donnait aux puces et aux numéros des valeurs différentes — et c'est aussi pourquoi la supprimer casse la page d'accueil (vérifié par Fred le 23/08). ⚠️ `font-size: inherit` NE SUFFIT PAS : le `li` hérite alors du `ul`, qui valait 18px par le Custom CSS. D'où une valeur explicite, 19px, la même que le corps du texte. CE QUE CHAQUE LIGNE ANNULE : `margin: 0 0 1em` → le `margin:.8em 1px .8em 1.6em` du Custom CSS `padding: 0 0 0 1.6em` → `padding-left:10px` ET `padding-right:8px` `font-size: 19px` → le 18px du Custom CSS et le 16px du snippet 23 `color` → le `#113111` du Custom CSS `padding: 0` sur `li` → les 15px du snippet 23 `list-style-position` → toute valeur `inside` héritée du thème ⭐ L'œil aligne les MARQUEURS, pas les textes : une puce et un « 10. » doivent finir au même endroit. C'est pourquoi `ul` et `ol` reçoivent le MÊME `padding-left`, et non une compensation calculée pour les numéros. --------------------------------------------------------------------------- */ html body .module-post-content ul, html body .module-post-content ol{ /* ⭐ v1.8.0 — VALEURS RÉGLÉES PAR FRED LUI-MÊME, dans la console, le 23/08/2026. Recopiées telles quelles : ce sont des décisions, pas des suggestions. Ses mots : « c est déjà beaucoup mieux ». Ce qu il a RETIRÉ, et qu on ne remet donc pas : padding-left → l indentation vient du margin-left:2em seul font-size → la taille est fixée sur le li (16px), pas ici line-height → hérité, plus serré que le 1.6 que j imposais list-style-position → outside est déjà la valeur par défaut ⚠️ Sans padding-left ici, le `padding-left:10px` du Themify Custom CSS reprend la main. C est voulu : Fred a réglé EN VOYANT ce rendu-là. Ne pas le « corriger » sans lui. */ margin: 0.5em 0.1em 1em 2em; color: var(--c-text, #36443e); } html body .module-post-content li{ /* Valeurs de Fred (console, 23/08/2026). Il a retiré margin et line-height : les items se tiennent par leur seule taille. 16px contre 19px pour les paragraphes → le contraste qu il demandait, « rien ne saute aux yeux » étant sa remarque. */ padding: 0; font-size: 16px; } /* Une liste imbriquée reste collée à sa liste mère. */ html body .module-post-content li > :is(ul, ol){ margin: .35em 0 0; } /* --------------------------------------------------------------------------- 6. LES MENTIONS AUTOUR DE L'ARTICLE (touche n°3) --------------------------------------------------------------------------- Remarque de Fred (23/08/2026) : « le fil d'Ariane est très gros, la dernière mise à jour et le temps de lecture sont beaucoup trop gros également ». Il a raison, et c'est une question de hiérarchie, pas de goût : ces mentions sont du service, pas du contenu. Elles doivent se lire quand on les cherche, et disparaître quand on lit. À 16-17px elles pèsent autant qu'un paragraphe. Relevé dans la feuille servie le 23/08 : .module-post-meta{font-size:17px; …} ← trois fois, la dernière à 16px Spécificité (0,1,0) → `html body .module-post-meta` (0,1,2) passe devant. --------------------------------------------------------------------------- */ /* « Catégorie : Recherche » et « Étiquettes : … » */ html body .module-post-meta{ font-size: 14px; letter-spacing: .01em; } /* Le bloc de droite : dernière mise à jour, temps de lecture, nombre de vues. Pas de classe propre — on l'atteint par sa colonne. Sans danger : cette feuille n'est chargée que sur les articles. */ html body .module_column.col4-3.last .module-plain-text .tb_text_wrap{ font-size: 14px; line-height: 1.7; } /* --------------------------------------------------------------------------- 7. LE SOUFFLE AVANT LA PHRASE D'ACCROCHE --------------------------------------------------------------------------- Remarque de Fred : « la première phrase est trop rapprochée du compteur qui est au-dessus ». En effet : `.module-post-content{margin-top:24px}`, alors que le bloc de mentions se termine juste au-dessus. 24px ne suffit pas à séparer deux zones de nature différente — le service et le contenu. --------------------------------------------------------------------------- */ html body .module-post-content{ margin-top: 40px; } /* --------------------------------------------------------------------------- 8. LES FORMULES EXCEL (touche n°4) --------------------------------------------------------------------------- C'est le contenu à plus forte valeur du site : il doit se repérer d'un coup d'œil, se lire signe par signe, et se copier sans erreur dans Excel. ✅ BONNE NOUVELLE : la classe `.formule` existe déjà et Fred l'emploie systématiquement. Rien à changer dans les 460 articles — on ne fait que redéfinir son style. Ce qu'elle valait avant (Themify Custom CSS, servi inline dans le ) : .formule{ font-family:Calibri; font-size:21px; font-weight:bold; border:2px solid #c026a0; background:#f5d2f7; letter-spacing:.03em; display:table; margin:15px 0 } Les quatre corrections, et pourquoi : 1. **Police à largeur fixe.** Une formule se lit caractère par caractère : `;` `:` `$` `(` `)` doivent être discernables et alignés. En Calibri, `$B$2:$B$4` est presque illisible. 2. **17px au lieu de 21.** Une monospace paraît plus grosse à taille égale ; 17px l'aligne optiquement sur les 19px du texte courant. À 21px et en gras, la formule criait plus fort que les titres. 3. **Plus de gras.** La monospace assure déjà la distinction. Une formule n'est pas un titre. 4. **Largeur au contenu.** `display:table` donnait déjà ça, mais sans garde-fou : une formule longue élargissait la page sur mobile. `fit-content` + `max-width:100%` + `overflow-x:auto` fait déborder le BLOC seul, jamais la page. Spécificité : `.formule` vaut (0,1,0) et est servie APRÈS ce fichier. `html body .module-post-content p.formule` vaut (0,2,3) → passe devant. ⚠️ Le mauve reste **la seule couleur de fond de contenu** de l'article. Ne pas créer d'autres encadrés colorés : chaque nouveau fond affaiblit celui-ci, qui est le signal le plus utile de la page. --------------------------------------------------------------------------- */ html body .module-post-content p.formule, html body .module-post-content .formule{ font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; font-size: 17px; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: #2c0a33; background: #f7e3fb; border: 1px solid #d9a7e6; border-radius: 4px; padding: .55em .8em; margin: 1em 0; display: block; width: fit-content; max-width: 100%; overflow-x: auto; white-space: pre-wrap; text-align: left; } /* Sur petit écran, on descend à 16px — le plancher lisible — et on garde le défilement horizontal du bloc seul. */ @media (max-width: 600px){ html body .module-post-content p.formule, html body .module-post-content .formule{ font-size: 16px; border-style: solid; /* le Custom CSS passait en `dashed` sous 1000px */ } } /* --------------------------------------------------------------------------- 9. LES IMAGES ET CAPTURES D'ÉCRAN --------------------------------------------------------------------------- Elles portent la démonstration sur ce site. Une image est un changement de nature : elle mérite un peu plus d'air que l'espacement de base — 1.5em contre 1em entre deux paragraphes. ⛔ ON NE TOUCHE PAS à `.module img{padding:15px}` du Custom CSS : ce padding est VOULU et commenté par Fred. --------------------------------------------------------------------------- */ html body .module-post-content :is(figure, .wp-block-image){ margin: 1.5em 0; } html body .module-post-content figcaption{ font-size: 14px; color: var(--c-muted, #677571); text-align: left; margin-top: .4em; } /* --------------------------------------------------------------------------- 10. LE TEXTE ALIGNÉ À GAUCHE, PLUS JUSTIFIÉ --------------------------------------------------------------------------- Le Themify Custom CSS pose `p{text-align:justify}`. En imprimerie la justification fonctionne parce qu'on dispose de la césure ; sur le web elle n'existe pratiquement pas. Le navigateur ne peut donc qu'écarter les espaces, ce qui creuse des « rivières » de blanc verticales dans le paragraphe — d'autant plus visibles ici que les articles contiennent des mots longs et insécables (noms de fonctions, références de cellules). L'alignement à gauche donne un bord droit irrégulier, mais des espaces réguliers : c'est plus facile à lire, et l'œil retrouve mieux la ligne suivante. ↩️ RETOUR ARRIÈRE : supprimer ce bloc, une seule règle. --------------------------------------------------------------------------- */ html body .module-post-content p, html body .module-post-content li{ text-align: left; } /* --------------------------------------------------------------------------- 11. LES ESPACEMENTS CONTEXTUELS — ce qui va ensemble se tient ensemble --------------------------------------------------------------------------- Remarque de Fred (23/08/2026, en voyant le résultat) : « l'espacement entre tous les paragraphes est le même et visuellement, ce n'est pas joli. » Il a raison, et c'est un défaut de la trame posée plus haut. Le principe « un seul espacement de base » (§ trame, décision 3) donne un rythme régulier — mais s'il est appliqué SEUL, il produit une page plate : tous les blocs sont à égale distance, donc rien ne forme groupe. L'œil ne voit qu'une pile d'éléments interchangeables. ⭐ LE PRINCIPE QUI MANQUAIT : LA PROXIMITÉ FAIT LE GROUPE. Deux blocs liés par le sens doivent être PLUS PROCHES l'un de l'autre qu'ils ne le sont du bloc suivant. C'est ce contraste — et lui seul — qui donne au lecteur la structure sans qu'il ait à la chercher. Le cas typique sur ce site, visible sur l'article EQUIV : « Pour l'utiliser, vous avez besoin de 3 arguments : » ← annonce 1. La valeur à rechercher… ← la réponse Ces deux blocs ne font qu'UNE idée. À 1em d'écart, ils paraissent indépendants. À 0,35em, la liste se lit comme la suite de la phrase. Même chose pour une formule : elle illustre le paragraphe qui la précède, elle ne flotte pas entre deux idées. ⚠️ On ne touche PAS au reste du rythme : deux paragraphes indépendants gardent leur 1em, et l'espace APRÈS une liste ou une formule reste entier. C'est justement l'écart entre les deux valeurs qui crée le groupe. `:has()` est utilisé pour agir sur l'élément QUI PRÉCÈDE. Support vérifié en ligne sur ce site le 21/08/2026. --------------------------------------------------------------------------- */ /* Un paragraphe qui introduit une liste lui reste collé. */ html body .module-post-content p:has(+ ul), html body .module-post-content p:has(+ ol){ margin-bottom: .9em; } /* Un paragraphe qui introduit une formule, de même. */ html body .module-post-content p:has(+ .formule){ margin-bottom: .4em; } /* Une capture qui illustre une formule se lit avec elle, pas après elle. */ html body .module-post-content .formule + :is(figure, .wp-block-image){ margin-top: .5em; } /* Une liste imbriquée dans un point de liste appartient à ce point. */ html body .module-post-content li > p{ margin-bottom: .3em; } /* À l'inverse : après une liste ou une formule, on rouvre franchement, parce qu'on change d'idée. Sans ce contraste, le rapprochement du dessus ne se verrait pas — c'est l'écart entre les deux qui fait la lecture. */ html body .module-post-content :is(ul, ol, .formule) + p{ margin-top: 1.3em; }