/**
 * ========================================
 * SALNEA - RESPONSIVE PAGE PRODUIT
 * ========================================
 * Version: 1.0.0
 * Date: 14/10/2025
 * Description: Styles responsive pour la page produit WooCommerce
 * Breakpoints:
 *   - Mobile: < 768px
 *   - Tablette: 768px - 1024px
 *   - Desktop: > 1024px (non touché par ce fichier)
 * ========================================
 */

/* ========================================
   VARIABLES CSS RESPONSIVE
   ======================================== */
:root {
    --mobile-padding: 15px;
    --tablet-padding: 25px;
    --mobile-header-height: 60px;
    --tablet-column-width: 400px;
    --mobile-button-height: 50px;
    --mobile-card-min-height: 85px;
}

/* ========================================
   TABLETTE (768px - 1024px)
   ======================================== */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    
    /* Container principal */
    .product-container-modern {
        margin-top: 10px !important;
    }
    
    /* Wrapper - Maintenir le flex mais ajuster */
    .position-prop-6 .product-modern-wrapper {
        gap: 30px !important;
    }
    
    /* Colonne gauche - Ajustement pour tablette */
    .position-prop-6 .product-left-column {
        flex: 1 1 calc(100% - 430px) !important;
        max-width: calc(100% - 430px) !important;
    }
    
    /* Colonne droite - Largeur réduite pour tablette */
    .position-prop-6 .product-right-column {
        width: var(--tablet-column-width) !important;
        flex: 0 0 var(--tablet-column-width) !important;
        padding: 20px 25px !important;
        max-height: calc(100vh - 100px) !important;
        top: 80px !important; /* Plus d'espace en haut */
    }
    
    /* Carrousel - Ajustements tablette */
    .product-gallery-carousel {
        padding: 0 0 40px 30px !important;
    }
    
    .carousel-slide {
        width: 400px !important;
        height: 500px !important;
    }
    
    /* Boutons navigation - Taille intermédiaire */
    .carousel-nav {
        width: 60px !important;
        height: 60px !important;
        border-radius: 12px !important;
    }
    
    .carousel-prev {
        left: 25px !important;
    }
    
    .carousel-next {
        right: 25px !important;
    }
    
    /* Sections descriptions - Padding réduit */
    .product-descriptions-section {
        padding: 60px 40px 80px 40px !important;
    }
    
    /* Cards variations - 3 colonnes sur tablette */
    .variations-cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    
    .variation-card {
        padding: 15px 12px !important;
        min-height: 95px !important;
    }
    
    /* Titre produit */
    .product-title {
        font-size: 24px !important;
    }
    
    /* Prix */
    .current-price-display {
        font-size: 28px !important;
    }
    
    /* Bouton ajouter au panier */
    .add-to-cart-main {
        padding: 16px 25px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   MOBILE (< 768px)
   ======================================== */
@media screen and (max-width: 767px) {
    
    /* Reset du layout pour mobile */
    .product-container-modern {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Wrapper - Passage en colonne unique */
    .position-prop-6 .product-modern-wrapper,
    .product-modern-wrapper {
        display: block !important;
        flex-direction: column !important;
        min-height: auto !important;
    }
    
    /* Colonne gauche - Pleine largeur */
    .position-prop-6 .product-left-column,
    .product-left-column {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        flex: none !important;
        order: 1 !important; /* Forcer les photos en premier */
    }
    
    /* Réorganisation COMPLÈTE du contenu sur mobile */
    .product-container-modern .product-modern-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* ORDRE D'AFFICHAGE MOBILE:
       1. Photos (carrousel)
       2. Titre + Prix + Options (colonne droite)
       3. Descriptions
       4. Avis
    */
    
    /* Forcer la colonne gauche à se décomposer */
    .product-left-column {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 1. Carrousel tout en haut */
    .product-gallery-carousel {
        order: -100 !important; /* Priorité absolue */
        margin-bottom: 0 !important;
    }
    
    /* 2. Colonne droite (titre, prix, boutons) */
    .product-right-column {
        order: -50 !important;
    }
    
    /* 3. Sections descriptions */
    .product-descriptions-section {
        order: 10 !important;
        border-top: 1px solid #f0f0f0 !important;
        margin-top: 20px !important;
    }
    
    /* 4. Section avis clients en dernier */
    #customer-reviews-section {
        order: 20 !important;
    }
    
    /* Colonne droite - Position static et pleine largeur */
    .position-prop-6 .product-right-column,
    .product-right-column {
        position: static !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        flex: none !important;
        top: auto !important;
        right: auto !important;
        border-left: none !important;
        border-top: none !important;
        box-shadow: none !important;
        overflow-y: visible !important;
        margin-top: 0 !important;
        order: -50 !important; /* Juste après les photos */
    }
    
    /* Info sticky - Padding mobile */
    .product-info-sticky {
        padding: var(--mobile-padding) !important;
        padding-top: 5px !important; /* Moins d'espace en haut car photos juste au-dessus */
        min-height: auto !important;
        background: white !important;
    }
    
    /* Titre produit mobile */
    .product-title {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }
    
    /* Rating mobile */
    .product-rating {
        margin-bottom: 15px !important;
        flex-wrap: wrap !important;
    }
    
    .stars-rating {
        margin-right: 8px !important;
    }
    
    .rating-text {
        font-size: 12px !important;
        margin-left: 0 !important;
        padding-left: 8px !important;
    }
    
    /* Description courte mobile */
    .product-short-desc {
        margin: 15px 0 20px 0 !important;
    }
    
    .short-desc-content {
        font-size: 14px !important;
        line-height: 1.5 !important;
        max-height: 120px !important;
    }
    
    .read-more-btn {
        font-size: 13px !important;
        padding: 5px 0 0 !important;
    }
    
    /* ========================================
       CARROUSEL MOBILE - FIX COMPLET
       ======================================== */
    
    /* Désactiver le système desktop sur mobile */
    .mobile-section-photos .carousel-track {
        display: flex !important;
        width: auto !important;
        transition: transform 0.3s ease-out !important;
    }
    
    /* Chaque slide prend la largeur complète */
    .mobile-section-photos .carousel-slide {
        flex: 0 0 100vw !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vw !important;
        max-height: 450px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .mobile-section-photos .carousel-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    
    /* Boutons navigation mobile - Toujours visibles */
    .mobile-section-photos .carousel-nav {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    .mobile-section-photos .carousel-prev {
        left: 10px !important;
    }
    
    .mobile-section-photos .carousel-next {
        right: 10px !important;
    }
    
    .mobile-section-photos .carousel-nav svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2 !important;
    }
    
    /* Forcer les boutons à rester cliquables */
    .mobile-section-photos .carousel-nav[disabled],
    .mobile-section-photos .carousel-nav:disabled {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* Pagination mobile */
    .carousel-pagination,
    .mobile-section-photos .carousel-pagination {
        margin-top: 20px !important;
        padding-bottom: 15px !important;
        gap: 6px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .pagination-dot,
    .mobile-section-photos .pagination-dot {
        width: 6px !important;
        height: 6px !important;
        background: #d0d0d0 !important;
        border-radius: 50% !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        padding: 0 !important;
        pointer-events: auto !important;
        display: inline-block !important;
    }
    
    .pagination-dot:hover,
    .mobile-section-photos .pagination-dot:hover {
        background: #999 !important;
        transform: scale(1.2) !important;
    }
    
    .pagination-dot.active,
    .mobile-section-photos .pagination-dot.active {
        width: 20px !important;
        height: 6px !important;
        border-radius: 3px !important;
        background: #000 !important;
    }
    
    /* ========================================
       SECTIONS DESCRIPTIONS MOBILE
       ======================================== */
    
    .product-descriptions-section {
        padding: 30px var(--mobile-padding) 40px !important;
    }
    
    .description-block {
        margin-bottom: 30px !important;
        padding-bottom: 30px !important;
    }
    
    .description-title {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }
    
    .description-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* ========================================
       PRIX ET VARIATIONS MOBILE
       ======================================== */
    
    /* Bloc prix mobile */
    .price-block-premium {
        padding: 20px 0 !important;
        margin-bottom: 20px !important;
        text-align: left !important;
    }
    
    .current-price-display {
        font-size: 26px !important;
        margin-bottom: 5px !important;
    }
    
    .price-starting {
        font-size: 11px !important;
    }
    
    /* Section variations */
    .variations-section-premium {
        margin-bottom: 20px !important;
    }
    
    .variations-title-premium {
        font-size: 12px !important;
        margin-bottom: 15px !important;
        text-align: left !important;
    }
    
    /* Cards variations - 2 colonnes sur mobile */
    .variations-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
    }
    
    .variation-card {
        padding: 12px 8px !important;
        min-height: var(--mobile-card-min-height) !important;
        border-radius: 8px !important;
    }
    
    .variation-name {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    
    .variation-price {
        font-size: 12px !important;
    }
    
    /* Checkmark mobile */
    .variation-card::before {
        width: 18px !important;
        height: 18px !important;
        top: 5px !important;
        right: 5px !important;
        font-size: 10px !important;
    }
    
    /* Badge rupture de stock */
    .variation-out-label {
        font-size: 9px !important;
        bottom: 5px !important;
    }
    
    /* ========================================
       BOUTON AJOUTER AU PANIER MOBILE
       ======================================== */
    
    .add-to-cart-main {
        width: 100% !important;
        padding: 16px 20px !important;
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
        border-radius: 8px !important;
        margin-top: 20px !important;
        min-height: var(--mobile-button-height) !important;
        position: relative !important;
    }
    
    #btnPriceDisplay {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    
    /* ========================================
       PROFIL OLFACTIF MOBILE
       ======================================== */
    
    /* Header avec badge */
    .fragrance-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin-bottom: 15px !important;
    }
    
    .fragrance-header .description-title {
        font-size: 18px !important;
    }
    
    /* Badge minimal mobile */
    .fragrance-minimal {
        padding: 6px 12px !important;
        font-size: 12px !important;
        gap: 6px !important;
        border-radius: 16px !important;
    }
    
    .fragrance-minimal .fragrance-icon {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Grille familles olfactives mobile */
    .fragrance-families {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .fragrance-family {
        padding: 15px 10px !important;
        border-radius: 8px !important;
    }
    
    .family-icon {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: 8px !important;
    }
    
    .family-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .family-name {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }
    
    .family-notes {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    
    /* ========================================
       SECTION AVIS MOBILE
       ======================================== */
    
    #customer-reviews-section {
        padding: 30px var(--mobile-padding) !important;
        background: #f8f8f8 !important;
        margin-top: 20px !important;
    }
    
    /* Si le système d'avis a ses propres classes */
    .reviews-container {
        padding: 0 !important;
    }
    
    .review-item {
        padding: 15px !important;
        margin-bottom: 10px !important;
        font-size: 14px !important;
    }
    
    .btn-write-review,
    #toggle-review-form-btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   MOBILE PETIT (< 375px) - iPhone SE, etc.
   ======================================== */
@media screen and (max-width: 374px) {
    
    /* Titre encore plus petit */
    .product-title {
        font-size: 20px !important;
    }
    
    /* Prix ajusté */
    .current-price-display {
        font-size: 24px !important;
    }
    
    /* Cards variations - Peut-être une seule colonne */
    .variations-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Gardons 2 colonnes même sur petit écran */
        gap: 6px !important;
    }
    
    .variation-card {
        padding: 10px 6px !important;
        min-height: 75px !important;
    }
    
    .variation-name {
        font-size: 13px !important;
    }
    
    .variation-price {
        font-size: 11px !important;
    }
    
    /* Familles olfactives - 2 colonnes serrées */
    .fragrance-families {
        gap: 8px !important;
    }
    
    .fragrance-family {
        padding: 12px 8px !important;
    }
}

/* ========================================
   MOBILE PAYSAGE (Hauteur < 600px)
   ======================================== */
@media screen and (max-height: 600px) and (orientation: landscape) {
    
    /* Réduire hauteur du carrousel en paysage */
    .carousel-slide {
        height: 60vh !important;
        max-height: 350px !important;
    }
    
    /* Colonne droite moins haute */
    .product-right-column {
        max-height: none !important;
    }
    
    /* Sections plus compactes */
    .product-descriptions-section {
        padding: 25px var(--mobile-padding) 35px !important;
    }
    
    .description-block {
        margin-bottom: 25px !important;
        padding-bottom: 25px !important;
    }
}

/* ========================================
   OPTIMISATIONS TACTILES
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    
    /* Augmenter les zones tactiles */
    .carousel-nav {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    .variation-card {
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        touch-action: manipulation;
    }
    
    .add-to-cart-main {
        min-height: 48px !important;
        touch-action: manipulation;
    }
    
    /* Désactiver les hovers sur mobile */
    .variation-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    .fragrance-family:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }
    
    /* Améliorer le feedback tactile */
    .variation-card:active {
        transform: scale(0.98) !important;
        background: #f5f5f5 !important;
    }
    
    .add-to-cart-main:active {
        transform: scale(0.98) !important;
    }
    
    /* Meilleur scroll sur mobile */
    .product-right-column,
    .product-descriptions-section {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

/* ========================================
   AJUSTEMENTS POUR STICKY HEADER MOBILE
   ======================================== */
@media screen and (max-width: 767px) {
    
    /* Si le header est sticky sur mobile */
    body.admin-bar .product-container-modern {
        margin-top: 32px !important; /* Barre admin WordPress */
    }
    
    /* Ajuster si header sticky custom */
    .has-sticky-header .product-container-modern {
        padding-top: var(--mobile-header-height) !important;
    }
}

/* ========================================
   FIXES POUR PROBLÈMES SPÉCIFIQUES
   ======================================== */

/* Fix pour le débordement horizontal sur mobile */
@media screen and (max-width: 767px) {
    body {
        overflow-x: hidden !important;
    }
    
    .product-container-modern,
    .product-modern-wrapper,
    .product-left-column,
    .product-right-column {
        overflow-x: hidden !important;
    }
}

/* Fix pour les images trop grandes */
@media screen and (max-width: 767px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Fix pour le z-index sur mobile */
@media screen and (max-width: 767px) {
    .product-right-column {
        z-index: 1 !important;
    }
    
    .carousel-nav {
        z-index: 10 !important;
    }
    
    /* Header/Menu au-dessus de tout */
    .main-header,
    .site-header,
    header {
        z-index: 999 !important;
    }
}

/* ========================================
   PRINT STYLES (Bonus)
   ======================================== */
@media print {
    .carousel-nav,
    .carousel-pagination,
    .add-to-cart-main,
    .read-more-btn,
    #customer-reviews-section {
        display: none !important;
    }
    
    .product-right-column {
        position: static !important;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .carousel-slide {
        page-break-inside: avoid;
    }
}

/* ========================================
   ANIMATIONS RESPONSIVE
   ======================================== */

/* Désactiver animations complexes sur mobile pour performance */
@media screen and (max-width: 767px) {
    * {
        animation-duration: 0.2s !important;
    }
    
    .carousel-track {
        transition: transform 0.3s ease !important;
    }
}

/* Transition plus fluide sur tablette */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .carousel-track {
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
}

/* ========================================
   DARK MODE SUPPORT (Optionnel)
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* Ajustements pour dark mode si nécessaire */
}

/* ========================================
   FIN DU FICHIER RESPONSIVE
   ========================================== */