/* Theme Name: Kadence Child - ACE Academie Description: Thème enfant de Kadence. Couche de surcharge dédiée aux corrections RGAA 4.1.2 et Qualiopi du site ACE Académie. Toute personnalisation doit être écrite ici, jamais dans le thème parent. Author: ACE Académie Template: kadence Version: 1.0.0 Requires at least: 6.0 Requires PHP: 8.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: kadence-child-ace */ /* ========================================================================== ACE-RGAA-COLOR-001 — Contrastes de texte Mesures faites au navigateur sur les 8 pages, seuils RGAA 3.2/3.3 : 4,5:1 pour le texte courant, 3:1 pour le texte large (>= 24px, ou >= 18,66px en gras). Chaque couleur ci-dessous a été assombrie au minimum nécessaire, à teinte et saturation constantes, pour atteindre le seuil. #76D4D0 -> #29837F 1,74:1 -> 4,53:1 coordonnées et titres « Contactez-nous » #718096 -> #68778D 4,02:1 -> 4,53:1 mention de copyright #4A76D8 -> #4572D7 4,31:1 -> 4,52:1 liens du pied de page, fond du bouton #4A76D8 -> #3869D4 3,83:1 -> 4,51:1 libellés de réseaux sociaux (fond gris) Ces couleurs servent AUSSI de fond ailleurs (sections turquoise, bouton, menu mobile) : redéfinir la variable de palette casserait ces usages en sens inverse. Les règles ci-dessous ne visent donc que la couleur du texte. Le !important est nécessaire pour passer devant le CSS généré par bloc par Kadence, dont la spécificité inclut l'identifiant unique du bloc. ========================================================================== */ /* Les encadrés ne sont PAS traités ici : leur couleur est corrigée directement dans les attributs des blocs concernés. Une règle CSS générale toucherait aussi les encadrés à fond bleu, dont le texte est blanc, et créerait l'échec inverse (1,64:1). */ h1.has-theme-palette-1-color, h2.has-theme-palette-1-color, h3.has-theme-palette-1-color, h4.has-theme-palette-1-color, p.has-theme-palette-1-color { color: #29837F !important; } .site-footer .footer-html a, .footer-html.inner-link-style-normal a { color: #4572D7 !important; } .footer-social-wrap .social-label { color: #3869D4 !important; } .kb-forms-submit.button, button.kb-forms-submit { background-color: #4572D7 !important; } /* Mention de copyright, barre basse du pied de page */ .site-bottom-footer-wrap, .site-bottom-footer-wrap .site-footer-row-container-inner { color: #68778D !important; } /* ========================================================================== ACE-RGAA-HEAD-001 — Statistiques sorties du plan de titres Les 17 chiffres de résultats étaient balisés en h2, ce qui polluait la navigation par titres au lecteur d'écran. Ils sont désormais en , qui est un élément inline : on rétablit le comportement de bloc pour que la mise en page reste strictement identique. ========================================================================== */ span.kt-blocks-info-box-title { display: block; /* Le h2 portait un interligne de 1,2 ; un span hérite de celui du corps de page (1,6), ce qui décalait la mise en page de 14 px par bloc. */ line-height: 1.2; } /* ========================================================================== ACE-RGAA-FOCUS-001 — Renforcement de l'indicateur de focus des champs Critères RGAA 10.7 (prise de focus visible), guidance ACE-RGAA-COLOR-001 (« focus visible d'au moins 2 px et suffisamment contrasté »). Constat mesuré sur le thème parent (assets/css/global.min.css) : les champs de saisie, textarea et select suppriment `outline` au focus et ne le remplacent que par un passage de bordure #CBD5E0 -> #718096 sur 1 px, accompagné d'une ombre décorative à 10 % d'opacité. - bordure au focus vs fond blanc ....... 4,02:1 (seuil 3:1 atteint) - écart repos -> focus ................. 2,70:1 (sous le 3:1 du WCAG 2.2) L'exigence RGAA 10.7 est donc discutablement satisfaite — il existe bien une alternative visible à l'outline — mais l'indicateur reste faible : 1 px et un écart d'état insuffisant. On rétablit un anneau de focus de 2 px. Double anneau volontaire : l'outline sombre assure le contraste sur fond clair, le halo blanc extérieur le garantit sur les sections à fond sombre du site. L'indicateur reste ainsi perceptible quel que soit l'arrière-plan. Porté sur :focus-visible afin de préserver le comportement voulu par Kadence (pas d'anneau au clic souris, anneau au clavier). ========================================================================== */ input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="url"]:focus-visible, input[type="password"]:focus-visible, input[type="search"]:focus-visible, input[type="number"]:focus-visible, input[type="tel"]:focus-visible, input[type="date"]:focus-visible, input[type="month"]:focus-visible, input[type="week"]:focus-visible, input[type="time"]:focus-visible, input[type="datetime"]:focus-visible, input[type="datetime-local"]:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--global-palette3, #1A202C); outline-offset: 1px; box-shadow: 0 0 0 4px var(--global-palette9, #ffffff); } /* Repli pour les navigateurs sans :focus-visible. La règle n'est appliquée que si le sélecteur n'est pas reconnu, afin de ne pas dégrader le comportement souris sur les navigateurs à jour. */ @supports not selector(:focus-visible) { input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, textarea:focus, select:focus { outline: 2px solid var(--global-palette3, #1A202C); outline-offset: 1px; box-shadow: 0 0 0 4px var(--global-palette9, #ffffff); } } /* ========================================================================== ACE-RGAA-FORM-001 — Légende des champs obligatoires Kadence affiche un astérisque après le libellé des champs requis sans jamais l'expliquer (RGAA 11.10). La légende est insérée en tête de formulaire par le thème enfant ; elle doit rester visible, c'est son objet. ========================================================================== */ .ace-form-obligatoire { margin: 0 0 1rem; font-size: 0.9375rem; color: var(--global-palette4, #4A5568); } /* L'astérisque de Kadence est en #E53E3E, soit 4,13:1 sur fond blanc — sous le seuil de 4,5:1 du texte courant. Mesuré au navigateur sur les deux formulaires. #E32C2C atteint exactement 4,50:1 à teinte et saturation constantes : c'est le rouge le plus proche qui passe. */ .kadence-blocks-form-field label .required, .kb-form label .required { color: #E32C2C; } /* ========================================================================== ACE-RGAA-TIME-001 — Respect de « mouvement réduit » Le site ne comporte ni carrousel, ni défilement automatique, ni compteur animé : les seules animations relevées sont celles de la visionneuse d'images native de WordPress, déjà encadrées par `@media not (prefers-reduced-motion)`. La règle ci-dessous n'est donc pas un correctif mais un filet : elle couvre les animations qu'un futur bloc introduirait sans cette précaution. Les durées sont ramenées à une valeur quasi nulle plutôt qu'à zéro, afin que les gestionnaires d'événements `transitionend` et `animationend` continuent de se déclencher — les mettre à 0 empêche certains scripts de se terminer. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }