/* Équipe — Metaconcept Core.
   Charte metaconcept : OR #D5AE05, GRIS FONCÉ #4D4D4D. Les tokens du site
   (--c-link, --c-base) priment ; les valeurs de charte sont le repli.
   Aucune règle ne cible un sélecteur Divi. */

.mc-equipe {
	--mc-gold: var(--c-link, #D5AE05);
	--mc-dark: var(--c-base, #4D4D4D);
	--mc-border: rgba(77, 77, 77, 0.16);

	display: grid;
	/* minmax(0, 1fr) et pas 1fr : le plancher automatique d'une piste de
	   grille est min-content, et un nom long élargirait la colonne au lieu
	   de passer à la ligne. */
	grid-template-columns: repeat(var(--mc-equipe-colonnes, 3), minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-equipe__personne {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	/* Une carte ne se laisse pas étirer par le texte de sa voisine : la
	   hauteur vient de la grille, la largeur est bornée par la piste. */
	min-width: 0;
}

.mc-equipe__photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--mc-border);
	background: #F2F2F2;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.mc-equipe__personne:hover .mc-equipe__photo {
	border-color: var(--mc-gold);
	transform: translateY(-3px);
}

.mc-equipe__photo--vide {
	display: block;
}

.mc-equipe__nom {
	font-weight: 700;
	line-height: 1.3;
	color: var(--mc-dark);
}

.mc-equipe__role {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--mc-gold);
}

/* Sur fond sombre, le nom doit rester lisible. */
.mc-hero--sombre .mc-equipe__nom,
.et_pb_section_dark .mc-equipe__nom {
	color: #FFFFFF;
}

@media (max-width: 900px) {

	.mc-equipe {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {

	.mc-equipe {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------
   LES COORDONNÉES — seulement là où on les a demandées
   ------------------------------------------------------------------
   [mc_equipe contact="1"] n'est écrit que sur la page À propos. Ailleurs
   — ruban de l'accueil, blocs d'appel à l'action — ces deux lignes
   n'existent pas dans le balisage, et non pas masquées par la feuille :
   une adresse cachée en CSS reste lisible par un robot. */

.mc-equipe__contact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 8px;
}

.mc-equipe__tel,
.mc-equipe__email {
	font-size: 0.78125rem;
	line-height: 1.45;
	color: var(--mc-gris, #6E757C);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mc-equipe__tel:hover,
.mc-equipe__email:hover {
	color: var(--mc-action, #D87A00);
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   LE REGROUPEMENT PAR PÔLE
   ------------------------------------------------------------------

   Demandé le 06/10 : « c'est cartographié en fonction des pôles, il
   faut les mettre par pôle ». Avant, la page contact portait trois
   intertitres écrits à la main dans Divi et la page À propos une liste
   à plat : deux présentations de la même équipe, qui divergeaient à
   chaque arrivée. Le shortcode rend maintenant les deux.

   L'INTERTITRE EST UN REPÈRE, PAS UN TITRE DE SECTION. Il annonce un
   sous-ensemble à l'intérieur d'une section qui a déjà son titre
   maison. Il reprend donc la voix des sur-titres du site — petites
   capitales, graisse 600, filet devant — et non celle d'un H2.
   Mesuré le 06/10 : les anciens intertitres sortaient en 19 px
   graisse 700, c'est-à-dire plus fort que le titre de la section
   qu'ils habitent. */

.mc-equipe-poles {
	display: flex;
	flex-direction: column;
	/* L'écart entre deux pôles doit se lire comme plus grand que
	   l'écart entre deux personnes d'un même pôle (28px) : sans ça,
	   les groupes se confondent en une seule grille. */
	gap: 44px;
}

.mc-equipe-pole__titre {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mc-gris, #6E757C);
}

/* Le filet devant l'intitulé, comme sur les sur-titres de section. Il
   est décoratif : il ne porte aucun texte et reste hors de la lecture
   d'un lecteur d'écran, qui entend l'intitulé seul. */
.mc-equipe-pole__titre::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	background: var(--mc-or, #D5AE05);
}

/* Les personnes sans pôle ferment la liste sans intertitre : elles
   restent visibles, mais rien ne vient annoncer un groupe qui n'en est
   pas un. Un filet suffit à les détacher du dernier pôle. */
.mc-equipe-pole--sans {
	padding-top: 32px;
	border-top: 1px solid rgba(77, 77, 77, 0.12);
}

@media (max-width: 900px) {

	.mc-equipe-poles {
		gap: 32px;
	}
}

/* Le lien LinkedIn. Il se range avec le téléphone et l'adresse, mais il
   n'est pas du texte : une pastille de la taille d'une cible tactile,
   dans le gris des coordonnées, qui prend la couleur d'action au survol
   comme les deux autres liens. */
.mc-equipe__linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-top: 4px;
	border: 1px solid rgba(77, 77, 77, 0.16);
	border-radius: 50%;
	color: var(--mc-gris, #6E757C);
	transition: color 0.18s ease, border-color 0.18s ease;
}

.mc-equipe__linkedin:hover,
.mc-equipe__linkedin:focus-visible {
	color: var(--mc-action, #D87A00);
	border-color: var(--mc-action, #D87A00);
}

/* ==================================================================
   LES FICHES DE PÔLE SE LISENT EN LIGNE — 08/10
   ==================================================================

   Demande du 08/10 sur /presentation/ et /contact/ : « c'est trop
   espacé », et il faut pouvoir monter à cinq personnes par pôle.

   Mesuré avant : trois colonnes de 461 px, des fiches de 231 px de
   haut, photo au-dessus et texte centré dessous. Trois personnes
   occupaient toute la largeur de lecture pour quatre lignes de texte.

   LA PHOTO PASSE À GAUCHE. Le nom, le rôle et les coordonnées se
   rangent à sa droite, alignés à gauche : on lit un nom en diagonale,
   pas au centre. Résultat mesuré : fiches de 269 × 111 px, cinq par
   rangée sur la largeur de lecture — moins de la moitié de la hauteur
   d'avant.

   PAS DE BALISE EN PLUS. Les quatre éléments — photo, nom, rôle,
   coordonnées — sont frères dans le balisage ; une rangée en flex les
   mettrait tous les quatre côte à côte. Une grille nommée place donc
   la photo sur trois rangs et empile le reste à sa droite, sans
   toucher au rendu PHP.

   LA PORTÉE EST .mc-equipe-pole, ET SEULEMENT ELLE. Le même composant
   sert le ruban défilant de l'accueil et le duo des blocs de devis,
   où la fiche verticale reste la bonne. Viser .mc-equipe__personne
   tout court les emporterait avec.
   ================================================================== */

.mc-equipe-pole .mc-equipe {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 18px 24px;
}

/* LE MOU VA DANS LA DERNIÈRE RANGÉE, PAS AILLEURS — 08/10.
 *
 * Signalé le jour même : les noms d'une même rangée n'étaient pas à la
 * même hauteur. Mesuré sur /presentation/ : 6 px d'écart dans Force de
 * vente France, 13 px dans Recyclage.
 *
 * La cause tient à la photo, qui occupe les trois rangs. Quand le texte
 * d'une fiche est plus court que ses 72 px — une personne sans
 * téléphone, ou sans LinkedIn — la grille étire les rangs pour
 * atteindre la hauteur de la photo, et elle les étire PROPORTIONNELLE-
 * MENT. Chaque fiche ayant un contenu différent, chacune répartissait
 * son mou autrement, et le nom se décalait.
 *
 * « auto auto 1fr » règle la question : les deux premiers rangs
 * prennent exactement la hauteur de leur texte — donc la même partout
 * — et tout le reste tombe dans le troisième. Mesuré après : zéro
 * écart sur les trois pôles. */
.mc-equipe-pole .mc-equipe__personne {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"photo nom"
		"photo role"
		"photo contact";
	align-items: start;
	column-gap: 14px;
	row-gap: 2px;
	text-align: left;
}

.mc-equipe-pole .mc-equipe__photo {
	grid-area: photo;
	width: 72px;
	height: 72px;
	margin: 0;
	align-self: start;
}

.mc-equipe-pole .mc-equipe__nom {
	grid-area: nom;
}

.mc-equipe-pole .mc-equipe__role {
	grid-area: role;
	margin: 0;
}

/* overflow-wrap : une adresse de courriel ne connaît pas d'espace, et
   sans ça elle déborderait de sa colonne de 180 px. */
.mc-equipe-pole .mc-equipe__contact {
	grid-area: contact;
	margin-top: 4px;
	font-size: 0.8125rem;
	overflow-wrap: anywhere;
}