/* ==========================================================================
H2VL — habillage du site public
--------------------------------------------------------------------------
Feuille de SURCOUCHE : elle est chargée APRÈS styles.css et styles_menu.css
et ne modifie aucun des deux. Retirer la ligne du routeur suffit à
revenir exactement à l'apparence précédente — aucun fichier d'origine n'est
touché, le travail existant reste intact et comparable.
Public visé : personnes majoritairement déficientes visuelles. Chaque règle
ci-dessous répond à un défaut MESURÉ sur le site, pas à un goût personnel ;
les ratios de contraste indiqués ont été calculés, pas estimés.
⚠️ `!important` est employé uniquement là où la règle d'origine a une
spécificité supérieure et ne peut pas être battue autrement. Chaque emploi
est justifié en commentaire.
========================================================================== */
:root {
/* Le turquoise de l'association (#03989E) n'atteint que 3,51:1 sur blanc :
insuffisant pour du texte (4,5:1 exigé). Assombri à #02676B, il conserve
la teinte identitaire et monte à 6,66:1 — confortablement au-dessus du
minimum, ce qui compte pour un public malvoyant. */
--h2vl-accent: #02676B; /* 6,66:1 sur blanc */
--h2vl-accent-sombre: #01494C; /* survol / focus */
--h2vl-accent-pale: #EAF3F3; /* aplats discrets */
--h2vl-texte: #1A1A1A; /* 17,4:1 sur blanc */
--h2vl-texte-doux: #4A4A4A; /* 8,9:1 sur blanc */
--h2vl-bordure: #D8D8D8;
--h2vl-fond: #FFFFFF;
--h2vl-fond-page: #F5F6F6;
/* Fond du lien d'évitement : texte blanc dessus, il doit donc rester SOMBRE
dans les deux thèmes. `--h2vl-accent-sombre` ne convient pas : elle devient
claire en thème sombre (blanc sur cyan clair = illisible). */
--h2vl-evitement-fond: #01494C;
--h2vl-rayon: 6px;
--h2vl-espace: 1.5rem;
}
/* ==========================================================================
THÈME SOMBRE
--------------------------------------------------------------------------
Demandé par Cyril (retour du 8 août). Deux mécanismes complémentaires :
1. `prefers-color-scheme` — le site suit le réglage du système d'exploitation
**sans aucun JavaScript**. C'est le comportement par défaut, et le seul
disponible si les scripts sont désactivés.
2. `[data-theme]` posé sur par les boutons en bas de page, qui
l'emporte sur le réglage système quand l'utilisateur choisit lui-même.
Toutes les valeurs ci-dessous ont été calculées, pas estimées :
texte 12,4:1 · texte secondaire 7,3:1 · liens 8,6:1 · bordures 3,4:1
(WCAG 1.4.11) · bandeau de titre 9,6:1 · contour de focus 10,7:1.
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="clair"]) {
--h2vl-accent: #5FD0D6;
--h2vl-accent-sombre: #8FE3E7; /* survol/focus : plus CLAIR sur fond sombre */
--h2vl-accent-pale: #23383A;
--h2vl-texte: #E4E4E4;
--h2vl-texte-doux: #A9B2B4;
--h2vl-bordure: #6B7679;
--h2vl-fond: #1E2426;
--h2vl-fond-page: #15191A;
--h2vl-bandeau: #0A4D50;
--h2vl-evitement-fond: #0A4D50;
}
}
:root[data-theme="sombre"] {
--h2vl-accent: #5FD0D6;
--h2vl-accent-sombre: #8FE3E7;
--h2vl-accent-pale: #23383A;
--h2vl-texte: #E4E4E4;
--h2vl-texte-doux: #A9B2B4;
--h2vl-bordure: #6B7679;
--h2vl-fond: #1E2426;
--h2vl-fond-page: #15191A;
--h2vl-bandeau: #0A4D50;
--h2vl-evitement-fond: #0A4D50;
}
/* Le bandeau de titre a sa propre variable : en thème clair il utilise
l'accent, en sombre un turquoise plus profond sur lequel le blanc reste à
9,6:1 — l'accent clair du sombre aurait donné du blanc sur turquoise vif,
illisible. */
:root { --h2vl-bandeau: var(--h2vl-accent); }
/* --------------------------------------------------------------------------
1. Fond et typographie
--------------------------------------------------------------------------
Le logo était répété en mosaïque sur toute la page (`background: url(...)
repeat fixed`). Sur un motif répété, le texte perd en lisibilité et l'écran
paraît chargé : c'est l'élément qui datait le plus le site. Remplacé par un
fond uni très clair.
Quatre familles de police coexistaient sur une même page (BitstreamVeraSerif,
RobotoRegular, Times New Roman, Arial). Une seule pile système désormais :
rien à télécharger, rendu net à toutes les tailles, et surtout la même
police que le back-office.
-------------------------------------------------------------------------- */
body {
background: var(--h2vl-fond-page) !important; /* bat le raccourci `background:` d'origine */
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* 18 px. Était à 17 px ; relevé à la demande de Cyril (retour du 8 août).
Exprimé en rem : la taille suit le réglage de police du navigateur, un
`font-size` en px l'ignorerait et casserait le confort de lecture. */
font-size: 1.125rem;
line-height: 1.7; /* WCAG 1.4.12 : au moins 1,5 pour le corps de texte */
color: var(--h2vl-texte);
margin: 0;
padding: 0 1rem 3rem;
}
/* La pile de polices doit primer sur les familles posées élément par élément
dans styles.css (.record, .rubrique, #header…). */
#header, #header *, .records, .record, .rubrique, .records * {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
/* --------------------------------------------------------------------------
2. En-tête : suppression du positionnement fixe
--------------------------------------------------------------------------
Défaut le plus grave relevé. `position: fixed` + menu toujours déplié =
en-tête de 346 px, soit 48 % d'un écran de 720 px de haut, et le contenu
passait dessous. À 200 % de zoom il occupait la quasi-totalité de l'écran :
inacceptable pour le public visé.
En flux normal, l'en-tête se contente de la place qu'il lui faut, le contenu
vient dessous, et l'utilisateur peut le faire défiler quel que soit le zoom.
Cela rend aussi inutile le `margin-top: 80px` posé en compensation.
`margin-left: -400px; left: 50%` servait à centrer un bloc fixe ; `margin:
auto` fait la même chose sans dépendre d'une largeur codée en dur.
-------------------------------------------------------------------------- */
#header {
position: static !important;
margin: 0 auto 2rem !important;
left: auto !important;
top: auto !important;
width: 100% !important;
max-width: 60rem !important;
min-width: 0 !important; /* le min-width: 360px empêchait l'affichage à 320 px */
background: var(--h2vl-fond) !important;
border: 1px solid var(--h2vl-bordure) !important;
border-top: none !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
border-radius: 0 0 var(--h2vl-rayon) var(--h2vl-rayon);
padding: 0.5rem 0;
}
/* --------------------------------------------------------------------------
2 ter. Identité : logo + nom de l'association
--------------------------------------------------------------------------
Le logo avait disparu lorsque les fonds d'origine ont été neutralisés : il
était en `background-image` sur `#header`, et répété en mosaïque sur `body`.
Il revient en vraie image (voir le commentaire dans page.php), accompagné du
nom de l'association — qui n'apparaissait nulle part à l'écran auparavant,
seulement dans le titre de l'onglet. Un site d'association doit se nommer.
-------------------------------------------------------------------------- */
.h2vl-identite {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1rem 1.25rem 0.75rem;
border-bottom: 1px solid var(--h2vl-bordure);
flex-wrap: wrap; /* le nom passe sous le logo si la largeur manque (zoom) */
}
.h2vl-identite img {
/* 5 rem — agrandi à la demande de Cyril. En rem, donc le logo grandit
avec le texte au zoom au lieu de rester figé. */
width: 5rem;
height: auto;
flex-shrink: 0;
/* `logo.png` est un PNG 200×200 SANS canal alpha : son fond blanc est opaque.
Invisible sur la carte blanche du thème clair, il forme un carré blanc franc
dès que le fond devient sombre — thème sombre, et inversion des couleurs.
Plutôt que de le laisser paraître accidentel, on l'assume : petit cartouche
blanc arrondi, qui se lit comme un choix dans les deux thèmes.
Le fond est porté par l'IMAGE elle-même, donc il subit la compensation
d'inversion en même temps qu'elle et reste blanc en mode inversé.
Correctif propre le jour où on voudra : régénérer le logo en PNG transparent
et retirer ces trois lignes. */
background: #FFFFFF;
padding: 0.25rem;
border-radius: 8px;
}
.h2vl-nom {
margin: 0;
font-size: 1.45rem;
font-weight: 700;
line-height: 1.15;
color: var(--h2vl-accent-sombre);
letter-spacing: 0.01em;
}
.h2vl-baseline {
display: block;
font-size: 0.92rem;
font-weight: 400;
color: var(--h2vl-texte-doux);
letter-spacing: 0;
}
/* --------------------------------------------------------------------------
2 bis. Menu : disposition en colonnes
--------------------------------------------------------------------------
Constat visuel : les 19 liens étaient empilés verticalement, chacun dans un
pavé bleu #B2DAE7 de 56 px — soit 1104 px de menu avant d'atteindre la
moindre ligne de contenu. Le menu ne « présentait » pas le site, il le
remplaçait.
Les 6 rubriques sont donc disposées en colonnes, chacune coiffée de son
intitulé avec ses sous-pages dessous — la forme d'un plan de site. Tous les
liens restent visibles en permanence : l'acquis d'accessibilité du 4 août
(aucun menu à déplier) est conservé, seule la mise en page change.
`auto-fit` + `minmax` : les colonnes se replient d'elles-mêmes en une seule
quand la largeur diminue. Aucune media query à maintenir, et le comportement
au zoom est identique à celui sur téléphone.
-------------------------------------------------------------------------- */
.main-navigation .menu {
display: flex !important;
flex-wrap: wrap;
gap: 0.25rem 0.4rem;
align-items: center;
padding: 0.7rem 1rem !important;
margin: 0 !important;
list-style: none !important;
/* `box-sizing` est OBLIGATOIRE ici : la feuille d'origine le pose sur `html`
mais ne le propage pas aux descendants (pas de règle `* { box-sizing:
inherit }`). La liste est donc en `content-box` et son `width: 596px`
s'additionnait aux 20 px de padding de chaque côté → 637 px de large dans
un conteneur de 640, soit un débordement horizontal réintroduit au zoom.
Constaté en mesurant, après avoir mis la grille en place. */
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
}
.main-navigation .menu > .menu-item,
.main-navigation .sub-menu,
.main-navigation .sub-menu li { box-sizing: border-box; min-width: 0; }
.main-navigation .menu > .menu-item {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
/* L'aplat bleu sur CHAQUE lien était l'essentiel de la lourdeur visuelle.
Supprimé : le fond reste blanc, seul le survol et le focus se marquent. */
.main-navigation .menu .menu-item a {
background: transparent !important;
color: var(--h2vl-accent-sombre) !important;
/* ~40 px de haut. Le minimum AA (WCAG 2.5.8) est de 24 px ; les 44 px de la
règle AAA 2.5.5 coûteraient ~90 px de hauteur d'en-tête sur chaque page,
ce qui dessert l'objectif d'épure pour un gain surtout moteur — or le
public visé est d'abord déficient visuel. 40 px est le compromis retenu. */
padding: 0.55rem 0.5rem !important;
border: none !important;
border-radius: 4px;
display: block;
line-height: 1.45;
}
.main-navigation .menu .menu-item a:hover,
.main-navigation .menu .menu-item a:focus {
background: var(--h2vl-accent-pale) !important;
text-decoration: underline;
}
/* L'état actif était marqué en mauve #CF9DDD : couleur hors palette et peu
lisible. Remplacé par la teinte de marque, en aplat pâle. */
.main-navigation .menu .menu-item a:active,
.main-navigation .menu .menu-item-actif > a {
background: var(--h2vl-accent-pale) !important;
font-weight: 600;
}
.main-navigation .menu > .menu-item > a {
font-weight: 600;
font-size: 1.02rem;
padding: 0.55rem 0.85rem !important;
}
/* --------------------------------------------------------------------------
Les sous-pages ne figurent plus dans l'en-tête
--------------------------------------------------------------------------
Même en colonnes, les 19 liens représentaient 476 px d'en-tête sur CHAQUE
page (561 px avec le bloc d'identité). Seules les 6 rubriques restent
affichées : l'en-tête tombe sous 170 px.
Les 13 sous-pages ne sont pas perdues pour autant : chaque page de rubrique
les liste déjà (bloc `liste-sous-pages` du routeur, Lot 1) — vérifié page par
page avant d'appliquer ce changement. Le parcours devient
« rubrique → sous-page », soit un clic de plus, contre un en-tête trois fois
plus court sur l'ensemble du site.
Pour un lecteur d'écran, c'est aussi un gain : 6 liens à traverser au lieu
de 19, répétés sur chaque page.
`display: none` (et non un masquage visuel) est délibéré : les liens
sortent aussi de l'ordre de tabulation et de l'arborescence d'accessibilité.
Un lien invisible mais focalisable serait un piège au clavier.
-------------------------------------------------------------------------- */
.main-navigation .sub-menu { display: none !important; }
/* Deux triangles CSS (::before gris, ::after bleu clair) étaient dessinés en
haut à droite de la liste : c'était la flèche reliant l'ancien menu déroulant
à son déclencheur. Le menu étant désormais une simple barre, elle ne pointe
plus vers rien — repérée à l'œil sur une capture, puis identifiée en
inspectant les pseudo-éléments (un premier test les avait manqués : il
écartait les `content: ""`, qui est justement la façon de dessiner un
triangle en CSS). */
.main-navigation .menu::before,
.main-navigation .menu::after { display: none !important; content: none !important; }
/* La rubrique de la page courante est signalée, y compris quand on consulte
l'une de ses sous-pages : sans cela, on ne sait plus où l'on se trouve. */
.main-navigation .menu > .menu-item-actif > a,
.main-navigation .menu > .menu-item.menu-item-actif > a {
background: var(--h2vl-accent-pale) !important;
box-shadow: inset 0 -3px 0 var(--h2vl-accent);
}
/* --------------------------------------------------------------------------
Sous-pages listées sur la page de rubrique
--------------------------------------------------------------------------
Ce bloc devient le point de passage vers les sous-pages : il doit être
immédiatement lisible, pas une liste à puces perdue dans le texte.
-------------------------------------------------------------------------- */
.liste-sous-pages {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 0.75rem;
}
.liste-sous-pages li { margin: 0; }
.liste-sous-pages a {
display: block;
padding: 0.9rem 1.1rem;
background: var(--h2vl-fond);
border: 1px solid var(--h2vl-bordure);
border-left: 4px solid var(--h2vl-accent);
border-radius: var(--h2vl-rayon);
font-weight: 600;
text-decoration: none !important;
color: var(--h2vl-accent-sombre) !important;
}
.liste-sous-pages a:hover, .liste-sous-pages a:focus {
background: var(--h2vl-accent-pale);
text-decoration: underline !important;
}
/* --------------------------------------------------------------------------
3. Zone de contenu
--------------------------------------------------------------------------
`.records` était un aplat turquoise saturé (#03989E) entourant toute la page,
avec une bordure de 2 px de la même couleur. Beaucoup de couleur pour aucune
information. Remplacé par un fond blanc : le contenu ressort, la couleur est
réservée aux éléments qui la méritent (titres, liens).
`min-width: 360px` provoquait un défilement horizontal en dessous de 360 px
de large — un échec WCAG 1.4.10 au zoom élevé. Retiré.
-------------------------------------------------------------------------- */
.records {
width: 100% !important;
max-width: 60rem !important;
min-width: 0 !important;
margin: 0 auto !important; /* annule le margin-top: 80px de compensation */
padding: 0 !important;
background: transparent !important;
border: none !important;
}
/* Chaque bloc de contenu : carte sobre, sans dégradé rose ni bordure noire. */
.record {
background: var(--h2vl-fond) !important;
border: 1px solid var(--h2vl-bordure) !important;
border-radius: var(--h2vl-rayon);
padding: var(--h2vl-espace) !important;
margin-bottom: 1.25rem;
color: var(--h2vl-texte) !important;
}
/* La largeur de ligne conditionne la fatigue de lecture : au-delà de ~75
caractères, l'œil perd le début de la ligne suivante. */
.record p, .records p, .record li {
max-width: 72ch;
}
/* --------------------------------------------------------------------------
4. Titres
--------------------------------------------------------------------------
`.rubrique` affichait du blanc sur mauve #CF9DDD : 2,21:1, alors que 3:1 est
le minimum même pour du grand texte. L'auteur avait ajouté un `text-shadow`
dessinant un contour noir sur les 8 directions pour tenter de rattraper la
lisibilité — signe que le problème était perçu. Avec un fond réellement
contrasté (blanc sur #02676B = 7,7:1), ce contour n'a plus lieu d'être.
-------------------------------------------------------------------------- */
.rubrique, h1.rubrique {
background: var(--h2vl-bandeau) !important;
color: #FFFFFF !important;
text-shadow: none !important; /* le contour noir de compensation n'est plus utile */
margin: 0 0 1.5rem !important;
padding: 0.85rem 1.25rem !important;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
text-align: left;
border-radius: var(--h2vl-rayon);
}
.records h2 { font-size: 1.3rem; font-weight: 600; margin: 2rem 0 0.75rem; color: var(--h2vl-texte); }
.records h3 { font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--h2vl-texte); }
.records h4 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 0.5rem; color: var(--h2vl-texte) !important; }
/* --------------------------------------------------------------------------
5. Liens et focus clavier
--------------------------------------------------------------------------
Les liens du menu étaient en #03989E sur blanc : 3,51:1, sous le seuil de
4,5:1. Passés à #02676B (6,66:1).
Le soulignement est conservé : la couleur seule ne doit jamais être le seul
moyen de distinguer un lien (WCAG 1.4.1), ce qui compte pour les daltoniens.
Le focus visible est vital pour qui navigue au clavier — beaucoup
d'utilisateurs de lecteur d'écran n'utilisent pas la souris.
-------------------------------------------------------------------------- */
.records a, .record a, footer a {
color: var(--h2vl-accent) !important;
text-decoration: underline;
text-underline-offset: 2px;
}
.records a:hover, .record a:hover, footer a:hover { color: var(--h2vl-accent-sombre) !important; }
/* Les liens du menu emploient la teinte SOMBRE, pas l'accent standard.
Raison mesurée : sous 800 px de large (donc aussi à fort zoom), la feuille du
menu applique un fond bleu clair #B2DAE7 sur lequel l'accent #02676B ne donne
que 4,46:1 — il échoue d'un cheveu face au seuil de 4,5. #01494C y atteint
6,84:1, et reste à 10,2:1 sur le fond blanc du menu en grand écran. Une seule
couleur, correcte dans les deux configurations. */
#header a {
color: var(--h2vl-accent-sombre) !important;
text-decoration: none;
}
#header a:hover, #header a:focus { text-decoration: underline; }
/* `:focus` ET `:focus-visible` : `:focus-visible` seul ne se déclenche pas dans
tous les cas (focus donné par script, différences entre navigateurs). Pour un
public qui navigue largement au clavier, un contour parfois superflu à la
souris est un moindre mal qu'un focus invisible. */
/* `summary` est focalisable nativement (tabIndex 0) mais n'est ni un lien ni un
bouton : sans le nommer ici, il ne recevait que le contour fin du navigateur,
trop discret pour un public malvoyant. Défaut constaté en listant les règles
qui visent réellement l'élément, pas en le supposant couvert. */
a:focus, button:focus, input:focus, textarea:focus, select:focus, summary:focus, [tabindex]:focus,
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--h2vl-accent-sombre) !important;
outline-offset: 2px !important;
border-radius: 2px;
}
/* --------------------------------------------------------------------------
6. Lien d'évitement
--------------------------------------------------------------------------
Il était en blanc sur corail #FC6761 : 2,90:1 pour 4,5:1 exigé. Or c'est le
tout premier élément atteint au clavier : il doit être parfaitement lisible.
Passé en blanc sur #01494C (11,9:1).
Au passage, la largeur était de 340 px pour un décalage de -180 px : le bloc
était décentré de 10 px. Remplacé par une position simple, en unités
relatives pour ne pas casser au zoom.
⚠️ Piège rencontré en testant : le mécanisme d'origine empile deux décalages
(conteneur à `top: -100em`, lien ramené par `top: 100em` au focus). Se
contenter d'imposer `top` au lien le laisse hors écran — le lien devenait
inatteignable. Le lien est donc sorti de ce calcul et positionné en `fixed`,
c'est-à-dire par rapport à la fenêtre et non au conteneur hors écran.
-------------------------------------------------------------------------- */
.a11y-nav {
position: static !important;
top: auto !important;
left: auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
.a11y-nav a {
position: fixed !important;
top: -10em !important; /* hors écran tant que non focalisé */
left: 0.5rem !important;
width: auto !important;
margin-left: 0 !important;
z-index: 1000;
background-color: var(--h2vl-evitement-fond) !important;
color: #FFFFFF !important;
padding: 0.75rem 1.25rem;
border-radius: var(--h2vl-rayon);
text-align: left !important;
}
.a11y-nav a:focus { top: 0.5rem !important; }
/* --------------------------------------------------------------------------
7. Liste des sorties (bloc alimenté par H2VL Connect)
-------------------------------------------------------------------------- */
.liste-evenements { list-style: none; padding-left: 0; }
.liste-evenements .evenement {
background: var(--h2vl-fond);
border: 1px solid var(--h2vl-bordure);
border-left: 4px solid var(--h2vl-accent);
border-radius: var(--h2vl-rayon);
padding: 1.1rem 1.25rem;
margin-bottom: 1rem;
}
.evenement-date { font-weight: 600; color: var(--h2vl-texte); margin: 0.25rem 0; }
.evenement-lieu { color: var(--h2vl-texte-doux); margin: 0.25rem 0; }
.compte-rendu { border-top: 1px solid var(--h2vl-bordure); margin-top: 1rem; padding-top: 0.75rem; }
.compte-rendu-photos { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.compte-rendu-photos img { max-width: 100%; height: auto; border-radius: var(--h2vl-rayon); }
/* --------------------------------------------------------------------------
8. Images, tableaux, pied de page
-------------------------------------------------------------------------- */
.records img, .record img { max-width: 100%; height: auto; }
/* Le cadre blanc de 5 px et l'ombre portée de 12 px dataient ; une bordure
discrète suffit à détacher l'image du fond. */
.ombre_image {
border: 1px solid var(--h2vl-bordure) !important;
box-shadow: none !important;
border-radius: var(--h2vl-rayon);
margin-left: 0 !important;
}
/* Les tableaux doivent pouvoir défiler seuls plutôt que d'élargir la page. */
.records table { max-width: 100%; }
/* Pagination : « Page 1 sur 2 » était en #888 sur le fond de page, soit 3,27:1
pour 4,5 exigé. Passé à la teinte de texte secondaire (8,19:1). */
.pagination .details, ul.pagination li.details {
color: var(--h2vl-texte-doux) !important;
}
ul.pagination a { color: var(--h2vl-accent) !important; }
/* --------------------------------------------------------------------------
Neutralisation de `fichiers/css/pagination.css`
--------------------------------------------------------------------------
Cette vieille feuille impose aux liens de pagination un dégradé
`-webkit-gradient` blanc, une bordure #B6B6B6 et `font: 12px 'Tahoma'`.
Ces valeurs sont CODÉES EN DUR : elles ne suivent pas le thème.
Conséquence mesurée en thème sombre : fond quasi blanc peint par le dégradé,
texte en cyan clair (--h2vl-accent) → contraste de l'ordre de 1,8:1, soit des
numéros de page pratiquement invisibles.
⚠️ Le dégradé est un `background-IMAGE`. `getComputedStyle().backgroundColor`
renvoie donc `transparent` et un contrôle de contraste naïf remonte au fond
du parent : il conclut à tort que tout va bien. Il faut neutraliser
`background-image`, pas seulement `background-color`. */
.h2vl-pagination ul.pagination { font: inherit; overflow: visible; height: auto; }
.h2vl-pagination ul.pagination a,
.h2vl-pagination ul.pagination span.current {
background-image: none;
background-color: transparent;
/* Bordure TRANSPARENTE et non grise : une bordure #D8D8D8 sur fond blanc ne
donne que 1,32:1, sous le seuil de 3:1 exigé pour un contour d'élément
d'interface (WCAG 1.4.11). Ces liens n'ont pas besoin d'un cadre — ils sont
identifiés par leur texte et leur couleur ; seule la page courante en porte
un, en teinte d'accent. La bordure transparente est conservée pour que
toutes les cases gardent exactement la même taille. */
border: 2px solid transparent;
}
/* Centrage de la pagination — repris ici depuis le `style="margin:auto"` du
de mise en page qui l'entourait, maintenant remplacé par un