/* --- RESET ET VARIABLES GLOBALES --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --border-dark: #333333;
    /* Panneaux avec 90% d'opacité pour laisser deviner le fond général */
    --panel-bg: rgba(30, 30, 30, 0.9); 
    --panel-hover: rgba(42, 42, 42, 0.95);
    /* Or Premium */
    --accent: #d4af37; 
    --accent-light: #f3d56a;
    --accent-glow: rgba(212, 175, 55, 0.25);
    --error-color: #e74c3c;
}

/* --- LE FOND DE PAGE GÉNÉRAL --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    background-color: #121212; /* Fallback de sécurité */
    
    /* On ajoute un voile sombre (85% d'opacité) sur ton image pour que les textes restent lisibles */
    background-image: 
        linear-gradient(rgba(18, 18, 18, 0.85), rgba(18, 18, 18, 0.85)), 
        url('../../datas/images/fond_general.webp'); 
        
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* --- DESIGN CENTRALISÉ DU MENU (header-wrapper) --- */
header {
    padding: 30px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-wrapper {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.logo-container {
    background-color: var(--panel-bg);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-dark);
    border-bottom: 3px solid var(--accent);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container img {
    max-height: 180px;
    width: auto;
    display: block;
}

nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 12px;
    width: 100%;
}

nav a {
    background-color: var(--panel-bg);
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-dark);
    transition: all 0.3s ease;
}

nav a:hover {
    background-color: var(--panel-hover);
    color: var(--accent-light);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px var(--accent-glow);
}

nav a.btn-admin { color: #f1c40f; border-color: #66530a; }
nav a.btn-admin:hover { color: #fff; background-color: #b8860b; border-color: #f1c40f; }

nav a.btn-logout { color: #e74c3c; border-color: #5c1e18; }
nav a.btn-logout:hover { color: #fff; background-color: #c0392b; border-color: #e74c3c; box-shadow: 0 6px 15px rgba(231, 76, 60, 0.3); }

/* --- ANIMATIONS DU FOND DE PAGE (EFFET HOLOGRAPHIQUE ALÉATOIRE) --- */

body {
    overflow-x: hidden; 
}

/* --- 1er Rayon : Angle doux, traverse de gauche à droite --- */
body::before {
    content: "";
    position: fixed;
    /* On crée une zone géante pour éviter que la rotation ne coupe les coins */
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(212, 175, 55, 0.07) 50%, /* Or très subtil */
        rgba(255, 255, 255, 0) 100%
    );
    /* Durée 13s (nombre premier), effet d'accélération (ease-in-out) */
    animation: holoRandom1 13s infinite ease-in-out; 
    pointer-events: none; 
    z-index: -1; 
}

@keyframes holoRandom1 {
    /* Le rayon commence loin à gauche */
    0% { transform: rotate(25deg) translateX(-100%); opacity: 0; }
    /* Il s'allume brièvement au milieu */
    10% { opacity: 1; }
    /* Il termine loin à droite très vite */
    20% { transform: rotate(25deg) translateX(100%); opacity: 0; }
    /* Il reste invisible pendant 80% du temps (pause aléatoire) */
    100% { transform: rotate(25deg) translateX(100%); opacity: 0; }
}

/* --- 2ème Rayon : Angle vif, traverse dans l'autre sens --- */
body::after {
    content: "";
    position: fixed;
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(243, 213, 106, 0.05) 50%, /* Or plus clair, encore plus discret */
        rgba(255, 255, 255, 0) 100%
    );
    /* Durée 17s (nombre premier), délai de départ de 4s, courbe de vitesse différente */
    animation: holoRandom2 17s infinite cubic-bezier(0.25, 0.8, 0.25, 1) 4s; 
    pointer-events: none; 
    z-index: -1; 
}

@keyframes holoRandom2 {
    /* Ce rayon part de la droite et va vers la gauche */
    0% { transform: rotate(-40deg) translateX(100%); opacity: 0; }
    8% { opacity: 1; }
    16% { transform: rotate(-40deg) translateX(-100%); opacity: 0; }
    100% { transform: rotate(-40deg) translateX(-100%); opacity: 0; }
}