/*
 * Menu mobile Perinea & Sport : plein écran, habillage « crème » (maquette A retenue par Monsieur le
 * 29/09/2026, message #6 ; planche output/Perinea-maquettes-menu-plein-ecran-2026-09-29.png ; quête
 * PERINEA-LE-MENU-MOBILE-ET-TABLETTE-S-OUVRE-EN-PLEIN-ECRAN, run 540).
 *
 * Pourquoi une feuille à part : nav-perinea.css est une copie GÉNÉRÉE de la fondation partagée
 * (design/web-blocks/dt-nav.css) et ne s'édite pas ici. Ce fichier vit sous la même borne que le
 * menu repliable de GeneratePress (1024 px depuis le 18/09/2026 : le hamburger sert aussi la
 * tablette, réglé dans functions.php et déclaré à la copie nav-perinea.css) -- l'en-tête fermé, le
 * menu ouvert (`.toggled`, `html.mobile-menu-open`) et son pied. Hors de la borne, une seule règle :
 * le pied du menu y reste masqué. La version ordinateur, arbitrée le 05/09/2026, n'est pas touchée.
 *
 * GeneratePress reste seul maître de l'état du menu (`.toggled`, `html.mobile-menu-open`) ; cette
 * feuille ne fait que l'habiller, et menu-perinea.js n'ajoute que ce que la feuille ne peut pas
 * faire (fond de page inerte, Échap). Sans le script, le menu s'ouvre en plein écran et se ferme
 * par sa croix.
 *
 * « Prendre rendez-vous » reste une ligne comme les autres : le bouton essayé dans la variante B
 * a été refusé par Monsieur le 15/09/2026 (10h31), comme dans la barre d'ordinateur le 04/09.
 * Enquête : docs/enquetes/enquete-perinea-menu-plein-ecran-cycle-150.md.
 */

/* Pied du menu (adresse et téléphone, pied-menu-perinea.html) : il n'existe que dans le menu
   ouvert du téléphone et de la tablette. */
.perinea-menu-pied {
	display: none;
}

@media (max-width: 1024px) {
	/* ---- En-tête collant sur UNE ligne (18/09/2026) ---------------------------------------- */
	/* Collé en haut de l'écran, l'en-tête doit rester bas : avec l'écart de la fondation, il passait
	   sur deux lignes (145 px de haut à 390 px, mesuré le 18/09/2026). Au téléphone, le nom est
	   désormais masqué au profit de l'emblème seul (functions.php, 29/09/2026) ; l'écart resserré
	   sert la tablette, où emblème et nom sont affichés. */
	#masthead .inside-header {
		column-gap: var(--dt-space-2);
		row-gap: 0;
		align-items: center;
		padding-block: var(--dt-space-1);
	}
	#masthead .mobile-menu-control-wrapper {
		margin-left: auto;
	}

	/* ---- Bouton du menu : sans fond, trait encre (variante 1, Monsieur, 15/09/2026) ------- */
	/* GeneratePress lui pose un voile gris neutre (rgba(0, 0, 0, 0.02)), hors palette ; la couleur
	   du trait vient déjà de nav-perinea.css (--dt-nav-text). Il reste à droite, sous le pouce
	   (Monsieur, 29/09/2026, #6 ; UX-I4). */
	#masthead .menu-toggle,
	#masthead .menu-toggle:hover,
	#masthead .menu-toggle:focus,
	#masthead .menu-toggle:active {
		background-color: transparent;
	}

	/* Gouttière : la marge latérale que GeneratePress pose à l'en-tête (30 px jusqu'à 768 px, 40 px
	   au-delà, bloc tablette plus bas) -- les entrées s'alignent sur l'emblème. La hauteur d'une ligne
	   de rubrique est commune au lien et à son bouton « + » (piège du bouton flottant, plus bas). */
	#masthead {
		--perinea-gouttiere-entete: 30px;
		--perinea-menu-ligne: 60px;
	}

	/* ---- Menu ouvert : la couche la plus haute du site ------------------------------------ */
	/* Monsieur, 29/09/2026 (#6) : « le menu superpose tout » -- au-dessus du bandeau de
	   consentement (fixe, z-index 9999) et de tout élément flottant, présent ou futur, qui ne
	   revendique pas lui-même le z-index maximal (à égalité, l'élément placé après l'en-tête dans la
	   page passerait dessus ; le témoin éprouve le maximum moins un). L'en-tête porte le menu : c'est
	   lui qui monte, avec tout son contenu, et prend le fond du menu pour que l'écran entier soit le
	   menu (emblème, Instagram et croix restent en haut). La page ne défile plus dessous. */
	html.mobile-menu-open {
		overflow: hidden;
	}
	html.mobile-menu-open #masthead {
		z-index: 2147483647;
		background-color: var(--dt-bg);
	}

	/* ---- Panneau : du bas de l'en-tête au bas de l'écran ---------------------------------- */
	/* Rapporté à l'en-tête collant, son bloc conteneur : `top: 100%` est le bas de l'en-tête. Sa
	   hauteur va jusqu'au bas de l'écran : menu-perinea.js mesure le bas réel de l'en-tête à
	   l'ouverture (`--perinea-entete-bas`), qui descend sous une barre d'administration ; sans le
	   script, le `100%` de la hauteur vaut la hauteur de l'en-tête, juste pour tout visiteur
	   (aucune hauteur écrite en dur, DM-11). GeneratePress pose au panneau une marge haute (1,5em :
	   trou sous l'en-tête, dépassement sous l'écran), annulée ici (enquête § 2 Q2). */
	#masthead #site-navigation.toggled {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		margin: 0;
		flex-basis: auto;
		height: calc(100vh - 100%);
		height: calc(100dvh - var(--perinea-entete-bas, 100%));
		overflow-y: auto;
		overscroll-behavior: contain;
		display: flex;
		flex-direction: column;
		background: var(--dt-bg);
		padding-top: 12px;
		animation: perinea-menu-entree var(--motion-fast, 150ms) var(--ease-out, ease-out);
	}
	#site-navigation.toggled .inside-navigation {
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: none;
		padding: 0;
	}
	#site-navigation.toggled .main-nav {
		flex: 1 0 auto;
		order: 1;
		width: 100%;
	}

	/* ---- Entrées : capitales espacées, sans filet (maquette A) ---------------------------- */
	#site-navigation.toggled .main-nav ul li a,
	#site-navigation.toggled .main-nav ul li a:visited {
		font-family: var(--dt-font-heading);
		font-size: 14px;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.14em;
		color: var(--dt-text);
		line-height: var(--perinea-menu-ligne);
		padding-block: 0;
		padding-left: var(--perinea-gouttiere-entete);
		background: transparent;
	}
	/* Le contour de focus se trace à l'intérieur : le panneau défile et rognerait un contour extérieur
	   sur les bords d'une entrée pleine largeur (DM-17). */
	#site-navigation.toggled .main-nav ul li a:focus-visible {
		outline-offset: -2px;
	}
	#site-navigation.toggled .main-nav ul li a:hover,
	#site-navigation.toggled .main-nav ul li a:focus,
	#site-navigation.toggled .main-nav ul li a:active,
	#site-navigation.toggled .main-nav ul li.sfHover > a,
	#site-navigation.toggled .main-nav ul li[class*="current-menu-"] > a {
		color: var(--dt-text);
		background: transparent;
	}
	#site-navigation.toggled .main-nav > ul > li {
		border-bottom: 0;
	}

	/* « + » qui déplie la sous-liste sur place, « − » quand elle est ouverte. Le bouton de GeneratePress
	   flotte dans le lien : plus haut que la ligne, il poussait celui de la ligne suivante d'un rang
	   (le « + » d'« À propos » s'affichait face à « Blog », maquette du 29/09) -- il a la hauteur de
	   la ligne. Le signe suit `li.sfHover`, la classe qui ouvre réellement la sous-liste, comme la
	   flèche d'origine de GeneratePress : son `aria-expanded` repasse à « false » à chaque
	   réouverture du menu alors que la sous-liste reste ouverte (audit Itachi du 29/09, I1, mesuré). */
	#site-navigation.toggled .main-nav > ul > li > a .dropdown-menu-toggle {
		height: var(--perinea-menu-ligne);
		line-height: var(--perinea-menu-ligne);
		padding-block: 0;
		padding-right: var(--perinea-gouttiere-entete);
	}
	#site-navigation.toggled .dropdown-menu-toggle .gp-icon {
		display: none;
	}
	#site-navigation.toggled .dropdown-menu-toggle::before {
		content: "+";
		font-size: 24px;
		font-weight: 300;
		letter-spacing: 0;
	}
	#site-navigation.toggled .main-nav li.sfHover > a > .dropdown-menu-toggle::before {
		content: "\2212";
	}

	/* ---- Sous-rubriques : casse normale, un retrait, le fond du menu ---------------------- */
	#site-navigation.toggled .main-nav ul ul.sub-menu {
		background: transparent;
		width: 100%;
		min-width: 0;
		max-width: none;
		float: none;
		/* GeneratePress borde chaque sous-menu : aplati, celui d'un regroupement traçait un
		   filet au milieu de la liste (mesuré le 15/09/2026). */
		border: 0;
	}
	#site-navigation.toggled .main-nav ul ul li,
	#site-navigation.toggled .main-nav ul ul li a {
		border: 0;
	}
	#site-navigation.toggled .main-nav ul ul li a,
	#site-navigation.toggled .main-nav ul ul li a:visited {
		font-size: 14px;
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0.04em;
		line-height: 48px;
		/* Retrait de 16 px sous la rubrique, depuis la gouttière de l'en-tête. */
		padding-left: calc(var(--perinea-gouttiere-entete) + 16px);
	}

	/* ---- Regroupements aplatis ------------------------------------------------------------ */
	/* Une entrée de deuxième niveau qui a des enfants est un regroupement (« Périnée »,
	   « L'équipe ») : son lien doublait une page déjà listée dessous et coûtait un toucher.
	   Menu ouvert, son libellé disparaît et ses entrées montent d'un niveau. Règle de
	   STRUCTURE, pas d'identifiant : elle suit le menu si on le réorganise. */
	#site-navigation.toggled .main-nav ul ul > li.menu-item-has-children > a {
		display: none;
	}
	#site-navigation.toggled .main-nav ul ul > li.menu-item-has-children > ul.sub-menu {
		display: block !important;
		position: static;
		left: auto;
		opacity: 1;
		visibility: visible;
		height: auto;
		overflow: visible;
		background: transparent;
		/* GeneratePress rend inerte tout sous-menu fermé (`.main-navigation ul ul { pointer-events: none }`)
		   et ne rend le clic qu'au sous-menu qu'il ouvre lui-même. Montré ici sans passer par lui, le
		   sous-menu aplati restait INERTE : Léa Bacri, Alvin Morand et les trois pages de « Périnée »
		   ne réagissaient pas au toucher (Monsieur, 15/09/2026 23h34 ; mesuré au servi à 390 px). */
		pointer-events: auto;
	}

	/* ---- Pied du menu : adresse et téléphone sur fond teinté (Monsieur, 29/09/2026, #6) --- */
	/* GeneratePress masque, sous la borne, tout enfant du panneau autre que la liste
	   (`.has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav)
	   { display: none }`, 1,4,0) et toute liste du menu (`.main-navigation ul { display: none }`,
	   0,1,1) : le pied s'en soustrait par des sélecteurs plus forts, sans dépendre de l'ordre des
	   feuilles (audit Itachi du 29/09, I2). */
	html.mobile-menu-open #masthead #site-navigation.toggled .perinea-menu-pied {
		display: block;
		order: 2;
		margin-top: var(--dt-space-3);
		padding: 28px var(--perinea-gouttiere-entete) 36px;
		background: var(--dt-surface-alt);
	}
	#site-navigation .perinea-menu-pied ul {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#site-navigation .perinea-menu-pied a,
	#site-navigation .perinea-menu-pied .perinea-menu-pied-texte,
	#site-navigation .perinea-menu-pied a:visited,
	#site-navigation .perinea-menu-pied a:hover,
	#site-navigation .perinea-menu-pied a:focus,
	#site-navigation .perinea-menu-pied a:active {
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 44px;
		font-family: var(--dt-font-body);
		font-size: 16px;
		line-height: 1.4;
		color: var(--dt-text);
		text-decoration: none;
		background: transparent;
	}
	#site-navigation .perinea-menu-pied a:hover span,
	#site-navigation .perinea-menu-pied a:focus-visible span {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	#site-navigation .perinea-menu-pied a:focus-visible {
		outline: 2px solid var(--dt-text);
		outline-offset: 2px;
	}
	#site-navigation .perinea-menu-pied svg {
		flex: none;
		width: 20px;
		height: 20px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

/* Tablette (769 à 1024 px) : GeneratePress y porte la marge latérale de l'en-tête à 40 px. */
@media (min-width: 769px) and (max-width: 1024px) {
	#masthead {
		--perinea-gouttiere-entete: 40px;
	}
}

@keyframes perinea-menu-entree {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	#masthead #site-navigation.toggled {
		animation: none;
	}
}