/*
* Le sélecteur de contexte : une seule feuille pour les quatre surfaces.
*
* Chargée à l'identique par le bloc Gutenberg, le widget Elementor et les modules
* Divi 4 et Divi 5. C'est ce qui fait qu'un habillage « Onglets » se ressemble
* partout : le HTML est le même, les classes sont les mêmes, le style aussi.
*
* TOUT PASSE PAR DES VARIABLES. Un intégrateur qui veut coller à sa charte
* redéfinit les quelques `--wpdae-saisons-*` ci-dessous plutôt que de réécrire
* des règles et de se battre avec la spécificité. Les contrôles de couleur, de
* typographie et d'espacement des constructeurs agissent, eux, sur la balise
* racine, et sont donc hérités sans que rien ici ne les contrarie.
*
* AUCUNE COULEUR EN DUR HORS DES VARIABLES, et `currentColor` partout où c'est
* possible : posé dans l'en-tête d'un thème sombre, le sélecteur doit suivre la
* couleur du texte de son voisinage, pas imposer du noir sur du noir.
*/
.wpdae-saisons-selecteur {
--wpdae-saisons-espace: 0.75em;
--wpdae-saisons-rayon: 999px;
--wpdae-saisons-epaisseur: 2px;
--wpdae-saisons-accent: currentColor;
--wpdae-saisons-fond-actif: currentColor;
/*
* La teinte de piste des habillages pleins. Assez visible pour que le
* contrôle se lise comme un contrôle même quand aucun choix n'est actif,
* assez discrète pour ne pas concurrencer le contenu. Repli opaque d'abord,
* `color-mix` ensuite pour les navigateurs qui savent la dériver du thème.
*/
--wpdae-saisons-piste: rgba(127, 127, 127, 0.1);
--wpdae-saisons-piste: color-mix(in srgb, currentColor 8%, transparent);
/* La graisse du libellé actif : un contrôle se lit à son poids autant qu'à
sa couleur, et c'est ce qui manquait le plus au rendu mobile. */
--wpdae-saisons-graisse: 600;
/*
* `Canvas` est le fond de la page tel que le navigateur le connaît : c'est ce
* qui permet au texte actif de rester lisible sur une pastille pleine, en
* thème clair comme en thème sombre, sans qu'on ait à deviner lequel. Un
* navigateur qui ne connaît pas ce mot-clé (avant Chrome 98 / Safari 15.4)
* ignore la déclaration ENTIÈRE, variable comprise, et le texte actif
* resterait de la couleur du fond sur un fond de la même couleur, donc
* invisible.
* Le blanc qui précède est donc le repli, pas une préférence.
*/
--wpdae-saisons-texte-actif: #fff;
--wpdae-saisons-texte-actif: Canvas;
--wpdae-saisons-attenuation: 0.65;
/*
* LA RACINE EST UN BLOC, ET C'EST LA LISTE QUI SE SERRE.
*
* Elle était `inline-block`, pour qu'elle épouse son contenu. Défaut réel :
* la mise en page « contrainte » de WordPress (`is-layout-constrained`)
* centre les enfants d'un contenu par `margin-left/right: auto`, ce qui ne
* produit RIEN sur un élément de niveau ligne. Le sélecteur sortait donc de
* la colonne et se collait au bord gauche de la page, pendant que les titres
* autour restaient centrés. Présent depuis la première version, invisible sur
* un thème sans colonne contrainte, et signalé par un œil humain avant que
* l'une de mes mesures ne le voie.
*
* Le serrage sur le contenu n'est pas perdu pour autant : il a été déplacé
* sur `__liste` et `__resume`. Ce qui ne veut pas dire que les thèmes les
* laissent tranquilles : voir la remise à zéro de la liste plus bas, un
* thème qui vise les `ul` de son contenu lui reprenait son retrait.
*/
display: block;
max-width: 100%;
}
/*
* LE RYTHME VERTICAL APPARTIENT À L'HÔTE, SAUF QUAND PERSONNE NE LE POSE.
*
* Mesuré le 08/09 sur les trois bancs, deux sélecteurs posés l'un sous l'autre :
* Divi 4 les sépare de 33px par la marge de ses modules, Divi 5 de 30px par le
* `gap` de sa colonne, Elementor de 20px par l'espacement de son kit. En
* Gutenberg sous un thème classique, personne ne pose rien et les deux
* sélecteurs se touchent : c'est la seule des cinq surfaces sans rythme, et
* c'était l'écart visible sur les captures.
*
* CE QUE LA RÈGLE VISE, EXACTEMENT. La classe du bloc `selecteur`, et elle
* seule. Les constructeurs ne la portent pas : Elementor et les deux modules
* Divi passent par le même rendu partagé, qui n'écrit que la racine commune. Le
* bloc de navigation, lui, porte une autre classe (`…-selecteur-navigation`) :
* il est écarté volontairement, un sélecteur dans un menu prenant le rythme du
* menu qui l'accueille.
*
* CE QUE LE GARDE-FOU CONTRÔLE, EXACTEMENT. Le PARENT DIRECT, et rien d'autre.
* Quand ce parent est un conteneur de mise en page de WordPress, c'est lui qui
* espace ses enfants et la règle se retire pour ne pas doubler la marge : c'est
* le cas du contenu d'un thème de blocs, et de tout groupe ou colonne. Un
* balisage qui glisserait une enveloppe sans classe de mise en page entre les
* deux ferait revenir la marge, qui s'ajouterait alors à l'espacement de
* l'ancêtre, posé lui par un `gap`. Le
* combinateur est donc un `>`, jamais un descendant : avec un descendant,
* `body` suffirait à satisfaire le `:not()` et le garde-fou ne servirait plus
* à rien.
*
* CE QUE LA RÈGLE PÈSE. Une classe, ni plus ni moins. Sans poids du tout elle
* perdait : mesuré sur le banc Divi 4, le thème remet à zéro la marge de toute
* `div`, ce qui suffit à battre un `:where()`. Le test d'appartenance reste
* dans un `:where()` pour qu'il ne compte pas. Une règle de thème un peu plus
* précise la remplace donc. Le contrôle d'espacement de l'intégrateur, lui,
* écrit un style en ligne sur cette même racine : il porte sur la même
* propriété, mais un style en ligne n'a pas de spécificité à opposer, il
* passe devant.
*
* `margin-block-end` plutôt que `margin-bottom` : c'est la propriété logique,
* celle qu'emploient les réglages d'espacement de WordPress. Sans effet en RTL,
* l'axe de bloc restant vertical ; en écriture verticale, la marge suit le sens
* du texte, ce qui est le comportement voulu.
*/
:where( :not( .is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid ) ) > .wp-block-wp-apidae-saisons-selecteur {
margin-block-end: 1.5rem;
}
.wpdae-saisons-selecteur__liste {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wpdae-saisons-espace);
/*
* LES QUATRE `!important` DE LA FEUILLE, ET ILS SONT TOUS ICI.
*
* Mesuré le 08/09 sur les deux bancs Divi, sur les six habillages et sur les
* deux surfaces : la liste recevait `padding: 0 0 23px 14px` au lieu de `0`
* ou de `0.3em`. La piste teintée des habillages en capsule se retrouvait
* donc avec 23px de vide sous les libellés et 14px devant le premier, ce qui
* décalait tout le contrôle dans sa propre pastille. Signalé sur capture, sur
* les trois pages du banc.
*
* Le voleur est une seule règle du thème Divi, qui pose d'un coup trois des
* quatre propriétés reprises ci-dessous, la marge étant reprise au même
* poids par précaution, d'autres thèmes espaçant leurs listes par elle :
*
* #left-area ul, .entry-content ul, .et-l--body ul, … {
* list-style-type: disc; padding: 0 0 23px 1em; line-height: 26px }
*
* Dans une liste à virgules, chaque sélecteur porte SA spécificité : contre
* `.entry-content ul`, qui vaut (0,1,1), nos règles d'habillage à trois
* classes passaient déjà devant. C'est la branche `#left-area ul` qui ne se
* bat pas : elle porte un identifiant, donc (1,0,1), et la spécificité se
* compare colonne par colonne. Aucun sélecteur écrit avec des classes ne
* passe devant un identifiant, pas même avec dix classes. `!important` est
* alors le seul recours qui existe.
*
* CE QU'IL COÛTE, PUISQU'IL COÛTE QUELQUE CHOSE. Une feuille d'intégration
* qui viserait cette liste pour en changer le retrait ne gagnera plus sans
* `!important` à son tour. Le contrôle d'espacement de l'éditeur, lui, n'est
* pas touché : il écrit sur la RACINE. Et le retrait de la piste reste
* réglable, par le jeton `--wpdae-saisons-retrait-piste`, posé sur la racine
* comme tous les autres jetons de cette feuille — c'est ce qui remplace la
* prise qu'on vient de retirer.
*
* Ce jeton n'est pas une élégance : marquer le retrait de chaque habillage
* `!important` à son tour aurait rouvert la même bataille entre nos propres
* règles. Corollaire à ne pas perdre : plus AUCUNE règle de cette feuille ne
* doit poser `padding` sur la liste, elle serait écrasée sans un mot.
*
* Le repli `, 0` du `var()` dit l'intention pour les habillages qui ne
* peignent rien. Il ne protège de rien d'autre : sans lui, un `var()` non
* résolu rendrait la déclaration invalide au calcul, et `padding` prendrait
* sa valeur initiale, qui est zéro elle aussi. Le thème ne récupérerait pas
* la main pour autant.
*
* `line-height: inherit` fait redescendre l'interligne de la racine, donc du
* voisinage et du contrôle de typographie de l'éditeur, plutôt que de la
* laisser au thème : 26px mesurés contre 23,8 pour le paragraphe d'à côté.
* C'est un choix, pas une simple restitution : sur un thème qui poserait son
* interligne sur `ul` sans identifiant, il l'emporte aussi. Un contrôle n'est
* pas de la prose, il suit la typographie de son bloc.
*
* `list-style` fait partie du même vol et se reprend de la même façon. Les
* ``, eux, restent à leur poids normal : aucune mesure ne montre de thème
* qui les vise. Le jour où l'un le fait, le recours est le même.
*/
margin: 0 !important;
padding: var(--wpdae-saisons-retrait-piste, 0) !important;
line-height: inherit !important;
list-style: none !important;
/*
* LA LISTE SE SERRE SUR SON CONTENU, ET C'EST ELLE QUI DOIT LE FAIRE.
*
* La racine l'a d'abord été, en `inline-block`, mais un thème a le dernier
* mot : mesuré sous Blocksy, un bloc de contenu reçoit la largeur de la
* colonne, et la racine s'étalait sur 1290px. Elle est depuis passée `block`,
* pour une autre raison : voir plus haut, les marges automatiques d'une
* colonne contrainte sont inertes sur une boîte en ligne. Sans conséquence pour
* les habillages qui ne peignent rien. En revanche la piste teintée de
* l'interrupteur devenait une barre grise d'un bord à l'autre de la page, et
* l'effet « contrôle segmenté » disparaissait.
*
* `fit-content` sur la LISTE règle le cas quelle que soit la largeur imposée
* plus haut. Elle a longtemps porté ici qu'aucun thème ne vise la liste :
* c'était faux, voir le bloc ci-dessus.
*/
width: fit-content;
max-width: 100%;
}
/*
* UNE CIBLE QU'UN DOIGT ATTEINT.
*
* Sur un pointeur grossier, un doigt plutôt qu'une souris, les recommandations
* d'accessibilité demandent 44px de haut. Les paddings en `em` du sélecteur
* suivent la taille de police du thème et peuvent tomber bien en dessous : la
* règle ne s'applique qu'au tactile, pour ne pas gonfler un sélecteur d'en-tête
* sur un écran de bureau où la souris vise juste.
*/
@media (pointer: coarse) {
.wpdae-saisons-selecteur__choix {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
.wpdae-saisons-selecteur__entree {
margin: 0;
padding: 0;
list-style: none;
}
.wpdae-saisons-selecteur__titre {
margin-inline-end: var(--wpdae-saisons-espace);
opacity: var(--wpdae-saisons-attenuation);
}
.wpdae-saisons-selecteur__choix {
display: inline-block;
color: inherit;
font: inherit;
text-decoration: none;
opacity: var(--wpdae-saisons-attenuation);
transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
/*
* CE QUE LE THÈME FAIT AUX LIENS DE SON CONTENU, ET QU'IL FAUT LUI REPRENDRE.
*
* `.wpdae-saisons-selecteur__choix` ci-dessus pose déjà `text-decoration: none`
* et `color: inherit`. Une seule classe, donc une spécificité de (0,1,0), que
* la première règle de contenu venue dépasse : mesuré le 08/09 sur
* `elementor.e-labo.io`, `.page-content a { text-decoration: underline }` de
* hello-elementor vaut (0,1,1) et gagne. Résultat, les six habillages sortaient
* soulignés dans une page Gutenberg et pas dans une page Elementor, où la règle
* du thème ne s'applique pas. Même habillage, même site, deux rendus.
*
* Cette règle-ci vaut (0,2,0) et reprend les deux propriétés. Elle ne reprend
* QUE celles-là : monter la spécificité du bloc entier ferait passer son
* `display: inline-block` devant l'`inline-flex` de la cible tactile, qui est
* déclarée plus haut, et la hauteur de 44px tomberait sans que rien ne le dise.
*
* Les habillages restent au-dessus : ils visent la racine ET le choix, donc
* (0,3,0), et le soulignement voulu de « Texte seul » tient toujours.
*/
.wpdae-saisons-selecteur .wpdae-saisons-selecteur__choix {
color: inherit;
text-decoration: none;
}
.wpdae-saisons-selecteur__choix:hover,
.wpdae-saisons-selecteur__choix:focus-visible {
opacity: 1;
}
.wpdae-saisons-selecteur__choix.est-actif {
opacity: 1;
font-weight: 600;
}
/* ------------------------------------------------------------------ Onglets */
/*
* Habillage par défaut. Il n'a pas de classe à lui : Gutenberg n'écrit rien sur
* la racine quand le style par défaut est sélectionné (`isDefault`), donc le
* repli DOIT être l'apparence attendue. `is-style-onglets` n'est qu'un alias,
* pour les surfaces qui, elles, posent toujours une classe.
*
* ⚠️ CE REPLI SE DÉSIGNE PAR EXCLUSION, PAS PAR ABSENCE DE CLASSE.
*
* La première version posait la règle sur `.wpdae-saisons-selecteur` tout court,
* en comptant sur la spécificité des habillages pour la couvrir. « Boutons » la
* couvrait bien, par son raccourci `border`. « Interrupteur » et « Texte seul »,
* eux, ne touchent pas à `border-block-end` : le SOULIGNEMENT D'ONGLET restait
* donc sous le choix actif, en plus de la pastille ou du soulignement propre à
* l'habillage choisi. Un défaut visible seulement à l'œil, et seulement sur ces
* deux habillages.
*
* Les trois exclusions sont nommées une à une plutôt que par `[class*=is-style-]` :
* un thème ou un constructeur pose ses propres `is-style-*`, et nous n'avons
* aucune raison de perdre notre habillage par défaut parce qu'il en a ajouté un.
*/
.wpdae-saisons-selecteur:not(.is-style-boutons):not(.is-style-interrupteur):not(.is-style-texte) .wpdae-saisons-selecteur__choix,
.wpdae-saisons-selecteur.is-style-onglets .wpdae-saisons-selecteur__choix {
padding-block: 0.35em;
border-block-end: var(--wpdae-saisons-epaisseur) solid transparent;
}
.wpdae-saisons-selecteur:not(.is-style-boutons):not(.is-style-interrupteur):not(.is-style-texte) .wpdae-saisons-selecteur__choix.est-actif,
.wpdae-saisons-selecteur.is-style-onglets .wpdae-saisons-selecteur__choix.est-actif {
border-block-end-color: var(--wpdae-saisons-accent);
font-weight: var(--wpdae-saisons-graisse);
}
/* ------------------------------------------------------------------ Boutons */
.wpdae-saisons-selecteur.is-style-boutons .wpdae-saisons-selecteur__choix {
padding: 0.55em 1.35em;
border: var(--wpdae-saisons-epaisseur) solid var(--wpdae-saisons-accent);
border-radius: var(--wpdae-saisons-rayon);
}
/*
* LE FOND EST SUR LE ``, LE TEXTE SUR LE ``, ET C'EST LA CORRECTION.
*
* Peindre `background-color: currentColor` sur le lien à côté d'un `color:`
* inversé donnait du blanc sur du blanc : `currentColor` se résout sur la
* couleur finale de l'élément qui l'emploie, donc sur l'inversion elle-même.
* Le ``, lui, garde la couleur du texte alentour.
*/
.wpdae-saisons-selecteur.is-style-boutons .wpdae-saisons-selecteur__entree.est-actif {
background-color: var(--wpdae-saisons-fond-actif);
border-radius: var(--wpdae-saisons-rayon);
}
.wpdae-saisons-selecteur.is-style-boutons .wpdae-saisons-selecteur__entree.est-actif .wpdae-saisons-selecteur__choix {
border-color: transparent;
color: var(--wpdae-saisons-texte-actif);
font-weight: var(--wpdae-saisons-graisse);
}
/* ------------------------------------------------------------- Interrupteur */
/*
* Un contrôle segmenté : les choix sont collés dans une même boîte, l'actif est
* une pastille pleine. `gap: 0` est ici volontaire : l'espacement entre les
* choix est la seule chose qui distingue cet habillage de « Boutons ».
*/
.wpdae-saisons-selecteur.is-style-interrupteur {
--wpdae-saisons-retrait-piste: 0.3em;
}
.wpdae-saisons-selecteur.is-style-interrupteur .wpdae-saisons-selecteur__liste {
gap: 0.25em;
/* LA PISTE EST TEINTÉE, PAS SEULEMENT CERNÉE. Un trait de 2px autour de
trois libellés nus ne se lit pas comme un contrôle segmenté ; un fond,
même léger, le fait immédiatement, et c'est ce qui distinguait le
prototype du premier rendu. Son retrait intérieur est un jeton posé sur la
racine, voir la remise à zéro de la liste plus haut. */
border: 1px solid;
border-color: rgba(127, 127, 127, 0.18);
border-color: color-mix(in srgb, currentColor 14%, transparent);
border-radius: var(--wpdae-saisons-rayon);
background-color: var(--wpdae-saisons-piste);
}
.wpdae-saisons-selecteur.is-style-interrupteur .wpdae-saisons-selecteur__entree.est-actif {
background-color: var(--wpdae-saisons-fond-actif);
border-radius: var(--wpdae-saisons-rayon);
}
.wpdae-saisons-selecteur.is-style-interrupteur .wpdae-saisons-selecteur__choix {
padding: 0.45em 1.25em;
border-radius: var(--wpdae-saisons-rayon);
}
.wpdae-saisons-selecteur.is-style-interrupteur .wpdae-saisons-selecteur__entree.est-actif .wpdae-saisons-selecteur__choix {
color: var(--wpdae-saisons-texte-actif);
font-weight: var(--wpdae-saisons-graisse);
}
/* ------------------------------------------------------------- Texte seul */
/*
* Rien qu'une suite de liens séparés. Le séparateur est décoratif, donc posé en
* `::before` sur un pseudo-élément et retiré de l'arbre d'accessibilité par
* construction : un lecteur d'écran ne lit pas un contenu généré par le CSS,
* ce qui est exactement ce qu'on veut d'une barre verticale.
*/
.wpdae-saisons-selecteur.is-style-texte .wpdae-saisons-selecteur__liste {
gap: 0;
}
.wpdae-saisons-selecteur.is-style-texte .wpdae-saisons-selecteur__entree + .wpdae-saisons-selecteur__entree::before {
content: "";
display: inline-block;
width: 1px;
height: 0.9em;
margin-inline: var(--wpdae-saisons-espace);
vertical-align: middle;
background-color: currentColor;
opacity: 0.35;
}
.wpdae-saisons-selecteur.is-style-texte .wpdae-saisons-selecteur__choix.est-actif {
text-decoration: underline;
text-underline-offset: 0.25em;
font-weight: var(--wpdae-saisons-graisse);
}
/* -------------------------------------------------------------- Déroulant */
/*
* `` natif : il s'ouvre et se referme sans JavaScript. Le panneau est
* en position absolue pour ne pas pousser l'en-tête vers le bas à l'ouverture,
* ce qui déplacerait tout le contenu de la page sous le doigt du visiteur.
*/
.wpdae-saisons-selecteur--deroulant {
position: relative;
}
.wpdae-saisons-selecteur__resume {
cursor: pointer;
list-style: none;
padding: 0.35em 0;
/* ON NE COMPTE PAS SUR LA LARGEUR DE LA RACINE : LE THÈME A LE DERNIER MOT.
`display: inline-block` y est déclaré, mais mesuré sous Blocksy la racine
reçoit quand même la largeur de la colonne (1290px). Le résumé, lui, n'est
visé par aucun thème. */
width: fit-content;
max-width: 100%;
}
.wpdae-saisons-selecteur__resume::-webkit-details-marker {
display: none;
}
.wpdae-saisons-selecteur__resume::after {
content: "";
display: inline-block;
width: 0.4em;
height: 0.4em;
margin-inline-start: 0.5em;
border-inline-end: var(--wpdae-saisons-epaisseur) solid currentColor;
border-block-end: var(--wpdae-saisons-epaisseur) solid currentColor;
transform: translateY(-0.15em) rotate(45deg);
}
.wpdae-saisons-selecteur--deroulant[open] .wpdae-saisons-selecteur__resume::after {
transform: translateY(0.1em) rotate(-135deg);
}
.wpdae-saisons-selecteur--deroulant {
--wpdae-saisons-retrait-piste: 0.4em 0;
}
.wpdae-saisons-selecteur--deroulant .wpdae-saisons-selecteur__liste {
position: absolute;
z-index: 10;
inset-inline-start: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
/*
* LE PANNEAU SE SERRE SUR SES LIBELLÉS, PAS SUR SON PARENT.
*
* `min-width: 100%` prenait la largeur de la racine, donc, sous un thème
* qui l'étale, un panneau d'un bord à l'autre de la page pour trois libellés.
* `max-content` ne dépend que du contenu ; le plafond garde le panneau dans
* l'écran d'un téléphone même si un intégrateur saisit un libellé bavard.
* `min-width` est retiré et non corrigé : tout pourcentage se serait mesuré
* sur cette même racine, donc aurait reconduit le défaut. Le résumé et le
* panneau se serrent maintenant sur le même contenu, ils s'alignent d'eux-mêmes.
*/
width: max-content;
max-width: min(20rem, 80vw);
border: 1px solid;
/* Même raison que `--wpdae-saisons-texte-actif` : le repli d'abord, la forme
* moderne ensuite. Sans lui, un navigateur sans `color-mix` rendrait le
* panneau déroulant sans bordure sur un fond de même couleur que la page. */
border-color: rgba(127, 127, 127, 0.4);
border-color: color-mix(in srgb, currentColor 25%, transparent);
border-radius: 6px;
background-color: #fff;
background-color: Canvas;
color: #000;
color: CanvasText;
}
.wpdae-saisons-selecteur--deroulant .wpdae-saisons-selecteur__choix {
display: block;
padding: 0.4em 1em;
border: 0;
white-space: nowrap;
}
/*
* En déroulant, l'habillage ne s'applique qu'au résumé : peindre des pastilles
* ou des onglets DANS un panneau déroulant donne un empilement illisible. Les
* bordures et fonds des habillages sont donc explicitement annulés ici. Le
* choix actif reste distingué par sa graisse, posée par la règle de base.
*/
.wpdae-saisons-selecteur--deroulant .wpdae-saisons-selecteur__choix.est-actif {
background-color: transparent;
color: inherit;
border-color: transparent;
}
.wpdae-saisons-selecteur--deroulant.is-style-interrupteur {
--wpdae-saisons-retrait-piste: 0.4em 0;
}
/* --------------------------------------------------------- Saisonnier -- */
/*
* L'HABILLAGE QUI DIT LA SAISON PLUTÔT QUE DE LA NOMMER.
*
* Repris du prototype de démonstration, où c'est lui qui emportait l'adhésion :
* un interrupteur segmenté, un glyphe par saison, et une teinte qui change avec
* elle. Trois différences avec les quatre autres habillages, et chacune a une
* raison :
*
* 1. LE GLYPHE VIENT DU CODE D'ASPECT, PAS DU LIBELLÉ. `data-contexte` porte
* `HIVER`, `ETE`… quoi que l'intégrateur ait saisi comme intitulé, et quelle
* que soit la langue servie par Polylang. Un habillage qui devinerait la
* saison d'après le texte tomberait au premier « Saison blanche ».
*
* 2. IL EST DÉCORATIF, DONC EN `::before`. Un lecteur d'écran ne lit pas un
* contenu généré par le CSS : le flocon ne s'ajoute pas au libellé annoncé,
* et « Hiver » reste « Hiver ». C'est exactement ce qu'on veut d'une icône
* qui ne fait que redire ce que le mot dit déjà.
*
* 3. LES DEUX SEULES COULEURS EN DUR DE TOUTE LA FEUILLE SONT ICI, et elles
* sont assumées : le froid et le chaud ne se dérivent pas de la couleur du
* texte alentour. Elles restent des variables, donc redéfinissables sans
* toucher à une seule règle.
*
* Les contextes qui ne sont ni l'hiver ni l'été (Groupes, Affaires, Accessibilité,
* et le contenu standard) n'ont ni glyphe ni teinte propre : ils retombent sur
* l'accent neutre. L'habillage reste donc utilisable sur un site qui expose
* autre chose que deux saisons, sans rien afficher d'absurde.
*/
.wpdae-saisons-selecteur.is-style-saisonnier,
.wpdae-saisons-selecteur.is-style-bascule {
--wpdae-saisons-froid: #1f4f7a;
--wpdae-saisons-chaud: #b8601a;
}
.wpdae-saisons-selecteur.is-style-saisonnier,
.wpdae-saisons-selecteur.is-style-bascule {
--wpdae-saisons-retrait-piste: 0.3em;
}
.wpdae-saisons-selecteur.is-style-saisonnier .wpdae-saisons-selecteur__liste,
.wpdae-saisons-selecteur.is-style-bascule .wpdae-saisons-selecteur__liste {
gap: 0.25em;
border: 1px solid;
border-color: rgba(127, 127, 127, 0.18);
border-color: color-mix(in srgb, currentColor 14%, transparent);
border-radius: var(--wpdae-saisons-rayon);
background-color: var(--wpdae-saisons-piste);
}
.wpdae-saisons-selecteur.is-style-saisonnier .wpdae-saisons-selecteur__choix,
.wpdae-saisons-selecteur.is-style-bascule .wpdae-saisons-selecteur__choix {
padding: 0.45em 1.15em;
border-radius: var(--wpdae-saisons-rayon);
}
/* Le glyphe. `content` seul suffit : la couleur suit celle du libellé, donc le
contraste de la pastille active vaut aussi pour lui. */
.wpdae-saisons-selecteur.is-style-saisonnier .wpdae-saisons-selecteur__choix::before,
.wpdae-saisons-selecteur.is-style-bascule .wpdae-saisons-selecteur__choix::before {
margin-inline-end: 0.45em;
font-size: 1.05em;
line-height: 1;
}
.wpdae-saisons-selecteur.is-style-saisonnier [data-contexte="HIVER"] .wpdae-saisons-selecteur__choix::before,
.wpdae-saisons-selecteur.is-style-bascule [data-contexte="HIVER"] .wpdae-saisons-selecteur__choix::before {
content: "\2744";
}
.wpdae-saisons-selecteur.is-style-saisonnier [data-contexte="ETE"] .wpdae-saisons-selecteur__choix::before,
.wpdae-saisons-selecteur.is-style-bascule [data-contexte="ETE"] .wpdae-saisons-selecteur__choix::before {
content: "\2600";
}
.wpdae-saisons-selecteur.is-style-saisonnier .wpdae-saisons-selecteur__entree.est-actif,
.wpdae-saisons-selecteur.is-style-bascule .wpdae-saisons-selecteur__entree.est-actif {
background-color: var(--wpdae-saisons-fond-actif);
border-radius: var(--wpdae-saisons-rayon);
}
.wpdae-saisons-selecteur.is-style-saisonnier .wpdae-saisons-selecteur__entree.est-actif[data-contexte="HIVER"],
.wpdae-saisons-selecteur.is-style-bascule .wpdae-saisons-selecteur__entree.est-actif[data-contexte="HIVER"] {
background-color: var(--wpdae-saisons-froid);
}
.wpdae-saisons-selecteur.is-style-saisonnier .wpdae-saisons-selecteur__entree.est-actif[data-contexte="ETE"],
.wpdae-saisons-selecteur.is-style-bascule .wpdae-saisons-selecteur__entree.est-actif[data-contexte="ETE"] {
background-color: var(--wpdae-saisons-chaud);
}
.wpdae-saisons-selecteur.is-style-saisonnier .wpdae-saisons-selecteur__entree.est-actif .wpdae-saisons-selecteur__choix,
.wpdae-saisons-selecteur.is-style-bascule .wpdae-saisons-selecteur__entree.est-actif .wpdae-saisons-selecteur__choix {
color: var(--wpdae-saisons-texte-actif);
font-weight: var(--wpdae-saisons-graisse);
}
/*
* AUCUNE ANIMATION JOUÉE À L'ARRIVÉE SUR LA PAGE, ET C'EST UN CHOIX.
*
* Le sélecteur NAVIGUE : ce sont de vrais liens, la page est rechargée, il n'y a
* donc aucun instant où l'ancien état et le nouveau coexistent dans un même
* document. Tout ce qu'une animation peut faire ici, c'est se jouer SEULE au
* premier rendu de la page suivante : la teinte qui se pose, la poignée qui
* glisse depuis le côté qu'elle vient de quitter.
*
* Cela avait été écrit, mesuré, puis retiré : le mouvement ne raconte pas la
* bascule, il la mime après coup, sur une page dont TOUT a déjà changé : la
* teinte de la piste, la position de la poignée, le contenu saisonnier. Le
* visiteur a le retour dont il a besoin sans qu'on ajoute une demi-seconde de
* mouvement pendant laquelle il regarde ailleurs.
*
* ⚠️ CE N'EST PAS UNE RÈGLE GÉNÉRALE MAIS UNE CONSÉQUENCE DU RECHARGEMENT. Le
* jour où la bascule se fera sans recharger, les deux états coexisteront enfin
* dans la page et une transition deviendra honnête. C'est à ce moment-là qu'il
* faudra l'écrire, pas avant.
*
* Ce qui reste ci-dessous est d'une autre nature : le survol et le focus se
* produisent bel et bien DANS la page, sur un élément qui ne bouge pas.
*/
/* Le survol, lui, se transforme bien dans la page. */
.wpdae-saisons-selecteur.is-style-saisonnier .wpdae-saisons-selecteur__entree,
.wpdae-saisons-selecteur.is-style-bascule .wpdae-saisons-selecteur__entree,
.wpdae-saisons-selecteur.is-style-saisonnier .wpdae-saisons-selecteur__choix,
.wpdae-saisons-selecteur.is-style-bascule .wpdae-saisons-selecteur__choix {
transition: background-color 0.28s ease, color 0.28s ease;
}
/*
* ET ON LA RETIRE POUR QUI L'A DEMANDÉ. `prefers-reduced-motion` n'est pas une
* préférence esthétique : pour une partie des visiteurs, le mouvement déclenche
* des troubles vestibulaires. Une transition de couleur est bénigne, mais la
* règle ne coûte rien et vaut pour tout ce qu'on ajouterait ensuite.
*/
@media (prefers-reduced-motion: reduce) {
.wpdae-saisons-selecteur.is-style-saisonnier .wpdae-saisons-selecteur__entree,
.wpdae-saisons-selecteur.is-style-bascule .wpdae-saisons-selecteur__entree,
.wpdae-saisons-selecteur.is-style-saisonnier .wpdae-saisons-selecteur__choix,
.wpdae-saisons-selecteur.is-style-bascule .wpdae-saisons-selecteur__choix {
transition: none;
}
}
/* ------------------------------------------------------------ Bascule -- */
/*
* LE BOUTON TOGGLE : UN SEUL CONTRÔLE, DEUX ÉTATS.
*
* Ce n'est plus une liste de choix mais un interrupteur physique : piste
* colorée par la saison en cours, poignée blanche qui change de côté, glyphe
* dans la poignée. Il ne dit pas « voici les saisons disponibles » mais « on est
* en été », et le clic bascule.
*
* TROIS DÉCISIONS QUI NE SE DEVINENT PAS EN LISANT LE CSS :
*
* 1. IL EXIGE L'HIVER ET L'ÉTÉ, ET RIEN D'AUTRE (`--deux-saisons`, posé par le
* serveur), ET QU'UNE DES DEUX SOIT ACTIVE. Les deux conditions ont été
* apprises par la mesure, la seconde sur une capture d'écran :
*
* • un interrupteur à trois positions n'existe pas, donc le contenu standard
* exposé ou un troisième aspect renvoient à la forme segmentée ;
* • et surtout, un interrupteur DOIT montrer un état. Sur une page servie en
* contexte standard, le défaut d'un site en persistance « page », aucune
* des deux saisons n'est active : le libellé et la poignée vivent sur
* l'entrée active, qui n'existe alors pas, et le bouton se réduisait à une
* pastille vide. Invisible sur toutes les pages tant que le visiteur
* n'avait pas choisi une saison, c'est-à-dire précisément quand le
* sélecteur sert le plus.
*
* Dans les deux cas l'habillage se replie sur la forme segmentée à glyphes,
* silencieusement : mieux vaut un contrôle qui marche autrement qu'un
* contrôle absent.
*
* 2. LE LIEN VISIBLE N'EST PAS CELUI QU'ON CLIQUE. Le libellé affiché est la
* saison EN COURS, c'est ce que montre un interrupteur, mais le clic doit
* mener à l'AUTRE. Le lien de l'autre saison est donc étiré sur tout le
* contrôle, son texte retiré de la vue mais gardé pour les lecteurs
* d'écran : ils entendent « Hiver », c'est-à-dire là où le lien mène, ce qui
* est la seule étiquette correcte pour un lien.
*
* 3. LA POIGNÉE SE POSE PAR LA CLASSE DE SAISON ACTIVE, jamais par la position
* dans la liste. L'ordre des contextes vient des réglages ; s'y fier ferait
* glisser la poignée du mauvais côté au premier intégrateur qui les
* réordonne.
*/
.wpdae-saisons-selecteur.is-style-bascule.wpdae-saisons-selecteur--deux-saisons:is(.wpdae-saisons-selecteur--actif-hiver, .wpdae-saisons-selecteur--actif-ete) {
--wpdae-saisons-froid: #1f6fb2;
--wpdae-saisons-chaud: #ef9a2e;
--wpdae-saisons-poignee: #fff;
--wpdae-saisons-hauteur: 2.9em;
}
.wpdae-saisons-selecteur.is-style-bascule.wpdae-saisons-selecteur--deux-saisons:is(.wpdae-saisons-selecteur--actif-hiver, .wpdae-saisons-selecteur--actif-ete) {
--wpdae-saisons-retrait-piste: 0;
}
.wpdae-saisons-selecteur.is-style-bascule.wpdae-saisons-selecteur--deux-saisons:is(.wpdae-saisons-selecteur--actif-hiver, .wpdae-saisons-selecteur--actif-ete) .wpdae-saisons-selecteur__liste {
position: relative;
display: block;
/*
* AUCUNE LARGEUR MINIMALE : LA PISTE SE SERRE SUR LA POIGNÉE ET LE LIBELLÉ.
*
* La première version imposait `min-width: 11em`. Avec un libellé court comme
* « Été », la piste restait à 176px pour un contenu qui en demandait une
* centaine, et comme le libellé est aligné du côté opposé à la poignée, tout
* l'excédent se voyait EN UN SEUL TROU de 82px entre le rond et le texte.
*
* Conséquence assumée : la largeur du bouton suit la longueur du libellé,
* donc « Hiver » donne une piste un peu plus large qu'« Été ». C'est le
* comportement d'un bouton, et c'est préférable à un vide au milieu.
*/
width: fit-content;
height: var(--wpdae-saisons-hauteur);
border: 0;
border-radius: var(--wpdae-saisons-rayon);
background-color: var(--wpdae-saisons-fond-actif);
}
.wpdae-saisons-selecteur.is-style-bascule.wpdae-saisons-selecteur--deux-saisons.wpdae-saisons-selecteur--actif-hiver .wpdae-saisons-selecteur__liste {
background-color: var(--wpdae-saisons-froid);
}
.wpdae-saisons-selecteur.is-style-bascule.wpdae-saisons-selecteur--deux-saisons.wpdae-saisons-selecteur--actif-ete .wpdae-saisons-selecteur__liste {
background-color: var(--wpdae-saisons-chaud);
}
/*
* UN SEUL DES DEUX `` RESTE DANS LE FLUX, ET C'EST L'ACTIF.
*
* Deux erreurs successives, toutes deux invisibles à la lecture et données par
* la mesure :
*
* - sans hauteur sur le ``, le `height: 100%` du lien n'avait rien à quoi
* se mesurer et le libellé se collait en haut de la piste (25px de ligne de
* texte pour 46px de bouton) ;
* - avec la hauteur mais les deux `` dans le flux, ils s'EMPILAIENT. Comme
* l'ordre des contextes vient des réglages, l'actif se retrouvait en second
* et son libellé s'affichait SOUS le bouton, en blanc sur le fond de la page.
*
* L'actif garde donc sa place. C'est lui qui donne au bouton sa largeur, un
* libellé long élargissant la piste plutôt que d'en déborder. L'inactif, qui
* n'est qu'une cible de clic, sort du flux.
*/
.wpdae-saisons-selecteur.is-style-bascule.wpdae-saisons-selecteur--deux-saisons:is(.wpdae-saisons-selecteur--actif-hiver, .wpdae-saisons-selecteur--actif-ete) .wpdae-saisons-selecteur__entree.est-actif {
position: static;
height: 100%;
background: none;
}
.wpdae-saisons-selecteur.is-style-bascule.wpdae-saisons-selecteur--deux-saisons:is(.wpdae-saisons-selecteur--actif-hiver, .wpdae-saisons-selecteur--actif-ete) .wpdae-saisons-selecteur__entree:not(.est-actif) {
position: absolute;
inset: 0;
background: none;
}
/* -------- Le libellé de la saison en cours, et sa poignée -------- */
.wpdae-saisons-selecteur.is-style-bascule.wpdae-saisons-selecteur--deux-saisons:is(.wpdae-saisons-selecteur--actif-hiver, .wpdae-saisons-selecteur--actif-ete) .wpdae-saisons-selecteur__entree.est-actif .wpdae-saisons-selecteur__choix {
display: flex;
align-items: center;
height: 100%;
/*
* LE RETRAIT PASSE PAR DEUX VARIABLES, ET NON PAR UN RACCOURCI `padding`.
*
* Mesuré : avec `padding: 0 1.3em` ici, le `padding-inline-start` que posent
* plus bas les deux règles de saison ne s'appliquait JAMAIS. Cette règle-ci
* pèse sept classes, les règles de saison six : la cascade tranche pour le
* raccourci, et le libellé revenait se poser SOUS la poignée (« ÉTÉ » de 20
* à 48px pour une poignée de 4 à 46px). Une variable n'a pas de concurrent :
* elle supprime l'arbitrage au lieu de le gagner de justesse par un ordre de
* déclaration ou une classe ajoutée pour faire nombre.
*/
padding-block: 0;
padding-inline-start: var(--wpdae-saisons-retrait-debut, 1.3em);
padding-inline-end: var(--wpdae-saisons-retrait-fin, 1.3em);
border: 0;
border-radius: var(--wpdae-saisons-rayon);
color: var(--wpdae-saisons-poignee);
font-weight: 700;
font-size: 0.95em;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.wpdae-saisons-selecteur.is-style-bascule.wpdae-saisons-selecteur--deux-saisons:is(.wpdae-saisons-selecteur--actif-hiver, .wpdae-saisons-selecteur--actif-ete) .wpdae-saisons-selecteur__entree.est-actif .wpdae-saisons-selecteur__choix::before {
position: absolute;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: calc(var(--wpdae-saisons-hauteur) - 0.5em);
height: calc(var(--wpdae-saisons-hauteur) - 0.5em);
margin: 0;
border-radius: 50%;
background-color: var(--wpdae-saisons-poignee);
font-size: 1.15em;
line-height: 1;
transform: translateY(-50%);
}
/* L'ÉTÉ TIENT LA GAUCHE, L'HIVER LA DROITE : la poignée est du côté de sa
saison, et le libellé occupe l'autre. C'est ce qui rend la bascule lisible
d'un coup d'œil, avant même d'avoir lu le mot. */
.wpdae-saisons-selecteur--actif-ete.is-style-bascule.wpdae-saisons-selecteur--deux-saisons .wpdae-saisons-selecteur__entree.est-actif .wpdae-saisons-selecteur__choix {
justify-content: flex-end;
/* La poignée occupe `hauteur - 0.5em` et se pose à 0.25em du bord : son bord
intérieur tombe donc à `hauteur - 0.25em`. Le retrait ajoute l'air qui
sépare le rond du mot. */
--wpdae-saisons-retrait-debut: calc(var(--wpdae-saisons-hauteur) + 0.7em);
}
.wpdae-saisons-selecteur--actif-ete.is-style-bascule.wpdae-saisons-selecteur--deux-saisons .wpdae-saisons-selecteur__entree.est-actif .wpdae-saisons-selecteur__choix::before {
content: "\2600";
inset-inline-start: 0.25em;
color: var(--wpdae-saisons-chaud);
}
.wpdae-saisons-selecteur--actif-hiver.is-style-bascule.wpdae-saisons-selecteur--deux-saisons .wpdae-saisons-selecteur__entree.est-actif .wpdae-saisons-selecteur__choix {
justify-content: flex-start;
--wpdae-saisons-retrait-fin: calc(var(--wpdae-saisons-hauteur) + 0.7em);
}
.wpdae-saisons-selecteur--actif-hiver.is-style-bascule.wpdae-saisons-selecteur--deux-saisons .wpdae-saisons-selecteur__entree.est-actif .wpdae-saisons-selecteur__choix::before {
content: "\2744";
inset-inline-end: 0.25em;
color: var(--wpdae-saisons-froid);
}
/* -------- La cible de clic : le lien de l'AUTRE saison -------- */
.wpdae-saisons-selecteur.is-style-bascule.wpdae-saisons-selecteur--deux-saisons:is(.wpdae-saisons-selecteur--actif-hiver, .wpdae-saisons-selecteur--actif-ete) .wpdae-saisons-selecteur__entree:not(.est-actif) .wpdae-saisons-selecteur__choix {
position: absolute;
z-index: 2;
inset: 0;
padding: 0;
border: 0;
border-radius: inherit;
/* Le texte sort de la vue sans sortir de l'arbre d'accessibilité : la boîte
garde sa taille, donc le lien reste cliquable partout, et un lecteur
d'écran annonce toujours la saison de destination. */
overflow: hidden;
color: transparent;
text-indent: 101%;
white-space: nowrap;
}
.wpdae-saisons-selecteur.is-style-bascule.wpdae-saisons-selecteur--deux-saisons:is(.wpdae-saisons-selecteur--actif-hiver, .wpdae-saisons-selecteur--actif-ete) .wpdae-saisons-selecteur__entree:not(.est-actif) .wpdae-saisons-selecteur__choix:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
/* ==========================================================================
LE SÉLECTEUR FLOTTANT
========================================================================== */
/* POURQUOI SORTIR DU FLUX. Posé dans un modèle de fiche, le sélecteur atterrit
quelque part entre la galerie et le descriptif. Il est visible au premier
écran, puis il disparaît dès qu'on commence à lire — et c'est précisément en
lisant les horaires ou les tarifs qu'on a envie de changer de saison. Flottant,
il reste sous la main pendant toute la lecture.
⚠️ `position: fixed` N'EST PAS TOUJOURS RELATIF À L'ÉCRAN. Un ancêtre qui porte
`transform`, `filter`, `perspective`, `backdrop-filter` ou `will-change` crée un
bloc conteneur, et le sélecteur s'y enferme — il suit alors le défilement. Les
thèmes à animation d'entrée en posent couramment sur le conteneur de contenu.
Si le sélecteur ne flotte pas, c'est là qu'il faut chercher, pas dans le
z-index : le poser plus haut dans l'arbre (en-tête, pied de page) le règle.
TOUT EST EN VARIABLES, ET CE N'EST PAS DE LA COQUETTERIE. Un coin d'écran est
déjà pris sur la plupart des sites : bouton de chat, retour en haut, bandeau
de consentement, et sur nos propres sites le carnet de voyage WP-Apidae, qui
occupe le bas droit. L'intégrateur doit pouvoir déplacer la capsule sans
réécrire la règle. */
.wpdae-saisons-selecteur.wpdae-saisons-selecteur--flottant {
position: fixed;
/* EN BAS À DROITE PAR DÉFAUT. C'est la place que le visiteur cherche pour un
contrôle qui suit la page, et le pouce l'atteint sur téléphone. Quand ce
coin est déjà occupé — un bouton de chat, un retour en haut, et sur nos
propres sites le carnet de voyage WP-Apidae —, on remonte la capsule au
lieu de la déplacer : `--wpdae-saisons-flottant-bas: 92px` l'empile
au-dessus du bouton en place, et la logique reste la même partout. */
top: var(--wpdae-saisons-flottant-haut, auto);
right: var(--wpdae-saisons-flottant-droite, 24px);
bottom: var(--wpdae-saisons-flottant-bas, 24px);
left: var(--wpdae-saisons-flottant-gauche, auto);
z-index: var(--wpdae-saisons-flottant-plan, 60);
translate: var(--wpdae-saisons-flottant-decalage, 0 0);
/* LA LARGEUR EST IMPOSÉE, ET LA DOUBLE CLASSE DU SÉLECTEUR N'EST PAS DU ZÈLE.
Le sélecteur est un bloc : la zone de contenu du thème donne à ses enfants
directs la largeur de la colonne, et il la garde en sortant du flux. Sans
cette ligne, la capsule s'étire sur toute la colonne et la bascule se colle
à son bord gauche.
⚠️ UNE SEULE CLASSE NE SUFFIT PAS, ET C'EST MESURÉ. WordPress et les thèmes
qui suivent sa mise en page écrivent la largeur ainsi :
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
Le `:where()` ne pèse rien : la règle vaut UNE classe, exactement comme
`--flottant` seul. À spécificité égale, c'est la feuille chargée en dernier
qui gagne — celle du thème. Mesuré le 2026-09-11 sur demo.wp-apidae.io :
Blocksy imposait `width: var(--theme-block-width)` et la capsule s'étalait
sur toute la colonne, la bascule plaquée à gauche. Deux classes passent
devant sans avoir à écrire `!important`.
Le symptôme n'apparaît que dans un conteneur `is-layout-constrained` : sur
une fiche, dont le contenu est en `is-layout-flow`, la règle du thème ne
s'applique pas. Un sélecteur juste sur une page et faux sur l'autre. */
width: max-content;
max-width: calc(100vw - 32px);
margin: 0;
padding: var(--wpdae-saisons-flottant-marge-interne, 8px);
border-radius: var(--wpdae-saisons-flottant-arrondi, 999px);
background: var(--wpdae-saisons-flottant-fond, rgba(255, 255, 255, 0.94));
box-shadow: var(--wpdae-saisons-flottant-ombre, 0 6px 24px rgba(0, 0, 0, 0.18));
}
/* LE DÉCALAGE EST UNE PROPRIÉTÉ À PART, ET C'EST VOULU. `translate:` plutôt que
`transform:` pour que l'intégrateur qui veut animer la capsule garde
`transform` libre. Il sert à centrer la capsule quand on la déplace en haut ou
en bas du milieu de l'écran : `--wpdae-saisons-flottant-gauche: 50%` avec
`--wpdae-saisons-flottant-decalage: -50% 0`. */