/* ════════════════════════════════════════════════════════════
   GOXL — CUSTOM CSS  (fusionné & rangé)
   ────────────────────────────────────────────────────────────
   Kit Elementor :
     --e-global-color-primary     #F8F6EF
     --e-global-color-secondary   #272102
     --e-global-color-text        #777777
     --e-global-color-accent      #FFFFFF
     --e-global-color-68968b9     #FFE15A  (jaune)
     --e-global-color-ae68006     #EBE5DA
     --e-global-color-77a5e9d     #F6F1DE
     --e-global-color-bed4ee6     #A0A0A0
   ────────────────────────────────────────────────────────────
   TABLE DES MATIÈRES
   01. Utilitaires globaux
   02. Composants partagés     (chip · bouton primary · highlights · social-proof · contact-bubble)
   03. Hero                    (layout · objets flottants · animations)
   04. Concept sticky          (pin · header · layout desktop · progress · steps · images)
   05. Concept carousel        (track · curseur custom · drag · responsive)
   06. Reviews — Marquee       (rows · cards · responsive)
   07. FAQ                     (accordion · responsive)
   08. CTA Banner              (layout · objets flottants · animations · responsive)
   09. Navigation mobile       (menu · hamburger)
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   01. UTILITAIRES GLOBAUX
   ════════════════════════════════════════════════════════════ */

.bg-dark-gradient {
  background: linear-gradient(180deg, #201F1A 0%, #5A5647 100%);
  border-radius: 10px;
}

.bg-dark-gradient-reverse {
  border-radius: 8px;
  box-shadow: 0 0 0 8px var(--e-global-color-accent);
  background: linear-gradient(164deg, #575345 -0.29%, #201F1A 108.56%);
}

.shadow-yellow {
  box-shadow:
    inset -4px -4px 5px 0 rgba(191, 108, 0, 0.20),
    inset 0 -6px 14px 0 rgba(255, 206, 44, 1),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.80),
    0 34px 21px 0 rgba(57, 47, 90, 0.11),
    0 15px 15px 0 rgba(255, 206, 44, 0.19),
    0 4px 8px 0 rgba(57, 47, 90, 0.19),
    0 2px 4px 0 rgba(0, 0, 0, 0.15);
}

.glass-gradient {
  border-radius: 10px;
  background: linear-gradient(
    106deg,
    rgba(255, 255, 255, 0.30) 8.55%,
    rgba(255, 255, 255, 0.60) 98.58%
  );
}

.yellow-gradient {
  border-radius: 10px;
  border: 8px solid var(--e-global-color-accent);
  background: linear-gradient(
    165deg,
    var(--e-global-color-primary) 18.73%,
    var(--e-global-color-68968b9) 192.1%
  );
}

.border-white {
  box-shadow: 0 0 0 8px var(--e-global-color-accent);
}


/* ════════════════════════════════════════════════════════════
   02. COMPOSANTS PARTAGÉS
   ════════════════════════════════════════════════════════════ */

/* ── Chip / badge ── */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 48px;
  width: fit-content;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border: 1px solid #FFFFFF;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.03);
}

/* ── Highlights de titre ── */
.hero-title {
  isolation: isolate;
  -webkit-text-stroke: 1px #000000;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.hero-highlight--shifted {
  position: relative;
  background: none;
  border-left: 0;
  padding: 0;
}
.hero-highlight--shifted::before {
  content: '';
  position: absolute;
  inset: 0 -0.3em 0 -0.25em;
  background: linear-gradient(
    90deg,
    var(--e-global-color-68968b9) 0%,
    var(--e-global-color-77a5e9d) 95.3%
  );
  border-left: 1px solid var(--e-global-color-secondary);
  z-index: -1;
}

.title-highlight {
  display: inline;
  padding: 0 10px;
  border-left: 1px solid var(--e-global-color-secondary);
  background: linear-gradient(
    90deg,
    var(--e-global-color-68968b9) 0%,
    var(--e-global-color-primary) 100%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.title-highlight-white {
  display: inline;
  padding: 0 10px;
  border-left: 1px solid var(--e-global-color-secondary);
  background: linear-gradient(
    90deg,
    var(--e-global-color-primary) 0%,
    #FFDE6A 100%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── Bouton primary ── */
.btn-primary,
.btn-primary.elementor-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: unset !important;
  padding: 20px 26px !important;
  gap: 8px;
  box-sizing: border-box;
  isolation: isolate;
  white-space: nowrap;
  background:
    linear-gradient(0deg, var(--e-global-color-68968b9), var(--e-global-color-68968b9)),
    linear-gradient(360deg, rgba(255, 201, 57, 0) -54.97%, rgba(255, 201, 57, 0.4) 83.33%),
    var(--e-global-color-accent);
  border: none !important;
  border-radius: 6px;
  box-shadow:
    0 34px 21px rgba(57, 47, 90, 0.11),
    0 15px 15px rgba(255, 206, 44, 0.19),
    0 4px 8px rgba(57, 47, 90, 0.19),
    0 2px 4px rgba(0, 0, 0, 0.15),
    inset -4px -4px 5px rgba(191, 108, 0, 0.20),
    inset 0 -6px 14px #FFCE2C,
    inset 0 -1px 0 rgba(255, 255, 255, 0.80) !important;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-primary::before,
.btn-primary.elementor-button::before {
  content: '';
  position: absolute;
  width: 164.19px;
  height: 32.47px;
  left: calc(50% - 164.19px / 2 - 9.6px);
  top: calc(50% - 32.47px / 2 - 3.76px);
  background: linear-gradient(180deg, var(--e-global-color-accent) 0%, #FEE093 100%);
  opacity: 0.6;
  filter: blur(9.87px);
  z-index: 0;
  pointer-events: none;
}

.btn-primary .elementor-button-icon,
.btn-primary.elementor-button .elementor-button-icon { display: none !important; }

.btn-primary .elementor-button-content-wrapper,
.btn-primary.elementor-button .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.btn-primary .elementor-button-text,
.btn-primary.elementor-button .elementor-button-text {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* Flèche → via mask SVG */
.btn-primary .elementor-button-content-wrapper::after,
.btn-primary.elementor-button .elementor-button-content-wrapper::after {
  content: '';
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background-color: var(--e-global-color-secondary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.88477%201.88086L10.2001%206.00007L5.88477%2010.1193%22%20stroke%3D%22black%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.2007%206.00012L1.80078%206.00012%22%20stroke%3D%22black%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.88477%201.88086L10.2001%206.00007L5.88477%2010.1193%22%20stroke%3D%22black%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.2007%206.00012L1.80078%206.00012%22%20stroke%3D%22black%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.btn-primary:hover,
.btn-primary.elementor-button:hover {
  box-shadow:
    0 34px 21px rgba(57, 47, 90, 0.15),
    0 15px 15px rgba(255, 206, 44, 0.30),
    0 4px 8px rgba(57, 47, 90, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.18),
    inset -4px -4px 5px rgba(191, 108, 0, 0.20),
    inset 0 -6px 14px #FFCE2C,
    inset 0 -1px 0 rgba(255, 255, 255, 0.80) !important;
  transform: translateY(-1px);
}

/* ── Bulle téléphone ── */
.contact-bubble {
  position: relative;
}
.contact-bubble::before {
  content: '';
  position: absolute;
  right: 60px;
  top: 0;
  z-index: 2;
  width: 49px;
  height: 49px;
  border-radius: 41.794px;
  background: url("/wp-content/uploads/2026/05/telephone.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

/* ── Social proof pill ── */
.social-proof {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 11px !important;
  width: fit-content !important;
  max-width: none !important;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--e-global-color-accent);
  border-radius: 48px;
  box-shadow: 0 0 14px rgba(255, 214, 49, 0.4);
  white-space: nowrap;
  position: relative;
}
.social-proof::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 42px;
  height: 20px;
  background: url('/wp-content/uploads/2026/05/testimonial.png') left center / contain no-repeat;
  z-index: 2;
}
.social-proof .elementor-heading-title {
  font-family: var(--e-global-typography-c3f0ed5-font-family, 'Lausanne'), sans-serif;
  font-weight: 400;
  font-size: var(--e-global-typography-c3f0ed5-font-size, 16px);
  line-height: 1.5;
  color: var(--e-global-color-secondary);
  margin: 0;
  white-space: nowrap;
  z-index: 2;
}


/* ════════════════════════════════════════════════════════════
   03. HERO
   ════════════════════════════════════════════════════════════ */

/* ── Layout & overflow ── */
.hero-section,
.hero-section.e-con,
.elementor-element.hero-section {
  position: relative !important;
  overflow: visible !important;
}
.hero-section > .elementor-widget:not(.elementor-widget-html) {
  position: relative !important;
  z-index: 1 !important;
}
.hero-section .elementor-widget-html,
.hero-section .elementor-widget-html.elementor-absolute {
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}
.hero-section .elementor-widget-html .elementor-widget-container {
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* ── Overlay conteneur ── */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 1600px);
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.hero-overlay > div {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-overlay img {
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

/* ── Animations flottantes hero ── */
@keyframes hero-float-a {
  0%, 100% { translate: 0px 0px; }
  50%       { translate: 0px -7px; }
}
@keyframes hero-float-b {
  0%, 100% { translate: 0px 0px; }
  50%       { translate: 0px -5px; }
}
@keyframes hero-float-c {
  0%, 100% { translate: 0px 0px; }
  50%       { translate: 0px -9px; }
}
@keyframes hero-float-d {
  0%, 100% { translate: 0px 0px; }
  50%       { translate: 0px -3px; }
}

.hero-overlay > div:nth-child(1)  { animation: hero-float-b 6.8s ease-in-out 0.0s  infinite; }
.hero-overlay > div:nth-child(2)  { animation: hero-float-a 5.9s ease-in-out 1.2s  infinite; }
.hero-overlay > div:nth-child(3)  { animation: hero-float-d 5.3s ease-in-out 2.5s  infinite; }
.hero-overlay > div:nth-child(4)  { animation: hero-float-c 7.2s ease-in-out 0.7s  infinite; }
.hero-overlay > div:nth-child(5)  { animation: hero-float-a 6.4s ease-in-out 1.9s  infinite; }
.hero-overlay > div:nth-child(6)  { animation: hero-float-d 5.6s ease-in-out 3.1s  infinite; }
.hero-overlay > div:nth-child(7)  { animation: hero-float-b 7.0s ease-in-out 0.4s  infinite; }
.hero-overlay > div:nth-child(8)  { animation: hero-float-c 6.1s ease-in-out 2.2s  infinite; }
.hero-overlay > div:nth-child(9)  { animation: hero-float-a 5.7s ease-in-out 1.0s  infinite; }
.hero-overlay > div:nth-child(10) { animation: hero-float-d 6.5s ease-in-out 0.3s  infinite; }
.hero-overlay > div:nth-child(11) { animation: hero-float-b 7.3s ease-in-out 1.6s  infinite; }
.hero-overlay > div:nth-child(12) { animation: hero-float-c 6.0s ease-in-out 2.8s  infinite; }

/* ── H1 tablette + mobile ── */
@media (max-width: 1024px) {
  .hero-title {
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    text-align: center !important;
    font-size: 44px !important;
    line-height: 1 !important;
    color: var(--e-global-color-secondary) !important;
  }
}

/* ── Objets flottants — tablette ≤1024px ── */
@media (max-width: 1024px) {
  .hero-obj--sofa-left,
  .hero-obj--box-left-lg,
  .hero-obj--fridge-left,
  .hero-obj--roundchair-left,
  .hero-obj--fridge-right,
  .hero-obj--table-right,
  .hero-obj--chair-right     { display: none !important; }

  .hero-obj--table-left {
    left: 20px !important; top: -28px !important;
    width: 100px !important; height: 93px !important;
  }
  .hero-obj--table-left img  { width: 88px !important; transform: rotate(-28.76deg) !important; }

  .hero-obj--box-left-sm {
    left: -4px !important; top: -50px !important;
    width: 56px !important; height: 56px !important;
  }
  .hero-obj--box-left-sm img { width: 50px !important; transform: rotate(-4.94deg) !important; filter: blur(1.5px) !important; }

  .hero-obj--box-right {
    right: 16px !important; top: -28px !important;
    width: 106px !important; height: 106px !important;
  }
  .hero-obj--box-right img   { width: 90px !important; transform: rotate(-4.94deg) !important; filter: blur(0.5px) !important; }

  .hero-obj--sofa-right {
    display: flex !important;
    right: 24px !important; top: 200px !important;
    width: 90px !important; height: 84px !important;
  }
  .hero-obj--sofa-right img  { width: 76px !important; transform: rotate(162.78deg) scaleY(-1) !important; filter: blur(1px) !important; }

  .hero-obj--chair-left {
    left: 0 !important; top: 190px !important;
    width: 96px !important; height: 110px !important;
  }
  .hero-obj--chair-left img  { width: 72px !important; transform: rotate(-25.44deg) !important; filter: blur(1px) !important; }
}

/* ── Objets flottants — mobile ≤767px ── */
@media (max-width: 767px) {
  .hero-obj--fridge-left,
  .hero-obj--fridge-right    { display: none !important; }

  .hero-obj--table-left { left: 13px !important; top: -24px !important; width: 70px !important; height: 66px !important; }
  .hero-obj--table-left img  { width: 60px !important; }

  .hero-obj--box-left-sm { left: -4px !important; top: -40px !important; width: 38px !important; height: 38px !important; }
  .hero-obj--box-left-sm img { width: 34px !important; }

  .hero-obj--box-right { right: 8px !important; top: -20px !important; width: 76px !important; height: 76px !important; }
  .hero-obj--box-right img   { width: 67px !important; }

  .hero-obj--sofa-right { right: 16px !important; top: 185px !important; width: 65px !important; height: 60px !important; }
  .hero-obj--sofa-right img  { width: 57px !important; }

  .hero-obj--chair-left { left: 0 !important; top: 180px !important; width: 72px !important; height: 78px !important; }
  .hero-obj--chair-left img  { width: 50px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-overlay > div,
  .hero-obj     { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════
   04. CONCEPT "Comment ça marche ?"
   ════════════════════════════════════════════════════════════ */

/* ─── Neutralisation des ancêtres Elementor ─── */
.elementor-element-89acfd2,
.concept-host,
.concept-host .e-con-inner,
.concept-host > .elementor-widget,
.concept-host > .elementor-widget > .elementor-widget-container,
.concept-host .elementor-widget-html,
.concept-host .elementor-widget-html .elementor-widget-container {
  overflow: visible !important;
  overflow-x: clip !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
}

.elementor-section:has(.concept-pin),
.elementor-container:has(.concept-pin),
.elementor-column:has(.concept-pin),
.elementor-widget-wrap:has(.concept-pin),
.elementor-widget:has(.concept-pin),
.elementor-widget-container:has(.concept-pin),
.e-con:has(.concept-pin),
.e-con-inner:has(.concept-pin) {
  overflow: visible !important;
  overflow-x: clip !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
}

html, body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ─── Largeur conteneur Elementor ─── */
/* Force le .e-con-inner à 1440px max (Elementor le bride souvent à 800-1140px).
   Compatible mobile : le viewport contraint naturellement la largeur. */
.concept-host {
  width: 100% !important;
  max-width: none !important;
}
.concept-host > .e-con-inner,
.concept-host .e-con-inner {
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.concept-host .elementor-widget-html,
.concept-host .elementor-widget-html .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* ─── Structure sticky ─── */
.concept-pin {
  position: relative !important;
  width: 100% !important;
  background: var(--e-global-color-primary, #F8F6EF) !important;
}

.concept-pin .concept {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
}

/* Sticky à partir de 1025px — seuil standard tablette/desktop Elementor */
@media (min-width: 1025px) {
  .concept-pin {
    height: calc(var(--concept-sticky-h, 100vh) + var(--concept-scroll-distance, 1800px)) !important;
  }
  .concept-pin .concept {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--concept-top, 80px) !important;
    min-height: var(--concept-sticky-h, 100vh) !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 32px 0 !important;
    gap: 32px !important;
  }
  .concept-pin .concept-inner {
    max-width: 1440px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  @keyframes conceptStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .concept-step.anim-in .step-expanded {
    animation: conceptStepIn 0.35s cubic-bezier(.22, 1, .36, 1) both;
  }
}

/* ─── En-tête intégré ─── */
.concept-header {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.concept-header > .chip {
  margin: 0 auto 16px !important;
}
.concept-header__title {
  font-family: var(--e-global-typography-85fcf07-font-family, 'Lausanne'), sans-serif !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 400 !important;
  margin: 0 0 12px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--e-global-color-secondary, #272102) !important;
}
.concept-header__title-highlight {
  display: inline !important;
  padding: 0 10px !important;
  border-left: 1px solid var(--e-global-color-secondary, #272102) !important;
  background: linear-gradient(
    90deg,
    var(--e-global-color-68968b9, #FFE15A) 0%,
    var(--e-global-color-primary, #F8F6EF) 100%
  ) !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
}
.concept-header__desc {
  font-family: var(--e-global-typography-c3f0ed5-font-family, 'Lausanne'), sans-serif !important;
  font-size: 16px !important;
  color: var(--e-global-color-text, #777777) !important;
  max-width: 60ch !important;
  margin: 0 auto !important;
  line-height: 1.5 !important;
}

/* ─── Layout desktop ─── */
.concept {
  width: 100%;
  font-family: var(--e-global-typography-c3f0ed5-font-family, 'Lausanne'), sans-serif;
  color: var(--e-global-color-secondary);
}

.concept-inner {
  display: flex;
  align-items: stretch;
  gap: 67px;
  width: 100%;
  max-width: 1296px;
  margin: 0 auto;
}

.concept-main {
  display: flex;
  align-items: stretch;
  gap: 70px;
  flex-shrink: 0;
}

/* ─── Barre de progression ─── */
.concept-progress {
  position: relative;
  width: 106px;
  min-height: 614px;
  padding: 50px 0;
  border: 8px solid var(--e-global-color-accent);
  border-radius: 18px;
  background: linear-gradient(163.9deg, #FFF1BA 36.9%, var(--e-global-color-primary) 103.7%);
  box-sizing: border-box;
  flex-shrink: 0;
}

.concept-progress-track  { position: relative; width: 100%; height: 100%; }

.concept-progress-line {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 7px;
  height: var(--line-past-height, 50px);
  background: var(--e-global-color-secondary);
  transform: translateX(-50%);
  transition: height 1s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.concept-progress-line-future {
  position: absolute;
  left: 50%;
  top: var(--line-future-top, 200px);
  width: 7px;
  height: var(--line-future-height, 280px);
  background: linear-gradient(180deg, var(--e-global-color-68968b9) 0%, rgba(255, 225, 90, 0) 100%);
  transform: translateX(-50%);
  transition:
    top    1s cubic-bezier(0.22, 1, 0.36, 1),
    height 1s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.concept-progress-truck {
  position: absolute;
  left: 50%;
  top: 0;
  width: 102px;
  height: 102px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, var(--truck-y, 0px));
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 4px 8px rgba(255, 225, 90, 0.45));
  z-index: 2;
  will-change: transform;
}
.concept-progress-truck img,
.concept-progress-truck svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ─── Liste de steps ─── */
.concept-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  width: 547px;
  max-width: 100%;
}

.concept-step {
  position: relative;
  width: 100%;
  transition: opacity 0.2s ease;
}
.concept-step.is-active             { margin: 16px 0; }
.concept-step.is-active:first-child { margin-top: 0; }
.concept-step.is-active:last-child  { margin-bottom: 0; }

.concept .concept-divider {
  display: block !important;
  width: 522px !important;
  max-width: 100% !important;
  height: 1px !important;
  background-color: var(--e-global-color-ae68006) !important;
  background-image: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
}

.concept.is-switching .concept-step,
.concept.is-switching .concept-image { opacity: 0; }

/* Step toggle (bouton réduit) */
.concept .step-toggle,
.concept .step-toggle:hover,
.concept .step-toggle:focus,
.concept .step-toggle:active {
  display: block;
  width: 100%;
  appearance: none;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.concept .step-toggle::before,
.concept .step-toggle::after { display: none !important; content: none !important; }
.concept-step.is-active .step-toggle { display: none; }
.concept .step-toggle:focus-visible {
  outline: 2px solid var(--e-global-color-68968b9) !important;
  outline-offset: 4px;
  border-radius: 2px;
}

.step-toggle-label {
  display: block;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: rgba(160, 160, 160, 0.6);
  transition: color 0.2s ease;
}
.step-toggle:hover .step-toggle-label { color: var(--e-global-color-secondary); }

/* Step étendu */
.step-expanded {
  display: none;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}
.concept-step.is-active .step-expanded { display: flex; }

/* ─── Grand chiffre 3D ───────────────────────────────────────
   1. Élément principal  → gradient text transparent
   2. ::before           → même texte opaque #FFD631 + text-shadow
   isolation: isolate crée le stacking context pour z-index:-1
   ────────────────────────────────────────────────────────── */
.step-number {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-family: var(--e-global-typography-c3f0ed5-font-family, 'Lausanne'), sans-serif;
  font-size: 120px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  background: linear-gradient(90deg, #FFD631 0%, #F8F6EF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: 100%;
}
.step-number::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: #FFD631;
  -webkit-text-fill-color: #FFD631;
  text-shadow:
    0    2px   4px  rgba(0,   0,   0,   0.15),
    0    4px   8px  rgba(57,  47,  90,  0.19),
    0   15px  15px  rgba(255, 206, 44,  0.10),
    0   34px  21px  rgba(57,  47,  90,  0.06),
    0   -1px   0px  rgba(255, 255, 255, 0.80),
    0   -6px  14px  rgba(255, 206, 44,  0.50),
    -4px -4px  5px  rgba(191, 108, 0,   0.20);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
/* Injection du contenu via data-step */
.concept-step[data-step="0"] .step-number::before { content: "01"; }
.concept-step[data-step="1"] .step-number::before { content: "02"; }
.concept-step[data-step="2"] .step-number::before { content: "03"; }
.concept-step[data-step="3"] .step-number::before { content: "04"; }

/* ─── Typographie des steps ─── */
.step-body  { display: flex; flex-direction: column; gap: 48px; align-items: flex-start; width: 100%; }
.step-text  { display: flex; flex-direction: column; gap: 32px; width: 100%; }

.step-title {
  margin: 0;
  font-family: var(--e-global-typography-85fcf07-font-family, 'Lausanne'), sans-serif;
  font-size: var(--e-global-typography-85fcf07-font-size, 30px);
  font-weight: var(--e-global-typography-85fcf07-font-weight, 400);
  line-height: var(--e-global-typography-85fcf07-line-height, 39px);
  color: var(--e-global-color-secondary);
}
.step-desc {
  margin: 0;
  font-family: var(--e-global-typography-c3f0ed5-font-family, 'Lausanne'), sans-serif;
  font-size: var(--e-global-typography-c3f0ed5-font-size, 16px);
  font-weight: var(--e-global-typography-c3f0ed5-font-weight, 400);
  line-height: 1.5;
  color: var(--e-global-color-text);
}

.concept a,
.concept a:link,
.concept a:visited,
.concept a:hover,
.concept a:focus,
.concept a:active { color: inherit; }

/* ─── Image desktop ─── */
.concept-image-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 614px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--e-global-color-ae68006);
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Image par défaut (mobile/tablette) */
.concept-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
  min-height: 614px !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: opacity 0.25s ease;
}

/* Cross-fade desktop ≥1025px (aligné sur le sticky) */
@media (min-width: 1025px) {
  .concept-image-wrap { position: relative !important; }
  .concept-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    flex: none !important;
    min-height: unset !important;
    opacity: 0 !important;
    transition: opacity 0.4s cubic-bezier(.4, 0, .2, 1) !important;
  }
  .concept-image.is-visible { opacity: 1 !important; }
}

/* ─── ≤1024px : masquage images supplémentaires + camion ─── */
/* En dessous du seuil sticky, une seule image reste visible.
   Le camion est masqué sur tous les breakpoints non-desktop. */
@media (max-width: 1024px) {
  .concept-image[data-step-img]:not([data-step-img="0"]) { display: none !important; }
  .concept-image[data-step-img="0"]                      { position: relative !important; opacity: 1 !important; }
  .concept-pin .concept-progress-truck { display: none !important; }
  .concept-pin .concept-progress-line,
  .concept-pin .concept-progress-line-future { display: none !important; }
}

/* ─── .step-image (tablette/mobile inline) ─── */
.step-image { display: none; }

/* ─── Grandes résolutions ≥1600px : même layout, proportions affinées ───────
   Le concept-inner est capé à 1440px par le widget CSS. À ≥1600px le ratio
   contenu/viewport se dégrade (éléments calibrés pour 1440px qui paraissent
   lourds sur un fond plus large). On réduit ici fonts et images sans toucher
   au layout (sticky + image latérale + truck restent inchangés).
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1600px) {

  /* Barre de progression */
  .concept-progress {
    width: 90px !important;
    min-height: 540px !important;
  }
  .concept-progress-truck {
    width: 88px !important;
    height: 88px !important;
  }

  /* Colonne de contenu */
  .concept-content { width: 480px !important; }

  /* Image latérale */
  .concept-image-wrap { min-height: 540px !important; }
  .concept-image      { min-height: 540px !important; }

  /* Grand chiffre 3D : 120px → 96px */
  .step-number,
  .step-number::before {
    font-size: 96px !important;
    line-height: 150% !important;
  }

  /* Titre d'étape */
  .step-title {
    font-size: 26px !important;
    line-height: 34px !important;
  }

  /* Léger resserrement des gaps */
  .step-body { gap: 40px !important; }
  .step-text { gap: 26px !important; }
}

/* ─── Très grandes résolutions ≥1920px ─── */
@media (min-width: 1920px) {

  /* Barre de progression */
  .concept-progress {
    width: 80px !important;
    min-height: 480px !important;
  }
  .concept-progress-truck {
    width: 78px !important;
    height: 78px !important;
  }

  /* Colonne de contenu */
  .concept-content { width: 440px !important; }

  /* Image latérale */
  .concept-image-wrap { min-height: 480px !important; }
  .concept-image      { min-height: 480px !important; }

  /* Grand chiffre 3D : 96px → 80px */
  .step-number,
  .step-number::before {
    font-size: 80px !important;
    line-height: 150% !important;
  }

  /* Titre d'étape */
  .step-title {
    font-size: 24px !important;
    line-height: 31px !important;
  }

  /* Description */
  .step-desc { font-size: 15px !important; }

  /* Gaps */
  .step-body { gap: 36px !important; }
  .step-text { gap: 24px !important; }
}

/* ─── 1025px–1439px : même layout desktop, proportions ajustées ─────────────
   Le sticky, l'image latérale, la pilule et le camion restent identiques au PC.
   On réduit légèrement progress/content pour que l'image-wrap garde ~350px+
   à des largeurs intermédiaires (1025→1439px).
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1439px) {
  .concept-progress {
    width: 88px !important;
    min-height: 520px !important;
  }
  .concept-progress-truck {
    width: 86px !important;
    height: 86px !important;
  }
  .concept-content        { width: 420px !important; }
  .concept-image-wrap     { min-height: 520px !important; }
  .concept-image          { min-height: 520px !important; }
  .step-number,
  .step-number::before    { font-size: 88px !important; line-height: 150% !important; }
  .step-title             { font-size: 26px !important; line-height: 1.3 !important; }
}

/* ─── Responsive ≤1399px ─── */
@media (max-width: 1399px) {
  .concept-inner { gap: 48px; padding: 0 24px; }
  .concept-main  { gap: 48px; }
}

/* ─── Responsive tablette ≤1024px ─── */
@media (max-width: 1024px) {
  .concept-inner {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 0 20px !important;
    max-width: 100% !important;
  }
  .concept-main {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    flex: 1 !important;
  }
  /* Barre de progression : masquée sur tablette (contenu déjà invisible) */
  .concept-progress { display: none !important; }
  .concept-progress-truck,
  body .concept-pin .concept-progress-truck { display: none !important; }
  .concept-progress-line,
  .concept-progress-line-future             { display: none !important; }
  .concept-image-wrap { display: none !important; }
  .concept-image[data-step-img]:not([data-step-img="0"]) { display: none !important; }
  .concept-image[data-step-img="0"] { position: relative !important; opacity: 1 !important; }

  .concept-content {
    width: 100% !important;
    flex: 1 !important;
    gap: 48px !important;
  }
  .concept-step                { margin: 0 !important; }
  .concept-step .step-toggle   { display: none !important; }
  .concept-step .step-expanded { display: flex !important; }
  .concept-divider             { display: none !important; }

  .step-image {
    display: block !important;
    width: 100% !important;
    height: 174px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  .step-expanded { gap: 32px !important; }
  .step-body     { gap: 24px !important; }
  .step-text     { gap: 16px !important; }

  .step-number,
  .step-number::before { font-size: 70px !important; line-height: 1.5 !important; }
  .step-title          { font-size: 24px !important; line-height: 1.3 !important; }
  .step-desc           { font-size: 16px !important; line-height: 1.5 !important; }
}

/* ─── Responsive mobile ≤767px ─── */
@media (max-width: 767px) {
  .concept-inner    { gap: 0 !important; padding: 0 16px !important; }
  .concept-main     { gap: 0 !important; }
  .concept-progress { display: none !important; }
  .concept-content  { width: 100% !important; flex: 1 !important; gap: 48px !important; align-items: flex-start !important; padding: 0 !important; }

  .concept-step .btn-primary { display: none !important; }

  .step-number,
  .step-number::before { font-size: 70px !important; }
  .step-image    { height: 174px !important; }
  .step-body     { gap: 20px !important; }
  .step-expanded { gap: 16px !important; }
  .step-text     { gap: 24px !important; }
  .step-title    { color: var(--e-global-color-secondary) !important; font-size: 24px !important; font-weight: 400 !important; line-height: 1.3 !important; margin: 0 !important; }
}

/* ─── Responsive très petit mobile ≤420px ─── */
@media (max-width: 420px) {
  .concept-inner { padding: 0 12px !important; gap: 12px !important; }
  .step-number,
  .step-number::before { font-size: 48px !important; }
  .step-title    { font-size: 20px !important; }
  .step-desc     { font-size: 14px !important; }
  .step-image    { height: 130px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .concept-progress-truck,
  .concept-step,
  .concept-image,
  .step-toggle-label,
  .concept-step.anim-in .step-expanded { transition: none !important; animation: none !important; }
}


/* ════════════════════════════════════════════════════════════
   05. CONCEPT CAROUSEL
   ════════════════════════════════════════════════════════════ */

/* ─── Track ─── */
.concept-carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: var(--concept-card-gap, 24px);
  transition: transform 0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform;
  overflow: visible !important;
}

/* ─── Cards ─── */
.concept-carousel-track > .concept-card.e-con {
  flex: 0 0 var(--concept-card-width, 392px) !important;
  width: var(--concept-card-width, 392px) !important;
  min-width: var(--concept-card-width, 392px) !important;
  max-width: var(--concept-card-width, 392px) !important;
  background: var(--e-global-color-primary) !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 8px var(--e-global-color-accent),
    0 4px 24px rgba(39, 33, 2, 0.07),
    0 1px 4px  rgba(39, 33, 2, 0.05) !important;
  box-sizing: border-box !important;
}

/* ─── Carousel container ─── */
.concept-carousel {
  overflow: clip !important;
  overflow-clip-margin: 16px !important;
}

/* ─── Dots de navigation ─── */
.concept-nav { display: none; }

/* ─── Curseur custom ─── */
/* Le curseur est caché sur tous les enfants pour éviter les réaffichages parasites */
.concept-carousel,
.concept-carousel * {
  cursor: none !important;
}

/* Pendant le drag : fige les interactions */
.concept-carousel--dragging,
.concept-carousel--dragging * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ─── Bulle "Glisser" ─── */
.concept-cursor {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 999999 !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  /* Charte GOXL : jaune / texte foncé */
  background: #FFD631 !important;
  color: #272102 !important;
  font-family: 'Lausanne', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-shadow:
    0 4px 8px rgba(57, 47, 90, 0.19),
    0 2px 4px rgba(0, 0, 0, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.80) !important;
  pointer-events: none !important;
  user-select: none !important;
  /* État initial : invisible & rétréci */
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.3) !important;
  transition:
    opacity 0.22s ease,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.18s ease,
    color 0.18s ease !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* État visible */
.concept-cursor--show {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* État drag (inversé : noir + jaune) */
.concept-cursor--grab {
  transform: translate(-50%, -50%) scale(0.88) !important;
  background: #272102 !important;
  color: #FFD631 !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* ─── Responsive tablette ≤1024px ─── */
@media (max-width: 1024px) {
  .concept-carousel {
    overflow: clip !important;
    overflow-clip-margin: 20px !important;
    padding: 12px 20px !important;
  }
  .concept-carousel-track { gap: 30px !important; }
  .concept-carousel-track > .concept-card.e-con {
    flex: 0 0 calc(100vw - 80px) !important;
    width: calc(100vw - 80px) !important;
    min-width: calc(100vw - 80px) !important;
    max-width: 340px !important;
  }

  #concept { position: relative !important; }
  #concept .e-con-inner { padding-bottom: 118px !important; }
  .elementor-14 .elementor-element.elementor-element-6809c6d { --padding-bottom: 0px !important; }

  .concept-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    background: #F8F6EF !important;
    position: absolute !important;
    bottom: 72px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .concept-nav__dot {
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    border-radius: 30px !important;
    background: var(--e-global-color-ae68006) !important;
    transition: width 0.3s ease, border-radius 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
  }
  .concept-nav__dot.is-active {
    width: 45px !important;
    height: 16px !important;
    border: none !important;
    border-radius: 20px !important;
    background: linear-gradient(
      160.69deg,
      var(--e-global-color-primary) 110.31%,
      var(--e-global-color-68968b9) 112.81%
    ) !important;
    box-shadow:
      0 4px 8px rgba(57, 47, 90, 0.19),
      0 2px 4px rgba(0, 0, 0, 0.15),
      inset -4px -4px 5px rgba(191, 108, 0, 0.20),
      inset 0 -6px 14px #FFCE2C,
      inset 0 -1px 0 rgba(255, 255, 255, 0.80) !important;
  }
}

/* ─── Responsive mobile ≤767px ─── */
@media (max-width: 767px) {
  /* Rétablir le curseur natif sur mobile */
  .concept-carousel,
  .concept-carousel * { cursor: default !important; }

  .concept-cursor { display: none !important; }

  .concept-carousel { padding: 12px 16px !important; }
  .concept-carousel-track { gap: 30px !important; }

  .elementor-element:has(.concept-carousel),
  .e-con:has(.concept-carousel) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .concept-carousel-track > .concept-card.e-con {
    flex: 0 0 calc(100vw - 78px) !important;
    width: calc(100vw - 78px) !important;
    min-width: calc(100vw - 78px) !important;
    max-width: 340px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .concept-carousel-track { transition: none !important; }
  .concept-nav__dot        { transition: none !important; }
}


/* ════════════════════════════════════════════════════════════
   06. REVIEWS — Marquee avis clients
   ════════════════════════════════════════════════════════════ */

/* ─── Layout rows ─── */
.reviews-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  --fade-width: clamp(40px, 18vw, 360px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--fade-width), black calc(100% - var(--fade-width)), transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0, black var(--fade-width), black calc(100% - var(--fade-width)), transparent 100%);
}

.reviews-row { width: 100%; overflow: hidden; }

.reviews-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}
.reviews-row[data-direction="right"] .reviews-track { padding-left: 50px; }

/* ─── Card ─── */
.review-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 345px;
  height: 280px;
  padding: 30px;
  gap: 20px;
  border: 8px solid var(--e-global-color-accent);
  border-radius: 18px;
  background: var(--e-global-color-primary);
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--e-global-typography-c3f0ed5-font-family, 'Lausanne'), sans-serif;
}

.review-head    { display: flex; gap: 12px; align-items: center; width: 100%; }
.review-avatar  { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.review-info    { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.review-name    { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.2; color: var(--e-global-color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-stars   { display: inline-flex; gap: 2px; color: var(--e-global-color-68968b9); }
.review-stars svg { width: 18px; height: 18px; flex-shrink: 0; }
.review-divider { margin: 0; width: 100%; height: 1px; border: 0; background: var(--e-global-color-ae68006); }
.review-text    {
  margin: 0;
  font-size: var(--e-global-typography-c3f0ed5-font-size, 16px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--e-global-color-text);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Responsive tablette 769-1023px ─── */
@media (min-width: 769px) and (max-width: 1023px) {
  .reviews-rows  { gap: 24px; }
  .reviews-track { gap: 24px; }
}

/* ─── Responsive grands écrans ≥1600px ─── */
@media (min-width: 1600px) {
  .reviews-rows  { gap: 32px; }
  .reviews-track { gap: 32px; }
  .review-card   { width: 400px; height: 320px; padding: 36px; border-width: 10px; border-radius: 20px; gap: 24px; }
  .review-avatar { width: 58px; height: 58px; }
  .review-name   { font-size: 20px; }
  .review-stars  { gap: 3px; }
  .review-stars svg { width: 20px; height: 20px; }
  .review-text   { font-size: 18px; }
  .reviews-row[data-direction="right"] .reviews-track { padding-left: 70px; }
}
@media (min-width: 1920px) {
  .review-card   { width: 460px; height: 360px; padding: 40px; border-width: 12px; border-radius: 22px; gap: 28px; }
  .review-avatar { width: 64px; height: 64px; }
  .review-name   { font-size: 22px; }
  .review-stars svg { width: 22px; height: 22px; }
  .review-text   { font-size: 18px; }
  .reviews-row[data-direction="right"] .reviews-track { padding-left: 90px; }
}
@media (min-width: 2560px) {
  .review-card   { width: 560px; height: 440px; padding: 48px; border-width: 14px; border-radius: 24px; gap: 32px; }
  .review-avatar { width: 72px; height: 72px; }
  .review-name   { font-size: 26px; }
  .review-stars svg { width: 26px; height: 26px; }
  .review-text   { font-size: 20px; }
}

/* ─── Responsive mobile ≤767px — défilement vertical ─── */
@media (max-width: 767px) {
  .reviews-rows {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: unset !important;
    width: 100% !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 80px, black calc(100% - 80px), transparent 100%) !important;
    mask-image:         linear-gradient(to bottom, transparent 0, black 80px, black calc(100% - 80px), transparent 100%) !important;
  }
  .reviews-row:first-child { width: 100% !important; height: 720px !important; overflow: hidden !important; flex: none !important; }
  .reviews-row:nth-child(2) { display: none !important; }

  .reviews-row .reviews-track {
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
    height: auto !important;
    padding: 0 !important;
  }

  .review-card    { display: flex !important; width: 345px !important; max-width: 100% !important; height: 280px !important; padding: 30px !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; border: 8px solid var(--e-global-color-accent) !important; border-radius: 10px !important; background: var(--e-global-color-primary) !important; box-sizing: border-box !important; overflow: hidden !important; margin: 0 auto !important; flex-shrink: 0 !important; }
  .review-head    { display: flex !important; gap: 12px !important; align-items: center !important; width: 100% !important; flex-shrink: 0 !important; }
  .review-avatar  { width: 50px !important; height: 50px !important; border-radius: 100px !important; flex-shrink: 0 !important; }
  .review-info    { display: flex !important; flex-direction: column !important; gap: 4px !important; align-items: flex-start !important; flex: 1 0 0 !important; min-width: 0 !important; }
  .review-name    { font-size: 18px !important; font-weight: 400 !important; line-height: 1.2 !important; color: var(--e-global-color-secondary) !important; margin: 0 !important; }
  .review-stars     { gap: 2px !important; }
  .review-stars svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; }
  .review-divider { width: 100% !important; height: 1px !important; background: var(--e-global-color-ae68006) !important; border: none !important; margin: 0 !important; flex-shrink: 0 !important; }
  .review-text    { font-size: 16px !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--e-global-color-text) !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track { transform: none !important; }
}


/* ════════════════════════════════════════════════════════════
   07. FAQ
   ════════════════════════════════════════════════════════════ */

.faq-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
  width: 100%;
  font-family: var(--e-global-typography-c3f0ed5-font-family, 'Lausanne'), sans-serif;
}

.elementor-widget:has(.faq-list),
.elementor-widget-container:has(.faq-list) {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.elementor-widget-container:has(.faq-list) .faq-list { flex: 1; }

.faq-item {
  background: var(--e-global-color-accent) !important;
  border: 7px solid var(--e-global-color-accent);
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.25s ease;
}
.faq-item.is-open { background: var(--e-global-color-primary) !important; }

.faq-toggle {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 20px;
  background: none !important;
  background-color: transparent !important;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
  box-shadow: none !important;
}
.faq-toggle:link,
.faq-toggle:visited,
.faq-toggle:hover,
.faq-toggle:focus,
.faq-toggle:active {
  color: inherit;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.faq-toggle::before,
.faq-toggle::after { display: none !important; }
.faq-toggle:focus         { outline: none; }
.faq-toggle:focus-visible {
  outline: 2px solid var(--e-global-color-68968b9) !important;
  outline-offset: -4px;
  border-radius: 3px;
}

/* ─── Icône +/- ─── */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 37px;
  height: 37px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--e-global-color-68968b9) 0%, var(--e-global-color-primary) 100%);
  box-shadow:
    0 34px 21px rgba(57, 47, 90, 0.11),
    0 15px 15px rgba(255, 206, 44, 0.19),
    0  4px  8px rgba(57, 47, 90, 0.19),
    0  2px  4px rgba(0, 0, 0, 0.15),
    inset -4px -4px  5px rgba(191, 108, 0, 0.20),
    inset  0   -6px 14px #FFCE2C,
    inset  0   -1px  0   rgba(255, 255, 255, 0.80);
}
.faq-icon::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 13px; height: 1.5px;
  background: var(--e-global-color-secondary);
  border-radius: 1px;
}
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scaleY(1);
  width: 1.5px; height: 13px;
  background: var(--e-global-color-secondary);
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.is-open .faq-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq-question {
  flex: 1;
  min-width: 0;
  font-family: var(--e-global-typography-0467ec5-font-family, 'Lausanne'), sans-serif;
  font-size:   var(--e-global-typography-0467ec5-font-size,   18px);
  font-weight: var(--e-global-typography-0467ec5-font-weight, 400);
  line-height: var(--e-global-typography-0467ec5-line-height, 21px);
  color: var(--e-global-color-secondary) !important;
}

/* ─── Body accordéon ─── */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    margin-top         0.35s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
}
.faq-item.is-open .faq-body { grid-template-rows: 1fr; margin-top: 4px; }
.faq-body-inner { overflow: hidden; }
.faq-body-inner p {
  margin: 0;
  padding: 0 20px 20px;
  font-size:   var(--e-global-typography-c3f0ed5-font-size,   16px);
  font-weight: var(--e-global-typography-c3f0ed5-font-weight, 400);
  line-height: 1.5;
  color: var(--e-global-color-text);
  font-family: var(--e-global-typography-c3f0ed5-font-family, 'Lausanne'), sans-serif;
}

/* ─── Responsive mobile ≤768px ─── */
@media (max-width: 768px) {
  .elementor-widget:has(.faq-list),
  .elementor-widget-container:has(.faq-list) { height: auto !important; min-height: 0 !important; }
  .faq-list { height: auto !important; justify-content: flex-start !important; gap: 8px; }

  .faq-toggle { padding: 18px 16px; gap: 16px; align-items: flex-start; height: auto; }

  .faq-icon { width: 32px; height: 32px; border-radius: 5px; flex-shrink: 0; margin-top: 2px; }
  .faq-icon::before { width: 11px; }
  .faq-icon::after  { height: 11px; }

  .faq-question { font-size: 16px; line-height: 1.3; white-space: normal; overflow: visible; overflow-wrap: break-word; }
  .faq-body-inner p { padding: 0 16px 18px; font-size: 15px; }
}

/* ─── Très petit mobile ≤390px ─── */
@media (max-width: 390px) {
  .faq-toggle   { padding: 16px 14px; gap: 14px; }
  .faq-icon     { width: 30px; height: 30px; }
  .faq-icon::before { width: 10px; }
  .faq-icon::after  { height: 10px; }
  .faq-question { font-size: 15px; }
  .faq-body-inner p { padding: 0 14px 16px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-body,
  .faq-icon::after { transition: none !important; }
}


/* ════════════════════════════════════════════════════════════
   08. CTA BANNER
   ════════════════════════════════════════════════════════════ */

/* ─── Layout & overflow ─── */
.cta-banner,
.cta-banner.e-con,
.elementor-element.cta-banner,
.shadow-yellow.cta-banner {
  position: relative !important;
  min-height: 480px !important;
  overflow: visible !important;
}

.cta-banner > .elementor-widget:not(.elementor-widget-html) {
  position: relative !important;
  z-index: 1 !important;
}

.cta-banner .elementor-widget-html,
.cta-banner .elementor-widget-html.elementor-absolute {
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
  z-index: auto !important;
}
.cta-banner .elementor-widget-html .elementor-widget-container {
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* ─── Overlay conteneur ─── */
.cta-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.cta-overlay img {
  position: absolute;
  object-fit: contain;
  user-select: none;
  transform-origin: center center;
  pointer-events: none;
}

/* ─── Animations flottantes CTA ─── */
@keyframes float-a {
  0%, 100% { translate: 0px 0px; }
  50%       { translate: 0px -12px; }
}
@keyframes float-b {
  0%, 100% { translate: 0px 0px; }
  50%       { translate: 0px -8px; }
}
@keyframes float-c {
  0%, 100% { translate: 0px 0px; }
  50%       { translate: 0px -16px; }
}
@keyframes float-d {
  0%, 100% { translate: 0px 0px; }
  50%       { translate: 0px -6px; }
}

.cta-overlay > div:nth-child(1)  { animation: float-b 6.2s ease-in-out 0.0s  infinite; }
.cta-overlay > div:nth-child(2)  { animation: float-d 5.1s ease-in-out 0.8s  infinite; }
.cta-overlay > div:nth-child(3)  { animation: float-c 7.4s ease-in-out 1.5s  infinite; }
.cta-overlay > div:nth-child(4)  { animation: float-a 5.8s ease-in-out 2.3s  infinite; }
.cta-overlay > div:nth-child(5)  { animation: float-b 6.6s ease-in-out 0.4s  infinite; }
.cta-overlay > div:nth-child(6)  { animation: float-d 4.9s ease-in-out 1.1s  infinite; }
.cta-overlay > div:nth-child(7)  { animation: float-a 5.5s ease-in-out 3.0s  infinite; }
.cta-overlay > div:nth-child(8)  { animation: float-c 7.0s ease-in-out 0.6s  infinite; }
.cta-overlay > div:nth-child(9)  { animation: float-b 6.3s ease-in-out 2.0s  infinite; }
.cta-overlay > div:nth-child(10) { animation: float-d 5.7s ease-in-out 1.7s  infinite; }
.cta-overlay > div:nth-child(11) { animation: float-a 6.8s ease-in-out 0.9s  infinite; }

/* ─── Overlay tablette ≤1024px ─── */
@media (max-width: 1024px) {
  .cta-overlay > div:nth-child(1)  { left: -50px !important; top: 5px !important; width: 155px !important; height: 148px !important; }
  .cta-overlay > div:nth-child(1) img { width: 120px !important; }

  .cta-overlay > div:nth-child(2)  { left: 130px !important; top: 35px !important; width: 96px !important; height: 92px !important; }
  .cta-overlay > div:nth-child(2) img { width: 76px !important; }

  .cta-overlay > div:nth-child(3)  { left: 40px !important; top: 118px !important; width: 160px !important; height: 158px !important; }
  .cta-overlay > div:nth-child(3) img { width: 118px !important; }

  .cta-overlay > div:nth-child(4)  { left: 60px !important; top: 205px !important; width: 84px !important; height: 80px !important; }
  .cta-overlay > div:nth-child(4) img { width: 78px !important; }

  .cta-overlay > div:nth-child(5)  { left: 150px !important; top: 320px !important; width: 138px !important; height: 150px !important; }
  .cta-overlay > div:nth-child(5) img { width: 96px !important; }

  .cta-overlay > div:nth-child(6)  { left: auto !important; right: 120px !important; top: 12px !important; width: 108px !important; height: 108px !important; }
  .cta-overlay > div:nth-child(6) img { width: 80px !important; }

  .cta-overlay > div:nth-child(7)  { display: none !important; }

  .cta-overlay > div:nth-child(8)  { left: auto !important; right: -16px !important; top: 0px !important; width: 110px !important; height: 120px !important; }
  .cta-overlay > div:nth-child(8) img { width: 78px !important; }

  .cta-overlay > div:nth-child(9)  { left: auto !important; right: 40px !important; bottom: 160px !important; width: 136px !important; height: 136px !important; }
  .cta-overlay > div:nth-child(9) img { width: 96px !important; }

  .cta-overlay > div:nth-child(10) { left: auto !important; right: -16px !important; bottom: -40px !important; width: 155px !important; height: 136px !important; }
  .cta-overlay > div:nth-child(10) img { width: 128px !important; }

  .cta-overlay > div:nth-child(11) { left: auto !important; right: -24px !important; top: 275px !important; width: 178px !important; height: 178px !important; }
  .cta-overlay > div:nth-child(11) img { width: 130px !important; }
}

/* ─── Overlay mobile ≤767px ─── */
@media (max-width: 767px) {
  .cta-banner,
  .cta-banner.e-con,
  .elementor-element.cta-banner,
  .shadow-yellow.cta-banner { min-height: 560px !important; }

  .cta-overlay > div:nth-child(1)  { left: -19px !important; top: -40px !important; width: 107px !important; height: 103px !important; }
  .cta-overlay > div:nth-child(1) img { width: 84px !important; transform: rotate(22.25deg) !important; filter: none !important; }

  .cta-overlay > div:nth-child(2)  { display: flex !important; left: -25px !important; top: 426px !important; width: 90px !important; height: 90px !important; }
  .cta-overlay > div:nth-child(2) img { width: 72px !important; transform: rotate(-16.92deg) !important; filter: none !important; }

  .cta-overlay > div:nth-child(3)  { left: 233px !important; top: -37px !important; width: 146px !important; height: 144px !important; }
  .cta-overlay > div:nth-child(3) img { width: 109px !important; transform: rotate(33.57deg) !important; filter: blur(1.5px) !important; }

  .cta-overlay > div:nth-child(4)  { left: 287px !important; top: 33px !important; width: 94px !important; height: 88px !important; }
  .cta-overlay > div:nth-child(4) img { width: 88px !important; transform: rotate(-4.94deg) !important; filter: blur(0.5px) !important; }

  .cta-overlay > div:nth-child(5)  { left: 262px !important; top: 447px !important; width: 102px !important; height: 107px !important; }
  .cta-overlay > div:nth-child(5) img { width: 68px !important; transform: rotate(30.63deg) !important; filter: none !important; }

  .cta-overlay > div:nth-child(6)  { left: -3px !important; right: auto !important; top: 125px !important; width: 61px !important; height: 57px !important; }
  .cta-overlay > div:nth-child(6) img { width: 56px !important; transform: rotate(-4.94deg) !important; filter: blur(0.5px) !important; }

  .cta-overlay > div:nth-child(7),
  .cta-overlay > div:nth-child(8),
  .cta-overlay > div:nth-child(9),
  .cta-overlay > div:nth-child(10),
  .cta-overlay > div:nth-child(11) { display: none !important; }
}

/* ─── Très petit mobile ≤390px ─── */
@media (max-width: 390px) {
  .cta-overlay > div:nth-child(1)  { left: -14px !important; top: -32px !important; }
  .cta-overlay > div:nth-child(1) img { width: 72px !important; }
  .cta-overlay > div:nth-child(2) img { width: 62px !important; }
  .cta-overlay > div:nth-child(2)  { top: 415px !important; }
  .cta-overlay > div:nth-child(3)  { left: 210px !important; }
  .cta-overlay > div:nth-child(3) img { width: 92px !important; }
  .cta-overlay > div:nth-child(4)  { left: 260px !important; }
  .cta-overlay > div:nth-child(4) img { width: 74px !important; }
  .cta-overlay > div:nth-child(5)  { left: 238px !important; top: 435px !important; }
  .cta-overlay > div:nth-child(5) img { width: 58px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-overlay > div { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════
   09. NAVIGATION MOBILE
   ════════════════════════════════════════════════════════════ */

/* ─── Menu mobile ─── */
#goxl-menu-mobile {
  position: fixed !important;
  top: var(--goxl-header-h, 80px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  background: var(--e-global-color-77a5e9d, #F6F1DE) !important;
  overflow-y: auto !important;
  overflow-x: clip !important;
  -webkit-overflow-scrolling: touch !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-10px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}
#goxl-menu-mobile.goxl-menu--open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
#goxl-menu-mobile > .e-con-inner { position: relative !important; z-index: 1 !important; }

#goxl-menu-deco,
#goxl-menu-deco.e-con,
#goxl-menu-deco .elementor-widget-container {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 0 !important;
  padding: 0 !important; margin: 0 !important;
  touch-action: none !important;
}

/* ─── Hamburger → X ─── */
#goxl-burger svg line {
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}
body.goxl-open #goxl-burger svg line:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
body.goxl-open #goxl-burger svg line:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.goxl-open #goxl-burger svg line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Hamburger #goxl-burger (widget HTML) ─── */
#goxl-burger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 46px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--e-global-color-68968b9) 0%, var(--e-global-color-primary) 100%);
  box-shadow:
    0 34px 21px rgba(57, 47, 90, 0.11),
    0 15px 15px rgba(255, 206, 44, 0.19),
    0  4px  8px rgba(57, 47, 90, 0.19),
    0  2px  4px rgba(0, 0, 0, 0.15),
    inset -4px -4px  5px rgba(191, 108, 0, 0.20),
    inset  0   -6px 14px #FFCE2C,
    inset  0   -1px  0   rgba(255, 255, 255, 0.80);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
#goxl-burger::before {
  content: '';
  position: absolute;
  left: -1px; top: 0;
  width: 47px; height: 46px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FEE093 100%);
  opacity: 0.6;
  filter: blur(9.87px);
  pointer-events: none;
  z-index: 0;
}
#goxl-burger svg {
  position: relative;
  z-index: 1;
  width: 20px; height: 16px;
  flex-shrink: 0;
  display: block;
}
#goxl-burger:hover {
  transform: translateY(-1px);
  box-shadow:
    0 34px 21px rgba(57, 47, 90, 0.15),
    0 15px 15px rgba(255, 206, 44, 0.30),
    0  4px  8px rgba(57, 47, 90, 0.22),
    0  2px  4px rgba(0, 0, 0, 0.18),
    inset -4px -4px  5px rgba(191, 108, 0, 0.20),
    inset  0   -6px 14px #FFCE2C,
    inset  0   -1px  0   rgba(255, 255, 255, 0.80);
}
#goxl-burger:focus-visible {
  outline: 2px solid var(--e-global-color-68968b9);
  outline-offset: 3px;
}

/* ─── Hamburger via ID Elementor .elementor-element-32017d9 ─── */
.elementor-element-32017d9 .elementor-icon-wrapper { position: relative; }

.elementor-element-32017d9 .elementor-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 47px !important;
  height: 46px !important;
  border-radius: 6px !important;
  background: linear-gradient(90deg, var(--e-global-color-68968b9) 0%, var(--e-global-color-primary) 100%) !important;
  box-shadow:
    0 34px 21px rgba(57, 47, 90, 0.11),
    0 15px 15px rgba(255, 206, 44, 0.19),
    0  4px  8px rgba(57, 47, 90, 0.19),
    0  2px  4px rgba(0, 0, 0, 0.15),
    inset -4px -4px  5px rgba(191, 108, 0, 0.20),
    inset  0   -6px 14px #FFCE2C,
    inset  0   -1px  0   rgba(255, 255, 255, 0.80) !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  cursor: pointer !important;
}
.elementor-element-32017d9 .elementor-icon::before {
  content: '' !important;
  position: absolute !important;
  width: 47px !important; height: 46px !important;
  left: -1px !important; top: 0 !important;
  opacity: 0.6 !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FEE093 100%) !important;
  filter: blur(9.87px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.elementor-element-32017d9 .elementor-icon svg {
  position: relative !important;
  z-index: 1 !important;
  width: 20px !important; height: 16px !important;
}
.elementor-element-32017d9 .elementor-icon svg line {
  stroke: var(--e-global-color-secondary) !important;
}
.elementor-element-32017d9 .elementor-icon:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 34px 21px rgba(57, 47, 90, 0.15),
    0 15px 15px rgba(255, 206, 44, 0.30),
    0  4px  8px rgba(57, 47, 90, 0.22),
    0  2px  4px rgba(0, 0, 0, 0.18),
    inset -4px -4px  5px rgba(191, 108, 0, 0.20),
    inset  0   -6px 14px #FFCE2C,
    inset  0   -1px  0   rgba(255, 255, 255, 0.80) !important;
}

@media (prefers-reduced-motion: reduce) {
  #goxl-menu-mobile { transition: none !important; }
  #goxl-burger svg line { transition: none; }
}