/* ==========================================================================
   WS Bannière - Bannière vision (landing page)
   Colonne texte a gauche, media anime a droite, fondu + filet + video en pied.
   Tout est pilote par des CSS vars posees par les `selectors` Elementor.
   ========================================================================== */

.wsbn-vision{
  /* --- Palette --- */
  --wsbn-v-ink:#141020;
  --wsbn-v-muted:#55506B;
  --wsbn-v-accent:#6D3BEB;
  --wsbn-v-accent-ink:#FFFFFF;
  --wsbn-v-highlight:#D8FF3E;
  --wsbn-v-badge-bg:rgba(24,14,54,.62);
  --wsbn-v-badge-ink:#FFFFFF;
  --wsbn-v-badge-value:#D8FF3E;

  /* --- Fond --- */
  --wsbn-v-bg1:#F6F1FF;
  --wsbn-v-bg2:#FFF8EE;
  --wsbn-v-bg3:#FFEAF4;

  /* --- Pied : fondu, filet, video --- */
  --wsbn-v-fade:#07060C;
  --wsbn-v-fade-h:150px;
  --wsbn-v-rule:#FFFFFF;
  --wsbn-v-rule-h:1px;
  --wsbn-v-video-w:900px;

  /* --- Structure --- */
  --wsbn-v-max:1280px;
  --wsbn-v-gap:clamp(32px,5vw,72px);
  --wsbn-v-radius:22px;

  /* --- Rythme des animations --- */
  --wsbn-v-dur:1.25s;
  --wsbn-v-ease:cubic-bezier(.16,1,.3,1);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--wsbn-v-ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(58% 60% at 6% 0%,   var(--wsbn-v-bg1) 0%, transparent 62%),
    radial-gradient(52% 58% at 96% 4%,  var(--wsbn-v-bg3) 0%, transparent 60%),
    linear-gradient(180deg, var(--wsbn-v-bg2) 0%, var(--wsbn-v-bg1) 100%);
}

.wsbn-vision *,
.wsbn-vision *::before,
.wsbn-vision *::after{box-sizing:border-box}

.wsbn-vision img{display:block;max-width:100%}
.wsbn-vision a{text-decoration:none;color:inherit}
.wsbn-vision ul{list-style:none;margin:0;padding:0}
.wsbn-vision svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   HAUT : texte + media
   -------------------------------------------------------------------------- */

.wsbn-vision__main{position:relative}

/* Le fondu vit ICI (et pas en element separe) : il se cale tout seul sur le
   bas du bloc haut, quelle que soit sa hauteur. */
.wsbn-vision__main::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:var(--wsbn-v-fade-h);
  pointer-events:none;
  z-index:3;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--wsbn-v-fade) 92%);
}

/* La marge basse vaut EXACTEMENT la hauteur du fondu : le degrade ne couvre
   que du vide, jamais le texte. Regler l'un regle l'autre. */
.wsbn-vision__inner{
  max-width:var(--wsbn-v-max);
  margin:0 auto;
  padding:clamp(48px,6vw,88px) clamp(20px,4vw,48px) var(--wsbn-v-fade-h);
}

.wsbn-vision__grid{
  display:grid;
  grid-template-columns:1.06fr 1fr;
  gap:var(--wsbn-v-gap);
  align-items:center;
}

/* --------------------------------------------------------------------------
   COLONNE TEXTE
   -------------------------------------------------------------------------- */

.wsbn-vision__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 0 26px;
  padding:9px 18px;
  border-radius:999px;
  border:1px solid rgba(109,59,235,.28);
  background:rgba(255,255,255,.55);
  color:var(--wsbn-v-accent);
  font-size:11.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.wsbn-vision__eyebrow i{
  width:0;height:0;flex:none;
  border-left:6px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
}

.wsbn-vision__title{
  margin:0;
  font-size:clamp(36px,4.5vw,60px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.032em;
  color:var(--wsbn-v-ink);
}

/* Surlignage feutre : trait epais cale sur la ligne de base, pas un fond
   plein (qui ecraserait les jambages). */
/* Pas de padding : il ajouterait un blanc visible avant la ponctuation
   suivante ("du temps ."). Le trait deborde via des offsets negatifs, qui
   ne prennent aucune place dans le flux. */
.wsbn-vision__hl{
  position:relative;
  background:none;
  color:inherit;
  padding:0;
}
.wsbn-vision__hl::before{
  content:"";
  position:absolute;z-index:-1;
  left:-.05em;right:-.05em;bottom:.02em;
  height:.36em;
  background:var(--wsbn-v-highlight);
  transform:skewX(-2deg);
}

/* La colonne de texte n'avait aucune regle de base : elle n'apparaissait
   dans cette feuille que pour ses animations. Le repli de 100 % est donc
   le rendu d'avant la 1.74, au pixel. */
.wsbn-vision__copy{max-width:var(--wsbn-v-copy-w, 100%)}

.wsbn-vision__lede{
  margin:24px 0 0;
  max-width:33em;
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.62;
  color:var(--wsbn-v-muted);
  font-weight:400;
}
.wsbn-vision__lede strong{color:var(--wsbn-v-ink);font-weight:700}

/* --- Bouton unique --- */
.wsbn-vision__cta{margin-top:34px}

/* DEUX BOUTONS COTE A COTE.
   La rangee n'existe qu'avec la classe `--duo`, posee uniquement quand les
   deux boutons sortent : une banniere a un seul bouton ne bouge pas. */
.wsbn-vision__cta--duo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--wsbn-v-btn-gap, 14px);
}

/* LE SECOND BOUTON garde `.wsbn-vision__btn` pour la geometrie et la police,
   puis defait ce qui fait du premier le bouton PRINCIPAL : le fond plein et
   son ombre portee. Deux boutons pleins cote a cote ne se hierarchisent
   plus, et le visiteur ne sait plus lequel est l'action. */
/* Le bloc du SECOND BOUTON est plus bas, APRES `.wsbn-vision__btn` : a
   specificite egale (0-1-0), c'est la derniere regle ecrite qui gagne. */

.wsbn-vision__btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:19px 36px;
  border-radius:999px;
  background:var(--wsbn-v-accent);
  color:var(--wsbn-v-accent-ink);
  font-size:15px;font-weight:700;
  letter-spacing:-.01em;
  box-shadow:0 14px 32px rgba(109,59,235,.30);
  transition:transform .28s var(--wsbn-v-ease),scale .28s var(--wsbn-v-ease), box-shadow .28s ease, filter .28s ease;
}
/* L'AGRANDISSEMENT S'ECRIT SUR `scale`, PAS SUR `transform`.
   Le bouton monte deja au survol en ecrivant sur `transform` : une
   seconde ecriture sur la meme propriete aurait annule la premiere. Les
   proprietes individuelles, elles, se composent. */
.wsbn-vision__btn:hover{
  transform:translateY(-3px);
  scale:var(--wsbn-v-btn-grow,1.04);
  filter:brightness(1.08);
  box-shadow:0 22px 44px rgba(109,59,235,.40);
}

/* --------------------------------------------------------------------------
   LE SECOND BOUTON

   ECRIT APRES LA BASE ET APRES SON `:hover`, parce qu'il doit defaire leur
   fond et leur ombre portee. Tous ces selecteurs sont en 0-1-0 : a
   specificite egale, c'est le dernier ecrit qui gagne. Pose plus haut, ce
   bloc perdait en silence et le second bouton gardait le violet du premier.

   Le contour est une OMBRE INTERIEURE : une bordure de 2 px se serait
   ajoutee a la boite, et le second aurait fait 70 px contre 67 au premier.
   La couleur est celle du TEXTE : l'accent en texte tombait a 3,09 de
   contraste, a la limite du seuil, alors qu'il est fait pour etre un fond.
   -------------------------------------------------------------------------- */

/* LA RACINE DEVANT : `frontend.min.css` d'Elementor ecrit
   `.elementor a{box-shadow:none}` en 0-1-1, et effacait le contour d'un
   selecteur a nous en 0-1-0. Le bouton gardait sa couleur et perdait son
   trait, ce qui ne se voit qu'en comparant avec le premier. */
.wsbn-vision a.wsbn-vision__btn--sec,
.wsbn-vision .wsbn-vision__btn--sec{
  background:transparent;
  color:var(--wsbn-v-btn2-encre, currentColor);
  box-shadow:inset 0 0 0 2px var(--wsbn-v-btn2-bord, currentColor);
}

.wsbn-vision a.wsbn-vision__btn--sec:hover,
.wsbn-vision .wsbn-vision__btn--sec:hover{
  background:var(--wsbn-v-btn2-fond-h, transparent);
  box-shadow:inset 0 0 0 2px var(--wsbn-v-btn2-bord, currentColor);
  filter:none;
}
.wsbn-vision__btn svg{width:17px;height:17px;stroke-width:2.2}
.wsbn-vision__btn:hover svg{animation:wsbn-v-nudge .5s ease}

@keyframes wsbn-v-nudge{50%{transform:translateX(4px)}}

/* --- Rangee de preuves --- */
/* Qualifie `ul` : le reset `.wsbn-vision ul{margin:0}` est plus specifique
   qu'une classe seule et collerait les preuves sous le bouton. */
.wsbn-vision ul.wsbn-vision__stats{
  display:flex;align-items:center;flex-wrap:wrap;
  margin-top:38px;
}
.wsbn-vision__stat{
  display:flex;align-items:baseline;gap:6px;
  padding:2px 16px;
  white-space:nowrap;
}
.wsbn-vision__stat:first-child{padding-left:0}
.wsbn-vision__stat + .wsbn-vision__stat{border-left:1px solid rgba(20,16,32,.16)}

.wsbn-vision__stat b{
  font-size:15.5px;font-weight:800;
  color:var(--wsbn-v-ink);
  letter-spacing:-.02em;
}
.wsbn-vision__stat span{
  font-size:13px;font-weight:500;
  color:var(--wsbn-v-muted);
}
.wsbn-vision__stars{
  display:inline-flex;gap:1px;
  margin-right:3px;
  color:#00B67A;
}
.wsbn-vision__stars svg{width:14px;height:14px;fill:currentColor;stroke:none}

/* --------------------------------------------------------------------------
   COLONNE MEDIA
   -------------------------------------------------------------------------- */

.wsbn-vision__media{
  position:relative;
  z-index:2;
}

.wsbn-vision__shot{
  position:relative;
  margin:0;
  border-radius:var(--wsbn-v-radius);
  overflow:hidden;
  box-shadow:0 30px 70px rgba(24,14,54,.24), 0 2px 6px rgba(24,14,54,.10);
  background:rgba(24,14,54,.06);
}
/* Le cadrage de la photo est pilotable : sans lui, un sujet place haut ou sur
   un cote sortait du cadre des que le format changeait. */
.wsbn-vision__shot img{
  width:100%;height:100%;
  aspect-ratio:var(--wsbn-v-shot-ratio,5/4);
  object-fit:cover;
  object-position:var(--wsbn-v-pos-x,50%) var(--wsbn-v-pos-y,50%);
}

/* --- Encadres flottants --- */
/* --x / --y sont poses par Elementor via {{CURRENT_ITEM}}. Les replis evitent
   un empilement au coin haut-gauche si la regle n'a pas encore ete generee. */
.wsbn-vision__badge{
  position:absolute;z-index:4;
  left:var(--x,50%);
  top:var(--y,50%);
  transform:translate(-50%,-50%);
}
.wsbn-vision__badge-in{
  display:block;
  padding:13px 18px;
  border-radius:15px;
  background:var(--wsbn-v-badge-bg);
  color:var(--wsbn-v-badge-ink);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 16px 36px rgba(12,6,30,.30);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  white-space:nowrap;
}
.wsbn-vision__badge b{
  display:block;
  font-size:20px;font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--wsbn-v-badge-value);
}
.wsbn-vision__badge span{
  display:block;
  margin-top:3px;
  font-size:11.5px;font-weight:500;
  opacity:.86;
}

/* --------------------------------------------------------------------------
   ANIMATIONS
   Jouees UNIQUEMENT si .wsbn-vision--animate est present, classe que le PHP
   n'ajoute que sur le front. Dans l'editeur Elementor, tout est deja a l'etat
   final : pas de bloc invisible, le widget reste editable.
   -------------------------------------------------------------------------- */

.wsbn-vision--animate .wsbn-vision__shot{
  animation:wsbn-v-reveal var(--wsbn-v-dur) var(--wsbn-v-ease) both;
}
.wsbn-vision--animate .wsbn-vision__shot img{
  animation:wsbn-v-zoom calc(var(--wsbn-v-dur) * 1.5) var(--wsbn-v-ease) both;
}

@keyframes wsbn-v-reveal{
  from{opacity:0; transform:translateY(26px) scale(.97)}
  to  {opacity:1; transform:none}
}
@keyframes wsbn-v-zoom{
  from{transform:scale(1.16)}
  to  {transform:scale(1)}
}

/* Les encadres entrent en decale, apres l'image. */
.wsbn-vision--animate .wsbn-vision__badge{
  animation:wsbn-v-pop .85s var(--wsbn-v-ease) both;
  animation-delay:calc(var(--wsbn-v-dur) * .55 + var(--i) * .18s);
}
@keyframes wsbn-v-pop{
  from{opacity:0; transform:translate(-50%,calc(-50% + 16px)) scale(.9)}
  to  {opacity:1; transform:translate(-50%,-50%) scale(1)}
}

/* Flottement continu, porte par l'element INTERIEUR : sinon il ecraserait le
   translate(-50%,-50%) du positionnement. */
.wsbn-vision--animate .wsbn-vision__badge-in{
  animation:wsbn-v-float var(--wsbn-v-float-speed, 6s) ease-in-out infinite;
  animation-delay:calc(var(--wsbn-v-dur) + var(--i) * .5s);
}
@keyframes wsbn-v-float{
  50%{transform:translateY(-8px)}
}

/* Colonne texte : arrivee douce, en amont du media. */
.wsbn-vision--animate .wsbn-vision__copy > *{
  animation:wsbn-v-rise .9s var(--wsbn-v-ease) both;
}
.wsbn-vision--animate .wsbn-vision__copy > *:nth-child(1){animation-delay:.05s}
.wsbn-vision--animate .wsbn-vision__copy > *:nth-child(2){animation-delay:.14s}
.wsbn-vision--animate .wsbn-vision__copy > *:nth-child(3){animation-delay:.23s}
.wsbn-vision--animate .wsbn-vision__copy > *:nth-child(4){animation-delay:.32s}
.wsbn-vision--animate .wsbn-vision__copy > *:nth-child(5){animation-delay:.41s}

@keyframes wsbn-v-rise{
  from{opacity:0; transform:translateY(18px)}
  to  {opacity:1; transform:none}
}

/* --------------------------------------------------------------------------
   PIED : filet + video, sur le fond du fondu
   -------------------------------------------------------------------------- */

.wsbn-vision__foot{
  position:relative;
  z-index:4;
  background:var(--wsbn-v-fade);
}

.wsbn-vision__rule{
  height:var(--wsbn-v-rule-h);
  background:var(--wsbn-v-rule);
  opacity:.85;
  border:0;
  margin:0;
}

.wsbn-vision__videowrap{
  max-width:var(--wsbn-v-max);
  margin:0 auto;
  padding:clamp(40px,5vw,72px) clamp(20px,4vw,48px) clamp(48px,6vw,84px);
}

.wsbn-vision__video{
  position:relative;
  width:100%;
  max-width:var(--wsbn-v-video-w);
  margin:0 auto;
  aspect-ratio:16/9;
  border-radius:var(--wsbn-v-radius);
  overflow:hidden;
  background:#000;
  box-shadow:0 34px 80px rgba(0,0,0,.55);
}
.wsbn-vision__video iframe,
.wsbn-vision__video video{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  display:block;
  object-fit:cover;
}

/* Etat vide : un cadre propre plutot qu'un trou noir "widget casse". */
.wsbn-vision__video--empty{
  display:grid;place-items:center;
  background:linear-gradient(150deg,#1B1430 0%,#0B0817 100%);
  border:1px solid rgba(255,255,255,.12);
}
.wsbn-vision__video--empty span{
  display:grid;place-items:center;
  width:66px;height:66px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
}
.wsbn-vision__video--empty svg{width:24px;height:24px;fill:#fff;stroke:none;margin-left:3px}

/* --------------------------------------------------------------------------
   RESPONSIVE (breakpoints Elementor par defaut)
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  .wsbn-vision__grid{gap:clamp(28px,4vw,44px)}
  .wsbn-vision__badge b{font-size:17px}
  .wsbn-vision__badge-in{padding:11px 15px}
}

@media (max-width:880px){
  .wsbn-vision__grid{grid-template-columns:1fr}
  .wsbn-vision__media{order:2;margin-top:8px}
  .wsbn-vision__copy{order:1}
  .wsbn-vision__lede{max-width:none}
  .wsbn-vision__inner{padding-bottom:clamp(130px,20vw,190px)}
}

@media (max-width:767px){
  .wsbn-vision__stat{padding:2px 14px}
  .wsbn-vision__stat + .wsbn-vision__stat{border-left:0}
  .wsbn-vision ul.wsbn-vision__stats{gap:10px 0}

  /* Garde-fou : une position calee pour le grand ecran (9%, 95%...) ferait
     sortir l'encadre de l'ecran une fois la colonne retrecie. On borne, sans
     ecraser un reglage mobile explicite qui resterait dans la plage. */
  .wsbn-vision__badge{
    left:clamp(20%, var(--x,50%), 80%);
  }
  .wsbn-vision__badge-in{
    padding:9px 13px;border-radius:12px;
    white-space:normal;
    max-width:44vw;
  }
  .wsbn-vision__badge b{font-size:15px}
  .wsbn-vision__badge span{font-size:10.5px}
}

/* --------------------------------------------------------------------------
   ACCESSIBILITE
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .wsbn-vision--animate .wsbn-vision__shot,
  .wsbn-vision--animate .wsbn-vision__shot img,
  .wsbn-vision--animate .wsbn-vision__badge,
  .wsbn-vision--animate .wsbn-vision__badge-in,
  .wsbn-vision--animate .wsbn-vision__copy > *{
    animation:none !important;
  }
  .wsbn-vision *{transition:none !important}
}

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