/* * SWF Gutenberg VDH — Styles front-end * Ciblage : :is(.single-post, .single-gazette) .entry-content * Charte : #005D27 (vert foncé) / #17a345 (vert clair) */ /* ============================================================ TYPOGRAPHIE GÉNÉRALE ============================================================ */ :is(.single-post, .single-gazette) .entry-content { font-size: 1rem; line-height: 1.8; color: #2d2d2d; /* Césure — nécessite lang="fr-FR" sur (WordPress le génère automatiquement). hyphenate-limit-chars : mots ≥ 7 lettres, min 4 avant le tiret, min 3 après. hyphenate-limit-lines : max 2 lignes consécutives se terminant par un tiret. overflow-wrap / word-break : annule break-word hérité du thème Divi (style.css:248) qui casse les mots sans consulter le dictionnaire de césure. */ hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 4 3; hyphenate-limit-lines: 2; overflow-wrap: normal; word-break: normal; } :is(.single-post, .single-gazette) .entry-content p { margin-bottom: 1em; text-align: justify; /* Surpasse style.css:240 du thème enfant (line-height: 1.5 sur p). Sans cette règle explicite, les

héritent 1.5 et non 1.8. */ line-height: 1.8; } /* Sécurité : les URLs longues peuvent déborder sans overflow-wrap. "anywhere" autorise une coupure n'importe où dans le lien si nécessaire, sans activer la césure dictionnaire sur le texte courant. */ :is(.single-post, .single-gazette) .entry-content a { overflow-wrap: anywhere; } /* Mots protégés contre la césure (injectés par typography.php). Utilisé sur : mots avec apostrophe, sigles, chiffres, préfixes sensibles. */ .no-hyphen { hyphens: none; -webkit-hyphens: none; white-space: nowrap; } /* ============================================================ TITRES ============================================================ */ :is(.single-post, .single-gazette) .entry-content h2 { font-size: 1.65rem; font-weight: 700; color: #005D27; margin-top: 2.5rem; margin-bottom: 25px; padding-bottom: 0.4rem; border-bottom: 2px solid rgba(0, 93, 39, 0.4); line-height: 1.3; } :is(.single-post, .single-gazette) .entry-content h3 { font-size: 1.25rem; font-weight: 600; color: #1a4d1a; margin-top: 2rem!important; margin-bottom: 0.75rem; line-height: 1.4; padding-bottom: 0 !important; } /* H2 — pas de numérotation dans le contenu (uniquement dans le TOC via CSS counter) */ /* H3 — bullet discret aligné avec le texte Écrase le bullet du thème (même spécificité, chargé après) */ :is(.single-post, .single-gazette) .entry-content h3 { position: relative; padding-left: 22px; } :is(.single-post, .single-gazette) .entry-content h3::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; background-color: #17a345; border-radius: 50%; transform: translateY(-50%); } /* Alignement du contenu suivant un H3 */ :is(.single-post, .single-gazette) .entry-content h3 + p, :is(.single-post, .single-gazette) .entry-content h3 + ul, :is(.single-post, .single-gazette) .entry-content h3 + ol, :is(.single-post, .single-gazette) .entry-content h3 + .wp-block-media-text, :is(.single-post, .single-gazette) .entry-content h3 + .wp-block-image { padding-left: 22px; } /* ============================================================ IMAGES — base universelle Seules les propriétés valables pour toutes les images. border-radius et box-shadow sont appliqués uniquement sur les contextes qui en ont besoin (ci-dessous), pas globalement. ============================================================ */ :is(.single-post, .single-gazette) .entry-content img { max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; } :is(.single-post, .single-gazette) .entry-content figure { margin-bottom: 1.8rem; } :is(.single-post, .single-gazette) .entry-content figcaption { font-size: 0.85rem; color: #666; text-align: center; margin-top: 0.5rem; font-style: italic; } /* ============================================================ BLOC IMAGE STANDALONE (core/image) Logique : la limite de taille est sur le WRAPPER figure. - normal → 400px (par défaut) - .is-large → 760px (ToggleControl sidebar "Image large") - .alignwide / .alignfull → 760px aussi (compatibilité si Gutenberg parvient à écrire la classe un jour) L'img remplit toujours 100% de son wrapper — aucune max-width propre. ============================================================ */ /* L'img remplit son wrapper, pas de contrainte propre */ :is(.single-post, .single-gazette) .entry-content .wp-block-image img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } /* Wrapper normal — 400px centré */ :is(.single-post, .single-gazette) .entry-content .wp-block-image:not(.is-large):not(.alignwide):not(.alignfull) { max-width: 400px; width: 100%; margin-left: auto; margin-right: auto; } /* Wrapper large — 760px centré */ :is(.single-post, .single-gazette) .entry-content .wp-block-image.is-large, :is(.single-post, .single-gazette) .entry-content .wp-block-image.alignwide, :is(.single-post, .single-gazette) .entry-content .wp-block-image.alignfull { max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; } /* Légende sous l'image */ :is(.single-post, .single-gazette) .entry-content .wp-block-image figcaption, :is(.single-post, .single-gazette) .entry-content figcaption.wp-element-caption { position: static !important; float: none !important; display: block !important; width: 100%; margin: 8px 0 0; text-align: left; } /* ============================================================ IMAGES LEGACY — anciens articles (pré-Gutenberg) Couvre les cas non couverts par .wp-block-image : - seul dans le contenu -

(unique enfant) - classes WP classiques : .aligncenter, .alignleft, .alignright, .alignnone Le display:block + margin:auto de la règle parent suffit pour les cas simples. ============================================================ */ /* Paragraphe ne contenant qu'une image (legacy) */ :is(.single-post, .single-gazette) .entry-content p > img:only-child { display: block; margin-left: auto; margin-right: auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } /* Classes d'alignement WP (éditeur classique et blocs legacy) */ :is(.single-post, .single-gazette) .entry-content img.aligncenter, :is(.single-post, .single-gazette) .entry-content img.alignnone { display: block; margin-left: auto; margin-right: auto; float: none; } :is(.single-post, .single-gazette) .entry-content img.alignleft { float: left; margin: 0 1.5rem 1rem 0; display: block; } :is(.single-post, .single-gazette) .entry-content img.alignright { float: right; margin: 0 0 1rem 1.5rem; display: block; } /* Reset exclusions — contextes avec layout propre */ :is(.single-post, .single-gazette) .entry-content .wp-block-gallery img, :is(.single-post, .single-gazette) .entry-content .wp-block-media-text img, :is(.single-post, .single-gazette) .entry-content .swf-signature img, :is(.single-post, .single-gazette) .entry-content .swf-toc img, :is(.single-post, .single-gazette) .entry-content .swf-highlight img { margin-left: 0; margin-right: 0; } /* Icône du bloc encadré — reset des règles globales img (display:block, margin:auto) */ :is(.single-post, .single-gazette) .entry-content .swf-box-header { display: flex; align-items: center; gap: 8px; } /* ============================================================ LISTES ============================================================ */ :is(.single-post, .single-gazette) .entry-content ul, :is(.single-post, .single-gazette) .entry-content ol { padding-left: 1.5rem; } :is(.single-post, .single-gazette) .entry-content li { margin-bottom: 0.8em; line-height: 1.7; } :is(.single-post, .single-gazette) .entry-content ul > li { list-style-type: disc; } /* ============================================================ LETTRINE (drop cap) Ciblée via la classe PHP swf-dropcap injectée par swf_gutenberg_vdh_add_dropcap_class() (priorité 35). Le XPath exclut .swf-toc ET .swf-intro — la classe n'est donc jamais posée sur un

de l'introduction. Ce CSS neutralise la lettrine dans .swf-intro en filet de sécurité (cas de régression PHP ou article existant). overflow: hidden évite les débordements liés au float. ============================================================ */ /* Désactive lettrine si texte centré */ :is(.single-post, .single-gazette) .entry-content .swf-dropcap.has-text-align-center::first-letter, :is(.single-post, .single-gazette) .entry-content p[style*="text-align:center"].swf-dropcap::first-letter { float: none !important; font-size: inherit !important; line-height: inherit !important; padding: 0 !important; margin: 0 !important; } :is(.single-post, .single-gazette) .entry-content .swf-dropcap { overflow: hidden; } :is(.single-post, .single-gazette) .entry-content .swf-dropcap::first-letter { float: left; font-size: 3.1em; line-height: 1; padding-right: 8px; padding-top: 4px; color: #005D27; font-weight: 600; } /* Filet de sécurité — jamais de lettrine dans le bloc Introduction. Neutralise float + taille même si swf-dropcap était posé par erreur. Préférer les propriétés individuelles à "all: unset" (::first-letter et "all" ont un support variable selon les navigateurs). */ :is(.single-post, .single-gazette) .entry-content .swf-intro p::first-letter, :is(.single-post, .single-gazette) .entry-content .swf-intro p.swf-dropcap::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit; font-weight: inherit; } /* ============================================================ CITATIONS ============================================================ */ :is(.single-post, .single-gazette) .entry-content blockquote, :is(.single-post, .single-gazette) .entry-content .wp-block-quote { display: inline-block; width: fit-content; max-width: 700px; margin: 1rem auto; padding: 1rem 2rem; font-size: 1.2rem; font-style: italic; line-height: 1.6; text-align: center !important; color: #1f3d2b; border: none !important; background: transparent; position: relative; } /* Le conteneur parent doit permettre le centrage */ :is(.single-post, .single-gazette) .entry-content .wp-block-quote { display: table; margin-left: auto; margin-right: auto; } :is(.single-post, .single-gazette) .entry-content blockquote p, :is(.single-post, .single-gazette) .entry-content .wp-block-quote p { margin-bottom: 0 !important; } /* Guillemets */ :is(.single-post, .single-gazette) .entry-content blockquote::before, :is(.single-post, .single-gazette) .entry-content .wp-block-quote::before { content: "“"; position: absolute; left: -40px; top: 0; font-family: serif; font-size: 7rem; color: rgba(0, 93, 39, 0.12); line-height: 1; pointer-events: none; } :is(.single-post, .single-gazette) .entry-content blockquote::after, :is(.single-post, .single-gazette) .entry-content .wp-block-quote::after { content: "”"; position: absolute; right: -40px; Top:2.3rem!important; font-family: serif; font-size: 7rem; color: rgba(0, 93, 39, 0.12); line-height: 1; pointer-events: none; } /* Auteur */ :is(.single-post, .single-gazette) .entry-content blockquote cite, :is(.single-post, .single-gazette) .entry-content .wp-block-quote__citation { display: block; margin-top: 0.8rem; font-family: inherit; font-size: 1rem; font-style: italic; color: #1f3d2b; text-align: right; } :is(.single-post, .single-gazette) .entry-content blockquote cite::before, :is(.single-post, .single-gazette) .entry-content .wp-block-quote__citation::before { content: none !important; } /* ============================================================ INTRODUCTION MISE EN AVANT (Pattern 2) ============================================================ */ :is(.single-post, .single-gazette) .entry-content .swf-intro-block { background-color: #f0f7f3; border-left: 4px solid #005D27; padding: 1.5rem 2rem; margin-bottom: 2rem; border-radius: 0 6px 6px 0; } /* ============================================================ BLOC MEDIA-TEXT !important sur grid-template-columns neutralise le style inline injecté par Gutenberg (ex: style="grid-template-columns:auto 35%"). Hauteur naturelle — aucune hauteur forcée sur l'image. ============================================================ */ .wp-block-media-text { display: grid; grid-template-columns: minmax(245px, 300px) 1fr !important; align-items: start; gap: 30px; } /* Variante image à droite */ .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr minmax(245px, 300px) !important; } /* Conteneur image */ .wp-block-media-text__media { max-width: 100%; border-radius: 8px; overflow: hidden; } /* Image — hauteur naturelle, pas de déformation */ .wp-block-media-text__media img { width: 100%; height: auto !important; display: block; object-fit: cover; } /* Contenu texte — min-width: 0 indispensable : sans lui, un item grid ne peut pas se comprimer sous sa largeur de contenu → débordement sur l'image */ .wp-block-media-text__content { min-width: 0; padding: 0 !important; } /* align-self: start override le align-self: center injecté par WordPress core sur .wp-block-media-text > __media et > __content (style.css bloc-library). Sans ce !important, les deux colonnes sont centrées → espace sous le texte. */ .wp-block-media-text__media, .wp-block-media-text__content { align-self: start !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Marge basse dans le contexte article */ :is(.single-post, .single-gazette) .entry-content .wp-block-media-text { margin-bottom: 2rem; } /* ============================================================ BOUTONS ============================================================ */ :is(.single-post, .single-gazette) .entry-content .wp-block-button__link { border-radius: 6px; font-weight: 600; padding: 0.85rem 2rem; transition: opacity 0.2s ease; } :is(.single-post, .single-gazette) .entry-content .wp-block-button__link:hover { opacity: 0.88; } /* ============================================================ SÉPARATEUR ============================================================ */ :is(.single-post, .single-gazette) .entry-content .wp-block-separator { border-color: #17a345; opacity: 0.4; margin: 2rem 0; } /* ============================================================ BLOC ENCADRÉ IMPORTANT (swf-gutenberg-vdh/highlight) Design sobre — Notion / MDN / Stripe docs SVG inline fill="currentColor" — couleur héritée du parent Spécificité :is(.single-post, .single-gazette) .entry-content pour passer au-dessus de Divi. ============================================================ */ /* ── Conteneur ────────────────────────────────────────────── */ :is(.single-post, .single-gazette) .entry-content .swf-box { padding: 14px 18px; border-radius: 6px; border-left: 4px solid; margin: 1.5rem 0; } /* ── En-tête : icône + titre sur une ligne ────────────────── */ :is(.single-post, .single-gazette) .entry-content .swf-box-header { display: flex !important; align-items: center !important; gap: 8px !important; } /* ── Icône SVG inline ─────────────────────────────────────── */ :is(.single-post, .single-gazette) .entry-content .swf-box-header .swf-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; line-height: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; } :is(.single-post, .single-gazette) .entry-content .swf-box-header .swf-icon svg { height: 18px !important; width: auto !important; display: block !important; } /* ── Titre ────────────────────────────────────────────────── */ :is(.single-post, .single-gazette) .entry-content .swf-box-header .swf-title { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; line-height: 1 !important; } /* ── Contenu ──────────────────────────────────────────────── */ :is(.single-post, .single-gazette) .entry-content .swf-box-content { font-size: 15px !important; line-height: 1.7 !important; } :is(.single-post, .single-gazette) .entry-content .swf-box-content p { margin: 0; } :is(.single-post, .single-gazette) .entry-content .swf-box-content p + p { margin-top: 0.5em; } /* ── Variantes — color = currentColor pour le SVG fill ────── */ /* Information (bleu) */ :is(.single-post, .single-gazette) .entry-content .swf-box--info { border-color: #2563eb; background-color: #eff6ff; color: #2563eb; /* currentColor → SVG + titre */ } :is(.single-post, .single-gazette) .entry-content .swf-box--info .swf-box-content { color: #1e3a5f; } /* Attention (orange) */ :is(.single-post, .single-gazette) .entry-content .swf-box--warning { border-color: #d97706; background-color: #fff7ed; color: #d97706; } :is(.single-post, .single-gazette) .entry-content .swf-box--warning .swf-box-content { color: #4a2900; } /* À retenir (vert VDH) */ :is(.single-post, .single-gazette) .entry-content .swf-box--success { border-color: #005D27; background-color: #f1f7f3; color: #005D27; } :is(.single-post, .single-gazette) .entry-content .swf-box--success .swf-box-content { color: #1a3d28; } /* ============================================================ TABLE DES MATIÈRES ============================================================ */ /* Wrapper externe */ .swf-toc-wrapper { margin: 10px 0; } /* Bloc TOC */ .swf-toc { background: none; border-left: 2px solid rgba(0, 93, 39, 0.3); padding: 10px 0 10px 15px; margin: 25px 0 30px; } /* Titre — margin-left: 0, pas de ligne de séparation (border-left suffit) */ .swf-toc__title { font-size: 1rem; font-weight: 600; text-transform: uppercase; color: rgba(0, 93, 39, 0.6); margin: 0 0 12px 0; } /* ── Reset total listes — bat Divi avec !important ── */ .swf-toc__list, .swf-toc__sublist { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; padding-bottom: 0!important; } .swf-toc__list li, .swf-toc__sublist li { list-style: none !important; position: relative; } /* Liens */ .swf-toc a { text-decoration: none; color: inherit; } .swf-toc a:hover { text-decoration: underline; } /* ── H2 — numérotation 1. 2. 3. ── */ .swf-toc__list { counter-reset: swf-toc-counter; } .swf-toc__list > li { counter-increment: swf-toc-counter; margin-bottom: 0.4rem; } .swf-toc__list > li::before { content: counter(swf-toc-counter) ". "; font-weight: 600; color: #005D27; } .swf-toc__item--h2 > a { font-weight: 600; color: #005D27; text-decoration: none; font-size: 0.97rem; } .swf-toc__item--h2 > a:hover { color: #17a345; text-decoration: none; } /* ── H3 — bullet simple ── */ .swf-toc__sublist { padding: 0 0 0 15px !important; margin: 5px 0 0 1.2rem; } .swf-toc__item--h3 { margin-bottom: 4px; } /* Override règle globale .entry-content li { margin-bottom: 0.8em } */ :is(.single-post, .single-gazette) .entry-content .swf-toc__item--h3 { margin-bottom: 0 !important; } .swf-toc__sublist li::before { content: "• "; color: #005D27; font-weight: 400; } .swf-toc__item--h3 a { font-weight: 400; color: #444; text-decoration: none; font-size: 0.92rem; } .swf-toc__item--h3 a:hover { color: #005D27; text-decoration: none; } /* ── Sécurité anti-Divi — neutralise ::before sur listes Divi hors TOC ── */ .et_pb_text ul li::before { content: none !important; } /* ============================================================ CONCLUSION (Pattern 5) ============================================================ */ :is(.single-post, .single-gazette) .entry-content .swf-conclusion-block { background-color: #f0f7f3; border-radius: 8px; padding: 2rem; margin-top: 2.5rem; } /* ============================================================ SIGNATURE AUTEUR (swf_gutenberg_vdh_add_signature) ============================================================ */ .swf-signature { display: flex; align-items: center; gap: 15px; margin-top: 40px; padding-top: 20px; margin-bottom: 30px; } .swf-signature img { width: 100px!important; height: 100px!important; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: none !important; background: none; } .swf-signature__text { display: flex; flex-direction: column; gap: 0; line-height: 1.4; } .swf-signature__name { display: block; color: #005D27; font-weight: 700; margin-bottom: 4px; } .swf-signature__role { display: block; font-size: 0.9em; color: #666; line-height: 1.3; margin-top: 2px; } /* Scope texte aligné gauche — contenu legacy articles */ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content { text-align: left !important; } /* Neutralise Tailwind Prose si présent dans le contenu legacy */ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content .prose { text-align: left !important; } /* Signature auteur — alignement gauche, propre */ :is(.single-post, .single-gazette) .entry-content .swf-signature { display: flex; align-items: center; justify-content: flex-start; margin: 40px 0; text-align: left; } :is(.single-post, .single-gazette) .entry-content .swf-signature img { flex-shrink: 0; } :is(.single-post, .single-gazette) .entry-content .swf-signature__text { text-align: left; } /* ============================================================ INCITATION AUX COMMENTAIRES (swf_gutenberg_vdh_comment_cta) Hook comment_form_before — juste avant la zone de commentaires. ============================================================ */ .swf-comment-cta { margin-top: 40px; margin-bottom: 25px; padding: 15px 20px; background-color: #f0f7f3; } .swf-comment-cta p { margin-bottom: 0px !important; font-size: 0.95em; line-height: 1.5; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 780px) { /* Lettrine réduite sur mobile */ :is(.single-post, .single-gazette) .entry-content .swf-dropcap::first-letter { font-size: 2.2em; padding-top: 2px; } /* Media-text : passage en colonne unique */ .wp-block-media-text, .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr !important; gap: 20px; } } @media (max-width: 768px) { :is(.single-post, .single-gazette) .entry-content h2 { font-size: 1.4rem; } :is(.single-post, .single-gazette) .entry-content h3 { font-size: 1.1rem; } :is(.single-post, .single-gazette) .entry-content blockquote, :is(.single-post, .single-gazette) .entry-content .wp-block-quote { max-width: 100%; padding: 1.2rem 1rem; } .swf-toc { padding: 1.2rem 1.2rem; } } /* ============================================================ HEADER ARTICLE MAGAZINE ============================================================ */ .swf-article-header { text-align: center; padding: 2rem 0 1.5rem; margin-bottom: 1rem; } /* Ligne 1 — Catégories */ .swf-article-categories { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #005D27; margin: 0 0 0.6rem; line-height: 1.4; opacity: 0.8; } /* Ligne de 1 ou 2 catégories — jamais de wrap interne */ .swf-article-categories .swf-cat-line { display: flex; align-items: center; justify-content: center; white-space: nowrap; } .swf-article-categories .swf-cat { display: inline-block; } /* Séparateur bullet géré en HTML — pas de pseudo-élément */ .swf-article-categories .swf-sep { margin: 0 8px; font-size: 18px; opacity: 0.5; position: relative; top: -1px; } /* Filet décoratif entre catégories et titre */ .swf-article-categories + .swf-article-title::before { content: ''; display: block; width: 20px; height: 1px; background: #005D27; margin: 0 auto 1.1rem; opacity: 0.4; } .wp-block-image figcaption { text-align: left; font-size: 0.9em; color: #666; margin-top: 10px; padding-left: 2px; font-style: italic; } /* Ligne 2 — Titre */ .swf-article-title { font-size: 2.4rem !important; font-weight: 800 !important; color: #005D27 !important; line-height: 1.2 !important; letter-spacing: -0.01em; margin: 0 0 1.1rem !important; padding: 0 !important; border: none !important; text-align: center; } /* Ligne 3 — Meta auteur | date */ .swf-article-meta { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; line-height: 1.4; } @media (max-width: 780px) { .swf-article-title { font-size: 1.8rem !important; } .swf-article-header { padding: 1.2rem 0 1rem; } } /* ============================================================ BLOCS INTRODUCTION ET CONCLUSION ============================================================ */ /* Bloc Introduction Gutenberg (swf-gutenberg-vdh/intro) — wrapper

et paragraphes injectés dynamiquement par swf_add_intro_class() */ :is(.single-post, .single-gazette) .entry-content .swf-intro { margin-top: 30px; margin-bottom: 40px; font-size: 1.2rem; line-height: 1.75; text-align: justify; color: #005D27; font-style: normal; } /* Paragraphes à l'intérieur du bloc intro Gutenberg */ :is(.single-post, .single-gazette) .entry-content .swf-intro p { margin-bottom: 0; } /* Paragraphes auto .swf-intro (injectés par PHP sur les articles sans bloc intro) */ :is(.single-post, .single-gazette) .entry-content p.swf-intro { margin-bottom: 30px; font-size: 1.2rem; line-height: 1.75; text-align: justify; color: #005D27; } /* Lettrine sur le paragraphe d'intro — agrandie pour compenser la font-size plus élevée */ :is(.single-post, .single-gazette) .entry-content .swf-intro.swf-dropcap::first-letter { font-size: 3em; float: left; line-height: 1; margin-right: 6px; padding: 0; color: #005D27; } :is(.single-post, .single-gazette) .entry-content .swf-conclusion { margin-top: 50px; padding-top: 20px; border-top: 2px solid rgba(0, 93, 39, 0.2); } :is(.single-post, .single-gazette) .entry-content .swf-conclusion p { margin-bottom: 0; font-size: 1rem; line-height: 1.75; } .swf-conclusion::before { content: "Ce qu’il faut retenir"; display: block; font-weight: 700; color: #005D27; margin-bottom: 10px; } /* ============================================================ CONTENU LEGACY (pré-Gutenberg / éditeur classique) Ciblage via .swf-legacy-content ajouté par legacy.php. N'affecte JAMAIS les contenus Gutenberg (pas de wrapper). Note : le PHP supprime les attributs width/height des → CSS seul contrôle toutes les tailles d'images. ============================================================ */ /* ── Titres ───────────────────────────────────────────────── */ .swf-legacy-content h2, .swf-legacy-content h3, .swf-legacy-content h4 { margin-top: 2rem; margin-bottom: 1rem; clear: both; } .swf-legacy-content h2 { font-size: 1.5rem; font-weight: 700; color: #005D27; border-bottom: 2px solid rgba(0, 93, 39, 0.3); padding-bottom: 0.3rem; } .swf-legacy-content h3 { font-size: 1.2rem; font-weight: 600; color: #1a4d1a; } /* ── Paragraphes ──────────────────────────────────────────── */ .swf-legacy-content p { max-width: 700px; margin: 0 auto 1.2rem; line-height: 1.8; } /* ── Images ───────────────────────────────────────────────── */ /* Base : jamais agrandi au-delà de sa taille naturelle. width:auto écrase tout attribut width résiduel. */ .swf-legacy-content img { max-width: 100%; height: auto; width: auto !important; clear: both; } .swf-legacy-content figure { max-width: 100%; clear: both; } /* Neutralisation de TOUS les floats legacy — figure ET img. Couvre le cas
. Le float peut être sur le conteneur, sur l'img, ou sur les deux. */ .swf-legacy-content figure.alignleft, .swf-legacy-content figure.alignright, .swf-legacy-content img.alignleft, .swf-legacy-content img.alignright { float: none !important; display: block; margin: 2rem auto !important; } /* figure.wp-block-image — wrapper WordPress legacy pour les images seules */ .swf-legacy-content figure.wp-block-image { display: block; text-align: center; margin: 2rem auto; } .swf-legacy-content figure.wp-block-image img { display: block; margin: 0 auto; } /* Image seule dans un paragraphe → centrée */ .swf-legacy-content p > img:only-child { display: block; margin: 2rem auto; float: none !important; } /* Figure seule (sans texte frère) → centrée */ .swf-legacy-content figure:only-child { display: block; margin: 2rem auto; text-align: center; } .swf-legacy-content .aligncenter { display: block; margin: 2rem auto; float: none; } /* Clearfix global */ .swf-legacy-content::after { content: ""; display: block; clear: both; } /* ── Listes ───────────────────────────────────────────────── */ .swf-legacy-content ul, .swf-legacy-content ol { max-width: 700px; margin: 0 auto 1.2rem; padding-left: 1.5rem; } .swf-legacy-content li { margin-bottom: 0.5em; line-height: 1.7; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 780px) { .swf-legacy-content img, .swf-legacy-content .alignleft, .swf-legacy-content .alignright { float: none !important; display: block; margin: 1.5rem auto; } } /* ============================================================ AVATAR COMMENTAIRES UNIQUEMENT ============================================================ */ #comments .avatar, .commentlist .avatar, .comment .avatar, .comment-author img.avatar { width: 80px !important; height: 80px !important; min-width: 80px !important; min-height: 80px !important; max-width: 80px !important; max-height: 80px !important; display: block; object-fit: cover; border-radius: 50%; overflow: hidden; flex-shrink: 0; } /* ============================================================ BOUTON TÉLÉCHARGER EN PDF ============================================================ */ .swf-pdf-button-wrapper { margin-top: 30px; text-align: center; } .swf-pdf-button { display: inline-block; padding: 10px 20px; background: #005D27; color: #fff !important; text-decoration: none !important; border-radius: 6px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; transition: background 0.2s ease; } .swf-pdf-button:hover { background: #17a345; color: #fff !important; } /* ===================================================================== LEGACY CONTENT — STABILISATION VISUELLE Articles issus de l'éditeur classique (TinyMCE). Toutes les règles préfixées .swf-legacy-content — zéro impact Gutenberg. ===================================================================== */ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content { max-width: 700px; margin: 0 auto; } /* Paragraphes */ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content p { margin-bottom: 1em; } /* Paragraphes vides (fallback visuel si non supprimés côté PHP) */ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content p:empty { display: none; } /* Images */ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content > p > img, :is(.single-post, .single-gazette) .entry-content .swf-legacy-content figure img { display: block; margin: 30px auto; max-width: 100%; height: auto; } /* Image seule dans un paragraphe */ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content p:has(> img:only-child) { margin: 30px 0; text-align: center; } /* Images consécutives — réduit l'espacement entre deux

*/ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content p + p:has(> img) { margin-top: 10px; } /* Titres vides (fallback visuel si non supprimés côté PHP) */ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content h1:empty, :is(.single-post, .single-gazette) .entry-content .swf-legacy-content h2:empty { display: none; } /* Espacement titres */ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content h1 { margin-top: 40px; } :is(.single-post, .single-gazette) .entry-content .swf-legacy-content h2 { margin-top: 30px; } /* Ancien H1 converti en H2 par le pipeline PHP → légèrement plus proéminent */ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content h2:first-of-type { margin-top: 40px; } /* Titre non structurant (chapeau/intro, exclu du TOC) */ :is(.single-post, .single-gazette) .entry-content .swf-legacy-content .swf-h2-intro { margin-top: 20px; font-weight: 600; opacity: 0.9; } /*______________________________________________________DEBUG MAILLAGE INTERNE______________________________________________________*/ /* * Mode debug visuel — activer avec define('SWF_DEBUG', true) dans wp-config.php * Les remplacent les en mode debug. * Survoler un span affiche le mot-clé + URL dans le title. */ .swf-debug-link { background-color: #fff3cd; outline: 2px dashed orange; padding: 0 2px; cursor: help; border-radius: 2px; }