/* ==========================================================================
   In Pulse - club.css
   Spécifique à l'Espace Cercle (communauté / club privé, pages club/*.html).
   La coquille (.app-coquille, sidebar, en-tête) vient de app.css ; la bascule
   d'espace de app.css également. On n'ajoute ici que l'agenda d'événements et
   la grille des membres. Aucune couleur en dur : variables de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Agenda d'événements (accueil + page Événements)
   -------------------------------------------------------------------------- */
.agenda {
  display: grid;
  gap: var(--espace-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* « La vie du Cercle » : l'agenda passé suit un paragraphe → un peu d'air. */
#club-passes {
  margin-top: var(--espace-md);
}

.evenement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espace-lg);
  align-items: start;
  padding-block: var(--espace-md);
  border-top: 1px solid var(--couleur-filet);
}

.evenement:first-child {
  border-top: 0;
  padding-top: 0;
}

.evenement--passe {
  opacity: 0.72;
}

/* Pastille de date (jour + mois abrégé) */
.evenement__date {
  text-align: center;
  min-width: 4.25rem;
  padding: var(--espace-sm);
  border-radius: var(--rayon-md);
  background-color: var(--couleur-accent-fond);
  color: var(--couleur-accent-texte);
  font-family: var(--police-titre);
  line-height: 1.1;
}

.evenement__jour {
  display: block;
  font-size: var(--taille-xl);
  font-weight: var(--graisse-demi);
}

.evenement__mois {
  display: block;
  font-size: var(--taille-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.evenement__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-2xs);
}

.evenement__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-encre);
  margin: 0;
}

.evenement__texte {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
  margin: var(--espace-2xs) 0 var(--espace-sm);
}

.evenement__meta {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-discret);
}

.evenement__meta strong {
  color: var(--couleur-texte);
  font-weight: var(--graisse-moyenne);
}

.evenement__pied {
  margin-top: var(--espace-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-md);
}

@media (max-width: 600px) {
  .evenement {
    grid-template-columns: 1fr;
  }
  .evenement__date {
    justify-self: start;
  }
}

/* Rangée de raccourcis (boutons qui passent à la ligne sur petit écran).
   Repris de cercle.css, non chargé ici. */
.tdb-raccourcis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-sm);
  margin-top: var(--espace-md);
}

/* Barre de filtres par type d'événement */
.filtres-club {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-lg);
}

/* Le filtre actif (aria-pressed) prend l'aplat encre, comme un onglet choisi. */
.filtres-club .bouton[aria-pressed="true"] {
  background-color: var(--couleur-encre);
  border-color: var(--couleur-encre);
  color: var(--couleur-sur-encre);
}

/* --------------------------------------------------------------------------
   2. Grille des membres du Cercle
   -------------------------------------------------------------------------- */
.grille-membres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--espace-lg);
}

.membre__tete {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  margin-bottom: var(--espace-md);
}

.membre__nom {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-encre);
  margin: 0;
}

.membre__entreprise {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

.membre__pied {
  margin-top: var(--espace-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-sm);
}