/* ==========================================================================
   WS Bannière - Arc
   Panneau de texte à gauche, média plein cadre à droite, séparés par une
   COURBE et non par une ligne droite.

   CETTE FEUILLE NE COUVRE NI LE TITRE NI LE BOUTON : ils sont repris de la
   bannière Classique, balisage compris, et habillés par sa propre feuille
   (ws-banniere-classique.css, déclarée en dépendance).

   COMMENT LE RACCORD EST FABRIQUÉ (l'idée centrale du widget)
   Le média occupe TOUTE la bannière. Ce n'est pas une colonne de grille :
   c'est le panneau crème qui est une FORME posée par-dessus, donc son bord
   droit n'est jamais obligé d'être une ligne. Quatre couches empilées :

     z0  .wsbn-arc__media   le média, plein cadre
     z1  .wsbn-arc__voile   voile crème large : il désature le bord gauche du
                            média pour que les deux matières se parlent
     z2  .wsbn-arc__glow    LA MÊME courbe, décalée vers la droite et floutée.
                            C'est elle qui fait le dégradé, et il reste
                            parallèle au trait quelle que soit la courbe.
     z3  .wsbn-arc__arc     la courbe nette, qui tient le dessin
     z4+ le texte, la pastille, le bouton son

   Les deux SVG portent width/height explicites : un <svg> sans dimensions,
   même en position:absolute;inset:0, retombe sur sa taille intrinsèque et la
   courbe se retrouve écrasée dans un coin.

   RÈGLE DE SPÉCIFICITÉ
   Mêmes contraintes que Classique : les valeurs par défaut restent en
   spécificité faible, Elementor écrit `.elementor-element-XXX .classe`
   (0-2-0) et doit toujours gagner. Seule exception assumée : le bloc de
   neutralisation, qui doit battre `.wsbn-classique` (0-1-0).
   ========================================================================== */

.wsbn-arc{
  /* Cadre */
  --wsbn-arc-page:#F7F4EE;
  --wsbn-arc-radius:26px;
  --wsbn-arc-minh:490px;
  --wsbn-arc-texte-w:470px;
  --wsbn-arc-pad-t:50px;
  --wsbn-arc-pad-r:40px;
  --wsbn-arc-pad-b:50px;
  --wsbn-arc-pad-l:48px;
  --wsbn-arc-gap:22px;

  /* Dégradé du raccord latéral. Les trois à zéro = coupe nette. */
  /* LA COURBE, EN NOMBRES NUS.
     Un pourcentage ne se multiplie pas dans un `calc()`, un nombre si :
     l'unite est ajoutee une seule fois, a la fin de chaque expression.
     Ces trois valeurs sont les memes que les defauts des curseurs. */
  --wsbn-arc-haut:48;
  --wsbn-arc-bas:57;
  --wsbn-arc-courbure:9;
  --wsbn-arc-fondu-debord:5;
  --wsbn-arc-douceur:30px;
  --wsbn-arc-voile:.75;
  --wsbn-arc-voile-angle:100deg;

  /* Fondu du bas, désactivé par défaut. */
  --wsbn-arc-fondu-bas:0px;

  /* Média. --media-x est ECRITE EN LIGNE par le rendu : elle depend du trace
     de la courbe, qu'aucune variable CSS ne sait calculer. */
  --wsbn-arc-media-x:0%;
  --wsbn-arc-fit:cover;
  --wsbn-arc-pos-x:50%;
  --wsbn-arc-pos-y:50%;
  --wsbn-arc-media-h:300px;   /* hauteur du bloc média en mobile */
  --wsbn-arc-media-w:100%;    /* largeur du bloc média en mobile */
  --wsbn-arc-bleed-h:0px;     /* fond perdu en haut */
  --wsbn-arc-bleed-b:0px;     /* fond perdu en bas */

  /* Badge */
  --wsbn-arc-badge-border:#D9D3C8;
  --wsbn-arc-badge-color:#151E19;
  --wsbn-arc-badge-radius:999px;
  --wsbn-arc-badge-gap:8px;
  --wsbn-arc-badge-ico-size:13px;
  --wsbn-arc-badge-dot:#3DDC84;
  --wsbn-arc-badge-dot-size:7px;
  --wsbn-arc-badge-dot-speed:1.9s;
  --wsbn-arc-badge-shine:rgba(255,255,255,.25);
  --wsbn-arc-badge-shine-speed:3s;
  --wsbn-arc-badge-halo:rgba(78,99,64,.3);
  --wsbn-arc-badge-speed:.25s;

  /* Textes */
  --wsbn-arc-desc:#6E736C;

  /* Mention sous le bouton */
  --wsbn-arc-mention:#6E736C;
  --wsbn-arc-mention-ico:#6E736C;
  --wsbn-arc-mention-ico-size:13px;
  --wsbn-arc-mention-gap:7px;
  --wsbn-arc-mention-top:10px;

  /* Pastille sur le média. Ni fond ni ombre ici : ils appartiennent au
     contrôle de fond et au contrôle d'ombre du panneau, qui n'émettent RIEN
     sur « aucun ». Un défaut codé dans cette feuille ne pourrait plus être
     annulé. */
  --wsbn-arc-pin-color:#151E19;
  --wsbn-arc-pin-ico:#4E6340;
  --wsbn-arc-pin-ico-size:15px;
  --wsbn-arc-pin-fs:11.5px;
  --wsbn-arc-pin-radius:14px;
  --wsbn-arc-pin-w:246px;
  --wsbn-arc-pin-offset:24px;
  --wsbn-arc-pin-gap:10px;
  --wsbn-arc-pin-lift:0px;
  --wsbn-arc-pin-speed:.25s;

  /* Apparition */
  --wsbn-arc-in:wsbn-arc-in-up;
  --wsbn-arc-in-dur:.7s;
  --wsbn-arc-in-gap:90ms;
  --wsbn-arc-in-ease:cubic-bezier(.16,1,.3,1);

  /* Bouton son */
  --wsbn-arc-son-x:72%;
  --wsbn-arc-son-y:50%;
  --wsbn-arc-son-bg:rgba(21,30,25,.42);
  --wsbn-arc-son-border:rgba(255,255,255,.4);
  --wsbn-arc-son-text:#FFFFFF;
  --wsbn-arc-son-ico-bg:#FFFFFF;
  --wsbn-arc-son-ico-color:#151E19;
  --wsbn-arc-son-size:40px;
  --wsbn-arc-son-halo:rgba(255,255,255,.75);
  --wsbn-arc-son-halo-speed:2.6s;
}

/* NEUTRALISATION. La racine porte aussi .wsbn-classique pour hériter du
   titre et du bouton : il faut donc défaire la mise en page de Classique
   (flex centré, padding de 60px, hauteur mini) sans toucher à ses variables.
   Spécificité 0-2-0 assumée, c'est la seule façon de battre .wsbn-classique. */
.wsbn-arc.wsbn-classique{
  display:block;
  align-items:normal;
  min-height:var(--wsbn-arc-minh);

  /* LE FOND PERDU : ce que le rembourrage ajoute, la marge le rend.
     La banniere gagne de la hauteur d'image vers le haut et vers le bas,
     le contenu ne bouge pas, et la section suivante n'est pas poussee.
     A zero, les quatre valeurs sont nulles : rien a compenser. */
  margin-top:calc(-1 * var(--wsbn-arc-bleed-h));
  margin-bottom:calc(-1 * var(--wsbn-arc-bleed-b));
  /* UNE SEULE DECLARATION, ET C'EST VOLONTAIRE.
     Les deux valeurs etaient d'abord ecrites en `padding-top` et
     `padding-bottom`, juste avant le `padding:0` qui vivait ici. Un
     raccourci ecrit APRES une propriete detaillee la reecrit toujours,
     meme quand il ne parle pas de la meme arete : le fond perdu tirait
     la banniere vers le haut sans jamais rendre la hauteur. */
  padding:var(--wsbn-arc-bleed-h) 0 var(--wsbn-arc-bleed-b);
  border-radius:var(--wsbn-arc-radius);
  background:var(--wsbn-arc-page);
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   LE MÉDIA
   -------------------------------------------------------------------------- */

/* LA BOITE DU MEDIA S'ARRETE A SA ZONE.
   Elle ne part pas du bord gauche de la banniere mais de la courbe, moins un
   debord qui la fait passer sous le panneau. Sans ca, le media serait cadre
   sur TOUTE la largeur alors que seule sa moitie droite se voit : recentrer
   le sujet reviendrait a viser le centre de la banniere, pas celui de la zone
   ou on le regarde. Avec, un point d'interet a 50% tombe vraiment au milieu
   de ce que le visiteur voit. */
.wsbn-arc__media{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:var(--wsbn-arc-media-x);
  z-index:0;
}

.wsbn-arc__picture{
  display:block;
  width:100%;
  height:100%;
}

.wsbn-arc__media img,
.wsbn-arc__media video{
  display:block;
  width:100%;
  height:100%;
  object-fit:var(--wsbn-arc-fit);
  /* LE DEROULE D'ABORD, LES CURSEURS ENSUITE.
     `--wsbn-arc-pos` n'existe que si une position a ete choisie dans le
     deroule. Sans elle, on retombe sur les deux curseurs de reglage fin,
     et les bannieres deja cadrees a la virgule pres ne bougent pas d'un
     pixel. */
  object-position:var(--wsbn-arc-pos, var(--wsbn-arc-pos-x) var(--wsbn-arc-pos-y));
}

/* --------------------------------------------------------------------------
   LE RACCORD : voile, courbe floutée, courbe nette
   -------------------------------------------------------------------------- */

.wsbn-arc__voile{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:var(--wsbn-arc-voile);

  /* Repli pour les moteurs sans color-mix : un fondu simple, moins dosé mais
     jamais cassé. La règle suivante l'écrase partout ailleurs. */
  background:linear-gradient(
    var(--wsbn-arc-voile-angle),
    var(--wsbn-arc-page) 38%,
    transparent 74%
  );
  background:linear-gradient(
    var(--wsbn-arc-voile-angle),
    var(--wsbn-arc-page) 38%,
    color-mix(in srgb, var(--wsbn-arc-page) 72%, transparent) 50%,
    color-mix(in srgb, var(--wsbn-arc-page) 24%, transparent) 62%,
    color-mix(in srgb, var(--wsbn-arc-page) 0%, transparent) 74%
  );
}

/* --------------------------------------------------------------------------
   LA COURBE, EN CSS ET PLUS EN SVG

   ENGENDRE PAR scratchpad/courbe_css.py, NE PAS RETOUCHER A LA MAIN.
   Relancer le script pour changer le nombre de points ou la forme.

   POURQUOI CE CHANGEMENT
   Le trace etait un `<path>` fabrique en PHP. Un attribut `d` ne se pilote
   pas par une variable CSS : les trois curseurs de la courbe n'avaient donc
   pas de `selectors`, et Elementor redessinait la banniere PAR LE SERVEUR a
   chaque cran. Regler la courbe demandait un aller-retour reseau par pixel
   de curseur.

   CE QUI REND LA CHOSE POSSIBLE
   Un point de bezier cubique est une combinaison LINEAIRE de ses points de
   controle, et nos points de controle sont lineaires en depart, arrivee et
   courbure. Pour un t fixe, x vaut donc A.depart + B.arrivee + C.courbure,
   ou A, B et C sont des nombres : exactement ce qu'un `calc()` sait faire.
   La courbe est echantillonnee en 32 segments, une fois pour toutes.

   L'ECART AVEC LA VRAIE COURBE est de 0.0330 % de la largeur au pire des
   reglages, soit 0.46 px sur une banniere de 1400. Mesure sur mille points
   et six jeux de reglages extremes par le script qui ecrit ce bloc.
   -------------------------------------------------------------------------- */

.wsbn-arc__arc,
.wsbn-arc__glow{
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
  background:var(--wsbn-arc-page);
}

.wsbn-arc__arc{
  z-index:3;
  clip-path:polygon(0% 0%, calc((1 * var(--wsbn-arc-haut)) * 1%) 0%, calc((0.97522 * var(--wsbn-arc-haut) + 0.02478 * var(--wsbn-arc-bas) + -0.09082 * var(--wsbn-arc-courbure)) * 1%) 2.47791%, calc((0.94966 * var(--wsbn-arc-haut) + 0.05034 * var(--wsbn-arc-bas) + -0.17578 * var(--wsbn-arc-courbure)) * 1%) 5.03418%, calc((0.92335 * var(--wsbn-arc-haut) + 0.07665 * var(--wsbn-arc-bas) + -0.25488 * var(--wsbn-arc-courbure)) * 1%) 7.66516%, calc((0.89633 * var(--wsbn-arc-haut) + 0.10367 * var(--wsbn-arc-bas) + -0.32812 * var(--wsbn-arc-courbure)) * 1%) 10.36719%, calc((0.86863 * var(--wsbn-arc-haut) + 0.13137 * var(--wsbn-arc-bas) + -0.39551 * var(--wsbn-arc-courbure)) * 1%) 13.1366%, calc((0.8403 * var(--wsbn-arc-haut) + 0.1597 * var(--wsbn-arc-bas) + -0.45703 * var(--wsbn-arc-courbure)) * 1%) 15.96973%, calc((0.81137 * var(--wsbn-arc-haut) + 0.18863 * var(--wsbn-arc-bas) + -0.5127 * var(--wsbn-arc-courbure)) * 1%) 18.86292%, calc((0.78188 * var(--wsbn-arc-haut) + 0.21813 * var(--wsbn-arc-bas) + -0.5625 * var(--wsbn-arc-courbure)) * 1%) 21.8125%, calc((0.75185 * var(--wsbn-arc-haut) + 0.24815 * var(--wsbn-arc-bas) + -0.60645 * var(--wsbn-arc-courbure)) * 1%) 24.81482%, calc((0.72134 * var(--wsbn-arc-haut) + 0.27866 * var(--wsbn-arc-bas) + -0.64453 * var(--wsbn-arc-courbure)) * 1%) 27.86621%, calc((0.69037 * var(--wsbn-arc-haut) + 0.30963 * var(--wsbn-arc-bas) + -0.67676 * var(--wsbn-arc-courbure)) * 1%) 30.96301%, calc((0.65898 * var(--wsbn-arc-haut) + 0.34102 * var(--wsbn-arc-bas) + -0.70312 * var(--wsbn-arc-courbure)) * 1%) 34.10156%, calc((0.62722 * var(--wsbn-arc-haut) + 0.37278 * var(--wsbn-arc-bas) + -0.72363 * var(--wsbn-arc-courbure)) * 1%) 37.2782%, calc((0.59511 * var(--wsbn-arc-haut) + 0.40489 * var(--wsbn-arc-bas) + -0.73828 * var(--wsbn-arc-courbure)) * 1%) 40.48926%, calc((0.56269 * var(--wsbn-arc-haut) + 0.43731 * var(--wsbn-arc-bas) + -0.74707 * var(--wsbn-arc-courbure)) * 1%) 43.73108%, calc((0.53 * var(--wsbn-arc-haut) + 0.47 * var(--wsbn-arc-bas) + -0.75 * var(--wsbn-arc-courbure)) * 1%) 47%, calc((0.49708 * var(--wsbn-arc-haut) + 0.50292 * var(--wsbn-arc-bas) + -0.74707 * var(--wsbn-arc-courbure)) * 1%) 50.29236%, calc((0.46396 * var(--wsbn-arc-haut) + 0.53604 * var(--wsbn-arc-bas) + -0.73828 * var(--wsbn-arc-courbure)) * 1%) 53.60449%, calc((0.43067 * var(--wsbn-arc-haut) + 0.56933 * var(--wsbn-arc-bas) + -0.72363 * var(--wsbn-arc-courbure)) * 1%) 56.93274%, calc((0.39727 * var(--wsbn-arc-haut) + 0.60273 * var(--wsbn-arc-bas) + -0.70312 * var(--wsbn-arc-courbure)) * 1%) 60.27344%, calc((0.36377 * var(--wsbn-arc-haut) + 0.63623 * var(--wsbn-arc-bas) + -0.67676 * var(--wsbn-arc-courbure)) * 1%) 63.62292%, calc((0.33022 * var(--wsbn-arc-haut) + 0.66978 * var(--wsbn-arc-bas) + -0.64453 * var(--wsbn-arc-courbure)) * 1%) 66.97754%, calc((0.29666 * var(--wsbn-arc-haut) + 0.70334 * var(--wsbn-arc-bas) + -0.60645 * var(--wsbn-arc-courbure)) * 1%) 70.33362%, calc((0.26313 * var(--wsbn-arc-haut) + 0.73687 * var(--wsbn-arc-bas) + -0.5625 * var(--wsbn-arc-courbure)) * 1%) 73.6875%, calc((0.22964 * var(--wsbn-arc-haut) + 0.77036 * var(--wsbn-arc-bas) + -0.5127 * var(--wsbn-arc-courbure)) * 1%) 77.03552%, calc((0.19626 * var(--wsbn-arc-haut) + 0.80374 * var(--wsbn-arc-bas) + -0.45703 * var(--wsbn-arc-courbure)) * 1%) 80.37402%, calc((0.16301 * var(--wsbn-arc-haut) + 0.83699 * var(--wsbn-arc-bas) + -0.39551 * var(--wsbn-arc-courbure)) * 1%) 83.69934%, calc((0.12992 * var(--wsbn-arc-haut) + 0.87008 * var(--wsbn-arc-bas) + -0.32812 * var(--wsbn-arc-courbure)) * 1%) 87.00781%, calc((0.09704 * var(--wsbn-arc-haut) + 0.90296 * var(--wsbn-arc-bas) + -0.25488 * var(--wsbn-arc-courbure)) * 1%) 90.29578%, calc((0.0644 * var(--wsbn-arc-haut) + 0.9356 * var(--wsbn-arc-bas) + -0.17578 * var(--wsbn-arc-courbure)) * 1%) 93.55957%, calc((0.03204 * var(--wsbn-arc-haut) + 0.96796 * var(--wsbn-arc-bas) + -0.09082 * var(--wsbn-arc-courbure)) * 1%) 96.79553%, calc((1 * var(--wsbn-arc-bas)) * 1%) 100%, 0% 100%);
}

/* La meme courbe, decalee du debord et floutee : c'est elle qui fait le
   degrade, et il reste parallele au trait quelle que soit la courbe. */
.wsbn-arc__glow{
  z-index:2;
  filter:blur(var(--wsbn-arc-douceur));
  clip-path:polygon(0% 0%, calc((1 * var(--wsbn-arc-haut) + var(--wsbn-arc-fondu-debord)) * 1%) 0%, calc((0.97522 * var(--wsbn-arc-haut) + 0.02478 * var(--wsbn-arc-bas) + -0.09082 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 2.47791%, calc((0.94966 * var(--wsbn-arc-haut) + 0.05034 * var(--wsbn-arc-bas) + -0.17578 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 5.03418%, calc((0.92335 * var(--wsbn-arc-haut) + 0.07665 * var(--wsbn-arc-bas) + -0.25488 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 7.66516%, calc((0.89633 * var(--wsbn-arc-haut) + 0.10367 * var(--wsbn-arc-bas) + -0.32812 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 10.36719%, calc((0.86863 * var(--wsbn-arc-haut) + 0.13137 * var(--wsbn-arc-bas) + -0.39551 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 13.1366%, calc((0.8403 * var(--wsbn-arc-haut) + 0.1597 * var(--wsbn-arc-bas) + -0.45703 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 15.96973%, calc((0.81137 * var(--wsbn-arc-haut) + 0.18863 * var(--wsbn-arc-bas) + -0.5127 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 18.86292%, calc((0.78188 * var(--wsbn-arc-haut) + 0.21813 * var(--wsbn-arc-bas) + -0.5625 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 21.8125%, calc((0.75185 * var(--wsbn-arc-haut) + 0.24815 * var(--wsbn-arc-bas) + -0.60645 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 24.81482%, calc((0.72134 * var(--wsbn-arc-haut) + 0.27866 * var(--wsbn-arc-bas) + -0.64453 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 27.86621%, calc((0.69037 * var(--wsbn-arc-haut) + 0.30963 * var(--wsbn-arc-bas) + -0.67676 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 30.96301%, calc((0.65898 * var(--wsbn-arc-haut) + 0.34102 * var(--wsbn-arc-bas) + -0.70312 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 34.10156%, calc((0.62722 * var(--wsbn-arc-haut) + 0.37278 * var(--wsbn-arc-bas) + -0.72363 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 37.2782%, calc((0.59511 * var(--wsbn-arc-haut) + 0.40489 * var(--wsbn-arc-bas) + -0.73828 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 40.48926%, calc((0.56269 * var(--wsbn-arc-haut) + 0.43731 * var(--wsbn-arc-bas) + -0.74707 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 43.73108%, calc((0.53 * var(--wsbn-arc-haut) + 0.47 * var(--wsbn-arc-bas) + -0.75 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 47%, calc((0.49708 * var(--wsbn-arc-haut) + 0.50292 * var(--wsbn-arc-bas) + -0.74707 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 50.29236%, calc((0.46396 * var(--wsbn-arc-haut) + 0.53604 * var(--wsbn-arc-bas) + -0.73828 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 53.60449%, calc((0.43067 * var(--wsbn-arc-haut) + 0.56933 * var(--wsbn-arc-bas) + -0.72363 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 56.93274%, calc((0.39727 * var(--wsbn-arc-haut) + 0.60273 * var(--wsbn-arc-bas) + -0.70312 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 60.27344%, calc((0.36377 * var(--wsbn-arc-haut) + 0.63623 * var(--wsbn-arc-bas) + -0.67676 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 63.62292%, calc((0.33022 * var(--wsbn-arc-haut) + 0.66978 * var(--wsbn-arc-bas) + -0.64453 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 66.97754%, calc((0.29666 * var(--wsbn-arc-haut) + 0.70334 * var(--wsbn-arc-bas) + -0.60645 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 70.33362%, calc((0.26313 * var(--wsbn-arc-haut) + 0.73687 * var(--wsbn-arc-bas) + -0.5625 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 73.6875%, calc((0.22964 * var(--wsbn-arc-haut) + 0.77036 * var(--wsbn-arc-bas) + -0.5127 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 77.03552%, calc((0.19626 * var(--wsbn-arc-haut) + 0.80374 * var(--wsbn-arc-bas) + -0.45703 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 80.37402%, calc((0.16301 * var(--wsbn-arc-haut) + 0.83699 * var(--wsbn-arc-bas) + -0.39551 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 83.69934%, calc((0.12992 * var(--wsbn-arc-haut) + 0.87008 * var(--wsbn-arc-bas) + -0.32812 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 87.00781%, calc((0.09704 * var(--wsbn-arc-haut) + 0.90296 * var(--wsbn-arc-bas) + -0.25488 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 90.29578%, calc((0.0644 * var(--wsbn-arc-haut) + 0.9356 * var(--wsbn-arc-bas) + -0.17578 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 93.55957%, calc((0.03204 * var(--wsbn-arc-haut) + 0.96796 * var(--wsbn-arc-bas) + -0.09082 * var(--wsbn-arc-courbure) + var(--wsbn-arc-fondu-debord)) * 1%) 96.79553%, calc((1 * var(--wsbn-arc-bas) + var(--wsbn-arc-fondu-debord)) * 1%) 100%, 0% 100%);
}

/* OU COMMENCE LA BOITE DU MEDIA.
   C'est la courbe qui commande : on part de son point le plus a gauche et
   on recule de 3 %, pour que le media passe sous le panneau au lieu de
   s'arreter pile sur le trait. PHP cherchait ce minimum par une boucle ;
   `min()` fait le meme travail sur les memes echantillons. */
.wsbn-arc{
  --wsbn-arc-media-x:max(0%, calc((min((1 * var(--wsbn-arc-haut)), (0.97522 * var(--wsbn-arc-haut) + 0.02478 * var(--wsbn-arc-bas) + -0.09082 * var(--wsbn-arc-courbure)), (0.94966 * var(--wsbn-arc-haut) + 0.05034 * var(--wsbn-arc-bas) + -0.17578 * var(--wsbn-arc-courbure)), (0.92335 * var(--wsbn-arc-haut) + 0.07665 * var(--wsbn-arc-bas) + -0.25488 * var(--wsbn-arc-courbure)), (0.89633 * var(--wsbn-arc-haut) + 0.10367 * var(--wsbn-arc-bas) + -0.32812 * var(--wsbn-arc-courbure)), (0.86863 * var(--wsbn-arc-haut) + 0.13137 * var(--wsbn-arc-bas) + -0.39551 * var(--wsbn-arc-courbure)), (0.8403 * var(--wsbn-arc-haut) + 0.1597 * var(--wsbn-arc-bas) + -0.45703 * var(--wsbn-arc-courbure)), (0.81137 * var(--wsbn-arc-haut) + 0.18863 * var(--wsbn-arc-bas) + -0.5127 * var(--wsbn-arc-courbure)), (0.78188 * var(--wsbn-arc-haut) + 0.21813 * var(--wsbn-arc-bas) + -0.5625 * var(--wsbn-arc-courbure)), (0.75185 * var(--wsbn-arc-haut) + 0.24815 * var(--wsbn-arc-bas) + -0.60645 * var(--wsbn-arc-courbure)), (0.72134 * var(--wsbn-arc-haut) + 0.27866 * var(--wsbn-arc-bas) + -0.64453 * var(--wsbn-arc-courbure)), (0.69037 * var(--wsbn-arc-haut) + 0.30963 * var(--wsbn-arc-bas) + -0.67676 * var(--wsbn-arc-courbure)), (0.65898 * var(--wsbn-arc-haut) + 0.34102 * var(--wsbn-arc-bas) + -0.70312 * var(--wsbn-arc-courbure)), (0.62722 * var(--wsbn-arc-haut) + 0.37278 * var(--wsbn-arc-bas) + -0.72363 * var(--wsbn-arc-courbure)), (0.59511 * var(--wsbn-arc-haut) + 0.40489 * var(--wsbn-arc-bas) + -0.73828 * var(--wsbn-arc-courbure)), (0.56269 * var(--wsbn-arc-haut) + 0.43731 * var(--wsbn-arc-bas) + -0.74707 * var(--wsbn-arc-courbure)), (0.53 * var(--wsbn-arc-haut) + 0.47 * var(--wsbn-arc-bas) + -0.75 * var(--wsbn-arc-courbure)), (0.49708 * var(--wsbn-arc-haut) + 0.50292 * var(--wsbn-arc-bas) + -0.74707 * var(--wsbn-arc-courbure)), (0.46396 * var(--wsbn-arc-haut) + 0.53604 * var(--wsbn-arc-bas) + -0.73828 * var(--wsbn-arc-courbure)), (0.43067 * var(--wsbn-arc-haut) + 0.56933 * var(--wsbn-arc-bas) + -0.72363 * var(--wsbn-arc-courbure)), (0.39727 * var(--wsbn-arc-haut) + 0.60273 * var(--wsbn-arc-bas) + -0.70312 * var(--wsbn-arc-courbure)), (0.36377 * var(--wsbn-arc-haut) + 0.63623 * var(--wsbn-arc-bas) + -0.67676 * var(--wsbn-arc-courbure)), (0.33022 * var(--wsbn-arc-haut) + 0.66978 * var(--wsbn-arc-bas) + -0.64453 * var(--wsbn-arc-courbure)), (0.29666 * var(--wsbn-arc-haut) + 0.70334 * var(--wsbn-arc-bas) + -0.60645 * var(--wsbn-arc-courbure)), (0.26313 * var(--wsbn-arc-haut) + 0.73687 * var(--wsbn-arc-bas) + -0.5625 * var(--wsbn-arc-courbure)), (0.22964 * var(--wsbn-arc-haut) + 0.77036 * var(--wsbn-arc-bas) + -0.5127 * var(--wsbn-arc-courbure)), (0.19626 * var(--wsbn-arc-haut) + 0.80374 * var(--wsbn-arc-bas) + -0.45703 * var(--wsbn-arc-courbure)), (0.16301 * var(--wsbn-arc-haut) + 0.83699 * var(--wsbn-arc-bas) + -0.39551 * var(--wsbn-arc-courbure)), (0.12992 * var(--wsbn-arc-haut) + 0.87008 * var(--wsbn-arc-bas) + -0.32812 * var(--wsbn-arc-courbure)), (0.09704 * var(--wsbn-arc-haut) + 0.90296 * var(--wsbn-arc-bas) + -0.25488 * var(--wsbn-arc-courbure)), (0.0644 * var(--wsbn-arc-haut) + 0.9356 * var(--wsbn-arc-bas) + -0.17578 * var(--wsbn-arc-courbure)), (0.03204 * var(--wsbn-arc-haut) + 0.96796 * var(--wsbn-arc-bas) + -0.09082 * var(--wsbn-arc-courbure)), (1 * var(--wsbn-arc-bas))) - 3) * 1%));
}

/* LE FONDU DU BAS. Là où le média rencontre le panneau : sur grand écran
   c'est le bas de la bannière, en mobile c'est la couture entre le bloc
   média et le texte posé dessous. Posée DANS le média, la couche suit donc
   la bonne arête dans les deux cas, sans une seule règle en plus.
   À 0 (le défaut), elle a une hauteur nulle : rien à voir, rien à peindre. */
.wsbn-arc__voile-bas{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--wsbn-arc-fondu-bas);
  pointer-events:none;

  /* Même précaution que le voile latéral : `transparent` seul vire au gris
     sur certains moteurs, color-mix garde la teinte du panneau. */
  background:linear-gradient(to top, var(--wsbn-arc-page), transparent);
  background:linear-gradient(to top,
    var(--wsbn-arc-page),
    color-mix(in srgb, var(--wsbn-arc-page) 0%, transparent)
  );
}

/* --------------------------------------------------------------------------
   LA COLONNE DE TEXTE
   -------------------------------------------------------------------------- */

.wsbn-arc__texte{
  position:relative;
  z-index:4;
  max-width:var(--wsbn-arc-texte-w);
  padding:var(--wsbn-arc-pad-t) var(--wsbn-arc-pad-r) var(--wsbn-arc-pad-b) var(--wsbn-arc-pad-l);

  /* LE PLACEMENT DU BLOC, et pourquoi il ne passe ni par la 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 dans cette banniere par le badge et la lueur.
     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-arc-texte-x, 0) var(--wsbn-arc-texte-y, 0);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--wsbn-arc-gap);
}

.wsbn-arc__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 15px;
  border:1px solid var(--wsbn-arc-badge-border);
  border-radius:var(--wsbn-arc-badge-radius);
  color:var(--wsbn-arc-badge-color);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.2;
}

.wsbn-arc__badge{
  position:relative;
  gap:var(--wsbn-arc-badge-gap);
  transition:color var(--wsbn-arc-badge-speed) ease,
             background-color var(--wsbn-arc-badge-speed) ease,
             border-color var(--wsbn-arc-badge-speed) ease,
             box-shadow var(--wsbn-arc-badge-speed) ease,
             transform var(--wsbn-arc-badge-speed) ease;
}

.wsbn-arc__badge svg,
.wsbn-arc__badge i{
  width:1em;
  height:1em;
  font-size:var(--wsbn-arc-badge-ico-size);
  fill:currentColor;
  color:currentColor;
}

/* LE POINT DE STATUT. Un rond de couleur avant le texte, qui peut pulser :
   c'est ce qui fait lire le badge comme un signal vivant plutôt que comme une
   étiquette. Le halo est un CALQUE SÉPARÉ, pas le point lui-même : faire
   grossir le point rendrait le texte tremblant à côté. */
.wsbn-arc__badge-dot{
  position:relative;
  flex:none;
  width:var(--wsbn-arc-badge-dot-size);
  height:var(--wsbn-arc-badge-dot-size);
  border-radius:50%;
  background:var(--wsbn-arc-badge-dot);
}

.wsbn-arc--badge-pulse .wsbn-arc__badge-dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--wsbn-arc-badge-dot);
  animation:wsbn-arc-dot var(--wsbn-arc-badge-dot-speed) ease-out infinite;
}

@keyframes wsbn-arc-dot{
  0%   { transform:scale(1);   opacity:.65; }
  100% { transform:scale(2.8); opacity:0; }
}

/* --------------------------------------------------------------------------
   LES EFFETS DU BADGE

   LE REFLET A SON PROPRE CALQUE, et n'est pas un ::before du badge. Le clipper
   demanderait `overflow:hidden` sur le badge, ce qui rognerait aussi le halo
   du point de statut, qui deborde volontairement. Un calque dedie porte donc
   son propre rognage, et les deux effets cohabitent.

   Ce calque etant positionne, il passerait DEVANT le texte : on remonte donc
   le contenu d'un cran. C'est la seule raison du z-index sur les enfants.
   -------------------------------------------------------------------------- */

.wsbn-arc__badge > *{
  position:relative;
  z-index:1;
}

/* La fleche finale glisse au survol, comme une invitation a suivre le lien.
   Elle avance sur `translate` et non `transform`, pour ne pas entrer en
   conflit avec les mouvements du badge, qui ecrivent sur `transform`. */
.wsbn-arc__badge-fleche{
  display:inline-flex;
  flex:none;
  opacity:.7;
  transition:translate var(--wsbn-arc-badge-speed) ease,
             opacity var(--wsbn-arc-badge-speed) ease;
}

.wsbn-arc__badge-fleche svg{
  width:1em;
  height:1em;
  font-size:var(--wsbn-arc-badge-ico-size);
  fill:currentColor;
}

.wsbn-arc__badge:hover .wsbn-arc__badge-fleche{
  translate:4px 0;
  opacity:1;
}

.wsbn-arc__badge-emoji{
  flex:none;
  font-size:var(--wsbn-arc-badge-ico-size);
  line-height:1;
}

/* Le badge peut etre un lien : meme precaution de specificite que pour les
   avis et la pastille. */
a.wsbn-arc__badge{
  color:var(--wsbn-arc-badge-color);
  text-decoration:none;
}

.wsbn-arc__badge-shine{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
}

.wsbn-arc__badge-shine::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:60%;
  height:100%;
  background:linear-gradient(
    110deg,
    transparent 30%,
    var(--wsbn-arc-badge-shine) 50%,
    transparent 70%
  );
  animation:wsbn-arc-shine var(--wsbn-arc-badge-shine-speed) linear infinite;
}

@keyframes wsbn-arc-shine{
  0%   { transform:translateX(-166.67%); }
  100% { transform:translateX(333.33%); }
}

/* --- au survol --- */

.wsbn-arc--bhov-pulse  .wsbn-arc__badge:hover{ animation:wsbn-arc-b-pulse  .6s ease-in-out; }
.wsbn-arc--bhov-wiggle .wsbn-arc__badge:hover{ animation:wsbn-arc-b-wiggle .4s ease-in-out; }
.wsbn-arc--bhov-shake  .wsbn-arc__badge:hover{ animation:wsbn-arc-b-shake  .5s ease-in-out; }
.wsbn-arc--bhov-bounce .wsbn-arc__badge:hover{ animation:wsbn-arc-b-bounce .6s ease-in-out; }
.wsbn-arc--bhov-tilt   .wsbn-arc__badge:hover{ transform:perspective(500px) rotateX(8deg) rotateY(-4deg) translateY(-2px); }
.wsbn-arc--bhov-expand .wsbn-arc__badge:hover{ transform:scale(1.06); }
.wsbn-arc--bhov-halo   .wsbn-arc__badge:hover{ box-shadow:0 0 0 4px var(--wsbn-arc-badge-halo); }

/* Le soulevement se compose avec les autres : il ecrit `translate`, pas
   `transform`. Deux ecritures sur `transform` s'annuleraient. */
.wsbn-arc--blift .wsbn-arc__badge:hover{
  translate:0 -2px;
}

@keyframes wsbn-arc-b-pulse{
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.05); }
}
@keyframes wsbn-arc-b-wiggle{
  0%,100% { transform:rotate(0); }
  25%     { transform:rotate(-2deg); }
  75%     { transform:rotate(2deg); }
}
@keyframes wsbn-arc-b-shake{
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-4px); }
  40%     { transform:translateX(4px); }
  60%     { transform:translateX(-3px); }
  80%     { transform:translateX(3px); }
}
@keyframes wsbn-arc-b-bounce{
  0%,100% { transform:translateY(0); }
  30%     { transform:translateY(-6px); }
  60%     { transform:translateY(-2px); }
}

/* --- en continu, sans survol --- */

/* Chaque effet lit la MEME variable et garde SON repli : le curseur part
   sans valeur, donc chacun tourne a sa cadence d'origine tant qu'on n'y
   touche pas. */
.wsbn-arc--bidle-float    .wsbn-arc__badge{ animation:wsbn-arc-b-float    var(--wsbn-arc-badge-idle-speed, 3.4s) ease-in-out infinite; }
.wsbn-arc--bidle-floatrot .wsbn-arc__badge{ animation:wsbn-arc-b-floatrot var(--wsbn-arc-badge-idle-speed, 4.5s) ease-in-out infinite; }
.wsbn-arc--bidle-halo     .wsbn-arc__badge{ animation:wsbn-arc-b-halo     var(--wsbn-arc-badge-idle-speed, 2.4s) ease-in-out infinite; }
.wsbn-arc--bidle-breath   .wsbn-arc__badge{ animation:wsbn-arc-b-breath   var(--wsbn-arc-badge-idle-speed, 3s)   ease-in-out infinite; }

@keyframes wsbn-arc-b-float{
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-6px); }
}
@keyframes wsbn-arc-b-floatrot{
  0%,100% { transform:translateY(0) rotate(-1deg); }
  50%     { transform:translateY(-6px) rotate(1deg); }
}
@keyframes wsbn-arc-b-halo{
  0%,100% { box-shadow:0 0 0 0 transparent; }
  50%     { box-shadow:0 0 0 6px var(--wsbn-arc-badge-halo); }
}
@keyframes wsbn-arc-b-breath{
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.03); }
}

@media (prefers-reduced-motion:reduce){
  .wsbn-arc--badge-pulse .wsbn-arc__badge-dot::after{
    animation:none;
    opacity:0;
  }

  /* Tout ce qui bouge sur le badge s'arrete, y compris ce qui ne se declenche
     qu'au survol : la preference vaut aussi pour les mouvements provoques. */
  .wsbn-arc__badge,
  .wsbn-arc__badge:hover,
  .wsbn-arc__badge-shine::before{
    animation:none !important;
    transform:none !important;
    translate:none !important;
  }
}

.wsbn-arc__desc{
  margin:0;
  color:var(--wsbn-arc-desc);
  font-size:14.5px;
  line-height:1.62;
}

/* --------------------------------------------------------------------------
   LE BOUTON ET SA MENTION

   Les deux vivent dans une boite commune, qui se retrecit a son contenu. Sans
   elle, la mention serait alignee sur la colonne de texte et pas sur le
   bouton : centrer quoi que ce soit demande d'abord de savoir sur QUOI on
   centre, et une colonne de 470px n'a pas le meme milieu qu'un bouton de
   230px. Avec elle, `align-items` suffit, et le calage tient quelle que soit
   la longueur du libelle du bouton.
   -------------------------------------------------------------------------- */

.wsbn-arc__action{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.wsbn-arc__action--centre{
  align-items:center;
  text-align:center;
}

.wsbn-arc__action--droite{
  align-items:flex-end;
  text-align:right;
}

.wsbn-arc__mention{
  display:flex;
  align-items:center;
  gap:var(--wsbn-arc-mention-gap);
  /* Marge NÉGATIVE par défaut : la mention est un satellite du bouton, pas un
     bloc de plus. Elle remonte donc sous lui plutôt que de prendre tout
     l'écart commun de la colonne. */
  margin:var(--wsbn-arc-mention-top) 0 0;
  color:var(--wsbn-arc-mention);
  font-size:11.5px;
  line-height:1.4;
}

.wsbn-arc__mention-ico{
  display:inline-flex;
  flex:none;
  color:var(--wsbn-arc-mention-ico);
  font-size:var(--wsbn-arc-mention-ico-size);
}

.wsbn-arc__mention-ico svg{
  width:1em;
  height:1em;
  fill:currentColor;
}

/* --------------------------------------------------------------------------
   LA PASTILLE SUR LE MÉDIA
   -------------------------------------------------------------------------- */

.wsbn-arc__pin{
  position:absolute;
  z-index:5;
  max-width:var(--wsbn-arc-pin-w);
  display:flex;
  align-items:flex-start;
  gap:var(--wsbn-arc-pin-gap);
  padding:13px 15px;
  border-radius:var(--wsbn-arc-pin-radius);
  color:var(--wsbn-arc-pin-color);
  transition:transform var(--wsbn-arc-pin-speed) ease,
             background-color var(--wsbn-arc-pin-speed) ease,
             color var(--wsbn-arc-pin-speed) ease,
             box-shadow var(--wsbn-arc-pin-speed) ease;
  /* AUCUNE ombre codee en dur ici : c'est le Group_Control_Box_Shadow qui
     la pose. Un defaut ecrit dans cette feuille ne pourrait plus etre
     annule, ce controle n'emettant rien du tout sur "Aucune ombre". */
  font-size:var(--wsbn-arc-pin-fs);
  font-weight:500;
  line-height:1.5;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

.wsbn-arc__pin--br{ right:var(--wsbn-arc-pin-offset); bottom:var(--wsbn-arc-pin-offset); }
.wsbn-arc__pin--tr{ right:var(--wsbn-arc-pin-offset); top:var(--wsbn-arc-pin-offset); }
.wsbn-arc__pin--bl{ left:var(--wsbn-arc-pin-offset);  bottom:var(--wsbn-arc-pin-offset); }
.wsbn-arc__pin--tl{ left:var(--wsbn-arc-pin-offset);  top:var(--wsbn-arc-pin-offset); }

/* La pastille peut être un lien : même précaution de spécificité que pour
   les avis, le reset `a{color:inherit}` de beaucoup de thèmes battrait une
   classe simple posée sur un <a>. */
a.wsbn-arc__pin{
  color:var(--wsbn-arc-pin-color);
  text-decoration:none;
}

.wsbn-arc__pin:hover{
  transform:translateY(calc(var(--wsbn-arc-pin-lift) * -1));
}

.wsbn-arc__pin-ico{
  display:inline-flex;
  flex:none;
  margin-top:1px;
  /* Couleur DÉDIÉE, indépendante du texte de la pastille. */
  color:var(--wsbn-arc-pin-ico);
  font-size:var(--wsbn-arc-pin-ico-size);
  transition:color var(--wsbn-arc-pin-speed) ease;
}

.wsbn-arc__pin-ico svg{
  width:1em;
  height:1em;
  fill:currentColor;
}

/* --------------------------------------------------------------------------
   LE BOUTON SON ET LA COUPURE DU SON
   -------------------------------------------------------------------------- */

.wsbn-arc__son{
  position:absolute;
  z-index:6;
  top:var(--wsbn-arc-son-y);
  left:var(--wsbn-arc-son-x);
  transform:translate(-50%,-50%);
  display:inline-flex;
  align-items:center;
  gap:calc(var(--wsbn-arc-son-size) * .3);
  padding:calc(var(--wsbn-arc-son-size) * .225)
          calc(var(--wsbn-arc-son-size) * .55)
          calc(var(--wsbn-arc-son-size) * .225)
          calc(var(--wsbn-arc-son-size) * .225);
  border:1px solid var(--wsbn-arc-son-border);
  border-radius:999px;
  background:var(--wsbn-arc-son-bg);
  color:var(--wsbn-arc-son-text);
  font-family:inherit;
  /* TOUT LE BOUTON DERIVE DE SA TAILLE : marges, ecart et libelle sont des
     fractions du diametre de la pastille. Un seul curseur redimensionne
     l'ensemble, et il est reglable par appareil. Aux valeurs par defaut on
     retrouve exactement les mesures d'origine (9 / 22 / 12 / 13 px pour un
     diametre de 40). */
  font-size:calc(var(--wsbn-arc-son-size) * .325);
  font-weight:800;
  line-height:1.2;
  cursor:pointer;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:background .2s ease, transform .2s ease;
}

.wsbn-arc__son:hover{
  transform:translate(-50%,-50%) scale(1.04);
}

.wsbn-arc__son-ico{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:var(--wsbn-arc-son-size);
  height:var(--wsbn-arc-son-size);
  border-radius:50%;
  background:var(--wsbn-arc-son-ico-bg);
  color:var(--wsbn-arc-son-ico-color);
}

.wsbn-arc__son-ico svg{
  width:calc(var(--wsbn-arc-son-size) * .38);
  height:calc(var(--wsbn-arc-son-size) * .38);
  margin-left:2px;
  fill:currentColor;
}

/* DEUX halos, décalés d'une demi-durée : la pulsation ne s'interrompt jamais.
   Un seul anneau laisserait un temps mort à chaque tour. */
.wsbn-arc--pulse .wsbn-arc__son-ico::before,
.wsbn-arc--pulse .wsbn-arc__son-ico::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--wsbn-arc-son-halo);
  animation:wsbn-arc-pulse var(--wsbn-arc-son-halo-speed) cubic-bezier(.2,.6,.4,1) infinite;
}

.wsbn-arc--pulse .wsbn-arc__son-ico::after{
  animation-delay:calc(var(--wsbn-arc-son-halo-speed) / 2);
}

@keyframes wsbn-arc-pulse{
  0%   { transform:scale(1);   opacity:.85; }
  100% { transform:scale(2);   opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .wsbn-arc--pulse .wsbn-arc__son-ico::before,
  .wsbn-arc--pulse .wsbn-arc__son-ico::after{
    animation:none;
    opacity:0;
  }
}

/* --------------------------------------------------------------------------
   LA POPUP
   Construite par le script au premier clic, jamais présente dans le HTML :
   sans script, le bouton reste un lien vers la vidéo.
   -------------------------------------------------------------------------- */

.wsbn-arc-lb{
  position:fixed;
  inset:0;
  z-index:99990;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(10,14,10,.86);
}

.wsbn-arc-lb__inner{
  position:relative;
  width:min(940px,100%);
  aspect-ratio:16 / 9;
  border-radius:18px;
  overflow:hidden;
  background:#000;
}

.wsbn-arc-lb__inner iframe,
.wsbn-arc-lb__inner video{
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}

.wsbn-arc-lb__close{
  position:absolute;
  top:-46px;
  right:0;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}


/* --------------------------------------------------------------------------
   MOBILE
   La courbe n'a plus la place de respirer : on empile. Le bouton son, la
   coupure du son et la pastille restent positionnés par rapport à la
   bannière entière - on les recale donc sur la hauteur du bloc média, sinon
   ils tombent au milieu du texte.
   -------------------------------------------------------------------------- */

/* SOUS 820 PX, ET SEULEMENT SI ON A CHOISI D'EMPILER.
   La classe vient du reglage << Mise en page >> de l'onglet Mobile.
   Elle est portee par CHAQUE regle plutot que par un contre-bloc qui
   remettrait tout en place a la main : un contre-bloc oublie toujours
   une regle, et l'oubli ne se voit que sur un vrai telephone. */
@media (max-width:820px){
  .wsbn-arc-petit-empile .wsbn-arc.wsbn-classique{
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  .wsbn-arc-petit-empile .wsbn-arc__voile,
  .wsbn-arc-petit-empile .wsbn-arc__glow,
  .wsbn-arc-petit-empile .wsbn-arc__arc{
    display:none;
  }

  /* Plus de courbe, donc plus de zone reservee : le media reprend toute la
     largeur. `left` doit etre remis a zero explicitement, `inset:auto` ne
     defait pas une valeur posee sur la seule arete gauche. */
  .wsbn-arc-petit-empile .wsbn-arc__media{
    position:relative;
    inset:auto;
    left:auto;
    order:1;
    height:var(--wsbn-arc-media-h);
    width:var(--wsbn-arc-media-w, 100%);
    margin-inline:auto;
  }

  .wsbn-arc-petit-empile .wsbn-arc__texte{
    order:2;
    max-width:none;
  }

  .wsbn-arc-petit-empile .wsbn-arc__son{
    top:calc(var(--wsbn-arc-media-h) / 2);
    left:50%;
  }

  /* LA PASTILLE RESTE SUR L'IMAGE.
     `bottom` se mesure depuis le bas de la BANNIÈRE, qui est bien plus
     haute que le média une fois le texte empilé dessous : on remonte donc
     de tout ce qui dépasse, puis on redescend de l'écart au bord. La
     formule ne dépend pas de la hauteur de la pastille, qui varie avec le
     texte saisi - c'est ce qui la garde collée à l'image quel que soit le
     nombre de lignes.
     L'écart et la largeur ne sont pas forcés ici : ce sont des réglages
     responsive du widget, qu'Elementor écrit avec une spécificité plus
     forte. Leurs valeurs mobiles vivent dans les contrôles. */
  .wsbn-arc-petit-empile .wsbn-arc__pin--br,
  .wsbn-arc-petit-empile .wsbn-arc__pin--bl{
    top:auto;
    bottom:calc(100% - var(--wsbn-arc-media-h) + var(--wsbn-arc-pin-offset));
  }

  .wsbn-arc-petit-empile .wsbn-arc__pin--tr,
  .wsbn-arc-petit-empile .wsbn-arc__pin--tl{
    top:var(--wsbn-arc-pin-offset);
    bottom:auto;
  }

  .wsbn-arc-petit-empile .wsbn-arc__pin--br,
  .wsbn-arc-petit-empile .wsbn-arc__pin--tr{ right:var(--wsbn-arc-pin-offset); left:auto; }

  .wsbn-arc-petit-empile .wsbn-arc__pin--bl,
  .wsbn-arc-petit-empile .wsbn-arc__pin--tl{ left:var(--wsbn-arc-pin-offset); right:auto; }

  /* Posée sur une image bien plus courte, la pastille doit se faire discrète.
     Seule l'interligne est forcée ici : la taille du texte, les marges,
     l'écart et l'icône ont chacun leur valeur mobile dans les contrôles, qui
     gagnent de toute façon sur cette feuille. */
  .wsbn-arc-petit-empile .wsbn-arc__pin{
    line-height:1.35;
  }

  .wsbn-arc-petit-empile .wsbn-arc__pin-ico{
    margin-top:0;
  }
}
/* Le cadrage propre au telephone. Il ne s'ecrit que si une position a
   ete choisie dans l'onglet Mobile ; sinon on garde celui d'ordinateur. */
@media (max-width:820px){
  .wsbn-arc__media img,
  .wsbn-arc__media video{
    object-position:var(--wsbn-arc-pos-petit, var(--wsbn-arc-pos, var(--wsbn-arc-pos-x) var(--wsbn-arc-pos-y)));
  }
}


/* --------------------------------------------------------------------------
   L'APPARITION DES BLOCS

   DEUX REGLES QUI TIENNENT TOUT :

   1. RIEN N'EST CACHE SANS JAVASCRIPT. L'etat masque n'est pose que sous
      `.wsbn-arc--anim`, une classe que seul le script ajoute. Si le script ne
      s'execute pas, la banniere s'affiche entiere, tout de suite. Une
      apparition ratee ne doit jamais rendre un texte invisible.

   2. L'ANIMATION NE LAISSE AUCUNE TRACE. Le remplissage est `backwards` et
      non `both` : il couvre le delai avant le depart, puis l'element revient
      a son style naturel. Avec `both`, la transformation finale resterait
      inscrite et ecraserait le soulevement au survol de la pastille, qui
      s'ecrit sur la meme propriete.

   Le titre n'est PAS dans cette liste : il a ses propres effets d'entree,
   herites de la banniere Classique, avec son decoupage lettre par lettre.
   Deux systemes sur le meme element se marcheraient dessus.
   -------------------------------------------------------------------------- */

.wsbn-arc--anim:not(.wsbn-arc--vu) .wsbn-arc__badge,
.wsbn-arc--anim:not(.wsbn-arc--vu) .wsbn-arc__desc,
.wsbn-arc--anim:not(.wsbn-arc--vu) .wsbn-avis,
.wsbn-arc--anim:not(.wsbn-arc--vu) .wsbn-arc__action,
.wsbn-arc--anim:not(.wsbn-arc--vu) .wsbn-arc__pin{
  opacity:0;
}

/* L'ordre des retards est celui de la lecture : le regard descend, les blocs
   arrivent dans le meme sens. */
.wsbn-arc--vu .wsbn-arc__badge  { animation:var(--wsbn-arc-in) var(--wsbn-arc-in-dur) var(--wsbn-arc-in-ease) calc(var(--wsbn-arc-in-gap) * 0) backwards; }
.wsbn-arc--vu .wsbn-arc__desc   { animation:var(--wsbn-arc-in) var(--wsbn-arc-in-dur) var(--wsbn-arc-in-ease) calc(var(--wsbn-arc-in-gap) * 1) backwards; }
.wsbn-arc--vu .wsbn-avis   { animation:var(--wsbn-arc-in) var(--wsbn-arc-in-dur) var(--wsbn-arc-in-ease) calc(var(--wsbn-arc-in-gap) * 2) backwards; }
.wsbn-arc--vu .wsbn-arc__action { animation:var(--wsbn-arc-in) var(--wsbn-arc-in-dur) var(--wsbn-arc-in-ease) calc(var(--wsbn-arc-in-gap) * 3) backwards; }
.wsbn-arc--vu .wsbn-arc__pin    { animation:var(--wsbn-arc-in) var(--wsbn-arc-in-dur) var(--wsbn-arc-in-ease) calc(var(--wsbn-arc-in-gap) * 4) backwards; }

.wsbn-arc--in-fade { --wsbn-arc-in:wsbn-arc-in-fade; }
.wsbn-arc--in-up   { --wsbn-arc-in:wsbn-arc-in-up; }
.wsbn-arc--in-left { --wsbn-arc-in:wsbn-arc-in-left; }
.wsbn-arc--in-zoom { --wsbn-arc-in:wsbn-arc-in-zoom; }

@keyframes wsbn-arc-in-fade{
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes wsbn-arc-in-up{
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:none; }
}
@keyframes wsbn-arc-in-left{
  from { opacity:0; transform:translateX(-22px); }
  to   { opacity:1; transform:none; }
}
@keyframes wsbn-arc-in-zoom{
  from { opacity:0; transform:scale(.94); }
  to   { opacity:1; transform:none; }
}

/* Le script ne pose meme pas la classe quand la preference est active. Cette
   regle est la ceinture : un cache navigateur peut servir un HTML deja marque
   alors que la preference vient de changer. */
@media (prefers-reduced-motion:reduce){
  .wsbn-arc--anim:not(.wsbn-arc--vu) .wsbn-arc__badge,
  .wsbn-arc--anim:not(.wsbn-arc--vu) .wsbn-arc__desc,
  .wsbn-arc--anim:not(.wsbn-arc--vu) .wsbn-avis,
  .wsbn-arc--anim:not(.wsbn-arc--vu) .wsbn-arc__action,
  .wsbn-arc--anim:not(.wsbn-arc--vu) .wsbn-arc__pin{
    opacity:1;
  }

  .wsbn-arc--vu .wsbn-arc__badge,
  .wsbn-arc--vu .wsbn-arc__desc,
  .wsbn-arc--vu .wsbn-avis,
  .wsbn-arc--vu .wsbn-arc__action,
  .wsbn-arc--vu .wsbn-arc__pin{
    animation:none;
  }
}

/* =======================================================================
   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 <html> 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;
}