/* 1. YOUR VARIABLES (Provided) */
:root {
    --accent-warning-base: 18, 100%, 57%;
    --font-color-primary: hsl(0, 0%, 99%);
    --font-color-secondary: hsla(0, 0%, 100%, 1);
    --background: hsl(245, 14%, 15%);

    --header-height: 96px; /* Derived from --spacing-12 or set manually */
    --spacing-2: 16px;

    /* Typography defaults */
    --font-family: 'Europa', sans-serif;
    --font-size-base: 16px;
}

/* 2. RESET & BASE */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family);
    background-color: #f0f0f0; /* Just to see the header contrast */
}

/* 3. HEADER LAYOUT */
.site-header {
    /* Fixed Positioning & Style from your snippet */
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 5rem;
    background-color: var(--background);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    padding: 0 var(--spacing-2);
    transition: box-shadow .1s ease-in-out;

    /* Grid Layout to keep Logo Centered perfectly */
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Left | Center | Right */
    align-items: center;
}

.search-label {
    display: none;
}

/* 4. LEFT SECTION (Menu Button) */
.header-left {
    display: flex;
    justify-content: flex-start;
}

/* 5. CENTER SECTION (Logo) */
.header-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-logo svg {
    /* Responsive resizing for logo */
    height: 40px;
    width: auto;
    color: var(--font-color-primary);
}

/* 6. RIGHT SECTION (Language Picker) */
.header-right {
    display: flex;
    justify-content: flex-end;
}

/* 7. BUTTON STYLES (Shared for Menu & Lang) */
.header-btn {
    appearance: none;
    background: #2f2d3c;
    box-shadow: 0 1px 4px #0000001a;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: white;
    gap: 8px; /* Space between text and arrow */
    padding: 8px;
}

/* Text Label style */
.btn-label {
    font-weight: 700;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Arrow Icon Style */
.arrow-icon {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
}

/* Rotations for the arrows matching your example */
.rotate-270 {
    transform: rotate(270deg); /* Pointing Up/Left depending on origin */
}

.rotate-90 {
    transform: rotate(90deg); /* Pointing Down/Right depending on origin */
}

.header-logo img {
    height: 40px; /* Or whatever size fits the header */
    width: auto;
    display: block; /* Removes extra space below inline images */
}

/* =========================================
   FULLSCREEN MENU OVERLAY (Tomorrowland Style)
   ========================================= */

.mobile-menu-overlay {
    /* Fixed Positioning: Covers screen below header */
    position: fixed;
    top: 64px; /* Starts exactly after header */
    left: 0;
    right: 0;
    bottom: 0; /* Stretches to bottom */

    background-color: var(--background); /* Use your variable */
    z-index: 99; /* Below header (100), above content */

    /* Flex Layout for Content */
    display: flex;
    flex-direction: column;
    padding: var(--spacing-4, 32px); /* Spacing from your vars */
    box-sizing: border-box;
    overflow-y: auto; /* Scrollable if content is tall */

    /* Animation State: Hidden by Default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevent clicks when hidden */
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

/* OPEN STATE (Toggled via JS) */
.mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =========================================
   MENU CONTENT STYLING (Internal Links)
   ========================================= */
.mobile-menu-overlay ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3, 24px); /* Space between links */
}

.mobile-menu-overlay a {
    text-decoration: none;
    color: var(--font-color-primary);
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

.mobile-menu-overlay a:hover {
    color: gold; /* Highlight color */
}

/* --- 1. SIDEBAR CONTAINER (Matches _sidebar_1bctv_67) --- */
.sidebar-menu {
    position: fixed;
    top: var(--header-height, 64px); /* Matches header height */
    left: 0;
    bottom: 0;
    width: 280px; /* Fixed width sidebar, NOT fullscreen */
    background-color: var(--background); /* Dark theme bg */
    border-right: 1px solid rgba(255,255,255,0.05); /* Subtle border */
    z-index: 99;

    display: flex;
    flex-direction: column;
    padding: 16px; /* var(--spacing-2) */
    overflow-y: auto;

    /* Animation: Slide in from left */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Font settings from your vars */
    color: var(--font-color-primary);
    font-family: var(--font-family);
}

/* OPEN STATE */
.sidebar-menu.open {
    transform: translateX(0);
}

/* --- 2. MENU ITEMS (Matches <a class="active" ...>) --- */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Tight spacing */
}

/* Common style for links and accordion buttons */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px; /* Rounded corners */

    text-decoration: none;
    color: var(--font-color-primary); /* White/Light text */
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}

/* Hover & Active States */
.sidebar-item:hover {
    background-color: rgba(255,255,255,0.05); /* Subtle hover */
}

.sidebar-item.active {
    background-color: rgba(255,255,255,0.1);
    font-weight: 700;
}

/* Icons inside items */
.sidebar-item svg {
    color: inherit;
    opacity: 0.8;
    width: 18px;
    height: 18px;
}

/* --- 3. ACCORDION (Dropdowns) --- */
.sidebar-group {
    display: flex;
    flex-direction: column;
}

.sidebar-item .chevron {
    margin-left: auto; /* Push chevron to right */
    transition: transform 0.2s;
    opacity: 0.5;
}

/* Rotate arrow when open */
.sidebar-item[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

/* Hide submenu when the 'hidden' attribute is present */
.sidebar-submenu[hidden] {
    display: none !important;
}
/* Submenu items (indented) */
.sidebar-submenu {
    padding-left: 12px; /* Indent content */
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
    border-left: 1px solid rgba(255,255,255,0.1); /* Guide line */
    margin-left: 19px; /* Align with icon center */
}

.sidebar-item.sub-item {
    font-size: 14px;
    padding: 8px 12px;
}

/* --- 4. BOTTOM SECTION (Matches Divider + Account) --- */
.sidebar-bottom {
    margin-top: auto; /* Pushes this section to the bottom */
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 16px;
}

.sidebar-divider {
    height: 1px;
    background-color: rgba(255,255,255,0.1);
    margin: 8px 0;
    width: 100%;
}

/* The highlighted button (e.g. Login/Account) */
.sidebar-item.sidebar-button {
    background-color: #851cd0; /* Purple accent from your vars */
    color: #fff;
    justify-content: center;
    font-weight: 600;
}
.sidebar-item.sidebar-button:hover {
    filter: brightness(1.1);
    background-color: var(--accent); /* Keep accent bg */
}

.sidebar-item.btn-advertise {
    /* Existing styles... */
    background: linear-gradient(135deg, var(--accent-1-base, #f6d878) 0%, #d4af37 100%);
    color: #000;
    font-weight: 700;
    justify-content: center;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: 0 2px 10px rgba(246, 216, 120, 0.2);

    /* Button Specific Resets */
    cursor: pointer;
    border: none;       /* Remove default button border */
    text-align: left;   /* Ensure text aligns if flex fails */
    font-family: inherit; /* Inherit font from parent */
    font-size: 16px;    /* Match link size */
}

/* --- Wrapper for positioning --- */
.language-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

/* --- Dropdown List Container --- */
.lang-list {
    position: absolute;
    top: 120%; /* Pushes it slightly below button */
    right: 0;  /* Aligns to right edge of button */

    min-width: 80px; /* Width of dropdown */
    background-color: var(--background);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    list-style: none;
    padding: 6px;
    margin: 0;
    z-index: 101; /* Above header content */

    /* Animation state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

/* --- Active State (Show List) --- */
.lang-list.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Individual Links --- */
.lang-item {
    display: block;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--font-color-primary);
    border-radius: 4px;
    transition: background-color 0.2s;
}

.header-btn.active .arrow-icon {
    transform: rotate(180deg);
}

.lang-item:hover {
    background-color: rgba(0,0,0,0.05); /* Light grey hover */
}

.lang-item.active {
    /* 1. Visual Highlight */
    background-color: rgba(255, 255, 255, 0.15); /* Light glassy background */

    /* 2. Text Emphasis */
    color: #ffffff;      /* Pure white text */
    font-weight: 800;    /* Extra bold */

    /* 3. Optional: A subtle indicator line on the left */
    border-left: 3px solid #ffffff;
    padding-left: 9px; /* Adjust padding slightly to account for the border */
}

/* Ensure hover doesn't conflict or look weird on the active item */
.lang-item.active:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Slightly brighter on hover */
}

#mobileMenu > nav > div:nth-child(7) > div > a > img,
#mobileMenu > div.menu-profile-section > img {
    margin: 0;
}

@media (min-width: 1024px) {

    .site-header {
        display: flex !important; /* Override the mobile 'grid' */
        justify-content: space-between; /* Pushes Logo Left, Lang Right */
        align-items: center;
        padding-left: 0; /* Align with sidebar edge if needed */
        padding-right: var(--spacing-2);
    }

    /* 2. Reset Logo Alignment */
    /* Remove any centering logic from the logo wrapper */
    .header-center {
        margin-left: 0;
        text-align: left;
        flex-grow: 0; /* Prevent it from taking extra space */
    }

    .header-logo img {
        margin-left: 2rem;
    }

    /* 3. Ensure Header Left (Menu Btn) is strictly removed */
    /* (This ensures Flexbox doesn't count it as a "gap" on the left) */
    .header-left {
        display: none !important;
    }

    /* 1. MAIN WRAPPER */
    .site-layout-wrapper {
        display: flex;
        align-items: flex-start; /* Sidebar sticks to top */
        width: 100%;
        margin: 0 auto;
    }

    /* 2. SIDEBAR (Sticky) */
    #mobileMenu.mobile-menu-overlay {
        position: sticky !important;
        top: 96px; /* Matches header height */
        width: 280px;
        min-width: 280px;
        height: calc(100vh - 96px);
        overflow-y: auto;

        /* Reset mobile styles */
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        border-right: 1px solid rgba(255,255,255,0.05);
        box-shadow: none;

        pointer-events: auto !important;
        z-index: 90;
        padding-top: 20px;
    }

    .bg-overlay {
        display: none !important;
        pointer-events: none !important;
    }

    /* 3. NEW RIGHT COLUMN (Holds Main + Footer) */
    .content-column {
        flex: 1; /* Takes all remaining width */
        width: calc(100% - 280px); /* Explicit width calculation */
        min-width: 0; /* Prevents overflow issues */
        display: flex;
        flex-direction: column; /* Stacks Main on top of Footer */
    }

    /* 4. MAIN CONTENT */
    .site-inner {
        width: 100%; /* Fills the content-column */
        padding-left: 15px;
    }

    /* 5. FOOTER */
    #novo-footer {
        width: 100%; /* Fills the content-column */
        padding-left: 32px; /* Matches main content indentation */
        padding-right: 32px;
        margin-top: auto; /* Pushes to bottom if content is short */
        border-top: 1px solid rgba(255,255,255,0.05);
        padding-top: 40px;
    }

    /* Hide header menu button */
    .header-left .header-btn[aria-label="Open Menu"] {
        display: none !important;
    }

    /* 1. COLLAPSE BUTTON VISIBILITY */
    .collapse-btn {
        display: flex; /* Show on desktop */
    }

    /* 2. SIDEBAR COLLAPSED STATE */
    #mobileMenu.mobile-menu-overlay.collapsed {
        /* Fix the layout "squashing" */
        padding-left: 0 !important;
        padding-right: 0 !important;

        /* Fix the "Scrollbar at the bottom" issue */
        /* We must allow overflow so the tooltips can 'pop out' */
        overflow: visible !important;

        width: 80px;
        min-width: 80px;
    }

    /* 3. CONTENT ADJUSTMENT */
    /* When sidebar is collapsed, content expands */
    #mobileMenu.mobile-menu-overlay.collapsed + .site-inner {
        width: calc(100% - 80px);
    }

    /* 4. HIDE TEXT LABELS & CHEVRONS */
    #mobileMenu.collapsed .sidebar-label,
    #mobileMenu.collapsed .chevron,
    #mobileMenu.collapsed .vip-badge-alone,
    #mobileMenu.collapsed .sidebar-submenu,
    #mobileMenu.collapsed .menu-profile-section {
        display: none !important; /* Hide text/submenus */
        opacity: 0;
    }

    #mobileMenu.collapsed .sidebar-item:hover,
    #mobileMenu.collapsed .sidebar-item.active {
        background-color: var(--background-secondary, #2d2d2d); /* Use your variable */
        color: gold; /* Highlight icon color */
        box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Pop-out effect */
        transform: translateY(-1px); /* Subtle lift */
    }

    /* 5. CSS-ONLY TOOLTIPS (Crucial for UX) */
    /* Shows the text label floating to the right on hover */
    #mobileMenu.collapsed .sidebar-item:hover::after {
        content: attr(aria-label); /* Uses the aria-label text */

        position: absolute;
        left: 100%; /* Push to right of icon */
        top: 50%;
        transform: translateY(-50%) translateX(10px); /* Center vertical + offset */

        background-color: #1a1a1a; /* Dark tooltip background */
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        padding: 6px 12px;
        border-radius: 6px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        z-index: 1000;
        pointer-events: none;

        /* Animation */
        opacity: 0;
        animation: fadeInTooltip 0.2s forwards;
    }

    /* 5. CENTER ICONS */
    #mobileMenu.collapsed .sidebar-item {
        justify-content: center;
        padding: 0;

        /* Make items square/pill-shaped for better click targets */
        width: 50px;
        height: 50px;
        margin: 8px auto; /* Center horizontally in the 80px sidebar */
        border-radius: 12px; /* Modern soft rounded corners */

        /* Transition for hover effects */
        transition: all 0.2s ease;
        position: relative; /* Needed for tooltip positioning */
    }

    #mobileMenu.collapsed .sidebar-group .sidebar-item {
        justify-content: center;
    }

    /* 6. ROTATE COLLAPSE ICON */
    #mobileMenu.collapsed .collapse-btn svg {
        transform: rotate(180deg); /* Point arrow right */
    }

    #mobileMenu.collapsed .collapse-btn {
        margin-top: auto; /* Push to very bottom if flex container */
        border-top: 1px solid rgba(255,255,255,0.05);
        border-radius: 0;
        width: 100%;
        margin-bottom: 0;
    }

    /* 7. ADVERTISE BUTTON ADJUSTMENT */
    #mobileMenu.collapsed .sidebar-item svg {
        width: 26px; /* Big, clear icons */
        height: 26px;
        stroke-width: 2px; /* Make lines slightly bolder if needed */
    }

    .search-label {
        display: block;
        font-size: 15px;
        font-weight: 600;
        color: var(--font-color); /* Utilise ta variable de couleur */
        line-height: 1; /* Évite les décalages verticaux */
    }

    /* Optionnel : Ajustement spécifique au bouton si besoin */
    #header .container .buttons .search button {
        padding-inline: 10px; /* Un peu d'espace sur les côtés */
    }

    .result-item img {
        margin: 0 15px !important;
    }
}

#mobileMenu.collapsed .sidebar-item svg {
    width: 24px;  /* Increase from 18px to 24px */
    height: 24px;
    transition: all 0.2s ease; /* Smooth size change */

    /* Optional: Add a subtle glow or color boost since they are the main focus now */
    opacity: 1;
}

/* Search Modal */


/* Espace entre le bouton recherche et le sélecteur de langue */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre les boutons */
}

/* Style de la modale <dialog> */
dialog.search-modal {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    padding: 0;
    width: 90%;
    max-width: 600px;
    background-color: #201234;
}

/* Fond sombre derrière la modale */
dialog.search-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* Container interne */
.search-container {
    display: flex;
    align-items: center;
    padding: 2.8rem;
    gap: 10px;
}

.search-box {
    flex-grow: 1;
}

.input-div {
    display: flex;
    align-items: center;
    background: #f3f4f6;
    border-radius: 6px;
    padding: 8px 12px;
}

.input-div input {
    border: none;
    background: transparent;
    width: 100%;
    margin-left: 10px;
    outline: none;
    font-size: 1rem;
}

.search-input-icon {
    width: 20px;
    height: 20px;
    color: #9ca3af;
}

.close-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
}

/* --- Conteneur principal --- */
#results-container {
    position: relative; /* Important: s'affiche sous l'input */
    width: 100%;
    max-height: 400px;
    z-index: 1000;
    display: none; /* Géré par JS */

    background-color: #1a1a1a; /* Gris très foncé (presque noir) */
    border: 1px solid #333;    /* Bordure subtile pour le contour */
    border-top: none;          /* Pas de bordure en haut (collé à la barre) */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8); /* Ombre portée forte */
    margin-top: 0;
    overflow: hidden; /* Important pour les coins arrondis */

}

/* --- Liste UL --- */
#results-container ul.search-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Label "MODELE" --- */
#results-container .label {
    display: block;
    margin: 15px 20px 5px 20px;
    font-size: 12px;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
}

/* --- Élément LI (Ligne de résultat) --- */
/* --- Liste des résultats (Desktop & Mobile) --- */

/* L'élément de liste (La ligne entière) */
.result-item {
    display: flex;          /* Active Flexbox */
    align-items: center;    /* Centre verticalement l'image et le texte */
    padding: 12px 20px;     /* Espace intérieur confortable */
    border-bottom: 1px solid #f0f0f0; /* Séparation subtile */
    cursor: pointer;

    background-color: #1a1a1a; /* Fond de base */
    border-bottom: 1px solid #2d2d2d; /* Séparation gris foncé */
    color: #e5e5e5; /* Texte blanc cassé */
    transition: all 0.2s ease;
}

.result-item:hover {
    background-color: #252525; /* Légèrement plus clair au survol */
    border-left: 3px solid #f6d878; /* Petite barre OR à gauche au survol (Luxe) */
    padding-left: 17px; /* On compense les 3px de bordure pour pas que ça bouge */
}

/* L'image (Avatar) */
.result-item img {
    width: 50px;        /* Largeur fixe */
    height: 50px;       /* Hauteur fixe */
    border-radius: 50%; /* Rond parfait */
    object-fit: cover;  /* CRUCIAL: Empêche l'image d'être écrasée si elle n'est pas carrée */
    margin : 0 15px !important; /* Espace entre image et texte */
    background-color: #eee; /* Fond gris si l'image charge mal */
    flex-shrink: 0;     /* Empêche l'image de rétrécir */
}

/* Le conteneur du texte */
.result-item .details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Nom du modèle */
.named {
    margin-bottom: 2px;

    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

/* Localisation */
.location {
    color: #999;
    font-size: 13px;
    font-weight: 400;
}

/* Le Label "MODELE" au dessus */
#results-container .label {
    font-weight: 800;
    letter-spacing: 1px;

    color: #888; /* Gris moyen */
    background-color: #1a1a1a;
    font-size: 10px;
    padding-top: 15px;
    margin-bottom: 5px;
    text-transform: uppercase;
    text-align: center;
}

/* --- Message alerte --- */
.alert.show {
    display: block;
    padding: 15px;
    text-align: center;
    color: #a00;
}

.search-container {
    position: relative; /* Important pour que le bouton se place par rapport à la boîte */
}

.close-search-btn {
    position: absolute;
    top: 15px;    /* Ajuste la hauteur */
    right: 15px;  /* Ajuste la position droite */
    background: transparent;
    border: none;
    cursor: pointer;
    color: #666; /* Gris foncé pour être visible sur le fond blanc */
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1010; /* Au-dessus de tout */
}

.close-search-btn:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Petit fond gris au survol */
    color: #000;
}

.close-search-btn svg {
    padding-left: 5px;
    width: 24px;
    height: 24px;
    color: #ebcd6c;
}

#results-container::-webkit-scrollbar {
    width: 6px;
}
#results-container::-webkit-scrollbar-track {
    background: #1a1a1a;
}
#results-container::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 10px;
}

@keyframes fadeInTooltip {
    to { opacity: 1; transform: translateY(-50%) translateX(15px); }
}

/* HIDE ON MOBILE */
@media (max-width: 1023px) {
    .collapse-btn {
        display: none; /* Don't show collapse button on mobile */
    }
}