/* ============================================================
   ANIMAL SHADOW - Shadow FX layer (couche d'effets partagee)
   Charge sur index / training / wd / music.
   Tout est desactive si l'utilisateur demande prefers-reduced-motion.
   Tokens: reutilise --c-red / --c-gold / --c-white avec fallbacks.
   ============================================================ */

:root{
  --fx-red: var(--c-red, #ae0000);
  --fx-gold: var(--c-gold, #cda85c);
  --fx-white: var(--c-white, #f5f5f5);
}

/* ---------- #7 Barre de progression de lecture ---------- */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;
  background:linear-gradient(90deg,var(--fx-red),var(--fx-gold));
  box-shadow:0 0 12px rgba(174,0,0,0.5);transition:width .08s linear;pointer-events:none}

/* ---------- #9 Reveal au scroll (stagger) ---------- */
[data-fx-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)),
             transform .7s var(--ease-out-expo,cubic-bezier(.16,1,.3,1));
  will-change:opacity,transform}
[data-fx-reveal].is-in{opacity:1;transform:none}

/* ---------- #42 Reveal image par clip-path (volet) ---------- */
[data-fx-clip]{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
[data-fx-clip].is-in{clip-path:inset(0 0 0 0)}

/* ---------- #13 Decode text : pas de style dedie, JS gere le contenu ---------- */
[data-fx-decode]{font-variant-ligatures:none}

/* ---------- #43 Tilt 3D ---------- */
[data-fx-tilt]{transform-style:preserve-3d;transition:transform .18s var(--ease-out-quart,cubic-bezier(.25,1,.5,1));will-change:transform}

/* ---------- #39 Remplissage de bouton au survol ---------- */
.fx-fill{position:relative;overflow:hidden;isolation:isolate}
.fx-fill::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--fx-red);transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
.fx-fill:hover::before,.fx-fill:focus-visible::before{transform:scaleX(1)}

/* ---------- #40 Soulignement de lien anime ---------- */
.fx-underline{position:relative;text-decoration:none}
.fx-underline::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .35s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
.fx-underline:hover::after,.fx-underline:focus-visible::after{transform:scaleX(1);transform-origin:left center}

/* ---------- #41 Skeleton loaders ---------- */
.fx-skel{position:relative;overflow:hidden;background:rgba(255,255,255,0.05);border-radius:4px}
.fx-skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
  transform:translateX(-100%);animation:fxShimmer 1.4s infinite}
@keyframes fxShimmer{100%{transform:translateX(100%)}}

/* ---------- #44 Toasts custom ---------- */
.fx-toasts{position:fixed;right:1rem;bottom:1rem;z-index:100000;display:flex;flex-direction:column;gap:.6rem;max-width:min(360px,90vw);pointer-events:none}
.fx-toast{pointer-events:auto;background:#121212;border:1px solid var(--c-dark-border,#2a2a2a);border-left:3px solid var(--fx-red);
  color:var(--fx-white);font-family:var(--ff-body,'Montserrat',sans-serif);font-size:.85rem;line-height:1.45;
  padding:.85rem 1rem;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
.fx-toast.is-in{opacity:1;transform:none}
.fx-toast--ok{border-left-color:var(--c-success,#2ecc71)}
.fx-toast--err{border-left-color:var(--c-error,#e74c3c)}
.fx-toast--gold{border-left-color:var(--fx-gold)}

/* ---------- #48 Focus-visible accessible ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--fx-gold);outline-offset:2px;border-radius:2px}

/* ---------- #14 Modale video (lightbox) ---------- */
.fx-vmodal{position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.88);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;padding:4vw}
.fx-vmodal.is-open{opacity:1;visibility:visible}
.fx-vmodal__box{position:relative;width:min(1000px,92vw);aspect-ratio:16/9;background:#000;border:1px solid var(--c-dark-border,#2a2a2a);box-shadow:0 30px 80px rgba(0,0,0,.7);transform:scale(.96);transition:transform .3s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
.fx-vmodal.is-open .fx-vmodal__box{transform:scale(1)}
.fx-vmodal__box iframe{width:100%;height:100%;border:0;display:block}
.fx-vmodal__close{position:absolute;top:-2.6rem;right:0;background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;font-family:var(--ff-body,sans-serif)}
.fx-vmodal__close:hover{color:var(--fx-red)}

/* ---------- #22 Countdown ---------- */
.fx-count{display:inline-flex;gap:.6rem;flex-wrap:wrap;justify-content:center;font-family:var(--ff-heading,'Oswald',sans-serif)}
.fx-count__unit{min-width:64px;text-align:center;background:rgba(255,255,255,0.04);border:1px solid var(--c-dark-border,#2a2a2a);border-radius:6px;padding:.6rem .4rem}
.fx-count__num{display:block;font-size:1.9rem;font-weight:700;color:var(--fx-white);line-height:1}
.fx-count__lbl{display:block;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fx-gold);margin-top:.35rem}

/* ---------- #5 Marquee (coaching only) ---------- */
.fx-marquee{overflow:hidden;border-top:1px solid var(--c-dark-border,#2a2a2a);border-bottom:1px solid var(--c-dark-border,#2a2a2a);padding:.9rem 0;background:rgba(0,0,0,.25)}
.fx-marquee__track{display:flex;gap:3rem;white-space:nowrap;width:max-content;animation:fxMarquee 28s linear infinite}
.fx-marquee:hover .fx-marquee__track{animation-play-state:paused}
.fx-marquee__item{font-family:var(--ff-heading,'Oswald',sans-serif);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:1rem;color:var(--fx-white);display:inline-flex;align-items:center;gap:3rem}
.fx-marquee__item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--fx-red)}
@keyframes fxMarquee{100%{transform:translateX(-50%)}}

/* ---------- #18 Hover preview (zoom thumb) fallback doux ---------- */
.fx-thumb-zoom{overflow:hidden}
.fx-thumb-zoom img{transition:transform .4s var(--ease-out-quart,cubic-bezier(.25,1,.5,1))}
.fx-thumb-zoom:hover img{transform:scale(1.06)}

/* ---------- #3 CTA magnetique ---------- */
[data-fx-magnet]{transition:transform .25s var(--ease-out-quart,cubic-bezier(.25,1,.5,1))}

/* ---------- #6 Logo glitch au survol ---------- */
.fx-logo-glitch{position:relative;transition:filter .2s}
.fx-logo-glitch:hover{animation:fxLogoGlitch .4s steps(2,end) 2}
@keyframes fxLogoGlitch{
  0%{filter:none;transform:translate(0,0)}
  20%{filter:drop-shadow(2px 0 var(--fx-red)) drop-shadow(-2px 0 var(--fx-gold));transform:translate(-1px,0)}
  40%{filter:drop-shadow(-2px 0 var(--fx-red)) drop-shadow(2px 0 var(--fx-gold));transform:translate(1px,0)}
  60%{filter:drop-shadow(1px 0 var(--fx-red));transform:translate(0,1px)}
  100%{filter:none;transform:translate(0,0)}
}

/* ---------- #25 CTA flottant contextuel ---------- */
.fx-float-cta{position:fixed;right:1.1rem;bottom:1.1rem;z-index:9990;
  display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.3rem;
  font-family:var(--ff-heading,'Oswald',sans-serif);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;font-size:.85rem;text-decoration:none;color:#fff;
  background:var(--fx-red);border:1px solid rgba(205,168,92,.45);border-radius:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .35s ease,transform .35s var(--ease-out-quart,cubic-bezier(.25,1,.5,1)),visibility .35s}
.fx-float-cta.is-show{opacity:1;visibility:visible;transform:translateY(0)}
.fx-float-cta:hover{background:var(--fx-gold);color:#0a0a0a}
@media (max-width:540px){.fx-float-cta{right:.7rem;bottom:.7rem;padding:.7rem 1rem;font-size:.75rem}}

/* ---------- #37 Toggle sons d'interaction ---------- */
.fx-sound-toggle{position:fixed;left:1.1rem;bottom:1.1rem;z-index:9990;
  display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .8rem;
  font-family:var(--ff-heading,'Oswald',sans-serif);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:.62rem;cursor:pointer;color:var(--fx-white);
  background:rgba(10,10,10,.7);border:1px solid var(--c-dark-border,#2a2a2a);border-radius:40px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .25s,color .25s}
.fx-sound-toggle:hover{border-color:var(--fx-gold)}
.fx-sound-toggle.is-on{border-color:var(--fx-red);color:#fff}
.fx-sound-toggle__ic{font-size:.85rem;line-height:1;color:var(--fx-gold)}
.fx-sound-toggle.is-on .fx-sound-toggle__ic{color:var(--fx-red)}
@media (max-width:540px){.fx-sound-toggle{left:.7rem;bottom:.7rem;font-size:.55rem;padding:.45rem .65rem}}

/* ---------- #19 Abonnes live ---------- */
[data-fx-subs].is-live{transition:color .3s ease}

/* ---------- #16 Rail YouTube live (opt-in) ---------- */
[data-fx-yt-live]{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
[data-fx-yt-live] .yt-card__thumb{display:block;position:relative;overflow:hidden;border-radius:.5rem;aspect-ratio:16/9}
[data-fx-yt-live] .yt-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}
[data-fx-yt-live] .yt-card__title{display:block;margin-top:.5rem;font-size:.85rem;line-height:1.3;color:var(--fx-white,#f5f5f5)}

/* ---------- #20 Avant / Apres ---------- */
.fx-ba{position:relative;overflow:hidden;user-select:none;touch-action:none;cursor:ew-resize}
.fx-ba img{display:block;width:100%;height:auto;pointer-events:none}
.fx-ba__after{position:absolute;inset:0;width:50%;overflow:hidden}
.fx-ba__after img{position:absolute;inset:0;width:auto;height:100%;max-width:none}
.fx-ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:var(--fx-gold,#cda85c);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.fx-ba__handle::after{content:'';position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--fx-gold,#cda85c);border-radius:50%;background:rgba(10,10,10,.55)}

/* ---------- #21 Preuve sociale ---------- */
.fx-proof{position:fixed;left:1.1rem;bottom:4.2rem;z-index:9989;display:flex;align-items:center;gap:.6rem;
  max-width:min(86vw,340px);padding:.7rem .95rem;background:rgba(12,12,12,.92);border:1px solid rgba(205,168,92,.35);
  border-radius:.6rem;color:#f5f5f5;font-size:.8rem;opacity:0;transform:translateY(12px);
  transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.fx-proof.is-in{opacity:1;transform:translateY(0)}
.fx-proof__dot{width:8px;height:8px;border-radius:50%;background:var(--fx-red,#ae0000);flex:0 0 auto;box-shadow:0 0 8px var(--fx-red,#ae0000)}
.fx-proof__txt{font-weight:600}
.fx-proof__meta{margin-left:auto;color:var(--fx-gold,#cda85c);font-size:.72rem;white-space:nowrap}
@media (max-width:540px){.fx-proof{left:.6rem;right:.6rem;bottom:3.6rem;max-width:none}}

/* ---------- #24 Carrousel temoignages ---------- */
.fx-stories{position:relative}
.fx-stories .fx-story{display:none}
.fx-stories .fx-story.is-active{display:block;animation:fxStoryIn .5s ease both}
@keyframes fxStoryIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fx-stories__nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
.fx-stories__arw{width:38px;height:38px;border-radius:50%;border:1px solid rgba(205,168,92,.4);background:transparent;
  color:var(--fx-gold,#cda85c);font-size:1.2rem;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.fx-stories__arw:hover{background:var(--fx-gold,#cda85c);color:#0a0a0a}
.fx-stories__dots{display:flex;gap:.45rem}
.fx-stories__dot{width:9px;height:9px;padding:0;border-radius:50%;border:none;background:rgba(245,245,245,.3);cursor:pointer;transition:background .2s}
.fx-stories__dot.is-on{background:var(--fx-red,#ae0000)}

/* ---------- #45 Reduced motion : on coupe tout mouvement ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-progress{display:none}
  [data-fx-reveal],[data-fx-clip]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .fx-fill::before,.fx-underline::after{transition:none}
  .fx-skel::after{animation:none}
  .fx-marquee__track{animation:none}
  [data-fx-tilt],[data-fx-magnet]{transform:none!important;transition:none!important}
  .fx-thumb-zoom img{transition:none}
  .fx-logo-glitch:hover{animation:none}
  .fx-float-cta{transition:opacity .2s ease,visibility .2s}
  .fx-proof{transition:opacity .25s ease;transform:none}
  .fx-stories .fx-story.is-active{animation:none}
}