/* ==========================================================
   ELEMENTOR FRAMEWORK CSS — media2001
   Based on Jeffrey @ lytboxacademy.com/fluid-containers-for-elementor-with-clamp/

   HOW TO USE:
   1. Variables projet dans project-variables.css
   2. Classes dans le champ "CSS Classes" d'Elementor
   3. Ne pas modifier ce fichier
   ========================================================== */


/* ----------------------------------------------------------
   FIX GLOBAL — overflow & background
   Evite la bande noire liée aux éléments qui débordent
   ---------------------------------------------------------- */

html,
body {
  overflow-x: hidden;
}

html {
  background-color: var(--zone-1, #ffffff);
}


/* ==========================================================
   VARIABLES FRAMEWORK — ne pas modifier
   (surcharger dans project-variables.css si besoin)
   ========================================================== */

:root {

  /* Section padding top/bottom */
  --section-xxl-padding-min: 9.375rem;
  --section-xxl-padding-max: 10rem;

  --section-xl-padding-min:  6.875rem;
  --section-xl-padding-max:  7.5rem;

  --section-l-padding-min:   5.625rem;
  --section-l-padding-max:   6.25rem;

  --section-m-padding-min:   5rem;
  --section-m-padding-max:   5rem;

  --section-s-padding-min:   3.75rem;
  --section-s-padding-max:   3.75rem;

  --section-xs-padding-min:  2.5rem;
  --section-xs-padding-max:  2.5rem;

  --section-xxs-padding-min: 1.5rem;
  --section-xxs-padding-max: 1.5rem;

  --section-header-padding-min: 1.25rem;
  --section-header-padding-max: 1.25rem;

  /* Side padding left/right */
  --fluid-side-padding-min: 1.25rem;
  --fluid-side-padding-max: 5rem;

  /* Column gaps */
  --gap-none: 0px;
  --gap-xxs:  0.5rem;
  --gap-xs:   0.75rem;
  --gap-sm:   1rem;
  --gap-md:   1.5rem;
  --gap-lg:   2rem;
  --gap-xl:   3rem;
  --gap-2xl:  4rem;

  /* Special */
  --section-hero-height:   100vh;
  --section-offset-header: 80px;
  --section-narrow:        62.5rem;
  --section-narrow-xs:     45rem;

  /* Rail scroll */
  --rail-gap:  1.25rem;
  --rail-peek: 2rem;

  /* Utils */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-ambient: 0 12px 40px rgba(8,27,56,0.06);

  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease-out;
  --transition-slow:   0.5s ease;

  /* Zones defaults (surcharger dans project-variables.css) */
  --zone-1:      #ffffff;
  --zone-1-text: #333333;
  --zone-2:      #f5f5f5;
  --zone-2-text: #333333;
  --zone-3:      #1a1a2e;
  --zone-3-text: #f0f0f0;

}


/* ==========================================================
   SECTION PADDING — fluid avec clamp()
   ========================================================== */

.section-xxl {
  padding-top:    clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  padding-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  padding-left:   clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-xl {
  padding-top:    clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  padding-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  padding-left:   clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-l {
  padding-top:    clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-left:   clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-m {
  padding-top:    clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  padding-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  padding-left:   clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-s {
  padding-top:    clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  padding-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  padding-left:   clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-xs {
  padding-top:    clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  padding-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  padding-left:   clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-xxs {
  padding-top:    clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
  padding-bottom: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
  padding-left:   clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-header {
  padding-top:    clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
  padding-bottom: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
  padding-left:   clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.section-hero {
  min-height: var(--section-hero-height) !important;
}

.section-hero .e-con-inner {
  justify-content: center !important;
}


/* ----------------------------------------------------------
   FULL WIDTH
   ---------------------------------------------------------- */

.section-full div {
  max-width: 100% !important;
}


/* ----------------------------------------------------------
   NARROW
   ---------------------------------------------------------- */

.section-narrow .e-con-inner {
  max-width: var(--section-narrow) !important;
}

.section-narrow-xs .e-con-inner {
  max-width: var(--section-narrow-xs) !important;
}


/* ----------------------------------------------------------
   OFFSET header sticky/fixed
   ---------------------------------------------------------- */

.section-offset {
  padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}


/* ----------------------------------------------------------
   BACKGROUNDS
   ---------------------------------------------------------- */

.bg-light     { background-color: var(--color-light)     !important; }
.bg-light-alt { background-color: var(--color-light-alt) !important; }
.bg-dark      { background-color: var(--color-dark)      !important; color: var(--color-text-on-dark) !important; }
.bg-dark-alt  { background-color: var(--color-dark-alt)  !important; color: var(--color-text-on-dark) !important; }
.bg-primary   { background-color: var(--color-primary)   !important; color: var(--color-white)        !important; }
.bg-accent    { background-color: var(--color-accent)    !important; }
.bg-white     { background-color: var(--color-white)     !important; }


/* ----------------------------------------------------------
   SECTION ZONES — padding + fond en une classe
   Padding par défaut : section-l
   Combiner avec section-xxl, section-s... pour override
   ---------------------------------------------------------- */

.section-zone-1 {
  background-color: var(--zone-1) !important;
  color:            var(--zone-1-text) !important;
  padding-top:    clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-left:   clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-zone-2 {
  background-color: var(--zone-2) !important;
  color:            var(--zone-2-text) !important;
  padding-top:    clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-left:   clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-zone-3 {
  background-color: var(--zone-3) !important;
  color:            var(--zone-3-text) !important;
  padding-top:    clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-left:   clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

/* Override padding sur zones */
.section-zone-1.section-xxl, .section-zone-2.section-xxl, .section-zone-3.section-xxl {
  padding-top:    clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  padding-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
}
.section-zone-1.section-xl, .section-zone-2.section-xl, .section-zone-3.section-xl {
  padding-top:    clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  padding-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
}
.section-zone-1.section-m, .section-zone-2.section-m, .section-zone-3.section-m {
  padding-top:    clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  padding-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
}
.section-zone-1.section-s, .section-zone-2.section-s, .section-zone-3.section-s {
  padding-top:    clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  padding-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
}
.section-zone-1.section-xs, .section-zone-2.section-xs, .section-zone-3.section-xs {
  padding-top:    clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  padding-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
}
.section-zone-1.section-xxs, .section-zone-2.section-xxs, .section-zone-3.section-xxs {
  padding-top:    clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
  padding-bottom: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
}


/* ----------------------------------------------------------
   COLUMN GAPS
   ---------------------------------------------------------- */

.gap-none .e-con-inner { gap: var(--gap-none) !important; }
.gap-xxs  .e-con-inner { gap: var(--gap-xxs)  !important; }
.gap-xs   .e-con-inner { gap: var(--gap-xs)   !important; }
.gap-sm   .e-con-inner { gap: var(--gap-sm)   !important; }
.gap-md   .e-con-inner { gap: var(--gap-md)   !important; }
.gap-lg   .e-con-inner { gap: var(--gap-lg)   !important; }
.gap-xl   .e-con-inner { gap: var(--gap-xl)   !important; }
.gap-2xl  .e-con-inner { gap: var(--gap-2xl)  !important; }


/* ----------------------------------------------------------
   TEXT UTILITIES
   ---------------------------------------------------------- */

.text-muted   { color: var(--color-text-muted)  !important; }
.text-light   { color: var(--color-text-light)  !important; }
.text-on-dark { color: var(--color-text-on-dark)!important; }
.text-primary { color: var(--color-primary)     !important; }
.text-accent  { color: var(--color-accent)      !important; }


/* ----------------------------------------------------------
   HORIZONTAL SCROLL RAIL — CSS pur, zéro JS
   Usage : classe .rail sur le container scrollable
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .rail {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--rail-gap);
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--rail-gap);
    padding-left: var(--rail-gap);
    padding-right: 0;
    background: transparent !important;
  }

  .rail::-webkit-scrollbar {
    display: none;
  }

  /* Gap droit = pseudo-element — padding-right ignoré en fin de scroll */
  .rail::after {
    content: '';
    display: block;
    min-width: var(--rail-gap);
    height: 1px;
    flex-shrink: 0;
  }

  /* Cards */
  .rail > *,
  .rail > * > * {
    flex: 0 0 calc(100vw - var(--rail-gap) * 2 - var(--rail-peek)) !important;
    max-width: calc(100vw - var(--rail-gap) * 2 - var(--rail-peek)) !important;
    scroll-snap-align: start;
    width: auto !important;
  }

}