/* ==========================================================================
   BACKSTAGE CONSOLE - STYLE SYSTEM - PRODUCTION
   ========================================================================== */

/* 1. Reset et Typographie */
* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    background-color: #FFFDEB; /* Ton fond crème unifié de production */
    color: #000000; 
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 80px; /* Padding global réduit pour laisser les pages gérer leur propre offset */
}

/* 2. Titres */
.title-giant { 
    font-family: 'Archivo Black', sans-serif; 
    font-size: 100px; 
    text-transform: uppercase; 
    line-height: 1;
}

/* 3. Layout Principal */
main {
    flex: 1;
    padding: 40px 4%;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* 4. Navigation et Responsive */
.burger-trigger { display: none !important; }

@media (max-width: 900px) {
    header {
        flex-direction: column !important;
        height: auto !important;
        padding: 15px 10px !important;
        gap: 15px !important;
    }
    .nav-container-desktop {
        width: 100%;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .burger-trigger { display: flex !important; align-items: center; justify-content: center; }
}

@media (max-width: 768px) {
    header .nav-links, header nav {
        display: flex !important;
        overflow-x: auto !important;
        width: 100% !important;
        padding-bottom: 8px !important;
        white-space: nowrap !important;
    }
    header nav a {
        display: inline-block !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }
}

/* 5. Helpers */
.hidden { display: none !important; }
img { max-width: 100%; height: auto; }

/* 6. ANIMATION LOGO NEO-BRUTALISTE (MOSH EFFECT) */
header .logo a img { transition: transform 0.15s steps(2); }

header .logo a:hover img {
    animation: brutalMosh 0.25s infinite linear;
    filter: drop-shadow(8px 8px 0px #FF5733) contrast(1.4) !important;
    background: #FFD100 !important;
}

@keyframes brutalMosh {
    0% { transform: rotate(-3deg) translate(0, 0); }
    20% { transform: rotate(1deg) translate(-3px, 2px); }
    40% { transform: rotate(-5deg) translate(3px, -1px); }
    60% { transform: rotate(2deg) translate(-2px, -2px); }
    80% { transform: rotate(-2deg) translate(2px, 3px); }
    100% { transform: rotate(-3deg) translate(0, 0); }
}

/* Footer Button Animation */
footer .footer-links a.brutal-footer-btn:hover {
    background: #FF5733 !important;
    color: #FFFFFF !important;
    box-shadow: 2px 2px 0px #000000 !important;
    transform: translate(2px, 2px);
}

/* Nettoyage et verrouillage du logo */
header .logo {
    height: 110px; /* Correspond à la hauteur du header */
    display: flex;
    align-items: center;
}

header .logo a { 
    display: flex; 
    align-items: center; 
    height: 100%; 
    text-decoration: none; 
}

header .logo a img { 
    height: 60px; /* Taille fixée : ça ne pourra plus dépasser 60px */
    width: auto; 
    object-fit: contain; 
    border: 4px solid #000000; 
    padding: 6px; 
    background: #FFFFFF;
}