/**
 * MWS Hero — styles front (~9 Ko, zéro dépendance).
 * Transitions uniquement sur transform/opacity (compositor) : zéro CLS.
 */

/* ---------------------------------------------------------------- Barre */
.mwshero-bar{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 44px;background:var(--mwsbar-bg,#1a1a1a);color:var(--mwsbar-c,#fff);font-size:.85rem;line-height:1.3;text-align:center}
.mwshero-bar__text{color:inherit;text-decoration:none}
a.mwshero-bar__text:hover{text-decoration:underline;color:inherit}
.mwshero-bar__close{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;background:none;color:inherit;cursor:pointer;opacity:.7}
.mwshero-bar__close:hover{opacity:1}
.mwshero-bar[hidden]{display:none}

/* ----------------------------------------------------------------- Base */
.mwshero{position:relative;overflow:hidden;color:#fff;touch-action:pan-y}
.mwshero--fullbleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.mwshero__viewport{position:relative;width:100%;aspect-ratio:var(--mwshero-rd,21/9);max-height:92vh;min-height:240px}
.mwshero--fulld .mwshero__viewport{aspect-ratio:auto;height:100vh;height:100svh;max-height:none}
@media (max-width:767.98px){
  .mwshero__viewport{aspect-ratio:var(--mwshero-rm,4/5);min-height:200px}
  .mwshero--fullm .mwshero__viewport{aspect-ratio:auto;height:100vh;height:100svh;max-height:none}
}

/* --------------------------------------------------------------- Slides */
.mwshero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;z-index:1}
.mwshero__slide.is-active{opacity:1;visibility:visible;z-index:2}
.mwshero__picture{position:absolute;inset:0;display:block}
/* Slides 2+ : pas de boîte tant que le JS n'a pas fini l'init (sinon le
   lazy-load géométrique télécharge toutes les images dès le chargement). */
.mwshero__picture--defer{display:none}
.mwshero__media{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.mwshero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,calc(var(--mwshero-ov,.3)*.55)) 0%,rgba(0,0,0,var(--mwshero-ov,.3)) 100%)}
.mwshero__slide--dark{color:#151515}
.mwshero__slide--dark .mwshero__scrim{background:linear-gradient(180deg,rgba(255,255,255,calc(var(--mwshero-ov,.3)*.55)) 0%,rgba(255,255,255,var(--mwshero-ov,.3)) 100%)}

/* ----------------------------------------------------- Contenu 9 zones */
.mwshero__content{position:absolute;inset:0;z-index:2;display:flex;padding:clamp(20px,5vw,64px)}
.mwshero__inner{display:flex;flex-direction:column;align-items:flex-start;max-width:min(100%,640px)}
.mwshero__content--tl,.mwshero__content--tc,.mwshero__content--tr{align-items:flex-start}
.mwshero__content--ml,.mwshero__content--mc,.mwshero__content--mr{align-items:center}
.mwshero__content--bl,.mwshero__content--bc,.mwshero__content--br{align-items:flex-end}
.mwshero__content--tl,.mwshero__content--ml,.mwshero__content--bl{justify-content:flex-start}
.mwshero__content--tc,.mwshero__content--mc,.mwshero__content--bc{justify-content:center;text-align:center}
.mwshero__content--tr,.mwshero__content--mr,.mwshero__content--br{justify-content:flex-end;text-align:right}
.mwshero__content--tc .mwshero__inner,.mwshero__content--mc .mwshero__inner,.mwshero__content--bc .mwshero__inner{align-items:center}
.mwshero__content--tr .mwshero__inner,.mwshero__content--mr .mwshero__inner,.mwshero__content--br .mwshero__inner{align-items:flex-end}
@media (max-width:767.98px){
  .mwshero__content{padding:clamp(16px,5vw,28px)}
  /* Sur mobile le texte redescend au centre-bas : zone lisible universelle. */
  .mwshero__content{align-items:flex-end;justify-content:center;text-align:center}
  .mwshero__inner{align-items:center;padding-bottom:34px}
}

/* ---------------------------------------------------------------- Texte */
.mwshero__badge{display:inline-block;padding:.35em .85em;margin:0 0 .9em;background:var(--mws-badge,#d0021b);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px}
.mwshero__eyebrow{margin:0 0 .6em;font-size:clamp(.72rem,.66rem + .3vw,.88rem);font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.mwshero__title{margin:0 0 .3em;font-size:clamp(1.7rem,1.05rem + 3.2vw,3.6rem);line-height:1.08;font-weight:700;color:inherit;max-width:22ch;text-wrap:balance;text-shadow:0 1px 3px rgba(0,0,0,.18)}
.mwshero__slide--dark .mwshero__title{text-shadow:0 1px 3px rgba(255,255,255,.18)}
p.mwshero__title{font-weight:700}
.mwshero__subtitle{margin:0 0 1em;font-size:clamp(.95rem,.85rem + .55vw,1.25rem);line-height:1.45;max-width:52ch;opacity:.94}
.mwshero__html{margin:0 0 1em;max-width:56ch}
.mwshero__html :last-child{margin-bottom:0}

/* -------------------------------------------------------------- Boutons */
.mwshero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:.35em}
.mwshero__cta{display:inline-block;padding:.78em 1.9em;background:var(--mwshero-cta-bg,#fff);color:var(--mwshero-cta-c,#151515);font-size:clamp(.88rem,.84rem + .25vw,1.02rem);font-weight:600;border-radius:var(--mwshero-cta-r,6px);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;position:relative;z-index:3}
.mwshero__cta:hover,.mwshero__cta:focus{color:var(--mwshero-cta-c,#151515);text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.mwshero__cta--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.mwshero__cta--ghost:hover,.mwshero__cta--ghost:focus{color:inherit;box-shadow:inset 0 0 0 2px currentColor,0 10px 24px rgba(0,0,0,.18)}
.mwshero__slide--dark .mwshero__cta{background:#151515;color:#fff}
.mwshero__slide--dark .mwshero__cta:hover,.mwshero__slide--dark .mwshero__cta:focus{color:#fff}
.mwshero__slide--dark .mwshero__cta--ghost{background:transparent;color:inherit}

/* -------------------------------------------------------- Compte à rebours */
.mwshero__countdown{display:flex;gap:10px;margin:0 0 1.1em}
.mwshero__countdown[hidden]{display:none}
.mwshero__cd{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:.45em .5em;background:rgba(0,0,0,.35);border-radius:8px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mwshero__slide--dark .mwshero__cd{background:rgba(255,255,255,.5);color:#151515}
.mwshero__cd b{font-size:1.3rem;line-height:1.1;font-variant-numeric:tabular-nums}
.mwshero__cd small{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}

/* ------------------------------------------------------- Carte produit */
.mwshero__product{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;background:rgba(255,255,255,.94);color:#151515;border-radius:12px;text-decoration:none;box-shadow:0 8px 28px rgba(0,0,0,.22);transition:transform .2s ease}
.mwshero__product:hover,.mwshero__product:focus{transform:translateY(-3px);color:#151515;text-decoration:none}
.mwshero__product img{width:56px;height:56px;-o-object-fit:cover;object-fit:cover;border-radius:8px}
.mwshero__product-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.mwshero__product-name{font-size:.82rem;font-weight:600;line-height:1.25;max-width:180px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mwshero__product-price{font-size:.9rem;font-weight:700}
.mwshero__product--br{right:clamp(14px,3vw,36px);bottom:clamp(14px,3vw,36px)}
.mwshero__product--bl{left:clamp(14px,3vw,36px);bottom:clamp(14px,3vw,36px)}
.mwshero__product--tr{right:clamp(14px,3vw,36px);top:clamp(14px,3vw,36px)}
.mwshero__product--tl{left:clamp(14px,3vw,36px);top:clamp(14px,3vw,36px)}
@media (max-width:767.98px){
  .mwshero__product{padding:6px 10px 6px 6px}
  .mwshero__product img{width:44px;height:44px}
}

/* ------------------------------------------------------------- Hotspots */
.mwshero__spot{position:absolute;z-index:4;transform:translate(-50%,-50%)}
.mwshero__spot-btn{position:relative;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.95);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3);padding:0}
.mwshero__spot-btn::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:50%;background:#151515;transition:transform .2s ease}
.mwshero__spot-btn::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:mwshero-ping 2.2s ease-out infinite}
.mwshero__spot-btn[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg);border-radius:2px}
.mwshero__spot-card{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;width:max-content;max-width:240px;padding:8px;background:#fff;color:#151515;border-radius:10px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.mwshero__spot-card[hidden]{display:none}
.mwshero__spot-card:hover,.mwshero__spot-card:focus{color:#151515;text-decoration:none}
.mwshero__spot-card img{width:44px;height:44px;-o-object-fit:cover;object-fit:cover;border-radius:6px}
@keyframes mwshero-ping{0%{transform:scale(.8);opacity:1}80%,100%{transform:scale(1.6);opacity:0}}

/* -------------------------------------------------------- Lien étiré */
.mwshero__stretched{position:absolute;inset:0;z-index:2}

/* ------------------------------------------------------------ Contrôles */
.mwshero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;cursor:pointer;transition:background .2s ease}
.mwshero__arrow:hover{background:rgba(0,0,0,.6)}
.mwshero__arrow--prev{left:14px}
.mwshero__arrow--next{right:14px}
.mwshero__nav{position:absolute;left:0;right:0;bottom:6px;z-index:5;display:flex;align-items:center;justify-content:center;gap:4px}
.mwshero__dots{display:flex;align-items:center}
.mwshero__dot{width:26px;height:26px;display:grid;place-items:center;border:0;background:none;cursor:pointer;padding:0}
.mwshero__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.45);transition:transform .2s ease,background .2s ease}
.mwshero__dot.is-active::after{background:#fff;transform:scale(1.4)}
.mwshero__pause{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;cursor:pointer;padding:0}
.mwshero__pause:hover{background:rgba(0,0,0,.6)}
.mwshero__pause .mwshero__ico-play{display:none}
.mwshero__pause[aria-pressed="true"] .mwshero__ico-pause{display:none}
.mwshero__pause[aria-pressed="true"] .mwshero__ico-play{display:block}
@media (max-width:767.98px){.mwshero__arrow{display:none}}

/* ------------------------------------------------------------ Scroll cue */
.mwshero__cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;animation:mwshero-cue 2s ease-in-out infinite;opacity:.85;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
@keyframes mwshero-cue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* --------------------------------------------------------- Focus visible */
.mwshero__cta:focus-visible,.mwshero__arrow:focus-visible,.mwshero__dot:focus-visible,.mwshero__pause:focus-visible,.mwshero__spot-btn:focus-visible,.mwshero__cue:focus-visible,.mwshero-bar__close:focus-visible,.mwshero__product:focus-visible,.mwshero__stretched:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ----------------------------------------------------------- Split 50/50 */
.mwshero__slide--split{display:grid;grid-template-columns:1fr 1fr}
.mwshero__slide--split .mwshero__picture{position:relative;inset:auto;grid-column:2;grid-row:1;overflow:hidden}
.mwshero__slide--split .mwshero__media{position:absolute;inset:0}
.mwshero__slide--split .mwshero__content{position:relative;inset:auto;grid-column:1;grid-row:1;background:var(--mws-split-bg,transparent)}
.mwshero--fade .mwshero__slide--split,.mwshero--zoom .mwshero__slide--split,.mwshero--slide .mwshero__slide--split{position:absolute;inset:0}
/* Fond de secours par schéma : sans lui, le texte serait de la couleur du fond de page. */
.mwshero__slide--split.mwshero__slide--light .mwshero__content{color:#fff;background:var(--mws-split-bg,#151515)}
.mwshero__slide--split.mwshero__slide--dark .mwshero__content{color:#151515;background:var(--mws-split-bg,#f5f5f2)}
@media (max-width:767.98px){
  .mwshero__slide--split{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .mwshero__slide--split .mwshero__picture{grid-column:1;grid-row:1}
  .mwshero__slide--split .mwshero__content{grid-column:1;grid-row:2;align-items:center;padding-top:14px}
}

/* ------------------------------------------------------------ Éditorial */
.mwshero__slide--editorial{background:linear-gradient(120deg,var(--mws-bg1,#1f2937),var(--mws-bg2,#4f46e5))}
.mwshero__slide--editorial .mwshero__title{font-size:clamp(2.2rem,1.2rem + 5.4vw,5.4rem);max-width:16ch}
.mwshero__slide--editorial .mwshero__content{align-items:center;justify-content:center;text-align:center}
.mwshero__slide--editorial .mwshero__inner{align-items:center;max-width:min(100%,860px)}

/* ------------------------------------------------------------ Animations */
.mwshero--fade .mwshero__slide,.mwshero--zoom .mwshero__slide{transition:opacity .7s ease,visibility .7s}
.mwshero--zoom .mwshero__slide.is-active .mwshero__media{animation:mwshero-kb 9s linear both}
@keyframes mwshero-kb{from{transform:scale(1)}to{transform:scale(1.09)}}
.mwshero--slide .mwshero__slide.is-active{animation:mwshero-in-r .65s cubic-bezier(.33,0,.2,1) both}
.mwshero--slide .mwshero__slide.is-exit{animation:mwshero-out-l .65s cubic-bezier(.33,0,.2,1) both;opacity:1;visibility:visible;z-index:1}
.mwshero--slide[data-dir="prev"] .mwshero__slide.is-active{animation-name:mwshero-in-l}
.mwshero--slide[data-dir="prev"] .mwshero__slide.is-exit{animation-name:mwshero-out-r}
@keyframes mwshero-in-r{from{transform:translateX(100%)}to{transform:none}}
@keyframes mwshero-out-l{from{transform:none}to{transform:translateX(-100%)}}
@keyframes mwshero-in-l{from{transform:translateX(-100%)}to{transform:none}}
@keyframes mwshero-out-r{from{transform:none}to{transform:translateX(100%)}}

/* ---------------------------------------------------------- Réassurance */
.mwshero-usp{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin:0;padding:14px clamp(16px,4vw,40px);list-style:none;border-bottom:1px solid rgba(0,0,0,.08)}
.mwshero-usp__item{display:flex;align-items:center;gap:9px;font-size:.86rem;opacity:.92}.mwshero-usp__text{display:flex;flex-direction:column;line-height:1.35}.mwshero-usp__desc{font-size:.86em;opacity:.85}
.mwshero-usp__item svg{flex:none;opacity:.75}
@media (max-width:767.98px){.mwshero-usp{gap:8px 18px;padding:12px 14px}.mwshero-usp__item{font-size:.78rem}}

/* ------------------------------------------------- Mise en forme texte */
.mwshero__accent{color:var(--mws-accent,#e8c15a)}
.mwshero__title--s{font-size:clamp(1.3rem,1rem + 1.5vw,2.1rem)}
.mwshero__title--l{font-size:clamp(2rem,1.2rem + 4.2vw,4.6rem)}
.mwshero__title--xl{font-size:clamp(2.3rem,1.2rem + 5.8vw,5.8rem);max-width:18ch}

/* --------------------------------------- Panneau derrière le bloc texte */
.mwshero__panel-glass .mwshero__inner,.mwshero__panel-solid .mwshero__inner{padding:clamp(18px,3vw,40px);border-radius:16px}
.mwshero__panel-glass .mwshero__inner{background:rgba(10,10,10,.38);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mwshero__slide--dark.mwshero__panel-glass .mwshero__inner{background:rgba(255,255,255,.52)}
.mwshero__panel-solid .mwshero__inner{background:rgba(12,12,12,.85)}
.mwshero__slide--dark.mwshero__panel-solid .mwshero__inner{background:rgba(255,255,255,.93)}

/* ------------------------------------- Animation d'entrée du contenu */
.mwshero--reveal .mwshero__slide.is-active .mwshero__inner>*{animation:mwshero-up .55s cubic-bezier(.22,.9,.32,1) both}
.mwshero--reveal .mwshero__slide.is-active .mwshero__inner>:nth-child(2){animation-delay:.08s}
.mwshero--reveal .mwshero__slide.is-active .mwshero__inner>:nth-child(3){animation-delay:.16s}
.mwshero--reveal .mwshero__slide.is-active .mwshero__inner>:nth-child(4){animation-delay:.24s}
.mwshero--reveal .mwshero__slide.is-active .mwshero__inner>:nth-child(5){animation-delay:.32s}
.mwshero--reveal .mwshero__slide.is-active .mwshero__inner>:nth-child(n+6){animation-delay:.4s}
@keyframes mwshero-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Animation du contenu choisie par slide (prime sur le réglage global) */
.mwshero .mwshero__slide.mwshero__anim-none.is-active .mwshero__inner>*{animation:none}
.mwshero .mwshero__slide.mwshero__anim-up.is-active .mwshero__inner>*{animation:mwshero-up .55s cubic-bezier(.22,.9,.32,1) both}
.mwshero .mwshero__slide.mwshero__anim-fade.is-active .mwshero__inner>*{animation:mwshero-fadein .6s ease both}
.mwshero .mwshero__slide.mwshero__anim-zoom.is-active .mwshero__inner>*{animation:mwshero-zoomin .55s cubic-bezier(.22,.9,.32,1) both}
.mwshero .mwshero__slide.mwshero__anim-left.is-active .mwshero__inner>*{animation:mwshero-fromleft .55s cubic-bezier(.22,.9,.32,1) both}
.mwshero .mwshero__slide[class*="mwshero__anim-"].is-active .mwshero__inner>:nth-child(2){animation-delay:.08s}
.mwshero .mwshero__slide[class*="mwshero__anim-"].is-active .mwshero__inner>:nth-child(3){animation-delay:.16s}
.mwshero .mwshero__slide[class*="mwshero__anim-"].is-active .mwshero__inner>:nth-child(4){animation-delay:.24s}
.mwshero .mwshero__slide[class*="mwshero__anim-"].is-active .mwshero__inner>:nth-child(5){animation-delay:.32s}
.mwshero .mwshero__slide[class*="mwshero__anim-"].is-active .mwshero__inner>:nth-child(n+6){animation-delay:.4s}
@keyframes mwshero-fadein{from{opacity:0}to{opacity:1}}
@keyframes mwshero-zoomin{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes mwshero-fromleft{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

/* ---------------------------------------- Découpage bas de section */
.mwshero__shape{position:absolute;left:0;right:0;bottom:-1px;z-index:4;pointer-events:none;line-height:0}
.mwshero__shape svg{display:block;width:100%;height:clamp(28px,6vw,90px)}
.mwshero__shape path{fill:var(--mws-shape,#fff)}

/* ---------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion:reduce){
  .mwshero *,.mwshero *::before,.mwshero *::after{animation:none!important;transition:none!important}
}