/* Grand mais pas assez pour les demi-gratte-ciel */
@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);
	}
	.fa-regular.fa-bell {
		margin-left: 1px;
		margin-right: 3px;
	}

	.notif-toggle-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		flex-wrap: wrap;
		padding: 6px 0;
	}
	.notif-toggle-label {
		cursor: pointer;
		font-weight: 600;
		text-align: left;
		max-width: 320px;
		color: #6a6a6a;
	}
	.switch {
		position: relative;
		display: inline-block;
		flex-shrink: 0;
		width: 46px;
		height: 25px;
	}
	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}
	.switch-slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--color--lightgrey);
		transition: background-color 0.25s ease-in-out;
		border-radius: 25px;
	}
	.switch-slider:before {
		position: absolute;
		content: "";
		height: 19px;
		width: 19px;
		left: 3px;
		bottom: 3px;
		background-color: var(--color--white);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
		transition: transform 0.25s ease-in-out;
		border-radius: 50%;
	}
	.switch input:checked + .switch-slider {
		background-color: var(--color--marron);
	}
	.switch input:checked + .switch-slider:before {
		transform: translateX(21px);
	}
	.switch input:focus-visible + .switch-slider {
		outline: 2px solid var(--color--anthracite);
		outline-offset: 2px;
	}
	#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);
	}
	.bi{
		padding-right: 5px;
	}
	.bi-first{
		padding-left: 5px;
	}
	.content{
	margin-top: 90px;
	width: 1040px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	height: 100%;
	}

	p{
		margin:0px;
		padding: 0px;
	}

	.basic-button {
		background-color: var(--color--anthracite);
		color: var(--color--beige);
		padding: 6px 20px; 
		border: solid transparent;
		border-radius: 54px;
		cursor: pointer;
		font-weight: bold;
		transition: background-color 0.3s ease-in-out;
		margin:7px;
	}

	.basic-button-margin-top {
		background-color: var(--color--anthracite);
		color: var(--color--beige);
		padding: 10px 20px; 
		border: solid transparent;
		border-radius: 54px;
		cursor: pointer;
		font-weight: bold;
		transition: background-color 0.3s ease-in-out;
		margin-top:15px;
		margin-left:7px;
		margin-right:7px;
	}

	.basic-button:hover {
		text-decoration: underline;
		text-decoration-thickness: 0px;
		border-width: 1em;
		border: solid;
		border-color: #818181;
	}
	.basic-button-margin-top:hover {
		text-decoration: underline;
		text-decoration-thickness: 0px;
		border-width: 1em;
		border: solid;
		border-color: #818181;
	}


	.div-center{
		text-align: center;
	}
	/* !important nécessaire : plusieurs éléments basculés en display:none/
	   visible via l'attribut `hidden` (cf. ui-interactions.js) portent aussi
	   une classe qui fixe elle-même un display explicite (ex:
	   .forum-v2-reply-toggle-wrap { display: flex }) - une règle d'auteur
	   normale gagne TOUJOURS contre le style UA par défaut de [hidden]
	   (display:none), quelle que soit la spécificité, car l'origine de la
	   règle prime avant la spécificité dans la cascade. Sans ce !important,
	   ces éléments restaient visibles en permanence malgré `hidden` (bouton
	   "Répondre" du forum resté affiché après clic, notamment). */
	[hidden] {
		display: none !important;
	}
	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;
	}
	h6{
		font-family: "Golos Text", sans-serif;
		font-size: 1.4rem;
		line-height: 135%;
		font-weight: 700;
	}
	h4{
		font-family: "Golos Text", sans-serif;
		font-size: 2rem;
		line-height: 135%;
		font-weight: 700;
	}
	a{
		color: var(--color--beige-dark);
		text-decoration: underline var(--color--beige-dark) 2px;
		text-underline-offset: 2px;
	}
	.a-black{
		color:var(--color--anthracite);
	}
	.a-black-u{
		color:var(--color--anthracite);
		text-decoration: underline;
		text-underline-offset: 2px;
	}
	a:hover{
		color:var(--color--marron);
		text-decoration: underline;
		text-underline-offset: 2px;
	}
	.a-ad{
		color:var(--color--marron);
		text-decoration: none;
	}

	table{
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		color: var(--color--anthracite);
		
	}
	.table{
		--bs-table-hover-bg: var(--bs-body-bg);
		
	}
	.bold{
		font-weight: bold;
	}

	.wip-img{
		width: 600px;
	}
	.bi-x-circle-fill:hover{
		cursor: pointer;
		color:var(--color--marron);
	}
	.bi-info-circle:hover{
		cursor: pointer;
	}
	.fa-power-off:hover{
		cursor: pointer;
		color:var(--color--marron);
	}
	.fa-leaf{
		padding-right: 5px;
	}
	.fa-key:hover{
		cursor: pointer;
		color:var(--color--marron);
	}
	.fa-paste:hover{
		cursor: pointer;
		color:var(--color--marron);
	}
	.fa-triangle-exclamation:hover{
		cursor: pointer;
		color:var(--color--marron);
	}
	.bi-check-circle-fill:hover{
		cursor: pointer;
		color:var(--color--marron);
	}
	.bi-pencil-fill:hover{
		cursor: pointer;
		color:var(--color--marron);
	}
	.bi-arrow-return-left{
		height: 40px;
		width: 40px;
		float:right;
		background-color:#dbdbdb;
		border-width: 1em;
		border: solid;
		border-color: #cfcfcf;
		border-radius: 5px;
		padding-top:6px;
		padding-left:7px;
		margin-bottom: 5px;
		margin-left: 5px;
		text-align: left;
	}
	.text-right{
		float:right;
		text-align: right;
		color:#7c7c7c;
		font-style: italic;
	}
	.text-right-recommended{
		float:right;
		text-align: center;
		color:#7c7c7c;
		font-style: italic;
		width: 300px;
		margin-right: 10px;
	}
	.recommanded{
		position:absolute;
		top:5px;
		right:5px;
		width:auto;
		padding-left: 10px;
		padding-right: 10px;
		z-index:2;
		border-width: 1px;
		border: solid;
		border-radius: 5px;
		border-color: #bb8000;
		font-size: 12px;
		color:#e7e7e7;
		background-color: #bb8000;
	}
	.modal-content{
		background-color: var(--color--white);
	}
	.modal-header{
		text-align: center;
		background-color: var(--color--beige-dark);
		padding: 0px;
		padding-right:15px;
		padding-left:15px;
		--bs-modal-header-padding-x: auto; 
        --bs-modal-header-padding-y: auto;
	}
	.modal-footer{
		text-align: center;
		background-color: var(--color--beige-dark);
	}
	.modal-title{
		padding: 0 auto;
		padding-top:12px;
		padding-bottom:12px;
		margin: 0 auto;
		color:var(--color--anthracite);
	}
	.modal-body{
		color:var(--color--anthracite);
	}
	.modal-bg-color{
		background-color: #e7a311;
		border-color: #e7a311;
	}
	.modal-bg-color:hover{
		background-color: #e7a311;
		border-color: #e7a311;
		filter: brightness(90%);
	}
	/* Content Serveurs-self */
	.card-column{
	columns: 3;
	}
	/* Grille (pas columns:N, qui remplit colonne par colonne de haut en
	   bas) : l'ordre alphabétique des cartes dans le HTML doit se lire de
	   gauche à droite, ligne par ligne. */
	.selfhosted-v2-card-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 20px;
		row-gap: 8px;
	}
	.self-hosted-more-text {
		margin-top: 24px;
	}
	.card-header {
		background-color: var(--color--anthracite);
		color:var(--color--beige);
	}
	.card-body{
		background-color: var(--color--beige-dark);
		padding-top: 10px;
		padding-bottom: 5px;
	}
	.card-body-perso{
		background-color: var(--color--beige-dark);
		padding-top: 10px;
		padding-bottom: 5px;
	}
	.card-body-profil{
		background-color: var(--color--beige-dark);
		padding-bottom: 15px;
		border-left: solid;
		border-right: solid;
		border-bottom: solid;
		border-color: var(--color--beige-dark);
		border-width: 1px;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	.card-body-profil2{
		background-color: var(--color--beige-dark);
		padding-bottom: 15px;
		border-left: solid;
		border-right: solid;
		border-color: var(--color--beige-dark);
		border-width: 1px;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	/* --- Notifications (design "feed") --- */
	.notif-v2-header {
		max-width: 700px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		flex-wrap: wrap;
		position: relative;
	}
	.notif-v2-header h1 {
		margin: 0;
	}
	.notif-v2-mark-all {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--color--beige);
		background: var(--color--anthracite);
		border: 1px solid var(--color--anthracite);
		border-radius: 20px;
		padding: 6px 14px;
		font-size: 0.85rem;
		font-weight: 600;
		text-decoration: none;
		transition: opacity 0.2s ease-in-out;
		position: absolute;
		right: 0;
	}
	.notif-v2-mark-all:hover {
		opacity: 0.85;
	}
	.notif-v2-feed {
		max-width: 700px;
		margin: 20px auto 0;
		display: flex;
		flex-direction: column;
		gap: 10px;
		text-align: left;
	}
	.notif-v2-item {
		display: flex;
		align-items: center;
		gap: 14px;
		background: #29343f;
		border-radius: 12px;
		padding: 14px 16px;
		text-decoration: none;
		color: #eaddc0;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		border-left: 4px solid transparent;
		transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		position: relative;
	}
	.notif-v2-item:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	}
	.notif-v2-unread {
		background: #33465a;
		border-left-color: var(--color--marron);
	}
	.notif-v2-icon {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--color--marron);
		color: var(--color--beige);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1rem;
	}
	.notif-v2-icon i {
		line-height: 1;
		position: relative;
		left: 2px;
	}
	.notif-v2-body {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}
	.notif-v2-message {
		font-size: 0.95rem;
	}
	.notif-v2-unread .notif-v2-message {
		font-weight: 700;
	}
	.notif-v2-time {
		font-size: 0.78rem;
		color: rgba(234, 221, 192, 0.6);
	}
	.notif-v2-dot {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--color--marron);
	}
	.notif-v2-empty {
		text-align: center;
		padding: 50px 20px;
		color: rgba(234, 221, 192, 0.6);
	}
	.notif-v2-empty i {
		font-size: 2.5rem;
		display: block;
		margin-bottom: 10px;
	}

	/* --- Profil (design "feed", cohérent avec Notifications) --- */
	.profil-v2-wrap {
		max-width: 700px;
		margin: 0 auto 40px;
		text-align: left;
	}
	.profil-v2-wrap h1 {
		text-align: center;
	}
	.profil-v2-hero {
		display: flex;
		align-items: center;
		gap: 18px;
		background: #29343f;
		border-radius: 12px;
		padding: 18px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		margin-top: 20px;
	}
	.profil-v2-avatar {
		width: 72px;
		height: 72px;
		border-radius: 50%;
		object-fit: cover;
		object-position: center right;
		border: 2px solid var(--color--marron);
		flex-shrink: 0;
	}
	.profil-v2-hero-name {
		font-size: 1.3rem;
		font-weight: 700;
		color: #eaddc0;
	}
	.profil-v2-edit-icon {
		cursor: pointer;
		margin-left: 8px;
		font-size: 0.9rem;
		color: rgba(234, 221, 192, 0.6);
		transition: color 0.15s ease-in-out;
	}
	.profil-v2-edit-icon:hover {
		color: var(--color--marron);
	}
	.profil-v2-hero-date {
		font-size: 0.85rem;
		color: rgba(234, 221, 192, 0.6);
		margin-top: 4px;
	}
	.profil-v2-stats {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
		margin-top: 16px;
	}
	.profil-v2-stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		background: #29343f;
		border-radius: 12px;
		padding: 14px 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		text-align: center;
	}
	.profil-v2-stat-icon {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: var(--color--marron);
		color: var(--color--beige);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.profil-v2-stat-icon i {
		line-height: 1;
		position: relative;
		left: 2px;
	}
	.profil-v2-stat-icon i.bi-star-fill {
		left: 2.5px;
	}
	.profil-v2-stat-value {
		font-size: 1.2rem;
		font-weight: 700;
		color: #eaddc0;
	}
	.profil-v2-stat-label {
		font-size: 0.72rem;
		color: rgba(234, 221, 192, 0.6);
	}
	.profil-v2-actions {
		display: flex;
		justify-content: center;
		gap: 10px;
		flex-wrap: wrap;
		margin-top: 18px;
	}
	.profil-v2-action-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--color--beige);
		background: var(--color--anthracite);
		border-radius: 20px;
		padding: 8px 16px;
		font-size: 0.85rem;
		font-weight: 600;
		text-decoration: none;
		transition: opacity 0.2s ease-in-out;
	}
	.profil-v2-action-btn:hover {
		opacity: 0.85;
	}
	.profil-v2-card {
		background: #29343f;
		color: #eaddc0;
		border-radius: 12px;
		padding: 16px 18px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		margin-top: 18px;
	}
	.profil-v2-card .profil-modal-v3-field label {
		color: #eaddc0;
	}
	.profil-v2-card-header {
		font-weight: 700;
		color: #eaddc0;
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 12px;
	}
	.profil-v2-info {
		font-size: 0.85rem;
		color: rgba(234, 221, 192, 0.6);
		cursor: help;
	}
	.profil-v2-section-label {
		font-size: 0.8rem;
		font-weight: 700;
		color: rgba(234, 221, 192, 0.6);
		text-transform: uppercase;
		letter-spacing: 0.03em;
		margin: 14px 0 8px;
	}
	.profil-v2-section-label:first-of-type {
		margin-top: 0;
	}
	.profil-v2-friend-item {
		display: flex;
		align-items: center;
		gap: 12px;
		background: #33465a;
		border-radius: 10px;
		padding: 10px 12px;
		border-left: 4px solid transparent;
		transition: box-shadow 0.15s ease-in-out;
		margin-bottom: 8px;
	}
	.profil-v2-friend-item:hover {
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	}
	.profil-v2-friend-pending {
		border-left-color: var(--color--marron);
	}
	.profil-v2-friend-blocked {
		opacity: 0.7;
	}
	.profil-v2-friend-avatar {
		flex-shrink: 0;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		object-fit: cover;
		object-position: center right;
	}
	.profil-v2-friend-body {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
		flex-grow: 1;
	}
	.profil-v2-friend-name {
		font-weight: 600;
		color: #eaddc0;
	}
	.profil-v2-friend-date {
		font-size: 0.75rem;
		color: rgba(234, 221, 192, 0.6);
	}
	.profil-v2-friend-actions {
		display: flex;
		gap: 10px;
		flex-shrink: 0;
	}
	.profil-v2-friend-actions a {
		color: #eaddc0;
		font-size: 1.1rem;
		transition: color 0.15s ease-in-out;
	}
	.profil-v2-friend-actions a:hover {
		color: var(--color--marron);
	}
	.profil-v2-empty-friends {
		text-align: center;
		color: rgba(234, 221, 192, 0.6);
		padding: 10px 0;
	}
	.profil-v2-add-friend {
		text-align: center;
		margin-top: 14px;
	}

	/* --- Profil : modals redesignées (structure "confirm dialog" moderne, scopées à cette page) --- */
	.profil-modal-v3 {
		border: none;
		border-radius: 20px;
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
		padding: 34px 28px 28px;
		text-align: center;
		position: relative;
	}
	.profil-modal-v3-close {
		position: absolute;
		top: 16px;
		right: 16px;
	}
	.profil-modal-v3-icon {
		width: 56px;
		height: 56px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 16px;
		font-size: 1.5rem;
		color: #fff;
	}
	.profil-modal-v3-icon i {
		line-height: 1;
		position: relative;
		left: 2px;
	}
	.profil-modal-v3-icon-neutral {
		background: var(--color--anthracite);
	}
	.profil-modal-v3-icon-danger {
		background: #c0392b;
	}
	.profil-modal-v3-icon-success {
		background: #2e8b57;
	}
	.profil-modal-v3-icon-warning {
		background: var(--color--marron);
	}
	.profil-modal-v3-title {
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--color--anthracite);
		margin-bottom: 8px;
	}
	.profil-modal-v3-text {
		color: #6a6a6a;
		font-size: 0.95rem;
		margin-bottom: 22px;
	}
	/* .legal-v2-tip est prévue pour les pages en thème sombre (texte hérité
	   de body, --color--beige-dark) — mais ce modal a un fond clair
	   (--color--white), d'où le texte pâle illisible une fois réutilisée ici
	   sans cet override. */
	.profil-modal-v3-form .legal-v2-tip p {
		color: #6a6a6a;
	}
	.profil-modal-v3-form {
		text-align: left;
	}
	.profil-modal-v3-field {
		margin-bottom: 16px;
	}
	.profil-modal-v3-field-center {
		text-align: center;
	}
	/* Hérite sinon du beige du thème sombre (body), illisible sur le fond
	   clair des modales. */
	.profil-modal-v3 .notif-toggle-label {
		color: var(--color--anthracite);
	}
	/* Interrupteurs en modale alignés à gauche : centrés, les longueurs de
	   libellés différentes décalaient chaque interrupteur. */
	.profil-modal-v3 .notif-toggle-row {
		justify-content: flex-start;
	}
	.profil-modal-v3-field label {
		display: block;
		font-weight: 600;
		color: var(--color--anthracite);
		margin-bottom: 6px;
		font-size: 0.9rem;
	}
	.profil-modal-v3-field input[type="text"],
	.profil-modal-v3-field input[type="password"],
	.profil-modal-v3-field input[type="email"],
	.profil-modal-v3-field input[type="number"],
	.profil-modal-v3-field select,
	.profil-modal-v3-field textarea {
		width: 100%;
		border-radius: 10px;
		border: 1px solid #ddd;
		background-clip: padding-box;
		padding: 10px 12px;
		box-sizing: border-box;
		font-size: 0.95rem;
		background-color: #fff;
		color: var(--color--anthracite);
	}
	.profil-modal-v3-field textarea {
		resize: vertical;
		min-height: 140px;
		font-family: inherit;
	}
	.profil-modal-v3-field select {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		padding-right: 34px;
		background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23303030'%3E%3Cpath d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
		background-size: 14px;
	}
	.profil-modal-v3-field select option {
		background: #fff;
		color: var(--color--anthracite);
	}
	.profil-modal-v3-field select option:hover {
		background: var(--color--anthracite);
		color: var(--color--beige);
	}
	.profil-modal-v3-field input:focus,
	.profil-modal-v3-field select:focus,
	.profil-modal-v3-field textarea:focus {
		outline: none;
		border-color: var(--color--anthracite);
	}
	.profil-modal-v3-field input:-webkit-autofill,
	.profil-modal-v3-field input:-webkit-autofill:hover,
	.profil-modal-v3-field input:-webkit-autofill:focus {
		-webkit-box-shadow: 0 0 0 1000px #fff inset;
		-webkit-text-fill-color: var(--color--anthracite);
		transition: background-color 9999s ease-in-out 0s;
	}
	.profil-modal-v3-field input[type="file"] {
		color: var(--color--anthracite);
	}
	.profil-modal-v3-error {
		color: #c0392b;
		font-size: 0.82rem;
		margin-top: 4px;
		margin-bottom: 6px;
	}
	.profil-modal-v3-error-center {
		text-align: center;
	}
	.profil-modal-v3-avatar-preview {
		width: 96px;
		height: 96px;
		border-radius: 50%;
		object-fit: cover;
		object-position: center right;
		display: block;
		margin: 0 auto 18px;
		border: 3px solid var(--color--anthracite);
	}
	.profil-modal-v3-actions {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 8px;
	}
	.profil-modal-v3-btn {
		flex: 1;
		max-width: 160px;
		border-radius: 20px;
		padding: 10px 0;
		font-weight: 600;
		font-size: 0.9rem;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		border: none;
		transition: opacity 0.2s ease-in-out;
	}
	.profil-modal-v3-btn-ghost {
		background: transparent;
		border: 1px solid #ccc;
		color: #6a6a6a;
		transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	}
	.profil-modal-v3-btn-ghost:hover {
		background: #d8d8d8;
		border-color: #b5b5b5;
		color: #3a3a3a;
	}
	.profil-modal-v3-btn-solid {
		background: var(--color--anthracite);
		color: var(--color--beige);
		transition: background-color 0.15s ease-in-out;
	}
	.profil-modal-v3-btn-solid:hover {
		background: var(--color--anthracite-v2);
		color: var(--color--beige);
		text-decoration: none;
	}
	.profil-modal-v3-btn-danger {
		background: #c0392b;
		color: #fff;
		transition: background-color 0.15s ease-in-out;
	}
	.profil-modal-v3-btn-danger:hover {
		background: #a5301f;
		color: #fff;
		text-decoration: none;
	}
	.profil-modal-v3-btn-success {
		background: #2e8b57;
		color: #fff;
		transition: background-color 0.15s ease-in-out;
	}
	.profil-modal-v3-btn-success:hover {
		background: #256f45;
		color: #fff;
		text-decoration: none;
	}

	/* --- Forum (design "feed", cohérent avec Notifications / Profil) --- */
	.forum-v2-wrap {
		max-width: 860px;
		margin: 0 auto 40px;
		text-align: left;
	}
	.forum-v2-wrap h1 {
		text-align: center;
	}
	.forum-v2-note {
		text-align: center;
		font-size: 0.85rem;
		color: #8a8a8a;
		margin: 0 0 16px;
	}
	.forum-v2-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex-wrap: wrap;
		margin-top: 20px;
	}
	.forum-v2-new-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--color--beige);
		background: var(--color--anthracite);
		border-radius: 20px;
		padding: 8px 16px;
		font-size: 0.85rem;
		font-weight: 600;
		text-decoration: none;
		transition: opacity 0.2s ease-in-out;
	}
	.forum-v2-new-btn:hover {
		opacity: 0.85;
		color: var(--color--beige);
		text-decoration: none;
	}
	.forum-v2-lang-btn {
		background: var(--color--anthracite);
		border: none;
		border-radius: 20px;
		padding: 6px 14px;
		font-size: 0.85rem;
	}
	.forum-v2-lang-current {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--color--beige);
		text-decoration: none;
	}
	.forum-v2-lang-current:hover {
		color: var(--color--beige);
		text-decoration: none;
	}
	.forum-v2-lang-menu {
		background: var(--color--anthracite);
		border: none;
		border-radius: 12px;
		padding: 6px;
		margin-top: 6px;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	}
	.forum-v2-lang-choice {
		display: flex;
		align-items: center;
		gap: 6px;
		color: var(--color--beige);
		text-decoration: none;
		padding: 8px 12px;
		border-radius: 8px;
		font-size: 0.85rem;
	}
	.forum-v2-lang-choice:hover {
		background: var(--color--anthracite-v2);
		color: var(--color--marron);
		text-decoration: none;
	}
	.forum-v2-lang-current .flag,
	.forum-v2-lang-choice .flag {
		width: 18px;
		height: auto;
		border-radius: 2px;
	}
	.forum-v2-feed {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 20px;
	}
	.forum-v2-item {
		display: flex;
		align-items: center;
		gap: 14px;
		background: #29343f;
		border-radius: 12px;
		padding: 14px 16px;
		text-decoration: none;
		color: #eaddc0;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		border-left: 4px solid transparent;
		transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}
	.forum-v2-item:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
		color: #eaddc0;
		text-decoration: none;
	}
	.forum-v2-pinned {
		border-left-color: var(--color--marron);
	}
	.forum-v2-avatar {
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		object-fit: cover;
		object-position: center right;
	}
	.forum-v2-body {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
		flex-grow: 1;
	}
	.forum-v2-title-row {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.forum-v2-title {
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.forum-v2-pin-icon {
		color: var(--color--marron);
		flex-shrink: 0;
	}
	.forum-v2-participation-icon {
		color: #eaddc0;
		opacity: 0.55;
		font-size: 0.9rem;
		flex-shrink: 0;
	}
	.forum-v2-meta {
		font-size: 0.8rem;
		color: rgba(234, 221, 192, 0.6);
	}
	.forum-v2-staff-badge,
	.forum-v2-lang-badge {
		display: inline-block;
		background: transparent;
		border: 1px solid rgba(234, 221, 192, 0.35);
		color: rgba(234, 221, 192, 0.6);
		font-size: 0.62rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		border-radius: 8px;
		padding: 0px 6px;
	}
	.forum-v2-stats {
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 3px;
		text-align: right;
		font-size: 0.78rem;
	}
	.forum-v2-reply-count {
		font-weight: 700;
		color: #eaddc0;
	}
	.forum-v2-last-post {
		color: rgba(234, 221, 192, 0.6);
		line-height: 1.3;
	}
	.forum-v2-empty {
		text-align: center;
		padding: 50px 20px;
		color: rgba(234, 221, 192, 0.6);
	}
	.forum-v2-empty i {
		font-size: 2.5rem;
		display: block;
		margin-bottom: 10px;
	}
	.forum-v2-pagination {
		margin-top: 20px;
		display: flex;
		justify-content: center;
	}
	.forum-v2-pagination .pagination {
		display: inline-flex;
		margin: 0;
		padding: 0;
		list-style: none;
		background: var(--color--anthracite);
		border: 1px solid var(--color--anthracite);
		border-radius: 24px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}
	.forum-v2-pagination .page-item {
		border-right: 1px solid var(--color--anthracite-v2);
	}
	.forum-v2-pagination .page-item:last-child {
		border-right: none;
	}
	.forum-v2-pagination .page-link {
		border: none;
		border-radius: 0;
		margin: 0;
		box-shadow: none;
	}
	.forum-v2-pagination .page-link:focus {
		box-shadow: none;
		outline: none;
	}
	.forum-v2-pagination .page-item .page-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		height: 42px;
		background: transparent;
		color: var(--color--beige);
		padding: 0 12px;
		font-size: 0.85rem;
		font-weight: 600;
		transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
	}
	.forum-v2-pagination .page-item-current .page-link {
		padding: 0 18px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}
	.forum-v2-pagination .page-item .page-link:hover {
		background: var(--color--anthracite-v2);
		color: var(--color--marron);
		text-decoration: none;
	}
	.forum-v2-pagination .page-item.disabled .page-link {
		color: rgba(254, 252, 231, 0.35);
		cursor: default;
	}
	.forum-v2-pagination .page-item.disabled .page-link:hover {
		background: transparent;
		color: rgba(254, 252, 231, 0.35);
	}
	.forum-v2-pagination .page-item.disabled.page-item-current .page-link {
		background: var(--color--anthracite);
		color: var(--color--beige);
	}
	.forum-v2-pagination .page-item.disabled.page-item-current .page-link:hover {
		background: var(--color--anthracite);
		color: var(--color--beige);
	}

	/* --- Forum : détail d'une discussion --- */
	.forum-v2-post {
		background: #29343f;
		border-radius: 12px;
		padding: 18px 20px 12px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		scroll-margin-top: 100px;
	}
	.forum-v2-post:target {
		outline: 3px solid var(--color--marron);
		outline-offset: 2px;
		animation: forumV2TargetFade 2.5s ease-out;
	}
	@keyframes forumV2TargetFade {
		from { background: #6b4a1e; }
		to { background: #29343f; }
	}
	.forum-v2-post-op {
		border-left: 4px solid var(--color--marron);
	}
	.forum-v2-post-header {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 12px;
	}
	.forum-v2-post-avatar {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		object-fit: cover;
		object-position: center right;
	}
	.forum-v2-post-headinfo {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.forum-v2-post-author {
		font-weight: 700;
		color: #eaddc0;
	}
	.forum-v2-post-date {
		font-size: 0.78rem;
		color: rgba(234, 221, 192, 0.6);
	}
	.forum-v2-post-content {
		line-height: 1.55;
		color: #eaddc0;
		word-wrap: break-word;
	}
	.forum-v2-post-content img {
		max-width: 100%;
		height: auto;
		border-radius: 8px;
	}
	.forum-v2-post-actions {
		display: flex;
		gap: 16px;
		margin-top: 14px;
		padding-top: 10px;
		border-top: 1px solid rgba(234, 221, 192, 0.15);
		font-size: 0.82rem;
	}
	.forum-v2-post-action {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		color: rgba(234, 221, 192, 0.6);
		cursor: pointer;
		transition: color 0.15s ease-in-out;
	}
	.forum-v2-post-action:hover {
		color: var(--color--marron);
	}
	.forum-v2-edit-box {
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px dashed rgba(234, 221, 192, 0.25);
	}
	.forum-v2-reply-toggle-wrap {
		display: flex;
		justify-content: center;
		margin-top: 24px;
	}
	.forum-v2-reply-toggle-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--color--beige);
		background: var(--color--anthracite);
		border-radius: 20px;
		padding: 10px 22px;
		font-size: 0.9rem;
		font-weight: 600;
		cursor: pointer;
		transition: opacity 0.2s ease-in-out;
	}
	.forum-v2-reply-toggle-btn:hover {
		opacity: 0.85;
	}

	/* --- Mes jeux (design "feed", cohérent avec Notifications / Profil / Forum) --- */
	.jeu-v2-wrap {
		max-width: 1100px;
		margin: 0 auto 40px;
		text-align: left;
	}
	.jeu-v2-wrap h1 {
		text-align: center;
	}
	.jeu-v2-feed {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.jeu-v2-item {
		display: flex;
		align-items: center;
		gap: 14px;
		background: #ececec;
		border-radius: 10px;
		padding: 10px 14px;
		margin-bottom: 8px;
		color: var(--color--anthracite);
		text-decoration: none;
	}
	a.jeu-v2-item:hover {
		color: var(--color--anthracite);
		text-decoration: none;
		opacity: 0.9;
	}
	.jeu-v2-item:last-child {
		margin-bottom: 0;
	}
	.jeu-v2-thumb {
		width: 56px;
		height: 56px;
		object-fit: cover;
		border-radius: 10px;
		flex-shrink: 0;
	}
	.jeu-v2-led {
		flex-shrink: 0;
		width: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.jeu-v2-led .led-red {
		animation: none;
	}
	.jeu-v2-body {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
		flex-grow: 1;
	}
	.jeu-v2-name {
		font-weight: 700;
		color: var(--color--anthracite);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.jeu-v2-players {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 0.78rem;
		color: rgba(234, 221, 192, 0.6);
	}
	.jeu-v2-actions {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-shrink: 0;
	}
	.jeu-v2-connect {
		display: inline-flex;
		align-items: center;
		gap: 12px;
	}
	.jeu-v2-action-icon {
		color: #eaddc0;
		font-size: 1.05rem;
		cursor: pointer;
		text-decoration: none;
		padding-right: 0;
		transition: color 0.15s ease-in-out;
	}
	.jeu-v2-action-icon:hover {
		color: var(--color--marron);
		text-decoration: none;
	}
	.hostv2-log-row .jeu-v2-action-icon {
		color: var(--color--anthracite);
	}
	.profil-modal-v3 .jeu-v2-action-icon {
		color: var(--color--anthracite);
	}
	.profil-modal-v3 .jeu-v2-action-icon:hover {
		color: var(--color--marron);
	}
	.jeu-v2-empty-text {
		text-align: center;
		color: #8a8a8a;
		font-size: 0.9rem;
		padding: 10px 0;
		margin: 0;
	}
	.jeu-v2-empty-link {
		color: var(--color--anthracite);
		font-weight: 700;
		text-decoration: underline;
	}
	.jeu-v2-empty-link:hover {
		color: var(--color--marron);
		text-decoration: underline;
	}
	.jeu-v2-banner-wrap {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 12px;
		flex-wrap: wrap;
		margin: 4px 0;
		padding-top: 24px;
	}
	.jeu-v2-banner-img {
		width: 300px;
		max-width: 100%;
		height: auto;
	}
	.jeu-v2-join-cta {
		display: flex;
		justify-content: center;
		margin-top: 24px;
	}
	.jeu-v2-join-cta-top {
		margin-top: 6px;
		margin-bottom: 28px;
	}

	/* --- Info host (design "feed", cohérent avec Notifications / Profil / Forum / Mes jeux) --- */
	.hostv2-wrap {
		max-width: 900px;
		margin: 0 auto 40px;
		text-align: left;
	}
	.hostv2-wrap h1 {
		text-align: center;
	}
	.hostv2-back {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--color--beige-dark);
		font-size: 0.85rem;
		font-weight: 600;
		text-decoration: none;
		margin-top: 4px;
		margin-bottom: 0;
	}
	.hostv2-intro {
		margin-top: 18px;
	}
	.hostv2-back:hover {
		color: var(--color--marron);
		text-decoration: none;
	}
	.hostv2-top {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		flex-wrap: wrap;
		margin-top: 4px;
	}
	.hostv2-card {
		flex: 1 1 320px;
		min-width: 280px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.profil-v2-card-header-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 12px;
	}
	.profil-v2-card-header-row .profil-v2-card-header {
		margin-bottom: 0;
	}
	/* Sous-section dans une carte (ex. tranches de l'impôt sur la fortune,
	   commun/eco_wealthtax_brackets.html). */
	.hostv2-card-subsection {
		margin-top: 18px;
		padding-top: 14px;
		border-top: 1px solid rgba(234, 221, 192, 0.12);
	}
	.hostv2-card-subsection .profil-v2-card-header {
		font-size: 0.95em;
	}
	.hostv2-actions {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-shrink: 0;
	}
	.hostv2-kv-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 16px;
		position: relative;
	}
	.hostv2-kv-grid::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 1px;
		background: rgba(234, 221, 192, 0.12);
		transform: translateX(-50%);
	}
	.hostv2-kv-item {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.hostv2-kv-label {
		font-size: 0.72rem;
		color: rgba(234, 221, 192, 0.6);
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}
	.hostv2-kv-label .jeu-v2-action-icon {
		font-size: 0.72rem;
		margin-left: -4px;
	}
	.hostv2-kv-value {
		font-size: 0.9rem;
		font-weight: 600;
		color: #eaddc0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.hostv2-status-row {
		display: flex;
		align-items: center;
		gap: 14px;
	}
	.hostv2-status-version {
		flex-grow: 1;
		font-size: 0.9rem;
		color: #eaddc0;
	}
	.hostv2-disk-row {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid rgba(234, 221, 192, 0.12);
	}
	.hostv2-disk-icon {
		font-size: 0.95rem;
		color: rgba(234, 221, 192, 0.5);
		flex-shrink: 0;
	}
	.hostv2-disk-bar-wrap {
		flex-grow: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	.hostv2-disk-bar {
		height: 6px;
		border-radius: 3px;
		background: rgba(234, 221, 192, 0.12);
		overflow: hidden;
	}
	.hostv2-disk-bar-fill {
		height: 100%;
		border-radius: 3px;
		background: #4caf7d;
		transition: width 0.3s ease;
	}
	.hostv2-disk-bar-fill.hostv2-disk-warning {
		background: #e0a83c;
	}
	.hostv2-disk-bar-fill.hostv2-disk-critical {
		background: #d1554a;
	}
	.hostv2-disk-caption {
		font-size: 0.72rem;
		color: rgba(234, 221, 192, 0.55);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.hostv2-disk-pct {
		flex-shrink: 0;
		min-width: 42px;
		text-align: right;
		font-size: 0.85rem;
		font-weight: 700;
		color: #4caf7d;
	}
	.hostv2-disk-pct-warning {
		color: #e0a83c;
	}
	.hostv2-disk-pct-critical {
		color: #d1554a;
	}
	.hostv2-header-right {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-shrink: 0;
	}
	.hostv2-disk-mini {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.hostv2-disk-mini-icon {
		font-size: 0.8rem;
		color: rgba(234, 221, 192, 0.5);
	}
	.hostv2-disk-mini-bar {
		width: 70px;
		height: 6px;
		border-radius: 3px;
		background: rgba(234, 221, 192, 0.12);
		overflow: hidden;
		cursor: default;
	}
	.hostv2-disk-mini-pct {
		font-size: 0.75rem;
		font-weight: 700;
		color: #4caf7d;
		cursor: default;
	}
	.hostv2-chart-card canvas {
		max-width: 100%;
	}
	.hostv2-game-sub {
		font-size: 0.78rem;
		color: #8a8a8a;
	}
	.hostv2-game-players {
		display: flex;
		align-items: center;
		gap: 4px;
		flex-shrink: 0;
		font-size: 0.82rem;
		font-weight: 600;
		color: var(--color--anthracite);
	}
	.hostv2-game-date {
		flex-shrink: 0;
		font-size: 0.78rem;
		color: #8a8a8a;
		min-width: 90px;
		text-align: right;
	}
	.hostv2-add-cta {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}
	.hostv2-section-heading {
		display: flex;
		align-items: center;
		gap: 8px;
		font-weight: 700;
		font-size: 1.05rem;
		color: var(--color--beige-dark);
		margin: 32px 0 14px;
		padding-bottom: 10px;
		border-bottom: 2px solid rgba(254, 252, 231, 0.15);
	}
	.hostv2-wrap .hostv2-section-heading:first-child,
	.jeu-v2-wrap .hostv2-section-heading:first-child {
		margin-top: 0;
	}
	.jeu-v2-section-filter {
		margin-left: auto;
		font-size: 0.95rem;
		font-weight: 400;
		color: var(--color--beige-dark);
		opacity: 0.5;
		cursor: pointer;
		transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
	}
	.jeu-v2-section-filter:hover {
		opacity: 0.85;
	}
	.jeu-v2-section-filter-active {
		opacity: 1;
		color: var(--color--marron);
	}
	.hostv2-card-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	.hostv2-card-item {
		display: flex;
		align-items: center;
		gap: 12px;
		background: #29343f;
		border-radius: 12px;
		padding: 12px;
		text-decoration: none;
		color: #eaddc0;
		transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}
	a.hostv2-card-item:hover {
		color: #eaddc0;
		text-decoration: none;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	}
	.hostv2-card-icon {
		position: relative;
		flex-shrink: 0;
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.7rem;
		color: #eaddc0;
	}
	.hostv2-card-icon .jeu-v2-thumb {
		width: 60px;
		height: 60px;
	}
	.hostv2-card-led {
		position: absolute;
		top: -4px;
		right: -4px;
		border: 2px solid #29343f;
		border-radius: 50%;
		line-height: 0;
	}
	.hostv2-card-body {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
		flex-grow: 1;
	}
	.hostv2-card-name {
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.hostv2-card-sub {
		font-size: 0.76rem;
		color: rgba(234, 221, 192, 0.6);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.hostv2-card-meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-top: 4px;
		font-size: 0.78rem;
		font-weight: 600;
	}
	.hostv2-card-meta i {
		padding-right: 4px;
	}
	.hostv2-card-meta-actions {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	/* Liste des serveurs d'un hébergement (info-host) : lignes sur fond sombre
	   séparées d'un filet, comme la liste des réglages des pages jeu — les
	   pastilles claires de .jeu-v2-item tranchaient trop sur la carte. */
	.hostv2-srv-list {
		display: flex;
		flex-direction: column;
		border-top: 1px solid rgba(234, 221, 192, 0.12);
	}
	.hostv2-srv-row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 10px 8px;
		border-bottom: 1px solid rgba(234, 221, 192, 0.12);
		color: #eaddc0;
		text-decoration: none;
		transition: background-color 0.15s ease-in-out;
	}
	a.hostv2-srv-row:hover {
		color: #eaddc0;
		text-decoration: none;
		background: rgba(234, 221, 192, 0.05);
	}
	.hostv2-srv-row .hostv2-card-icon,
	.hostv2-srv-row .hostv2-card-icon .jeu-v2-thumb {
		width: 42px;
		height: 42px;
	}
	.hostv2-srv-row .hostv2-card-icon .jeu-v2-thumb {
		border-radius: 8px;
	}
	.hostv2-srv-row .hostv2-card-led > div {
		width: 12px;
		height: 12px;
		box-shadow: none;
	}
	.hostv2-srv-body {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
		flex-grow: 1;
	}
	.hostv2-srv-name {
		font-weight: 700;
		font-size: 0.9rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.hostv2-srv-sub {
		font-size: 0.78rem;
		color: rgba(234, 221, 192, 0.6);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.hostv2-srv-date {
		flex-shrink: 0;
		font-size: 0.78rem;
		color: rgba(234, 221, 192, 0.6);
		text-align: right;
	}
	.hostv2-srv-players {
		display: flex;
		align-items: center;
		gap: 5px;
		flex-shrink: 0;
		min-width: 52px;
		justify-content: flex-end;
		font-size: 0.82rem;
		font-weight: 600;
	}
	.hostv2-srv-players i {
		color: var(--color--marron);
	}
	.jeu-v2-wrap .hostv2-card-led .led-red,
	.hostv2-card-led .led-red {
		animation: none;
	}

	/* --- Mes jeux v2 : liste dense unifiée (remplace la grille de cartes 2 colonnes) --- */
	.mesjeux-toolbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
	}
	.mesjeux-toolbar-actions {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
	}
	.mesjeux-search {
		display: flex;
		align-items: center;
		gap: 8px;
		background: #29343f;
		border: 1px solid rgba(234, 221, 192, 0.14);
		border-radius: 10px;
		padding: 8px 14px;
		min-width: 230px;
		color: rgba(234, 221, 192, 0.5);
	}
	.mesjeux-search input {
		border: none;
		background: none;
		outline: none;
		color: #eaddc0;
		font-size: 0.85rem;
		font-family: inherit;
		width: 100%;
	}
	.mesjeux-search input::placeholder {
		color: rgba(234, 221, 192, 0.45);
	}
	.mesjeux-tabs {
		display: flex;
		align-items: center;
		gap: 4px;
		background: rgba(234, 221, 192, 0.05);
		border-radius: 12px;
		padding: 4px;
		width: fit-content;
		flex-shrink: 0;
	}
	.mesjeux-tab {
		padding: 8px 18px;
		border-radius: 9px;
		font-size: 0.85rem;
		font-weight: 600;
		color: rgba(234, 221, 192, 0.65);
		cursor: pointer;
		user-select: none;
	}
	.mesjeux-tab span {
		opacity: 0.7;
	}
	.mesjeux-tab.active {
		background: var(--color--marron);
		color: #1d1d1d;
	}
	.mesjeux-tab.active span {
		opacity: 0.75;
	}
	.mesjeux-online-filter {
		margin-left: 10px;
		font-size: 0.95rem;
		color: var(--color--beige-dark);
		opacity: 0.5;
		cursor: pointer;
		transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
	}
	.mesjeux-online-filter:hover {
		opacity: 0.85;
	}
	.mesjeux-online-filter-active {
		opacity: 1;
		color: var(--color--marron);
	}
	.mesjeux-table {
		margin-top: 18px;
		background: #29343f;
		border-radius: 14px;
		padding: 6px 22px 10px;
		overflow-x: auto;
	}
	.mesjeux-thead,
	.mesjeux-row {
		display: grid;
		grid-template-columns: minmax(220px, 1.6fr) 130px 130px 100px 140px;
		align-items: center;
		column-gap: 16px;
		min-width: 800px;
	}
	.mesjeux-thead {
		padding: 14px 4px 12px;
		border-bottom: 1px solid rgba(234, 221, 192, 0.15);
	}
	.mesjeux-thead div {
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: rgba(234, 221, 192, 0.45);
	}
	.mesjeux-thead-actions {
		text-align: right;
	}
	.mesjeux-row {
		padding: 10px 4px;
		border-bottom: 1px solid rgba(234, 221, 192, 0.08);
	}
	.mesjeux-row:last-child {
		border-bottom: none;
	}
	.mesjeux-server {
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 0;
	}
	.mesjeux-thumb {
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		border-radius: 10px;
		overflow: hidden;
	}
	.mesjeux-thumb .jeu-v2-thumb {
		width: 36px;
		height: 36px;
		object-fit: cover;
	}
	.mesjeux-server-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	.mesjeux-name {
		font-size: 0.9rem;
		font-weight: 700;
		color: #eaddc0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mesjeux-game {
		font-size: 0.73rem;
		color: rgba(234, 221, 192, 0.5);
	}
	.mesjeux-status {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 0.82rem;
		font-weight: 600;
		color: #eaddc0;
	}
	.mesjeux-dot {
		flex-shrink: 0;
		width: 8px;
		height: 8px;
		border-radius: 50%;
	}
	.mesjeux-dot-green { background: #ABFF00; box-shadow: 0 0 6px #ABFF00; }
	.mesjeux-dot-yellow { background: #FFFF00; box-shadow: 0 0 6px #FFFF00; }
	.mesjeux-dot-blue { background: #24E0FF; box-shadow: 0 0 6px #24E0FF; }
	.mesjeux-dot-red { background: #FF0000; box-shadow: 0 0 6px #FF0000; }
	.mesjeux-players {
		font-size: 0.85rem;
		font-weight: 600;
		color: #eaddc0;
	}
	.mesjeux-players i {
		padding-right: 4px;
		color: rgba(234, 221, 192, 0.6);
	}
	.mesjeux-relation {
		display: flex;
		align-items: center;
	}
	.mesjeux-pill {
		display: inline-block;
		padding: 3px 11px;
		border-radius: 999px;
		font-size: 0.68rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		background: rgba(234, 221, 192, 0.08);
		color: rgba(234, 221, 192, 0.8);
		border: 1px solid rgba(234, 221, 192, 0.18);
	}
	.mesjeux-pill-favori {
		background: rgba(230, 103, 0, 0.15);
		color: var(--color--marron);
		border-color: rgba(230, 103, 0, 0.4);
	}
	.mesjeux-actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
	}

	.hostv2-kv-value-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}
	.hostv2-kv-value-row .hostv2-kv-value {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Valeur par défaut qui bloque le démarrage (pseudo admin Necesse,
	   GSLT, tokens...) : doit sauter aux yeux. */
	.hostv2-kv-value.hostv2-kv-value-default {
		color: #ff5c5c;
	}

	/* Réglage modifié depuis le dernier démarrage, pris en compte au prochain
	   (cf. Eco_Game_on_selfhosted_host.pending_settings). */
	.hostv2-kv-value.hostv2-kv-value-pending,
	.profil-v2-card-header.hostv2-kv-value-pending,
	.jeu-v2-action-icon.hostv2-kv-value-pending {
		color: var(--color--marron);
	}
	.hostv2-pending-notice {
		display: flex;
		gap: 10px;
		align-items: baseline;
		margin-top: 18px;
		padding: 12px 16px;
		border-left: 4px solid var(--color--marron);
		border-radius: 12px;
		background: #29343f;
		color: #eaddc0;
		text-align: left;
	}
	.hostv2-pending-notice > i {
		color: var(--color--marron);
	}
	/* Réglages figés (monde Eco déjà créé) : simple indication, ni clic ni
	   survol orange (contrairement au crayon jeu-v2-action-icon). */
	.hostv2-lock-icon {
		color: #eaddc0;
		opacity: 0.6;
		font-size: 1.05rem;
		cursor: default;
	}

	/* Dashboard admin (v2) */
	.dashboard-v2-wrap {
		max-width: 1100px;
		margin: 0 auto 40px;
		text-align: left;
	}
	.dashboard-v2-wrap h1 {
		text-align: center;
	}
	.dashboard-v2-stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 10px;
		margin-top: 20px;
	}
	a.profil-v2-stat {
		position: relative;
		text-decoration: none;
		color: inherit;
		transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
	}
	a.profil-v2-stat:hover {
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
		transform: translateY(-1px);
	}
	.dashboard-v2-stat-icon-alert {
		background: var(--color--marron);
	}
	.dashboard-v2-stat-badge {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #ff4d4d;
		border: 2px solid #29343f;
		box-shadow: 0 0 6px rgba(255, 77, 77, 0.7);
	}
	.dashboard-v2-section-label {
		font-size: 0.8rem;
		font-weight: 700;
		color: var(--color--beige-dark);
		text-transform: uppercase;
		letter-spacing: 0.03em;
		margin: 28px 0 10px;
	}
	.dashboard-v2-row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
	.dashboard-v2-row .profil-v2-card {
		margin-top: 0;
	}
	.dashboard-v2-chart-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
		gap: 18px;
	}
	.dashboard-v2-chart-grid .profil-v2-card {
		margin-top: 0;
	}
	.dashboard-v2-chart-box {
		position: relative;
		height: 280px;
	}
	.dashboard-v2-chart-total {
		font-size: 0.85rem;
		color: rgba(234, 221, 192, 0.6);
		margin-top: 10px;
		text-align: center;
	}
	.signalements-v2-stat-row {
		max-width: 420px;
		margin: 20px auto 0;
	}
	.signalements-v2-stat-row .dashboard-v2-stats {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 0;
	}
	.signalements-v2-empty {
		text-align: center;
		color: #8a8a8a;
		padding: 30px 18px;
	}
	.signalements-v2-empty i {
		font-size: 1.6rem;
		color: var(--color--marron);
	}
	.signalements-v2-empty p {
		margin: 10px 0 0;
	}
	.contacts-v2-stat-row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		max-width: 420px;
		margin: 20px auto 0;
	}
	.contacts-v2-history-item-wrap {
		background: var(--color--beige-dark);
		border-radius: 10px;
		margin-bottom: 8px;
		overflow: hidden;
	}
	.contacts-v2-history-item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 12px;
		cursor: pointer;
	}
	.contacts-v2-history-chevron {
		flex-shrink: 0;
		transition: transform 0.2s ease-in-out;
		color: #8a8a8a;
	}
	.contacts-v2-history-item:not(.collapsed) .contacts-v2-history-chevron {
		transform: rotate(180deg);
	}
	.contacts-v2-history-answer {
		padding: 0 12px 12px 58px;
		color: #4a4a4a;
		font-size: 0.85rem;
		line-height: 1.5;
		overflow-wrap: break-word;
	}
	.contacts-v2-history-icon {
		flex-shrink: 0;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: var(--color--anthracite);
		color: var(--color--beige);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.contacts-v2-history-body {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
		flex-grow: 1;
	}
	.contacts-v2-history-subject {
		font-weight: 600;
		color: var(--color--anthracite);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.contacts-v2-history-meta {
		font-size: 0.75rem;
		color: #8a8a8a;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.contacts-v2-account-link {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		color: var(--color--anthracite);
		font-weight: 600;
		text-decoration: none;
	}
	.contacts-v2-account-link:hover {
		color: var(--color--marron);
	}
	.contacts-v2-account-none {
		color: #8a8a8a;
		font-style: italic;
		font-size: 0.85rem;
	}
	.serverdetail-v2-hero {
		margin-top: 14px;
		text-align: center;
	}
	.serverdetail-v2-hero .jeu-v2-thumb {
		width: 100%;
		max-width: 320px;
		height: auto;
		border-radius: 14px;
	}
	.hostv2-log-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.hostv2-log-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		background: #ececec;
		border-radius: 10px;
		padding: 10px 14px;
	}
	.hostv2-log-body {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.hostv2-log-date {
		font-size: 0.74rem;
		color: #8a8a8a;
	}
	.hostv2-log-desc {
		font-size: 0.88rem;
		font-weight: 600;
		color: var(--color--anthracite);
	}
	.hostv2-log-pill {
		flex-shrink: 0;
		font-size: 0.74rem;
		font-weight: 700;
		padding: 4px 10px;
		border-radius: 20px;
		color: var(--color--white);
		white-space: nowrap;
	}
	/* Étape en cours sous une action (progression steamcmd, lancement...),
	   cf. Action_on_game_on_selfhosted_host.progress_display. */
	.hostv2-log-progress {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin: -4px 14px 4px;
	}
	.hostv2-log-progress-label {
		font-size: 0.74rem;
		color: rgba(234, 221, 192, 0.75);
	}
	.hostv2-log-progress-bar {
		height: 6px;
		border-radius: 3px;
		background: rgba(234, 221, 192, 0.15);
		overflow: hidden;
	}
	.hostv2-log-progress-bar > div {
		height: 100%;
		background: var(--color--marron);
		transition: width 0.5s ease;
	}
	.hostv2-log-pill-orange {
		background: var(--color--marron);
	}
	.hostv2-log-pill-green {
		background: #2e8b57;
	}
	.hostv2-log-pill-red {
		background: #d64545;
	}
	.hostv2-log-pill-gray {
		background: #8a8a8a;
	}
	.hostv2-test-btn {
		display: inline-flex;
		align-items: center;
		color: var(--color--beige);
		background: var(--color--anthracite);
		border: none;
		border-radius: 20px;
		padding: 6px 14px;
		font-size: 0.8rem;
		font-weight: 600;
		cursor: pointer;
		transition: opacity 0.15s ease-in-out;
	}
	.hostv2-test-btn:hover {
		opacity: 0.85;
	}
	.hostv2-portresult {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
	}
	.hostv2-portresult-badges {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.hostv2-portresult-error {
		font-size: 0.8rem;
		color: #d64545;
		font-weight: 600;
	}
	.hostv2-portresult-spinner {
		font-size: 0.78rem;
		color: #8a8a8a;
	}
	.hostv2-security-card {
		margin-top: 18px;
		border-left: 4px solid #d64545;
	}
	.hostv2-security-card .profil-v2-card-header i {
		color: #d64545;
	}
	.hostv2-security-intro {
		font-size: 0.85rem;
		color: rgba(234, 221, 192, 0.6);
		margin: -6px 0 14px;
	}
	.hostv2-danger-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: #d64545;
		background: transparent;
		border: 1px solid #d64545;
		border-radius: 20px;
		padding: 8px 16px;
		font-size: 0.85rem;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
	}
	.hostv2-danger-btn:hover {
		background: #d64545;
		color: var(--color--white);
	}
	.hostv2-caution-card {
		margin-top: 18px;
		border-left: 4px solid var(--color--marron);
	}
	.hostv2-caution-card .profil-v2-card-header i {
		color: var(--color--marron);
	}
	.hostv2-warning-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--color--marron);
		background: transparent;
		border: 1px solid var(--color--marron);
		border-radius: 20px;
		padding: 8px 16px;
		font-size: 0.85rem;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
	}
	.hostv2-warning-btn:hover {
		background: var(--color--marron);
		color: var(--color--white);
	}

	/* --- Ajouter un serveur de jeu --- */
	.addserver-v2-card {
		max-width: 520px;
		margin: 20px auto 24px;
		border-radius: 22px;
		padding: 26px 26px;
	}
	.addserver-v2-card .profil-modal-v3-field label {
		color: #eaddc0;
	}
	.addserver-v2-hidden-field {
		display: none;
	}
	.addserver-v2-card .profil-modal-v3-field input,
	.addserver-v2-card .profil-modal-v3-field select {
		border-radius: 14px;
	}
	.addserver-v2-submit {
		max-width: 240px;
	}

	/* --- Connexion --- */
	.login-v2-card {
		max-width: 430px;
		margin: 20px auto 0;
		border-radius: 22px;
		padding: 26px 26px;
	}
	.login-v2-card .profil-modal-v3-field label {
		color: #eaddc0;
	}
	.login-v2-card .profil-modal-v3-field input {
		border-radius: 14px;
	}
	.login-v2-links {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		margin-top: 20px;
		padding-top: 18px;
		border-top: 1px solid rgba(234, 221, 192, 0.2);
		font-size: 0.85rem;
		color: rgba(234, 221, 192, 0.6);
		text-align: center;
	}
	.login-v2-links a {
		color: #eaddc0;
		font-weight: 600;
		text-decoration: underline;
	}
	.login-v2-links a:hover {
		color: var(--color--marron);
		text-decoration: underline;
	}
	.login-v2-divider {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 20px 0;
		color: rgba(234, 221, 192, 0.5);
		font-size: 0.78rem;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}
	.login-v2-divider::before,
	.login-v2-divider::after {
		content: "";
		flex: 1;
		height: 1px;
		background: rgba(234, 221, 192, 0.15);
	}
	.login-v2-google-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		background: #fff;
		color: #3c4043;
		border: 1px solid rgba(0, 0, 0, 0.15);
		border-radius: 14px;
		padding: 12px 16px;
		font-weight: 600;
		font-size: 0.95rem;
		text-decoration: none;
		transition: box-shadow 0.15s ease-in-out;
	}
	.login-v2-google-btn:hover {
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
		color: #3c4043;
		text-decoration: none;
	}
	.login-v2-google-btn i {
		color: #4285F4;
		font-size: 1.1rem;
	}
	.login-v2-google-pending {
		text-align: center;
		color: rgba(234, 221, 192, 0.7);
		margin: 0 0 18px;
	}
	.login-v2-google-pending strong {
		color: #eaddc0;
	}

	/* --- F.A.Q. (design "feed", cohérent avec le reste) --- */
	.faq-v2-intro {
		max-width: 860px;
		margin: 20px auto 0;
		background: #29343f;
		color: #eaddc0;
	}
	.faq-v2-intro p {
		margin-bottom: 12px;
	}
	.faq-v2-intro ul {
		margin-top: 4px;
	}
	.faq-v2-hero-img {
		width: 100%;
		max-height: 320px;
		object-fit: cover;
		border-radius: 16px;
		margin-bottom: 16px;
	}
	.faq-v2-feed {
		max-width: 860px;
		margin: 20px auto 0;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.faq-v2-item {
		background: #29343f;
		border-radius: 12px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		overflow: hidden;
	}
	.faq-v2-question {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		background: #29343f;
		padding: 16px 18px;
		font-size: 0.95rem;
		font-weight: 700;
		color: #eaddc0;
		text-align: left;
		cursor: pointer;
	}
	.faq-v2-question:focus-visible {
		outline: 2px solid #eaddc0;
		outline-offset: -2px;
	}
	.faq-v2-chevron {
		flex-shrink: 0;
		transition: transform 0.2s ease-in-out;
		color: #eaddc0;
		opacity: 0.6;
	}
	.faq-v2-question:not(.collapsed) .faq-v2-chevron {
		transform: rotate(180deg);
	}
	.faq-v2-answer {
		padding: 0 18px 18px;
		color: rgba(234, 221, 192, 0.75);
		font-size: 0.9rem;
		line-height: 1.55;
	}
	.faq-v2-answer p {
		margin: 0 0 10px;
	}
	.faq-v2-answer p:last-child {
		margin-bottom: 0;
	}
	.faq-v2-link {
		color: #eaddc0;
		font-weight: 600;
		text-decoration: underline;
	}
	.faq-v2-link:hover {
		color: var(--color--marron);
		text-decoration: underline;
	}

	/* --- Mentions légales / CGU --- */
	.legal-v2-card {
		max-width: 860px;
		margin: 20px auto 0;
		color: #eaddc0;
	}
	.legal-v2-card p {
		margin-bottom: 12px;
		line-height: 1.55;
	}
	.legal-v2-card ul {
		margin: 0 0 12px;
	}
	.legal-v2-tip {
		display: flex;
		gap: 10px;
		align-items: flex-start;
		background: rgba(234, 221, 192, 0.06);
		border-left: 4px solid var(--color--marron);
		border-radius: 8px;
		padding: 12px 14px;
		margin: 12px 0;
		font-size: 0.88rem;
	}
	.legal-v2-tip i {
		flex-shrink: 0;
		margin-top: 2px;
		color: var(--color--marron);
	}
	.legal-v2-tip p {
		margin: 0;
	}
	.legal-v2-tip-danger {
		border-left-color: #d64545;
	}
	.legal-v2-tip-danger i {
		color: #d64545;
	}
	.legal-v2-steps {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 10px 0 20px;
	}
	.legal-v2-step {
		display: flex;
		gap: 14px;
		background: rgba(234, 221, 192, 0.05);
		border: 1px solid rgba(234, 221, 192, 0.12);
		border-radius: 10px;
		padding: 14px 16px;
	}
	.legal-v2-step-num {
		flex-shrink: 0;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: var(--color--marron);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 0.82rem;
	}
	.legal-v2-step-body {
		min-width: 0;
	}
	.legal-v2-step-title {
		display: block;
		font-weight: 700;
		color: #eaddc0;
		font-size: 0.9rem;
		margin-bottom: 4px;
	}
	.legal-v2-step .legal-v2-step-text {
		margin: 0;
	}
	.legal-v2-step .legal-v2-step-text + .legal-v2-step-text {
		margin-top: 8px;
	}
	.legal-v2-subheading {
		font-weight: 700;
		color: #eaddc0;
		margin-top: 20px !important;
		margin-bottom: 6px !important;
	}
	.legal-v2-card .profil-v2-card-header ~ .legal-v2-subheading:first-of-type {
		margin-top: 4px !important;
	}
	.legal-v2-link {
		color: #eaddc0;
		font-weight: 600;
		text-decoration: underline;
	}
	.legal-v2-link:hover {
		color: var(--color--marron);
		text-decoration: underline;
	}

	/* --- Politique de confidentialité / Mentions légales (fond proche du fond de page, comme la FAQ) --- */
	.privacy-v2-card,
	.mentions-v2-card {
		background: #29343f;
		color: #eaddc0;
	}
	.privacy-v2-card .profil-v2-card-header,
	.mentions-v2-card .profil-v2-card-header {
		color: #eaddc0;
	}
	.privacy-v2-card .legal-v2-subheading,
	.mentions-v2-card .legal-v2-subheading {
		color: #eaddc0;
		margin-top: 36px !important;
	}
	.privacy-v2-card .legal-v2-link,
	.mentions-v2-card .legal-v2-link {
		color: #eaddc0;
	}
	.privacy-v2-card .legal-v2-link:hover,
	.mentions-v2-card .legal-v2-link:hover {
		color: var(--color--marron);
	}

	/* --- Article --- */
	.article-v2-wrap {
		max-width: 820px;
	}
	.article-v2-card {
		padding: 28px 32px;
	}
	.article-v2-hero-img {
		width: 100%;
		max-height: 260px;
		object-fit: cover;
		border-radius: 12px;
		margin-bottom: 20px;
	}
	.article-v2-meta {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #8a8a8a;
		font-size: 0.85rem;
		margin-bottom: 22px;
		padding-bottom: 18px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}
	.article-v2-meta-sep {
		opacity: 0.6;
	}
	.article-v2-content {
		color: #eaddc0;
		font-size: 1.02rem;
		line-height: 1.75;
		overflow-wrap: break-word;
		overflow-x: auto;
	}
	.article-v2-content p {
		margin: 0 0 16px;
	}
	.article-v2-content h1,
	.article-v2-content h2,
	.article-v2-content h3,
	.article-v2-content h4 {
		font-weight: 700;
		color: #eaddc0;
		margin: 28px 0 12px;
		line-height: 1.3;
	}
	.article-v2-content h1:first-child,
	.article-v2-content h2:first-child,
	.article-v2-content h3:first-child {
		margin-top: 0;
	}
	.article-v2-content ul,
	.article-v2-content ol {
		margin: 0 0 16px;
		padding-left: 22px;
	}
	.article-v2-content li {
		margin-bottom: 6px;
	}
	.article-v2-content img {
		max-width: 100%;
		height: auto;
		border-radius: 10px;
		margin: 8px 0;
	}
	.article-v2-content a {
		color: #eaddc0;
		font-weight: 600;
		text-decoration: underline;
	}
	.article-v2-content a:hover {
		color: var(--color--marron);
	}
	.article-v2-content blockquote {
		margin: 16px 0;
		padding: 12px 18px;
		background: var(--color--beige-dark);
		border-left: 4px solid var(--color--marron);
		border-radius: 8px;
		color: var(--color--anthracite);
	}
	.article-v2-empty {
		text-align: center;
		color: #8a8a8a;
		padding: 40px 20px;
	}
	.article-v2-empty i {
		font-size: 1.8rem;
		color: var(--color--marron);
	}
	.article-v2-empty p {
		margin: 12px 0 0;
	}

	/* --- Accueil : accroche --- */
	.home-v3-hero {
		text-align: center;
		padding: 40px 24px 34px;
		margin: 10px 0 0;
		border-radius: 16px;
		/* Ardoise plus sombre que le fond de page (#384959) + halo bleu clair :
		   un halo orange sur ce bleu virait au brun ; l'orange reste réservé
		   au bouton et aux icônes. */
		background: radial-gradient(ellipse 70% 100% at 50% -20%, rgba(130, 170, 210, 0.22), transparent 70%), linear-gradient(180deg, #2c3a48, #222e3b);
		border: 1px solid rgba(234, 221, 192, 0.10);
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
	}
	.home-v3-hero h1 {
		font-size: 2.6rem;
		line-height: 1.2;
		margin: 0 0 14px;
	}
	.home-v3-hero-lead {
		font-size: 1.15rem;
		max-width: 720px;
		margin: 0 auto 18px;
		color: var(--color--beige-dark);
	}
	.home-v3-hero-points {
		list-style: none;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px 26px;
		padding: 0;
		margin: 0 0 24px;
		font-weight: 600;
		color: var(--color--beige-dark);
	}
	/* padding: 0 : annule le .bi { padding-right: 5px } global, qui décalait
	   le texte après les icônes Bootstrap Icons et pas après Font Awesome. */
	.home-v3-hero-points i {
		color: var(--color--marron);
		margin-right: 2px;
		padding: 0;
	}
	/* Glyphe dessiné avec ~2px de vide à droite dans la police : sans ça,
	   son texte paraît plus éloigné que celui des deux autres icônes. */
	.home-v3-hero-points .bi-stopwatch {
		margin-right: 0;
	}
	.home-v3-hero-actions {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 12px;
	}
	.home-v3-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 12px 26px;
		border-radius: 28px;
		font-weight: 700;
		font-size: 1rem;
		text-decoration: none;
		transition: background-color 0.15s ease-in-out, filter 0.15s ease-in-out;
	}
	/* Orange rouille plutôt que --color--marron (#e66700, trop vif en grand
	   aplat) : c'est l'orange le plus clair sur lequel le texte sable atteint
	   le contraste minimum de 4,5:1 (4,6:1). */
	.home-v3-btn-primary {
		background: #9e490e;
		color: var(--color--beige-dark);
	}
	.home-v3-btn-primary:hover {
		filter: brightness(1.1);
		color: var(--color--beige-dark);
		text-decoration: none;
	}
	.home-v3-btn-ghost {
		border: 2px solid var(--color--beige-dark);
		color: var(--color--beige-dark);
	}
	.home-v3-btn-ghost:hover {
		background: rgba(234, 221, 192, 0.1);
		color: var(--color--beige-dark);
		text-decoration: none;
	}
	.home-v3-section-title {
		font-size: 1.6rem;
		margin: 32px 0 14px;
	}

	/* --- Home / Actualités --- */
	.home-v2-wrap {
		max-width: 1100px;
	}
	.home-v2-featured-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		margin-top: 20px;
	}
	.home-v2-article-card {
		display: flex;
		flex-direction: column;
		background: var(--color--anthracite);
		border-radius: 12px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
		overflow: hidden;
		text-decoration: none;
		color: var(--color--beige-dark);
		transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}
	.home-v2-article-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
		color: var(--color--beige-dark);
		text-decoration: none;
	}
	.home-v2-article-img {
		width: 100%;
		height: 170px;
		object-fit: cover;
		/* Vignette potentiellement de la même teinte sombre que la carte
		   (thème sombre du site) : sans cette ligne, la limite entre
		   l'image et le corps de la carte disparaît visuellement. */
		border-bottom: 1px solid rgba(234, 221, 192, 0.15);
	}
	.home-v2-article-body {
		padding: 16px 18px 18px;
	}
	.home-v2-article-title {
		font-size: 1.05rem;
		font-weight: 700;
		margin: 0 0 10px;
		line-height: 1.35;
		min-height: 2.7em;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.home-v2-article-date {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 0.78rem;
		color: var(--color--beige-dark);
		opacity: 0.75;
	}
	.home-v2-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.home-v2-list-item {
		display: flex;
		align-items: center;
		gap: 14px;
		min-width: 0;
		background: var(--color--anthracite);
		border-radius: 10px;
		padding: 10px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
		text-decoration: none;
		color: var(--color--beige-dark);
		transition: box-shadow 0.15s ease-in-out;
	}
	.home-v2-list-item:hover {
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
		color: var(--color--beige-dark);
		text-decoration: none;
	}
	.home-v2-list-item-hidden {
		display: none;
	}
	.home-v2-list-thumb {
		width: 96px;
		height: 54px;
		object-fit: cover;
		border-radius: 8px;
		flex-shrink: 0;
		border: 1px solid rgba(234, 221, 192, 0.15);
	}
	.home-v2-list-body {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
	}
	.home-v2-list-title {
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.home-v2-list-date {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 0.78rem;
		color: var(--color--beige-dark);
		opacity: 0.75;
	}

	/* --- Configuration des cookies --- */
	.cookie-v2-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 14px 0 18px;
	}
	.cookie-v2-row {
		display: flex;
		align-items: baseline;
		gap: 14px;
		background: #ececec;
		border: 1px solid #dcdcdc;
		border-radius: 10px;
		padding: 10px 14px;
	}
	.cookie-v2-name {
		flex-shrink: 0;
		min-width: 190px;
		font-family: monospace;
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--color--anthracite);
	}
	.cookie-v2-desc {
		font-size: 0.85rem;
		color: #5a5a5a;
	}
	.legal-v2-card .profil-modal-v3-actions .profil-modal-v3-btn {
		max-width: 260px;
		padding: 12px 0;
	}
	.legal-v2-card .profil-modal-v3-actions > form {
		flex: 1;
		max-width: 260px;
	}
	.legal-v2-card .profil-modal-v3-actions > form .profil-modal-v3-btn {
		width: 100%;
		max-width: none;
	}

	/* --- Serveurs self-hosted (cartes conservées à 336x280 pour les pubs AdSense) --- */
	.selfhosted-v2-wrap .card-self-hosted,
	.selfhosted-v2-wrap .card-self-hosted-WIP {
		overflow: hidden;
		position: relative;
		border: none;
		background: var(--color--anthracite);
		transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}
	.selfhosted-v2-wrap .card-self-hosted:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
	}
	.selfhosted-v2-wrap .card-img-top {
		object-fit: cover;
	}
	.selfhosted-v2-wrap .card-self-hosted .badge,
	.selfhosted-v2-wrap .card-self-hosted-WIP .badge {
		border-radius: 20px;
		font-weight: 600;
		font-size: 0.68rem;
		letter-spacing: 0.02em;
		padding: 5px 10px;
		margin: 2px;
	}
	.selfhosted-v2-wrap .card-self-hosted .text-bg-secondary,
	.selfhosted-v2-wrap .card-self-hosted-WIP .text-bg-secondary {
		background-color: rgba(255, 255, 255, 0.15) !important;
		color: var(--color--beige-dark) !important;
	}
	.selfhosted-v2-wrap .card-self-hosted .text-bg-warning,
	.selfhosted-v2-wrap .card-self-hosted-WIP .text-bg-warning {
		background-color: #9e490e !important;
		color: var(--color--beige-dark) !important;
	}
	/* Sable plutôt que le quasi-blanc des règles globales .card-title et
	   .ad-text-color, partagées avec d'autres pages. Badges orange en #9e490e
	   (et non --color--marron) : le sable n'y atteint le contraste minimum de
	   4,5:1 que sur cet orange plus sombre, le même que le bouton de l'accueil. */
	.selfhosted-v2-wrap .card-title,
	.selfhosted-v2-wrap .ad-text-color {
		color: var(--color--beige-dark);
	}
	.selfhosted-v2-wrap .card-title {
		margin-bottom: 8px;
	}
	.selfhosted-v2-wrap .card-title-WIP {
		margin-bottom: 8px;
		color: var(--color--beige-dark);
	}
	.selfhosted-v2-wrap .card-self-hosted-WIP img {
		filter: grayscale(70%) brightness(0.65);
	}
	.selfhosted-v2-wrap .card-body-self-WIP {
		background: var(--color--anthracite);
	}
	.selfhosted-v2-wrap .selfhosted-v2-soon-badge {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 2;
		background: #9e490e;
		color: var(--color--beige-dark);
		font-size: 0.68rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		border-radius: 20px;
		padding: 5px 10px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	}
	.selfhosted-v2-wrap .selfhosted-v2-os-badge {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 2;
		display: flex;
		gap: 7px;
		background: rgba(0, 0, 0, 0.55);
		border-radius: 20px;
		padding: 5px 9px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	}
	.selfhosted-v2-wrap .selfhosted-v2-os-badge i {
		color: var(--color--beige-dark);
		font-size: 0.78rem;
		opacity: 0.35;
	}
	.selfhosted-v2-wrap .selfhosted-v2-os-badge i.selfhosted-v2-os-active {
		opacity: 1;
	}

	/* --- PC recommandés (cartes conservées à 336x280 pour les pubs AdSense) --- */
	.pcrec-v2-wrap {
		max-width: 1060px;
	}
	.pcrec-v2-updated {
		text-align: right;
		font-size: 0.82rem;
		font-style: italic;
		color: #8a8a8a;
		margin: 0 0 20px;
	}
	.pcrec-v2-section {
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--color--beige);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		margin: 24px 0 12px;
	}
	.pcrec-v2-wrap .card-column .pcrec-v2-section:first-child {
		margin-top: 0;
	}
	.pcrec-v2-wrap .card-self-hosted,
	.pcrec-v2-wrap .card-self-hosted-WIP {
		overflow: hidden;
		position: relative;
		border: none;
		background: var(--color--anthracite);
		transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}
	.pcrec-v2-wrap .card-self-hosted:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
	}
	.pcrec-v2-wrap .card-img-top-pc {
		object-fit: cover;
	}
	.pcrec-v2-wrap .card-self-hosted-WIP .card-img-top-pc {
		filter: grayscale(70%) brightness(0.65);
	}
	.pcrec-v2-wrap .card-body-self-WIP {
		background: var(--color--anthracite);
	}
	.badge-pc-recommended {
		border-radius: 20px;
		font-weight: 600;
		font-size: 0.68rem;
		letter-spacing: 0.02em;
		padding: 5px 10px;
		margin: 2px;
	}
	.pcrec-v2-badge-cpu {
		background: var(--color--marron);
		color: var(--color--beige);
	}
	.pcrec-v2-badge-gpu {
		background: #2e8b57;
		color: #fff;
	}
	.pcrec-v2-badge-ram {
		background: #4a7ba6;
		color: #fff;
	}
	.pcrec-v2-badge-other {
		background: rgba(255, 255, 255, 0.15);
		color: var(--color--beige);
	}

	/* --- Détail PC recommandé (carte Amazon conservée à 336x280 pour les pubs AdSense) --- */
	.pcdetail-v2-top {
		display: flex;
		align-items: stretch;
		gap: 16px;
		margin-top: 6px;
		flex-wrap: wrap;
	}
	.pcdetail-v2-specs {
		flex: 1;
		min-width: 280px;
	}
	.pcdetail-v2-wrap .card-am {
		width: 336px;
		height: 280px;
		margin: 18px 0 0;
		float: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		border: none;
	}
	.pcdetail-v2-am-icon {
		font-size: 2rem;
		color: var(--color--beige);
		opacity: 0.6;
	}
	.pcdetail-v2-am-label {
		color: var(--color--beige);
		font-weight: 700;
		font-size: 0.95rem;
	}
	.pcdetail-v2-perf {
		max-width: none;
	}
	.pcdetail-v2-select-field {
		max-width: 320px;
	}
	.pcdetail-v2-fps-card {
		background: #ececec;
		border-radius: 12px;
		padding: 16px 18px;
		margin-top: 16px;
	}
	.pcdetail-v2-fps-header {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 12px;
	}
	.pcdetail-v2-fps-thumb {
		width: 40px;
		height: 40px;
		border-radius: 8px;
		object-fit: cover;
	}
	.pcdetail-v2-fps-title {
		font-weight: 700;
		color: var(--color--anthracite);
	}
	.pcdetail-v2-fps-colhead,
	.pcdetail-v2-fps-row {
		display: grid;
		grid-template-columns: 70px repeat(3, 1fr);
		align-items: center;
		gap: 6px;
	}
	.pcdetail-v2-fps-colhead {
		font-size: 0.68rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: #8a8a8a;
		text-align: center;
		padding-bottom: 6px;
		border-bottom: 1px solid #ddd;
		margin-bottom: 6px;
	}
	.pcdetail-v2-fps-colhead span:first-child {
		text-align: left;
	}
	.pcdetail-v2-fps-row {
		padding: 3px 0;
	}
	.pcdetail-v2-fps-label {
		font-weight: 600;
		font-size: 0.85rem;
		color: var(--color--anthracite);
	}
	.pcdetail-v2-fps-pill {
		text-align: center;
		border-radius: 20px;
		padding: 5px 0;
		font-weight: 700;
		font-size: 0.8rem;
		color: #fff;
		margin: 0 3px;
	}
	.pcdetail-v2-fps-red {
		background: #c0392b;
	}
	.pcdetail-v2-fps-orange {
		background: #c07a1f;
	}
	.pcdetail-v2-fps-green {
		background: #2e8b57;
	}
	.pcdetail-v2-source {
		margin-top: 18px;
		font-size: 0.9rem;
		color: #eaddc0;
	}

	/* --- Fiche jeu self-hosted (design "feed", ex : 7 Days to Die) --- */
	.selfhosted-detail-v2-wrap {
		max-width: 1000px;
	}
	.selfhosted-detail-v2-layout {
		display: flex;
		align-items: flex-start;
		gap: 20px;
		margin-top: 6px;
	}
	.selfhosted-detail-v2-tabs {
		flex-shrink: 0;
		width: 220px;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	.selfhosted-detail-v2-tab {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 14px;
		border-radius: 10px;
		color: #eaddc0;
		font-weight: 600;
		font-size: 0.9rem;
		cursor: pointer;
		transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
	}
	.selfhosted-detail-v2-tab:hover {
		background: #33465a;
	}
	.selfhosted-detail-v2-tab.column1_self_hosted_li_activated {
		background: var(--color--marron);
		color: var(--color--beige);
	}
	.selfhosted-detail-v2-tab .guide-install-img {
		width: 20px;
		height: 20px;
	}
	.selfhosted-detail-v2-content {
		flex: 1;
		min-width: 0;
		color: #eaddc0;
		line-height: 1.6;
	}
	.selfhosted-detail-v2-content p {
		margin: 0 0 12px;
	}
	.selfhosted-detail-v2-content ul {
		margin: 0 0 12px;
		padding-left: 20px;
	}
	.selfhosted-detail-v2-content li {
		margin-bottom: 6px;
	}
	.selfhosted-detail-v2-content h3 {
		font-family: "Golos Text", sans-serif;
		font-size: 2rem;
		line-height: 135%;
		color: #eaddc0;
		font-weight: 700;
		margin: 22px 0 12px;
	}
	.selfhosted-detail-v2-content > div > h3:first-child {
		margin-top: 0;
	}
	.selfhosted-detail-v2-subheading {
		font-weight: 700;
		font-size: 0.78rem;
		color: rgba(234, 221, 192, 0.6);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		border-bottom: 1px solid rgba(234, 221, 192, 0.15);
		padding-bottom: 4px;
		margin: 20px 0 10px !important;
	}
	/* Titre de thème d'une liste de réglages (onglet Réglages des pages jeu) :
	   bandeau à liseré orange plutôt que le simple trait du sous-titre de
	   base, identique aux séparateurs de lignes et donc noyé dans la liste. */
	.selfhosted-detail-v2-subheading.selfhosted-detail-v2-theme-heading {
		font-size: 0.9rem;
		color: #eaddc0;
		letter-spacing: 0.05em;
		background: rgba(234, 221, 192, 0.07);
		border-bottom: none;
		border-left: 3px solid var(--color--marron);
		border-radius: 6px;
		padding: 9px 12px;
		margin: 34px 0 4px !important;
	}
	.selfhosted-detail-v2-theme-heading i {
		color: var(--color--marron);
	}
	.selfhosted-detail-v2-content .legal-v2-link {
		color: #eaddc0;
	}
	.selfhosted-detail-v2-content .legal-v2-link:hover {
		color: var(--color--marron);
	}
	.selfhosted-detail-v2-hero-img {
		width: 100%;
		max-height: 280px;
		object-fit: cover;
		border-radius: 12px;
		margin-bottom: 16px;
	}
	.selfhosted-detail-v2-server-img {
		display: block;
		width: 320px;
		max-width: 100%;
		margin: 10px auto;
		border-radius: 8px;
	}
	.selfhosted-detail-v2-video-wrap {
		position: relative;
		height: 0;
		padding-top: 56.25%;
		margin: 16px 0;
		border-radius: 12px;
		overflow: hidden;
	}
	.selfhosted-detail-v2-video-wrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	.selfhosted-detail-v2-wrap-compact .selfhosted-detail-v2-hero-img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 180px;
		object-fit: contain;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	.selfhosted-detail-v2-wrap-compact .selfhosted-detail-v2-video-wrap {
		max-width: 420px;
		height: auto;
		aspect-ratio: 16 / 9;
		padding-top: 0;
		margin-left: auto;
		margin-right: auto;
	}
	.selfhosted-detail-v2-tip {
		background: var(--color--beige-dark);
		color: var(--color--anthracite);
		border-left: 4px solid var(--color--marron);
		border-radius: 8px;
		padding: 12px 14px;
		margin: 12px 0;
		font-size: 0.9rem;
		overflow-wrap: break-word;
	}
	.selfhosted-detail-v2-tip .legal-v2-link {
		color: var(--color--anthracite);
	}
	.selfhosted-detail-v2-tip-danger {
		border-left-color: #d64545;
	}
	.selfhosted-detail-v2-tip-danger i {
		color: #d64545;
	}
	.selfhosted-detail-v2-param-list {
		display: flex;
		flex-direction: column;
		margin: 10px 0 16px;
		border-top: 1px solid rgba(234, 221, 192, 0.12);
	}
	/* Liste juste sous un sous-titre de thème : le trait du sous-titre sert
	   déjà de séparateur, un second trait en haut de liste faisait double ligne. */
	.selfhosted-detail-v2-subheading + .selfhosted-detail-v2-param-list,
	.selfhosted-detail-v2-theme-note + .selfhosted-detail-v2-param-list {
		border-top: none;
		margin-top: 0;
	}
	/* Précision sous un titre de thème (modes concernés, lien d'aide...) :
	   même rendu qu'une description de réglage, pas un paragraphe courant. */
	.selfhosted-detail-v2-theme-note {
		color: rgba(234, 221, 192, 0.65);
		font-size: 0.85rem;
		line-height: 1.45;
		margin: 8px 0 0;
		padding-bottom: 8px;
		border-bottom: 1px solid rgba(234, 221, 192, 0.12);
	}
	.selfhosted-detail-v2-param-row {
		display: flex;
		align-items: baseline;
		gap: 16px;
		padding: 9px 0;
		border-bottom: 1px solid rgba(234, 221, 192, 0.12);
	}
	.selfhosted-detail-v2-param-name {
		flex: 0 0 190px;
		font-weight: 700;
		color: #eaddc0;
		font-size: 0.85rem;
	}
	.selfhosted-detail-v2-param-desc {
		flex: 1;
		min-width: 0;
		color: rgba(234, 221, 192, 0.65);
		font-size: 0.85rem;
		line-height: 1.45;
	}
	/* Étapes en frise verticale sur le fond sombre (numéro cerclé orange relié
	   au suivant par un trait) : les anciens blocs gris clairs tranchaient trop. */
	.selfhosted-detail-v2-steps {
		display: flex;
		flex-direction: column;
		margin: 10px 0 16px;
	}
	.selfhosted-detail-v2-step {
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding-bottom: 16px;
	}
	.selfhosted-detail-v2-step:last-child {
		padding-bottom: 0;
	}
	.selfhosted-detail-v2-step:not(:last-child)::before {
		content: "";
		position: absolute;
		left: 13px;
		top: 32px;
		bottom: 4px;
		width: 2px;
		background: rgba(234, 221, 192, 0.12);
	}
	.selfhosted-detail-v2-step-num {
		flex-shrink: 0;
		width: 28px;
		height: 28px;
		box-sizing: border-box;
		border-radius: 50%;
		border: 2px solid var(--color--marron);
		background: rgba(230, 103, 0, 0.1);
		color: #eaddc0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 0.85rem;
	}
	.selfhosted-detail-v2-step-text {
		color: rgba(234, 221, 192, 0.85);
		font-size: 0.9rem;
		line-height: 1.5;
		padding-top: 3px;
	}
	.selfhosted-detail-v2-step-text .legal-v2-link {
		color: #eaddc0;
	}
	.selfhosted-detail-v2-step-text .legal-v2-link:hover {
		color: var(--color--marron);
	}
	.selfhosted-detail-v2-code {
		background: var(--color--anthracite);
		color: var(--color--beige);
		font-family: monospace;
		font-size: 0.9rem;
		border-radius: 8px;
		padding: 12px 16px;
		margin: 10px 0;
		overflow-x: auto;
	}
	.selfhosted-detail-v2-content .forum-v2-new-btn {
		margin: 2px 0 16px;
	}
	.selfhosted-detail-v2-quickfacts {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		margin: 4px 0 20px;
	}
	.selfhosted-detail-v2-quickfact {
		flex: 1;
		min-width: 130px;
		background: #33465a;
		border-radius: 10px;
		padding: 10px 12px;
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.selfhosted-detail-v2-quickfact i {
		color: var(--color--marron);
		font-size: 1.2rem;
	}
	.selfhosted-detail-v2-quickfact-label {
		display: block;
		font-size: 0.68rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: rgba(234, 221, 192, 0.6);
	}
	.selfhosted-detail-v2-quickfact-value {
		display: block;
		font-size: 0.92rem;
		font-weight: 700;
		color: #eaddc0;
	}
	.selfhosted-detail-v2-spec-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		margin: 0 0 18px;
	}
	.selfhosted-detail-v2-spec-tile {
		background: rgba(234, 221, 192, 0.06);
		border: 1px solid rgba(234, 221, 192, 0.12);
		border-radius: 10px;
		padding: 10px 12px;
		display: flex;
		gap: 10px;
		align-items: flex-start;
	}
	.selfhosted-detail-v2-spec-tile i {
		color: var(--color--marron);
		font-size: 1.1rem;
		margin-top: 1px;
	}
	.selfhosted-detail-v2-spec-tile-label {
		display: block;
		font-size: 0.72rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: rgba(234, 221, 192, 0.55);
	}
	.selfhosted-detail-v2-spec-tile-value {
		display: block;
		font-size: 0.86rem;
		color: #eaddc0;
		font-weight: 600;
	}

	.card-body-footer{
		padding-bottom:0px;
	}
	.card-body-self{
		background-image: linear-gradient(to right, #303030, #303030);
		color:var(--color-body);
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		padding-top: 8px;
		padding-bottom: 1px;
	}
	.card-body-pc-recommended{
		padding-top: 2px;
	}
		
	.card-body-self-WIP{
		background-color: #fd5f5f;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		padding-top: 8px;
		padding-bottom: 1px;
	}
	.card-footer {
		background-color: var(--color--beige-dark);
		background-color: var(--color--beige-dark);
		border-left-width: 8px;
		border-right-width: 8px;
		border-bottom-width: 8px;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	.card-footer-nostyle {
		padding:4px
	}
	.card-info-host{
		margin-left: auto;
		margin-right: auto;
		width: 900px;
	}
	.card-footer-profil {
		padding-top:0px;
		background-color: var(--color--beige-dark);
	}
	.card-title{
		font-family: "Golos Text", sans-serif;
		line-height: 135%;
		font-weight: 700;
		font-size: 24px;
		color:var(--color--beige);
	}
	.card-title-article{
		font-family: "Golos Text", sans-serif;
		line-height: 135%;
		font-weight: 700;
		font-size: 24px;
		color:var(--color--beige);
		min-height: 70px;
		max-height: 70px;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 5px;
		margin-right: 5px;
	}
	.text-bg-secondary{
		color:var(--color-body);
	}
	.article-date{
		text-align: center;
		float:right;
		margin-bottom: 5px;
		font-style: italic;
		margin-right: 8px;
	}
	.info-serv-p{
		margin-bottom: 10px;
	}
	.card-title-WIP{
		font-family: "Golos Text", sans-serif;
		line-height: 135%;
		font-weight: 700;
		font-size: 24px;
	}
	.card-right-title{
		font-family: "Golos Text", sans-serif;
		line-height: 110%;
		font-weight: 700;
		font-size: 20px;
		margin-top: 3px;
	}
	.card-right-title-litle{
		font-family: "Golos Text", sans-serif;
		color:var(--color--beige);
		line-height: 110%;
		font-weight: 700;
		font-size: 20px;
		margin-left: 120px;
		margin-right: 20px;
		margin-top: 10px;
	}
	.card-article-litle-description{
		font-family: "Golos Text", sans-serif;
		line-height: 135%;
		font-size: 15px;
		min-height: 50px;
		max-height: 50px;
	}
	.card-article-litle-description-litle{
		font-family: "Golos Text", sans-serif;
		line-height: 135%;
		font-size: 14px;
		margin-left: 100px;
	}
	.text-muted{
		float:right;
		color:gray !important;
	}
	.card-self-hosted{
		width: 336px;
		height: 280px;
		margin-bottom: 20px;
		text-align: center;
		border-radius: 8px;
	}
	.card-self-hosted:hover{
		box-shadow: 1px 1px 12px #555;
	}
	.card-self-hosted-WIP{
		width: 336px;
		height: 280px;
		margin-bottom: 20px;
		text-align: center;
		border-radius: 8px;
	}
	
	.card-right{
		width: 500px;
		height: 70px;
		text-align: center;
		background-color: var(--color--anthracite-v3);
		background-image: linear-gradient(to right, #303030, #303030);
		color:var(--color-body);
		--bs-card-spacer-y: 0;
		display: none;
	}
	.card-right:hover{
		box-shadow: 1px 1px 12px #555;
	}

	.forum_langue{
		float:left;
		margin-right:40px;
		margin-left:5px;
		margin-bottom:5px;
		padding-top: 5px;
	}
	.dropdown-toggle::after {
		display: inline-block;
		margin-left: .255em;
		vertical-align: .255em;
		content: "";
		border-top: .3em solid;
		border-right: .3em solid transparent;
		border-bottom: 0;
		border-left: .3em solid transparent;
		color: var(--color--beige);
	}
	.forum_langue_2{
		background-color: var(--color--anthracite);
		--bs-btn-padding-x: 0.75rem;
		--bs-btn-padding-y: 0.375rem;
		--bs-btn-font-family: ;
		--bs-btn-font-size: 1rem;
		--bs-btn-font-weight: 400;
		--bs-btn-line-height: 1.5;
		--bs-btn-color: var(--bs-body-color);
		--bs-btn-bg: transparent;
		--bs-btn-border-width: var(--bs-border-width);
		--bs-btn-border-color: transparent;
		--bs-btn-border-radius: var(--bs-border-radius);
		--bs-btn-hover-border-color: transparent;
		--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
		--bs-btn-disabled-opacity: 0.65;
		--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
		display: inline-block;
		padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
		font-family: var(--bs-btn-font-family);
		font-size: var(--bs-btn-font-size);
		font-weight: var(--bs-btn-font-weight);
		line-height: var(--bs-btn-line-height);
		color: var(--bs-btn-color);
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
		border-radius: var(--bs-btn-border-radius);
	}
	.forum_langue_2:hover{
		background-color: var(--color--anthracite);
	}
	.forum_langue_3{
		color: var(--color--beige);
		text-decoration:none;
	}
	.forum_langue_3:hover{
		color: var(--color--beige);
		background-color: var(--color--anthracite);
		text-decoration:none;
	}
	.forum_langue_4.show {
		display: block;
	}
	.forum_langue_4{
		padding-left: 12px;
		background-color: var(--color--anthracite);
		color: var(--color--beige);
	}
	.forum_langue_5{
		color: var(--color--beige);
		text-decoration:none;
		padding-right: 12px;
	}
	.forum_langue_5:hover{
		text-decoration:none;
	}


	.float-left{
		float:left;
		margin-right:40px;
	}
	.float-right{
		float:right;
		text-decoration: none; 
	}
	.float-right:hover{
		float:right;
		text-decoration: none; 
	}
	.card{
		--bs-card-border-width: 0px;
		--bs-card-spacer-y: 5px;
	}
	.card-my-game-2{
		--bs-card-border-width: 0px;
		--bs-card-spacer-y: 5px;
		width: 833px;
		margin-right: auto;
		margin-left: auto;
	}
	.card-my-game-3{
		--bs-card-border-width: 0px;
		--bs-card-spacer-y: 5px;
		width: 833px;
		margin-right: auto;
		margin-left: auto;
	}

	.card-article{
		padding:4px;
	}
	.ad-text-color{
		color: var(--color--beige);
		padding-top: 7px;
		padding-left: 2px;
		padding-right: 2px;
	}
	.card-img-top{
		width: 336px;
		max-height: 160px;
		min-height: 160px;
	}
	.card-img-top-pc-detail{
		width: 336px;
		height: 160px;
		margin:5px;
		border-radius: 5px;
	}
	.card-img-top-pc{
		width: 336px;
		height: 190px;
		border-top-left-radius: var(--bs-card-inner-border-radius);
    	border-top-right-radius: var(--bs-card-inner-border-radius);
	}
	.card-img-top-article{
		width: 336px;
		height: 160px;
		border-radius: 10px;
		margin-bottom: 10px;
	}
	.card-img-faq{
		width: 1042px;
		height: 480px;
		border-radius: 10px;
		margin-bottom: 10px;
	}
	.card-img-right{
		float: left;
		text-align: left;
		height: 70px;
		width: 150px;
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
	}
	.card-img-right-mygame{
		text-align: left;
		width: 150px;
		height: 70px;
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
	}
	.colum-mygame{
		columns: 5;
		text-align: left;
		border-radius: 5px;
		box-shadow: 0px 0px 6px #555;
		background: var(--color--beige-dark);
	}
	.mygame_margin_bot{
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.column1_info_host {
		float:left;
		width:520px;
		text-align: center;
		padding-right: 25px;
	}
	.column2_info_host {
		width: 500px;
		margin-left:520px;
		padding-left: 10px;
		margin-bottom: 10px;
	}
	.decalage-self-hosted-title{
		margin-left:180px;
	}
	.my-banner-instant-gaming{
		max-height:100px;
	}

	.ig-dynamic-banner.ig-size-1100, .ig-dynamic-banner.ig-size-1000, .ig-dynamic-banner.ig-size-900 {
		border-radius: 10px !important;
		min-height: 80px !important;
	}

	#myChart1{
		width:500px !important;
		height:500px !important;
		text-align: center;
	}
	#myChart4{
		
		height:500px !important;
		text-align: center;
	}
	#myChart3{
		
		height:500px !important;
		text-align: center;
	}
	
	.p-marron{
		color: var(--color--marron);
		text-decoration: none;
	}
	/* Content self-hosted-game */
	.column1_self_hosted_game {
		float:left;
		width:200px;
		text-align: center;
		padding-right: 25px;
	}
	.column1_self_hosted_li_activated{
		background-color:#e0e0e0;
		border-radius: 8px;
		color: var(--color--marron);
	}
	.column1_self_hosted_game li{
		list-style-type: none;
		padding-bottom: 5px;
		padding-top: 5px;
	}
	.column1_self_hosted_game li:hover{
		cursor: pointer;
		color: var(--color--marron);
	}
	.column2_self_hosted_game {
		margin-left:185px;
		border-left: solid 2px;
		border-color: #818181;
		padding-left: 10px;
		margin-bottom: 10px;
	}
	.decription-img{
		margin-left: 180px;
		margin-bottom: 10px;
		border-radius: 8px;
	}
	.decription-img-2{
		margin-left: 100px;
		margin-top: 10px;
		margin-bottom: 10px;
		border-radius: 8px;
	}
	.prerequis-img{
		margin-bottom: 10px;
		border-radius: 8px;
		width: 300px;
	}
	.info-host-img{
		margin-top: 15px;
		margin-bottom: 10px;
		border-radius: 8px;
		width: 300px;
	}
	.my-games-img{
		margin-bottom: 10px;
		width: 300px;
	}
	.my_games-led{
		display:inline;
	}
	.padding-top{
		padding-top: 10px;
	}
	.padding-top2{
		padding-top: 5px;
	}
	.padding-top3{
		padding-top: 2px;
	}
	.my_games-fiche{
		display:inline;
		margin-top: 5px;
		font-weight: bold;
	}

	.guide-install-img{
		width: 80px;
		height: 80px;
	}
	.tips{
		color: var(--color--beige-dark);
		background: #26323d;
		border-radius: 3px;
		border-left: 5px solid #f0a656;
		padding-left: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-bottom: 10px;
	}
	.tips-2{
		color: var(--color--beige-dark);
		background: #26323d;
		border-radius: 3px;
		border-left: 5px solid #f0a656;
		padding-left: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-bottom: 10px;
	}

	.little-padding-profil{
		padding-top: 10px;
	}
	.closebtn {
		margin-right: 10px;
		margin-top: 2px;
		color: white;
		font-weight: bold;
		float: right;
		font-size: 22px;
		line-height: 20px;
		cursor: pointer;
		transition: 0.3s;
	}
	#self_hosted_li_installation{
		display: none;
	}
	#self_hosted_li_compatibilite{
		display: none;
	}
	#self_hosted_li_configuration{
		display: none;
	}
	#self_hosted_li_other{
		display: none;
	}
	/* #thread_reponse { display: none; } supprimée d'ici : c'était un
	   reliquat qui faisait doublon avec le style="display:none" jadis en
	   dur dans thread.html - inoffensif tant que le JS posait un style
	   inline (qui l'emporte toujours), mais cassait tout une fois passé à
	   l'attribut `hidden` (aucun style inline concurrent, donc cette règle
	   sans !important regagnait la main et gardait la boîte "Répondre"
	   masquée en permanence, même une fois `hidden` retiré par JS). L'état
	   masqué initial est déjà porté par l'attribut hidden dans le template. */
	.led-red {
		margin: 0 auto;
		width: 24px;
		height: 24px;
		background-color: #F00;
		border-radius: 50%;
		box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(255, 0, 0, 0.35);
		-webkit-animation: blinkRed 1s infinite;
		-moz-animation: blinkRed 1s infinite;
		-ms-animation: blinkRed 1s infinite;
		-o-animation: blinkRed 1s infinite;
		animation: blinkRed 1s infinite;
	}

	@-webkit-keyframes blinkRed {
		from { background-color: #F00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(255, 0, 0, 0.35); }
		50% { background-color: #A00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 4px 1px rgba(255, 0, 0, 0.18); }
		to { background-color: #F00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(255, 0, 0, 0.35); }
	}
	@-moz-keyframes blinkRed {
		from { background-color: #F00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(255, 0, 0, 0.35); }
		50% { background-color: #A00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 4px 1px rgba(255, 0, 0, 0.18); }
		to { background-color: #F00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(255, 0, 0, 0.35); }
	}
	@-ms-keyframes blinkRed {
		from { background-color: #F00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(255, 0, 0, 0.35); }
		50% { background-color: #A00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 4px 1px rgba(255, 0, 0, 0.18); }
		to { background-color: #F00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(255, 0, 0, 0.35); }
	}
	@-o-keyframes blinkRed {
		from { background-color: #F00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(255, 0, 0, 0.35); }
		50% { background-color: #A00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 4px 1px rgba(255, 0, 0, 0.18); }
		to { background-color: #F00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(255, 0, 0, 0.35); }
	}
	@keyframes blinkRed {
		from { background-color: #F00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(255, 0, 0, 0.35); }
		50% { background-color: #A00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 4px 1px rgba(255, 0, 0, 0.18); }
		to { background-color: #F00; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(255, 0, 0, 0.35); }
	}

	/* Contenu remplacé par un sondage htmx : pas de transition pendant sa mise
	   en place, sinon une carte recréée sous la souris rejoue son effet de
	   survol (saut visible toutes les 10 s). */
	.htmx-settling * {
		transition: none !important;
	}
	/* LED cliquable (host_led.html, data-open-tab) : guide de mise à jour. */
	.led-link {
		cursor: pointer;
	}
	.led-yellow {
		margin: 0 auto;
		width: 24px;
		height: 24px;
		background-color: #FF0;
		border-radius: 50%;
		box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 14px 3px rgba(255, 255, 0, 0.6);
		-webkit-animation: blinkYellow 1s infinite;
		-moz-animation: blinkYellow 1s infinite;
		-ms-animation: blinkYellow 1s infinite;
		-o-animation: blinkYellow 1s infinite;
		animation: blinkYellow 1s infinite;
	}

	@-webkit-keyframes blinkYellow {
		from { background-color: #FF0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 14px 3px rgba(255, 255, 0, 0.6); }
		50% { background-color: #AA0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 6px 1px rgba(255, 255, 0, 0.3); }
		to { background-color: #FF0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 14px 3px rgba(255, 255, 0, 0.6); }
	}
	@-moz-keyframes blinkYellow {
		from { background-color: #FF0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 14px 3px rgba(255, 255, 0, 0.6); }
		50% { background-color: #AA0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 6px 1px rgba(255, 255, 0, 0.3); }
		to { background-color: #FF0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 14px 3px rgba(255, 255, 0, 0.6); }
	}
	@-ms-keyframes blinkYellow {
		from { background-color: #FF0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 14px 3px rgba(255, 255, 0, 0.6); }
		50% { background-color: #AA0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 6px 1px rgba(255, 255, 0, 0.3); }
		to { background-color: #FF0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 14px 3px rgba(255, 255, 0, 0.6); }
	}
	@-o-keyframes blinkYellow {
		from { background-color: #FF0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 14px 3px rgba(255, 255, 0, 0.6); }
		50% { background-color: #AA0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 6px 1px rgba(255, 255, 0, 0.3); }
		to { background-color: #FF0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 14px 3px rgba(255, 255, 0, 0.6); }
	}
	@keyframes blinkYellow {
		from { background-color: #FF0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 14px 3px rgba(255, 255, 0, 0.6); }
		50% { background-color: #AA0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 6px 1px rgba(255, 255, 0, 0.3); }
		to { background-color: #FF0; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 14px 3px rgba(255, 255, 0, 0.6); }
	}

	.led-green {
		margin: 0 auto;
		width: 24px;
		height: 24px;
		background-color: #ABFF00;
		border-radius: 50%;
		box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(137, 255, 0, 0.35);
	}

	.led-blue {
		margin: 0 auto;
		width: 24px;
		height: 24px;
		background-color: #24E0FF;
		border-radius: 50%;
		box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15), 0 0 9px 2px rgba(63, 140, 255, 0.35);
	}

	.image--cover-forum {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
		object-fit: cover;
		object-position: center right;
	}

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

	.bi-pin-angle, .bi-card-heading, .bi-card-text{
		margin-right: 2px;
	}
	.column1-avatar {
		float:left;
		width:560px;
		text-align: center;
		padding-right: 25px;
	}
	.column2-avatar {
		float:right;
		width:54px;
		text-align: center;
		padding-right: 25px;
	}
	.column3-avatar {
		float:right;
		width:450px;
		text-align: center;
	}

	.column1-details-host {
		float:left;
		width:600px;
		text-align: center;
		padding-left: 0px;
		margin-left:12px
	}
	.column2-details-host {
		float:right;
		width:1px;
		text-align: center;
		
	}
	.column3-details-host {
		float:right;
		width:416px;
		text-align: center;
		padding-right: 0px;
		margin-right: 0px;
	}
	.cookie-consent-decline{
		display: inline;
	}
	.cookie-consent-accept{
		display: inline;
	}
	.column1_my_games {
		text-align: center;
	}
	.column2_my_games {
		width: 350px;
		text-align: center;
		padding-right: 5px;
	}
	.column3_my_games {
		width: 250px;
		text-align: center;
		padding-right: 5px;
	}
	.card-right-mygame{
		width: 800px;
		height: 70px;
		text-align: center;
		background-color: var(--color-body);
		--bs-card-spacer-y: 0;
		box-shadow: 1px 1px 12px #555;
		margin:0 !important;
		padding: 0;
		margin-left: auto !important;
		margin-right: auto !important;
	}


	.fieldWrapper{
		margin: 5px;
	}
	/* Forum */
	#id_content{
		height: 463px;
		width: 725px;
		font-family: var(--bs-font-monospace);
		font-size: .875em;
		text-align: center;
	}
	#id_title{
		width: 400px;
	}
	.tox:not([dir=rtl]) {
		direction: ltr;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	.p-forum-staff{
		color:var(--color--marron--v2);
		font-weight: 500;
	}
	.p-forum-staff-2{
		color:var(--color--marron--v2);
		font-weight: 500;
		font-size:12px;
	}
	.p-forum-not-staff{
		font-size:12px;
	}

	.forum-add-th{
		float:right;
		margin-bottom: 8px;
	}
	.p-forum-thread{
		font-size:12px;
	}
	.forum-thread-size-1{
		max-width: 670px;
		min-width: 670px;
		text-align: left;
	}
	.forum-thread-size-2{
		max-width: 100px;
		min-width: 100px;
		padding-top: 10px;
		padding-left: 7px !important;
	}
	.forum-thread-size-3{
		max-width: 260px;
		min-width: 260px;
	}
	.forum-post-size-1{
		max-width: 200px;
		min-width: 200px;
	}
	.forum-post-size-2{
		max-width: 800px;
		min-width: 800px;
		text-align: left;
	}
	.thread-action{
		background-color: #b1b1b1;
		color:var(--color--marron--v2);
		float:right;
		border-radius: 5px;
		padding-left: 5px;
		margin-left: 5px;
		padding-right: 5px;
		margin-top: 2px;
		font-size: 12px;
	}
	.thread-action:hover{
		cursor: pointer;
		color:var(--color--marron);
		text-decoration: underline;
	}
	.table>:not(caption)>*>*{
		padding-bottom:1px;
		border-width: 0px;
	}
	.alert{
		margin: 5px;
		padding: 5px;
		cursor: pointer;
	}
	.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;
	}
	.errorlist{
		display: inline-block;
		text-align: left;
		margin: 0px;
	}
	.clear{
		clear: both;
	}
	.table-wrapper {
		overflow-x: auto;
		clear:both;
	}
	.clear{
		clear:both
	}
	.table-wrapper table th,
	.table-wrapper table td {
		padding: 10px;
		border: var(--bs-card-border-width) solid var(--bs-card-border-color);
		border-spacing: 0;
		border-collapse: separate;
	}
	.th-profil-action{
		min-width: 120px;
		max-width: 120px;
	}
	.th-profil-other{
		min-width: 160px;
		max-width: 160px;
	}
	.pc-th-profil-other{
		min-width: 160px;
		max-width: 160px;
		background: #e0e0e0;
	}
	.green-th-profil-other{
		background: #4ea83c;
	}
	.orange-th-profil-other{
		background: #b17900;
	}
	.red-th-profil-other{
		background: #a83c3c;
	}
	.p-profil{
		margin-top: 10px;
	}
	.p-profil2{
		margin-top: 20px;
	}
	.thread-reply{
	margin-bottom: 10px;
	}
	.table-wrapper table {
		text-align: center;
		border-spacing: 0;
		border-collapse: separate;
	}
	.table-wrapper table th{
		border-right: 1px solid var(--bs-border-color-translucent);
		border-bottom: 1px solid var(--bs-border-color-translucent);
		border-top: 1px solid var(--bs-border-color-translucent);
	}

	.table-wrapper table th:last-child{
		border-right: 0px solid var(--bs-border-color-translucent);
		border-bottom: 1px solid var(--bs-border-color-translucent);
		border-top-right-radius: 10px;
		border-top: 1px solid var(--bs-border-color-translucent);
		border-right: 1px solid var(--bs-border-color-translucent);
	}
	.table-wrapper table td{
		border-right: 1px solid var(--bs-border-color-translucent);
		border-bottom: 1px solid var(--bs-border-color-translucent);
		
	}
	.table-wrapper table tr:last-child td:last-child{
		border-right: 0px solid var(--bs-border-color-translucent);
		border-bottom-right-radius: 10px;
		border-bottom: 1px solid var(--bs-border-color-translucent);
		border-right: 1px solid var(--bs-border-color-translucent);
	}
	.table-wrapper table tr:last-child td:first-child{
		border-right: 1px solid var(--bs-border-color-translucent);
		border-bottom-left-radius: 10px;
		border-bottom: 1px solid var(--bs-border-color-translucent);
		border-left: 1px solid var(--bs-border-color-translucent);
	}
	.table-wrapper table tr:first-child th:first-child {
		border-left: 1px solid var(--bs-border-color-translucent);
		border-top-left-radius: 10px;
	}
	.table-wrapper table tr:first-child th{
		background:#e0e0e0;
	}
	.table-wrapper table tr td:first-child {
		border-left: 1px solid var(--bs-border-color-translucent);
	}
	.table-wrapper table tbody tr:nth-of-type(even) > * {
		opacity: 1;
	}
	.table-thread table {
		text-align: center;
		border-spacing: 0px 10px;
		border-collapse: separate;
		margin-bottom: 0px;
	}
	.table-bg-color{
		--bs-table-bg: var(--color--beige-dark);
	}
	.table-bg-color:hover{
		--bs-table-hover-bg: var(--color--lightgrey);
	}
	#thread_reponse_2{
		padding-bottom: 10px;
	}
	.thread_replic{
		margin-top: 10px;
		margin-bottom: 15px;
	}
	.table-thread tr:first-child td:last-child{
		border-right: 1px solid var(--bs-border-color-translucent);
		border-top: 1px solid var(--bs-border-color-translucent);
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	.table-thread tr td:first-child{
		border-right: 1px solid var(--bs-border-color-translucent);
		border-top: 1px solid var(--bs-border-color-translucent);
		border-bottom: 1px solid var(--bs-border-color-translucent);
		border-bottom-left-radius: 10px;
	}
	.table-thread tr:first-child td:first-child{
		border-left: 1px solid var(--bs-border-color-translucent);
		border-top: 1px solid var(--bs-border-color-translucent);
		border-top-left-radius: 10px;
		padding-bottom: 2px;
	}
	.table-thread tr td:first-child{
		border-top: 1px solid var(--bs-border-color-translucent);
		border-top-left-radius: 10px;
	}
	.table-thread tr td:last-child{
		border-top: 1px solid var(--bs-border-color-translucent);
		border-bottom: 1px solid var(--bs-border-color-translucent);
		border-bottom-right-radius: 10px;
		border-top-right-radius: 10px;
	}
	.table-thread tr:last-child td:last-child{
		border-right: 1px solid var(--bs-border-color-translucent);
		border-bottom: 1px solid var(--bs-border-color-translucent);
		border-bottom-right-radius: 10px;
	}
	.table-thread tr:last-child td:first-child{
		border-left: 1px solid var(--bs-border-color-translucent);
		border-bottom: 1px solid var(--bs-border-color-translucent);
		border-bottom-left-radius: 10px;
	}
	.table-thread tr td{
		border-right: 1px solid var(--bs-border-color-translucent);
	}
	.table-thread tr td:first-child{
		border-left: 1px solid var(--bs-border-color-translucent);
	}

	.table-myhost-1{
		min-width: 280px;
		max-width: 280px;
	}
	.table-myhost-2{
		min-width: 180px;
		max-width: 180px;
	}
	.table-myhost-3{
		min-width: 100px;
		max-width: 100px;
	}
	.table-myhost-6{
		min-width: 100px;
		max-width: 100px;
	}
	.table-myhost-4{
		min-width: 180px;
		max-width: 180px;
	}
	.table-myhost-5{
		min-width: 80px;
		max-width: 80px;
	}
	.tr-clickable:hover{
		cursor: pointer;
		opacity: 1;
		background-color: #b1b1b1;
	}
	.tr-clickable{
		background: var(--color--beige-dark);
	}
	.table-myhost-myserver-1{
		min-width: 190px;
		max-width: 190px;
	}
	.table-myhost-myserver-2{
		min-width: 150px;
		max-width: 150px;
	}
	.table-myhost-myserver-3{
		min-width: 190px;
		max-width: 190px;
	}
	.table-myhost-myserver-4{
		min-width: 170px;
		max-width: 170px;
	}
	.table-myhost-myserver-5{
		min-width: 110px;
		max-width: 110px;
	}
	.table-myhost-myserver-6{
		min-width: 100px;
		max-width: 100px;
	}
	.table-myhost-myserver-7{
		min-width: 80px;
		max-width: 80px;
	}
	.table-perso-myserver-7{
		min-width: 230px;
		max-width: 230px;
	}
	.table-perso-myserver-8{
		min-width: 280px;
		max-width: 280px;
	}
	.thread-hr{
		margin-top:1px;
		margin-bottom:1px;
		color: var(--color--anthracite);
	}
	.thread-size{
		min-height: 191px;
	}

	.p-bold{
		font-weight: bold;
		margin-bottom: 8px;
	}
	.table-hover>tbody>tr:hover>*{
		--bs-table-accent-bg: none;
	}

	.table-border-tr-main:hover{
		--bs-table-bg: var(--color--beige-dark);
		--bs-table-hover-bg: var(--color--beige-dark);
		margin-bottom: 5px;
	}

	.table-border-main{
		border-radius:15px;
	}
	.thread_modification{
		padding-top: 20px;
	}

	.pc-recommended-table{
		margin-left: 250px;
		margin-right: auto;
		border-radius: 10px;
		
	}
	.pc-recommended-table>thead>tr>th{
		background-color: #e0e0e0;
		border-right: 0px solid var(--bs-border-color-translucent);
        border-bottom: 1px solid var(--bs-border-color-translucent);
        border-top-right-radius: 10px;
        border-top: 1px solid var(--bs-border-color-translucent);
        border-right: 1px solid var(--bs-border-color-translucent);
	}
	.table-wrapper-v {
		overflow-x: auto;
		clear:both;
		border-collapse: collapse;
		border-spacing: 0;
	}
	.table-wrapper-v table {
		text-align: center;
		border-spacing: 0;
		border-collapse: separate;
		
	}
	.table-wrapper-v table th,
	.table-wrapper-v table td {
		padding: 10px;
		border: var(--bs-card-border-width) solid var(--bs-card-border-color);
	}
	.table-wrapper-v table tr:first-child th {
		border-left: 1px solid var(--bs-border-color-translucent);
		border-top: 1px solid var(--bs-border-color-translucent);
		border-right: 1px solid var(--bs-border-color-translucent);
		border-top-left-radius: 10px;
		background: #e0e0e0;
	}
	.table-wrapper-v table tr th:first-child {
		border-left: 1px solid var(--bs-border-color-translucent);
		border-right: 1px solid var(--bs-border-color-translucent);
		border-top: 1px solid var(--bs-border-color-translucent);
		background: #e0e0e0;
	}
	.table-wrapper-v table tr:first-child td {
		border-right: 1px solid var(--bs-border-color-translucent);
		border-top: 1px solid var(--bs-border-color-translucent);
		border-top-right-radius: 10px;
	}
	.table-wrapper-v table tr td {
		border-right: 1px solid var(--bs-border-color-translucent);
		border-top: 1px solid var(--bs-border-color-translucent);
	}
	.table-wrapper-v table tr:last-child td {
		border-right: 1px solid var(--bs-border-color-translucent);
		border-bottom: 1px solid var(--bs-border-color-translucent);
		border-bottom-right-radius: 10px;
	}
	.table-wrapper-v table tr:last-child th {
		border-right: 1px solid var(--bs-border-color-translucent);
		border-bottom: 1px solid var(--bs-border-color-translucent);
		border-bottom-left-radius: 10px;
	}
	.table-wrapper-v table th{
		width: 240px;
	}
	.table-wrapper-v table td{
		width: 290px;
	}
	.card-host-serveur{
		width: 870px;
		margin-left: auto;
		margin-right: auto;
	}
	.card-host-serveur-game{
		width: 1020px;
		margin-left: auto;
		margin-right: auto;
	}
	.info-server-version{
		width: 158px;
	}
	.image-in-server{
		border-radius: 10px;
		margin-top: 30px;
		width: 378px;
		height: 168px;
	}
	.image-in-mygame{
		width: 130px;
		height: 56px;
	}
	.bi-plus-circle:hover{
		color:var(--color--marron);
		cursor:pointer;
	}
	.fa-star:hover{
		color:var(--color--marron);
		cursor:pointer;
	}
	.fa-solid .fa-star{
		color:rgb(230, 207, 0);
	}
	.bi-key:hover{
		color:var(--color--marron);
		cursor:pointer;
	}
	.tabulation{
		padding-left:40px;
	}
	.mygame-article-a{
		color:var(--color--marron);
		text-underline-offset: 2px;
	}
	.mygame-article-a:hover{
		color:var(--color--marron);
		text-decoration: underline var(--color--marron) 2px;
		text-underline-offset: 2px;
	}
	.footer-article-a{
		text-underline-offset: 2px;
	}
	.footer-article-a:hover{
		color:var(--color--marron);
		text-decoration: underline var(--color--marron) 2px;
		text-underline-offset: 2px;
	}

	code{
		background-color: var(--color--anthracite);
		display: inline-block;
		padding: 10px;
		width: 100%;
		box-sizing: border-box;
		color: #fff;
	}

	.form{
		border-radius: 25px;
		padding: 20px 60px;
		margin-left: auto;
		margin-right: auto;
		background: linear-gradient(180deg, #b6b6b6,#6b6b6b);
		width: 550px;
	}
	.fieldWrapper input{
		background-color: white;
		border: 1px solid gray;
		border-radius: 10px;
		padding: 6px 12px;
	}
	.fieldWrapper select{
		background-color: white;
		border: 1px solid gray;
		padding: 6px 12px;
	}
	.fieldWrapper textarea{
		background-color: white;
		border: 1px solid gray;
		border-radius: 10px;
		padding: 6px 12px;
	}

	.cookie-th{
		min-width:150px;
		max-width:150px;
		border: 1px solid gray;
	}
	.cookie-td{
		min-width:600px;
		max-width:600px;
		border: 1px solid gray;
	}
	.cookie-table{
		border: 1px solid gray;
		border-radius: 10px;
		color:var(--color--beige-dark);
	}
	.cookie-bar {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #333;
		color: #fff;
		text-align: center;
		padding: 15px;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		font-size: 14px;
		display: flex;
		align-items: center;
		grid-gap: 10px;
		flex-wrap: wrap;
		justify-content: center;
		z-index: 20000000001 !important;
	}
	.cookie-bar span{
	width: 100%;
	}
	.cookie-bar button {
		margin: 5px;
		padding: 10px 20px;
		background: #007BFF;
		color: #fff;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-size: 14px;
	}

	.cookie-bar button:hover {
		background: #0056b3;
	}

	.cookie-bar a {
		color: #00aaff;
		text-decoration: none;
		margin-left: 10px;
		font-size: 14px;
	}

	.cookie-bar a:hover {
		text-decoration: underline;
	}

	.blur{
		width: 100% !important;
		height: 100% !important;
		margin: 0 auto !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		background-color: rgba(0, 0, 0, .5) !important;
		font-family: Arial, serif !important;
		z-index: 20000000000 !important;
		overflow-y: auto !important;
		backdrop-filter: blur(3px);
	}

	#id_email{
		width: 300px;
	}
	.page-link{
		color:var(--color--beige-dark);
		background-color: var(--color--anthracite);
	}
	.page-notlink{
		color:var(--color-body);
		background-color: var(--color--anthracite);
	}
	.disabled {
		color:var(--color-body);
		--bs-pagination-disabled-color:gray;
	}
	.p-forum{
		color:#0077b3;
		font-weight: 500;
	}
	.page-link:hover{
		background-color: var(--color--anthracite);
		color:var(--color--marron);
		text-decoration-line: underline;
	}
	.pagination {
		--bs-pagination-disabled-bg: var(--color--anthracite);
		--bs-pagination-border-color: var(--color-body) !important;
		--bs-pagination-disabled-border-color: var(--color-body);
		margin-top: 7px;
	}

	.fa-clipboard-list{
		margin-right: 10px;
	}
	.breadcrumb {
		display: flex;
		box-shadow: 0 8px 14px -2px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
		border-radius: 5px;
		list-style-type: none;
		text-decoration: none;
		float:left;
		margin-bottom: 0px;
		padding-right: 30px;
		background-color: var(--color--anthracite);
		padding-top: 7px;
		padding-bottom: 0px;
		height: 35px;
	}
	
	.breadcrumb-links {
		display: flex;
		column-gap: 1rem;
		align-items: center;
	}
	
	.breadcrumb-box {
		display: flex;
		align-items: center;
	}
	
	.breadcrumb-link {
		color: var(--color-body);
		list-style-type: none;
		text-decoration: none;
	}
	.breadcrumb-box:hover > *:not(.breadcrumb-icon) {
		color: var(--color--marron);
	}
	
	.breadcrumb-icon,
	.breadcrumb-icon-home {
		flex-shrink: 0;
		width: 1.25rem;
		height: 1.25rem;
		color: var(--color-body);
	}
	
	.breadcrumb-text {
		margin-left: 1rem;
		font-size: 0.875rem;
		line-height: 1.25rem;
		font-weight: 500;
		color: var(--color--beige-dark);
		list-style-type: none;
		text-decoration: none;
	}
	.hr-info-host{
		margin-top: 6px;
		margin-bottom: 7px;
	}

	.mygames-size-1{
		max-width: 140px;
		min-width: 140px;
	}
	.mygames-size-2{
		max-width: 140px;
		min-width: 140px;
	}
	.mygames-size-3{
		max-width: 140px;
		min-width: 140px;
	}
	.mygames-size-4{
		max-width: 150px;
		min-width: 150px;
	}
	.mygames-size-5{
		max-width: 130px;
		min-width: 130px;
	}
	.mygames-size-6{
		max-width: 80px;
		min-width: 80px;
	}
	.mygames-size-7{
		max-width: 80px;
		min-width: 80px;
	}
	.mygames-size-8{
		max-width: 80px;
		min-width: 80px;
	}
	.mygames-size-9{
		max-width: 60px;
		min-width: 60px;
	}
	.info-serv-histo-size-1{
		max-width: 260px;
		min-width: 260px;
	}
	.info-serv-histo-size-2{
		max-width: 480px;
		min-width: 480px;
	}
	.info-serv-histo-size-3{
		max-width: 250px;
		min-width: 250px;
	}

	/* ############### Gestion des pubs ! ###############
	#######################################################
	#######################################################
	/* Banniere entête Fake */
	.banner-aa {
		background-color: var(--color--anthracite);
		width: 728px;
		height: 90px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 15px;
		padding-left: 5px;
		padding-right: 5px;
	}
	/* Card Fake */
	.card-aa {
		background-color: var(--color--anthracite);
		width: 336px;
		height: 280px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 8px;
		border-color: none;
	}
	.card-am {
		background-color: var(--color--anthracite);
		width: 300px;
		height: 250px;
		margin-left: auto;
		margin-right: 10px;
		border-radius: 8px;
		border-color: none;
		text-align: center;
		float:right;
	}
	/* Petit rectangle verticale Fake */
	.left-demi-gratte-ciel-aa {
		background-color: var(--color--anthracite);
		width: 160px;
		height: 600px;
		position: fixed;
		margin-left: 5%;
		margin-top: 150px;
		display: none;
	}
	/* Petit rectangle verticale Fake */
	.right-demi-gratte-ciel-aa {
		background-color: var(--color--anthracite);
		width: 160px;
		height: 600px;
		position: fixed;
		margin-right: 5%;
		margin-top: 150px;
		top: 0px;
		right: 0px;
		display: none;
	}
}
/* Grand pour les demi-gratte-ciel */
@media screen and (min-width: 1601px) {
	.banner-aa{
		display: none;
	}
	.left-demi-gratte-ciel-aa{
		display: block;
	}
	.right-demi-gratte-ciel-aa{
		display: block;
	}

	/* Objectifs de villes (page publique) : barre d'avancement d'un critère. */
	.eco-objective-progress {
		height: 6px;
		margin-top: 6px;
		border-radius: 3px;
		background: rgba(254, 252, 231, 0.15);
		overflow: hidden;
	}
	.eco-objective-progress-fill {
		height: 100%;
		background: var(--color--beige-dark);
	}
	.eco-objective-state {
		font-weight: 600;
		white-space: nowrap;
	}
	/* Sélecteur de ville : une tuile par ville, avancement compris. */
	.eco-city-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 12px;
		margin: 12px 0 8px;
	}
	.eco-city-tile {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 12px 14px;
		background: #33465a;
		color: #eaddc0;
		border: 2px solid transparent;
		border-radius: 12px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		text-decoration: none;
		transition: border-color 0.15s ease-in-out, background 0.15s ease-in-out;
	}
	.eco-city-tile:hover,
	.eco-city-tile:focus {
		color: #eaddc0;
		text-decoration: none;
		background: #3a5066;
		border-color: rgba(234, 221, 192, 0.35);
	}
	.eco-city-tile-selected,
	.eco-city-tile-selected:hover {
		background: #29343f;
		border-color: var(--color--marron);
	}
	.eco-city-tile-name {
		font-weight: 700;
		font-size: 1rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.eco-city-tile-selected .eco-city-tile-name i {
		color: var(--color--marron);
	}
	.eco-city-tile-stats {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 12px;
		font-size: 0.8rem;
		opacity: 0.85;
	}
	/* Icônes décoratives : annule le survol « cliquable » global de
	   .bi-check-circle-fill (orange + curseur main). */
	.eco-city-tile .bi-check-circle-fill:hover,
	.eco-objective-state .bi-check-circle-fill:hover {
		color: inherit;
		cursor: inherit;
	}
	/* Coche « Réalisé » d'un objectif : verte, y compris au survol (la règle
	   globale .bi-check-circle-fill:hover la passerait en orange). */
	.eco-objective-state .eco-objective-done-icon,
	.eco-objective-state .eco-objective-done-icon:hover {
		color: #5cc26b;
	}
	.eco-city-tile-pending {
		color: #e8a86a;
	}
	.eco-city-tile .eco-objective-progress {
		margin-top: 0;
	}

	/* Critères d'un objectif (page publique) : fin trait horizontal entre
	   les lignes de la grille (2 colonnes), la ligne verticale d'origine
	   est conservée. */
	.eco-objective-criteria {
		row-gap: 0;
	}
	.eco-objective-criteria .hostv2-kv-item {
		padding: 10px 0;
		border-top: 1px solid rgba(234, 221, 192, 0.12);
	}
	/* Sous-grille : les deux cases d'une rangée partagent les hauteurs de
	   libellé, valeur, barre et notes, pour aligner les barres quand un
	   libellé tient sur deux lignes et l'autre sur une. Sans support de
	   subgrid, retombe sur la colonne habituelle. */
	@supports (grid-template-rows: subgrid) {
		.eco-objective-criteria .hostv2-kv-item {
			display: grid;
			grid-row: span 4;
			grid-template-rows: subgrid;
			row-gap: 2px;
			align-content: start;
		}
	}
	.eco-objective-criteria .hostv2-kv-item:nth-child(-n+2) {
		border-top: none;
		padding-top: 0;
	}

	/* Page de gestion des objectifs : carte « Fonctionnement ». */
	.eco-howto-steps {
		margin: 10px 0 12px;
		padding-left: 22px;
		display: flex;
		flex-direction: column;
		gap: 6px;
		font-size: 0.92rem;
		line-height: 1.45;
	}
	.eco-howto-steps code {
		display: inline;
		width: auto;
		padding: 2px 7px;
		border-radius: 5px;
		background: rgba(0, 0, 0, 0.28);
		color: #eaddc0;
		font-size: 0.85rem;
		white-space: nowrap;
	}
	.eco-howto-row {
		display: flex;
		gap: 8px;
		align-items: baseline;
		padding-top: 8px;
		border-top: 1px solid rgba(234, 221, 192, 0.12);
		font-size: 0.9rem;
		overflow-wrap: anywhere;
	}
	.eco-howto-row + .eco-howto-row {
		margin-top: 8px;
	}
	.eco-howto-muted {
		opacity: 0.75;
	}
	/* Objectif validé devenu inactif (revenu horaire suspendu). */
	.eco-objective-state .eco-objective-inactive-icon,
	.eco-objective-state .eco-objective-inactive-icon:hover {
		color: #e8a86a;
	}
	.eco-objective-inactive {
		margin: 10px 0 14px;
		padding: 10px 12px;
		border-radius: 10px;
		background: rgba(232, 168, 106, 0.1);
		color: #f0c49a;
		font-size: 0.88rem;
	}
	.eco-objective-inactive ul {
		margin: 6px 0 0;
		padding-left: 22px;
	}
	/* Propriété la plus avancée : information secondaire, bas de carte. */
	.eco-objective-deed {
		margin: 16px -18px 0;
		padding: 10px 18px 0;
		border-top: 1px solid rgba(234, 221, 192, 0.12);
		font-size: 0.78rem;
		color: rgba(234, 221, 192, 0.55);
	}
	.eco-objective-deed i {
		margin-right: 4px;
	}
	/* Récompense versée (objectif validé) et revenu horaire en cours (ouvrage actif). */
	.eco-value-earned {
		color: #5cc26b;
	}
	/* Encart-lien vers l'aide-mémoire des commandes admin Eco. */
	.eco-admin-commands-link {
		display: flex;
		align-items: center;
		gap: 12px;
		max-width: 460px;
		margin: 14px 0;
		padding: 10px 14px;
		border-radius: 12px;
		border: 1px solid rgba(234, 221, 192, 0.15);
		background: #29343f;
		color: #eaddc0;
		text-decoration: none;
		transition: border-color 0.15s ease-in-out;
	}
	.eco-admin-commands-link:hover,
	.eco-admin-commands-link:focus {
		color: #eaddc0;
		text-decoration: none;
		border-color: var(--color--marron);
	}
	.eco-admin-commands-link-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 36px;
		height: 36px;
		border-radius: 9px;
		background: rgba(234, 221, 192, 0.1);
		font-size: 1.1rem;
	}
	.eco-admin-commands-link-text {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
	}
	.eco-admin-commands-link-title {
		font-weight: 700;
	}
	.eco-admin-commands-link-sub {
		font-size: 0.82rem;
		opacity: 0.75;
	}
	.eco-admin-commands-link-arrow {
		flex: none;
		opacity: 0.6;
	}
	.eco-admin-commands-link:hover .eco-admin-commands-link-arrow {
		color: var(--color--marron);
		opacity: 1;
	}
	/* Aide-mémoire des commandes admin Eco (self_hosted_eco_admin_commands). */
	.eco-cmd-rules {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 12px;
		margin: 16px 0;
	}
	.eco-cmd-rule {
		display: flex;
		flex-direction: column;
		gap: 4px;
		background: #29343f;
		color: #eaddc0;
		border-radius: 12px;
		padding: 12px 14px;
		font-size: 0.9rem;
		min-width: 0;
	}
	.eco-cmd-rule-title {
		font-weight: 700;
	}
	.eco-cmd-rule-title i {
		margin-right: 4px;
	}
	.eco-cmd-search {
		padding: 10px 0;
	}
	.eco-cmd-search input {
		width: 100%;
		padding: 10px 14px;
		border-radius: 10px;
		border: 1px solid rgba(234, 221, 192, 0.25);
		background: #29343f;
		color: #eaddc0;
		font-size: 1rem;
	}
	.eco-cmd-search input::placeholder {
		color: rgba(234, 221, 192, 0.5);
	}
	.eco-cmd-count {
		margin-top: 6px;
		font-size: 0.85rem;
		opacity: 0.75;
	}
	.eco-cmd-part {
		margin-top: 32px;
	}
	.eco-cmd-part > .hostv2-intro {
		margin: 10px 0 0;
		font-size: 0.88rem;
		opacity: 0.75;
	}
	.eco-cmd-card-hint {
		margin: 4px 0 6px;
		font-size: 0.85rem;
		color: #e8a86a;
	}
	.eco-cmd-access {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 1px 8px;
		border-radius: 999px;
		font-size: 0.72rem;
		font-weight: 700;
		white-space: nowrap;
	}
	.eco-cmd-access-admin,
	.eco-cmd-access-config {
		color: #f0b27a;
		background: rgba(232, 168, 106, 0.14);
	}
	.eco-cmd-access-all {
		color: #8fd49a;
		background: rgba(92, 194, 107, 0.14);
	}
	/* Une commande : badge d'accès, puis syntaxe et exemples côte à côte
	   (même boîte, alignés en haut), explication sous la syntaxe. */
	.eco-cmd {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		grid-template-areas: "access access" "syntax examples" "desc examples";
		align-items: start;
		gap: 6px 20px;
		padding: 12px 0;
		border-top: 1px solid rgba(234, 221, 192, 0.12);
	}
	.eco-cmd-access {
		grid-area: access;
		justify-self: start;
	}
	.eco-cmd-syntax,
	.eco-cmd-examples li {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 5px 6px 5px 10px;
		border-radius: 8px;
		background: rgba(0, 0, 0, 0.22);
		min-width: 0;
	}
	.eco-cmd-syntax {
		grid-area: syntax;
	}
	.eco-cmd-syntax code {
		font-weight: 700;
		color: #eaddc0;
		white-space: normal;
		word-break: break-word;
	}
	.eco-cmd-desc {
		grid-area: desc;
		margin: 0;
		font-size: 0.9rem;
		opacity: 0.8;
	}
	.eco-cmd-examples {
		grid-area: examples;
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-width: 0;
	}
	.eco-cmd-examples code {
		flex: 1;
		min-width: 0;
		overflow-x: auto;
		white-space: nowrap;
		color: #eaddc0;
		font-size: 0.85rem;
	}
	.eco-cmd-copy {
		flex: none;
		padding: 3px 10px;
		border-radius: 6px;
		border: 1px solid rgba(234, 221, 192, 0.3);
		background: transparent;
		color: #eaddc0;
		font-size: 0.75rem;
		font-weight: 600;
		cursor: pointer;
	}
	.eco-cmd-copy:hover {
		border-color: var(--color--marron);
		color: var(--color--marron);
	}
	.eco-cmd-source {
		margin-top: 18px;
		font-size: 0.8rem;
		opacity: 0.65;
	}
	/* Compte à rebours jusqu'au prochain décompte du mod. */
	.eco-scan-countdown {
		display: inline-flex;
		margin-top: 10px;
		align-items: center;
		gap: 8px;
		padding: 6px 14px;
		border-radius: 20px;
		background: #29343f;
		color: #eaddc0;
		font-size: 0.9rem;
	}
	.eco-scan-countdown-value {
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		min-width: 3.2em;
	}
	.eco-scan-countdown-waiting .eco-scan-countdown-value {
		animation: eco-countdown-pulse 1.2s ease-in-out infinite;
	}
	.eco-scan-countdown-off {
		opacity: 0.75;
	}
	@keyframes eco-countdown-pulse {
		50% { opacity: 0.35; }
	}

	/* Alerte sous « La plus avancée » (propriété écartée) : détachée de la
	   grille des critères. */
	.eco-objective-best-note {
		margin: 0 0 14px;
	}
	.eco-objective-scope {
		margin: 6px 0 14px;
		font-size: 0.85rem;
		opacity: 0.85;
	}
	.eco-objective-scope i {
		margin-right: 4px;
	}
	/* Validation d'un objectif atteint par l'administrateur du serveur. */
	.eco-objective-validate {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px 16px;
		flex-wrap: wrap;
		margin: 12px 0 6px;
		padding: 10px 12px 10px 14px;
		border-left: 3px solid #e8a86a;
		border-radius: 0 10px 10px 0;
		background: rgba(232, 168, 106, 0.08);
	}
	.eco-objective-validate-text {
		flex: 1 1 260px;
		font-size: 0.85rem;
		line-height: 1.4;
		opacity: 0.9;
	}
	.eco-objective-validate-text i {
		color: #e8a86a;
		margin-right: 4px;
	}
	.eco-objective-validate-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 8px 18px;
		border: none;
		border-radius: 20px;
		background: #e8a86a;
		color: #29343f;
		font-size: 0.85rem;
		font-weight: 700;
		white-space: nowrap;
		transition: background 0.15s ease-in-out;
	}
	.eco-objective-validate-btn:hover {
		background: #f0bd8a;
	}
	.eco-objective-validate-btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.eco-objective-note {
		margin-top: 6px;
		font-size: 0.85rem;
		line-height: 1.35;
		color: #e8a86a;
	}

	/* Même rendu que la valeur « Nom affiché en jeu » de la carte Vitrine
	   (.hostv2-kv-value), un peu plus grand. */
	.eco-public-server-name {
		font-size: 1rem;
		font-weight: 600;
		color: #eaddc0;
		margin-bottom: 8px;
	}

	.eco-objective-disabled {
		opacity: 0.55;
	}
	.eco-objective-toggle {
		margin-left: auto;
		margin-right: 10px;
		display: flex;
		align-items: center;
	}
}