/**
 * HOMEPAGE MOBILE PREMIUM CSS
 * Forever BE WP Premium Theme
 *
 * Optimisations mobile pour la page d'accueil
 * - Compactage des espaces (margin/padding)
 * - Alignement des titres et sous-titres
 * - Espaces réduits entre les sections
 * - Conservation du carrousel hero
 *
 * @version 1.0.0
 * @author Claude Code - Expert Mobile UX
 */

/* ========================================================================
   VARIABLES MOBILE HOMEPAGE
   ======================================================================== */

@media (max-width: 767px) {
    :root {
        --hp-section-spacing: 2rem;
        --hp-container-padding: 1rem;
        --hp-card-padding: 1rem;
        --hp-title-margin: 0.75rem;
        --hp-text-margin: 0.5rem;
        --hp-grid-gap: 0.75rem;
    }
}

/* ========================================================================
   1. GLOBAL HOMEPAGE MOBILE OVERRIDES
   ======================================================================== */

@media (max-width: 767px) {

    /* Réduire les espacements généraux des sections */
    body .site-main > section,
    body .site-main section[class*="section"],
    body .section-padding {
        padding-top: var(--hp-section-spacing) !important;
        padding-bottom: var(--hp-section-spacing) !important;
    }

    /* Containers compacts */
    body .container,
    body .container-fluid {
        padding-left: var(--hp-container-padding) !important;
        padding-right: var(--hp-container-padding) !important;
    }

    /* Centrage des titres de section */
    body .section-title-premium,
    body .featured-title,
    body .cta-title-premium,
    body [class*="section"] h2,
    body [class*="section"] h3 {
        text-align: center !important;
        margin-bottom: var(--hp-title-margin) !important;
    }

    /* Sous-titres compacts et centrés */
    body .section-subtitle-premium,
    body .featured-subtitle,
    body [class*="section"] > .container > p {
        text-align: center !important;
        margin-bottom: var(--hp-text-margin) !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ========================================================================
   2. HERO SECTION - CONSERVER LE CARROUSEL, OPTIMISER MOBILE
   ======================================================================== */

@media (max-width: 767px) {

    /* Hero section compacte mais pas trop */
    body .hero-section-premium {
        min-height: 75vh !important;
        height: auto !important;
    }

    /* Hero content compact */
    body .hero-content-premium {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 2rem !important;
        padding-bottom: 3rem !important;
    }

    /* Titre hero compact */
    body .hero-title-premium {
        font-size: clamp(1.3rem, 5vw, 1.6rem) !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.2 !important;
    }

    /* Description hero compacte */
    body .hero-desc-premium {
        font-size: 0.8rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
    }

    /* Hero actions compactes */
    body .hero-actions {
        gap: 0.5rem !important;
        margin-top: 0.75rem !important;
    }

    body .btn-hero-primary,
    body .btn-hero-secondary {
        padding: 0.5rem 1rem !important;
        font-size: 0.65rem !important;
        min-height: 40px !important;
    }

    /* Trust badge compact */
    body .hero-trust-badge {
        margin-top: 1rem !important;
    }

    body .hero-trust-badge span {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.65rem !important;
    }

    /* Live indicator compact */
    body .hero-live-indicator {
        margin-top: 0.5rem !important;
    }

    body .hero-live-indicator span {
        font-size: 0.6rem !important;
    }

    /* Navigation dots compacte */
    body .hero-dots-premium {
        bottom: 1rem !important;
        gap: 6px !important;
    }

    /* Flèches navigation compactes */
    body .hero-nav-arrow {
        width: 32px !important;
        height: 32px !important;
    }

    body .hero-nav-arrow.prev {
        left: 0.5rem !important;
    }

    body .hero-nav-arrow.next {
        right: 0.5rem !important;
    }
}

/* ========================================================================
   3. TRUST SECTION MARQUEE - COMPACT
   ======================================================================== */

@media (max-width: 767px) {

    body .trust-section-marquee {
        padding: 0.5rem 0 !important;
        margin-top: -0.5rem !important;
    }

    body .trust-card-compact {
        padding: 0.5rem 0.75rem !important;
        min-width: 130px !important;
        max-width: 145px !important;
        gap: 0.4rem !important;
        margin: 0 0.25rem !important;
        border-radius: 8px !important;
    }

    body .trust-icon-compact svg {
        width: 20px !important;
        height: 20px !important;
    }

    body .trust-number-compact {
        font-size: 0.95rem !important;
        line-height: 1 !important;
    }

    body .trust-label-compact {
        font-size: 0.55rem !important;
    }

    body .trust-sub-compact {
        font-size: 0.5rem !important;
    }
}

/* ========================================================================
   4. FEATURED PRODUCTS SECTION - COMPACT
   ======================================================================== */

@media (max-width: 767px) {

    body .featured-section {
        padding: 1.5rem 0 2rem !important;
    }

    /* Header compact */
    body .featured-header {
        margin-bottom: 1.5rem !important;
    }

    body .featured-badge {
        padding: 0.35rem 0.875rem !important;
        font-size: 0.7rem !important;
        margin-bottom: 0.5rem !important;
    }

    body .featured-title {
        font-size: clamp(1.3rem, 5vw, 1.6rem) !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.25 !important;
    }

    body .featured-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
    }

    /* Quick category navigation compact */
    body .quick-category-nav {
        gap: 0.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    body .quick-cat-link {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.8rem !important;
        border-radius: 20px !important;
    }

    body .quick-cat-link .cat-icon {
        font-size: 1rem !important;
    }

    body .quick-cat-link .cat-count {
        font-size: 0.65rem !important;
        padding: 0.1rem 0.375rem !important;
    }

    /* Product grid compact - 2 colonnes */
    body .product-grid-featured {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Product card compact */
    body .featured-product-card {
        border-radius: 12px !important;
    }

    body .featured-product-info {
        padding: 0.75rem !important;
    }

    body .featured-product-category {
        font-size: 0.6rem !important;
        margin-bottom: 0.25rem !important;
        letter-spacing: 0.05em !important;
    }

    body .featured-product-title {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
    }

    body .featured-product-price {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    body .featured-product-price span {
        font-size: 0.6rem !important;
        margin-top: 0.15rem !important;
    }

    /* Rating compact */
    body .featured-product-info > div[style*="display: flex"] {
        margin-bottom: 0.5rem !important;
    }

    body .featured-product-info > div[style*="display: flex"] svg {
        width: 10px !important;
        height: 10px !important;
    }

    body .featured-product-info > div[style*="display: flex"] span {
        font-size: 0.6rem !important;
    }

    /* Button compact */
    body .featured-product-btn {
        padding: 0.625rem !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
    }

    body .featured-product-btn svg {
        width: 14px !important;
        height: 14px !important;
        margin-left: 0.25rem !important;
    }

    /* Badge compact */
    body .featured-product-badge {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6rem !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
    }

    /* CTA buttons compact */
    body .featured-cta {
        gap: 0.75rem !important;
        flex-direction: column !important;
    }

    body .btn-shop-all {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9rem !important;
        border-radius: 25px !important;
    }

    body .btn-contact {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.85rem !important;
        border-radius: 25px !important;
    }
}

/* ========================================================================
   5. BLOG CATEGORIES SECTION - COMPACT
   ======================================================================== */

@media (max-width: 767px) {

    body .blog-categories-section,
    body section[class*="blog"] {
        padding: 1.5rem 0 !important;
    }

    /* Grid cards compact */
    body .blog-category-card,
    body [class*="blog"] .card {
        padding: 1rem !important;
        border-radius: 10px !important;
    }

    /* Titres compacts */
    body .blog-category-title,
    body [class*="blog"] h3 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    body .blog-category-desc,
    body [class*="blog"] p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
}

/* ========================================================================
   6. BENEFITS SECTION - COMPACT
   ======================================================================== */

@media (max-width: 767px) {

    body .section-padding.bg-gray-50,
    body section.bg-gray-50 {
        padding: 1.5rem 0 !important;
    }

    /* Grid 1 colonne */
    body .benefit-card-premium {
        flex-direction: row !important;
        padding: 1rem !important;
        gap: 0.875rem !important;
        border-radius: 10px !important;
        margin-bottom: 0.75rem !important;
    }

    body .benefit-icon-box {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 10px !important;
    }

    body .benefit-icon-box svg {
        width: 24px !important;
        height: 24px !important;
    }

    body .benefit-title-premium {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
    }

    body .benefit-desc-premium {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    /* Grid compact */
    body .grid.grid-cols-1.lg\:grid-cols-3 {
        gap: 0.75rem !important;
    }
}

/* ========================================================================
   7. TESTIMONIALS SECTION - COMPACT
   ======================================================================== */

@media (max-width: 767px) {

    body .section-padding.bg-white,
    body section.bg-white {
        padding: 1.5rem 0 !important;
    }

    /* Header compact */
    body .section-padding.bg-white .text-center.mb-16 {
        margin-bottom: 1.25rem !important;
    }

    body .section-padding.bg-white h2 {
        font-size: 1.3rem !important;
        margin-bottom: 0.5rem !important;
    }

    body .section-padding.bg-white > .container > .text-center p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* Cards compact - stack vertical */
    body .testimonial-card-premium {
        padding: 1.25rem !important;
        border-radius: 12px !important;
        margin-bottom: 0.75rem !important;
    }

    body .quote-icon {
        font-size: 3rem !important;
        top: 1rem !important;
        right: 1rem !important;
    }

    /* Product badge compact */
    body .testimonial-content > span {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.65rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Stars compact */
    body .star-rating {
        gap: 0.125rem !important;
        margin-bottom: 0.75rem !important;
    }

    body .star-rating svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Text compact */
    body .testimonial-text {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }

    /* Author compact */
    body .testimonial-content > div[style*="display: flex"] {
        gap: 0.75rem !important;
    }

    body .testimonial-content > div[style*="display: flex"] > div:first-child {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.85rem !important;
    }

    body .testimonial-author-name {
        font-size: 0.9rem !important;
    }

    body .testimonial-location {
        font-size: 0.7rem !important;
    }

    /* CTA compact */
    body .text-center.mt-12 {
        margin-top: 1.5rem !important;
    }

    body .text-center.mt-12 a {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
    }

    body .text-center.mt-12 p {
        font-size: 0.75rem !important;
        margin-top: 0.75rem !important;
    }

    /* Grid testimonials */
    body .grid.grid-cols-1.md\:grid-cols-3 {
        gap: 0.75rem !important;
    }
}

/* ========================================================================
   8. BUSINESS OPPORTUNITY SECTION - COMPACT
   ======================================================================== */

@media (max-width: 767px) {

    body .opportunity-section-premium,
    body section[class*="opportunity"] {
        padding: 1.5rem 0 !important;
    }

    body .opportunity-card,
    body [class*="opportunity"] .card {
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }

    body .opportunity-card h3,
    body [class*="opportunity"] h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    body .opportunity-card p,
    body [class*="opportunity"] p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
}

/* ========================================================================
   9. FAQ SECTION - COMPACT
   ======================================================================== */

@media (max-width: 767px) {

    body .faq-section,
    body section[class*="faq"] {
        padding: 1.5rem 0 !important;
    }

    /* Header compact */
    body .faq-section h2,
    body section[class*="faq"] h2 {
        font-size: 1.3rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* FAQ items compact */
    body .faq-item,
    body [class*="faq"] details {
        padding: 0.875rem 1rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 8px !important;
    }

    body .faq-question,
    body [class*="faq"] summary {
        font-size: 0.9rem !important;
        padding-right: 1.5rem !important;
    }

    body .faq-answer,
    body [class*="faq"] p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        margin-top: 0.5rem !important;
    }
}

/* ========================================================================
   10. CTA SECTION FINAL - COMPACT
   ======================================================================== */

@media (max-width: 767px) {

    body .cta-section-premium {
        padding: 2rem 0 !important;
    }

    /* Header compact */
    body .cta-section-premium .text-center.mb-16 {
        margin-bottom: 1.5rem !important;
    }

    body .cta-section-premium h2 {
        font-size: 1.4rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.25 !important;
    }

    body .cta-section-premium .text-center p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    /* Cards compact - stack vertical */
    body .cta-card-premium {
        padding: 1.25rem !important;
        border-radius: 12px !important;
        margin-bottom: 0.75rem !important;
    }

    body .cta-icon-premium {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }

    body .cta-title-premium {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    body .cta-desc-premium {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
    }

    body .btn-cta-premium {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
    }

    /* Popular badge compact */
    body .cta-card-premium .absolute {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.6rem !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
    }

    /* Grid compact */
    body .cta-section-premium .grid.grid-cols-1.md\:grid-cols-3 {
        gap: 0.75rem !important;
    }
}

/* ========================================================================
   11. SPACING UTILITIES - OVERRIDE TAILWIND
   ======================================================================== */

@media (max-width: 767px) {

    /* Override Tailwind spacing classes */
    body .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    body .py-16,
    body .py-20,
    body .py-24 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    body .mb-16,
    body .mb-12 {
        margin-bottom: 1.25rem !important;
    }

    body .mb-8 {
        margin-bottom: 0.75rem !important;
    }

    body .gap-8 {
        gap: 0.75rem !important;
    }

    body .gap-6 {
        gap: 0.5rem !important;
    }

    /* Text sizes */
    body .text-4xl,
    body .text-5xl {
        font-size: 1.4rem !important;
        line-height: 1.25 !important;
    }

    body .text-3xl {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    body .text-2xl {
        font-size: 1.1rem !important;
        line-height: 1.35 !important;
    }

    body .text-xl {
        font-size: 0.95rem !important;
    }

    body .text-lg {
        font-size: 0.9rem !important;
    }

    body .text-base {
        font-size: 0.85rem !important;
    }
}

/* ========================================================================
   12. ANIMATIONS - OPTIMISÉES MOBILE
   ======================================================================== */

@media (max-width: 767px) {

    /* Animations plus rapides sur mobile */
    body .fade-in-up-premium,
    body .fade-in-featured {
        animation-duration: 0.4s !important;
    }

    /* Delays réduits */
    body .delay-100 { animation-delay: 0.05s !important; }
    body .delay-200 { animation-delay: 0.1s !important; }
    body .delay-300 { animation-delay: 0.15s !important; }
    body .delay-400 { animation-delay: 0.2s !important; }

    /* Réduire les hover transforms sur mobile (touch) */
    body .featured-product-card:hover,
    body .benefit-card-premium:hover,
    body .testimonial-card-premium:hover,
    body .cta-card-premium:hover {
        transform: translateY(-4px) !important;
    }
}

/* ========================================================================
   13. SAFE AREA - IPHONE X+ NOTCH
   ======================================================================== */

@supports (padding: max(0px)) {
    @media (max-width: 767px) {
        body .hero-section-premium {
            padding-top: max(0px, env(safe-area-inset-top)) !important;
        }

        body .cta-section-premium {
            padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ========================================================================
   14. REDUCED MOTION - ACCESSIBILITÉ
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    body .fade-in-up-premium,
    body .fade-in-featured,
    body [class*="fade-in"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body .featured-product-card,
    body .benefit-card-premium,
    body .testimonial-card-premium,
    body .cta-card-premium {
        transition: none !important;
    }
}

/* ========================================================================
   FIN DU FICHIER - HOMEPAGE MOBILE PREMIUM CSS v1.0.0
   ======================================================================== */