/* =========================================================================
 * Simit & Café — responsive.css
 * UNIQUEMENT les overrides @media. Le design system desktop est dans main.css.
 * Webscale (webscalelab.fr)
 * ========================================================================= */

/* ===== TABLET (<= 1024px) ===== */
@media (max-width: 1024px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
}

/* ===== TABLET / MOBILE (<= 768px) ===== */
@media (max-width: 768px) {

    /* Spacing compression */
    .section { padding: var(--space-xl) 0; }
    .section-sm { padding: var(--space-lg) 0; }
    .container { padding: 0 20px; }

    /* Typography fine-tune */
    h1 { font-size: clamp(30px, 8vw, 42px); }
    h2 { font-size: clamp(24px, 6vw, 32px); }
    h3 { font-size: clamp(18px, 4vw, 22px); }
    p { font-size: 15px; }
    .label { font-size: 11px; letter-spacing: 2px; }

    /* Buttons full-width */
    .btn {
        width: 100%;
        max-width: 340px;
        padding: 14px 28px;
        font-size: 12px;
    }

    /* Nav */
    .hamburger { display: flex; }
    .nav .nav-links { display: none; }
    .nav { padding: 14px 0; }
    .nav.scrolled { padding: 10px 0; }
    .nav-logo { font-size: 18px; }

    /* Hero mobile */
    .hero {
        min-height: 85vh;
        min-height: 85dvh;
        padding: 100px 20px 40px;
        align-items: flex-end;
    }
    .hero-content { max-width: 100%; }
    .hero h1 { font-size: clamp(28px, 9vw, 40px); margin-bottom: 12px; }
    .hero .label { font-size: 11px; margin-bottom: 12px; }
    .hero-sub { font-size: 15px; margin-bottom: 28px; max-width: 100%; }
    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .hero-cta .btn {
        width: 100%;
        max-width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Marquee */
    .marquee { padding: var(--space-sm) 0; }
    .marquee-track { gap: 12px 16px; justify-content: center; }
    .marquee-item { font-size: 11px; letter-spacing: 1.5px; }
    .marquee-dot { width: 3px; height: 3px; }

    /* Products */
    .products-grid { gap: 12px; }
    .product-name { font-size: 13px; padding: 10px 0 2px; }
    .product-tag { font-size: 11px; }

    /* Split sections */
    .split { grid-template-columns: 1fr; min-height: auto; }
    .split-image { aspect-ratio: 4 / 3; min-height: 240px; }
    .split-text { padding: var(--space-lg) 20px; }
    .split-text .label { margin-bottom: 8px; }
    .split-text h2 { margin-bottom: 12px; }
    .split-text p { max-width: 100%; font-size: 15px; }
    .split-text .btn {
        align-self: stretch;
        max-width: 100%;
        margin-top: var(--space-md);
    }
    .split.reverse { direction: ltr; }

    /* Carte PDF */
    .carte-block { padding: 0 8px; }
    .carte-block .subtitle { font-size: 15px; margin-bottom: var(--space-md); }
    .carte-block .btn { max-width: 100%; }
    .carte-note { font-size: 12px; }
    .carte-viewer iframe,
    .carte-viewer embed { height: 70vh; min-height: 480px; }

    /* Gallery */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 3px; }
    .g-tall { grid-row: span 1; }
    .g-wide { grid-column: span 1; }
    .g-item { min-height: 140px; }
    .g-item img { min-height: 140px; }

    /* Reviews */
    .reviews-number { font-size: clamp(40px, 10vw, 56px); }
    .reviews-stars { font-size: 16px; letter-spacing: 4px; }
    .reviews-grid { grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
    .review-text { font-size: 14px; }
    .review-author { font-size: 12px; }

    /* Contact */
    .contact-layout { grid-template-columns: 1fr; gap: var(--space-lg); }
    .contact-info h3 { margin-bottom: var(--space-md); }
    .contact-detail { margin-bottom: var(--space-sm); }
    .contact-detail-label { font-size: 11px; }
    .contact-detail p { font-size: 15px; }

    /* Form */
    .form-group label { font-size: 11px; margin-bottom: 6px; }
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 12px 0;
        font-size: 16px; /* anti-zoom iOS */
    }
    .form-group textarea { min-height: 90px; }
    .form-submit .btn { max-width: 100%; width: 100%; }

    /* Map */
    .map-wrap { margin-top: var(--space-lg); height: 260px; }

    /* Footer */
    .footer { padding: var(--space-md) 0; }
    .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        font-size: 12px;
    }
    .footer-links { gap: var(--space-sm); }

    /* Lightbox */
    .lightbox img { max-width: 96vw; max-height: 85vh; }
    .lightbox-close { top: 12px; right: 12px; font-size: 28px; }

    /* Mobile overlay */
    .mobile-overlay .nav-links { gap: 24px; }
    .mobile-overlay .nav-links a {
        font-size: 18px;
        padding: 12px 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Touch target enforcement */
    a, button, [onclick] { min-height: 44px; }
    .hamburger { min-width: 48px; min-height: 48px; padding: 10px; }
    .g-item { min-height: 120px; }

    /* Section title margins */
    .text-center[style*="margin-bottom: var(--space-xl)"] {
        margin-bottom: var(--space-lg) !important;
    }
}

/* ===== SMALL MOBILE (<= 480px) ===== */
@media (max-width: 480px) {

    .container { padding: 0 16px; }

    .section { padding: var(--space-lg) 0; }

    /* Hero */
    .hero {
        min-height: 80vh;
        min-height: 80dvh;
        padding: 80px 16px 32px;
    }
    .hero h1 { font-size: 28px; }
    .hero-sub { font-size: 14px; line-height: 1.6; margin-bottom: 24px; }

    /* Marquee 2 lignes */
    .marquee-track { gap: 8px 12px; }
    .marquee-item { font-size: 10px; letter-spacing: 1px; }

    /* Products */
    .products-grid { gap: 8px; }
    .product-img-wrap { aspect-ratio: 1 / 1.2; }
    .product-name { font-size: 12px; padding: 8px 0 2px; }
    .product-tag { font-size: 10px; }

    /* Split */
    .split-image { aspect-ratio: 16 / 10; min-height: 200px; }
    .split-text { padding: var(--space-md) 16px var(--space-lg); }

    /* Gallery */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
    .g-item { min-height: 120px; }
    .g-item img { min-height: 120px; }

    /* Reviews */
    .review-card { padding-top: var(--space-sm); }
    .review-text { font-size: 13px; line-height: 1.65; }

    /* Contact form */
    .contact-detail p { font-size: 14px; }
    .form-group input,
    .form-group textarea,
    .form-group select { padding: 10px 0; }

    /* Buttons */
    .btn { padding: 12px 24px; font-size: 11px; letter-spacing: 1.2px; }

    /* Footer */
    .footer-inner { font-size: 11px; }
    .footer-links { flex-direction: column; gap: 8px; align-items: center; }
}