/* ============================================================================
   MOBILE.CSS - Refonte complète du UI mobile pour Market Research App
   Architecture: Mobile-First avec breakpoints progressifs
   Design: Noir & Blanc épuré, tactile-friendly
   ============================================================================ */

/* ============================================================================
   VARIABLES CSS POUR MOBILE
   ============================================================================ */
:root {
    /* Espacements mobiles */
    --mobile-padding-xs: 10px;
    --mobile-padding-sm: 15px;
    --mobile-padding-md: 20px;

    /* Tailles de police mobiles */
    --mobile-font-xs: 11px;
    --mobile-font-sm: 13px;
    --mobile-font-md: 15px;
    --mobile-font-lg: 18px;
    --mobile-font-xl: 22px;

    /* Tailles tactiles minimales */
    --touch-target-min: 44px;

    /* Transitions */
    --mobile-transition: 0.3s ease;
}

/* ============================================================================
   RÈGLES GLOBALES - Toutes résolutions
   ============================================================================ */
/* Cacher complètement la sidebar sur les pages login/register */
body[data-page="login"] .sidebar,
body[data-page="register"] .sidebar {
    display: none !important;
}

/* Ajuster le layout quand la sidebar est cachée */
body[data-page="login"] .main-content,
body[data-page="register"] .main-content {
    margin-left: 0 !important;
    width: 100% !important;
}

/* ============================================================================
   MEDIA QUERY: TABLETTES (< 1024px)
   ============================================================================ */
@media (max-width: 1024px) {
    /* Réduction des grids à 2 colonnes */
    .stats-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .search-cards {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 20px !important;
    }

    /* Padding réduit */
    .analytics-main,
    .dashboard-main {
        padding: 20px !important;
    }
}

/* ============================================================================
   MEDIA QUERY: MOBILES STANDARDS (< 768px)
   ============================================================================ */
@media (max-width: 768px) {

    /* ========================================================================
       RESET & BASE STYLES
       ======================================================================== */
    body {
        font-size: var(--mobile-font-md) !important;
        overflow-x: hidden !important;
    }

    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* ========================================================================
       LAYOUT PRINCIPAL
       ======================================================================== */
    .layout {
        flex-direction: column !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-bottom: 70px !important; /* Espace pour la navbar bottom */
    }

    .content-wrapper {
        padding: var(--mobile-padding-sm) !important;
    }

    /* ========================================================================
       NAVIGATION MOBILE - BOTTOM NAVBAR (comme les apps mobiles)
       ======================================================================== */

    /* Cacher hamburger - pas besoin avec bottom navbar */
    .mobile-menu-toggle {
        display: none !important;
    }

    /* IMPORTANT: Override border-left du desktop sur tous les éléments actifs */
    .sidebar .active a,
    .sidebar .active > a,
    .sidebar li.active a,
    .sidebar li.active > a,
    .sidebar-nav > ul > li.active > a,
    .sidebar-nav ul li.active a,
    .sidebar .sidebar-nav .active a,
    li.active a {
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        border: none !important;
    }

    /* Sidebar transformée en bottom navbar - Style Liquid Glass Apple */
    .sidebar {
        position: fixed !important;
        bottom: 12px !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        width: fit-content !important;
        max-width: calc(100vw - 24px) !important; /* S'adapte à la largeur de l'écran avec marges */
        min-width: 180px !important; /* Largeur minimale pour dashboard avec 2 boutons */
        height: auto !important;
        margin: 0 !important;

        /* Liquid Glass Effect */
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

        /* Bordure et ombre style Apple */
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 20px !important;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.08),
            0 2px 8px rgba(0, 0, 0, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;

        z-index: 1000 !important;
        overflow: visible !important;
        padding: 6px !important;

        /* Animation d'apparition */
        animation: slideUpFade 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    /* Sur dashboard: largeur ajustée pour 2 boutons */
    body[data-page="dashboard"] .sidebar {
        min-width: 160px !important;
    }

    /* Sur login/register : cacher complètement la sidebar mobile et desktop */
    body[data-page="login"] .sidebar,
    body[data-page="register"] .sidebar {
        display: none !important;
    }

    /* Animation d'apparition smooth */
    @keyframes slideUpFade {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Cacher le logo sur mobile */
    .sidebar-logo {
        display: none !important;
    }

    /* Navigation horizontale */
    .sidebar-nav {
        width: fit-content !important;
    }

    .sidebar-nav > ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    .sidebar-nav > ul > li {
        flex: 0 0 auto !important;
        max-width: 70px !important;
        min-width: 60px !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* ========================================================================
       NAVIGATION CONTEXTUELLE SELON LA PAGE
       ======================================================================== */

    /* Par défaut : cacher le lien Search parent, cacher submenu */
    .sidebar-nav > ul > li.has-submenu > a {
        display: none !important;
    }

    .sidebar-nav > ul > li.has-submenu .submenu {
        display: none !important;
    }

    .sidebar-nav > ul > li.has-submenu {
        flex: 0 0 auto !important;
        max-width: 70px !important;
        min-width: 60px !important;
    }

    /* Dashboard : afficher le lien Search parent, cacher submenu Analytics/Trends */
    body[data-page="dashboard"] .sidebar-nav > ul > li.has-submenu > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 4px !important;
        min-height: 52px !important;
        font-size: var(--mobile-font-xs) !important;
        font-weight: 600 !important;
        color: #666666 !important;
        border: none !important;
        border-radius: 14px !important;
        background-color: transparent !important;
        gap: 3px !important;
        transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    body[data-page="dashboard"] .sidebar-nav > ul > li.has-submenu > a .nav-icon {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
    }

    body[data-page="dashboard"] .sidebar-nav > ul > li.has-submenu > a span {
        display: block !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        opacity: 0.8 !important;
    }

    body[data-page="dashboard"] .sidebar-nav > ul > li.has-submenu .submenu {
        display: none !important;
    }

    body[data-page="dashboard"] .sidebar-nav > ul > li.has-submenu {
        flex: 0 0 auto !important;
        max-width: 70px !important;
        min-width: 60px !important;
    }

    /* Search/Analytics/Trends : cacher Search parent, afficher submenu inline */
    body[data-page="search"] .sidebar-nav > ul > li.has-submenu > a,
    body[data-page="analytics"] .sidebar-nav > ul > li.has-submenu > a,
    body[data-page="trends"] .sidebar-nav > ul > li.has-submenu > a {
        display: none !important;
    }

    body[data-page="search"] .sidebar-nav > ul > li.has-submenu .submenu,
    body[data-page="analytics"] .sidebar-nav > ul > li.has-submenu .submenu,
    body[data-page="trends"] .sidebar-nav > ul > li.has-submenu .submenu {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        max-height: none !important;
        background: none !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        gap: 4px !important;
    }

    body[data-page="search"] .sidebar-nav > ul > li.has-submenu,
    body[data-page="analytics"] .sidebar-nav > ul > li.has-submenu,
    body[data-page="trends"] .sidebar-nav > ul > li.has-submenu {
        display: flex !important;
        flex: 0 0 auto !important;
        max-width: fit-content !important;
        min-width: auto !important;
    }

    .sidebar-nav > ul > li.has-submenu .submenu li {
        flex: 0 0 auto !important;
        max-width: 70px !important;
        min-width: 60px !important;
        margin: 0 !important;
        border: none !important;
    }

    .sidebar-nav > ul > li.has-submenu .submenu a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 4px !important;
        min-height: 52px !important;
        font-size: var(--mobile-font-xs) !important;
        font-weight: 600 !important;
        color: #666666 !important;
        border: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-radius: 14px !important;
        background-color: transparent !important;
        gap: 3px !important;
        transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    .sidebar-nav > ul > li.has-submenu .submenu a .nav-icon {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    .sidebar-nav > ul > li.has-submenu .submenu a span {
        display: block !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        opacity: 0.8 !important;
        transition: all 0.3s ease !important;
    }

    .sidebar-nav > ul > li.has-submenu .submenu a::before {
        display: none !important;
    }

    .sidebar-nav > ul > li.has-submenu .submenu li.active a {
        color: #000000 !important;
        background: rgba(0, 0, 0, 0.08) !important;
        backdrop-filter: blur(10px) !important;
        border: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
        font-weight: 700 !important;
        transform: scale(1.05) !important;
    }

    .sidebar-nav > ul > li.has-submenu .submenu li.active a span {
        opacity: 1 !important;
    }

    .sidebar-nav > ul > li.has-submenu .submenu li.active a .nav-icon {
        transform: scale(1.1) !important;
    }

    .sidebar-nav > ul > li.has-submenu .submenu a:active {
        transform: scale(0.92) !important;
        background: rgba(0, 0, 0, 0.05) !important;
    }

    /* Override ABSOLU de tous les borders - Approche wildcard pour forcer */
    .sidebar *,
    .sidebar a,
    .sidebar li,
    .sidebar li a,
    .sidebar li.active,
    .sidebar li.active a,
    .sidebar li.active > a,
    .sidebar-nav *,
    .sidebar-nav a,
    .sidebar-nav li,
    .sidebar-nav li a,
    .sidebar-nav li.active,
    .sidebar-nav li.active a,
    .sidebar-nav li.active > a,
    .sidebar-nav ul li.active,
    .sidebar-nav ul li.active a,
    .sidebar-nav ul li.active > a,
    .sidebar-nav > ul > li.active,
    .sidebar-nav > ul > li.active a,
    .sidebar-nav > ul > li.active > a,
    .submenu,
    .submenu *,
    .submenu a,
    .submenu li,
    .submenu li a,
    .submenu a.active,
    .submenu li a.active,
    .submenu li.active,
    .submenu li.active a {
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    .sidebar-nav > ul > li > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 4px !important; /* Réduire le padding horizontal */
        min-height: 52px !important;
        font-size: var(--mobile-font-xs) !important;
        font-weight: 600 !important;
        color: #666666 !important;
        border: none !important;
        border-radius: 14px !important;
        background-color: transparent !important;
        gap: 3px !important;
        position: relative !important;

        /* Transitions fluides style Apple */
        transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        transform: scale(1) !important;
    }

    /* Icônes réduites */
    .sidebar-nav > ul > li > a .nav-icon {
        width: 20px !important; /* Réduire encore les icônes */
        height: 20px !important;
        margin: 0 !important;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    /* Texte plus petit */
    .sidebar-nav > ul > li > a span {
        display: block !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        transition: all 0.3s ease !important;
        opacity: 0.8 !important;
    }

    /* État actif - Pill style Apple avec animation */
    .sidebar-nav > ul > li.active > a {
        color: #000000 !important;
        background: rgba(0, 0, 0, 0.08) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
        font-weight: 700 !important;
        transform: scale(1.05) !important;
    }

    /* Override desktop border-left sur élément actif */
    .sidebar .active a {
        border-left: none !important;
        border-right: none !important;
    }

    .sidebar-nav > ul > li.active > a span {
        opacity: 1 !important;
    }

    .sidebar-nav > ul > li.active > a .nav-icon {
        transform: scale(1.1) !important;
    }

    /* Hover/Active tactile avec bounce */
    .sidebar-nav > ul > li > a:active {
        transform: scale(0.92) !important;
        background: rgba(0, 0, 0, 0.05) !important;
        transition: all 0.1s ease !important;
    }

    .sidebar-nav > ul > li > a:active .nav-icon {
        transform: scale(0.95) !important;
    }

    /* Submenu - Style Liquid Glass popup */
    .submenu {
        position: fixed !important;
        bottom: 92px !important; /* Au-dessus de la navbar */
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        max-height: 0 !important;

        /* Liquid Glass Effect */
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

        /* Style Apple */
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 20px !important;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.12),
            0 2px 8px rgba(0, 0, 0, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

        overflow: hidden !important;
        padding: 0 !important;
        z-index: 999 !important;

        /* Animation smooth */
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        opacity: 0 !important;
        transform: translateY(10px) scale(0.95) !important;
    }

    .submenu.show {
        max-height: 220px !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        padding: 8px !important;
    }

    .submenu li {
        width: 100% !important;
        border-bottom: none !important;
        margin-bottom: 4px !important;
    }

    .submenu li:last-child {
        margin-bottom: 0 !important;
    }

    .submenu a {
        display: flex !important;
        align-items: center !important;
        padding: 14px 18px !important;
        min-height: 52px !important;
        font-size: var(--mobile-font-sm) !important;
        color: #000000 !important;
        font-weight: 600 !important;
        gap: 12px !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 14px !important;

        /* Transition smooth */
        transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    .submenu a .nav-icon {
        width: 22px !important;
        height: 22px !important;
        transition: transform 0.25s ease !important;
    }

    .submenu a:active {
        background: rgba(0, 0, 0, 0.08) !important;
        transform: scale(0.96) !important;
    }

    .submenu a:active .nav-icon {
        transform: scale(0.92) !important;
    }

    .submenu a::before {
        display: none !important;
    }

    /* Scrollbar style Apple pour submenu */
    .submenu::-webkit-scrollbar {
        width: 4px !important;
    }

    .submenu::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .submenu::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 10px !important;
    }

    /* Overlay pas nécessaire avec bottom navbar */
    .mobile-menu-overlay {
        display: none !important;
    }

    /* ========================================================================
       HEADER MOBILE - Style Liquid Glass identique au Bottom Navbar
       ======================================================================== */
    .top-bar {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        transform: none !important;
        width: fit-content !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        padding: 6px 16px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        /* Liquid Glass Effect - Identique au bottom navbar */
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

        /* Bordure et ombre style Apple - Identique */
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 20px !important;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.08),
            0 2px 8px rgba(0, 0, 0, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;

        z-index: 1001 !important;
    }

    /* Cacher complètement le top-bar sur login/register */
    body[data-page="login"] .top-bar,
    body[data-page="register"] .top-bar {
        display: none !important;
    }

    .top-bar .mobile-logo {
        display: none !important;
    }

    .user-profile {
        display: flex !important;
    }

    .profile-dropdown {
        position: relative !important;
    }

    /* Avatar - Style cohérent avec la navbar */
    .profile-btn {
        padding: 4px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        min-width: auto !important;
        gap: 0 !important;
    }

    .profile-btn:active {
        transform: scale(0.92) !important;
        background: rgba(0, 0, 0, 0.05) !important;
    }

    .profile-chevron {
        display: none !important;
    }

    .profile-info {
        display: none !important;
    }

    .profile-avatar {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: #000000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    .avatar-initial {
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* Espace pour le header fixe */
    .main-content {
        padding-top: 68px !important;
    }

    /* Pas d'espace en haut sur login/register (pas de header) */
    body[data-page="login"] .main-content,
    body[data-page="register"] .main-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 100vh !important;
        overflow: visible !important;
    }

    /* Le contenu auth doit pouvoir scroller */
    body[data-page="login"] .content-wrapper,
    body[data-page="register"] .content-wrapper {
        min-height: 100vh !important;
        height: auto !important;
        overflow-y: visible !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 20px !important;
        padding-bottom: 100px !important;
    }

    /* Fond transparent derrière le menu sur login/register - spécificité maximale */
    body[data-page="login"] .content-wrapper .auth-container,
    body[data-page="register"] .content-wrapper .auth-container {
        background-color: transparent !important;
        min-height: auto !important;
        padding: 0 15px !important;
    }

    /* Overlay flou derrière le menu profil */
    .profile-menu::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        z-index: -1 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        pointer-events: none !important;
    }

    .profile-menu.show::before {
        opacity: 1 !important;
    }

    /* Menu profil - Style Liquid Glass cohérent */
    .profile-menu {
        position: fixed !important;
        top: 70px !important;
        right: 12px !important;
        width: 280px !important;
        max-width: calc(100vw - 24px) !important;

        /* Liquid Glass Effect - Cohérent avec navbar */
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

        /* Bordure et ombre - Cohérent */
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 20px !important;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.12),
            0 2px 8px rgba(0, 0, 0, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;

        opacity: 0 !important;
        transform: translateY(-10px) scale(0.95) !important;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        pointer-events: none !important;
        overflow: hidden !important;
        z-index: 1002 !important;
    }

    .profile-menu.show {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: all !important;
    }

    .profile-menu-header {
        padding: 18px !important;
        background: rgba(0, 0, 0, 0.02) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .profile-avatar-large {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: #000000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
    }

    .avatar-initial-large {
        color: #ffffff !important;
        font-size: 20px !important;
        font-weight: 600 !important;
    }

    .profile-username {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        margin-bottom: 3px !important;
    }

    .profile-email {
        font-size: 12px !important;
        color: #666666 !important;
    }

    .profile-menu-divider {
        display: none !important;
    }

    .profile-menu-items {
        padding: 8px !important;
    }

    .profile-menu-item {
        padding: 12px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-radius: 14px !important;
        transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        color: #000000 !important;
        margin-bottom: 2px !important;
    }

    .profile-menu-item:active {
        background: rgba(0, 0, 0, 0.05) !important;
        transform: scale(0.97) !important;
    }

    .profile-menu-item svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Boutons auth - Toujours cachés dans la sidebar mobile (même sur login/register) */
    .sidebar .auth-buttons {
        display: none !important;
    }

    body[data-page="login"] .sidebar .auth-buttons,
    body[data-page="register"] .sidebar .auth-buttons {
        display: none !important;
    }


    /* Boutons auth dans top-bar - cachés sur mobile */
    .top-bar .auth-buttons {
        display: none !important;
    }

    /* ========================================================================
       GRIDS & LAYOUTS
       ======================================================================== */

    /* Stats container - 1 colonne */
    .stats-container {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-bottom: 25px !important;
    }

    .stat-card {
        padding: 18px !important;
        border: 1px solid #000000 !important;
    }

    .stat-card:hover {
        transform: none !important; /* Pas de hover sur mobile */
    }

    .main-price-card {
        transform: none !important;
        order: -1; /* Prix moyen en premier */
    }

    .stat-card-header {
        font-size: var(--mobile-font-sm) !important;
    }

    .value {
        font-size: var(--mobile-font-xl) !important;
    }

    .main-price .value {
        font-size: 24px !important;
    }

    /* Search cards - 1 colonne */
    .search-cards {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .search-card {
        padding: 18px !important;
        border: 1px solid #000000 !important;
    }

    .search-card h3 {
        font-size: var(--mobile-font-lg) !important;
        margin-bottom: 8px !important;
    }

    .search-date {
        font-size: var(--mobile-font-xs) !important;
    }

    /* Chart row - 1 colonne */
    .chart-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Chart containers */
    .chart-container,
    .reviews-chart-container {
        padding: 18px !important;
        border: 1px solid #000000 !important;
        margin-bottom: 20px !important;
    }

    .chart-title {
        font-size: var(--mobile-font-md) !important;
        padding-bottom: 8px !important;
        margin-bottom: 15px !important;
    }

    .section-title {
        font-size: var(--mobile-font-lg) !important;
        margin: 20px 0 15px 0 !important;
    }

    /* ========================================================================
       TABLEAUX RESPONSIVE
       ======================================================================== */

    /* Mode carte empilée pour les tableaux */
    .price-data-table,
    .price-chart-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .table-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 15px !important;
        text-align: left !important;
    }

    .table-row.header-row {
        display: none !important; /* Cacher header sur mobile */
    }

    .cell::before {
        content: attr(data-label);
        font-weight: 700;
        display: inline-block;
        width: 120px;
        color: #666666;
        font-size: var(--mobile-font-xs);
        text-transform: uppercase;
    }

    /* Price bars mobile */
    .price-bar-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 15px 12px !important;
        font-size: var(--mobile-font-sm) !important;
    }

    .vendor-name,
    .price-value,
    .price-diff {
        margin-bottom: 5px !important;
    }

    .bar-container {
        height: 16px !important;
        margin: 10px 0 !important;
    }

    /* Shop analysis table */
    .shop-analysis-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border: 1px solid #000000 !important;
    }

    .shop-analysis-table thead {
        display: none !important;
    }

    .shop-analysis-table tbody {
        display: block !important;
    }

    .shop-analysis-table tr {
        display: block !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
    }

    .shop-analysis-table td {
        display: block !important;
        padding: 8px 0 !important;
        text-align: left !important;
        border: none !important;
        font-size: var(--mobile-font-sm) !important;
    }

    .shop-analysis-table td::before {
        content: attr(data-label);
        font-weight: 700;
        display: inline-block;
        width: 120px;
        color: #666666;
        font-size: var(--mobile-font-xs);
        text-transform: uppercase;
    }

    /* ========================================================================
       ACTIONS & BOUTONS
       ======================================================================== */
    .card-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .card-action-btn,
    .view-btn,
    .pdf-btn,
    .delete-btn,
    .primary-btn,
    .secondary-btn {
        width: 100% !important;
        min-height: var(--touch-target-min) !important;
        padding: 12px 20px !important;
        font-size: var(--mobile-font-sm) !important;
        text-align: center !important;
        border: 1px solid #000000 !important;
    }

    /* Suppression des effets hover sur mobile */
    .card-action-btn:hover,
    .view-btn:hover,
    .pdf-btn:hover,
    .primary-btn:hover,
    .secondary-btn:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Effets :active pour feedback tactile */
    .card-action-btn:active,
    .view-btn:active {
        background-color: #333333 !important;
        opacity: 0.9;
    }

    .primary-btn:active {
        opacity: 0.8;
    }

    .secondary-btn:active {
        background-color: #e8e8e8 !important;
    }

    /* Delete button - croix petite et discrète */
    .search-card .delete-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 28px !important;
        height: 28px !important;
        min-height: auto !important;
        padding: 0 !important;
        background-color: transparent !important;
        border: 1px solid #cccccc !important;
        border-radius: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .search-card .delete-btn .delete-icon {
        font-size: 16px !important;
        font-weight: 300 !important;
        line-height: 1 !important;
        color: #999999 !important;
    }

    .search-card .delete-btn:active {
        background-color: #f5f5f5 !important;
        border-color: #000000 !important;
    }

    .search-card .delete-btn:active .delete-icon {
        color: #000000 !important;
    }

    /* Bouton delete all du header */
    .delete-all-btn {
        padding: 8px 14px !important;
        font-size: var(--mobile-font-xs) !important;
        min-height: auto !important;
    }

    /* Dashboard links */
    .dashboard-links {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ========================================================================
       TYPOGRAPHIE MOBILE
       ======================================================================== */
    h1 {
        font-size: var(--mobile-font-xl) !important;
    }

    h2 {
        font-size: var(--mobile-font-lg) !important;
    }

    h3 {
        font-size: var(--mobile-font-md) !important;
    }

    .dashboard-header h2 {
        font-size: var(--mobile-font-lg) !important;
    }

    .search-title {
        font-size: var(--mobile-font-xl) !important;
    }

    .search-subtitle {
        font-size: var(--mobile-font-sm) !important;
    }

    /* ========================================================================
       SCORES & METRICS
       ======================================================================== */
    .score-summary {
        padding: 12px !important;
        margin-bottom: 15px !important;
    }

    .score-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        margin-bottom: 12px !important;
    }

    .score-label {
        font-size: var(--mobile-font-sm) !important;
    }

    .score-value {
        font-size: var(--mobile-font-lg) !important;
    }

    .progress-bar {
        height: 10px !important;
        border: 1px solid #000000 !important;
    }

    .score-description {
        font-size: var(--mobile-font-xs) !important;
        line-height: 1.5 !important;
    }

    /* Reviews stats */
    .reviews-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .stat-item {
        padding: 12px !important;
    }

    .stat-value {
        font-size: var(--mobile-font-xl) !important;
    }

    .stat-label {
        font-size: var(--mobile-font-xs) !important;
    }

    /* Rating bars */
    .rating-bar {
        gap: 8px !important;
        font-size: var(--mobile-font-sm) !important;
    }

    .rating-label {
        width: 50px !important;
    }

    .rating-progress {
        height: 10px !important;
    }

    /* ========================================================================
       EMPTY STATES
       ======================================================================== */
    .empty-state {
        padding: 40px 20px !important;
    }

    .empty-state p {
        font-size: var(--mobile-font-sm) !important;
        max-width: 100% !important;
    }

    /* ========================================================================
       ANIMATIONS & LOADING
       ======================================================================== */
    .loading-overlay {
        padding: var(--mobile-padding-sm) !important;
    }

    .loading-content {
        padding: 25px !important;
        max-width: 100% !important;
    }

    .loading-title {
        font-size: var(--mobile-font-lg) !important;
        margin-bottom: 20px !important;
    }

    .steps-container {
        max-width: 100% !important;
    }

    .step {
        padding: 12px !important;
        margin-bottom: 15px !important;
    }

    .step-info {
        font-size: var(--mobile-font-sm) !important;
    }

    .step-label {
        font-size: var(--mobile-font-sm) !important;
    }

    .time-remaining {
        font-size: var(--mobile-font-xs) !important;
    }
}

/* ============================================================================
   MEDIA QUERY: PETITS MOBILES (< 480px)
   ============================================================================ */
@media (max-width: 480px) {
    /* Réduction supplémentaire des espacements */
    .analytics-main,
    .dashboard-main {
        padding: 12px !important;
    }

    .content-wrapper {
        padding: 10px !important;
    }

    /* Font sizes encore plus petites */
    :root {
        --mobile-font-xs: 10px;
        --mobile-font-sm: 12px;
        --mobile-font-md: 14px;
        --mobile-font-lg: 16px;
        --mobile-font-xl: 20px;
    }

    /* Stats cards */
    .stat-card {
        padding: 15px !important;
    }

    .value {
        font-size: 20px !important;
    }

    /* Search cards */
    .search-card {
        padding: 15px !important;
    }

    /* Chart containers */
    .chart-container,
    .reviews-chart-container {
        padding: 15px !important;
    }

    /* Sidebar mobile plus étroite */
    .sidebar {
        width: 260px !important;
    }

    /* Profile menu items */
    .profile-menu-item {
        padding: 16px 20px !important;
    }
}

/* ============================================================================
   MEDIA QUERY: ORIENTATION PAYSAGE (< 768px)
   ============================================================================ */
@media (max-width: 768px) and (orientation: landscape) {
    /* Réduction de la hauteur du top bar */
    .top-bar {
        padding: 8px 15px !important;
    }

    /* Stats en 2 colonnes en paysage */
    .stats-container {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Sidebar prend moins de hauteur */
    .sidebar {
        height: 100vh !important;
        overflow-y: auto !important;
    }

    /* Réduction des padding verticaux */
    .analytics-main,
    .dashboard-main {
        padding: 15px 20px !important;
    }

    /* Charts plus compacts */
    .chart-container,
    .reviews-chart-container {
        padding: 15px !important;
    }
}

/* ============================================================================
   UTILITIES MOBILE
   ============================================================================ */
@media (max-width: 768px) {
    /* Classe pour cacher sur mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Classe pour afficher uniquement sur mobile */
    .show-mobile {
        display: block !important;
    }

    /* Texte centré sur mobile */
    .mobile-center {
        text-align: center !important;
    }

    /* Full width sur mobile */
    .mobile-full-width {
        width: 100% !important;
    }

    /* Scroll horizontal smooth */
    .mobile-scroll-x {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Désactiver sélection de texte sur éléments tactiles */
    button,
    .card-action-btn,
    .mobile-menu-toggle {
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    /* ========================================================================
       INTERFACE ADMINISTRATION MOBILE
       ======================================================================== */
    .admin-container {
        padding: 15px !important;
    }

    .admin-card {
        margin: 20px 0 !important;
        border-radius: 12px !important;
        border: 1px solid #000000 !important;
    }

    .admin-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 20px 15px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .admin-header h4 {
        font-size: 18px !important;
    }

    .admin-badge {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    .admin-alert {
        margin: 15px !important;
        padding: 12px 15px !important;
        font-size: var(--mobile-font-sm) !important;
    }

    /* Tableau admin en mode carte */
    .admin-table {
        display: block !important;
        border: none !important;
    }

    .admin-table thead {
        display: none !important;
    }

    .admin-table tbody {
        display: block !important;
    }

    .admin-table tr {
        display: block !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
        border: 1px solid #000000 !important;
        border-radius: 12px !important;
        background-color: #ffffff !important;
    }

    .admin-table td {
        display: block !important;
        padding: 10px 0 !important;
        border: none !important;
        text-align: left !important;
    }

    .admin-table td::before {
        content: attr(data-label);
        font-weight: 700;
        display: block;
        margin-bottom: 5px;
        color: #666666;
        font-size: var(--mobile-font-xs);
        text-transform: uppercase;
    }

    /* Inputs et selects */
    .admin-input,
    .admin-select {
        font-size: var(--mobile-font-sm) !important;
        padding: 10px !important;
        min-height: var(--touch-target-min) !important;
    }

    /* Switch plus grand pour mobile */
    .admin-switch input[type="checkbox"] {
        width: 50px !important;
        height: 28px !important;
    }

    .admin-switch input[type="checkbox"]::before {
        width: 24px !important;
        height: 24px !important;
    }

    .admin-switch input[type="checkbox"]:checked::before {
        transform: translateX(22px) !important;
    }

    /* Badges status */
    .admin-badge-status {
        font-size: var(--mobile-font-xs) !important;
        padding: 6px 10px !important;
    }
}