/* =====================================================================
   MEPHISTO-SHOP — NOUVEAU CSS DE LA REFONTE (démarré le 05/10/2026)
   Fichier indépendant de l'ancien CSS (stylev7.css / styleXav.css) :
   toutes les classes sont préfixées (mh- = header) pour ne rien perturber.
   ===================================================================== */

:root {
	--mh-vert: #2D5947;
	--mh-vert-fonce: #224537;
	--mh-rouge: #EB423F;
	--mh-texte: #222222;
	--mh-texte-doux: #5f5f5f;
	--mh-fond-doux: #f6f5f2;
	--mh-bordure: #e6e3dd;
	--mh-blanc: #ffffff;
	--mh-ombre: 0 6px 24px rgba(0, 0, 0, .08);
	--mh-rayon: 6px;
	--mh-largeur: 1440px;
	--mh-transition: .2s ease;
	--mh-police: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base du header ---------- */
.mh,
.mh * { box-sizing: border-box; }

/* Tout le header colle en haut, décalé de la hauteur du bandeau vert :
   au défilement, le bandeau disparaît et seule la barre principale reste visible */
.mh {
	font-family: var(--mh-police);
	color: var(--mh-texte);
	position: -webkit-sticky;
	position: sticky;
	top: calc(-1 * var(--mh-hauteur-bandeau));
	z-index: 1030;
	margin-bottom: 24px; /* espace avant le contenu (l'ancien header se terminait par un <hr>) */
	--mh-hauteur-bandeau: 36px;
}

.mh a { color: inherit; text-decoration: none; }
.mh a:hover { text-decoration: none; }
.mh ul { list-style: none; margin: 0; padding: 0; }
.mh button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mh img { display: block; max-width: 100%; height: auto; }
.mh :focus-visible { outline: 2px solid var(--mh-vert); outline-offset: 2px; }

.mh .mh-conteneur {
	width: 100%;
	max-width: var(--mh-largeur);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Bandeau d'information (vert) ---------- */
.mh .mh-bandeau {
	background: var(--mh-vert);
	color: var(--mh-blanc);
	font-size: 13px;
	letter-spacing: .02em;
}

.mh .mh-bandeau-ligne {
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--mh-hauteur-bandeau);
	white-space: nowrap;
	overflow: hidden;
}

.mh .mh-bandeau a { color: var(--mh-blanc); }
.mh .mh-bandeau a:hover { color: var(--mh-blanc); opacity: .85; }
.mh .mh-bandeau .fa { margin-right: 6px; }

.mh .mh-bandeau-promo {
	font-weight: 700;
	text-transform: uppercase;
	background: var(--mh-rouge);
	padding: 3px 10px;
	border-radius: 3px;
	white-space: nowrap;
}

.mh .mh-bandeau-droite {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 18px;
}

.mh .mh-bandeau-tel { font-weight: 500; white-space: nowrap; }
.mh .mh-bandeau-deconnexion { white-space: nowrap; opacity: .85; }
.mh .mh-bandeau-deconnexion:hover { opacity: 1; text-decoration: underline; }

.mh .mh-langues { display: inline-flex; gap: 2px; }
.mh .mh-langues a {
	padding: 2px 6px;
	border-radius: 3px;
	font-weight: 500;
	opacity: .75;
}
.mh .mh-langues a.mh-actif { opacity: 1; background: rgba(255, 255, 255, .18); }

/* ---------- Barre principale (collante) ---------- */
.mh .mh-barre {
	position: relative; /* référence des panneaux Femme / Homme */
	background: var(--mh-blanc);
	border-bottom: 1px solid var(--mh-bordure);
	transition: box-shadow var(--mh-transition);
}

.mh .mh-barre.mh-defile { box-shadow: var(--mh-ombre); }

.mh .mh-barre-ligne {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 84px;
}

/* Logo + signature */
.mh .mh-logo { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.mh .mh-logo img { width: 215px; }
.mh .mh-logo .mh-signature { width: 190px; opacity: .9; }

/* Navigation */
.mh .mh-nav { flex: 1 1 auto; align-self: stretch; }
.mh .mh-nav > ul { display: flex; justify-content: center; height: 100%; gap: 4px; }
.mh .mh-nav > ul > li { display: flex; align-items: stretch; }

.mh .mh-nav-lien {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--mh-texte);
	position: relative;
	white-space: nowrap;
}

.mh .mh-nav-lien::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 3px;
	background: var(--mh-vert);
	transform: scaleX(0);
	transition: transform var(--mh-transition);
}

.mh .mh-nav-lien:hover,
.mh .mh-nav-lien.mh-actif,
.mh .mh-a-panneau.mh-ouvert > .mh-nav-lien { color: var(--mh-vert); }

.mh .mh-nav-lien:hover::after,
.mh .mh-nav-lien.mh-actif::after,
.mh .mh-a-panneau.mh-ouvert > .mh-nav-lien::after { transform: scaleX(1); }

.mh .mh-nav-lien .fa { font-size: 15px; transition: transform var(--mh-transition); }
.mh .mh-a-panneau.mh-ouvert > .mh-nav-lien .fa { transform: rotate(180deg); }

.mh .mh-nav-promo { color: var(--mh-rouge); }
.mh .mh-nav-promo:hover { color: var(--mh-rouge); }
.mh .mh-nav-promo::after { background: var(--mh-rouge); }

/* Panneaux Femme / Homme */
.mh .mh-panneau {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--mh-blanc);
	border-top: 1px solid var(--mh-bordure);
	box-shadow: 0 18px 30px rgba(0, 0, 0, .10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--mh-transition), transform var(--mh-transition), visibility 0s linear .2s;
}

.mh .mh-a-panneau.mh-ouvert .mh-panneau {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--mh-transition), transform var(--mh-transition), visibility 0s;
}

.mh .mh-panneau-grille {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 48px;
	padding-top: 32px;
	padding-bottom: 36px;
}

.mh .mh-panneau-titre {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--mh-texte-doux);
}

.mh .mh-panneau-colonnes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px 32px;
}

.mh .mh-panneau-lien {
	display: block;
	padding: 9px 0;
	font-size: 15px !important;   /* l'ancien CSS impose .menuLink { 16px; 700 !important } */
	font-weight: 400 !important;
	color: var(--mh-texte);
	border-bottom: 1px solid transparent;
	transition: color var(--mh-transition), padding-left var(--mh-transition);
}

.mh .mh-panneau-lien:hover { color: var(--mh-vert); padding-left: 6px; }

.mh .mh-panneau-tout {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--mh-blanc) !important;
	background: var(--mh-vert);
	border-radius: var(--mh-rayon);
	transition: background var(--mh-transition);
}

.mh .mh-panneau-tout:hover { background: var(--mh-vert-fonce); }

.mh .mh-panneau-visuel {
	position: relative;
	display: block;
	border-radius: var(--mh-rayon);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--mh-fond-doux);
}

.mh .mh-panneau-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mh .mh-panneau-visuel:hover img { transform: scale(1.04); }

.mh .mh-panneau-visuel span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 16px 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--mh-blanc);
	background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
}

/* Actions : recherche, compte, favoris, réservations, panier */
.mh .mh-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.mh .mh-recherche {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 8px 0 0;
}

.mh .mh-recherche .fa {
	position: absolute;
	left: 14px;
	color: var(--mh-texte-doux);
	font-size: 14px;
	pointer-events: none;
}

.mh .mh-recherche input {
	width: 200px;
	height: 40px;
	padding: 0 16px 0 38px;
	font-family: var(--mh-police);
	font-size: 14px;
	color: var(--mh-texte);
	background: var(--mh-fond-doux);
	border: 1px solid transparent;
	border-radius: 999px;
	outline: none;
	transition: border-color var(--mh-transition), background var(--mh-transition), width var(--mh-transition);
	-webkit-appearance: none;
	appearance: none;
}

.mh .mh-recherche input:focus { background: var(--mh-blanc); border-color: var(--mh-vert); width: 240px; }

.mh .mh-action {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--mh-texte);
	border-radius: var(--mh-rayon);
	transition: color var(--mh-transition), background var(--mh-transition);
}

.mh .mh-action:hover { color: var(--mh-vert); background: var(--mh-fond-doux); }
.mh .mh-action .fa { font-size: 21px; line-height: 1; }

/* Libellés lus par les lecteurs d'écran, masqués à l'écran (icônes + bulle d'aide "title") */
.mh .mh-action-texte {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mh .mh-pastille {
	position: absolute;
	top: 1px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	color: var(--mh-blanc);
	background: var(--mh-rouge);
	border-radius: 999px;
}

/* Recherche mobile (affichée sous la barre en dessous de 1200 px) */
.mh .mh-recherche-mobile { display: none; }

/* Bouton menu (mobile / tablette) */
.mh .mh-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px !important;
}

.mh .mh-burger span { display: block; height: 2px; background: var(--mh-texte); border-radius: 2px; }

/* ---------- Tiroir mobile ---------- */
.mh .mh-voile {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .25s ease;
	z-index: 1040;
}

.mh .mh-voile.mh-ouvert { opacity: 1; }

.mh .mh-tiroir {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(360px, 88vw);
	display: flex;
	flex-direction: column;
	background: var(--mh-blanc);
	transform: translateX(-100%);
	transition: transform .25s ease;
	z-index: 1045;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mh .mh-tiroir.mh-ouvert { transform: none; box-shadow: 8px 0 30px rgba(0, 0, 0, .2); }

html.mh-bloque, html.mh-bloque body { overflow: hidden; }

.mh .mh-tiroir-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--mh-bordure);
}

.mh .mh-tiroir-tete img { width: 170px; }
.mh .mh-tiroir-fermer { width: 40px; height: 40px; font-size: 22px !important; border-radius: 50%; }
.mh .mh-tiroir-fermer:hover,
.mh .mh-tiroir-fermer:focus-visible { outline: none; background: var(--mh-fond-doux); color: var(--mh-vert); }

.mh .mh-tiroir-nav { display: flex; flex-direction: column; padding: 8px 0; }

.mh .mh-tiroir-lien {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 20px !important;
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-align: left;
	color: var(--mh-texte);
	border-bottom: 1px solid var(--mh-bordure) !important;
}

.mh .mh-tiroir-lien:hover { color: var(--mh-vert); background: var(--mh-fond-doux); }
.mh .mh-tiroir-fort { color: var(--mh-vert); font-weight: 700; }
.mh .mh-tiroir-promo { color: var(--mh-rouge); }
.mh .mh-tiroir-promo:hover { color: var(--mh-rouge); }

.mh .mh-accordeon-bouton .fa { transition: transform var(--mh-transition); font-size: 18px; }
.mh .mh-accordeon-bouton[aria-expanded="true"] { color: var(--mh-vert); background: var(--mh-fond-doux); }
.mh .mh-accordeon-bouton[aria-expanded="true"] .fa { transform: rotate(180deg); }

.mh .mh-accordeon-contenu { background: var(--mh-fond-doux); padding: 6px 0 10px; border-bottom: 1px solid var(--mh-bordure); }

.mh .mh-tiroir-sous {
	display: block;
	padding: 10px 20px 10px 34px;
	font-size: 15px !important;   /* l'ancien CSS impose .menuLink { 16px; 700 !important } */
	font-weight: 400 !important;
	color: var(--mh-texte);
}

.mh .mh-tiroir-sous:hover { color: var(--mh-vert); }

.mh .mh-tiroir-pied {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 20px 28px;
	font-size: 14px;
	background: var(--mh-fond-doux);
}

.mh .mh-tiroir-pied .fa { width: 20px; color: var(--mh-vert); }
.mh .mh-tiroir-pied .mh-langues a { color: var(--mh-texte); opacity: .6; border: 1px solid var(--mh-bordure); }
.mh .mh-tiroir-pied .mh-langues a.mh-actif { opacity: 1; background: var(--mh-vert); color: var(--mh-blanc); border-color: var(--mh-vert); }

/* ---------- Écrans moyens : actions sans libellés ---------- */
@media (max-width: 1399.98px) {
	.mh .mh-barre-ligne { gap: 18px; }
	.mh .mh-logo img { width: 200px; }
	.mh .mh-logo .mh-signature { width: 165px; }
	.mh .mh-nav-lien { padding: 0 10px; font-size: 13px; }
	.mh .mh-nav-lien::after { left: 10px; right: 10px; }
	.mh .mh-recherche input { width: 170px; }
	.mh .mh-recherche input:focus { width: 200px; }
}

/* ---------- Tablette et mobile : menu tiroir + recherche sous la barre ---------- */
@media (max-width: 1199.98px) {
	.mh .mh-burger { display: flex; }
	.mh .mh-nav { display: none; }
	.mh .mh-actions .mh-recherche { display: none; }
	.mh .mh-barre-ligne { min-height: 70px; gap: 12px; }
	.mh .mh-logo { margin-right: auto; }
	.mh .mh-recherche-mobile { display: flex; margin: 0 auto; padding: 0 24px 12px; max-width: var(--mh-largeur); }
	.mh .mh-recherche-mobile .fa { left: 38px; }
	.mh .mh-recherche-mobile input,
	.mh .mh-recherche-mobile input:focus { width: 100%; }
}

@media (max-width: 767.98px) {
	.mh .mh-conteneur { padding: 0 14px; }
	.mh { --mh-hauteur-bandeau: 32px; margin-bottom: 16px; }
	.mh .mh-bandeau { font-size: 12px; }
	.mh .mh-bandeau-ligne { gap: 10px; }
	.mh .mh-bandeau-promo { display: none; }
	.mh .mh-bandeau .mh-langues { display: none; }
	.mh .mh-bandeau-deconnexion { display: none; }
	.mh .mh-barre-ligne { min-height: 60px; gap: 6px; }
	.mh .mh-logo { flex: 1 1 auto; align-items: center; margin-right: 0; }
	.mh .mh-logo img { width: 165px; }
	.mh .mh-logo .mh-signature { display: none; }
	.mh .mh-action-favoris { display: none; }
	.mh .mh-recherche-mobile { padding: 0 14px 10px; }
	.mh .mh-recherche-mobile .fa { left: 28px; }
}

@media (max-width: 380px) {
	.mh .mh-bandeau-info { display: none; }
	.mh .mh-bandeau-droite { margin: 0 auto; }
	.mh .mh-logo img { width: 140px; }
	.mh .mh-action-compte { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mh *, .mh-tiroir, .mh-voile { transition: none !important; }
}


/* =====================================================================
   PIED DE PAGE (refonte 05/10/2026) — theme/mephisto/footer_v2.php
   Toutes les règles préfixées .mf .mf-… (même principe que le header)
   ===================================================================== */

.mf,
.mf * { box-sizing: border-box; }

.mf {
	--mf-vert: #2D5947;
	--mf-vert-nuit: #16302a;
	--mf-vert-clair: #9cc3b2;
	--mf-or: #d9b26f;
	--mf-rouge: #EB423F;
	--mf-creme: #f6f5f2;
	--mf-texte: #222222;
	--mf-texte-clair: rgba(255, 255, 255, .78);
	--mf-trait: rgba(255, 255, 255, .14);
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	color: var(--mf-texte);
	margin-top: 64px;
}

.mf a { text-decoration: none; }
.mf a:hover { text-decoration: none; }
.mf ul { list-style: none; margin: 0; padding: 0; }
.mf h2, .mf h3, .mf p { margin: 0; }
.mf img { display: block; max-width: 100%; height: auto; }
.mf :focus-visible { outline: 2px solid var(--mf-or); outline-offset: 3px; }

.mf .mf-conteneur {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Réassurance ---------- */
.mf .mf-reassurance {
	background: var(--mf-creme);
	border-top: 1px solid #e6e3dd;
	padding: 34px 0;
}

.mf .mf-reassurance-grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	gap: 24px;
	align-items: center;
}

.mf .mf-engagement {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--mf-texte);
}

.mf .mf-engagement-icone {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	font-size: 22px;
	color: var(--mf-vert);
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(45, 89, 71, .12);
	transition: transform .3s ease, background .3s ease, color .3s ease;
}

.mf .mf-engagement:hover .mf-engagement-icone {
	transform: translateY(-4px) rotate(-6deg);
	background: var(--mf-vert);
	color: #fff;
}

.mf .mf-engagement strong { display: block; font-size: 15px; font-weight: 700; color: var(--mf-texte); }
.mf .mf-engagement small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: #5f5f5f; }
.mf .mf-engagement:hover strong { color: var(--mf-vert); }

.mf .mf-avis {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px 10px 10px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
	color: var(--mf-texte);
	transition: transform .3s ease, box-shadow .3s ease;
}

.mf .mf-avis:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .10); color: var(--mf-texte); }

.mf .mf-avis-note {
	display: flex;
	align-items: baseline;
	justify-content: center;
	width: 62px;
	height: 62px;
	padding-top: 16px;
	font-size: 22px;
	font-weight: 900;
	color: #fff;
	background: var(--mf-vert);
	border-radius: 50%;
}

.mf .mf-avis-note small { font-size: 11px; font-weight: 500; opacity: .8; }
.mf .mf-avis-texte { display: flex; flex-direction: column; gap: 3px; }
.mf .mf-avis-texte small { font-size: 12px; color: #5f5f5f; }
.mf .mf-etoiles { color: var(--mf-or); font-size: 14px; letter-spacing: 2px; }

/* ---------- Bloc principal ---------- */
.mf .mf-principal {
	position: relative;
	overflow: hidden;
	padding: 72px 0 40px;
	color: var(--mf-texte-clair);
	background:
		radial-gradient(1100px 500px at 85% -10%, rgba(156, 195, 178, .22), transparent 60%),
		radial-gradient(800px 400px at -10% 110%, rgba(217, 178, 111, .12), transparent 60%),
		linear-gradient(160deg, var(--mf-vert) 0%, var(--mf-vert-nuit) 75%);
}

/* Grand MEPHISTO en filigrane */
.mf .mf-filigrane {
	position: absolute;
	left: 50%;
	bottom: -0.18em;
	transform: translateX(-50%);
	font-size: clamp(90px, 17vw, 300px);
	font-weight: 900;
	letter-spacing: .04em;
	line-height: 1;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .08);
	pointer-events: none;
	user-select: none;
}

.mf .mf-principal .mf-conteneur { position: relative; }

/* Club / newsletter */
.mf .mf-club {
	display: grid;
	grid-template-columns: 1fr minmax(0, 520px);
	gap: 40px;
	align-items: center;
	padding: 36px 40px;
	margin-bottom: 64px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--mf-trait);
	border-radius: 18px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.mf .mf-surtitre {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mf-or);
}

.mf .mf-surtitre .fa { margin-right: 6px; }
.mf .mf-club h2 { font-size: 30px; font-weight: 700; line-height: 1.2; color: #fff; margin-bottom: 8px; }
.mf .mf-club-texte p:last-child { font-size: 15px; line-height: 1.5; }

.mf .mf-club-champ {
	display: flex;
	padding: 6px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.mf .mf-club-champ input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 20px;
	font-family: inherit;
	font-size: 15px;
	color: var(--mf-texte);
	background: transparent;
	border: 0;
	outline: none;
}

.mf .mf-club-champ button {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 26px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--mf-vert);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .25s ease, gap .25s ease;
}

.mf .mf-club-champ button:hover { background: var(--mf-rouge); gap: 16px; }

.mf .mf-club-rgpd {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0 0 12px;
	font-size: 12px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--mf-texte-clair);
	cursor: pointer;
}

.mf .mf-club-rgpd input { margin-top: 2px; accent-color: var(--mf-or); padding: 0; border: 0; }

/* Colonnes */
.mf .mf-colonnes {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr 1.2fr;
	gap: 48px;
}

.mf .mf-colonne h3 {
	position: relative;
	margin-bottom: 22px;
	padding-bottom: 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}

.mf .mf-colonne h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: var(--mf-or);
}

.mf .mf-colonne li { margin-bottom: 9px; }

.mf .mf-lien {
	position: relative;
	display: inline-block;
	padding: 0;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	color: var(--mf-texte-clair);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .2s ease, transform .2s ease;
}

.mf .mf-lien::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 1px;
	background: var(--mf-or);
	transition: right .25s ease;
}

.mf .mf-lien:hover { color: #fff; transform: translateX(3px); }
.mf .mf-lien:hover::after { right: 0; }

/* Colonne marque */
.mf .mf-logo {
	display: inline-block;
	padding: 14px 18px;
	margin-bottom: 18px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
	transition: transform .3s ease;
}

.mf .mf-logo:hover { transform: rotate(-1.5deg) scale(1.02); }
.mf .mf-logo img { width: 200px; }
.mf .mf-marque > p { font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; }

.mf .mf-tel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .02em;
}

.mf .mf-tel .fa { color: var(--mf-or); font-size: 20px; }
.mf .mf-tel:hover { color: var(--mf-or); }

.mf .mf-suivre {
	margin: 22px 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}

.mf .mf-reseaux { display: flex; gap: 10px; }

.mf .mf-reseaux a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 18px;
	color: #fff;
	border: 1px solid var(--mf-trait);
	border-radius: 50%;
	transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}

.mf .mf-reseaux a:hover { background: var(--mf-or); border-color: var(--mf-or); color: var(--mf-vert-nuit); transform: translateY(-3px); }

/* Boutiques */
.mf .mf-boutique {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 0 14px;
	margin-bottom: 14px;
	font-size: 14px;
	line-height: 1.45;
	border-bottom: 1px solid var(--mf-trait);
}

.mf .mf-boutique strong { font-size: 15px; font-weight: 700; color: #fff; }
.mf .mf-boutique a { margin-top: 4px; font-weight: 500; color: var(--mf-vert-clair); }
.mf .mf-boutique a:hover { color: #fff; }
.mf .mf-boutique .fa { margin-right: 4px; }

.mf .mf-bouton-contour {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.mf .mf-bouton-contour:hover { background: #fff; color: var(--mf-vert-nuit); border-color: #fff; }

/* Adresse de retour + paiements */
.mf .mf-infos-bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--mf-trait);
}

.mf .mf-retour { display: flex; align-items: flex-start; gap: 14px; font-size: 13.5px; line-height: 1.5; }
.mf .mf-retour > .fa { margin-top: 3px; font-size: 18px; color: var(--mf-or); }
.mf .mf-retour strong { display: block; color: #fff; font-weight: 700; }
.mf .mf-retour small { display: block; font-size: 12px; opacity: .8; font-style: italic; }

.mf .mf-paiements { display: flex; align-items: center; gap: 12px; font-size: 30px; color: #fff; }
.mf .mf-paiements span { margin-right: 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mf-texte-clair); }
.mf .mf-paiements .fa { opacity: .85; transition: opacity .2s ease, transform .2s ease; }
.mf .mf-paiements .fa:hover { opacity: 1; transform: translateY(-2px); }

/* ---------- Barre du bas ---------- */
.mf .mf-bas { background: #0f221d; color: rgba(255, 255, 255, .6); font-size: 12.5px; }

.mf .mf-bas-ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
}

.mf .mf-haut {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

.mf .mf-haut .fa { transition: transform .25s ease; }
.mf .mf-haut:hover { color: var(--mf-or); }
.mf .mf-haut:hover .fa { transform: translateY(-4px); }

/* ---------- Apparition au défilement (activée par le script si les animations sont autorisées) ---------- */
.mf.mf-anime .mf-apparition {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

.mf.mf-anime .mf-apparition.mf-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1399.98px) {
	.mf .mf-reassurance-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
	.mf .mf-avis { grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 1199.98px) {
	.mf .mf-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
	.mf .mf-club { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 767.98px) {
	.mf { margin-top: 40px; }
	.mf .mf-conteneur { padding: 0 16px; }
	.mf .mf-reassurance { padding: 26px 0; }
	.mf .mf-reassurance-grille { grid-template-columns: 1fr; gap: 18px; }
	.mf .mf-engagement-icone { width: 46px; height: 46px; font-size: 19px; }
	.mf .mf-principal { padding: 44px 0 28px; }
	.mf .mf-club { padding: 26px 20px; margin-bottom: 44px; border-radius: 14px; }
	.mf .mf-club h2 { font-size: 24px; }
	.mf .mf-club-champ { flex-direction: column; border-radius: 16px; gap: 6px; }
	.mf .mf-club-champ button { justify-content: center; border-radius: 12px; }
	.mf .mf-colonnes { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
	.mf .mf-marque, .mf .mf-boutiques { grid-column: 1 / -1; }
	.mf .mf-lien { font-size: 13.5px; }
	.mf .mf-infos-bas { flex-direction: column; align-items: flex-start; margin-top: 40px; }
	.mf .mf-paiements { flex-wrap: wrap; font-size: 26px; }
	.mf .mf-paiements span { width: 100%; }
	.mf .mf-bas-ligne { flex-direction: column; justify-content: center; padding: 16px 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.mf *, .mf.mf-anime .mf-apparition { transition: none !important; transform: none !important; opacity: 1 !important; }
}


/* =====================================================================
   PAGE D'ACCUEIL (refonte 05/10/2026) — modules/accueil_v2.php
   Règles préfixées .ma .ma-…
   ===================================================================== */

.ma,
.ma * { box-sizing: border-box; }

.ma {
	--ma-vert: #2D5947;
	--ma-vert-nuit: #16302a;
	--ma-or: #d9b26f;
	--ma-rouge: #EB423F;
	--ma-creme: #f6f5f2;
	--ma-texte: #222222;
	--ma-doux: #5f5f5f;
	--ma-bordure: #e6e3dd;
	--ma-rayon: 14px;
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	color: var(--ma-texte);
	margin-top: -24px; /* la bannière touche le header (annule la marge sous le header) */
}

.ma a { text-decoration: none; }
.ma a:hover { text-decoration: none; }
.ma img { display: block; max-width: 100%; height: auto; }
.ma h1, .ma h2, .ma p { margin: 0; }
.ma :focus-visible { outline: 2px solid var(--ma-vert); outline-offset: 3px; }

.ma .ma-conteneur {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
}

.ma .ma-section { padding-top: 80px; }

/* ---------- Titres de section ---------- */
.ma .ma-entete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}

.ma .ma-surtitre {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ma-vert);
}

.ma .ma-surtitre .fa { margin-right: 4px; color: var(--ma-or); }

.ma .ma-titre {
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--ma-texte);
}

.ma .ma-lien-fleche {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ma-vert);
	white-space: nowrap;
}

.ma .ma-lien-fleche .fa-long-arrow-right { transition: transform .25s ease; }
.ma .ma-lien-fleche:hover { color: var(--ma-vert); }
.ma .ma-lien-fleche:hover .fa-long-arrow-right { transform: translateX(5px); }

/* ---------- Boutons ---------- */
.ma .ma-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 26px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, gap .25s ease;
}

.ma .ma-bouton:hover { transform: translateY(-2px); gap: 14px; }
.ma .ma-bouton-clair { background: #fff; color: var(--ma-vert-nuit); }
.ma .ma-bouton-clair:hover { background: var(--ma-or); color: var(--ma-vert-nuit); }
.ma .ma-bouton-contour { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); }
.ma .ma-bouton-contour:hover { color: var(--ma-vert-nuit); background: #fff; border-color: #fff; }
.ma .ma-bouton-plein { color: #fff; background: var(--ma-vert); }
.ma .ma-bouton-plein:hover { color: #fff; background: var(--ma-vert-nuit); }
.ma .ma-bouton-contour-vert { color: var(--ma-vert); border-color: var(--ma-vert); }
.ma .ma-bouton-contour-vert:hover { color: #fff; background: var(--ma-vert); }

/* ---------- Bannière ---------- */
.ma .ma-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 78vh, 760px);
	overflow: hidden;
	background: var(--ma-vert-nuit) url(../images/home/cat-femme-mob.jpg) center / cover no-repeat;
	isolation: isolate;
}

.ma .ma-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.ma .ma-hero-voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(14, 33, 28, .82) 0%, rgba(14, 33, 28, .45) 45%, rgba(14, 33, 28, 0) 75%),
		linear-gradient(0deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 40%);
}

.ma .ma-hero-contenu { padding-top: 60px; padding-bottom: 60px; color: #fff; }

.ma .ma-hero-pastille {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 26px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	background: var(--ma-rouge);
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(235, 66, 63, .35);
	transition: transform .25s ease;
}

.ma .ma-hero-pastille:hover { color: #fff; transform: translateY(-2px); }

.ma .ma-hero-sur {
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ma-or);
}

.ma .ma-hero-titre {
	max-width: 680px;
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -.02em;
	color: #fff;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}

.ma .ma-hero-texte {
	max-width: 520px;
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}

.ma .ma-hero-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Fiches produits de la vidéo */
.ma .ma-hero-produit {
	position: absolute;
	right: 32px;
	bottom: 32px;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 360px;
	padding: 14px;
	background: rgba(255, 255, 255, .95);
	border-radius: var(--ma-rayon);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}

.ma .ma-hero-produit.ma-actif { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease, visibility 0s; }
.ma .ma-hero-produit img { width: 110px; flex: 0 0 auto; }
.ma .ma-hero-produit-infos { display: flex; flex-direction: column; gap: 4px; color: var(--ma-texte); }
.ma .ma-hero-produit-infos strong { font-size: 16px; }
.ma .ma-hero-produit-lien { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ma-vert); }

/* ---------- Message d'accueil / compte à rebours ---------- */
.ma .ma-message { padding-top: 40px; }
.ma .ma-compteur { padding-top: 40px; }
.ma .ma-compteur-texte { padding: 20px; margin-bottom: 16px; text-align: center; background: var(--ma-creme); border-radius: var(--ma-rayon); }

/* ---------- Univers ---------- */
.ma .ma-univers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.ma .ma-univers-tuile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--ma-rayon);
	aspect-ratio: 4 / 5;
	background: var(--ma-creme);
}

.ma .ma-univers-tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.ma .ma-univers-tuile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(14, 33, 28, .75) 0%, rgba(14, 33, 28, 0) 50%);
	transition: opacity .4s ease;
}

.ma .ma-univers-tuile:hover img { transform: scale(1.06); }

.ma .ma-univers-texte {
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 26px;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	color: #fff;
}

.ma .ma-univers-texte strong { font-size: clamp(26px, 2.6vw, 36px); font-weight: 900; letter-spacing: -.01em; }

.ma .ma-univers-texte span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ma-vert-nuit);
	background: #fff;
	border-radius: 999px;
	transform: translateY(6px);
	opacity: .92;
	transition: transform .3s ease, opacity .3s ease, background .3s ease;
}

.ma .ma-univers-tuile:hover .ma-univers-texte span { transform: none; opacity: 1; background: var(--ma-or); }

/* ---------- Rangées de produits ---------- */
.ma .ma-rangee { position: relative; }

.ma .ma-rangee-piste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * 20px) / 4);
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 2px 18px;
	scrollbar-width: thin;
	scrollbar-color: var(--ma-vert) transparent;
}

.ma .ma-rangee-piste::-webkit-scrollbar { height: 4px; }
.ma .ma-rangee-piste::-webkit-scrollbar-thumb { background: var(--ma-vert); border-radius: 4px; }

.ma .ma-rangee-fleche {
	position: absolute;
	top: 38%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	font-size: 24px;
	color: var(--ma-texte);
	background: #fff;
	border: 1px solid var(--ma-bordure);
	border-radius: 50%;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.ma .ma-rangee-fleche:hover { background: var(--ma-vert); color: #fff; border-color: var(--ma-vert); }
.ma .ma-rangee-fleche:disabled { opacity: 0; pointer-events: none; }
.ma .ma-rangee-prec { left: -18px; }
.ma .ma-rangee-suiv { right: -18px; }

/* Carte produit */
.ma .ma-carte { scroll-snap-align: start; display: flex; flex-direction: column; }

.ma .ma-carte-visuel {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	padding: 18px;
	background: var(--ma-creme);
	border-radius: var(--ma-rayon);
}

.ma .ma-carte-visuel img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ma .ma-carte:hover .ma-carte-visuel img { transform: scale(1.07) rotate(-2deg); }

.ma .ma-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 5px 11px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ma-vert);
	border-radius: 999px;
}

.ma .ma-badge-promo { background: var(--ma-rouge); }
.ma .ma-badge-vert { background: var(--ma-vert); }

.ma .ma-carte-cta {
	position: absolute;
	left: 50%;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	background: var(--ma-vert-nuit);
	border-radius: 999px;
	opacity: 0;
	transform: translate(-50%, 10px);
	transition: opacity .3s ease, transform .3s ease;
}

.ma .ma-carte:hover .ma-carte-cta { opacity: 1; transform: translate(-50%, 0); }

.ma .ma-carte-infos { display: flex; flex-direction: column; gap: 3px; padding: 14px 4px 0; }
.ma .ma-carte-titre { font-size: 16px; font-weight: 700; color: var(--ma-texte); text-transform: uppercase; letter-spacing: .02em; }
.ma .ma-carte-titre:hover { color: var(--ma-vert); }
.ma .ma-carte-famille { font-size: 13px; color: var(--ma-doux); }

/* Prix (HTML produit par affichage_prix_actif_tva) */
.ma .ma-prix { margin-top: 6px; font-size: 16px; }
.ma .ma-prix .actif { font-weight: 700 !important; color: var(--ma-texte); }
.ma .ma-prix .promotion { font-weight: 700 !important; color: var(--ma-rouge) !important; }
.ma .ma-prix .ancien { font-size: 14px; color: var(--ma-doux); text-decoration: line-through; }
.ma .ma-prix .ancien s { text-decoration: none; }

/* ---------- Marques ---------- */
.ma .ma-marques { margin-top: 80px; padding: 26px 0; background: var(--ma-creme); border-top: 1px solid var(--ma-bordure); border-bottom: 1px solid var(--ma-bordure); }
.ma .ma-marques-ligne { display: flex; align-items: center; justify-content: space-around; gap: 24px; flex-wrap: wrap; }
.ma .ma-marques-ligne img { width: 170px; mix-blend-mode: multiply; filter: grayscale(1); opacity: .65; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
.ma .ma-marques-ligne a:hover img { filter: none; opacity: 1; transform: scale(1.05); }

/* ---------- Carte cadeau ---------- */
.ma .ma-cadeau {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: center;
	padding: 48px;
	overflow: hidden;
	color: rgba(255, 255, 255, .85);
	background:
		radial-gradient(600px 300px at 100% 0%, rgba(217, 178, 111, .25), transparent 60%),
		linear-gradient(135deg, var(--ma-vert) 0%, var(--ma-vert-nuit) 100%);
	border-radius: 24px;
}

.ma .ma-cadeau-visuel img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 25%;
	border-radius: 16px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
	transform: rotate(-4deg);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.ma .ma-cadeau:hover .ma-cadeau-visuel img { transform: rotate(0deg) scale(1.02); }
.ma .ma-cadeau .ma-surtitre { color: var(--ma-or); }
.ma .ma-cadeau .ma-titre { color: #fff; margin-bottom: 16px; }
.ma .ma-cadeau-texte p:not(.ma-surtitre) { font-size: 16px; line-height: 1.65; margin-bottom: 28px; }
.ma .ma-cadeau .ma-bouton-plein { background: #fff; color: var(--ma-vert-nuit); }
.ma .ma-cadeau .ma-bouton-plein:hover { background: var(--ma-or); }

/* ---------- Services ---------- */
.ma .ma-services { display: flex; flex-direction: column; gap: 64px; }

.ma .ma-service {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 64px;
	align-items: center;
}

.ma .ma-service-inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ma .ma-service-inverse .ma-service-visuel { order: 2; }

.ma .ma-service-visuel { position: relative; overflow: hidden; border-radius: 24px; }
.ma .ma-service-visuel img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.ma .ma-service:hover .ma-service-visuel img { transform: scale(1.04); }
.ma .ma-service-visuel .ma-badge { top: 20px; left: 20px; padding: 7px 14px; font-size: 12px; }

.ma .ma-service-texte .ma-titre { margin-bottom: 18px; }
.ma .ma-service-texte > p:not(.ma-surtitre) { font-size: 17px; line-height: 1.65; color: #3d3d3d; margin-bottom: 18px; }

.ma .ma-liste { list-style: none; margin: 0 0 28px; padding: 0; }
.ma .ma-liste li { position: relative; padding: 0 0 14px 34px; font-size: 15px; line-height: 1.55; color: #3d3d3d; }
.ma .ma-liste li::before {
	content: "\f00c";
	position: absolute;
	left: 0;
	top: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-family: FontAwesome;
	font-size: 11px;
	color: #fff;
	background: var(--ma-vert);
	border-radius: 50%;
}

.ma .ma-liste a, .ma .ma-details a, .ma .ma-presentation a:not(.ma-lien-fleche) { color: var(--ma-vert); text-decoration: underline; text-underline-offset: 3px; }

/* « En savoir plus » / « Lire la suite » */
.ma .ma-details { margin-bottom: 26px; }
.ma .ma-details summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ma-vert);
	cursor: pointer;
	list-style: none;
}

.ma .ma-details summary::-webkit-details-marker { display: none; }
.ma .ma-details summary::after { content: "\f107"; font-family: FontAwesome; font-size: 16px; transition: transform .25s ease; }
.ma .ma-details[open] summary::after { transform: rotate(180deg); }
.ma .ma-details p { margin-top: 14px; font-size: 15px; line-height: 1.65; color: #3d3d3d; }

/* ---------- Avis ---------- */
.ma .ma-avis .skeepers_carousel_container { min-height: 120px; }

/* ---------- Commande par téléphone ---------- */
.ma .ma-telephone {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px 28px;
	margin-top: 80px;
	padding: 28px 36px;
	background: var(--ma-creme);
	border: 1px solid var(--ma-bordure);
	border-radius: 20px;
}

.ma .ma-telephone-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	font-size: 26px;
	color: #fff;
	background: var(--ma-vert);
	border-radius: 50%;
	animation: ma-sonnerie 3s ease-in-out infinite;
}

@keyframes ma-sonnerie {
	0%, 80%, 100% { transform: rotate(0); }
	84% { transform: rotate(-12deg); }
	88% { transform: rotate(12deg); }
	92% { transform: rotate(-8deg); }
	96% { transform: rotate(6deg); }
}

.ma .ma-telephone-titre { font-size: 20px; font-weight: 700; color: var(--ma-texte); }
.ma .ma-telephone p:not(.ma-telephone-titre) { font-size: 14px; color: var(--ma-doux); }
.ma .ma-telephone-numero { margin-left: auto; font-size: 30px; font-weight: 900; letter-spacing: .02em; color: var(--ma-vert); }
.ma .ma-telephone-numero:hover { color: var(--ma-vert-nuit); }
.ma .ma-telephone-mail { font-size: 15px; font-weight: 500; color: var(--ma-texte); }
.ma .ma-telephone-mail:hover { color: var(--ma-vert); }

/* ---------- Présentation (SEO) ---------- */
.ma .ma-presentation { max-width: 920px; padding-bottom: 20px; text-align: center; }
.ma .ma-presentation h2 { margin-bottom: 16px; font-size: 26px; font-weight: 700; }
.ma .ma-presentation > p { font-size: 16px; line-height: 1.7; color: #3d3d3d; margin-bottom: 14px; }
.ma .ma-presentation .ma-details { text-align: left; }
.ma .ma-presentation .ma-details summary { display: flex; justify-content: center; }

/* ---------- Apparition au défilement ---------- */
.ma.ma-anime .ma-apparition { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.ma.ma-anime .ma-apparition.ma-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
	.ma .ma-rangee-piste { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
	.ma .ma-cadeau { gap: 36px; padding: 36px; }
	.ma .ma-service, .ma .ma-service-inverse { gap: 40px; }
}

@media (max-width: 991.98px) {
	.ma .ma-hero-produit { display: none; }
	.ma .ma-rangee-piste { grid-auto-columns: calc((100% - 20px) / 2.3); }
	.ma .ma-rangee-fleche { display: none; }
	.ma .ma-cadeau { grid-template-columns: 1fr; }
	.ma .ma-cadeau-visuel { max-width: 420px; }
	.ma .ma-service, .ma .ma-service-inverse { grid-template-columns: 1fr; gap: 28px; }
	.ma .ma-service-inverse .ma-service-visuel { order: 0; }
	.ma .ma-service-visuel img { aspect-ratio: 16 / 10; }
}

@media (max-width: 767.98px) {
	.ma { margin-top: -16px; }
	.ma .ma-conteneur { padding: 0 16px; }
	.ma .ma-section { padding-top: 56px; }
	.ma .ma-hero { min-height: 560px; align-items: flex-end; }
	.ma .ma-hero-video { display: none; } /* image plus légère sur mobile */
	.ma .ma-hero-voile { background: linear-gradient(0deg, rgba(14, 33, 28, .9) 0%, rgba(14, 33, 28, .55) 55%, rgba(14, 33, 28, .1) 100%); }
	.ma .ma-hero-contenu { padding-bottom: 36px; }
	.ma .ma-hero-texte { font-size: 16px; }
	.ma .ma-hero-boutons .ma-bouton { flex: 1 1 auto; }
	.ma .ma-entete { flex-direction: column; align-items: flex-start; gap: 10px; }
	.ma .ma-univers { grid-template-columns: 1fr; gap: 14px; }
	.ma .ma-univers-tuile { aspect-ratio: 16 / 10; }
	.ma .ma-rangee-piste { grid-auto-columns: 68%; gap: 14px; }
	.ma .ma-marques { margin-top: 56px; }
	.ma .ma-marques-ligne { justify-content: center; }
	.ma .ma-marques-ligne img { width: 120px; }
	.ma .ma-cadeau { padding: 28px 22px; border-radius: 18px; }
	.ma .ma-telephone { margin-top: 56px; padding: 24px; }
	.ma .ma-telephone-numero { margin-left: 0; font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.ma *, .ma.ma-anime .ma-apparition { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}


/* ---------- Message d'accueil (bloc ms-annonce de modules/accueil_bloc.php) accordé au nouveau design ---------- */
.ma .ms-annonce {
	padding: 36px 32px 28px;
	margin: 0;
	background: #F3F6F4;
	border: 1px solid #dfe7e2;
	border-top: 4px solid var(--ma-vert);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(45, 89, 71, .08);
}

.ma .ms-annonce-titre { font-weight: 700; margin: 0 0 26px; } /* .ma h2 { margin:0 } supprimait la marge du bloc */
.ma .ms-annonce-mention { margin: 14px 0 0; }

.ma .ms-annonce-bouton,
.ma .ms-annonce-bouton:visited {
	min-height: 50px;
	font-weight: 700;
	letter-spacing: .05em;
	border-radius: 999px;
	transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.ma .ms-annonce-bouton:hover,
.ma .ms-annonce-bouton:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(235, 66, 63, .25);
}

@media (max-width: 767.98px) {
	.ma .ms-annonce { padding: 24px 18px 20px; border-radius: 16px; }
}

/* =====================================================================
   LISTES DE PRODUITS (refonte 05/10/2026) — modules/filtre.php + modules/ajax/filtre_femme.php / filtre_homme.php
   Restyle du HTML existant SANS toucher au fonctionnement (filtres AJAX, iCheck, mémorisation des filtres).
   Portée : <div id="page" class="page-filtre"> (classe ajoutée par template.php selon ?page=).
   ===================================================================== */

.page-filtre {
	--ml-vert: #2D5947;
	--ml-vert-nuit: #16302a;
	--ml-rouge: #EB423F;
	--ml-creme: #f6f5f2;
	--ml-texte: #222222;
	--ml-doux: #5f5f5f;
	--ml-bordure: #e6e3dd;
	--ml-rayon: 14px;
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.page-filtre > .container,
.page-filtre .container { max-width: 1440px; }

/* ---------- Fil d'Ariane ---------- */
.page-filtre .breadcrumb {
	margin: 0 0 18px;
	padding: 0;
	background: none;
	font-size: 13px;
	color: var(--ml-doux);
}

.page-filtre .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: #b5b1a8; }
.page-filtre .breadcrumb a { color: var(--ml-doux); }
.page-filtre .breadcrumb a:hover { color: var(--ml-vert); }

/* ---------- Titre + introduction ---------- */
.page-filtre h1 {
	margin: 0 0 12px;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--ml-texte);
}

.page-filtre h1 + p {
	max-width: 980px;
	margin-bottom: 26px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ml-doux);
}

/* ---------- Bloc pointures (en haut) ---------- */
.page-filtre > .container > .row > .filtre,
.page-filtre .row > .filtre {
	width: 100%;
	margin: 0 15px 8px;
	padding: 20px 24px 14px;
	background: var(--ml-creme);
	border: 1px solid var(--ml-bordure);
	border-radius: 18px;
}

.page-filtre .filtre h4,
.page-filtre .div_filtre h4 {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ml-vert);
}

/* Pointures en étiquettes */
.page-filtre .row > .filtre label {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0 0 8px;
	padding: 7px 12px;
	font-size: 13px;
	background: #fff;
	border: 1px solid var(--ml-bordure);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.page-filtre .row > .filtre label:hover { border-color: var(--ml-vert); }
.page-filtre .row > .filtre label:has(.checked) { background: var(--ml-vert); border-color: var(--ml-vert); color: #fff; }
.page-filtre .row > .filtre label:has(.checked) small { color: rgba(255, 255, 255, .8); }
.page-filtre .element_filtre,
.page-filtre .element_filtre1 { width: auto; margin: 0; }
.page-filtre .element_filtre small { color: var(--ml-doux); }

/* Cases iCheck (thème rouge) recolorées dans le vert de la marque */
.page-filtre .icheckbox_minimal-red,
.page-filtre .iradio_minimal-red { filter: hue-rotate(150deg) saturate(.55) brightness(.8); }

/* ---------- Colonne des filtres ---------- */
.page-filtre .div_filtre {
	padding: 22px 20px;
	background: #fff;
	border: 1px solid var(--ml-bordure);
	border-radius: 18px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .05);
}

.page-filtre .div_filtre h4 { margin-top: 18px; }
.page-filtre .div_filtre h4:first-of-type,
.page-filtre #filtre_responsive > h4:first-of-type { margin-top: 0; }

.page-filtre .div_filtre .filtre {
	margin: 0 0 6px;
	padding: 0 0 14px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ml-bordure);
	border-radius: 0;
}

.page-filtre .div_filtre .filtre > div { padding: 4px 0; }
.page-filtre .div_filtre label { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ml-texte); cursor: pointer; }
.page-filtre .div_filtre label:hover { color: var(--ml-vert); }
.page-filtre .div_filtre a { color: var(--ml-texte); font-weight: 500; }
.page-filtre .div_filtre a:hover { color: var(--ml-vert); }

/* Bouton d'effacement des filtres et curseur de prix (Bootstrap) */
.page-filtre #deleteFilter .btn,
.page-filtre .div_filtre .btn {
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.page-filtre .div_filtre input[type=range] { width: 100%; accent-color: var(--ml-vert); }

/* ---------- Résultats ---------- */
#loadingProduct > .col-12.mb-3 { font-size: 14px; color: var(--ml-doux); }
#loadingProduct > .col-12.mb-3 b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 8px;
	margin-right: 4px;
	font-size: 13px;
	color: #fff;
	background: var(--ml-vert);
	border-radius: 999px;
}

/* Carte produit (div.image_block renvoyé par l'AJAX) */
.page-filtre .image_block { padding: 0 10px 28px !important; }

.page-filtre .image_block > div {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.page-filtre .image_block > div > div:first-child {
	position: relative;
	overflow: hidden;
	padding: 16px;
	background: var(--ml-creme);
	border-radius: var(--ml-rayon);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-filtre .image_block img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.page-filtre .image_block:hover img { transform: scale(1.07) rotate(-2deg); }

/* Pastilles NOUVEAU / promotion */
.page-filtre .image_block .rubanRightNew,
.page-filtre .image_block .rubanRight {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 2;
	padding: 5px 11px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	border-radius: 999px;
}

.page-filtre .image_block .rubanRightNew { background: var(--ml-vert); }
.page-filtre .image_block .rubanRight { background: var(--ml-rouge); }
.page-filtre .image_block .rubanRightNew:not(.hide) ~ .rubanRight:not(.hide) { top: 42px; }

/* Textes de la carte */
.page-filtre .image_block .text-center { text-align: left !important; }

.page-filtre .image_block > div > .text-center:first-of-type,
.page-filtre .image_block > div > div:nth-child(2) { margin-top: 14px; }

.page-filtre .image_block b {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ml-texte);
}

.page-filtre .image_block a:hover b { color: var(--ml-vert); }
.page-filtre .image_block > div > div:nth-child(3) .text-center { font-size: 13px; color: var(--ml-doux); text-transform: capitalize; }

.page-filtre .image_block .pricing { margin-top: 6px; font-size: 16px; }
.page-filtre .pricing .actif { font-weight: 700 !important; color: var(--ml-texte); }
.page-filtre .pricing .promotion { font-weight: 700 !important; color: var(--ml-rouge) !important; }
.page-filtre .pricing span.ancien { font-size: 14px; color: var(--ml-doux); text-decoration: line-through; }

/* ---------- Pagination ---------- */
.page-filtre .pagination { justify-content: center; gap: 6px; flex-wrap: wrap; }

.page-filtre .page-link {
	min-width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	font-weight: 500;
	color: var(--ml-texte);
	background: #fff;
	border: 1px solid var(--ml-bordure) !important;
	border-radius: 999px !important;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.page-filtre .page-link:hover { color: #fff; background: var(--ml-vert); border-color: var(--ml-vert) !important; }
.page-filtre .page-item.active .page-link { color: #fff; background: var(--ml-vert); border-color: var(--ml-vert) !important; }
.page-filtre .page-item.disabled .page-link { color: #b5b1a8; background: transparent; }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
	/* bouton d'ouverture des filtres : pastille verte au lieu de l'image */
	#toggle_filtre {
		top: auto !important;
		bottom: 22px;
		left: 50% !important;
		transform: translateX(-50%);
		padding: 0;
		border-radius: 999px;
		box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
		overflow: hidden;
	}

	#toggle_filtre img { display: none; }

	#toggle_filtre::before {
		content: "\f0b0  Filtrer";
		display: block;
		padding: 13px 24px;
		font-family: FontAwesome, "Roboto", Arial, sans-serif;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: #fff;
		background: var(--ml-vert, #2D5947);
	}

	html[lang="en"] #toggle_filtre::before { content: "\f0b0  Filter"; }

	.page-filtre .div_filtre { border-radius: 0; box-shadow: none; border: 0; }
	#toggleFiltre { border-radius: 999px; background: #2D5947 !important; padding: 6px 14px !important; font-weight: 700; }
}

@media (max-width: 767.98px) {
	.page-filtre .row > .filtre { margin: 0 15px 8px; padding: 16px 14px 8px; }
	.page-filtre .row > .filtre label { gap: 6px; margin-bottom: 6px; padding: 5px 9px; font-size: 11.5px; white-space: nowrap; }
	.page-filtre .row > .filtre .col-6 { padding-left: 4px; padding-right: 4px; }
	.page-filtre .image_block { padding: 0 6px 22px !important; }
	.page-filtre .image_block b { font-size: 14px; }
}