:root {
            --bg-main: #121212;
            --bg-header: #0a0a0a;
            --text-main: #ffffff;
            --text-muted: #9e9e9e;
            --hover-bg: #2a2a2a;
            --accent-color: #ffffff;
            --card-bg: #1a1a1a;
        }

        body {
            margin: 0;
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-main);
            color: var(--text-main);
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        /* --- ANIMATIONS UX --- */
        @keyframes slideUpFade { 
            from { opacity: 0; transform: translateY(15px); } 
            to { opacity: 1; transform: translateY(0); } 
        }
        @keyframes dropDownAnim {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

/* --- EN-TÊTE HORIZONTAL --- */
        .main-header {
            height: 75px; background-color: var(--bg-header); display: flex; align-items: center;
            padding: 0 40px; border-bottom: 1px solid #222; flex-shrink: 0;
            position: relative; z-index: 100; gap: 20px;
        }

        .header-left { display: flex; align-items: center; height: 100%; }

        .logo-img {
            height: 40px; margin-right: 40px; cursor: pointer; background-color: #000000; min-width: 120px;
            color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; letter-spacing: 1.5px;
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .logo-img:hover { transform: scale(1.05); }

        .nav-links { display: flex; align-items: center; gap: 20px; height: 100%; }

        .nav-item {
            color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase;
            letter-spacing: 1px; cursor: pointer; height: 100%; display: flex; align-items: center; position: relative; transition: color 0.3s ease;
            white-space: nowrap;
        }

        .nav-item:hover, .nav-item.active { color: var(--text-main); }

        /* Animation fluide du soulignement */
        .nav-item::after { 
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; 
            background-color: var(--accent-color); 
            transform: scaleX(0); transform-origin: center; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
        }
        .nav-item.active::after, .nav-item:hover::after { transform: scaleX(1); }

        .header-right { display: flex; align-items: center; gap: 12px; height: 100%; margin-left: auto; }

        .search-bar {
            background-color: transparent; border: 1px solid #444; padding: 8px 16px; border-radius: 20px; color: white;
            width: 220px; outline: none; font-family: 'Inter', sans-serif; font-size: 13px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .search-bar:focus { border-color: #888; width: 250px; background-color: rgba(255,255,255,0.05); }

        /* --- SÉLECTEUR DE LANGUE (FIX DRAPEAUX POUR TOUS LES NAVIGATEURS) --- */
        .lang-wrapper { position: relative; display: flex; align-items: center; }
        .lang-selector {
            width: 36px; height: 36px; border-radius: 50%; border: 1px solid #444; display: flex; align-items: center;
            justify-content: center; cursor: pointer; transition: all 0.2s ease; color: white; background: #1a1a1a;
            overflow: hidden;
        }
        .lang-selector:hover { background-color: var(--hover-bg); border-color: white; transform: rotate(5deg); }
        .lang-dropdown {
            position: absolute; top: 120%; right: 0; background: var(--bg-header); border: 1px solid #333;
            border-radius: 8px; width: 160px; max-height: 300px; overflow-y: auto; display: none; flex-direction: column;
            z-index: 100; box-shadow: 0 10px 25px rgba(0,0,0,0.7);
        }
        .lang-dropdown.show { display: flex; animation: dropDownAnim 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .lang-option {
            padding: 12px 15px; display: flex; align-items: center; gap: 12px; cursor: pointer;
            font-size: 13px; font-weight: 500; color: var(--text-muted); transition: 0.2s; border-bottom: 1px solid #222;
        }
        .lang-option:last-child { border-bottom: none; }
        .lang-option:hover { background: var(--hover-bg); color: white; padding-left: 20px; }

        .flag-icon { 
            width: 24px !important; height: 24px !important; 
            border-radius: 50% !important; 
            object-fit: cover !important; 
            object-position: center !important; 
            display: block !important; 
            background-color: #222;
            flex-shrink: 0;
        }

        /* --- PROFIL HEADER --- */
        .user-section { display: flex; height: 100%; align-items: center; }
        .profile-trigger { display: flex; align-items: center; gap: 10px; cursor: pointer; padding-left: 10px; padding-right: 5px; border-radius: 8px; transition: background 0.2s;}
        .profile-trigger:hover { background: #222; }
        .nav-title { background: #ffffff; color: #000000; font-size: 9px; font-weight: 900; padding: 3px 6px; border-radius: 4px; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid transparent; }
        .nav-title.guest { background: #000000; color: #ffffff; border: 1px solid #444; }
        .avatar { width: 28px; height: 28px; background-color: #ffffff; background-size: cover; background-position: center; background-repeat: no-repeat; color: #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
        .user-info { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
        .nav-username { font-weight: 700; font-size: 12px; text-transform: uppercase; color: white; }
        .online-dot { color: #4cd137; font-size: 9px; text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 4px; }
        .online-dot.offline { color: #888; }

        /* --- BOUTON AMIS --- */
        .friends-btn {
            display: flex; align-items: center; gap: 8px; background: #1a1a1a; border: 1px solid #333; 
            padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); color: white; font-weight: bold; font-size: 12px;
        }
        .friends-btn:hover { background: #2a2a2a; border-color: #777; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

        /* --- MENUS DÉROULANTS --- */
        .user-dropdown {
            position: absolute; top: 110%; right: 0; background: #18181c; border: 1px solid #333;
            border-radius: 8px; display: none; flex-direction: column; z-index: 1000; box-shadow: 0 15px 35px rgba(0,0,0,0.6); overflow: hidden;
        }
        .user-dropdown.show { display: flex; animation: dropDownAnim 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .dropdown-item { padding: 12px 15px; font-size: 13px; color: #ccc; cursor: pointer; transition: 0.2s; text-align: left; display: flex; align-items: center;}
        .dropdown-item img { width: 14px; filter: invert(1); opacity: 0.8; margin-right: 8px; vertical-align: middle; transition: transform 0.2s;}
        .dropdown-item:hover { background: #2a2a2a; color: white; }
        .dropdown-item:hover img { transform: scale(1.2); opacity: 1; }
        .dropdown-divider { height: 1px; background: #333; margin: 5px 0; }
        .dropdown-item.logout { color: #ff4757; }
        .dropdown-item.logout img { filter: invert(34%) sepia(98%) saturate(3501%) hue-rotate(333deg) brightness(101%) contrast(106%); }
        .dropdown-item.logout:hover { background: #ff475722; padding-left: 20px; }

        /* --- CONTENU & VUES --- */
        .content { flex-grow: 1; padding: 40px 80px; overflow-y: auto; display: flex; flex-direction: column; scroll-behavior: smooth; }
        .page-title { margin: 0 0 30px 0; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; display: none; }
        .view-section { display: none; flex-grow: 1; }
        .view-section.active { display: block; animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

        /* --- ANIMATION MOTION NOVALY CORRIGÉE --- */
        .motion-logo-container {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
        }
        .novaly-motion-logo {
            font-size: 72px;
            font-weight: 900;
            letter-spacing: 15px;
            text-transform: uppercase;
            margin: 0;
            color: rgba(255, 255, 255, 0.2); /* Aspect par défaut quand la souris n'est pas là */
            display: inline-block;
            user-select: none;
            position: relative; /* Pour le pseudo-élément */
            cursor: default;
            animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
            transition: color 0.3s ease;
        }
        .novaly-motion-logo.active-light {
            background: radial-gradient(circle 120px at var(--mouse-x) var(--mouse-y), rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }
 @media (max-width: 768px) {
            .novaly-motion-logo {
                background: radial-gradient(circle 120px at 50% 50%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
                animation: mobileLogoAnim 3s infinite alternate;
            }
            @keyframes mobileLogoAnim { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
        }

        /* --- BANNIÈRE & GRILLES --- */
        .hero-banner {
            background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover;
            height: 450px; border-radius: 12px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 40px; margin-bottom: 40px;
            box-shadow: inset 0 -50px 100px rgba(0,0,0,0.5);
        }

        .hero-banner h1 { font-size: 56px; margin: 0 0 10px; font-weight: 800; text-shadow: 0 4px 10px rgba(0,0,0,0.5); animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
        .hero-banner p { font-size: 18px; color: #ddd; margin: 0 0 25px; max-width: 600px; animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
        .btn-hero { animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; background: transparent; color: white; border: 2px solid white; padding: 12px 35px; font-size: 15px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
        .btn-hero:hover { background: white; color: black; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255,255,255,0.2); }
        .btn-hero:disabled { background: transparent !important; border-color: #333 !important; color: #555 !important; cursor: not-allowed; box-shadow: none; transform: none;}

        /* --- TAGS JEUX --- */
        .game-tags { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
        .tag { font-size: 9px; font-weight: 800; padding: 3px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; transition: 0.2s; }
        .tag-action { background: rgba(231, 76, 60, 0.15); color: #ff6b81; border: 1px solid #ff4757; }
        .tag-multi { background: rgba(52, 152, 219, 0.15); color: #70a1ff; border: 1px solid #3742fa; }
        .tag-party { background: rgba(155, 89, 182, 0.15); color: #a29bfe; border: 1px solid #5352ed; }
        .tag-soon { background: rgba(241, 196, 15, 0.15); color: #eccc68; border: 1px solid #ffa502; }
        .tag-reflexion { background: rgba(46, 204, 113, 0.15); color: #7bed9f; border: 1px solid #2ed573; }

        /* --- SKELETON LOADING --- */
        .skeleton { position: relative; overflow: hidden; border-color: #222 !important; pointer-events: none; }
        .skeleton .game-cover, .skeleton .game-title, .skeleton .game-price, .skeleton .game-tags { visibility: hidden; }
        .skeleton::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(90deg, #222 25%, #2a2a2a 50%, #222 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }
        @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 25px; margin-bottom: 60px; }
        .game-card { cursor: pointer; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 8px; padding-bottom: 10px; }
        .game-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 15px 30px rgba(0,0,0,0.4); }
        .game-card:hover .tag { filter: brightness(1.2); }
        .game-cover { height: 280px; border-radius: 8px; margin-bottom: 12px; background-color: #222; position: relative; overflow: hidden; transition: 0.3s;}
        .game-card:hover .game-cover::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); opacity: 0.5; }
        .game-title { font-weight: 800; font-size: 15px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; }
        .game-price { background: #2a2a2a; color: #eee; padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; display: inline-block; transition: 0.2s; }
        .game-card:hover .game-price { background: #333; color: white; }

        /* --- PROFIL & PARAMÈTRES --- */
        .profile-layout { display: flex; gap: 40px; max-width: 1000px; margin-bottom: 60px; }
        .profile-sidebar { width: 250px; display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
        .profile-tab { padding: 12px 15px; color: var(--text-muted); cursor: pointer; border-radius: 6px; font-weight: 600; font-size: 14px; transition: all 0.2s ease; }
        .profile-tab:hover, .profile-tab.active { background-color: var(--hover-bg); color: var(--text-main); }
        .profile-tab.active { border-left: 4px solid var(--accent-color); border-radius: 0 6px 6px 0; }
        .profile-content { flex-grow: 1; }
        .profile-tab-content { display: none; background: var(--card-bg); padding: 35px; border-radius: 8px; border: 1px solid #333; }
        .profile-tab-content.active { display: block; animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 13px; transition: 0.2s; }
        .form-group input:focus + label, .form-group textarea:focus + label { color: white; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; box-sizing: border-box; padding: 12px; background: #121212; border: 1px solid #444; color: white; border-radius: 6px; outline: none; font-family: 'Inter', sans-serif; transition: 0.2s;}
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: white; box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }

        .btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: white; color: black; border: none; padding: 10px 20px; font-weight: 600; border-radius: 4px; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
        .btn:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255,255,255,0.2); }
        .btn:active { transform: translateY(0); }

        .generic-view-content { background: var(--card-bg); padding: 40px; border-radius: 8px; text-align: center; color: var(--text-muted); margin-bottom: 60px; }
        .news-card { background: #222; border: 1px solid #333; border-radius: 8px; padding: 20px; text-align: left; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; }
        .news-card:hover { border-color: #666; background: #2a2a2a; transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
        .news-card h4 { margin: 0 0 10px 0; color: white; font-size: 16px; display: flex; align-items: center; gap: 8px; }
        .news-card p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

        /* --- BOUTONS PLEIN ECRAN --- */
        .game-controls { position: absolute; top: 15px; left: 15px; z-index: 60; display: flex; gap: 10px; }
        .game-control-btn { 
            background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); color: white; border: 1px solid rgba(255,255,255,0.2); 
            padding: 8px 15px; border-radius: 6px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
        }
        .game-control-btn:hover { background: rgba(0, 0, 0, 0.9); border-color: white; transform: scale(1.05); }
        .game-control-btn.btn-quit:hover { background: rgba(231, 76, 60, 0.9); border-color: #ff4757; }

        /* --- FOOTER --- */
        .site-footer { background-color: var(--bg-main); border-top: 1px solid #222; padding: 50px 0 20px 0; margin-top: auto; font-size: 13px; color: var(--text-muted); }
        .site-footer h4 { color: var(--text-main); font-size: 14px; font-weight: 800; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 0.5px; }
        .footer-downloads { margin-bottom: 40px; border-bottom: 1px solid #222; padding-bottom: 40px; }
        .app-buttons { display: flex; gap: 15px; flex-wrap: wrap; }
        .app-btn { background: transparent; border: 1px solid #444; color: white; padding: 12px 25px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 10px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
        .app-btn svg { width: 18px; height: 18px; fill: currentColor; }
        .app-btn:hover { background-color: var(--hover-bg); border-color: white; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
        .footer-container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 50px; }
        .footer-links { display: flex; gap: 80px; }
        .footer-column { display: flex; flex-direction: column; gap: 15px; }
        .footer-link { color: var(--text-muted); text-decoration: none; transition: color 0.2s; font-size: 13px; cursor: pointer; }
        .footer-link:hover, .footer-link.active { color: var(--text-main); transform: translateX(2px); }
        .footer-bottom { border-top: 1px solid #222; padding-top: 25px; font-size: 12px; display: flex; justify-content: space-between; }

        .btn-telecharger-principal {
                background-color: #ffffff; /* Fond tout blanc */
                color: #000000 ; /* Texte en noir */
                padding: 5px 12px; /* Espace autour du texte pour faire un rectangle */
                font-size: 13px;
                border-radius: 12px; /* Bords arrondis (tu peux augmenter à 15px si tu veux plus rond) */
                font-weight: bold;
                text-decoration: none;
                transition: all 0.2s ease;
                margin-left: 5px; /* Espace avec les autres liens du menu */
                display: inline-block;
            }

            /* Petit effet sympa quand on passe la souris dessus */
            .btn-telecharger-principal:hover {
                background-color: #e0e0e0; /* Devient très légèrement gris au survol */
                transform: translateY(-2px); /* Se soulève un tout petit peu */
            }
/* ========================================================= */
        /* ================== RESPONSIVE MOBILE ==================== */
        /* ========================================================= */
        .menu-toggle { display: none; font-size: 28px; cursor: pointer; color: white; margin-right: 10px; }
        /* ========================================================= */
        /* ================== RESPONSIVE MOBILE ==================== */
        /* ========================================================= */
        .menu-toggle { display: none; font-size: 28px; cursor: pointer; color: white; margin-right: 10px; }

        @media (max-width: 1024px) {
            /* 1. Le conteneur principal du menu (empilement vertical propre) */
            .main-header { 
                padding: 15px; 
                flex-direction: column; 
                align-items: stretch; 
                height: auto !important; 
                min-height: 70px; 
                gap: 0; 
            }

            /* 2. Ligne Logo + Burger */
            .header-left { 
                width: 100%; 
                display: flex; 
                flex-wrap: wrap; 
                justify-content: space-between; 
                align-items: center; 
                height: auto !important; 
            }
            .logo-img { margin-right: 0; margin-top: 0; }
            .menu-toggle { display: block; margin-top: 0; }

            /* 3. Liens de navigation (Magasin, Bibliothèque...) */
            .nav-links { 
                display: none; 
                width: 100%; 
                flex-direction: column; 
                align-items: stretch; 
                padding: 10px 0 0 0; 
                margin-top: 15px;
                gap: 0; 
                border-top: 1px solid #222;
            }
            .nav-item { 
                height: auto; 
                padding: 15px 10px; 
                width: 100%; 
                box-sizing: border-box;
                border-bottom: 1px solid #1a1a1a;
                justify-content: center; /* Centre le texte sur mobile */
            }
            .nav-item::after { display: none; } /* Enlève la barre de survol sur mobile pour un rendu plus propre */

            /* 4. Zone droite (Recherche, Télécharger, Profil) */
            .header-right { 
                display: none; 
                width: 100%; 
                flex-direction: column; 
                align-items: stretch; 
                padding: 15px 0; 
                gap: 15px; 
                margin: 0; 
                box-sizing: border-box; 
            }

            .lang-wrapper { display: none; width: 100%; justify-content: center; padding: 10px 0; }
            .user-section { display: none; width: 100%; justify-content: center; padding: 10px 0; }

            /* Activation du menu (quand on clique sur le burger) */
            .main-header.open .nav-links, 
            .main-header.open .header-right,
            .main-header.open .lang-wrapper,
            .main-header.open .user-section { 
                display: flex; 
                animation: dropDownAnim 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
            }

            /* Ajustements internes au menu */
            .search-bar { width: 100%; box-sizing: border-box; text-align: center; }
            .search-bar:focus { width: 100%; } /* Empile que la barre dépasse quand on clique dessus */
            .lang-dropdown { top: 100%; left: 0; right: auto; width: 100%; }
            #friends-menu-container { width: 100%; justify-content: center; }
            .friends-btn { width: 100%; justify-content: center; }
            .profile-trigger { width: 100%; justify-content: center; background: #1a1a1a; padding: 12px; border-radius: 8px; border: 1px solid #333; box-sizing: border-box;}
            .user-dropdown { position: static; width: 100%; margin-top: 10px; box-shadow: none; border: 1px solid #444; box-sizing: border-box;}

            /* Bouton Télécharger bien grand et centré */
            .btn-telecharger-principal {
                width: 100%; 
                margin-left: 0; 
                margin-top: 5px; 
                text-align: center; 
                padding: 12px;
                box-sizing: border-box;
                justify-content: center;
            }

            /* --- CORRECTIONS DU RESTE DE LA PAGE POUR EMPÊCHER LE ZOOM/SLIDE --- */
            .content { padding: 15px; box-sizing: border-box; width: 100%; overflow-x: hidden; }
            .motion-logo-container { padding: 10px 0; margin-bottom: 20px; }
            .novaly-motion-logo { font-size: 42px; letter-spacing: 8px; width: 100%; }
            .hero-banner { height: auto; min-height: 250px; padding: 20px; width: 100%; box-sizing: border-box; }
            .hero-banner h1 { font-size: 28px; }
            .hero-banner p { font-size: 14px; }
            .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; width: 100%; }
            .game-cover { height: 160px; }
            .game-title { font-size: 13px; }
            .profile-layout { flex-direction: column; gap: 20px; width: 100%; }
            .profile-sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding-bottom: 10px; border-bottom: 1px solid #333; }
            .profile-tab { white-space: nowrap; font-size: 12px; padding: 10px; }
            .profile-tab.active { border-left: none; border-bottom: 3px solid var(--accent-color); border-radius: 6px 6px 0 0; }
            .profile-tab-content { padding: 20px; box-sizing: border-box; width: 100%; }
            .site-footer { padding: 30px 15px; box-sizing: border-box; width: 100%; }
            .footer-links { flex-direction: column; gap: 30px; }
            #game-lobby-modal > div { width: 90%; padding: 20px; box-sizing: border-box; }
        }

        /* ================= CAROUSEL INFINI ================= */
.carousel-container {
    width: 100%;
    overflow: hidden;
    margin-bottom: 50px;
    position: relative;
}

/* Effet de fondu noir sur la gauche et la droite pour un look premium */
.carousel-container::before, .carousel-container::after {
    content: ''; position: absolute; top: 0; width: 60px; height: 100%; z-index: 2; pointer-events: none;
}
.carousel-container::before { left: 0; background: linear-gradient(to right, var(--bg-main), transparent); }
.carousel-container::after { right: 0; background: linear-gradient(to left, var(--bg-main), transparent); }

.carousel-track {
    display: flex;
    gap: 20px;
    width: max-content;
    /* L'animation dure 30s. Si ça va trop vite, augmente à 40s ou 50s */
    animation: scrollCarousel 30s linear infinite;
}

/* Met le défilement en pause quand on survole avec la souris */
.carousel-track:hover {
    animation-play-state: paused;
}

.carousel-card {
    width: 280px;
    height: 160px;
    border-radius: 8px;
    background-color: #222;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}
.carousel-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    z-index: 10;
}
.carousel-title {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 30px 15px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: white; font-weight: 800; font-size: 14px;
    box-sizing: border-box;
}

@keyframes scrollCarousel {
    0% { transform: translateX(0); }
    /* -50% décale exactement de la moitié de la liste (la partie dupliquée) -10px pour ajuster le gap */
    100% { transform: translateX(calc(-50% - 10px)); } 
}

/* Logo image (assets/img/logo/novaly-wordmark.png) à la place du texte */
img.logo-img { height: 19px; width: auto; min-width: 0; background: none; object-fit: contain; user-select: none; }

/* Bouton profil aligné verticalement avec le reste de l'en-tête */
.user-section { height: 100%; align-items: center; }
#logged-in-view, #logged-out-view { height: 100%; align-items: center; }
#logged-out-view[style*="block"] { display: flex !important; }
.profile-trigger { height: 38px; box-sizing: border-box; align-items: center; }
.profile-trigger.nav-item { height: 38px; }