/* ====================================
   OPTIMISATION MOBILE - PHASE 1
   Styles spécifiques pour mobile/touch
   ==================================== */

/* Détection mobile */
@media (max-width: 768px) {
    body.mobile-optimized {
        /* Prévenir zoom non désiré */
        touch-action: manipulation;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Cartes optimisées pour touch */
    .component-card,
    .config-card,
    .choice-card {
        min-height: 80px !important;
        padding: 1.5rem !important;
        touch-action: manipulation;
    }
    
    /* Boutons touch-friendly */
    button,
    .btn,
    a[role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 16px !important; /* Prévenir zoom iOS */
    }
    
    /* Formulaires optimisés */
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prévenir zoom iOS */
        min-height: 44px;
        padding: 0.75rem;
    }
    
    /* Modals optimisés */
    .modal,
    [style*="position: fixed"] {
        max-height: 90vh !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .modal.active {
        transform: translateY(0);
    }
    
    /* Bottom sheets */
    .mobile-bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(30, 41, 59, 0.98);
        backdrop-filter: blur(10px);
        border-radius: 1.5rem 1.5rem 0 0;
        max-height: 90vh;
        overflow-y: auto;
        z-index: 10000;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    }
    
    .mobile-bottom-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
        z-index: 9999;
    }
    
    /* Navigation améliorée */
    .nav-mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(30, 41, 59, 0.95);
        backdrop-filter: blur(10px);
        padding: 1rem;
        border-top: 1px solid rgba(59, 130, 246, 0.2);
        z-index: 1000;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    /* Espacement pour navigation mobile */
    body.mobile-optimized main {
        padding-bottom: 80px;
    }
    
    /* Amélioration scroll sur mobile */
    .component-list,
    .config-result,
    .comparison-container {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* Prévenir pull-to-refresh sur certaines zones */
    .config-result,
    .component-list {
        overscroll-behavior-y: contain;
    }
    
    /* Feedback visuel touch amélioré */
    .component-card:active,
    .config-card:active,
    button:active {
        transform: scale(0.98);
        opacity: 0.8;
    }
    
    /* Augmenter taille des targets touch */
    .component-info-btn,
    .component-favorite-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.75rem !important;
    }
}

/* Support orientation */
@media (orientation: landscape) and (max-width: 768px) {
    /* Optimisations pour mode paysage mobile */
    .modal,
    .mobile-bottom-sheet {
        max-height: 85vh;
    }
}

/* Prévenir zoom double-tap */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="number"],
    textarea {
        font-size: 16px !important;
    }
}

/* Améliorations touch pour grands écrans tactiles */
@media (hover: none) and (pointer: coarse) {
    /* Cibles plus grandes sur écrans tactiles */
    button,
    .btn,
    a[role="button"],
    .component-card {
        min-height: 48px;
        min-width: 48px;
    }
}