/* ============================================
   CSS Variables (Couleurs et thèmes)
   ============================================ */
:root {
    /* Couleur principale de l'application */
    --primary-color: #4A90E2;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    
    /* Dégradé de couleurs de fond (du plus sombre au plus clair) */
    --bg-dark: #020617;      /* Fond très sombre (presque noir) */
    --bg-mid: #0f172a;       /* Fond moyen */
    --bg-light: #1e293b;     /* Fond clair (mais toujours sombre) */
    
    /* Background input */
    --bg-card: #1a2942;
    --bg-input: #0f1d33;

    /* Couleurs de texte */
    --primary-titre: #ffffff;              /* Blanc pur pour les titres */
    --primary-text: #FFFFFF;               /* Blanc pour le texte principal */
    --secondary-text: rgba(255, 255, 255, 0.6); /* Blanc à 60% d'opacité pour texte secondaire */
    
    /* Couleurs pour les états hover/focus */
    --hover-color: #5ba3ff;               /* Bleu plus clair au survol */
    --input-border: rgba(255, 255, 255, 0.1); /* Bordure des inputs */
    --input-focus: rgba(74, 144, 226, 0.5);   /* Bordure des inputs en focus */

    /* Autres conf */
    --border-color: #2a3f5f;
    --accent-blue: #4A90E2;
    --card-bg: rgba(255, 255, 255, 0.03);
    --border-white: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.6);

}

/* ============================================
   Réinitialisation des styles par défaut
   ============================================ */
* {
    margin: 0;           /* Supprime les marges par défaut */
    padding: 0;          /* Supprime les paddings par défaut */
    box-sizing: border-box; /* Inclut padding et border dans la largeur totale */
}

/* ============================================
   Style du body (corps de la page)
   ============================================ */
body {
    display: flex;              /* Active le flexbox */
    justify-content: center;    /* Centre horizontalement */
    align-items: center;        /* Centre verticalement */
    min-height: 100vh;              /* Hauteur = 100% de la fenêtre */
    padding-bottom: 80px; /* Pour la bottom nav */

    /* Dégradé de fond en diagonal (du haut-gauche au bas-droite) */
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-mid) 50%, var(--bg-dark) 100%);

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Transition douce pour l'opacité (utilisé lors du chargement) */
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


/* --- BOTTOM NAVIGATION --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 8px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.nav-item {
    background: none;
    border: none;
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}

.nav-item span {
    font-size: 0.7rem;
    font-weight: 500;
}

.nav-item.active {
    color: var(--accent-blue);
}

.nav-item-center {
    position: relative;
    margin-top: -20px;
}

.nav-center-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--accent-blue), #5B9FE9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(74, 144, 226, 0.4);
}

.nav-item-center:active .nav-center-icon {
    transform: scale(0.95);
}

/* --- ANIMATIONS --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- NOTIFICATION --- */
.notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: var(--bg-card);
    color: var(--text-main);
    padding: 14px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    font-size: 0.9rem;
    z-index: 10000;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 90%;
}

.notification.show {
    transform: translateX(-50%) translateY(0);
}

.notification-success { border-color: #10b981; }
.notification-error { border-color: #ef4444; }

/* --- UTILS --- */
.hidden {
    display: none !important;
}

/* --- RESPONSIVE --- */
@media (min-width: 768px) {
    .main-content {
        max-width: 800px;
    }
    
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Bouton de déconnexion (header) */
.logout-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;            /* Forme circulaire */
    background: var(--primary-color);
    
    /* Centre l'icône */
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: white;
    font-size: 16px;               /* Taille de l'icône */
    cursor: pointer;
    
    transition: all 0.3s ease;
    
    /* Bordure subtile */
    border: 2px solid rgba(255, 255, 255, 0.15);
    
    /* Supprime le soulignement du lien */
    text-decoration: none;
    
    /* Position relative pour le tooltip */
    position: relative;
}

/* Effet hover sur le bouton de déconnexion */
.logout-button:hover {
    transform: scale(1.1);         /* Agrandissement léger */
    background: #EF5350;           /* Rouge pour la déconnexion */
    box-shadow: 0 4px 12px rgba(239, 83, 80, 0.6);
}

/* Animation lors du clic */
.logout-button:active {
    transform: scale(0.95);        /* Rétrécissement au clic */
}

/* Animation de l'icône au hover */
.logout-button:hover i {
    animation: slideOut 0.4s ease;
}

@keyframes slideOut {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(4px);  /* L'icône se déplace vers la droite */
    }
    100% {
        transform: translateX(0);
    }
}

/* ============================================
   Espace en haut pour éviter le chevauchement
   ============================================ */
.top-spacer {
    height: 20px;                  /* Petit espace supplémentaire */
}

/* ============================================
   Espace en bas pour éviter le chevauchement
   ============================================ */
.bottom-spacer {
    height: 20px;                  /* Petit espace supplémentaire */
}

/* ============================================
   Navigation du bas (Bottom Navigation)
   ============================================ */
.bottom-nav {
    /* Fixée en bas de l'écran */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    
    background: rgba(15, 23, 42, 0.95);
    
    /* Bordure en haut pour séparer */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Effet de flou sur le fond (backdrop blur) */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* Ombre portée vers le haut */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    
    /* Au-dessus de tout le reste */
    z-index: 1000;
    
    /* Conteneur flex pour les boutons */
    display: flex;
    justify-content: space-around; /* Espace égal entre les boutons */
    align-items: center;
    
    padding: 10px 16px;
    
    /* Gère la zone de sécurité en bas (iPhone avec barre d'accueil) */
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* Bouton de navigation */
.nav-button {
    background: transparent;
    border: none;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    
    padding: 8px 12px;
    
    cursor: pointer;
    
    /* Permet de cibler toute la zone cliquable */
    flex: 1;
    max-width: 80px;
    
    transition: all 0.3s ease;
    
    color: var(--secondary-text);
}

/* Bouton principal (celui du milieu) - PLUS GRAND ET ROND */
.nav-button-primary {
    /* Dépasse vers le haut */
    position: relative;
    top: -20px;
    
    /* Cercle coloré */
    background: linear-gradient(135deg, var(--primary-color) 0%, #357ABD 100%);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    
    /* Supprime le flex: 1 pour garder une taille fixe */
    flex: 0 0 auto;
    
    padding: 0;
    
    /* Ombre portée pour effet de profondeur */
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.5);
    
    color: white;
    
    /* Bordure pour plus de contraste */
    border: 3px solid var(--bg-mid);
}

/* Effet hover sur les boutons normaux */
.nav-button:not(.nav-button-primary):hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* Effet hover sur le bouton principal */
.nav-button-primary:hover {
    transform: translateY(-22px) scale(1.05);
    box-shadow: 0 8px 28px rgba(74, 144, 226, 0.7);
}

/* Effet actif (quand on clique) */
.nav-button:active {
    transform: scale(0.95);
}

.nav-button-primary:active {
    transform: translateY(-20px) scale(0.98);
}

/* Dans la navigation */
.nav-button i {
    font-size: 30px;          /* Augmentez cette valeur */
}

/* Pour le bouton principal */
.nav-button-primary i {
    font-size: 35px;          /* Plus gros pour le bouton central */
}

/* Label de navigation */
.nav-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    margin-top: 2px;
}

/* Cache le label du bouton principal sur petits écrans */
@media (max-width: 360px) {
    .nav-button-primary .nav-label {
        display: none;
    }
}

/* ============================================
   Animation d'apparition des éléments
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}