/**
 * Muriel Lombaerts — styles complémentaires.
 *
 * Le gros du design vit dans theme.json (couleurs, typo, espacements).
 * Ce fichier ne couvre que ce que les blocs ne savent pas faire :
 * en-tête collant, ancres, cartes, et le formulaire Contact Form 7
 * qui produit son propre HTML.
 */

/* -------------------------------------------------------------------------
   1. Base
   ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Décale la cible des ancres pour qu'elle ne passe pas sous l'en-tête collant. */
:target,
.ml-section {
	scroll-margin-top: 92px;
}

/* Anneau de focus visible et cohérent sur tout le site. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   2. En-tête collant
   ---------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(12px);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

/* La navigation d'ancres : petites capitales espacées, soulignement au survol. */
.ml-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35em;
	text-transform: uppercase;
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	font-weight: 600;
}

.ml-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--wp--preset--color--accent-1);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.ml-nav .wp-block-navigation-item__content:hover::after,
.ml-nav .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Menu mobile en plein écran : fond opaque, pas de translucide. */
.ml-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.ml-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.15rem;
	letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
   3. Hero
   ---------------------------------------------------------------------- */

.ml-hero {
	position: relative;
	overflow: hidden;
}

/* Halo chaud très diffus derrière le portrait, purement décoratif. */
.ml-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -30%;
	inset-inline-end: -10%;
	inline-size: 60vw;
	block-size: 60vw;
	max-inline-size: 720px;
	max-block-size: 720px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--wp--preset--color--accent-2) 22%, transparent) 0%,
		transparent 68%
	);
	pointer-events: none;
	z-index: 0;
}

.ml-hero > * {
	position: relative;
	z-index: 1;
}

/* Le portrait : coins adoucis, filet laiton, légère élévation. */
.ml-portrait img {
	border-radius: 4px;
	box-shadow:
		0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent),
		0 18px 44px -18px color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
}

/* Suréligne le nom dans le titre du hero. */
.ml-hero .ml-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-1);
}

/* -------------------------------------------------------------------------
   4. Rythme des sections
   ---------------------------------------------------------------------- */

.ml-section {
	padding-block: var(--wp--preset--spacing--80);
}

/* Petit numéro de section en laiton, avec filet horizontal. */
.ml-section-label {
	display: flex;
	align-items: center;
	gap: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-2);
}

.ml-section-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 45%, transparent);
}

/* -------------------------------------------------------------------------
   5. Cartes (médias, événements, articles)
   ---------------------------------------------------------------------- */

.ml-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 6px;
	background-color: var(--wp--preset--color--accent-5);
	transition:
		transform 0.28s ease,
		box-shadow 0.28s ease,
		border-color 0.28s ease;
}

.ml-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 55%, transparent);
	box-shadow: 0 14px 32px -20px color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
}

/* Rend toute la carte cliquable à partir du lien de son titre. */
.ml-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ml-card {
	position: relative;
}

.ml-card__link {
	text-decoration: none;
}

.ml-card__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Nom du média au-dessus du titre d'article. */
.ml-card__source {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-1);
}


/* -------------------------------------------------------------------------
   6. Formulaire Contact Form 7
   ---------------------------------------------------------------------- */

.ml-form .wpcf7-form > p {
	margin-block: 0;
}

.ml-form .ml-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-block-end: 1.35rem;
}

.ml-form .ml-field > label,
.ml-form .ml-label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}

.ml-form .ml-required {
	color: var(--wp--preset--color--accent-1);
}

.ml-form input[type="text"],
.ml-form input[type="email"],
.ml-form input[type="tel"],
.ml-form select,
.ml-form textarea {
	inline-size: 100%;
	padding: 0.8rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.ml-form textarea {
	min-block-size: 165px;
	resize: vertical;
}

.ml-form input:focus,
.ml-form select:focus,
.ml-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1) 14%, transparent);
}

.ml-form input::placeholder,
.ml-form textarea::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--accent-4) 60%, transparent);
}

/* Deux colonnes pour nom / email sur écrans larges. */
.ml-form .ml-row {
	display: grid;
	gap: 0 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.ml-form .ml-row {
		grid-template-columns: 1fr 1fr;
	}
}

/* Case de consentement RGPD. */
.ml-form .ml-consent .wpcf7-list-item {
	margin: 0;
}

.ml-form .ml-consent .wpcf7-list-item-label {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--accent-4);
}

.ml-form .ml-consent input[type="checkbox"] {
	margin-inline-end: 0.6rem;
	accent-color: var(--wp--preset--color--accent-1);
}

/* Bouton d'envoi : reprend le style des boutons du thème. */
.ml-form .wpcf7-submit {
	display: inline-block;
	padding: 0.9em 2.2em;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--accent-1);
	border: 1px solid var(--wp--preset--color--accent-1);
	border-radius: 999px;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
}

.ml-form .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

.ml-form .wpcf7-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Messages de validation. */
.ml-form .wpcf7-not-valid-tip {
	font-size: 0.825rem;
	color: var(--wp--preset--color--accent-1);
}

.ml-form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.9rem 1.1rem;
	font-size: 0.9rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
}

.ml-form .wpcf7-form.sent .wpcf7-response-output {
	border-color: #2f7a52;
	background-color: color-mix(in srgb, #2f7a52 8%, transparent);
	color: #1e5236;
}

.ml-form .wpcf7-form.invalid .wpcf7-response-output,
.ml-form .wpcf7-form.unaccepted .wpcf7-response-output,
.ml-form .wpcf7-form.failed .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent-1);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 7%, transparent);
	color: var(--wp--preset--color--accent-1);
}

/* Champ piège anti-spam : masqué visuellement, jamais focusable. */
.ml-honeypot {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   7. Pied de page
   ---------------------------------------------------------------------- */

.ml-footer {
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.ml-footer .wp-block-social-links .wp-social-link {
	transition: transform 0.2s ease;
}

.ml-footer .wp-block-social-links .wp-social-link:hover {
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   8. Impression
   ---------------------------------------------------------------------- */

@media print {
	.wp-site-blocks > header.wp-block-template-part,
	.ml-form,
	.ml-hero::before {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   9. Exergue
   ---------------------------------------------------------------------- */

.ml-exergue__citation {
	margin: 0;
	border: 0;
	padding: 0;
}

/*
 * Pas de max-width : la largeur est déjà tenue par le conteneur de section et
 * le corps suit la largeur de l'écran. Une seconde contrainte en em ne ferait
 * que forcer un retour à la ligne arbitraire.
 */
.ml-exergue__citation p {
	/* Pleine largeur : le corps suit l'écran. Le coefficient est réglé pour que
	   la phrase tienne sur une ligne ; la borne haute n'intervient qu'au-delà
	   de ~2220 px de viewport. */
	font-size: clamp(1.9rem, 4.5vw, 10rem);
	text-wrap: balance;
	text-align: center;
}

.ml-exergue__citation cite {
	display: block;
	margin-top: 26px;
	font-family: var(--wp--preset--font-family--manrope);
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}

/* -------------------------------------------------------------------------
   10. Cartes illustrées — articles de presse
   ---------------------------------------------------------------------- */

/*
 * L'illustration de l'article est posée en fond de carte, atténuée.
 * Elle passe par un pseudo-élément et non par le fond de la carte elle-même :
 * l'opacité ne doit toucher que l'image, jamais le texte par-dessus.
 *
 * `position: absolute` sort le pseudo-élément du flux flex de la carte —
 * sans quoi il en deviendrait un élément et disloquerait la mise en page.
 *
 * Les fichiers vivent dans le thème et non dans la médiathèque : ce sont des
 * éléments de gabarit, pas du contenu éditorial. Ils suivent donc le thème en
 * production, sans dépendre du mois d'import dans « uploads ».
 */

.ml-card--illustre {
	/* Invisible au repos : l'illustration ne se dévoile qu'à l'interaction. */
	--ml-illustration-opacite: 0;
	--ml-illustration-opacite-survol: 0.3;
}

.ml-card--illustre::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: inherit;
	opacity: var(--ml-illustration-opacite);
	pointer-events: none;
	transition: opacity 0.28s ease;
}

/* Le contenu repasse au-dessus de l'illustration. */
.ml-card--illustre > * {
	position: relative;
	z-index: 1;
}

/* :focus-within double le survol : sans lui, l'illustration resterait
   inaccessible à qui navigue au clavier. */
.ml-card--illustre:hover::before,
.ml-card--illustre:focus-within::before {
	opacity: var(--ml-illustration-opacite-survol);
}

@media (prefers-reduced-motion: reduce) {
	.ml-card--illustre::before {
		transition: none;
	}
}

/*
 * Deux résolutions par illustration. La première déclaration sert de repli :
 * un navigateur qui ignore `image-set()` écarte la seconde à l'analyse et
 * conserve la version 800 px. Les écrans à haute densité reçoivent la 2×.
 * Aucune image n'a été agrandie, d'où les largeurs 2× inégales.
 */

.ml-illus-feuillat::before {
	background-image: url("../img/illustrations/illus-feuillat-800.webp");
	background-image: image-set(url("../img/illustrations/illus-feuillat-800.webp") 1x, url("../img/illustrations/illus-feuillat-1600.webp") 2x);
}

.ml-illus-bruxelles::before {
	background-image: url("../img/illustrations/illus-bruxelles-800.webp");
	background-image: image-set(url("../img/illustrations/illus-bruxelles-800.webp") 1x, url("../img/illustrations/illus-bruxelles-1600.webp") 2x);
}

.ml-illus-balemans::before {
	background-image: url("../img/illustrations/illus-balemans-800.webp");
	background-image: image-set(url("../img/illustrations/illus-balemans-800.webp") 1x, url("../img/illustrations/illus-balemans-840.webp") 2x);
}

.ml-illus-mathieu::before {
	background-image: url("../img/illustrations/illus-mathieu-800.webp");
	background-image: image-set(url("../img/illustrations/illus-mathieu-800.webp") 1x, url("../img/illustrations/illus-mathieu-840.webp") 2x);
}

.ml-illus-mylord::before {
	background-image: url("../img/illustrations/illus-mylord-800.webp");
	background-image: image-set(url("../img/illustrations/illus-mylord-800.webp") 1x, url("../img/illustrations/illus-mylord-1512.webp") 2x);
}

.ml-illus-bourgogne::before {
	background-image: url("../img/illustrations/illus-bourgogne-800.webp");
	background-image: image-set(url("../img/illustrations/illus-bourgogne-800.webp") 1x, url("../img/illustrations/illus-bourgogne-1042.webp") 2x);
}

/* -------------------------------------------------------------------------
   11. Logos des rédactions
   ---------------------------------------------------------------------- */

/*
 * Les trois logos ont été normalisés hors ligne : détourés, inversés quand il
 * le fallait, égalisés par l'aire occupée puis centrés sur un canevas commun
 * de 600 × 200. Leur présence est donc réglée dans le fichier, pas ici — le
 * CSS n'a plus qu'à leur réserver une boîte identique au même rapport 3:1.
 *
 * Le texte du titre reste dans le balisage pour les lecteurs d'écran et pour
 * le référencement ; `font-size: 0` le masque à l'œil sans le retirer de
 * l'arbre d'accessibilité.
 */

.ml-logo {
	margin: 0 0 2px;
}

.ml-logo a {
	display: block;
	inline-size: 168px;
	block-size: 56px;
	max-inline-size: 100%;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	font-size: 0;
	line-height: 0;
	color: transparent;
	opacity: 0.86;
	transition: opacity 0.24s ease;
}

.ml-card:hover .ml-logo a {
	opacity: 1;
}

.ml-logo a:focus-visible {
	opacity: 1;
	outline-offset: 6px;
}

.ml-logo--forbes a {
	background-image: url("../img/logos/logo-forbes.webp");
	background-image: image-set(url("../img/logos/logo-forbes.webp") 1x, url("../img/logos/logo-forbes@2x.webp") 2x);
}

.ml-logo--horeca a {
	background-image: url("../img/logos/logo-horeca.webp");
	background-image: image-set(url("../img/logos/logo-horeca.webp") 1x, url("../img/logos/logo-horeca@2x.webp") 2x);
}

.ml-logo--duomag a {
	background-image: url("../img/logos/logo-duomag.webp");
	background-image: image-set(url("../img/logos/logo-duomag.webp") 1x, url("../img/logos/logo-duomag@2x.webp") 2x);
}

/* -------------------------------------------------------------------------
   12. Signature du hero
   ---------------------------------------------------------------------- */

/*
 * « Muriel, L'Épicurieuse » se lit comme une signature manuscrite posée sous
 * le nom : Platypi en italique maigre, en lie de vin, précédée d'un filet
 * laiton. Elle ne concurrence pas le H1 — corps intermédiaire, pas de graisse.
 */

.ml-signature {
	display: flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--wp--preset--font-family--platypi);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.15rem, 0.95rem + 0.95vw, 2.4rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent-1);
}

.ml-signature::before {
	content: "";
	inline-size: clamp(22px, 2.4vw, 46px);
	block-size: 1px;
	flex: none;
	background-color: var(--wp--preset--color--accent-2);
}

/* -------------------------------------------------------------------------
   13. Logos des projets
   ---------------------------------------------------------------------- */

/*
 * Les quatre logos ont été détourés et égalisés hors ligne, puis centrés sur
 * un canevas commun de 600 × 320. Leur présence est donc déjà réglée dans les
 * fichiers : le CSS ne fait que leur réserver un bandeau identique en tête de
 * carte, séparé du texte par un filet.
 *
 * Le logo passe par un pseudo-élément plutôt que par une image dans le
 * balisage : il reste décoratif, le titre de la carte porte déjà le nom.
 */

/*
 * Le logo n'est pas positionné en absolu : la carte étant une colonne flex,
 * le pseudo-élément en devient le premier enfant et pousse naturellement le
 * texte vers le bas. En absolu il se superposait au titre — le padding de la
 * carte est écrit en style en ligne par le bloc et l'emportait sur la règle.
 */

.ml-projet::before {
	content: "";
	flex: none;
	display: block;
	inline-size: 100%;
	block-size: 92px;
	margin-block-end: 18px;
	padding-block-end: 18px;
	border-block-end: 1px solid var(--wp--preset--color--accent-6);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform 0.3s ease;
}

.ml-projet:hover::before {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.ml-projet::before { transition: none; }
	.ml-projet:hover::before { transform: none; }
}

.ml-projet--vin-des-femmes::before {
	background-image: url("../img/logos/projet-vin-des-femmes.webp");
	background-image: image-set(url("../img/logos/projet-vin-des-femmes.webp") 1x, url("../img/logos/projet-vin-des-femmes@2x.webp") 2x);
}
.ml-projet--biere-des-femmes::before {
	background-image: url("../img/logos/projet-biere-des-femmes.webp");
	background-image: image-set(url("../img/logos/projet-biere-des-femmes.webp") 1x, url("../img/logos/projet-biere-des-femmes@2x.webp") 2x);
}
.ml-projet--show-must-go-wine::before {
	background-image: url("../img/logos/projet-show-must-go-wine.webp");
	background-image: image-set(url("../img/logos/projet-show-must-go-wine.webp") 1x, url("../img/logos/projet-show-must-go-wine@2x.webp") 2x);
}
.ml-projet--bulles-sur-meuse::before {
	background-image: url("../img/logos/projet-bulles-sur-meuse.webp");
	background-image: image-set(url("../img/logos/projet-bulles-sur-meuse.webp") 1x, url("../img/logos/projet-bulles-sur-meuse@2x.webp") 2x);
}

/* -------------------------------------------------------------------------
   14. Bandeau d'images en défilement
   ---------------------------------------------------------------------- */

/*
 * La piste contient deux fois la même série et se translate de la moitié de
 * sa largeur : arrivée au bout, elle se retrouve exactement là où elle est
 * partie, d'où une boucle sans raccord visible.
 *
 * Les hauteurs sont communes, les largeurs libres : c'est l'irrégularité des
 * formats d'origine qui donne son rythme à la bande.
 */

/*
 * `alignfull` sort la bande du conteneur de lecture ; les marges négatives
 * annulent en plus le retrait global de la page, sans quoi elle s'arrêterait
 * à la gouttière. `width: 100vw` est volontairement évité : il déborderait de
 * la largeur de la barre de défilement.
 */
.ml-bande {
	margin-inline: calc(var(--wp--style--root--padding-left, 0px) * -1) calc(var(--wp--style--root--padding-right, 0px) * -1);
	/* Remonte la bande dans le retrait bas de la section précédente. */
	margin-block-start: calc(var(--wp--preset--spacing--60) * -1);
	max-inline-size: none;
	overflow: hidden;
	/* Le dégradé estompe les deux extrémités sur le fond de page : sans fond
	   propre, la bande n'a plus de bord franc et paraît sans fin. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ml-bande__piste {
	display: flex;
	inline-size: max-content;
	animation: ml-defile 80s linear infinite;
}

.ml-bande__serie {
	display: flex;
	gap: clamp(10px, 1.2vw, 20px);
	margin: 0;
	padding: 0 clamp(5px, 0.6vw, 10px) 0 0;
	list-style: none;
}

.ml-bande__vue {
	margin: 0;
	flex: none;
}

.ml-bande__vue img {
	display: block;
	block-size: clamp(150px, 19vw, 340px);
	inline-size: auto;
	border-radius: 3px;
	filter: saturate(0.9);
	transition: filter 0.4s ease, transform 0.4s ease;
}

.ml-bande__vue img:hover {
	filter: saturate(1.1);
	transform: scale(1.03);
}

@keyframes ml-defile {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Au survol on suspend : le visiteur veut regarder, pas courir après. */
.ml-bande:hover .ml-bande__piste,
.ml-bande:focus-within .ml-bande__piste {
	animation-play-state: paused;
}

/*
 * Mouvement refusé : plus d'animation du tout, et la bande devient une zone
 * que l'on fait défiler soi-même. Rien n'est perdu, tout reste atteignable.
 */
@media (prefers-reduced-motion: reduce) {
	.ml-bande { overflow-x: auto; }
	.ml-bande__piste { animation: none; }
	.ml-bande__serie[aria-hidden="true"] { display: none; }
	.ml-bande__vue img { transition: none; }
	.ml-bande__vue img:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   15. Rangée de deux photos
   ---------------------------------------------------------------------- */

.ml-duo-photos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--60);
}

.ml-duo-photos__vue {
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
	background-color: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-6);
}

.ml-duo-photos__vue img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ml-duo-photos__vue:hover img {
	transform: scale(1.035);
}

.ml-duo-photos__vue figcaption {
	padding: 12px 16px 14px;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent-4);
}

/* -------------------------------------------------------------------------
   16. Apparition au défilement
   ---------------------------------------------------------------------- */

/*
 * L'état de départ n'est posé que si JavaScript a pris la main (.ml-motion
 * sur <html>). Sans script, rien n'est masqué : la page reste entière.
 */

/*
 * Un seul geste pour toute la page : tout monte, rien ne vient de côté.
 * Les directions contrariées — titres par la gauche, portrait par la droite —
 * avaient été essayées puis abandonnées : à l'échelle d'une page entière,
 * le regard subit des mouvements latéraux opposés et cela donne le tangage.
 *
 * Distance et durée restent généreuses. Avec une courbe très sortante et
 * 14 px, le déplacement s'achevait dans les premières millisecondes : on ne
 * percevait plus que le fondu. easeOutCubic répartit le mouvement, et le
 * fondu est plus court que la translation pour que celle-ci reste lisible.
 */
.ml-motion .ml-anime {
	--ml-anime-distance: 32px;
	opacity: 0;
	transform: translate3d(0, var(--ml-anime-distance), 0);
	transition:
		opacity 0.45s ease-out,
		transform 0.85s cubic-bezier(0.33, 1, 0.68, 1);
}

.ml-motion .ml-anime.est-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ml-motion .ml-anime {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   17. Pages secondaires (mentions légales, confidentialité)
   ---------------------------------------------------------------------- */

/*
 * Ces pages sont du texte de référence, pas de la lecture d'agrément : le
 * corps y est réduit d'environ 12 %, et les titres davantage.
 *
 * On redéfinit les variables de taille plutôt que les règles elles-mêmes :
 * tout ce qui s'appuie sur ces présets suit, sans avoir à énumérer les
 * sélecteurs un par un. `:not(.home)` exclut l'accueil, qui est lui aussi
 * une page.
 */

body.page:not(.home) {
	--wp--preset--font-size--medium: clamp(0.95rem, 0.9rem + 0.26vw, 1.3rem);
	--wp--preset--font-size--small: clamp(0.78rem, 0.76rem + 0.1vw, 0.95rem);
	--wp--preset--font-size--x-large: clamp(1.2rem, 1.05rem + 0.7vw, 2.1rem);
	--wp--preset--font-size--xx-large: clamp(1.6rem, 1.25rem + 1.6vw, 3.4rem);
	--wp--preset--font-size--xxx-large: clamp(1.9rem, 1.4rem + 2.2vw, 4rem);
}

body.page:not(.home) .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block-end: var(--wp--preset--spacing--50);
}

body.page:not(.home) .wp-block-post-content {
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
   18. Contact Form 7 — ce que sa feuille de style assurait
   ---------------------------------------------------------------------- */

/*
 * La feuille de Contact Form 7 est retirée dans functions.php pour que le
 * formulaire suive le thème. Elle ne faisait pas que décorer : elle masquait
 * aussi plusieurs éléments de service. Sans ces règles, le navigateur leur
 * applique ses styles par défaut — d'où le cadre noir autour du conteneur
 * des champs cachés, qui est un fieldset.
 */

/* Champs techniques de CF7 : aucun n'a vocation à être vu. */
.ml-form .hidden-fields-container {
	display: none;
}

/* Doublon des messages de validation, destiné aux seuls lecteurs d'écran :
   masqué à l'œil, mais conservé dans l'arbre d'accessibilité. */
.ml-form .screen-reader-response {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Le bloc de réponse existe dans le balisage avant toute soumission : vide,
   il afficherait un cadre vide. */
.ml-form .wpcf7-response-output:empty {
	display: none;
}

/* Témoin d'envoi. CF7 fournit une image que nous ne chargeons plus ; celui-ci
   est tracé en CSS. Il n'apparaît que pendant la soumission. */
.ml-form .wpcf7-spinner {
	display: none;
	inline-size: 1em;
	block-size: 1em;
	margin-inline-start: 0.8em;
	vertical-align: -0.15em;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, transparent);
	border-block-start-color: var(--wp--preset--color--accent-1);
	border-radius: 50%;
	animation: ml-tourne 0.7s linear infinite;
}

.ml-form .submitting .wpcf7-spinner {
	display: inline-block;
}

@keyframes ml-tourne {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ml-form .wpcf7-spinner {
		animation: none;
		border-block-start-color: transparent;
	}
}

/* -------------------------------------------------------------------------
   19. Contour de focus — correctif du thème parent
   ---------------------------------------------------------------------- */

/*
 * Twenty Twenty-Five pose `:where(.wp-site-blocks :focus){outline-width:2px;
 * outline-style:solid}` sans indiquer de couleur : le navigateur retombe sur
 * currentColor, donc noir. Et la règle vise `:focus` et non `:focus-visible`,
 * donc elle se déclenche aussi au clic de souris — d'où le cadre noir autour
 * des liens que l'on vient de cliquer.
 *
 * On neutralise ce cas-là uniquement. L'anneau au clavier, lui, reste : il
 * est défini plus haut en lie de vin, et c'est le seul repère dont dispose
 * quelqu'un qui navigue sans souris.
 */
.wp-site-blocks a:focus:not(:focus-visible),
.wp-site-blocks button:focus:not(:focus-visible),
.wp-site-blocks summary:focus:not(:focus-visible) {
	outline: none;
}

/* -------------------------------------------------------------------------
   20. Grilles de cartes — correctif de répartition
   ---------------------------------------------------------------------- */

/*
 * WordPress écrit `repeat(auto-fill, minmax(min(Xpx, 100%), 1fr))`.
 * `auto-fill` crée autant de colonnes que la largeur le permet, même sans
 * rien à y mettre : sur un écran large, quatre cartes dans un conteneur de
 * 1680 px occupaient quatre colonnes sur cinq, et s'arrêtaient donc avant le
 * bord droit. Les trois logos de rédactions, eux, laissaient trois colonnes
 * vides.
 *
 * `auto-fit` escamote les colonnes vides : les cartes s'étirent et occupent
 * toute la largeur. La valeur minimale reste la même, le comportement en
 * dessous de la largeur de bascule est donc inchangé.
 */

.ml-section .ml-grille {
	grid-template-columns: repeat(auto-fit, minmax(min(var(--ml-grille-min), 100%), 1fr));
}

.ml-grille--services { --ml-grille-min: 270px; }
.ml-grille--projets  { --ml-grille-min: 270px; }
.ml-grille--medias   { --ml-grille-min: 240px; }
.ml-grille--articles { --ml-grille-min: 310px; }

/*
 * Les six articles font exception. Étirés, ils donneraient cinq cartes sur la
 * première ligne et une seule, démesurée, sur la seconde. Trois colonnes
 * fixes au-delà de 1000 px produisent deux rangées égales.
 */
@media (min-width: 1000px) {
	.ml-section .ml-grille--articles {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------------
   21. Mur de références — « Ils me font confiance »
   ---------------------------------------------------------------------- */

/*
 * Pas de logos : nous n'avons ni les fichiers ni l'autorisation de les
 * reproduire, et quinze marques de formats disparates auraient demandé le même
 * travail de normalisation que les logos de rédactions pour un résultat plus
 * pauvre. Les noms seuls suffisent.
 *
 * Une famille par rang, sans retour à la ligne : le rang défile. Même
 * technique que le bandeau d'images (§14) — deux moitiés identiques, une
 * translation de 50 %, et les mêmes images-clés `ml-defile`. La durée arrive
 * par `--ml-duree`, calculée dans la composition d'après la largeur du
 * contenu : les deux rangs vont ainsi à la même vitesse apparente, même si
 * l'un est deux fois plus long que l'autre.
 */

.ml-references {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-2) 42%, transparent);
}

.ml-references__intro {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}

.ml-references__groupe + .ml-references__groupe {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ml-references__titre {
	margin: 0 0 0.75em;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}

/* Le dégradé estompe les deux bouts : le rang n'a plus de bord franc. */
.ml-references__ruban {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ml-references__piste {
	display: flex;
	inline-size: max-content;
	animation: ml-defile var(--ml-duree, 48s) linear infinite;
}

/*
 * Au survol on suspend : ce sont des liens, il faut pouvoir les viser.
 *
 * Volontairement `:has(:focus-visible)` et non `:focus-within` : un lien
 * cliqué à la souris garde le focus une fois l'onglet ouvert, et la bande
 * restait figée jusqu'à ce qu'on clique ailleurs. `:focus-visible` ne répond
 * qu'au clavier, la souris relâche donc dès que le pointeur s'éloigne, et la
 * pause reste acquise à qui navigue en tabulant.
 */
.ml-references__ruban:hover .ml-references__piste,
.ml-references__ruban:has(:focus-visible) .ml-references__piste {
	animation-play-state: paused;
}

/* Sans `:has()`, on retombe sur l'ancien comportement : mieux que rien. */
@supports not selector(:has(*)) {
	.ml-references__ruban:focus-within .ml-references__piste {
		animation-play-state: paused;
	}
}

.ml-references__liste {
	display: flex;
	align-items: baseline;
	gap: 0.9em;
	margin: 0;
	padding: 0 0 0 0.9em;
	list-style: none;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: clamp(1rem, 0.9rem + 0.55vw, 1.6rem);
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
}

.ml-reference {
	display: flex;
	align-items: baseline;
	gap: 0.9em;
	flex: none;
}

/*
 * Losange bordeaux entre deux noms. Il est conservé sur le dernier de chaque
 * exemplaire : c'est lui qui sépare la fin d'une série du début de la
 * suivante, sans quoi deux noms se toucheraient à la jointure de la boucle.
 */
.ml-reference::after {
	content: "";
	flex: none;
	inline-size: 0.28em;
	block-size: 0.28em;
	transform: translateY(-0.25em) rotate(45deg);
	background-color: var(--wp--preset--color--accent-1);
}

.ml-reference__lien {
	color: inherit;
	text-decoration: none;
}

.ml-reference__lien:hover,
.ml-reference__lien:focus-visible {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/*
 * Mouvement refusé : plus d'animation, le rang devient une zone que l'on fait
 * défiler soi-même, et les exemplaires en double disparaissent.
 */
@media (prefers-reduced-motion: reduce) {
	.ml-references__ruban {
		overflow-x: auto;
	}

	.ml-references__piste {
		animation: none;
	}

	.ml-references__liste[aria-hidden="true"] {
		display: none;
	}
}

/*
 * Emplacement prêt pour les recommandations clients. Le balisage type est en
 * commentaire dans patterns/section-presse.php. Rien ne doit y être écrit qui
 * ne vienne d'un client, signé et daté.
 */
.ml-temoignages {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	margin-block-start: var(--wp--preset--spacing--60);
}

.ml-temoignage {
	display: flex;
	flex-direction: column;
	gap: 0.9em;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border: 0;
	border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--accent-2) 60%, transparent);
	background-color: var(--wp--preset--color--accent-5);
}

.ml-temoignage p {
	margin: 0;
	font-family: var(--wp--preset--font-family--platypi);
	font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.45rem);
	line-height: 1.5;
}

.ml-temoignage footer {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}