/* ==========================================================================
   WS Bannière - Bannière immersive plein cadre
   Photo pleine largeur, colonne texte a gauche, cartes empilees a droite,
   puis fondu + ligne de separation + video en pied.
   Valeurs identiques a la maquette HTML validee.
   ========================================================================== */

.wsbn-imm{
  /* --- Couleurs --- */
  --wsbn-i-ink:#FFFFFF;
  --wsbn-i-muted:rgba(233,242,239,.80);
  --wsbn-i-brand:#0C3B38;          /* teinte du voile */
  --wsbn-i-accent:#FF6A3D;
  --wsbn-i-accent-ink:#FFFFFF;
  --wsbn-i-hl:#FFC857;             /* soulignage du titre */

  /* --- Voile --- */
  --wsbn-i-scrim-angle:96deg;      /* sens du degrade */
  --wsbn-i-scrim-end:62%;          /* ou le voile s'eteint : au-dela, photo nue */
  --wsbn-i-scrim-op:1;             /* intensite globale */
  --wsbn-i-veil-x:15%;             /* centre du renfort derriere le texte */
  --wsbn-i-veil-y:50%;
  --wsbn-i-veil-op:.40;            /* intensite du renfort */

  /* --- Cartes --- */
  --wsbn-i-card:rgba(9,36,34,.46);
  --wsbn-i-card-bd:rgba(255,255,255,.24);
  --wsbn-i-card-r:18px;
  --wsbn-i-card-w:272px;

  /* --- Pied --- */
  --wsbn-i-fade:#07100F;
  --wsbn-i-fade-h:170px;
  --wsbn-i-rule:#FFFFFF;
  --wsbn-i-rule-h:1px;
  --wsbn-i-video-w:900px;

  /* --- Structure --- */
  --wsbn-i-max:1320px;
  --wsbn-i-radius:22px;
  --wsbn-i-minh:clamp(580px,76vh,780px);
  --wsbn-i-dur:1.15s;
  --wsbn-i-ease:cubic-bezier(.16,1,.3,1);
  --wsbn-i-img-x:58%;
  --wsbn-i-img-y:46%;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--wsbn-i-brand);
  color:var(--wsbn-i-ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

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

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

.wsbn-imm__main{position:relative;min-height:var(--wsbn-i-minh);display:flex;align-items:center}

/* --------------------------------------------------------------------------
   IMAGE PLEIN CADRE
   -------------------------------------------------------------------------- */

.wsbn-imm__bg{position:absolute;inset:0;z-index:0}
/* Leger gain de lumiere et de matiere : la photo doit se lire comme une photo,
   pas comme un fond. */
.wsbn-imm__bg img{width:100%;height:100%;object-fit:cover;
  object-position:var(--wsbn-i-img-x) var(--wsbn-i-img-y);
  filter:brightness(1.07) contrast(1.05) saturate(1.06)}

/* --------------------------------------------------------------------------
   VOILE
   Il protege le TEXTE, il ne teinte pas la photo. Le degrade s'eteint a
   --wsbn-i-scrim-end : au-dela, la photo est intacte.

   Repli : un degrade aux alphas figes (teinte non modifiable, mais correct).
   Amelioration : une couche de couleur UNIE decoupee par un masque, ce qui
   rend la teinte pilotable depuis Elementor. Sans ce @supports, un navigateur
   sans mask-image afficherait un aplat opaque sur toute la photo.
   -------------------------------------------------------------------------- */

.wsbn-imm__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:var(--wsbn-i-scrim-op);
  background:
    linear-gradient(var(--wsbn-i-scrim-angle),
      rgba(12,59,56,1) 0%,
      rgba(12,59,56,.90) calc(var(--wsbn-i-scrim-end) * .27),
      rgba(12,59,56,.60) calc(var(--wsbn-i-scrim-end) * .50),
      rgba(12,59,56,.22) calc(var(--wsbn-i-scrim-end) * .71),
      rgba(12,59,56,.05) calc(var(--wsbn-i-scrim-end) * .89),
      rgba(12,59,56,0) var(--wsbn-i-scrim-end)),
    radial-gradient(42% 66% at var(--wsbn-i-veil-x) var(--wsbn-i-veil-y),
      rgba(5,26,24,var(--wsbn-i-veil-op)) 0%, transparent 74%);
}

@supports (mask-image: linear-gradient(#000,#000)) or (-webkit-mask-image: linear-gradient(#000,#000)){
  .wsbn-imm__scrim{
    background:var(--wsbn-i-brand);
    -webkit-mask-image:
      linear-gradient(var(--wsbn-i-scrim-angle),
        #000 0%,
        rgba(0,0,0,.90) calc(var(--wsbn-i-scrim-end) * .27),
        rgba(0,0,0,.60) calc(var(--wsbn-i-scrim-end) * .50),
        rgba(0,0,0,.22) calc(var(--wsbn-i-scrim-end) * .71),
        rgba(0,0,0,.05) calc(var(--wsbn-i-scrim-end) * .89),
        transparent var(--wsbn-i-scrim-end)),
      radial-gradient(42% 66% at var(--wsbn-i-veil-x) var(--wsbn-i-veil-y),
        rgba(0,0,0,var(--wsbn-i-veil-op)) 0%, transparent 74%);
    -webkit-mask-composite:source-over;
    mask-image:
      linear-gradient(var(--wsbn-i-scrim-angle),
        #000 0%,
        rgba(0,0,0,.90) calc(var(--wsbn-i-scrim-end) * .27),
        rgba(0,0,0,.60) calc(var(--wsbn-i-scrim-end) * .50),
        rgba(0,0,0,.22) calc(var(--wsbn-i-scrim-end) * .71),
        rgba(0,0,0,.05) calc(var(--wsbn-i-scrim-end) * .89),
        transparent var(--wsbn-i-scrim-end)),
      radial-gradient(42% 66% at var(--wsbn-i-veil-x) var(--wsbn-i-veil-y),
        rgba(0,0,0,var(--wsbn-i-veil-op)) 0%, transparent 74%);
    mask-composite:add;
  }
}

/* Assombrissement du bas : couleur du fondu, a 30 %. */
.wsbn-imm__scrim::after{
  content:"";position:absolute;inset:0;
  background:var(--wsbn-i-fade);
  opacity:.30;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 22%);
  mask-image:linear-gradient(to top, #000 0%, transparent 22%);
}

/* Le fondu du bas, cale sur la marge basse de la colonne */
.wsbn-imm__main::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:var(--wsbn-i-fade-h);
  z-index:4;pointer-events:none;
  background:linear-gradient(to bottom, rgba(7,16,15,0) 0%, var(--wsbn-i-fade) 90%);
}

.wsbn-imm__inner{
  position:relative;z-index:3;width:100%;
  max-width:var(--wsbn-i-max);margin:0 auto;
  padding:clamp(56px,6vw,86px) clamp(20px,4vw,48px) calc(var(--wsbn-i-fade-h) + 10px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,4vw,64px);align-items:center;
}

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

/* La largeur vient du panneau depuis la 1.74. Le repli vaut la valeur
   ecrite en dur jusque-la : une banniere sans reglage ne bouge pas. */
.wsbn-imm__copy{max-width:var(--wsbn-i-copy-w, 600px)}

.wsbn-imm__eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
  padding:8px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.10);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.wsbn-imm__eyebrow em{width:6px;height:6px;border-radius:50%;background:var(--wsbn-i-accent);flex:none}

.wsbn-imm__title{
  margin:0;font-size:clamp(30px,3.4vw,46px);line-height:1.08;
  font-weight:800;letter-spacing:-.03em;color:var(--wsbn-i-ink);
  text-shadow:0 2px 10px rgba(4,20,18,.45), 0 6px 34px rgba(4,20,18,.35);
}
.wsbn-imm__hl{position:relative;padding:0;color:var(--wsbn-i-hl)}
.wsbn-imm__hl::after{
  content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.09em;
  border-radius:99px;background:currentColor;opacity:.65;
}

/* 29em : au-dela, la fin des lignes sort de la zone protegee par le voile et
   se retrouve sur la partie claire de la photo. */
.wsbn-imm__lede{margin:18px 0 0;max-width:29em;font-size:15px;line-height:1.6;color:var(--wsbn-i-muted)}

/* CTA : UNE seule pilule, icone a l'interieur. Une pastille separee creait une
   encoche disgracieuse entre les deux formes. */
.wsbn-imm__cta{margin-top:26px}

/* DEUX BOUTONS COTE A COTE.
   La rangee n'existe que quand la classe `--duo` est posee, c'est-a-dire
   quand les deux boutons sortent vraiment : une banniere a un seul bouton ne
   change pas d'un pixel. `flex-wrap` laisse le second passer dessous quand
   la colonne devient etroite, plutot que d'ecraser les deux libelles. */
.wsbn-imm__cta--duo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--wsbn-i-btn-gap, 14px);
}

/* LE SECOND BOUTON : la meme boite, une autre matiere.
   Il garde `.wsbn-imm__btn` pour la geometrie et la typographie, parce
   qu'ici les effets du principal sont de simples transitions au survol, pas
   un balisage a part : rien ne peut lui arriver a moitie. Il defait ensuite
   ce qui fait de l'autre le bouton PRINCIPAL, le fond plein et son ombre
   portee, pour rester en retrait. */
/* Le bloc du SECOND BOUTON est plus bas, APRES `.wsbn-imm__btn` : les deux
   selecteurs sont en 0-1-0, et a specificite egale c'est la derniere regle
   ecrite qui gagne. Place ici, il perdait en silence. */
.wsbn-imm__btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 28px;border-radius:999px;
  background:var(--wsbn-i-accent);color:var(--wsbn-i-accent-ink);
  font-size:15px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 14px 32px rgba(255,106,61,.34);
  transition:transform .28s var(--wsbn-i-ease),scale .28s var(--wsbn-i-ease),filter .28s ease,box-shadow .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-imm__btn:hover{transform:translateY(-3px);scale:var(--wsbn-i-btn-grow,1.04);filter:brightness(1.07);
  box-shadow:0 20px 44px rgba(255,106,61,.44)}
.wsbn-imm__btn svg{width:17px;height:17px;flex:none;transition:transform .28s var(--wsbn-i-ease)}

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

   ECRIT APRES LA BASE, ET C'EST LA CONDITION POUR QU'IL EXISTE.
   `.wsbn-imm__btn--sec` et `.wsbn-imm__btn` sont tous deux en 0-1-0 : a
   specificite egale, c'est la derniere regle ecrite qui gagne. Pose plus
   haut, ce bloc perdait sans rien dire, le second bouton gardait le fond
   orange du premier, et la mesure montrait `box-shadow: none` la ou on
   venait d'en ecrire une.

   DEUX AUTRES CHOSES QUE SEULE LA MESURE A DONNEES :

   1. LE CONTOUR EST UNE OMBRE INTERIEURE, PAS UNE BORDURE. Une bordure de
      2 px s'ajoute a la boite : le second faisait 64 px contre 61 au
      premier. `box-shadow: inset` dessine le meme trait sans prendre de
      place, donc les deux gardent la marge interieure de la base et la meme
      hauteur par construction, pas par reglage.

   2. LA COULEUR EST CELLE DU TEXTE, PAS L'ACCENT. Prendre l'accent semblait
      logique, c'est la couleur du bouton principal. Contraste mesure : 2,85,
      sous le seuil de 3:1. L'accent est fait pour etre un FOND, avec une
      encre choisie pour lui ; il ne se retourne pas en couleur de texte.
   -------------------------------------------------------------------------- */

/* LA RACINE PASSE DEVANT, SINON ELEMENTOR EFFACE LE CONTOUR.
   `frontend.min.css` d'Elementor ecrit `.elementor a{box-shadow:none}`, en
   0-1-1. Un selecteur a nous en 0-1-0 perd, et le contour disparaissait sans
   rien dire : le bouton gardait sa bonne couleur de texte, mesure a 12,37 de
   contraste, mais plus aucun trait autour. C'est la meme famille de piege
   que le reset `a{color:inherit}` des themes, et la meme reponse : monter en
   0-2-1 avec la racine devant. */
.wsbn-imm a.wsbn-imm__btn--sec,
.wsbn-imm .wsbn-imm__btn--sec{
  background:transparent;
  color:var(--wsbn-i-btn2-encre, currentColor);
  box-shadow:inset 0 0 0 2px var(--wsbn-i-btn2-bord, currentColor);
}

.wsbn-imm a.wsbn-imm__btn--sec:hover,
.wsbn-imm .wsbn-imm__btn--sec:hover{
  background:var(--wsbn-i-btn2-fond-h, transparent);
  box-shadow:inset 0 0 0 2px var(--wsbn-i-btn2-bord, currentColor);
  filter:none;
}
.wsbn-imm__btn:hover svg{transform:translate(3px,-3px)}

/* --------------------------------------------------------------------------
   CARTES
   -------------------------------------------------------------------------- */

.wsbn-imm__cards{display:flex;flex-direction:column;gap:11px;
  width:clamp(222px,20vw,var(--wsbn-i-card-w))}

/* Verre depoli TEINTE SOMBRE : les cartes flottent sur la partie claire de la
   photo, un verre blanc y rendrait le texte illisible. Le fond doit rester
   partiellement transparent, sinon backdrop-filter n'a plus rien a flouter. */
.wsbn-imm__card{
  position:relative;padding:16px 18px;border-radius:var(--wsbn-i-card-r);
  background:var(--wsbn-i-card);color:#fff;
  border:1px solid var(--wsbn-i-card-bd);
  box-shadow:0 18px 40px rgba(4,20,18,.26);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
}
.wsbn-imm__card b{display:block;font-size:clamp(23px,2.1vw,29px);font-weight:800;
  line-height:1.05;letter-spacing:-.035em}
.wsbn-imm__card p{margin:7px 0 0;font-size:12.5px;line-height:1.45;
  color:rgba(255,255,255,.82);font-weight:500}

/* La pastille partage une rangee flex avec le chiffre. En position:absolue
   elle mordait sur la 1re ligne de description des que le texte s'allongeait
   (mesure : 11 px de recouvrement). En flex, c'est impossible. */
.wsbn-imm__card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wsbn-imm__card-go{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.34);color:#fff;
}
.wsbn-imm__card-go svg{width:13px;height:13px}

.wsbn-imm__faces{display:flex;align-items:center;margin-top:13px}
.wsbn-imm__faces img{width:28px;height:28px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.75)}
.wsbn-imm__faces img + img{margin-left:-9px}
.wsbn-imm__faces span{
  display:grid;place-items:center;width:28px;height:28px;margin-left:-9px;
  border-radius:50%;background:var(--wsbn-i-accent);color:#fff;
  border:2px solid rgba(255,255,255,.75);font-size:11px;font-weight:800;
}

/* --------------------------------------------------------------------------
   ANIMATIONS
   Jouees uniquement si .wsbn-imm--animate est present, classe que le PHP
   n'ajoute que sur le front. Dans l'editeur, tout est deja a l'etat final.
   -------------------------------------------------------------------------- */

.wsbn-imm--animate .wsbn-imm__bg img{
  animation:wsbn-i-zoom calc(var(--wsbn-i-dur) * 2.1) var(--wsbn-i-ease) both}
@keyframes wsbn-i-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}

.wsbn-imm--animate .wsbn-imm__copy > *{animation:wsbn-i-rise .9s var(--wsbn-i-ease) both}
.wsbn-imm--animate .wsbn-imm__copy > *:nth-child(1){animation-delay:.06s}
.wsbn-imm--animate .wsbn-imm__copy > *:nth-child(2){animation-delay:.15s}
.wsbn-imm--animate .wsbn-imm__copy > *:nth-child(3){animation-delay:.24s}
.wsbn-imm--animate .wsbn-imm__copy > *:nth-child(4){animation-delay:.33s}
.wsbn-imm--animate .wsbn-imm__copy > *:nth-child(5){animation-delay:.42s}
@keyframes wsbn-i-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Cascade : chaque carte entre apres la precedente... */
.wsbn-imm--animate .wsbn-imm__card{
  animation:wsbn-i-pop .8s var(--wsbn-i-ease) both;
  animation-delay:calc(var(--wsbn-i-dur) * .45 + var(--i) * .17s)}
@keyframes wsbn-i-pop{
  from{opacity:0;transform:translateX(26px) scale(.96)}
  to  {opacity:1;transform:none}}

/* ...puis flotte en continu. Porte par un element INTERIEUR : sur la carte
   elle-meme, le flottement ecraserait le transform de l'entree. */
.wsbn-imm--animate .wsbn-imm__card-in{
  display:block;animation:wsbn-i-float var(--wsbn-i-float-speed, 6.5s) ease-in-out infinite;
  animation-delay:calc(var(--wsbn-i-dur) + var(--i) * .55s)}
@keyframes wsbn-i-float{50%{transform:translateY(-9px)}}

/* --------------------------------------------------------------------------
   PIED
   -------------------------------------------------------------------------- */

.wsbn-imm__foot{position:relative;z-index:5;background:var(--wsbn-i-fade)}

/* Ligne de separation : titre a gauche, filet qui court, lien a droite.
   Le filet est un flex:1, il occupe donc TOUT l'espace restant quelle que
   soit la longueur des deux textes. */
.wsbn-imm__sep{
  max-width:var(--wsbn-i-max);margin:0 auto;
  display:flex;align-items:center;gap:20px;
  padding:clamp(30px,3.4vw,46px) clamp(20px,4vw,48px) 0;
}
.wsbn-imm__sep-title{flex:none;font-size:clamp(16px,1.8vw,19px);font-weight:800;
  letter-spacing:-.02em;color:#fff}
.wsbn-imm__sep-line{flex:1;height:var(--wsbn-i-rule-h);background:var(--wsbn-i-rule);opacity:.28}
.wsbn-imm a.wsbn-imm__sep-link{
  flex:none;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.80);
  text-decoration:underline;text-underline-offset:3px;transition:color .2s ease;
}
.wsbn-imm a.wsbn-imm__sep-link:hover{color:var(--wsbn-i-accent)}

.wsbn-imm__videowrap{max-width:var(--wsbn-i-max);margin:0 auto;
  padding:clamp(30px,3.4vw,48px) clamp(20px,4vw,48px) clamp(46px,5.4vw,78px)}
.wsbn-imm__video{
  position:relative;width:100%;max-width:var(--wsbn-i-video-w);margin:0 auto;
  aspect-ratio:16/9;border-radius:var(--wsbn-i-radius);overflow:hidden;background:#000;
  box-shadow:0 36px 84px rgba(0,0,0,.6);
}
.wsbn-imm__video iframe,
.wsbn-imm__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-imm__video--empty{display:grid;place-items:center;
  background:linear-gradient(150deg,#12302D 0%,#070F0E 100%);
  border:1px solid rgba(255,255,255,.12)}
.wsbn-imm__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-imm__video--empty svg{width:24px;height:24px;fill:#fff;stroke:none;margin-left:3px}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width:1080px){
  .wsbn-imm__inner{grid-template-columns:1fr;align-items:start}
  .wsbn-imm__cards{flex-direction:row;width:100%;flex-wrap:wrap;margin-top:34px}
  .wsbn-imm__card{flex:1 1 210px}
  .wsbn-imm__faces{display:none}
}

@media (max-width:767px){
  .wsbn-imm__main{min-height:0}
  .wsbn-imm__inner{padding-top:44px}
  /* En colonne, un voile horizontal n'a plus de sens : il passe en vertical. */
  .wsbn-imm__scrim{
    background:linear-gradient(180deg, rgba(12,59,56,.90) 0%, rgba(12,59,56,.72) 45%, rgba(7,16,15,.86) 100%);
    -webkit-mask-image:none;mask-image:none;
  }
  .wsbn-imm__scrim::after{display:none}
  .wsbn-imm__cards{flex-direction:column}
  .wsbn-imm__card{flex:1 1 auto}
  .wsbn-imm__sep{flex-wrap:wrap;gap:12px}
  .wsbn-imm__sep-line{display:none}
}

@media (prefers-reduced-motion:reduce){
  .wsbn-imm--animate *{animation:none !important}
  .wsbn-imm *{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;
}