/* ====== LISTE DES ÉTUDIANTS — LAYOUT GLOBAL ====== */
.students-grid {
  display: flex;
  flex-direction: column;
  gap: 45px; /* espace entre chaque box */
}

/* ====== CARD CLIQUABLE (tout le box est le lien) ====== */
.student-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;           /* colonnes même hauteur */
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.student-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.student-card:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

/* ====== COLONNE IMAGE (1/4 en desktop/tablette) ====== */
.student-media {
  flex: 0 0 25%;
  min-height: 220px;              /* assure une vraie surface visuelle */
  background-size: cover;         /* occupe toute la surface du 1/4 */
  background-position: center;
  background-repeat: no-repeat;
}

/* Image SEO/Accessibilité (si tu utilises un <img> masqué) */
.student-media img {
  display: none;                  /* on garde seulement le background */
  width: 100%;                    /* width 100% demandé */
  height: auto;
}

/* ====== COLONNE TEXTE (3/4) — ALIGNÉE EN HAUT & À GAUCHE ====== */
.student-content {
  flex: 1 1 75%;
  padding: 22px 24px;
  color: #1a1a1a;

  /* aligne le contenu en haut à gauche */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;    /* haut */
  align-items: flex-start;        /* gauche */
  text-align: left;               /* gauche (texte) */
  gap: 6px;                       /* petit espace vertical interne */
}

/* ====== TYPOGRAPHIE SPÉCIFIQUE ====== */
.student-name {
  line-height: 1.2;
  color: #111;
  /* classes existantes : h-custom-healine h3 mbn (laisse tes styles globaux) */
}

.student-title {
  margin-top: 0;                  /* mvn */
  margin-bottom: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #000;                    /* noir */
  text-transform: uppercase;      /* en majuscules */
}

.student-summary {
  margin-top: 10px;               /* mtn */
  font-size: 17px;                /* demandé */
  line-height: 1.6;
  color: #333;
}

/* ====== RESPONSIVE ====== */
/* Mobile: une colonne, image au-dessus, texte en dessous */
@media (max-width: 767px) {
  .student-card {
    flex-direction: column;
    align-items: stretch;         /* sécurité */
  }

  .student-media {
    width: 100%;
    min-height: 520px;            /* visuel plus généreux sur mobile */
  }

  .student-content {
    padding: 18px 16px;
    justify-content: flex-start;  /* haut */
    align-items: flex-start;      /* gauche */
    text-align: left;
  }
}

/* Tablet/Desktop: deux colonnes (1/4 image, 3/4 texte) */
@media (min-width: 768px) {
  .student-media { flex-basis: 25%; }
  .student-content { flex-basis: 75%; }
}