/* ========================================================================== GROUPE IMPEC — Accorder les pages ordinaires à la maquette -------------------------------------------------------------------------- Porte l'échelle typographique, le traitement des liens et l'arrondi des images de la maquette sur les pages qui ne contiennent aucun bloc « impec_ » — soit une soixantaine de pages de service, plus le blogue. POUR REVENIR EN ARRIÈRE : retirer la ligne wp_enqueue_style('impec-typo') dans chargement.php. Ce fichier ne touche rien d'autre, et rien d'autre ne dépend de lui. --------------------------------------------------------------------------- CE QU'IL NE FAIT PAS, DÉLIBÉRÉMENT 1. AUCUNE COULEUR. Mesuré sur les pages de service : certains h1 sont blancs sur une image sombre. Leur imposer le marine les rendrait INVISIBLES. Les couleurs viennent du personnalisateur — headings_color est déjà réglé sur #0b2535 — et des réglages de rangée WPBakery. On n'y touche pas. 2. IL NE SE CHARGE PAS SUR LES PAGES À BLOCS. Elles ont déjà toute la typographie de la maquette par styles-v7.css ; deux feuilles sur le même terrain finiraient par se contredire. Voir la condition dans chargement.php. --------------------------------------------------------------------------- POURQUOI UNE ÉCHELLE ÉDITORIALE, ET NON CELLE DE LA MAQUETTE La maquette pose --taille-h2 à clamp(2.5rem, 5vw, 4.5rem), soit jusqu'à 72 px. Ses jetons le disent : « titres de section ». Une section de la maquette porte UN titre, en pleine largeur, comme une affiche. Les pages de service sont d'une autre nature : relevé sur « Lavage de vitres pour écoles », 1 h1, SEPT h2, huit h4 et cinquante paragraphes. Répéter sept fois un titre de 72 px n'aurait pas été « comme la maquette » : c'aurait été l'appliquer à contresens. L'échelle ci-dessous garde donc la LANGUE de la maquette — Manrope, graisse 700, approche resserrée, tailles fluides en clamp() — à une mesure qui convient à du texte suivi. --------------------------------------------------------------------------- PORTÉE : .entry-content Vérifié : ce conteneur exclut l'en-tête ET le pied, qui ont leur propre typographie dans habillage.css. Élargir la portée à .st-content les emporterait avec lui. ========================================================================== */ /* -------------------------------------------------------------------------- 1. LES TITRES Le personnalisateur ne connaît qu'UNE taille pour tous les niveaux — c'est sa limite, et la raison d'être de ce fichier. Ici chaque niveau a la sienne, et elle suit la largeur de l'écran. Spécificité (0,1,1) : suffisante pour battre le « h1, h2, … » injecté par le personnalisateur, qui pèse (0,0,1) et n'a AUCUN !important. Aucun n'est donc nécessaire dans ce fichier. -------------------------------------------------------------------------- */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { font-family: var(--police-corps); font-weight: var(--graisse-titre); letter-spacing: -0.02em; text-wrap: balance; /* titres sur deux lignes, équilibrées */ } .entry-content h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.05; } .entry-content h2 { font-size: clamp(1.65rem, 2.6vw, 2.25rem); line-height: 1.12; } .entry-content h3 { font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: 1.18; } .entry-content h4 { font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.28; letter-spacing: -0.01em; } .entry-content h5 { font-size: var(--taille-corps); letter-spacing: 0; } .entry-content h6 { font-size: var(--taille-petite); letter-spacing: 0.02em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 2. LE TEXTE SUIVI Le personnalisateur pose déjà 17 px ; on reprend l'interligne de la maquette, qu'il ne sait pas régler. -------------------------------------------------------------------------- */ .entry-content p, .entry-content li { font-family: var(--police-corps); font-size: var(--taille-corps); line-height: var(--interligne-corps); } /* -------------------------------------------------------------------------- 3. LE RYTHME VERTICAL Un titre appartient au texte qui le SUIT, pas à celui qui le précède : d'où une marge haute large et une marge basse serrée. C'est ce qui fait lire une page comme une suite de blocs plutôt que comme un mur. -------------------------------------------------------------------------- */ .entry-content h2, .entry-content h3, .entry-content h4 { margin-top: var(--espace-l); margin-bottom: var(--espace-s); } .entry-content h2:first-child, .entry-content h3:first-child, .entry-content h4:first-child { margin-top: 0; } .entry-content p { margin-bottom: var(--espace-s); } /* Une ligne de texte trop longue se lit mal. La maquette borne ses paragraphes ; on fait de même, sans toucher aux colonnes de WPBakery, qui ont leur propre largeur. */ .entry-content > p, .entry-content > ul, .entry-content > ol { max-width: 68ch; } /* -------------------------------------------------------------------------- 4. LES LIENS DANS LE TEXTE Mesuré avant correction : le thème leur donnait le bleu pâle de « Main Color », rgb(185, 217, 232), sur fond blanc. Soit un contraste de 1,5 : 1 quand le minimum lisible est 4,5 — et aucun soulignement. Les 122 liens éditoriaux du site étaient donc pratiquement invisibles. Ce n'était pas qu'une question d'allure : un lien que personne ne voit est un lien que personne ne clique, ce qui annulait le maillage interne réclamé par la relecture SEO. La maquette n'offrait aucun modèle à copier — elle n'a AUCUN lien dans du texte courant, tous les siens étant des composants (cartes, boutons, liens fléchés), et sa règle de base est « a { color: inherit } ». Le traitement ci-dessous est donc dessiné sur ses jetons : le marine du texte, qui donne 15,8 : 1 sur blanc, et le pêche de --accent-chaud en soulignement — le rôle que cette couleur tient déjà partout ailleurs, filets et pastilles. ⚠️ PORTÉE ÉTROITE, ET C'EST VOULU : « p a » et « li a », jamais « .entry-content a ». Sans cela on soulignerait les images cliquables, les cartes et tout composant posé dans le contenu, qui ont leur propre traitement. ⚠️ L'EXCLUSION DE .service-btn RELÈVE DE LA MÊME INTENTION. Ajoutée le 6 août 2026, en repeignant les 16 boutons dorés en bleu pâle. Ce bouton EST un composant, mais il est écrit à la MAIN à la fin d'un paragraphe — dans un bloc de texte. « p a » l'y attrapait donc, et le soulignait, en plus de lui reprendre sa couleur. Le duel était perdu d'avance : (0,1,2) ici contre (0,1,0) pour « .service-btn » dans shopkeeper-child/style.css. On l'écarte ICI plutôt que de gonfler la spécificité LÀ-BAS : c'est cette règle-ci qui débordait de son rôle. Un bouton n'est pas un lien de texte. Tout futur composant écrit à la main dans un paragraphe se règle pareil. La spécificité de « :not(.service-btn) » est celle de son argument, soit (0,1,0) — le sélecteur passe donc à (0,2,1). Sans importance ici : ce qui compte est qu'il ne DÉSIGNE plus le bouton du tout. ⚠️ TITRES AJOUTÉS le 7 août 2026 — même bug, trouvé sur /nous-joindre/. Le téléphone et le courriel de la page y sont écrits comme des liens DANS un

/

(bloc de texte WPBakery, coordonnées de contact), pas dans un

ni un

  • : la portée étroite d'origine ne les couvrait pas, et ils gardaient le même bleu pâle sur blanc, mesuré au même 1,5 : 1. Les titres posent moins de risque que « .entry-content a » nu — un

    -

    enveloppe rarement une carte ou une image cliquable — donc même traitement, portée élargie plutôt qu'une règle séparée. -------------------------------------------------------------------------- */ .entry-content p a:not(.service-btn), .entry-content li a:not(.service-btn), .entry-content :is(h1, h2, h3, h4, h5, h6) a:not(.service-btn) { color: var(--texte); text-decoration: underline; text-decoration-color: var(--accent-chaud); text-decoration-thickness: 2px; text-underline-offset: 0.18em; transition: text-decoration-color var(--transition); } .entry-content p a:not(.service-btn):hover, .entry-content p a:not(.service-btn):focus-visible, .entry-content li a:not(.service-btn):hover, .entry-content li a:not(.service-btn):focus-visible, .entry-content :is(h1, h2, h3, h4, h5, h6) a:not(.service-btn):hover, .entry-content :is(h1, h2, h3, h4, h5, h6) a:not(.service-btn):focus-visible { text-decoration-color: var(--marine); } /* -------------------------------------------------------------------------- 5. LES IMAGES La maquette arrondit tout ; les 108 images du site avaient les angles carrés. C'est le signal visuel le plus immédiat d'un « pas le même design ». Visé sur l'enveloppe d'image de WPBakery plutôt que sur « img » : un sélecteur nu aurait aussi arrondi les logos et les pictogrammes, où l'effet serait déplacé. -------------------------------------------------------------------------- */ .entry-content .vc_single_image-wrapper img { border-radius: var(--rayon-carte); } /* -------------------------------------------------------------------------- 6. LE TEXTE WPBAKERY COLLÉ AU BORD, EN MOBILE Ajouté le 7 août 2026 — Patrik : sur les pages de service (pas l'accueil), certains blocs de texte touchaient carrément le bord de l'écran en mode téléphone, sans la dizaine de pixels de marge qu'on voit ailleurs sur la même page. Cause trouvée : ces blocs sont du texte collé tel quel (repérable à ses attributs data-start/data-end, laissés par l'outil qui a servi à le rédiger) dans un [vc_column_text] WPBakery ordinaire, PAS emboîté dans une colonne supplémentaire comme le reste du gabarit. En mobile, WPBakery ramène le rembourrage habituel de sa colonne (15px) à zéro pour une colonne pleine largeur — .boxed-row garde ses 20px, mais la marge négative de la rangée (-15px) les mange presque en entier, ne laissant que 5px. Repéré sur 42 des 79 pages du site (vérifié par grep sur le contenu) : ce n'est pas un cas isolé. Visé sur .wpb_text_column plutôt que sur .vc_column-inner : ce dernier enveloppe AUSSI les rangées à image plein cadre (ex. .service-image-lg), qui comptent sur ce zéro pour que l'image touche le bord — leur ajouter du rembourrage les aurait cassées. .wpb_text_column, lui, n'enveloppe que du texte. */ @media (max-width: 700px) { .entry-content .wpb_text_column { padding-inline: var(--espace-s); } } .vc_sep_line { border-color: var(--accent) !important; }