/* Front-end Staff Directory Styles – version complète */

:root {
  --staff-primary: #4a90e2;
  --staff-secondary: #50E3C2;
  --staff-bg: #ffffff;
  --staff-text: #333333;
  --staff-border: #e0e0e0;
}

/* Container principal */
.univga-staff-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 2rem 0;
}

/* On ne veut plus du titre de catégorie */
.univga-staff-category-title {
  display: none;
}

/* Grille : 3 cartes par ligne fixe */
.univga-staff-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Carte standardisée : 9 cm x 9 cm */
.univga-staff-card {
  width: 9cm;
  margin: 0 auto;
  position: relative;
  background: var(--staff-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  padding-top: 60px; /* espace pour la barre d’en-tête */
}

/* Barre colorée derrière la photo */
.univga-staff-card .card-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: var(--staff-primary);
}

/* Photo de profil ronde, dépassant légèrement */
.univga-staff-card .card-photo {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  background: #fff;
}

/* Nom : couleur noire */
.univga-staff-card .card-name {
  margin-top: 70px;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #000 !important;
  font-weight: 600;
}

/* Fonction : couleur bleue */
.univga-staff-card .card-function {
  margin: .25rem 1rem 1rem;
  color: var(--staff-primary) !important;
  font-size: 0.9rem;
  font-style: italic;
}

/* Boutons en bas */
.univga-staff-card .card-buttons {
  display: flex;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  border-top: 1px solid var(--staff-border);
}

.univga-staff-card .card-buttons .button {
  flex: 1;
  padding: .5rem 0;
  background: var(--staff-bg);
  border: 1px solid var(--staff-primary);
  border-radius: 6px;
  font-size: .9rem;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.univga-staff-card .card-buttons .button:hover {
  background: var(--staff-primary);
  color: #fff;
}

/* Overlay de modal */
.univga-modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  display: none;
}

/* Fenêtre de modal */
.univga-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--staff-bg);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  padding: 1.5rem;
  max-width: 500px;
  width: 90%;
  z-index: 9999;
  display: none;
}

/* Header de modal */
.univga-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.univga-modal .modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--staff-primary);
}
.univga-modal .modal-header .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Contenu de modal */
.univga-modal .modal-content {
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  text-align: justify;
  webkit-overflow-scrolling: touch;
}

/* === NEUTRALISATION DES STYLES GLOBAUX SUR .modal-content === */
/* On vire le fond/bordure/ombre/sizing de Bootstrap ou autre */
.univga-modal .modal-content {
  background: transparent !important;
  border: none         !important;
  box-shadow: none     !important;
  padding: 0           !important;

}
/* On réinitialise les marges des paragraphes internes */
.univga-modal .modal-content p {
  margin: 0;
}

/* Champs du formulaire de contact */
.univga-modal input[type="text"],
.univga-modal input[type="email"],
.univga-modal textarea {
  width: 100%;
  padding: .5rem;
  border: 1px solid var(--staff-border);
  border-radius: 4px;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

/* Bouton d’envoi */
.univga-modal .button-primary {
  background: var(--staff-primary) !important;
  border-color: var(--staff-primary) !important;
  color: #fff !important;
}
.univga-modal .button-primary:hover {
  background: var(--staff-secondary) !important;
  border-color: var(--staff-secondary) !important;
}

.univga-staff-card .card-country {
  margin: 0.25rem 0 0.75rem;
  color: var(--staff-text);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: capitalize;
}

/* === Tablettes (768px – 1024px) : 2 cartes par ligne === */
@media (max-width: 1024px) {
  .univga-staff-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === Mobile (≤ 767px) : 1 carte par ligne === */
@media (max-width: 767px) {
  .univga-staff-cards {
    grid-template-columns: 1fr;
  }
  .univga-staff-card {
    /* Sur mobile, pas de max-width en cm : on occupe tout l’espace */
    max-width: none;
  }
}

/* === Scroll interne du modal sur mobile === */
@media (max-width: 767px) {
  .univga-modal .modal-content {
    max-height: 60vh !important;      /* hauteur max pour garder titre + close visibles */
    overflow-y: auto !important;      /* barre de scroll verticale forcée */
    -webkit-overflow-scrolling: touch; /* scroll fluide sur iOS */
  }
}