/* =================================================
LENIS
================================================= */

html.lenis,
html.lenis body{
  height:auto;
}

.lenis.lenis-smooth{
  scroll-behavior:auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent]{
  overscroll-behavior:contain;
}

/* =================================================
GSAP TEXT FX — GLOBAL
================================================= */

.fx-reveal,
.fx-blur,
.fx-rotate,
.fx-scale,
.fx-slide,
.fx-typewriter,
.fx-fade,
.fx-zoom-out,
.fx-zoom-in,
.fx-swing,
.fx-flip,
.fx-wave,
.fx-bounce,
.fx-skew,
.fx-stretch,
.fx-cinematic{
  overflow:hidden;
  position:relative;
  will-change:transform, opacity, filter;
  display:block;
}

/* =================================================
SPLITTYPE FIX
================================================= */

.split-parent{
  overflow:hidden;
}

.word,
.char{
  display:inline-block;
  position:relative;
  will-change:transform, opacity, filter;
  transform:translateZ(0);
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

.word{
  white-space:nowrap;
}

.char{
  line-height:1em;
}

/* =================================================
ELEMENTOR FIX
================================================= */

.elementor-heading-title{
  overflow:visible !important;
  text-wrap:balance;
}

/* =================================================
3D EFFECTS
================================================= */

.fx-rotate,
.fx-flip,
.fx-swing{
  perspective:1200px;
  transform-style:preserve-3d;
}

/* =================================================
CINEMATIC
================================================= */

.fx-cinematic{
  letter-spacing:0.02em;
}

.fx-cinematic .word{
  padding-bottom:0.15em;
}

/* =================================================
RESPONSIVE
================================================= */

@media(max-width:767px){

  .char,
  .word{
    backface-visibility:hidden;
    -webkit-font-smoothing:antialiased;
    transform:translateZ(0);
  }

  .fx-cinematic{
    letter-spacing:0;
  }

}





/* =========================================================
GLOBAL RESET (IMPORTANT POUR ELEMENTOR + GSAP)
========================================================= */

html,
body{
  overflow-x:hidden;
}



/* IMPORTANT : on neutralise les animations Elementor sur les éléments GSAP */
.fx-reveal,
.fx-blur,
.fx-rotate,
.fx-scale,
.fx-slide,
.fx-typewriter,
.fx-fade,
.fx-zoom-out,
.fx-zoom-in,
.fx-swing,
.fx-flip,
.fx-wave,
.fx-bounce,
.fx-skew,
.fx-stretch,
.fx-cinematic,
.img-reveal,
.img-zoom,
.img-blur,
.img-rotate,
.img-parallax{
  transform:none;
  animation:none !important;
  transition:none !important;
}

/* =========================================================
ELEMENTOR SAFETY
========================================================= */

.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget,
.elementor-widget-container,
.elementor-heading-title{
  overflow:visible !important;
}

/* =========================================================
TEXT FX BASE
========================================================= */

.fx-reveal,
.fx-blur,
.fx-rotate,
.fx-scale,
.fx-slide,
.fx-typewriter,
.fx-fade,
.fx-zoom-out,
.fx-zoom-in,
.fx-swing,
.fx-flip,
.fx-wave,
.fx-bounce,
.fx-skew,
.fx-stretch,
.fx-cinematic{
  display:block;
  position:relative;
  overflow:visible;
  line-height:1.2;
}

/* =========================================================
SPLIT SYSTEM
========================================================= */

.char,
.word,
.line{
  display:inline-block;
  position:relative;
  will-change:transform, opacity, filter;
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* =========================================================
WORD FIX
========================================================= */

.word{
  white-space:nowrap;
}

/* =========================================================
3D FIX
========================================================= */

.fx-rotate,
.fx-flip{
  perspective:1000px;
}

.fx-rotate .char,
.fx-flip .char{
  transform-style:preserve-3d;
}



.fx-scramble,
.fx-mask-reveal,
.fx-depth {
  display: inline-block;
}


.fx-scramble {
  display: inline-block;
  will-change: contents;
}

.fx-mask-reveal {
  display: inline-block;
  overflow: hidden;
  will-change: clip-path;
}
.fx-depth {
  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform;
}






/* =================================================
COLOR SCROLL
================================================= */

.fx-color{
    position:relative;
}

.fx-color .word{
    display:inline-block;
    color:inherit;
    will-change:color;
}




/* =================================================
GRADIENT COLOR
================================================= */

.fx-gradient{

    display:inline-block;

    background-repeat:no-repeat;

    background-size:200% 100%;

    background-position:100% 0;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
    color:transparent;

    will-change:background-position;
}





/* =================================================
STROKE
================================================= */

.fx-stroke{

    display:inline-block;

    color:transparent;

    -webkit-text-stroke-width:2px;
    -webkit-text-stroke-color:currentColor;

    background-repeat:no-repeat;
    background-size:0% 100%;
    background-position:left center;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    will-change:background-size;

}



/* =================================================
NEON
================================================= */

.fx-neon{

    display:inline-block;

    will-change:color,text-shadow;

}







/* =================================================
HIGHLIGHT
================================================= */

.fx-highlight{

    position:relative;

    display:inline-block;
    vertical-align: baseline;
    line-height: inherit;

    overflow:hidden;

    padding:var(--fx-padding, 0 .08em 0 .08em);

    margin:var(--fx-margin, 0 0 0 0);

    color:inherit;

    z-index:1;

}

.fx-highlight .fx-highlight-bg{

    position:absolute;

    inset:0;

    z-index:-1;

    transform:scaleX(0);

    transform-origin:left center;

    will-change:transform;

    pointer-events:none;

}





/* =========================================================
IMAGES
========================================================= */

.img-reveal,
.img-zoom,
.img-blur,
.img-rotate,
.img-parallax{
  overflow:hidden;
  position:relative;
}

.img-parallax img{
  width:100%;
  height:100%;
  object-fit:cover;
}


.added_to_cart {
    display: none !important;
}





/* =========================================================
   FX STAGGER
   ========================================================= */

.fx-stagger {
    position: relative;
}

.fx-stagger > * {
    will-change: transform, opacity, filter;
}

/* Effets 3D */

.fx-stagger[data-animation="flip-x"],
.fx-stagger[data-animation="flip-y"] {
    perspective: 1000px;
}

.fx-stagger[data-animation="flip-x"] > *,
.fx-stagger[data-animation="flip-y"] > * {
    transform-style: preserve-3d;
}







/* =========================================================
   IMAGE UNROLL
   ========================================================= */

.img-unroll {
    position: relative;
    overflow: hidden;
}

.img-unroll img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    will-change: clip-path, transform;
}




/* =========================================================
   FX EXIT SCALE
   ========================================================= */

.fx-exit-scale {
    position: relative;

    transform-origin: center center;

    will-change: transform, border-radius, opacity;
}


/* 
   Important si tu veux que le border-radius
   masque le contenu du conteneur.
*/

.fx-exit-scale {
    overflow: hidden;
}



/* =========================================================
   FX CAMERA EXIT
   ========================================================= */

.fx-camera-exit {
    position: relative;

    transform-origin: center center;

    will-change: transform, border-radius, opacity;

    overflow: hidden;
}


/* Image */

.fx-camera-exit img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform-origin: center center;

    will-change: transform;
}















/* =========================================================
   FX BACKGROUND PARALLAX
   ========================================================= */

.fx-bg-parallax {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   IMAGE DE FOND ANIMÉE
   ========================================================= */

.fx-bg-parallax-layer {

    position: absolute;

    top: -100px;
    left: 0;

    width: 100%;
    height: calc(100% + 200px);

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    pointer-events: none;

    z-index: 0;

    will-change: transform;
}


/* =========================================================
   CONTENU ELEMENTOR AU-DESSUS
   ========================================================= */

.fx-bg-parallax > *:not(.fx-bg-parallax-layer) {

    position: relative;

    z-index: 1;
}































/* =========================================================
   FX BG CINEMATIC
   ========================================================= */

.fx-bg-cinematic {

    position: relative;

    overflow: hidden;

}


/* =========================================================
   BACKGROUND ANIMÉ
   ========================================================= */

.fx-bg-cinematic-layer {

    position: absolute;

    top: -10%;
    left: -10%;

    width: 120%;
    height: 120%;

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    pointer-events: none;

    z-index: 0;

    will-change: transform;

}


/* =========================================================
   CONTENU ELEMENTOR
   ========================================================= */

.fx-bg-cinematic > *:not(.fx-bg-cinematic-layer) {

    position: relative;

    z-index: 1;

}















































/* =========================================================
   FX MARQUEE
   ========================================================= */

.fx-marquee {
  width: 100% !important;
  overflow: hidden !important;
  position: relative;
}


.fx-marquee-viewport {
  width: 100%;
  overflow: hidden;
}


.fx-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  width: max-content !important;
  max-width: none !important;

  white-space: nowrap;

  will-change: transform;
}


.fx-marquee-track > * {
  flex: 0 0 auto !important;

  width: max-content !important;
  max-width: none !important;
}


.fx-marquee-track .elementor-widget-heading {
  width: max-content !important;
  max-width: none !important;
}


.fx-marquee-track .elementor-heading-title {
  width: max-content !important;
  max-width: none !important;

  white-space: nowrap !important;
}




























/* =========================================================
   FX TEXT MARKER
   ========================================================= */

.fx-text-marker .elementor-heading-title {
    position: relative;
}


/* =========================================================
   MOT À MARQUER
   ========================================================= */

.fx-text-marker-word {

    position: relative;

    display: inline-block;

    vertical-align: baseline;

    /*
     * LE PADDING EST MAINTENANT CONTRÔLÉ
     * PAR LES DATA ATTRIBUTES
     */

    padding:
        var(--fx-marker-padding-y, 3px)
        var(--fx-marker-padding-x, 8px);


    /*
     * Évite que le padding soit modifié
     * par Elementor.
     */

    box-sizing: border-box;

    z-index: 1;

}


/* =========================================================
   FOND ORANGE
   ========================================================= */

.fx-text-marker-bg {

    position: absolute;

    /*
     * Le fond prend toute la zone
     * du mot + son padding.
     */

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;


    /*
     * Derrière le texte.
     */

    z-index: -1;


    /*
     * Couleur.
     */

    background:
        var(--fx-marker-color, #FF6545);


    /*
     * GSAP anime scaleX.
     */

    transform:
        scaleX(0);


    /*
     * Ne bloque pas la souris.
     */

    pointer-events: none;

    will-change: transform;

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fx-text-marker .elementor-heading-title {

        opacity: 1 !important;

        transform: none !important;

        filter: none !important;

    }

    .fx-text-marker-bg {

        transform: scaleX(1) !important;

    }

}