:root {
    --bs-body-bg: #0B0915;
    --bs-body-color: #f8f9fa;
    --bs-card-bg: rgba(90, 90, 90, 0.7);
    --glass-surface: rgba(64, 38, 19, 0.42);
    --glass-surface-strong: rgba(94, 53, 26, 0.5);
    --glass-stroke: rgba(163, 163, 163, 0.28);
    --glass-hover: rgba(255, 210, 160, 0.22);
    --module-pill-accent: #6f42c1;
    --module-pill-text: #ffffff;
    --ui-surface-1: rgba(255, 224, 190, 0.08);
    --ui-surface-2: rgba(255, 224, 190, 0.12);
    --ui-surface-3: rgba(255, 224, 190, 0.18);
    --ui-border-subtle: rgba(255, 224, 190, 0.22);
    --ui-border-strong: rgba(255, 224, 190, 0.3);
    --ui-text-muted: rgba(255, 245, 232, 0.82);
    /* Notifications = même famille glass dashboard (neutre + violet), jamais ambre/marron */
    --notif-accent: #c4b5fd;
    --notif-accent-soft: rgba(167, 139, 250, 0.2);
    --notif-surface-start: rgba(14, 14, 20, 0.78);
    --notif-surface-end: rgba(10, 10, 16, 0.62);
    --notif-surface-border: color-mix(in srgb, rgba(255, 255, 255, 0.92) 12%, transparent);
    --notif-text: rgba(248, 250, 252, 0.96);
    --notif-text-muted: rgba(226, 232, 240, 0.72);
    --notif-important-bg: rgba(167, 139, 250, 0.34);
    --notif-important-ring: rgba(196, 181, 253, 0.7);
    --notif-sheet-surface: rgba(10, 10, 16, 0.9);
    --notif-item-surface: color-mix(in srgb, rgba(255, 255, 255, 0.92) 7%, transparent);
}

.module-accent-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--module-pill-accent, #6f42c1) 46%, rgba(255, 255, 255, 0.12));
    background: color-mix(in srgb, var(--module-pill-accent, #6f42c1) 30%, rgba(255, 255, 255, 0.06));
    color: color-mix(in srgb, rgba(237, 233, 254, 0.96) 88%, var(--module-pill-text, #ffffff)) !important;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

/* Dans theme-glass.css */
body {
    /* background: url('../../images/bg.jpeg') no-repeat center center fixed; */ /* Commenté car géré dynamiquement */
    background-size: cover;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.form-check-input:checked {
	background-color: #3884d4 !important;
	border: 1px solid rgba(150, 216, 250, 0.8);
}

a, .banner a {
    color: #fff; /* Sous-ligner les liens au survol */
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.sidebar {
    background: var(--aura-sidebar-glass-bg);
    backdrop-filter: var(--aura-sidebar-glass-blur);
    -webkit-backdrop-filter: var(--aura-sidebar-glass-blur);
    color: var(--bs-body-color);
}

.sidebar .nav-item a {
    color: var(--text-color);
}

.col-lg-10 {
    /*background: rgba(215, 215, 215, 0.25);*/
}

.dashboard-button {
    background: var(--glass-surface);
    /*backdrop-filter: blur(10px);*/
}

.dashboard-button-subtitle {
    color: #fff;
}

.modules-container {
    background: rgba(215, 215, 215, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.module {
    /*background-color: rgba(0, 0, 0, 0.45);*/ /*rgba(90,90,90,0.7)*/
    /*backdrop-filter: blur(40px);
    color: var(--bs-body-color);*/
}

.module {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--dashboard-module-radius);
    color: var(--bs-body-color);
}

/* Activer backdrop-filter uniquement sur les petits écrans (< 768px) */
@media (max-width: 767.98px) {
    .module {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px); /* Support pour Safari */
    }
}

/* Groupe de boutons */
.group-bg {
    color: var(--bs-body-color);
}

.btn-group .btn {
    background: transparent;
    border: 0px solid;
    color: var(--bs-body-color) !important;
}

.btn-group .active {
    background: rgba(125, 125, 125, 0.45);
    color: var(--bs-body-color) !important;
    font-weight: bold;
}

.card-header, .card-footer {
    background-color: rgba(70, 70, 70, 0.8);
    color: #fff;
}

.card {
    /*background-color: rgba(0, 0, 0, 0.45);*/ /*rgba(90, 90, 90, 0.7)*/
    /*backdrop-filter: blur(40px);
    color: var(--bs-body-color);*/
}

.card {
    background: var(--glass-surface-strong);
    /*background: rgba(255, 255, 255, 0.1);*/
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    /*border: 1px solid var(--glass-stroke);*/
    border-radius: 16px;
    color: var(--bs-body-color);
    border: none;
    border-top : 2px groove rgba(255, 208, 160, 0.22);
}


/* Appliquer les styles de card à partir du breakpoint md (768px) */
@media (min-width: 768px) {
    .dashboard-card {
        /* Styles de la classe .card de Bootstrap */
        background: rgba(0, 0, 0, 0.30);
        backdrop-filter: blur(30px) saturate(1.12);
        -webkit-backdrop-filter: blur(30px) saturate(1.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        border: 1px solid var(--glass-stroke);
        border-radius: var(--dashboard-shell-radius);
        color: var(--bs-body-color);
    }

}

/* Menu en bas */
.bottom-menu {
    background-color: rgba(58, 36, 22, 0.48); /*rgba(89, 81, 138, 0.7)*/
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    color: #fff !important;
}

/* Styles généraux pour tous les champs */
input, textarea, select {
    background: rgba(255, 224, 190, 0.12) !important;
    /*backdrop-filter: blur(5px);*/
    border: 1px solid rgba(90, 90, 90, 0.85);
    color: #fff !important;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    outline: none;
    transition: all 0.3s ease-in-out;
}

select option {
    background: rgba(71, 44, 25, 0.8);
    backdrop-filter: blur(12px);
}

/* Styles pour le formulaire flottant */
.form-floating > label {
    background-color: transparent !important; /* Fond transparent pour le label */
    color: rgba(255, 255, 255, 0.7) !important; /* Couleur du texte du label */
}

/* Styles pour les champs de formulaire */
.form-control, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
    background-color: rgba(255, 224, 190, 0.12) !important;
    border: 1px solid rgba(90, 90, 90, 0.85);
    color: #fff !important;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    outline: none;
    transition: all 0.3s ease-in-out;
}

/* Placeholder */
.form-control::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Focus */
.form-control:focus {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Styles pour le label en mode flottant */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: rgba(255, 255, 255, 0.7) !important; /* Couleur du texte du label */
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

table, thead, th, td, tr {
    color: #fff !important;
}

.nav-link, .nav-link:hover {
    background: transparent;
    color: #fff;
}

.nav-tabs .nav-link.active {
    color: #fff !important;
    background: rgba(0,0,0,0.3);
}

/* Placeholder uniformisé */
input::placeholder,
textarea::placeholder {
    color: #ffffff !important;
    opacity: 1;
}

/* Supprimer la bordure bleue par défaut des navigateurs */
input:focus, textarea:focus, select:focus, button:focus {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Hover & Focus */
input:hover, textarea:hover, select:hover, button:hover {
    background: rgba(215, 215, 215, 0.2);
}

button {
    cursor: pointer;
    background: transparent;
    border: none;
}

button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.text-muted {
    color: #ccc !important;
}

.text-secondary {
    color: #fff !important;
}

table, table th, table td {
    background-color: transparent !important;
    border-color: transparent !important;
}

.form-group select,
.form-group select.form-control,
.form-group select.form-select {
    color: #ffffff !important;          /* texte sombre */
    background-color: rgba(255, 224, 190, 0.24) !important;
}

.form-group select option {
    color: #ffffff !important;
    background-color: #333 !important;
}

.list-group-item {
    background-color: rgba(80, 47, 26, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--bs-body-color);
}

.list-group-item:hover {
    background-color: var(--glass-hover);
}

.row-line:hover {
    background-color: var(--glass-hover);
}

.glassmorphism, .glassmorphism a {
    -webkit-backdrop-filter: blur(10px);
    color: #fff; /* Texte blanc en mode sombre */
}

.glassmorphism a:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    body {
        position: relative;
        background-attachment: scroll;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: inherit;
        background-position: inherit;
        background-repeat: inherit;
        background-size: inherit;
        background-attachment: inherit;
        background-color: rgba(0, 0, 0, 0.2);
        filter: blur(1px) brightness(0.72) saturate(0.95);
        transform: scale(1.06);
        pointer-events: none;
        z-index: -1;
    }
}

@media screen and (min-width: 1400px) {
    .form-control{
        font-size: 14px;
    }
}