/* --------------------------------------------------------------------------
   Équipe pédagogique — grille de portraits.

   Le rail sert à parcourir un catalogue dont on choisit une entrée. Ici on
   veut embrasser l'équipe d'un coup d'œil : personne ne « choisit » sa
   formatrice, elle est désignée par la formation. D'où une grille, et des
   cartes qui ne sont pas des liens.
   -------------------------------------------------------------------------- */

.soform-equipe {
	--soform-encre: var(--theme-palette-color-1, #17120f);
	--soform-texte: var(--theme-palette-color-3, #3d342e);
	--soform-texte-2: var(--theme-palette-color-4, #8c7f74);
	--soform-page: var(--theme-palette-color-8, #f6f0ea);
	--soform-filet: rgba(23, 18, 15, 0.12);

	position: relative;
	z-index: 1;
}

.soform-equipe__entete {
	margin-bottom: 48px;
}

.soform-equipe__surtitre {
	margin: 0 0 12px;
}

.soform-equipe__entete > .soform-equipe__surtitre:last-child {
	margin-bottom: 0;
}

/* Sur la fiche formation, la grille vient sous le duo de la référente : un
   filet et un surtitre la détachent, sinon les portraits se lisaient comme la
   suite du duo (08/10/2026). */
.soform-formation__formatrice .soform-equipe {
	margin-top: clamp(56px, 6vw, 88px);
	padding-top: clamp(40px, 4vw, 56px);
	border-top: 1px solid var(--soform-filet);
}

.soform-formation__formatrice .soform-equipe__entete {
	margin-bottom: 28px;
}

.soform-equipe__titre {
	margin: 0;
	font-family: "Plus Jakarta Sans", var(--theme-font-family, inherit);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--soform-encre);
}

.soform-equipe__chapeau {
	max-width: 640px;
	margin: 16px 0 0;
	font-size: var(--soform-corps, 16px);
	line-height: 1.6;
	color: var(--soform-texte);
}

/* Flex plutôt que grid : l'effectif de l'équipe change au gré des arrivées, et
   une grille laisse la dernière rangée incomplète collée à gauche — cinq
   portraits sur quatre colonnes donnaient quatre alignés puis un isolé, avec
   un trou de trois cases à sa droite. En flex, la rangée incomplète se centre
   sous les autres ; une rangée pleine, elle, se répartit exactement comme
   l'aurait fait la grille. */
.soform-equipe__grille {
	--soform-equipe-gouttiere: 24px;
	/* `--soform-equipe-colonnes-max` est posé par le shortcode selon l'effectif
	   (rangées équilibrées) ; les écrans plus étroits le plafonnent ci-dessous. */
	--soform-equipe-colonnes: var(--soform-equipe-colonnes-max, 4);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px var(--soform-equipe-gouttiere);
	margin: 0;
	padding: 0;
	list-style: none;
}

.soform-equipe__membre {
	display: flex;
	flex: 0 1 calc(
		(100% - (var(--soform-equipe-colonnes) - 1) * var(--soform-equipe-gouttiere))
		/ var(--soform-equipe-colonnes)
	);
	flex-direction: column;
	margin: 0;
}

.soform-equipe__cadre {
	position: relative;
	display: block;
	overflow: hidden;
	/* Un portrait se cadre en hauteur : au format paysage, le visage se perd
	   dans le décor de la cabine. */
	aspect-ratio: 3 / 4;
	border-radius: 15px;
	background-image: linear-gradient(157.87deg, #4a3e35 0%, #17120f 71.43%);
}

.soform-equipe__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.soform-equipe__membre:hover .soform-equipe__image {
	transform: scale(1.04);
}

/* Le voile ne porte aucun texte : il ne fait qu'asseoir le portrait sur le
   fond de la page, comme les vignettes du catalogue. */
.soform-equipe__voile {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(23, 18, 15, 0) 55%, rgba(23, 18, 15, 0.28) 100%);
}

.soform-equipe__corps {
	display: flex;
	flex-direction: column;
	padding: 18px 2px 0;
}

.soform-equipe__nom {
	font-family: "Plus Jakarta Sans", var(--theme-font-family, inherit);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--soform-encre);
}

.soform-equipe__role {
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.42;
	letter-spacing: 0.5px;
	color: var(--soform-texte-2);
}

.soform-equipe__filet {
	height: 1px;
	margin: 14px 0;
	background-color: var(--soform-filet);
}

.soform-equipe__ligne {
	font-size: 14px;
	line-height: 1.58;
	color: var(--soform-texte);
}

.soform-equipe__ligne--discret {
	margin-top: 4px;
	color: var(--soform-texte-2);
}

.soform-equipe__vide {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--soform-texte);
}

@media (max-width: 999.98px) {
	.soform-equipe__grille {
		--soform-equipe-colonnes: min(3, var(--soform-equipe-colonnes-max, 3));
	}
}

@media (max-width: 767.98px) {
	.soform-equipe__grille {
		--soform-equipe-colonnes: 2;
		--soform-equipe-gouttiere: 18px;
	}
}

/* Deux portraits de front même sur un petit téléphone : en une colonne, six
   portraits empilés faisaient plus de quatre écrans de défilement. */
@media (max-width: 439.98px) {
	.soform-equipe__grille {
		--soform-equipe-gouttiere: 12px;
		row-gap: 24px;
	}

	.soform-equipe__nom {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.soform-equipe__image {
		transition: none;
	}
}