/**
 * Le Studio By M - Responsive Boutique
 * Optimisation complète mobile/tablette pour la boutique
 */

/* ====================================
   HERO BOUTIQUE - RESPONSIVE
   ==================================== */

@media (max-width: 768px) {
    .hero-boutique {
        min-height: 60vh !important;
        padding: 40px 20px !important;
    }
    
    .hero-boutique h1 {
        font-size: 2.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .hero-boutique .lead {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
    }
    
    .hero-boutique .badge {
        font-size: 0.85rem !important;
        padding: 0.75rem 1rem !important;
        margin-bottom: 10px !important;
    }
    
    .hero-boutique .btn {
        width: 100%;
        font-size: 1rem !important;
        padding: 14px 30px !important;
    }
}

/* ====================================
   FILTRES CATÉGORIES - RESPONSIVE
   ==================================== */

@media (max-width: 768px) {
    /* Filtres en scroll horizontal sur mobile */
    .d-flex.gap-2.justify-content-center {
        justify-content: flex-start !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        margin-bottom: 30px !important;
    }
    
    /* Masquer la scrollbar mais garder la fonctionnalité */
    .d-flex.gap-2.justify-content-center::-webkit-scrollbar {
        height: 3px;
    }
    
    .d-flex.gap-2.justify-content-center::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .d-flex.gap-2.justify-content-center::-webkit-scrollbar-thumb {
        background: var(--logo-turquoise);
        border-radius: 10px;
    }
    
    /* Boutons filtres optimisés mobile */
    .d-flex.gap-2.justify-content-center .btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.9rem !important;
        padding: 10px 20px !important;
    }
}

/* ====================================
   GRILLE PRODUITS - RESPONSIVE
   ==================================== */

/* Desktop - 3 colonnes */
.grid-minimal-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Tablette - 2 colonnes */
@media (max-width: 992px) {
    .grid-minimal-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
}

/* Mobile - 1 colonne */
@media (max-width: 768px) {
    .grid-minimal-3 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .card-minimal {
        max-width: 100%;
        margin: 0 auto 20px;
    }
}

/* ====================================
   CARDS PRODUITS - RESPONSIVE
   ==================================== */

@media (max-width: 768px) {
    /* Image produit */
    .card-minimal > a > div {
        height: 300px !important;
    }
    
    /* Badge stock */
    .card-minimal .badge {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.8rem !important;
        top: 10px !important;
        right: 10px !important;
    }
    
    /* Corps de la card */
    .card-minimal-body {
        padding: 20px !important;
    }
    
    /* Titre et prix */
    .card-minimal-body h4 {
        font-size: 1.25rem !important;
    }
    
    .card-minimal-body .h4 {
        font-size: 1.5rem !important;
    }
    
    /* Description */
    .card-minimal-body p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* Tailles */
    .card-minimal-body .badge {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem !important;
    }
    
    /* Footer bouton */
    .card-minimal-footer .btn-minimal {
        font-size: 0.95rem !important;
        padding: 12px 20px !important;
    }
}

/* Smartphone très petit */
@media (max-width: 480px) {
    .card-minimal > a > div {
        height: 400px !important;
    }
    
    .card-minimal-body {
        padding: 15px !important;
    }
    
    .card-minimal-body h4 {
        font-size: 1.1rem !important;
    }
}

/* ====================================
   SECTION AVANTAGES - RESPONSIVE
   ==================================== */

.grid-minimal-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

@media (max-width: 992px) {
    .grid-minimal-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
}

@media (max-width: 768px) {
    .grid-minimal-4 {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Icônes des avantages */
    .grid-minimal-4 > div > div {
        width: 70px !important;
        height: 70px !important;
        font-size: 1.8rem !important;
    }
    
    .grid-minimal-4 h5 {
        font-size: 1.1rem !important;
    }
    
    .grid-minimal-4 p {
        font-size: 0.9rem !important;
    }
}

/* ====================================
   CTA PANIER - RESPONSIVE
   ==================================== */

@media (max-width: 768px) {
    .section-minimal-sm {
        padding: 30px 0 !important;
    }
    
    .card-minimal[style*="gradient-logo-primary"] .card-minimal-body {
        padding: 30px 20px !important;
    }
    
    .card-minimal h3 {
        font-size: 1.5rem !important;
    }
    
    .card-minimal p {
        font-size: 0.95rem !important;
    }
    
    .card-minimal .btn {
        width: 100%;
        font-size: 1rem !important;
        padding: 14px 30px !important;
    }
}

/* ====================================
   ÉTAT VIDE (pas de produits)
   ==================================== */

@media (max-width: 768px) {
    .text-center.py-5 i {
        font-size: 3rem !important;
    }
    
    .text-center.py-5 .lead {
        font-size: 1rem !important;
    }
}

/* ====================================
   OPTIMISATIONS PERFORMANCE MOBILE
   ==================================== */

@media (max-width: 768px) {
    /* Désactiver les transformations hover sur mobile */
    .card-minimal:hover,
    .btn-minimal:hover {
        transform: none !important;
    }
    
    /* Optimiser les images */
    .card-minimal img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ====================================
   CORRECTIONS SPÉCIFIQUES AFFICHAGE
   ==================================== */

@media (max-width: 768px) {
    /* Fix flex-wrap sur badges */
    .d-flex.gap-3.flex-wrap {
        gap: 15px !important;
    }
    
    /* Fix justify-content sur mobile */
    .justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }
    
    /* Fix pour le prix toujours visible */
    .card-minimal-body .d-flex.justify-content-between {
        flex-direction: row !important;
        align-items: center !important;
    }
    
    /* Fix tailles en grid au lieu de flex */
    .d-flex.gap-2.flex-wrap {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: 8px !important;
    }
}

/* ====================================
   ANIMATIONS MOBILE
   ==================================== */

@media (max-width: 768px) {
    /* Désactiver AOS sur mobile pour performance */
    [data-aos] {
        transition-duration: 0.3s !important;
    }
    
    /* Réduire les délais d'animation */
    [data-aos-delay] {
        transition-delay: 0s !important;
    }
}

/* ====================================
   CORRECTIONS BOOTSTRAP OVERRIDE
   ==================================== */

@media (max-width: 768px) {
    /* Container */
    .container-minimal {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .container-minimal-narrow {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Sections */
    .section-minimal {
        padding: 50px 0 !important;
    }
    
    .section-minimal-sm {
        padding: 40px 0 !important;
    }
    
    /* Row Bootstrap */
    .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    
    .row > [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ====================================
   FIX TEXTE MOBILE RESPONSIVE
   ==================================== */

@media (max-width: 768px) {
    /* Titres responsive */
    .section-header h2 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    
    .section-badge {
        font-size: 0.85rem !important;
        padding: 6px 16px !important;
    }
    
    /* Paragraphes */
    .section-header p {
        font-size: 0.95rem !important;
    }
}

/* ====================================
   SCROLL HORIZONTAL INDICATOR
   ==================================== */

@media (max-width: 768px) {
    /* Indicateur visuel pour scroll horizontal des filtres */
    .d-flex.gap-2.justify-content-center::after {
        content: '→';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(to right, transparent, white);
        padding: 10px 20px 10px 40px;
        pointer-events: none;
        opacity: 0.7;
        font-size: 1.2rem;
        color: var(--logo-turquoise);
    }
    
    /* Retirer l'indicateur quand on est à la fin */
    .d-flex.gap-2.justify-content-center::-webkit-scrollbar-thumb:horizontal:active::after {
        display: none;
    }
}

/* ====================================
   LANDSCAPE MODE (mobile horizontal)
   ==================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .hero-boutique {
        min-height: 100vh !important;
    }
    
    .card-minimal > a > div {
        height: 400px !important;
    }
}

/* ====================================
   ACCESSIBILITÉ TACTILE
   ==================================== */

@media (max-width: 768px) and (hover: none) {
    /* Zones tactiles minimales 44x44px */
    .btn-minimal,
    .card-minimal a,
    .nav-link {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Feedback tactile */
    .btn-minimal:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}