@layer organisms {
/**
 * Organisms globaux : header & footer du site.
 * (Couche assignée à l'import via layer(organisms) dans main.css.)
 */

/* ================================================================== *
 * EN-TÊTE
 * ================================================================== */
.site-header {
	/* --mm-header-h défini dans tokens.css (partagé avec le hero / en-tête de page). */
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background-color: var(--mm-olive-900);
	color: var(--mm-neutral-50);
	overflow-x: clip; /* garde-fou : aucun débordement horizontal ne peut fuir */
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: var(--mm-header-h);
	padding-inline: clamp(var(--mm-space-md), 4.4vw, 5.3125rem); /* → 85px */
}

/* Logo centré (indépendant des deux groupes latéraux). */
.site-header__logo {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
}
.site-header__logo img {
	max-height: calc(var(--mm-header-h) - var(--mm-space-md));
	width: auto;
}
.site-header__logo a { color: var(--mm-neutral-50); text-decoration: none; font-family: var(--mm-font-heading); text-transform: uppercase; }

/* Lien-logo (en-tête + pied) : retour au survol + focus clavier visible (RGAA 10.7). */
.site-header__logo a,
.site-footer__logo a {
	display: inline-block;
	border-radius: var(--mm-radius-sm);
	transition: opacity var(--mm-transition);
}
.site-header__logo a:hover,
.site-footer__logo a:hover { opacity: 0.75; }
.site-header__logo a:focus-visible,
.site-footer__logo a:focus-visible {
	opacity: 1;
	outline: var(--mm-focus-width) solid var(--mm-color-focus);
	outline-offset: 4px;
}

/* Conteneur des menus (occupe la largeur, groupes aux extrémités). */
.site-header__nav {
	display: flex;
	flex: 1;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--mm-space-page);
}

/* Liens simples de gauche. */
.site-header__left { display: flex; align-items: center; }
.site-menu {
	display: flex;
	align-items: center;
	gap: clamp(var(--mm-space-md), 2.2vw, var(--mm-space-page)); /* ≤56px, se resserre */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Groupe de droite : déroulants + CTA + réseaux.
   Gap resserré (CTA ↔ réseaux) ; le CTA garde ses distances avec les déroulants
   via sa marge de gauche. */
.site-header__right {
	display: flex;
	align-items: stretch;
	gap: var(--mm-space-sm); /* 16px : réseaux proches du bouton */
}

/* Liens & déclencheurs : DM Sans, capitales, clair, hover lime. */
.site-menu a,
.site-dropdown__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--mm-space-micro);
	font-family: var(--mm-font-body);
	font-size: var(--mm-fs-p);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mm-neutral-50);
	background: none;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--mm-transition);
}
.site-menu a:hover,
.site-dropdown__toggle:hover,
.site-dropdown__toggle:focus-visible {
	color: var(--mm-color-primary);
}

/* Soulignement animé au survol (en plus du changement de couleur). */
.site-menu a,
.site-dropdown__label { position: relative; }
.site-menu a::after,
.site-dropdown__label::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -0.35em;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mm-transition);
}
.site-menu a:hover::after,
.site-menu a:focus-visible::after,
.site-dropdown__toggle:hover .site-dropdown__label::after,
.site-dropdown__toggle:focus-visible .site-dropdown__label::after,
.site-dropdown:hover .site-dropdown__label::after {
	transform: scaleX(1);
}

/* ---- Menus déroulants ---- */
.site-header__dropdowns { display: flex; align-items: center; } /* centre le <ul> en hauteur */
.site-dropdowns {
	display: flex;
	align-items: center;
	gap: clamp(var(--mm-space-md), 2.2vw, var(--mm-space-page));
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-dropdown { position: relative; display: flex; align-items: center; }

.site-dropdown__arrow {
	display: inline-flex;
	transition: transform var(--mm-transition);
}
.site-dropdown__toggle[aria-expanded="true"] .site-dropdown__arrow,
.site-dropdown:hover .site-dropdown__arrow { transform: rotate(180deg); }

/* Panneau déroulant. */
.site-dropdown__panel {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 20;
	min-width: 14rem;
	display: flex;
	flex-direction: column;
	gap: var(--mm-space-2xs);
	margin: 0;
	padding: var(--mm-space-sm);
	list-style: none;
	background-color: var(--mm-feuille-950);
	border-radius: var(--mm-radius-xxs);
	box-shadow: var(--mm-shadow-1);
	/* Masqué par défaut (souris ET clavier). */
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--mm-space-2xs));
	transition: opacity var(--mm-transition), transform var(--mm-transition), visibility var(--mm-transition);
}
.site-dropdown:hover .site-dropdown__panel,
.site-dropdown:focus-within .site-dropdown__panel,
.site-dropdown.is-open .site-dropdown__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.site-dropdown__panel a {
	display: block;
	padding-block: var(--mm-space-2xs);
	font-family: var(--mm-font-body);
	font-size: var(--mm-fs-p);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mm-printemps-50);
	transition: color var(--mm-transition);
}
.site-dropdown__panel a:hover,
.site-dropdown__panel a:focus-visible { color: var(--mm-color-primary); }

/* ---- Bouton « Nous contacter » (bloc lime pleine hauteur) ---- */
.site-header__cta {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	position: relative;
	z-index: 1;
	isolation: isolate;
	margin-inline-start: clamp(var(--mm-space-md), 2.2vw, var(--mm-space-page)); /* ≤56px */
	padding-inline: var(--mm-space-l);
	background-color: transparent; /* le fond est porté par ::before (pour l'animer seul) */
	color: var(--mm-color-on-primary);
	font-family: var(--mm-font-body);
	font-weight: 800;
	font-size: var(--mm-fs-lg);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
/* Fond lime : c'est LUI qui grandit (en hauteur uniquement) au survol,
   le texte ne subit donc aucune déformation. */
.site-header__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--mm-color-primary);
	transform-origin: center;
	transition: transform var(--mm-transition), background-color var(--mm-transition);
}
.site-header__cta:hover,
.site-header__cta:focus-visible { z-index: 2; }
.site-header__cta:hover::before,
.site-header__cta:focus-visible::before { transform: scaleY(1.28); }

/* ---- Réseaux sociaux ---- */
.site-header__socials {
	display: flex;
	align-items: center;
	gap: var(--mm-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header__socials a {
	display: inline-flex;
	color: var(--mm-neutral-50);
	transition: color var(--mm-transition);
}
.site-header__socials a:hover,
.site-header__socials a:focus-visible { color: var(--mm-color-primary); }

/* ---- Burger (mobile) ---- */
.site-header__burger { display: none; }

/* Fond figé quand le menu off-canvas est ouvert. */
body.mm-nav-open { overflow: hidden; }

/* ================================================================== *
 * COMPACTION PROGRESSIVE de la nav horizontale (≈1024px → 1600px)
 * On réduit police / gouttières / logo, et on masque les réseaux, pour
 * garder la nav horizontale le plus bas possible avant le burger.
 * ================================================================== */
@media (min-width: 64rem) and (max-width: 100rem) {
	.site-header__inner { padding-inline: clamp(var(--mm-space-md), 2.4vw, 5.3125rem); }
	.site-header__nav { gap: clamp(var(--mm-space-md), 2vw, var(--mm-space-page)); }
	.site-menu,
	.site-dropdowns { gap: clamp(var(--mm-space-sm), 1.6vw, var(--mm-space-bloc)); }
	.site-menu a,
	.site-dropdown__toggle { font-size: clamp(0.8125rem, 0.9vw, 1rem); letter-spacing: 0.01em; }
	.site-header__cta {
		font-size: var(--mm-fs-p);
		padding-inline: var(--mm-space-m);
		margin-inline-start: clamp(var(--mm-space-sm), 1.8vw, var(--mm-space-page));
	}
	.site-header__logo img { max-height: calc(var(--mm-header-h) - var(--mm-space-lg)); }
}

/* Sous ~1360px : on retire les réseaux (secondaires, présents aussi au pied). */
@media (min-width: 64rem) and (max-width: 85rem) {
	.site-header__socials { display: none; }
}

/* Sous ~1200px : libellés sur 2 lignes proprement (centrés, interligne serré)
   → groupes plus étroits, la nav tient jusqu'à ~1024px sans chevaucher le logo.
   Au-dessus (1200–1600), les libellés restent sur une seule ligne. */
@media (min-width: 64rem) and (max-width: 75rem) {
	.site-menu a,
	.site-dropdown__label {
		white-space: normal;
		text-align: center;
		line-height: 1.1;
		max-width: 9ch;
	}
	.site-menu a,
	.site-dropdown__toggle { align-items: center; }
	/* Soulignement animé retiré sur 2 lignes (le survol garde le changement de couleur). */
	.site-menu a::after,
	.site-dropdown__label::after { content: none; }
}

/* ================================================================== *
 * RESPONSIVE : menu en panneau déroulant via le burger (≤ 1024px).
 * En dessous d'iPad Pro portrait, la nav complète ne tient plus proprement
 * → burger (tablette / téléphone) : aucun chevauchement ni débordement.
 * ================================================================== */
@media (max-width: 63.99rem) {
	.site-header__inner { justify-content: space-between; }

	.site-header__burger {
		display: inline-flex;
		flex-direction: column;      /* barres au-dessus, « MENU » dessous */
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		width: auto;
		min-height: 2.75rem;
		padding: var(--mm-space-2xs);
		background: none; border: 0; cursor: pointer;
		color: var(--mm-neutral-50);
		align-self: center;          /* centré dans la hauteur de l'en-tête */
		margin-inline-start: auto;   /* poussé en haut à droite */
		order: 0;
	}
	.site-header__burger-bar,
	.site-header__burger-bar::before,
	.site-header__burger-bar::after {
		content: "";
		display: block;
		width: 1.5rem; height: 2px;
		background: currentColor;
		position: relative;
	}
	.site-header__burger-bar { margin-block: 6px; } /* réserve la place des barres ± */
	.site-header__burger-bar::before { position: absolute; inset-block-start: -6px; }
	.site-header__burger-bar::after  { position: absolute; inset-block-start: 6px; }
	.site-header__burger-bar,
	.site-header__burger-bar::before,
	.site-header__burger-bar::after {
		transition: transform var(--mm-transition), inset-block-start var(--mm-transition), background-color var(--mm-transition);
	}
	/* Ouvert : les trois barres deviennent une croix. */
	.site-header__burger[aria-expanded="true"] .site-header__burger-bar { background-color: transparent; }
	.site-header__burger[aria-expanded="true"] .site-header__burger-bar::before { inset-block-start: 0; transform: rotate(45deg); }
	.site-header__burger[aria-expanded="true"] .site-header__burger-bar::after  { inset-block-start: 0; transform: rotate(-45deg); }
	.site-header__burger-label {
		font-family: var(--mm-font-body);
		font-size: 0.625rem; /* 10px */
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		line-height: 1;
	}

	/* --- Panneau off-canvas : glisse depuis la droite, pleine hauteur --- */
	.site-header__nav {
		position: fixed;
		inset-block: var(--mm-header-h) 0;   /* sous l'en-tête → bas de l'écran */
		inset-inline: 0;                     /* PLEINE LARGEUR (plein écran sous la barre) */
		z-index: 90;                         /* sous l'en-tête (z:100) → la croix reste cliquable */
		width: auto;
		flex-direction: column;
		align-items: stretch;
		gap: var(--mm-space-md);
		padding: var(--mm-space-lg) var(--mm-space-md);
		padding-block-end: 6rem;             /* marge basse : bandeau cookies / bouton accessibilité */
		background-color: var(--mm-olive-900);
		overflow-y: auto;
		overscroll-behavior: contain;
		/* Animation d'ouverture (slide depuis la droite). */
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 320ms ease, visibility 320ms ease;
	}
	.site-header__nav.is-open { transform: translateX(0); visibility: visible; }

	.site-menu,
	.site-dropdowns { flex-direction: column; align-items: stretch; gap: var(--mm-space-sm); }

	/* Groupe de droite : occupe l'espace restant → CTA + réseaux poussés en bas. */
	.site-header__right {
		flex: 1;
		flex-direction: column;
		align-items: stretch;
		gap: var(--mm-space-md);
	}

	/* Déroulants : en flux, FERMÉS par défaut, ouverts au clic (.is-open). */
	.site-dropdown { flex-direction: column; align-items: stretch; }
	.site-dropdown__toggle { justify-content: space-between; padding-block: var(--mm-space-2xs); }
	.site-dropdown__panel {
		position: static;
		transform: none;
		box-shadow: none;
		background: transparent;
		min-width: 0;
		padding: 0 0 0 var(--mm-space-md);
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		transition: max-height var(--mm-transition), visibility var(--mm-transition);
	}
	.site-dropdown.is-open .site-dropdown__panel { max-height: 40rem; visibility: visible; }

	/* CTA + réseaux ferrés en bas du panneau. */
	.site-header__cta {
		margin-block-start: auto;   /* pousse le bloc du bas… vers le bas */
		align-self: flex-start;
		margin-inline-start: 0;
		padding-block: var(--mm-space-sm);
	}
}

/* Téléphone : gouttières resserrées + logo un peu plus compact. */
@media (max-width: 30rem) {
	.site-header__inner { padding-inline: var(--mm-space-md); }
	.site-header__logo img { max-height: calc(var(--mm-header-h) - var(--mm-space-lg)); }
}

/* ================================================================== *
 * PIED DE PAGE
 * ================================================================== */
.site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--mm-space-big-hero); /* 96px */
	background-color: var(--mm-printemps-600);
	color: var(--mm-feuille-900);
}

/* Image de fond superposée au vert (40 %). */
.site-footer__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.4;
}
.site-footer__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Conteneur aligné sur la largeur du site. */
.site-footer__inner {
	width: min(100% - (var(--mm-container-pad) * 2), var(--mm-container-max));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--mm-space-2xl); /* 80px */
}

/* Rangée principale : logo + groupes. */
.site-footer__top {
	display: flex;
	gap: clamp(var(--mm-space-xl), 8vw, 10.4rem); /* → ~167px */
	align-items: flex-start;
}
@media (max-width: 64rem) {
	.site-footer__top { flex-direction: column; gap: var(--mm-space-xl); }
}

.site-footer__logo { flex-shrink: 0; max-width: 285px; }
.site-footer__logo img { width: 100%; height: auto; }

.site-footer__groups {
	display: flex;
	flex: 1;
	gap: var(--mm-space-xl);
	flex-wrap: wrap;
}
.site-footer__address { flex: 0 1 17.75rem; } /* ~284px */
.site-footer__menus {
	display: flex;
	flex: 1;
	justify-content: space-between;
	gap: var(--mm-space-xl);
	flex-wrap: wrap;
}

/* Tablette (769–1024px) : footer bien calé en grille 4 colonnes alignées
   (adresse un peu plus large), au lieu du wrap inégal. Placé APRÈS les
   règles de base pour gagner la cascade. */
@media (min-width: 48.0625rem) and (max-width: 64rem) {
	.site-footer__logo { margin-inline: auto; } /* logo centré sur tablette */
	.site-footer__groups {
		display: grid;
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: var(--mm-space-xl) var(--mm-space-lg);
		align-items: start;
	}
	.site-footer__menus { display: contents; } /* remonte les 3 colonnes dans la grille */
	.site-footer__address { flex: initial; }
	.site-footer-col { min-width: 0; }
}

/* Titres de colonnes (adresse + colonnes de menus). */
.site-footer-col__title,
.site-footer__address .site-footer-col__title {
	margin: 0 0 var(--mm-space-list);
	font-family: var(--mm-font-heading);
	font-weight: 600;
	font-size: var(--mm-fs-h6); /* 20px */
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--mm-feuille-900);
	text-decoration: none;
}

/* Adresse + e-mail. */
.site-footer__address-details {
	display: flex;
	flex-direction: column;
	gap: var(--mm-space-s);
	font-family: var(--mm-font-body);
	font-size: var(--mm-fs-p);
	line-height: 1.2;
	color: var(--mm-feuille-950);
}
.site-footer__address-details p { margin: 0; }
.site-footer__email { color: var(--mm-feuille-950); text-decoration: none; }
.site-footer__email:hover,
.site-footer__email:focus-visible { text-decoration: underline; }

/* Colonnes de menus. */
.site-footer-col-menu,
.site-footer-col__links { margin: 0; padding: 0; list-style: none; }
.site-footer-col { min-width: 10rem; }
.site-footer-col__links {
	display: flex;
	flex-direction: column;
	gap: var(--mm-space-s);
	font-family: var(--mm-font-body);
	font-size: var(--mm-fs-p);
	letter-spacing: 0.03em;
}
.site-footer-col__links a {
	color: var(--mm-feuille-900);
	text-decoration: none;
	transition: color var(--mm-transition);
}
.site-footer-col__links a:hover,
.site-footer-col__links a:focus-visible { color: var(--mm-feuille-950); text-decoration: underline; }

/* Bandeau légal (ligne centrée).
   Couleur alignée sur le reste du footer : neutral-600 (#707070) ne donnait
   que 2,56:1 sur le fond lime printemps-600 → échec RGAA. feuille-900 = 5,69:1. */
.site-footer__legal {
	text-align: center;
	color: var(--mm-feuille-900);
	font-size: var(--mm-fs-p);
	line-height: 1.4;
}
.site-footer__legal-menu,
.site-footer__legal-menu li { display: inline; margin: 0; padding: 0; list-style: none; }
.site-footer__legal-menu li:not(:first-child)::before { content: " – "; }
.site-footer__legal a { color: inherit; text-decoration: underline; }
.site-footer__copy::before { content: " "; }

/* --- Footer mobile : tout centré + colonnes de menus masquées --- */
@media (max-width: 48rem) {
	.site-footer { text-align: center; }
	.site-footer__top { align-items: center; }
	.site-footer__logo { margin-inline: auto; max-width: 220px; }
	/* Colonnes empilées les unes sous les autres (plus côte à côte). */
	.site-footer__groups { flex-direction: column; align-items: center; gap: var(--mm-space-xl); }
	.site-footer__menus { flex-direction: column; align-items: center; gap: var(--mm-space-xl); }
	.site-footer__address { flex: 0 1 auto; }
	.site-footer__address-details { align-items: center; }
	.site-footer-col { min-width: 0; }
	.site-footer-col__links { align-items: center; }
	/* On retire les colonnes « Nos produits » et « Maison Marion »
	   (les deux menus footer-col-1/2) ; la colonne Contact reste. */
	.site-footer__menus .site-footer-col-menu { display: none; }
}

/* --- Widget accessibilité (plugin eclolink-a11y) : icône seule en mobile ---
   Le libellé « Accessibilité » est masqué VISUELLEMENT (toujours lu par les
   lecteurs d'écran : il porte le nom accessible du bouton), pastille ronde.
   !important : la CSS du plugin est hors @layer. */
@media (max-width: 48rem) {
	.ecl-a11y-trigger {
		width: 48px;
		height: 48px !important;
		padding: 0 !important;
		gap: 0 !important;
		justify-content: center;
	}
	.ecl-a11y-trigger__label {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
}
.site-footer__credit::before { content: " · "; }
}