/**
 * Style "pia" — étape 11 : menu mobile.
 * Maquette « portable-header.png » : en haut, le logo à gauche et un hamburger à droite ; rien d'autre.
 * Le hamburger ouvre un panneau qui regroupe ce qui est, sur ordinateur, dans la barre du haut et sous la photo :
 *   1. le menu du forum (Règlement, Contexte…), 2. les outils du compte (PCA/PCM, bascule clair/sombre, messages,
 *      notifications, pseudo, connexion/inscription, menu rapide).
 * 100 % CSS : une case à cocher (#pia-menu-toggle) + un label ; aucun script. Fermé, le panneau reste dans la page
 * (invisible, non cliquable) pour que le JS de phpBB qui mesure la barre n'y voie pas une largeur nulle.
 * Au-delà de 782 px, rien de tout cela : le panneau est transparent (display: contents) et le bouton caché.
 */

.pia-menu-panel {
	display: contents;
}
.pia-menu-check,
.pia-burger {
	display: none;
}

@media (max-width: 782px) {
	/* --- Bouton ------------------------------------------------------- */
	.pia-menu-check {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 27;
		width: 4rem;
		height: var(--pia-topbar-h);
		margin: 0;
		opacity: 0;
		cursor: pointer;
	}
	.pia-burger {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 26;
		width: 4rem;
		height: var(--pia-topbar-h);
		color: var(--pia-hero-text);
	}
	.pia-burger__lines,
	.pia-burger__lines::before,
	.pia-burger__lines::after {
		display: block;
		width: 1.6rem;
		height: 2px;
		background: currentColor;
		transition: transform 0.2s ease, background-color 0.2s ease;
	}
	.pia-burger__lines {
		position: relative;
	}
	.pia-burger__lines::before,
	.pia-burger__lines::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.pia-burger__lines::before {
		top: -7px;
	}
	.pia-burger__lines::after {
		top: 7px;
	}
	.pia-menu-check:focus-visible + .pia-burger {
		outline: 2px solid var(--pia-hero-text);
		outline-offset: -6px;
	}
	/* ouvert : croix */
	.pia-hero:has(#pia-menu-toggle:checked) .pia-burger__lines {
		background: transparent;
	}
	.pia-hero:has(#pia-menu-toggle:checked) .pia-burger__lines::before {
		top: 0;
		transform: rotate(45deg);
	}
	.pia-hero:has(#pia-menu-toggle:checked) .pia-burger__lines::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* --- Panneau ------------------------------------------------------ */
	.pia-hero > .pia-header {
		padding-right: 4.5rem;
	}
	.pia-menu-panel {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: var(--pia-topbar-h);
		left: 0;
		right: 0;
		z-index: 25;
		max-height: calc(100vh - var(--pia-topbar-h));
		max-height: calc(100dvh - var(--pia-topbar-h));
		overflow-y: auto;
		background: var(--pia-bg-footer);
		color: var(--pia-text);
		border-bottom: 2px solid var(--pia-accent);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.15s ease, visibility 0s linear 0.15s;
	}
	.pia-hero:has(#pia-menu-toggle:checked) .pia-menu-panel {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transition: opacity 0.15s ease;
	}

	/* 1. le menu du forum, en liste verticale (filet rouge à gauche) */
	.pia-menu-panel .linksmenus {
		order: 1;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		padding: 0.6rem 0;
		background: transparent;
	}
	.pia-menu-panel .linksmenus a.menu,
	.pia-menu-panel .linksmenus a.menu + a.menu {
		padding: 0.55rem 1.2rem;
		border-left: 3px solid transparent;
		border-top: 0;
		font-size: 0.85rem;
	}
	.pia-menu-panel .linksmenus a.menu:hover,
	.pia-menu-panel .linksmenus a.menu:focus-visible {
		border-left-color: var(--pia-accent);
		color: var(--pia-accent-text);
	}

	/* Icônes du graphiste devant chaque lien (consigne : « sur téléphone, il faudra mettre des icônes »).
	   Noires, inversées en thème sombre comme les icônes des forums. Un lien sans classe menu--… n'a pas d'icône. */
	.pia-menu-panel .linksmenus a.menu {
		display: flex;
		align-items: center;
		gap: 0.8rem;
	}
	.pia-menu-panel .linksmenus a.menu[class*="menu--"]::before {
		content: "";
		flex: none;
		width: 22px;
		height: 24px;
		background: center / contain no-repeat;
		filter: invert(var(--pia-icon-invert));
	}
	.pia-menu-panel .linksmenus a.menu.menu--reglement::before { background-image: url(images/forums/reglementetinformations.png); }
	.pia-menu-panel .linksmenus a.menu.menu--contexte::before { background-image: url(images/forums/manhathan.png); }
	.pia-menu-panel .linksmenus a.menu.menu--groupes::before { background-image: url(images/forums/orgadesseances.png); }
	.pia-menu-panel .linksmenus a.menu.menu--second-cercle::before { background-image: url(images/forums/secondcercle.png); }
	.pia-menu-panel .linksmenus a.menu.menu--dungeon::before { background-image: url(images/forums/donjon.png); }
	.pia-menu-panel .linksmenus a.menu.menu--iby::before { background-image: url(images/forums/contratbdsm.png); }
	.pia-menu-panel .linksmenus a.menu.menu--whisper::before { background-image: url(images/forums/flood.png); }
	.pia-menu-panel .linksmenus a.menu.menu--lobby::before { background-image: url(images/forums/salon.png); }
	.pia-menu-panel .linksmenus a.menu.menu--preliens::before { background-image: url(images/forums/rpetliens.png); }
	.pia-menu-panel .linksmenus a.menu.menu--registres::before { background-image: url(images/forums/formulaireinscription.png); }

	/* 2. les outils du compte */
	.pia-menu-panel #navbar-header {
		order: 2;
		align-self: stretch;
		position: static;
		padding: 0;
		border-top: 1px solid var(--pia-bars);
		color: var(--pia-text);
	}
	.pia-menu-panel #navbar-header .inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		gap: 0;
		padding: 0.6rem 0.6rem;
	}
	/* les liens de la barre passent en couleur du texte (ils étaient blancs, posés sur la photo) */
	.pia-menu-panel #navbar-header .inner > ul > li > a,
	.pia-menu-panel #navbar-header .header-profile > a {
		color: var(--pia-text);
		padding: 0.7em 0.8em;
	}
	.pia-menu-panel #navbar-header .inner > ul > li {
		order: 3;
	}
	/* connexion / inscription : boutons pleine largeur */
	.pia-menu-panel #navbar-header .inner > ul:last-child > li:has(.pia-nav-btn) {
		flex: 1 1 100%;
		padding: 0.3rem 0.6rem;
	}
	.pia-menu-panel #navbar-header a.pia-nav-btn {
		display: block;
		text-align: center;
		color: var(--pia-text);
		border-color: var(--pia-text);
	}
	.pia-menu-panel #navbar-header a.pia-nav-btn--primary {
		color: var(--pia-btn-text);
		border-color: var(--pia-accent);
	}
	.pia-menu-panel #navbar-header .header-profile > a.header-avatar:hover,
	.pia-menu-panel #navbar-header .header-profile > a.header-avatar:focus-visible {
		background: var(--pia-accent);
		color: var(--pia-on-accent);
	}
	.pia-menu-panel #navbar-header .pia-theme-toggle {
		color: var(--pia-text);
		border-color: var(--pia-text);
	}

	/* menu rapide et menu du compte : listes toujours dépliées (pas de menu déroulant dans un menu) */
	.pia-menu-panel #navbar-header #quick-links,
	.pia-menu-panel #navbar-header #username_logged_in {
		flex: 1 1 100%;
		order: 9;
	}
	.pia-menu-panel #navbar-header #username_logged_in {
		order: 8;
	}
	.pia-menu-panel #navbar-header #quick-links > a.dropdown-trigger {
		display: none;
	}
	.pia-menu-panel #navbar-header #quick-links.hidden {
		display: none;
	}
	.pia-menu-panel #navbar-header #quick-links .dropdown,
	.pia-menu-panel #navbar-header .header-profile .dropdown {
		display: block;
		position: static;
		margin: 0;
		min-width: 0;
		width: auto;
	}
	/* les autres menus déroulants (notifications) s'ouvrent dans le panneau, à la suite, et non par-dessus */
	.pia-menu-panel #navbar-header .dropdown {
		position: static;
		width: auto;
		margin: 0;
	}
	.pia-menu-panel #navbar-header .dropdown .dropdown-contents {
		position: static;
		min-width: 0;
		max-width: none;
		border: 0;
		box-shadow: none;
		background: transparent;
	}
	.pia-menu-panel #navbar-header .dropdown-extended .dropdown-contents {
		border-top: 1px solid var(--pia-bars);
	}
	.pia-menu-panel #navbar-header #quick-links .dropdown-contents a,
	.pia-menu-panel #navbar-header .header-profile .dropdown-contents a {
		display: block;
		padding: 0.55rem 0.8rem;
		font-size: 0.85rem;
	}
	.pia-menu-panel #navbar-header #quick-links .dropdown-contents li,
	.pia-menu-panel #navbar-header .header-profile .dropdown-contents li {
		border: 0;
	}
	.pia-menu-panel #navbar-header #quick-links .dropdown-contents li.separator {
		border-top: 1px solid var(--pia-bars);
	}
}