/*
Theme Name: Theme KIWI
Description: Theme enfant de Spring Plant
Author: Nicolas PICART
Template: spring-plant
Version: 0.1.0
*/
/* ==========================================================================
AFABEGO — corrections de lisibilité et d'accessibilité (2026-08-03)
Contexte : avant cette feuille, tout le texte du site échouait au niveau AA
du RGAA / WCAG, sauf les titres. Valeurs mesurées sur le thème d'origine :
corps #7d7d7d sur blanc ............ 4,12:1 (minimum requis : 4,5)
légendes et méta #959595 ........... 3,00:1
vert d'accent #6ea820 .............. 2,88:1 (échoue même en grand texte)
pied de page #7d7d7d sur #bdd6b1 ... 2,63:1
Les teintes ci-dessous sont dérivées du vert du logo (#8da13d, teinte 72°)
afin de rester dans l'identité de l'association.
Pour tout annuler : vider ce fichier à partir d'ici.
========================================================================== */
:root{
--afbg-encre-900:#1f1d1a; /* 16,8:1 sur blanc */
--afbg-encre-700:#3a3733; /* 11,8:1 — corps de texte */
--afbg-encre-400:#6b665e; /* 5,7:1 — méta, légendes */
--afbg-trait:#e0ddd6;
--afbg-vert-700:#627321; /* 5,3:1 — liens, boutons */
--afbg-vert-900:#3d4715; /* 10,0:1 — survol */
}
/* --- 1. Corps de texte -----------------------------------------------------
Open Sans 300 en gris moyen était le réglage le moins lisible possible pour
de la prose botanique. Passage en graisse normale, encre chaude, 17 px. */
body{
font-size:17px;
font-weight:400;
color:var(--afbg-encre-700);
line-height:1.65;
}
/* Le thème pose aussi la couleur du texte sur un conteneur .skin-light, plus
proche du texte que : par héritage, c'est lui qui gagnait. On reprend
son sélecteur à l'identique — notre feuille étant chargée après, elle
l'emporte sans avoir besoin de !important. */
.skin-light,
.gf-skin .skin-light,
.gf-skin .gf-skin .skin-light,
.gf-skin .gf-skin .gf-skin .skin-light{
color:var(--afbg-encre-700);
}
/* --- 2. Métadonnées, légendes de photos : 3,00:1 -> 5,7:1 ---------------- */
.gf-post-meta,
.gf-entry-meta-top,
.gf-post-cat-meta,
.wp-caption-text,
figcaption{
color:var(--afbg-encre-400);
}
/* --- 3. Liens de contenu : 2,88:1 -> 5,3:1 -------------------------------
ATTENTION : ne PAS viser largement (.gf-entry-content a). Beaucoup de liens
du thème sont blancs sur une photo ou sur un aplat sombre — titres des
cartes d'actualité de l'accueil, liens de vignettes, boutons du bandeau.
Les recolorer en vert les rend illisibles. On se limite donc aux vrais
blocs de prose : blocs de texte WPBakery, corps des articles et des fiches. */
.wpb_text_column a,
.single-post .gf-entry-content .wpb_text_column a,
.single-begonia .gf-entry-content .wpb_text_column a{
color:var(--afbg-vert-700);
}
.wpb_text_column a:hover,
.wpb_text_column a:focus{
color:var(--afbg-vert-900);
}
/* Pied de page : fond vert clair #bdd6b1, le vert-700 n'y donne que 3,4:1.
Le vert-900 monte à 6,4:1. */
.main-footer-wrapper a{
color:var(--afbg-vert-900);
}
.main-footer-wrapper a:hover,
.main-footer-wrapper a:focus{
color:var(--afbg-encre-900);
}
/* --- 4. Boutons : blanc sur vert, 2,88:1 -> 5,3:1 ------------------------ */
.btn-primary,
input[type="submit"],
button[type="submit"],
.wpcf7-submit{
background-color:var(--afbg-vert-700);
border-color:var(--afbg-vert-700);
color:#fff;
}
.btn-primary:hover, .btn-primary:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
button[type="submit"]:hover, button[type="submit"]:focus,
.wpcf7-submit:hover, .wpcf7-submit:focus{
background-color:var(--afbg-vert-900);
border-color:var(--afbg-vert-900);
color:#fff;
}
/* Boutons en contour (classe .btn-outline.btn-accent du thème) : le vert
d'accent n'y donnait que 2,88:1. On ne touche pas aux boutons pleins, dont
le texte est blanc sur l'accent et relève d'un autre réglage. */
.btn-outline.btn-accent{
color:var(--afbg-vert-700);
border-color:var(--afbg-vert-700);
}
.btn-outline.btn-accent:hover,
.btn-outline.btn-accent:focus{
background-color:var(--afbg-vert-700);
border-color:var(--afbg-vert-700);
color:#fff;
}
/* --- 5. Pied de page : 2,63:1 -> 8,1:1 -----------------------------------
Le fond #bdd6b1 est posé en style inline par WPBakery et n'est donc pas
modifiable ici ; on assombrit le texte, ce qui suffit à passer AA. */
.main-footer-wrapper,
.main-footer-wrapper p,
.main-footer-wrapper em,
.main-footer-wrapper strong{
color:var(--afbg-encre-900);
}
/* --- 6. Échelle de titres -------------------------------------------------
Le thème définit un h2 à 48 px et un h3 à 30 px qui ne sont utilisés nulle
part : le site saute de 40 px (h1) à 20 px (h4). Cette échelle resserrée
prépare le terrain — elle ne produira son plein effet que le jour où les
contenus utiliseront réellement des h2/h3. Le h4 est laissé quasi intact :
il sert à la fois de titre de section et de titre de carte. */
h2{ font-size:29px; font-weight:700; line-height:1.25; color:var(--afbg-encre-900); margin:2.2em 0 .6em; }
h3{ font-size:23px; font-weight:700; line-height:1.3; color:var(--afbg-encre-900); margin:1.8em 0 .5em; }
/* Playfair Display n'existe qu'en 400/700/900 chez Google : le 600 demandé par
le thème est un faux gras synthétisé qui écrase les déliés de la police. */
article.post-single .gf-post-title{ font-weight:400; }
/* --- 7. Longueur de ligne : ANNULE le 2026-08-03 -------------------------
La colonne de texte des fiches et des articles fait ~125 caracteres par
ligne, contre 60-75 recommandes. Un max-width de 42em corrigeait la lecture
mais laissait un large vide a droite : sans colonne laterale, l'oeil le lit
ca comme un defaut, pas comme un choix. Pour le faire proprement il faut
resserrer TOUT le conteneur (titre + texte + galeries) et non le seul bloc
de texte -- c'est une decision de mise en page, a prendre volontairement.
La cesure automatique est conservee : elle ne coute rien et ameliore le
texte justifie du theme. */
.single-post .gf-entry-content .wpb_text_column,
.single-begonia .gf-entry-content .wpb_text_column{
hyphens:auto;
-webkit-hyphens:auto;
}
/* --- 8. Focus clavier ----------------------------------------------------
Le thème pose "outline:none" à huit endroits et n'utilise jamais
:focus-visible : la navigation au clavier était totalement invisible.
:focus-visible ne s'affiche qu'au clavier, jamais au clic souris. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
outline:3px solid var(--afbg-vert-700);
outline-offset:2px;
border-radius:2px;
}
/* --- 9. Mobile -----------------------------------------------------------
Le titre des fiches restait à 36 px sous 480 px : les surcharges du thème
visent .post-default, or les fiches sont en .post-single. */
@media (max-width:575px){
article.post-single .gf-post-title{ font-size:26px; line-height:1.2; hyphens:auto; }
[class*="page-title-"]{ font-size:28px !important; }
h2{ font-size:24px; }
h3{ font-size:20px; }
}
/* --- 10. Note -----------------------------------------------------------
Le CSS personnalisé du site déclare .opacity_begonia alors que le HTML porte
.begonia_opacity : les deux mots sont inversés, la règle n'a jamais rien
fait. Volontairement NON corrigée ici : cette classe est portée par les
vignettes de la galerie, et appliquer l'opacité 0.2 prévue les rendrait
toutes quasi invisibles. À traiter en connaissance de cause, pas d'office.
========================================================================== */
/* --- 11. Fil d'Ariane (2026-08-03) --------------------------------------- */
.afbg-fil{
font-size:14px;
padding:14px 0 2px;
color:var(--afbg-encre-400);
}
.afbg-fil a{ color:var(--afbg-encre-400); text-decoration:none; }
.afbg-fil a:hover, .afbg-fil a:focus{ color:var(--afbg-vert-900); text-decoration:underline; }
.afbg-fil .breadcrumb_last{ color:var(--afbg-encre-700); font-weight:600; }
/* --- 12. Vignettes de la galerie : rendre les vraies images visibles ------
WPBakery masque l'![]()
et n'affiche qu'un fond CSS :
.vc-gitem-zone-height-mode-auto .vc_gitem-zone-img{display:none!important}
Or l'![]()
porte la MEME adresse que le fond et un attribut alt correct.
La reafficher ne coute donc aucun telechargement supplementaire, et rend les
312 photos visibles pour Google Images et pour les lecteurs d'ecran.
pointer-events:none pour que le lien de la vignette reste cliquable. */
.vc-gitem-zone-height-mode-auto .vc_gitem-zone-img{
display:block !important;
position:absolute;
top:0; left:0;
width:100%;
height:100%;
object-fit:cover;
pointer-events:none;
}
/* Le titre de la vignette doit rester au-dessus de l'image. */
.vc_gitem-zone .vc_gitem-zone-mini{ position:relative; z-index:2; }
/* --- 13. Index alphabetique des especes ---------------------------------- */
.afbg-index__groupe{ margin:0 0 3.5em; }
.afbg-index__titre{ border-bottom:2px solid var(--afbg-trait); padding-bottom:.3em; }
.afbg-index__compte{
font-size:.55em; font-weight:400; color:#fff; background:var(--afbg-vert-700);
border-radius:2em; padding:.25em .8em; vertical-align:middle; margin-left:.5em;
}
.afbg-index__alphabet{ margin:1.2em 0 2em; line-height:2.2; }
.afbg-index__alphabet a{
display:inline-block; min-width:2.1em; text-align:center; padding:.15em .3em;
border:1px solid var(--afbg-trait); margin:0 .2em .2em 0;
text-decoration:none; font-weight:700; color:var(--afbg-vert-700);
}
.afbg-index__alphabet a:hover, .afbg-index__alphabet a:focus{
background:var(--afbg-vert-700); color:#fff; border-color:var(--afbg-vert-700);
}
.afbg-index__lettre{ margin:0 0 1.8em; scroll-margin-top:20px; }
.afbg-index__lettre-titre{ margin:0 0 .4em; color:var(--afbg-vert-900); }
.afbg-index__liste{
list-style:none; margin:0; padding:0;
columns:3; column-gap:2em;
}
.afbg-index__liste li{ break-inside:avoid; margin:0 0 .3em; }
.afbg-index__liste a{ text-decoration:none; }
.afbg-index__liste a:hover, .afbg-index__liste a:focus{ text-decoration:underline; }
@media (max-width:991px){ .afbg-index__liste{ columns:2; } }
@media (max-width:575px){ .afbg-index__liste{ columns:1; } }