/* Theme Name: Avada Child Description: Child theme officiel pour Avada Author: ThemeFusion Template: Avada Version: 1.0.0 Text Domain: Avada */ /* ========================================================================= Exception 6bis - 07/09, portee a DOUZE points le 08/09 - GO ITES, puis a TREIZE points le 09/09 (point 13 : reserve R-3 du visa visa-correcteur-images-publication-2026-09-09.md, arbitrage Orchestrateur ; ratification ITES a consigner, comme pour les points 9 a 12) ------------------------------------------------------------------------- Seul bloc de CSS custom autorise sur ce site (regle du projet : 100 % natif Avada). Il se retire d'une seule suppression : supprimer ce bloc ET l'enqueue `ites-salgado-6bis` de functions.php rend le site rigoureusement identique a son etat du 2026-09-07 avant pose. Selecteurs et mesures : rapport-a11y-gate-passe1/passe2-2026-09-06.md, rapport-a11y-p5-cible-2026-09-07.md, rapport-a11y-poses-v11-2026-09-07.md (points 7 et 8), planche-exception-css-6bis-2026-09-07.html LES DOUZE POINTS DE L'EXCEPTION, ET OU ILS VIVENT 1 anneau de focus du bouton burger . . . . . . . . style.css 2 scroll-padding-top (arrets masques par l'en-tete) style.css 3 Espace active une question de FAQ . . . . . . . . js/a11y-custom.js (bloc 1) 4 case de consentement des formulaires 59 / 60 . . style.css 5 focus repose apres fermeture du sous-menu . . . . js/a11y-custom.js (bloc 2) 6 nom accessible des liens logo (m-7) . . . . . . . functions.php 7 zone sensible 24 x 24 px des puces du carrousel style.css 8 libelles francais des puces du carrousel . . . . js/a11y-custom.js (bloc 3) 9 panneau mobile : inert + Echap + clic exterieur js/a11y-custom.js (bloc 4) 10 tableaux defilants atteignables au clavier . . . js/a11y-custom.js (bloc 5) + style.css (anneau de focus) 11 nom accessible de l'entree « Appeler » (A-4) . . functions.php 12 libelles francais restants (recherche, auteur) functions.php 13 liens de texte sur fond sombre (4 pages de service) style.css Points 9 a 12 poses le 08/09 (GO ITES « applique tes reco ») : ils soldent A-1, A-2, A-4, R-1 et R-2 des rapports A11y/QA du 08/09 (rapport-a11y-qa-menu-2026-09-08.md, rapport-a11y-qa-lots-fb-2026-09-08.md) et la forme durcie du point 11 vient du visa visa-correcteur-post-gate-blog-2026-09-08.md § 2. CORRECTIF du 08/09 au soir, apres deux portes convergentes (visa-correcteur-6bis-9-12-2026-09-08.md H-1 et M-1, rapport-a11y-qa-6bis-vignettes-2026-09-08.md A-6bis-1) : le point 9 recoit une garde de VISIBILITE du declencheur et un ecouteur `resize` amorti - sans eux, la bascule mobile -> bureau (rotation d'iPad) laissait la page inerte sous une apparence normale. Le clic exterieur ecoute desormais aussi `pointerdown` (tap iOS). Details : rapport-dev-6bis-9-10 § 13. Les points 10 a 12 sont inchanges en comportement ; seuls trois commentaires ont ete rectifies (m-1, m-1bis, m-3). Les points 7 et 8 s'appuient chacun sur un reglage NATIF pose en base, sans lequel ils seraient inoperants ou nuisibles - voir le commentaire du point 7 : [fusion_images] de la page 5, `dots_spacing="18"` et `dots_margin_top="8px"`. ========================================================================= */ /* --- Point 1 : anneau de focus du bouton burger (mobile) ----------------- WCAG 2.1 AA 2.4.7 Focus visible / RGAA 12.7. Seule non-conformite 2.1 AA restante du site. Cible mesuree : button.awb-menu__m-toggle, 55 x 39 px ; au focus clavier, 0 propriete ne change aujourd'hui. Pourquoi DEUX selecteurs : Avada pose `outline:0` EN DUR sur ce bouton (fusion-builder/assets/css/shortcodes/menu-mobile.css, l. 136-139), par un selecteur a 4 classes (specificite 0,4,0), et SANS condition de focus. Un simple `.awb-menu__m-toggle:focus-visible` (0,2,0) - la proposition de la planche - PERDRAIT donc la cascade quel que soit l'ordre de chargement, et l'anneau ne s'afficherait jamais. Le second selecteur (0,5,0) gagne par la seule specificite ; le premier couvre les modes de navigation mobile ou la regle native ne s'applique pas. Aucun `!important` n'est necessaire : la victoire ne depend pas de l'ordre des feuilles de style. Header 42 mesure : mobile_nav_mode="collapse-to-button" (c'est bien le mode concerne par la regle native). A re-verifier a chaque montee de version d'Avada. Contraste de l'anneau #1a1714 (meme encre que le focus natif des champs, pose le 06/09 via form_focus_border_color) : 17,85:1 sur le blanc du bouton et 15,59:1 sur le creme #f4efe7 de l'en-tete - les deux couleurs adjacentes a l'anneau. Seuil WCAG 1.4.11 = 3:1 : tenu tres largement. */ .awb-menu__m-toggle:focus-visible, .awb-menu.collapse-enabled.mobile-mode-collapse-to-button .awb-menu__m-toggle:focus-visible { outline: 2px solid #1a1714; outline-offset: 2px; } /* --- Point 2 : arrets clavier masques par l'en-tete collant -------------- WCAG 2.2 SC 2.4.11 (hors perimetre 2.1 AA de la gate : defaut d'usage, pas non-conformite) : 4 arrets sur 40 masques a 100 % en Shift+Tab depuis le pied de la home. En-tete `position:fixed` mesure 90 px (81 px en etat colle) a la gate du 06/09 ; la RE-MESURE A11y du 07/09 (rapport a11y-poses-v10, mineur m-4) donne 93,1 px en haut de page a 375 px et 83 px en etat colle. La valeur passe donc de 91 px a 94 px : 93,1 arrondi au superieur, + 1 px. Une valeur trop GRANDE est inoffensive (simple marge de securite au-dessus de l'arret amene en vue) ; une valeur trop PETITE laisse un arret partiellement masque. Independant de l'ordre de chargement : la valeur initiale de la propriete est `auto` et aucune regle native ne la declare (0 occurrence de `scroll-padding` ET de `scroll-behavior` dans la CSS d'Avada, relu). Sans effet sur les defilements pilotes en JavaScript (jQuery scrollTop) : `scroll-padding-top` ne s'applique qu'aux mises en vue NATIVES - navigation par fragment et navigation sequentielle au clavier. C'est exactement le defaut vise, et c'est la raison pour laquelle l'ancre native [fusion_menu_anchor name="formulaire"] de /reserver n'est pas doublement decalee (controle rejoue a la verification de pose). */ html { scroll-padding-top: 94px; } /* --- Point 4 : case de consentement des formulaires 59 et 60 ------------- Confort de perception, PAS une non-conformite : depuis le 06/09 la cible reelle mesure 732 x 70 (conforme 2.5.8) et les contrastes sont soldes. 13 px -> 20 px. Geometrie native relue dans le code, pas devinee (fusion-builder/assets/css/form/checkbox.css) : la boite est un ::before en `content-box`. La regle universelle `*{box-sizing:border-box}` d'Avada ne s'applique PAS aux pseudo-elements (le selecteur `*` ne les atteint pas, et `box-sizing` ne s'herite pas). Preuve arithmetique : la boite native fait 13 px + 2 x 1 px de bordure = 15 px hors tout, et le temoin de 7 px est pose par Avada a `left:4px`, soit exactement (15 - 7) / 2 = 4. En border-box la valeur native aurait ete 3 px. Donc, boite portee a 20 px -> 22 px hors tout -> temoin de 10 px a (22 - 10) / 2 = 6 px. La planche proposait 5 px : valeur juste en border-box, qui decalerait ici le temoin de 1 px vers la gauche. Libelle : la boite grandit de 7 px, le retrait doit grandir de 7 px. `calc(1.34em + 7px)` conserve A L'IDENTIQUE l'espace boite/texte d'origine, quelle que soit la taille de police du libelle. C'est la reponse a la valeur « a ajuster a l'oeil » de la planche : il n'y a rien a ajuster, la valeur est derivee et non estimee. Le prefixe `html` ajoute un element a la specificite (0,3,3 contre 0,3,2 en natif ; 0,4,4 contre 0,4,3 pour la regle du temoin) : ces regles gagnent par SPECIFICITE et non par ordre de chargement. Necessaire ici parce que la CSS de formulaire d'Avada est agregee dans la CSS dynamique (`add_element_css`), dont la position dans le n'est pas garantie face a une feuille de theme enfant. */ html .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox label:before { height: 20px; min-width: 20px; } html .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input:checked + label:after { width: 10px; height: 10px; left: 6px; } html .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox label { padding-left: calc(1.34em + 7px); } /* --- Point 7 : zone sensible des puces du carrousel d'images ------------- WCAG 2.2 SC 2.5.8 Target Size (Minimum), niveau AA - reserve A-1 du rapport a11y-poses-v11. Puce inactive 8 x 8 px, active 12 x 12 px : les deux sont sous 24 px, et l'exception d'espacement ne jouait pas non plus (14 px entre centres). Seul carrousel du site : carte 01 « Business » de /notre-flotte. Ce qui est fait EN NATIF, hors de ce fichier (a lire ensemble) : `dots_spacing="18"` sur le [fusion_images] de la page 5. L'attribut existe (shortcodes/fusion-image-carousel.php l. 233 et 864) et alimente `--awb-dots-spacing`, consommee par `.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 calc(var(--awb-dots-spacing)/2)}`. Marge 9 px de chaque cote => distance entre centres = (12 + 8) / 2 + 18 = 28 px. Sans elle, deux zones sensibles de 24 px se CHEVAUCHERAIENT : agrandir la cible sans ecarter les puces ne solderait rien. Ce qui ne peut PAS etre natif, et justifie ces trois regles : aucun attribut Avada ne dissocie la taille VISIBLE de la puce de sa zone sensible (`dots_size` change les deux). L'arbitrage ITES est de garder l'aspect : 8 / 12 px a l'oeil, 24 x 24 px au doigt. Pourquoi un ::before et pas un `padding` : Avada declare `*{box-sizing: border-box}` (themes/Avada/assets/css/style.min.css) ; sur une puce dont la largeur vaut `var(--awb-dots-size)` = 8px, un padding de 8 px reduirait la boite de contenu a 0 et la puce disparaitrait. Le pseudo-element, lui, n'entre pas dans le flux et ne change aucune taille. `position: relative` sur la puce est indispensable : sans elle le ::before se positionnerait par rapport a `.swiper-pagination` (position:relative en mode « below ») et les deux zones se superposeraient. Avada ne pose `position` sur la puce que dans le mode `bullets-dynamic`, non utilise ici : aucune regle n'est ecrasee. `padding: 6px 0` sur la pagination n'est pas cosmetique : `.awb-swiper` porte `overflow:hidden`, et la pagination est son DERNIER enfant en mode `below`. Les 6 px par lesquels la zone de 24 px depasse la ligne de 12 px seraient sinon rognes en bas - donc inatteignables au pointeur. 6 px est la valeur DERIVEE : (24 - 12) / 2. La compensation visuelle est faite en natif : `dots_margin_top` passe de 14px a 8px, 8 + 6 = 14 px, les puces ne bougent pas d'un pixel. Specificite (0,2,0) contre (0,1,0) en natif : ces regles gagnent sans dependre de l'ordre des feuilles de style, et sans `!important`. Perimetre volontairement borne a `.fusion-image-carousel` : un autre type de carrousel Avada (temoignages, produits) n'est pas touche. */ .fusion-image-carousel .swiper-pagination { padding: 6px 0; } .fusion-image-carousel .swiper-pagination-bullet { position: relative; } .fusion-image-carousel .swiper-pagination-bullet::before { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); } /* --- Point 10 : anneau de focus des tableaux devenus defilants ----------- WCAG 2.1 AA 2.4.7 Focus Visible / RGAA 12.7 - complement obligatoire du bloc 5 de js/a11y-custom.js, qui pose `tabindex="0"` sur l'enveloppe d'un [fusion_table] des qu'elle defile horizontalement (reserve A-2). Un arret de tabulation qui ne se voit pas est un arret perdu : sans cette regle, l'utilisateur clavier atteindrait la zone defilante et ne saurait pas ou il est. Avada ne dessine RIEN sur un conteneur focalisable - la propriete `outline` n'est declaree que sur des champs de formulaire, des selects, le conteneur select2 et les liens de flexslider : SIX occurrences de `outline:0` reparties sur QUATRE regles dans themes/Avada/assets/css/style.min.css (compte rectifie par le visa Correcteur du 08/09, ecart m-1 ; la conclusion, elle, ne bouge pas : aucune de ces quatre regles ne vise ce selecteur). Il n'existe par ailleurs qu'UNE SEULE regle `:focus-visible` dans la CSS du parent, sur la case du bandeau de confidentialite - aucun conflit. L'anneau du navigateur suffirait en theorie, mais il varie d'un navigateur a l'autre et disparait sur fond clair chez certains. Meme encre et meme geometrie que le point 1 (bouton burger) et que le focus natif des champs pose le 06/09 : l'anneau du site est UN seul anneau. Contraste de #1a1714 sur le creme #f1ece4 de la page = 15,18:1 (mesure A11y du 08/09), sur le blanc du tableau = 17,85:1 ; seuil WCAG 1.4.11 = 3:1. Le selecteur porte sur le MARQUEUR pose par le script, jamais sur `.table-1` : un tableau qui ne defile pas ne recoit pas d'arret de tabulation, il ne doit donc pas recevoir d'anneau non plus. Les deux moities du point 10 restent ainsi synchrones par construction. `outline-offset: 2px` dessine l'anneau A L'EXTERIEUR de la boite : il n'est donc pas rogne par le `overflow-x: auto` du conteneur lui-meme, qui ne rogne que son propre contenu. */ [data-ites-table-defilante]:focus-visible { outline: 2px solid #1a1714; outline-offset: 2px; } /* --- Point 13 : liens de texte sur fond sombre (pages de service) -------- WCAG 2.1 AA 1.4.3 Contraste du texte et 1.4.1 Utilisation de la couleur / RGAA 3.2 et 3.1. Pose le 09/09 sur reserve R-3 du visa visa-correcteur-images-publication-2026-09-09.md. La phrase << Pour aller plus loin >> des quatre pages de service vit dans le container `CTA final`, fond #1a1714, texte courant #ded5c8 a 17 px. Ses huit ancres etaient restees en texte simple tant que les articles cibles n'etaient pas publies ; ils le sont depuis le 09/09 05:10, elles deviennent des liens. Pourquoi une regle, et pas la couleur de lien du site : le dore de lien #856231 ne donne que 3,22:1 sur #1a1714 et le dore de survol #8a6636 que 3,43:1 - sous le seuil de 4,5:1 exige a cette taille. Le dore des BOUTONS #b8925a donne 6,20:1 : c'est deja une encre de la DA sur ce fond exact (les deux boutons du meme container), donc aucune couleur nouvelle n'est introduite. Survol et focus : #faf7f1, 16,69:1. Pourquoi le SOULIGNEMENT est obligatoire, et pas decoratif : le rapport de contraste entre le lien #b8925a et le texte courant #ded5c8 n'est que de 1,98:1. La couleur seule ne distinguerait donc pas le lien de son paragraphe (1.4.1). Avada pose `a{text-decoration:none}` (specificite 0,0,1) : sans cette regle, le lien serait nu. Pourquoi un attribut natif ne suffit pas - trois pistes mesurees sur l'installation (fusion-builder 3.16.1) : - [fusion_text] n'expose NI `link_color` NI `link_hover_color` (relu dans shortcodes/fusion-text.php : les deux noms y sont absents) ; - [fusion_builder_container] les expose bien (shortcodes/fusion-container.php, get_link_color_styles() pose --link_color / --link_hover_color en style de conteneur), mais cela repeindrait TOUS les liens du container - les deux boutons compris - et ne donne ni le soulignement ni l'etat focus ; - un `style=""` inline neuf sur chaque ancre est exclu par la consigne du lot (aucun style inline neuf, aucun HTML custom). Reste la classe, qui vise exactement les huit ancres et rien d'autre. Specificite : (0,1,0) contre `body a{color:var(--link_color)}` (0,0,2) et contre `a{text-decoration:none}` (0,0,1) - la regle gagne sans dependre de l'ordre des feuilles de style et sans `!important`. Etats : (0,2,0) contre `a:hover{color:var(--link_hover_color)}` (0,1,1). Aucune regle `:visited` ni `!important` ne vise les liens de contenu sur ce site (compte fait sur la feuille compilee de fusion-styles). L'anneau de focus natif du navigateur n'est PAS supprime : Avada ne declare `outline:0` que sur des champs de formulaire, des selects, le conteneur select2 et les liens de flexslider - jamais sur un lien de contenu (meme mesure qu'au point 10). Le changement de couleur au focus s'ajoute donc a l'anneau, il ne le remplace pas. */ .ites-lien-fond-sombre { color: #b8925a; text-decoration: underline; } .ites-lien-fond-sombre:hover, .ites-lien-fond-sombre:focus, .ites-lien-fond-sombre:focus-visible { color: #faf7f1; text-decoration: underline; } /* --- R-12 : reflow 1.4.10 a 320px - plancher Avada core (body{min-width:320px}) en conflit avec sa propre gouttiere de scrollbar permanente (overflow-y:scroll). Diagnostic + preuve avant/apres : rapport-dev-diagnostic-r12-2026-09-10.md. Visa Correcteur (LEGER) : visa-correcteur-r12-2026-09-10.md. 2026-09-10. */ @media screen and (max-width: 320px) { body { min-width: 0 !important; } } /* --- v37-a 2026-10-04 : A11y passe 2 Avada, A1 (WCAG 2.5.8) - bouton « Ouvrir le sous-menu de Services » de l'en-tete mesure a 17 x 46 px (19 x 46 au 04/10). Avada n'a pas de reglage natif de la zone de clic du chevron : sa marge de fin vaut items_padding_left du menu, qui elargirait aussi tous les liens et leur soulignement actif. On porte le seul bouton a 44 px (plancher ITES) et on lui retire l'equivalent du gap du menu, pour que l'element suivant ne se decale que de quelques pixels sans chevauchement. Bureau seulement (.awb-menu_desktop). Rapport : rapport-webmaster-purge-et-lot-leger-theme-seo-2026-10-04.md. */ .awb-menu_desktop .awb-menu__open-nav-submenu_click.awb-menu__open-nav-submenu_main { box-sizing: border-box; min-width: 44px; justify-content: flex-start; margin-inline-end: calc(-1 * var(--awb-gap, 0px)); } /* --- v37-a 2026-10-04 : A11y passe 2 Avada, A7 (WCAG 2.3.3) - 126 transitions Avada de 0,2 a 0,3 s non coupees sous prefers-reduced-motion (le module est deja a 0). Avada n'a pas d'option native. Les !important sont necessaires : les transitions d'Avada sont declarees par des selecteurs plus specifiques, parfois eux-memes en !important. Duree quasi nulle plutot que none pour que les evenements transitionend et animationend continuent d'arriver. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } } /* --- 19/10/2026 : A11y reserve A-4 (WCAG 1.4.1, RGAA 3.1) - dans le menu replie (burger), l'entree de la page en cours ne se distinguait que par la couleur (fond #dcd3c6 contre #f1ece4 : 1,26:1). L'element Menu d'Avada n'a pas de graisse propre a l'etat en cours : mobile_fonts regle toutes les entrees a la fois. On ajoute donc une graisse 600 et un trait vertical de 3 px or fonce (#856231, 3,74:1 contre #dcd3c6), sur l'entree en cours seulement, en mode replie seulement. Aucune declaration forcee. */ .fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-li.current-menu-item > .awb-menu__main-a, .fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-li.current-menu-item > .awb-menu__sub-a { font-weight: 600; box-shadow: inset 3px 0 0 #856231; }