/* =========================
STAKING CARDS
========================= */
:is(#service, [data-lfc-stacking]) {
  --sticky-offset: 10rem;   /* position verticale du bloc en sticky (+ = plus bas) */
  --sticky-start: 0;        /* valeur fixe en fallback (ignoré si --sticky-start-ratio est défini) */
  --sticky-start-ratio: 0.7; /* ratio de la hauteur du bloc animation pour déclencher le sticky (1.0 = 100% de la hauteur, 1.2 = 120% pour marge) */
  --stack-overlap: 4rem;   /* bande du rose visible AU-DESSUS du jaune en position finale (chevauchement entre les blocs) - calculé automatiquement */
  --stack-guard: 4rem;  /* marge de sécurité pour ne JAMAIS passer dessous (retarde le passage en parked) */
}

/* =========================
   API Elementor simple
   Parent: .lfc-stack
   Enfants: .lfc-stack-card
   Modes: .lfc-stack--flow (défaut), .lfc-stack--peek
   ========================= */
.lfc-stack {
  --lfc-stack-offset: 0px;
  --lfc-stack-peek: 0px;
  --lfc-stack-gap: 0px;
  --lfc-stack-min-width: 900px;
  position: relative;
  isolation: isolate;
}

.lfc-stack--offset-sm {
  --lfc-stack-offset: 4rem;
}

.lfc-stack--offset-md {
  --lfc-stack-offset: 8rem;
}

.lfc-stack--gap-sm {
  --lfc-stack-gap: 2rem;
}

.lfc-stack--peek {
  --lfc-stack-peek: 2rem;
}

.lfc-stack-card {
  position: relative;
  box-sizing: border-box;
  transform-origin: top center;
  transition:
    box-shadow .42s ease,
    filter .42s ease;
  will-change: box-shadow, filter;
}

.lfc-stack--ready .lfc-stack-card {
  position: sticky;
  top: var(--lfc-stack-card-top, var(--lfc-stack-offset));
}

.lfc-stack--ready.lfc-stack--peek .lfc-stack-card {
  top: var(--lfc-stack-card-top, var(--lfc-stack-offset));
}

.lfc-stack--ready .lfc-stack-card + .lfc-stack-card {
  margin-top: var(--lfc-stack-gap);
}

.lfc-stack--ready .lfc-stack-card.is-stacking-active {
  filter: saturate(1.02) contrast(1.01);
}

.lfc-stack--ready .lfc-stack-card.is-stacking-active:not(:last-child) {
  box-shadow: 0 14px 30px rgba(0, 0, 0, .07);
}

.lfc-stack--ready .lfc-stack-card.is-stacking-active [data-lfc-stack-parallax-target] {
  transition: transform .12s linear;
  will-change: transform;
}

.lfc-stack--ready .lfc-stack-card.is-stacking-active[data-lfc-stack-background-parallax] > .elementor-motion-effects-container .elementor-motion-effects-layer {
  transform: translate3d(0, var(--lfc-stack-parallax-y, 0px), 0);
  transition: transform .12s linear;
  will-change: transform;
}

@media (max-width: 899px) {
  .lfc-stack--ready .lfc-stack-card {
    position: relative;
    top: auto;
  }

  .lfc-stack--ready .lfc-stack-card [data-lfc-stack-parallax-target],
  .lfc-stack--ready .lfc-stack-card[data-lfc-stack-background-parallax] > .elementor-motion-effects-container .elementor-motion-effects-layer {
    transform: none !important;
  }
}

/* =========================
   Conteneur principal
   ========================= */
:is(#service, [data-lfc-stacking]) {
  position: relative;
  isolation: isolate;
  background: #f8c7c0;                 /* rose par défaut */
  transition: background-color .35s ease;
}

:is(#service, [data-lfc-stacking]).is-yellow {
  background: #ffe7a3;                 /* jaune quand l'animation est active */
}

/* Fenêtre de stacking */
:is(#service, [data-lfc-stacking]) .stack-clip {
  position: relative;
  transform: none;
}

/* Anti-clip Elementor : on remet tout le monde en visible à l'intérieur */
:is(#service, [data-lfc-stacking]) .elementor-section,
:is(#service, [data-lfc-stacking]) .elementor-container,
:is(#service, [data-lfc-stacking]) .elementor-column,
:is(#service, [data-lfc-stacking]) .elementor-widget-wrap,
:is(#service, [data-lfc-stacking]) .elementor-widget,
:is(#service, [data-lfc-stacking]) .elementor-widget-container {
  overflow: visible !important;
}

/* =========================
   Cartes (Animation / Traiteur)
   ========================= */
.stack-card {
  position: relative;
  box-sizing: border-box;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  z-index: 1;
}

/* Ordre d'empilement : traiteur au-dessus du bloc rose */
#traiteur {
  z-index: 9992 !important;
}

#animation {
  z-index: 9991 !important;
}

/* États pilotés par le JS */
.stack-card.is-fixed {
  position: fixed;
  transform: translateZ(0);
}

.stack-card.is-parked {
  position: absolute;                  /* position relative à .stack-clip */
  transform: translateZ(0);
}

/* Effet visuel pendant la phase "jaune" */
:is(#service, [data-lfc-stacking]).is-yellow #animation.is-fixed {
  transform: scale(.98) translateY(2rem);
  transform-origin: top center;
  opacity: 1;
}

:is(#service, [data-lfc-stacking]).is-yellow #animation.is-parked {
  transform: scale(.98) translateY(0);
  transform-origin: top center;
  opacity: 1;
}

:is(#service, [data-lfc-stacking]).is-yellow #traiteur {
  transform: translateY(0);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  z-index: 9992;
}

/* Placeholder pour éviter les sauts de layout quand #animation sort du flux */
:where(#animation-placeholder, .lfc-stack-placeholder) {
  display: none;
}

:where(#animation-placeholder, .lfc-stack-placeholder).is-active {
  display: block;
}

/* =========================
   Responsive : on coupe tout < 1200px
   ========================= */
@media (max-width: 1199px) {

  :is(#service, [data-lfc-stacking]) {
    background: #f8c7c0 !important;
  }

  :is(#service, [data-lfc-stacking]).is-yellow {
    background: #f8c7c0 !important;
  }

  #animation,
  #traiteur {
    transform: none !important;
  }

  #animation.is-fixed,
  #animation.is-parked {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
  }

  :where(#animation-placeholder, .lfc-stack-placeholder) {
    display: none !important;
    height: 0 !important;
  }
}