.soins-container {
  /* Affiche le container des cartes de soins en flexbox pour aligner les éléments horizontalement */
  display: flex;
  /* Permet le retour à la ligne des éléments si la place manque */
  flex-wrap: wrap;
  /* Espace horizontal entre les cartes */
  gap: 32px;
  /* Centre les éléments horizontalement */
  justify-content: center;
  /* Marge supérieure pour espacer du haut de la page */
  margin-top: 40px;
}
.soin-card {
  /* Affiche chaque carte de soin en colonne et centre le contenu */
  display: flex;
  flex-direction: column; /* Aligne les éléments verticalement */
  align-items: center; /* Centre horizontalement le contenu */
  flex: 1 1 420px; /* Permet à la carte de s'étendre ou se réduire */
  max-width: 48%; /* Largeur maximale de chaque carte (2 par ligne) */
  min-width: 320px; /* Largeur minimale de chaque carte */
  width: 60%; /* Largeur relative de la carte */
  background: #fff; /* Fond blanc */
  border-radius: 18px; /* Bords arrondis */
  box-shadow: 0 2px 12px rgba(0,0,0,0.07); /* Ombre légère */
  padding: 18px 12px 28px 12px; /* Espacement interne */
  box-sizing: border-box; /* Inclut la bordure et le padding dans la largeur */
}
.soin-img {
  /* Image de la carte de soin */
  width: 220px; /* Largeur fixe de l'image */
  height: 220px; /* Hauteur fixe de l'image */
  object-fit: cover; /* Recadre l'image sans déformation */
  border-radius: 12px 12px 0 0; /* Bords arrondis en haut */
  margin-bottom: 10px; /* Espace sous l'image */
}
.soin-label {
  /* Titre sous l'image */
  font-size: 1.2em; /* Taille du texte agrandie */
  font-weight: 600; /* Texte en gras */
  text-align: center; /* Centre le texte */
  margin-top: 0; /* Pas de marge au-dessus */
  margin-bottom: 0; /* Pas de marge en dessous */
  padding-top: 6px; /* Espace au-dessus du titre */
  border-top: 2px solid #eee; /* Ligne grise au-dessus du titre */
}
.parallax-content p, .soins-container p {
  /* Justifie le texte des paragraphes */
  text-align: justify;
}
@media (max-width: 900px) {
  .soin-card {
    /* Sur écran moyen, la carte prend toute la largeur */
    max-width: 100%;
    min-width: 260px;
  }
  .soin-container {
    /* Réduit l'espace entre les cartes */
    gap: 18px;
  }
}
@media (max-width: 700px) {
  .soins-container {
    /* Sur mobile, les cartes sont en colonne et centrées */
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .soin-card {
    /* La carte prend presque toute la largeur de l'écran */
    width: 90vw;
    max-width: 340px;
  }
}