/**
 * Matière à Vivre — Sections V2
 *
 * Feuille additive : elle n'écrase aucune règle des feuilles existantes.
 * Elle porte uniquement les sections introduites par l'export Claude Design V2
 * (page « Philosophie » et nouvelle section « Contact » de la page d'accueil).
 *
 * Source : source-design/V2/Philosophie.dc.html et source-design/V2/Accueil.dc.html
 * Toutes les valeurs sont normatives : elles reprennent le design à l'identique.
 */

/* ======================================================================
 * 0. Jetons complémentaires
 * ====================================================================== */

:root {

	/* Terre cuite du bouton « Contactez-nous » (Accueil V2). */
	--mav-clay: #8A6143;
	--mav-clay-hover: #6B564A;

	/* Fonds de repli des cadres photographiques de la page Philosophie. */
	--mav-frame-warm: #C9BBAA;
	--mav-frame-sand: #C8B8A6;

	/* Voiles de l'ouverture plein écran. */
	--mav-opening-scrim-x: linear-gradient(90deg, rgba(30, 17, 11, 0.52), rgba(30, 17, 11, 0.03));
	--mav-opening-scrim-y: linear-gradient(0deg, rgba(30, 17, 11, 0.52), rgba(30, 17, 11, 0) 62%);

	/* Rythme de la galerie de matières. */
	--mav-matter-gap: 38px;
}

/* ======================================================================
 * 1. Ouverture — image plein écran, titre en bas de page
 * ====================================================================== */

.mav-opening {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--mav-ink);
}

/*
 * `svh` et non `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. Une section
 * dimensionnée en `dvh` change donc de hauteur pendant le défilement, ce qui
 * décale tout le contenu situé en dessous — le saut se reproduit à chaque
 * changement de sens de scroll. `svh` est calé sur le viewport barre visible :
 * il ne bouge jamais. La section garde une hauteur constante, et le repli de
 * la barre laisse simplement voir un peu plus de la section suivante.
 */

/**
 * Plein cadre quel que soit le conteneur Elementor qui accueille le widget.
 * Même mécanique que `.mav-hero--fullbleed` : les 50 % se calculent sur la
 * largeur du parent, les 50vw sur celle de la fenêtre, et la différence annule
 * exactement le retrait imposé par le conteneur « boxed ».
 */
.mav-opening--fullbleed {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

/**
 * Le header fixe ne doit pas décaler une page qui ouvre sur l'image.
 * Le sélecteur commence par `body` afin d'égaler la spécificité de la règle
 * de compensation posée dans base.css, et de l'emporter par l'ordre du
 * cascade — la feuille V2 est chargée après.
 */
body .mav-main:has(.mav-opening) {
	padding-top: 0;
}

/* Barre d'administration : 100svh déborderait d'autant. */
body.admin-bar .mav-opening {
	min-height: calc(100vh - 32px);
	min-height: calc(100svh - 32px);
}

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

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

/* Neutralisation du padding par défaut du conteneur Elementor porteur. */
.e-con:has(> .e-con-inner > .elementor-widget-mav-page-hero),
.e-con:has(> .elementor-widget-mav-page-hero),
.elementor-section:has(.mav-opening--fullbleed) {
	padding-block: 0;
	padding-inline: 0;
}

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

.mav-opening__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

/* `<picture>` est en ligne par défaut : sans cette règle il ne remplit pas le cadre. */
.mav-opening__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.mav-opening__media .mav-image,
.mav-opening__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center var(--mav-opening-focus, 43%);
	display: block;
}

.mav-opening__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--mav-opening-scrim-x);
}

.mav-opening__scrim--bottom {
	background: var(--mav-opening-scrim-y);
}

.mav-opening__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 var(--mav-gutter) 72px;
	color: var(--mav-text-light);
}

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

.mav-opening__eyebrow.mav-eyebrow {
	display: block;
	margin: 0 0 26px;
	color: rgba(245, 241, 234, 0.8);
	animation: mavOpeningEnter var(--mav-duration-enter) var(--mav-ease) both 0.3s;
}

.mav-opening__title.mav-title {
	margin: 0;
	font-size: clamp(48px, 6.4vw, 104px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	text-wrap: initial;
	animation: mavOpeningEnter var(--mav-duration-enter) var(--mav-ease) both 0.55s;
}

.mav-opening__cue {
	position: absolute;
	z-index: 3;
	right: var(--mav-gutter);
	bottom: 40px;
	display: flex;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mav-outline-dark);
	border-radius: 50%;
	color: var(--mav-text-light);
	font-size: 20px;
	font-weight: var(--mav-weight-light);
	line-height: 1;
	transition: transform var(--mav-duration-fast) ease, background var(--mav-duration-fast) ease;
}

.mav-opening__cue:hover,
.mav-opening__cue:focus-visible {
	transform: translateY(5px);
	background: rgba(245, 241, 234, 0.12);
	color: var(--mav-text-light);
}

@keyframes mavOpeningEnter {

	from {
		opacity: 0;
		transform: translateY(28px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.mav-opening__eyebrow.mav-eyebrow,
	.mav-opening__title.mav-title {
		animation: none;
	}
}

@media (max-width: 1023px) {

	.mav-opening__content {
		padding: 0 32px 64px;
	}

	.mav-opening__cue {
		right: 32px;
		bottom: 32px;
	}
}

@media (max-width: 767px) {

	/*
	 * 86svh plutôt que 92svh : autant de hauteur en moins à couvrir, donc
	 * autant d'agrandissement en moins sur le visuel. Le titre reste en bas
	 * de cadre et la section occupe toujours la quasi-totalité de l'écran.
	 */
	.mav-opening {
		min-height: 86vh;
		min-height: 86svh;
	}

	.mav-opening__content {
		padding: 0 var(--mav-gutter-narrow) 56px;
	}

	.mav-opening__eyebrow.mav-eyebrow {
		margin-bottom: 18px;
	}

	.mav-opening__title.mav-title {
		font-size: clamp(42px, 12vw, 64px);
	}

	.mav-opening__cue {
		right: var(--mav-gutter-narrow);
		bottom: 22px;
		width: 40px;
		height: 40px;
		font-size: 17px;
	}
}

/* ======================================================================
 * 2. Duo — deux sensibilités
 * ====================================================================== */

.mav-duo {
	padding: var(--mav-section-y) var(--mav-gutter) var(--mav-section-y-lg);

	/* Le design cale 1240 px de contenu utile, hors gouttières. */
	max-width: calc(var(--mav-container) + var(--mav-gutter) * 2);
	margin: 0 auto;
}

.mav-duo__head {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--mav-space-96);
	margin-bottom: var(--mav-space-96);
}

.mav-duo__lead {
	margin: 0;
	max-width: var(--mav-measure);
	font-family: var(--mav-font-display);
	font-weight: var(--mav-weight-light);
	font-size: clamp(24px, 2.5vw, 38px);
	line-height: 1.35;
	color: var(--mav-brown);
	text-wrap: pretty;
}

.mav-duo__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.mav-person {
	margin: 0;
	min-width: 0;
}

.mav-person__figure {
	margin: 0;
	aspect-ratio: 1.16 / 1;
	overflow: hidden;
	background: var(--mav-frame-warm);
}

.mav-person__figure .mav-image,
.mav-person__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s var(--mav-ease);
}

.mav-person:hover .mav-person__figure .mav-image,
.mav-person:hover .mav-person__figure img {
	transform: scale(1.015);
}

.mav-person__body {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 30px;
	padding-top: 30px;
}

.mav-person__name.mav-title {
	margin: 0;
	font-size: clamp(32px, 3.2vw, 52px);
	line-height: 1;
	text-wrap: initial;
}

.mav-person__role {
	display: block;
	margin-top: var(--mav-space-12);
	font-family: var(--mav-font-body);
	font-size: 10px;
	font-weight: var(--mav-weight-light);
	letter-spacing: var(--mav-track-label);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--mav-text-muted);
}

.mav-person__text {
	margin: 0;
}

@media (max-width: 1023px) {

	.mav-duo {
		padding: 110px 32px 130px;
		max-width: calc(var(--mav-container) + 64px);
	}

	.mav-duo__head {
		grid-template-columns: 1fr;
		gap: var(--mav-space-24);
		margin-bottom: 64px;
	}

	.mav-duo__grid {
		gap: 40px;
	}

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

@media (max-width: 767px) {

	.mav-duo {
		padding: 90px var(--mav-gutter-narrow) 110px;
		max-width: none;
	}

	.mav-duo__grid {
		grid-template-columns: 1fr;
		gap: 72px;
	}

	.mav-person__figure {
		aspect-ratio: 1.12 / 1;
	}
}

/* ======================================================================
 * 3. Philosophie — figure panoramique + bloc éditorial
 * ====================================================================== */

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

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

.mav-philosophy__figure {
	margin: 0 0 140px;
	aspect-ratio: 1.78 / 1;
	overflow: hidden;
	background: var(--mav-frame-sand);
}

.mav-philosophy__figure .mav-image,
.mav-philosophy__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mav-philosophy__lead {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--mav-space-96);
	align-items: start;
	padding-bottom: 150px;
}

.mav-philosophy__title.mav-title {
	margin: 0;
	max-width: 800px;
	font-size: clamp(40px, 4.8vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-wrap: initial;
}

.mav-philosophy__title em {
	font-style: italic;
}

.mav-philosophy__copy {
	padding-top: 56px;
	max-width: 590px;
	display: flex;
	flex-direction: column;
	gap: var(--mav-space-24);
}

.mav-philosophy__copy p {
	margin: 0;
}

.mav-philosophy--cream {
	background: var(--mav-cream);
}

/* Enchaînement direct avec la galerie de matières : pas de respiration basse. */
.mav-philosophy--flush-bottom {
	padding-bottom: 0;
}

@media (max-width: 1023px) {

	.mav-philosophy {
		padding: 100px 32px 120px;
	}

	.mav-philosophy--flush-bottom {
		padding-bottom: 0;
	}

	.mav-philosophy__figure {
		margin-bottom: 90px;
	}

	.mav-philosophy__lead {
		grid-template-columns: 1fr;
		gap: var(--mav-space-24);
		padding-bottom: 100px;
	}

	.mav-philosophy__title em {
	font-style: italic;
}

.mav-philosophy__copy {
		padding-top: var(--mav-space-32);
	}
}

@media (max-width: 767px) {

	.mav-philosophy {
		padding: 80px var(--mav-gutter-narrow) 96px;
	}

	.mav-philosophy__figure {
		aspect-ratio: 1.45 / 1;
		margin-bottom: 64px;
	}

	.mav-philosophy__lead {
		padding-bottom: 72px;
	}

	.mav-philosophy--flush-bottom {
		padding-bottom: 0;
	}
}

/* ======================================================================
 * 4. Galerie de matières — deux colonnes décalées, citation intégrée
 * ====================================================================== */

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

.mav-matter--sand {
	background: var(--mav-sand);
}

.mav-matter--cream {
	background: var(--mav-cream);
}

.mav-matter--pad-top {
	padding-top: var(--mav-section-y-sm);
}

.mav-matter--flush-bottom {
	padding-bottom: 0;
}

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

.mav-matter__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mav-matter-gap);
	align-items: start;
}

.mav-matter__column {
	display: flex;
	flex-direction: column;
	gap: var(--mav-matter-gap);
}

.mav-matter__column--offset {
	padding-top: var(--mav-matter-gap);
}

.mav-matter__photo {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--mav-frame-sand);
}

.mav-matter__photo .mav-image,
.mav-matter__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Visuel laissé dans son format d'origine, sans recadrage. */
.mav-matter__photo--natural {
	aspect-ratio: auto;
	background: transparent;
}

.mav-matter__photo--natural .mav-image,
.mav-matter__photo--natural img {
	height: auto;
	object-fit: contain;
}

.mav-matter__quote {
	margin: 0;
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px;
	color: var(--mav-brown);
	font-family: var(--mav-font-display);
	font-style: italic;
	font-weight: var(--mav-weight-light);
	font-size: clamp(30px, 3.6vw, 56px);
	line-height: 1.1;
	text-wrap: pretty;
}

.mav-matter__quote p {
	margin: 0;
}

@media (max-width: 1023px) {

	.mav-matter {
		--mav-matter-gap: 26px;
		padding: 0 32px 120px;
	}

	.mav-matter--pad-top {
		padding-top: 100px;
	}

	.mav-matter__quote {
		padding: 40px;
	}
}

@media (max-width: 767px) {

	.mav-matter {
		--mav-matter-gap: 20px;
		padding: 0 var(--mav-gutter-narrow) 96px;
	}

	.mav-matter--pad-top {
		padding-top: 80px;
	}

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

	.mav-matter__column--offset {
		padding-top: 0;
	}

	.mav-matter__quote {
		aspect-ratio: auto;
		min-height: 420px;
		padding: 28px;
	}
}

/* ======================================================================
 * 5. Appel à l'action centré — « Prolonger l'expérience »
 * ====================================================================== */

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

.mav-page-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mav-page-cta__title.mav-title {
	margin: 32px 0 0;
	max-width: 900px;
	font-size: clamp(38px, 4.6vw, 72px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.mav-page-cta__text {
	margin: 30px 0 50px;
}

.mav-page-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 46px;
	border-bottom: 1px solid var(--mav-brown);
	padding-bottom: 11px;
	font-family: var(--mav-font-body);
	font-size: 11px;
	line-height: 1;
	letter-spacing: var(--mav-track-button);
	text-transform: uppercase;
	color: var(--mav-brown);
	transition: border-color var(--mav-duration) ease, color var(--mav-duration) ease;
}

.mav-page-cta__arrow {
	font-size: 20px;
	line-height: 1;
	transition: transform var(--mav-duration-fast) ease;
}

.mav-page-cta__link:hover .mav-page-cta__arrow,
.mav-page-cta__link:focus-visible .mav-page-cta__arrow {
	transform: translateX(8px);
}

@media (max-width: 1023px) {

	.mav-page-cta {
		padding: 130px var(--mav-gutter-narrow);
	}
}

@media (max-width: 767px) {

	.mav-page-cta {
		padding: 100px var(--mav-gutter-narrow);
	}

	.mav-page-cta__text {
		margin: 24px 0 40px;
	}

	.mav-page-cta__link {
		gap: 24px;
	}
}

/* ======================================================================
 * 6. Contact avec visuel — nouvelle section de la page d'accueil
 * ====================================================================== */

.mav-contact-visual {
	display: block;
}

.mav-contact-visual__figure {
	margin: 0;
	overflow: hidden;
	background: var(--mav-frame-sand);
}

.mav-contact-visual__figure .mav-image,
.mav-contact-visual__figure img {
	display: block;
	width: 100%;
	height: min(58vw, 820px);
	object-fit: cover;
	object-position: center var(--mav-contact-visual-focus, 64%);
}

.mav-contact-visual__body {
	padding: var(--mav-space-96) var(--mav-gutter-narrow) 128px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 34px;
	text-align: center;
}

/* Graisse moyenne : c'est la graisse du titre dans le design V2. */
.mav-contact-visual__title.mav-title {
	margin: 0;
	max-width: 820px;
	font-size: clamp(34px, 4.4vw, 60px);
	font-weight: var(--mav-weight-medium);
	line-height: 1.24;
}

.mav-contact-visual__button {
	margin-top: 6px;
}

.mav-contact-visual__location {
	margin: 8px 0 0;
	font-family: var(--mav-font-body);
	font-size: 14px;
	font-weight: var(--mav-weight-light);
	letter-spacing: 0.06em;
	line-height: 1.6;
	color: var(--mav-text-muted);
}

/* Bouton terre cuite — style défini par le design V2. */
.mav-button--clay {
	display: inline-block;
	padding: 17px 40px;
	background: var(--mav-clay);
	color: var(--mav-cream);
	font-size: 11px;
	letter-spacing: var(--mav-track-nav);
	transition: background var(--mav-duration) ease, color var(--mav-duration) ease;
}

.mav-button--clay:hover,
.mav-button--clay:focus-visible {
	background: var(--mav-clay-hover);
	color: var(--mav-cream);
}

@media (max-width: 1023px) {

	.mav-contact-visual__body {
		padding: 80px var(--mav-gutter-narrow) 100px;
		gap: 28px;
	}
}

@media (max-width: 767px) {

	.mav-contact-visual__figure .mav-image,
	.mav-contact-visual__figure img {
		height: min(78vw, 520px);
	}

	.mav-contact-visual__body {
		padding: 64px var(--mav-gutter-narrow) 88px;
		gap: 24px;
	}

	.mav-button--clay {
		padding: 15px 32px;
	}
}