/* Regles partagees par au moins deux parties de la page (accueil/menu/jeu/
   preparation), plus le "chrome" persistant (header, menu d'icones, panneau
   de tchat) qui reste dans le layout (views/index.html). Chaque partie a
   son propre fichier CSS, lie directement depuis son fragment HTML :
   accueil.css, jeu.css, preparation.css (menu.css existe deja mais menu.html
   n'est pas encore extrait, voir views/index.html). */

@font-face {
	font-family: "Amaranth";
	src: url('/fonts/Amaranth-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Comfortaa";
	src: url('/fonts/Comfortaa-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "titlefont";
	src: url('/fonts/titlefont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.hidden {
	display: none !important;
}

body {
	color: #282828;
	font-family: 'Amaranth', cursive;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	margin: 0px;
}

h2 {
	color: white;
	text-align: center;
}

p {
	text-indent: 3%;
}

input {
	font-family: 'Dekko', cursive;
}

button {
	font-family: inherit;
	background-color: #7db136;
	border-radius: 0.6em;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-size: 1.2em;
	margin-top: 2px;
	text-decoration: none;
	height: 3em;
	width: 100%;
	line-height: 0.91em;
	border: none;
}

/* Legacy/non utilise actuellement (aucun element ne porte ces classes/id) :
   garde pour reference, a retirer si confirme mort (voir docs/UPDATE.md). */
.bouton {
	font-family: "Amaranth", cursive;
	position: absolute;
	left: 36%;
	top: 90%;
	width: 28%;
	height: 7%;
	text-align: center;
	-webkit-box-shadow: 0px 5px 7px -3px #3e7327;
	box-shadow: 0px 5px 7px -3px #3e7327;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #457655), to(#70967b));
	background: -o-linear-gradient(top, #457655 5%, #70967b 100%);
	background: linear-gradient(to bottom, #457655 5%, #70967b 100%);
	background-color: #2b5c3f;
	border-radius: 4px;
	border: 1px solid #334d41;
	cursor: pointer;
	color: #ffffff;
	font-size: 18px;
	padding: 6px 12px;
	margin-top: 2px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #5b8a3c;
}

.desactive {
	color: #bebebe !important;
}

.bordure_bas {
	position: fixed;
	left: 0%;
	width: 100%;
	top: 95%;
	height: 5%;
	z-index: 0;
	-webkit-box-shadow: 0px 6px 25px 3px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 6px 25px 3px rgba(0, 0, 0, 0.75);
}

#bordure_haut {
	position: absolute;
	left: 0%;
	width: 100%;
	top: 0%;
	height: 5%;
	background-image: url(/images/bordure_haut.png);
	background-size: 100% 100%;
	z-index: -1;
	-webkit-box-shadow: 0px 6px 25px 3px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 6px 25px 3px rgba(0, 0, 0, 0.75);
}

/* ######## Chrome persistant (header + menu d'icones) ########### */

#header {
	position: fixed;
	z-index: 999;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 5%;
	background-color: white;
	background-image: url(/images/logo-header.png);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
}

#version_app {
	position: absolute;
	top: 2px;
	left: 6px;
	font-size: 0.6em;
	color: rgba(0, 0, 0, 0.35);
}

#menu_parametres {
	z-index: 9999;
	position: fixed;
	top: 5.5%;
	right: 1.5%;
	display: none;
}

.bouton_parametres {
	margin-bottom: 15%;
	border-radius: 50%;
	display: none;
}

.img_parameter {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

#bouton_parametres_utilisateur {
	display: block;
}

/* ######## Modale de parametres utilisateur (docs/PARAMETRES.MD) ########### */

#modale_parametres_backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.55);
	z-index: 10000;
}

#modale_parametres {
	display: block;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 92%;
	max-width: 30em;
	max-height: 86%;
	overflow-y: auto;
	box-sizing: border-box;
	background-color: rgba(20, 20, 20, 0.92);
	border-radius: 12px;
	padding: 1em 1.5em 1.5em;
	color: #ffffff;
	font-family: "Comfortaa", sans-serif;
	font-size: 0.92em;
	z-index: 10001;
	box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.12), 0 0.8em 2em rgba(0, 0, 0, 0.45);
}

#modale_parametres_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.8em;
	position: sticky;
	top: -1em;
	padding-top: 1em;
	padding-bottom: 0.6em;
	background-color: rgba(20, 20, 20, 0.96);
	z-index: 1;
}

#modale_parametres_titre {
	font-size: 1.1em;
	font-weight: bold;
}

#fermer_modale_parametres {
	cursor: pointer;
	width: 1.2em;
	height: 1.2em;
}

.section_parametres {
	margin-bottom: 1.2em;
}

.section_parametres h3 {
	margin: 0 0 0.5em;
	font-size: 0.95em;
	color: #cfcfcf;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	padding-bottom: 0.3em;
}

.ligne_parametre {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.5em 0;
	cursor: pointer;
}

.ligne_parametre span {
	flex: 1;
}

.ligne_parametre input[type="checkbox"] {
	width: 1.3em;
	height: 1.3em;
	flex: none;
}

.ligne_parametre input[type="range"] {
	width: 45%;
	flex: none;
}

.ligne_parametre select {
	width: 45%;
	flex: none;
	font-family: inherit;
}

/* #bouton_stats reprend .bouton_parametres (pour sa logique d'affichage
   existante, voir RapportDistribution.js/toc.js) mais dans la modale il doit
   s'afficher comme une ligne de la liste, pas comme une icone ronde flottante. */
#modale_parametres_content .bouton_parametres {
	margin-bottom: 0;
	border-radius: 0;
}

#modale_parametres_content #icone_stats {
	width: 1.6em;
	height: 1.6em;
	flex: none;
}

/* ######## Fond commun accueil/menu/jeu ########### */

.fond_jeu {
	background-color: #589306;
	background-image: url(/images/padding.png);
}

.fond_jeu_ombre {
	position: fixed;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 19%, rgba(77, 101, 35, 0) 59%, rgba(0, 0, 0, 0.7) 100%);
}

.fond_jeu_clair {
	position: fixed;
	width: 100%;
	height: 100%;
	background: -o-radial-gradient(circle, rgba(97, 147, 113, 0) 41%, rgba(0, 0, 0, 0.3) 100%);
	background: radial-gradient(circle, rgba(97, 147, 113, 0) 41%, rgba(0, 0, 0, 0.3) 100%);
}

/* ######## #salon (englobe accueil + menu) ########### */

#salon {
	position: fixed;
	-webkit-box-shadow: inset 0px 10px 19px 6px rgba(0, 0, 0, 0.75);
	box-shadow: inset 0px 10px 19px 6px rgba(0, 0, 0, 0.75);
	overflow: auto;
	height: 95%;
	width: 100%;
	z-index: 999;
	top: 5%;
	justify-content: space-evenly;
	display: flex;
	color: white;
	font-family: "Comfortaa";
}

.header_cards {
	position: fixed;
	border-radius: 0.9rem;
	z-index: 9990;
	border: 5px solid white;
	-webkit-box-shadow: 0px 6px 25px 3px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 6px 25px 3px rgba(0, 0, 0, 0.75);
}

.header_cards_1 {
	top: -1000%;
	left: -1000%;
}

.header_cards_2 {
	top: 100%;
	left: 100%;
}

#salon input {
	font-family: 'Amaranth', cursive;
	width: 100%;
	font-size: 1em !important;
	height: 2em;
	padding-left: 2%;
	border-radius: 0.5em;
	border: none;
	margin: 0.2em 0 0.2em 0px;
	text-align: center;
}

#salon button:hover {
	border-color: white;
}

/* Carte "salon" partagee par l'accueil (choix du pseudo) et le menu (jouer/
   creer/rejoindre une partie) : meme habillage visuel pour les deux.
   .inner_content DOIT rester avant .salon_content dans ce fichier : les deux
   classes sont posees sur le meme element (class="salon_content inner_content")
   et se disputent la propriete position (absolute vs relative) — a specificite
   egale, l'ordre du fichier tranche, et c'est .salon_content (relative) qui
   doit gagner pour que .inner_content se positionne dans sa propre carte
   plutot que par rapport a .container (sinon tout le contenu des cartes se
   superpose, cf. incident du 2026-07-09). */
.inner_content {
	position: absolute;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	overflow-y: auto;
	background-color: rgba(0, 0, 0, 0.43);
	padding: 2%;
	border-radius: 1em;
}

.salon_div.salon_stats {
	width: 40%;
	max-width: 1000px;
}

.salon_div {
	min-width: 425px;
	width: 30%;
	text-align: center;
	margin-top: 0.5em;
	padding: 0.3em;
}

/* En dessous de min-width (425px), les cartes salon (pseudo/jouer/creer/rejoindre)
   debordaient a l'horizontale sur mobile plutot que de passer en pleine largeur. */
@media (max-width: 520px) {
	.salon_div, .salon_div.salon_stats {
		min-width: 0;
		width: 92%;
		max-width: none;
	}
}

.salon_content > img {
	order: 1;
	max-width: 8em;
	max-height: 8em;
	width: auto;
	height: auto;
	object-fit: contain;
	width: 100%;
}

.salon_content {
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	justify-content: space-evenly;
	-ms-flex-line-pack: start;
	position: relative;
	padding: 0.5em;
}

/* Legacy/non utilise actuellement. */
span.salon_sous_menu {
	width: 100%;
}

/* ######## Badge joueur partage par la preparation (emplacements statiques)
   et le jeu (avatars/etoiles/pseudo generes en JS autour du plateau) ########### */

.image_profil_joueur {
	position: absolute;
	border-radius: 50%;
	background-color: white;
	background-size: 100% 100%;
	border: 0.15em solid #252525;
	width: 3.7em;
	height: 3.7em;
}

.image_profil_joueur_0 { background-color: #e00605; }
.image_profil_joueur_1 { background-color: #0f69aa; }
.image_profil_joueur_2 { background-color: #226c1a; }
.image_profil_joueur_3 { background-color: #ec9013; }

.etoiles_joueur {
	position: absolute;
	width: 3.7em;
	height: 0.74em;
	background-size: 100% 100%;
	z-index: 3;
}

.pseudo_joueur_0 { background-color: #e00605; border: 0.1em solid #e00605; }
.pseudo_joueur_0.tour_en_cours { background-color: white; color: #e00605; }
.pseudo_joueur_1 { background-color: #0f69aa; border: 0.1em solid #0f69aa; }
.pseudo_joueur_1.tour_en_cours { background-color: white; color: #0f69aa; }
.pseudo_joueur_2 { background-color: #226c1a; border: 0.1em solid #226c1a; }
.pseudo_joueur_2.tour_en_cours { background-color: white; color: #226c1a; }
.pseudo_joueur_3 { background-color: #ec9013; border: 0.1em solid #ec9013; }
.pseudo_joueur_3.tour_en_cours { background-color: white; color: #ec9013; }