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

.page-template-page-metier-2 .page-color {
	color: var(--purple);
}

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

@media screen and (max-width: 900px) {
	.page-template-page-metier-2 .big-intro .content { max-width: 100%; }
	.page-template-page-metier-2 .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;
}

@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: 0;
	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; }
}

/*
 * 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) {
}


/* Métier V2 2022 */

.page-template-page-metier-2 .metier-intro .ill img { object-position: center; }

.page-template-page-metier-2 .metier-intro .content .action {
	margin-top: var(--gutter);
	margin-bottom: calc(var(--gutter) * 2);
}
.page-template-page-metier-2 .metier-keypoints .keypoints-layout { margin-top: 0; }
.page-template-page-metier-2 .intro-steps-2 {
	margin-top: calc(var(--gutter) * 2);
	margin-bottom: calc(var(--gutter) * 1.5);
	text-align: left;
}
@media screen and (min-width: 751px) {
	.page-template-page-metier-2 .intro-steps-2 .title { padding-left: calc(var(--gutter) * 1.5); }
}
.page-template-page-metier-2 .steps-layout .box {
	position: relative;
	padding: calc(var(--gutter) * 1.5) var(--gutter) calc(var(--gutter) * 1.5) var(--gutter);
}
.page-template-page-metier-2 .steps-layout .box.map-and-match::after {
	content: '';
	position: absolute;
	bottom: calc(var(--gutter) * 0.5);
	left: calc(var(--gutter) * 0.75);
	width: calc(100% - (var(--gutter) * 2));
	height: 2.5em;
	background-image: url(../../img/logo-mam.png);
	background-position: center left;
	background-size: contain;
	background-repeat: no-repeat;
}
@media screen and (max-width: 1400px) {
	.page-template-page-metier-2 .steps-layout .box { padding: calc(var(--gutter) * 0.75); padding-bottom: calc(var(--gutter) * 1); }
}

.page-template-page-metier-2 .metier-steps {
	margin-bottom: 0.5em;
}

.page-template-page-metier-2 .metier-mam {
	margin-bottom: calc(var(--gutter) * 2.5);
}
.page-template-page-metier-2 .mam-box {
	position: relative;
	overflow: hidden;
	flex: 0 0 50%;
	text-align: left;
	padding: calc(var(--gutter) * 2) calc(var(--gutter) * 1) calc(var(--gutter) * 2) calc(var(--gutter) * 2);
}
.page-template-page-metier-2 .mam-box > .content {
	margin-top: auto;
	margin-bottom: 0;
}
.page-template-page-metier-2 .mam-box .title.medium > * {
	text-transform: unset;
}
.page-template-page-metier-2 .mam-box .action {
	margin-top: calc(var(--gutter) * 1.25);
}
.page-template-page-metier-2 .mam-box.method::after {
	content: '';
	position: absolute;
	bottom: -20%;
	right: -27.5%;
	width: 60%;
	height: 70%;
	background-image: url(../../img/icon-amagar-line.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transform: scale(-1, 1);
	opacity: 0.25;
}
.page-template-page-metier-2 .mam-box.method .title {
	margin-top: 2em;
	margin-bottom: 0.33em;
}
.page-template-page-metier-2 .mam-box.method .content {
	max-width: calc(var(--wrapper) / 2.5);
}
.page-template-page-metier-2 .mam-box.ill .logo-mam {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.125);
}
.page-template-page-metier-2 .mam-cycle ul {
	list-style-type: none;
	margin: 2em 0 0 0.75em;
}
.page-template-page-metier-2 .mam-cycle li {
	position: relative;
	padding: 0.5em 0 0.5em 3em;
	text-transform: uppercase;
	font-size: 1.5em;
	line-height: 1.25em;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 1.125em;
}
.page-template-page-metier-2 .mam-cycle .icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 1.8em;
	height: 2em;
}
.page-template-page-metier-2 .mam-cycle .icon > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-position: center left;
	object-fit: contain;
}
@media screen and (max-width: 900px) {
	.page-template-page-metier-2 .mam-box { flex: 0 0 100%; }
	.page-template-page-metier-2 .mam-box.ill { height: 80vw; }
}

.page-template-page-accueil .section-metier-method::before {
	display: none;
}

.page-template-page-accueil .section-metier-method .map-and-match {
	padding-bottom: 0.5em;
}
.page-template-page-accueil .section-metier-method .map-and-match .text::after {
	content: '';
	display: block;
	width: 7.5em;
	height: 3.5em;
	background-image: url(../../img/logo-mam-color.png);
	background-position: center left;
	background-size: contain;
	background-repeat: no-repeat;
}