/* Mise en page commune aux apps Drooft (navbar, messages, pied de page,
 * titres) : règles reprises à l'identique de game_hosting/static/css/style-mobile.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-mobile.css : la balise <link media=...> et le
 * @media interne doivent rester synchronisés (seuil 1100/1101 px). */
@media screen and (max-width: 1100px) {

	/* 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{
		visibility: visible;
		text-align: left;
		width: 100%;
	}

	#onlyMobile2{
		visibility: visible;
		width: 100%;
	}

	#exceptMobile{
		display: none;
		height: 0px;
		width: 0px;
		max-height: 0px;
	}

	.float-right-onlyMobile{
		float:right;
		text-decoration: none; 
	}

	.colapse-onlyMobile{
		height: 80px;
		width: 120px;
	}

	.menu-a-onlyMobile{
		display: flex;
		align-items: center;
		gap: 10px;
		font-family: "Golos Text", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 0.92rem;
		color: var(--color--anthracite);
		text-decoration: none;
		padding: 4px 6px;
		border-radius: 8px;
		transition: background-color 0.15s ease-in-out;
	}

	.menu-a-onlyMobile:hover{
		background: var(--color--beige-dark);
		color: var(--color--anthracite);
		text-decoration: none;
	}

	.menu-a-onlyMobile i{
		width: 26px;
		height: 26px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--color--anthracite);
		color: var(--color--beige);
		font-size: 0.8rem;
		line-height: 1;
		flex-shrink: 0;
		/* .bi { padding-right: 5px } (règle globale du site, pour l'usage
		   icône+texte classique) casse sinon la forme du cercle (26x26
		   devient 31x26) et pousse le glyphe vers la gauche. */
		padding: 0;
	}

	.menu-modal-onlyMobile{
		--bs-modal-width: 300px;
	}

	.menu-bars{
		padding-left: 10px;
		padding-top: 20px;
		padding-right: 10px;
		padding-bottom: 20px;
		margin-left: 20px;
		margin-top: 15px;
		margin-right: 10px;
		margin-bottom: 20px;
		border: none;
		border-radius: 12px;
		background: rgba(254, 252, 231, 0.1);
		color: var(--color--beige);
		transition: background-color 0.15s ease-in-out;
	}

	.colapse-onlyMobile:hover .menu-bars{
		background: rgba(254, 252, 231, 0.2);
	}

	.menu-modal-onlyMobile .modal-content {
		border-radius: 16px;
		overflow: hidden;
	}

	.menu-modal-onlyMobile .modal-header {
		border-bottom: none;
		padding: 12px 14px 2px;
	}

	.menu-modal-onlyMobile .modal-title {
		font-family: "Golos Text", sans-serif;
		font-weight: 700;
		font-size: 1rem;
	}

	.menu-modal-onlyMobile .modal-body {
		padding: 4px 10px 12px;
	}

	.menu-modal-onlyMobile hr {
		margin: 2px 0;
		opacity: 0.12;
	}

	#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%;
		text-align: center;
	}

	#menu li {
		display: inline-block;
		position: relative;
	}

	#menu #logo {
		display: block;
		line-height: 45px;
		padding: 0 14px;
		text-decoration: none;
		color: var(--color--beige);
	font-family: "Lobster", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: xx-large;
	margin-top: 15px;
	}

	#menu a {
		display: block;
		line-height: 45px;
		padding: 0 14px;
		text-decoration: none;
		color: var(--color--beige-dark);
	font-family: "Golos Text", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 1.1rem;
	}

	.menu-spacer {
		margin-left: auto;
	}

	#menu a.dropdown-arrow:after {
		content: "\25BE";
		margin-left: 5px;
	}

	#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;
		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;
	}

	#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
	}

	#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;
	margin-left: auto;
	margin-right: auto;
	/* body est en display:flex (colonne) : sans largeur explicite, une
	   margin auto sur les deux côtés fait de .content un élément "auto-sizé"
	   (adapté à son contenu) au lieu de "stretch" (pleine largeur) — sa
	   taille dépendait alors du contenu de l'onglet actif dans les pages
	   self-hosted, et tout ce qui est en width:100% à l'intérieur (pub,
	   barre d'onglets...) rétrécissait avec lui selon l'onglet affiché. */
	width: 100%;
	box-sizing: border-box;
	position: relative;
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
	}

	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 {
		margin: 12px 12px 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	/* 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 {
		left: 12px;
		right: 12px;
		bottom: 12px;
	}

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

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

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

	.site-alert-close {
		flex-shrink: 0;
		font-size: 1.1rem;
		line-height: 1;
		color: #8a8a8a;
	}

	.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;
	}

	/* ============================================================
	   Tout ce bloc (badge, switch, notifications, profil, modals)
	   duplique volontairement le CSS de style-desktop.css : ce
	   fichier tourne sous @media (min-width: 1101px) et ne
	   s'applique donc JAMAIS en dessous de cette largeur. Les deux
	   feuilles sont mutuellement exclusives par breakpoint, pas
	   cumulatives — sans cette duplication, ces composants n'ont
	   aucun style du tout sur mobile (cf. écran nu constaté).
	   ============================================================ */
	.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;
	}
}