/* ===============================
   Fichier : landing-profit.css
   Description : Section profit propre, DRY & SOC
   =============================== */

/* Conteneur global */
.landing__profit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-large);
  text-align: center;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto; /* Centrer horizontalement */
}

/* Titre */
.landing__profit-title {
  width: 100%;
  text-align: center; /* Centre le titre */
}

/* Conteneur des items */
.profit-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-large);
  width: 100%;
}

/* Chaque item */
.profit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-medium);
  text-align: center;
  max-width: 500px; /* Empêche le texte de s'étirer trop */
}

/* Paragraphe des items */
.profit-item p {
  max-width: 100%; /* Dépend déjà de .profit-item */
}

/* ======= Responsive Desktop (>= 768px) ======= */
@media (min-width: 768px) {
  .profit-items {
    flex-direction: row;
    justify-content: center; /* Centre horizontalement */
    align-items: flex-start; /* Aligne le haut des items */
    flex-wrap: wrap; /* Passe à la ligne si besoin */
    gap: var(--gap-large);
  }

  .profit-item {
    flex: 1 1 30%; /* Grandit, rapetisse mais base à 30% */
    max-width: 30%;
    text-align: center;
  }
}