:root {
      --c-step-1: #5a9bd4;
      --c-step-2: #4ac5ea;
      --c-step-3: #8cc540;
      --c-step-4: #f69646;
      --c-step-5: #7e6bc4;
      --c-step-6: #c1504d;
   }
.chart-container {
   max-width: 1440px;
   width: 100%;
}

   .gva-journey-wrapper.modern-cards-style .main-title {
      font-weight: 800;
      text-align: center;
      margin-bottom: 50px;
      font-size: 2.5rem;
   }

   .custom-card {
      border: none;
      border-radius: 20px;
      background: white;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
      height: 100%;
   }

   .custom-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0,0,0,0.1);
   }

   .card-header-custom {
      padding: 15px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-align: center;
      color: white;
      font-size: 0.84rem;
      min-height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .head-ph1 { background: linear-gradient(135deg, #6B8BFB, #4A63B9); }
   .head-ph2 { background: linear-gradient(135deg, #9DC44C, #98BF45); }
   .head-ph3 { background: linear-gradient(135deg, #E39A39, #E38C18); }

.step-box {
   width: 45px;
   height: 45px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 1.2rem;
   font-weight: 800;
   margin: 0 auto 15px auto;
   position: relative;
   box-shadow: 0 5px 15px rgba(0,0,0,0.15);
   
   /* ↓↓↓ AJOUTER CES 3 LIGNES ↓↓↓ */
   opacity: 0;
   transform: scale(0.5);
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

   .bg-c1 { background-color: var(--c-step-1); }
   .bg-c2 { background-color: var(--c-step-2); }
   .bg-c3 { background-color: var(--c-step-3); }
   .bg-c4 { background-color: var(--c-step-4); }
   .bg-c5 { background-color: var(--c-step-5); }
   .bg-c6 { background-color: var(--c-step-6); }

   .txt-c1 { color: var(--c-step-1); }
   .txt-c2 { color: var(--c-step-2); }
   .txt-c3 { color: var(--c-step-3); }
   .txt-c4 { color: var(--c-step-4); }
   .txt-c5 { color: var(--c-step-5); }
   .txt-c6 { color: var(--c-step-6); }

   .step-title {
      font-weight: 700;
      font-size: 1rem;
      color: #444;
      line-height: 1.3;
   }

   .step-icon-small {
      font-size: 1.4rem;
      margin-bottom: 10px;
      display: block;
   }

.info-tag {
   font-size: 0.75rem;
   font-weight: 600;
   padding: 5px 12px;
   border-radius: 50px;
   background-color: #fff;
   border: 1px solid #eee;
   color: #666;
   box-shadow: 0 2px 5px rgba(0,0,0,0.03);
   display: inline-block;
   margin: 3px;
   
   /* ↓↓↓ AJOUTER CES 3 LIGNES ↓↓↓ */
   opacity: 0;
   transform: translateY(10px);
   transition: all 0.3s ease;
}

   .connector-line {
      position: absolute;
      top: 38px;
      left: 10%;
      right: 10%;
      height: 4px;
      background-color: #e1e1e1;
      z-index: 0;
      border-radius: 4px;
   }

   @media (max-width: 992px) {
      .connector-line { display: none; }
   }
/* ========================================
   ANIMATIONS
   ======================================== */

/* États initiaux (cachés) */
.anim-fade-up {
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-box {
   /* Les styles existants sont conservés */
   /* On AJOUTE juste les propriétés d'animation : */
   opacity: 0;
   transform: scale(0.5);
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.info-tag {
   /* Les styles existants sont conservés */
   /* On AJOUTE juste les propriétés d'animation : */
   opacity: 0;
   transform: translateY(10px);
   transition: all 0.3s ease;
}

/* États visibles */
.anim-fade-up.visible {
   opacity: 1;
   transform: translateY(0);
}

.step-box.visible {
   opacity: 1;
   transform: scale(1);
}

.info-tag.visible {
   opacity: 1;
   transform: translateY(0);
}

/* Animation spéciale pour les cartes */
.custom-card.anim-fade-up {
   opacity: 0;
   transform: translateY(40px) scale(0.95);
   transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-card.anim-fade-up.visible {
   opacity: 1;
   transform: translateY(0) scale(1);
}

/* Accessibilité : désactiver animations si demandé */
@media (prefers-reduced-motion: reduce) {
   .anim-fade-up,
   .step-box,
   .info-tag,
   .custom-card {
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
   }
}
/***************************************
   FIN ANIMATIONS
   ****************************/

   /* css/components/image-text-section.css */

:root {
   --green-primary: #2ecc71;
   --green-dark: #219150;
   --blue-dark: #1e293b;
   --bg-body: #f1f5f9;
}

/* ========================================
   STYLE 1: FLOATING OVERLAP
   ======================================== */
.overlap-wrapper {
   position: relative;
   padding: 40px 0;
}

.overlap-image-col {
   position: relative;
   min-height: 450px;
   background-position: center;
   background-size: cover;
   border-radius: 20px;
   box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.overlap-image-col::before {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(33, 145, 80, 0.2);
   border-radius: 20px;
}

.overlap-card {
   background: white;
   padding: 40px;
   border-radius: 20px;
   box-shadow: -20px 20px 60px rgba(0,0,0,0.05);
   position: relative;
   z-index: 2;
   margin-left: -80px;
   margin-top: 40px;
   margin-bottom: 40px;
}

.btn-overlap {
   background: var(--blue-dark);
   color: white;
   padding: 15px 35px;
   border-radius: 0 20px 0 20px;
   font-weight: 700;
   text-decoration: none;
   transition: 0.3s;
   display: inline-block;
}

.btn-overlap:hover {
   background: var(--green-primary);
   transform: translateX(5px);
   color: white;
}

/* ========================================
   STYLE 2: ORGANIC SHAPE
   ======================================== */
.organic-wrapper {
   background: white;
   border-radius: 30px;
   padding: 20px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.organic-img {
   height: 100%;
   min-height: 350px;
   background-position: center;
   background-size: cover;
   border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
   transition: 0.5s ease-in-out;
   box-shadow: 10px 10px 30px rgba(46, 204, 113, 0.2);
}

.organic-wrapper:hover .organic-img {
   border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
}

.btn-organic {
   border: 2px solid var(--green-primary);
   color: var(--green-primary);
   padding: 10px 30px;
   border-radius: 50px;
   font-weight: 700;
   text-decoration: none;
   transition: 0.3s;
   display: inline-block;
}

.btn-organic:hover {
   background: var(--green-primary);
   color: white;
   box-shadow: 0 5px 20px rgba(46, 204, 113, 0.3);
}

/* ========================================
   STYLE 3: DARK SIDE
   ======================================== */
.dark-split-wrapper {
   background: var(--blue-dark);
   border-radius: 24px;
   overflow: hidden;
   color: white;
   box-shadow: 0 20px 50px rgba(30, 41, 59, 0.3);
}

.dark-content {
   padding: 50px;
}

.dark-img {
   background-position: center;
   background-size: cover;
   height: 100%;
   min-height: 100%;
}

.btn-dark-mode {
   background: var(--green-primary);
   color: white;
   padding: 15px 35px;
   border-radius: 12px;
   font-weight: 700;
   text-decoration: none;
   transition: 0.3s;
   display: inline-block;
}

.btn-dark-mode:hover {
   background: white;
   color: var(--blue-dark);
}
.overlap-card h3 {
   line-height: 25px;
}
.overlap-card p {
    line-height: 1.2;
    text-align: justify;
}
.max-widh {
   max-width: 1440px;
}
/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 992px) {
   .overlap-card {
      margin-left: 0;
      margin-top: -50px;
   }
   
   .dark-img {
      min-height: 300px;
   }
   
   .organic-img {
      min-height: 300px;
   }
}