/* ==========================================================================
WS Bannière - Classique
Photo par appareil + voile, titre en trois parties décorables et animables,
bouton complet (survol, boucle, clic, aimant).
Tout piloté par des CSS vars posées sur .wsbn-classique par les
`selectors` Elementor.
RÈGLE DE SPÉCIFICITÉ
Les valeurs par défaut de cette feuille restent volontairement en
spécificité faible (une seule classe) : Elementor écrit ses règles avec
`.elementor-element-XXX .classe` (0-2-0) et doit toujours gagner. Seules
les propriétés qu'aucun réglage ne pilote peuvent monter plus haut.
========================================================================== */
.wsbn-classique{
--wsbn-c-fit:cover;
--wsbn-c-pos-x:50%;
--wsbn-c-pos-y:50%;
--wsbn-c-ov-1:rgba(11,29,63,.88);
--wsbn-c-ov-1-loc:0%;
--wsbn-c-ov-2:rgba(11,29,63,0);
--wsbn-c-ov-2-loc:100%;
--wsbn-c-ov-angle:100deg;
--wsbn-c-ov-opacity:1;
--wsbn-c-header:#D9A441;
--wsbn-c-title-color:#FFFFFF;
--wsbn-c-title-accent:#D9A441;
--wsbn-c-lede:rgba(255,255,255,.80);
--wsbn-c-badge-bg:rgba(255,255,255,.08);
--wsbn-c-badge-border:rgba(255,255,255,.32);
--wsbn-c-badge-dot:#3DDC84;
--wsbn-c-badge-grad-from:#D9A441;
--wsbn-c-badge-grad-to:#E9BE6E;
--wsbn-c-badge-shimmer:rgba(255,255,255,.25);
--wsbn-c-badge-shimmer-speed:3s;
--wsbn-c-btn-bg:#D9A441;
--wsbn-c-btn-bg-hover:#E9BE6E;
--wsbn-c-btn-text:#241705;
/* Bouton : durées et dosages. Posées ICI, sur le même élément que celui
visé par les contrôles Elementor : une variable redéfinie plus bas dans
l'arbre gagnerait sur la valeur héritée et le réglage ne servirait à
rien. */
--wsbn-c-hover-speed:.22s;
--wsbn-c-hov-speed:.3s;
--wsbn-c-hov-k:1;
--wsbn-c-fx-color:#ffffff;
--wsbn-c-fx-speed:.4s;
--wsbn-c-fx-loop-speed:4s;
--wsbn-c-fx-band:12;
--wsbn-c-fx-angle:105deg;
--wsbn-c-ap-speed:.45s;
--wsbn-c-ap-ease:cubic-bezier(0.16, 1, 0.3, 1);
--wsbn-c-perm-dur:4s;
--wsbn-c-perm-delay:0s;
--wsbn-c-perm-ease:cubic-bezier(0.16, 1, 0.3, 1);
--wsbn-c-swipe-duration:400ms;
--wsbn-c-gap:14px;
--wsbn-c-body-w:640px;
--wsbn-c-minh:520px;
--wsbn-c-radius:0px;
--wsbn-c-pad-t:60px;
--wsbn-c-pad-r:60px;
--wsbn-c-pad-b:60px;
--wsbn-c-pad-l:60px;
position:relative;
isolation:isolate;
overflow:hidden;
min-height:var(--wsbn-c-minh);
border-radius:var(--wsbn-c-radius);
padding:60px;
display:flex;
align-items:center;
font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
-webkit-font-smoothing:antialiased;
}
.wsbn-classique,
.wsbn-classique *,
.wsbn-classique *::before,
.wsbn-classique *::after{box-sizing:border-box}
.wsbn-classique img{display:block;max-width:100%}
/* --------------------------------------------------------------------------
PHOTO + VOILE
-------------------------------------------------------------------------- */
.wsbn-classique__media{position:absolute;inset:0;z-index:0}
.wsbn-classique__media img{
width:100%;height:100%;
object-fit:var(--wsbn-c-fit);
object-position:var(--wsbn-c-pos-x) var(--wsbn-c-pos-y);
}
.wsbn-classique__scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
opacity:var(--wsbn-c-ov-opacity);
background:linear-gradient(var(--wsbn-c-ov-angle),
var(--wsbn-c-ov-1) var(--wsbn-c-ov-1-loc),
var(--wsbn-c-ov-2) var(--wsbn-c-ov-2-loc));
}
/* Radial plutot que lineaire : meme 2 couleurs/emplacements, un angle n'a
pas de sens ici donc il est ignore (le control cote panneau se cache
deja tout seul quand ce type est choisi). */
.wsbn-classique--radial .wsbn-classique__scrim{
background:radial-gradient(circle,
var(--wsbn-c-ov-1) var(--wsbn-c-ov-1-loc),
var(--wsbn-c-ov-2) var(--wsbn-c-ov-2-loc));
}
/* Pas de degrade : teinte plate, une seule couleur. */
.wsbn-classique--flat .wsbn-classique__scrim{background:var(--wsbn-c-ov-1)}
/* --------------------------------------------------------------------------
CORPS
-------------------------------------------------------------------------- */
.wsbn-classique__body{
position:relative;z-index:2;
width:100%;
max-width:var(--wsbn-c-body-w);
display:flex;flex-direction:column;
gap:var(--wsbn-c-gap);
/* LE PLACEMENT DU BLOC, et pourquoi il ne passe ni par une marge ni par
`transform`.
Une marge ne sait pas etre negative : elle ne pourrait pas remonter le
bloc au-dessus de sa place, ce qui est la moitie de ce qu'on demande.
`transform` est deja pris par les effets d'entree, qui effaceraient le
decalage des qu'ils demarrent. La propriete individuelle `translate`
s'ajoute a `transform` au lieu de le remplacer : les deux coexistent.
A zero, le bloc reste exactement ou la mise en page l'a mis. */
translate:var(--wsbn-c-body-x, 0) var(--wsbn-c-body-y, 0);
}
.wsbn-classique__eyebrow{
margin:0;
font-size:12px;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;
color:var(--wsbn-c-header);
}
.wsbn-classique__badge{
display:inline-flex;align-items:center;gap:8px;
align-self:flex-start;
padding:8px 16px 8px 14px;
border-radius:999px;
border:1px solid var(--wsbn-c-badge-border);
background:var(--wsbn-c-badge-bg);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
color:var(--wsbn-c-header);
text-decoration:none;
font-size:12.5px;font-weight:600;
transition:background .2s ease, transform .2s ease;
}
.wsbn-classique__badge:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.wsbn-classique__badge-dot{
position:relative;
width:7px;height:7px;border-radius:50%;
background:var(--wsbn-c-badge-dot);
flex:none;
}
/* LE HALO DU POINT EST UN CALQUE SEPARE, PAS LE POINT LUI-MEME.
Faire grossir le point pousserait le texte a cote a chaque battement :
il est dans le flux. Le `::after` est en absolu, donc hors flux, et son
`transform` est compose par la carte graphique au lieu de refaire la
mise en page a chaque image.
La duree porte son repli : le jour ou un curseur la pilotera, il n'y
aura qu'a ecrire la variable. */
.wsbn-classique__badge--dot-pulse .wsbn-classique__badge-dot::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:var(--wsbn-c-badge-dot);
animation:wsbn-c-badge-dot-pulse var(--wsbn-c-badge-dot-speed, 1.9s) ease-out infinite;
}
@keyframes wsbn-c-badge-dot-pulse{
0% { transform:scale(1); opacity:.65; }
100% { transform:scale(2.8); opacity:0; }
}
/* --- Variantes (portees du widget "Pill annonce/badge") --- */
.wsbn-classique__badge--pill{border-radius:999px}
.wsbn-classique__badge--outline{background:transparent}
.wsbn-classique__badge--filled{background:var(--wsbn-c-badge-bg);border-color:transparent}
.wsbn-classique__badge--gradient-border{
background:
linear-gradient(var(--wsbn-c-badge-bg), var(--wsbn-c-badge-bg)) padding-box,
linear-gradient(135deg, var(--wsbn-c-badge-grad-from), var(--wsbn-c-badge-grad-to)) border-box;
border:1px solid transparent;
}
/* --- Reflet qui traverse --- */
.wsbn-classique__badge--shimmer{position:relative;overflow:hidden;isolation:isolate}
.wsbn-classique__badge--shimmer::before{
content:"";
position:absolute;top:0;left:0;width:60%;height:100%;
background:linear-gradient(110deg,
transparent 0%, transparent 30%,
var(--wsbn-c-badge-shimmer) 50%,
transparent 70%, transparent 100%);
animation:wsbn-c-badge-shimmer var(--wsbn-c-badge-shimmer-speed) linear infinite;
pointer-events:none;
}
@keyframes wsbn-c-badge-shimmer{
from{transform:translateX(-166.67%)}
to {transform:translateX(333.33%)}
}
/* --- Lift au survol --- */
.wsbn-classique__badge--lift:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px -8px rgba(0,0,0,.25);
}
/* --- Mouvements au survol --- */
.wsbn-classique__badge--hov-pulse:hover{animation:wsbn-c-badge-pulse .6s ease-in-out}
.wsbn-classique__badge--hov-wiggle:hover{animation:wsbn-c-badge-wiggle .4s ease-in-out}
.wsbn-classique__badge--hov-shake-x:hover{animation:wsbn-c-badge-shake-x .5s ease-in-out}
.wsbn-classique__badge--hov-bounce:hover{animation:wsbn-c-badge-bounce .6s ease-in-out}
.wsbn-classique__badge--hov-tilt:hover{transform:perspective(500px) rotateX(8deg) rotateY(-4deg) translateY(-2px)}
.wsbn-classique__badge--hov-expand:hover{transform:scale(1.06)}
.wsbn-classique__badge--hov-glow-ring:hover{box-shadow:0 0 0 4px rgba(217,164,65,.18), 0 0 20px rgba(217,164,65,.35)}
.wsbn-classique__badge--hov-icon-spin:hover .wsbn-classique__badge-dot{animation:wsbn-c-badge-spin .6s linear}
.wsbn-classique__badge--hov-icon-bounce:hover .wsbn-classique__badge-dot{animation:wsbn-c-badge-bounce .5s ease-in-out}
@keyframes wsbn-c-badge-pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.05)}}
@keyframes wsbn-c-badge-wiggle{0%,100%{transform:rotate(0)} 25%{transform:rotate(-2deg)} 75%{transform:rotate(2deg)}}
@keyframes wsbn-c-badge-shake-x{
0%,100%{transform:translateX(0)}
20%{transform:translateX(-4px)} 40%{transform:translateX(4px)}
60%{transform:translateX(-3px)} 80%{transform:translateX(3px)}
}
@keyframes wsbn-c-badge-bounce{0%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} 60%{transform:translateY(-2px)}}
@keyframes wsbn-c-badge-spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
/* --- Animations continues (sans survol) --- */
/* Chaque effet lit la MEME variable mais garde SON repli : le curseur du
panneau part sans valeur, donc tant qu'on n'y touche pas chacun tourne a
sa cadence d'origine. Le repli se met la ou la variable est lue. */
.wsbn-classique__badge--idle-float{animation:wsbn-c-badge-float var(--wsbn-c-badge-idle-speed, 3.4s) ease-in-out infinite}
.wsbn-classique__badge--idle-float-rot{animation:wsbn-c-badge-float-rot var(--wsbn-c-badge-idle-speed, 4.5s) ease-in-out infinite}
.wsbn-classique__badge--idle-pulse-bg{animation:wsbn-c-badge-pulse-bg var(--wsbn-c-badge-idle-speed, 2.4s) ease-in-out infinite}
.wsbn-classique__badge--idle-breath{animation:wsbn-c-badge-breath var(--wsbn-c-badge-idle-speed, 3s) ease-in-out infinite}
@keyframes wsbn-c-badge-float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
@keyframes wsbn-c-badge-float-rot{0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes wsbn-c-badge-pulse-bg{0%,100%{box-shadow:0 0 0 0 rgba(217,164,65,0)} 50%{box-shadow:0 0 0 6px rgba(217,164,65,.15)}}
@keyframes wsbn-c-badge-breath{0%,100%{transform:scale(1)} 50%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){
/* Le halo ne se met pas en pause, il DISPARAIT : mis en pause il
resterait fige a mi-course, en disque trouble autour du point. */
.wsbn-classique__badge--dot-pulse .wsbn-classique__badge-dot::after{
animation:none !important;
opacity:0 !important;
}
.wsbn-classique__badge,
.wsbn-classique__badge--shimmer::before,
.wsbn-classique__badge[class*="--hov-"],
.wsbn-classique__badge[class*="--idle-"]{
animation:none !important;
transition:none !important;
}
}
/* Le tracé de la flèche de la pastille. Scopé À LA PASTILLE : une règle
`svg` générale repeindrait aussi les icônes du bouton, qui sont pleines et
n'ont aucun contour - une flèche pleine deviendrait invisible. */
.wsbn-classique__badge svg{
width:12px;height:12px;flex:none;
fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
}
.wsbn-classique__lede{
margin:0;
max-width:48ch;
font-size:15px;
line-height:1.6;
color:var(--wsbn-c-lede);
}
/* ==========================================================================
TITRE
PRINCIPE DE BASE : DEUX COUCHES SÉPARÉES
.wsbn-classique__title-deco la décoration (surlignage, trait, cercle…)
.wsbn-classique__title-text le mot, qui porte sa propre couleur
Les séparer permet un dégradé sur le TEXTE et un autre sur le SURLIGNAGE en
même temps. Réunis sur un seul élément, les deux fonds se disputeraient la
même propriété CSS et l'un des deux disparaîtrait.
RÈGLE DE SÉCURITÉ
Rien n'est masqué tant que le script n'a pas pris la main (.wsbn-fx-js). Si
le JS ne se charge pas, le titre s'affiche normalement, sans animation. Un
titre invisible est le pire défaut possible : c'est souvent le H1.
========================================================================== */
.wsbn-classique__title{
margin:0;
/* L'espace réservé à chaque ligne se décide ICI, sur le conteneur, et non
sur le texte : les parties sont des blocs en ligne, et c'est le conteneur
qui fixe la hauteur de leurs lignes. */
line-height:1.1;
font-size:clamp(28px, 4.4vw, 52px);
font-weight:900;
letter-spacing:-.02em;
overflow-wrap:normal;
word-break:normal;
color:var(--wsbn-c-title-color);
/* Valeurs de repli : le titre doit être présentable dès sa pose. */
--wsbn-c-title-dur:.8s;
--wsbn-c-title-stagger:.12s;
--wsbn-c-title-loop-speed:4s;
--wsbn-c-title-thickness:3px;
--wsbn-c-title-deco-h:38%;
--wsbn-c-title-deco-radius:4px;
}
.wsbn-classique__title em{font-style:normal;color:var(--wsbn-c-title-accent)}
/* UNE PARTIE EST DU TEXTE, PAS UNE BOÎTE.
Un bloc en ligne ne se coupe jamais en deux : dès que son texte dépasse
la largeur disponible, il prend toute la ligne et pousse la partie
suivante à la ligne d'après. Le titre affichait alors des sauts de ligne
que personne n'avait demandés. En `inline`, les parties coulent comme une
phrase ordinaire et la ligne ne se coupe qu'où on le demande. */
.wsbn-classique__title-part{
position:relative;
display:inline;
}
/* LA BOÎTE RESTE LÀ OÙ ELLE EST INDISPENSABLE, ET SEULEMENT LÀ.
Une décoration est un masque ou un trait posé en absolu : il lui faut
un rectangle. Un effet d'entrée est une transformation, et une
transformation ne s'applique pas à une boîte en ligne.
Dans ces deux cas une partie trop longue prend encore sa propre ligne :
c'est la contrepartie du rectangle, pas un oubli.
`max-width` garde un titre long dans sa colonne sur mobile.
ET SAUF DEUX EFFETS D'ENTREE, QUI N'ANIMENT PAS LA PARTIE.
`balayage` anime un pseudo-element de la partie, `montee` anime les
lettres une a une. Ni l'un ni l'autre ne transforme la partie, donc
aucun des deux n'a besoin qu'elle soit une boite. La regle
d'animation les excluait deja nommement ; celle-ci ne le faisait pas,
et leur imposait un cout sans leur rendre de service : un titre qui
cassait apres chaque partie.
Le prix, assume : la bande du balayage ne couvre plus que le premier
fragment d'une partie qui se coupe en deux.
SAUF LE SURLIGNAGE PLEIN, QUI N'A PAS DE RECTANGLE.
Sa boîte absolue est en `display:none` : l'effet est un FOND posé sur
le texte, que le navigateur coupe par fragment de ligne tout seul.
C'est ce qui lui permet de suivre chaque ligne, et c'est aussi ce qui
rend la boîte inutile. Elle la payait quand même, en forçant la partie
suivante à la ligne : le saut de ligne de la 1.50, qui n'avait survécu
que là. Sur les vingt décorations, c'est la seule dans ce cas.
L'effet d'entrée, lui, l'emporte : la seconde règle ne l'exclut pas.
ET DEUX EFFETS DE PLUS S'EN PASSENT MAINTENANT.
`fondu` ne joue que sur l'opacité, qui fonctionne sur du texte en
ligne. Et une partie marquée `--mots` est animée sur SES MOTS, chacun
étant sa propre boîte : la partie, elle, peut rester du texte. C'est
ce qui fait couler cinq effets de plus, `balayage` compris.
ET SURTOUT : CE SELECTEUR S'ECRIT SUR UNE SEULE LIGNE.
Il a ete coupe en trois lignes pour la lisibilite, et les deux retours
a la ligne sont devenus des COMBINATEURS DE DESCENDANCE : la regle
reclamait un element entre le titre et la partie, qui n'existe pas.
Elle ne s'appliquait donc JAMAIS. Mesure du 2026-09-27 : partie en
`display:inline`, et un `translateY(100px)` la deplace de 0 px, contre
100 px en `inline-block`. Les cinq effets qui deplacent la partie
n'etaient plus que des fondus, sans que rien ne le signale.
Une espace dans un selecteur n'est jamais decorative. */
.wsbn-classique__title-part--deco:not([data-wsbn-deco="bande"]),
.wsbn-classique__title[data-wsbn-title-in]:not([data-wsbn-title-in=""]):not([data-wsbn-title-in="fondu"]) .wsbn-classique__title-part:not(.wsbn-classique__title-part--mots){
display:inline-block;
max-width:100%;
}
.wsbn-classique__title-text{
position:relative;
z-index:1;
}
/* Le dégradé du texte. La couleur transparente n'est posée QUE sur cette
classe, jamais par défaut : une couleur transparente sans fond derrière
donnerait un titre invisible. Le dégradé de repli garantit que même sans
réglage, quelque chose s'affiche. */
.wsbn-classique__title-text--gradient{
background-image:linear-gradient(90deg, #D9A441, #E9BE6E);
background-size:200% 100%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
/* La décoration. `currentColor` par défaut : une décoration choisie mais pas
encore colorée se voit tout de suite, au lieu de laisser croire à un bug. */
.wsbn-classique__title-deco{
position:absolute;
/* La couleur passe par une variable pour que le halo du néon, qui ne
peut pas la lire dans `currentColor`, retrouve la même valeur. Le
groupe « Couleur » écrit sur un sélecteur plus précis et gagne. */
background:var(--wsbn-c-title-deco-color, currentColor);
pointer-events:none;
box-sizing:border-box;
/* LA DISTANCE AU TEXTE, et pourquoi elle ne peut PAS passer par
`transform`. Sur cette même balise, `transform` est déjà pris trois
fois : la rotation du trait signature et de la croix, et les
animations d'entrée (`scaleX`, `scale`). Un décalage écrit en
`transform` aurait EFFACÉ la rotation, ou empêché la décoration de
se dessiner. La propriété individuelle `translate` s'ajoute à
`transform` au lieu de le remplacer : les trois gestes coexistent.
À zéro, la décoration reste exactement où la feuille l'a calée. */
translate:0 var(--wsbn-c-title-deco-distance, 0);
}
/* L'ÉCART ENTRE DEUX PARTIES VOISINES.
Il est posé sur la partie de GAUCHE, et seulement quand elle a un voisin sur
sa ligne : le rendu s'en charge en posant la classe. Une marge horizontale
s'applique bien à une boîte en ligne, ce qui évite d'avoir à changer la
nature des parties.
POURQUOI PAS `word-spacing`, qui était écrit ici avant : il élargit TOUTES
les espaces du titre, y compris celles qui séparent les mots À L'INTÉRIEUR
d'une partie. « Un vrai projet » devenait « Un vrai projet » : le
réglage promettait un écart entre parties et délavait le texte. */
.wsbn-classique__title-part--suivi{
margin-inline-end:var(--wsbn-c-title-gap, 0px);
}
/* LE SAUT DE LIGNE DEMANDÉ.
Un bloc vide au milieu d'un texte coupe la ligne exactement comme un ` `,
à ceci près qu'il a une HAUTEUR, et une hauteur, ça se règle. À zéro, le
rendu est celui d'un ` ` : c'est ce qui permet d'avoir changé de balise
sans déplacer un seul titre déjà en ligne.
Il ne remplace pas l'interligne : l'interligne fixe la hauteur réservée à
CHAQUE ligne, donc aussi celles d'un texte qui revient à la ligne tout seul.
Celui-ci ne s'ajoute qu'aux sauts DEMANDÉS. */
.wsbn-classique__title-saut{
display:block;
height:var(--wsbn-c-title-line-gap, 0px);
line-height:0;
font-size:0;
}
/* `.wsbn-classique__title-br` vivait ici, « conservé pour les titres rendus
avant le passage au bloc ci-dessus ». Retiré en 1.81 : Elementor
n'enregistre que des REGLAGES, et `render()` reproduit le balisage a
chaque chargement de page. Un span `__title-br` ne peut donc exister dans
aucune page, quelle que soit son ancienneté, et la regle ne visait plus
rien depuis le jour du renommage en `__title-saut`.
C'est la seule que `scratchpad/classes_sans_balisage.py` ait trouvee sur
les onze bannieres, et c'est ce qui la rend utile : un outil qui signale
toujours quelque chose finit par ne plus etre lu. */
/* --------------------------------------------------------------------------
DÉCORATIONS
Deux familles : les APLATS passent derrière le mot, les TRAITS passent
devant. Un surlignage derrière le texte est lisible ; un mot barré dont la
barre passerait dessous ne voudrait rien dire.
-------------------------------------------------------------------------- */
/* --- Marqueur : la bande de feutre, posée sur le bas du mot --- */
[data-wsbn-deco="surlignage"] .wsbn-classique__title-deco{
left:-.08em;
right:-.08em;
bottom:.04em;
height:var(--wsbn-c-title-deco-h);
border-radius:var(--wsbn-c-title-deco-radius);
z-index:0;
}
/* --- Bande : le mot entier dans une pastille.
DÉFORMATION
Le bord droit se pince : le bloc paraît plus épais au début qu'à la fin,
comme un bandeau posé à la main. À zéro, le tracé revient exactement au
rectangle d'origine, donc rien ne bouge sur les titres déjà en place.
Le découpage est posé en POURCENTAGES de la hauteur du bloc : le pincement
reste proportionné quelle que soit la taille du texte. */
/* LE SURLIGNAGE PLEIN SUIT CHAQUE LIGNE.
Le bloc en absolu s'efface au profit du fond du TEXTE, qui est en ligne et
que le navigateur coupe donc par fragment de ligne tout seul.
`box-decoration-break:clone` donne a chaque fragment sa marge et son
arrondi, au lieu de reserver le bord gauche au premier et le bord droit au
dernier. Le reglage "Un seul bloc" rallume le bloc et eteint ce fond. */
[data-wsbn-deco="bande"] .wsbn-classique__title-deco{
display:none;
}
[data-wsbn-deco="bande"] .wsbn-classique__title-text{
/* PAS `currentColor` ICI, ET C'EST LA SEULE DECORATION DANS CE CAS.
La bande passe DERRIERE le texte : lui donner la couleur de ce texte
revient a effacer le mot. Blanc sur blanc dans Arc, dont le titre est
blanc, et la partie decoree disparaissait entierement.
Les dix-neuf autres decorations sont des traits et des formes poses
a cote ou sous le texte : pour elles `currentColor` est le bon
defaut, et il ne bouge pas.
Le groupe << Couleur >> du panneau ecrit sur un selecteur plus precis
et l'emporte des qu'on y touche : ce repli ne sert qu'a celui qui
n'a rien choisi.
POURQUOI CET OR-LA ET PAS UN AUTRE.
On ne sait pas d'avance si le titre est clair ou sombre : le repli doit
donc etre lisible DANS LES DEUX SENS. Mesure des contrastes, seuil de
3:1 pour du grand texte :
#D9A441 blanc 2,25 sombre 7,58 passe dans un seul sens
#C9963F blanc 2,65 sombre 6,43 passe dans un seul sens
#B07C1E blanc 3,65 sombre 4,67 PASSE DANS LES DEUX
#1B2A4A blanc 14,2 sombre 1,20 passe dans un seul sens
C'est le seul de la liste a tenir des deux cotes. */
background:var(--wsbn-c-title-bande, #B07C1E);
border-radius:var(--wsbn-c-title-deco-radius);
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
/* `inline` et non `inline-block` : c'est la coupure en fragments de ligne
qui fait tout le travail, et un bloc ne se coupe pas. */
display:inline;
}
[data-wsbn-deco="bande"] .wsbn-classique__title-deco{
inset:0;
border-radius:var(--wsbn-c-title-deco-radius);
z-index:0;
clip-path:polygon(
0 0,
100% var(--wsbn-c-title-deform, 0%),
100% calc(100% - var(--wsbn-c-title-deform, 0%)),
0 100%
);
}
/* --- Souligné --- */
[data-wsbn-deco="souligne"] .wsbn-classique__title-deco{
left:0;
right:0;
bottom:-.06em;
height:var(--wsbn-c-title-thickness);
border-radius:999px;
z-index:2;
}
/* --- Trait signature : le même principe que le souligné, mais fin et
légèrement incliné, pour donner le geste d'un trait tracé à la main plutôt
qu'un soulignement typographique. L'inclinaison est faible À DESSEIN : au
delà de deux degrés, le trait cesse de suivre le mot et se lit comme un
défaut d'alignement. */
[data-wsbn-deco="trait"] .wsbn-classique__title-deco{
left:0;
right:-.05em;
bottom:-.1em;
height:var(--wsbn-c-title-thickness);
border-radius:999px;
transform:rotate(var(--wsbn-c-title-slant, -1deg));
transform-origin:left center;
z-index:2;
}
/* --- Barré --- */
[data-wsbn-deco="barre"] .wsbn-classique__title-deco{
left:-.04em;
right:-.04em;
top:50%;
height:var(--wsbn-c-title-thickness);
margin-top:calc(var(--wsbn-c-title-thickness) / -2);
border-radius:999px;
z-index:2;
}
/* --- Croix : deux traits en X.
Le second trait est un pseudo-élément du premier, avec `background: inherit`
pour reprendre exactement la même couleur ou le même dégradé. Il tourne de
-2 fois l'angle : comme il est DÉJÀ tourné par son parent, ce doublement le
ramène à l'opposé exact du premier trait. */
[data-wsbn-deco="croix"] .wsbn-classique__title-deco{
--wsbn-c-title-cross:7deg;
left:-.1em;
right:-.1em;
top:50%;
height:var(--wsbn-c-title-thickness);
margin-top:calc(var(--wsbn-c-title-thickness) / -2);
border-radius:999px;
transform:rotate(var(--wsbn-c-title-cross));
z-index:2;
}
[data-wsbn-deco="croix"] .wsbn-classique__title-deco::after{
content:"";
position:absolute;
inset:0;
background:inherit;
border-radius:inherit;
transform:rotate(calc(var(--wsbn-c-title-cross) * -2));
}
/* --- Entouré : une ellipse tracée autour du mot.
Le contour est un fond découpé en anneau (masque), et non un `border` : un
`border` n'accepte pas de dégradé, ce qui aurait interdit « dégradé
partout » sur cette décoration précise. */
[data-wsbn-deco="entoure"] .wsbn-classique__title-deco{
inset:-.16em -.5em;
border-radius:50%;
padding:var(--wsbn-c-title-thickness);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite:exclude;
z-index:2;
}
/* --------------------------------------------------------------------------
ENTRÉE DU TITRE
Rien ne se déclenche tant que .wsbn-fx-js n'est pas posée par le script, et
rien ne se masque en dehors de cette classe. Le script ajoute ensuite
.wsbn-fx-on à l'arrivée à l'écran.
-------------------------------------------------------------------------- */
.wsbn-fx-js .wsbn-classique__title[data-wsbn-title-in]:not([data-wsbn-title-in=""]):not([data-wsbn-title-in="balayage"]):not([data-wsbn-title-in="montee"]) .wsbn-classique__title-part:not(.wsbn-classique__title-part--mots){
opacity:0;
}
/* UNE PARTIE DECOUPEE EN MOTS EST ANIMEE SUR SES MOTS : ce sont donc EUX
qu'il faut masquer au depart. Masquer la partie la laisserait invisible
a vie, puisque plus rien ne l'animerait. */
.wsbn-fx-js .wsbn-classique__title[data-wsbn-title-in]:not([data-wsbn-title-in=""]):not([data-wsbn-title-in="balayage"]):not([data-wsbn-title-in="montee"]) .wsbn-classique__title-part--mots .wsbn-classique__title-word{
opacity:0;
}
/* La décoration se dessine APRÈS le mot : c'est ce décalage qui donne
l'impression d'un trait posé à la main une fois la phrase écrite.
Réservé aux parties en "Suit le texte" (défaut) : une partie avec son
propre "Effet d'apparition" (title_p{n}_deco_in) a ses règles dédiées
plus bas, indépendantes de l'entrée du texte. */
.wsbn-fx-js .wsbn-classique__title[data-wsbn-title-in]:not([data-wsbn-title-in=""]):not([data-wsbn-title-in="decouvre"]):not([data-wsbn-title-in="balayage"]):not([data-wsbn-title-in="montee"]) .wsbn-classique__title-part:not([data-wsbn-deco-in="trace"]):not([data-wsbn-deco-in="fondu"]):not([data-wsbn-deco-in="zoom"]):not([data-wsbn-deco-in="none"]) .wsbn-classique__title-deco:not(.wsbn-classique__title-deco--trace){
transform:scaleX(0);
transform-origin:left center;
}
.wsbn-fx-js .wsbn-classique__title[data-wsbn-title-in]:not([data-wsbn-title-in=""]):not([data-wsbn-title-in="decouvre"]):not([data-wsbn-title-in="balayage"]):not([data-wsbn-title-in="montee"]) [data-wsbn-deco="entoure"]:not([data-wsbn-deco-in="trace"]):not([data-wsbn-deco-in="fondu"]):not([data-wsbn-deco-in="zoom"]):not([data-wsbn-deco-in="none"]) .wsbn-classique__title-deco{
transform:scale(0);
transform-origin:center;
}
.wsbn-fx-js .wsbn-classique__title[data-wsbn-title-in]:not([data-wsbn-title-in=""]):not([data-wsbn-title-in="decouvre"]):not([data-wsbn-title-in="balayage"]):not([data-wsbn-title-in="montee"]) [data-wsbn-deco="croix"]:not([data-wsbn-deco-in="trace"]):not([data-wsbn-deco-in="fondu"]):not([data-wsbn-deco-in="zoom"]):not([data-wsbn-deco-in="none"]) .wsbn-classique__title-deco{
transform:rotate(var(--wsbn-c-title-cross)) scaleX(0);
}
/* Le retard de chaque partie se calcule sur son rang, posé par le rendu.
Les mots d'une partie découpée héritent de ce MÊME rang : ils partent
donc tous ensemble, et le titre garde exactement la cascade qu'il
avait quand la partie bougeait d'un bloc. */
.wsbn-fx-on .wsbn-classique__title .wsbn-classique__title-part,
.wsbn-fx-on .wsbn-classique__title .wsbn-classique__title-part--mots .wsbn-classique__title-word{
animation-duration:var(--wsbn-c-title-dur);
animation-delay:calc(var(--wsbn-c-title-rank, 0) * var(--wsbn-c-title-stagger));
animation-timing-function:cubic-bezier(.22, .68, .3, 1);
animation-fill-mode:both;
}
/* Le tracé de la décoration est réservé aux titres qui ONT une entrée. Sans ce
garde-fou, un titre réglé sur « Aucun effet » verrait quand même ses traits
se dessiner : l'option ne serait pas respectée. Réservé aux parties en
"Suit le texte" (défaut), cf. commentaire équivalent plus haut. */
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in]:not([data-wsbn-title-in=""]):not([data-wsbn-title-in="decouvre"]):not([data-wsbn-title-in="balayage"]):not([data-wsbn-title-in="montee"]) .wsbn-classique__title-part:not([data-wsbn-deco-in="trace"]):not([data-wsbn-deco-in="fondu"]):not([data-wsbn-deco-in="zoom"]):not([data-wsbn-deco-in="none"]) .wsbn-classique__title-deco:not(.wsbn-classique__title-deco--trace){
animation:wsbn-c-title-trace var(--wsbn-c-title-dur) cubic-bezier(.22, .68, .3, 1) both;
/* Le « + .55 » est le retard sur le mot : le trait arrive quand le texte est
déjà largement en place. */
animation-delay:calc(var(--wsbn-c-title-rank, 0) * var(--wsbn-c-title-stagger) + var(--wsbn-c-title-dur) * .55);
}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in]:not([data-wsbn-title-in=""]):not([data-wsbn-title-in="decouvre"]):not([data-wsbn-title-in="balayage"]):not([data-wsbn-title-in="montee"]) [data-wsbn-deco="entoure"]:not([data-wsbn-deco-in="trace"]):not([data-wsbn-deco-in="fondu"]):not([data-wsbn-deco-in="zoom"]):not([data-wsbn-deco-in="none"]) .wsbn-classique__title-deco{
animation-name:wsbn-c-title-trace-cercle;
}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in]:not([data-wsbn-title-in=""]):not([data-wsbn-title-in="decouvre"]):not([data-wsbn-title-in="balayage"]):not([data-wsbn-title-in="montee"]) [data-wsbn-deco="croix"]:not([data-wsbn-deco-in="trace"]):not([data-wsbn-deco-in="fondu"]):not([data-wsbn-deco-in="zoom"]):not([data-wsbn-deco-in="none"]) .wsbn-classique__title-deco{
animation-name:wsbn-c-title-trace-croix;
}
/* --------------------------------------------------------------------------
EFFET D'APPARITION DE LA DÉCORATION, PAR PARTIE (title_p{n}_deco_in)
Indépendant de l'entrée du texte (data-wsbn-title-in ci-dessus) : une
partie peut avoir sa décoration qui se dessine même si le texte, lui,
apparaît en fondu ou n'a aucune entrée. "Aucun" ne pose aucune règle ici :
la décoration reste visible dès le départ, comme avant l'ajout de ce
réglage.
-------------------------------------------------------------------------- */
.wsbn-fx-js [data-wsbn-deco-in="trace"] .wsbn-classique__title-deco:not(.wsbn-classique__title-deco--trace){
transform:scaleX(0);
transform-origin:left center;
}
.wsbn-fx-js [data-wsbn-deco-in="trace"][data-wsbn-deco="entoure"] .wsbn-classique__title-deco{
transform:scale(0);
transform-origin:center;
}
.wsbn-fx-js [data-wsbn-deco-in="trace"][data-wsbn-deco="croix"] .wsbn-classique__title-deco{
transform:rotate(var(--wsbn-c-title-cross)) scaleX(0);
}
.wsbn-fx-on [data-wsbn-deco-in="trace"] .wsbn-classique__title-deco:not(.wsbn-classique__title-deco--trace){
animation:wsbn-c-title-trace var(--wsbn-c-title-dur) cubic-bezier(.22, .68, .3, 1) both;
animation-delay:calc(var(--wsbn-c-title-rank, 0) * var(--wsbn-c-title-stagger) + var(--wsbn-c-title-dur) * .55);
}
.wsbn-fx-on [data-wsbn-deco-in="trace"][data-wsbn-deco="entoure"] .wsbn-classique__title-deco{
animation-name:wsbn-c-title-trace-cercle;
}
.wsbn-fx-on [data-wsbn-deco-in="trace"][data-wsbn-deco="croix"] .wsbn-classique__title-deco{
animation-name:wsbn-c-title-trace-croix;
}
.wsbn-fx-js [data-wsbn-deco-in="fondu"] .wsbn-classique__title-deco{opacity:0}
.wsbn-fx-on [data-wsbn-deco-in="fondu"] .wsbn-classique__title-deco{
animation:wsbn-c-title-deco-fondu var(--wsbn-c-title-dur) cubic-bezier(.22, .68, .3, 1) both;
animation-delay:calc(var(--wsbn-c-title-rank, 0) * var(--wsbn-c-title-stagger) + var(--wsbn-c-title-dur) * .55);
}
@keyframes wsbn-c-title-deco-fondu{from{opacity:0} to{opacity:1}}
.wsbn-fx-js [data-wsbn-deco-in="zoom"] .wsbn-classique__title-deco{transform:scale(0);opacity:0}
.wsbn-fx-on [data-wsbn-deco-in="zoom"] .wsbn-classique__title-deco{
animation:wsbn-c-title-deco-zoom var(--wsbn-c-title-dur) cubic-bezier(.22, .68, .3, 1) both;
animation-delay:calc(var(--wsbn-c-title-rank, 0) * var(--wsbn-c-title-stagger) + var(--wsbn-c-title-dur) * .55);
}
@keyframes wsbn-c-title-deco-zoom{from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1}}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="fondu"] .wsbn-classique__title-part{animation-name:wsbn-c-title-fondu}
/* LES MEMES EFFETS, JOUES SUR LES MOTS quand la partie coule au lieu
d'etre une boite. Le fondu n'y est pas : son opacite est deja portee
par la partie, qui reste en ligne, et la jouer deux fois la ferait
apparaitre deux fois. */
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="monte"] .wsbn-classique__title-part--mots .wsbn-classique__title-word{animation-name:wsbn-c-title-monte}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="descend"] .wsbn-classique__title-part--mots .wsbn-classique__title-word{animation-name:wsbn-c-title-descend}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="gauche"] .wsbn-classique__title-part--mots .wsbn-classique__title-word{animation-name:wsbn-c-title-gauche}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="droite"] .wsbn-classique__title-part--mots .wsbn-classique__title-word{animation-name:wsbn-c-title-droite}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="zoom"] .wsbn-classique__title-part--mots .wsbn-classique__title-word{animation-name:wsbn-c-title-zoom}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="monte"] .wsbn-classique__title-part:not(.wsbn-classique__title-part--mots){animation-name:wsbn-c-title-monte}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="descend"] .wsbn-classique__title-part:not(.wsbn-classique__title-part--mots){animation-name:wsbn-c-title-descend}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="gauche"] .wsbn-classique__title-part:not(.wsbn-classique__title-part--mots){animation-name:wsbn-c-title-gauche}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="droite"] .wsbn-classique__title-part:not(.wsbn-classique__title-part--mots){animation-name:wsbn-c-title-droite}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="zoom"] .wsbn-classique__title-part:not(.wsbn-classique__title-part--mots){animation-name:wsbn-c-title-zoom}
/* Dévoilé par le bas : le mot glisse hors d'une fenêtre invisible. Il faut
donc un recadrage, posé UNIQUEMENT pour cet effet (il couperait les
décorations qui dépassent du mot dans les autres cas). */
.wsbn-classique__title[data-wsbn-title-in="masque"] .wsbn-classique__title-part{
overflow:hidden;
padding-bottom:.12em;
}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="masque"] .wsbn-classique__title-part > *{
animation:wsbn-c-title-masque var(--wsbn-c-title-dur) cubic-bezier(.22, .68, .3, 1) both;
animation-delay:calc(var(--wsbn-c-title-rank, 0) * var(--wsbn-c-title-stagger));
display:inline-block;
}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="masque"] .wsbn-classique__title-part{animation-name:wsbn-c-title-fondu}
/* --- BANDE QUI DÉCOUVRE ---------------------------------------------------
Un rideau qui s'ouvre de gauche à droite, partie par partie. Ce n'est ni un
fondu ni une translation : le mot est déjà en place, il est simplement
masqué, et le masque se retire.
POURQUOI LE DÉCOUPAGE DÉBORDE (les -40 %)
Les décorations sont positionnées par rapport à la boîte de la partie, et
plusieurs DÉBORDENT du mot : l'ellipse d'« entouré » surtout, mais aussi le
marqueur, le souligné et la croix. Un rideau calé sur la boîte les
rognerait donc. Des valeurs négatives élargissent la fenêtre de découpage
SANS toucher à la boîte : la mise en page et les décorations ne bougent pas
d'un pixel.
L'opacité est RÉPÉTÉE dans les étapes : la règle de départ met les parties à
zéro pour les autres effets, et une propriété absente des étapes garderait
cette valeur. Sans ces deux `opacity: 1`, le titre resterait invisible. */
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="decouvre"] .wsbn-classique__title-part{
animation-name:wsbn-c-title-decouvre;
}
@keyframes wsbn-c-title-decouvre{
from{clip-path:inset(-40% 100% -40% -40%);opacity:1}
to {clip-path:inset(-40% -40% -40% -40%);opacity:1}
}
/* --------------------------------------------------------------------------
LE TEXTE MONTE DANS LA BANDE
La bande ne bouge pas : elle sert de fenêtre. Le texte arrive par le bas,
glisse à l'intérieur et vient se poser. On ne voit jamais le texte déborder
du bloc, puisque le bloc le découpe.
À UTILISER AVEC LA DÉCORATION « SURLIGNAGE PLEIN »
C'est elle qui dessine la fenêtre. Sans décoration, le texte monte dans le
vide : l'effet marche, mais il n'a plus rien de particulier.
-------------------------------------------------------------------------- */
.wsbn-classique__title[data-wsbn-title-in="montee"] .wsbn-classique__title-part{
overflow:hidden;
/* La fenêtre épouse la MÊME forme que le bloc. Sans ce tracé, un bloc
déformé laisserait les lettres dépasser dans le coin pincé. */
clip-path:polygon(
0 0,
100% var(--wsbn-c-title-deform, 0%),
100% calc(100% - var(--wsbn-c-title-deform, 0%)),
0 100%
);
}
/* Le mot reste insécable : les lettres sont devenues des blocs autonomes, et
sans cette règle le navigateur couperait au milieu d'un mot en fin de
ligne. */
/* `position:relative` : un mot peut porter sa propre bande de balayage,
qui se pose en absolu sur lui. */
.wsbn-classique__title-word{display:inline-block;white-space:nowrap;position:relative}
.wsbn-classique__title-char{display:inline-block}
/* L'espace entre deux mots doit être posé explicitement : entre deux blocs, il
serait avalé par la mise en page. */
.wsbn-classique__title-space{display:inline-block;white-space:pre}
/* La copie lue par les lecteurs d'écran : présente dans la page, invisible à
l'oeil. Un titre découpé en lettres serait autrement épelé lettre par
lettre. */
.wsbn-classique__title-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
}
/* Les lettres partent sous la fenêtre. Uniquement si le script a la main :
sans lui elles restent en place et le titre se lit normalement. */
.wsbn-fx-js .wsbn-classique__title[data-wsbn-title-in="montee"] .wsbn-classique__title-char{
transform:translateY(115%);
}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="montee"] .wsbn-classique__title-char{
animation:wsbn-c-title-montee var(--wsbn-c-title-dur) cubic-bezier(.22, .68, .3, 1) both;
/* Deux décalages qui s'ajoutent : celui de la ligne, puis celui de la lettre
dans la ligne. */
animation-delay:calc(
var(--wsbn-c-title-rank, 0) * var(--wsbn-c-title-stagger)
+ var(--wsbn-c-title-char, 0) * var(--wsbn-c-title-char-delay, .03s)
);
}
@keyframes wsbn-c-title-montee{
from{transform:translateY(115%)}
to {transform:translateY(0)}
}
/* --- MONTÉE PILOTÉE PAR LE DÉFILEMENT -------------------------------------
Même animation, mais son avancement ne suit plus le temps : il suit la
position du titre dans l'écran. Aucun script, aucun écouteur de défilement :
le navigateur relie lui-même l'animation au défilement. C'est ce qui la rend
parfaitement fluide, même sur un téléphone.
`@supports` est indispensable : là où le navigateur ne sait pas faire, ce
bloc est ignoré et la montée se joue normalement, toute seule. */
@supports (animation-timeline: view()){
.wsbn-fx-js .wsbn-classique__title[data-wsbn-title-scroll="oui"][data-wsbn-title-in="montee"] .wsbn-classique__title-char{
animation-name:wsbn-c-title-montee;
animation-fill-mode:both;
animation-timing-function:linear;
animation-delay:0s;
animation-timeline:view();
animation-range:entry calc(5% + var(--wsbn-c-title-char, 0) * 1.5%)
entry calc(55% + var(--wsbn-c-title-char, 0) * 1.5%);
}
}
/* --------------------------------------------------------------------------
BANDE DES EFFETS « BALAYAGE » ET « DÉCOUVRE »
Le fond est posé à SPÉCIFICITÉ FAIBLE, sur une règle isolée : le réglage
Elementor « Couleur de la bande » écrit sur le même sélecteur avec une
spécificité supérieure et doit gagner. Une déclaration enfouie dans les
règles d'effet ci-dessous, plus spécifiques, l'aurait rendu inerte.
LE DÉBORDEMENT, LUI, N'EST PLUS POSÉ ICI : il arrive par QUATRE
VARIABLES, et l'`inset` est calculé dans la règle de l'effet. C'est
la condition de la garde ci-dessous : un `inset` venant d'Elementor
pèse plus lourd que cette feuille et effacerait la garde avec le
réglage.
LA GARDE : LA BANDE COUVRE TOUJOURS LA DÉCORATION, MÊME À
DÉBORDEMENT ZÉRO. Le surlignage est posé à `left:-.08em; right:-.08em`,
donc il DÉPASSE de la boîte du mot : mesuré le 2026-09-27 à 39,6 px de
texte, il sort de 3,16 px de chaque côté. Une bande calée sur cette
boîte ne pouvait structurellement pas le couvrir, et on voyait un filet
de décoration tout autour pendant l'effet.
D'où `.14em` sur les côtés et `.04em` en haut et en bas, AJOUTÉS au
réglage au lieu de le remplacer. En `em`, comme le débordement du
surlignage : la marge garde la même proportion du texte à toutes les
tailles au lieu de fondre sur un gros titre.
Sans `content`, ce pseudo-élément n'existe pas : il n'apparaît donc que
pour les deux effets qui le déclarent.
-------------------------------------------------------------------------- */
/* LA COULEUR SE POSE ICI, ET SUR LES MOTS AUSSI : depuis que le balayage
laisse couler le texte, une partie sans décoration porte sa bande sur
chacun de ses mots. Sans cette moitié, la couleur ne les atteindrait
pas. Le contrôle PHP vise les deux, pour la même raison. */
.wsbn-classique__title-part::after,
.wsbn-classique__title-word::after{
background:#D9A441;
}
/* --- BALAYAGE
La bande est DÉJÀ en place quand la ligne arrive à l'écran : on ne voit que
sa couleur, le titre est caché dessous. Elle attend, puis s'efface vers la
droite en laissant le titre.
Elle est peinte dès la première image, sans attendre le script : c'est la
condition même de l'effet. Le garde-fou n'est pas abandonné, il est
déplacé : ce n'est plus l'APPARITION de la bande qui dépend du script, c'est
seulement son RETRAIT. */
/* LA BANDE SE POSE SUR CHAQUE MOT QUAND LA PARTIE COULE, ET ELLE RESTE
CONTINUE.
C'est ce qui permet au balayage de ne plus mettre la partie en boîte,
donc de ne plus forcer un retour à la ligne, SANS payer le défaut qui
allait avec. Mesure du 2026-09-27 sur une partie de trois fragments :
la partie faisait 3 rectangles de 335, 331 et 111 px, la bande UN SEUL
de 335 x 140. Elle peignait donc 224 px de couleur sur du vide au bout
de la ligne courte, et se retirait d'un bloc au lieu de ligne par
ligne.
On pourrait croire que des bandes par mot laisseraient des trous aux
espaces : non. Chaque bande déborde de `.14em` PLUS le débordement
réglé (10 px par défaut) de chaque côté, soit bien davantage qu'une
espace de mot. Deux bandes voisines se CHEVAUCHENT et se soudent : on
voit une bande continue, et elle se coupe proprement en fin de ligne
au lieu de pousser la partie plus bas. */
.wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part:not(.wsbn-classique__title-part--mots)::after,
.wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part--mots .wsbn-classique__title-word::after{
content:"";
position:absolute;
inset:calc(-.04em - var(--wsbn-c-title-band-top, 6px))
calc(-.14em - var(--wsbn-c-title-band-right, 10px))
calc(-.04em - var(--wsbn-c-title-band-bottom, 6px))
calc(-.14em - var(--wsbn-c-title-band-left, 10px));
transform:scaleX(1);
transform-origin:right center;
pointer-events:none;
z-index:3;
}
/* FILET DE SÉCURITÉ : script absent (fichier bloqué, erreur ailleurs dans
la page, visiteur qui a demandé moins d'animations). La bande se retire
toute seule au bout de quelques secondes plutôt que de masquer le titre
pour toujours.
IL NE NOMME PLUS UN WIDGET. Il visait
`.elementor-widget-ws-banniere-classique`, donc il ne protégeait QUE
Classique : sur Arc, Hero Vidéo et Aphrodite, qui reprennent ce même
titre, un balayage sans script restait couvert pour toujours. Le filet
est donc posé sans condition, et c'est `.wsbn-fx-js` qui le retire dès
que le script répond de l'affichage. Le contrat va dans le bon sens :
c'est la classe POSÉE qui change le comportement, jamais son absence. */
.wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part:not(.wsbn-classique__title-part--mots)::after,
.wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part--mots .wsbn-classique__title-word::after{
animation:wsbn-c-title-balayage var(--wsbn-c-title-dur) cubic-bezier(.65, .05, 0, 1) 4s both;
}
.wsbn-fx-js .wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part:not(.wsbn-classique__title-part--mots)::after,
.wsbn-fx-js .wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part--mots .wsbn-classique__title-word::after{
animation:none;
}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part:not(.wsbn-classique__title-part--mots)::after,
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part--mots .wsbn-classique__title-word::after{
animation:wsbn-c-title-balayage var(--wsbn-c-title-dur) cubic-bezier(.65, .05, 0, 1) both;
/* L'attente s'ajoute au décalage de ligne : chaque ligne patiente, puis
part à son tour. Les mots d'une même partie héritent du MÊME rang :
ils partent donc tous ensemble, et la bande continue se retire d'un
bloc. */
animation-delay:calc(var(--wsbn-c-title-wait, 1s) + var(--wsbn-c-title-rank, 0) * var(--wsbn-c-title-stagger));
}
@keyframes wsbn-c-title-balayage{
from{transform:scaleX(1);transform-origin:right center}
to {transform:scaleX(0);transform-origin:right center}
}
/* --- BANDE QUI ARRIVE PUIS REPART
Une bande colorée GRANDIT par la gauche en recouvrant le mot à mesure qu'il
se révèle, puis SE RETIRE par la droite en le laissant en place. On ne voit
donc pas le texte apparaître : on voit une bande passer, et le texte est là
derrière.
Le basculement du point d'ancrage (gauche puis droite) se fait à l'instant
où la bande est pleine largeur : à ce moment précis l'ancrage ne change rien
à l'image, le passage est donc invisible. */
/* Même garde que pour le balayage, et pour la même raison : cette bande-là
aussi doit couvrir la décoration sans en laisser dépasser un filet. */
.wsbn-classique__title[data-wsbn-title-in="decouvre"] .wsbn-classique__title-part::after{
content:"";
position:absolute;
inset:calc(-.04em - var(--wsbn-c-title-band-top, 6px))
calc(-.14em - var(--wsbn-c-title-band-right, 10px))
calc(-.04em - var(--wsbn-c-title-band-bottom, 6px))
calc(-.14em - var(--wsbn-c-title-band-left, 10px));
transform:scaleX(0);
transform-origin:left center;
pointer-events:none;
z-index:3;
}
.wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="decouvre"] .wsbn-classique__title-part::after{
/* Un peu plus longue que le rideau : la bande doit finir de se retirer APRÈS
que le mot soit entièrement découvert. */
animation:wsbn-c-title-bande calc(var(--wsbn-c-title-dur) * 1.15) cubic-bezier(.65, .05, 0, 1) both;
animation-delay:calc(var(--wsbn-c-title-rank, 0) * var(--wsbn-c-title-stagger));
}
@keyframes wsbn-c-title-bande{
0% {transform:scaleX(0);transform-origin:left center}
47.9% {transform:scaleX(1);transform-origin:left center}
48% {transform:scaleX(1);transform-origin:right center}
100% {transform:scaleX(0);transform-origin:right center}
}
@keyframes wsbn-c-title-fondu {from{opacity:0} to{opacity:1;transform:none}}
@keyframes wsbn-c-title-monte {from{opacity:0;transform:translateY(.5em)} to{opacity:1;transform:none}}
@keyframes wsbn-c-title-descend{from{opacity:0;transform:translateY(-.5em)} to{opacity:1;transform:none}}
@keyframes wsbn-c-title-gauche {from{opacity:0;transform:translateX(-.7em)} to{opacity:1;transform:none}}
@keyframes wsbn-c-title-droite {from{opacity:0;transform:translateX(.7em)} to{opacity:1;transform:none}}
@keyframes wsbn-c-title-zoom {from{opacity:0;transform:scale(.86)} to{opacity:1;transform:none}}
@keyframes wsbn-c-title-masque {from{transform:translateY(100%)} to{transform:translateY(0)}}
@keyframes wsbn-c-title-trace {from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes wsbn-c-title-trace-cercle{from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1}}
@keyframes wsbn-c-title-trace-croix {
from{transform:rotate(var(--wsbn-c-title-cross)) scaleX(0)}
to {transform:rotate(var(--wsbn-c-title-cross)) scaleX(1)}
}
/* --------------------------------------------------------------------------
MOUVEMENT RÉDUIT
Le visiteur qui demande moins d'animations reçoit le titre complet,
posé, sans mouvement.
LA BANDE DU BALAYAGE EST LE CAS IMPORTANT DE TOUT CE BLOC. Le script
ne pose même pas `wsbn-fx-js` quand le mouvement réduit est demandé
(cf. `demarrer()` dans le socle) : rien ne viendrait donc retirer la
bande, et sans cette règle ces visiteurs auraient un titre couvert
quatre secondes, le temps que le filet de sécurité joue. Ici elle ne
se peint pas du tout.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.wsbn-classique__title,
.wsbn-classique__title .wsbn-classique__title-part,
.wsbn-classique__title .wsbn-classique__title-part > *,
.wsbn-classique__title .wsbn-classique__title-word,
.wsbn-classique__title .wsbn-classique__title-char,
.wsbn-classique__title .wsbn-classique__title-deco{
animation:none !important;
opacity:1 !important;
transform:none !important;
}
.wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part::after,
.wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-word::after,
.wsbn-classique__title[data-wsbn-title-in="decouvre"] .wsbn-classique__title-part::after{
animation:none !important;
transform:scaleX(0) !important;
}
/* La croix garde sa rotation : sans elle, les deux traits se
superposeraient en une seule barre. */
[data-wsbn-deco="croix"] .wsbn-classique__title-deco{
transform:rotate(var(--wsbn-c-title-cross)) !important;
}
}
/* --------------------------------------------------------------------------
EFFETS PERMANENTS DU TITRE
Ils tournent en boucle, sans rien masquer.
POURQUOI ILS NE TOUCHENT PAS AUX MÊMES ÉLÉMENTS QUE L'ENTRÉE
Une propriété `animation` ne se cumule pas : deux règles qui visent le même
élément se remplacent, et la dernière gagne. Un effet permanent posé sur la
partie aurait donc SUPPRIMÉ l'animation d'entrée. Les boucles sont donc
posées sur le titre entier, l'entrée restant sur les parties.
-------------------------------------------------------------------------- */
[data-wsbn-title-loop="degrade"] .wsbn-classique__title-text--gradient{
animation:wsbn-c-title-degrade var(--wsbn-c-title-loop-speed) linear infinite;
}
@keyframes wsbn-c-title-degrade{
from{background-position: 0% 50%}
to {background-position:200% 50%}
}
/* Brillance : un masque qui balaye le titre. Il n'ajoute aucun élément, donc
rien ne peut se retrouver par-dessus le texte ni gêner la sélection. */
.wsbn-classique__title[data-wsbn-title-loop="brillance"]{
-webkit-mask-image:linear-gradient(100deg, #000 40%, rgba(0, 0, 0, .45) 50%, #000 60%);
mask-image:linear-gradient(100deg, #000 40%, rgba(0, 0, 0, .45) 50%, #000 60%);
-webkit-mask-size:250% 100%;
mask-size:250% 100%;
animation:wsbn-c-title-brillance var(--wsbn-c-title-loop-speed) linear infinite;
}
@keyframes wsbn-c-title-brillance{
from{-webkit-mask-position:150% 0;mask-position:150% 0}
to {-webkit-mask-position:-50% 0;mask-position:-50% 0}
}
.wsbn-classique__title[data-wsbn-title-loop="flottement"]{
animation:wsbn-c-title-flottement var(--wsbn-c-title-loop-speed) ease-in-out infinite;
}
@keyframes wsbn-c-title-flottement{
0%, 100%{transform:translateY(0)}
50% {transform:translateY(-.14em)}
}
/* ==========================================================================
DÉCORATIONS TRACÉES - la famille récente, cf. title_deco_mask() côté PHP.
UN MASQUE, ET PLUS UN