/*******************
  PAGE METIER
*******************/

.page-template-page-metier .page-color,
.page-template-page-metier .footer-menu a:hover {
	color: var(--purple);
}

.page-template-page-metier .big-intro {
	min-height: 60vh;
}
body.page-template-page-metier.scrolled header,
.page-template-page-metier .big-intro {
	background: var(--purple);
}

.page-template-page-metier footer .mentions .logo {
	background-image: url(../../img/logo-amagar-purple.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.page-template-page-metier footer .mentions .logo img { opacity: 0; }

@media screen and (max-width: 900px) {
	.page-template-page-metier .big-intro .content { max-width: 100%; }
	.page-template-page-metier .big-intro .quote { max-width: 100%; }
}

.metier-intro > * {
	position: relative;
	flex: 0 0 50%;
}
.metier-intro .ill {
	position: relative;
}
.metier-intro .ill::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	transition: 2s 0.5s;
}
.reveal .metier-intro .ill::after {
	width: 0;
}
.metier-intro .ill img {
	object-position: center top;
}
.metier-intro .content {
	text-align: left;
	padding: calc(var(--gutter) * 1.5) calc(var(--gutter) * 1.5) 50vh calc(var(--gutter) * 1.5);
}
.metier-intro .content .ol-list {
	margin: calc(var(--gutter) * 1.25) auto calc(var(--gutter) * 1.25) 0;
	max-width: calc(var(--wrapper) * 0.5);
}
.metier-intro .content .ol-list ol {
	list-style-type: none;
	counter-reset: compteListe;
	font-size: 1.125em;
}
.metier-intro .content .ol-list li {
	counter-increment: compteListe;
	position: relative;
	padding: 0 0 0 3em;
	margin-bottom: 1.5em;
	line-height: 1.4em;
}
.metier-intro .content .ol-list li::before {
	content: '';
	position: absolute;
	top: -0.3em;
	left: 0;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--purple);
}
.metier-intro .content .ol-list li::after {
	content: counter(compteListe);
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 2em;
	line-height: 1em;
	text-align: center;
	color: #fff;
	font-weight: 700;
}

@media screen and (max-width: 1500px) {
	.metier-intro > .ill { flex: 0 0 40%; }
	.metier-intro > .content { flex: 0 0 60%; }
}
@media screen and (max-width: 1000px) {
	.metier-intro .content { padding-bottom: calc(var(--gutter) * 4); }
}
@media screen and (max-width: 850px) and (min-width: 751px) {
	.metier-intro > .ill * {
		position: relative;
		width: 100%;
		height: auto;
	}
}
@media screen and (max-width: 750px) {
	.metier-intro > .ill {
		flex: 0 0 100%;
		height: 65vw;
	}
	.metier-intro > .content {
		flex: 0 0 100%;
		padding-bottom: calc(var(--gutter) * 1.5);
	}
}
@media screen and (max-width: 550px) {
	.metier-intro > .content { padding:var(--gutter); }
}

.metier-keypoints {
	position: relative;
	margin-top: calc(-50vh + var(--gutter));
	width: 90vw;
	max-width: 1600px;
	margin-left: auto;
	margin-right: 0;
	text-align: left;
	padding: calc(var(--gutter) * 1.25) calc(var(--gutter) * 1.75) calc(var(--gutter) * 1.75) calc(var(--gutter) * 1.75);
	left: 50vw;
	transition: 1s;
}
.reveal .metier-keypoints {
	left: 0;
}
.metier-keypoints::before {
	content: '';
	position: absolute;
	bottom: -12.5vw;
	right: -2vw;
	width: 23.5vw;
	height: 23.5vw;
	background-image: url(../../img/icon-amagar-line.svg);
	background-size: contain;
	background-position: center;
	opacity: 0;
	transition: 1s 2s;
}
.reveal .metier-keypoints::before {
	opacity: 0.5;
}
.metier-keypoints .keypoints-layout {
	margin-top: var(--gutter);
}
.keypoints-layout {
	width: calc(100% + 2em);
	margin: 0 -1em;
	overflow: hidden;
}
.keypoints-layout > * {
	flex: 0 0 50%;
	padding: 1em;
}
.keypoint {
	position: relative;
	height: 100%;
	padding: 1em 0 var(--gutter) 4em;
}
.keypoints-layout > *:not(:last-child) .keypoint {
	border-bottom: rgba(255,255,255,0.25) 1px solid;
}
.keypoint::before {
	content: attr(data-number);
	position: absolute;
	top: 0.2em;
	left: 0;
	font-size: 4em;
	font-weight: 900;
	opacity: 0.5;
}
.keypoint .title > * {
	text-transform: uppercase;
	font-size: 1.5em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.25em;
	margin-bottom: 0.5em;
}

@media screen and (max-width: 1000px) {
	.metier-keypoints {
		margin-top: calc(var(--gutter) * -3);
	}
	.metier-keypoints::before {
		transform: scale(1.5);
	}
}
@media screen and (max-width: 750px) {
	.metier-keypoints {
		margin-top: 0;
		width: calc(100% - 4em);
		padding: var(--gutter);
	}
}
@media screen and (max-width: 700px) {
	.keypoints-layout { width: 100%; margin: 0; }
	.keypoints-layout > * { flex: 0 0 100%; padding: 1em 0; }
}
@media screen and (max-width: 550px) {
	.metier-keypoints {
		width: 100%;
	}
}


.section-metier-method {
	position: relative;
	overflow: hidden;
}
.section-metier-method::before {
	content: '';
	position: absolute;
	bottom: -10vw;
	left: -55vw;
	width: 52.5vw;
	height: 52.5vw;
	background-image: url(../../img/icon-amagar-line-grey.svg);
	background-size: contain;
	background-position: center;
	transform: rotate(-45deg);
	transition: 1s 2s;
}
.reveal.section-metier-method::before {
	left: -35vw;
	transform: rotate(0deg);
}
.metier-method {
	z-index: 3;
	position: relative;
	margin-top: var(--gutter);
	width: 90vw;
	max-width: 1600px;
	margin-left: auto;
	margin-right: 0;
	text-align: left;
	padding: calc(var(--gutter) * 1.25) calc(var(--gutter) * 1.75);
}
.metier-method > .wrapper > .title {
	padding-right: 20em;
}
.metier-method > .wrapper > .action {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 18em;
}
.metier-method .method-layout {
	margin-top: calc(var(--gutter) * 1.5);
}
.box-method {
	flex: 0 0 100%;
	padding: calc(var(--gutter) * 1.25) var(--gutter);
}
.method-layout > .box-method:nth-child(even) {
	background: var(--lightGrey);
}
.box-method .ill {
	flex: 0 0 7em;
	padding-right: 3.5em;
}
.box-method .title {
	flex: 0 0 25em;
	padding-right: 3.5em;
}
.box-method .title > * {
	font-size: 1.5em;
	line-height: 1.25em;
	font-weight: 700;
	text-transform: uppercase;
}
.box-method .text {
	flex: 1;
	font-size: 1.25em;
}

@media screen and (max-width: 1500px) {
	.metier-method > .wrapper > .title {
		padding-right: 0;
	}
	.metier-method > .wrapper > .action {
		position: relative;
		bottom: 0;
		right: 0;
		width: 100%;
		margin-top: 2em;
	}
	.metier-method .method-layout { margin-top: 2em; }
}
@media screen and (max-width: 1250px) {
	.box-method .title { flex: 1; padding-right: 0; }
	.box-method .text { flex: 0 0 100%; margin-top: 1.5em; padding-left: 5.75em;}
}
@media screen and (max-width: 1000px) {
	.metier-method { width: 100%; }
}
@media screen and (max-width: 750px) {
/*	.method-layout {
		width: calc(100% + (var(--gutter) * 3.5));
		margin-left: calc(var(--gutter) * -1.75);
		margin-right: calc(var(--gutter) * -1.75);
	}*/
	.box-method .ill { flex: 0 0 6em; padding-right: 2.5em; }
	.box-method .title { min-height: 4em; }
	.box-method .text { margin-top: 0; padding-left: 5em; }
}

/*******************
  coaching augmente par la technologie
*******************/

/*
 * Section « Du coaching augmenté par la technologie » (page-metier.php, champs techno_*). Elle vient de la page
 * Méthodes (/expertise/), où ces règles étaient écrites dans un <style> de page-expertise.php ; déplacée ici
 * le 21/09/2026 avec la section, sans rien changer aux valeurs. Posées à la suite des règles .box-method
 * ci-dessus, qu'elles complètent : image en colonne de gauche, contenu à droite, et sous 1251 px le texte de
 * chaque ligne passe sous son titre. Sélecteurs non liés au gabarit, comme le reste de ce fichier.
 */
.box-method-23 {
	--g : calc(var(--gutter) * 2);
}
/*
 * Coins arrondis a droite, au rayon de 30 px de la refonte (cartes metiers de l'accueil, cartes mission de cette
 * page) : la photo est posee en absolu (.fulldiv) dans cette colonne, c'est donc la colonne qui la rogne.
 * overflow: clip plutot que hidden : aucune zone de defilement creee.
 */
.box-method-23 > .ill {
	position: relative;
	flex: 0 0 40%;
	border-radius: 0 1.875rem 1.875rem 0;
	overflow: clip;
}
.box-method-23 > .content {
	flex: 1;
	text-align: left;
	padding: var(--g) var(--g) 0 var(--g);
}
.box-method-23 > .content > .title > * {
	text-transform: none;
}
.box-method-23 .method-layout {
	width: calc(100% + (var(--g) * 2));
	margin-left: calc(var(--g) * -1);
}
.box-method-23 .method-layout .text h3 {
	text-transform: uppercase;
}
/*
 * Alternance des fonds inversée dans cette section (Antoine, 22/09/2026) : 1re ligne grise, puis blanche, grise, blanche.
 * La règle commune « .method-layout > .box-method:nth-child(even) » (plus haut, et page-metier-2.css) reste pour les
 * anciennes accueils (page-accueil2.php, part-accueil2022.php), qui ne changent pas.
 */
.box-method-23 .method-layout > .box-method:nth-child(odd) {
	background: var(--lightGrey);
}
.box-method-23 .method-layout > .box-method:nth-child(even) {
	background: none;
}
@media screen and (min-width: 1251px) {
	.box-method-23 .box-method .title { flex: 1; padding-right: 0; }
	.box-method-23 .box-method .text { flex: 0 0 100%; padding-left: 5.75em; }
}
@media screen and (max-width: 1000px) {
	.box-method-23 > .ill { display: none; }
	.box-method-23 > .content { flex: 0 0 100%; }
}

/*******************
  certifications (parts/certifications.php)
*******************/

/*
 * Bloc « Nos certifications » (P9, 22/09/2026), redessiné et placé entre les cartes des missions et la section
 * « Du coaching augmenté » à la demande d'Antoine, d'après une maquette indicative : panneau gris clair (--lightGrey,
 * le gris des lignes de la section suivante) à coins arrondis de 30 px (rayon des cartes de la refonte), largeur du
 * .wrapper de la page ; titre h2 et accroche centrés ; une colonne par certification (logo, nom en gras, précision),
 * séparées par des filets fins ; deux disques à peine plus sombres que le fond, décoratifs, aux coins.
 * De 768 à 900 px, colonnes à la ligne sans filet vertical ; sous 768 px, empilées et séparées par des filets
 * horizontaux. Le répéteur est à nombre quelconque : aucune règle ne compte les colonnes (voir .am-certifs__list).
 * Respiration au-dessus et au-dessous : le .spacer.big qui séparait déjà les cartes de la section suivante (le second est
 * imprimé par parts/certifications.php). Tailles de texte en jetons --am-* ; titre et noms en Poppins Bold, la graisse
 * des titres de cette page (SemiBold n'est pas servi par am-fonts.css et retomberait sur Medium).
 */
.am-certifs__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--am-space-11) var(--am-space-9) var(--am-space-12);
	border-radius: 1.875rem;
	background: var(--lightGrey);
	text-align: center;
}
.am-certifs__panel::before,
.am-certifs__panel::after {
	content: '';
	position: absolute;
	z-index: -1;
	aspect-ratio: 1;
	/* Forme du logo Amagar (assets/img/am-logo-forme.svg) en masque : la couleur reste le gris ci-dessous */
	background: color-mix(in srgb, var(--am-color-slate) 4%, var(--lightGrey));
	-webkit-mask: url(../../img/am-logo-forme.svg) center / contain no-repeat;
	mask: url(../../img/am-logo-forme.svg) center / contain no-repeat;
	pointer-events: none;
}
/* Deux formes de même taille, en miroir (haut gauche, bas droite) */
.am-certifs__panel::before {
	top: -7rem;
	left: -5rem;
	width: 15rem;
}
.am-certifs__panel::after {
	right: -5rem;
	bottom: -7rem;
	width: 15rem;
}
/*
 * Décors animés au défilement, dans l'esprit du logo au survol (am-header.css), une pièce du logo par forme (un
 * pseudo-élément masqué tourne d'un bloc) : ::before prend le geste du disque central, un huitième de tour dans le sens
 * horaire avec léger rebond (+45°) ; ::after celui de l'anneau, en sens inverse (-135°). Poses finales demandées par
 * Antoine le 22/09. ::before quand le haut du panneau atteint 40 % de la hauteur d'écran, ::after quand son bas atteint
 * 80 % (classes posées par am-reveal.js, [data-am-seuils]) ; retour en place quand on remonte.
 */
@media (prefers-reduced-motion: no-preference) {
	.am-anim .am-certifs__panel::before {
		transition: rotate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	.am-anim .am-certifs__panel::after {
		transition: rotate 1s cubic-bezier(0.25, 0.9, 0.3, 1.06);
	}
	.am-anim .am-certifs__panel.is-seuil-haut::before { rotate: 45deg; }
	.am-anim .am-certifs__panel.is-seuil-bas::after { rotate: -135deg; }
}
/* Double classe : am-refonte.css, chargée après cette feuille, remet la marge de .am-title à 0 */
.am-certifs .am-certifs__title {
	margin: 0 auto;
	font-size: var(--am-fs-h1);
	line-height: var(--am-lh-h1);
	font-weight: var(--am-fw-bold);
	letter-spacing: var(--am-tracking-h1);
	text-transform: none;
}
.am-certifs .am-certifs__text {
	max-width: 46rem;
	margin: var(--am-space-4) auto 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-body-lg);
	line-height: 1.4;
	font-weight: var(--am-fw-regular);
	color: var(--am-color-slate);
}
/*
 * Colonnes de largeur égale, quel que soit le nombre de lignes du répéteur (3 au 22/09, 4 avec Positive Intelligence le
 * 23/09) : flex: 1 1 0 et aucun sélecteur qui compte les colonnes. Liste élargie à 72 rem et colonnes moins matelassées
 * qu'à trois (40 px de retrait laissaient 176 px de contenu à quatre, où « ICF — Professional Certified Coach » tombait
 * sur trois lignes) : à 1440 px, 240 px de contenu par colonne à quatre, comme les 261 px d'une colonne sur trois.
 * 72 rem tient dans le panneau (1300 px de .wrapper moins 2 × 64 px de retrait, soit 1172 px).
 */
.am-certifs__list {
	display: flex;
	justify-content: center;
	align-items: stretch;
	max-width: 72rem; /* 1152 px */
	margin: var(--am-space-9) auto 0;
	padding: 0;
	list-style: none;
}
.am-certifs__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: var(--am-space-2) var(--am-space-5);
}
.am-certifs__item::before { content: none; } /* aucune puce héritée des listes du thème */
.am-certifs__item + .am-certifs__item {
	border-left: 1px solid color-mix(in srgb, var(--am-color-slate) 25%, transparent);
}
/* Logos à hauteur commune : la forme (amCertificationLogoHtml()) règle seulement le paysage, borné en largeur */
.am-certifs__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 6rem;
	margin-bottom: var(--am-space-5);
}
.am-certifs__logo a {
	display: block;
	height: 100%;
}
.am-certifs__logo a:focus-visible {
	outline: var(--am-focus-ring);
	outline-offset: var(--am-focus-offset);
}
.am-certifs__logo-img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}
.am-certifs__logo-img--landscape {
	width: 15rem;
	height: auto;
	max-height: 100%;
}
.am-certifs .am-certifs__name {
	margin: 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-card-title);
	line-height: var(--am-lh-card-title);
	font-weight: var(--am-fw-bold);
	color: var(--am-color-ink);
}
.am-certifs .am-certifs__desc {
	margin: var(--am-space-2) 0 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-body);
	line-height: var(--am-lh-body);
	font-weight: var(--am-fw-regular);
	color: var(--am-color-slate);
}
@media screen and (max-width: 1100px) {
	.am-certifs__panel { padding: var(--am-space-10) var(--am-space-6) var(--am-space-11); }
	.am-certifs__logo { height: 5rem; }
	.am-certifs__logo-img--landscape { width: 12.5rem; }
}
/*
 * Sous 1000 px, deux colonnes sur deux rangées (demande d'Antoine du 23/09/2026), la version d'en dessous de 768 px
 * restant la pile à une colonne. Une rangée unique de quatre colonnes ne tient d'ailleurs pas sous 900 px : le nom le
 * plus long (« Assessments », 137 px) sort alors de la boîte de contenu de sa colonne (141 px à 900 px) et mange la
 * gouttière. Au-dessus de 1000 px, rien ne change pour trois colonnes, ni largeur ni filets, par rapport à l'état
 * d'avant la quatrième certification.
 * Filets : le vertical reste entre les colonnes d'une même rangée (2ᵉ et 4ᵉ case), l'horizontal sépare les deux
 * rangées (3ᵉ et 4ᵉ case). La 3ᵉ perd son filet gauche : première de sa rangée, il pendrait au bord du panneau.
 * Pas d'écart de rangée (gap), pour que le filet horizontal des deux cases du bas forme une ligne continue ;
 * c'est le matelassage vertical des cases qui donne l'air.
 * À savoir : ces sélecteurs comptent les cases, contrairement au reste du bloc. Ils sont réglés sur quatre
 * certifications. À trois, la 3ᵉ passe seule sur la rangée du bas avec son filet horizontal ; à cinq, la 5ᵉ se
 * retrouverait seule sur une troisième rangée sans filet horizontal et la 4ᵉ garderait un filet gauche en début de
 * rangée : il faudrait alors reprendre ces trois règles.
 */
@media screen and (max-width: 999px) and (min-width: 768px) {
	.am-certifs__list { flex-wrap: wrap; }
	.am-certifs__item { flex: 0 0 50%; max-width: 50%; padding: var(--am-space-6) var(--am-space-5); }
	.am-certifs__item:nth-child(3),
	.am-certifs__item:nth-child(4) {
		border-top: 1px solid color-mix(in srgb, var(--am-color-slate) 25%, transparent);
	}
	.am-certifs__item:nth-child(3) { border-left: 0; }
}
@media screen and (max-width: 767px) {
	.am-certifs__panel { padding: var(--am-space-9) var(--am-space-5) var(--am-space-8); }
	.am-certifs__panel::before { width: 9rem; top: -4rem; left: -4rem; }
	.am-certifs__panel::after { width: 9rem; right: -4rem; bottom: -4rem; }
	.am-certifs__list {
		flex-direction: column;
		align-items: stretch;
		margin-top: var(--am-space-6);
	}
	.am-certifs .am-certifs__text { font-size: var(--am-fs-body); line-height: var(--am-lh-body); }
	.am-certifs__item { flex: none; padding: var(--am-space-6) 0; } /* flex-basis 0 en colonne écraserait les colonnes */
	.am-certifs__item + .am-certifs__item {
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, var(--am-color-slate) 25%, transparent);
	}
	.am-certifs__item:last-child { padding-bottom: 0; }
	.am-certifs__logo { height: 4.5rem; margin-bottom: var(--am-space-4); }
	.am-certifs__logo-img--landscape { width: 11rem; }
}

/*
 * Rangée des cartes mission. Elle débordait de 10 px de chaque côté (largeur 100 % + 20 px, marges négatives)
 * pour que les cartes s'alignent bord à bord sur le tunnel malgré le retrait de 10 px de « .steps-layout > * ».
 * Ce débordement était la cause du défilement horizontal de /metier/ (voir am-pages.css). Valeurs posées par
 * Antoine le 21/09/2026 : plus de débordement, un retrait de 2 px pour la rangée.
 * Écrite à l'identique dans inc/page-metier-2.css, importée après celle-ci : les deux doivent rester d'accord.
 */
.steps-layout {
	width: 100%;
	margin: 0;
	padding: 2px;
}
.steps-layout > * {
	padding: 2px; /* Antoine, 21/09/2026 : était 10 px, soit 20 px d'écart entre deux cartes ; 4 px désormais */
	flex: 1 0 270px;
}
.steps-layout .box {
	height: 100%;
	text-align: left;
	padding: calc(var(--gutter) * 1.5) var(--gutter) var(--gutter) var(--gutter);
	transition: 0.5s;
}
.steps-layout .box:hover {
	box-shadow: var(--boxShadow);
	transform: scale(1.05);
}
.steps-layout .box .title {
	margin-bottom: calc(var(--gutter) * 0.5);
}

.metier-steps {
	margin-bottom: calc(var(--gutter) * 2.5);
}

@media screen and (max-width: 1400px) {
	.steps-layout .box { padding: calc(var(--gutter) * 0.75); }
}
@media screen and (max-width: 1250px) {
}