/* =========================
   WHY CHOOSE US – PREMIUM
   ========================= */
.why-choose-us {
  position: relative;
  padding: 7rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  background: linear-gradient(
    to bottom,
    #faf7f8,
    #ffffff
  );
}

/* =========================
   SECTION HEADER
   ========================= */
.why-choose-us .section-header {
  max-width: 820px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;

  text-align: center;
}

/* =========================
   FEATURES GRID
   ========================= */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.8rem;
}

/* =========================
   FEATURE CARD
   ========================= */
.feature-card {
  position: relative;
  display: flex;
  align-items: stretch;

  padding: 2.6rem 2.2rem;
  min-height: 300px;

  background: rgba(255,255,255,0.88);

  border-radius: 18px;

  /* Bord visible mais doux */
  border: 1px solid rgba(0,0,0,0.08);

  transition:
    transform .45s var(--ease-premium),
    box-shadow .45s var(--ease-premium),
    border-color .45s var(--ease-premium);
}

.feature-card:hover {
  transform: translateY(-10px);
  border-color: rgba(231,161,176,0.45);

  box-shadow:
    0 26px 60px rgba(0,0,0,0.08),
    0 10px 25px var(--rose-glow);
}

/* =========================
   FEATURE CARD INNER
   ========================= */
.feature-card-inner {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.3rem;
}

/* =========================
   FEATURE ICON
   ========================= */
.feature-icon {
  width: 64px;
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: linear-gradient(
    145deg,
    rgba(231,161,176,0.18),
    rgba(231,161,176,0.05)
  );

  border: 1px solid rgba(231,161,176,0.35);

  color: var(--rose-primary);
  font-size: 1.3rem;

  transition:
    transform .4s ease,
    box-shadow .4s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(231,161,176,0.35);
}

/* =========================
   FEATURE TEXT
   ========================= */
.feature-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.feature-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(0,0,0,0.65);
}

/* =========================
   SECTION CTA
   ========================= */
.why-choose-us .section-cta {
  display: flex;
  justify-content: center;
}

.why-choose-us .section-cta .btn {
  padding: 1.1rem 2.8rem;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .why-choose-us {
    padding: 5rem 2rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   WHY CHOOSE US – RESPONSIVE FIX
   ========================= */

/* Tablette paysage / petits laptops */
@media (max-width: 1024px) {
  .feature-card {
    min-height: auto;
    padding: 2.2rem 1.8rem;
  }
}

/* Tablette portrait */
@media (max-width: 820px) {
  .features-grid {
    gap: 2rem;
  }

  .feature-icon {
    width: 56px;
    height: 56px;
    font-size: 1.2rem;
  }

  .feature-title {
    font-size: 1rem;
  }

  .feature-description {
    font-size: 0.92rem;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .why-choose-us {
    padding: 4rem 1.5rem;
    gap: 3rem;
  }

  .features-grid {
    gap: 1.6rem;
  }

  .feature-card {
    padding: 2rem 1.6rem;
    border-radius: 16px;
  }

  /* Désactivation des effets hover sur mobile */
  .feature-card:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(0,0,0,0.08);
  }

  .feature-card:hover .feature-icon {
    transform: none;
    box-shadow: none;
  }

  .feature-icon {
    width: 52px;
    height: 52px;
    font-size: 1.15rem;
  }

  .why-choose-us .section-cta .btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

/* Très petits écrans */
@media (max-width: 380px) {
  .feature-description {
    font-size: 0.9rem;
  }
}