/* Interface par défaut */
/* Ensemble de l'interface de base.html */

html, body {
	z-index: 0;
	margin: 0;
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
}

#main_content {
	top: 0%;
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 10;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-x: auto;
	min-height: 100vh;
}

#main_content_center {
	display: block;
	max-height: 100vh;  /* Limite la hauteur pour éviter le dépassement */
	overflow: auto;
}

/* Style du texte au dessus du bouton GPS */
.suivi_gps_text {
	font-size: 12px;
	position: fixed;
	top: 80px;
	left: 5px;
}

#search-button {
	position: fixed;
	width: 500px;
	top: 50px;
	right: 10px;
	z-index: 1000;
}

#search-input {
	width: 500px;
}

#search-results {
	display: none;
}


@media only screen and (min-width: 551px) and (max-width: 900px) {
	#search-button {
		width: 300px;
	}
	#search-input {
		width: 300px;
	}
}

@media only screen and (max-width: 550px) {
	#search-button {
		width: 150px;
	}
	#search-input {
		width: 150px;
	}
}

#toggle-chat-button {
	position: fixed;
	top: 10px;
	right: 10px;
	height: 35px;
	z-index: 1000;

	display: flex;
	align-items: center;
	gap: 6px; /* espace propre entre les deux */
}

/* Supprime les comportements inline */
#toggle-chat-button a {
	display: flex;
	align-items: center;
	line-height: 0;
	height: 34px;
}

.img_button {
	height: 34px;
	display: block;
	cursor: pointer;
}

#logout-icon {
	border: none;
	background-color: transparent;
	padding: 0;
	cursor: pointer;
}

.btn-back {
	padding: 5px 5px 10px;
	margin-bottom: 12px;
	cursor: alias;
	border-radius: 5px;
	display: block;
	box-shadow: 0 -5px rgba(0,0,0,0) inset; 
}

.btn-back {
	color: rgb(37, 29, 151);
	background: rgb(10, 182, 4);
	padding: 5px 5px 10px;
	margin-bottom: 12px;
	cursor: pointer;
	border-radius: 5px;
	display: block;
	box-shadow: 0 -5px rgb(8, 143, 3) inset;
	width: max-content;
}

.btn-back:hover, .btn-back:active {
	padding: 9px 5px 6px;
	box-shadow: 0 5px rgba(27, 122, 3) inset;
}

/* Style du bouton GPS */
.switch {
	display: inline-block;
	position: fixed;
	top: 100px;
	left: 5px;
	width: 70px;
	height: 40px;
	cursor: pointer;
	overflow: hidden;
}

.switch input {
	position: absolute;
	top: -30px;
	left: -30px;
	width: 0;
	height: 0;
}

.switch input + span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #99b4df;
	border-radius: 20px;
}

.switch input:checked + span {
	background: #346abf;
}

.switch input + span:before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 4px;
	width: 32px;
	height: 32px;
	background: white;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: all .5s;
}

.switch input:checked + span:before {
	left: 34px;
}

@font-face {
	font-family: 'Loose-Light';
	src: url("/static/fonts/Loose-Light.woff2") format('woff2'),
		 url("/static/fonts/Loose-Light.woff") format('woff'),
		 url("/static/fonts/Loose-Light.ttf") format('truetype'),
		 url("/static/fonts/Loose-Light.eot") format('embedded-opentype'),
		 url("/static/fonts/Loose-Light.otf") format('opentype');
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: 'Loose-Light', sans-serif;
}

#search-icon {
	position: fixed;
	border: none;
	border-radius: 10px;
	top: 50px;
	right: 10px;
	z-index: 1000;
	background-color: rgba(255, 255, 255, 0.3);
	height: 30px;
	justify-content: center;
}

#search-results {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 10px;
	width: 100%;
	line-height: 20px;
}

.search-result {
	padding: 10px;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
}

.search-result:hover {
  	background-color: #f0f0f0;
}

.device-id {
	font-size: 12px;
	line-height: 0px;
}

.font {
	background-color: #1b7a03;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;
}

#footer {
	position: fixed;
	display: block;
	bottom: 0;
	left: 0;
	width: 100%;
	color: black;
	text-align: center;
	line-height: 40px;
	z-index: 1000;
	transform: display 1s ease;
}

.footer-link {
	color: black;
	background-color: rgba(255, 255, 255, 0.2);
	text-decoration: none;
	border-radius: 30%;
}

.footer-link:hover, .footer-link:active {
	text-decoration: underline;
}




/**  -----------------------------
	CSS des pages au font vert
-----------------------------  **/
#center {
	position: relative;
	margin: auto;
}

.title {
	font-size: 30px;
}

.text {
	font-size: 24px;
}

.subtext {
	font-size: 16px;
}

.bulles {
	background-color: white;
	padding: 20px;
	border: 1px solid black;
}

/* 🔹 CAS 1 : une seule bulle */
.bulles:only-child {
	border-radius: 10px;
}

/* 🔹 CAS normal : plusieurs bulles */
.bulles:first-child:not(:only-child) {
	border-radius: 10px 10px 0 0;
}

.bulles:last-child:not(:only-child) {
	border-radius: 0 0 10px 10px;
}

@media only screen and (max-width: 400px) {
	#center {
		width: 94%;
		height: 94%;
	}
	
	.title {
		font-size: 16px;
	}
	
	.text {
		font-size: 12px;
	}

	.subtext {
		font-size: 9px;
	}
	
	.bulles {
		padding: 20px;
	}
	
	.champs {
		width: 130px;
	}
}


@media only screen and (min-width: 400px) and (max-width: 600px) {
	#center {
		width: 86%;
		height: 86%;
	}
	
	.title {
		font-size: 20px;
	}
	
	.text {
		font-size: 14px;
	}

	.subtext {
		font-size: 11px;
	}
	
	.bulles {
		padding: 20px;
	}
}


@media only screen and (min-width: 600px) and (max-width: 800px) {
	#center {
		width: 80%;
		height: 80%;
	}
	
	.title {
		font-size: 28px;
	}
	
	.text {
		font-size: 18px;
	}

	.subtext {
		font-size: 14px;
	}
	
	.bulles {
		padding: 20px;
	}
}


@media only screen and (min-width: 800px) and (max-width: 920px) {
	#center {
		width: 70%;
		height: 70%;
	}
}


@media only screen and (min-width: 920px) {
	#center {
		width: 60%;
		height: 60%;
	}
}




/**  --------------------------
		   Flashups
--------------------------  **/
.flashup_danger {
	color: rgb(255, 89, 89);
}

.flashup_success {
	color: rgb(128, 255, 89);
}

.flashup_normal {
	color: rgb(202, 104, 23);
}

#flashup-container {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 5500;
}

.page_flashup_message {
	padding: 20px;
}

.page_flashup_container { /* .popup-container		✓ */
	display: none;
	position: relative;
	right: -100%;
	transition: transform 1s, right 1s;
	z-index: 6000;
	background: #bad0e6;
	padding: 5px;
	margin-bottom: 12px;
	border-radius: 5px;
	box-shadow: 
	5px 5px #7daccc inset, /* Ombre en bas à droite */
	5px -5px #7daccc inset; /* Ombre en haut à droite */
}

.page_flashup_container.show { /* .popup-container.show		✓ */
	right: 0;
	display: block;
}

.page_flashup_container.hide {
	right: -100%; /* Le flashup repart vers la droite pour disparaître */
}


/**  --------------------------
		   Tchat
--------------------------  **/
#tchat-container {
	position: absolute;
	top: 0;
	left: -100%;
	height: 100vh; /* ou 100% si vous voulez qu'il prenne la hauteur de son parent */
	background-color: #5d66e2;
	border: 3px solid #5dc3e2;
	padding: 10px;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	overflow-y: auto; /* pour que le contenu défile si nécessaire */
	transition: left 0.5s;
}

#toggle-chat {
	color: #000000;
	background-color: rgb(39, 107, 255);
	padding: 5px;
	cursor: pointer;
	border-radius: 10px;
	display: block;
	border: none;
	position: relative;
	width: 100%;
}

#close-chat-font {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #000000;
	background-color: rgba(0, 0, 0, 0.1);
	z-index: 1998;
}

#tchat {
	top: 0%;
	left: 0%;
	width: 100%;
	height: 90%;
	overflow-y: scroll;
	position: relative;
	z-index: 2005;
	font-size: 18px;
	text-align:center;
	flex-grow: 1;
	overflow-y: auto; /* pour que le contenu défile si nécessaire */
}

.load-more-messages {
	color: #a8a8a8;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 5px 5px 10px;
	cursor: pointer;
	border-radius: 40px 40px 0px 0px;
	display: block;
	border: none;
	position: relative;
	width: 100%;
}

.load-more-messages:hover, .load-more-messages:active {
	color: #a8a8a8;
	background-color: rgba(0, 0, 0, 0.4);
}

.custom-button {
	border: none;
	background-color: transparent;
	padding: 0;
	cursor: pointer;
}

.error_message {
	font-size: 20px;
	color: rgb(163, 0, 0);
	padding: 20px;
}

.success_message {
	font-size: 20px;
	color: rgb(8, 163, 0);
	padding: 20px;
}

.gris {
	color: #bfbfbf;
}

.CodeBlock {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}

.tchat-link {
	color: #8ab4f8;
	text-decoration: underline;
}

.img_message {
	width: 30px;
	height: 30px;
}

.cursor_passage {
	text-align: left;
	background-color: rgba(0, 0, 0, 0.3);
}

.cursor_passage:hover, .cursor_passage:active {
	background-color: rgba(0, 0, 0, 0.4);
}

.nickname {
	position: relative;
	top: 5px;
	left: 3px;
}

.message-content {
	white-space: normal;
	word-wrap: break-word;
	color: rgb(148, 148, 148);
	padding: 0px 6px 0px 8px;
}

.msg_timestamp {
	color: #a8a8a8;
	top: 1px;
	display: inline-block;
	position: relative;
	line-height: 1.5;
	font-size: 12px;
}

#messageInput {
	width: 100%;
	left: 0%;
	margin: 0%;
	padding: 0%;
	background-color: transparent;
	color: rgb(148, 148, 148);
	border: 0px solid #000;
	border-radius: 10px;
	line-height: 1.5;
	font-size: 18px;
	position: relative;
	resize: none;
}

#messageInput:focus {
	outline: none;
}

#messageDiv {
	display: inline-block;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 0px 0px 20px 20px;
	margin: 0%;
	padding: 10px;
	justify-content: center;
	align-items: center;
	flex-grow: 0; /* pour que le messageDiv ne prenne pas toute la hauteur disponible */
}

#messageDiv:hover, #messageDiv:active {
	background-color: rgba(0, 0, 0, 0.4);
}

#sendDiv {
	display: flex;
	height: 100%;
	width: max-content;
	position: relative;
	margin-left: auto;
}

.sendBtn {
	font-size: 30px;
	text-decoration: none;
}

.sendBtn:hover, .sendBtn:active {
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 14px;
}

#pseudo {
	color: black;
	display: block;
	justify-content: center;
	align-content: center;
}

#command-proposals {
	max-height: 300px;
	overflow-y: scroll;
	::-webkit-scrollbar {
		background-color: #5d66e2;
	}
}

.command-proposal {
	margin: 0;
	padding: 0;
	margin-bottom: 10px;

}

.background-font {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 5px;
}

.popup-font {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

.popup-content {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgb(54, 54, 54);
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	z-index: 20;
}


.custom-context-menu {
	position: fixed;
	background: #2b2f33;
	border-radius: 0px 8px 8px 8px;
	padding: 5px;
	z-index: 9999;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.custom-context-menu button {
	background: none;
	border: none;
	color: white;
	padding: 8px 15px;
	cursor: pointer;
	width: 100%;
	text-align: left;
}

.custom-context-menu button:hover {
	background: #40444b;
}


@media only screen and (max-width: 600px) {
	#tchat-container {
		width: 100%;
	}
	#flashup-container {
		width: 64%;
	}
}

@media only screen and (min-width: 601px) and (max-width: 700px) {
	#tchat-container {
		width: 70%;
	}
	#flashup-container {
		width: 70%;
	}
}

@media only screen and (min-width: 701px) {
	#tchat-container {
		width: 50%;
	}
	#flashup-container {
		width: 54%;
	}
}

@media only screen and (min-width: 901px) {
	#flashup-container {
		width: 40%;
	}
}


/* =============================================================== 
								Maps
=============================================================== */
.leaflet-custom-menu {
	position: fixed;
	background: #2b2f33;
	border-radius: 0px 8px 8px 8px;
	padding: 6px;
	z-index: 10000;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.leaflet-custom-menu button {
	background: none;
	border: none;
	color: white;
	padding: 8px 14px;
	cursor: pointer;
	width: 100%;
	text-align: left;
}

.leaflet-custom-menu button:hover {
	background: #40444b;
}


/* =============================================================== 
					CSS de la page list.html				   
=============================================================== */
.table-container {
	width: 100%;
	overflow-x: auto;
}

.table-container table {
	width: 100%;
	border-collapse: collapse;
	font-size: 120%;
}

.table-container th, .table-container td {
	border: 1px solid #ddd;
	padding: 2px 8px;
	text-align: left;
}

.table-container th {
	background-color: #f4f4f4;
	position: sticky;
	top: 0;
}

.table-container th.sortable:hover {
	cursor: pointer;
}

.table-container th.active {
	background-color: #d4d4d4;
}

#pagination button {
	padding: 5px 10px;
	position: relative;
}

/* Responsive design pour petits écrans */
@media (max-width: 1200px) {
	.table-container table {
		font-size: 110%;
	}

	.table-container th, .table-container td {
		padding: 6px;
	}
}

@media (max-width: 992px) {
	.table-container table {
		font-size: 100%;
	}

	.table-container th, .table-container td {
		padding: 5px;
	}

	input#search {
		font-size: 90%;
		padding: 5px;
	}
}

@media (max-width: 768px) {
	.table-container table {
		font-size: 90%;
	}

	.table-container th, .table-container td {
		padding: 4px;
	}

	input#search {
		font-size: 80%;
		padding: 4px;
	}

	#pagination {
		font-size: 90%;
	}

	/* Styles spécifiques pour l'email */
	.table-container td.email-cell {
		word-break: break-word; /* Permet de couper les mots longs */
		white-space: normal; /* Permet le retour à la ligne */
	}
}

@media (max-width: 576px) {
	.table-container table {
		font-size: 85%;
	}

	.table-container th, .table-container td {
		padding: 3px;
	}

	input#search {
		font-size: 75%;
		padding: 3px;
	}

	#pagination {
		font-size: 80%;
	}
}







/* =============================================================== 
					CSS des connexions OAuth				   
=============================================================== */
.provider-btn {
	width: 100%;
	max-width: 320px;
	height: 42px;
	background-color: #fff;
	border-radius: 6px;
	border: 1px solid #dadce0;
	display: flex;
	align-items: center;
	cursor: pointer;
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}

.provider-btn:hover {
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.provider-icon-wrapper {
	height: 100%;
	width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.provider-icon {
	width: 18px;
	height: 18px;
}

.btn-text {
	font-size: 14px;
	font-weight: 500;
	color: #3c4043;
	flex: 1;
	text-align: center;
}

.provider-btn {
	transition: all 0.2s ease;
}

.provider-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}












.n {
	padding:5px
}

#az-website-title a {
	text-decoration: none
}

.az-m-image-align-1 {
	text-align:left
}

.az-m-image-align-2 {
	text-align:right
}

.az-m-image-align-3 {
	text-align:center
}

.btn_img {
	width: 250px;
}

.img_post {
	max-width: 98%;
	max-height: 250px;
	position: relative;
}

#imageInput {
	display: none; /* Cache l'élément input */
}

.popup-container {
	display: none;
	position: fixed;
	right: -100%;
	transition: right 2s;
	z-index: 30;
	
	top: 0%;
	width: 30%;
	background: #151617;
	padding: 5px 5px 10px;
	margin-bottom: 12px;
	border-radius: 5px;
	box-shadow: 
	5px 5px #0b0c0d inset, /* Ombre en bas à droite */
	5px -5px #0b0c0d inset; /* Ombre en haut à droite */
}

.popup-container.show {
	right: -1%;
}

.popup-overlay {
	display: none;
}

.hidden {
	display:none
}

.message-popup {
	color: rgb(92, 38, 0);
	font-size: 14px;
}