/* Menu du site sous l'en-tête, comme sur phpBB.com (11/11/2026) : pages du site et du forum système, posé par
   l'événement overall_header_navbar_before juste après l'en-tête de prosilver, dont il prolonge le bloc (coins du
   bas repris par le menu). La barre de phpBB, en dessous, reste native. Liens sobres, page en cours marquée par un
   fond et un trait clair, « Demander un forum » en bouton ; couleurs de l'en-tête, en clair et en mode nuit. */
.headerbar:has(+ .phpbbhost-site-menu) {
	margin-bottom: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.phpbbhost-site-menu {
	/* Au-dessus de la barre de phpBB : le menu ☰ s'ouvre par-dessus. */
	position: relative;
	z-index: 5;
	margin: 0 0 4px;
	padding: 4px 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0 0 7px 7px;
	background-color: #0a6aa8;
	background-image: linear-gradient(to bottom, #0b74b8 0%, #0a64a0 100%);
	font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica, sans-serif;
}

.phpbbhost-site-menu ul.phpbbhost-site-menu-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 0;
	/* Sans marge intérieure : forum_fn.js compare la hauteur de la liste à celle d'un lien pour repérer un retour à la
	   ligne et ranger les liens dans le menu ☰. */
	padding: 0;
	list-style: none;
}

/* Liste de liens de prosilver (ul.linklist > li : flottant, interligne 2.2em) ramenée à la ligne du menu. */
.phpbbhost-site-menu ul.phpbbhost-site-menu-list > li {
	flex: 0 0 auto;
	float: none;
	margin: 0;
	padding: 0;
	font-size: 1em;
	line-height: normal;
}

/* Menu ☰ ajouté par forum_fn.js quand les liens ne tiennent plus (téléphone) : en tête du menu, icône blanche.
   site-menu.js (écrit après forum_fn.js) le place aussi en tête de la liste (ordre de tabulation) ; order: -1 garde
   l'affichage sans lui. */
.phpbbhost-site-menu ul.phpbbhost-site-menu-list > li.responsive-menu {
	order: -1;
	position: relative;
}

.phpbbhost-site-menu ul.phpbbhost-site-menu-list > li.responsive-menu.hidden {
	display: none;
}

.phpbbhost-site-menu ul.phpbbhost-site-menu-list > li.hidden {
	display: none;
}

.phpbbhost-site-menu ul.phpbbhost-site-menu-list > li.phpbbhost-site-menu-end {
	margin-left: auto;
}

.phpbbhost-site-menu-list > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	position: relative;
	padding: 7px 12px;
	border-radius: 5px;
	color: #ffffff;
	font-size: 1.2em;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-decoration: none;
}

.phpbbhost-site-menu-list > li > a:hover,
.phpbbhost-site-menu-list > li > a:focus-visible {
	background-color: rgba(0, 0, 0, 0.18);
	color: #ffffff;
	text-decoration: none;
}

.phpbbhost-site-menu-list > li > a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -2px;
}

/* Page en cours : fond assombri (texte blanc au-dessus de 4,5:1) et trait sous le libellé. */
.phpbbhost-site-menu-list > li > a[aria-current="page"] {
	background-color: rgba(0, 0, 0, 0.25);
}

.phpbbhost-site-menu-list > li > a[aria-current="page"]::after {
	position: absolute;
	right: 12px;
	bottom: 2px;
	left: 12px;
	height: 2px;
	border-radius: 2px;
	background-color: #bfe9ff;
	content: "";
}

.phpbbhost-site-menu .icon {
	font-size: 15px;
}

/* Appel à l'action : bouton blanc, texte de la couleur de l'en-tête. */
.phpbbhost-site-menu a.phpbbhost-site-menu-cta {
	padding: 6px 14px;
	background-color: #ffffff;
	color: #0a5c91;
	font-size: 1.1em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.phpbbhost-site-menu a.phpbbhost-site-menu-cta:hover,
.phpbbhost-site-menu a.phpbbhost-site-menu-cta:focus-visible {
	background-color: #e6f4fc;
	color: #08476f;
}

/* Focus du bouton : contour foncé dans le bouton clair (le contour blanc des liens ne s'y voyait pas). */
.phpbbhost-site-menu a.phpbbhost-site-menu-cta:focus-visible {
	outline: 2px solid #08476f;
	outline-offset: -4px;
}

/* Bouton sur sa propre page (/request) : la règle de la page en cours (fond assombri) le rendait illisible ; il garde
   le fond clair de son survol (texte #08476f sur #e6f4fc : 8,7:1). */
.phpbbhost-site-menu a.phpbbhost-site-menu-cta[aria-current="page"] {
	background-color: #e6f4fc;
	color: #08476f;
}

.phpbbhost-site-menu a.phpbbhost-site-menu-cta[aria-current="page"]::after {
	display: none;
}

html[data-theme="dark"] .phpbbhost-site-menu {
	border-top-color: rgba(255, 255, 255, 0.12);
	background-color: #073f5c;
	background-image: linear-gradient(to bottom, #08486a 0%, #063a55 100%);
}

html[data-theme="dark"] .phpbbhost-site-menu a.phpbbhost-site-menu-cta {
	background-color: #d9eefa;
	color: #063a55;
}

/* Mode nuit, bouton sur sa propre page : fond blanc de son survol (texte #042b40 : 14,7:1). */
html[data-theme="dark"] .phpbbhost-site-menu a.phpbbhost-site-menu-cta[aria-current="page"],
html[data-theme="dark"] .phpbbhost-site-menu a.phpbbhost-site-menu-cta:hover,
html[data-theme="dark"] .phpbbhost-site-menu a.phpbbhost-site-menu-cta:focus-visible {
	background-color: #ffffff;
	color: #042b40;
}

html[data-theme="dark"] .phpbbhost-site-menu a.phpbbhost-site-menu-cta:focus-visible {
	outline-color: #042b40;
}

/* Liens rangés dans le menu ☰ : présentation des menus déroulants de prosilver ; page en cours en gras. */
.phpbbhost-site-menu .responsive-menu-link {
	display: flex;
	align-items: center;
	padding: 6px 10px;
	color: #ffffff;
	font-size: 1.3em;
}

.phpbbhost-site-menu .responsive-menu-link:hover {
	color: #ffffff;
}

.phpbbhost-site-menu .dropdown-contents a[aria-current="page"] {
	font-weight: bold;
}

@media (max-width: 700px) {
	/* prosilver étire l'en-tête et la barre jusqu'aux bords de l'écran (marges de -5px, sans coins, responsive.css) :
	   le menu fait de même, sinon il paraît plus étroit, avec une bande blanche de chaque côté. */
	.phpbbhost-site-menu {
		margin: 0 -5px;
		padding: 3px 4px;
		border-radius: 0;
	}

	.phpbbhost-site-menu-list > li > a {
		padding: 6px 9px;
		font-size: 1.1em;
	}
}