/* ============================================
   FIX DÉFINITIF POUR LES CARTES PROCESS
   ============================================ */

/* STRUCTURE HTML :
   <div class="process-card-container">
     <div class="process-number-huge">1</div>  <!-- Déplacé par JS en dehors de la carte -->
     <div class="process_card">
       <div class="process_card-heading">
         <h3 class="heading_process">Intégration</h3>
       </div>
       <p>Texte...</p>
     </div>
   </div>
*/

.section_home-process .process-card-grid-item {
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 4rem !important;
  /* Doublé pour aérer la section */
}

/* On garde le padding sur le conteneur parent pour décoller les cartes de la timeline */
.section_home-process .process-card-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 3rem !important;
  /* Doublé pour l'espacement visuel */
  padding-left: 3rem !important;
}

/* Conteneur parent (process_content-right) - doit aussi être position relative */
.section_home-process .process_content-right {
  position: relative !important;
}

.section_home-process .process_card {
  background-color: var(--brand-primary) !important;
  color: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 2rem !important;
  /* Padding uniforme de 2rem partout */
  position: relative !important;
  overflow: visible !important;
  /* Changé de hidden à visible pour laisser sortir le numéro */
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  /* Permet au contenu de se rétrécir */
  display: flex !important;
  flex-direction: column !important;
  /* Colonne pour que le titre soit en haut */
  z-index: 1 !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
  border: 1px solid transparent !important;
  will-change: transform, box-shadow;
}

/* Supprimer l'effet de remplissage "bleu de nuit" imposé par les styles parents */
.section_home-process .process_card::before {
  display: none !important;
  content: none !important;
}

.section_home-process .process-card-grid-item:hover .process_card {
  transform: translateY(-12px) !important;
  box-shadow: 0 25px 50px rgba(10, 31, 77, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Le numéro doit monter AUSSI avec la carte */
.section_home-process .process-card-grid-item:hover .process-number-huge {
  /* On garde le translate existant et on ajoute l'élévation */
  /* Rappel desktop : transform: translate(-50%, -50%) */
  /* Rappel mobile : transform: translate(0, -50%) */
  margin-top: -12px !important;
}

/* ============================================
   TITRES - FORCÉS À RESTER DANS LA CARTE
   ============================================ */
.section_home-process .process_card-heading {
  /* Position et dimensions */
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;

  /* Marges et paddings - TOUS À ZÉRO sauf padding-bottom pour l'espace */
  margin: 0 !important;
  padding: 0 !important;
  padding-bottom: 1rem !important;
  /* Espace pour la ligne de séparation */
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  /* Overflow - CRITIQUE pour empêcher le débordement */
  overflow: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;

  /* Positionnement */
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  transform: none !important;
  float: none !important;
  clear: both !important;

  /* Ligne de séparation */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Titre h3 à l'intérieur */
.section_home-process .process_card-heading .heading_process,
.section_home-process .process_card-heading h3.heading_process,
.section_home-process .process_card-heading h3 {
  /* Dimensions - CRITIQUE */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;

  /* Marges et paddings - TOUS À ZÉRO */
  margin: 0 !important;
  padding: 0 !important;

  /* Positionnement */
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  transform: none !important;
  float: none !important;
  clear: both !important;

  /* Overflow - CRITIQUE */
  overflow: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;

  /* Style */
  color: #FFFFFF !important;
  font-weight: 700 !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* Strong à l'intérieur du titre */
.section_home-process .process_card-heading .heading_process strong {
  display: inline !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.section_home-process .process-number-huge {
  color: #1d44a1 !important;
  background-color: #FFFFFF !important;
  border: 3px solid #1d44a1 !important;
  border-radius: 50% !important;
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100 !important;
  box-shadow: 0 4px 15px rgba(29, 68, 161, 0.3) !important;
  pointer-events: none !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), margin-top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: transform, margin-top;
}

/* ============================================
   RESPONSIVE MOBILE
   ============================================ */
@media (max-width: 768px) {

  /* Ordre des éléments sur mobile : Titre/Bouton d'abord, puis cartes */
  .section_home-process .process_contents {
    flex-direction: column !important;
    gap: 3rem !important;
  }

  .section_home-process .process_content-left,
  .section_home-process .process_content-right {
    width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    /* Forcer 0 pour la timeline */
    padding-right: 0 !important;
  }

  /* Cartes - décalage de 30px pour laisser la place au numéro (Rayon 30px) */
  .section_home-process .process_card {
    padding: 1.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    /* Aéré */
    margin-left: 30px !important;
    /* Décalage pour le coin gauche */
    margin-right: 1rem !important;
  }

  /* Titres - taille réduite et règles encore plus strictes */
  .section_home-process .process_card-heading {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section_home-process .process_card-heading .heading_process,
  .section_home-process .process_card-heading h3 {
    font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Chiffres - centre sur le coin gauche (30px) et bord gauche sur la timeline (0) */
  .section_home-process .process-number-huge {
    width: 60px !important;
    height: 60px !important;
    top: 0 !important;
    left: 0 !important;
    font-size: 1.75rem !important;
    border-width: 2px !important;
    transform: translate(0, -50%) !important;
    /* Bord gauche à 0 de la timeline */
    margin-left: 0 !important;
  }

  /* Conteneur - forcer padding 0 pour alignement timeline */
  .section_home-process .process-card-container {
    padding-left: 0 !important;
    padding-right: 1rem !important;
    position: relative !important;
  }

  .section_home-process .process-card-grid-item {
    margin-top: 40px !important;
    margin-bottom: 3rem !important;
    /* Augmenté sur mobile */
  }
}

@media (max-width: 480px) {

  /* Cartes - décalage de 25px (Rayon 25px) */
  .section_home-process .process_card {
    padding: 1.25rem !important;
    margin-top: 0 !important;
    margin-left: 25px !important;
    margin-right: 0.75rem !important;
  }

  /* Titres - taille encore plus petite */
  .section_home-process .process_card-heading .heading_process,
  .section_home-process .process_card-heading h3 {
    font-size: clamp(1rem, 5vw, 1.3rem) !important;
  }

  /* Chiffres - centre sur le coin (25px) et bord à 0 */
  .section_home-process .process-number-huge {
    width: 50px !important;
    height: 50px !important;
    top: 0 !important;
    left: 0 !important;
    font-size: 1.5rem !important;
    transform: translate(0, -50%) !important;
  }

  /* Conteneur - padding 0 */
  .section_home-process .process-card-container {
    padding-left: 0 !important;
  }
}