/* ==========================================================================
   STYLE DES PAGES D'ERREUR (403, 404)
   ========================================================================== */

.error-page-wrapper {
    min-height: calc(100vh - 100px); /* Ajusté pour prendre en compte le menu/footer */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   ANIMATIONS 404 - TROU NOIR
   ========================================================================== */
.black-hole-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
    animation: plungeIntoAbyss 12s ease-in forwards;
}

.black-hole-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.accretion-disk {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(99, 179, 237, 0), var(--color-sky), var(--color-cosmic), rgba(99, 179, 237, 0.2));
    transform: rotateX(75deg);
    filter: blur(20px);
    animation: spinDisk 5s linear infinite;
}

.accretion-disk::after {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: conic-gradient(from 180deg, transparent, var(--color-sky), transparent);
    animation: spinDisk 3s linear infinite reverse;
}

.event-horizon {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #000;
    border-radius: 50%;
    box-shadow: 0 0 80px 20px rgba(99, 179, 237, 0.8),
                inset 0 0 30px 10px rgba(0,0,0,1);
    z-index: 2;
}

@keyframes spinDisk {
    0% { transform: rotateX(75deg) rotate(0deg); }
    100% { transform: rotateX(75deg) rotate(360deg); }
}

@keyframes plungeIntoAbyss {
    0% { 
        transform: scale(0.2); 
        filter: blur(0px) hue-rotate(0deg);
        opacity: 0;
        animation-timing-function: ease-out;
    }
    10% {
        opacity: 1;
        transform: scale(0.3); 
        animation-timing-function: cubic-bezier(0.9, 0.0, 0.9, 0.5); /* Courbe exponentielle fluide */
    }
    100% { 
        transform: scale(40); 
        filter: blur(25px) hue-rotate(45deg);
        opacity: 1;
    }
}

.blackout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    animation: finalBlackout 12s forwards;
}

@keyframes finalBlackout {
    0%, 90% { opacity: 0; }
    98%, 100% { opacity: 1; }
}

/* ==========================================================================
   ANIMATIONS 403 - PLANÈTE TOXIQUE (RÉALISTE)
   ========================================================================== */
.toxic-atmosphere {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; overflow: hidden; pointer-events: none;
    background: #090d07; /* Ciel poisseux très sombre */
}

/* Le Sol Toxique (Perspective animée) */
.toxic-ground {
    position: absolute;
    bottom: -60%; left: -50%; width: 200%; height: 120%;
    background-image: 
        radial-gradient(circle at 50% 50%, transparent 40%, #000 100%),
        repeating-linear-gradient(rgba(100, 255, 50, 0.05) 0px, transparent 2px, transparent 40px),
        repeating-linear-gradient(90deg, rgba(100, 255, 50, 0.05) 0px, transparent 2px, transparent 40px);
    background-color: #0b1406;
    transform: perspective(600px) rotateX(75deg);
    animation: moveGround 15s linear infinite;
    opacity: 0.6;
}

/* Le Brouillard Volumétrique (Smog) */
.toxic-fog-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    filter: blur(60px);
}

.toxic-smog {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
}

.toxic-smog.layer-1 {
    width: 150vw; height: 150vw;
    background: radial-gradient(circle, rgba(130, 255, 20, 0.25), transparent 60%);
    top: 10%; left: -25%;
    animation: swirlSmog 30s ease-in-out infinite alternate;
}

.toxic-smog.layer-2 {
    width: 120vw; height: 120vw;
    background: radial-gradient(circle, rgba(255, 200, 0, 0.15), transparent 70%);
    bottom: -20%; right: -20%;
    animation: swirlSmog 40s ease-in-out infinite alternate-reverse;
}

.toxic-smog.layer-3 {
    width: 200vw; height: 100vw;
    background: radial-gradient(ellipse, rgba(50, 150, 20, 0.35), transparent 60%);
    bottom: -30%; left: -50%;
    animation: smogRise 25s ease-in-out infinite alternate;
}

/* Particules toxiques (spores/cendres) - VRAIES particules miniatures */
.toxic-particles {
    position: absolute;
    width: 3px; height: 3px; /* La taille de base d'une particule */
    background: transparent;
    box-shadow: 10vw 20vh 3px rgba(150,255,50,0.8), 
                80vw 50vh 4px rgba(255,100,50,0.6), 
                40vw 80vh 2px rgba(150,255,50,0.9),
                70vw 90vh 5px rgba(200,50,50,0.7),
                25vw 60vh 3px rgba(255,200,50,0.8),
                85vw 20vh 2px rgba(150,255,50,0.6),
                50vw 30vh 4px rgba(150,255,50,0.8),
                15vw 80vh 2px rgba(255,200,50,0.9);
    animation: particleRise 15s linear infinite;
    border-radius: 50%;
}

/* Éclairage d'Alarme (Pulse Rouge) */
.alert-pulse {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 0, 0, 0);
    animation: redAlert 3s ease-in-out infinite;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Keyframes */
@keyframes moveGround {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 0 40px, 0 0; }
}

@keyframes swirlSmog {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.3) translate(5%, 5%); }
}

@keyframes smogRise {
    0% { transform: translateY(5%) scaleY(1); opacity: 0.8; }
    100% { transform: translateY(-5%) scaleY(1.1); opacity: 1; }
}

@keyframes particleRise {
    0% { transform: translateY(100vh); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-20vh); opacity: 0; }
}

@keyframes redAlert {
    0%, 100% { background: rgba(255, 0, 0, 0); }
    50% { background: rgba(255, 0, 0, 0.15); }
}

/* La carte Glassmorphism centrale */
.error-card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    padding: 4rem 3rem;
    text-align: center;
    z-index: 1;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Liseré lumineux en haut de la carte selon l'erreur */
.error-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.error-card-404::before {
    background: linear-gradient(90deg, var(--color-sky), var(--color-cosmic));
}

.error-card-403::before {
    background: linear-gradient(90deg, #e63946, #ffb703);
}

/* Titre Numérique GÉANT */
.error-code {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 1rem;
    background: linear-gradient(to bottom right, var(--color-sky), var(--color-cosmic));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(var(--color-sky-rgb), 0.3);
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

.error-code-403 {
    background: linear-gradient(to bottom right, #e63946, #ffb703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Icône animée */
.error-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.icon-float {
    animation: iconFloat 4s ease-in-out infinite;
}

@keyframes iconFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.error-title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.75rem;
}

.error-message {
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 576px) {
    .error-code {
        font-size: 6rem;
    }
    .error-card {
        padding: 3rem 1.5rem;
    }
}