/* --- SECTION ACCUEIL MOTIVATION LETTER --- */

/* Grille des 3 cartes */
.grid-3 {
  max-width: 1100px;
  margin: 3rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

/* Carte de base */
.card {
  position: relative;
  padding: 2.2rem 2rem;
  border-radius: 24px;
  background: radial-gradient(circle at top left, #182b4d 0, #070b18 55%, #050814 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.6);
  color: #f5f7ff;
  text-decoration: none;
  overflow: hidden;
}

/* Halo léger autour de la carte */
.card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at top, rgba(0, 255, 142, 0.14), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Titre de la carte */
.card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* Texte de la carte */
.card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(235, 240, 255, 0.86);
}

/* Effet hover */
.card.hover {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.card.hover:hover {
  transform: translateY(-6px);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.85),
    0 0 25px rgba(0, 255, 142, 0.25);
  border-color: rgba(0, 255, 142, 0.5);
  background: radial-gradient(circle at top left, #1f355d 0, #050a18 50%, #040713 100%);
}

.card.hover:hover::before {
  opacity: 1;
}

/* Petit badge “clicable” (optionnel) : on peut styliser le curseur */
.card.hover {
  cursor: pointer;
}

/* Responsive léger */
@media (max-width: 640px) {
  .grid-3 {
    margin-top: 2.2rem;
    padding: 0 1rem 2rem;
  }

  .card {
    padding: 1.8rem 1.5rem;
    border-radius: 20px;
  }

  .card h3 {
    font-size: 1.15rem;
  }

  .card p {
    font-size: 0.9rem;
  }
}