/* =====================================================
   GUIDE SAUNA PORTABLE - CSS RESPONSIVE
   Mobile-First Design
   ===================================================== */

/* Tablet (1024px et moins) */
@media (max-width: 1024px) {
    .container {
        padding: 0 1.5rem;
    }

    .hero-grid,
    .method-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        max-width: 780px;
    }

    .profile-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* Mobile (768px et moins) */
@media (max-width: 768px) {
    /* Header Mobile */
    .header-content {
        position: relative;
    }
    
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }
    
    .main-nav.active {
        display: block;
    }

    body.nav-open .site-header {
        box-shadow: var(--shadow-xl);
    }
    
    .nav-list {
        flex-direction: column;
        gap: 0;
    }
    
    .nav-link {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid var(--color-border);
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Hero Mobile */
    .hero {
        padding: 2rem 0;
    }

    .hero-grid {
        gap: 1.25rem;
    }
    
    .hero-title {
        font-size: 2.05rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-stats {
        display: none;
    }
    
    .hero-cta {
        flex-direction: column;
    }

    .hero-callout {
        display: none;
    }
    
    .btn-large {
        width: 100%;
    }
    
    /* Products Mobile */
    .products-grid {
        grid-template-columns: 1fr;
    }

    .profile-grid,
    .content-grid,
    .score-grid,
    .proof-strip {
        grid-template-columns: 1fr;
    }
    
    .product-card {
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Guides Mobile */
    .guides-grid {
        grid-template-columns: 1fr;
    }
    
    /* Trust Mobile */
    .trust-grid {
        grid-template-columns: 1fr;
    }
    
    /* Newsletter Mobile */
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-input {
        width: 100%;
    }
    
    /* Footer Mobile */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Sections */
    .products-section,
    .guides-section,
    .decision-section,
    .comparison-section,
    .method-section,
    .trust-section,
    .newsletter-section,
    .faq-section {
        padding: 2rem 0;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
}

/* Small Mobile (480px et moins) */
@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    
    .hero {
        padding: 1.5rem 0 1rem;
    }
    
    .hero-title {
        font-size: 1.9rem;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    .logo-tagline {
        display: none;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .product-title {
        font-size: 1.25rem;
    }
    
    .price {
        font-size: 1.5rem;
    }
    
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.938rem;
    }
    
    .product-actions {
        flex-direction: column;
    }
    
    .product-actions .btn {
        width: 100%;
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 2rem 0;
    }
    
    .hero-stats {
        flex-direction: row;
        gap: 2rem;
    }
}

/* Print Styles */
@media print {
    .site-header,
    .mobile-menu-toggle,
    .newsletter-section,
    .site-footer {
        display: none;
    }
    
    .container {
        max-width: 100%;
    }
    
    a {
        text-decoration: underline;
    }
}