/*
 *
 * ██████╗                                                         ██╗        ██████╗     ██╗
 * ██╔══██╗ ██ ███╗   ███╗    ████╗   ██████╗  █████╗    █████╗  ██████╗        ██╔═╝   ██║ ██║
 * █████╔═╝  ██║ ║█║ ██║ ██║ ██╔══╝   ██╔══██╗ ██╔══██╗ ██╔══╗█╗   ██╔═╝        ██║    ██║   ██║
 * ██╔══╝    ██║ ╚═╝ ██║ ██║  ████╗   █████╔═╝ █████╔═╝ ██║  ╚═╝   ██║          ██║    ████████║
 * ██║       ██║     ██║  █║      ██╗ ██╔══╝   ██╔══╝   ██║        ██║          ██║    ██║   ██║
 * ██║       ██║      ████║   ████╔╝  ██║      ██████╗   █████╗     ███╗      ██████╗  ██║   ██║
 * ╚═╝       ╚═╝      ╚═══╝   ╚═══╝   ╚═╝      ╚═════╝   ╚════╝     ╚══╝      ╚═════╝  ╚═╝   ╚═╝
 *
 * ---  CSS : Feuilles de style en cascade | Jean-Bernard MARTINEZ & Ayoub BENDIB - ProspectIA.eu © 2025 - SentientTech.com
 * --- Fichier : layout_darck.css | Thème : Thème sombre Layout
 * 							
*/

/* ***************************************************************************************************
		3 - LAYOUT : DISPOSITION ==> [ Mise en place type : Header, nav, main, footer ]
****************************************************************************************************** */

.navbar {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;	
	background-color: #07033d;
}

.nav_logo {
	fill: var(--color-text);
	width: auto;
	height: 50px;
}

.nav-link.active, .nav-link:active {
	color: var(--color-accent) !important;
	cursor:none;
}

.dropdown-menu {
	background-color: var(--color-text) !important;
}

.dropdown-item {
	color: var(--color-background-alt) !important;
}

.dropdown-item:hover {
	background-color: rgba(255,255,255,0.3) !important;
	color: var(--color-accent) !important;
	/* text-shadow: -1px -1px 0px var(--color-background-alt); */
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--color-accent) !important;
    text-decoration: none;
    background-color: rgba(255,255,255,0.5) !important;
	cursor:none;
}

.navbar-toggler {
	padding: 0.2rem 0.5rem;
	margin-left: 0.25rem;
	border: var(--bs-border-width) solid var(--color-text);
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0.25rem rgba(166, 167, 255, 0.25) !important;
}

.navbar-toggler-icon
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28134, 127, 243, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

#select_lg {
	background-color: var(--color-background-alt) !important;
	color: var(--color-text) !important;
	border: var(--bs-border-width) solid var(--color-text) !important;
	width: 38px !important;
	padding: 0 !important;
}

/**
* nav checkbox livescales
**/

#info {
	position: absolute;
	z-index: 1100;
	top: 1.60rem;
	right: 14.5rem;
	font-size: 18px;
	color: var(--color-text);
}

#checkLive {
	position: absolute;
	z-index: 1100;
	display:flex;
	flex-direction: row;
	justify-content:space-between;
	align-items: center;
	top: 1.80rem;
	right: 8rem;
	width: 50px;
	height: 18px;
	font-size: 10px;
	color: var(--color-text);
	border: 2px solid var(--color-text);
	border-radius: 20px;
}

#livescales, #soundscales, #microscales {
	display: none;
}

#checkLive span {
	width: 50%;
	text-align: center;
}

.live_on div {
	position: absolute;
	z-index: 1200;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	border-radius: 20px;
	background-color: var(--color-text);
	transition: left 0.3s ease;
}

.live_off div {
	position: absolute;
	z-index: 1200;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	border-radius: 20px;
	background-color: var(--color-text);
	transition: left 0.3s ease;
}

#soundLive {
	position: absolute;
	z-index: 1100;
	top: 1.60rem;
	right: 11.5rem;
	font-size: 18px;
	color: var(--color-text);
}

#microLive {
	position: absolute;
	z-index: 1100;
	top: 1.60rem;
	right: 13rem;
	font-size: 18px;
	color: var(--color-text);
}

.fa-paragraph {
	font-size: 18px;
}

/**
* STAT
**/

#profil .block-data, #stat .block-data {
	padding: 0.5rem;
	border: 1px solid var(--color-boutons);
	border-radius: 10px;
	margin: 0.5rem 0;
	min-width: 330px !important;
	color: var(--color-boutons);
	font-size: 14px;
}

#profil .block-data p, #stat .block-data p {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 0.25rem 0;
}

#profil .block-data i, #stat .block-data i {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0.4rem 0.5rem;
	font-size: 20px;
	background-color: var(--color-boutons);
	border-radius: 50%;
	color: var(--color-border);
}

#profil .block-data hr, #stat .block-data hr {
	color: var(--color-boutons);
	margin: 0.1rem !important;
}

#profil .block-data .value-number, #stat .value-number {
	font-size: 20px;
}