/*
 * WS Banniere - le passage mis en valeur dans un titre
 *
 * UNE SEULE REGLE POUR QUATRE ALLURES.
 * Couleur seule, marqueur, souligne, bloc plein : c'est le meme degre de fond
 * a chaque fois, dont on ne change que la hauteur et la position. Le select du
 * panneau ne fait qu'ecrire ces variables, ce qui lui evite de changer le
 * balisage, donc de reclamer un rendu au serveur a chaque clic.
 *
 * POURQUOI UN FOND, ET PAS UN `::before` EN `z-index:-1`
 * Un pseudo-element place derriere son parent passe aussi derriere le VOILE
 * des que la banniere en pose un sur sa photo, et le surlignage disparait
 * sans qu'on comprenne pourquoi. Un fond est peint derriere les lettres de
 * l'element lui-meme : il n'y a aucun empilement a arbitrer.
 *
 * Il suit en prime chaque ligne quand le texte se coupe : un fond d'element en
 * ligne est dessine par FRAGMENT. C'est le bon defaut, et c'est celui que
 * Classique a retenu pour ses decorations de titre.
 *
 * CHAQUE `var()` PORTE SON REPLI.
 * Ces variables viennent des `selectors` d'Elementor, donc d'une feuille
 * engendree. Partout ou elle n'est pas encore la (apercu sans styles, page
 * lue avant la fin du chargement), un `var()` nu serait INVALIDE, pas vide :
 * le fond deviendrait noir et le texte transparent. Avec un repli, on retombe
 * simplement sur du texte normal.
 *
 * SPECIFICITE FAIBLE, ET C'EST VOULU.
 * Elementor ecrit `.elementor-element-XXX .classe`, en 0-2-0. Nos defauts
 * doivent perdre contre lui.
 */

.wsbn-hl{
  /* `inherit` et non `currentColor` : sous un marqueur, les lettres gardent
     la couleur du titre, quelle qu'elle soit. */
  color:var(--wsbn-hl-encre, inherit);

  /* Un degrade d'une seule couleur, c'est un aplat qu'on peut dimensionner.
     Une couleur de fond simple ne se dimensionne pas. */
  background-image:linear-gradient(var(--wsbn-hl, transparent), var(--wsbn-hl, transparent));
  background-repeat:no-repeat;
  background-size:100% var(--wsbn-hl-h, 0);
  background-position:0 var(--wsbn-hl-y, 88%);

  padding:var(--wsbn-hl-pad, 0);
  border-radius:var(--wsbn-hl-radius, 0);

  /* Le fond du bloc plein deborde un peu du texte sans pousser les mots
     voisins : c'est la respiration qu'on attend d'une etiquette. */
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}