/*
Bloc « L'équipe pédagogique » des fiches de formation.

Le contenu vient du code court [onerh_formateurs] : Elementor ne sait pas boucler sur une
relation entre deux contenus, seule cette liste est donc habillée ici. Les couleurs et la
police sont celles du kit Elementor, jamais des valeurs en dur : le bloc suit la charte
si elle évolue.
*/

.orh-formateurs {
  margin: 0;
}

.orh-formateurs-titre {
  color: var(--e-global-color-secondary);
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  margin: 0 0 1.5rem;
}

.orh-formateurs-liste {
  display: grid;
  /* Autant de colonnes que la place en permet, sans point de rupture à maintenir. La
     borne haute empêche deux intervenants de s'étirer sur toute la largeur de lecture :
     une carte de personne reste une carte, pas une bannière. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 22rem));
  justify-content: start;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.orh-formateur-lien {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #e6ebf2;
  border-radius: 1rem;
  background: #fff;
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}

.orh-formateur-lien:hover,
.orh-formateur-lien:focus-visible {
  border-color: var(--e-global-color-secondary);
  transform: translateY(-2px);
}

.orh-formateur-photo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.orh-formateur-texte {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.orh-formateur-nom {
  color: var(--e-global-color-primary);
  font-weight: 600;
  line-height: 1.25;
}

.orh-formateur-role {
  color: var(--e-global-color-onerhmuted);
  font-size: .875rem;
  line-height: 1.35;
}