/**
 * Matière à Vivre — Sections
 * Styles des sections produites par les widgets Elementor et les templates
 * du CPT Projet.
 *
 * Unités de viewport : `svh`, jamais `dvh`.
 *
 * `dvh` suit le viewport *dynamique* — sur mobile il grandit quand la barre
 * d'adresse se replie au scroll et rétrécit quand elle revient. Toute section
 * dimensionnée en `dvh` change donc de hauteur pendant le défilement et décale
 * ce qui la suit ; sur un sticky-stack, elle décale en plus le point d'accroche
 * de chaque slide. `svh` est calé sur le viewport barre visible : il ne varie
 * jamais. Le `vh` qui précède chaque déclaration reste le repli des navigateurs
 * antérieurs à Safari 15.4 / Chrome 108.
 */

/* ======================================================================
 * 1. Hero — ouverture cinématographique
 * ====================================================================== */

.mav-hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 640px;
	overflow: hidden;
}

/**
 * Plein écran, quel que soit le conteneur qui accueille le widget.
 *
 * Déposé dans Elementor, le hero se retrouve à l'intérieur d'un conteneur
 * « boxed » large de 1140 px environ. Sans ce débordement, il s'afficherait
 * comme un simple bloc centré, avec des marges de part et d'autre.
 *
 * `margin-inline: calc(50% - 50vw)` ramène les bords de l'élément à ceux de la
 * fenêtre : les 50 % se calculent sur la largeur du parent, les 50vw sur celle
 * de l'écran, et la différence annule exactement le retrait. `overflow-x:
 * hidden` posé sur le body absorbe la largeur de la barre de défilement.
 */
.mav-hero--fullbleed {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

/**
 * Le header fixe est compensé par un padding sur .mav-main pour les pages
 * ordinaires. Une page qui ouvre sur le hero n'en veut pas : sans cela le bas
 * de la vidéo sortirait de l'écran.
 */
.mav-main:has(.mav-hero) {
	padding-top: 0;
}

/**
 * Barre d'administration WordPress : elle décale toute la page vers le bas,
 * et 100svh déborderait d'autant. Visible des seuls utilisateurs connectés.
 */
body.admin-bar .mav-hero {
	height: calc(100vh - 32px);
	height: calc(100svh - 32px);
}

@media screen and (max-width: 782px) {

	body.admin-bar .mav-hero {
		height: calc(100vh - 46px);
		height: calc(100svh - 46px);
	}
}

/**
 * Elementor applique un padding par défaut à ses conteneurs. On le neutralise
 * pour celui qui porte le hero — sans quoi une bande resterait au-dessus et
 * en dessous. Un padding réglé à la main dans l'éditeur reste prioritaire :
 * dans ce cas, le mettre à zéro sur le conteneur.
 */
.e-con:has(> .e-con-inner > .elementor-widget-mav-hero),
.e-con:has(> .elementor-widget-mav-hero),
.elementor-section:has(.mav-hero--fullbleed) {
	padding-block: 0;
	padding-inline: 0;
}

.elementor-widget-mav-hero,
.elementor-widget-mav-hero > .elementor-widget-container {
	width: 100%;
}

/**
 * `z-index: 0` est indispensable et non décoratif : il fait du conteneur un
 * contexte d'empilement, ce qui enferme le `z-index` de la vidéo et de l'image
 * de repli. Sans lui, la vidéo (z-index 1) passerait devant le logo, le
 * sous-titre et le bouton, qui n'ont pas de z-index propre.
 */
.mav-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--mav-ink);
	z-index: 0;
}

/**
 * Vidéo de fond, recadrée plein cadre quel que soit le format de l'écran.
 *
 * Pour un fichier hébergé sur le site, `object-fit: cover` suffit et fonctionne
 * avec n'importe quel format source — y compris le 4:3 du film livré.
 */
.mav-hero .mav-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	border: 0;
	z-index: 1;
}

/**
 * Une iframe de plateforme externe n'accepte pas `object-fit` : le recadrage
 * passe alors par le dimensionnement du cadre lui-même, sur la base d'un
 * format 16:9 — d'où les 178vh et 56.25vw.
 */
.mav-hero .mav-hero__video--embed {
	inset: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100vw, 178vh);
	height: max(56.25vw, 100vh);
	object-fit: fill;
}

/**
 * L'image de repli reste sous la vidéo : elle prend le relais si la vidéo
 * n'est pas chargée, ou sur mobile lorsqu'elle y est désactivée.
 *
 * Le sélecteur est préfixé par `.mav-hero` pour la même raison que les cadres
 * d'image (voir components.css) : passer devant `.elementor img`.
 */
.mav-hero .mav-hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/**
 * Voile de lisibilité, entre la vidéo et le dégradé du design.
 *
 * Le dégradé d'origine a été calibré sur un film sombre. Sur des images
 * claires, le sous-titre blanc tombe à 3,7:1 — sous le seuil de 4,5:1. Ce
 * voile, réglable depuis le widget, remonte le contraste sans toucher au
 * dégradé lui-même.
 */
.mav-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: rgb(30 17 11 / var(--mav-scrim, 0));
}

.mav-hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--mav-space-28);
	padding: 0 var(--mav-gutter-narrow);
	text-align: center;
	pointer-events: none;
}

.mav-hero__logo {
	width: min(340px, 60vw);
	height: auto;
	filter: brightness(0) invert(1);
	opacity: 0.96;
}

.mav-hero__wordmark {
	font-family: var(--mav-font-display);
	font-style: italic;
	font-weight: var(--mav-weight-light);
	font-size: min(160px, 28vw);
	line-height: 1;
	color: var(--mav-cream);
}

.mav-hero__subtitle {
	margin: 0;
	color: var(--mav-on-dark-92);
	font-size: 13px;
	font-weight: var(--mav-weight-light);
	letter-spacing: var(--mav-track-eyebrow);
	text-transform: uppercase;
}

.mav-hero__title {
	color: var(--mav-cream);
	max-width: 900px;
}

.mav-hero__button {
	pointer-events: auto;
	margin-top: 10px;
}

.mav-hero__cue {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	pointer-events: none;
}

.mav-hero__cue-line {
	display: block;
	width: 1px;
	height: 56px;
	background: var(--mav-on-dark-75);
}

@media (max-width: 767px) {

	.mav-hero {
		min-height: 560px;
	}

	.mav-hero__subtitle {
		font-size: 11px;
		letter-spacing: 0.26em;
	}

	/* Vidéo coupée sur mobile : seule l'image de repli reste affichée. */
	.mav-hero--no-video-mobile .mav-hero__video {
		display: none;
	}
}

/* ======================================================================
 * 2. Lightbox vidéo
 * ====================================================================== */

.mav-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--mav-z-lightbox);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--mav-gutter-narrow);
	background: var(--mav-lightbox-bg);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mav-duration) ease, visibility var(--mav-duration);
}

/* L'attribut hidden doit l'emporter sur le display:flex ci-dessus. */
.mav-lightbox[hidden] {
	display: none;
}

.mav-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.mav-lightbox__frame {
	position: relative;
	width: min(1100px, 92vw);
	aspect-ratio: 16 / 9;
	transform: translateY(14px) scale(0.985);
	transition: transform 0.6s var(--mav-ease);
}

.mav-lightbox.is-open .mav-lightbox__frame {
	transform: none;
}

.mav-lightbox__frame iframe,
.mav-lightbox__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mav-lightbox__close {
	position: fixed;
	top: 28px;
	right: 32px;
	background: transparent;
	border: 0;
	color: var(--mav-cream);
	font-family: var(--mav-font-body);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity var(--mav-duration) ease;
}

.mav-lightbox__close:hover {
	opacity: 0.65;
}

@media (max-width: 767px) {

	.mav-lightbox__close {
		top: 18px;
		right: 20px;
	}
}

/* ======================================================================
 * 3. Manifeste
 * ====================================================================== */

/**
 * Le rythme vertical passe par des marges explicites plutôt que par `gap` :
 * le bloc dépliable est un enfant de hauteur nulle lorsqu'il est fermé, et un
 * `gap` lui réserverait malgré tout son espacement, creusant un vide sous le
 * texte d'introduction.
 */
.mav-manifeste {
	padding: var(--mav-section-y-lg) var(--mav-gutter-narrow) var(--mav-section-y);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
}

.mav-manifeste__head,
.mav-manifeste__title {
	margin-bottom: var(--mav-space-56);
}

.mav-manifeste .mav-toggle {
	margin-top: var(--mav-space-56);
}

.mav-manifeste__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mav-space-24);
}

.mav-manifeste__title {
	max-width: var(--mav-measure-wide);
}

.mav-manifeste__intro {
	max-width: var(--mav-measure-narrow);
}

/* Bloc dépliable — transition sur max-height, easing du site. */
.mav-manifeste__more {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	width: 100%;
	transition:
		max-height var(--mav-duration-reveal) var(--mav-ease),
		opacity 0.9s ease;
}

.mav-manifeste__more.is-open {
	opacity: 1;
}

.mav-manifeste__more-inner {
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-20);
	max-width: var(--mav-measure-narrow);
	margin: 0 auto;
	padding-top: var(--mav-space-20);
	text-align: center;
}

.mav-manifeste__more-inner p {
	margin: 0;
}

/* ======================================================================
 * 4. Projets — slider vertical en sticky-stack
 * ====================================================================== */

.mav-stack {
	position: relative;
}

.mav-stack__slide {
	position: sticky;
	top: 0;
	display: block;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
}

.mav-stack__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mav-space-40);
	padding: 0 64px 56px;
	pointer-events: none;
	color: var(--mav-cream);
}

.mav-stack__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-left: var(--mav-space-96);
	max-width: 720px;
}

.mav-stack__title {
	color: var(--mav-cream);
}

.mav-stack__excerpt {
	max-width: var(--mav-measure-narrow);
}

.mav-stack__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 18px;
	flex-shrink: 0;
}

.mav-stack__count {
	font-family: var(--mav-font-display);
	font-weight: var(--mav-weight-light);
	font-size: 22px;
	color: var(--mav-on-dark-75);
}

/* Léger zoom de l'image au survol, dans l'easing du site. */
.mav-stack__slide .mav-frame > img {
	transition: transform 1.2s var(--mav-ease);
}

.mav-stack__slide:hover .mav-frame > img {
	transform: scale(1.03);
}

/* Slide final — appel à l'action sur fond espresso. */
.mav-stack__slide--cta {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mav-espresso);
}

.mav-stack__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	text-align: center;
	padding: 0 var(--mav-gutter-narrow);
}

.mav-stack__cta-count {
	font-family: var(--mav-font-display);
	font-weight: var(--mav-weight-light);
	font-size: 20px;
	color: var(--mav-accent-dark-1);
}

.mav-stack__cta-title {
	color: var(--mav-text-light);
}

@media (max-width: 1439px) {
	.mav-stack__text {
		padding-left: 64px;
	}
}

@media (max-width: 1023px) {

	.mav-stack__body {
		padding: 0 var(--mav-gutter) 48px;
	}

	.mav-stack__text {
		padding-left: 40px;
	}
}

@media (max-width: 767px) {

	.mav-stack__body {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mav-space-20);
		padding: 0 var(--mav-gutter) 40px;
	}

	.mav-stack__text {
		padding-left: 0;
		max-width: 100%;
	}

	.mav-stack__aside {
		align-items: flex-start;
	}

	.mav-stack__count {
		display: none;
	}
}

/* ======================================================================
 * 5. Matières & savoir-faire
 * ====================================================================== */

.mav-materials {
	background: var(--mav-sand);
	padding: var(--mav-section-y-sm) var(--mav-gutter);
}

.mav-materials__inner {
	max-width: var(--mav-container-wide);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-80);
}

.mav-materials__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mav-space-32);
}

.mav-materials__head-left {
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-20);
}

.mav-materials__intro {
	max-width: var(--mav-measure-short);
}

.mav-materials__grid {
	display: grid;
	grid-template-columns: repeat(var(--mav-materials-columns, 4), 1fr);
	gap: var(--mav-space-20);
}

@media (max-width: 1023px) {

	.mav-materials__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (max-width: 767px) {

	.mav-materials__grid {
		grid-template-columns: 1fr;
	}

	.mav-materials__inner {
		gap: var(--mav-space-48);
	}
}

/* ======================================================================
 * 6. L'atelier
 * ====================================================================== */

.mav-studio {
	background: var(--mav-espresso);
	color: var(--mav-text-light);
	padding: var(--mav-section-y) var(--mav-gutter);
}

.mav-studio__inner {
	max-width: var(--mav-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--mav-space-96);
	align-items: center;
}

/* Inversion image / texte, sans toucher à l'ordre du balisage. */
.mav-studio__inner--reverse {
	grid-template-columns: 7fr 5fr;
}

.mav-studio__inner--reverse .mav-studio__media {
	order: 2;
}

.mav-studio__inner--reverse .mav-studio__body {
	order: 1;
}

.mav-studio__body {
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-28);
}

.mav-studio__title {
	color: var(--mav-text-light);
	line-height: 1.2;
}

.mav-studio__text {
	max-width: 520px;
}

.mav-studio__button {
	align-self: flex-start;
	margin-top: var(--mav-space-8);
}

@media (max-width: 1023px) {

	.mav-studio__inner {
		grid-template-columns: 1fr;
		gap: var(--mav-space-48);
	}
}

/* ======================================================================
 * 7. Contact (bloc centré de la page d'accueil)
 * ====================================================================== */

.mav-contact {
	padding: var(--mav-section-y-lg) var(--mav-gutter-narrow);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mav-space-40);
	text-align: center;
}

.mav-contact__title {
	max-width: var(--mav-measure);
}

.mav-contact__details {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mav-space-12);
	font-size: 14px;
	font-weight: var(--mav-weight-light);
	letter-spacing: 0.06em;
	color: var(--mav-text-muted);
}

.mav-contact__email {
	align-self: center;
}

.mav-contact__phone {
	margin-top: var(--mav-space-12);
}

.mav-contact__button {
	margin-top: var(--mav-space-8);
}

/* ======================================================================
 * 8. Bandeau CTA sombre
 * ====================================================================== */

.mav-cta {
	background: var(--mav-espresso);
	color: var(--mav-text-light);
	padding: 150px var(--mav-gutter-narrow);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 34px;
	text-align: center;
}

.mav-cta__title {
	color: var(--mav-text-light);
	max-width: var(--mav-measure);
}

@media (max-width: 767px) {

	.mav-cta {
		padding: 90px var(--mav-gutter);
	}
}

/* ======================================================================
 * 9. Archive Projets
 * ====================================================================== */

/* Le header fixe est déjà compensé par le padding de .mav-main. */
.mav-archive__head {
	padding: 110px var(--mav-gutter) 90px;
}

.mav-archive__head-inner {
	max-width: var(--mav-container-wide);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mav-space-40);
}

.mav-archive__head-left {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mav-archive__intro {
	max-width: 440px;
}

.mav-archive__filters {
	padding: 0 var(--mav-gutter) var(--mav-space-40);
}

.mav-archive__filters-inner {
	max-width: var(--mav-container-wide);
	margin: 0 auto;
}

.mav-archive__grid-wrap {
	padding: 60px var(--mav-gutter) var(--mav-section-y-sm);
}

.mav-archive__grid {
	max-width: var(--mav-container-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 72px 40px;
}

/* Une carte sur deux est décalée vers le bas. */
.mav-archive__grid > .mav-card:nth-child(even) {
	margin-top: 64px;
}

.mav-card {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mav-card__frame img {
	transition: transform 1.2s var(--mav-ease);
}

.mav-card:hover .mav-card__frame img {
	transform: scale(1.03);
}

.mav-card__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mav-space-24);
}

.mav-card__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mav-card__meta {
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--mav-accent);
}

.mav-card__excerpt {
	max-width: 420px;
}

.mav-card__number {
	font-family: var(--mav-font-display);
	font-weight: var(--mav-weight-light);
	font-size: 20px;
	color: var(--mav-accent-light);
	flex-shrink: 0;
}

.mav-archive__empty {
	max-width: var(--mav-container);
	margin: 0 auto;
	padding: var(--mav-space-72) 0;
	text-align: center;
}

@media (max-width: 767px) {

	.mav-archive__head {
		padding: 56px var(--mav-gutter) 48px;
	}

	.mav-archive__grid {
		grid-template-columns: 1fr;
		gap: var(--mav-space-48);
	}

	.mav-archive__grid > .mav-card:nth-child(even) {
		margin-top: 0;
	}
}

/* ======================================================================
 * 10. Projet — page détaillée
 * ====================================================================== */

.mav-project-hero {
	position: relative;
	height: 92vh;
	height: 92svh;
	min-height: 600px;
	overflow: hidden;
}

/* Aucune image d'ouverture renseignée : fond sombre, hauteur réduite.
   Le fond reste sombre pour que le titre blanc et le header transparent
   du gabarit « projet » restent lisibles. */
.mav-project-hero--plain {
	height: 60vh;
	height: 60svh;
	min-height: 420px;
	background: var(--mav-espresso);
}

.mav-project-hero__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mav-space-20);
	text-align: center;
	padding: 0 var(--mav-gutter-narrow);
	pointer-events: none;
}

.mav-project-hero__title {
	color: var(--mav-cream);
}

.mav-project-facts {
	border-bottom: 1px solid var(--mav-border);
}

.mav-project-facts__inner {
	max-width: var(--mav-container);
	margin: 0 auto;
	padding: var(--mav-space-48) var(--mav-gutter);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mav-space-32);
	font-weight: var(--mav-weight-light);
}

/* Le nombre de colonnes suit le nombre de champs renseignés :
   une fiche partielle ne laisse pas de colonnes vides. */
.mav-project-facts__inner--1 {
	grid-template-columns: minmax(0, 1fr);
}

.mav-project-facts__inner--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mav-project-facts__inner--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mav-project-facts__inner--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mav-project-facts__item {
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-8);
}

.mav-project-facts__label {
	font-size: 10px;
	letter-spacing: var(--mav-track-meta);
	text-transform: uppercase;
	color: var(--mav-accent-light);
}

.mav-project-facts__value {
	font-size: 15px;
}

.mav-project-intention {
	padding: var(--mav-section-y) var(--mav-gutter-narrow) var(--mav-section-y-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mav-space-48);
	text-align: center;
}

.mav-project-intention__title {
	max-width: 820px;
}

.mav-project-intention__text {
	max-width: var(--mav-measure-narrow);
}

.mav-project-sequence {
	max-width: var(--mav-container-wide);
	margin: 0 auto;
	padding: 0 var(--mav-gutter) var(--mav-section-y);
	display: flex;
	flex-direction: column;
	gap: 38px;
}

.mav-project-sequence__duo {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--mav-space-96);
	align-items: center;
}

/* Un seul des deux volets renseigné : la grille passe sur une colonne,
   avec une largeur bornée pour conserver l'échelle du design. */
.mav-project-sequence__duo--single {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mav-space-48);
}

.mav-project-sequence__duo--single > .mav-figure {
	max-width: 58%;
}

.mav-project-sequence__duo--single > .mav-project-sequence__text {
	max-width: var(--mav-measure-narrow);
}

.mav-project-sequence__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 38px;
}

/* Une seule image dans la paire : elle occupe la première colonne et garde
   donc la largeur prévue par le design, la seconde reste vide. */
.mav-project-sequence__pair--single {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mav-project-sequence__text {
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-24);
}

.mav-project-palette {
	background: var(--mav-espresso);
	color: var(--mav-text-light);
	padding: var(--mav-section-y-sm) var(--mav-gutter);
}

.mav-project-palette__inner {
	max-width: var(--mav-container);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-72);
}

.mav-project-palette__head {
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-20);
}

.mav-project-palette__title {
	color: var(--mav-text-light);
}

.mav-project-palette__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mav-space-20);
}

/* Le nombre de colonnes suit le nombre de matières renseignées. Pour une ou
   deux matières, la largeur est bornée : un échantillon carré étiré sur toute
   la page sortirait de l'échelle du design. */
.mav-project-palette__grid--1,
.mav-project-palette__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 380px));
}

.mav-project-palette__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mav-project-palette__grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mav-project-next {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mav-space-24);
	padding: var(--mav-section-y) var(--mav-gutter-narrow);
	text-align: center;
}

.mav-project-next__title {
	font-family: var(--mav-font-display);
	font-weight: var(--mav-weight-light);
	font-size: var(--mav-h2-cta);
	line-height: var(--mav-lh-title);
	color: var(--mav-brown);
}

@media (max-width: 1023px) {

	.mav-project-sequence,
	.mav-project-sequence__pair {
		gap: 20px;
	}

	.mav-project-sequence__duo {
		grid-template-columns: 1fr;
		gap: var(--mav-space-48);
	}

	.mav-project-sequence__duo--single > .mav-figure,
	.mav-project-sequence__duo--single > .mav-project-sequence__text {
		max-width: none;
	}

	.mav-project-palette__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.mav-project-facts__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mav-space-24);
	}

	.mav-project-facts__inner--1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.mav-project-sequence__pair,
	.mav-project-sequence__pair--single {
		grid-template-columns: minmax(0, 1fr);
	}

	.mav-project-hero__body {
		bottom: 48px;
	}
}

/* ======================================================================
 * 11. Introduction de page
 * ====================================================================== */

.mav-page-intro {
	padding: var(--mav-section-y-lg) var(--mav-gutter) 100px;
}

.mav-page-intro--pad-small {
	padding-top: 100px;
}

.mav-page-intro--pad-none {
	padding-top: 0;
}

.mav-page-intro--dark {
	background: var(--mav-espresso);
	color: var(--mav-text-light);
}

.mav-page-intro--dark .mav-title {
	color: var(--mav-text-light);
}

.mav-page-intro__inner {
	max-width: var(--mav-container-form);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-24);
}

.mav-page-intro__head {
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-24);
}

.mav-page-intro__title {
	max-width: var(--mav-measure);
}

.mav-page-intro__text {
	max-width: 520px;
}

/* Variante centrée — celle de la page Contact. */
.mav-page-intro--center .mav-page-intro__inner,
.mav-page-intro--center .mav-page-intro__head {
	align-items: center;
	text-align: center;
}

.mav-page-intro--center .mav-page-intro__title,
.mav-page-intro--center .mav-page-intro__text {
	margin-inline: auto;
}

/* Variante répartie — titre à gauche, chapô à droite. */
.mav-page-intro--split .mav-page-intro__inner {
	max-width: var(--mav-container-wide);
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mav-space-40);
}

.mav-page-intro--split .mav-page-intro__text {
	max-width: 440px;
}

.mav-page-intro__content {
	margin-top: var(--mav-space-24);
}

@media (max-width: 767px) {

	.mav-page-intro {
		padding-bottom: 56px;
	}

	.mav-page-intro--split .mav-page-intro__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ======================================================================
 * 12. Page Contact
 * ====================================================================== */

.mav-contact-page__body {
	padding: 0 var(--mav-gutter) var(--mav-section-y);
}

.mav-contact-page__grid {
	max-width: var(--mav-container-form);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--mav-space-96);
	align-items: start;
}

@media (max-width: 1023px) {

	.mav-contact-page__grid {
		grid-template-columns: 1fr;
		gap: var(--mav-space-72);
	}
}

/* --- Blocs de coordonnées -------------------------------------------- */

.mav-details {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.mav-details--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mav-space-40) var(--mav-space-32);
}

.mav-details--center {
	align-items: center;
	text-align: center;
}

.mav-details__item {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}

.mav-details--center .mav-details__item {
	align-items: center;
}

.mav-details__label {
	font-family: var(--mav-font-body);
	font-size: 11px;
	font-weight: var(--mav-weight-regular);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--mav-accent);
}

.mav-details--dark .mav-details__label {
	color: var(--mav-accent-dark-1);
}

.mav-details__value {
	font-size: 19px;
	font-weight: var(--mav-weight-light);
	letter-spacing: 0.04em;
	color: var(--mav-brown);
	line-height: 1.5;
}

.mav-details--dark .mav-details__value {
	color: var(--mav-text-light);
}

.mav-details__value--address {
	font-size: 16px;
	line-height: 1.7;
	color: var(--mav-text-muted);
}

.mav-details--dark .mav-details__value--address {
	color: var(--mav-accent-dark-2);
}

.mav-details__social {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	letter-spacing: 0.04em;
}

.mav-details__social:hover .mav-icon--instagram {
	transform: rotate(-6deg);
}

/* ======================================================================
 * 13. Contenu éditorial générique (pages, articles)
 * ====================================================================== */

.mav-page {
	padding: var(--mav-section-y) 0;
}

.mav-page__header {
	max-width: var(--mav-measure);
	margin: 0 auto var(--mav-space-48);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-24);
	align-items: center;
}

.mav-entry-content {
	max-width: var(--mav-measure-narrow);
	margin: 0 auto;
	font-size: var(--mav-body-size);
	line-height: var(--mav-body-line);
	color: var(--mav-text-muted);
}

.mav-entry-content h2,
.mav-entry-content h3 {
	color: var(--mav-brown);
	margin: 2em 0 0.6em;
}

.mav-entry-content a {
	border-bottom: 1px solid var(--mav-rule);
}

/* Elementor prend la main sur la mise en page : on neutralise nos marges. */
.mav-built-with-elementor .mav-page {
	padding: 0;
}