/* =========================================================================
   Languedoc Céramique — feuille de style principale
   Maquette : Figma « Accueil »
   ========================================================================= */

/* ----------------------------------------------------------- Polices
 * Inter : chargée via Google Fonts (functions.php) — navigation & pied de page.
 * Neue Haas Grotesk Display Pro : fichiers TTF sous assets/fonts/.
 *   - Light  (300) : corps de texte  → body / .rich-text
 *   - Medium (500) : titres          → .section-title
 * (« Inter » reste le repli si un fichier venait à manquer.)
 */
@font-face {
	font-family: "Neue Haas Grotesk Display Pro";
	src: url("../fonts/NeueHaasDisplayLight.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Neue Haas Grotesk Display Pro";
	src: url("../fonts/NeueHaasDisplayMedium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------- Variables */
:root {
	--lc-cream: #f8f3e9;
	--lc-dark: #1a1919;
	--lc-terracotta: #af856a;        /* accent (lien actif) */
	--lc-terracotta-deep: #9f6a4c;   /* flèches & séparateur ondulé */
	--lc-beige: #d8c4ad;             /* blocs CTA / catalogue / partenaires */
	--lc-placeholder: #d9d9d9;
	--lc-white: #ffffff;             /* fond neutre (cartes logos) */
	--lc-text-muted: #6b6664;        /* texte gris secondaire (replis) */

	--font-display: "Neue Haas Grotesk Display Pro", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--container: 1580px;
	--gutter: clamp(20px, 5vw, 80px);
	--header-h: clamp(72px, 8vw, 110px);
	--divider-h: clamp(36px, 5vw, 72px);
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--lc-cream);
	color: var(--lc-dark);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.0625rem, 1.2vw, 1.375rem);
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ----------------------------------------------------- Accessibilité */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--lc-dark);
	color: var(--lc-cream);
	padding: 12px 20px;
}
.skip-link:focus { left: 8px; top: 8px; }

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

/* ------------------------------------------------------- Conteneur */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --------------------------------------------------- Typographie */
.section-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(2rem, 3.4vw, 3rem);
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 clamp(20px, 2vw, 36px);
	color: var(--lc-dark);
}
.section-title--light { color: var(--lc-cream); }

.rich-text {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.0625rem, 1.25vw, 1.2rem);
	line-height: 1.3;
	color: var(--lc-dark);
}
.rich-text--light { color: var(--lc-cream); }
.rich-text p { margin: 0 0 1.1em; }
.rich-text p:last-child { margin-bottom: 0; }

.button {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: clamp(1.0625rem, 1.25vw, 1.2rem);
	letter-spacing: -1px;
	text-transform: uppercase;
	background: var(--lc-terracotta-deep);
	color: var(--lc-cream);
	padding: 10px 24px;
	border-radius: 0;
	text-decoration: none;
	transition: background-color .2s ease;
}
.button:hover { background: var(--lc-terracotta); }

/* Bouton « contour » sur fond clair : bord sombre, texte sombre, casse normale. */
.button--outline {
	background: transparent;
	border: 1px solid var(--lc-dark);
	color: var(--lc-dark);
	text-transform: none;
}
.button--outline:hover {
	background: var(--lc-dark);
	color: var(--lc-cream);
}

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--lc-dark);
}
.site-header__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	/* La hauteur du header découle du logo + un padding vertical serré. */
	padding-block: clamp(14px, 1.7vw, 30px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.site-logo { flex: 0 0 auto; line-height: 0; }
/* Logo : 94 px dans la maquette (1920). */
.site-logo__img {
	height: clamp(50px, 4.9vw, 50px);
	width: auto;
}

/* Navigation */
.main-navigation .nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.4vw, 46px);
}
.main-navigation a {
	font-family: var(--font-ui);
	font-size: clamp(0.875rem, 0.9vw, 1rem);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--lc-cream);
	text-decoration: none;
	transition: color .2s ease;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current-menu-parent > a,
.main-navigation .current-page-ancestor > a,
.main-navigation .current_page_parent > a {
	color: var(--lc-terracotta);
}

/* Bouton hamburger (mobile) */
.nav-toggle {
	display: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 10px;
	margin-right: -10px;
}
.nav-toggle__box { display: block; width: 28px; height: 18px; position: relative; }
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 28px;
	height: 2px;
	background: var(--lc-cream);
	transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle__bar { top: 50%; transform: translateY(-50%); }
.nav-toggle__bar::before { top: -8px; }
.nav-toggle__bar::after { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-8px) rotate(-45deg); }

/* =====================================================================
   INTRO : photo plein écran (hero, bloc sombre)
   ===================================================================== */
.intro {
	position: relative;
	background: var(--lc-dark);
	color: var(--lc-cream);
	isolation: isolate;
	/* Hauteur = proportions de la photo : elle est affichée entière, sans recadrage. */
	aspect-ratio: var(--hero-ratio, 16 / 9);
	overflow: hidden;
}
.intro__hero {
	position: absolute;
	inset: 0;
	background-image: var(--hero-image);
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.intro__overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 25, 25, var(--hero-overlay, .4));
	z-index: 1;
}

/* =====================================================================
   NOTRE HISTOIRE : bandeau terracotta festonné (maquette Figma)
   ===================================================================== */
.histoire {
	position: relative;
	background: var(--lc-terracotta-deep);   /* #9f6a4c — fond terracotta plein */
	color: var(--lc-cream);
	isolation: isolate;
}
/* Franges festonnées : festons vers le haut (dans le hero) et vers le bas (dans le crème) */
.histoire::before,
.histoire::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 11px;
	background: url("../images/wave-scallop.svg") repeat-x;
	background-size: 21px 11px;
	pointer-events: none;
	z-index: 1;
}
.histoire::before { top: -10px; transform: scaleY(-1); }
.histoire::after  { bottom: -10px; }

.histoire__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(64px, 8vw, 70px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 120px);
	align-items: center;
}
.histoire__text { max-width: 46ch; }

/* Deux photos superposées et légèrement inclinées */
.histoire__media {
	position: relative;
	min-height: clamp(380px, 44vw, 680px);
	margin-block: 25px;
}
.tilted-photo {
	position: absolute;
	width: 63%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
}
.tilted-photo img { width: 100%; height: 100%; object-fit: cover; }
.tilted-photo--back  { top: 0; right: 0; transform: rotate(5deg); z-index: 1; }
.tilted-photo--front { bottom: 0; left: 0; transform: rotate(-6deg); z-index: 2; }

/* =====================================================================
   SECTIONS PRODUITS (Pots de jardinerie / Accessoires de toiture)
   ===================================================================== */
.feature {
	background: var(--lc-cream);
	padding-block: clamp(28px, 3.5vw, 64px);
}
.feature__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 8vw, 140px);
	align-items: center;
}
/* Section sans image : le texte occupe toute la largeur. */
.feature--no-media .feature__grid { grid-template-columns: 1fr; }

/* Marge desktop de 50px : seulement en haut de la 1re section personnalisable
   et en bas de la dernière (modificateurs posés par template-accueil.php). */
@media (min-width: 901px) {
	.feature--first { margin-top: 50px; }
	.feature--last  { margin-bottom: 50px; }
}

/* Image à gauche / à droite (ordre inversé) */
.feature--image-left  .feature__media   { order: 1; }
.feature--image-left  .feature__content { order: 2; }
.feature--image-right .feature__media   { order: 2; }
.feature--image-right .feature__content { order: 1; }

/* ------------------------------------------------ Carrousel (Swiper) */
/* min-width:0 : empêche la piste Swiper (loop) de dilater sa cellule de grille. */
.feature__media,
.histoire-galerie__media { min-width: 0; }

/* Flèches entièrement en dehors de l'image (dans les marges), pas par-dessus. */
@media (min-width: 901px) {
	.feature .lc-swiper__arrow--prev { left: clamp(-78px, -4.6vw, -48px); }
	.feature .lc-swiper__arrow--next { right: clamp(-78px, -4.6vw, -48px); }
}

/* Emplacement réservé (gris) tant qu'aucune galerie n'est fournie. */
.feature__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--lc-placeholder);
}
.lc-swiper { position: relative; min-width: 0; }
.lc-swiper__viewport {
	overflow: hidden;
	min-width: 0;
	aspect-ratio: 1 / 1;
	background: var(--lc-placeholder);
}
.lc-swiper--wide .lc-swiper__viewport { aspect-ratio: 16 / 9; }

/* La piste et les diapositives remplissent la hauteur du cadre. */
.lc-swiper .swiper-wrapper { height: 100%; }
.lc-swiper .swiper-slide { height: 100%; }
.lc-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-swiper .swiper-slide--placeholder { background: var(--lc-placeholder); }

/* Flèches terracotta, débordant légèrement de part et d'autre du cadre. */
.lc-swiper__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(40px, 4vw, 58px);
	height: clamp(40px, 4vw, 58px);
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	z-index: 5;
	opacity: .9;
	transition: opacity .2s ease, transform .2s ease;
}
.lc-swiper__arrow:hover { opacity: 1; }
.lc-swiper__arrow img { width: 100%; height: 100%; }
.lc-swiper__arrow--prev { left: clamp(-16px, -1.5vw, -10px); }
.lc-swiper__arrow--next { right: clamp(-16px, -1.5vw, -10px); }
.lc-swiper__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.lc-swiper__arrow--next:hover { transform: translateY(-50%) translateX(3px); }
.lc-swiper__arrow.swiper-button-disabled { opacity: .3; cursor: default; }

/* Pagination (points) — utilisée sur la galerie de la page Histoire. */
.lc-swiper__pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(10px, 1.4vw, 18px);
	z-index: 5;
}
.lc-swiper .swiper-pagination-bullet { background: var(--lc-cream); opacity: .55; }
.lc-swiper .swiper-pagination-bullet-active { background: var(--lc-terracotta-deep); opacity: 1; }

/* =====================================================================
   ACCUEIL — mise en avant « Recherche et développement »
   Même langage visuel que .recherche-bandeau (page Recherche et
   développement) : fond beige, contenu centré.
   ===================================================================== */
.accueil-recherche {
	background: var(--lc-beige);
	padding-block: clamp(56px, 9vw, 170px);
}
.accueil-recherche__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(20px, 2.5vw, 40px);
}
.accueil-recherche__title { margin: 0; }
.accueil-recherche__text { max-width: 72ch; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
	position: relative;
	background: var(--lc-dark);
	color: var(--lc-cream);
	isolation: isolate;
}
/* Bord festonné (même style que le bandeau terracotta) :
   festons sombres remontant dans le crème de la section précédente. */
.site-footer__divider {
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 11px;
	background: url("../images/wave-scallop-dark.svg") repeat-x;
	background-size: 21px 11px;
	transform: scaleY(-1);
	pointer-events: none;
	z-index: 2;
}
.site-footer__inner {
	/* Pied de page large : menu au bord gauche, coordonnées au bord droit
	   (comme la maquette), avec une simple gouttière — pas la largeur bridée
	   du contenu, sinon les colonnes sont trop rentrées sur grands écrans. */
	max-width: 1920px;
	margin-inline: auto;
	padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(40px, 5vw, 70px);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: clamp(32px, 5vw, 80px);
}
.footer-navigation { justify-self: start; }
.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.footer-menu li { list-style: none; }
.footer-menu a,
.footer-mentions,
.footer-contact-line {
	font-family: var(--font-ui);
	font-size: clamp(0.875rem, 0.95vw, 1.0625rem);
	color: var(--lc-cream);
	text-decoration: none;
	transition: color .2s ease;
}
/* Majuscules uniquement pour le menu et « Mentions légales ».
   Téléphone, adresse et e-mail conservent leur casse d'origine (minuscules). */
.footer-menu a,
.footer-mentions { text-transform: uppercase; }
.footer-menu a:hover,
.footer-mentions:hover,
a.footer-contact-line:hover { color: var(--lc-terracotta); }
.footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	column-gap: clamp(32px, 3vw, 56px);
	row-gap: 8px;
}

.site-footer__brand { justify-self: center; }
.site-footer__logo { height: clamp(120px, 12vw, 190px); width: auto; }

.site-footer__contact {
	justify-self: end;
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.site-footer__contact .footer-legal { margin-bottom: clamp(8px, 1vw, 16px); }
.footer-contact-line { font-style: normal; line-height: 1.35; }
address.footer-contact-line { text-transform: none; }

/* =====================================================================
   PAGES STANDARD
   ===================================================================== */
.page-default {
	padding-block: clamp(48px, 7vw, 110px);
}
.page-default .entry__title { margin-bottom: clamp(24px, 3vw, 48px); }
.page-default .entry__thumbnail { margin-bottom: clamp(24px, 3vw, 48px); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; align-items: center; }

	.main-navigation {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--lc-dark);
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
	}
	.site-header.nav-open .main-navigation { max-height: 80vh; }
	.main-navigation .nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 8px var(--gutter) 24px;
	}
	.main-navigation .nav-menu > li { width: 100%; }
	.main-navigation a { display: block; padding: 14px 0; }

	.histoire__inner,
	.feature__grid {
		grid-template-columns: 1fr;
	}
	.histoire__text,
	.feature__content { max-width: none; }

	/* Même respiration verticale que le bandeau terracotta du dessus (« Notre
	   histoire »), sinon les répéteurs d'alternance se retrouvent trop collés. */
	.feature { padding-block: clamp(64px, 8vw, 140px); }

	/* Sur mobile, les photos « histoire » s'empilent sans rotation */
	.histoire__media { min-height: 0; display: grid; gap: 18px; }
	.tilted-photo {
		position: static;
		width: 100%;
		transform: none;
		box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
	}

	/* L'image repasse toujours au-dessus du texte */
	.feature--image-left  .feature__media,
	.feature--image-right .feature__media   { order: 1; }
	.feature--image-left  .feature__content,
	.feature--image-right .feature__content { order: 2; }

	/* Mobile : logo en premier, menu masqué, coordonnées dessous, et
	   « Mentions légales » en plus petit sous l'e-mail. */
	.site-footer__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: clamp(28px, 6vw, 48px);
	}
	.footer-navigation { display: none; }
	.site-footer__contact {
		justify-self: center;
		text-align: center;
		align-items: center;
	}
	.site-footer__contact .footer-legal {
		order: 1;                       /* passe sous l'e-mail */
		justify-content: center;
		margin-bottom: 0;
		margin-top: clamp(16px, 4vw, 28px);
	}
	.site-footer__contact .footer-mentions {
		font-size: 0.8125rem;           /* plus petit */
	}

	.lc-swiper__arrow--prev { left: 8px; }
	.lc-swiper__arrow--next { right: 8px; }
}

@media (max-width: 480px) {
	.site-footer__logo { height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.lc-swiper .swiper-wrapper { transition-duration: 0ms !important; }
}

/* =====================================================================
   SOUS-MENUS DU MENU PRINCIPAL (déroulant)
   Desktop : panneau sombre qui se déploie au survol / focus / clic sur le
   chevron. Mobile : accordéon à l'intérieur du menu plein écran.
   ===================================================================== */
.main-navigation .nav-menu > li { position: relative; }

/* Entrée parente : lien + chevron alignés. */
.main-navigation .menu-item-has-children > a { display: inline-block; }

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-left: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--lc-cream);
	font-size: 0.62em;
	line-height: 1;
	cursor: pointer;
	vertical-align: middle;
	transition: transform .25s ease, color .2s ease, background-color .2s ease;
}
.submenu-toggle:hover { color: var(--lc-terracotta); }
.menu-item-has-children:hover > .submenu-toggle,
.menu-item-has-children.is-open > .submenu-toggle { color: var(--lc-terracotta); }
.menu-item-has-children.is-open > .submenu-toggle { transform: rotate(180deg); }

/* Panneau déroulant */
.main-navigation .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	width: max-content;
	min-width: 240px;
	max-width: min(420px, calc(100vw - 2 * var(--gutter)));
	background: #201e1e;
	border: 1px solid rgba(248, 243, 233, .10);
	border-top: 2px solid var(--lc-terracotta);
	box-shadow: 0 22px 44px rgba(0, 0, 0, .38);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-10px);
	transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
	z-index: 30;
}
/* Les deux dernières entrées ouvrent leur panneau vers la gauche : il ne peut
   pas déborder du côté droit de l'écran. */
.main-navigation .nav-menu > li:nth-last-child(-n+2) > .sub-menu {
	left: auto;
	right: 0;
}
/* Zone tampon : le survol ne se perd pas entre l'entrée et le panneau. */
.main-navigation .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -18px;
	height: 18px;
}
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}
.main-navigation .sub-menu li { width: 100%; }
.main-navigation .sub-menu a {
	position: relative;
	display: block;
	padding: 12px 26px;
	font-size: clamp(0.8125rem, 0.85vw, 0.9375rem);
	line-height: 1.35;
	color: var(--lc-cream);
	white-space: nowrap;
	transition: color .22s ease, background-color .22s ease;
}
/* Liseré terracotta qui se déploie sur le bord gauche de l'entrée survolée. */
.main-navigation .sub-menu a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--lc-terracotta);
	transform: scaleY(0);
	transition: transform .24s ease;
}
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu .current-menu-item > a {
	color: var(--lc-terracotta);
	background: rgba(248, 243, 233, .05);
}
.main-navigation .sub-menu a:hover::before,
.main-navigation .sub-menu .current-menu-item > a::before {
	transform: scaleY(1);
}

/* --------------------------------------------------------- Mobile */
@media (max-width: 900px) {
	/* Le menu déployé défile si les sous-menus le rendent plus haut que l'écran. */
	.site-header.nav-open .main-navigation { overflow-y: auto; }

	.main-navigation .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.main-navigation .menu-item-has-children > a { flex: 1 1 auto; }
	.submenu-toggle {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		margin: 0;
		font-size: 0.9rem;
		background: rgba(248, 243, 233, .08);
	}

	/* Accordéon : replié par défaut, déplié via .is-open (JS). */
	.main-navigation .sub-menu {
		position: static;
		flex: 1 1 100%;
		min-width: 0;
		width: 100%;
		margin: 0 0 6px;
		padding: 0 0 0 16px;
		background: transparent;
		border-top: 0;
		border-left: 1px solid color-mix(in srgb, var(--lc-terracotta) 55%, transparent);
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		display: block;
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
	}
	.main-navigation .sub-menu::before { display: none; }
	/* Neutralise le centrage du panneau desktop (translate(-50%)), qui sortirait
	   le sous-menu de l'écran une fois le positionnement passé en statique. */
	.main-navigation .menu-item-has-children:hover > .sub-menu,
	.main-navigation .menu-item-has-children:focus-within > .sub-menu,
	.main-navigation .menu-item-has-children.is-open > .sub-menu {
		transform: none;
	}
	/* Le survol n'ouvre rien sur mobile : seul le clic sur le chevron agit. */
	.main-navigation .menu-item-has-children:hover > .sub-menu,
	.main-navigation .menu-item-has-children:focus-within > .sub-menu {
		max-height: 0;
	}
	.main-navigation .menu-item-has-children.is-open > .sub-menu {
		max-height: 60vh;
	}
	.main-navigation .sub-menu a {
		padding: 12px 0 12px 14px;
		white-space: normal;
		background: transparent;
	}
	/* Le filet vertical de l'accordéon tient déjà lieu de repère. */
	.main-navigation .sub-menu a::before { display: none; }
}