s'il en a un, donc #psc-main. Le theme n'en rend donc plus un second. Verifie sur 7.0 : le coeur n'imprime AUCUN CSS pour ce lien, c'est donc au theme de le rendre visible au focus. A L'ETAT MASQUE, ON NE TOUCHE A RIEN : la classe `screen-reader-text` du coeur masque en 1x1 px avec clip-path, ce qui ne cree aucun debordement. Une premiere version le repositionnait a `left:-9999px` — la vieille technique — et ca ajoutait 6 px de defilement horizontal a la page sur 320 px de large. Mesure, puis corrige : seul l'etat :focus est redefini. */ .skip-link:focus { /* `fixed` et non `absolute` : le lien se pose PAR-DESSUS la page au lieu de pousser le contenu, donc aucun decalage de mise en page. */ position: fixed !important; left: 8px; top: 8px; z-index: 999; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: nowrap; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); padding: 14px 20px; font-family: var(--wp--preset--font-family--display); font-weight: 700; text-decoration: none; border: 3px solid var(--wp--preset--color--yellow); } /* La cible du lien d'evitement recoit tabindex="-1" (pose en PHP) : sans lui, certains navigateurs deplacent le defilement sans deplacer le focus. */ #psc-main:focus { outline: none; } /* Texte reserve aux lecteurs d'ecran. Jamais display:none, qui le retirerait aussi de la vocalisation. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* `:not(.skip-link)` est necessaire : le lien d'evitement du coeur porte les DEUX classes, et cette regle le remettrait dans le flux — donc decalerait tout le contenu vers le bas a la premiere tabulation. Il a son propre traitement juste en dessous. */ .screen-reader-text:focus:not(.skip-link) { position: static !important; width: auto; height: auto; margin: 0; padding: 12px 18px; clip-path: none; white-space: normal; } /* Focus visible, WCAG 2.4.7 et 1.4.11 (le contour doit lui-meme contraster). Mesure : bleu #3D5AFE contre creme 4,78:1, papier 5,13:1, encre 3,60:1, jaune 3,71:1 — au-dessus des 3:1 requis sur tous les fonds du theme. Un double liseré (bleu + encre) garantit la visibilite sur fond bleu. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--blue); outline-offset: 2px; box-shadow: 0 0 0 6px var(--wp--preset--color--ink); } /* Sur fond encre, on inverse : le liseré exterieur passe en creme. */ .has-ink-background-color :where(a, button, summary):focus-visible { box-shadow: 0 0 0 6px var(--wp--preset--color--cream); } /* Cible tactile de 44 px, WCAG 2.5.5 / 2.5.8. S'applique aux liens de navigation, boutons de pagination et champs de formulaire. */ .wp-block-navigation a, .wp-block-query-pagination a, .wp-block-query-pagination span, .wp-block-search__button { min-height: 44px; display: inline-flex; align-items: center; } /* ------------------------------------------- 2 bis. MENUS (bloc « Menu WordPress ») Le balisage vient de wp_nav_menu(), donc les classes sont celles de WordPress : .sub-menu, .menu-item-has-children, .current-menu-item. On les habille plutot que de les reecrire, pour que les menus deja composes dans Apparence > Menus s'affichent sans rien retoucher. */ .psc-menu__list, .psc-menu .sub-menu { list-style: none; margin: 0; padding: 0; } .psc-menu__list { display: flex; flex-wrap: wrap; gap: 2px var(--wp--preset--spacing--40); align-items: center; } .psc-menu--vertical .psc-menu__list { flex-direction: column; align-items: flex-start; gap: 0; } .psc-menu a { display: inline-flex; align-items: center; /* Cible de 44 px (WCAG 2.5.5) : la zone cliquable ne se limite pas a la hauteur du texte, premiere cause de clics rates sur mobile. */ min-height: 44px; padding: 0 2px; font-family: var(--wp--preset--font-family--display); font-weight: 600; text-transform: uppercase; text-decoration: none; color: inherit; } .psc-menu a:hover { text-decoration: underline; text-decoration-thickness: 2px; } /* La page courante n'est pas signalee par la seule couleur (RGAA 3.1) : un soulignement epais la distingue aussi en niveaux de gris. */ .psc-menu .current-menu-item > a, .psc-menu .current_page_item > a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; } /* ---- sous-menus deroulants ---- */ .psc-menu--dropdown .menu-item-has-children { position: relative; } .psc-menu--dropdown .sub-menu { position: absolute; top: 100%; left: 0; z-index: 40; display: none; min-width: 15rem; flex-direction: column; padding: 6px 10px; background: var(--wp--preset--color--cream); border: 3px solid var(--wp--preset--color--ink); box-shadow: 6px 6px 0 var(--wp--preset--color--ink); } .psc-menu--dropdown .menu-item-has-children.is-open > .sub-menu { display: flex; } /* Repli sans JavaScript : le sous-menu s'ouvre a la tabulation. La classe .psc-menu--js est posee par le script ; on cible donc son ABSENCE, sinon les deux mecanismes se contrediraient — apres Echap le focus reste sur le bouton, donc dans le parent, et le panneau se rouvrirait aussitot. */ .psc-menu--dropdown:not(.psc-menu--js) .menu-item-has-children:focus-within > .sub-menu { display: flex; } .psc-menu__toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; } /* Chevron dessine en CSS : aucune image, aucune police d'icones. */ .psc-menu__chevron { display: block; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg) translateY(-2px); } .is-open > .psc-menu__toggle .psc-menu__chevron { transform: rotate(225deg) translateY(-2px); } /* ---- niveaux 3 et plus, dans un panneau deroulant ---- Un seul bouton par entree de premier niveau : les niveaux inferieurs sont affiches DEPLIES dans le panneau, en retrait. Pas de sous-panneau en cascade (fly-out) : difficile a viser a la souris, impossible au toucher, et un bouton imbrique cassait la ligne du libelle parent. La hierarchie reste lisible sans la couleur (retrait + filet + casse), RGAA 3.1 / 9.1. */ .psc-menu--dropdown .sub-menu { width: max-content; max-width: min(22rem, 90vw); } .psc-menu--dropdown .sub-menu .sub-menu { position: static; display: flex; flex-basis: 100%; width: auto; min-width: 0; max-width: none; margin: 0 0 6px 4px; padding: 0 0 0 var(--wp--preset--spacing--30, 12px); background: transparent; border: 0; border-left: 3px solid currentColor; box-shadow: none; } .psc-menu--dropdown .sub-menu .sub-menu a { font-weight: 400; text-transform: none; } /* ---- sous-menus toujours deplies (pied de page) ---- */ .psc-menu--expanded .sub-menu { display: flex; flex-direction: column; padding-left: var(--wp--preset--spacing--40); border-left: 3px solid currentColor; margin-left: 4px; } .psc-menu--expanded .sub-menu a { font-weight: 400; text-transform: none; } /* ---- petit ecran ---- Un panneau en position absolue deborderait de l'ecran : sous 48 rem, le sous-menu revient dans le flux et pousse le contenu, comme un accordeon. */ @media (max-width: 48rem) { .psc-menu--dropdown .psc-menu__list { flex-direction: column; align-items: stretch; gap: 0; } .psc-menu--dropdown .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; } .psc-menu--dropdown .menu-item-has-children > a { flex: 1 1 auto; } .psc-menu--dropdown .sub-menu { position: static; flex-basis: 100%; min-width: 0; box-shadow: none; border-width: 0 0 0 3px; margin: 0 0 6px var(--wp--preset--spacing--30); } } /* ---- bouton « Menu » (burger) ---- Rendu `hidden` par le serveur, revele par menu.js : sans script, il n'existe pas et la liste reste depliee. Masque sur grand ecran dans tous les cas. */ .psc-menu__burger { display: none; } @media (max-width: 48rem) { .psc-menu--burger .psc-menu__burger:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; position: absolute; top: 12px; right: var(--wp--style--root--padding-right, 16px); min-height: 44px; padding: 0 12px; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 16px; text-transform: uppercase; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--paper); border: 3px solid var(--wp--preset--color--ink); cursor: pointer; } .psc-menu__burger:focus-visible { outline: 3px solid var(--wp--preset--color--blue-deep); outline-offset: 2px; } /* Trois barres dessinees en CSS : aucune image, aucune police d'icones. */ .psc-menu__bars, .psc-menu__bars::before, .psc-menu__bars::after { display: block; width: 18px; height: 3px; background: currentColor; content: ""; } .psc-menu__bars { position: relative; } .psc-menu__bars::before { position: absolute; top: -6px; } .psc-menu__bars::after { position: absolute; top: 6px; } /* Ouvert : les barres deviennent une croix. L'etat est aussi porte par aria-expanded, lu par les lecteurs d'ecran (jamais la forme seule). */ .psc-menu--burger.is-open .psc-menu__bars { background: transparent; } .psc-menu--burger.is-open .psc-menu__bars::before { top: 0; transform: rotate(45deg); } .psc-menu--burger.is-open .psc-menu__bars::after { top: 0; transform: rotate(-45deg); } .psc-menu--burger .psc-menu__list { display: none; } .psc-menu--burger.is-open .psc-menu__list { display: flex; padding: 4px 0 8px; border-bottom: 3px solid var(--wp--preset--color--ink); } } /* Bandeau de reassurance : les emplacements d'image sont vides dans la composition, donc `img` sans `src`. On leur reserve une hauteur pour que la mise en page ne saute pas quand les logos seront choisis (pas de CLS). */ .psc-reassurance .psc-reassurance__logo img { max-height: 44px; width: auto; object-fit: contain; } .psc-reassurance .psc-reassurance__logo { min-height: 44px; margin: 0; } @media (max-width: 781px) { .psc-reassurance { flex-direction: row !important; flex-wrap: wrap !important; } .psc-reassurance > .wp-block-column { flex-basis: 45% !important; } } .psc-menu__vide { padding: 10px 12px; border: 2px dashed currentColor; opacity: .7; font-size: var(--wp--preset--font-size--s); } /* ------------------------------------------------- 3. SIGNATURE VISUELLE */ /* Bordure + ombre dure. Utilisable depuis l'editeur via les styles de bloc « Encadre » et « Encadre fin » declares dans functions.php. */ .psc-hard { border: 3px solid var(--wp--preset--color--ink); box-shadow: 7px 7px 0 var(--wp--preset--color--ink); } .psc-hard--sm { box-shadow: 4px 4px 0 var(--wp--preset--color--ink); } /* OU VIT LA CLASSE SUR UN BOUTON, ET POURQUOI CES SELECTEURS ONT CHANGE. Le bloc `core/button` met son `className` sur le

conteneur, jamais sur le : verifie dans la fonction `save` de wp-includes/js/dist/ block-library.min.js, ou seules `wp-block-button__link`, les classes de couleur, de bordure, de typographie et `has-custom-font-size` sont assemblees pour le lien. Mon balisage ecrivait `psc-hard` sur les DEUX, et l'editeur affichait « Le bloc contient du contenu invalide » avec une proposition de recuperation — sur les six boutons du theme, pas seulement celui de l'en-tete. Le balisage est donc revenu au canon, et le CSS doit suivre : la classe est sur le conteneur, l'habillage doit rester sur le lien, qui est le seul element visible. On neutralise donc `.psc-hard` sur le conteneur et on pose l'ombre sur le lien. La BORDURE, elle, n'est pas reprise ici : elle vient deja de theme.json (`styles.elements.button.border`, 3 px ink) pour tous les boutons. `.psc-hard` n'ajoute que l'ombre dure. */ .wp-block-button.psc-hard { border: 0; box-shadow: none; } .wp-block-button.psc-hard > .wp-block-button__link { box-shadow: 7px 7px 0 var(--wp--preset--color--ink); /* Le bouton s'enfonce au survol. Transformation uniquement : pas de reflow, donc aucun impact CLS. */ transition: transform .12s ease, box-shadow .12s ease; } .wp-block-button.psc-hard > .wp-block-button__link:hover, .wp-block-button.psc-hard > .wp-block-button__link:focus-visible { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--wp--preset--color--ink); } /* Badge d'accroche : un paragraphe qui ne prend que la largeur de son texte. */ /* « LIRE LA SUITE » DES CARTES D'ARTICLES. Un lien de texte, pas un bouton : il y a douze cartes par page, douze boutons pleins noieraient le titre, qui reste le lien principal. Gras et souligne pour qu'il se lise comme une action sans dependre de la couleur (WCAG 1.4.1). Le rembourrage vertical porte la zone cliquable a 24 px au moins (WCAG 2.5.8) sans changer l'aspect. Le titre de l'article est ajoute en texte masque par functions.php, pour les lecteurs d'ecran. */ .wp-block-post-excerpt__more-text { margin-top: 10px; } .wp-block-post-excerpt__more-link { display: inline-block; padding-block: 4px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* TAILLE DU BOUTON « DEVIS INSTANTANE ». Elle etait ecrite en style en ligne dans parts/header.html, ce qui obligeait a reproduire a la main la serialisation exacte de core/button — la source meme du bloc invalide. Elle vit maintenant ici : un gabarit de thème ne contient plus que du balisage canonique, et la moindre retouche de l'editeur ne peut plus le faire diverger. Les valeurs sont celles d'avant (11/18 px, 16 px), qui resserrent le bouton par rapport aux 15/26 px de theme.json pour qu'il tienne sur une seule ligne d'en-tete. */ header.wp-block-group .wp-block-button__link { padding: 11px 18px; font-size: 16px; } .psc-badge { display: inline-block; padding: 6px 12px; letter-spacing: .08em; } /* Lien d'action d'une carte produit. Un lien de 20 px de haut dans un paragraphe reste sous les 24 px demandes par WCAG 2.5.8 ; l'exception des liens « en ligne dans une phrase » ne s'applique pas ici, puisque celui-ci est seul dans son paragraphe et joue le role d'un bouton. On lui donne donc une vraie hauteur de cible, sans le deguiser en bouton. */ .psc-cta-link a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; } /* Reserve visuelle en attendant les photos produit. La proportion est explicite : la place est prise avant le chargement, donc pas de CLS. (L'ancienne regle aspect-ratio:attr(width)/attr(height) ne fonctionnait dans aucun navigateur : attr() n'est pas utilisable hors de content.) */ .psc-slot { aspect-ratio: var(--psc-slot-ratio, 63 / 88); background-color: #EDEAE1; background-image: repeating-linear-gradient(45deg, #DCD8CD 0 10px, #EDEAE1 10px 20px); } /* --------------------------------------------------- 4. LISTES ET TABLEAUX */ /* Liste de garanties : une vraie