/* Refonte 2026 : nouvelle page Équipe (voir am-refonte.css pour les variables --am-*, am-header.css pour --am-header-*) */

/*
 * Chargée seulement quand page-team.php affiche la nouvelle version (amIsNewEquipe(), functions.php).
 * Sections : 1. bandeau teal (titre + citation), 2. l'excellence du coaching, 3. grille des membres.
 * Structure : parts/team/sections.php puis une partie par section. Mesures : docs/specs/equipe-0*.md et relevés au pixel
 * sur l'aplat refonte/exports/01_team amagar.jpg (maquette 1920 px).
 * Tailles de police : --am-fs-* ou calc(… * var(--am-type-scale)) uniquement (maquette ~17 % trop grande, voulu) :
 * tous les textes rendus sont donc à 83 % des tailles de la maquette, les espacements et les images restent à 100 %.
 *
 * Fuites de l'ancien thème neutralisées :
 * - general.css « main > section:not(.no-reveal) { opacity: 0; top: 10vh } » (apparition au défilement pilotée par
 *   amagar.js) : les sections portent .no-reveal (V1 sans animation d'entrée) ;
 * - general.css « body { text-align: center } », « img { max-width: 100% } » et reset.css « body { line-height: 1 } » :
 *   reposés sous .am-team ;
 * - inc/header.css « header { position: fixed; height: 7.65em } » : le bandeau de titre est un <section>, pas un
 *   <header>, malgré la structure proposée par equipe-01-hero-citation.md.
 */

.am-team {
	/* Débord du conteneur resserré jusqu'au bord droit de la page (photo de la section 2) : marge de page en dessous
	   de 1580 px de large, moitié de l'espace restant au-delà. */
	--am-team-bleed: max(var(--am-space-page), calc((100vw - var(--am-container-narrow)) / 2));
	/* Écart entre deux sections de contenu : porté par le padding-bottom de la section qui précède
	   (photo de la section 2 à y = 1938, titre de la section 3 à y = 2080 sur la maquette). */
	--am-team-section-gap: 8.875rem;
	position: relative;
	background-color: var(--am-color-white);
	color: var(--am-color-ink);
	font-family: var(--am-font-sans);
	text-align: left; /* general.css : body { text-align: center } */
	overflow-x: clip;
}


/*******************
 1. bandeau teal : titre de page et citation
*******************/

/*
 * Maquette : aplat #198E8D (fusionné dans --am-color-teal-deep) de y = 0 à 948, pleine largeur ; header transparent
 * (voile 34 %) posé par-dessus, de y = 29 à 128. Bloc de texte à x ≈ 115 sur la maquette, ramené dans
 * --am-container-narrow comme les sections 2 et 3 et le header (décision du 18/09/2026).
 * Repères verticaux (encre) : accent du É à y = 266, bas des jambages de « Équipe » à 528, citation de 590 à 709
 * (deux lignes, interligne 77 px), auteur de 749 à 762, bas du bandeau à 948.
 * Le texte rendu faisant 83 % de la maquette, le bloc est calé sur le haut (accent du titre à 266) et l'écart
 * supplémentaire tombe en bas du bandeau.
 */
.am-team-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: max(49.375vw, 30rem);
	padding: max(calc(var(--am-header-h) + var(--am-header-float) + var(--am-space-6)), 14.74vw) 0 max(var(--am-space-9), 9.6875vw);
	background-color: var(--am-color-teal-deep);
	color: var(--am-color-white);
	--am-veil-color: var(--am-color-teal-deep); /* voile d'entrée (.am-veil-reveal) de la couleur du bandeau : seul le texte se dévoile */
}

/*
 * Graisse 700, comme les bandeaux des autres pages (.am-page-hero__title, am-pages.css) : la demande du 18/09
 * n'avait été appliquée qu'à ceux-là, ce bandeau était resté en --am-fw-semibold (600), absent des Poppins
 * locales (400, 500, 700) et donc rendu en Medium 500. Le segment serif italique du titre mixte garde sa
 * graisse normale (.am-title em, am-refonte.css).
 */
.am-team-hero__title {
	color: var(--am-color-white);
	font-weight: var(--am-fw-bold);
}

/*
 * Citation : DM Serif Display ROMAIN (et non italique comme le propose equipe-01-hero-citation.md — le raster montre des
 * lettres droites, vérifié au zoom et par calibrage de la largeur d'encre), 54,9 px et interligne 77 px (1,4).
 * Hors barème : aucun rôle de jetons.md à cette taille, d'où le calc() local, comme pour l'introduction du hero de l'accueil.
 * Les guillemets font partie du texte saisi (« » du docx, « » droits sur la maquette).
 */
.am-team-hero__quote {
	max-width: 18em;
	margin: 3.875rem 0 0; /* 62 px : écart d'encre à encre du bas de « Équipe » (y = 528) au haut de la citation (y = 590) */
	font-family: var(--am-font-serif-display);
	font-size: calc(clamp(1.75rem, 2.8594vw, 3.4375rem) * var(--am-type-scale));
	font-style: normal;
	font-weight: var(--am-fw-regular);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--am-color-white);
}
.am-team-hero__quote p {
	margin: 0;
}
/* Auteur : Poppins régulier, 19,2 px mesurés sur le raster (tracé probable à 20 px, cf. am-refonte.css) */
.am-team-hero__quote cite {
	display: block;
	margin-top: 1.1875rem; /* 19 px de boîte à boîte : rétablit les 40 px d'encre à encre de la maquette (la dernière ligne de la citation n'a pas de jambage) */
	font-family: var(--am-font-sans);
	font-size: calc(1.25rem * var(--am-type-scale));
	font-style: normal;
	font-weight: var(--am-fw-regular);
	line-height: var(--am-lh-body);
	color: var(--am-color-white);
}

	/* Pas de maquette tablette ni mobile : proposition. Le bandeau cesse d'être proportionnel à la largeur
	   (min-height) et les marges hautes se réduisent à la garde du header. */
	@media screen and (max-width: 1023px) {
		.am-team-hero__quote { margin-top: var(--am-space-8); }
		.am-team-hero__quote cite { margin-top: var(--am-space-6); }
	}
	@media screen and (max-width: 767px) {
		.am-team-hero {
			min-height: 26rem;
			padding-bottom: var(--am-space-8);
		}
		.am-team-hero__quote { max-width: none; }
	}


/*******************
 2. l'excellence du coaching
*******************/

/*
 * Maquette : colonne de texte dans --am-container-narrow (encre à x = 247, soit exactement le bord de contenu du
 * conteneur resserré à 1920 px), titre sur 716 px, introduction et blocs sur 664 px. Photo de x = 1041 (55,7 % de la
 * largeur de contenu) au bord droit de la page, de y = 1075 à 1938, coins gauches arrondis de 44 px
 * (= --am-radius-photo, estimation de jetons.md confirmée au pixel ici).
 * Repères verticaux (boîtes de texte reconstituées depuis les calques) : titre à y = 1060, introduction à 1271,
 * « Notre engagement » à 1485, second bloc à 1737, bas du texte à 1916.
 * Largeurs de texte en em : les lignes se coupent comme dans la maquette malgré les polices à 83 %.
 */
.am-team-excellence {
	position: relative;
	padding-top: 7rem; /* 112 px : du bas du bandeau teal (y = 948) au haut du titre (y = 1060) */
	padding-bottom: var(--am-team-section-gap);
}
.am-team-excellence__inner {
	display: grid;
	grid-template-columns: minmax(0, 55.7%) minmax(0, 1fr);
	align-items: start;
}

.am-team-excellence__title {
	max-width: 12em; /* 716 px pour 60 px de corps : la coupure de ligne saisie dans le champ (<br>) reste la même à toute taille */
	margin: 0;
}
/* Le segment serif du titre est à approche nulle dans la maquette, contrairement au segment Poppins (−40 ‰ em) :
   sans cette remise à zéro, « portée par nos experts. » se rendait 9 % trop étroit. Idem pour le titre de la section 3. */
.am-team-excellence__title em,
.am-team-excellence__title i,
.am-team-excellence__title .am-serif,
.am-team-members__title em,
.am-team-members__title i,
.am-team-members__title .am-serif {
	letter-spacing: 0;
}
/* Introduction : Poppins Medium 30 px, interligne 40 px (1,333), colonne de 664 px = 22,13 em */
.am-team-excellence__intro {
	max-width: 22.13em;
	margin: var(--am-space-10) 0 0;
	font-size: calc(1.875rem * var(--am-type-scale));
	line-height: 1.333;
	font-weight: var(--am-fw-medium);
}
.am-team-excellence__block {
	margin-top: 3.375rem; /* 54 px entre la boîte de l'introduction et celle du premier bloc */
}
.am-team-excellence__block + .am-team-excellence__block {
	margin-top: var(--am-space-10); /* 72 px entre deux blocs (3 retours à la ligne dans le calque de la maquette) */
}
.am-team-excellence__block-title {
	margin: 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-subtitle);
	line-height: var(--am-lh-subtitle);
	font-weight: var(--am-fw-semibold);
}
/* Texte des blocs : Poppins Medium 24 px, interligne 36 px (1,5), colonne de 664 px = 27,67 em */
.am-team-excellence__block-text {
	max-width: 27.67em;
	margin: 0;
	font-size: var(--am-fs-body-lg);
	line-height: var(--am-lh-body-lg);
	font-weight: var(--am-fw-medium);
}

/*
 * Photo : 879 × 863 px à 1920 (bord droit de la page compris), soit un rapport de 1,019.
 * align-self: stretch garde ce rapport comme hauteur minimale (le rapport sert au calcul de la rangée) et fait suivre
 * la hauteur de la colonne de texte quand celle-ci devient la plus haute, en dessous de ~1500 px de large.
 */
.am-team-excellence__photo {
	position: relative;
	align-self: stretch;
	width: calc(100% + var(--am-team-bleed)); /* largeur explicite : sinon le rapport reprend la main sur la largeur quand la hauteur est imposée par la rangée */
	margin: 0.9375rem 0 0; /* la photo démarre 15 px sous le haut de la boîte du titre */
	aspect-ratio: 879 / 863;
	overflow: hidden;
	border-radius: var(--am-radius-photo) 0 0 var(--am-radius-photo);
}
.am-team .am-team-excellence__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}
/* Sans photo : la colonne de texte reprend toute la largeur du conteneur */
.am-team-excellence--sans-photo .am-team-excellence__inner {
	grid-template-columns: minmax(0, 1fr);
}

	/* Pas de maquette tablette ni mobile : proposition. Sous 1024 px, texte puis photo empilés, photo dans les marges
	   de page (le débord pleine largeur n'a de sens qu'en desktop large) et cadrage proche du fichier source (4/3). */
	@media screen and (max-width: 1023px) {
		.am-team-excellence {
			padding-top: var(--am-space-12);
			padding-bottom: var(--am-space-12);
		}
		.am-team-excellence__inner {
			grid-template-columns: minmax(0, 1fr);
		}
		.am-team-excellence__photo {
			width: 100%; /* plus de débord : la photo reste dans les marges de page, des deux côtés */
			margin: var(--am-space-10) 0 0;
			aspect-ratio: 4 / 3;
			border-radius: var(--am-radius-photo);
		}
	}
	@media screen and (max-width: 767px) {
		.am-team-excellence__intro { margin-top: var(--am-space-8); }
		.am-team-excellence__block { margin-top: var(--am-space-7); }
		.am-team-excellence__block + .am-team-excellence__block { margin-top: var(--am-space-8); }
		.am-team-excellence__photo { margin-top: var(--am-space-8); }
	}


/*******************
 3. grille des membres
*******************/

/*
 * Maquette (aplat 01_team amagar.jpg, relevés au pixel ; les découpes equipe-02 à 09 donnent la même photo de 451 × 511 px
 * sur un canevas plus large, d'où les 500–533 px de la spec, qui comptent les marges des calques) :
 * - titre à x = 244, dans --am-container-narrow comme la section 2 ; encre de y = 2080 à 2213, coupure avant le segment
 *   en italique (« Notre équipe » / « de coachs experts. », saisie <br> dans le champ, comme le titre de la section 2) ;
 * - trois colonnes régulières sur les trois rangées de l'aplat : photos de x = 254 à 705, 732 à 1182, 1216 à 1666, soit
 *   exactement le conteneur resserré (250 à 1670 à 1920 px) : 3 × 452 px et deux gouttières de 32 px (--am-space-6) ;
 * - photo de 452 × 511 px sur toutes les fiches (rapport retenu pour la grille), coins de ~44–48 px (--am-radius-photo) ;
 * - écarts d'encre à encre : bas du titre → haut des photos 81 px, bas de photo → nom 36 px, nom → fonction 21 px,
 *   fonction → pastille 25 px ; pastille et drapeau de 46 px, 10 px entre eux ; bas des pastilles → photos de la rangée
 *   suivante 87 px (rangées 1 → 2) ; bas des dernières pastilles (y = 4551) → pied de page (y = 4701) 150 px.
 * Pastille et drapeaux réduits de 25 % par rapport à la maquette (décision du 18/09/2026).
 * Écart assumé avec la maquette (retours de la cliente du 22/09/2026) : les drapeaux ne disent plus la nationalité
 * (un seul drapeau, à droite de la pastille LinkedIn) mais les langues de travail, en nombre quelconque — jusqu'à
 * quatre. Ils passent donc sur leur propre ligne sous la pastille (.am-team-members__langues), derrière un libellé
 * visible « Intervient en : » ; les noms de langues restent dans le balisage pour les lecteurs d'écran (.am-sr-only),
 * les drapeaux sont décoratifs.
 */
.am-team-members {
	position: relative;
	padding-bottom: 9.375rem; /* 150 px : du bas des pastilles de la dernière rangée au haut du pied de page */
}
.am-team-members__title {
	margin: 0;
}
.am-team-members__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--am-space-6);
	row-gap: 5.4375rem; /* 87 px du bas des pastilles au haut des photos de la rangée suivante */
	margin: 0;
	padding: 0;
	list-style: none;
}
.am-team-members__title + .am-team-members__grid {
	margin-top: 5rem; /* 81 px d'encre à encre du bas du titre (jambage de « experts ») au haut des photos */
}
.am-team-members__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Photo : rapport unique pour toutes les fiches, portrait recadré depuis le haut pour garder les visages */
.am-team-members__photo {
	position: relative;
	width: 100%;
	margin: 0;
	aspect-ratio: 452 / 511;
	overflow: hidden;
	border-radius: var(--am-radius-photo);
}
.am-team .am-team-members__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 0;
}

.am-team-members__body {
	margin-top: 2.0625rem; /* 33 px : l'encre du nom démarre 36 px sous la photo, comme sur la maquette */
}
.am-team-members__body:first-child,
.am-team-members__body > :first-child {
	margin-top: 0;
}
.am-team-members__name {
	margin: 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-name);
	line-height: 1.1; /* 0,86 dans la maquette (jetons.md, anomalie 8) : illisible dès qu'un nom passe sur deux lignes */
	font-weight: var(--am-fw-semibold);
	letter-spacing: 0;
	color: var(--am-color-ink);
}
.am-team-members__role {
	margin: var(--am-space-3) 0 0; /* 21 px d'encre à encre sous le nom */
	font-size: var(--am-fs-role);
	line-height: 1.2;
	font-weight: var(--am-fw-regular);
}

/* Pastille LinkedIn, seule sur sa ligne depuis que les drapeaux disent les langues (voir .am-team-members__langues) */
.am-team-members__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--am-space-3) 0.625rem; /* 10 px, l'écart de la maquette entre la pastille et le drapeau */
	margin-top: var(--am-space-5); /* 24 px d'encre à encre sous la fonction */
}
.am-team-members__linkedin {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.15625rem; /* 34,5 px : 46 px de la maquette réduits de 25 % (décision du 18/09/2026) */
	height: 2.15625rem;
	border-radius: 0.46875rem; /* plaque blanche sous le dessin ; le carré arrondi au trait vient du SVG du graphiste */
	background-color: var(--am-color-white);
	color: var(--am-color-ink);
	transition: none; /* general.css : a { transition-duration: 0.5s } ; pas d'effet de survol en V1 */
}
.am-team-members__linkedin:focus-visible {
	outline: var(--am-focus-ring);
	outline-offset: var(--am-focus-offset);
}
/* Le SVG de la pastille (parts/team/membres.php) porte le carré arrondi : il occupe toute la pastille, trait compris */
.am-team-members__linkedin-icon {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}
.am-team-members__linkedin-frame {
	fill: none;
	stroke: currentColor;
	stroke-width: 12; /* trait du dessin livré, dans le repère du viewBox (353,6) : 1,17 px pour une pastille de 34,5 px */
	stroke-miterlimit: 10;
}
/*
 * Langues de travail : libellé puis un drapeau par langue, sur une ligne à part sous la pastille LinkedIn (la fiche la
 * plus chargée en porte quatre : à côté de la pastille, la rangée serait trop chargée). Même écart de 10 px entre les
 * drapeaux qu'entre pastille et drapeau sur la maquette ; retour à la ligne autorisé, le libellé restant devant le
 * premier drapeau dans les colonnes étroites.
 */
.am-team-members__langues {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--am-space-2) 0.625rem; /* 10 px entre deux drapeaux, 8 px entre deux lignes de drapeaux */
	margin: var(--am-space-5) 0 0; /* fiche sans LinkedIn : même écart sous la fonction que la pastille */
}
.am-team-members__meta + .am-team-members__langues {
	margin-top: var(--am-space-3); /* 12 px sous la pastille, l'écart interne de la fiche */
}
/*
 * Mention de service, pas du texte de fiche : un registre plus discret que la fonction (--am-fs-body, ardoise), qui
 * laisse le regard aux drapeaux. Il tient aussi la ligne la plus chargée (libellé + 4 drapeaux = 278 px) dans la
 * colonne la plus étroite de la grille à trois (293 px à 1024 px de large), où le registre de la fonction (--am-fs-role,
 * libellé de 133 px) passait à la ligne.
 */
.am-team-members__langues-label {
	font-size: var(--am-fs-body);
	line-height: var(--am-lh-body);
	font-weight: var(--am-fw-regular);
	color: var(--am-color-slate);
}
.am-team-members__flag {
	display: block;
	flex: 0 0 auto;
}
/* Hauteur fixée, largeur libre : les drapeaux livrés par le graphiste sont des pastilles carrées (69 × 70 et 70 × 70 px),
   mais un fichier d'un autre rapport garderait la même hauteur de ligne sans être déformé. */
.am-team .am-team-members__flag-img {
	display: block;
	width: auto;
	height: 2.15625rem; /* comme la pastille (46 px réduits de 25 %) */
	max-width: 3.28125rem;
	object-fit: contain;
	border-radius: 0.375rem; /* coins arrondis des drapeaux de la maquette, quel que soit le fichier téléversé */
}

	/* Pas de maquette tablette ni mobile : proposition. 3 colonnes dès 1024 px (fiches de 293 px au moins), 2 colonnes de
	   640 à 1023 px, 1 colonne en dessous ; une rangée incomplète reste alignée à gauche (placement automatique de la grille).
	   Tailles de photo correspondantes : $am_membres_sizes dans parts/team/membres.php. */
	@media screen and (max-width: 1023px) {
		.am-team-members__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		.am-team-members {
			padding-bottom: var(--am-space-12);
		}
		.am-team-members__title + .am-team-members__grid {
			margin-top: var(--am-space-9);
		}
		.am-team-members__grid {
			row-gap: var(--am-space-9);
		}
	}
	@media screen and (max-width: 639px) {
		.am-team-members__grid {
			grid-template-columns: minmax(0, 1fr);
			row-gap: var(--am-space-8);
		}
		.am-team-members__title + .am-team-members__grid {
			margin-top: var(--am-space-8);
		}
	}

/*******************
 animations d'entrée
*******************/

/*
 * Reprises de la page Équipe en prod (big-intro.css, page-team.css) : un voile blanc couvre le bloc puis se retire.
 * - Bandeau teal : utilitaire générique .am-veil-reveal (am-refonte.css), posé dans parts/team/hero.php.
 * - Photo de la section 2 : même voile en sens inverse (retiré de droite à gauche, depuis le bord de la page).
 * - Colonne de texte de la section 2 : titres et paragraphes en cascade (.am-cascade, am-refonte.css).
 * - Fiches des membres : .am-fade-up (am-refonte.css), en cascade par rangée.
 * Photo : utilitaire générique .am-veil-scroll.am-veil-scroll--rtl (am-refonte.css), posé dans parts/team/excellence.php.
 * Tout reste affiché sans JS ou si le visiteur a demandé de réduire les animations.
 */