/**
 * Maison Satab — sous-menu déroulant du header en desktop.
 *
 * Style « épuré » validé le 17/09/2026 : panneau blanc qui prolonge le header,
 * sans ombre ni séparateurs, liens Raleway 400 / 14px (référence des menus).
 * Au survol, au focus et sur la page courante : texte or et filet or qui se
 * dessine sous le libellé.
 *
 * Ne s'applique qu'au-dessus de 1025 px : en dessous, le menu passe en burger
 * et le panneau plein écran (menu-mobile) prend le relais.
 *
 * Deux choix à connaître :
 * - le filet est un ::after : les pseudo-éléments des liens du header sont mis
 *   à « opacity: 0 !important » ailleurs, d'où le !important ici ;
 * - le panneau est décalé de 18 px sous le libellé parent ; un ::before
 *   invisible comble ce vide pour que le survol ne se perde pas en chemin.
 *
 * @package Maison_Satab
 */

@media (min-width: 1025px) {

	/* Réglages */
	#HeaderSite {
		--mst-sm-fond: #fff;
		--mst-sm-bordure: #e6e3df;
		--mst-sm-texte: #111111;
		--mst-sm-accent: #AE8957;
		--mst-sm-ecart-haut: 18px;
		--mst-sm-decalage: -24px;
		--mst-sm-retrait: 24px;
		--mst-sm-padding-v: 14px;
		--mst-sm-duree: .3s;
	}

	/* Panneau */
	#HeaderSite .hfe-nav-menu .sub-menu {
		left: var( --mst-sm-decalage ) !important;
		min-width: 0 !important;
		width: max-content !important;
		margin-top: var( --mst-sm-ecart-haut ) !important;
		padding: var( --mst-sm-padding-v ) 0 !important;
		background: var( --mst-sm-fond ) !important;
		border: 0 !important;
		border-bottom: 1px solid var( --mst-sm-bordure ) !important;
		box-shadow: none !important;
		transform: translateY( 6px );
		transition: opacity var( --mst-sm-duree ) ease, visibility var( --mst-sm-duree ) ease, transform var( --mst-sm-duree ) ease !important;
	}

	#HeaderSite .hfe-nav-menu .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc( -1 * var( --mst-sm-ecart-haut ) );
		height: var( --mst-sm-ecart-haut );
	}

	/* Ouverture : survol ou navigation clavier */
	#HeaderSite .hfe-nav-menu .menu-item-has-children:hover > .sub-menu,
	#HeaderSite .hfe-nav-menu .menu-item-has-children:focus-within > .sub-menu {
		visibility: visible !important;
		opacity: 1 !important;
		transform: translateY( 0 );
	}

	/* Entrées */
	#HeaderSite .hfe-nav-menu .sub-menu li.menu-item {
		background: transparent !important;
		border: 0 !important;
	}

	#HeaderSite .hfe-nav-menu .sub-menu a.hfe-sub-menu-item {
		position: relative;
		padding: 7px 40px 7px var( --mst-sm-retrait ) !important;
		font-family: Raleway, sans-serif !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		line-height: 1.42 !important;
		letter-spacing: .01em;
		color: var( --mst-sm-texte ) !important;
		background: transparent !important;
		transition: color var( --mst-sm-duree ) ease !important;
	}

	/* Filet or sous le libellé */
	#HeaderSite .hfe-nav-menu .sub-menu a.hfe-sub-menu-item::after {
		content: "" !important;
		position: absolute !important;
		left: var( --mst-sm-retrait );
		bottom: 5px;
		width: 0;
		height: 1px;
		background: var( --mst-sm-accent );
		opacity: 1 !important;
		transition: width var( --mst-sm-duree ) ease !important;
	}

	/* Survol, focus, page courante */
	#HeaderSite .hfe-nav-menu .sub-menu a.hfe-sub-menu-item:hover,
	#HeaderSite .hfe-nav-menu .sub-menu a.hfe-sub-menu-item:focus-visible,
	#HeaderSite .hfe-nav-menu .sub-menu .current-menu-item > a.hfe-sub-menu-item {
		color: var( --mst-sm-accent ) !important;
	}

	#HeaderSite .hfe-nav-menu .sub-menu a.hfe-sub-menu-item:hover::after,
	#HeaderSite .hfe-nav-menu .sub-menu a.hfe-sub-menu-item:focus-visible::after,
	#HeaderSite .hfe-nav-menu .sub-menu .current-menu-item > a.hfe-sub-menu-item::after {
		width: calc( 100% - var( --mst-sm-retrait ) - 40px );
	}
}