/* ==========================================================================
   Document Clarity — Thème Bootstrap 5.3.3
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Import de la police
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   2. Variables CSS racine — Surcharges Bootstrap 5.3.3
   -------------------------------------------------------------------------- */
:root {
    /* --- Palette de marque --- */
    --dc-primary:          #6e998a;
    --dc-primary-light:    #8ebdae;
    --dc-primary-dark:     #4f7568;
    --dc-secondary:        #0b1319;
    --dc-dark-teal:        #04333b;
    --dc-abyss:            #07191e;
    --dc-neutral-light:    #e9ecef;

    /* --- Couleurs Bootstrap primaires --- */
    --bs-primary:          #6e998a;
    --bs-primary-rgb:      110, 153, 138;
    --bs-secondary:        #0b1319;
    --bs-secondary-rgb:    11, 19, 25;
    --bs-success:          #4f7568;
    --bs-info:             #8ebdae;
    --bs-light:            #e9ecef;
    --bs-dark:             #04333b;

    /* --- Corps de page --- */
    --bs-body-bg:          #0b1319;
    --bs-body-color:       #ffffff;
    --bs-body-font-family: 'Montserrat', Inter, system-ui, -apple-system, sans-serif;
    --bs-body-font-size:   1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;

    /* --- Liens --- */
    --bs-link-color:             #6e998a;
    --bs-link-color-rgb:         110, 153, 138;
    --bs-link-hover-color:       #8ebdae;
    --bs-link-hover-color-rgb:   142, 189, 174;
    --bs-link-decoration:        none;

    /* --- Bordures --- */
    --bs-border-color:           rgba(110, 153, 138, 0.25);
    --bs-border-radius:          0.5rem;
    --bs-border-radius-sm:       0.35rem;
    --bs-border-radius-lg:       0.75rem;
    --bs-border-radius-xl:       1rem;
    --bs-border-radius-pill:     50rem;

    /* --- Ombres --- */
    --bs-box-shadow:             0 0.5rem 1.5rem rgba(4, 51, 59, 0.45);
    --bs-box-shadow-sm:          0 0.125rem 0.5rem rgba(4, 51, 59, 0.35);
    --bs-box-shadow-lg:          0 1rem 3rem rgba(4, 51, 59, 0.6);

    /* --- Composants glassmorphism --- */
    --dc-glass-bg:               rgba(11, 19, 25, 0.65);
    --dc-glass-border:           rgba(110, 153, 138, 0.3);
    --dc-glass-blur:             blur(10px);

    /* --- Typographie --- */
    --bs-headings-font-family:   'Montserrat', Inter, system-ui, sans-serif;
    --bs-headings-font-weight:   600;
    --bs-headings-color:         #ffffff;

    /* --- Formulaires --- */
    --bs-form-control-bg:        rgba(11, 19, 25, 0.7);
    --bs-form-control-border-color: rgba(110, 153, 138, 0.4);
    --bs-form-control-color:     #ffffff;
    --bs-form-control-focus-border-color: #6e998a;
    --bs-form-control-focus-box-shadow:   0 0 0 0.25rem rgba(110, 153, 138, 0.25);

    /* --- Navbar --- */
    --bs-navbar-color:           rgba(255, 255, 255, 0.85);
    --bs-navbar-hover-color:     #8ebdae;
    --bs-navbar-active-color:    #6e998a;
    --bs-navbar-brand-color:     #ffffff;
    --bs-navbar-brand-hover-color: #8ebdae;
    --bs-navbar-toggler-border-color: rgba(110, 153, 138, 0.4);

    /* --- Dropdown --- */
    --bs-dropdown-bg:            rgba(11, 19, 25, 0.9);
    --bs-dropdown-border-color:  rgba(110, 153, 138, 0.3);
    --bs-dropdown-color:         #e9ecef;
    --bs-dropdown-link-color:    #e9ecef;
    --bs-dropdown-link-hover-color:  #ffffff;
    --bs-dropdown-link-hover-bg:     rgba(110, 153, 138, 0.15);
    --bs-dropdown-link-active-bg:    #6e998a;
    --bs-dropdown-link-active-color: #ffffff;

    /* --- Badges --- */
    --bs-badge-font-size:        0.75em;
    --bs-badge-font-weight:      600;

    /* --- Pagination --- */
    --bs-pagination-color:             #6e998a;
    --bs-pagination-bg:                rgba(11, 19, 25, 0.65);
    --bs-pagination-border-color:      rgba(110, 153, 138, 0.3);
    --bs-pagination-hover-color:       #8ebdae;
    --bs-pagination-hover-bg:          rgba(110, 153, 138, 0.15);
    --bs-pagination-active-color:      #ffffff;
    --bs-pagination-active-bg:         #6e998a;
    --bs-pagination-active-border-color: #6e998a;
    --bs-pagination-disabled-color:    rgba(255, 255, 255, 0.35);
    --bs-pagination-disabled-bg:       transparent;

    /* --- Tableaux --- */
    --bs-table-bg:               transparent;
    --bs-table-striped-bg:       rgba(110, 153, 138, 0.08);
    --bs-table-hover-bg:         rgba(110, 153, 138, 0.12);
    --bs-table-border-color:     rgba(110, 153, 138, 0.2);
    --bs-table-color:            #e9ecef;

    /* --- Alertes / Toasts --- */
    --bs-alert-border-radius:    0.5rem;

    /* --- Code --- */
    --bs-code-color:             #8ebdae;
}

/* --------------------------------------------------------------------------
   3. Body — Arrière-plan dégradé fluide
   -------------------------------------------------------------------------- */
body {
    background:
        radial-gradient(ellipse at top left,  #04333b 0%,  transparent 55%),
        radial-gradient(ellipse at bottom right, #1a3c3d 0%, transparent 50%),
        radial-gradient(ellipse at center,    #07191e 0%,  #0b1319 100%);
    background-color: #0b1319; /* fallback */
    background-attachment: fixed;
    color: #ffffff;
    font-family: var(--bs-body-font-family);
}

/* --------------------------------------------------------------------------
   4. Typographie — Titres et espacement
   -------------------------------------------------------------------------- */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--bs-headings-font-family);
    font-weight: var(--bs-headings-font-weight);
    color: var(--bs-headings-color);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

h1, .h1 { letter-spacing: 0.2em; }
h2, .h2 { letter-spacing: 0.18em; }
h3, .h3 { letter-spacing: 0.15em; }

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    letter-spacing: 0.2em;
    font-weight: 700;
    color: #ffffff;
}

/* Texte de marque stylisé */
.navbar-brand,
.brand-text {
    letter-spacing: 0.25em;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-color:              #ffffff;
    --bs-btn-bg:                 #6e998a;
    --bs-btn-border-color:       transparent;
    --bs-btn-hover-color:        #ffffff;
    --bs-btn-hover-bg:           #8ebdae;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color:       #ffffff;
    --bs-btn-active-bg:          #4f7568;
    --bs-btn-active-border-color:transparent;
    --bs-btn-focus-shadow-rgb:   110, 153, 138;
    --bs-btn-disabled-color:     #ffffff;
    --bs-btn-disabled-bg:        rgba(110, 153, 138, 0.4);
    --bs-btn-disabled-border-color: transparent;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.btn-outline-primary {
    --bs-btn-color:              #6e998a;
    --bs-btn-border-color:       #6e998a;
    --bs-btn-hover-color:        #ffffff;
    --bs-btn-hover-bg:           #6e998a;
    --bs-btn-hover-border-color: #6e998a;
    --bs-btn-active-color:       #ffffff;
    --bs-btn-active-bg:          #4f7568;
    --bs-btn-active-border-color:#4f7568;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.btn-secondary {
    --bs-btn-color:              #ffffff;
    --bs-btn-bg:                 #0b1319;
    --bs-btn-border-color:       rgba(110, 153, 138, 0.4);
    --bs-btn-hover-color:        #ffffff;
    --bs-btn-hover-bg:           #04333b;
    --bs-btn-hover-border-color: #6e998a;
    --bs-btn-active-color:       #ffffff;
    --bs-btn-active-bg:          #04333b;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. Cartes — Glassmorphism
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--dc-glass-bg);
    backdrop-filter: var(--dc-glass-blur);
    -webkit-backdrop-filter: var(--dc-glass-blur);
    border: 1px solid var(--dc-glass-border);
    box-shadow: var(--bs-box-shadow);
    color: #ffffff;
}

.card-header,
.card-footer {
    background-color: rgba(4, 51, 59, 0.4);
    border-color: var(--dc-glass-border);
    color: #e9ecef;
    letter-spacing: 0.05em;
}

.card-title {
    color: #ffffff;
    letter-spacing: 0.1em;
}

.card-subtitle {
    color: var(--dc-primary-light);
}

/* --------------------------------------------------------------------------
   7. Navbar — Glassmorphism
   -------------------------------------------------------------------------- */
.navbar {
    background-color: rgba(11, 19, 25, 0.75) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(110, 153, 138, 0.2);
    box-shadow: 0 2px 20px rgba(4, 51, 59, 0.5);
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.1em;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #8ebdae;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #6e998a;
}

.navbar-toggler {
    border-color: rgba(110, 153, 138, 0.4);
}

.navbar-toggler-icon {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(130deg);
}

/* --------------------------------------------------------------------------
   8. Modales — Glassmorphism
   -------------------------------------------------------------------------- */
.modal-content {
    background-color: rgba(11, 19, 25, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(110, 153, 138, 0.3);
    box-shadow: 0 1rem 3rem rgba(4, 51, 59, 0.7);
    color: #ffffff;
}

.modal-header {
    border-bottom-color: rgba(110, 153, 138, 0.25);
}

.modal-footer {
    border-top-color: rgba(110, 153, 138, 0.25);
}

.modal-title {
    letter-spacing: 0.12em;
    font-weight: 600;
    text-transform: uppercase;
}

.modal-backdrop {
    background-color: #0b1319;
}

/* --------------------------------------------------------------------------
   9. Formulaires
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    background-color: rgba(11, 19, 25, 0.7);
    border-color: rgba(110, 153, 138, 0.4);
    color: #ffffff;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(11, 19, 25, 0.85);
    border-color: #6e998a;
    color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(110, 153, 138, 0.25);
}

.form-label {
    color: #e9ecef;
    letter-spacing: 0.05em;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.form-check-input:checked {
    background-color: #6e998a;
    border-color: #6e998a;
}

.form-check-input:focus {
    border-color: #6e998a;
    box-shadow: 0 0 0 0.25rem rgba(110, 153, 138, 0.25);
}

/* --------------------------------------------------------------------------
   10. Tableaux
   -------------------------------------------------------------------------- */
.table {
    --bs-table-color: #e9ecef;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(110, 153, 138, 0.2);
    --bs-table-striped-bg: rgba(110, 153, 138, 0.07);
    --bs-table-hover-bg: rgba(110, 153, 138, 0.12);
}

.table thead th {
    color: #6e998a;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    border-bottom-color: rgba(110, 153, 138, 0.35);
}

/* --------------------------------------------------------------------------
   11. Badges
   -------------------------------------------------------------------------- */
.badge.bg-primary   { background-color: #6e998a !important; }
.badge.bg-secondary { background-color: #04333b !important; }

/* --------------------------------------------------------------------------
   12. Alertes
   -------------------------------------------------------------------------- */
.alert-primary {
    --bs-alert-color:        #8ebdae;
    --bs-alert-bg:           rgba(110, 153, 138, 0.12);
    --bs-alert-border-color: rgba(110, 153, 138, 0.35);
}

.alert-dark {
    --bs-alert-color:        #e9ecef;
    --bs-alert-bg:           rgba(4, 51, 59, 0.6);
    --bs-alert-border-color: rgba(110, 153, 138, 0.25);
}

/* --------------------------------------------------------------------------
   13. Listes et éléments de groupe
   -------------------------------------------------------------------------- */
.list-group-item {
    background-color: rgba(11, 19, 25, 0.6);
    border-color: rgba(110, 153, 138, 0.2);
    color: #e9ecef;
}

.list-group-item.active {
    background-color: #6e998a;
    border-color: #6e998a;
    color: #ffffff;
}

.list-group-item:hover {
    background-color: rgba(110, 153, 138, 0.12);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   14. Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(110, 153, 138, 0.6);
}

.breadcrumb-item a {
    color: #6e998a;
}

.breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   15. Progress bar
   -------------------------------------------------------------------------- */
.progress {
    background-color: rgba(11, 19, 25, 0.6);
    border: 1px solid rgba(110, 153, 138, 0.2);
}

.progress-bar {
    background-color: #6e998a;
}

/* --------------------------------------------------------------------------
   16. Accordion
   -------------------------------------------------------------------------- */
.accordion-item {
    background-color: var(--dc-glass-bg);
    backdrop-filter: var(--dc-glass-blur);
    -webkit-backdrop-filter: var(--dc-glass-blur);
    border-color: rgba(110, 153, 138, 0.25);
    color: #e9ecef;
}

.accordion-button {
    background-color: rgba(4, 51, 59, 0.5);
    color: #ffffff;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(110, 153, 138, 0.2);
    color: #8ebdae;
    box-shadow: inset 0 -1px 0 rgba(110, 153, 138, 0.25);
}

.accordion-button::after {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(130deg);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(110, 153, 138, 0.25);
    border-color: rgba(110, 153, 138, 0.5);
}

/* --------------------------------------------------------------------------
   17. Utilitaires de texte et couleur
   -------------------------------------------------------------------------- */
.text-primary    { color: #6e998a !important; }
.text-secondary  { color: var(--dc-neutral-light) !important; }
.text-muted      { color: rgba(255, 255, 255, 0.55) !important; }
.text-light      { color: #e9ecef !important; }
.text-white      { color: #ffffff !important; }
.text-accent     { color: #8ebdae !important; }

.bg-primary      { background-color: #6e998a !important; }
.bg-dark         { background-color: #04333b !important; }
.bg-secondary    { background-color: #0b1319 !important; }
.bg-glass        {
    background-color: var(--dc-glass-bg) !important;
    backdrop-filter: var(--dc-glass-blur);
    -webkit-backdrop-filter: var(--dc-glass-blur);
    border: 1px solid var(--dc-glass-border);
}

/* Séparateur de marque */
.brand-divider {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #6e998a, transparent);
    opacity: 0.6;
}

/* --------------------------------------------------------------------------
   18. Scrollbar personnalisée (navigateurs Webkit)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0b1319;
}

::-webkit-scrollbar-thumb {
    background: rgba(110, 153, 138, 0.5);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6e998a;
}

/* --------------------------------------------------------------------------
   19. Sélection de texte
   -------------------------------------------------------------------------- */
::selection {
    background-color: rgba(110, 153, 138, 0.35);
    color: #ffffff;
}