@charset "UTF-8";
/* ==========================================================================
   Maison Argile — feuille de styles principale
   Design system issu de la maquette Figma « Maquette finale » (node 2454:7754)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hébergées
   -------------------------------------------------------------------------- */

/* Satoshi — Indian Type Foundry, licence Fontshare (usage web autorisé) */
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/satoshi-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Roboto Mono — Apache License 2.0 (fichiers variables 100→700) */
@font-face {
	font-family: "Roboto Mono";
	src: url("../fonts/roboto-mono-latin.woff2") format("woff2");
	font-weight: 100 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto Mono";
	src: url("../fonts/roboto-mono-latin-ext.woff2") format("woff2");
	font-weight: 100 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Roboto Mono";
	src: url("../fonts/roboto-mono-latin-italic.woff2") format("woff2");
	font-weight: 100 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto Mono";
	src: url("../fonts/roboto-mono-latin-ext-italic.woff2") format("woff2");
	font-weight: 100 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens de design
   -------------------------------------------------------------------------- */

:root {
	/* Couleurs — variables Figma */
	--ma-black: #3a3a35;          /* color-text--black / color-background--black */
	--ma-white: #fafaf5;          /* color-text--white / color-background--white */
	--ma-blue: #0054da;           /* color-heading--highlight */
	--ma-interaction: #1D8EFF;   /* survol des CTA (ticket Antoine 2026-09-17) */
	--ma-grey: #727272;           /* gris secondaire (prix) */
	--ma-nav-white: #ffffff;      /* blanc pur, réservé à la nav sur photo */

	/*
	 * Couleurs d'état. Hors palette de marque, mais indispensables : signaler une
	 * erreur par la seule teinte de marque serait illisible (WCAG 1.4.1). Elles ne
	 * servent qu'au repère — jamais à colorer un texte long.
	 * Contrastes sur --ma-white : erreur 6,0:1 · succès 6,0:1 · alerte 5,5:1.
	 */
	--ma-error: #b3261e;
	--ma-success: #1f6b3b;
	--ma-warning: #8a5a00;

	/* Échelle d'espacement — variables Figma */
	--ma-space-2: 2px;
	--ma-space-8: 8px;
	--ma-space-13: 13px;
	--ma-space-14: 14px;
	--ma-space-24: 24px;
	--ma-space-40: 40px;
	--ma-space-48: 48px;
	--ma-space-64: 64px;
	--ma-space-96: 96px;
	--ma-space-128: 128px;

	/* Typographie */
	--ma-font-display: "Satoshi", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--ma-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	/* Gabarit */
	--ma-gutter: 40px;
	--ma-maxw: 1440px;
	--ma-section-y: 128px;
	--ma-grid-gap: 40px;
	--ma-radius: 2px;

	/* Transitions */
	--ma-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ma-dur: 0.42s;
}

@media (max-width: 1024px) {
	:root {
		--ma-gutter: 28px;
		--ma-section-y: 88px;
		--ma-grid-gap: 24px;
	}
}

@media (max-width: 640px) {
	:root {
		--ma-gutter: 20px;
		--ma-section-y: 64px;
		--ma-grid-gap: 20px;
	}
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--ma-white);
	color: var(--ma-black);
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.ma-no-scroll {
	overflow: hidden;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--ma-blue);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--ma-gutter);
	z-index: 999;
	padding: 12px 20px;
	background: var(--ma-black);
	color: var(--ma-white);
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	transition: top 0.2s var(--ma-ease);
}

.skip-link:focus {
	top: 12px;
}

/* --------------------------------------------------------------------------
   4. Gabarit
   -------------------------------------------------------------------------- */

.ma-container {
	width: 100%;
	max-width: var(--ma-maxw);
	margin-inline: auto;
	padding-inline: var(--ma-gutter);
}

.ma-section {
	padding-block: var(--ma-section-y);
}

.ma-section--tight {
	padding-block: 0 var(--ma-section-y);
}

/* --------------------------------------------------------------------------
   5. Typographie
   -------------------------------------------------------------------------- */

.ma-title {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 40px;
	color: var(--ma-blue);
	letter-spacing: -0.01em;
}

/* L'espacement vient de l'espace présent dans le balisage, pas d'une marge :
   le slash se place indifféremment avant ou après le titre. */
.ma-title__slash {
	display: inline-block;
}

/*
 * Signature manuscrite « julie chareunphol » — SVG inline en currentColor.
 * Une seule source sert le bleu du titre boutique et le blanc du pied de page.
 * Ratio natif 283 × 48 : on pilote la hauteur, la largeur suit.
 */
.ma-signature {
	display: inline-block;
	flex: none;
	line-height: 0;
	color: currentColor;
	--ma-signature-h: 44px;

	/*
	 * Alignement sur la ligne de base du texte. Par défaut, c'est le BAS de la
	 * boîte du SVG qui se pose sur la ligne de base — or 35 % du tracé passe en
	 * dessous (jambages du « j » et du « p »), mesurés par balayage de l'encre
	 * du fichier. On redescend donc d'autant, et le calcul suit automatiquement
	 * la taille (--xl comprise) au lieu d'un réglage à l'œil en em.
	 */
	vertical-align: calc(-0.35 * var(--ma-signature-h));
}

.ma-signature svg {
	display: block;
	width: auto;
	height: var(--ma-signature-h);
}

.ma-signature--xl {
	--ma-signature-h: 72px;
}

@media (max-width: 1000px) {
	.ma-signature--xl { --ma-signature-h: 54px; }
}

@media (max-width: 560px) {
	.ma-signature { --ma-signature-h: 34px; }
}

.ma-lead {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.35;
	color: var(--ma-black);
	letter-spacing: -0.01em;
}

.ma-prose p {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.42;
}

.ma-prose p + p {
	margin-top: 18px;
}

.ma-mono {
	font-family: var(--ma-font-mono);
	font-size: 13px;
}

/* Lien / bouton mono avec astérisque */
.ma-link {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--ma-black);
	transition: color 0.15s var(--ma-ease);
}

.ma-link::before {
	content: "\2731";
	font-size: 0.85em;
	line-height: 1;
}

.ma-link__label {
	position: relative;
}

.ma-link--light {
	color: var(--ma-white);
}

/* Survol : simple passage en bleu, sans mouvement (ticket Antoine 2026-09-17). */
@media (hover: hover) {
	.ma-link:hover {
		color: var(--ma-interaction);
	}
}

.ma-link:focus-visible {
	color: var(--ma-interaction);
}

/* Lien « Lire plus + » */
.ma-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 13px;
	color: var(--ma-black);
}

.ma-toggle__icon {
	display: inline-block;
	width: 10px;
	text-align: center;
	transition: transform 0.35s var(--ma-ease);
}

.ma-toggle[aria-expanded="true"] .ma-toggle__icon {
	transform: rotate(45deg);
}

/* Flèche des cartes */
.ma-arrow {
	flex: none;
	width: 16px;
	height: 16px;
	transition: transform 0.4s var(--ma-ease);
}

/* --------------------------------------------------------------------------
   6. Logo
   -------------------------------------------------------------------------- */

/*
 * Le logo est un SVG monochrome en currentColor : une seule source sert le
 * blanc sur photo, le blanc sur fond sombre et le sombre sur fond clair.
 * La hauteur est pilotée par --ma-logo-h, la largeur suit le ratio natif
 * (209 × 90 pour le lockup, 61 × 90 pour le picto).
 */
.ma-logo {
	display: inline-flex;
	color: currentColor;
	--ma-logo-h: 90px;
}

.ma-logo svg,
.ma-logo img {
	display: block;
	flex: none; /* sans quoi le SVG est écrasé quand la colonne est étroite */
	width: auto;
	height: var(--ma-logo-h);
}

/* --------------------------------------------------------------------------
   7. En-tête / navigation
   -------------------------------------------------------------------------- */

.ma-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	padding: var(--ma-space-24) var(--ma-gutter);
	background: transparent;
	color: var(--ma-nav-white);
	/*
	 * Ticket Antoine 2026-09-17 : fond transparent et elements blancs en mode
	 * difference. Le melange se fait avec le fond du contexte d'empilement
	 * parent : ne jamais poser isolation, filter, opacity ou transform sur un
	 * ancetre de cet en-tete, sans quoi l'effet tombe a plat.
	 */
	mix-blend-mode: difference;
}

/*
 * Sur les pages intérieures l'en-tête occupe le flux (et non le bandeau photo) :
 * la maquette le donne plus ramassé, ~78 px de haut.
 */
.ma-header--solid {
	position: sticky;
	top: 0;
	padding-block: var(--ma-space-13);
}

/*
 * La barre reste visible en permanence (ticket Antoine 2026-09-17) : l'etat
 * is-stuck pose par le JS n'a plus d'habillage propre.
 */

.ma-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--ma-space-24);
	max-width: calc(var(--ma-maxw) - var(--ma-gutter) * 2);
	margin-inline: auto;
}

.ma-header__brand {
	justify-self: start;
}

.ma-header__brand .ma-logo {
	--ma-logo-h: 38px; /* 26x38 demande par Antoine (ticket 2026-09-17) */
}

/*
 * wp_nav_menu() enveloppe toujours ses entrées dans un <ul> : la nav et la
 * liste sont donc toutes deux des conteneurs flex, la colonne utilitaire
 * mêlant la liste, le panier et le compte.
 */
.ma-nav,
.ma-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
}

.ma-nav--primary {
	justify-self: center;
}

.ma-nav--utility {
	justify-self: end;
}

.ma-nav a,
.ma-nav__cart {
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	position: relative;
	white-space: nowrap;
}

.ma-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s var(--ma-ease);
}

.ma-nav a:hover::after,
.ma-nav a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

/*
 * Page courante : soulignement sur toutes les pages. Le bleu ne tient pas
 * sous mix-blend-mode: difference (ticket Antoine 2026-09-17).
 */
.ma-header .ma-nav .current-menu-item > a::after,
.ma-header .ma-nav .current_page_item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

.ma-nav__account {
	display: inline-flex;
	width: 18px;
	height: 18px;
}

.ma-nav__account svg {
	width: 100%;
	height: 100%;
}

.ma-burger {
	display: none;
	width: 26px;
	height: 16px;
	position: relative;
	justify-self: end;
}

.ma-burger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.35s var(--ma-ease), opacity 0.2s var(--ma-ease);
}

.ma-burger span:nth-child(1) { top: 0; }
.ma-burger span:nth-child(2) { top: 7px; }
.ma-burger span:nth-child(3) { top: 14px; }

.ma-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ma-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ma-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panneau mobile */
.ma-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	padding: 96px var(--ma-gutter) var(--ma-gutter);
	background: var(--ma-black);
	color: var(--ma-white);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 0.5s var(--ma-ease), visibility 0.5s;
}

.ma-mobile-nav.is-open {
	transform: translateY(0);
	visibility: visible;
}

.ma-mobile-nav .ma-nav__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
}

.ma-mobile-nav a {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}

.ma-mobile-nav__utility {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.ma-mobile-nav__utility .ma-nav__list {
	gap: 14px;
}

.ma-mobile-nav__utility a,
.ma-mobile-nav__utility .ma-nav__cart {
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

@media (max-width: 900px) {
	.ma-nav--primary,
	.ma-nav--utility { display: none; }
	.ma-burger { display: block; }
	.ma-header__inner { grid-template-columns: 1fr auto; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

/* Pleine hauteur d'écran. `dvh` pour que la barre d'adresse mobile ne rogne
   pas le bandeau, avec `vh` en repli pour les navigateurs anciens. */
.ma-hero {
	position: relative;
	height: 100vh;
	height: 100dvh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--ma-black);
}

.ma-hero__media {
	position: absolute;
	inset: 0;
}

.ma-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ma-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.21) 32%, rgba(0, 0, 0, 0) 62%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 40%);
}

.ma-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--ma-maxw);
	margin-inline: auto;
	padding-inline: var(--ma-gutter);
	display: flex;
	align-items: center;
	gap: clamp(40px, 7vw, 101px);
	color: var(--ma-white);
}

/* Maquette : lockup de 350 × 151 px, calé à 276 px du bord gauche. */
.ma-hero__logo {
	flex: none;
	margin-left: clamp(0px, 11.5vw, 236px);
}

.ma-hero__logo .ma-logo {
	--ma-logo-h: clamp(96px, 10.5vw, 151px);
}

.ma-hero__taglines {
	display: flex;
	flex-direction: column;
	gap: 26px;
	max-width: 425px;
}

.ma-hero__taglines .ma-link {
	color: var(--ma-white);
}

@media (max-width: 900px) {
	.ma-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 40px;
	}
	.ma-hero__logo { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   9. Section édito
   -------------------------------------------------------------------------- */

.ma-edito {
	display: grid;
	grid-template-columns: 668fr 772fr;
	align-items: start;
	padding-bottom: var(--ma-space-96);
}

/*
 * Colonne de gauche : elle occupe toute la hauteur de l'écran et reste collée
 * pendant que la colonne éditoriale défile. `dvh` évite que la barre d'adresse
 * mobile ne rogne l'image, avec `vh` en repli pour les navigateurs anciens.
 */
.ma-edito__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: var(--ma-black);
}

.ma-edito__sticky img,
.ma-edito__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* La vidéo est décorative : si l'utilisateur limite les animations, on fige
   l'affiche plutôt que de laisser tourner la boucle. */
@media (prefers-reduced-motion: reduce) {
	.ma-edito__video {
		display: none;
	}

	.ma-edito__sticky {
		background-image: var(--ma-edito-poster, none);
		background-size: cover;
		background-position: center;
	}
}

.ma-edito__col {
	display: flex;
	flex-direction: column;
	padding-left: 108px;
	padding-right: var(--ma-gutter);
	padding-top: 150px;
}

.ma-edito__figure--bowl {
	width: 278px;
	max-width: 100%;
	margin-left: 157px;
}

.ma-edito__lead {
	width: 400px;
	max-width: 100%;
	margin-left: 39px;
	margin-top: 218px;
}

.ma-edito__pair {
	position: relative;
	margin-top: 137px;
}

.ma-edito__figure--wheel {
	width: 423px;
	max-width: 100%;
}

.ma-edito__figure--deco {
	position: absolute;
	top: 123px;
	left: 392px;
	width: 232px;
	z-index: 2;
}

.ma-edito__body {
	width: 307px;
	max-width: 100%;
	margin-top: 62px;
}

@media (max-width: 1200px) {
	.ma-edito__col { padding-left: 56px; padding-top: 96px; }
	.ma-edito__figure--bowl { margin-left: 80px; }
	.ma-edito__lead { margin-left: 0; margin-top: 120px; }
	.ma-edito__pair { margin-top: 96px; }
	.ma-edito__figure--deco { left: auto; right: -24px; top: 96px; width: 180px; }
}

@media (max-width: 900px) {
	.ma-edito {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.ma-edito__sticky {
		position: static;
		height: auto;
		max-height: none;
		aspect-ratio: 668 / 500;
	}
	.ma-edito__col {
		padding-left: var(--ma-gutter);
		padding-top: 0;
		gap: 48px;
	}
	.ma-edito__figure--bowl { margin-left: 0; width: 220px; }
	.ma-edito__lead,
	.ma-edito__pair,
	.ma-edito__body { margin: 0; width: 100%; }
	.ma-edito__figure--wheel { width: 100%; }
	.ma-edito__figure--deco {
		position: static;
		width: 60%;
		margin-top: 20px;
		margin-left: auto;
	}
}

/* --------------------------------------------------------------------------
   10. En-tête de section
   -------------------------------------------------------------------------- */

.ma-section-head {
	display: grid;
	grid-template-columns: 660fr 700fr;
	gap: var(--ma-grid-gap);
	align-items: start;
	margin-bottom: var(--ma-space-48);
}

.ma-section-head--tall {
	margin-bottom: var(--ma-space-64);
}

.ma-section-head__aside {
	padding-top: 8px;
}

@media (max-width: 780px) {
	.ma-section-head {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.ma-section-head__aside { padding-top: 0; }
}

/* Accordéon « Lire plus » */
.ma-accordion {
	margin-top: 18px;
	max-width: 560px;
}

.ma-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s var(--ma-ease);
}

.ma-accordion__panel > div {
	overflow: hidden;
}

.ma-accordion.is-open .ma-accordion__panel {
	grid-template-rows: 1fr;
}

.ma-accordion__excerpt {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.45;
}

.ma-accordion__panel p + p {
	margin-top: 1.1em;
}

.ma-accordion .ma-toggle {
	margin-top: 16px;
}

/* --------------------------------------------------------------------------
   11. Cartes ateliers / cours
   -------------------------------------------------------------------------- */

.ma-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ma-grid-gap);
}

/*
 * La carte garde une hauteur constante. Au survol, la ligne durée / tarif se
 * déplie entre le sous-titre et le visuel : elle repousse donc le bord HAUT du
 * visuel vers le bas. Le bord BAS, lui, est tenu par le lien de réservation qui
 * ne bouge jamais — c'est ce qui donne l'impression que l'image se réduit par
 * le haut sans se déplacer.
 */
.ma-course {
	display: flex;
	flex-direction: column;
	gap: 6px;

	/*
	 * Hauteur que prend la ligne durée / tarif quand elle se déploie. Le visuel
	 * perd EXACTEMENT la même hauteur au même moment : les deux se compensent,
	 * donc la carte ne change pas de taille et rien n'est poussé vers le bas.
	 * Une seule valeur à ajuster pour doser l'effet.
	 */
	--ma-course-reveal: 22px;
}

.ma-course__title {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	transition: color 0.3s var(--ma-ease);
}

.ma-course__subtitle {
	font-family: var(--ma-font-mono);
	font-style: italic;
	font-size: 13px;
	letter-spacing: -0.01em;
	transition: color 0.3s var(--ma-ease);
}

/* Au survol, titre et sous-titre passent au bleu de marque. */
.ma-course:hover .ma-course__title,
.ma-course:hover .ma-course__subtitle,
.ma-course:focus-within .ma-course__title,
.ma-course:focus-within .ma-course__subtitle {
	color: var(--ma-blue);
}

/*
 * Durée et tarif. Le conteneur ne fait que le dépliage (0fr → 1fr, seule façon
 * d'animer une hauteur inconnue), l'enfant porte la mise en page. Les mélanger
 * empêcherait la ligne de se déplier, les enfants devenant eux-mêmes des cases.
 */
.ma-course__meta {
	height: 0;
	overflow: hidden;
	opacity: 0;
	color: var(--ma-blue);
	transition: height 0.4s var(--ma-ease), opacity 0.3s var(--ma-ease);
}

.ma-course:hover .ma-course__meta,
.ma-course:focus-within .ma-course__meta {
	height: var(--ma-course-reveal);
	opacity: 1;
}

/* Ni marge ni padding ici : dans un dépliage 0fr ils s'ajoutent à la hauteur
   au lieu d'être rognés, et laissent quelques pixels visibles au repos. */
.ma-course__meta-inner {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ma-space-24);
	margin: 0;
	padding: 0;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	letter-spacing: -0.01em;
}

.ma-course__meta b {
	font-weight: 700;
}

/*
 * Le visuel a une hauteur propre, indépendante de la carte et de la grille :
 * ratio de la maquette au repos, moins la hauteur de la ligne dévoilée au
 * survol. C'est cette soustraction qui fait tout — le bord bas ne bouge pas
 * puisque ce que le visuel perd, la ligne au-dessus le prend.
 */
.ma-course__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 427 / 568;
	margin-top: 6px;
	overflow: hidden;
	background: rgba(58, 58, 53, 0.06);
	text-align: left;
	transition: aspect-ratio 0.4s var(--ma-ease);
}

/*
 * 568 → 546, soit 22 unités de moins : à 427 px de large, exactement les 22 px
 * que prend la ligne durée / tarif. Le visuel perd donc ce que la ligne gagne.
 * Le ratio est animable, et surtout il ne dépend ni de la grille ni de la
 * répartition flex — c'est ce qui faisait échouer les tentatives précédentes.
 */
.ma-course:hover .ma-course__media,
.ma-course:focus-within .ma-course__media {
	aspect-ratio: 427 / 546;
}

/*
 * `object-position: bottom` est la clé : quand le cadre se raccourcit, le
 * navigateur rogne l'image PAR LE HAUT et garde le bas calé. Les pixels du bas
 * ne bougent pas d'un poil, et rien n'est déformé — contrairement à un
 * redimensionnement ou à une compression.
 */
.ma-course__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}

/* Toujours visible, dans les deux états : c'est lui qui fixe le bas du visuel. */
.ma-course__cta {
	margin-top: 14px;
	text-align: right;
}

.ma-course__cta .ma-link {
	color: var(--ma-black);
}

.ma-course:hover .ma-course__cta .ma-link,
.ma-course:focus-within .ma-course__cta .ma-link {
	color: var(--ma-blue);
}

@media (max-width: 900px) {
	.ma-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sans souris, le survol n'existe pas : durée et tarif restent affichés, et le
   visuel garde la hauteur réduite qui leur fait la place. */
@media (hover: none) {
	.ma-course__meta {
		height: var(--ma-course-reveal);
		opacity: 1;
	}

	.ma-course__media {
		aspect-ratio: 427 / 546;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ma-course__meta {
		height: var(--ma-course-reveal);
		opacity: 1;
		transition: none;
	}

	.ma-course__media {
		aspect-ratio: 427 / 546;
		transition: none;
	}
}

@media (max-width: 600px) {
	.ma-grid-3 { grid-template-columns: 1fr; }
	.ma-course__media { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   12. Grille produits (WooCommerce)
   -------------------------------------------------------------------------- */

.ma-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ma-grid-gap);
}

.ma-product {
	position: relative;
	display: flex;
	flex-direction: column;
}

.ma-product__media {
	position: relative;
	aspect-ratio: 310 / 393;
	overflow: hidden;
	background: rgba(58, 58, 53, 0.06);
}

.ma-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ma-ease), opacity 0.4s var(--ma-ease);
}

.ma-product:hover .ma-product__media img {
	transform: scale(1.04);
}

.ma-product__excerpt {
	position: absolute;
	inset: 70px 20px auto;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ma-black);
	opacity: 0;
	transition: opacity 0.4s var(--ma-ease);
	pointer-events: none;
}

.ma-product__excerpt::before {
	content: "";
	position: absolute;
	inset: -70px -20px -9999px;
	background: var(--ma-white);
	z-index: -1;
	opacity: 0.92;
}

.ma-product:hover .ma-product__excerpt,
.ma-product:focus-within .ma-product__excerpt {
	opacity: 1;
}

.ma-product__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
}

.ma-product__title {
	transition: color 0.15s var(--ma-ease);
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.ma-product:hover .ma-arrow {
	transform: translateX(4px);
}

/* Survol : nom et fleche en bleu (ticket Antoine 2026-09-17). */
@media (hover: hover) {
	.ma-product:hover .ma-product__title,
	.ma-product:hover .ma-arrow {
		color: var(--ma-interaction);
	}
}

.ma-product:focus-within .ma-product__title,
.ma-product:focus-within .ma-arrow {
	color: var(--ma-interaction);
}

.ma-product__price {
	margin-top: 4px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	color: var(--ma-grey);
}

.ma-product__price del {
	opacity: 0.6;
	margin-right: 6px;
}

.ma-product__price ins {
	text-decoration: none;
}

/* Le lien couvre toute la carte */
.ma-product__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

@media (max-width: 1000px) {
	.ma-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.ma-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ma-product__excerpt { display: none; }
}

/* --------------------------------------------------------------------------
   13. Événements
   -------------------------------------------------------------------------- */

.ma-events {
	display: grid;
	gap: var(--ma-grid-gap);
}

/* 2 articles : deux colonnes asymétriques (cf. annotation Figma) */
.ma-events--duo {
	grid-template-columns: 57.06% 31.4%;
}

/* 3 articles : trois colonnes égales */
.ma-events--trio {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ma-event {
	position: relative;
	display: flex;
	flex-direction: column;
}

.ma-event__media {
	overflow: hidden;
	background: rgba(58, 58, 53, 0.06);
	aspect-ratio: 427 / 393;
}

.ma-events--duo .ma-event:first-child .ma-event__media {
	aspect-ratio: 776 / 523;
}

.ma-event__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ma-ease);
}

.ma-event:hover .ma-event__media img {
	transform: scale(1.03);
}

.ma-event__foot {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
}

.ma-event__title {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.ma-event__date {
	margin-top: 4px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	opacity: 0.5;
}

.ma-event__plus {
	flex: none;
	font-family: var(--ma-font-mono);
	font-size: 15px;
	line-height: 1;
	padding-top: 6px;
	transition: transform 0.4s var(--ma-ease);
}

.ma-event:hover .ma-event__plus {
	transform: rotate(90deg);
}

.ma-event__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (max-width: 900px) {
	.ma-events--duo,
	.ma-events--trio { grid-template-columns: 1fr; }
	.ma-events--duo .ma-event:first-child .ma-event__media,
	.ma-event__media { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------------------------
   14. Témoignage
   -------------------------------------------------------------------------- */

.ma-testimonial {
	position: relative;
	display: grid;
	grid-template-columns: 351fr 738fr 351fr;
	align-items: start;
	gap: var(--ma-grid-gap);
	padding-block: var(--ma-section-y);
}

.ma-testimonial__aside img {
	width: 100%;
	aspect-ratio: 351 / 527;
	object-fit: cover;
}

.ma-testimonial__aside--left {
	margin-left: calc(var(--ma-gutter) * -1);
}

/*
 * La maquette décale la photo de droite de 167px vers le haut : la composition
 * est volontairement asymétrique et la photo déborde dans le blanc de la
 * section précédente.
 */
.ma-testimonial__aside--right {
	margin-right: calc(var(--ma-gutter) * -1);
	margin-top: -167px;
}

.ma-testimonial__body {
	display: flex;
	flex-direction: column;
	gap: 26px;
	max-width: 500px;
	margin-inline: auto; /* centre sur la page (ticket Antoine 2026-09-17) */
	margin-top: 27px;
}

.ma-testimonial__quote {
	font-family: var(--ma-font-mono);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -0.01em;
}

.ma-testimonial__quote p + p {
	margin-top: 0;
}

.ma-testimonial__author {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.01em;
}

.ma-testimonial__date {
	margin-top: 4px;
	font-family: var(--ma-font-mono);
	font-size: 14px;
	letter-spacing: -0.01em;
	opacity: 0.5;
}

.ma-testimonial__cta {
	margin-top: 22px;
}

@media (max-width: 1100px) {
	.ma-testimonial {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
	.ma-testimonial__body {
		grid-column: 1 / -1;
		order: -1;
		max-width: none;
		margin-top: 0;
	}
	.ma-testimonial__aside--right { margin-top: 0; }
}

@media (max-width: 700px) {
	.ma-testimonial { grid-template-columns: 1fr; }
	.ma-testimonial__aside--left,
	.ma-testimonial__aside--right { margin-inline: 0; }
	.ma-testimonial__aside--right { display: none; }
}

/* --------------------------------------------------------------------------
   15. Actualités / Instagram
   -------------------------------------------------------------------------- */

.ma-actus {
	display: grid;
	grid-template-columns: 209px 1fr;
	gap: 30px;
	align-items: stretch;
	padding-left: var(--ma-gutter);
	padding-bottom: var(--ma-space-96);
}

.ma-actus__intro {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding-right: 10px;
}

.ma-actus__blurb {
	margin-top: 11px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.5;
}

.ma-actus__blurb a {
	color: var(--ma-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ma-actus__social {
	display: inline-flex;
	width: 22px;
	height: 22px;
}

.ma-actus__social svg {
	width: 100%;
	height: 100%;
}

.ma-actus__strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 19px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

.ma-actus__strip::-webkit-scrollbar {
	display: none;
}

.ma-actus__item {
	scroll-snap-align: start;
}

.ma-actus__item img {
	width: 100%;
	aspect-ratio: 1080 / 1440;
	object-fit: cover;
	border-radius: var(--ma-radius);
	transition: opacity 0.4s var(--ma-ease);
}

.ma-actus__item:hover img {
	opacity: 0.86;
}

@media (max-width: 900px) {
	.ma-actus {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-right: 0;
	}
	.ma-actus__strip {
		grid-auto-columns: 62%;
		padding-right: var(--ma-gutter);
	}
}

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */

.ma-footer {
	background: var(--ma-black);
	color: var(--ma-white);
	padding: 80px var(--ma-gutter) 39px;
}

.ma-footer__inner {
	max-width: calc(var(--ma-maxw) - var(--ma-gutter) * 2);
	margin-inline: auto;
}

.ma-footer__top {
	display: grid;
	grid-template-columns: 436fr 560fr 200fr;
	gap: var(--ma-grid-gap);
	align-items: start;
}

.ma-footer__heading {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.01em;
}

.ma-footer__sub {
	margin-top: 6px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: -0.01em;
	opacity: 0.5;
}

/* Formulaire newsletter */
.ma-newsletter {
	margin-top: 32px;
}

.ma-newsletter__row {
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid var(--ma-white);
	padding-bottom: 10px;
}

.ma-newsletter__row input[type="email"] {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	color: var(--ma-white);
	font-family: var(--ma-font-mono);
	font-size: 13px;
	letter-spacing: -0.01em;
	padding: 4px 0;
}

.ma-newsletter__row input[type="email"]::placeholder {
	color: var(--ma-white);
	opacity: 1;
}

.ma-newsletter__row input[type="email"]:focus {
	outline: none;
}

.ma-newsletter__submit {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--ma-white);
	transition: transform 0.4s var(--ma-ease);
}

.ma-newsletter__submit:hover {
	transform: translateX(4px);
}

.ma-newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 22px;
	max-width: 414px;
}

.ma-newsletter__consent input[type="checkbox"] {
	flex: none;
	appearance: none;
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin: 2px 0 0;
	border: 1px solid var(--ma-white);
	background: none;
	cursor: pointer;
	display: grid;
	place-content: center;
}

.ma-newsletter__consent input[type="checkbox"]::after {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--ma-white);
	transform: scale(0);
	transition: transform 0.15s var(--ma-ease);
}

.ma-newsletter__consent input[type="checkbox"]:checked::after {
	transform: scale(1);
}

.ma-newsletter__consent label {
	font-family: var(--ma-font-mono);
	font-size: 11px;
	line-height: 1.45;
	letter-spacing: -0.01em;
	opacity: 0.5;
	cursor: pointer;
}

.ma-newsletter__feedback {
	margin-top: 12px;
	font-family: var(--ma-font-mono);
	font-size: 12px;
}

.ma-newsletter__feedback:empty {
	margin: 0;
}

/* Bloc marque du pied de page */
.ma-footer__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding-top: 18px;
}

.ma-footer__brand .ma-logo {
	--ma-logo-h: 78px;
}

.ma-footer__divider {
	width: 1px;
	align-self: stretch;
	background: var(--ma-white);
	opacity: 0.85;
}

.ma-footer__signature {
	color: var(--ma-white);
}

.ma-footer__signature .ma-signature {
	width: 246px;
	height: 44px;
}

/* Menu du pied de page */
.ma-footer__menu .ma-nav__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-end;
	padding-top: 8px;
}

.ma-footer__menu a {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	transition: opacity 0.25s var(--ma-ease);
}

.ma-footer__menu a:hover {
	opacity: 0.6;
}

.ma-footer__bottom {
	margin-top: 64px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ma-footer__address {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
}

.ma-footer__legal {
	font-family: var(--ma-font-mono);
	font-size: 12px;
	text-transform: uppercase;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.ma-footer__legal li + li::before {
	content: "|";
	margin-right: 10px;
	opacity: 0.7;
}

.ma-footer__legal a:hover {
	text-decoration: underline;
}

.ma-footer__credit {
	font-family: var(--ma-font-mono);
	font-size: 12px;
	text-transform: uppercase;
	opacity: 0.5;
}

@media (max-width: 1000px) {
	.ma-footer__top {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.ma-footer__brand { justify-content: flex-start; }
	.ma-footer__menu .ma-nav__list {
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
		padding-top: 0;
	}
}

@media (max-width: 560px) {
	.ma-footer__brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.ma-footer__divider {
		width: 60px;
		height: 1px;
		align-self: auto;
	}
}

/* --------------------------------------------------------------------------
   17. Pages intérieures — fil d'Ariane, en-tête, boutique
   -------------------------------------------------------------------------- */

/* L'en-tête des pages intérieures est dans le flux : pas de rattrapage ici. */
.ma-breadcrumb {
	padding-top: 12px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
}

.ma-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.ma-breadcrumb li + li::before {
	content: "/";
	margin-right: 8px;
	opacity: 0.35;
}

/*
 * 0,72 et pas moins : en dessous, le contraste du lien passe sous 4,5:1 sur le
 * fond crème et le fil d'Ariane devient illisible. L'estompage reste net face à
 * la page courante, qui est à pleine opacité.
 */
.ma-breadcrumb a {
	opacity: 0.72;
	transition: opacity 0.25s var(--ma-ease);
}

.ma-breadcrumb a:hover {
	opacity: 1;
}

/* En-tête de page : signature à gauche, titre et chapô à droite */
.ma-page-head {
	display: grid;
	grid-template-columns: 700fr 660fr;
	gap: var(--ma-grid-gap);
	align-items: start;
	padding-top: 56px;
	padding-bottom: var(--ma-space-40);
}

.ma-page-head__brand {
	display: flex;
	align-items: center;
	padding-left: 118px;
}

/* Taille de la signature en en-tête de page : voir section 5 (--ma-signature-h). */

/* Page cours : le lockup remplace la signature. */
.ma-page-head__brand .ma-logo--xl {
	--ma-logo-h: 135px;
	color: var(--ma-black);
}

.ma-page-head__intro .ma-title {
	margin-bottom: 22px;
}

.ma-page-head__text {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.42;
	max-width: 420px;
}

.ma-page-head__text p + p {
	margin-top: 1em;
}

@media (max-width: 1000px) {
	.ma-page-head {
		grid-template-columns: 1fr;
		gap: 48px;
		padding-top: 48px;
		padding-bottom: var(--ma-space-64);
	}
	.ma-page-head__brand { padding-left: 0; }
	.ma-page-head__brand .ma-logo--xl { --ma-logo-h: 96px; }
	.ma-page-head__text { max-width: none; }
}

/* Barre de catégories + filtres */
/* Les pictogrammes de catégories sont posés juste au-dessus de la grille. */
.ma-shop-bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ma-grid-gap);
	margin-bottom: 16px;
}

.ma-shop-cats {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	flex-wrap: wrap;
}

.ma-shop-cats__item a {
	display: block;
	opacity: 0.75;
	transition: opacity 0.25s var(--ma-ease);
}

.ma-shop-cats__item a:hover,
.ma-shop-cats__item.is-current a {
	opacity: 1;
}

.ma-shop-cats__item img {
	width: auto;
	height: 44px;
	object-fit: contain;
}

.ma-shop-cats__label {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.ma-shop-cats__item.is-current .ma-shop-cats__label {
	border-bottom-color: currentColor;
}

.ma-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.ma-filter-toggle__icon {
	transition: transform 0.35s var(--ma-ease);
}

.ma-filter-toggle[aria-expanded="true"] .ma-filter-toggle__icon {
	transform: rotate(180deg);
}

/* `display: grid` l'emporterait sur l'attribut hidden : on le rétablit. */
.ma-shop-filters[hidden] {
	display: none;
}

.ma-shop-filters {
	margin-bottom: var(--ma-space-48);
	padding: 28px 0;
	border-block: 1px solid rgba(58, 58, 53, 0.15);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
}

.ma-widget__title {
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 13px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.ma-shop-filters ul li + li {
	margin-top: 6px;
}

/* Badge de carte produit */
.ma-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 9px;
	background: #c8ddff;
	color: var(--ma-blue);
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 11px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	border-radius: var(--ma-radius);
}

/* Bouton « Afficher la suite » */
.ma-load-more {
	display: flex;
	justify-content: center;
	padding-block: var(--ma-space-96) var(--ma-space-128);
}

.ma-load-more__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.ma-load-more__label {
	position: relative;
}

.ma-load-more__label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--ma-ease);
}

.ma-load-more__button:hover .ma-load-more__label::after {
	transform: scaleX(1);
	transform-origin: left;
}

.ma-load-more__icon {
	transition: transform 0.4s var(--ma-ease);
}

.ma-load-more__button:hover .ma-load-more__icon {
	transform: rotate(90deg);
}

.ma-load-more__button.is-loading {
	pointer-events: none;
	opacity: 0.5;
}

@media (max-width: 700px) {
	.ma-shop-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}

/* --------------------------------------------------------------------------
   18. Fiche produit
   -------------------------------------------------------------------------- */

.ma-product-single {
	display: grid;
	grid-template-columns: 543fr 817fr;
	gap: var(--ma-grid-gap);
	align-items: start;
	padding-bottom: var(--ma-space-128);
}

.ma-gallery {
	position: relative;
}

.ma-gallery__viewport {
	position: relative;
	aspect-ratio: 543 / 617;
	background: rgba(58, 58, 53, 0.06);
	overflow: hidden;
}

.ma-gallery__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s var(--ma-ease);
}

.ma-gallery__slide.is-active {
	opacity: 1;
}

.ma-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ma-gallery__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.ma-gallery__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ma-white);
	opacity: 0.5;
	transition: opacity 0.25s var(--ma-ease);
}

.ma-gallery__dot.is-active,
.ma-gallery__dot:hover {
	opacity: 1;
}

.ma-product-single__details {
	padding-left: 158px; /* la colonne démarre à x=740 dans la maquette */
	padding-top: 4px;
}

.ma-back-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	float: right;
	margin-top: -8px;
	font-family: var(--ma-font-mono);
	font-size: 14px;
	opacity: 0.5;
	transition: opacity 0.25s var(--ma-ease);
}

.ma-back-link:hover {
	opacity: 1;
}

.ma-back-link__icon {
	transition: transform 0.35s var(--ma-ease);
}

.ma-back-link:hover .ma-back-link__icon {
	transform: translateX(-4px);
}

.ma-product-single__title {
	clear: both;
	padding-top: 62px;
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ma-blue);
}

.ma-product-single__price {
	margin-top: 44px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	color: var(--ma-grey);
}

.ma-product-single__price del { opacity: 0.6; margin-right: 6px; }
.ma-product-single__price ins { text-decoration: none; }

.ma-product-single__specs {
	margin-top: 44px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.35;
	text-transform: uppercase;
}

.ma-product-single__description {
	margin-top: 26px;
	max-width: 340px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.35;
}

.ma-product-single__description p + p {
	margin-top: 1em;
}

.ma-product-single__cart {
	margin-top: 118px;
}

/*
 * La maquette ne montre que le bouton : le sélecteur de quantité est masqué,
 * la quantité restant ajustable dans le panier.
 */
.ma-product-single__cart .quantity {
	display: none;
}

/*
 * WooCommerce habille .button.alt avec un fond : il faut au moins autant de
 * specificite pour garder le bouton nu demande par la maquette
 * (ticket Antoine 2026-09-17).
 */
.woocommerce .ma-product-single__cart .single_add_to_cart_button,
.woocommerce .ma-product-single__cart .single_add_to_cart_button.alt {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ma-black);
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.woocommerce .ma-product-single__cart .single_add_to_cart_button::before {
	content: "\2193";
	transition: transform 0.35s var(--ma-ease);
}

.woocommerce .ma-product-single__cart .single_add_to_cart_button:hover,
.woocommerce .ma-product-single__cart .single_add_to_cart_button.alt:hover {
	background: none;
	color: var(--ma-interaction);
}

.woocommerce .ma-product-single__cart .single_add_to_cart_button:hover::before {
	transform: translateY(4px);
}

@media (max-width: 1000px) {
	.ma-product-single {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.ma-product-single__details { padding-left: 0; }
	.ma-product-single__title { padding-top: 32px; }
	.ma-product-single__price,
	.ma-product-single__specs { margin-top: 24px; }
	.ma-product-single__cart { margin-top: 48px; }
	.ma-product-single__description { max-width: none; }
}

/* Tuile « Offre carte cadeau » */
.ma-gift__link {
	position: relative;
	display: block;
}

.ma-gift__media {
	display: block;
	aspect-ratio: 310 / 393;
	overflow: hidden;
	background: rgba(58, 58, 53, 0.06);
}

.ma-gift__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ma-ease);
}

.ma-gift__link:hover .ma-gift__media img {
	transform: scale(1.04);
}

.ma-gift__label {
	position: absolute;
	top: 38px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.01em;
	color: var(--ma-blue);
}

/* --------------------------------------------------------------------------
   19. Page cours — réservation et fenêtre de détail
   -------------------------------------------------------------------------- */

.ma-course__media--button {
	display: block;
	width: 100%;
	text-align: left;
	cursor: pointer;
}

.ma-course__cta {
	margin-top: 14px;
	text-align: right;
}

.ma-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.ma-arrow-link__icon {
	transition: transform 0.35s var(--ma-ease);
}

.ma-arrow-link:hover .ma-arrow-link__icon {
	transform: translateY(4px);
}

/*
 * Le texte d'abord, le calendrier en dessous sur toute la largeur : un planning
 * a besoin de place, et le comprimer dans une colonne rendait les créneaux
 * illisibles.
 */
.ma-booking {
	padding-block: var(--ma-space-128);
}

.ma-booking__intro {
	padding-left: 118px;
	margin-bottom: var(--ma-space-64);
}

.ma-booking__text {
	margin-top: 24px;
	max-width: 520px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.42;
}

.ma-booking__widget {
	width: 100%;
}

@media (max-width: 1000px) {
	.ma-booking {
		padding-block: var(--ma-space-64);
	}
	.ma-booking__intro {
		padding-left: 0;
		margin-bottom: var(--ma-space-40);
	}
	.ma-booking__text { max-width: none; margin-top: 20px; }
}

/* Fenêtre de détail */
.ma-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ma-gutter);
}

.ma-modal[hidden] {
	display: none;
}

.ma-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(58, 58, 53, 0.55);
	opacity: 0;
	transition: opacity 0.35s var(--ma-ease);
}

.ma-modal.is-open .ma-modal__overlay {
	opacity: 1;
}

.ma-modal__dialog {
	position: relative;
	display: grid;
	grid-template-columns: 575fr 792fr;
	width: min(1367px, 100%);
	max-height: min(760px, 92vh);
	background: var(--ma-white);
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.4s var(--ma-ease), transform 0.4s var(--ma-ease);
}

.ma-modal.is-open .ma-modal__dialog {
	opacity: 1;
	transform: none;
}

.ma-modal__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ma-modal__body {
	position: relative;
	padding: 92px 92px 56px;
	overflow-y: auto;
}

.ma-modal__close {
	position: absolute;
	top: 52px;
	right: 44px;
	width: 22px;
	height: 22px;
	color: var(--ma-black);
	transition: transform 0.3s var(--ma-ease);
}

.ma-modal__close:hover {
	transform: rotate(90deg);
}

.ma-modal__close svg {
	width: 100%;
	height: 100%;
}

.ma-modal__title {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.ma-modal__subtitle {
	font-family: var(--ma-font-mono);
	font-style: italic;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: -0.01em;
	margin-left: 8px;
	white-space: nowrap;
}

.ma-modal__meta {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 42px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
}

.ma-modal__meta b {
	font-weight: 700;
}

.ma-modal__baseline {
	margin-top: 58px;
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.01em;
	color: var(--ma-blue);
}

.ma-modal__text {
	margin-top: 30px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.42;
}

.ma-modal__text p + p {
	margin-top: 1.2em;
}

.ma-modal__text strong {
	font-weight: 700;
}

.ma-modal__cta {
	margin-top: 64px;
	text-align: right;
}

@media (max-width: 900px) {
	.ma-modal {
		padding: 0;
	}
	.ma-modal__dialog {
		grid-template-columns: 1fr;
		max-height: 100vh;
		height: 100%;
		overflow-y: auto;
	}
	.ma-modal__media {
		aspect-ratio: 3 / 2;
	}
	.ma-modal__body {
		padding: 40px var(--ma-gutter);
	}
	.ma-modal__close {
		top: 20px;
		right: 20px;
	}
	.ma-modal__title { font-size: 26px; }
	.ma-modal__subtitle { display: block; margin: 6px 0 0; white-space: normal; }
	.ma-modal__baseline { margin-top: 32px; }
}

/* --------------------------------------------------------------------------
   20. Page à propos
   -------------------------------------------------------------------------- */

.ma-about {
	display: grid;
	grid-template-columns: 582fr 858fr;
	align-items: start;
	gap: var(--ma-grid-gap);
	padding-bottom: var(--ma-space-128);
}

.ma-about__portrait {
	position: relative;
	align-self: stretch;
}

.ma-about__portrait img {
	width: 100%;
	height: 100%;
	max-height: 762px;
	object-fit: cover;
}

/* Le fil d'Ariane se pose sur la photo, en blanc. */
.ma-about__crumb {
	position: absolute;
	top: 0;
	left: var(--ma-gutter);
	color: var(--ma-white);
}

.ma-about__crumb .ma-breadcrumb {
	padding-top: 76px;
}

.ma-about__content {
	padding-right: var(--ma-gutter);
	padding-top: 190px;
	max-width: 700px;
}

.ma-about__role {
	margin-top: 30px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.35;
}

.ma-about__seal {
	margin-top: 22px;
}

.ma-about__seal img {
	width: auto;
	height: 56px;
}

.ma-about__bio {
	margin-top: 62px;
	margin-left: 234px;
	font-size: 13px;
	line-height: 1.42;
}

.ma-timeline {
	margin-top: var(--ma-space-96);
}

.ma-timeline__list {
	margin-top: 40px;
	margin-left: 234px;
}

.ma-timeline__row {
	display: grid;
	grid-template-columns: 116px 1fr;
	gap: 0;
	padding-bottom: 34px;
}

.ma-timeline__year {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	opacity: 0.5;
}

.ma-timeline__label {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.35;
	margin: 0;
}

.ma-timeline__label a {
	color: var(--ma-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Ticket Antoine 2026-09-17 : le portrait tient toute la hauteur du viewport
 * et reste colle pendant le texte et les evenements. Le bloc .ma-about est
 * son conteneur, donc il se decroche tout seul a la fin des evenements.
 */
@media (min-width: 901px) {
	.ma-about__portrait {
		position: sticky;
		top: 0;
		align-self: start;
		height: 100vh; /* repli pour les navigateurs sans svh */
		height: 100svh;
	}

	.ma-about__portrait img {
		height: 100%;
		max-height: none;
	}
}

@media (max-width: 1100px) {
	.ma-about__bio,
	.ma-timeline__list { margin-left: 0; }
	.ma-about__content { padding-top: 120px; }
}

@media (max-width: 900px) {
	.ma-about {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.ma-about__portrait { aspect-ratio: 3 / 4; }
	.ma-about__portrait img { max-height: none; }
	.ma-about__content {
		padding-inline: var(--ma-gutter);
		padding-top: 0;
	}
	.ma-timeline__row { grid-template-columns: 90px 1fr; }
}

/* --------------------------------------------------------------------------
   21. Page contact
   -------------------------------------------------------------------------- */

/* Maquette : le formulaire démarre à x=756, soit une colonne gauche de 676 px. */
.ma-contact {
	display: grid;
	grid-template-columns: 676fr 644fr;
	gap: var(--ma-grid-gap);
	align-items: start;
	padding-top: 108px;
	padding-bottom: var(--ma-space-128);
}

.ma-contact__infos {
	padding-left: 118px;
}

.ma-contact__entity {
	margin-top: 24px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
}

.ma-contact__address {
	margin-top: 22px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.35;
}

.ma-contact__intro {
	margin-top: 22px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.42;
}

/* Accès */
.ma-access {
	margin-top: 44px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.ma-access__item {
	display: grid;
	grid-template-columns: 42px 1fr;
	align-items: start;
}

.ma-access__icon {
	display: block;
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

.ma-access__icon svg {
	width: 100%;
	height: 100%;
}

.ma-access__text {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	line-height: 1.35;
}

/* Formulaire */
/* Maquette : formulaire de 542 px de large, colonnes séparées de 13 px. */
.ma-form {
	max-width: 542px;
}

.ma-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px var(--ma-space-13);
}

.ma-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ma-field--wide {
	grid-column: 1 / -1;
}

.ma-field__label {
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.ma-field__input {
	width: 100%;
	padding: 6px 0 10px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ma-black);
	border-radius: 0;
	color: var(--ma-black);
	font-family: var(--ma-font-mono);
	font-size: 14px;
	transition: border-color 0.25s var(--ma-ease);
}

.ma-field__input:focus {
	outline: none;
	border-bottom-width: 2px;
	padding-bottom: 9px;
}

.ma-field__input--area {
	min-height: 148px;
	resize: vertical;
}

.ma-field__input:user-invalid {
	border-bottom-color: var(--ma-error);
}

/* Piège à robots : retiré du flux sans display:none, que certains bots ignorent. */
.ma-form__trap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.ma-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 20px;
}

.ma-form__required {
	font-family: var(--ma-font-mono);
	font-style: italic;
	font-size: 13px;
}

.ma-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ma-font-mono);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.ma-form__submit:hover .ma-arrow {
	transform: translateX(4px);
}

.ma-form__submit:disabled {
	opacity: 0.5;
	cursor: default;
}

.ma-form__feedback {
	margin-top: 16px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
}

.ma-form__feedback:empty {
	margin: 0;
}

/* Plan */
.ma-map {
	position: relative;
	width: 100%;
	aspect-ratio: 1440 / 450;
	overflow: hidden;
	background: rgba(58, 58, 53, 0.06);
}

.ma-map > img,
.ma-map > a img,
.ma-map > iframe {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	display: block;
}

.ma-map > a {
	display: block;
	height: 100%;
}

/*
 * Carte Leaflet : fond en noir et blanc, pin aux couleurs de la charte.
 * Le filtre ne porte que sur le calque des tuiles ; les marqueurs vivent
 * dans un calque distinct et gardent donc leur couleur.
 */
.ma-map__canvas {
	width: 100%;
	height: 100%;
	background: rgba(58, 58, 53, 0.06);
}

.ma-map .leaflet-tile-pane {
	filter: grayscale(1) contrast(1.04);
}

.ma-map .ma-pin {
	background: none;
	border: 0;
}

.ma-map .leaflet-container {
	font-family: var(--ma-font-mono);
	background: var(--ma-white);
}

.ma-map .leaflet-control-attribution {
	background: rgba(250, 250, 245, 0.88);
	font-size: 11px;
}

.ma-map .leaflet-control-attribution a {
	color: var(--ma-black);
}

.ma-map .leaflet-control-zoom a {
	color: var(--ma-black);
	font-family: var(--ma-font-mono);
}

/* Repli sans JavaScript. */
.ma-map__fallback {
	display: inline-block;
	padding: var(--ma-space-24);
	font-family: var(--ma-font-mono);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 1000px) {
	.ma-contact {
		grid-template-columns: 1fr;
		gap: 56px;
		padding-top: var(--ma-space-64);
		padding-bottom: var(--ma-space-64);
	}
	.ma-contact__infos { padding-left: 0; }
}

@media (max-width: 600px) {
	.ma-form__grid { grid-template-columns: 1fr; }
	.ma-map { aspect-ratio: 4 / 3; }
	.ma-form__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

/* --------------------------------------------------------------------------
   22. Contenus éditoriaux (pages / articles)
   -------------------------------------------------------------------------- */

.ma-page-header {
	padding-top: var(--ma-space-64);
	padding-bottom: var(--ma-space-48);
}

.ma-page-title {
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ma-blue);
}

.ma-entry {
	max-width: 720px;
	font-family: var(--ma-font-mono);
	font-size: 14px;
	line-height: 1.65;
}

.ma-entry > * + * {
	margin-top: 1.2em;
}

.ma-entry h2,
.ma-entry h3,
.ma-entry h4 {
	font-family: var(--ma-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-top: 1.8em;
}

.ma-entry h2 { font-size: 24px; }
.ma-entry h3 { font-size: 19px; }
.ma-entry h4 { font-size: 16px; }

.ma-entry a {
	color: var(--ma-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ma-entry ul,
.ma-entry ol {
	padding-left: 1.3em;
}

.ma-entry ul { list-style: disc; }
.ma-entry ol { list-style: decimal; }

.ma-entry li + li { margin-top: 0.4em; }

.ma-entry blockquote {
	padding-left: 20px;
	border-left: 1px solid currentColor;
	font-style: italic;
}

.ma-entry img {
	border-radius: var(--ma-radius);
}

.ma-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ma-grid-gap);
}

@media (max-width: 900px) {
	.ma-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.ma-archive-grid { grid-template-columns: 1fr; }
}

.ma-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(58, 58, 53, 0.06);
}

.ma-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ma-ease);
}

.ma-card:hover .ma-card__media img {
	transform: scale(1.04);
}

.ma-card__title {
	margin-top: 14px;
	font-family: var(--ma-font-display);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.ma-card__meta {
	margin-top: 4px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	opacity: 0.5;
}

/* Pagination */
.ma-pagination {
	margin-top: var(--ma-space-64);
	display: flex;
	gap: 12px;
	font-family: var(--ma-font-mono);
	font-size: 13px;
	text-transform: uppercase;
}

.ma-pagination .page-numbers {
	padding: 8px 12px;
	border: 1px solid rgba(58, 58, 53, 0.2);
}

.ma-pagination .page-numbers.current,
.ma-pagination .page-numbers:hover {
	background: var(--ma-black);
	color: var(--ma-white);
	border-color: var(--ma-black);
}

/* --------------------------------------------------------------------------
   23. Repli visuel & formulaire de recherche
   -------------------------------------------------------------------------- */

/* Affiché tant qu'aucune image n'a été choisie, pour préserver la mise en page. */
.ma-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background: repeating-linear-gradient(
		45deg,
		rgba(58, 58, 53, 0.05) 0,
		rgba(58, 58, 53, 0.05) 10px,
		rgba(58, 58, 53, 0.09) 10px,
		rgba(58, 58, 53, 0.09) 20px
	);
}

.ma-search .ma-newsletter__row {
	border-bottom-color: rgba(58, 58, 53, 0.35);
}

.ma-search input[type="search"] {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	padding: 6px 0;
	font-family: var(--ma-font-mono);
	font-size: 14px;
	color: var(--ma-black);
}

.ma-search input[type="search"]:focus {
	outline: none;
}

.ma-search .ma-newsletter__submit {
	color: var(--ma-black);
}

/* --------------------------------------------------------------------------
   24. Animations d'apparition au scroll
   -------------------------------------------------------------------------- */

.ma-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s var(--ma-ease), transform 0.8s var(--ma-ease);
}

.ma-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ma-reveal {
		opacity: 1;
		transform: none;
	}
}