/* * main.css — feuille de style globale du thème ME-IN Studio. * * FICHIER CRITIQUE, CE N'EST PAS UN BROUILLON. Il est chargé sur TOUTES les pages * du front (handle « mein-main », functions.php → mein_enqueue_assets), sert de * dépendance à assets/css/single-article.css, et est aussi injecté dans l'éditeur * de blocs (add_editor_style). Ce qu'on écrit ici se voit partout. * * CE QU'IL CONTIENT, dans cet ordre : * 1. la doctrine de contraste sauge / crème, et les deux jetons qui en découlent * (bloc ci-dessous : à lire AVANT d'écrire une couleur de texte) ; * 2. deux utilitaires d'accessibilité globaux : « .screen-reader-text » et * l'anneau de focus des boutons natifs du cœur (.wp-block-button__link) ; * 3. LE MOTEUR DE SCROLL-REVEAL (.mein-reveal / .is-revealed, plus sa garde * prefers-reduced-motion), en fin de fichier. * * POURQUOI LE POINT 3 REND CE FICHIER SENSIBLE. assets/js/reveal.js se contente de * poser des CLASSES sur les sections (« .mein-reveal » à l'armement, puis * « .is-revealed » quand la section entre dans l'écran) et le dit lui-même (ses * lignes 4-5, confirmées par functions.php → mein_enqueue_reveal_assets). C'est ICI, * et nulle part ailleurs, que « .mein-reveal » masque le contenu (opacity: 0) et que * « .is-revealed » le rend visible. Abîmer ou supprimer ces règles peut donc laisser * des sections entières à opacity: 0, SANS AUCUN MESSAGE D'ERREUR et avec un DOM * parfaitement correct à l'inspection. Ce mécanisme a déjà rendu invisible le corps * d'un article de 1940 mots (constat du 2026-09-01 ; la cause était alors le seuil * de l'observateur, côté reveal.js, où l'incident est documenté en détail). Toute * retouche de ces règles se vérifie sur une page réelle et longue. * * CE QU'IL NE CONTIENT PAS, et où ça vit : * - les tokens de couleur, typo et espacement → theme.json (--wp--preset--*) ; * - les styles de sections et les animations décoratives (meinFloat, meinFloat2, * meinBreathe...) → le style.css de chaque bloc ; * - les règles de survol : il n'en reste AUCUNE ici, elles appartiennent aux * feuilles des blocs. Le piège documenté plus bas reste valable pour elles. */ /* ============================================================================ * RÈGLE DE CHARTE — LE COUPLE SAUGE / CRÈME NE PASSE PAS EN TEXTE. * ============================================================================ * * À LIRE AVANT D'ÉCRIRE UNE COULEUR DE TEXTE SAUGE OU CRÈME. Ce n'est pas une * préférence esthétique, c'est une mesure. * * sauge #6B7A58 et crème #FBF7EF donnent 4,32:1, DANS LES DEUX SENS. * Le seuil AA du texte normal est 4,5:1. Ce couple échoue donc, toujours. * Sur le sable #F6F0E6 c'est pire encore : 4,07:1. * * La maquette utilise pourtant ce couple partout. LE REPRENDRE TEL QUEL EST UNE * ERREUR, et c'est le réflexe qu'il faut couper : la bonne teinte visuelle n'est * pas la bonne teinte lisible. Les deux jetons ci-dessous existent pour ça. * * --mein-texte-sur-sauge → texte posé SUR un fond sauge (bouton, badge, puce) * blanc pur : 4,62:1 sur sauge, 5,98:1 sur sauge-fonce * * --mein-sauge-sur-clair → texte sauge posé SUR un fond clair (lien, prix, flèche) * sauge-fonce : 5,60:1 sur crème, 5,28:1 sur sable, * 4,87:1 sur sable-fonce * * SEUILS, pour mémoire : 4,5:1 en texte normal ; 3:1 seulement si le texte est * GRAND, c'est-à-dire >= 24 px, ou >= 18,66 px ET en graisse 700. Une graisse 600 * à 23 px reste du texte normal, le raccourci « c'est gros, ça passe » est faux. * 3:1 aussi pour le non-textuel (bordures de champ, anneaux de focus, icônes * porteuses de sens) au titre de WCAG 1.4.11. * * CE QUI N'EST PAS CONCERNÉ : le décoratif pur (une flèche « → » en aria-hidden * doublant un libellé écrit à côté, un filet, une orbe) n'a pas de seuil. Inutile * de l'assombrir. En pratique ces flèches héritent de la couleur de leur lien et * suivent donc le correctif sans qu'on ait à les viser. * * ---------------------------------------------------------------------------- * LE PIÈGE DU SURVOL, qui a déjà coûté deux libellés entièrement invisibles. * ---------------------------------------------------------------------------- * theme.json génère une règle globale : * * :root :where( a:where( :not( .wp-element-button ) ):hover ) { color: sauge-fonce } * * « :where() » ne compte pas dans la spécificité : elle pèse (0,1,0), exactement * comme un sélecteur de classe simple. À égalité, c'est l'ordre de chargement qui * tranche, et il tranche en faveur du global. Conséquence mesurée sur * .mein-hero__bouton--principal et .mein-row__lien : au survol le texte passait à * sauge-fonce sur un fond lui aussi sauge-fonce, soit 1,00:1. Les boutons * devenaient des pastilles vides, sur la page d'accueil comme sur les pages de * prestations. * * DONC : tout lien stylé en bouton DOIT redéclarer sa couleur de texte dans sa * règle « :hover, :focus-visible », qui pèse (0,2,0) et l'emporte. Ce n'est jamais * une redondance. * * Vérifier un survol se fait transitions neutralisées : lues pendant la * transition de 0,25 s, les valeurs calculées renvoient encore l'état de départ et * le défaut passe inaperçu. * ========================================================================= */ :root { /* Texte sur fond sauge. Blanc pur, jamais la crème. */ --mein-texte-sur-sauge: #ffffff; /* Texte sauge sur fond clair (crème, sable). Sauge foncé, jamais le sauge. */ --mein-sauge-sur-clair: var(--wp--preset--color--sauge-fonce); } /* * Accessibilité : masquage visuel sans masquage pour les lecteurs d'écran. * * Classe standard WordPress (« screen-reader-text ») : retire l'élément du flux * visuel tout en le laissant lisible par les technologies d'assistance. Sert à * poser des titres de structure (H1 → H2 → H3) invisibles à l'écran mais présents * pour la navigation par titres (correctif hiérarchie des titres, page Tarifs). */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* * Accessibilité : focus clavier visible sur les boutons natifs (core/button). * * Les blocs custom définissent chacun leur :focus-visible ; les boutons natifs * (.wp-block-button__link, ex. CTA « Découvrir les prestations », « Tous les * articles » de l'accueil) ne reposaient que sur l'anneau par défaut du * navigateur, peu visible sur le fond sauge. On pose un anneau cohérent avec le * reste du site (WCAG 2.4.7). */ .wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--sauge-fonce); outline-offset: 3px; } /* * Scroll-reveal (fondu-montée des sections au défilement) — global à tout le site. * * La classe .mein-reveal est posée par assets/js/reveal.js UNIQUEMENT quand le JS * s'exécute (et hors prefers-reduced-motion). État de base = VISIBLE : sans JS ou * sous reduced-motion, aucune de ces règles ne masque le contenu. */ .mein-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; } .mein-reveal.is-revealed { opacity: 1; transform: none; } /* Ceinture de sécurité : si la classe était présente sous reduced-motion, on n'anime pas et on garde le contenu visible. */ @media (prefers-reduced-motion: reduce) { .mein-reveal { opacity: 1; transform: none; transition: none; } }