/* ==========================================================================
   WS Bannière - Hero Vidéo
   Bloc sombre + vidéo qui déborde sur une feuille claire + bandeau de
   marques (fixe ou carrousel).

   CETTE FEUILLE NE COUVRE PAS 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). On n'y touche ici que
   pour les deux ou trois propriétés de mise en page qui lui sont propres.

   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. La seule exception assumée est le bloc
   de neutralisation ci-dessous, qui doit battre `.wsbn-classique` (0-1-0).
   ========================================================================== */

.wsbn-hv{
  /* Cadre */
  --wsbn-hv-sheet:#FFFFFF;
  --wsbn-hv-sheet-radius:30px;
  --wsbn-hv-card-radius:30px;
  --wsbn-hv-glow:rgba(16,64,54,.9);
  --wsbn-hv-pad-t:46px;
  --wsbn-hv-pad-r:40px;
  --wsbn-hv-pad-b:0px;
  --wsbn-hv-pad-l:40px;

  /* Vidéo. --overlap peut être NÉGATIF : le bloc sombre continue alors sous
     la vidéo au lieu de s'arrêter avant. */
  --wsbn-hv-ratio:16 / 7.6;
  --wsbn-hv-overlap:132px;
  --wsbn-hv-video-radius:22px;
  --wsbn-hv-scrim:.22;

  /* Bouton de lecture */
  --wsbn-hv-play-size:78px;
  --wsbn-hv-play-bg:#2EE6B8;
  --wsbn-hv-play-ico:#07211B;
  --wsbn-hv-play-halo:rgba(46,230,184,.45);

  /* Textes */
  --wsbn-hv-muted:rgba(246,250,249,.62);
  --wsbn-hv-hair:rgba(246,250,249,.16);
  --wsbn-hv-badge-label:rgba(246,250,249,.62);
  --wsbn-hv-badge-value:#F6FAF9;
  --wsbn-hv-stat:#F6FAF9;
  --wsbn-hv-stat-suffix:#2EE6B8;
  --wsbn-hv-stat-gap:26px;

  /* Marques */
  --wsbn-hv-marq:#5D6B68;
  --wsbn-hv-marq-hover:#071613;
  --wsbn-hv-marq-opacity:.85;
  --wsbn-hv-marq-ico:20px;
  --wsbn-hv-marq-gap:64px;
  --wsbn-hv-marq-speed:34s;
  --wsbn-hv-marq-top:44px;
  --wsbn-hv-marq-bottom:46px;

  /* Disposition. --align-flex est la traduction de --align pour les
     conteneurs en flex, qui ne connaissent pas "left" et "right". */
  --wsbn-hv-align:left;
  --wsbn-hv-align-flex:flex-start;

  /* Espacements */
  --wsbn-hv-aside-w:326px;
  --wsbn-hv-cols-gap:38px;
  --wsbn-hv-media-gap:38px;
  --wsbn-hv-cta-gap:30px;

  background:var(--wsbn-hv-sheet);
  border-radius:var(--wsbn-hv-sheet-radius);
}

/* NEUTRALISATION DE LA RACINE CLASSIQUE
   Notre racine porte aussi la classe .wsbn-classique - c'est ce qui permet
   aux réglages du titre et du bouton d'y poser leurs variables. Elle hérite
   du coup de la mise en page de Classique (flex, hauteur mini, marge de
   60px), qui n'a aucun sens ici. On la remet à plat, une seule fois. */
.wsbn-hv.wsbn-classique{
  display:block;
  min-height:0;
  padding:0;
  align-items:normal;
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   LE BLOC SOMBRE
   -------------------------------------------------------------------------- */

.wsbn-hv__carte{
  position:relative;
  /* flow-root, et surtout PAS overflow:hidden : la marge négative de la
     vidéo se « collapserait » avec la carte et le débord n'existerait plus.
     flow-root crée le contexte de formatage qui l'en empêche, sans rien
     rogner de ce qui dépasse. */
  display:flow-root;
  padding:var(--wsbn-hv-pad-t) var(--wsbn-hv-pad-r) var(--wsbn-hv-pad-b) var(--wsbn-hv-pad-l);
  border-radius:var(--wsbn-hv-card-radius);
  background:linear-gradient(158deg,#0D2B25 0%,#071613 62%);
  color:#F6FAF9;
}

/* Halo diffus dans le coin haut gauche, posé par-dessus le fond (que celui-ci
   soit une couleur, un dégradé ou une image réglée dans le panneau). */
.wsbn-hv__carte::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(120% 90% at 8% -10%, var(--wsbn-hv-glow) 0%, transparent 58%);
}

.wsbn-hv__haut,
.wsbn-hv__media{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   HAUT : titre | filet | colonne de droite
   -------------------------------------------------------------------------- */

.wsbn-hv__haut{
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,var(--wsbn-hv-aside-w));
  gap:0 var(--wsbn-hv-cols-gap);
  align-items:stretch;
}

/* text-align pose ICI : le titre repris de Classique n'a aucune regle
   d'alignement propre tant que l'utilisateur n'en choisit pas une, il herite
   donc de cette valeur comme le reste de la colonne. */
/* `max-width` ajoutee en 1.74. Le repli de 100 % est le rendu d'avant :
   la colonne prenait tout ce que la grille lui laissait. */
.wsbn-hv__col{min-width:0;text-align:var(--wsbn-hv-align);max-width:var(--wsbn-hv-col-w, 100%)}

.wsbn-hv__filet{background:transparent}
.wsbn-hv--filet .wsbn-hv__filet{background:var(--wsbn-hv-hair)}

/* Titre + mention */
.wsbn-hv__titre-bloc{min-width:0}
.wsbn-hv__titre-bloc--gauche{
  display:flex;
  align-items:flex-end;
  justify-content:var(--wsbn-hv-align-flex);
  gap:18px;
}
.wsbn-hv__titre-bloc--dessus{
  display:flex;
  flex-direction:column;
  align-items:var(--wsbn-hv-align-flex);
  gap:10px;
}

.wsbn-hv__mention{
  display:flex;
  flex-direction:column;
  align-items:var(--wsbn-hv-align-flex);
  line-height:1.25;
  white-space:nowrap;
  /* Aligné sur la dernière ligne du titre, pas sur le bas de son bloc :
     l'interligne du titre laisse un talon sous la dernière ligne. */
  padding-bottom:.5em;
}
.wsbn-hv__titre-bloc--dessus .wsbn-hv__mention{
  flex-direction:row;
  align-items:baseline;
  gap:6px;
  padding-bottom:0;
}
.wsbn-hv__mention span{font-size:12px;font-weight:500;color:var(--wsbn-hv-badge-label)}
.wsbn-hv__mention strong{font-size:18px;font-weight:700;color:var(--wsbn-hv-badge-value)}

/* Le bouton vient de Classique : seule sa position dans cette mise en page
   nous regarde. */
.wsbn-hv .wsbn-classique__cta{margin-top:var(--wsbn-hv-cta-gap)}

/* Colonne de droite */
.wsbn-hv__aside{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:var(--wsbn-hv-align-flex);
  text-align:var(--wsbn-hv-align);
  gap:26px;
  min-width:0;
  padding-top:4px;
}

.wsbn-hv__desc{
  margin:0;
  font-size:13.5px;
  line-height:1.65;
  color:var(--wsbn-hv-muted);
}

.wsbn-hv__stats{
  display:flex;flex-wrap:wrap;
  gap:var(--wsbn-hv-stat-gap);
  justify-content:var(--wsbn-hv-align-flex);
}
.wsbn-hv__stat{
  display:flex;flex-direction:column;gap:4px;min-width:0;
  align-items:var(--wsbn-hv-align-flex);
}
.wsbn-hv__stat b{
  display:flex;align-items:baseline;gap:4px;
  justify-content:var(--wsbn-hv-align-flex);
  font-size:22px;font-weight:700;letter-spacing:-.01em;
  color:var(--wsbn-hv-stat);
}
.wsbn-hv__stat b i{font-style:normal;font-size:15px;color:var(--wsbn-hv-stat-suffix)}
.wsbn-hv__stat span{font-size:11px;line-height:1.35;color:var(--wsbn-hv-muted)}

/* --------------------------------------------------------------------------
   LA VIDÉO
   -------------------------------------------------------------------------- */

.wsbn-hv__media{
  position:relative;
  margin-top:var(--wsbn-hv-media-gap);
  margin-bottom:calc(var(--wsbn-hv-overlap) * -1);
  border-radius:var(--wsbn-hv-video-radius);
  overflow:hidden;
  aspect-ratio:var(--wsbn-hv-ratio);
  background:#0A1E1C;
}

.wsbn-hv__picture{display:block;width:100%;height:100%}
/* Le cadrage de l'image d'attente est pilotable : sans lui, un sujet place
   haut ou sur un cote sortait du cadre des que le format changeait. */
.wsbn-hv__media img{
  width:100%;height:100%;display:block;
  object-fit:cover;
  object-position:var(--wsbn-hv-pos-x,50%) var(--wsbn-hv-pos-y,50%);
}

/* La vidéo une fois lancée occupe exactement la place de l'image. */
.wsbn-hv__media iframe,
.wsbn-hv__media video{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  display:block;
  background:#000;
}

.wsbn-hv__scrim{
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(7,22,19,calc(var(--wsbn-hv-scrim) * .55)) 0%,
    rgba(7,22,19,0) 38%,
    rgba(7,22,19,calc(var(--wsbn-hv-scrim) * 1.3)) 100%);
}

/* Bouton de lecture */
a.wsbn-hv__play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:var(--wsbn-hv-play-size);
  height:var(--wsbn-hv-play-size);
  border-radius:50%;
  background:var(--wsbn-hv-play-bg);
  color:var(--wsbn-hv-play-ico);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  z-index:2;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease;
}
a.wsbn-hv__play:hover{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 18px 42px rgba(0,0,0,.42);
}
a.wsbn-hv__play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.wsbn-hv__play svg{
  position:relative;z-index:1;
  width:28%;height:28%;
  fill:currentColor;
  margin-left:6%;
}

/* Halo pulsé : une ombre qui s'écarte, donc aucune balise en plus et aucune
   incidence sur la mise en page. */
.wsbn-hv--pulse .wsbn-hv__play::before{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 var(--wsbn-hv-play-halo);
  animation:wsbn-hv-pulse var(--wsbn-hv-play-pulse-speed, 2.6s) ease-out infinite;
}
@keyframes wsbn-hv-pulse{
  0%{box-shadow:0 0 0 0 var(--wsbn-hv-play-halo)}
  70%{box-shadow:0 0 0 26px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}

/* Vidéo lancée : le bouton et le voile s'effacent. */
.wsbn-hv__media--joue .wsbn-hv__play,
.wsbn-hv__media--joue .wsbn-hv__scrim,
.wsbn-hv__media--joue .wsbn-hv__picture{display:none}

/* --------------------------------------------------------------------------
   LE BANDEAU DE MARQUES
   Deux modes sur le MÊME balisage, pilotés par data-wsbn-marques sur la
   racine : la bascule dans l'éditeur ne demande aucun rechargement.
   -------------------------------------------------------------------------- */

.wsbn-hv__marques{
  /* max(0px, …) : quand le bloc sombre descend SOUS la vidéo, le blanc se
     mesure à partir du bas du bloc, pas de la vidéo. Sans ce garde-fou le
     calcul deviendrait négatif et la règle entière serait jetée. */
  padding:calc(max(0px, var(--wsbn-hv-overlap)) + var(--wsbn-hv-marq-top)) 12px var(--wsbn-hv-marq-bottom);
  overflow:hidden;
}

.wsbn-hv__piste{
  display:flex;
  align-items:center;
  gap:var(--wsbn-hv-marq-gap);
}

/* Mode fixe */
[data-wsbn-marques="fixe"] .wsbn-hv__piste{
  justify-content:space-between;
  flex-wrap:wrap;
  row-gap:16px;
}
[data-wsbn-marques="fixe"] .wsbn-hv__marque--dup{display:none}

/* Mode carrousel.
   La liste est doublée et la piste translate de la MOITIÉ de sa largeur
   MOINS un demi-écart. Sans ce demi-écart, la boucle repart décalée d'un
   demi-espacement et le saut se voit à chaque tour. */
[data-wsbn-marques="carrousel"] .wsbn-hv__piste{
  width:max-content;
  animation:wsbn-hv-defile var(--wsbn-hv-marq-speed) linear infinite;
}
@keyframes wsbn-hv-defile{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - var(--wsbn-hv-marq-gap) / 2),0,0)}
}
.wsbn-hv--inverse[data-wsbn-marques="carrousel"] .wsbn-hv__piste{animation-direction:reverse}
.wsbn-hv--pause[data-wsbn-marques="carrousel"] .wsbn-hv__marques:hover .wsbn-hv__piste{animation-play-state:paused}
.wsbn-hv--pause[data-wsbn-marques="carrousel"] .wsbn-hv__marques:focus-within .wsbn-hv__piste{animation-play-state:paused}

.wsbn-hv--fondu[data-wsbn-marques="carrousel"] .wsbn-hv__marques{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}

/* Une marque */
.wsbn-hv__marque,
a.wsbn-hv__marque{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--wsbn-hv-marq);
  opacity:var(--wsbn-hv-marq-opacity);
  white-space:nowrap;
  text-decoration:none;
  transition:color .25s ease,opacity .25s ease;
}
a.wsbn-hv__marque:hover,
a.wsbn-hv__marque:focus-visible{color:var(--wsbn-hv-marq-hover);opacity:1}

.wsbn-hv__marque-ico{display:inline-flex;flex:0 0 auto;line-height:0}
.wsbn-hv__marque-ico svg,
.wsbn-hv__marque-ico i{
  width:var(--wsbn-hv-marq-ico);
  height:var(--wsbn-hv-marq-ico);
  font-size:var(--wsbn-hv-marq-ico);
  fill:currentColor;
}
.wsbn-hv__marque-logo{
  flex:0 0 auto;
  height:var(--wsbn-hv-marq-ico);
  width:auto;
  object-fit:contain;
}

/* --------------------------------------------------------------------------
   MOUVEMENT RÉDUIT
   Le visiteur qui le demande ne voit ni halo ni défilement. Rien n'est
   masqué pour autant : les marques restent toutes lisibles, mises en ligne.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .wsbn-hv--pulse .wsbn-hv__play::before{animation:none}
  a.wsbn-hv__play{transition:none}
  [data-wsbn-marques="carrousel"] .wsbn-hv__piste{
    animation:none;
    width:auto;
    flex-wrap:wrap;
    justify-content:center;
    row-gap:16px;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   Mêmes seuils que les points de rupture par défaut d'Elementor, pour que
   les réglages « tablette » et « mobile » du panneau basculent en même temps
   que cette mise en page.
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  /* Replis : mêmes valeurs que les défauts « tablette » des contrôles. */
  .wsbn-hv{
    --wsbn-hv-pad-t:38px;
    --wsbn-hv-pad-r:32px;
    --wsbn-hv-pad-l:32px;
    --wsbn-hv-ratio:16 / 10;
    --wsbn-hv-overlap:96px;
  }

  .wsbn-hv__haut{
    grid-template-columns:1fr;
    gap:26px;
  }
  .wsbn-hv__filet{display:none}
  .wsbn-hv__aside{padding-top:0}
}

@media (max-width:767px){
  /* Replis : mêmes valeurs que les défauts « mobile » des contrôles. */
  .wsbn-hv{
    --wsbn-hv-pad-t:30px;
    --wsbn-hv-pad-r:22px;
    --wsbn-hv-pad-l:22px;
    --wsbn-hv-ratio:4 / 3;
    --wsbn-hv-overlap:56px;
    --wsbn-hv-play-size:62px;
    --wsbn-hv-marq-gap:30px;
    --wsbn-hv-marq-top:24px;
    --wsbn-hv-marq-bottom:28px;
  }

  .wsbn-hv__carte{border-radius:calc(var(--wsbn-hv-card-radius) * .75)}

  /* La mention passe SOUS le titre : entre les deux lignes d'un titre replié,
     elle couperait la lecture. */
  .wsbn-hv__titre-bloc--gauche{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:12px;
  }
  .wsbn-hv__titre-bloc--gauche .wsbn-hv__mention{
    flex-direction:row;
    align-items:baseline;
    gap:6px;
    padding-bottom:0;
  }

  .wsbn-hv__stat b{font-size:19px}

  /* Repliees sur plusieurs lignes, des marques reparties sur la largeur
     laissent la derniere ligne seule et de travers : on les centre. */
  [data-wsbn-marques="fixe"] .wsbn-hv__piste{justify-content:center}

  .wsbn-hv__marque,
  a.wsbn-hv__marque{font-size:14px}
}

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