/* ========================================
   STICKY SCROLL SECTION - APPROCHE
   Structure et positionnement uniquement
   Styles visuels gérés dans Bricks
   ======================================== */

/* Section principale - hauteur calculée par JS */
.sticky-scroll-section--approche {
    position: relative;
    background: transparent;
  }
  
  /* Container sticky FULL SCREEN */
  .sticky-background-full {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    box-sizing: border-box;
  }
  
  /* Image de fond - positionnement et comportement */
  .sticky-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
  }
  
  /* Container du texte - positionnement gauche */
  .sticky-content-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligné à gauche */
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  
  /* Titre - comportement flexible */
  .sticky-title {
    max-width: 500px; /* Limite la largeur du titre */
  }
  
  /* Container des cartes - positionnement droite */
  .scroll-cards-overlay {
    position: relative;
    z-index: 2;
    width: 50%; /* Occupe la moitié droite */
    margin-left: auto; /* Pousse à droite */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  
  /* Carte - structure et animation uniquement */
  .scroll-card-item {
    height: auto; /* S'adapte au contenu */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Contenu aligné en haut */
    opacity: 1; /* Invisible au départ */
    transform: translateY(50px); /* Commence 50px plus bas */
    transition: opacity 0.8s ease, transform 0.8s ease;
    box-sizing: border-box;
  }
  
  /* État visible (déclenché par JS) */
  .scroll-card-item.is-visible {
    opacity: 1;
    transform: translateY(0); /* Revient à sa position */
  }
  
  /* Contenu de la carte - comportement */
  .scroll-card-item h3,
  .scroll-card-item p,
  .scroll-card-item ul {
    margin: 0; /* Reset des marges par défaut */
  }
  
  .scroll-card-item h3 {
    margin-bottom: 1em; /* Espace après le titre */
  }
  
  .scroll-card-item p {
    margin-bottom: 1.5em; /* Espace entre les paragraphes */
  }
  
  .scroll-card-item ul {
    padding-left: 1.5em; /* Indentation de la liste */
    margin-bottom: 0;
  }
  
  .scroll-card-item li {
    margin-bottom: 0.5em; /* Espace entre les items */
  }
  
  .scroll-card-item li:last-child {
    margin-bottom: 0; /* Pas d'espace après le dernier */
  }

  .card-label {
    font-family: 'bc-ludva', sans-serif !important;
  font-weight: 700;
  font-size: 68px;
  line-height: 46px;
  }

.card-label_orange_arrow::after {
  content: '';
  position: absolute;
  bottom: -20px; 
  right: 80px; 
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid var(--color-orange, #FBA23E); /* Même couleur que le label */
}

.card-label_green_arrow::after {
  content: '';
  position: absolute;
  bottom: -20px; 
  right: 80px; 
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid var(--color-green-light,  #00DF82); /* Même couleur que le label */
}

  
  /* ========================================
     RESPONSIVE - Structure uniquement
     ======================================== */
  
  @media (max-width: 991px) {
    /* Sur tablette - réorganisation */
    .sticky-content-text {
      padding: 40px;
    }
    
    .sticky-title {
      max-width: 100%;
    }
    
    .scroll-cards-overlay {
      width: 60%; /* Un peu plus large */
    }
  }
  
  @media (max-width: 768px) {
    /* Sur mobile - stack vertical */
    .sticky-scroll-section--approche {
      min-height: auto !important; /* Désactive le sticky sur mobile */
    }
    
    .sticky-background-full {
      position: relative; /* Plus de sticky */
      height: 50vh; /* Image plus petite */
    }
    
    .sticky-content-text {
      padding: 30px 20px;
      justify-content: center; /* Centre le titre */
      text-align: center;
    }
    
    .scroll-cards-overlay {
      width: 100% !important; /* Pleine largeur */
      margin-left: 0 !important; /* Plus de décalage */
      padding: 20px;
    }
    
    .scroll-card-item {
      opacity: 1 !important; /* Toujours visible sur mobile */
      transform: none !important; /* Pas d'animation */
    }
  }
  
  @media (max-width: 479px) {
    /* Petits mobiles - ajustements fins */
    .sticky-background-full {
      height: 40vh;
    }
    
    .sticky-content-text {
      padding: 20px 15px;
    }
    
    .scroll-cards-overlay {
      padding: 15px;
    }
  }