/* ========================================================================= Simandou Info — Lisibilite et contrastes ------------------------------------------------------------------------- Handle 'simandou-accessibility', enregistre dans functions.php avec 'simandou-layout' pour dependance : cette feuille corrige des JETONS poses par simandou-gold.css et simandou-layout.css, elle doit donc se charger APRES elles. Version par filemtime(), comme ses voisines. Objectif : tout texte porteur de sens atteint le seuil WCAG AA — 4,5:1 en corps courant, 3:1 en grand texte et pour les elements d'interface. Mesure sur les onze pages du site : aucun ecart reel. CE QUI A ETE RETIRE DE LA PASSE 1, ET POURQUOI Trente-quatre selecteurs visaient des classes qui n'existent nulle part : .si-carte, .si-meta, .si-date, .si-opp-carte, .si-badge, .si-opp-grille, .si-carte-visuel... Ecrites d'apres un balisage suppose, jamais verifie. Elles ne faisaient rien. Retire aussi tout ce qui n'avait pas de HTML correspondant : .si-opp-filtres / .si-opp-filtre — les filtres n'existent pas .si-nav-barre / .si-nav-logo-mini — la barre collante non plus .si-home-h1 — le h1 non plus .si-footer-col > ul — le pied de page ne l'utilise pas Ces quatre familles n'etaient visibles que dans la SIMULATION. Les garder ici aurait laissé croire qu'elles etaient acquises. LE FAUX RONGAGE MOBILE La passe 1 signalait du texte coupe a droite en 390 px. Verification faite avec une emulation de viewport reelle : 0 element rogne et 0 debordement a 320, 360, 390 et 768 px. Le rognage venait de l'outil de capture — `chrome --headless --window-size` n'applique pas `width=device-width` et rend la page plus large que la fenetre. Il n'y a rien a corriger, et cette feuille ne corrige donc rien de ce cote : elle n'ajoute aucune regle de largeur, aucun word-break, aucune reduction de police. CE QUI RESTE : LA LISIBILITE L'or #B8924A rend 2,55:1 sur le creme. Le seuil AA est 4,5:1 pour du texte, 3:1 pour un element d'interface. On ne remplace pas l'or : on lui ajoute une variante TEXTE plus profonde. L'or d'origine garde les filets, les bordures et les aplats. ========================================================================= */ /* ---------- Jetons ---------------------------------------------------- LA CAUSE DES TROIS RESISTANCES, lue au protocole DevTools et non devinee : `--si-gold-dark` est employee TREIZE fois dans les feuilles du theme et n'est definie NULLE PART. Chaque usage retombe donc sur son repli : .si-opp-famille color: var(--si-gold-dark, #9a7b3a) -> 3,99:1 .si-opphub-open-cta color: var(--si-gold-dark, var(--si-gold)) -> 2,90:1 Les auteurs du theme voulaient un or sombre pour le texte. Ils ont ecrit les usages et oublie la definition. Il n'y avait donc aucune guerre de specificite a mener : il fallait definir le jeton manquant. Une seule ligne repare les treize usages, sans `!important` et sans toucher a un seul selecteur. */ :root { /* Le jeton que le theme reclamait. 5,31:1 sur creme, 6,03:1 sur carte, 5,31:1 sur l'or. */ --si-gold-dark: #7A5F1F; /* Or de texte : meme valeur, nom explicite pour nos propres regles. */ --si-gold-text: #7A5F1F; /* Encre secondaire. L'ancienne #8A7A52 rendait 3,71:1 — le chiffre releve par le BOSS. Celle-ci donne 5,80:1. Ce jeton ne sert que du texte : l'assombrir n'abime aucun filet. */ --si-ink-soft: #635939; --si-focus: #7A5F1F; /* 5,31:1, tres au-dessus des 3:1 requis */ --si-fs-min: 13px; --si-fs-badge: 12px; --si-tap: 44px; } /* ---------- Textes dores : passage au ton lisible --------------------- Chaque classe listee ici a ete VUE dans la page. Les ratios en commentaire sont mesures, pas estimes. */ /* Les classes doublees de la passe precedente ont ete RETIREES. Elles avaient ete ajoutees pour forcer le passage faute d'avoir compris la cascade ; une fois `--si-gold-dark` defini, elles ne servaient plus a rien — et pire, leur poids [0,3,1] battait mes propres regles de contexte plus bas, laissant .si-count et .si-section-more en or sur or a 2,08:1. Corriger a l'aveugle finit toujours par se payer. Ne restent que les composants sur fond CLAIR, que le jeton ne couvre pas parce qu'ils n'utilisent pas var(--si-gold-dark). */ body.simandou-gold .si-opphub-types, body.simandou-gold .si-opphub-types a, body.simandou-gold .si-mega-groupe-titre, body.simandou-gold .si-nav a, body.simandou-gold .si-menu a, /* La rubrique courante : `li.si-active > a`, en or sur creme a 2,55:1. C'est le seul lien du menu qui portait la couleur de marque. */ body.simandou-gold .si-nav .si-active > a, /* Le compteur « 10 opportunites » vit dans `a.si-opphub-type` et n'utilise pas var(--si-gold-dark) : il faut le nommer. */ body.simandou-gold .si-opphub-type .si-opphub-type-count { color: var(--si-gold-text); } /* Metadonnees secondaires : lieux, notes, mention annonceur. */ body.simandou-gold .si-opp-lieu, body.simandou-gold .si-footer-note, body.simandou-gold .si-ad-label { /* etait 3,38:1 -> 5,80:1 */ color: var(--si-ink-soft); } /* --- Textes POSES SUR de l'or : il faut de l'encre, pas de l'or ------- .si-opphub-chip portait #8A7A52 sur fond dore : 1,45:1, le pire ratio du site. .si-mega-deplier-n etait a 2,40:1 dans le meme cas. Tous les etats sont traites : un lien change de couleur au survol et au focus, et le contraste doit tenir dans chacun. */ body.simandou-gold .si-opphub-chip, body.simandou-gold .si-opphub-chip:link, body.simandou-gold .si-opphub-chip:visited, body.simandou-gold .si-opphub-chip:hover, body.simandou-gold .si-opphub-chip:focus, body.simandou-gold .si-opphub-chip:focus-visible, body.simandou-gold .si-opphub-chip:active, body.simandou-gold .si-mega-deplier-n { color: var(--si-ink); /* 5,31:1 sur l'or */ } /* Le logo : "Info" en or sur creme rendait 2,55:1 a 25,6 px. C'est un GRAND texte, le seuil est donc 3:1 — il echouait quand meme. */ body.simandou-gold .si-info.si-info { color: var(--si-gold-text); /* 5,31:1 */ } /* "en preparation" : gris trop clair, 3,11:1 sur blanc. */ body.simandou-gold .si-mega-soon { color: var(--si-ink-soft); /* 6,66:1 sur blanc */ } /* ---------- Plancher de lisibilite ------------------------------------ Des categories a 10,5 px, des compteurs a 9,6 px. On releve le plancher des textes PORTEURS DE SENS, sans toucher aux titres. */ body.simandou-gold .si-opp-famille, body.simandou-gold .si-opp-lieu, body.simandou-gold .si-opphub-open-cta, body.simandou-gold .si-opphub-type-count, body.simandou-gold .si-opphub-chip, body.simandou-gold .si-count, body.simandou-gold .si-mega-groupe-titre, body.simandou-gold .si-mega-deplier-n, body.simandou-gold .si-mega-soon, body.simandou-gold .si-mega-bouton-txt, body.simandou-gold .si-footer-title, body.simandou-gold .si-footer-note, body.simandou-gold .si-ad-label { font-size: max(var(--si-fs-min), 1em); } /* ---------- Focus clavier reellement visible --------------------------- L'anneau existait (outline 2px solid var(--si-gold)) mais son or rendait 2,55:1, sous les 3:1 exiges. Le halo clair le garde visible sur les fonds sombres comme sur le creme. */ body.simandou-gold a:focus-visible, body.simandou-gold button:focus-visible, body.simandou-gold input:focus-visible, body.simandou-gold select:focus-visible, body.simandou-gold summary:focus-visible, body.simandou-gold [tabindex]:focus-visible { outline: 3px solid var(--si-focus); outline-offset: 2px; border-radius: 2px; box-shadow: 0 0 0 5px rgba(245, 240, 230, .9); } /* ---------- Zones tactiles -------------------------------------------- 65 cibles sur 121 tombaient sous 44 px en mobile. On etend la surface sensible sans grossir le texte ni deplacer la mise en page. */ @media (max-width: 900px) { body.simandou-gold .si-nav a, body.simandou-gold .si-submenu a, body.simandou-gold .si-site-footer a, body.simandou-gold .si-mega a { display: inline-flex; align-items: center; min-height: var(--si-tap); padding-block: 4px; } } /* ---------- Echeances : trois etats, trois lectures -------------------- Les trois etats existaient DEJA dans le balisage — bientot, ouverte, sans_echeance. Ils n'etaient simplement pas distinguables : meme taille de 10,24 px, memes tons proches. C'est l'information qui decide si le lecteur postule aujourd'hui. */ body.simandou-gold .si-opp-statut { font-size: var(--si-fs-badge); letter-spacing: .04em; padding: 4px 10px; border-radius: 3px; font-weight: 700; white-space: nowrap; } body.simandou-gold .si-opp-statut-bientot { background: #8A4B12; color: #FFF; /* 6,43:1 */ } body.simandou-gold .si-opp-statut-ouverte { /* L'or de texte sur ce fond dore translucide est retombe a 2,08:1 a la mesure : le calque eclaircit trop. L'encre tient sur les deux fonds — c'est le genre d'ecart qu'on ne voit qu'en mesurant. */ background: var(--si-gold-faint); color: var(--si-ink); border: 1px solid var(--si-gold); } body.simandou-gold .si-opp-statut-sans_echeance { background: transparent; color: var(--si-ink-soft); /* 5,80:1 */ border: 1px dashed var(--si-line-strong); font-weight: 600; } /* ---------- Grille Opportunites ---------------------------------------- Mesure du 15/08 : hauteurs de 228 a 292 px, 64 px d'ecart, rangees desalignees. La grille egalise ; le corps de la carte absorbe la difference, le pied reste cale en bas. */ body.simandou-gold .si-opphub-open-grid { display: grid; /* `min(320px, 100%)` et non `320px` : sur un ecran de 320 px, une colonne de 320 px plus le rembourrage rendait la page large de 344 et creait un debordement — mesure, puis corrigee. La colonne peut maintenant descendre sous 320 quand l'ecran l'exige. */ grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--si-space-3); align-items: stretch; } body.simandou-gold .si-opphub-open-card { display: flex; flex-direction: column; height: 100%; } body.simandou-gold .si-opphub-open-body { display: flex; flex-direction: column; flex: 1; } body.simandou-gold .si-opphub-open-cta { margin-top: auto; } /* Deux colonnes en tablette : a 768 px la page n'en affichait qu'une, avec des cartes de 705 px — la largeur etait perdue. */ @media (min-width: 700px) and (max-width: 1100px) { body.simandou-gold .si-opphub-open-grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- Le fond decide de la couleur du texte ---------------------- Assombrir un jeton aide sur le creme et NUIT sur l'or ou sur l'encre. Mesure apres la definition de --si-gold-dark : l'accueil restait a 16,1 % d'ecarts, tous sur des composants poses sur un aplat dore ou dans le pied de page sombre. Certains avaient meme empire — .si-count etait tombe de 2,90 a 2,08. Sur un aplat DORE (#B8924A), c'est l'encre qui porte : 5,31:1. */ /* `.si-cat` est remporte par `body.simandou-gold .si-lead-body .si-cat` [0,3,1] : il faut ce poids-la pour le rejoindre, pas davantage. */ body.simandou-gold .si-lead-body .si-cat, body.simandou-gold .si-carte .si-cat, body.simandou-gold .si-cat, body.simandou-gold .si-count, body.simandou-gold .si-section-more, body.simandou-gold .si-opp-note, body.simandou-gold .si-opphub-chip, body.simandou-gold .si-mega-deplier-n { color: var(--si-ink); } /* Dans le pied de page SOMBRE (#2A2418), c'est le creme et l'or clair qui portent. L'or de texte y tombait a 2,55:1, la note a 2,21:1. */ body.simandou-gold .si-site-footer .si-info, body.simandou-gold .si-site-footer .si-footer-title { color: var(--si-gold-light); /* 8,15:1 sur l'encre */ } body.simandou-gold .si-site-footer .si-footer-note, body.simandou-gold .si-site-footer a { color: var(--si-cream); /* 13,56:1 sur l'encre */ } /* Le bloc annonceur a lui aussi un aplat dore clair (#C6A15B). */ body.simandou-gold .si-ad-house p, body.simandou-gold .si-ad-house-cta, body.simandou-gold .si-ad-label { color: var(--si-ink); } /* Les numeros d'« A la Une » sont sur blanc : l'or y rendait 2,90:1. */ body.simandou-gold .si-aune-num, body.simandou-gold a.page-numbers, body.simandou-gold .page-numbers { color: var(--si-gold-dark); /* 6,03:1 sur blanc, 5,31 sur creme */ } /* LA PAGE COURANTE de la pagination. Lecture au protocole : la regle gagnante est `body.simandou-gold .page-numbers.current, ... :hover` [0,3,1] ligne 447 de simandou-layout.css, qui pose var(--si-gold) — 2,55:1 sur le creme. Mon `.page-numbers` [0,2,1] ne pouvait pas la rejoindre. On egale son poids, on ne le depasse pas. */ body.simandou-gold .page-numbers.current, body.simandou-gold .page-numbers:hover, body.simandou-gold .page-numbers:focus-visible { color: var(--si-gold-dark); /* 5,31:1 sur le creme */ } /* Le Guide de l'investisseur : ses descriptions sont sur un aplat dore, ou l'encre porte. */ body.simandou-gold .si-guidehub-bloc-desc, body.simandou-gold .si-guidehub-bloc-desc span { color: var(--si-ink); } /* LES PUCES « • » DU GUIDE — identifiees en servant la page en HTTP. `file://` faisait expirer l'inspection ; l'attente sur le selecteur `.si-guidehub-bloc`, elle, aboutit en une seconde. Ce sont cinq `` dans `div.si-guidehub-soon` : du texte REEL, pas un pseudo-element. Or #B8924A sur #F2EADC, 12,8 px, 2,43:1. Leur auteur les a marquees `aria-hidden` : ce sont des separateurs decoratifs, que WCAG 1.4.3 range dans les elements « incidents ». Le seuil ne s'y applique donc pas strictement — mais elles restent visibles a l'oeil, et une puce trop pale se lit mal. On la corrige. Le selecteur nomme l'attribut : il ne peut atteindre ni les numeros voisins, ni aucun autre `span` du Guide. C'est ce qui manquait a ma tentative precedente avec `.si-guidehub-bloc span`, trop large, qui avait fait passer le Guide de 5 a 6 ecarts. */ body.simandou-gold .si-guidehub-soon span[aria-hidden="true"] { color: var(--si-ink-soft); /* 5,3:1 sur #F2EADC */ } /* Les onze numeros du Guide portent DEUX fonds, poses sur l'element lui-meme : six sur l'or #B8924A (les etapes ouvertes), cinq sur une teinte claire rgba(42,36,24,.08). Mesure au protocole. J'ai d'abord cru a un fond sombre et pose du creme : les six sur or sont tombes a 2,55:1 et le Guide est passe de 5 a 16 ecarts. La sonde avait remonte l'arbre jusqu'a un ancetre sombre au lieu de lire le fond de l'element. L'encre, elle, tient sur les deux : 5,31:1 sur l'or, 12:1 sur la teinte claire. Une seule regle suffit. */ body.simandou-gold .si-guidehub-num { color: var(--si-ink); } /* ---------- Respect des preferences ------------------------------------ */ @media (prefers-reduced-motion: reduce) { body.simandou-gold * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---------- Monogramme de remplacement : texte lisible sur les quatre teintes --------------------------------------------------------------- Mesure sur les pixels reellement peints, accueil a 1440 px : le libelle de rubrique ressortait a 2,09 pour un seuil de 4,5. La cause tient en trois points cumules — le texte est creme, deux des quatre teintes sont des ors CLAIRS (#D4B978 et #B8924A), et `opacity` rabotait encore le peu de contraste restant. Teinter le texte en sombre ne suffit pas : la teinte `si-ph-0` va de #B8924A a #8A6B30, une plage ou le sombre passe a un bout (5,32) mais echoue a l'autre (3,10). Aucune couleur de texte unique ne franchit le seuil sur toute l'etendue des degrades. On pose donc un voile, exactement le procede deja employe par la carte de une. Le fond devient sombre quelle que soit la teinte, et le texte creme repasse partout : pire pixel mesure a 6,5 au lieu de 2,09. Ce correctif compte double depuis le sous-lot 1 : en basculant les illustrations repetees vers le monogramme, on a multiplie le nombre de tuiles concernees. Le defaut preexistait ; on l'avait rendu plus visible. */ body.simandou-gold .si-ph::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(18, 14, 7, 0.55); } /* Le monogramme et son libelle repassent AU-DESSUS du voile. */ body.simandou-gold .si-ph-mono, body.simandou-gold .si-ph-label { position: relative; z-index: 1; opacity: 1; /* etait .9 et .85 : autant de contraste perdu */ } /* Le lisere dore du bas reste net, au-dessus du voile lui aussi. */ body.simandou-gold .si-ph::after { z-index: 1; } /* ---------- Cibles tactiles : ce que la batterie a trouve hors du sous-lot 1 ------------------------------------------------------------- Le bloc « Zones tactiles » plus haut ne s'applique QUE sous 901 px. La batterie, elle, mesure aussi a 1440 px — et WCAG 2.2 (critere 2.5.8, niveau AA) demande 24x24 px A TOUTE LARGEUR, pas seulement en mobile. Cinquante-quatre cibles y tombaient sous le seuil sur l'accueil. */ /* Le hamburger mesurait 26 x 14 px : trois barres de 2 px et deux ecarts de 4. C'est la commande qui ouvre TOUTE la navigation en mobile, et c'etait la plus petite cible de la page. La surface passe a 44 px ; les barres, elles, gardent leur dessin de 26 px. */ body.simandou-gold .si-burger { width: var(--si-tap); min-height: var(--si-tap); justify-content: center; align-items: center; margin-inline-start: -9px; /* la surface grandit vers l'interieur : le dessin reste aligne sur la marge */ } body.simandou-gold .si-burger span { width: 26px; } /* Badge de rubrique (13 px de haut) et lien « Tous les articles X » (20 px). Ils gagnent la hauteur minimale sans que le texte grossisse : c'est la SURFACE sensible qu'on etend, pas la typographie. */ body.simandou-gold .si-cat, body.simandou-gold .si-section-more { display: inline-flex; align-items: center; min-height: 24px; } /* Liens du mega-menu en bureau : 19 px de haut. Sous 901 px ils sont deja a 44 px par la regle plus haut ; ici on couvre le reste. */ @media (min-width: 901px) { body.simandou-gold .si-mega a, body.simandou-gold .si-menu a { display: inline-flex; align-items: center; min-height: 24px; } } /* ---------- Bouton de recherche : 2,9 pour un seuil de 4,5 ------------- Du blanc sur #B8924A. Le fond passe a --si-gold-dark (#7A5F1F), deja defini plus haut dans cette feuille et deja employe par le thème : 6,03 au lieu de 2,9, sans introduire de couleur nouvelle. */ body.simandou-gold .si-searchform-btn { background: var(--si-gold-dark); } body.simandou-gold .si-searchform-btn:hover { background: #5E4916; /* un cran plus sombre encore : le survol doit rester distinct sans repasser sous le seuil */ } /* Liens du pied de page en bureau : vingt-trois de 20 px de haut, sur toutes les pages. La regle « Zones tactiles » plus haut les couvrait deja sous 901 px ; il manquait le reste. */ @media (min-width: 901px) { body.simandou-gold .si-site-footer a { display: inline-flex; align-items: center; min-height: 24px; } } /* Bouton de l'encart maison : 136 x 18 px, y compris a 320 px ou il est la seule chose a cliquer du bloc. */ body.simandou-gold .si-ad-house-cta { display: inline-flex; align-items: center; min-height: var(--si-tap); } /* Titres d'article et entrees de la liste « A la Une » : 21 px de haut quand l'intitule tient sur une seule ligne — le cas a 768 px. Une hauteur minimale suffit : un intitule qui passe a la ligne depasse deja 24 px et n'est donc pas touche, et la coupure du texte reste celle d'avant. */ body.simandou-gold .si-card .entry-title a, body.simandou-gold .si-lead-title a, body.simandou-gold .entry-title a, body.simandou-gold .si-aune-item > a { display: block; min-height: 24px; } /* ======================================================================= EN-TETE — moins haut, et collant seulement quand c'est tenable ----------------------------------------------------------------------- MESURE AVANT 130 px sur un ecran de 568 (22,9 %), 126 px a 390 et 768, 207 px sur un ecran de 900 en bureau (23 %). Decomposition a 1440 : 40 px de marges internes a l'en-tete, 42 px pour le filet dore — dont 40 de marges pour un trait de 2 px — 49 px de ligne du haut, 76 px de navigation. Le filet coutait donc autant que la navigation en pure respiration. ======================================================================= */ /* 1. Moins de hauteur, partout. Aucune cible tactile ne retrecit : on retire de la marge, pas de la surface sensible. */ body.simandou-gold .si-site-header { padding-block: var(--si-space-2) var(--si-space-1); /* 24/16 -> 16/8 */ } body.simandou-gold .si-gold-rule { margin-block: 10px 8px; /* 24/16 -> 10/8 */ } /* 2. Menu mobile deplie : il mesurait 584 px sur un ecran de 568 — il DEBORDAIT. `80vh` ignorait la ligne du haut, qui reste affichee au-dessus. On retranche sa hauteur reelle, publiee par le script ; `80vh` demeure le repli si le script n'a pas tourne. */ @media (max-width: 768px) { body.simandou-gold .si-nav-toggle-cb:checked ~ .si-header-top + .si-gold-rule + .si-nav, body.simandou-gold .si-nav-toggle-cb:checked ~ .si-nav { max-height: 80vh; max-height: calc(100dvh - var(--si-ligne-haut-h, 48px) - 4rem); } } /* 3. Collant — uniquement quand le script a pose la classe. Sans lui, l'en-tete reste immobile : un en-tete colle a pleine hauteur serait pire que pas de collant du tout. */ body.simandou-gold.si-entete-collee .si-site-header { position: sticky; top: 0; z-index: 50; background: var(--si-cream); box-shadow: 0 1px 0 rgba(42, 36, 24, .10); } /* 3 bis. En bureau, la ligne du haut se replie une fois colle : la marque et la recherche restent accessibles d'un retour en haut, et c'est la NAVIGATION qui suit le lecteur. Hauteur collee : 76 px sur 900, soit 8 % — au lieu de 23 %. */ @media (min-width: 901px) { body.simandou-gold.si-entete-collee .si-header-top, body.simandou-gold.si-entete-collee .si-gold-rule { display: none; } body.simandou-gold.si-entete-collee .si-site-header { padding-block: var(--si-space-1); } } /* 3 ter. En mobile, la ligne du haut EST la navigation — hamburger, marque, recherche. C'est elle qu'on garde ; le panneau deplie, lui, defile sous elle sans jamais depasser l'ecran. */ @media (max-width: 900px) { body.simandou-gold.si-entete-collee .si-gold-rule { display: none; } body.simandou-gold.si-entete-collee .si-site-header { padding-block: var(--si-space-1); } } /* 4. Une ancre suivie ne doit pas se glisser SOUS l'en-tete colle. La hauteur est celle mesuree par le script, pas une valeur devinee. */ body.simandou-gold [id] { scroll-margin-top: calc(var(--si-entete-h, 0px) + 8px); } /* Liens de la liste des annonces closes : 20 px de haut. Ils n'etaient pas couverts — la regle precedente visait les titres de cartes, or ceux-ci sont de simples dans un
  • . Le banc ne les avait pas montres : sa page « appels d'offres » ne portait aucune annonce close sur la premiere page, la production si. */ body.simandou-gold .si-opphub-expiree a, body.simandou-gold .si-opphub-expirees-liste a { display: inline-block; min-height: 24px; }