/* 1. RESET & CONFIGURATION GLOBALE*/
   *,
   *::after,
   *::before {
       box-shadow: none;
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background-color: #0f172a;
       color: #f8fafc;
       line-height: 1.6;
       display: flex;
       flex-direction: column;
       min-height: 100vh;
   }
   
   .container {
       width: 85%;
       margin: 0 auto;
       max-width: 1200px;
       flex: 1;
   }
   
   /* 2. HEADER & NAVIGATION*/
      header {
        background-color: black;
        padding: 1.5rem 0;
        border-bottom: 2px solid #00d2ff;
    }
    
    .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 95%;
     margin: 0 auto;
     }
    
    .logo { 
        font-size: 1.8rem; 
        font-weight: bold; 
        color: #f8fafc;
    }
    
    .logo span { 
        color: #00d2ff; 
    }
    
    .nav-links {
        list-style: none;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }
    
    .nav-links > li { 
        margin-left: 30px; 
        position: relative; 
    }
    
    .nav-links a {
        text-decoration: none;
        color: #f8fafc;
        font-weight: 500;
        transition: 0.3s ease;
    }
    
    .nav-links a:hover, 
    .nav-links a.active { 
        color: #00d2ff; 
    }
    
    /* --- DESIGN DU MENU DÉROULANT (DROPDOWN) --- */
    .dropdown-trigger {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }
    
    .arrow-down {
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #ffffff; 
        transition: transform 0.3s ease;
    }
    
    .dropdown-menu {
        display: none; 
        position: absolute;
        top: 90%; 
        left: 50%;
        transform: translateX(-50%) translateY(10px); 
        background-color: #1e293b; 
        min-width: 160px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        border-radius: 6px;
        padding: 8px 0;
        list-style: none;
        margin: 0;
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }
    
    .dropdown-menu li {
        margin-left: 0 !important; 
        display: block;
        width: 100%;
    }
    
    .dropdown-menu li a {
        padding: 10px 20px;
        display: block;
        font-size: 14px;
        color: #cbd5e1;
        white-space: nowrap; 
        text-align: left;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    
    .dropdown-menu li a:hover {
        background-color: #00d2ff; 
        color: #0f172a;
    }
    
    .nav-links li.dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0px); 
    }
    
    .nav-links li.dropdown:hover .arrow-down {
        transform: rotate(180deg);
    }
    
   
   /* 3. EN-TÊTE DE LA PAGE*/
   .catalog-header {
       margin: 50px 0 30px 0;
       text-align: center;
   }
   
   .catalog-header h1 {
       font-size: 2.5rem;
       margin-bottom: 10px;
       color: #f8fafc;
   }
   
   .subtitle {
       color: #94a3b8;
       font-size: 1.1rem;
   }
   
   /* 4. GRILLE DES GENRES & CARTES*/
   .genre-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       gap: 30px;
       margin: 40px 0 60px 0;
   }
   
   .genre-card {
       background: #1e293b;
       border-radius: 15px;
       border: 1px solid #334155;
       display: flex;
       flex-direction: column;
       overflow: hidden; 
       transition: all 0.3s ease;
   }
   
   .genre-card:hover {
       transform: translateY(-5px);
       border-color: #00d2ff;
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
   }
   
   .card-image-wrapper {
       position: relative;
       width: 100%;
       height: 160px;
   }
   
   .genre-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }
   
   .genre-card:hover img {
       transform: scale(1.05);
   }
   
   /* Badge pour afficher le nombre de jeux */
   .genre-badge {
       position: absolute;
       top: 15px;
       right: 15px;
       background-color: rgba(15, 23, 42, 0.85);
       color: #4ade80;
       padding: 5px 12px;
       border-radius: 20px;
       font-size: 0.85rem;
       font-weight: bold;
       border: 1px solid #4ade80;
       backdrop-filter: blur(3px);
   }
   
   .card-body {
       padding: 20px;
       flex-grow: 1;
   }
   
   .card-body h3 {
       color: #00d2ff;
       font-size: 1.4rem;
       margin-bottom: 10px;
   }
   
   .card-body p {
       color: #94a3b8;
       font-size: 0.95rem;
       line-height: 1.5;
   }
   
   .card-footer {
       padding: 0 20px 20px 20px;
       background: transparent;
   }
   
   .btn-explore {
       display: block;
       text-align: center;
       background: transparent;
       border: 1px solid #00d2ff;
       color: #00d2ff;
       padding: 10px 15px;
       border-radius: 8px;
       text-decoration: none;
       font-size: 0.95rem;
       font-weight: bold;
       transition: 0.3s ease;
       width: 100%;
   }
   
   .btn-explore:hover {
       background: #00d2ff;
       color: #0f172a;
       box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
   }
   
   .no-results {
       grid-column: 1 / -1;
       text-align: center;
       padding: 50px;
       color: #94a3b8;
       font-size: 1.2rem;
   }
   
   /* 5. FOOTER*/
   footer {
       text-align: center;
       padding: 20px;
       background-color: #020617;
       color: #64748b;
       border-top: 1px solid #1e293b;
   }