/* ==========================================================================
   Responsive — Le Comptoir JunaSol
   Mobile first, breakpoints 560 / 768 / 1024
   ========================================================================== */

/* ---------- Mobile ≤ 900 : menu burger ---------- */
@media (max-width: 900px) {
    .nav-list {
        position: fixed;
        inset: var(--nav-h) 0 0 0;
        background: var(--bg);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-4);
        padding: var(--s-8) var(--s-6);
        transform: translateX(100%);
        transition: transform var(--dur) var(--ease);
        overflow-y: auto;
        z-index: 500;
    }
    .nav-list.is-open {
        transform: translateX(0);
    }
    .nav-list a {
        font-size: 1.25rem;
        font-family: var(--font-display);
        padding: var(--s-3) 0;
    }
    .nav-burger { display: grid; }

    .nav .btn-primary { display: none; }

    .announce-bar {
        font-size: 0.78rem;
        padding: 0 var(--s-4);
        text-align: center;
    }
}

/* ---------- Mobile ≤ 560 ---------- */
@media (max-width: 560px) {
    section { padding: var(--s-16) 0; }
    .container,
    .container-narrow,
    .container-wide { padding: 0 var(--s-4); }

    .hero { min-height: calc(80vh - var(--nav-h)); }
    .hero-content .eyebrow { font-size: 0.72rem; }

    .floating-whatsapp,
    .back-to-top {
        width: 48px; height: 48px;
        bottom: var(--s-4);
    }
    .floating-whatsapp { right: var(--s-4); }
    .back-to-top      { right: calc(var(--s-4) + 56px); }

    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        bottom: var(--s-3);
        width: calc(100% - var(--s-6));
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-2);
    }

    .newsletter-form {
        flex-direction: column;
    }
}

/* ---------- Impression ---------- */
@media print {
    .site-header,
    .site-footer,
    .floating-whatsapp,
    .back-to-top,
    .cookie-banner,
    .announce-bar {
        display: none !important;
    }
    body { background: #fff !important; color: #000 !important; }
}