/* ========================================================================== 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{width:7px;height:7px;border-radius:50%;background:var(--wsbn-c-badge-dot);flex:none} /* --- Variantes (portees du widget "Pill annonce/badge") --- */ .wsbn-classique__badge--pill{border-radius:999px} .wsbn-classique__badge--square{border-radius:8px} .wsbn-classique__badge--outline{background:transparent} .wsbn-classique__badge--filled{background:var(--wsbn-c-badge-bg);border-color:transparent} .wsbn-classique__badge--glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .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) --- */ .wsbn-classique__badge--idle-float{animation:wsbn-c-badge-float 3.4s ease-in-out infinite} .wsbn-classique__badge--idle-float-rot{animation:wsbn-c-badge-float-rot 4.5s ease-in-out infinite} .wsbn-classique__badge--idle-pulse-bg{animation:wsbn-c-badge-pulse-bg 2.4s ease-in-out infinite} .wsbn-classique__badge--idle-breath{animation:wsbn-c-badge-breath 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){ .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 posé sur un rectangle : 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. */ .wsbn-classique__title-part--deco, .wsbn-classique__title[data-wsbn-title-in]:not([data-wsbn-title-in=""]) .wsbn-classique__title-part{ 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; } /* Conservé pour les titres rendus avant le passage au bloc ci-dessus. */ .wsbn-classique__title-br{line-height:0} /* -------------------------------------------------------------------------- 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{ background:currentColor; 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{ 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. */ .wsbn-fx-on .wsbn-classique__title .wsbn-classique__title-part{ 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} .wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="monte"] .wsbn-classique__title-part{animation-name:wsbn-c-title-monte} .wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="descend"] .wsbn-classique__title-part{animation-name:wsbn-c-title-descend} .wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="gauche"] .wsbn-classique__title-part{animation-name:wsbn-c-title-gauche} .wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="droite"] .wsbn-classique__title-part{animation-name:wsbn-c-title-droite} .wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="zoom"] .wsbn-classique__title-part{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. */ .wsbn-classique__title-word{display:inline-block;white-space:nowrap} .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 et le débordement sont posés à SPÉCIFICITÉ FAIBLE, sur une règle isolée : les deux réglages Elementor correspondants (couleur de la bande, débordement) écrivent sur le même sélecteur avec une spécificité supérieure et doivent gagner. Une déclaration enfouie dans les règles d'effet ci-dessous, plus spécifiques, aurait rendu ces réglages inertes. Sans `content`, ce pseudo-élément n'existe pas : il n'apparaît donc que pour les deux effets qui le déclarent. -------------------------------------------------------------------------- */ .wsbn-classique__title-part::after{ background:#D9A441; inset:-6px -10px; } /* --- 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. */ .wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part::after{ content:""; position:absolute; 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…). La bande se retire toute seule au bout de quelques secondes plutôt que de masquer le titre pour toujours. */ .elementor-widget-ws-banniere-classique:not(.wsbn-fx-js) .wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part::after{ animation:wsbn-c-title-balayage var(--wsbn-c-title-dur) cubic-bezier(.65, .05, 0, 1) 4s both; } .wsbn-fx-on .wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part::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. */ 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. */ .wsbn-classique__title[data-wsbn-title-in="decouvre"] .wsbn-classique__title-part::after{ content:""; position:absolute; 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)} } /* -------------------------------------------------------------------------- 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 POSÉ À CÔTÉ Ces quatorze tracés étaient rendus par un `` imprimé dans la page, avec des ``. Le bloc de fond des décorations historiques existait en parallèle, avec sa propre couleur et ses propres règles : deux familles, deux mécaniques, deux jeux de réglages pour une même intention. Ici le tracé est un MASQUE posé sur ce même bloc de fond. Le fond porte la couleur, le SVG ne fait que le découper. Conséquence directe : la couleur, le dégradé et l'ombre du texte sont pilotés par les mêmes réglages que les décorations historiques, sans une ligne de plus, et le gabarit imprimé dans la page redevient un simple `` vide. CE QUE ÇA A SUPPRIMÉ - le `pathLength="1"` et le couple `stroke-dasharray` / `stroke-dashoffset` ; - la table de viewBox recadrées côté serveur ; - les quatre « boîtes de famille » qui essayaient de poser quatorze tracés avec quatre jeux de valeurs ; - le contrôle de couleur séparé, qu'un `stroke` imposait faute d'accepter un dégradé. LA BOÎTE EST EN em, JAMAIS EN POURCENTAGE Un pourcentage horizontal se compte sur la LARGEUR du mot : un mot long recevait un cercle qui débordait deux fois plus qu'un mot court, et c'est exactement ce qui faisait paraître certaines décorations « pas cadrées ». En em, le débord garde la même allure quelle que soit la longueur. L'ÉCHELLE `--wsbn-c-title-deco-trace` (100 par défaut) vient du réglage « Taille du tracé ». Les hauteurs sont en `em` pour suivre la taille du texte ; l'échelle les module par-dessus. Elle ne concerne que les tracés en TRAIT : les décorations qui entourent le mot prennent naturellement sa taille, un réglage d'épaisseur n'aurait rien à piloter dessus. PIÈGE À NE PAS RÉINTRODUIRE : dans un data-URI, un `#` coupe l'adresse à cet endroit, le masque ne se charge pas et la décoration disparaît SANS AUCUNE erreur en console. Aucun `url(#...)` ici ; le jour où un filtre en demandera un, il faudra l'écrire `%23`. Les valeurs ci-dessous sortent de design-titre-decorations.html, qui reste la source de vérité : pour retoucher un cadrage, y chercher la valeur avec les curseurs, puis la reporter ici. ========================================================================== */ .wsbn-classique__title-deco--trace{ /* Un tracé n'a pas de coin : l'arrondi de la famille aplat ne le concerne pas, et une valeur héritée déformerait sa boîte. */ border-radius:0; -webkit-mask-image:var(--wsbn-c-deco-m); mask-image:var(--wsbn-c-deco-m); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%; z-index:0; } /* --- Trait fin : le soulignement typographique, net et droit. --- */ [data-wsbn-deco="ligne"] .wsbn-classique__title-deco{ left:-.02em; right:-.02em; bottom:-.16em; height:calc(.22em * var(--wsbn-c-title-deco-trace, 100) / 100); --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Trait double : deux passages, le second un peu plus court. --- */ [data-wsbn-deco="ligne-double"] .wsbn-classique__title-deco{ left:-.02em; right:-.02em; bottom:-.22em; height:calc(.32em * var(--wsbn-c-title-deco-trace, 100) / 100); --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Trait épais marqueur : l'épaisseur est dans le tracé, pas dans un réglage à part. Le curseur « Taille du tracé » la module. --- */ [data-wsbn-deco="ligne-marqueur"] .wsbn-classique__title-deco{ left:-.03em; right:-.03em; bottom:-.18em; height:calc(.26em * var(--wsbn-c-title-deco-trace, 100) / 100); --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Trait à main levée : le trait ondule, bouts arrondis. --- */ [data-wsbn-deco="ligne-main-levee"] .wsbn-classique__title-deco{ left:-.03em; right:-.03em; bottom:-.18em; height:calc(.24em * var(--wsbn-c-title-deco-trace, 100) / 100); --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Cercle tracé : l'ellipse ne se referme pas tout à fait, c'est ce qui la fait lire comme un geste et non comme un ovale vectoriel. Hauteur FIGÉE, sans `--trace` : un entourage épouse le mot. --- */ [data-wsbn-deco="cercle-trace"] .wsbn-classique__title-deco{ left:-.42em; right:-.42em; bottom:-.2em; height:1.55em; --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Rectangle tracé : les côtés ne sont pas parallèles, à dessein. --- */ [data-wsbn-deco="rectangle-trace"] .wsbn-classique__title-deco{ left:-.34em; right:-.34em; bottom:-.18em; height:1.5em; --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Crochets : l'annotation éditoriale, deux équerres qui encadrent. --- */ [data-wsbn-deco="crochets"] .wsbn-classique__title-deco{ left:-.3em; right:-.3em; bottom:-.16em; height:1.46em; --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Surlignage néon : il passe À TRAVERS le mot, il se centre donc. Le centrage passe par `margin-top` et NON par `translateY` : la propriété `translate` porte déjà la distance au texte, et `transform` est pris par l'animation d'entrée. Les trois gestes coexistent sans se connaître. LE HALO EST DANS LE MASQUE, ET C'EST LA SEULE PLACE QUI MARCHE. `box-shadow` est entièrement découpé par le masque : invisible, vérifié en maquette. `drop-shadow` fonctionne mais réclame une couleur écrite en dur, que le groupe « Couleur » ne mettrait pas à jour : c'est exactement le bug du halo noir sur titre sombre, qu'on ne veut pas réintroduire. Le masque contient donc DEUX fois le même tracé : une copie floutée derrière le trait net. Le flou est un dégradé d'alpha, donc un halo dans la peinture réelle du bloc, dégradé compris, sans une balise ni un réglage de plus. Et c'est ICI que le `%23` compte : `url(#h)` écrit tel quel couperait l'adresse, le masque ne se chargerait pas, et la décoration disparaîtrait sans aucune erreur en console. La boîte est plus haute que le trait (11 unités de tracé dans une viewBox de 30) : sans cette marge, le halo serait rogné par les bords de sa propre boîte et le flou ne se verrait pas. --- */ [data-wsbn-deco="neon"] .wsbn-classique__title-deco{ left:-.05em; right:-.05em; top:50%; height:calc(.7em * var(--wsbn-c-title-deco-trace, 100) / 100); margin-top:calc(.7em * var(--wsbn-c-title-deco-trace, 100) / -200); --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Étiquette : un aplat posé DERRIÈRE, avec de l'air à droite pour la pointe. --- */ [data-wsbn-deco="ruban"] .wsbn-classique__title-deco{ left:-.14em; right:-.46em; bottom:-.14em; height:1.4em; --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Courbe montante : la main pivote autour du poignet, le trait n'est jamais droit. --- */ [data-wsbn-deco="courbe"] .wsbn-classique__title-deco{ left:-.02em; right:-.02em; bottom:-.2em; height:calc(.34em * var(--wsbn-c-title-deco-trace, 100) / 100); --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Courbe descendante --- */ [data-wsbn-deco="courbe-descendante"] .wsbn-classique__title-deco{ left:-.02em; right:-.02em; bottom:-.2em; height:calc(.34em * var(--wsbn-c-title-deco-trace, 100) / 100); --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Trait fin vers épais : se pose léger à gauche, appuie à droite. --- */ [data-wsbn-deco="pinceau"] .wsbn-classique__title-deco{ left:-.03em; right:-.03em; bottom:-.18em; height:calc(.26em * var(--wsbn-c-title-deco-trace, 100) / 100); --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* --- Trait fin vers épais, montant --- */ [data-wsbn-deco="pinceau-montee"] .wsbn-classique__title-deco{ left:-.03em; right:-.03em; bottom:-.2em; height:calc(.34em * var(--wsbn-c-title-deco-trace, 100) / 100); --wsbn-c-deco-m:url('data:image/svg+xml;utf8,'); } /* `courbe-degrade` : clé conservée pour les titres déjà réglés, retirée du choix. Elle n'avait de raison d'être que parce qu'un `stroke` n'accepte pas de dégradé ; maintenant que la décoration est un fond, le groupe « Couleur » en pose un sur n'importe laquelle. Le rendu la ramène à `courbe`, il n'y a donc rien à écrire ici. */ /* -------------------------------------------------------------------------- ENTRÉE DES DÉCORATIONS TRACÉES « Suit le texte » (auto) ET « Tracé » font tous deux un vrai tracé : c'est le principe même de cette famille, contrairement à l'ancienne où « auto » dépendait du réglage d'entrée du texte. LE RIDEAU PLUTÔT QUE `scaleX` Un `scaleX(0)` vers `scaleX(1)` écrase la forme puis la relâche : un cercle part en trait vertical et se déplie, ce qui ne ressemble à rien. Un rideau `clip-path` DÉCOUVRE la forme sans jamais la déformer, ce qui est exactement le geste d'un stylo qui avance. C'est aussi ce qui remplace le `stroke-dashoffset` d'avant, à rendu équivalent et sans SVG dans la page. -------------------------------------------------------------------------- */ .wsbn-fx-js [data-wsbn-deco-in="auto"] .wsbn-classique__title-deco--trace, .wsbn-fx-js [data-wsbn-deco-in="trace"] .wsbn-classique__title-deco--trace{ clip-path:inset(0 100% 0 0); } .wsbn-fx-on [data-wsbn-deco-in="auto"] .wsbn-classique__title-deco--trace, .wsbn-fx-on [data-wsbn-deco-in="trace"] .wsbn-classique__title-deco--trace{ transition:clip-path var(--wsbn-c-title-dur, .8s) cubic-bezier(.19, 1, .22, 1); /* Le trait arrive quand le mot est déjà largement en place : c'est ce décalage qui donne l'impression d'une décoration posée après coup. */ transition-delay:calc(var(--wsbn-c-title-rank, 0) * var(--wsbn-c-title-stagger) + var(--wsbn-c-title-dur, .8s) * .55); clip-path:inset(0 0 0 0); } /* « fondu », « zoom » et « none » n'ont plus de règle propre ici : la décoration étant devenue le même bloc que l'ancienne famille, les règles génériques plus haut dans cette feuille les couvrent déjà. */ @media (prefers-reduced-motion:reduce){ .wsbn-classique__title-deco--trace{ transition:none !important; clip-path:none !important; opacity:1 !important; } } /* ========================================================================== BOUTON ========================================================================== */ .wsbn-classique__cta{ margin-top:4px; display:var(--wsbn-c-btn-display, block); } .wsbn-classique__btn{ display:inline-flex; align-items:center; justify-content:center; width:var(--wsbn-c-btn-width, auto); max-width:100%; padding:14px 26px; border-radius:999px; cursor:pointer; line-height:1; vertical-align:top; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; /* Transitions de survol. `scale` et `translate` sont des propriétés DISTINCTES de `transform` : les animer ici ne marche donc pas sur les pieds de l'aimant, qui écrit dans `transform`. Les deux se composent. */ transition: background-color var(--wsbn-c-hover-speed, .22s) ease, color var(--wsbn-c-hover-speed, .22s) ease, border-color var(--wsbn-c-hover-speed, .22s) ease, box-shadow var(--wsbn-c-hover-speed, .22s) ease, scale var(--wsbn-c-hov-speed, .3s) ease, translate var(--wsbn-c-hov-speed, .3s) ease; } /* Le fond et la couleur de base. Qualifiés par `a` (spécificité 0-1-1) pour passer devant un éventuel `a { color: … }` de thème, mais SANS ancêtre supplémentaire : les groupes Fond / Couleur d'Elementor sont écrits en 0-2-0 et doivent pouvoir reprendre la main. */ a.wsbn-classique__btn{ background:var(--wsbn-c-btn-bg); color:var(--wsbn-c-btn-text); text-decoration:none; } a.wsbn-classique__btn:hover{ background:var(--wsbn-c-btn-bg-hover); } .wsbn-classique__btn-inner{ display:inline-flex; align-items:center; justify-content:center; gap:12px; /* Le contenu repasse au-dessus du calque de remplissage, sinon celui-ci le masquerait. */ position:relative; z-index:1; pointer-events:none; } .wsbn-classique__btn-label{white-space:normal;text-align:left} .wsbn-classique__btn-ico{ display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:0; } .wsbn-classique__btn-ico svg{width:1em;height:1em;display:block} .wsbn-classique__btn-ico svg:not([fill="none"]){fill:currentColor} /* L'icône a sa propre couleur (réglage dédié) : elle a donc besoin de sa propre transition. Celle du bouton ne couvre que la couleur du bouton. */ .wsbn-classique__btn-ico, .wsbn-classique__btn-ico svg{ transition:color var(--wsbn-c-hover-speed, .22s) ease, fill var(--wsbn-c-hover-speed, .22s) ease, scale var(--wsbn-c-hover-speed, .22s) ease, rotate var(--wsbn-c-hover-speed, .22s) ease; } /* -------------------------------------------------------------------------- NAVIGATION AU CLAVIER `:focus-visible` ne se déclenche PAS au clic souris : l'anneau n'apparaît donc que pour qui navigue au clavier, sans abîmer le rendu pour les autres. Aucun réglage : un bouton doit rester atteignable. -------------------------------------------------------------------------- */ .wsbn-classique__btn:focus-visible{ outline:2px solid currentColor; outline-offset:3px; } /* -------------------------------------------------------------------------- MOUVEMENT AU SURVOL -------------------------------------------------------------------------- */ .wsbn-c-hov-grow .wsbn-classique__btn:hover{scale:calc(1 + 0.06 * var(--wsbn-c-hov-k, 1))} .wsbn-c-hov-shrink .wsbn-classique__btn:hover{scale:calc(1 - 0.06 * var(--wsbn-c-hov-k, 1))} .wsbn-c-hov-float .wsbn-classique__btn:hover{translate:0 calc(-6px * var(--wsbn-c-hov-k, 1))} .wsbn-c-hov-sink .wsbn-classique__btn:hover{translate:0 calc(6px * var(--wsbn-c-hov-k, 1))} /* La pulsation tourne en boucle tant que la souris reste sur le bouton : c'est une animation, pas une transition. */ .wsbn-c-hov-pulse .wsbn-classique__btn:hover{ animation:wsbn-c-pulse calc(var(--wsbn-c-hov-speed, .3s) * 2.5) ease-in-out infinite; } @keyframes wsbn-c-pulse{ 0%, 100%{scale:1} 50% {scale:calc(1 + 0.05 * var(--wsbn-c-hov-k, 1))} } /* -------------------------------------------------------------------------- APPARENCES AU SURVOL - un seul choix à la fois. Les quatre « remplissages » partagent le même calque .wsbn-classique__btn-fill, posé par le rendu uniquement pour eux. Seules la FORME du calque et son ORIGINE changent d'une variante à l'autre : une seule mécanique à maintenir au lieu de quatre. Le calque est animé en `scale` / `translate` (propriétés individuelles), jamais en `transform` : l'aimant écrit dans `transform`. -------------------------------------------------------------------------- */ .wsbn-c-ap-fill-cursor .wsbn-classique__btn, .wsbn-c-ap-fill-center .wsbn-classique__btn, .wsbn-c-ap-fill-wipe .wsbn-classique__btn{ position:relative; /* Le calque déborde volontairement du bouton : on le rogne à la pilule. */ overflow:hidden; } .wsbn-classique__btn-fill{ position:absolute; pointer-events:none; z-index:0; background-color:#ffffff; } /* --- Remplissage circulaire. `--wsbn-c-ox-x/y` sont posées par le script au point où la souris entre ; sans script (ou en mode « depuis le centre ») elles valent 50 % et le cercle part du milieu. --- */ .wsbn-c-ap-fill-cursor .wsbn-classique__btn-fill, .wsbn-c-ap-fill-center .wsbn-classique__btn-fill{ top:var(--wsbn-c-ox-y, 50%); left:var(--wsbn-c-ox-x, 50%); /* Diamètre calculé par le script (plus petit disque couvrant le bouton depuis le point d'entrée). Repli à 260 % si le script n'a pas tourné. */ width:var(--wsbn-c-fill-d, 260%); aspect-ratio:1; border-radius:50%; translate:-50% -50%; scale:0; transition:scale var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)); } /* Le mode « depuis le centre » ne doit RIEN au curseur : il écrase les variables que le script pourrait avoir posées. */ .wsbn-c-ap-fill-center .wsbn-classique__btn-fill{ width:260%; top:50%; left:50%; } .wsbn-c-ap-fill-cursor .wsbn-classique__btn:hover .wsbn-classique__btn-fill, .wsbn-c-ap-fill-center .wsbn-classique__btn:hover .wsbn-classique__btn-fill{ scale:1; } /* --- Balayage latéral. Le calque couvre déjà tout le bouton et s'ouvre HORIZONTALEMENT depuis le point où la souris est entrée : entrée par la droite = balayage vers la gauche. --- */ .wsbn-c-ap-fill-wipe .wsbn-classique__btn-fill{ inset:0; border-radius:inherit; transform-origin:var(--wsbn-c-ox-x, 0%) 50%; scale:0 1; opacity:0; transition:scale var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)), opacity calc(var(--wsbn-c-ap-speed, .45s) * 0.4) ease; } .wsbn-c-ap-fill-wipe .wsbn-classique__btn:hover .wsbn-classique__btn-fill{ scale:1 1; opacity:1; } /* -------------------------------------------------------------------------- PILULE QUI S'ÉLARGIT + FLÈCHE QUI BASCULE Aucune balise ajoutée, et surtout AUCUN réglage de l'utilisateur écrasé : - la pastille est mise en `position: absolute` à droite du bouton. Sortie du flux, elle n'est plus peinte par le fond de la pilule : elle se lit comme un bouton rond séparé, alors que le HTML n'a pas bougé d'un caractère ; - l'élargissement est posé sur le CONTENU, jamais sur la pilule. Ajouter du `padding` à la pilule écraserait celui que l'utilisateur a réglé dans Style ; en poussant le contenu, la pilule s'élargit d'elle-même. -------------------------------------------------------------------------- */ .wsbn-c-ap-expand-pill .wsbn-classique__btn{ position:relative; /* La pastille vit en dehors du cadre : surtout ne pas rogner. */ overflow:visible; } .wsbn-c-ap-expand-pill .wsbn-classique__btn-inner{ transition:padding-inline-end var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .wsbn-c-ap-expand-pill .wsbn-classique__btn:hover .wsbn-classique__btn-inner{ padding-inline-end:var(--wsbn-c-ap-grow, 48px); } .wsbn-c-ap-expand-pill .wsbn-classique__btn-ico{ position:absolute; left:100%; top:50%; translate:0 -50%; margin-inline-start:var(--wsbn-c-ap-gap, 10px); aspect-ratio:1; padding:0.62em; border-radius:50%; background-color:var(--wsbn-c-ap-color, #d7f751); color:var(--wsbn-c-ap-icon-color, #0b0b0b); } .wsbn-c-ap-expand-pill .wsbn-classique__btn-ico svg{fill:currentColor} /* `rotate` est une propriété à part entière : elle ne se dispute ni le `translate` de la pastille ni le `transform` que l'aimant utilise. */ .wsbn-c-ap-expand-pill .wsbn-classique__btn-ico svg, .wsbn-c-ap-expand-pill .wsbn-classique__btn-ico i{ display:block; transition:rotate var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .wsbn-c-ap-expand-pill .wsbn-classique__btn:hover .wsbn-classique__btn-ico svg, .wsbn-c-ap-expand-pill .wsbn-classique__btn:hover .wsbn-classique__btn-ico i{ rotate:180deg; } /* -------------------------------------------------------------------------- PASTILLE QUI S'INVERSE La pastille et son icône ÉCHANGENT leurs couleurs, la pastille GROSSIT nettement, et le libellé s'EFFACE presque entièrement. -------------------------------------------------------------------------- */ .wsbn-c-ap-icon-pop .wsbn-classique__btn-ico{ aspect-ratio:1; padding:0.35em; border-radius:50%; background-color:var(--wsbn-c-ap-color, #ffffff); color:var(--wsbn-c-ap-icon-color, #0b0b0b); /* `color` et `fill` sont repris ici : cette règle est plus spécifique que la transition générale de l'icône et l'écraserait sinon, faisant sauter le changement de couleur d'un coup sec dans ce mode. */ transition:background-color var(--wsbn-c-ap-speed, .45s) ease, color var(--wsbn-c-ap-speed, .45s) ease, fill var(--wsbn-c-ap-speed, .45s) ease, scale var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .wsbn-c-ap-icon-pop .wsbn-classique__btn-ico svg{fill:currentColor} .wsbn-c-ap-icon-pop .wsbn-classique__btn:hover .wsbn-classique__btn-ico{ background-color:var(--wsbn-c-ap-color-inv, #0b0b0b); color:var(--wsbn-c-ap-icon-color-inv, #ffffff); scale:var(--wsbn-c-ap-pop-scale, 1.28); } /* Le libellé s'efface pour laisser la pastille prendre la place. */ .wsbn-c-ap-icon-pop .wsbn-classique__btn-label{ transition:opacity var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .wsbn-c-ap-icon-pop .wsbn-classique__btn:hover .wsbn-classique__btn-label{ opacity:var(--wsbn-c-ap-label-fade, 0.08); } .wsbn-c-ap-icon-pop .wsbn-classique__btn-ico svg, .wsbn-c-ap-icon-pop .wsbn-classique__btn-ico i{ transition:rotate var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .wsbn-c-ap-icon-pop .wsbn-classique__btn:hover .wsbn-classique__btn-ico svg, .wsbn-c-ap-icon-pop .wsbn-classique__btn:hover .wsbn-classique__btn-ico i{ rotate:var(--wsbn-c-ap-rotate, 0deg); } /* --- Pastille qui s'efface en diagonale. DEUX disques empilés. Celui du dessus est visible au repos ; au survol il rétrécit à ~15 % en filant en haut à droite, ce qui découvre celui du dessous. Le disque du dessus est un pseudo-élément : aucune balise ajoutée. --- */ .wsbn-c-ap-icon-swap .wsbn-classique__btn-ico{ position:relative; aspect-ratio:1; padding:0.35em; border-radius:50%; /* Disque du DESSOUS : celui qu'on découvre. */ background-color:var(--wsbn-c-ap-color, rgba(255, 255, 255, 0.18)); } .wsbn-c-ap-icon-swap .wsbn-classique__btn-ico::before{ content:""; position:absolute; inset:0; border-radius:50%; background-color:var(--wsbn-c-ap-color-top, #ffffff); transition:scale var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)), translate var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)), opacity var(--wsbn-c-ap-speed, .45s) ease; } /* L'icône doit rester AU-DESSUS des deux disques. */ .wsbn-c-ap-icon-swap .wsbn-classique__btn-ico svg, .wsbn-c-ap-icon-swap .wsbn-classique__btn-ico i{ position:relative; z-index:1; } .wsbn-c-ap-icon-swap .wsbn-classique__btn:hover .wsbn-classique__btn-ico::before{ scale:0.15; translate:60% -60%; opacity:0; } /* --- Relais de flèche en diagonale, posé avec le soulignement. La fenêtre masque le débordement : la première icône sort en haut à droite pendant que sa copie entre par en bas à gauche. --- */ .wsbn-c-ap-underline .wsbn-classique__btn-ico-slot{ position:relative; display:inline-flex; overflow:hidden; flex:0 0 auto; } .wsbn-c-ap-underline .wsbn-classique__btn-ico-slot .wsbn-classique__btn-ico{ transition:translate var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .wsbn-c-ap-underline .wsbn-classique__btn-ico--dup{ position:absolute; inset:0; translate:-100% 100%; } .wsbn-c-ap-underline .wsbn-classique__btn:hover .wsbn-classique__btn-ico-slot .wsbn-classique__btn-ico{ translate:100% -100%; } .wsbn-c-ap-underline .wsbn-classique__btn:hover .wsbn-classique__btn-ico--dup{ translate:0 0; } /* --- Soulignement qui se relaie : deux barres sur le libellé. La première se retire vers la droite pendant que la seconde entre par la gauche. Les pseudo-éléments du libellé sont libres (celui du bouton sert déjà au reflet de lumière). --- */ .wsbn-c-ap-underline .wsbn-classique__btn-label{ position:relative; } /* `:not(--clone)` : combiné au glissement de texte, le libellé est dédoublé. Sans cette exclusion, la copie porterait elle aussi ses deux barres et on verrait un soulignement fantôme passer avec elle. */ .wsbn-c-ap-underline .wsbn-classique__btn-label:not(.wsbn-classique__btn-label--clone)::before, .wsbn-c-ap-underline .wsbn-classique__btn-label:not(.wsbn-classique__btn-label--clone)::after{ content:""; position:absolute; left:0; right:0; bottom:-0.18em; height:1px; background-color:currentColor; transition:scale var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .wsbn-c-ap-underline .wsbn-classique__btn-label::before{ transform-origin:right center; scale:1 1; } .wsbn-c-ap-underline .wsbn-classique__btn-label::after{ transform-origin:left center; scale:0 1; /* Entre juste après que la première soit partie : c'est ce décalage qui donne l'impression d'un relais, et non d'un simple aller-retour. */ transition-delay:calc(var(--wsbn-c-ap-speed, .45s) * 0.35); } .wsbn-c-ap-underline .wsbn-classique__btn:hover .wsbn-classique__btn-label::before{scale:0 1} .wsbn-c-ap-underline .wsbn-classique__btn:hover .wsbn-classique__btn-label::after {scale:1 1} /* --- Lettres en cascade : chaque lettre part avec un retard proportionnel à son rang, ce qui dessine une vague de gauche à droite. --- */ .wsbn-c-ap-letters .wsbn-classique__btn-char{ display:inline-block; /* white-space: pre évite que le navigateur avale l'espace insécable. */ white-space:pre; transition:translate var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)); transition-delay:calc(var(--wsbn-c-ltr, 0) * var(--wsbn-c-ap-stagger, .03s)); } /* Le sens vient d'un simple signe (-1 = haut, 1 = bas) : une seule règle couvre les deux directions. */ .wsbn-c-ap-letters .wsbn-classique__btn:hover .wsbn-classique__btn-char{ translate:0 calc(0.22em * var(--wsbn-c-ap-dir, -1)); } /* --- Lettres qui roulent. Chaque LETTRE a sa propre copie posée juste en dessous, dans une fenêtre à débordement masqué. Au survol la lettre sort, la copie prend sa place. Le dédoublement au niveau de la lettre (et non du mot) est ce qui produit le roulement en cascade plutôt qu'un bloc qui glisse d'un seul tenant. */ .wsbn-c-ap-letters-roll .wsbn-classique__btn-char{ position:relative; display:inline-block; overflow:hidden; white-space:pre; vertical-align:bottom; } .wsbn-c-ap-letters-roll .wsbn-classique__btn-glyph{ display:block; transition:translate var(--wsbn-c-ap-speed, .45s) var(--wsbn-c-ap-ease, cubic-bezier(0.16, 1, 0.3, 1)); transition-delay:calc(var(--wsbn-c-ltr, 0) * var(--wsbn-c-ap-stagger, .03s)); } /* La copie attend hors champ, du côté opposé au sens de sortie. */ .wsbn-c-ap-letters-roll .wsbn-classique__btn-glyph--dup{ position:absolute; inset:0; translate:0 calc(100% * var(--wsbn-c-ap-dir, -1) * -1); } .wsbn-c-ap-letters-roll .wsbn-classique__btn:hover .wsbn-classique__btn-glyph{ translate:0 calc(100% * var(--wsbn-c-ap-dir, -1)); } .wsbn-c-ap-letters-roll .wsbn-classique__btn:hover .wsbn-classique__btn-glyph--dup{ translate:0 0; } /* -------------------------------------------------------------------------- GLISSEMENT DU TEXTE AU SURVOL Le libellé est dédoublé : le visible part, la copie arrive du côté opposé. -------------------------------------------------------------------------- */ .wsbn-classique__btn-label-wrap{ position:relative; display:inline-block; overflow:hidden; line-height:1.2; vertical-align:middle; } .wsbn-classique__btn-label-wrap .wsbn-classique__btn-label{ display:block; transition:transform var(--wsbn-c-swipe-duration, 400ms) cubic-bezier(0.65, 0, 0.35, 1); } .wsbn-classique__btn-label--clone{ position:absolute; top:0; left:0; } .wsbn-c-swipe-up .wsbn-classique__btn-label--visible{transform:translateY(0)} .wsbn-c-swipe-up .wsbn-classique__btn-label--clone {transform:translateY(100%)} .wsbn-c-swipe-up .wsbn-classique__btn:hover .wsbn-classique__btn-label--visible{transform:translateY(-100%)} .wsbn-c-swipe-up .wsbn-classique__btn:hover .wsbn-classique__btn-label--clone {transform:translateY(0)} .wsbn-c-swipe-down .wsbn-classique__btn-label--visible{transform:translateY(0)} .wsbn-c-swipe-down .wsbn-classique__btn-label--clone {transform:translateY(-100%)} .wsbn-c-swipe-down .wsbn-classique__btn:hover .wsbn-classique__btn-label--visible{transform:translateY(100%)} .wsbn-c-swipe-down .wsbn-classique__btn:hover .wsbn-classique__btn-label--clone {transform:translateY(0)} .wsbn-c-swipe-left .wsbn-classique__btn-label--visible{transform:translateX(0)} .wsbn-c-swipe-left .wsbn-classique__btn-label--clone {transform:translateX(100%)} .wsbn-c-swipe-left .wsbn-classique__btn:hover .wsbn-classique__btn-label--visible{transform:translateX(-100%)} .wsbn-c-swipe-left .wsbn-classique__btn:hover .wsbn-classique__btn-label--clone {transform:translateX(0)} .wsbn-c-swipe-right .wsbn-classique__btn-label--visible{transform:translateX(0)} .wsbn-c-swipe-right .wsbn-classique__btn-label--clone {transform:translateX(-100%)} .wsbn-c-swipe-right .wsbn-classique__btn:hover .wsbn-classique__btn-label--visible{transform:translateX(100%)} .wsbn-c-swipe-right .wsbn-classique__btn:hover .wsbn-classique__btn-label--clone {transform:translateX(0)} /* -------------------------------------------------------------------------- ENFONCEMENT AU CLIC Placé APRÈS les mouvements de survol : à spécificité égale, la dernière règle gagne. Le bouton enfoncé l'emporte donc sur le bouton survolé, ce qui est l'ordre attendu (on survole avant de cliquer). Les deux sélecteurs sont nécessaires : avec survol (souris) et sans (clavier, écran tactile). -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- VERRE DÉPOLI - le fond translucide et la bordure viennent des réglages Elementor (portés par .wsbn-c-glass-yes, plus spécifiques). Il ne reste ici que ce qui n'est pas réglable : isoler la couche pour que le flou ne bave pas. -------------------------------------------------------------------------- */ .wsbn-c-glass-yes .wsbn-classique__btn{ isolation:isolate; -webkit-backdrop-filter:blur(12px); } /* -------------------------------------------------------------------------- REFLET DE LUMIÈRE - une bande claire traverse le bouton. Trois modes : .wsbn-c-fx-shine au survol seulement .wsbn-c-fx-loop en boucle, en permanence .wsbn-c-fx-shine-loop en boucle, et le passage accélère au survol -------------------------------------------------------------------------- */ .wsbn-c-fx-shine .wsbn-classique__btn, .wsbn-c-fx-loop .wsbn-classique__btn, .wsbn-c-fx-shine-loop .wsbn-classique__btn{ position:relative; } .wsbn-c-fx-shine .wsbn-classique__btn::before, .wsbn-c-fx-loop .wsbn-classique__btn::before, .wsbn-c-fx-shine-loop .wsbn-classique__btn::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; /* La bande est centrée sur 50 % et s'étale de +/- la largeur choisie. */ background-image:linear-gradient( var(--wsbn-c-fx-angle, 105deg), transparent calc(50% - var(--wsbn-c-fx-band, 12) * 1%), color-mix(in srgb, var(--wsbn-c-fx-color, #fff) 70%, transparent) 50%, transparent calc(50% + var(--wsbn-c-fx-band, 12) * 1%) ); background-repeat:no-repeat; background-size:220% 100%; /* Position de repos : hors du bouton, à droite. */ background-position:150% 0; } /* --- Au survol seulement : une transition suffit, pas d'animation. --- */ .wsbn-c-fx-shine .wsbn-classique__btn::before{ transition:background-position var(--wsbn-c-fx-speed, .4s) ease; } .wsbn-c-fx-shine .wsbn-classique__btn:hover::before{ background-position:-50% 0; } /* --- En boucle : le passage occupe le début du cycle, le reste est une pause. Aux deux extrémités la bande est hors du bouton, le retour à la position de départ est donc invisible. --- */ .wsbn-c-fx-loop .wsbn-classique__btn::before, .wsbn-c-fx-shine-loop .wsbn-classique__btn::before{ animation:wsbn-c-shine-loop var(--wsbn-c-fx-loop-speed, 4s) ease-in-out infinite; } @keyframes wsbn-c-shine-loop{ 0% {background-position:150% 0} 40%, 100%{background-position:-50% 0} } /* --- Boucle + survol : le cycle s'accélère tant que la souris est dessus. On ne cumule pas deux mécanismes sur la même propriété : on change simplement la durée de celui qui tourne déjà. --- */ .wsbn-c-fx-shine-loop .wsbn-classique__btn:hover::before{ animation-duration:var(--wsbn-c-fx-speed, .4s); } /* -------------------------------------------------------------------------- EFFETS PERMANENTS DU BOUTON - les mêmes apparences, en boucle. Même vocabulaire que le survol, seul le déclencheur change : une animation CSS au lieu de :hover. Fonctionne donc AU DOIGT, là où tous les effets de survol sont inertes. RYTHME COMMUN, en une seule durée réglable : 0 % repos -> 20 % actif (aller) 55 % actif -> 75 % repos (retour) 100 % repos (pause avant de recommencer) Placées APRÈS les règles de survol : à spécificité égale, la dernière gagne. Si les deux sont actifs, la boucle pilote. -------------------------------------------------------------------------- */ .wsbn-c-perm-fill-center .wsbn-classique__btn-fill, .wsbn-c-perm-fill-wipe .wsbn-classique__btn-fill, .wsbn-c-perm-icon-pop .wsbn-classique__btn-ico, .wsbn-c-perm-icon-swap .wsbn-classique__btn-ico::before, .wsbn-c-perm-underline .wsbn-classique__btn-label::before, .wsbn-c-perm-underline .wsbn-classique__btn-label::after, .wsbn-c-perm-letters .wsbn-classique__btn-char, .wsbn-c-perm-letters-roll .wsbn-classique__btn-glyph{ animation-duration:var(--wsbn-c-perm-dur, 4s); animation-timing-function:var(--wsbn-c-perm-ease, cubic-bezier(0.16, 1, 0.3, 1)); animation-delay:var(--wsbn-c-perm-delay, 0s); animation-iteration-count:infinite; } .wsbn-c-perm-fill-center .wsbn-classique__btn, .wsbn-c-perm-fill-wipe .wsbn-classique__btn{ position:relative; overflow:hidden; } .wsbn-c-perm-fill-center .wsbn-classique__btn-fill{ top:50%;left:50%; width:260%;aspect-ratio:1; border-radius:50%; translate:-50% -50%; animation-name:wsbn-c-perm-disque; } @keyframes wsbn-c-perm-disque{ 0%, 100%{scale:0} 20%, 55%{scale:1} 75% {scale:0} } .wsbn-c-perm-fill-wipe .wsbn-classique__btn-fill{ inset:0; border-radius:inherit; transform-origin:0% 50%; animation-name:wsbn-c-perm-balayage; } @keyframes wsbn-c-perm-balayage{ 0%, 100%{scale:0 1;opacity:0} 12% {opacity:1} 20%, 55%{scale:1 1;opacity:1} 75% {scale:1 1;opacity:0} 76% {scale:0 1;opacity:0} } .wsbn-c-perm-icon-pop .wsbn-classique__btn-ico{ aspect-ratio:1;padding:0.35em;border-radius:50%; animation-name:wsbn-c-perm-pastille; } @keyframes wsbn-c-perm-pastille{ 0%, 100%{background-color:transparent;scale:1} 20%, 55%{background-color:var(--wsbn-c-ap-color, rgba(255,255,255,.18));scale:1.12} 75% {background-color:transparent;scale:1} } .wsbn-c-perm-icon-swap .wsbn-classique__btn-ico{ position:relative; aspect-ratio:1;padding:0.35em;border-radius:50%; background-color:var(--wsbn-c-ap-color, rgba(255,255,255,.18)); } .wsbn-c-perm-icon-swap .wsbn-classique__btn-ico::before{ content:"";position:absolute;inset:0;border-radius:50%; background-color:var(--wsbn-c-ap-color-top, #ffffff); animation-name:wsbn-c-perm-diagonale; } .wsbn-c-perm-icon-swap .wsbn-classique__btn-ico svg, .wsbn-c-perm-icon-swap .wsbn-classique__btn-ico i{position:relative;z-index:1} @keyframes wsbn-c-perm-diagonale{ 0%, 100%{scale:1;translate:0 0;opacity:1} 20%, 55%{scale:.15;translate:60% -60%;opacity:0} 75% {scale:1;translate:0 0;opacity:1} } .wsbn-c-perm-underline .wsbn-classique__btn-label{position:relative} .wsbn-c-perm-underline .wsbn-classique__btn-label:not(.wsbn-classique__btn-label--clone)::before, .wsbn-c-perm-underline .wsbn-classique__btn-label:not(.wsbn-classique__btn-label--clone)::after{ content:"";position:absolute;left:0;right:0;bottom:-0.18em; height:1px;background-color:currentColor; } .wsbn-c-perm-underline .wsbn-classique__btn-label::before{ transform-origin:right center; animation-name:wsbn-c-perm-barre-sort; } .wsbn-c-perm-underline .wsbn-classique__btn-label::after{ transform-origin:left center; animation-name:wsbn-c-perm-barre-entre; } @keyframes wsbn-c-perm-barre-sort{ 0%, 100%{scale:1 1} 20%, 55%{scale:0 1} 75% {scale:1 1} } @keyframes wsbn-c-perm-barre-entre{ 0%, 100%{scale:0 1} 25%, 55%{scale:1 1} 78% {scale:0 1} } .wsbn-c-perm-letters .wsbn-classique__btn-char{ display:inline-block;white-space:pre; animation-name:wsbn-c-perm-lettre; animation-delay:calc(var(--wsbn-c-perm-delay, 0s) + var(--wsbn-c-ltr, 0) * var(--wsbn-c-ap-stagger, .03s)); } @keyframes wsbn-c-perm-lettre{ 0%, 100%{translate:0 0} 20%, 55%{translate:0 calc(.22em * var(--wsbn-c-ap-dir, -1))} 75% {translate:0 0} } .wsbn-c-perm-letters-roll .wsbn-classique__btn-char{ position:relative;display:inline-block;overflow:hidden; white-space:pre;vertical-align:bottom; } .wsbn-c-perm-letters-roll .wsbn-classique__btn-glyph{ display:block; animation-name:wsbn-c-perm-roule; animation-delay:calc(var(--wsbn-c-perm-delay, 0s) + var(--wsbn-c-ltr, 0) * var(--wsbn-c-ap-stagger, .03s)); } .wsbn-c-perm-letters-roll .wsbn-classique__btn-glyph--dup{ position:absolute;inset:0; animation-name:wsbn-c-perm-roule-dup; } @keyframes wsbn-c-perm-roule{ 0%, 100%{translate:0 0} 20%, 55%{translate:0 calc(100% * var(--wsbn-c-ap-dir, -1))} 75% {translate:0 0} } @keyframes wsbn-c-perm-roule-dup{ 0%, 100%{translate:0 calc(100% * var(--wsbn-c-ap-dir, -1) * -1)} 20%, 55%{translate:0 0} 75% {translate:0 calc(100% * var(--wsbn-c-ap-dir, -1) * -1)} } /* -------------------------------------------------------------------------- EFFET AU CLIC - gerbe de particules Une particule est une boîte VIDE : sa forme vient d'un `clip-path` ou d'un arrondi, jamais d'un SVG posé dans le DOM. Elles sont créées au clic puis RETIRÉES à la fin de leur animation : rien ne subsiste entre deux clics. On n'anime que `opacity` et `transform`, écrits en entier dans les clés : les deux seules propriétés que le navigateur confie à la carte graphique. -------------------------------------------------------------------------- */ /* Le calque suit le bouton. `overflow: visible` est VOLONTAIRE : les particules doivent pouvoir sortir du bouton, c'est tout l'intérêt. */ .wsbn-classique__burst-layer{ position:absolute; inset:0; overflow:visible; pointer-events:none; /* ne vole jamais un clic au lien */ z-index:4; } .wsbn-classique__burst{ position:absolute; width:var(--wsbn-c-b-size, 8px); height:var(--wsbn-c-b-size, 8px); background-color:var(--wsbn-c-b-color, currentColor); pointer-events:none; opacity:0; } .wsbn-classique__burst--rond {border-radius:50%} .wsbn-classique__burst--carre {border-radius:2px} .wsbn-classique__burst--triangle{clip-path:polygon(50% 0%, 100% 100%, 0% 100%)} .wsbn-classique__burst--etoile { clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } @keyframes wsbn-c-burst{ 0%{ opacity:1; transform:translate(-50%, -50%) rotate(var(--wsbn-c-b-angle, 0deg)) translateX(0) scale(1); } 100%{ opacity:0; transform:translate(-50%, -50%) rotate(var(--wsbn-c-b-angle, 0deg)) translateX(var(--wsbn-c-b-range, 90px)) scale(0.3); } } /* -------------------------------------------------------------------------- RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width:1024px){ .wsbn-classique__body{max-width:min(var(--wsbn-c-body-w), 86%)} } @media (max-width:767px){ /* Disposition « Plein cadre » : la photo reste en fond à toutes les tailles, juste repositionnée pour la lisibilité. */ .wsbn-classique--fullbleed{min-height:380px} .wsbn-classique--fullbleed .wsbn-classique__media img{object-position:center 22%} /* Disposition « Empilé » : la photo passe en bandeau plein-largeur au dessus (ratio fixe, pas une hauteur en px qui recadre n'importe comment), le texte descend dans un bloc uni. Même couleur qu'en plein cadre (--wsbn-c-ov-1) : rien à re-choisir pour le mobile. */ /* En "Empile", la marge interieure du cadre ne veut plus dire "espace autour de la photo et du texte" (qui doivent toujours toucher les bords en mobile empile), elle devient "espace de lecture A L'INTERIEUR du bloc de texte" : le cadre lui-meme repasse a 0, le bloc de texte applique les 4 valeurs sur LUI-MEME. Sans ca, le reglage "Marge interieure" laissait un bandeau blanc entre le cadre et son contenu - visible aussi bien au-dessus de la photo qu'autour du bloc bleu. */ .wsbn-classique--stacked{display:block;min-height:0;padding:0} .wsbn-classique--stacked .wsbn-classique__media{position:relative;inset:auto;aspect-ratio:4/3} .wsbn-classique--stacked .wsbn-classique__scrim{display:none} .wsbn-classique--stacked .wsbn-classique__body{ max-width:none; background:var(--wsbn-c-ov-1); /* En empile, le bloc de texte EST le fond colore : le deplacer decouvrirait une bande vide le long du bord. Le placement n'a donc pas de sens ici, et il est neutralise plutot que laisse produire un defaut que personne ne rattacherait a son curseur. */ translate:none; padding:var(--wsbn-c-pad-t, 24px) var(--wsbn-c-pad-r, 24px) var(--wsbn-c-pad-b, 24px) var(--wsbn-c-pad-l, 24px); } .wsbn-classique__body{max-width:none} } /* -------------------------------------------------------------------------- ACCESSIBILITÉ Le visiteur qui demande moins d'animations reçoit la bannière complète, posée, sans mouvement. Le script ne pose alors même pas .wsbn-fx-js, mais on coupe aussi les boucles, qui elles n'en dépendent pas. -------------------------------------------------------------------------- */ @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-char, .wsbn-classique__title .wsbn-classique__title-deco{ animation:none !important; opacity:1 !important; transform:none !important; } /* La bande du balayage disparaît COMPLÈTEMENT. C'est le cas le plus important de tout ce bloc : le script ne s'installe pas quand on demande moins d'animations, donc rien ne viendrait retirer la bande. Sans cette règle, ces visiteurs auraient un titre couvert pour toujours. */ .wsbn-classique__title[data-wsbn-title-in="balayage"] .wsbn-classique__title-part::after{ animation:none !important; transform:scaleX(0) !important; } [data-wsbn-deco="croix"] .wsbn-classique__title-deco{ transform:rotate(var(--wsbn-c-title-cross)) !important; } /* Le bouton reste parfaitement utilisable : on retire le mouvement, pas l'état de survol (couleurs, fond, bordure restent actifs). */ .wsbn-classique__badge, .wsbn-classique__btn, .wsbn-classique__btn-fill, .wsbn-classique__btn-ico, .wsbn-classique__btn-ico svg, .wsbn-classique__btn-ico i, .wsbn-classique__btn-label, .wsbn-classique__btn-label-wrap .wsbn-classique__btn-label, .wsbn-classique__btn-char, .wsbn-classique__btn-glyph, .wsbn-c-ap-icon-swap .wsbn-classique__btn-ico::before, .wsbn-c-ap-underline .wsbn-classique__btn-label::before, .wsbn-c-ap-underline .wsbn-classique__btn-label::after, .wsbn-c-fx-shine .wsbn-classique__btn::before{ transition:none !important; } /* La cascade n'a plus lieu d'être : les lettres ne bougent pas du tout. */ .wsbn-c-ap-letters .wsbn-classique__btn:hover .wsbn-classique__btn-char{ translate:none; } /* Le reflet en boucle est un mouvement permanent : c'est exactement ce que ce réglage système demande de supprimer. */ .wsbn-c-fx-loop .wsbn-classique__btn::before, .wsbn-c-fx-shine-loop .wsbn-classique__btn::before, .wsbn-c-fx-shine-loop .wsbn-classique__btn:hover::before{ animation:none; } .wsbn-c-hov-pulse .wsbn-classique__btn:hover{animation:none} .wsbn-c-hov-grow .wsbn-classique__btn:hover, .wsbn-c-hov-shrink .wsbn-classique__btn:hover{scale:1} .wsbn-c-hov-float .wsbn-classique__btn:hover, .wsbn-c-hov-sink .wsbn-classique__btn:hover{translate:none} [class*="wsbn-c-perm-"] .wsbn-classique__btn-fill, [class*="wsbn-c-perm-"] .wsbn-classique__btn-ico, [class*="wsbn-c-perm-"] .wsbn-classique__btn-ico::before, [class*="wsbn-c-perm-"] .wsbn-classique__btn-label::before, [class*="wsbn-c-perm-"] .wsbn-classique__btn-label::after, [class*="wsbn-c-perm-"] .wsbn-classique__btn-char, [class*="wsbn-c-perm-"] .wsbn-classique__btn-glyph{ animation:none !important; } /* Second verrou : le script ne crée aucune particule, cette règle ne sert que si l'une existait déjà. */ .wsbn-classique__burst{animation:none !important;opacity:0} } /* ======================================================================= VEILLE DES ANIMATIONS `wsbn-hors-vue` est posee sur la banniere par ws-banniere-veille.js quand elle quitte l'ecran, `wsbn-onglet-cache` sur quand l'onglet passe en arriere-plan. Une boucle qu'on ne voit pas ne doit pas composer d'image. Sans le script, aucune de ces classes n'existe et tout joue normalement : on ne peut pas figer une banniere en cassant un fichier. ======================================================================= */ .wsbn-hors-vue, .wsbn-hors-vue *, .wsbn-hors-vue::before, .wsbn-hors-vue::after, .wsbn-hors-vue *::before, .wsbn-hors-vue *::after, .wsbn-onglet-cache .wsbn-classique *, .wsbn-onglet-cache .wsbn-arc *, .wsbn-onglet-cache .wsbn-hero *, .wsbn-onglet-cache .wsbn-hv *, .wsbn-onglet-cache .wsbn-imm *, .wsbn-onglet-cache .wsbn-vision * { animation-play-state: paused !important; }