/*
Theme Name: Avosz Theme
Theme URI: https://exemple.com
Author: Toi
Author URI: Yannis TRIANTAPHYLIDES
Description: Thème à blocs (FSE) custom, léger et optimisé, codé à la main.
Version: 1.3.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: avosz-theme
License: GNU General Public License v2 or later
License URI: LICENSE.txt
*/
/*
Ce fichier ne contient volontairement pas de CSS de mise en page :
tout est géré via theme.json + styles inline des blocs.
Utilise ce fichier uniquement pour des ajustements ponctuels
que theme.json ne permet pas de faire (ex: hacks spécifiques, print styles).
*/
/* Exemple : masquer certains éléments à l'impression */
@media print {
.wp-block-navigation,
.wp-block-template-part.header {
display: none;
}
}
.avosz-icon {
display: block;
width: 36px;
height: 36px;
fill: currentColor;
}
.avosz-contact-icons,
.avosz-socials {
display: flex;
align-items: center;
gap: 12px;
}
.avosz-contact-link,
.avosz-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
}
.avosz-footer-no-decoration {
text-decoration: none;
color: var(--wp--preset--color--primary);
}
/* Le lien du pied de page écrase la couleur de l'élément "link" de
theme.json (voir "styles.elements.link", qui a lui son propre survol
primary -> contrast) - sans cette règle dédiée, ce survol ne
s'appliquait jamais ici, contrairement aux icônes de réseaux sociaux
(.avosz-social-link, elles n'écrasent pas la couleur du lien et héritent
donc du survol de theme.json normalement). Même couleur de survol que
partout ailleurs sur le site, via les variables CSS habituelles - donc
déjà correcte en mode nuit sans rien faire de plus (voir
html[data-theme="dark"] plus bas dans ce fichier, qui redéfinit déjà
--wp--preset--color--contrast). */
.avosz-footer-no-decoration:hover {
color: var(--wp--preset--color--contrast);
}
/* Survol des boutons (bloc natif Gutenberg, tous styles confondus - plein
"primary", contour "is-style-outline"...) : d'abord essayé via
theme.json ("styles.elements.button.:hover"), avec un changement de
couleur fixe (primary -> contrast, soit bleu -> noir) - problème
constaté : certains boutons vivent déjà sur un fond sombre (ex: le
bandeau "Découvrez le profil de Yannis" sur illustration de tableau
noir), où un survol qui vire au noir devient quasiment invisible. Et
theme.json ne s'applique de toute façon qu'à la couleur de fond/texte
déclarée par le style du bouton - un bouton "contour" (fond
transparent, juste une bordure, ex: "Appelez-moi") n'a pas de fond à
changer, donc ce survol ne s'y voyait jamais non plus.
filter: brightness() résout les deux à la fois : il assombrit LA
COULEUR DÉJÀ EN PLACE (quelle qu'elle soit - bleu, noir, transparent
avec juste du texte/une bordure) d'une fraction constante, au lieu de
basculer vers une couleur fixe - fonctionne donc uniformément sur tous
les fonds et tous les styles de bouton, sans rien avoir à connaître de
son contexte, y compris en mode nuit (les couleurs de base changent déjà
via les variables CSS, ce filtre s'applique simplement par-dessus,
quelles qu'elles soient à ce moment-là). */
.wp-block-button__link:hover {
filter: brightness(0.85);
}
/* Utilitaire générique : retire le style de lien par défaut (couleur du
thème + soulignement) pour un lien qui doit se fondre dans le texte
environnant. Utilisée aussi bien par le plugin AVOSZ (class-avosz-cgv.php)
que par du contenu de page brut ; elle vit ici, dans le thème, pour être
chargée sur toutes les pages plutôt que seulement celles qui affichent
un bloc particulier du plugin.
"a.avosz-no-decoration" (type + classe), PAS juste ".avosz-no-decoration" :
la couleur de lien générée par WordPress à partir de theme.json
(styles.elements.link) compile en ":root :where(a:not(.wp-element-button))" -
:where() a une spécificité NULLE par construction, donc seul :root compte,
ce qui donne à cette règle la MÊME spécificité qu'une simple classe. À
spécificité égale, c'est l'ordre d'apparition dans la feuille de style qui
tranche - imprévisible, et justement perdant ici selon l'ordre de
chargement réel. Ajouter le type "a" (spécificité 0,1,1) l'emporte de
façon fiable, quel que soit cet ordre - jamais besoin de !important pour
une simple question de spécificité mal calibrée. */
a.avosz-no-decoration {
text-decoration: none;
color: inherit;
}
/* Les bandeaux illustrés plein écran (hero, call-to-action, profil de Yannis)
s'enchaînent sans espace blanc entre eux, quel que soit le blockGap racine. */
.wp-block-cover.alignfull {
margin-top: 0;
margin-bottom: 0;
}
/* Page d'accueil : le header + la 1ère section (call-to-action) doivent faire
exactement 100vh, et non le header PLUS 100vh (ce qui dépassait l'écran).
--avosz-header-height est calculée en JS (assets/js/viewport-hero.js) à
partir de la hauteur réelle du header (variable selon les breakpoints,
la présence du téléphone, etc.). La valeur de repli ci-dessous sert
uniquement le temps que le JS s'exécute (ou si JS est désactivé). */
:root {
--avosz-header-height: 110px;
}
.avosz-cta-hero.wp-block-cover.alignfull {
min-height: calc(100vh - var(--avosz-header-height));
}
/*
* Transition douce entre le header (couleur --wp--preset--color--background,
* blanc en mode jour / sombre en mode nuit - voir parts/header.html, qui ne
* fixe aucune couleur de fond) et ce bandeau (toujours bleu marine fixe,
* volontairement indépendant du mode jour/nuit - voir plus bas dans ce
* fichier, .avosz-cta-hero__white-text) : sans cette transition, la
* frontière entre les deux ressort comme une coupure nette en mode jour
* (blanc pur contre bleu marine), quasiment invisible en mode nuit (les
* deux étant déjà sombres) - cette même variable CSS s'adapte donc
* automatiquement aux deux cas, sans rien coder en dur ici.
*
* Posé en ::after sur .wp-block-cover__background (déjà positionné en
* absolute, couvrant tout le bandeau, SOUS le texte - voir le balisage
* généré par patterns/call-to-action-homepage.php) plutôt que directement
* sur .avosz-cta-hero : hérite ainsi de son niveau d'empilement (toujours
* sous .wp-block-cover__inner-container, où vit le texte) sans avoir à
* deviner/dupliquer un z-index propre au bloc "Cover" natif de WordPress.
*/
.avosz-cta-hero .wp-block-cover__background::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 140px;
background: linear-gradient(to bottom, var(--wp--preset--color--background) 0%, transparent 100%);
pointer-events: none;
}
/* Le footer s'accole directement à ce qui le précède */
footer.wp-block-template-part {
margin-top: 0;
}
/* Logo dans le header, à gauche du titre du site. */
.avosz-site-logo {
height: 68px;
width: auto;
display: block;
margin-right: 14px;
}
/* Section d'appel à l'action de la page d'accueil : vignette photo/vidéo. */
.avosz-video-teaser {
position: relative;
border-radius: 12px;
overflow: hidden;
line-height: 0;
}
.avosz-video-teaser__image,
.avosz-video-teaser__video {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
.avosz-video-teaser--card {
background: #ffffff;
padding: 10px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.avosz-video-teaser--card .avosz-video-teaser__image,
.avosz-video-teaser--card .avosz-video-teaser__video {
border-radius: 6px;
}
/* Lecteur vidéo maison (remplace les contrôles natifs du navigateur).
Les contrôles se posent SUR la vidéo/l'image de fond, comme le texte de
la section d'appel à l'action (avosz-cta-hero) : ils restent donc
volontairement en blanc/noir fixe, indépendamment du mode jour/nuit du
site (--wp--preset--color--*), pour rester lisibles quel que soit le
thème choisi par le visiteur - cf. la même logique déjà appliquée au
texte de avosz-cta-hero un peu plus bas dans ce fichier. */
.avosz-video-player {
position: relative;
line-height: 0;
}
.avosz-video-player__video {
cursor: pointer;
}
.avosz-video-player__big-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border: 0;
padding: 0;
background: transparent;
color: #ffffff;
cursor: pointer;
opacity: 1;
transition: opacity 0.15s ease;
}
.avosz-video-player__big-play .avosz-video-player__icon {
width: 56px;
height: 56px;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}
.avosz-video-player.is-playing .avosz-video-player__big-play {
opacity: 0;
pointer-events: none;
}
.avosz-video-player__bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
border-radius: 0 0 6px 6px;
}
.avosz-video-player__btn {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 28px;
height: 28px;
border: 0;
padding: 0;
background: transparent;
color: #ffffff;
cursor: pointer;
}
.avosz-video-player__icon {
width: 20px;
height: 20px;
}
/* Bascule play / pause : une seule des deux icônes visible à la fois,
pilotée par la classe is-playing posée en JS sur le wrapper. */
.avosz-video-player__icon--pause,
.avosz-video-player.is-playing .avosz-video-player__icon--play {
display: none;
}
.avosz-video-player.is-playing .avosz-video-player__icon--pause {
display: block;
}
/* Bascule son actif / coupé, pilotée par la classe is-muted. */
.avosz-video-player__icon--sound-off,
.avosz-video-player.is-muted .avosz-video-player__icon--sound-on {
display: none;
}
.avosz-video-player.is-muted .avosz-video-player__icon--sound-off {
display: block;
}
/* Bascule icône plein écran, pilotée par la classe is-fullscreen. */
.avosz-video-player__icon--fs-exit,
.avosz-video-player.is-fullscreen .avosz-video-player__icon--fs-enter {
display: none;
}
.avosz-video-player.is-fullscreen .avosz-video-player__icon--fs-exit {
display: block;
}
.avosz-video-player__time {
flex: 0 0 auto;
font-size: 11px;
color: #ffffff;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.avosz-video-player__progress {
flex: 1 1 auto;
width: 100%;
height: 4px;
margin: 0 2px;
cursor: pointer;
accent-color: #ffffff;
}
/* Reset de l'apparence native du pour un rendu
cohérent d'un navigateur à l'autre (webkit/firefox gèrent des pseudo-
éléments différents pour la piste et le curseur). */
.avosz-video-player__progress {
-webkit-appearance: none;
appearance: none;
background: transparent;
}
.avosz-video-player__progress::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.35);
}
.avosz-video-player__progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
margin-top: -4px;
border-radius: 50%;
background: #ffffff;
}
.avosz-video-player__progress::-moz-range-track {
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.35);
}
.avosz-video-player__progress::-moz-range-thumb {
width: 12px;
height: 12px;
border: 0;
border-radius: 50%;
background: #ffffff;
}
/* En plein écran, le wrapper devient plein cadre : la vidéo doit occuper
toute la hauteur disponible plutôt que garder son ratio d'aspect calé
sur la largeur de la carte d'origine. */
.avosz-video-player:fullscreen {
display: flex;
align-items: center;
background: #000000;
}
.avosz-video-player:fullscreen .avosz-video-player__video {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Page "Vos cours in visu à domicile" : illustration du calendrier de
réservation des horaires. C'est une capture d'écran de petit format
(une vignette), pas une photo destinée à occuper toute la largeur du
contenu : on la limite explicitement en largeur, et "height: auto"
préserve son ratio d'aspect naturel (pas de déformation), quelle que
soit la résolution réelle du fichier source. */
.avosz-time-slot-image img {
width: 100%;
max-width: 400px;
height: auto;
display: block;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
/* C'est une capture d'écran à fond blanc : en mode nuit, sur le fond
sombre du site, elle "flashe" bien plus qu'en mode jour. On atténue
légèrement sa luminosité/contraste et on renforce l'ombre pour
l'intégrer plus doucement, sans toucher au fichier image lui-même. */
html[data-theme="dark"] .avosz-time-slot-image img {
filter: brightness(0.88) contrast(0.95);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
/* Hero de la page d'accueil : bouton bien visible même sans image de fond. */
.wp-block-cover .wp-block-button__link {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
/* Petite transition d'apparition pour la liste des chroniques,
affichée sur la page dédiée (slug : vos-chroniques). */
.avosz-chroniques {
animation: avosz-fade-in 0.4s ease;
}
@keyframes avosz-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Pagination de la page "Vos chroniques" : navigation entre les lots de 5
chroniques (précédent / numéros de page / suivant). */
.avosz-pagination {
flex-wrap: wrap;
row-gap: 0.75rem;
}
.avosz-pagination .wp-block-query-pagination-previous,
.avosz-pagination .wp-block-query-pagination-next {
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 999px;
background: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--foreground);
transition: background-color 0.2s ease, color 0.2s ease;
}
.avosz-pagination .wp-block-query-pagination-previous:hover,
.avosz-pagination .wp-block-query-pagination-next:hover {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--background);
}
.avosz-pagination .wp-block-query-pagination-numbers {
display: flex;
align-items: center;
gap: 0.35rem;
}
.avosz-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
height: 2.25rem;
padding: 0 0.5rem;
border-radius: 50%;
font-size: var(--wp--preset--font-size--small);
text-decoration: none;
color: var(--wp--preset--color--foreground);
}
.avosz-pagination a.page-numbers:hover {
background: var(--wp--preset--color--secondary);
}
.avosz-pagination .page-numbers.current {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--background);
font-weight: 700;
}
.avosz-pagination .page-numbers.dots {
color: var(--wp--preset--color--foreground);
opacity: 0.5;
}
/* Navigation "article précédent / suivant" en bas des articles (single.html) :
mêmes boutons pilule que la pagination de "Vos chroniques", pour une
cohérence visuelle entre les deux écrans de navigation. */
.avosz-post-nav {
column-gap: 0.75rem;
}
.avosz-post-nav .wp-block-post-navigation-link a {
display: inline-flex;
align-items: center;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 999px;
background: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--foreground);
transition: background-color 0.2s ease, color 0.2s ease;
}
.avosz-post-nav .wp-block-post-navigation-link a:hover {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--background);
}
/* Navigation entre les 3 pages "Qui suis-je" (profil, pédigree, centres
d'intérêt) : mêmes boutons pilule que la pagination / post-nav, pour
rester cohérent visuellement. Bloc dynamique (avosz-theme/qui-suis-je-nav),
ne s'affiche que sur ces 3 pages précises. */
.avosz-qui-suis-je-nav {
display: flex;
justify-content: center;
margin-bottom: var(--wp--preset--spacing--40);
}
.avosz-qui-suis-je-nav__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.avosz-qui-suis-je-nav__item a,
.avosz-qui-suis-je-nav__item span {
display: inline-flex;
align-items: center;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
text-decoration: none;
padding: 0.5rem 1.1rem;
border-radius: 999px;
background: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--foreground);
transition: background-color 0.2s ease, color 0.2s ease;
}
.avosz-qui-suis-je-nav__item a:hover {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--background);
}
.avosz-qui-suis-je-nav__item.is-current span {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--background);
cursor: default;
}
/* Navigation entre les pages "Vos solutions sur mesure" (cours in visu à
domicile, collégiens/lycéens/étudiants/adultes...). Mêmes boutons pilule
que la navigation "Qui suis-je", pour rester cohérent visuellement.
Bloc dynamique (avosz-theme/solutions-sur-mesure-nav), ne s'affiche que
sur ces pages précises. */
.avosz-solutions-sur-mesure-nav {
display: flex;
justify-content: center;
margin-bottom: var(--wp--preset--spacing--40);
}
.avosz-solutions-sur-mesure-nav__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.avosz-solutions-sur-mesure-nav__item a,
.avosz-solutions-sur-mesure-nav__item span {
display: inline-flex;
align-items: center;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
text-decoration: none;
padding: 0.5rem 1.1rem;
border-radius: 999px;
background: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--foreground);
transition: background-color 0.2s ease, color 0.2s ease;
}
.avosz-solutions-sur-mesure-nav__item a:hover {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--background);
}
.avosz-solutions-sur-mesure-nav__item.is-current span {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--background);
cursor: default;
}
/* ==========================================================================
Mode nuit.
Le thème n'utilise que des couleurs pilotées par les variables CSS de
theme.json (--wp--preset--color--*), donc on peut réécrire le mode nuit
simplement en surchargeant ces variables quand html[data-theme="dark"].
La bascule est gérée en JS (assets/js/dark-mode.js) : attribut posé au
plus tôt (avant même l'affichage) pour éviter tout flash, cf. le script
inline ajouté dans par functions.php.
Pas besoin de !important ici : html[data-theme="dark"] est déjà plus
spécifique que le simple :root utilisé par les styles globaux imprimés
par WordPress (même nombre de classes/attributs, mais un sélecteur de
type - html - en plus), donc la surcharge s'applique quel que soit
l'ordre de sortie des styles.
========================================================================== */
/* Indique au navigateur (Safari en particulier) quel jeu de couleurs est
effectivement affiché, pour qu'il adapte ses propres éléments natifs
(barre d'adresse, champs de formulaire, scrollbars) en conséquence.
data-theme vaut toujours "light" ou "dark" explicitement (jamais absent),
posé par le script inline dans avant le premier rendu. */
html {
color-scheme: light dark;
/* Couleur de bordure/séparateur générique, utilisée partout où un
simple contraste de fond (--wp--preset--color--secondary) ne suffit
pas à faire apparaître une bordure - typiquement quand secondary
sert AUSSI de fond juste à côté (lignes zébrées du tableau de
tarifs du bloc legal-informations, calendrier Flatpickr du bloc
registration-form...) : les deux confondues, une bordure de la
même teinte que le fond disparaît visuellement (cf. capture
d'écran signalée à l'origine de cette variable). */
--avosz-table-border-color: #d1d5db;
}
html[data-theme="light"] {
color-scheme: light;
}
html[data-theme="dark"] {
color-scheme: dark;
--wp--preset--color--background: #121212;
--wp--preset--color--foreground: #e8e8e8;
--wp--preset--color--primary: #7f9bff;
--wp--preset--color--secondary: #1f1f1f;
--wp--preset--color--contrast: #ffffff;
--avosz-table-border-color: #4a4a4a;
}
html[data-theme="dark"] body {
background-color: var(--wp--preset--color--background);
}
/* La vignette photo/vidéo de la CTA garde un cadre clair en mode jour
(voir plus haut) : en mode nuit on l'aligne sur la surface secondaire. */
html[data-theme="dark"] .avosz-video-teaser--card {
background: var(--wp--preset--color--secondary);
}
/* Le titre, le texte, la liste et le bouton "Appelez-moi" de la section
d'appel à l'action de la page d'accueil sont posés sur l'image sombre du
cover, pas sur le fond du site : il leur faut du blanc, dans tous les
cas, quel que soit le mode jour/nuit. Plutôt que de passer par
textColor:"background" (qui suit --wp--preset--color--background, donc
bascule vers du presque-noir en mode nuit) et de devoir ensuite forcer
une réécriture en mode nuit, cette classe fixe directement du blanc, une
bonne fois pour toutes : pas de variable, pas de bascule à gérer, pas de
conflit avec les classes utilitaires .has-*-color de WordPress (que
WordPress marque lui-même !important, ce qui aurait obligé à faire
pareil ici pour les surcharger).
Le bouton "Inscrivez-vous en ligne" n'est volontairement PAS concerné :
son fond (primary) change lui aussi en mode nuit, donc son contraste
reste correct sans intervention. */
.avosz-cta-hero__white-text {
color: #ffffff;
}
/* Bouton de bascule mode nuit (header) ET bouton maison (voir
patterns/home-button.php) : même apparence, réglée ici une seule fois
via un sélecteur groupé - mais teneur JS complètement différente. Le
bouton maison n'a JAMAIS la classe "avosz-theme-toggle" dans son
attribut class HTML (voir home-button.php) : lister les deux
sélecteurs ensemble ici ne change rien à ça, une règle CSS groupée
n'ajoute aucune classe aux éléments, elle applique juste le même style
à plusieurs sélecteurs - assets/js/dark-mode.js (qui cible
exclusivement .avosz-theme-toggle) ne voit donc jamais le bouton
maison. --secondary (fond du bouton) est volontairement très proche de
--background (fond de la page) dans les deux modes : sans bordure, le
bouton se fond presque dans le header et perd son affordance de
bouton. Même correctif que pour le footer et les témoignages :
--avosz-table-border-color, déjà pensée pour séparer deux surfaces
trop proches en teinte. */
.avosz-theme-toggle,
.avosz-home-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--avosz-table-border-color);
border-radius: 50%;
background: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--foreground);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.avosz-theme-toggle:hover,
.avosz-home-button:hover {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--background);
}
.avosz-theme-toggle__icon,
.avosz-home-button__icon {
width: 22px;
height: 22px;
}
/* Icône du bouton = CHOIX du visiteur (html[data-theme-mode], voir
inline_dark_mode_boot() dans functions.php), et non le rendu effectif
(data-theme) : en mode automatique, l'icône "automatique" (cercle à
moitié rempli) reste affichée que l'appareil soit en jour ou en nuit.
Soleil par défaut si l'attribut est absent (JavaScript désactivé). */
.avosz-theme-toggle__icon {
display: none;
}
html:not([data-theme-mode]) .avosz-theme-toggle__icon--sun,
html[data-theme-mode="light"] .avosz-theme-toggle__icon--sun,
html[data-theme-mode="dark"] .avosz-theme-toggle__icon--moon,
html[data-theme-mode="auto"] .avosz-theme-toggle__icon--auto {
display: block;
}
/* Section témoignages (page d'accueil, voir
patterns/testimonials-homepage.php). Le fond illustré est géré par le
bloc wp:cover lui-même (assets/images/testimonials-bg.svg) : rien à
ajouter ici pour ça. On utilise volontairement des balises HTML simples
(pas de blocs Gutenberg imbriqués) pour la ligne de cartes : mêmes
raisons que le lecteur vidéo de call-to-action-homepage.php - une mise
en page (chevauchement photo/carte) plus simple à obtenir en CSS "à la
main" qu'avec les blocs natifs. */
/* Le bas de testimonials-bg.svg est clair, et le fond du footer
(has-secondary-background-color) l'est aussi : sans séparation nette,
les deux se confondent en un seul bloc visuel. Même correctif que pour
les lignes zébrées du tableau de tarifs / le calendrier Flatpickr (voir
--avosz-table-border-color plus haut) : un simple contraste de couleur
ne suffit pas ici, il faut une vraie ligne de démarcation. Sélecteur sur
la balise