/* ==========================================================================
   WS Bannière - Bannière hero e-commerce
   Tout est piloté par des CSS vars posées sur .wsbn-hero par les
   `selectors` Elementor. Les valeurs ci-dessous sont les defaults visuels
   (le widget doit être beau dès le drop, sans réglage).
   ========================================================================== */

.wsbn-hero{
  /* --- Palette --- */
  --wsbn-accent:#C8F55A;
  --wsbn-ink:#FFFFFF;
  --wsbn-muted:rgba(233,244,236,.66);

  /* --- Bouton --- */
  /* Independant de --wsbn-accent : changer la couleur d'accent generale
     (surtitre, icones...) ne doit pas toucher au bouton, et inversement. */
  --wsbn-btn-bg:#C8F55A;
  --wsbn-accent-soft:#DBFC8C;
  --wsbn-on-accent:#0B2515;

  /* --- Cadre --- */
  /* Toujours un degrade lineaire a 2 couleurs (controles bg_color_1/2 +
     bg_angle) : pas de type a choisir, pas d'arrets a ordonner. */
  --wsbn-radius:24px;
  --wsbn-bg-1:#FFFFFF;
  --wsbn-bg-2:#0B1D3F;
  --wsbn-bg-angle:118deg;

  /* --- Espacements --- */
  --wsbn-cats-gap:0px;              /* au-dessus de la rangee categories */

  /* --- Mannequin --- */
  --wsbn-model-w:52%;
  --wsbn-model-h:90%;
  --wsbn-model-x:-2%;
  --wsbn-model-fit:cover;
  --wsbn-model-pos-x:50%;              /* doit rester cohérent avec le défaut "Centre" du control */
  --wsbn-model-pos-y:50%;
  --wsbn-model-fade-start:4%;      /* ou le fondu commence */
  --wsbn-model-fade:56%;           /* ou la photo devient pleinement opaque */
  --wsbn-model-fade-b:66%;         /* fondu vers le bas */
  /* Masque horizontal : courbe adoucie (accélération puis décélération) sur
     6 paliers entre fade-start et fade, légèrement inclinée (97deg) pour un
     rendu plus dessiné qu'une coupure strictement verticale. */
  --wsbn-model-mask-x:linear-gradient(97deg,
    transparent var(--wsbn-model-fade-start),
    rgba(0,0,0,.04) calc(var(--wsbn-model-fade-start) + (var(--wsbn-model-fade) - var(--wsbn-model-fade-start)) * .16),
    rgba(0,0,0,.14) calc(var(--wsbn-model-fade-start) + (var(--wsbn-model-fade) - var(--wsbn-model-fade-start)) * .34),
    rgba(0,0,0,.32) calc(var(--wsbn-model-fade-start) + (var(--wsbn-model-fade) - var(--wsbn-model-fade-start)) * .52),
    rgba(0,0,0,.58) calc(var(--wsbn-model-fade-start) + (var(--wsbn-model-fade) - var(--wsbn-model-fade-start)) * .70),
    rgba(0,0,0,.84) calc(var(--wsbn-model-fade-start) + (var(--wsbn-model-fade) - var(--wsbn-model-fade-start)) * .87),
    #000 var(--wsbn-model-fade));
  /* Masque vertical : même logique, palier intermédiaire pour adoucir le bas. */
  --wsbn-model-mask-y:linear-gradient(to bottom,
    #000 var(--wsbn-model-fade-b),
    rgba(0,0,0,.5) calc(var(--wsbn-model-fade-b) + (98% - var(--wsbn-model-fade-b)) * .55),
    transparent 98%);

  /* --- Détails --- */
  --wsbn-card-shadow:rgba(0,0,0,.50);
  --wsbn-eyebrow-line:rgba(255,255,255,.32);
  --wsbn-lede-color:rgba(233,244,236,.82);
  --wsbn-btn-glow:rgba(200,245,90,.28);
  --wsbn-btn-arrow-bg:#12341F;
  --wsbn-btn-arrow-ico:#C8F55A;
  --wsbn-perk-line:rgba(255,255,255,.16);
  --wsbn-perkico-bd:rgba(200,245,90,.38);
  --wsbn-perkico-bg:rgba(200,245,90,.07);
  --wsbn-perkico-color:#C8F55A;
  --wsbn-perks-scale:1;              /* reduit/agrandit tout le bloc avantages d'un coup */
  --wsbn-cats-rule:rgba(255,255,255,.20);
  --wsbn-catslink:rgba(233,244,236,.80);

  /* --- Cartes catégories --- */
  --wsbn-cols:5;
  --wsbn-card-gap:18px;
  --wsbn-card-radius:16px;
  --wsbn-card-ratio:5/7;
  --wsbn-card-scrim:rgba(5,18,11,.92);
  --wsbn-card-bg:#0F3320;
  --wsbn-card-cta:rgba(233,244,236,.82);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--wsbn-radius);
  padding:26px clamp(24px,5.2vw,58px) clamp(26px,3vw,34px);
  background:linear-gradient(var(--wsbn-bg-angle), var(--wsbn-bg-1), var(--wsbn-bg-2));
  box-shadow:0 40px 90px rgba(4,20,12,.45);
  color:var(--wsbn-ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Classe sur le meme element que .wsbn-hero (specificite 0-2-0) : gagne
   toujours face au box-shadow par defaut ci-dessus (0-1-0), contrairement au
   groupe "Aucune ombre" d'Elementor qui n'emet rien du tout quand desactive. */
.wsbn-hero--no-shadow{box-shadow:none}

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

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

/* --------------------------------------------------------------------------
   MANNEQUIN
   -------------------------------------------------------------------------- */

.wsbn-hero__model{
  position:absolute;margin:0;z-index:1;
  right:var(--wsbn-model-x);
  top:0;
  width:var(--wsbn-model-w);
  height:var(--wsbn-model-h);
}
.wsbn-hero__model img{
  width:100%;height:100%;
  object-fit:var(--wsbn-model-fit);
  object-position:var(--wsbn-model-pos-x) var(--wsbn-model-pos-y);
  filter:saturate(.86) contrast(1.06) brightness(.96);
  /* Fondu gauche + bas : simule un détourage à partir d'une photo rectangulaire.
     Courbe adoucie (6 paliers en accélération/décélération, léger angle a
     97deg) plutôt qu'une rampe à 3 points : la coupure ne se voit plus comme
     une ligne, elle se fond dans la photo. */
  -webkit-mask-image:var(--wsbn-model-mask-x), var(--wsbn-model-mask-y);
  -webkit-mask-composite:source-in;
  mask-image:var(--wsbn-model-mask-x), var(--wsbn-model-mask-y);
  mask-composite:intersect;
}

/* --------------------------------------------------------------------------
   CORPS DU HERO
   -------------------------------------------------------------------------- */

.wsbn-hero__body{
  position:relative;z-index:3;
  max-width:min(560px,58%);
  padding-top:clamp(46px,6vw,74px);
  padding-bottom:clamp(30px,4vw,48px);
}

.wsbn-hero__eyebrow{
  display:flex;align-items:center;gap:18px;
  margin:0 0 20px;
  font-size:11.5px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--wsbn-accent);
}
.wsbn-hero__eyebrow i{
  width:78px;height:1px;flex:none;
  background:var(--wsbn-eyebrow-line);
}

.wsbn-hero__title{
  margin:0;
  font-size:clamp(40px,6.3vw,67px);
  line-height:.99;
  font-weight:800;
  letter-spacing:-.032em;
  color:var(--wsbn-ink);
}
/* LE MOT MANUSCRIT EST DU TEXTE, PAS UNE BOITE.
   Il etait en `inline-block`, et un bloc en ligne ne se coupe jamais en
   deux : des que son texte depasse la largeur disponible, il prend toute
   la ligne et pousse la suite. C'est le saut de ligne que personne n'avait
   demande, corrige en 1.50 sur les parties de titre et dormant ici parce
   que le mot par defaut tient sur une ligne. */
.wsbn-hero__script{
  position:relative;
  display:inline;
  font-family:"Kaushan Script",cursive;
  font-style:normal;font-weight:400;
  color:var(--wsbn-accent);
  font-size:1.05em;
  letter-spacing:0;
  padding:0 .08em 0 .04em;
  transform:translateY(.03em);
}
/* La boite revient quand le trait de pinceau est demande : il se pose en
   absolu et lui faut un repere a sa mesure. Sur un mot qui se coupe, le
   trait suivrait sinon le premier fragment seul. */
.wsbn-hero__script:has(> .wsbn-hero__swash){
  display:inline-block;
  max-width:100%;
}

/* Meme precaution que pour la courbe d'Arc : sans la racine devant, ce
   selecteur vaut 0-1-0 et un theme qui pose `.elementor-element
   svg{width:1em}` ramenerait ce trait de 118 % de large a quatorze
   pixels. Le defaut n'a jamais ete signale ici, il attendait le bon
   theme. */
.wsbn-hero .wsbn-hero__swash{
  position:absolute;
  left:-10%;bottom:-.30em;
  width:118%;height:.30em;
  color:var(--wsbn-accent);
  stroke:none;overflow:visible;
  transform:rotate(-6.5deg);
}
.wsbn-hero__swash path{stroke:currentColor;fill:none}

.wsbn-hero__lede{
  margin:22px 0 0;
  font-size:14.5px;
  line-height:1.62;
  color:var(--wsbn-lede-color);
  font-weight:400;
}

/* --- CTA --- */

.wsbn-hero__cta{
  display:flex;align-items:center;gap:clamp(20px,3vw,34px);
  flex-wrap:wrap;
  margin-top:30px;
}

/* Qualifié `a` : le reset `.wsbn-hero a{color:inherit}` a une specificite
   (0-1-1) superieure a `.wsbn-hero__btn` seul (0-1-0) et gagnait toujours,
   forcant le bouton a heriter de la couleur de texte principale au lieu de
   sa propre couleur - meme piege deja corrige sur .wsbn-hero__catslink,
   manquant ici. */
.wsbn-hero a.wsbn-hero__btn{
  display:inline-flex;align-items:center;gap:16px;
  padding:7px 7px 7px 26px;
  border-radius:999px;
  background:var(--wsbn-btn-bg);
  color:var(--wsbn-on-accent);
  font-size:12.5px;font-weight:800;
  letter-spacing:.10em;text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 12px 28px var(--wsbn-btn-glow);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),scale .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,background .24s 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-hero__btn:hover{
  transform:translateY(-3px);
  scale:var(--wsbn-btn-grow,1.04);
  background:var(--wsbn-accent-soft);
  box-shadow:0 18px 38px var(--wsbn-btn-glow);
}
/* LE SECOND BOUTON.
   Il garde `.wsbn-hero__btn` pour la geometrie et la police, puis defait ce
   qui fait du premier le bouton PRINCIPAL : le fond plein et son halo. Deux
   boutons pleins cote a cote ne se hierarchisent plus, et le visiteur ne sait
   plus lequel porte l'action.

   LA MARGE INTERIEURE EST SYMETRIQUE, ET C'EST LA VRAIE RAISON DE CE BLOC.
   Le bouton principal est en `7px 7px 7px 26px` : il reserve sa droite a la
   pastille de la fleche. Le second n'en a pas ; avec la meme marge il
   paraitrait colle a droite et decale a gauche, sans qu'on comprenne
   pourquoi.

   Selecteur en 0-2-1, comme la base `.wsbn-hero a.wsbn-hero__btn`, et ecrit
   APRES elle : a specificite egale, c'est la derniere qui gagne. */
/* LA COULEUR PAR DEFAUT EST CELLE DU TEXTE, JAMAIS L'ACCENT.
   Mesure du 2026-09-24 : le vert d'accent (#C8F55A) pose en TEXTE sur le
   fond clair de Hero donnait un contraste de **1,22**. Autant dire un bouton
   invisible, et sur la seule banniere ou l'accent est une couleur tres
   claire. L'accent est fait pour etre un FOND, avec une encre choisie pour
   lui ; il ne se retourne pas en couleur de texte.

   LA HAUTEUR SE RATTRAPE PAR `min-height`, ET PAS PAR LA MARGE INTERIEURE.
   Le bouton principal de Hero est en `7px 7px 7px 26px` : sa hauteur vient
   de la PASTILLE de 32 px qu'il contient, pas de son texte. Le second n'a
   pas de pastille ; avec la meme marge il ferait 29 px contre 46. On lui
   donne donc la hauteur de la pastille plus les deux marges, et une marge
   interieure symetrique puisqu'il n'a rien a reserver a droite. */
.wsbn-hero a.wsbn-hero__btn--sec{
  padding:7px 26px;
  min-height:46px;
  background:transparent;
  color:var(--wsbn-hero-btn2-encre, currentColor);
  box-shadow:inset 0 0 0 2px var(--wsbn-hero-btn2-bord, currentColor);
}

.wsbn-hero a.wsbn-hero__btn--sec:hover{
  background:var(--wsbn-hero-btn2-fond-h, transparent);
  box-shadow:inset 0 0 0 2px var(--wsbn-hero-btn2-bord, currentColor);
}

.wsbn-hero__btnarrow{
  display:grid;place-items:center;
  width:32px;height:32px;flex:none;
  border-radius:50%;
  background:var(--wsbn-btn-arrow-bg);color:var(--wsbn-btn-arrow-ico);
}
.wsbn-hero__btnarrow svg{width:15px;height:15px;stroke-width:2}
.wsbn-hero__btn:hover .wsbn-hero__btnarrow svg{animation:wsbn-nudge .5s ease}
@keyframes wsbn-nudge{50%{transform:translateX(4px)}}

.wsbn-hero__play{display:inline-flex;align-items:center;gap:13px}
.wsbn-hero__playdisc{
  display:grid;place-items:center;
  width:44px;height:44px;flex:none;
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 8px 22px rgba(3,16,9,.30);
  transition:transform .24s ease;
}
.wsbn-hero__playdisc svg{width:19px;height:19px;fill:#10301C;stroke:none;margin-left:2px}
.wsbn-hero__play:hover .wsbn-hero__playdisc{transform:scale(1.08)}
.wsbn-hero__playtxt{display:flex;flex-direction:column;gap:2px}
.wsbn-hero__playtxt strong{font-size:13.5px;font-weight:700}
.wsbn-hero__playtxt small{font-size:11px;color:var(--wsbn-muted);font-weight:400}

/* --- Avantages --- */

/* Qualifié `ul` : le reset `.wsbn-hero ul{margin:0}` est plus spécifique
   qu'une classe seule et écraserait ce margin-top. */
.wsbn-hero ul.wsbn-hero__perks{
  display:flex;align-items:center;flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,42px);
}
.wsbn-hero__perk{
  display:flex;align-items:center;gap:calc(11px * var(--wsbn-perks-scale));
  padding:calc(2px * var(--wsbn-perks-scale)) calc(22px * var(--wsbn-perks-scale));
}
.wsbn-hero__perk:first-child{padding-left:0}
.wsbn-hero__perk+.wsbn-hero__perk{border-left:1px solid var(--wsbn-perk-line)}

.wsbn-hero__perkico{
  display:grid;place-items:center;
  width:calc(34px * var(--wsbn-perks-scale));height:calc(34px * var(--wsbn-perks-scale));flex:none;
  border-radius:50%;
  border:1px solid var(--wsbn-perkico-bd);
  background:var(--wsbn-perkico-bg);
  color:var(--wsbn-perkico-color);
}
.wsbn-hero__perkico svg{width:calc(16px * var(--wsbn-perks-scale));height:calc(16px * var(--wsbn-perks-scale))}
.wsbn-hero__perkico i{font-size:calc(15px * var(--wsbn-perks-scale));font-style:normal}
.wsbn-hero__perktxt{display:flex;flex-direction:column;gap:1px;line-height:1.28}
.wsbn-hero__perktxt strong{font-size:calc(11.5px * var(--wsbn-perks-scale));font-weight:700;white-space:nowrap}
.wsbn-hero__perktxt small{font-size:calc(10.5px * var(--wsbn-perks-scale));color:var(--wsbn-muted);font-weight:400}

/* --------------------------------------------------------------------------
   CATÉGORIES
   -------------------------------------------------------------------------- */

.wsbn-hero__cats{position:relative;z-index:5;margin-top:var(--wsbn-cats-gap)}

.wsbn-hero__catshead{
  display:flex;align-items:center;gap:20px;
  margin-bottom:18px;
}
.wsbn-hero__catshead h3{
  margin:0;flex:none;
  font-size:clamp(17px,1.9vw,20px);
  font-weight:800;letter-spacing:-.02em;
  color:var(--wsbn-ink);
}
.wsbn-hero__catsrule{flex:1;height:1px;background:var(--wsbn-cats-rule)}
/* Qualifié `a` : idem, le reset `.wsbn-hero a{text-decoration:none}` gagnerait. */
.wsbn-hero a.wsbn-hero__catslink{
  flex:none;
  font-size:11px;font-weight:500;
  color:var(--wsbn-catslink);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s ease;
}
.wsbn-hero__catslink:hover{color:var(--wsbn-accent)}

.wsbn-hero__grid{
  display:grid;
  grid-template-columns:repeat(var(--wsbn-cols),1fr);
  gap:var(--wsbn-card-gap);
  align-items:center;
}

.wsbn-hero__card{
  position:relative;
  overflow:hidden;
  border-radius:var(--wsbn-card-radius);
  aspect-ratio:var(--wsbn-card-ratio);
  background:var(--wsbn-card-bg);
  box-shadow:0 8px 20px var(--wsbn-card-shadow);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease;
}
.wsbn-hero__card:hover{
  transform:scale(1.06);
  box-shadow:0 24px 48px var(--wsbn-card-shadow);
  z-index:2;
}
.wsbn-hero__card--featured{
  transform:scale(1.07);
  box-shadow:0 22px 44px var(--wsbn-card-shadow);
  z-index:2;
}
.wsbn-hero__card--featured:hover{transform:scale(1.11)}

/* Carte sans image : reprend le fond de carte plutôt qu'un bloc gris "widget cassé" */
.wsbn-hero__card--empty{
  background:var(--wsbn-card-bg);
}

.wsbn-hero__card img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.9) brightness(.92);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .38s ease;
}
.wsbn-hero__card:hover img{transform:scale(1.06);filter:saturate(1) brightness(1)}

.wsbn-hero__card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    var(--wsbn-card-scrim) 0%,
    transparent 56%);
}

.wsbn-hero__cardbody{
  position:absolute;z-index:2;
  left:14px;right:14px;bottom:13px;
}
.wsbn-hero__cardbody h4{
  margin:0 0 3px;
  font-size:14px;font-weight:700;letter-spacing:-.02em;
  color:var(--wsbn-ink);
}
.wsbn-hero__cardbody span{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:500;
  color:var(--wsbn-card-cta);
  transition:color .24s ease,gap .24s ease;
}
.wsbn-hero__cardbody span svg{width:12px;height:12px;stroke-width:2}
.wsbn-hero__card:hover .wsbn-hero__cardbody span{color:var(--wsbn-accent);gap:10px}

/* --------------------------------------------------------------------------
   RESPONSIVE
   Breakpoints alignés sur les defaults Elementor (1024 / 767).
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  .wsbn-hero__body{max-width:64%}
  .wsbn-hero__perk{padding:2px 15px}
}

@media (max-width:880px){
  /* La photo passe au-dessus du texte */
  .wsbn-hero{display:flex;flex-direction:column}
  .wsbn-hero__model{order:1}
  .wsbn-hero__body{order:2}
  .wsbn-hero__cats{order:3}

  .wsbn-hero__model{
    position:relative;width:100%;height:auto;
    right:auto;margin:0 0 0;
  }
  .wsbn-hero__model img{
    height:330px;border-radius:18px;
    -webkit-mask-image:none;mask-image:none;
  }

  .wsbn-hero__body{max-width:none;padding-top:30px}

  .wsbn-hero__card--featured{transform:none;box-shadow:none}
  .wsbn-hero__card--featured:hover{transform:scale(1.06)}
}

@media (max-width:767px){
  .wsbn-hero{padding:20px 18px 24px}
  .wsbn-hero__title{font-size:clamp(34px,10vw,46px)}
  .wsbn-hero__perks{gap:14px 0}
  .wsbn-hero__perk{padding:2px 14px;flex:1 1 45%}
  .wsbn-hero__perk+.wsbn-hero__perk{border-left:0}
  .wsbn-hero__catshead{flex-wrap:wrap}
  .wsbn-hero__catsrule{display:none}
  .wsbn-hero__eyebrow i{display:none}
}

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