/* ========================= */
/*   FOND GALAXIE ANIMÉ      */
/* ========================= */

body, html {
    background: #050712 !important;
    color: #e6e6e6 !important;
    font-family: "Segoe UI", sans-serif;
    overflow-x: hidden !important;
    position: relative;
    perspective: 1200px;
}

/* Étoiles fixes + parallax */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 220%; height: 220%;
    background-image:
        radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 30% 80%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 90% 10%, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 50% 90%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 20% 60%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 80% 50%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 40% 30%, rgba(255,255,255,0.8), transparent);
    animation: starsMove 80s linear infinite;
    z-index: -4;
    pointer-events: none;
    transform: translateZ(-400px) scale(1.3);
}

/* Nébuleuses colorées */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 220%; height: 220%;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(79,124,255,0.35), transparent 70%),
        radial-gradient(circle at 80% 70%, rgba(150,100,255,0.35), transparent 70%),
        radial-gradient(circle at 50% 90%, rgba(100,150,255,0.30), transparent 70%);
    animation: nebulaMove 55s ease-in-out infinite alternate;
    z-index: -3;
    pointer-events: none;
    transform: translateZ(-300px) scale(1.2);
}

@keyframes starsMove {
    0% { transform: translate(0,0) scale(1.3); }
    100% { transform: translate(-320px,-320px) scale(1.3); }
}

@keyframes nebulaMove {
    0% { transform: translate(0,0) scale(1.2); }
    100% { transform: translate(220px,-220px) scale(1.35); }
}

/* ========================= */
/*  ÉTOILES FILANTES PREMIUM */
/* ========================= */

.shooting-star {
    position: fixed;
    top: -10vh;
    width: 6px; /* tête de l'étoile */
    height: 6px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 12px var(--color), 0 0 24px var(--color);
    pointer-events: none;
    z-index: -2;

    /* Traînée */
    filter: drop-shadow(0 0 8px var(--color));
    animation: shooting var(--speed) linear infinite;
    animation-delay: var(--delay);
}


/* Animation */
@keyframes shooting {
    0% {
        transform: translateX(0) translateY(0) rotate(45deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-140vw) translateY(140vh) rotate(45deg);
        opacity: 0;
    }
}

/* ========================= */
/*   PARAMÈTRES ALÉATOIRES   */
/* ========================= */

.shooting-star:nth-child(1)  { left: 10%; --delay: 2s;  --speed: 3s;  --color: #6a6cff; }
.shooting-star:nth-child(2)  { left: 80%; --delay: 7s;  --speed: 4.5s;--color: #ff66ff; }
.shooting-star:nth-child(3)  { left: 50%; --delay: 12s; --speed: 3.8s;--color: #66e0ff; }
.shooting-star:nth-child(4)  { left: 30%; --delay: 18s; --speed: 5.2s;--color: #a066ff; }
.shooting-star:nth-child(5)  { left: 70%; --delay: 25s; --speed: 4s;  --color: #ff99cc; }
.shooting-star:nth-child(6)  { left: 20%; --delay: 33s; --speed: 6s;  --color: #66b3ff; }
.shooting-star:nth-child(7)  { left: 60%; --delay: 41s; --speed: 3.3s;--color: #cc66ff; }
.shooting-star:nth-child(8)  { left: 15%; --delay: 50s; --speed: 5.5s;--color: #66ffd9; }
.shooting-star:nth-child(9)  { left: 85%; --delay: 58s; --speed: 4.8s;--color: #ff66b2; }
.shooting-star:nth-child(10) { left: 40%; --delay: 66s; --speed: 3.1s;--color: #6699ff; }
.shooting-star:nth-child(11) { left: 55%; --delay: 74s; --speed: 6.2s;--color: #ff66e6; }
.shooting-star:nth-child(12) { left: 25%; --delay: 82s; --speed: 4.4s;--color: #66ffe0; }

/* ========================= */
/*   PARTICULES COSMIQUES    */
/* ========================= */

.cosmic-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.cosmic-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
    animation: particleFloat 18s linear infinite;
}

.cosmic-particles span:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.cosmic-particles span:nth-child(2) { top: 30%; left: 80%; animation-delay: 4s; }
.cosmic-particles span:nth-child(3) { top: 60%; left: 25%; animation-delay: 8s; }
.cosmic-particles span:nth-child(4) { top: 75%; left: 60%; animation-delay: 12s; }
.cosmic-particles span:nth-child(5) { top: 20%; left: 50%; animation-delay: 16s; }

@keyframes particleFloat {
    0%   { transform: translate3d(0,0,0); opacity: 0.9; }
    50%  { transform: translate3d(40px,-40px,80px); opacity: 0.4; }
    100% { transform: translate3d(-40px,40px,0); opacity: 0.9; }
}

/* ========================= */
/*   HALO LOGO ANIMÉ         */
/* ========================= */

.navbar-brand img {
    position: relative;
    z-index: 1;
}

.navbar-brand img::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(120,120,255,0.7), transparent 70%);
    opacity: 0.7;
    filter: blur(10px);
    animation: logoPulse 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes logoPulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    50%  { transform: scale(1.08); opacity: 0.9; }
    100% { transform: scale(1);   opacity: 0.6; }
}

/* ========================= */
/*      SIDEBAR FUTURISTE    */
/* ========================= */

.list-group-item {
    background: rgba(20,22,37,0.85) !important;
    color: #cfd3ff !important;
    border: none !important;
    backdrop-filter: blur(8px);
    transition: 0.25s;
    transform-style: preserve-3d;
}

.list-group-item:hover {
    background: rgba(40,42,65,0.95) !important;
    color: #ffffff !important;
    transform: translateX(6px) translateZ(40px);
    box-shadow: 0 0 16px rgba(90,90,255,0.7);
}

.list-group-item.active {
    background: #4a4fff !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(90,90,255,0.9);
}

/* ========================= */
/*         HEADER            */
/* ========================= */

.navbar {
    background: rgba(8,10,22,0.9) !important;
    border: none !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    transform-style: preserve-3d;
}

.navbar a {
    color: #cfd3ff !important;
    transition: 0.2s;
}

.navbar a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px #6a6cff;
}

/* ========================= */
/*         BOUTONS           */
/* ========================= */

.btn-primary {
    background: linear-gradient(135deg, #4a4fff, #6a6cff) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(90,90,255,0.8);
    transition: 0.25s;
    transform-style: preserve-3d;
}

.btn-primary:hover {
    transform: translateY(-2px) translateZ(30px);
    box-shadow: 0 0 22px rgba(120,120,255,1);
}

.btn-default, .btn-secondary {
    background: rgba(30,32,50,0.9) !important;
    border: 1px solid #2a2c45 !important;
    color: #fff !important;
}

.btn-default:hover, .btn-secondary:hover {
    background: rgba(50,52,75,0.95) !important;
}

/* ========================= */
/*         PANELS / CARDS    */
/* ========================= */

.panel, .card, .well {
    background: rgba(26,28,44,0.9) !important;
    border: 1px solid rgba(60,62,90,0.5) !important;
    color: #fff !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 18px rgba(0,0,0,0.7);
    transform-style: preserve-3d;
}

.panel:hover, .card:hover, .well:hover {
    transform: translateZ(40px);
}

/* ========================= */
/*         TABLES            */
/* ========================= */

.table {
    background: rgba(26,28,44,0.9) !important;
    color: #fff !important;
}

.table > thead > tr > th {
    background: rgba(20,22,37,0.95) !important;
}

.table > tbody > tr:hover {
    background: rgba(40,42,65,0.95) !important;
}

/* ========================= */
/*        FORMULAIRES        */
/* ========================= */

input, select, textarea {
    background: rgba(30,32,50,0.9) !important;
    border: 1px solid #2a2c45 !important;
    color: #fff !important;
}

input:focus, select:focus, textarea:focus {
    border-color: #4a4fff !important;
    box-shadow: 0 0 10px #4a4fff !important;
}

/* ========================= */
/*          FOOTER           */
/* ========================= */

footer {
    background: rgba(8,10,22,0.9) !important;
    color: #cfd3ff !important;
    border-top: 1px solid #1d1f33 !important;
}

/* ====== BLOQUE LE SCROLL TROP BAS ====== */

/* Empêche le fond (before/after) d'étendre la page */
body::before,
body::after {
    position: fixed !important;
    height: 100% !important;
    width: 100% !important;
    transform: none !important;
}

/* Empêche les étoiles filantes d'ajouter de la hauteur */
.shooting-star {
    position: fixed !important;
}

/* Empêche les particules d'étendre la page */
.cosmic-particles {
    position: fixed !important;
}

/* Le body ne peut plus dépasser la hauteur réelle du contenu */
html, body {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* ========================= */
/*   BOOST VISIBILITÉ KB     */
/* ========================= */

.kb-category,
.kb-category a,
.kb-category .panel,
.kb-category .panel-heading {
    background: rgba(20, 22, 37, 0.92) !important;
    color: #ffffff !important;
    border: 1px solid rgba(120,120,255,0.3) !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 12px rgba(80,80,255,0.4);
    transition: 0.25s ease;
}

/* Effet hover premium */
.kb-category:hover,
.kb-category .panel:hover {
    background: rgba(40, 42, 65, 0.95) !important;
    box-shadow: 0 0 18px rgba(120,120,255,0.7);
    transform: translateY(-3px);
}

/* Titre de catégorie */
.kb-category .panel-heading {
    font-size: 18px !important;
    font-weight: 600 !important;
    text-shadow: 0 0 6px rgba(120,120,255,0.6);
}

/* Texte interne */
.kb-category .panel-body {
    color: #dfe3ff !important;
    font-size: 15px;
}

/* Icônes */
.kb-category i {
    color: #8fa0ff !important;
    text-shadow: 0 0 8px rgba(120,120,255,0.8);
}

/* ========================= */
/*   HEADER PLUS FONCÉ       */
/* ========================= */

.navbar {
    background: rgba(5, 7, 15, 0.92) !important; /* plus sombre */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(120,120,255,0.25);
}

/* Liens du header */
.navbar a,
.navbar .dropdown-toggle {
    color: #dfe3ff !important; /* plus clair */
    font-weight: 500;
    text-shadow: 0 0 6px rgba(0,0,0,0.6);
}

/* Hover */
.navbar a:hover,
.navbar .dropdown-toggle:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(120,120,255,0.8);
}

/* Menu déroulant */
.dropdown-menu {
    background: rgba(10, 12, 25, 0.95) !important;
    border: 1px solid rgba(120,120,255,0.3);
    backdrop-filter: blur(8px);
}

.dropdown-menu > li > a {
    color: #dfe3ff !important;
}

.dropdown-menu > li > a:hover {
    background: rgba(40,42,65,0.9) !important;
    color: #ffffff !important;
}

/* ========================= */
/*   BREADCRUMB PLUS SOMBRE  */
/* ========================= */

.breadcrumb,
.breadcrumb a {
    color: #cfd3ff !important; /* bleu clair lisible */
    font-weight: 500;
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

/* Fond derrière la breadcrumb */
.breadcrumb {
    background: rgba(10, 12, 25, 0.75) !important;
    border: 1px solid rgba(120,120,255,0.25);
    padding: 8px 14px;
    border-radius: 6px;
    backdrop-filter: blur(6px);
}

/* Hover */
.breadcrumb a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(120,120,255,0.8);
}