/* .............................................................................
CARTOGRAPHIE DES PARCOURS
Values from the XD (desktop 1920 × 1080, mobile 430 × 932).
Horizontal positions scale with the viewport (logo 140/1920, content 556/1920);
type sizes and vertical spacing are the XD pixel values.

Modes :
- commun      : white bg, orange logo, green title, orange buttons, green footer
- decouverte  : orange bg, white logo, green title, green buttons, green footer
- progression : green bg, white logo, orange title, orange buttons, orange footer
- fiche_metier: orange header, photo band, green pattern band, orange footer
- accueil     : « commun » with a photo header (white logo and title)
............................................................................. */

body.carto-page {margin: 0; background: #fff;}

.carto {
	--carto-orange: var(--color-orange, #f7941d);
	--carto-green: var(--color-green, #006350);
	--carto-gutter: 7.2917vw;       /* 140 / 1920 */
	--carto-column: 28.9583vw;      /* 556 / 1920 */
	--carto-tile-w: 43px;
	--carto-tile-h: 69px;
}

/*
SCREEN */
.carto__screen {
	--carto-bg: var(--carto-orange);
	--carto-logo: #fff;
	--carto-title: var(--carto-green);
	--carto-text: #fff;
	--carto-accent: var(--carto-green);
	--carto-btn: var(--carto-green);
	--carto-btn-text: #fff;
	--carto-motif-color: rgba(255, 255, 255, 0.6);
	--carto-footer: var(--carto-green);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	background: var(--carto-bg);
	color: var(--carto-text);
	font-family: 'Lato', sans-serif;
	-webkit-font-smoothing: antialiased;
}

	.carto--commun {
		--carto-bg: #fff;
		--carto-logo: var(--carto-orange);
		--carto-text: var(--carto-green);
		--carto-btn: var(--carto-orange);
		--carto-motif-color: var(--carto-orange);
	}

	.carto--progression {
		--carto-bg: var(--carto-green);
		--carto-title: var(--carto-orange);
		--carto-accent: var(--carto-orange);
		--carto-btn: var(--carto-orange);
		--carto-motif-color: var(--carto-orange);
		--carto-footer: var(--carto-orange);
	}

	.carto--fiche_metier {
		--carto-bg: var(--carto-green);
		--carto-title: #fff;
		--carto-btn: var(--carto-orange);
		--carto-motif-color: var(--carto-orange);
		--carto-footer: var(--carto-orange);
	}

/*
HEADER (logo only) */
.carto__header {
	flex: 0 0 auto;
	padding: 80px var(--carto-gutter) 40px var(--carto-gutter);
	background: var(--carto-bg);
}

	.carto--fiche_metier .carto__header {background: var(--carto-orange);}

.carto__logo {display: inline-block; vertical-align: top; line-height: 0;}

	.carto__logo svg {display: block; width: auto; height: 80px;}
	.carto__logo svg path {fill: var(--carto-logo);}

/*
CONTENT */
.carto__in {
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 80px var(--carto-gutter) 60px var(--carto-column);
}

.carto__title {
	margin: 0;
	padding: 0;
	max-width: 810px;
	font-family: 'FuturaRound-Bold', sans-serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 40px;
	text-transform: uppercase;
	color: var(--carto-title);
	outline: none;
}

.carto__subtitle {
	margin: 4px 0 0 0;
	max-width: 810px;
	font-family: 'FuturaRound-Bold', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: var(--carto-accent);
}

/*
CHEVRON LIST (choices, pages, points) */
.carto__list,
.carto__scale {
	list-style: none;
	margin: 29px 0 0 0;
	padding: 0;
}

	.carto__list li + li {margin-top: 20px;}
	.carto__subtitle + .carto__list {margin-top: 24px;}

.carto__item {
	position: relative;
	display: block;
	padding-left: 20px;
	color: var(--carto-text);
	text-decoration: none;
}

	/* Chevron: 6 × 6 square, 3px stroke, rotated (XD « Tracé 86 ») */
	.carto__item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 12px;
		width: 6px;
		height: 6px;
		border-top: 3px solid currentColor;
		border-right: 3px solid currentColor;
		border-radius: 1px;
		transform: rotate(45deg);
		box-sizing: content-box;
		margin-left: -3px;
	}

.carto__itemLabel {
	display: block;
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
}

.carto__itemDesc {
	display: block;
	font-weight: 700;
	font-size: 18px;
	line-height: 21px;
	color: var(--carto-accent);
}

a.carto__item:hover .carto__itemLabel,
a.carto__item:focus-visible .carto__itemLabel {color: var(--carto-title);}

/*
SCALE (D1b) */
.carto__scale li + li {margin-top: 20px;}

.carto__scaleItem {
	display: flex;
	align-items: center;
	gap: 30px;
	color: var(--carto-text);
	text-decoration: none;
}

.carto__scaleNum {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff;
	color: var(--carto-green);
	font-family: 'FuturaRound-Bold', sans-serif;
	font-size: 24px;
	line-height: 1;
	padding-top: 3px;
	box-sizing: border-box;
	transition: background-color 0.3s, color 0.3s;
}

	.carto__scaleItem:hover .carto__scaleNum,
	.carto__scaleItem:focus-visible .carto__scaleNum {background: var(--carto-green); color: #fff;}

/*
BUTTONS */
.carto__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	margin-top: 29px;
}

	.carto__list + .carto__buttons,
	.carto__scale + .carto__buttons {margin-top: 31px;}

	/* Next row of buttons (other style): 20px, like the gap inside a row */
	.carto__buttons + .carto__buttons {margin-top: 20px;}

.carto__btn {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 50px;
	padding: 2px 28px 0 28px;
	border: 1px solid var(--carto-btn);
	border-radius: 30px;
	background: var(--carto-btn);
	color: var(--carto-btn-text);
	font-family: 'FuturaRound-Bold', sans-serif;
	font-size: 16px;
	line-height: 22px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

	.carto__btn:hover,
	.carto__btn:focus-visible {background: transparent; color: var(--carto-btn);}

	/* Outline (R0) */
	.carto__btn--contour {background: transparent; color: var(--carto-btn);}

		.carto__btn--contour:hover,
		.carto__btn--contour:focus-visible {background: var(--carto-btn); color: var(--carto-btn-text);}

	/* « Je ne sais pas encore » is green on orange, orange on green: same as --carto-btn */

/*
JOB CARD (fiche métier courte) */
.carto__fiche {
	position: relative;
	flex: 0 0 auto;
	height: 600px;
	padding: 0;
	background: #00463a;
	overflow: hidden;
}

.carto__photo {
	position: absolute;
	inset: 0;
	margin: 0;
}

	.carto__photo img {display: block; width: 100%; height: 100%; object-fit: cover;}

	.carto__photo:has(img)::after {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.3);
	}

.carto__ficheIn {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	padding: 90px var(--carto-gutter) 0 var(--carto-column);
}

	.carto--fiche_metier .carto__title {font-size: 48px; line-height: 48px; max-width: 670px;}

.carto__ficheText {
	margin: 22px 0 0 0;
	max-width: 534px;
	font-size: 21px;
	line-height: 24px;
	color: #fff;
}

	.carto__ficheBody .carto__buttons {margin-top: 41px;}
	.carto__ficheBody .carto__btn {padding-left: 16px; padding-right: 16px;}

.carto__ficheLinks {display: flex; flex-direction: column; gap: 10px; margin-top: 30px;}

.carto__ficheLink {
	font-family: 'FuturaRound-Bold', sans-serif;
	font-size: 21px;
	line-height: 25px;
	color: var(--carto-orange);
	text-decoration: none;
}

	.carto__ficheLink:hover,
	.carto__ficheLink:focus-visible {color: #fff;}

/*
WELCOME (accueil): photo header with white logo and title, intro, one button */
.carto__hero {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	height: 500px;
	padding: 80px var(--carto-gutter) 120px var(--carto-gutter);
	background: #00463a;
	overflow: hidden;
}

	.carto__hero .carto__photo img {object-position: center 42%;}
	.carto__hero .carto__logo,
	.carto__hero .carto__title {position: relative; z-index: 1;}
	.carto__hero .carto__logo svg path {fill: #fff;}

	.carto__hero .carto__title {
		margin-top: auto;
		margin-left: calc(var(--carto-column) - var(--carto-gutter));
		max-width: 600px;
		color: #fff;
	}

.carto--accueil .carto__in {padding-top: 40px;}

.carto__intro {
	margin: 0;
	max-width: 680px;
	font-size: 18px;
	line-height: 24px;
	color: var(--carto-text);
}

	.carto__intro + .carto__intro {margin-top: 10px;}
	.carto__intro + .carto__buttons {margin-top: 36px;}

/*
PATTERN: fills the space left above the footer */
.carto__pattern {
	flex: 1 0 calc(var(--carto-tile-h) * 2);
	background-color: var(--carto-motif-color);
	-webkit-mask-image: var(--carto-motif);
	mask-image: var(--carto-motif);
	-webkit-mask-size: var(--carto-tile-w) var(--carto-tile-h);
	mask-size: var(--carto-tile-w) var(--carto-tile-h);
	-webkit-mask-position: 3px 0;
	mask-position: 3px 0;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
}

	.carto--fiche_metier .carto__pattern {background-color: var(--carto-orange);}

/*
FOOTER */
.carto__footer {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	box-sizing: border-box;
	height: 110px;
	padding: 21px var(--carto-gutter) 0 var(--carto-gutter);
	background: var(--carto-footer);
	color: #fff;
}

.carto__footerLogo {display: block; width: 187px; height: auto;}

/*
TABLET: content aligned on the logo */
@media (max-width: 1199px) {
	.carto {--carto-column: var(--carto-gutter);}
}

/*
MOBILE (XD 430 × 932) */
@media (max-width: 767px) {
	.carto {--carto-gutter: 30px; --carto-column: 30px;}

	.carto__header {padding-top: 40px; padding-bottom: 20px;}
	.carto__in {padding-top: 30px; padding-bottom: 60px;}

	/* Stacked pills */
	.carto__buttons {flex-direction: column; align-items: flex-start; gap: 20px;}

	/* Job card: photo with title, then text on green, no pattern */
	.carto__fiche {height: auto; background: var(--carto-green); overflow: visible;}
	.carto__photo {position: relative; height: 400px;}
	.carto__ficheIn {position: static; padding: 0 30px 40px 30px;}

	.carto--fiche_metier .carto__title {
		position: absolute;
		left: 30px;
		right: 30px;
		top: 400px;
		transform: translateY(calc(-100% - 20px));
	}

	.carto__ficheText {margin-top: 0; padding-top: 30px;}
	.carto__ficheBody .carto__buttons {margin-top: 30px;}
	.carto--fiche_metier .carto__pattern {display: none;}
	.carto--fiche_metier .carto__fiche {flex-grow: 1;}

	/* Welcome: 400px photo header, title at its bottom */
	.carto__hero {height: 400px; padding-bottom: 20px;}
	.carto__hero .carto__photo {position: absolute; height: auto;}
	.carto__hero .carto__photo img {object-position: 65% center; transform: scale(1.18);}
	.carto--accueil .carto__in {padding-top: 40px;}
	.carto__intro + .carto__buttons {margin-top: 40px;}
}

@media (prefers-reduced-motion: reduce) {
	.carto * {transition: none !important;}
}