/**
 * Corrections spécifiques pour la version mobile des fiches produits
 * Version: 1.0
 * Date: 2025-01-XX
 */

/* =============================
   RÉDUCTION DES TITRES DE SECTIONS MOBILE
   ============================= */

@media (max-width: 768px) {
    /* Réduction des titres de sections pour les impressions */
    .qlr-cpp .cpp-product-title {
        font-size: 1.8rem !important;
        margin-bottom: 10px !important;
    }
    
    .qlr-cpp .cpp-product-price {
        font-size: 1.4rem !important;
    }
    
    /* Réduction des titres de sections pour les abonnements */
    .pil-product-container .pil-title-section h1 {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }
    
    .pil-product-container .pil-product-price {
        font-size: 1.3rem !important;
    }
    
    /* Réduction des titres de sections génériques */
    .qlr-cpp h3,
    .pil-product-container h3 {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
    }
    
    .qlr-cpp h4,
    .pil-product-container h4 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }
    
    .qlr-cpp h5,
    .pil-product-container h5 {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }
    
    /* Réduction des titres dans les sections de personnalisation */
    .cpp-section-header h4 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    
    /* Réduction des titres dans les colonnes de couleurs */
    .cpp-colors-title {
        font-size: 1.1rem !important;
        margin-bottom: 15px !important;
    }
    
    /* Réduction des titres dans les sections de description */
    .pil-description-text h3 {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
    }
    
    /* Titre spécifique "Rendu et options" */
    .cpp-render-section .cpp-section-title {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
    }
    
    /* Titres h2 généraux (sections principales) */
    .qlr-cpp h2 {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 480px) {
    /* Réduction encore plus importante pour les très petits écrans */
    .qlr-cpp .cpp-product-title {
        font-size: 1.6rem !important;
    }
    
    .qlr-cpp .cpp-product-price {
        font-size: 1.2rem !important;
    }
    
    .pil-product-container .pil-title-section h1 {
        font-size: 1.6rem !important;
    }
    
    .pil-product-container .pil-product-price {
        font-size: 1.1rem !important;
    }
    
    .qlr-cpp h3,
    .pil-product-container h3 {
        font-size: 1.1rem !important;
    }
    
    .qlr-cpp h4,
    .pil-product-container h4 {
        font-size: 1rem !important;
    }
    
    .cpp-colors-title {
        font-size: 1rem !important;
    }
}

/* =============================
   LAYOUT QRCODE & PERSONNALISATION MOBILE
   ============================= */

@media (max-width: 768px) {
    /* Section QRCode & Personnalisation - Layout en 3 lignes */
    .cpp-qrcode-section {
        padding: 12px !important;
    }
    
    .cpp-qrcode-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* Ligne 1: Menu QR Code (sélecteur) */
    .cpp-qrcode-menu {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        display: block !important;
    }
    
    .cpp-qrcode-menu > div {
        width: 100% !important;
        padding: 12px 16px !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 8px !important;
        background: white !important;
        color: #2C2C2C !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }
    
    .cpp-qrcode-menu > div:hover {
        border-color: #A020F0 !important;
        box-shadow: 0 0 0 3px rgba(160,32,240,0.1) !important;
    }
    
    .cpp-qrcode-menu p {
        margin: 0 !important;
        font-size: 14px !important;
        font-family: 'Gilroy', sans-serif !important;
        text-align: center !important;
    }
    
    /* Ligne 2: Boutons QR Code (plus animé) */
    .cpp-qrcode-buttons {
        order: 2 !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .cpp-qrcode-buttons .cpp-btn {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, #A020F0 0%, #FF6D00 100%) !important;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-decoration: none !important;
    }
    
    .cpp-qrcode-buttons .cpp-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(160,32,240,0.3) !important;
        color: white !important;
        text-decoration: none !important;
    }
    
    .cpp-qrcode-buttons .cpp-btn i {
        font-size: 16px !important;
    }
    
    /* Ligne 3: Bouton Customizer (bouton principal de personnalisation) */
    .cpp-personalize-btn {
        order: 3 !important;
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #FF6D00 0%, #A020F0 100%) !important;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-top: 10px !important;
    }
    
    .cpp-personalize-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(255,109,0,0.3) !important;
    }
    
    .cpp-personalize-btn .cpp-btn-content {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .cpp-personalize-btn i {
        font-size: 18px !important;
    }
    
    /* Ajuster l'espacement général */
    .cpp-qrcode-section .cpp-section-header {
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
    }
    
    /* Ajuster les conteneurs de personnalisation */
    .cpp-personalization-simple,
    .cpp-personalization-vertical,
    .cpp-personalization-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .cpp-personalize-button-container {
        width: 100% !important;
    }
    
    .cpp-personalize-hint {
        text-align: center !important;
        font-size: 12px !important;
        color: #666 !important;
        margin-top: 8px !important;
    }
}

@media (max-width: 480px) {
    /* Ajustements pour les très petits écrans */
    .cpp-qrcode-content {
        gap: 12px !important;
    }
    
    .cpp-qrcode-selector select {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
    
    .cpp-qrcode-more-animated .cpp-btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    .cpp-qrcode-customizer .cpp-btn {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
}

/* =============================
   CORRECTIONS SPÉCIFIQUES POUR LES LAYOUTS
   ============================= */

@media (max-width: 768px) {
    /* Ajustements pour le layout impressions */
    .qlr-cpp .cpp-main-content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .qlr-cpp .cpp-customizer-column {
        order: 3 !important;
    }
    
    .qlr-cpp .cpp-preview-column {
        order: 1 !important;
    }
    
    .qlr-cpp .cpp-colors-column {
        order: 2 !important;
    }
    
    /* Ajustements pour le layout abonnements */
    .pil-product-container .pil-description-content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .pil-product-container .pil-validation-content {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
    }
    
    /* Réduction des paddings pour économiser l'espace */
    .qlr-cpp .cpp-main-section,
    .pil-product-container .pil-section {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .qlr-cpp .cpp-product-header,
    .pil-product-container .pil-header {
        padding: 15px !important;
        margin-bottom: 20px !important;
    }
}

/* =============================
   AMÉLIORATIONS DE L'ESPACEMENT MOBILE
   ============================= */

@media (max-width: 768px) {
    /* Réduction des marges et paddings pour optimiser l'espace */
    .qlr-cpp,
    .pil-product-container {
        padding: 15px !important;
    }
    
    /* Ajustement des espacements entre les éléments */
    .cpp-qrcode-section,
    .cpp-circumstance-section {
        margin-bottom: 15px !important;
    }
    
    /* Optimisation de l'espace pour les boutons */
    .cpp-qrcode-more-animated,
    .cpp-qrcode-customizer {
        margin-bottom: 8px !important;
    }
    
    .cpp-qrcode-customizer {
        margin-bottom: 0 !important;
    }
    
    /* Réorganisation de la section "Rendu et options" en mobile */
    .cpp-render-section .cpp-render-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* Ordre : 1. Preview, 2. Sélecteur de taille, 3. Sélecteur de quantité */
    .cpp-preview-column {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .cpp-size-column {
        order: 2 !important;
        width: 100% !important;
    }
    
    .cpp-quantity-wrapper {
        order: 3 !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* Centrer le preview */
    .cpp-product-preview {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .cpp-product-preview img {
        max-width: 200px !important;
        height: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
    
    /* Améliorer l'apparence du sélecteur de taille */
    .cpp-size-column h3 {
        font-size: 1.1rem !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }
    
    .cpp-size-buttons {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    /* Améliorer l'apparence du sélecteur de quantité */
    .cpp-quantity-wrapper label {
        display: block !important;
        text-align: center !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
    }
    
    .cpp-quantity-controls {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
    }
}