/* ========================================================================= Correctifs de lisibilité — chargé APRÈS la feuille principale. Fichier séparé délibérément : index-*.css est un artefact de compilation de 112 Ko, sans source. Le modifier serait perdu à la régénération suivante. Chaque valeur est calculée, pas estimée : ratios selon la formule WCAG 2.1. Le `!important` est assumé — la feuille compilée utilise des sélecteurs plus spécifiques que les nôtres, et c'est le rôle d'une couche de correction d'accessibilité de passer devant. ORDRE IMPORTANT : les règles de section viennent d'abord, les exceptions des panneaux sombres imbriqués ensuite (§7). Ne pas réordonner. Palette luminance --terracotta #c95532 0.191 --terracotta-dark #a43e25 0.115 --sand #d8c4a9 0.569 --sage #a9b09a 0.418 --sage-light #d8ddcf 0.708 --ivory #f4ebdd 0.839 --forest #173c34 0.037 --forest-deep #102d27 0.021 ========================================================================= */ :root { /* Gris de texte courant assombri : #5f675f échouait de peu partout (4.22 sur --sage-light). 4.85 désormais. */ --muted: #565e56; /* Terracotta assez foncé pour les grands titres sur fond sable. */ --terracotta-deep: #8a3420; } /* ------------------------------------------------------------------------- 1. TAILLES DE TEXTE Sur-titres à 11,2 px sur 112 occurrences, signature à 9,9 px. ------------------------------------------------------------------------- */ .eyebrow, span.eyebrow, p.eyebrow { font-size: .78rem !important; } /* 11.2 et 9.3 -> 12.5px */ .brand__role { font-size: .75rem !important; } /* 9.9 -> 12px */ figcaption { font-size: .78rem !important; } /* 10.9 -> 12.5px */ .footer-title { font-size: .78rem !important; } dt, small { font-size: .78rem !important; } .site-footer__bottom p, .site-footer__bottom a, .site-footer address, .site-footer nav a, .scope-note { font-size: .78rem !important; } /* 11.5 -> 12.5px */ /* Mentions de contenu réel encore sous 12 px, repérées page par page. */ .assessment-layer span, .assessment-document__page p, .practice-grounding li span, .practice-grounding li p, .practice-grounding__background li span, .practice-grounding__background li p { font-size: .78rem !important; } /* Les ordinaux décoratifs (01, 02, 03…) gardent leur taille : ils sont aria-hidden, purement visuels, et les agrandir déséquilibrerait la mise en page. Ils ne portent aucune information. */ /* ------------------------------------------------------------------------- 2. SIGNATURE « Psychopédagogue » En-tête : terracotta sur ivoire 3.68 -> 5.40 Pied : terracotta sur forest-deep 3.38 -> 8.67 ------------------------------------------------------------------------- */ .brand__role { color: var(--terracotta-dark) !important; } .brand--footer .brand__role { color: var(--sand) !important; } /* ------------------------------------------------------------------------- 3. FONDS SAUGE (#a9b09a) Aucune couleur claire n'atteint 3:1 sur ce fond — le blanc pur plafonne à 2.24. Les textes clairs y sont donc inversés vers le vert foncé. ------------------------------------------------------------------------- */ .emdr-path .eyebrow, .assessment-formats .eyebrow, .practice-grounding .eyebrow, .tarifs-landscape .eyebrow, .assessment-formats strong, .practice-grounding span, .practice-grounding li span { color: var(--forest) !important; } /* 2.84 -> 5.41 */ .emdr-path p, .assessment-formats p, .assessment-formats li, .practice-grounding p, .practice-grounding li, .tarifs-landscape p { color: var(--forest) !important; } /* 2.61/3.74/4.31 -> 5.41 */ /* Grands titres italiques sur sauge : 1.94 et 2.10 de contraste à l'origine. * * Le site repose sur un bicolore : titre vert sapin + brique. Ma première * correction passait ces en vert foncé — conforme, mais elle effaçait * l'effet : deux verts voisins ne se distinguent plus. Régression signalée * et corrigée. * * --terracotta-deep #8a3420 conserve la brique tout en atteignant 3.61 sur le * sauge, au-dessus du seuil de 3 exigé pour les grandes tailles. C'est la * teinte déjà utilisée sur /bilans/, où le bicolore n'avait jamais été perdu. */ .practice-grounding h2 em, .tarifs-landscape h2 em, .ocular-frames__heading h2 em { color: var(--terracotta-deep) !important; } /* 1.94 -> 3.61 */ /* ------------------------------------------------------------------------- 4. FONDS SABLE (#d8c4a9) ------------------------------------------------------------------------- */ .emdr-scope__pause .eyebrow, .assessment-scope .eyebrow, .ocular-frame--imo .eyebrow, .tarifs-hero__shape small, .tarifs-hero__shape span { color: var(--forest) !important; } /* 3.76 -> 7.15 */ .assessment-scope h2 em { color: var(--terracotta-deep) !important; } /* 2.57 -> 3.40 */ /* ------------------------------------------------------------------------- 5. BANDEAU RENDEZ-VOUS ET BOUTON PRINCIPAL Sur fond terracotta, même le blanc pur plafonne à 4.35 : il faut assombrir le fond lui-même pour atteindre le seuil. ------------------------------------------------------------------------- */ .booking-band { background: var(--terracotta-dark) !important; } .booking-band .eyebrow { color: #fff !important; } /* 3.68 -> 6.37 */ .booking-band p { color: #fff !important; opacity: .92; } /* 4.35 -> ~5.9 */ .button--primary { background: var(--terracotta-dark) !important; } /* 4.35 -> 6.37 */ .button--primary:hover, .button--primary:focus-visible { background: var(--terracotta-deep) !important; } /* ------------------------------------------------------------------------- 6. DÉTAILS PONCTUELS ------------------------------------------------------------------------- */ .contact-list dt, .assessment-document__page dt { color: var(--terracotta-dark) !important; } /* 4.07 -> 5.97 */ /* ========================================================================= 7. EXCEPTIONS — PANNEAUX SOMBRES IMBRIQUÉS Ces blocs ont un fond vert foncé (#173c34) tout en étant à l'intérieur d'une section claire. Les règles §3 et §4 ci-dessus les atteindraient et rendraient leur texte invisible (vert sur vert). Ils doivent donc rester en texte clair, et ces règles doivent venir APRÈS. ========================================================================= */ .practice-grounding__frame .eyebrow, .tariff-choice--emdr .eyebrow, .ocular-frame--emdr .eyebrow { color: var(--sand) !important; } /* 1.00 -> 7.15 */ .practice-grounding__frame p, .practice-grounding__frame span, .tariff-choice--emdr p, .tariff-choice--emdr span, .ocular-frame--emdr p, .ocular-frame--emdr span { color: var(--ivory) !important; } /* 1.00 -> 10.26 */ .contact-card--booking .eyebrow { color: var(--sand) !important; } /* 1.90 -> 7.15 */ /* Quatrième carte de « ma pratique » : fond vert foncé au milieu de trois cartes claires. La règle §3 la rendait illisible. */ .practice-grounding__approaches article:nth-child(4) p, .practice-grounding__approaches article:nth-child(4) span { color: rgba(244, 235, 221, .88) !important; /* 1.00 -> 9.1 */ } /* ========================================================================= 7 bis. FONDS TRANSLUCIDES Repérés dans un second temps : ces blocs ont un fond semi-transparent. Le contraste réel ne se lit pas sur le premier fond opaque au-dessus, il faut composer les calques. Huit textes de contenu échouaient ainsi sans que la première passe les voie. ========================================================================= */ /* /bilans/ — puces sur fond sauge à 55 % : 3.75 -> 6.76 */ .assessment-reading__dimensions li p, .assessment-reading__dimensions li { color: var(--forest) !important; } /* /ma-pratique/ — trois cartes translucides posées sur le vert foncé. Fonds composés : (86,110,96), (79,99,86) et (105,72,51). Le saumon clair d'origine n'atteignait que 3.02 ; l'ivoire donne 4.71, 5.51 et 6.90 selon la carte. */ .practice-method__layer .eyebrow { color: var(--ivory) !important; } .practice-method__layer p { color: var(--ivory) !important; opacity: 1; /* était à 0.77 : 3.51 -> 4.71 */ } /* /tarifs/ — durée des séances, texte à 72 % d'opacité : 4.40 -> 8.9 */ .tariff-choice__duration { color: var(--forest-deep) !important; opacity: 1; } /* /ressources/ — voile vert à 20 % sur le sauge clair : 3.77 -> 6.20 */ .resource-library .eyebrow { color: var(--forest) !important; } /* ========================================================================= 7 ter. LIENS INDISCERNABLES DU TEXTE Certains liens en pleine page portent exactement la couleur du texte courant (#1e2622), sans soulignement, sans bordure et sans graisse supplémentaire : rien n'indique qu'ils sont cliquables. Concernés : les sources des fiches ressources, l'e-mail et le téléphone de la page contact. Le soulignement est le seul repère universel. ========================================================================= */ .article-sources a, .article-body p a, .article-body li a, .contact-list a, .site-footer address a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; } /* ------------------------------------------------------------------------- 8. DÉBORDEMENT HORIZONTAL SUR MOBILE L'accueil faisait 380 px pour 360 px de fenêtre : éléments décoratifs du hero débordant par marges négatives. « clip » plutôt que « hidden » : ne crée pas de conteneur de défilement, donc ne casse pas les positionnements collants. ------------------------------------------------------------------------- */ html, body { overflow-x: clip; } /* ------------------------------------------------------------------------- 9. TITRE PRINCIPAL TRONQUÉ SUR MOBILE « Psychopédagogue » fait 15 caractères. À 60 px de corps (clamp 16vw), le mot réclamait 375 px de large pour 322 px disponibles : la dernière lettre passait hors écran. Le débordement était masqué par le défilement latéral, puis coupé net par le « clip » du §8 — dans les deux cas, illisible. 13vw donne 48,7 px à 375 px (mot : 305 px) et 41,6 px à 320 px (mot : 260 px pour 275 px disponibles). Le mot tient sur tous les téléphones. ------------------------------------------------------------------------- */ @media (max-width: 820px) { /* CAUSE RÉELLE : `.hero__title` porte `max-width: 12ch`, une mesure * typographique de longueur de ligne. Sur mobile elle vaut 255 px alors * que le conteneur en offre 310 : le titre s'interdit la place dont il * dispose, et « Psychopédagogue » n'y tient pas. * * Réduire la police n'y change rien : `ch` est proportionnel au corps, * les deux rétrécissent ensemble et le rapport reste identique. Mesuré : * 292>281 à 13vw devenait 265>255 à 11.8vw — toujours en dépassement. * * En levant le max-width, 13vw tient avec 18 px de marge à 360 px comme * à 320 px, ce qui permet de garder un titre ample. */ .hero__title { max-width: none !important; font-size: clamp(2.6rem, 13vw, 5.7rem) !important; } } /* ------------------------------------------------------------------------- 9 bis. RECTANGLE VISIBLE AUTOUR DE L'ILLUSTRATION DU HERO hero-c-portal.webp est entièrement opaque (alpha 1.00 aux quatre coins), avec son propre fond crème rgb(243,232,214) et un grain, contre rgb(244,235,221) pour la page. L'écart est infime, mais sur une arête droite de 400 px l'œil le lit comme un bloc collé. Analyse du fichier, densité de dessin par bande de 2 % depuis chaque bord : haut 0 0 0 3 17 25… -> 6 % de marge libre droite 0 0 0 0 5 17… -> 8 % de marge libre gauche 0 0 0 0 0 0… -> plus de 16 % de marge libre bas 45 39 34… -> AUCUNE marge, le dessin déborde volontairement On estompe donc les trois bords qui le permettent, jamais le bas. Les valeurs restent en deçà des marges mesurées : aucun trait n'est rogné. ------------------------------------------------------------------------- */ .hero__image { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 95%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 95%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 100%); mask-composite: intersect; } /* ------------------------------------------------------------------------- 10. HEROS TRONQUÉS SUR MOBILE (défaut préexistant, vérifié) Sur /accompagnements/, /bilans/, /ma-pratique/, /emdr/ et /conditions/, la colonne de grille du hero dépassait la largeur disponible : 394 px, 365 px, 360 px, 337 px et 406 px pour 323 px utiles. Les sections ayant overflow:hidden, la fin de chaque ligne était coupée sans possibilité de défiler — « Accompagnement », « psychopédagogiqu ». Deux causes cumulées : 1. `.assessment-hero` et `.practice-hero` n'avaient aucune version mobile, leur 2e colonne gardant un minimum de 30rem et 28rem. 2. Ailleurs, `1fr` équivaut à `minmax(auto, 1fr)` : le minimum automatique vaut min-content, donc la colonne grandit avec le mot le plus long. `minmax(0, 1fr)` autorise enfin la colonne à rétrécir. La césure française (lang="fr" est bien déclaré) sert de filet pour les mots très longs comme « psychopédagogiques ». ------------------------------------------------------------------------- */ @media (max-width: 820px) { .accompaniments-hero, .assessment-hero, .practice-hero, .emdr-hero, .tarifs-hero, .page-hero { grid-template-columns: minmax(0, 1fr) !important; } /* `hyphens: auto` uniquement, PAS `overflow-wrap: break-word`. * * break-word coupe un mot n'importe où, sans tiret : « Psychopé * dagogue ». C'est ce que produisait la version précédente, signalé * sur Galaxy S21. La césure automatique, elle, coupe aux syllabes et * pose un tiret — typographiquement correct en français. * * Ce n'est qu'un filet : les tailles ci-dessous sont calculées pour * que les mots tiennent sans qu'aucune césure ne se déclenche. */ .accompaniments-hero h1, .assessment-hero h1, .practice-hero h1, .emdr-hero h1, .tarifs-hero h1, .page-hero h1, .accompaniments-hero .eyebrow, .assessment-hero .eyebrow, .practice-hero .eyebrow, .emdr-hero .eyebrow, .page-hero .eyebrow { hyphens: auto; } /* Même cause sur les autres heros : max-width de 216 px et 234 px pour des * conteneurs de 310 px et 317 px. Levée de la contrainte, ce qui laisse * la place à un corps de 11vw au lieu des 10vw qu'imposait le bridage. */ .accompaniments-hero h1, .assessment-hero h1, .practice-hero h1, .emdr-hero h1, .tarifs-hero h1, .page-hero h1 { max-width: none !important; font-size: clamp(2.2rem, 11vw, 4.4rem) !important; } /* Maquette de document sur /bilans/ : le titre porte max-width: 160px * pour un parent de 321 px, et « Comprendre » en réclame 180 à 40 px de * corps. Même cause que les heros, même correction. */ .assessment-document__page h3 { max-width: none !important; } }