/* =========================
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) */
}

/* =========================
   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;
  }
}