/**
 * Maison Satab — menu mobile plein écran.
 *
 * Sous 1025 px, le menu principal ne passe plus par le volet déroulant d'UAE :
 * un panneau ivoire couvre l'écran, les entrées montent une à une, et le header
 * reste au-dessus (logo intact, burger transformé en croix).
 *
 * Le JS (assets/js/menu-mobile.js) ne fait que construire le panneau et poser
 * deux classes : « est-ouvert » sur le panneau, « mst-menu-ouvert » sur le
 * header. Tout le rendu se décide ici.
 *
 * Dépend de header-scroll.css pour les variables --mst-texte-*, --mst-p et
 * --mst-pc (progression des couleurs, à 1 d'emblée hors accueil).
 *
 * @package Maison_Satab
 */

/* ------------------------------------------------------------------ */
/*  Réglages — tout se change ici                                      */
/* ------------------------------------------------------------------ */

:root {
	--mst-mm-fond: #f3f2f1;        /* fond du panneau (fond de page du site) */
	--mst-mm-encre: #111111;       /* texte des entrées */
	--mst-mm-filet: #dcd8d2;       /* traits de séparation */
	--mst-mm-gris: #6f6862;        /* mentions de bas de panneau */

	--mst-mm-police: Raleway, sans-serif;
	--mst-mm-serif: "Didot", "Bodoni MT", "Times New Roman", Georgia, serif;

	--mst-mm-taille: 14px;         /* entrées du panneau — police et taille du menu desktop */
	--mst-mm-interligne: 1.42;

	--mst-mm-sec-ecart: 4px;       /* écart vertical entre Contact et MySatab, en bas de panneau */

	--mst-mm-duree: .4s;           /* fondu du panneau */
	--mst-mm-cascade: 60ms;        /* décalage d'une entrée à la suivante */
	--mst-mm-z: 998;               /* le header passe juste au-dessus, à 999 */

	--mst-mm-header: 87px;         /* hauteur du header, réécrite par le JS */
}


/* ------------------------------------------------------------------ */
/*  Le panneau                                                         */
/* ------------------------------------------------------------------ */

.mst-menu {
	position: fixed;
	inset: 0;
	z-index: var( --mst-mm-z );

	display: flex;
	flex-direction: column;
	padding: calc( var( --mst-mm-header ) + 26px ) 22px 34px;

	background: var( --mst-mm-fond );
	color: var( --mst-mm-encre );
	font-family: var( --mst-mm-police );

	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;

	opacity: 0;
	visibility: hidden;
	transition: opacity var( --mst-mm-duree ) ease, visibility var( --mst-mm-duree );
}

.mst-menu.est-ouvert {
	opacity: 1;
	visibility: visible;
}

/* Au-dessus du point de bascule, le panneau n'existe pas. */
@media ( min-width: 1025px ) {

	.mst-menu {
		display: none;
	}
}

/* Blocage du défilement de la page pendant l'ouverture. */
html.mst-menu-verrou,
html.mst-menu-verrou body {
	overflow: hidden;
}


/* ------------------------------------------------------------------ */
/*  Entrées principales                                                */
/* ------------------------------------------------------------------ */

.mst-menu__liens {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mst-menu__liens > li + li {
	margin-top: 4px;
}

.mst-menu__liens a,
.mst-menu__secondaire a {
	display: inline-block;
	position: relative;

	/* Toutes les entrées du panneau sont dans la police du menu desktop :
	   Raleway 14px. La serif ne sert plus qu'au bas de panneau, en veille. */
	font-family: var( --mst-mm-police );
	font-size: var( --mst-mm-taille );
	font-weight: 400;
	line-height: var( --mst-mm-interligne );
	letter-spacing: 0;
	color: var( --mst-mm-encre );
	text-decoration: none;

	opacity: 0;
	transform: translateY( 12px );
	transition:
		opacity .5s ease,
		transform .5s cubic-bezier( .22, 1, .36, 1 );
	transition-delay: calc( var( --mst-i, 0 ) * var( --mst-mm-cascade ) );
}

.mst-menu.est-ouvert .mst-menu__liens a,
.mst-menu.est-ouvert .mst-menu__secondaire a {
	opacity: 1;
	transform: none;
}

/* Page courante : soulignée, jamais mise en gras (même règle que le menu
   de pied de page). */
.mst-menu__liens a.est-courant::after,
.mst-menu__secondaire a.est-courant::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: .12em;
	width: 1.4em;
	height: 1px;
	background: currentColor;
}

/* Sous-niveau éventuel : plus petit, en Raleway, décalé. */
.mst-menu__sous {
	list-style: none;
	margin: 6px 0 14px;
	padding: 0 0 0 2px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mst-menu__sous a {
	font-family: var( --mst-mm-police );
	font-size: 14px;
	line-height: 1.3;
	color: var( --mst-mm-gris );
}


/* ------------------------------------------------------------------ */
/*  Menu secondaire, en bas à droite du panneau                        */
/* ------------------------------------------------------------------ */

/* Contact et MySatab quittent le header dès le passage en burger : ils sont
   repris ici, en bas du panneau, en colonne et calés à gauche. Ils n'ont
   aucun style propre : ils partagent les règles des entrées principales, plus
   haut — même police, même taille, même cascade, même soulignement de la page
   courante. */
.mst-menu__secondaire {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --mst-mm-sec-ecart );

	margin-top: auto;
	padding-top: 30px;
}


.mst-menu__pied {
	margin-top: auto;
	padding-top: 30px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mst-menu__signature {
	font-family: var( --mst-mm-serif );
	font-size: 13px;
	color: var( --mst-mm-gris );
}

.mst-menu__lieu {
	font-family: var( --mst-mm-police );
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --mst-mm-gris );
}


/* ------------------------------------------------------------------ */
/*  Header en mode mobile                                              */
/* ------------------------------------------------------------------ */

@media ( max-width: 1024px ) {

	/* Le header doit rester au-dessus du panneau : il porte le logo et la
	   croix de fermeture. */
	#HeaderSite {
		z-index: 999;
	}

	/* Le thème enferme le header dans #masthead, en position: relative et
	   z-index: 99 : ce conteneur crée un contexte d'empilement, et le
	   z-index du header ne peut donc pas dépasser celui du panneau tant
	   qu'on ne relève pas #masthead lui-même — que Header Footer
	   Elementor pose en .ehf-header #masthead, d'où la spécificité ici. */
	body.ehf-header #masthead {
		z-index: 999;
	}

	/* Le volet déroulant d'UAE ne sert plus : c'est notre panneau qui prend
	   le relais. */
	#HeaderSite .hfe-nav-menu__breakpoint-tablet nav.hfe-dropdown {
		display: none !important;
	}

	/* ---- Le burger ---- */

	#HeaderSite .hfe-nav-menu__toggle {
		padding: 8px 0;
	}

	#HeaderSite .hfe-nav-menu-icon {
		position: relative;
		display: block;
		width: 22px;
		height: 13px;
		color: color-mix( in srgb, var( --mst-texte-bas ) calc( var( --mst-pc ) * 100% ), var( --mst-texte-haut ) );
		transition: color .18s linear;
	}

	#HeaderSite .hfe-nav-menu-icon svg {
		display: none;
	}

	#HeaderSite .hfe-nav-menu-icon::before,
	#HeaderSite .hfe-nav-menu-icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 22px;
		height: 1px;
		background: currentColor;
		transition: transform .34s cubic-bezier( .22, 1, .36, 1 );
	}

	#HeaderSite .hfe-nav-menu-icon::before { top: 0; }
	#HeaderSite .hfe-nav-menu-icon::after  { top: 12px; }

	/* ---- Header pendant l'ouverture ---- */

	/* Le fond du panneau passe derrière le header : on le prolonge pour
	   qu'il n'y ait aucune couture. */
	#HeaderSite.mst-menu-ouvert {
		background-color: var( --mst-mm-fond ) !important;
		box-shadow: none;
	}

	#HeaderSite.mst-menu-ouvert .hfe-menu-item,
	#HeaderSite.mst-menu-ouvert .hfe-nav-menu-icon {
		color: var( --mst-texte-bas );
	}

	#HeaderSite.mst-menu-ouvert.mst-logo-pret .hfe-site-logo-container::before {
		background-color: var( --mst-logo-bas );
	}

	/* Le burger devient croix. */
	#HeaderSite.mst-menu-ouvert .hfe-nav-menu-icon::before {
		transform: translateY( 6px ) rotate( 45deg );
	}

	#HeaderSite.mst-menu-ouvert .hfe-nav-menu-icon::after {
		transform: translateY( -6px ) rotate( -45deg );
	}
}


/* ------------------------------------------------------------------ */
/*  Accessibilité                                                      */
/* ------------------------------------------------------------------ */

.mst-menu a:focus-visible,
#HeaderSite .hfe-nav-menu__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media ( prefers-reduced-motion: reduce ) {

	.mst-menu,
	.mst-menu__liens a,
	.mst-menu__secondaire a,
	#HeaderSite .hfe-nav-menu-icon::before,
	#HeaderSite .hfe-nav-menu-icon::after {
		transition-duration: .01ms;
		transition-delay: 0s;
	}
}