/* ==========================================
   PAGE NOTRE ÉQUIPE — ASSOCIATION BEAUFIEF
   Styles spécifiques à la page equipe.html uniquement.
   Les styles globaux (variables, reset, topbar, header,
   nav, footer, boutons, .container) sont dans style.css
========================================== */


/* ==========================================
   HERO PLEIN ÉCRAN
   Bandeau d'en-tête avec photo de groupe en fond
========================================== */
.page-hero {
  position: relative;
  min-height: 300px;
  background: linear-gradient(135deg, #2d4a2d, #5c6f5c); /* Dégradé de secours si image absente */
  display: flex;
  align-items: flex-end;  /* Titre calé en bas du bandeau */
  overflow: hidden;
}

/* Photo de fond avec opacité réduite pour ne pas gêner la lecture du titre */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/équipe/groupe\ beaufief.webp') center/cover no-repeat;
  opacity: 0.28;
}

/* Zone texte dans le hero : z-index > 0 pour passer devant le pseudo-élément */
.page-hero .hero-inner {
  position: relative;
  z-index: 1;
  padding: 55px 0 45px;
  width: 100%;
}

.page-hero h2 {
  font-family: var(--font-title);
  font-size: 2.8rem;
  color: #fff;
  margin-bottom: 10px;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  max-width: 680px;
}


/* ==========================================
   SECTION D'INTRODUCTION DE L'ÉQUIPE
========================================== */
.equipe-intro {
  padding: 60px 0;
  background: var(--blanc);
}


/* ==========================================
   GRILLE MEMBRES (vue détaillée avec description)
   Utilisée pour les membres clés / direction
========================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Colonnes auto-ajustées */
  gap: 30px;
  margin-bottom: 40px;
}

/* Carte d'un membre avec photo ronde */
.team-member {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 25px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: 0.3s;
}

.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Conteneur circulaire de la photo avec dégradé de fond */
.team-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto 20px;
  border-radius: 50%;               /* Forme ronde */
  overflow: hidden;
  background: linear-gradient(135deg, var(--terre-cuite), var(--jaune-moutarde)); /* Visible si pas de photo */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recadre sans déformer */
}

/* Emoji de remplacement quand la photo est absente */
.photo-placeholder {
  font-size: 70px;
  filter: brightness(1.2);
}

.team-member h4 {
  font-family: var(--font-title);
  color: var(--terre-cuite);
  font-size: 1.2rem;
  margin-bottom: 8px;
}

/* Rôle affiché en majuscules espacées */
.team-role {
  color: var(--vert-sauge);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team-desc {
  color: var(--gris);
  font-size: 0.9rem;
  line-height: 1.5;
}


/* ==========================================
   TROMBINOSCOPE (grille compacte — toute l'équipe)
   Plus petites cartes, affiche photo + nom + badge rôle
========================================== */
.trombinoscope-section {
  background: var(--beige-lin);
}

/* Grille auto-fill pour s'adapter à n'importe quel nombre de membres */
.trombino-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 25px;
}

.trombino-card {
  background: var(--blanc);
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
  border: 2px solid transparent; /* Bordure invisible au départ */
  overflow: hidden;
}

/* Bordure jaune visible au survol */
.trombino-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
  border-color: var(--jaune-moutarde);
}

/* Zone photo carrée (ratio 1:1 garanti) */
.trombino-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--beige-lin); /* Fond de remplacement si image absente */
}

/* Photo cadrée depuis le haut (cadrage visage) */
.trombino-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* Priorité au visage */
  transition: transform 0.4s;
}

/* Légère mise à l'échelle de la photo au survol */
.trombino-card:hover .trombino-photo img {
  transform: scale(1.06);
}

/* Nom du membre sous la photo */
.trombino-name {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--texte);
  font-size: 0.95rem;
  padding: 12px 10px 4px;
}

/* Badge arrondi indiquant le rôle */
.trombino-role {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: var(--terre-cuite);
  border-radius: 20px;   /* Forme pilule */
  padding: 3px 12px;
  margin-bottom: 14px;
}


/* ==========================================
   BANDEAU MISSION
   Section foncée avec grille texte + boutons de fiches
========================================== */
.mission-banner {
  background: linear-gradient(135deg, var(--vert-sauge), #3d5a3d); /* Dégradé vert foncé */
  padding: 55px 0;
}
/* Modification pour centrer le texte de la mission */
.mission-text-centered {
  max-width: 800px; /* Limite la largeur pour une meilleure lecture */
  margin: 0 auto;   /* Centre le bloc horizontalement */
  text-align: center;
}

.mission-text-centered h2 {
  font-family: var(--font-title);
  font-size: 2.2rem;
  color: var(--jaune-moutarde);
  margin-bottom: 20px;
}

.mission-text-centered p {
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.8;
  font-size: 1.1rem;
}

/* Style pour la liste à puces centrée */
.mission-text-centered ul {
  list-style-type: none; /* Enlever les puces par défaut */
  padding: 0;
  margin: 30px 0;
  display: inline-block; /* Permet au texte de rester aligné à gauche à l'intérieur d'un bloc centré */
  text-align: left;
}

.mission-text-centered li {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
  position: relative;
  padding-left: 25px;
}

/* Ajouter une puce personnalisée (optionnel) */
.mission-text-centered li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--jaune-moutarde);
  font-weight: bold;
}


/* ==========================================
   COMPÉTENCES
   Grille de 3 cartes décrivant les compétences recherchées
========================================== */
.competences-section {
  padding: 70px 0;
  background: var(--beige-lin);
}

.comp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.comp-card {
  background: var(--blanc);
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: var(--shadow);
}

.comp-card h4 {
  font-family: var(--font-title);
  color: var(--terre-cuite);
  margin-bottom: 10px;
}


/* ==========================================
   BESOINS DE RECRUTEMENT
   Tableau détaillant les besoins par poste et période
========================================== */
.besoins-section {
  padding: 70px 0;
  background: var(--blanc);
}

/* Tableau avec coins arrondis via border-collapse séparé */
.besoins-table {
  width: 100%;
  border-collapse: separate;  /* Nécessaire pour border-radius sur le tableau */
  border-spacing: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* En-têtes de colonnes avec couleurs différentes par colonne */
.besoins-table thead th {
  background: var(--vert-sauge);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  padding: 16px 14px;
  text-align: left;
}

/* Chaque colonne a sa propre couleur pour différencier les périodes */
.besoins-table thead th:nth-child(2) { background: #4a5c4a; }
.besoins-table thead th:nth-child(3) { background: var(--terre-cuite); }
.besoins-table thead th:nth-child(4) { background: var(--jaune-moutarde); }
.besoins-table thead th:nth-child(5) { background: #3a4a5c; }

.besoins-table td {
  padding: 14px 12px;
  font-size: 0.88rem;
  color: var(--gris);
  vertical-align: top;
}

/* Première colonne : nom du poste, mis en valeur */
.besoins-table td:first-child {
  font-family: var(--font-title);
  color: var(--texte);
  font-weight: 700;
  background: rgba(92, 111, 92, 0.07); /* Fond très léger vert */
}


/* ==========================================
   SECTION RECRUTEMENT
   Encadré avec formulaire ou appel à candidatures
========================================== */
.recrutement-section {
  padding: 60px 0;
  background: var(--beige-lin);
}

/* Boîte principale : texte à gauche, formulaire/info à droite */
.recrutement-box {
  background: var(--blanc);
  border-radius: 22px;
  padding: 45px;
  box-shadow: var(--shadow);
  border-left: 6px solid var(--terre-cuite); /* Accent rouge à gauche */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.recrutement-text h3 {
  font-family: var(--font-title);
  color: var(--terre-cuite);
  font-size: 1.7rem;
  margin-bottom: 14px;
}


/* ==========================================
   MODALES (fenêtres pop-up pour les fiches de poste)
========================================== */

/* Fond semi-transparent qui recouvre toute la page */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;        /* Au-dessus de tout le reste */
  display: none;         /* Cachée par défaut — main.js ajoute .open au clic */
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Affichée quand .open est ajoutée dynamiquement */
.modal-overlay.open {
  display: flex;
}

/* Fenêtre modale blanche avec défilement interne si contenu long */
.modal {
  background: #fff;
  border-radius: 22px;
  max-width: 750px;
  width: 100%;
  max-height: 85vh;      /* Limite la hauteur pour rester dans l'écran */
  overflow-y: auto;       /* Barre de défilement si nécessaire */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* En-tête de la modale */
.modal-header {
  background: linear-gradient(135deg, var(--vert-sauge), #3d5a3d);
  color: #fff;
  padding: 28px 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Bouton de fermeture "×" */
.modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 35px;
}

/* Titres dans le corps de la modale */
.modal-body h4 {
  font-family: var(--font-title);
  color: var(--terre-cuite);
  margin: 20px 0 8px;
}


/* ==========================================
   HISTORIQUE — TIMELINE VERTICALE
========================================== */
.historique-section {
  padding: 70px 0;
  background: var(--blanc);
}

.historique-timeline {
  position: relative;
  max-width: 820px;
  margin: 50px auto 0;
  padding-left: 40px;
}

/* Ligne verticale centrale */
.historique-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--terre-cuite), var(--vert-sauge));
  border-radius: 3px;
}

.histo-item {
  position: relative;
  margin-bottom: 44px;
  padding-left: 30px;
}

.histo-item--last {
  margin-bottom: 0;
}

/* Point sur la ligne */
.histo-dot {
  position: absolute;
  left: -33px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--terre-cuite);
  border: 3px solid var(--blanc);
  box-shadow: 0 0 0 2px var(--terre-cuite);
  z-index: 1;
}

/* Point actif (Aujourd'hui) : pulsé en vert */
.histo-dot--active {
  background: var(--vert-sauge);
  box-shadow: 0 0 0 2px var(--vert-sauge), 0 0 0 5px rgba(92, 111, 92, 0.2);
}

.histo-year {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  background: var(--terre-cuite);
  border-radius: 20px;
  padding: 3px 14px;
  margin-bottom: 10px;
}

.histo-item--last .histo-year {
  background: var(--vert-sauge);
}

.histo-content {
  background: var(--beige-lin);
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: var(--shadow);
  transition: 0.3s;
}

.histo-content:hover {
  transform: translateX(5px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.histo-content h4 {
  font-family: var(--font-title);
  color: var(--terre-cuite);
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.histo-item--last .histo-content h4 {
  color: var(--vert-sauge);
}

.histo-content p {
  color: var(--gris);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Responsive historique */
@media (max-width: 600px) {
  .historique-timeline {
    padding-left: 28px;
  }
  .historique-timeline::before {
    left: 10px;
  }
  .histo-dot {
    left: -25px;
    width: 13px;
    height: 13px;
  }
  .histo-content {
    padding: 18px 18px;
  }
}

/* ==========================================
   RESPONSIVE — TABLETTES (max-width: 1000px)
========================================== */
@media (max-width: 1000px) {
  /* Toutes les grilles 2 colonnes passent en 1 colonne */
  .mission-inner,
  .comp-grid,
  .recrutement-box { grid-template-columns: 1fr; }
}

/* ==========================================
   RESPONSIVE — MOBILES (max-width: 768px)
========================================== */
@media (max-width: 768px) {
  .page-hero h2 { font-size: 2rem; }
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .trombino-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
  .team-photo { width: 120px; height: 120px; }
  .equipe-intro,
  .mission-banner,
  .competences-section,
  .besoins-section,
  .recrutement-section { padding: 50px 0; }
}

/* ==========================================
   RESPONSIVE — TABLEAU BESOINS (max-width: 700px)
========================================== */
@media (max-width: 700px) {
  .besoins-table { font-size: 0.78rem; }
  .besoins-table thead th { padding: 12px 8px; font-size: 0.8rem; }
}

/* ==========================================
   RESPONSIVE — PETITS MOBILES (max-width: 480px)
========================================== */
@media (max-width: 480px) {
  .page-hero h2 { font-size: 1.6rem; }
  .team-grid { grid-template-columns: 1fr; }
  .trombino-grid { grid-template-columns: repeat(2, 1fr); } /* 2 colonnes minimum */
  .recrutement-box { padding: 30px; }
}


/* ==========================================
   POSTURES DE L'ANIMATEUR
========================================== */
.posture-public-wrap {
  margin-top: 40px;
}

.posture-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 30px;
}

.posture-title {
  font-family: var(--font-title);
  color: var(--jaune-moutarde);
  font-size: 1.4rem;
  margin-bottom: 18px;
  text-align: center;
}

.posture-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 2 colonnes pour "Avec le public" sur desktop */
.posture-list--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 30px;
}

.posture-list li {
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
}

.posture-check {
  position: absolute;
  left: 0;
  color: var(--jaune-moutarde);
  font-weight: bold;
}

/* Partenaires + Équipe côte à côte */
.posture-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 30px;
}

/* Tablette : liste public en 1 colonne, partenaires+équipe toujours côte à côte */
@media (max-width: 768px) {
  .posture-list--2col {
    grid-template-columns: 1fr;
  }
}

/* Mobile : tout en colonne unique */
@media (max-width: 600px) {
  .posture-row {
    grid-template-columns: 1fr;
  }
  .posture-card {
    padding: 20px;
  }
}