html { scroll-behavior: smooth; }
        
        :root {
            --primary-navy: #1d2333; 
            --accent-gold: #d4af37;
            --gradient-start: #1d2537;
            --gradient-end: #4f5a78;
        }

        .bg-navy { background-color: var(--primary-navy); }
        .text-navy { color: var(--primary-navy); }
        .text-gold { color: var(--accent-gold); }
        .bg-gold { background-color: var(--accent-gold); }
        .border-gold { border-color: var(--accent-gold); }
        
        .hero-gradient {
            position: relative;
            background-color: #0f172a; /* fallback si image ne charge pas */
        }

        .img-zoom:hover img { transform: scale(1.05); }
        .logo-container img { max-height: 100%; width: auto; }

        /* Gestion des pages/onglets */
        .page-section { display: none; }
        .page-section.active { display: block; animation: fadeIn 0.4s ease-out; }

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

        /* Portfolio Filters */
        .filter-btn.active {
            background-color: var(--accent-gold);
            color: var(--primary-navy);
            border-color: var(--accent-gold);
        }

        /* Lightbox */
        #lightbox {
            display: none;
            position: fixed;
            z-index: 100;
            inset: 0;
            background: rgba(0,0,0,0.9);
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        #lightbox img {
            max-width: 90%;
            max-height: 80vh;
            border-radius: 8px;
        }

        /* --- SECTION SPINNER --- */
        .spinner {
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 2px solid #d4af37; /* Couleur dorée */
            width: 18px;
            height: 18px;
            animation: spin 0.8s linear infinite;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
        }
        @keyframes spin { 
            0% { transform: rotate(0deg); } 
            100% { transform: rotate(360deg); } 
        }
    

.nav-link-active { color: var(--accent-gold) !important; }
.nav-cta-active { background-color: var(--accent-gold) !important; color: var(--primary-navy) !important; }
a { text-decoration: none; }
button { cursor: pointer; }