/**
 * ESSAI — Champs d'action : encart vidéo + texte compact côte à côte (alternance), clic = expand.
 */

#services.site-services--stack-alt .site-services-cards-shell.container {
  width: 100%;
  max-width: none !important;
  margin-top: clamp(8px, 2vh, 20px);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}

#services.site-services--stack-alt
  #site-competences-grid.services-grid--stack-alternate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 7vh, 80px);
  width: 100%;
}

.services-stack-row {
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* Bandeaux blancs : désactivés sur ce layout */
#services.site-services--stack-alt .services-card__line {
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ——— Fiche fermée : bloc vidéo | texte centré (axe médian = centre viewport) ——— */
#services.site-services--stack-alt
  .services-card.services-card--stack-split:not(.services-card--is-open) {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(18px, 3vw, 28px);
  width: max-content;
  max-width: min(980px, calc(100vw - 32px));
  min-height: 0;
  margin-inline: auto;
  padding: 0;
  overflow: visible;
  cursor: default;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

#services.site-services--stack-alt
  .services-card.services-card--stack-split:not(.services-card--is-open)::before {
  content: none !important;
}

@media (min-width: 768px) {
  #services.site-services--stack-alt
    .services-stack-row--text-right
    > .services-card.services-card--stack-split:not(.services-card--is-open) {
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 5vw, 56px);
  }

  #services.site-services--stack-alt
    .services-stack-row--text-left
    > .services-card.services-card--stack-split:not(.services-card--is-open) {
    flex-direction: row-reverse !important;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 5vw, 56px);
  }
}

/* Encart vidéo (plus grand) */
#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-stack-row__visual {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, 360px);
  max-width: 360px;
  min-height: 0;
  aspect-ratio: 4 / 3.15;
  overflow: hidden;
  border-radius: var(--svc-card-radius, 22px);
  background-color: #fff;
  border: 1px solid rgba(24, 25, 29, 0.07);
  box-shadow:
    0 2px 6px rgba(24, 25, 29, 0.04),
    0 10px 22px -6px rgba(24, 25, 29, 0.07);
  transition:
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  cursor: pointer;
}

#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-stack-row__copy {
  cursor: default;
}

#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-stack-row__visual
  .services-card__bg-video-wrap {
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1);
  transform-origin: 50% 50%;
}

#services.site-services--stack-alt
  .services-card--stack-split
  .services-stack-row__visual
  .services-card__bg-video-wrap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

#services.site-services--stack-alt
  .services-card--stack-split
  .services-stack-row__visual::after {
  content: attr(data-svc-numb);
  position: absolute;
  top: auto;
  left: auto;
  right: clamp(6px, 1.2vw, 14px);
  bottom: clamp(-6px, 0.5vh, 8px);
  z-index: 3;
  font-size: clamp(76px, 9vw, 118px);
  font-weight: 800;
  line-height: 0.75;
  letter-spacing: -0.06em;
  color: rgba(24, 25, 29, 0.07);
  pointer-events: none;
  transition:
    color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Texte compact : fond site (largeur confortable — pas le 14ch global ni flex: 1 1 0 expand) */
#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-card__compact.services-stack-row__copy {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: min(620px, calc(100vw - 420px));
  height: auto !important;
  margin: 0;
  padding: 0;
  background: transparent !important;
  align-self: center;
}

#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-stack-row__copy
  .numb {
  display: none;
}

#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-stack-row__copy h5,
#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-stack-row__copy h5 .services-card__line {
  max-width: none !important;
  width: auto;
}

#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-card__body,
#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-card__compact-head {
  max-width: none;
  width: 100%;
}

#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-card__body {
  flex: none !important;
}

@media (min-width: 768px) {
  #services.site-services--stack-alt
    .services-card--stack-split:not(.services-card--is-open)
    .services-stack-row__copy h5,
  #services.site-services--stack-alt
    .services-card--stack-split:not(.services-card--is-open)
    .services-stack-row__copy h5 .services-card__line,
  #services.site-services--stack-alt
    .services-card--stack-split:not(.services-card--is-open)
    .services-card__body .services-card__line {
    white-space: nowrap;
  }

  #services.site-services--stack-alt
    .services-card--stack-split:not(.services-card--is-open)
    .services-card__body {
    white-space: nowrap;
  }
}

/* Survol : animation sur la vignette vidéo */
#services.site-services--stack-alt
  .services-card.services-card--stack-split.services-card--expandable:not(
    .services-card--is-open
  ):hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}

@media (hover: hover) {
  #services.site-services--stack-alt
    .services-card--stack-split:not(.services-card--is-open)
    .services-stack-row__visual:hover {
    transform: translate3d(0, -14px, 0) scale(1.018);
    border-color: rgba(24, 25, 29, 0.11);
    box-shadow:
      0 8px 16px rgba(24, 25, 29, 0.06),
      0 22px 48px -14px rgba(24, 25, 29, 0.16);
  }

  #services.site-services--stack-alt
    .services-card--stack-split:not(.services-card--is-open)
    .services-stack-row__visual:hover
    .services-card__bg-video-wrap {
    transform: scale(1.04);
  }

  #services.site-services--stack-alt
    .services-card--stack-split:not(.services-card--is-open)
    .services-stack-row__visual:hover::after {
    color: rgba(24, 25, 29, 0.11);
    transform: translate3d(0, -4px, 0);
  }
}

#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-card__expand,
#services.site-services--stack-alt
  .services-card--stack-split:not(.services-card--is-open)
  .services-card__expand-close {
  display: none !important;
}

/* ——— Ouvert : panneau plus compact, centré ——— */
@media (min-width: 992px) {
  #site-competences-grid.services-grid--stack-alternate.services-grid--expandable-host {
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 7vh, 80px);
  }

  /* Ne pas hériter du expand classique (hauteur = une seule carte → masque le reste) */
  #site-competences-grid.services-grid--stack-alternate.services-grid--expandable-host.is-svc-expanded:has(
      .services-card--is-open
    ) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: clamp(40px, 7vh, 80px);
    overflow: visible;
  }

  /* Ouvert : les autres fiches restent visibles (pas de display:none) */
  #site-competences-grid.services-grid--stack-alternate.is-svc-expanded
    > .services-stack-row:not(:has(.services-card--is-open)) {
    opacity: 1;
    pointer-events: auto;
  }

  #site-competences-grid.services-grid--stack-alternate.is-svc-expanded
    > .services-stack-row:has(.services-card--is-open) {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    justify-content: center;
    z-index: 2;
  }

  #services.site-services--stack-alt
    .services-card.services-card--stack-split.services-card--expandable.services-card--is-open {
    display: grid !important;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    flex-direction: unset;
    width: min(880px, 94vw);
    max-width: 880px;
    margin: 0 auto;
    min-height: 0 !important;
    height: var(--svc-grid-h, 360px);
    max-height: min(360px, 54vh);
    padding: 0;
    overflow: hidden;
    background-color: #fff !important;
    border: 1px solid rgba(24, 25, 29, 0.1) !important;
    border-radius: var(--svc-card-radius, 22px);
    box-shadow:
      0 14px 32px rgba(24, 25, 29, 0.1),
      0 4px 12px rgba(24, 25, 29, 0.05) !important;
    transform-origin: 50% 40%;
    animation: svc-stack-module-assemble 0.72s cubic-bezier(0.16, 1, 0.28, 1) both;
  }

  @keyframes svc-stack-module-assemble {
    0% {
      opacity: 0.88;
      transform: scale(0.94) translateY(14px);
      box-shadow:
        0 4px 12px rgba(24, 25, 29, 0.04),
        0 0 0 rgba(24, 25, 29, 0);
    }
    45% {
      opacity: 1;
      transform: scale(1.015) translateY(-3px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  #services.site-services--stack-alt
    .services-card--stack-split.services-card--is-open
    .services-stack-row__visual {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    animation: svc-stack-visual-grow 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes svc-stack-visual-grow {
    from {
      opacity: 0.92;
      transform: scale(0.96);
      filter: saturate(0.85);
    }
    to {
      opacity: 1;
      transform: scale(1);
      filter: saturate(1);
    }
  }

  #services.site-services--stack-alt
    .services-card--stack-split.services-card--is-open
    .services-stack-row__visual::after {
    opacity: 0;
    visibility: hidden;
  }

  #services.site-services--stack-alt
    .services-card--stack-split.services-card--is-open
    .services-card__compact.services-stack-row__copy {
    display: none !important;
  }

  #services.site-services--stack-alt
    .services-card--stack-split.services-card--is-open
    .services-card__expand-numb {
    display: none !important;
  }

  #services.site-services--stack-alt
    .services-card--stack-split.services-card--is-open
    .services-card__expand {
    max-height: 100%;
    min-height: 0;
    animation: svc-stack-expand-panel-in 0.75s cubic-bezier(0.16, 1, 0.28, 1) 0.1s both;
  }

  @keyframes svc-stack-expand-panel-in {
    from {
      opacity: 0;
      transform: translateX(36px);
      clip-path: inset(0 0 0 100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
      clip-path: inset(0 0 0 0);
    }
  }

  #services.site-services--stack-alt
    .services-card--stack-split.services-card--is-open
    .services-card__expand-body {
    max-height: calc(var(--svc-grid-h, 360px) - 72px);
    overflow-y: auto;
  }
}

.services-stack-row__copy,
.services-stack-row__visual {
  will-change: transform, opacity;
}

#services.site-services--stack-alt
  [data-svc-cards-reveal]:not(.is-svc-cards-scroll)
  .services-card--stack-split {
  opacity: 1;
  pointer-events: auto;
}

#services.site-services--stack-alt
  [data-svc-cards-reveal]:not(.is-svc-cards-scroll)
  .services-stack-row__visual,
#services.site-services--stack-alt
  [data-svc-cards-reveal]:not(.is-svc-cards-scroll)
  .services-stack-row__copy {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #services.site-services--stack-alt .services-stack-row__visual,
  #services.site-services--stack-alt .services-stack-row__copy {
    opacity: 1 !important;
    transform: none !important;
  }

  #services.site-services--stack-alt
    .services-card--stack-split.services-card--is-open,
  #services.site-services--stack-alt
    .services-card--stack-split.services-card--is-open
    .services-stack-row__visual,
  #services.site-services--stack-alt
    .services-card--stack-split.services-card--is-open
    .services-card__expand {
    animation: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}