/* Mise en page commune aux apps Drooft (navbar, messages, pied de page,
 * titres) : règles reprises à l'identique de game_hosting/static/css/style-desktop.css
 * le 2026-10-03. game_hosting garde encore sa propre copie dans sa feuille ;
 * les deux doivent rester alignées jusqu'à ce qu'il charge celle-ci.
 * Même enveloppe @media que style-desktop.css : la balise <link media=...> et le
 * @media interne doivent rester synchronisés (seuil 1100/1101 px). */
@media screen and (min-width: 1101px) {

	/* Navbar */
	:root {
		--color--anthracite: #303030;/*  Nav-bg */
		--color--anthracite-v2: #1d1d1d;/*  Nav-bg */
		--color--anthracite-v3: #d4d4d4;/*  Nav-bg */
		--color--beige: #FEFCE7;/* Text in nav */
		--color--beige-dark: #eaddc0;/* Text in nav */
		--color-body: #384959; /* Body background and modal */
		--color--marron: #e66700; /* Some link hover */
		--color--marron--v2: rgb(150, 67, 0); /* Some link hover */
		--color--lightgrey: #d1d1d1;/* Table color */
		--color--white: #f5f4f1; /* modal content */
	}


	#onlyMobile{
		display: none;
		height: 0px;
		width: 0px;
	}

	.float-right-onlyMobile{
		float:right;
		text-decoration: none; 
		height: 0px;
		width: 0px;
	}






	
	#menu {
		background: var(--color--anthracite);
		height: 85px;
		border-radius: 0px;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9;
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
	}

	#menu ul, #menu li {
		padding:0;
		padding-top: 2px;
		list-style: none;
	}

	#menu ul {
		width: 100%;
		max-width: 1140px;
		margin: 0 auto;
		text-align: left;
	}

	#menu #exceptMobile {
		display: flex;
		align-items: center;
		gap: 4px;
		height: 85px;
		padding: 0 24px;
	}

	#menu li {
		display: flex;
		align-items: center;
		position: relative;
	}

	#menu li:first-child img {
		height: 74px;
		width: auto;
	}

	#menu li:first-child a {
		padding: 8px;
	}

	#menu li:first-child a:hover {
		background: none;
	}

	#menu a {
		display: flex;
		align-items: center;
		gap: 7px;
		line-height: normal;
		padding: 10px 16px;
		border-radius: 24px;
		text-decoration: none;
		color: var(--color--beige-dark);
		font-family: "Golos Text", sans-serif;
		font-weight: 600;
		font-style: normal;
		font-size: 1.1rem;
		transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
	}

	#menu a:hover {
		background: rgba(254, 252, 231, 0.1);
		color: var(--color--beige);
	}

	.menu-droite{
		padding: 0;
		flex: 0 0 auto;
	}

	/* .menu-droite est un <a> vide DANS son propre <li> : le margin-left
	   auto doit pousser ce <li> (l'enfant flex direct de #exceptMobile),
	   pas le lien lui-même, sinon il n'a aucun effet sur la position des
	   éléments suivants (Mes jeux, avatar) dans la barre. */
	.menu-spacer {
		margin-left: auto;
	}

	#menu a.dropdown-arrow:after {
		content: "\25BE";
		margin-left: -2px;
		font-size: 0.7em;
		opacity: 0.7;
	}

	#menu input {
		display: none;
		margin: 0;
		padding: 0;
		height: 45px;
		width: 100%;
		opacity: 0;
		cursor: pointer
	}

	#menu label {
		display: none;
		line-height: 45px;
		text-align: center;
		position: absolute;
		left: 35px
	}

	#menu label:before {
		font-size: 1.6em;
		color: var(--color--beige);
		content: "\2261";
		margin-left: 20px;
	}

	#menu ul.sub-menus{
		height: auto;
		overflow: hidden;
		background: var(--color--anthracite);
		min-width: 190px;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 99;
		display: none;
		border-radius: 12px;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
		padding: 8px;
		/* Aucun espace avec le lien déclencheur : un margin/border ici
		   recrée le trou où le survol se perd avant d'atteindre le menu
		   (et rendait en plus les coins du haut mal arrondis à cause de la
		   bordure asymétrique). Le menu colle directement au lien. */
		margin-top: 0;
	}

	.menu-sub{
		height: auto;
		overflow: hidden;
		background: var(--color--anthracite);
		min-width: 220px;
		position: absolute;
		top: 100%;
		left: auto;
		right: 0;
		z-index: 99;
		display: none;
		border-radius: 12px;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
		padding: 8px;
		margin-top: 0;
	}

	/* Le menu utilisateur cumule les classes sub-menus + menu-sub : sans ce
	   sélecteur plus spécifique, "#menu ul.sub-menus" (id + classe) écrase
	   le right/left de ".menu-sub" (classe seule) et le menu s'ouvrirait
	   hors de l'écran, collé au bord droit. */
	#menu ul.sub-menus.menu-sub {
		left: auto;
		right: 0;
		width: 240px;
	}

	#menu ul.sub-menus.menu-sub a {
		white-space: nowrap;
	}

	#menu ul.sub-menus li {
		display: block;
		text-align: left;
		width: 100%;
	}

	#menu ul.sub-menus a {
		color: var(--color--beige-dark);
		font-size: 1.03rem;
		font-weight: 600;
		border-radius: 8px;
		padding: 10px 12px;
	}

	#menu li:hover ul.sub-menus {
		display: block
	}

	.badge-notif {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--color--marron);
		color: var(--color--beige);
		border-radius: 999px;
		font-size: 11px;
		line-height: 1;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		margin-left: 4px;
		vertical-align: top;
		box-sizing: border-box;
	}

	.nav-notif-bell {
		position: relative;
		font-size: 1.2rem;
	}

	.nav-notif-bell .badge-notif {
		position: absolute;
		top: 4px;
		right: 6px;
		margin-left: 0;
		border: 2px solid var(--color--anthracite);
	}

	#menu ul.sub-menus a:hover{
		background: rgba(254, 252, 231, 0.1);
		color: var(--color--beige);
	}

	.nav-li-topline{
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 6px;
		padding-top: 6px;
	}


	/* Footer */
	footer{
		margin-top: auto;
		background: var(--color--anthracite);
		color: #eaddc0;
		font-family: "Calistoga", serif;
		font-weight: 200;
		font-style: normal;
		font-size: small;
		text-align: center;
	}


	footer li {
		display: inline-block;
		position: relative;
		margin-left:20px;
		margin-right:20px;
	}

	footer ul{
		margin: 0px;
		padding: 0px;
	}

	.footer-a{
		color:#eaddc0;
		text-decoration:none;
	}

	.footer-a:hover{
		color:var(--color--marron);
		text-decoration: underline var(--color--marron) 2px;
		text-underline-offset: 2px;
	}


	/* Content all */
	body{
		background: var(--color-body);
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		font-size: 18px;
		font-family: "Golos Text", sans-serif;
		font-weight: 400;
		font-style: normal;
		color: var(--color--beige-dark);
	}

	.content{
	margin-top: 90px;
	width: 1040px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	height: 100%;
	}

	h1{
		text-align: center;
		font-family: "Golos Text", sans-serif;
		font-size: 2rem;
		line-height: 135%;
		font-weight: 700;
	}

	h2{
		font-family: "Golos Text", sans-serif;
		font-size: 2rem;
		line-height: 135%;
		font-weight: 700;
		margin:0px;
		padding:0px;
	}

	.hr-title{
		margin-top:5px;
	}

	a{
		color: var(--color--beige-dark);
		text-decoration: underline var(--color--beige-dark) 2px;
		text-underline-offset: 2px;
	}

	a:hover{
		color:var(--color--marron);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.image-base {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		float:left;
		margin-right: 2px;
		object-fit: cover;
		object-position: center right;
	}

	.site-alert-wrap {
		max-width: 900px;
		margin: 16px auto 0;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	/* Notification des commandes d'administration en direct (#live-toasts,
	   info_server.html) : fixe en bas d'écran, visible sans remonter en haut
	   de page. */
	.site-alert-toast {
		position: fixed;
		z-index: 2000;
		margin: 0;
	}

	.site-alert-toast:empty {
		display: none;
	}

	.site-alert-toast {
		right: 24px;
		bottom: 24px;
		width: 420px;
	}

	.site-alert {
		display: flex;
		align-items: center;
		gap: 10px;
		background: var(--color--beige-dark);
		color: var(--color--anthracite);
		border-radius: 10px;
		border-left: 4px solid var(--color--anthracite);
		padding: 12px 16px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
		cursor: pointer;
		font-size: 0.9rem;
	}

	.site-alert-icon {
		flex-shrink: 0;
		font-size: 1.1rem;
		display: flex;
	}

	.site-alert-text {
		flex-grow: 1;
	}

	.site-alert-close {
		flex-shrink: 0;
		font-size: 1.2rem;
		line-height: 1;
		color: #8a8a8a;
		transition: color 0.15s ease-in-out;
	}

	.site-alert:hover .site-alert-close {
		color: var(--color--anthracite);
	}

	.site-alert-success {
		border-left-color: #2e8b57;
	}

	.site-alert-success .site-alert-icon {
		color: #2e8b57;
	}

	.site-alert-warning {
		border-left-color: var(--color--marron);
	}

	.site-alert-warning .site-alert-icon {
		color: var(--color--marron);
	}

	.site-alert-error {
		border-left-color: #d64545;
	}

	.site-alert-error .site-alert-icon {
		color: #d64545;
	}
}