/*
 * La page de l'équipe (page-bureau-et-ca.php).
 * Chaque groupe se présente comme une tranche d'âge des pages Enfants et
 * Adultes (.tranche, .tranche__tete, dans parcours.css). Les visages sont
 * posés à même la page, sans carte : des disques, comme la tête du nageur du
 * logo, cerclés de bleu ciel.
 * ========================================================================= */
.page-equipe { padding-bottom: 50px; }

/* Le texte de la page, écrit par le club, se lit comme le chapeau des autres
   pages. */
.page-equipe .calendar-hero .lead p { margin: 0; color: var(--soleil-gris); }
.page-equipe .calendar-hero .lead p + p { margin-top: 10px; }
.page-equipe .calendar-hero .lead { max-width: 70ch; font-size: 18px; }

.equipe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 32px 20px;
}
.equipe__personne {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.equipe__photo {
  position: relative;
  display: block;
  width: 132px;
  aspect-ratio: 1;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--soleil-eau);
  /* Le cerclage : un anneau blanc puis un anneau ciel, comme une bouée. */
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px var(--soleil-ciel);
  margin-top: 6px;
}
.equipe__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
button.equipe__photo { cursor: zoom-in; }
button.equipe__photo:hover,
button.equipe__photo:focus-visible { box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px var(--soleil-piscine); }
button.equipe__photo:focus-visible { outline: 3px solid var(--soleil-marine); outline-offset: 8px; }
/* La loupe de la visionneuse est pensée pour un carré : sur un disque elle
   déborderait du bord. Le curseur suffit à dire qu'on peut agrandir. */
.equipe__photo.team-avatar-clickable::after { content: none; }

.page-equipe .equipe__nom {
  margin: 0;
  font-family: var(--soleil-texte);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--soleil-marine);
  letter-spacing: 0;
}
.page-standard .equipe__role {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--soleil-gris);
}
.page-standard .equipe__vide { color: var(--soleil-gris); }

@media (max-width: 860px) {
  .page-equipe .tranche__tete { grid-template-columns: 1fr; gap: 10px; }
}
/* Trois visages par ligne au téléphone : à deux, l'équipe s'étirait sur
   plus de dix écrans. */
@media (max-width: 520px) {
  .equipe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 10px; }
  .equipe__photo { width: 88px; margin-bottom: 10px; box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--soleil-ciel); }
  .page-equipe .equipe__nom { font-size: 14px; overflow-wrap: anywhere; }
  .page-standard .equipe__role { font-size: 13px; }
}