/* ========== wwwroot/css/mobile-menu.css ========== */
/* ========================================
   OPTIMISATIONS MENU MOBILE
   Corrections pour am�liorer le comportement tactile
   ======================================== */

/* Pr�venir le zoom sur double-tap pour tous les �l�ments interactifs du menu */
.sidebar .nav-link,
.btn-menu,
.btn-close-sidebar,
.sidebar-overlay {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Optimisations tactiles pour les liens de navigation */
.sidebar .nav-link {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Am�lioration de la zone de clic sur mobile */
@media (max-width: 768px) {
    .sidebar .nav-link {
        min-height: 48px; /* Minimum recommand� pour le tactile */
        display: flex;
        align-items: center;
    }
    
    .btn-menu {
        min-height: 44px;
        min-width: 44px;
    }
    
    .btn-close-sidebar {
        min-height: 48px;
        min-width: 48px;
    }
}

@media (max-width: 576px) {
    .sidebar .nav-link {
        min-height: 44px;
    }
    
    .btn-menu {
        min-height: 40px;
        min-width: 40px;
    }
    
    .btn-close-sidebar {
        min-height: 44px;
        min-width: 44px;
    }
}

/* D�sactiver les effets hover sur les appareils tactiles */
@media (hover: none) and (pointer: coarse) {
    /* Remplacer hover par active sur tactile */
    .sidebar .nav-link:hover {
        transform: none;
        background: linear-gradient(90deg, 
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.02) 100%
        );
    }
    
    .sidebar .nav-link:active {
        transform: translateX(6px) scale(0.98);
        background: linear-gradient(90deg, 
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.18) 100%
        ) !important;
        transition: all 0.1s ease;
    }
    
    .sidebar .nav-link.active:active {
        transform: translateX(8px) scale(0.98);
    }
    
    /* Bouton menu tactile */
    .btn-menu:hover {
        transform: none;
    }
    
    .btn-menu:active {
        transform: scale(0.95);
        transition: all 0.1s ease;
    }
    
    /* Overlay - d�sactiver le curseur pointer */
    .sidebar-overlay {
        cursor: default;
    }
    
    /* Bouton fermeture tactile */
    .btn-close-sidebar:hover {
        transform: none;
    }
    
    .btn-close-sidebar:active {
        transform: scale(0.9) rotate(90deg);
        transition: all 0.1s ease;
    }
    
    /* Ic�nes - simplifier les effets sur mobile */
    .sidebar .nav-link:hover .bi {
        transform: none;
    }
    
    .sidebar .nav-link:active .bi {
        transform: scale(1.05);
    }
    
    /* Cat�gories - simplifier sur tactile */
    .sidebar .list-group-item:hover {
        transform: none;
    }
    
    .sidebar .list-group-item:active {
        transform: translateX(4px) scale(0.99);
        transition: all 0.1s ease;
    }
}

/* Emp�cher le scroll du body de mani�re plus robuste */
body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100vh !important;
}

/* Support sp�cifique pour iOS Safari */
@supports (-webkit-touch-callout: none) {
    body.menu-open {
        position: fixed !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100vh !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .sidebar .nav-scrollable {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Am�liorer le scrolling sur mobile */
.sidebar .nav-scrollable {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* �viter les probl�mes de s�lection de texte sur mobile */
.sidebar * {
    -webkit-touch-callout: none;
}

/* Permettre la s�lection uniquement pour le texte des liens */
.sidebar .nav-link span:not(.bi) {
    -webkit-touch-callout: default;
}

/* Feedback visuel instantan� sur tactile */
@media (hover: none) {
    .sidebar .nav-link:active {
        opacity: 0.8;
    }
    
    .btn-menu:active {
        opacity: 0.9;
    }
    
    .btn-close-sidebar:active {
        opacity: 0.8;
    }
}

/* Pr�venir les probl�mes de double-tap to zoom */
button, a {
    touch-action: manipulation;
}

/* Am�lioration de la performance sur mobile */
.sidebar,
.sidebar-overlay,
.btn-close-sidebar {
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Optimisation de la transition pour mobile */
@media (max-width: 768px) {
    .sidebar {
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .sidebar-overlay {
        animation-duration: 0.3s;
    }
}

/* Fix pour le gap entre overlay et sidebar sur certains mobiles */
@media (max-width: 768px) {
    .sidebar-overlay {
        left: 0 !important;
        width: 100% !important;
    }
}

/* Am�lioration du bouton de fermeture sur petits �crans */
@media (max-width: 400px) {
    .btn-close-sidebar {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Garantir que les clics fonctionnent bien */
.sidebar .nav-link,
.btn-menu,
.btn-close-sidebar,
.sidebar-overlay {
    pointer-events: auto;
    cursor: pointer;
}

/* Fix pour les appareils avec notch (iPhone X+) */
@supports (padding: max(0px)) {
    .sidebar {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .sidebar .nav-scrollable {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* ========== wwwroot/css/mobile-fixes.css ========== */
/* ========================================
   FIXES POUR LE RESPONSIVE MOBILE
   Corrections pour emp�cher le d�calage horizontal
   ======================================== */

/* Emp�cher tout d�passement horizontal global */
html {
    overflow-x: hidden !important;
    max-width: 100vw;
    position: relative;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw;
    position: relative;
}

/* Assurer que tous les containers ne d�passent pas */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 100% !important;
    overflow-x: hidden;
}

/* Emp�cher les rows de d�passer */
.row {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Corrections sp�cifiques pour mobile */
@media (max-width: 767.98px) {
    /* Assurer que le body ne bouge pas */
    body {
        position: relative;
        min-height: 100vh;
    }

    /* Correction pour le wrapper principal */
    .wrapper-container,
    .page,
    main {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Correction pour le content */
    .content {
        width: calc(100% - 2rem);
        max-width: 100%;
        margin-left: 1rem;
        margin-right: 1rem;
        overflow-x: hidden;
    }

    /* Correction pour le top-row - LAYOUT avec flex-wrap */
    .top-row {
        width: 100%;
        max-width: 100vw;
        padding: 1rem !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        height: auto !important;
        min-height: auto !important;
        gap: 0.5rem !important;
    }

    /* Ligne 1: Logo - 100% de la largeur */
    .top-row .header-logo-group {
        width: 100% !important;
        flex: 0 0 100% !important;
        justify-content: center !important;
        order: 1 !important;
        margin-bottom: 0.25rem;
    }

    /* Ligne 2: Boutons de navigation - 100% de la largeur */
    .top-row .header-actions-group {
        width: 100% !important;
        flex: 0 0 100% !important;
        display: flex !important;
        justify-content: center !important;
        order: 2 !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem;
    }

    /* Ligne 3: Cat�gories � gauche - largeur r�duite pour laisser plus de place � la recherche */
    .top-row .categories-button-wrapper {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 30% !important;
        display: flex !important;
        order: 3 !important;
        margin: 0 0.5rem 0 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Ligne 3: Recherche � droite - prend plus d'espace (70%) */
    .top-row .header-search-container {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(70% - 0.5rem) !important;
        display: flex !important;
        order: 3 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Forcer le formulaire de recherche � prendre toute la largeur */
    .top-row .header-search-container .header-search-form {
        width: 100% !important;
        flex: 1 !important;
    }

    /* Ajuster l'input de recherche */
    .top-row .header-search-container .header-search-input {
        width: 100% !important;
    }

    /* Ajuster la taille du logo */
    .brand-title {
        font-size: 1.4rem !important;
        text-align: center;
    }

    /* Masquer compl�tement le bouton de fermeture de la sidebar quand elle est ferm�e */
    .btn-close-sidebar {
        display: none;
    }

    .sidebar.open ~ .btn-close-sidebar {
        display: flex;
    }

    /* Assurer que les �l�ments fixed ne d�passent pas */
    .search-chatbox-button,
    .theme-selector-button {
        right: 1rem;
    }

    /* Correction pour les cartes et grilles */
    .card,
    .category-card,
    .product-card {
        max-width: 100%;
        overflow: hidden;
    }

    /* Correction pour les images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Correction pour les grilles */
    .details-grid,
    .categories-grid,
    .product-grid {
        max-width: 100%;
        overflow: hidden;
    }

    /* Correction pour les colonnes */
    [class*="col-"] {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Correction pour le carousel */
    .carousel,
    .carousel-inner,
    .carousel-item {
        max-width: 100%;
        overflow: hidden;
    }

    /* Correction pour les modals */
    .modal-dialog {
        max-width: calc(100vw - 2rem);
        margin: 1rem;
    }

    /* Correction pour les dropdowns */
    .dropdown-menu {
        max-width: calc(100vw - 2rem);
    }

    /* S'assurer que le dropdown des cat�gories s'affiche correctement */
    .categories-dropdown-menu {
        z-index: 9999 !important;
        position: fixed !important;
    }
}

/* Corrections pour les tr�s petits �crans */
@media (max-width: 575.98px) {
    .content {
        width: calc(100% - 1rem);
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding: 1rem;
    }

    .top-row {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .search-chatbox-button,
    .theme-selector-button {
        right: 0.75rem;
    }

    /* R�duire les gaps et paddings pour les petits �crans */
    .gap-2 {
        gap: 0.5rem !important;
    }

    .gap-3 {
        gap: 0.75rem !important;
    }

    .px-3 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Correction pour les �l�ments qui utilisent calc() */
@media (max-width: 767.98px) {
    [style*="width: calc"] {
        max-width: 100vw;
    }
}

/* D�sactiver les animations qui causent des probl�mes sur mobile */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Correction pour le scroll horizontal forc� */
@media (max-width: 767.98px) {
    /* Emp�cher tout scroll horizontal */
    * {
        max-width: 100vw;
    }

    /* Exceptions pour les �l�ments qui ont besoin de d�border */
    .sidebar,
    .btn-close-sidebar,
    .sidebar-overlay,
    .search-chatbox-overlay,
    .categories-dropdown-overlay,
    .theme-selector-overlay,
    .header-search-overlay {
        max-width: none;
    }
    
    /* S'assurer que la barre de recherche reste au-dessus de l'overlay */
    .header-search-container {
        z-index: 1070 !important;
    }
    
    .header-search-form {
        z-index: 1075 !important;
    }
}