/**
 * Maison Satab — menu secondaire en mobile.
 *
 * Dès que le menu principal passe en burger (sous 1025 px), le menu secondaire
 * du header (widget UAE .hfe-nav-menu__breakpoint-none, à droite) se réduit à
 * une icône enveloppe pointant vers Contact. MySatab est masqué ici : les deux
 * liens sont repris en bas à droite du panneau plein écran, côté menu-mobile.
 * Le second bloc, plus bas, remet le logo au centre exact de l'écran.
 *
 * Le libellé n'est pas retiré du DOM (font-size: 0) : il reste annoncé par les
 * lecteurs d'écran. L'icône est un masque CSS peint en currentColor — elle suit
 * donc la couleur des liens du header (transparent, après scroll, menu ouvert),
 * transition comprise, sans une ligne de plus.
 *
 * Deux choix à connaître :
 * - le masque est posé sur le lien lui-même, pas sur un ::before : quelque part
 *   dans la feuille du header, les pseudo-éléments des liens sont mis à
 *   « opacity: 0 !important » et l'icône restait invisible. Le masque ne change
 *   rien au clic, qui porte toujours sur toute la boîte du lien ;
 * - la zone tactile est agrandie par un padding compensé par une marge
 *   négative (34 × 44 px au doigt, 20 × 20 px dans le flux) ; mask-origin et
 *   mask-clip en content-box gardent l'icône à sa taille.
 *
 * Repère de l'entrée Contact : l'attribut href. Si le lien change de page,
 * mettre à jour le sélecteur (ou poser une classe « link-contact » sur l'entrée
 * de menu, comme « link-satab » sur MySatab).
 *
 * @package Maison_Satab
 */

/* ------------------------------------------------------------------ */
/*  Réglages — tout se change ici                                      */
/*  (bascule : 1024 px, à reporter dans le @media plus bas)            */
/* ------------------------------------------------------------------ */

:root {
	--mst-ms-taille: 20px;        /* côté de l'icône enveloppe */
	--mst-ms-touche-x: 7px;       /* marge tactile horizontale */
	--mst-ms-touche-y: 12px;      /* marge tactile verticale */

	--mst-ms-enveloppe: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.25' y='5' width='19.5' height='14' rx='1.5'/%3E%3Cpath d='m2.75 6 9.25 6.75L21.25 6'/%3E%3C/svg%3E" );
}


/* ------------------------------------------------------------------ */
/*  Contact → icône enveloppe                                          */
/* ------------------------------------------------------------------ */

@media ( max-width: 1024px ) {

	/* Icône et libellé sur la même ligne médiane. */
	#HeaderSite .hfe-nav-menu__breakpoint-none ul.hfe-nav-menu {
		align-items: center;
	}

	/* Marge droite héritée du widget : sans objet ici. */
	#HeaderSite .hfe-nav-menu__breakpoint-none li.menu-item {
		margin-right: 0;
	}

	/* MySatab quitte le header : il vit en bas du panneau plein écran. */
	#HeaderSite .hfe-nav-menu__breakpoint-none li.link-satab {
		display: none;
	}

	#HeaderSite .hfe-nav-menu__breakpoint-none a.hfe-menu-item[href*="/contact"] {
		display: block;
		box-sizing: content-box;

		width: var( --mst-ms-taille );
		height: var( --mst-ms-taille );

		/* Zone tactile élargie, sans effet sur le flux. */
		padding: var( --mst-ms-touche-y ) var( --mst-ms-touche-x );
		margin: calc( var( --mst-ms-touche-y ) * -1 ) calc( var( --mst-ms-touche-x ) * -1 );

		/* Le libellé disparaît à l'écran mais reste dans le document. */
		font-size: 0;
		line-height: 0;

		background-color: currentColor;

		-webkit-mask: var( --mst-ms-enveloppe ) center / contain no-repeat content-box;
		mask: var( --mst-ms-enveloppe ) center / contain no-repeat content-box;
	}


	/* -------------------------------------------------------------- */
	/*  Logo centré                                                    */
	/* -------------------------------------------------------------- */

	/*
	 * Sous 1025 px, Elementor repasse les trois widgets du header en
	 * « flex: 0 1 auto » avec « justify-content: space-between » : le logo
	 * se décale de la moitié de l'écart entre les deux colonnes latérales.
	 * On rend les deux colonnes égales — le logo retombe au centre exact —
	 * puis on recolle leur contenu aux bords, qu'UAE centre sinon par des
	 * marges automatiques.
	 */

	#HeaderSite > .e-con-inner > .elementor-widget-navigation-menu {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Burger collé au bord gauche. */
	#HeaderSite .hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__toggle {
		margin-left: 0;
		margin-right: auto;
	}

	/* Icône enveloppe collée au bord droit. */
	#HeaderSite .hfe-nav-menu__breakpoint-none ul.hfe-nav-menu {
		margin-left: auto;
		margin-right: 0;
	}
}