/* ========================================
   CORRECTIONS AFFICHAGE MOBILE
   ======================================== */

/* Correction des classes responsive */
@media (max-width: 767px) {
    /* Les éléments avec hidden-xs doivent être cachés sur mobile */
    .hidden-xs, .header-top {
        display: none !important;
    }
    /* Les éléments avec visible-xs doivent être visibles sur mobile */
    .visible-xs {
        display: block !important;
    }
    
    /* Mais le logo principal doit rester visible même avec hidden-xs */
    .header-panel-left .logo.hidden-xs img,
    .header-panel-left .logo img.hidden-xs {
        display: block !important;
    }

    #mobi_cart-wrapper::before {
        display: inline-block;
        font-family: 'CodazonFont';
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: '\e992';
        font-size: 22px;
        speak: none;
        color: #333;
        line-height: 35px;
      }

      div.col-sm-7:nth-child(1) {
        width: 100%;
      }
}

/* FIX 1: HEADER MOBILE */
@media (max-width: 767px) {
    /* Réduire la hauteur du header et le rendre visible */
    .page-header.header-style-15 {
        min-height: auto !important;
        background: #ffffff !important;
        display: block !important;
    }
    
    /* Header sections responsive */
    .header-sections {
        display: block !important;
        background: #ffffff;
    }
    
    /* Header top */
    .header-top {
        padding: 5px 0 !important;
        min-height: auto !important;
        background: #f5f5f5;
    }
    
    .header-top .container {
        display: block !important;
    }
    
    .header-top .row {
        display: block !important;
    }
    
    .header-top .header-top-links {
        display: block !important;
    }
    
    .header-top .header-top-links p {
        font-size: 11px;
        margin: 0;
        padding: 5px 0;
        color: #333 !important;
        display: block !important;
    }
    
    /* Header middle avec logo et recherche */
    .header-middle {
        padding: 10px 0 !important;
        background: #ffffff !important;
        display: block !important;
    }
    
    .panel.header {
        display: block !important;
    }
    
    .header-panel-container {
        display: block !important;
    }
    
    .header-panel-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
    }
    
    /* Logo plus petit sur mobile */
    .header-panel-left {
        display: block !important;
    }
    
    .header-panel-left .logo {
        max-width: 120px;
        display: block !important;
    }
    
    /* Forcer l'affichage du logo même avec hidden-xs */
    .header-panel-left .logo img,
    .header-panel-left .logo .main-logo,
    .header-panel-left .logo img.main-logo,
    .header-panel-left .logo img.hidden-xs {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Barre de recherche mobile */
    .header-search-wrap {
        width: 100%;
        order: 3;
        margin-top: 10px;
    }
    
    /* Header bottom - menu catégories */
    .header-bottom {
        padding: 10px 0;
    }
    
    /* Container responsive */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Sticky menu ajustements */
    .sticky-menu.active {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: #fff;
    }
}

/* FIX 2: SLIDER D'IMAGES MOBILE */
@media (max-width: 767px) {
    /* Gallery container */
    [data-gallery-role="gallery"] {
        display: block !important;
        width: 100% !important;
    }
    
    /* Container du slider responsive */
    .fotorama__stage,
    [data-fotorama-stage] {
        min-height: 350px !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        display: flex !important;
        align-items: flex-start !important;
        position: relative !important;
        overflow: visible !important; /* Changé pour que les flèches soient entièrement visibles */
        background: #fff !important;
    }
    
    /* Images du slider - TOUS en absolute sur mobile */
    .fotorama__stage__frame {
        width: 100% !important;
        max-width: 100vw !important;
        height: 100% !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transition: opacity 0.3s ease, visibility 0.3s !important;
    }
    
    /* Frame active visible */
    .fotorama__stage__frame.fotorama__active,
    .fotorama__stage__frame[data-active="true"] {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2 !important;
        pointer-events: auto !important;
    }
    
    /* Frames non-actives cachées */
    .fotorama__stage__frame:not(.fotorama__active),
    .fotorama__stage__frame[data-active="false"] {
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    
    .fotorama__stage__shaft {
        width: 100% !important;
        display: block !important;
        position: relative !important;
        min-height: 350px !important;
        transform: none !important;
        overflow: hidden !important; /* Le shaft peut avoir overflow hidden */
    }
    
    .fotorama__img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        display: block !important;
        visibility: visible !important;
        margin: 0 auto !important;
    }
    
    /* S'assurer que l'image loaded est visible */
    .fotorama__stage__frame.fotorama__loaded--img img {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Forcer l'affichage de l'image active */
    .fotorama__stage__frame.fotorama__active .fotorama__img,
    .fotorama__stage__frame[data-active="true"] .fotorama__img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Garder le container du frame à la bonne hauteur */
    .fotorama__stage__frame.fotorama__active,
    .fotorama__stage__frame[data-active="true"] {
        min-height: 350px !important;
    }
    
    /* Vignettes en bas */
    .fotorama__nav {
        width: 100% !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        display: block !important;
    }
    
    .fotorama__nav__shaft {
        display: block;
    }
    
    .fotorama__nav__frame {
        flex-shrink: 0;
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
    }
    
    .fotorama__thumb {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* IMPORTANT: Bordure orange de la vignette active responsive */
    .fotorama__thumb-border {
        width: 60px !important;
        height: 60px !important;
        box-sizing: border-box !important;
        border-width: 2px !important;
        max-width: 60px !important;
        max-height: 60px !important;
        transform-origin: 0 0 !important;
    }
    
    /* Boutons de navigation - centrés verticalement avec fond rond */
    .fotorama__arr {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 50% !important;
        margin-top: -22px !important; /* Moitié de la hauteur pour centrer */
        z-index: 100 !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        padding: 0 !important;
    }
    
    /* Cacher l'ancienne flèche */
    .fotorama__arr__arr {
        display: none !important;
    }
    
    /* Créer de nouvelles flèches avec :before */
    .fotorama__arr:before {
        content: '' !important;
        display: block !important;
        width: 12px !important;
        height: 12px !important;
        border-top: 3px solid #333 !important;
        border-right: 3px solid #333 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
    }
    
    /* Flèche gauche (précédent) - chevron vers la gauche */
    .fotorama__arr--prev:before {
        transform: translate(-30%, -50%) rotate(-135deg) !important;
    }
    
    /* Flèche droite (suivant) - chevron vers la droite */
    .fotorama__arr--next:before {
        transform: translate(-70%, -50%) rotate(45deg) !important;
    }
    
    /* Positionner les boutons */
    .fotorama__arr--prev {
        left: 5px !important;
    }
    
    .fotorama__arr--next {
        right: 5px !important;
    }
    
    /* Cacher les autres éléments */
    .fotorama__arr:after {
        display: none !important;
    }
}

/* Ajustements pour très petits écrans */
@media (max-width: 480px) {
    .header-top .header-top-links p {
        font-size: 10px;
        padding: 3px 0;
    }
    
    .header-panel-left .logo {
        max-width: 100px;
    }
    
    .header-search-wrap input[type="text"] {
        font-size: 14px;
        padding: 8px 10px;
    }
    
    .fotorama__nav__frame,
    .fotorama__thumb,
    .fotorama__thumb-border {
        width: 50px !important;
        height: 50px !important;
    }
}

/* Ajustements pour tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
    .fotorama__stage,
    [data-fotorama-stage] {
        max-width: 500px;
        height: 500px !important;
    }
}