/* ===== HSCROLL ACTIONS — Bloc-type CSS (chargé dynamiquement) ===== */

.hscroll-runway {
  height: 250vh;
  position: relative;
}

.hscroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--accent);
}

.hscroll-track {
  display: flex;
  width: 200%;
  height: 100%;
  will-change: transform;
}

.hscroll-col {
  width: 25%;
  height: 100%;
  flex-shrink: 0;
}

.hscroll-col--text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hscroll-col__inner {
  padding: 4rem 5rem;
  max-width: 600px;
}

.hscroll-col__inner .split-section__text {
  max-width: 500px;
}

.hscroll-col__inner .btn {
  display: flex;
  width: fit-content;
}

.hscroll-img {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.hscroll-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Chevron droit sur Image1 (bord droit en pointe -> droite) */
.hscroll-img--chevron-right {
  clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
}

/* Chevron gauche sur Image2 (bord gauche en pointe -> gauche) */
.hscroll-img--chevron-left {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 100% 50%);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hscroll-runway { height: auto !important; }
  .hscroll-sticky {
    position: relative;
    height: auto;
  }
  .hscroll-track {
    display: block;
    width: 100% !important;
    transform: none !important;
  }
  .hscroll-col {
    width: 100%;
    height: auto;
  }
  .hscroll-col--img { height: 50vh; }
  .hscroll-col--text { min-height: 60vh; }
  .hscroll-img { clip-path: none !important; }
  .hscroll-col--text:nth-child(2) { background: var(--accent); }
  .hscroll-col--text:nth-child(3) { background: var(--abenex-orange); }
}

@media (max-width: 768px) {
  .hscroll-col__inner { padding: 3rem 2rem; }
}

/* Hauteur écran limitée (1280×720, laptops 1366×768) :
   le contenu débordait du sticky 100vh (label coupé en haut, boutons en bas — flex centré).
   On compresse padding + typo pour tout caser.
   `min-width: 1025px` car ≤1024px bascule déjà en mode vertical (overflow visible). */
@media (max-height: 800px) and (min-width: 1025px) {
  .hscroll-col__inner { padding: 1.5rem 4rem; }
  .hscroll-col__inner .split-section__title.display-lg {
    font-size: clamp(1.125rem, 2vw, 1.625rem);
    margin-bottom: 0.75rem;
  }
  .hscroll-col__inner .split-section__label {
    margin-bottom: 0.75rem;
    gap: 0.75rem;
  }
  .hscroll-col__inner .split-section__label-text { font-size: 0.65rem; }
  .hscroll-col__inner .split-section__text-wrapper,
  .hscroll-col__inner .split-section__text-wrapper p {
    font-size: 0.9rem;
    line-height: 1.55;
  }
  .hscroll-col__inner .split-section__text-wrapper { margin-bottom: 1rem; }
  .hscroll-col__inner .btn { transform: scale(0.9); transform-origin: left center; }
  .hscroll-col__inner .btn[style*="margin-top"] { margin-top: 0.5rem !important; }
}