/* ══════════════════════════════════════════════════════════
   À PROPOS — version avec fond photo
   Remplace le bloc existant « .about-section » dans style.css
   ══════════════════════════════════════════════════════════ */

.about-section {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #ede8e3;
}
.tittle {
  color: #fff;
}

/* ── Image de fond ── */
.about-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/photo_background.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* parallax léger — retirez si vous préférez fixe */
  filter: brightness(0.75);
  z-index: 0;
}

/* ── Contenu par-dessus l'image ── */
.about-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 4.5rem 2rem;
}

/* ── Label "À propos" ── */
.about-section .section-label {
  color: #a8c4ff; /* bleu clair lisible sur fond sombre */
}

/* ── Divider ── */
.about-section .lf-divider {
  background: linear-gradient(9090deg, var(--lf-orange), var(--lf-vert));
}

/* ── Textes intro en blanc ── */
.about-section .about-intro {
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 1.4rem;
}

/* ── Cards des 3 voies : glassmorphisme ── */
.about-section .voies-grid {
  margin-bottom: 2rem;
}

.about-section .voie-card {
  background: rgba(36, 35, 35, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 3px solid var(--lf-vert); /* conserve la couleur d'accent */
  border-radius: 0.5rem;
  padding: 1.4rem 1.4rem 1.2rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.about-section .voie-card:nth-child(2) {
  border-top-color: var(--lf-orange);
}
.about-section .voie-card:nth-child(3) {
  border-top-color: var(--lf-bleu);
}

.about-section .voie-card h3 {
  font-weight: 300;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.about-section .voie-card:nth-child(1) h3 {
  color: #6fcf77;
} /* vert clair  */
.about-section .voie-card:nth-child(2) h3 {
  color: #ffa05a;
} /* orange clair */
.about-section .voie-card:nth-child(3) h3 {
  color: #7aacf5;
} /* bleu clair  */

.about-section .voie-card p {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.84rem;
  line-height: 1.65;
}

/* ── Phrase de clôture ── */
.about-section .about-close {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.75;
}

/* ── Responsive mobile ── */
@media (max-width: 768px) {
  .about-section {
    padding: 0; /* le padding est sur .about-inner */
  }
  .about-section::before {
    background-attachment: scroll; /* fixed crée des bugs sur iOS */
  }
  .about-inner {
    padding: 2.5rem 1.2rem;
  }
}