/* --- CONFIGURATION DU CONTENU DE LA PAGE FONCTIONNALITÉS --- */

.page-title-section {
  padding: 60px 0 20px 0;
}

/* --- SECTION DES FONCTIONNALITÉS COMPOSITES (STYLE FIGMA) --- */
.features-split-section {
  width: 100%;
  background-color: var(--Contexte);
  padding: 80px 24px;
}

.split-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
}

/* --- TEXTES (GAUCHE) --- */
.split-text-side {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  gap: 50px; /* Espace vertical précis entre les deux cartes beiges */
  z-index: 2; /* Permet aux cartes de passer légèrement sous l'image si besoin */
}

.feature-text-card {
  background-color: var(--accent-light);
  border-radius: 30px; /* Coins arrondis lisses de la maquette */
  padding: 40px;
  max-width: 620px;
  width: 100%;
}

.card-title-fictif {
  font-family: var(--font-family-poppins);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--Texte);
  margin-bottom: 20px;
}

.feature-bullets-fictif {
  list-style: none;
  padding-left: 0;
}

.feature-bullets-fictif li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-family-inter);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--Texte);
  margin-bottom: 12px;
}

.feature-bullets-fictif li:last-child {
  margin-bottom: 0;
}

/* Puces noires pleines comme sur l'image Figma */
.feature-bullets-fictif li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  color: #000000;
  font-size: 0.9rem;
}

/* --- IMAGE (DROITE) --- */
.split-image-side {
  flex: 0.9;
  display: flex;
  justify-content: flex-end;
}

.figma-robot-pink {
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: cover;
  /* Forme asymétrique de type "stade" ou œuf typique de l'UI Figma */
  border-radius: 200px 200px 120px 200px; 
  display: block;
}

/* --- COMPORTEMENT RESPONSIVE --- */
@media (max-width: 1024px) {
  .split-container {
    flex-direction: column-reverse; /* L'image passe au-dessus sur tablette/mobile */
    gap: 40px;
  }
  
  .split-text-side {
    width: 100%;
    align-items: center;
  }

  .feature-text-card {
    max-width: 100%;
  }

  .split-image-side {
    width: 100%;
    justify-content: center;
  }

  .figma-robot-pink {
    max-width: 80%;
  }
}

@media (max-width: 576px) {
  .features-split-section {
    padding: 40px 16px;
  }

  .feature-text-card {
    padding: 24px;
    border-radius: 20px;
  }

  .figma-robot-pink {
    max-width: 100%;
  }
}


/* Grille de disposition alignée sur la maquette */
.features-grid-section {
  padding: 40px 0;
}

.feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 80px;
}

/* Inversion des colonnes pour créer l'effet alterné asymétrique */
.feature-row.row-reverse {
  flex-direction: row-reverse;
}

.feature-text-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Conteneur d'images respectant l'aspect ratio Figma */
.feature-image-block {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-display-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Border radius spécifiques extraits de la maquette */
.img-rounded-large {
  border-radius: 238px;
}

.img-rounded-medium {
  border-radius: 152px;
}

/* Gestion des blocs de texte multiples empilés */
.multiple-cards {
  gap: 40px;
}

.sub-feature-card {
  background-color: var(--accent-light);
  border-radius: 30px;
  padding: 32px;
  width: 700px;
}

.sub-feature-card .headings-h3 {
  margin-bottom: 12px;
  font-size: 1.35rem;
}

.sub-feature-card .feature-bullets {
  margin: 0;
}

/* --- SECTION DE REASSURANCE CERTIFICATION --- */
.certification-section {
  padding: 10px 0 100px 0;
}

.certification-image-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 32px auto;
  border-radius: 100px;
  overflow: hidden;
}

.certification-img {
  width: 100%;
  height: auto;
  display: block;
}

.certification-notice {
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.7;
}

/* --- RESPONSIVE DES FONCTIONNALITÉS (Tablettes et Mobiles) --- */

@media (max-width: 1024px) {
  .feature-row, .feature-row.row-reverse {
    flex-direction: column-reverse;
    gap: 40px;
    margin-bottom: 60px;
  }

  .feature-image-block {
    width: 100%;
  }

  .feature-display-img {
    max-width: 80%;
  }
}

@media (max-width: 768px) {
  .page-title-section {
    padding: 40px 0 10px 0;
  }

  .feature-display-img {
    max-width: 100%;
  }

  .sub-feature-card {
    padding: 24px;
    border-radius: 20px;
  }

  .certification-image-wrapper {
    border-radius: 40px;
  }
}