/**
 * Matière à Vivre — Composants
 * Sur-titres, titres, boutons, liens, cadres d'image, figures, champs.
 */

/* ======================================================================
 * Sur-titres (eyebrow)
 * ====================================================================== */

.mav-eyebrow {
	display: inline-block;
	font-family: var(--mav-font-body);
	font-size: 11px;
	font-weight: var(--mav-weight-regular);
	letter-spacing: var(--mav-track-eyebrow);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--mav-accent);
}

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

.mav-eyebrow--over {
	color: var(--mav-on-dark-85);
}

.mav-eyebrow--meta {
	font-size: 13px;
	letter-spacing: var(--mav-track-meta);
}

/* Trait vertical décoratif sous le sur-titre du manifeste. */
.mav-rule-vertical {
	display: block;
	width: 1px;
	height: 48px;
	background: var(--mav-rule);
}

/* ======================================================================
 * Titres
 * ====================================================================== */

.mav-title {
	font-family: var(--mav-font-display);
	font-weight: var(--mav-weight-light);
	line-height: var(--mav-lh-title);
	text-wrap: balance;
	margin: 0;
}

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

.mav-title--h1 { font-size: var(--mav-h1-manifeste); }
.mav-title--page { font-size: var(--mav-h1-page); }
.mav-title--archive { font-size: var(--mav-h1-archive); line-height: 1.1; }
.mav-title--project { font-size: var(--mav-h1-project); line-height: 1.08; }
.mav-title--section { font-size: var(--mav-h2-section); }
.mav-title--intention { font-size: var(--mav-h2-intention); line-height: var(--mav-lh-title-loose); }
.mav-title--cta { font-size: var(--mav-h2-cta); line-height: 1.2; }
.mav-title--banner { font-size: var(--mav-h2-banner); line-height: 1.2; }
.mav-title--stack { font-size: var(--mav-h3-stack); line-height: var(--mav-lh-tight); }
.mav-title--card { font-size: var(--mav-h3-card); }
.mav-title--sequence { font-size: var(--mav-h3-sequence); line-height: 1.2; }

/* ======================================================================
 * Texte
 * ====================================================================== */

.mav-text {
	font-size: var(--mav-body-size);
	font-weight: var(--mav-weight-light);
	line-height: var(--mav-body-line);
	color: var(--mav-text-muted);
	text-wrap: pretty;
}

.mav-text--small {
	font-size: var(--mav-body-small);
	line-height: 1.9;
}

.mav-text--large {
	font-size: var(--mav-body-large);
	line-height: var(--mav-lh-body);
}

.mav-text--dark {
	color: var(--mav-accent-dark-2);
}

.mav-text--over {
	color: var(--mav-on-dark-90);
}

.mav-quote {
	font-family: var(--mav-font-display);
	font-style: italic;
	font-size: 20px;
	font-weight: var(--mav-weight-light);
	line-height: 2;
	color: var(--mav-accent-dark-2);
	margin: 0;
}

/* ======================================================================
 * Boutons
 * ====================================================================== */

.mav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 15px 34px;
	border: 0;
	font-family: var(--mav-font-body);
	font-size: 12px;
	font-weight: var(--mav-weight-regular);
	letter-spacing: var(--mav-track-button);
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	text-align: center;
	transition:
		background var(--mav-duration-fast) ease,
		color var(--mav-duration-fast) ease,
		border-color var(--mav-duration-fast) ease;
}

/* Primaire — fond brun sur fond clair. */
.mav-button--primary {
	background: var(--mav-brown);
	color: var(--mav-cream);
}

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

/* Outline clair — sur image ou fond sombre. */
.mav-button--outline {
	padding: 15px 32px;
	background: transparent;
	border: 1px solid var(--mav-on-dark-60);
	color: var(--mav-cream);
	transition:
		background var(--mav-duration) ease,
		color var(--mav-duration) ease,
		border-color var(--mav-duration) ease;
}

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

/* Outline sombre — bandeau CTA espresso. */
.mav-button--outline-dark {
	background: transparent;
	border: 1px solid var(--mav-outline-dark);
	color: var(--mav-text-light);
	transition:
		background var(--mav-duration) ease,
		color var(--mav-duration) ease,
		border-color var(--mav-duration) ease;
}

.mav-button--outline-dark:hover,
.mav-button--outline-dark:focus-visible {
	background: var(--mav-text-light);
	color: var(--mav-espresso);
	border-color: var(--mav-text-light);
}

/* Triangle « lecture » en CSS pur, comme dans le design. */
.mav-button__play {
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 9px;
	border-color: transparent transparent transparent currentColor;
}

/* ======================================================================
 * Liens
 * ====================================================================== */

.mav-link-underline {
	display: inline-block;
	align-self: flex-start;
	font-size: var(--mav-body-large);
	letter-spacing: 0.1em;
	border-bottom: 1px solid var(--mav-rule);
	padding-bottom: 4px;
	transition: border-color var(--mav-duration) ease, color var(--mav-duration) ease;
}

.mav-link-underline:hover {
	border-color: var(--mav-accent);
}

.mav-link-caps {
	display: inline-block;
	font-size: 12px;
	letter-spacing: var(--mav-track-caption);
	text-transform: uppercase;
	border-bottom: 1px solid var(--mav-rule);
	padding-bottom: 6px;
	color: var(--mav-brown);
	transition: border-color var(--mav-duration) ease, color var(--mav-duration) ease;
}

.mav-link-caps--over {
	font-size: 11px;
	color: var(--mav-cream);
	border-bottom-color: var(--mav-on-dark-60);
}

.mav-link-caps--over:hover {
	color: var(--mav-cream);
	border-bottom-color: var(--mav-cream);
}

/* Bouton texte (« Lire la suite »). */
.mav-toggle {
	display: inline-block;
	padding: 0 0 3px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--mav-rule);
	font-family: var(--mav-font-body);
	font-size: 12px;
	letter-spacing: var(--mav-track-nav);
	text-transform: uppercase;
	color: var(--mav-accent);
	cursor: pointer;
	transition: color var(--mav-duration) ease, border-color var(--mav-duration) ease;
}

.mav-toggle:hover {
	color: var(--mav-brown);
	border-color: var(--mav-brown);
}

/* ======================================================================
 * Cadres d'image
 * ====================================================================== */

/* Classe de base posée sur toutes les images de contenu et les placeholders. */
.mav-image {
	display: block;
	max-width: 100%;
}

.mav-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

.mav-frame {
	position: relative;
	overflow: hidden;
	background: var(--mav-image-fallback);
}

/**
 * La classe du cadre est répétée volontairement.
 *
 * La feuille frontend d'Elementor applique `.elementor img { height: auto }`,
 * de spécificité identique à `.mav-frame > img` (une classe + un type), et
 * elle est chargée après celle du thème : à égalité, c'est elle qui gagnait,
 * l'image reprenait son ratio naturel et `object-fit` devenait inopérant —
 * d'où une bande vide sous les images des cadres plein écran, visible dès que
 * l'écran est plus étroit que le ratio de la photo.
 *
 * Répéter `.mav-frame` porte la spécificité à deux classes et rétablit
 * l'intention, sans `!important` et sans toucher à l'ordre de chargement.
 */
.mav-frame.mav-frame > img,
.mav-frame.mav-frame > picture > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--mav-focal, 50% 50%);
	display: block;
}

.mav-frame--3-4 { aspect-ratio: 3 / 4; }
.mav-frame--4-3 { aspect-ratio: 4 / 3; }
.mav-frame--4-5 { aspect-ratio: 4 / 5; }
.mav-frame--1-1 { aspect-ratio: 1 / 1; }
.mav-frame--21-9 { aspect-ratio: 21 / 9; }
.mav-frame--16-9 { aspect-ratio: 16 / 9; }

.mav-frame--fill {
	position: absolute;
	inset: 0;
}

/* Overlays dégradés. */
.mav-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mav-overlay--hero { background: var(--mav-overlay-hero); }
.mav-overlay--card { background: var(--mav-overlay-card); }
.mav-overlay--project { background: var(--mav-overlay-project); }

/* ======================================================================
 * Figures légendées
 * ====================================================================== */

.mav-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mav-figure__caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--mav-font-body);
	font-size: 11px;
	font-weight: var(--mav-weight-regular);
	letter-spacing: var(--mav-track-caption);
	text-transform: uppercase;
	color: var(--mav-brown);
}

.mav-figure__caption--dark {
	color: var(--mav-accent-dark-2);
	justify-content: flex-start;
}

.mav-figure__caption--muted {
	font-size: 12px;
	letter-spacing: var(--mav-track-label);
	color: var(--mav-accent-light);
	justify-content: flex-start;
}

.mav-figure__number {
	color: var(--mav-accent-light);
	flex-shrink: 0;
}

/**
 * Décalage vertical des colonnes paires (rythme irrégulier du design).
 *
 * Le décalage passe par une variable CSS plutôt que par une valeur de
 * `transform` figée : l'animation de révélation peut ainsi composer avec lui
 * sans jamais l'écraser. C'est ce qui préserve le rythme décalé des grilles
 * après l'apparition au scroll.
 */
.mav-offset-48 {
	--mav-offset-y: 48px;
	transform: translateY(var(--mav-offset-y));
}

.mav-offset-64 {
	--mav-offset-y: 64px;
	transform: translateY(var(--mav-offset-y));
}

@media (max-width: 1023px) {
	.mav-offset-48,
	.mav-offset-64 {
		--mav-offset-y: 0px;
	}
}

/* ======================================================================
 * Champs de formulaire
 * ====================================================================== */

.mav-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 11px;
	letter-spacing: var(--mav-track-label);
	text-transform: uppercase;
	color: var(--mav-accent);
}

.mav-field input,
.mav-field textarea,
.mav-field select {
	border: 0;
	border-bottom: 1px solid var(--mav-rule);
	background: transparent;
	padding: 10px 0;
	font-size: 16px;
	font-weight: var(--mav-weight-light);
	letter-spacing: 0;
	text-transform: none;
	color: var(--mav-brown);
	outline: none;
	transition: border-color var(--mav-duration-fast) ease;
}

.mav-field input:focus,
.mav-field textarea:focus {
	border-bottom-color: var(--mav-brown);
}

.mav-field textarea {
	resize: vertical;
	min-height: 120px;
}

/* Les champs Contact Form 7 remplissent leur colonne
   au lieu de garder la largeur de leur attribut size="40". */
.mav-field input,
.mav-field textarea,
.mav-field select {
	width: 100%;
	box-sizing: border-box;
}

/* Sans ceci, les colonnes de la grille ne peuvent pas
   descendre sous la largeur minimale de leur contenu. */
.mav-form__row > * {
	min-width: 0;
}

/* ======================================================================
 * Formulaire — habillage de Contact Form 7
 *
 * Contact Form 7 enveloppe chaque champ dans un <span class="…-wrap"> et
 * ajoute ses propres classes. On conserve son balisage et on l'habille, plutôt
 * que de le réécrire : les mises à jour de l'extension restent sans effet sur
 * le design.
 * ====================================================================== */

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

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

.mav-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mav-space-24);
}

.mav-form__actions {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Le conteneur inséré par Contact Form 7 autour de chaque champ. */
.mav-field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Bouton d'envoi. */
.mav-form input[type='submit'],
.mav-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 34px;
	background: var(--mav-brown);
	border: 0;
	color: var(--mav-cream);
	font-family: var(--mav-font-body);
	font-size: 12px;
	font-weight: var(--mav-weight-regular);
	letter-spacing: var(--mav-track-button);
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background var(--mav-duration-fast) ease;
}

.mav-form input[type='submit']:hover,
.mav-form .wpcf7-submit:hover {
	background: var(--mav-brown-hover);
}

.mav-form input[type='submit']:disabled,
.mav-form .wpcf7-submit:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Case à cocher de consentement. */
.mav-form__consent {
	font-size: 12px;
	line-height: 1.8;
	color: var(--mav-text-muted);
}

.mav-form__consent .wpcf7-list-item {
	margin: 0;
}

.mav-form__consent input[type='checkbox'] {
	width: 13px;
	height: 13px;
	margin-right: 10px;
	accent-color: var(--mav-brown);
	vertical-align: middle;
}

/* Erreurs de validation. */
.mav-form .wpcf7-not-valid-tip {
	margin-top: 8px;
	font-size: 11px;
	font-weight: var(--mav-weight-regular);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mav-accent);
}

.mav-form .wpcf7-not-valid {
	border-bottom-color: var(--mav-accent);
}

/* Message de retour, dans le ton éditorial du site. */
.mav-form .wpcf7-response-output {
	margin: 0 !important;
	padding: 18px 22px !important;
	border: 0 !important;
	border-left: 1px solid var(--mav-rule) !important;
	background: var(--mav-sand);
	font-size: 13px;
	line-height: 1.7;
	letter-spacing: 0.02em;
	color: var(--mav-text-muted);
}

.mav-form.sent .wpcf7-response-output {
	border-left-color: var(--mav-brown) !important;
	color: var(--mav-brown);
}

.mav-form .wpcf7-spinner {
	margin-left: 14px;
	background-color: var(--mav-rule);
}

/* Message d'aide affiché aux seuls administrateurs. */
.mav-form__notice {
	padding: 18px 22px;
	border-left: 1px solid var(--mav-accent);
	background: var(--mav-sand);
	font-size: 13px;
	line-height: 1.7;
	color: var(--mav-text-muted);
}

@media (max-width: 767px) {

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

	.mav-form input[type='submit'],
	.mav-form .wpcf7-submit {
		width: 100%;
	}
}

/* ======================================================================
 * Chips de filtre
 * ====================================================================== */

.mav-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	border-bottom: 1px solid var(--mav-border);
	padding-bottom: 26px;
}

.mav-filter {
	padding: 10px 22px;
	border: 1px solid var(--mav-rule);
	background: transparent;
	color: var(--mav-text-muted);
	font-family: var(--mav-font-body);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	line-height: 1;
	transition:
		background var(--mav-duration-fast) ease,
		color var(--mav-duration-fast) ease,
		border-color var(--mav-duration-fast) ease;
}

.mav-filter:hover {
	border-color: var(--mav-brown);
	color: var(--mav-brown);
}

.mav-filter.is-active {
	background: var(--mav-brown);
	color: var(--mav-cream);
	border-color: var(--mav-brown);
}

/* ======================================================================
 * Pagination
 * ====================================================================== */

.mav-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding-top: var(--mav-space-72);
	font-size: 11px;
	letter-spacing: var(--mav-track-caption);
	text-transform: uppercase;
	color: var(--mav-accent-light);
}

.mav-pagination .page-numbers {
	color: var(--mav-accent-light);
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
}

.mav-pagination .page-numbers.current,
.mav-pagination .page-numbers:hover {
	color: var(--mav-brown);
	border-bottom-color: var(--mav-rule);
}