/**
 * Prototype local de l'accueil — restitution de la maquette 04.
 * Chargé uniquement sur /accueil-prototype/. Couleurs et polices : Brand Kit officiel.
 * Repère : à 1440 px, la maquette (1055 px de large) est agrandie de 1,365.
 */
.cf-m4,
.cf-m4-header,
.cf-m4-footer {
	--m4-encre: #0e1822;
	--m4-nuit: #1b2a3a;
	--m4-ivoire: #f3eee7;
	--m4-pierre: #d8cec1;
	--m4-or: #c4a063;
	--m4-bronze: #9e7c49;
	--m4-titres: var(--wp--preset--font-family--titres);
	--m4-texte: var(--wp--preset--font-family--texte);
	--m4-marge: clamp(20px, 5.6vw, 80px);
	font-family: var(--m4-texte);
}
.cf-m4 {
	background: var(--m4-ivoire);
	color: var(--m4-encre);
	margin-block: 0;
}
:where(.cf-m4, .cf-m4-header, .cf-m4-footer) :where(.wp-block-group) > * {
	margin-block: 0;
}
.cf-m4 > * {
	margin-block: 0;
}
/* Annule l'espacement automatique de WordPress (bloc suivant) dans les compositions en grille. */
.cf-m4-header .cf-m4-header-inner > *,
.cf-m4-header .cf-m4-brand > *,
.cf-m4-footer .cf-m4-footer-grid > *,
.cf-m4 .cf-m4-hero > *,
.cf-m4 .cf-m4-access > *,
.cf-m4 .cf-m4-portals > *,
.cf-m4 .cf-m4-portal > *,
.cf-m4 .cf-m4-perf-cards > *,
.cf-m4 .cf-m4-scene > *,
.cf-m4 .cf-m4-method > *,
.cf-m4 .cf-m4-steps > *,
.cf-m4 .cf-m4-reperes-grid > *,
.cf-m4 .cf-m4-panorama > *,
.cf-m4 .cf-m4-guide-grid > * {
	margin-block: 0;
}
.cf-m4,
.cf-m4 p,
.cf-m4 li,
.cf-m4 .wp-block-button__link {
	letter-spacing: normal;
}
.cf-m4 :where(h1, h2, h3) {
	color: var(--m4-encre);
}
.cf-m4 figure {
	margin: 0;
}
.cf-m4 img {
	display: block;
}
.cf-m4-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 1456px;
	margin-inline: auto;
	padding-inline: var(--m4-marge);
}
.cf-m4 :where(h1, h2, h3) {
	font-family: var(--m4-titres);
	font-weight: 600;
	letter-spacing: normal;
	text-wrap: balance;
}
.cf-m4 .cf-m4-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.22em;
	color: var(--m4-or);
}
.cf-m4 .wp-block-button__link {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: 2px;
	background: var(--m4-or);
	color: var(--m4-encre);
	font-family: var(--m4-texte);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}
.cf-m4 .wp-block-button__link:hover {
	background: var(--m4-ivoire);
	color: var(--m4-encre);
}
.cf-m4 :where(a):focus-visible,
.cf-m4-header :where(a, button):focus-visible,
.cf-m4-footer :where(a):focus-visible {
	outline: 3px solid var(--m4-ivoire);
	outline-offset: 3px;
}
.cf-m4 .cf-m4-guide a:focus-visible {
	outline-color: var(--m4-encre);
}

/* ---------- En-tête ---------- */
.cf-m4-header {
	background: var(--m4-encre);
	color: var(--m4-ivoire);
}
.cf-m4-header-inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: 1456px;
	min-height: 88px;
	margin-inline: auto;
	padding: 8px var(--m4-marge);
}
.cf-m4-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.cf-m4-header .wp-block-site-logo img,
.cf-m4-footer .wp-block-site-logo img {
	display: block;
	height: auto;
	border-radius: 50%;
	-webkit-mask-image: radial-gradient(circle closest-side, #000 96%, transparent 100%);
	mask-image: radial-gradient(circle closest-side, #000 96%, transparent 100%);
}
.cf-m4-brand-name {
	margin: 0;
	font-family: var(--m4-texte);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	max-width: 12em;
}
.cf-m4-brand-name a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--m4-ivoire);
	text-decoration: none;
}
.cf-m4-nav {
	font-size: 15px;
	font-weight: 600;
}
.cf-m4-nav .wp-block-navigation__container {
	align-items: center;
	gap: 8px 28px;
}
.cf-m4-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--m4-ivoire);
	text-decoration: none;
}
.cf-m4-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}
@media (min-width: 600px) {
	/* Les deux accès occupent la place du bouton doré de la maquette, à poids égal. */
	.cf-m4-nav .cf-m4-nav-acces .wp-block-navigation-item__content {
		justify-content: center;
		min-width: 128px;
		padding-inline: 16px;
		border-radius: 2px;
		background: var(--m4-or);
		color: var(--m4-encre);
		font-weight: 700;
	}
	.cf-m4-nav .cf-m4-nav-acces .wp-block-navigation-item__content:hover {
		background: var(--m4-ivoire);
		text-decoration: none;
	}
	.cf-m4-nav .cf-m4-nav-acces-1 {
		margin-inline-start: 12px;
		padding-inline-start: 36px;
		border-inline-start: 1px solid rgb(216 206 193 / 0.35);
	}
	.cf-m4-nav .cf-m4-nav-acces {
		margin-inline-start: -16px;
	}
	.cf-m4-nav .cf-m4-nav-acces.cf-m4-nav-acces-1 {
		margin-inline-start: 12px;
	}
}
.cf-m4-header .wp-block-navigation__responsive-container-open,
.cf-m4-header .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--m4-ivoire);
}
.cf-m4-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: 0.5rem;
	font-size: 20px;
}
@media (min-width: 600px) {
	.cf-m4-header .wp-block-navigation__responsive-container-open {
		display: none;
	}
}

/* ---------- Ouverture ---------- */
.cf-m4-hero {
	position: relative;
	overflow: hidden;
	background: var(--m4-encre);
	color: var(--m4-ivoire);
}
.cf-m4-hero-inner {
	position: relative;
	z-index: 1;
}
.cf-m4-hero-copy {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 47%;
	min-height: clamp(360px, 28.5vw, 480px);
	padding-block: 32px;
}
.cf-m4-hero h1 {
	margin-block-start: 14px;
	color: var(--m4-ivoire);
	font-size: clamp(38px, 4.15vw, 68px);
	line-height: 1.04;
	text-wrap: initial;
}
.cf-m4-hero h1 em {
	color: var(--m4-or);
	font-style: italic;
	font-synthesis: style;
}
.cf-m4 .cf-m4-signature {
	margin-block-start: 16px;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.4;
}
.cf-m4-access {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 500px;
	margin-block-start: 24px !important;
}
.cf-m4-access .wp-block-button,
.cf-m4-access .wp-block-button__link {
	width: 100%;
}
.cf-m4 .cf-m4-access-pub {
	margin-block-start: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--m4-pierre);
}
.cf-m4-hero-img {
	position: absolute;
	inset: 0 0 0 auto;
	width: 54%;
	height: 100%;
}
.cf-m4-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 50%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
	mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}

/* ---------- Pour qui ---------- */
.cf-m4-univers {
	padding-block: 34px 28px;
}
.cf-m4 .cf-m4-label-rule {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--m4-encre);
}
.cf-m4 .cf-m4-label-rule::after {
	content: "";
	width: 68px;
	height: 1px;
	background: var(--m4-bronze);
}
.cf-m4-univers h2 {
	margin-block-start: 8px;
	font-size: clamp(32px, 3.4vw, 54px);
	line-height: 1.12;
}
/* Maquette : Performance et Student dans un rapport 615 / 326, légèrement hors de la marge du titre. */
.cf-m4-portals {
	display: grid;
	grid-template-columns: minmax(0, 615fr) minmax(0, 326fr);
	gap: 20px;
	margin-block-start: 28px !important;
	margin-inline: -16px;
}
.cf-m4-perf-cards {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 0 12px 10px 0;
}
.cf-m4-perf-cards .cf-m4-scene {
	border-radius: 8px;
}
.cf-m4-portal {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 8px;
}
.cf-m4-student {
	background: var(--m4-pierre);
	color: var(--m4-encre);
}
.cf-m4-performance {
	background: var(--m4-nuit);
	color: var(--m4-ivoire);
}
.cf-m4-portal-head {
	padding: 20px 32px 18px;
}
.cf-m4 .cf-m4-portal-label {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.22em;
}
.cf-m4-performance .cf-m4-portal-label {
	color: var(--m4-or);
}
.cf-m4 .cf-m4-portal-line {
	margin-block-start: 6px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}
.cf-m4-scene {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 322px;
	overflow: hidden;
	background: var(--m4-encre);
	color: var(--m4-ivoire);
}
.cf-m4-scene-img {
	position: absolute;
	inset: 0;
}
.cf-m4-scene-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}
/* Voile bas : il porte le texte réel, en remplacement du texte incrusté de la maquette. */
.cf-m4-scene::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(14 24 34 / 0) 28%, rgb(14 24 34 / 0.72) 58%, rgb(14 24 34 / 0.9) 100%);
}
@media (min-width: 1024px) {
	/* Le texte reste à gauche : le voile s'efface à droite pour laisser voir les jetons. */
	.cf-m4-card-joueurs::after {
		background: linear-gradient(90deg, rgb(14 24 34 / 0.9) 0, rgb(14 24 34 / 0.78) 58%, rgb(14 24 34 / 0) 82%);
		-webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 48%);
		mask-image: linear-gradient(180deg, transparent 18%, #000 48%);
	}
	.cf-m4 .cf-m4-card-joueurs .cf-m4-scene-text p {
		max-width: 270px;
	}
	.cf-m4-student .cf-m4-scene-text {
		padding-block-end: 22px;
	}
}
.cf-m4-scene-text {
	position: relative;
	z-index: 1;
	padding: 24px 28px 12px;
}
.cf-m4-scene h3 {
	color: var(--m4-ivoire);
	font-size: clamp(28px, 2.35vw, 34px);
	line-height: 1.1;
}
.cf-m4 .cf-m4-scene p {
	margin-block-start: 10px;
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.4;
}
.cf-m4 .cf-m4-link {
	margin-block-start: 8px;
}
/* Bloc Bouton présenté comme le lien souligné de la maquette. */
.cf-m4 .cf-m4-link .wp-block-button__link {
	justify-content: flex-start;
	min-height: 44px;
	padding: 0;
	border-radius: 0;
	width: fit-content;
	/* Soulignement continu sous le texte et la flèche, comme sur la maquette. */
	background: linear-gradient(currentColor, currentColor) left calc(100% - 7px) / 100% 1px no-repeat;
	color: var(--m4-or);
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	text-decoration: none;
}
.cf-m4 .cf-m4-link .wp-block-button__link::after {
	content: "\2192" / "";
	margin-inline-start: 14px;
}
.cf-m4 .cf-m4-link .wp-block-button__link:hover {
	background: linear-gradient(currentColor, currentColor) left calc(100% - 7px) / 100% 1px no-repeat;
	color: var(--m4-ivoire);
}

/* ---------- Méthode ---------- */
.cf-m4-method {
	position: relative;
	overflow: hidden;
	background: var(--m4-encre);
	color: var(--m4-ivoire);
}
.cf-m4-method-img {
	position: absolute;
	inset: 0 auto 0 0;
	width: 35.3%;
	height: 100%;
}
.cf-m4-method-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0 50%;
	-webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
}
.cf-m4-method-copy {
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	margin-inline-start: 35.7%;
	padding: 28px var(--m4-marge) 28px 0;
}
.cf-m4-method h2 {
	margin-block-start: 8px;
	color: var(--m4-ivoire);
	font-size: clamp(32px, 2.9vw, 46px);
	line-height: 1.08;
}
.cf-m4-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block-start: 22px !important;
}
.cf-m4-step {
	padding-inline: 36px;
	border-inline-start: 1px solid rgb(216 206 193 / 0.3);
}
.cf-m4-step:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}
.cf-m4-step::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	margin-block-end: 10px;
	background: var(--m4-or);
	-webkit-mask: var(--m4-icone) center / contain no-repeat;
	mask: var(--m4-icone) center / contain no-repeat;
}
.cf-m4-step-respire {
	--m4-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='15' cy='15' r='5'/%3E%3Ccircle cx='15' cy='15' r='10'/%3E%3Ccircle cx='15' cy='15' r='14'/%3E%3C/svg%3E");
}
.cf-m4-step-focus {
	--m4-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='15' cy='15' r='9'/%3E%3Ccircle cx='15' cy='15' r='1.5' fill='%23000'/%3E%3Cpath d='M15 1v7M15 22v7M1 15h7M22 15h7'/%3E%3C/svg%3E");
}
.cf-m4-step-action {
	--m4-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 15h25M18 6l9 9-9 9'/%3E%3C/svg%3E");
}
.cf-m4-step h3 {
	color: var(--m4-ivoire);
	font-family: var(--m4-texte);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}
.cf-m4 .cf-m4-step p {
	margin-block-start: 4px;
	font-size: 15px;
	line-height: 1.4;
}

/* ---------- Bande de repères (sans valeur chiffrée) ---------- */
.cf-m4-reperes-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	padding-block: 24px;
}
.cf-m4-repere {
	padding-inline: 8px;
	text-align: center;
	border-inline-start: 1px solid var(--m4-pierre);
}
.cf-m4-repere:first-child {
	border-inline-start: 0;
}
.cf-m4 .cf-m4-repere-mot {
	color: var(--m4-bronze);
	font-family: var(--m4-titres);
	font-size: clamp(26px, 2.25vw, 38px);
	font-weight: 600;
	line-height: 1.1;
}
.cf-m4 .cf-m4-repere-sens {
	margin-block-start: 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---------- Bande panoramique ---------- */
.cf-m4-panorama {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 134px;
	overflow: hidden;
	background: var(--m4-nuit);
}
.cf-m4-panorama-img {
	position: absolute;
	inset: 0;
}
.cf-m4-panorama-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 70%;
}
.cf-m4 .cf-m4-panorama-text {
	position: relative;
	z-index: 1;
	padding: 24px 20px;
	color: var(--m4-ivoire);
	font-family: var(--m4-titres);
	font-size: clamp(26px, 2.5vw, 38px);
	font-style: italic;
	font-synthesis: style;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
	text-shadow: 0 1px 12px rgb(14 24 34 / 0.75);
}

/* ---------- Guide ---------- */
.cf-m4-guide-grid {
	display: grid;
	grid-template-columns: minmax(180px, 26.5%) minmax(0, 1fr) minmax(220px, 24%);
	align-items: center;
	column-gap: 40px;
	padding-block: 16px 24px;
}
.cf-m4-guide-img img {
	width: min(100%, 186px);
	height: auto;
	margin-inline: auto;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgb(14 24 34 / 0.2), 0 18px 32px -14px rgb(14 24 34 / 0.5);
}
.cf-m4-guide .cf-m4-label {
	color: var(--m4-encre);
}
.cf-m4-guide h2 {
	margin-block-start: 8px;
	font-size: clamp(30px, 2.8vw, 42px);
	line-height: 1.08;
}
.cf-m4 .cf-m4-guide-copy p:not(.cf-m4-label) {
	margin-block-start: 10px;
	font-size: 16px;
	line-height: 1.4;
}
.cf-m4 .cf-m4-guide-btn {
	margin-block-start: 16px;
}
.cf-m4 ul.cf-m4-guide-list {
	margin: 0;
	padding: 12px 0 12px 40px;
	list-style: none;
	border-inline-start: 1px solid var(--m4-bronze);
}
.cf-m4 .cf-m4-guide-list li {
	position: relative;
	margin: 0;
	padding: 8px 0 8px 32px;
	font-size: 16px;
	line-height: 1.35;
}
.cf-m4 .cf-m4-guide-list li::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	width: 16px;
	height: 8px;
	border-bottom: 2px solid var(--m4-bronze);
	border-left: 2px solid var(--m4-bronze);
	transform: rotate(-45deg);
}

/* Invitation discrète au contact, sous le guide. */
.cf-m4 .cf-m4-contact-invite {
	margin-block: 0;
	padding-block: 16px 28px;
	border-block-start: 1px solid var(--m4-bronze);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}
.cf-m4 .cf-m4-contact-invite a {
	display: inline-block;
	min-height: 24px;
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- Pied ---------- */
.cf-m4-footer {
	padding-block: 16px;
	background: var(--m4-encre);
	color: var(--m4-ivoire);
}
.cf-m4-footer-grid {
	display: grid;
	grid-template-columns: 160px auto minmax(0, 1fr);
	align-items: center;
	column-gap: 40px;
}
.cf-m4-footer .wp-block-site-logo {
	grid-row: span 2;
	margin: 0;
}
.cf-m4-footer .cf-m4-footer-sign {
	padding-inline-start: 40px;
	border-inline-start: 1px solid var(--m4-or);
	font-family: var(--m4-titres);
	font-size: 20px;
	font-style: italic;
	font-synthesis: style;
	font-weight: 600;
	line-height: 1.3;
}
.cf-m4-footer-nav {
	margin-inline-start: auto;
	font-size: 15px;
	font-weight: 600;
}
.cf-m4-footer-nav .wp-block-navigation__container {
	gap: 4px 32px;
}
.cf-m4-footer-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--m4-ivoire);
	text-decoration: none;
}
.cf-m4-footer-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}
.cf-m4-footer .cf-m4-footer-legal {
	grid-column: 2 / -1;
	align-self: start;
	font-size: 13px;
	line-height: 1.4;
	color: var(--m4-pierre);
}
.cf-m4-footer .cf-m4-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 16px;
}
.cf-m4-footer .cf-m4-footer-legal a {
	display: inline-block;
	min-height: 24px;
	padding-block: 2px;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cf-m4-footer .cf-m4-footer-legal a:hover,
.cf-m4-footer .cf-m4-footer-legal a:focus-visible {
	color: var(--m4-ivoire);
}

/* ---------- Tablette ---------- */
@media (max-width: 1023px) {
	.cf-m4-header-inner {
		gap: 12px;
	}
	.cf-m4-brand-name {
		font-size: 12px;
		letter-spacing: 0.14em;
	}
	.cf-m4-nav {
		font-size: 14px;
	}
	.cf-m4-nav .wp-block-navigation__container {
		flex-wrap: nowrap;
		gap: 8px 14px;
	}
	.cf-m4-nav .cf-m4-nav-acces .wp-block-navigation-item__content {
		min-width: 96px;
		padding-inline: 8px;
	}
	.cf-m4-nav .cf-m4-nav-acces-1 {
		margin-inline-start: 0;
		padding-inline-start: 14px;
	}
	.cf-m4-nav .cf-m4-nav-acces {
		margin-inline-start: -6px;
	}
	.cf-m4-nav .cf-m4-nav-acces.cf-m4-nav-acces-1 {
		margin-inline-start: 0;
	}
	.cf-m4-hero h1 br {
		display: none;
	}
	.cf-m4-hero-img img {
		object-position: 78% 50%;
	}
	/* Cadre sur le sommet de droite : le centre de la bande est la zone retouchée. */
	.cf-m4-panorama-img img {
		object-position: 88% 70%;
	}
	.cf-m4-panorama::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: rgb(14 24 34 / 0.42);
	}
	.cf-m4 .cf-m4-panorama-text {
		z-index: 2;
	}
	/* Tablette : Performance garde ses deux cartes, Student passe dessous. */
	.cf-m4-portals {
		grid-template-columns: minmax(0, 1fr);
		margin-inline: 0;
	}
	.cf-m4-perf-cards {
		padding: 0 10px 10px;
	}
	.cf-m4-portal-head {
		padding-inline: 20px;
	}
	.cf-m4-scene-text {
		padding-inline: 20px;
	}
	.cf-m4-step {
		padding-inline: 16px;
	}
	/* Tablette : trois repères, puis deux, sur une grille de six colonnes. */
	.cf-m4-reperes-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		row-gap: 20px;
	}
	.cf-m4-repere {
		grid-column: span 2;
	}
	.cf-m4-repere:nth-child(n + 4) {
		grid-column: span 3;
	}
	.cf-m4-repere:nth-child(4) {
		border-inline-start: 0;
	}
	.cf-m4-footer-grid {
		grid-template-columns: 160px minmax(0, 1fr);
		column-gap: 24px;
	}
	.cf-m4-footer .cf-m4-footer-sign {
		padding-inline-start: 24px;
	}
	.cf-m4-footer-nav {
		grid-column: 2;
		margin-inline-start: 0;
	}
	.cf-m4-footer-nav .wp-block-navigation__container {
		justify-content: flex-start;
	}
	.cf-m4-footer .wp-block-site-logo {
		grid-row: span 3;
	}
	.cf-m4-footer .cf-m4-footer-legal {
		grid-column: 2;
	}
	.cf-m4-guide-grid {
		grid-template-columns: minmax(180px, 32%) minmax(0, 1fr);
		row-gap: 16px;
		padding-block: 24px;
	}
	.cf-m4 ul.cf-m4-guide-list {
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		gap: 0 32px;
		padding: 0;
		border-inline-start: 0;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.cf-m4-header-inner {
		min-height: 72px;
		padding-block: 4px;
	}
	.cf-m4-header .wp-block-site-logo img {
		width: 60px;
	}
	.cf-m4-brand-name {
		font-size: 12px;
	}
	.cf-m4-hero-copy {
		width: 100%;
		min-height: 0;
		padding-block: 24px 28px;
	}
	.cf-m4-hero h1 {
		font-size: clamp(38px, 11vw, 44px);
	}
	.cf-m4-hero h1 br {
		display: none;
	}
	.cf-m4-access {
		gap: 12px;
		margin-block-start: 20px !important;
	}
	.cf-m4-access .wp-block-button__link {
		padding-inline: 8px;
	}
	.cf-m4 .cf-m4-access-pub {
		font-size: 13px;
	}
	.cf-m4-hero-img {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.cf-m4-hero-img img {
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%);
		mask-image: linear-gradient(180deg, transparent 0, #000 18%);
	}
	.cf-m4-univers {
		padding-block: 32px;
	}
	.cf-m4-portals {
		gap: 16px;
		margin-block-start: 20px !important;
	}
	.cf-m4-perf-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		padding: 0 8px 8px;
	}
	.cf-m4-scene {
		min-height: 340px;
	}
	.cf-m4-scene-text {
		padding-inline: 16px;
	}
	.cf-m4 .cf-m4-link .wp-block-button__link {
		font-size: 15px;
	}
	.cf-m4 .cf-m4-link .wp-block-button__link::after {
		margin-inline-start: 10px;
	}
	.cf-m4-method-img {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 7;
	}
	.cf-m4-method-img img {
		-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
	}
	.cf-m4-method-copy {
		margin-inline-start: 0;
		padding: 16px 20px 32px;
	}
	.cf-m4-steps {
		grid-template-columns: minmax(0, 1fr);
	}
	.cf-m4-step,
	.cf-m4-step:first-child {
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr);
		column-gap: 16px;
		padding: 14px 0;
		border-block-start: 1px solid rgb(216 206 193 / 0.3);
		border-inline-start: 0;
	}
	.cf-m4-step::before {
		grid-row: span 2;
		margin: 0;
	}
	/* Mobile : empilement, chaque public sur sa propre ligne. */
	.cf-m4-reperes-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding-block: 12px;
	}
	.cf-m4-repere,
	.cf-m4-repere:nth-child(n + 4) {
		grid-column: auto;
		padding: 14px 8px;
		border-inline-start: 0;
		border-block-start: 1px solid var(--m4-pierre);
	}
	.cf-m4-repere:first-child {
		border-block-start: 0;
	}
	.cf-m4 .cf-m4-repere-mot {
		font-size: 28px;
	}
	.cf-m4 .cf-m4-repere-sens {
		margin-block-start: 4px;
	}
	.cf-m4-panorama {
		min-height: 150px;
	}
	.cf-m4-guide-grid {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 32px;
	}
	.cf-m4-guide-img img {
		width: 180px;
	}
	.cf-m4 ul.cf-m4-guide-list {
		display: block;
	}
	.cf-m4-footer-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
	}
	.cf-m4-footer .wp-block-site-logo {
		grid-row: auto;
	}
	.cf-m4-footer .cf-m4-footer-sign {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
	.cf-m4-footer-nav {
		grid-column: auto;
		margin-inline-start: 0;
	}
	.cf-m4-footer-nav .wp-block-navigation__container {
		justify-content: flex-start;
		gap: 0 24px;
	}
	.cf-m4-footer .cf-m4-footer-legal {
		grid-column: auto;
	}
}

/* ---------- Page Guide gratuit ---------- */
.cf-m4-guide-page {
	background: var(--m4-encre);
	color: var(--m4-ivoire);
}
.cf-m4-guide-page-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: start;
	gap: 56px;
	padding-block: 48px 64px;
}
.cf-m4 .cf-m4-guide-page-grid > * {
	margin-block: 0;
}
.cf-m4-guide-page h1 {
	margin-block-start: 14px;
	color: var(--m4-ivoire);
	font-size: clamp(38px, 3.6vw, 56px);
	line-height: 1.06;
}
.cf-m4 .cf-m4-guide-page-img {
	margin-block-start: 32px;
}
.cf-m4-guide-page-img img {
	width: min(100%, 240px);
	height: auto;
	border-radius: 4px;
	box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.7);
}

/* ---------- Formulaire ---------- */
.cf-m4-form-panel {
	position: relative;
	box-sizing: border-box;
	padding: 32px;
	border-radius: 8px;
	background: var(--m4-ivoire);
	color: var(--m4-encre);
}
.cf-m4-form-panel:focus {
	outline: 3px solid var(--m4-or);
	outline-offset: 3px;
}
.cf-m4 .cf-m4-form-panel h2 {
	margin: 0 0 20px;
	color: var(--m4-encre);
	font-size: clamp(28px, 2.4vw, 36px);
	line-height: 1.1;
}
.cf-m4-form-panel p {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
}
.cf-m4-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-block-end: 18px !important;
}
.cf-m4-field label {
	font-size: 15px;
	font-weight: 700;
}
.cf-m4-field-tag {
	font-weight: 500;
}
.cf-m4-field input,
.cf-m4-field select {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--m4-encre);
	border-radius: 2px;
	background: #fff;
	color: var(--m4-encre);
	font-family: var(--m4-texte);
	font-size: 16px;
}
.cf-m4-field input[aria-invalid="true"] {
	border-width: 2px;
	border-color: var(--m4-terre, #b56b54);
}
.cf-m4-field-help {
	font-size: 14px;
	line-height: 1.4;
}
.cf-m4-field-error {
	font-size: 15px;
	font-weight: 700;
}
.cf-m4-field-error::before {
	content: "! " / "";
}
.cf-m4-form-errors {
	margin-block-end: 18px;
	padding: 12px 14px;
	border-inline-start: 4px solid #b56b54;
	background: var(--m4-pierre);
}
.cf-m4-form-errors p + p {
	margin-block-start: 4px;
}
.cf-m4-form-panel a {
	color: var(--m4-encre);
	font-weight: 700;
	text-underline-offset: 3px;
}
.cf-m4-optin {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 4px 12px;
	align-items: start;
	margin-block: 4px 20px !important;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--m4-pierre);
}
.cf-m4-optin input {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--m4-encre);
}
.cf-m4-optin label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}
.cf-m4-optin .cf-m4-field-help {
	grid-column: 2;
}
.cf-m4-form-action {
	margin-block-end: 16px !important;
}
.cf-m4 .cf-m4-form-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: 2px;
	background: var(--m4-or);
	color: var(--m4-encre);
	cursor: pointer;
	font-family: var(--m4-texte);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}
.cf-m4 .cf-m4-form-button:hover {
	background: var(--m4-encre);
	color: var(--m4-ivoire);
}
.cf-m4 .cf-m4-form-note {
	font-size: 14px;
	line-height: 1.45;
}
.cf-m4 .cf-m4-confirmation .cf-m4-form-note + .cf-m4-form-note {
	margin-block-start: 10px;
}
.cf-m4 .cf-m4-confirmation p:not([class]) + .cf-m4-form-note {
	margin-block-start: 16px;
}
.cf-m4 .cf-m4-form-panel :where(a, input, select, button):focus-visible {
	outline: 3px solid var(--m4-encre);
	outline-offset: 2px;
}
.cf-m4 .cf-m4-form-panel p a[href="#cf-email"] {
	display: inline-block;
}

/* ---------- Page de confidentialité ---------- */
.cf-m4-prose {
	max-width: 880px;
	padding-block: 48px 64px;
}
.cf-m4 .cf-m4-prose .cf-m4-label {
	color: var(--m4-encre);
}
.cf-m4-prose h1 {
	margin-block: 8px 20px;
	font-size: clamp(38px, 3.6vw, 56px);
	line-height: 1.06;
}
.cf-m4 .cf-m4-prose h2 {
	margin-block: 28px 8px;
	font-size: 28px;
	line-height: 1.15;
}
.cf-m4-prose p,
.cf-m4-prose li {
	font-size: 16px;
	line-height: 1.5;
}
.cf-m4-prose a {
	color: var(--m4-encre);
	font-weight: 700;
}
.cf-m4-prose a:focus-visible {
	outline-color: var(--m4-encre) !important;
}

@media (max-width: 860px) {
	.cf-m4-guide-page-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-block: 28px 40px;
	}
	.cf-m4 .cf-m4-guide-page-img {
		display: none;
	}
	.cf-m4-form-panel {
		padding: 24px 20px;
	}
}
.cf-m4 .cf-m4-confirmation .cf-m4-form-action {
	margin-block-start: 20px;
}

/* ---------- Contact et désinscription ---------- */
.cf-m4-field textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 144px;
	padding: 10px 12px;
	border: 1px solid var(--m4-encre);
	border-radius: 2px;
	background: #fff;
	color: var(--m4-encre);
	font-family: var(--m4-texte);
	font-size: 16px;
	line-height: 1.45;
	resize: vertical;
}
.cf-m4-field textarea[aria-invalid="true"] {
	border-width: 2px;
	border-color: #b56b54;
}
.cf-m4 .cf-m4-form-panel textarea:focus-visible {
	outline: 3px solid var(--m4-encre);
	outline-offset: 2px;
}
.cf-m4 .cf-m4-contact-direct {
	margin-block-start: 20px;
	font-size: 16px;
	line-height: 1.45;
}
.cf-m4 .cf-m4-contact-direct a {
	color: var(--m4-ivoire);
	font-weight: 700;
	text-underline-offset: 3px;
}
.cf-m4-prose ul {
	padding-inline-start: 22px;
}