/* ===== DESIGN SYSTEM: "ZINC & INDIGO" (BESPOKE) ===== */

/* 1. CONFIGURATION TYPOGRAPHIQUE & COULEURS */
:root {
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Palette Jour: "Zinc" (Gris neutres chauds) */
    --bg-app: #fafafa;         /* Zinc 50 - Pas blanc pur, plus doux */
    --bg-panel: #ffffff;       /* White - Pour les cartes */
    --bg-subtle: #f4f4f5;      /* Zinc 100 - Pour les hovers/inputs */
    
    --text-main: #18181b;      /* Zinc 900 */
    --text-dim: #52525b;       /* Zinc 600 */
    --text-faint: #a1a1aa;     /* Zinc 400 */
    
    --border-subtle: #e4e4e7;  /* Zinc 200 */
    --border-strong: #d4d4d8;  /* Zinc 300 */
    
    /* Accent: "Violet/Indigo" raffiné */
    --accent: #4f46e5;         /* Indigo 600 */
    --accent-glow: rgba(79, 70, 229, 0.15);
    --accent-hover: #4338ca;
    
    /* Ombres High-End */
    --shadow-card: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-float: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025);
}

[data-bs-theme="dark"] {
    /* Palette Nuit: "Deep Space" (Pas de noir absolu) */
    --bg-app: #09090b;         /* Zinc 950 - Très profond */
    --bg-panel: #18181b;       /* Zinc 900 */
    --bg-subtle: #27272a;      /* Zinc 800 */
    
    --text-main: #f4f4f5;      /* Zinc 100 */
    --text-dim: #a1a1aa;       /* Zinc 400 */
    --text-faint: #52525b;     /* Zinc 600 */
    
    --border-subtle: #27272a;  /* Zinc 800 */
    --border-strong: #3f3f46;  /* Zinc 700 */
    
    --accent: #818cf8;         /* Indigo 400 */
    --accent-glow: rgba(129, 140, 248, 0.15);
    --accent-hover: #a5b4fc;
    
    --shadow-card: 0 0 0 1px #27272a; /* Bordure interne subtile */
    --shadow-float: 0 0 0 1px #3f3f46, 0 10px 15px -3px rgba(0,0,0,0.5);
}

/* 2. RESET & BASE */
html, body {
    height: 100%; /* Nécessaire pour le sticky footer */
}

body {
    background-color: var(--bg-app);
    color: var(--text-main);
    font-family: var(--font-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Rendu Mac */
    -moz-osx-font-smoothing: grayscale;
    /* Sticky Footer Setup */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Le contenu principal prend tout l'espace disponible */
main {
    flex: 1 0 auto;
    width: 100%; /* Sécurité responsive */
}

/* 3. LAYOUT & NAVIGATION */
.navbar {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 0;
}

[data-bs-theme="dark"] .navbar {
    background: rgba(9, 9, 11, 0.7);
    border-bottom: 1px solid var(--border-subtle);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-main) !important;
    letter-spacing: -0.025em;
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dim) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px;
    transition: all 0.2s;
}

.nav-link:hover, .nav-link.active {
    color: var(--text-main) !important;
    background: var(--bg-subtle);
}

/* 4. HEADERS & TYPOGRAPHY */
.page-header h1, .hero-home h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-main);
}

.lead {
    color: var(--text-dim);
    font-weight: 400;
}

/* Correction du bug des headers en blanc */
.page-header, .hero-home {
    background: transparent !important; /* Pas de fond blanc forcé */
    color: var(--text-main);
}

/* 5. COMPONENTS: CARDS (Minimalist) */
.card {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
    border-color: var(--border-strong);
}

.card-body {
    padding: 2rem;
}

/* Icônes dans les cartes */
.card-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-subtle);
    color: var(--text-main);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* 6. INPUTS & FORMS */
.form-control {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-card);
}

.form-control:focus {
    background: var(--bg-panel);
    border-color: var(--accent);
    color: var(--text-main);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* 7. LIST GROUP (Custom) */
.list-group-item {
    background: var(--bg-panel);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

[data-bs-theme="dark"] .list-group-item:hover {
    background: var(--bg-subtle);
    color: var(--text-main);
}

.list-group-item h4 { color: var(--text-main); font-weight: 600; }
.list-group-item p { color: var(--text-dim); }

/* 8. BUTTONS */
.btn-primary {
    background: var(--accent);
    border: none;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-outline-secondary {
    border-color: var(--border-strong);
    color: var(--text-main);
}

.btn-outline-secondary:hover {
    background: var(--bg-subtle);
    border-color: var(--text-dim);
    color: var(--text-main);
}

/* 9. THEME SWITCHER */
.theme-switcher {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--text-dim) !important;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.theme-switcher:hover {
    background: var(--bg-subtle);
    color: var(--text-main) !important;
    border-color: var(--border-subtle);
}

/* Logic */
.theme-switcher .bi-sun-fill { display: none; }
.theme-switcher .bi-moon-stars-fill { display: block; }
[data-bs-theme="dark"] .theme-switcher .bi-sun-fill { display: block; }
[data-bs-theme="dark"] .theme-switcher .bi-moon-stars-fill { display: none; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { 
    background: var(--border-color); 
    border-radius: 5px; 
    border: 3px solid var(--bg-body); /* Effet flottant */
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* 11. BACK TO TOP BUTTON (Modern FAB) */
#back-to-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 12px; /* Carré arrondi moderne */
    background: var(--bg-panel);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-float);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1000;
    font-size: 1.25rem;
    text-decoration: none;
}

#back-to-top-btn:hover {
    background: var(--bg-subtle);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

#back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

[data-bs-theme="dark"] #back-to-top-btn {
    background: var(--bg-subtle); /* Plus visible en dark mode */
    border-color: var(--border-strong);
}