/*
 * E2IT - section equipe.
 * Valeurs reprises de la specification. Le rail se translate dans un cadre
 * qui masque : deux elements distincts, jamais un seul.
 */

.e2it-equipe {
	display: grid;
	/* .78fr plutot que .68 : le portrait gagne en presence et l ecart de poids
	   visuel entre les deux colonnes se resserre. */
	grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
	gap: 64px;
	/* Alignement en haut : le titre vit maintenant dans la colonne gauche,
	   son sommet doit coincider avec celui de la carte. */
	align-items: start;
}

/* Colonne gauche : texte, selecteur, pied. */
.e2it-equipe__colonne {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Surtitre aligne sur celui des expertises : bleu crete, pas gris texte. */
.e2it-equipe__surtitre {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 var(--e2it-tete-surtitre);
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--e2it-bleu-crete);
}

.e2it-equipe__filet {
	flex: none;
	width: 28px;
	height: 2px;
	background: var(--e2it-accent);
}

.e2it-equipe__titre {
	margin: 0 0 var(--e2it-tete-titre);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.03em;
	/* Marine, comme les deux autres titres de section sur fond clair.
	   La specification demandait le noir de texte, ce qui en faisait le seul
	   titre de la page a ne pas suivre la charte. */
	color: var(--e2it-marine);
	text-wrap: balance;
}

.e2it-equipe__intro {
	/* 520 px : au-dela, les lignes depassent le confort de lecture. */
	max-width: 520px;
	margin: 0 0 var(--e2it-tete-bloc);
	font-size: 18px;
	line-height: 1.65;
	color: var(--e2it-texte-secondaire);
	text-wrap: pretty;
}

/* ---- Selecteur ---- */
.e2it-equipe__liste { border-top: 1px solid var(--e2it-bordure); }

.e2it-equipe__ligne {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 17px 14px 17px 4px;
	border-bottom: 1px solid var(--e2it-bleu-pale);
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--e2it-duree-moyenne) ease, padding-left .24s cubic-bezier(.22,.61,.36,1), box-shadow var(--e2it-duree-rapide) ease;
}

.e2it-equipe__ligne:hover { background: var(--e2it-fond-gris); }

/* Trois marqueurs simultanes : fond, lisere, decalage. */
.e2it-equipe__ligne.est-actif {
	background: var(--e2it-fond-gris);
	box-shadow: inset 2px 0 0 var(--e2it-accent);
	padding-left: 14px;
}

.e2it-equipe__num {
	flex: none;
	width: 26px;
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--e2it-texte-secondaire);
}

.e2it-equipe__ligne.est-actif .e2it-equipe__num { color: var(--e2it-bleu-profond); }

.e2it-equipe__nom {
	font-size: 17px;
	font-weight: 600;
	color: var(--e2it-texte);
}

.e2it-equipe__ligne.est-actif .e2it-equipe__nom { color: var(--e2it-marine); }

.e2it-equipe__fonction {
	margin-left: auto;
	font-size: 15px;
	color: var(--e2it-texte-secondaire);
}

.e2it-equipe__chevron {
	flex: none;
	font-size: 15px;
	color: var(--e2it-marine);
	opacity: 0;
}

.e2it-equipe__ligne.est-actif .e2it-equipe__chevron { opacity: 1; }

/* ---- Pile de portraits ---- */
/* Reserve interne de 24 px : les fantomes se decalent vers l interieur,
   ils ne debordent jamais de la colonne. */
.e2it-equipe__pile {
	/* justify-self plutot que margin-left: auto : une marge automatique sur un
	   element de grille desactive l etirement, et la pile se dimensionnait
	   alors sur son contenu au lieu des 424 px prevus. */
	width: 100%;
	max-width: 424px;
	justify-self: center;
	/* La pile est plus courte que la colonne de texte : alignee par le
	   sommet, son deficit de 81 px tombait entierement en bas, d ou le vide
	   sous la barre de navigation pendant que la liste continuait a gauche.
	   Ce centrage remplace l alignement des sommets titre-carte decrit
	   plus haut : l equilibre general a ete juge prioritaire. */
	align-self: center;
	/* Sans min-width: 0, un element de grille ne peut pas devenir plus etroit
	   que son contenu : les cartes non compressibles forcaient la section a
	   1050 px de large sur un ecran de 390. */
	min-width: 0;
}

/* Zone du portrait, avec la reserve de 24 px pour les fantomes. */
.e2it-equipe__portrait {
	position: relative;
	min-width: 0;
	padding: 0 24px 24px 0;
}

.e2it-equipe__fantome {
	position: absolute;
	border: 1px solid var(--e2it-bordure);
	border-radius: var(--e2it-rayon-carte);
	pointer-events: none;
}

.e2it-equipe__fantome--arriere { left: 24px; right: 0; top: 24px; bottom: 0; background: var(--e2it-bleu-pale); }
.e2it-equipe__fantome--milieu { inset: 12px 12px 12px 12px; background: #DAE5F1; }

.e2it-equipe__cadre {
	position: relative;
	overflow: hidden;
	border-radius: var(--e2it-rayon-carte);
	box-shadow: 0 22px 48px rgba(7, 28, 62, .2);
	background: var(--e2it-marine);
	min-width: 0;
	cursor: grab;
	touch-action: pan-y;
}

.e2it-equipe__cadre.est-saisi { cursor: grabbing; }

.e2it-equipe__rail {
	display: flex;
	transition: transform .52s cubic-bezier(.22,.61,.36,1);
}

.e2it-equipe__rail.sans-transition { transition: none; }

.e2it-equipe__carte {
	position: relative;
	flex: 0 0 100%;
	aspect-ratio: 3 / 4;
	background: var(--e2it-marine);
	overflow: hidden;
}

.e2it-equipe__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.e2it-equipe__voile {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(7,28,62,.96) 0%, rgba(11,46,94,.76) 36%, rgba(11,46,94,.14) 66%, rgba(11,46,94,0) 100%);
}

.e2it-equipe__pastille {
	position: absolute;
	top: 26px;
	left: 26px;
	padding: 7px 11px;
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--e2it-marine);
	background: var(--e2it-blanc);
	border-radius: 4px;
}

.e2it-equipe__bloc {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 30px 28px 26px;
}

.e2it-equipe__carte-fonction {
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--e2it-glacier);
}

.e2it-equipe__carte-nom {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--e2it-blanc);
}

.e2it-equipe__carte-resume {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--e2it-bleu-clair);
}

.e2it-equipe__carte-pied {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid rgba(169, 196, 229, .32);
	font-family: var(--e2it-police-mono);
	font-size: 10px;
	letter-spacing: .12em;
}

/* Habilitations en blanc : a 10 px le glacier ne passe pas le AA. */
.e2it-equipe__hab { color: var(--e2it-blanc); }
.e2it-equipe__anc { color: var(--e2it-glacier); }
.e2it-equipe__trait { flex: 1; height: 1px; background: rgba(169, 196, 229, .32); }

/* ---- Barre de navigation ---- */
.e2it-equipe__nav {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 24px 0 0;
}

.e2it-equipe__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--e2it-marine);
	background: var(--e2it-blanc);
	border: 1px solid #C9D6E5;
	border-radius: var(--e2it-rayon-pilule);
	cursor: pointer;
	transition: background-color var(--e2it-duree-rapide) var(--e2it-courbe), border-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-equipe__fleche:hover:not([disabled]) { background: var(--e2it-bleu-pale); border-color: var(--e2it-marine); }
.e2it-equipe__fleche[disabled] { color: var(--e2it-glacier); opacity: .55; cursor: not-allowed; }

.e2it-equipe__jauge { flex: 1; height: 2px; background: var(--e2it-bordure); border-radius: 2px; overflow: hidden; }
.e2it-equipe__jauge span { display: block; height: 100%; width: 25%; background: var(--e2it-accent); transition: width .52s cubic-bezier(.22,.61,.36,1); }

.e2it-equipe__compteur {
	flex: none;
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--e2it-texte-secondaire);
}

/* ---- Pied ---- */
/* margin-top auto : le bas de la colonne gauche vient a hauteur du bas de la
   barre de navigation du portrait. */
.e2it-equipe__pied {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: auto;
	padding-top: var(--e2it-espace-6);
}
.e2it-equipe__mention {
	margin: 0;
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--e2it-texte-secondaire);
}

.e2it-equipe__vide { margin: 0; padding: var(--e2it-espace-6); text-align: center; color: var(--e2it-texte-tertiaire); }

/* ---- Mobile : le selecteur disparait, le rail devient defilant ---- */
@media (max-width: 1024px) {
	.e2it-equipe { grid-template-columns: 1fr; gap: var(--e2it-espace-6); }
	.e2it-equipe__liste { display: none; }
	.e2it-equipe__titre { font-size: 28px; }
	.e2it-equipe__intro { font-size: 16px; max-width: none; padding-right: 20px; }
	.e2it-equipe__surtitre { padding-right: 20px; }
	.e2it-equipe__pied { margin-top: var(--e2it-espace-6); padding-top: 0; }
	.e2it-equipe__pile { max-width: none; margin-left: 0; padding: 0; }
	.e2it-equipe__fantome { display: none; }
	.e2it-equipe__portrait { padding: 0; }
	.e2it-equipe__cadre {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		box-shadow: none;
		background: none;
		border-radius: 0;
		cursor: default;
		/* La regle de base porte touch-action: pan-y, pour que le glisser au
		   pointeur d ordinateur ne vole pas le defilement vertical. Sur mobile
		   le rail defile nativement : pan-y y interdit tout geste horizontal,
		   et le carrousel devient immobile. On rend donc l axe X au navigateur. */
		touch-action: pan-x pan-y;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}
	.e2it-equipe__cadre::-webkit-scrollbar { display: none; }
	.e2it-equipe__rail { gap: 14px; transition: none; transform: none !important; }
	.e2it-equipe__carte {
		flex: 0 0 246px;
		scroll-snap-align: start;
		border-radius: var(--e2it-rayon-carte);
	}
	/* Contenu allege : ni resume ni anciennete au doigt. */
	.e2it-equipe__carte-resume, .e2it-equipe__anc, .e2it-equipe__trait { display: none; }
	.e2it-equipe__carte-nom { font-size: 21px; }
	.e2it-equipe__bloc { padding: 22px 20px 20px; gap: 8px; }
	.e2it-equipe__carte-pied { border-top: 0; padding-top: 0; }
	/* Les fleches restent la seule commande visible sur mobile, le selecteur
	   etant masque : les cacher ne laissait aucune prise a qui ne devine pas
	   le glisser. Cible de 48 px, au-dela du minimum tactile. */
	.e2it-equipe__fleche { width: 48px; height: 48px; }
	.e2it-equipe__nav { margin: var(--e2it-espace-4) 0 0; }
	.e2it-equipe__pied { flex-direction: column; align-items: stretch; gap: var(--e2it-espace-3); }
	.e2it-equipe__pied .e2it-bouton { justify-content: center; }
	.e2it-equipe__mention { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.e2it-equipe__rail, .e2it-equipe__ligne, .e2it-equipe__jauge span { transition: none; }
}