/*
 * E2IT - page de l equipe.
 *
 * Portraits au format portrait, pas paysage : c est le cadrage d une photo de
 * personne, et le paysage coupe les visages ou laisse du decor inutile.
 *
 * La hierarchie passe par le regroupement et par deux formats de carte. Aucun
 * nom n est plus gros qu un autre - Jean-Claude a cree E2IT parce que dans les
 * grands groupes on devient un numero.
 */

.e2it-equipe-page {
	width: 100%;
	max-width: var(--e2it-largeur-contenu);
	margin-inline: auto;
	padding: 0 var(--e2it-gouttiere);
}

.e2it-equipe-page__grille {
	display: grid;
	gap: var(--e2it-espace-4);
}

/* Une seule grille de trois colonnes : deux rangees de trois portraits. */
.e2it-equipe-page__grille {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.e2it-portrait {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--e2it-rayon-carte);
	background: linear-gradient(150deg, var(--e2it-bleu-profond), var(--e2it-marine));
	transition:
		transform var(--e2it-duree-rapide) var(--e2it-courbe),
		box-shadow var(--e2it-duree-rapide) var(--e2it-courbe);
}

/* Le format large de la direction reste un portrait, simplement moins etroit :
   passer en paysage couperait les visages. */
.e2it-portrait--large {
	aspect-ratio: 4 / 4.4;
}

.e2it-portrait__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.e2it-portrait__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 600ms var(--e2it-courbe);
	/* Cadrage haut : les visages restent dans l image quand la photo est plus
	   large que le cadre. */
	object-position: 50% 25%;
	display: block;
}

.e2it-portrait__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 46, 94, .05) 0%, rgba(7, 28, 62, .78) 58%, rgba(5, 21, 47, .94) 100%);
}

.e2it-portrait__anciennete {
	position: absolute;
	top: var(--e2it-espace-4);
	right: var(--e2it-espace-4);
	z-index: 2;
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-glacier);
}

.e2it-portrait__corps {
	position: relative;
	z-index: 2;
	padding: var(--e2it-espace-6);
}

.e2it-portrait__fonction {
	display: block;
	margin-bottom: var(--e2it-espace-2);
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-glacier);
}

.e2it-portrait__nom {
	margin: 0;
	font-family: var(--e2it-police);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--e2it-blanc);
}

.e2it-portrait__resume {
	display: block;
	margin-top: var(--e2it-espace-3);
	max-width: 34ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--e2it-bleu-clair);
}

.e2it-portrait__habilitations {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2it-espace-2);
	margin-top: var(--e2it-espace-4);
}

.e2it-portrait__habilitations span {
	padding: 4px 9px;
	border-radius: var(--e2it-rayon-pilule);
	background: rgba(255, 255, 255, .12);
	font-family: var(--e2it-police-mono);
	font-size: 9px;
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-clair);
}

@media (max-width: 1024px) {
	.e2it-equipe-page__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.e2it-equipe-page__grille {
		grid-template-columns: 1fr;
	}

	/* Hauteur minimale et non rapport d aspect : dans une grille imbriquee
	   dans un conteneur flexible Elementor, la hauteur du bloc est figee avant
	   que les rapports d aspect ne soient resolus. Les cartes grandissaient
	   ensuite sans mettre la boite a jour, et les sections suivantes se
	   superposaient - 631 px de decalage mesures en une colonne. */
	.e2it-portrait,
	.e2it-portrait--large {
		aspect-ratio: auto;
		min-height: 420px;
	}
}

/* ------------------------------------------------------------------
   Survol des portraits

   Trois mouvements lents et de faible amplitude : la carte se souleve de
   2 px comme partout ailleurs sur le site, l image se rapproche de 4 %, et
   le voile s allege pour que le visage ressorte. Une amplitude plus forte
   ferait un effet ; a cette echelle, c est une reaction.
   ------------------------------------------------------------------ */

.e2it-portrait:hover {
	transform: translateY(-2px);
	box-shadow: var(--e2it-eleve);
}

.e2it-portrait:hover .e2it-portrait__media img {
	transform: scale(1.04);
}

/* Le voile ne s efface pas : il s allege en haut, la ou il n y a pas de
   texte, et reste dense en bas pour que le nom tienne son contraste. */
.e2it-portrait__media::after {
	transition: background 400ms var(--e2it-courbe);
}

/* Le voile recule nettement : transparent jusqu aux deux tiers de la carte,
   la ou se trouve le visage, puis dense sur le dernier tiers pour que le nom
   garde son contraste. C est la limite - au-dela, le texte passe sous le
   seuil de lisibilite des qu une photo est claire. */
.e2it-portrait:hover .e2it-portrait__media::after {
	background: linear-gradient(180deg, rgba(11, 46, 94, 0) 0%, rgba(7, 28, 62, .12) 45%, rgba(7, 28, 62, .68) 72%, rgba(5, 21, 47, .93) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.e2it-portrait,
	.e2it-portrait__media img,
	.e2it-portrait__media::after { transition: none; }

	.e2it-portrait:hover { transform: none; }
	.e2it-portrait:hover .e2it-portrait__media img { transform: none; }
}

/* ------------------------------------------------------------------
   Renvois de bas de page

   Une page qui s arrete sans proposition suivante est une impasse. Deux
   cartes sobres, le meme vocabulaire que les renvois des fiches chantier.
   ------------------------------------------------------------------ */

.e2it-renvois {
	width: 100%;
	max-width: var(--e2it-largeur-contenu);
	margin-inline: auto;
	padding: 0 var(--e2it-gouttiere);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--e2it-espace-4);
}

.e2it-renvoi {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--e2it-espace-6);
	background: var(--e2it-blanc);
	border: 1px solid var(--e2it-bordure);
	border-left: 3px solid var(--e2it-bleu-pale);
	border-radius: var(--e2it-rayon-carte);
	text-decoration: none;
	transition:
		transform var(--e2it-duree-rapide) var(--e2it-courbe),
		box-shadow var(--e2it-duree-rapide) var(--e2it-courbe),
		border-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-renvoi:hover {
	transform: translateY(-2px);
	box-shadow: var(--e2it-eleve);
	border-color: var(--e2it-bleu-crete);
	border-left-color: var(--e2it-accent);
}

.e2it-renvoi:focus-visible {
	outline: 3px solid var(--e2it-accent);
	outline-offset: 3px;
}

.e2it-renvoi__surtitre {
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-crete);
}

.e2it-renvoi__titre {
	font-family: var(--e2it-police);
	font-size: var(--e2it-h4-taille);
	font-weight: var(--e2it-h4-graisse);
	line-height: var(--e2it-h4-interligne);
	color: var(--e2it-marine);
}

@media (prefers-reduced-motion: reduce) {
	.e2it-renvoi { transition: none; }
	.e2it-renvoi:hover { transform: none; }
}

/* L enveloppe de widget doit suivre son contenu : c est elle qui portait la
   hauteur trop courte a l origine de la superposition. */
.elementor-widget-e2it_equipe_page,
.elementor-widget-e2it_equipe_page > .elementor-widget-container {
	width: 100%;
	height: auto;
	min-height: 0;
}


/* Sept membres : la grille de trois laisserait une carte seule. Quatre
   colonnes, et le president sur deux rangees : huit cases, grille pleine
   (4 + 4, puis 2 par ligne sur tablette). */
@media (min-width: 1025px) {
	.e2it-equipe-page__grille:has(> :nth-child(7):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 640px) {
	.e2it-equipe-page__grille:has(> :nth-child(7):last-child) > :first-child {
		grid-row: span 2;
	}

	/* Le format 3:4 empecherait la carte de s etirer sur deux rangees. */
	.e2it-equipe-page__grille:has(> :nth-child(7):last-child) > :first-child:not(#e2it) {
		aspect-ratio: auto;
	}
}

/* Portraits recadres en buste : visage dans le tiers haut. Le cadrage
   haut du president (tete a la taille) garde aussi le visage en haut
   quand sa carte redevient une carte 3:4 sur mobile. */
.e2it-portrait__media img:not(#e2it) {
	object-position: 50% 8%;
}