/* ============================================================
   ELEVEN — Responsive
   Breakpoints: 1100px, 768px, 480px
   ============================================================ */

/* ── Tablet Landscape (≤ 1100px) ── */
@media (max-width: 1100px) {
    .hero-grid,
    .split-layout,
    .steps-grid,
    .savoir-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    h1 {
        font-size: clamp(40px, 6vw, 56px);
    }

    /* Split layout: stack, reset order */
    .split-layout--reverse .split-media,
    .split-layout--reverse .split-content {
        order: unset;
    }
    .split-media {
        max-height: 480px;
    }
    .split-media img {
        aspect-ratio: 16 / 9;
    }

    .floating-phone {
        width: 280px;
        height: 560px;
    }

    .hero-visual {
        display: flex;
        justify-content: center;
    }

    /* Quality row: allow wrap */
    .quality-row {
        gap: var(--space-lg);
    }
    .quality-divider {
        display: none;
    }

    /* Footer: stack */
    .footer-top {
        grid-template-columns: 1fr;
    }
}

/* ── Tablet (≤ 768px) ── */
@media (max-width: 768px) {
    /* Nav */
    .nav-links { display: none; }
    .nav-hamburger { display: flex; }

    .nav-links--open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background: var(--color-bg);
        justify-content: center;
        align-items: center;
        gap: var(--space-xl);
        z-index: 999;
    }
    .nav-links--open a {
        font-size: 16px;
        letter-spacing: 5px;
    }

    .nav-hamburger--open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }
    .nav-hamburger--open span:nth-child(2) { opacity: 0; }
    .nav-hamburger--open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    /* Hero */
    .hero {
        padding: 130px 0 60px;
        min-height: auto;
    }
    .hero-bg-text { font-size: 28vw; }

    /* Stats */
    .stats-ribbon { padding: var(--space-lg) 0; }
    .flex-stats {
        flex-direction: column;
        gap: var(--space-md);
        align-items: center;
    }

    /* Section padding reduction */
    .process-section,
    .expertise-section,
    .savoir-section,
    .eco-section,
    .faq-section {
        padding: var(--space-3xl) 0;
    }
    .testimonial-section {
        padding: var(--space-2xl) 0;
    }

    /* Steps: single column */
    .step-card {
        padding: var(--space-lg);
    }

    /* Savoir cards: single column */
    .savoir-grid {
        gap: var(--space-lg);
    }

    /* Quality row: 2×2 */
    .quality-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
        justify-items: center;
    }
    .quality-divider { display: none; }

    /* Testimonial */
    .testimonial-card blockquote {
        font-size: 20px;
    }

    /* Download CTA */
    .download-section {
        padding: 0 0 var(--space-2xl);
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    .footer-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
    .footer-bottom {
        flex-direction: column;
        gap: var(--space-lg);
        text-align: center;
    }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
    h1 {
        font-size: clamp(32px, 9vw, 44px);
    }

    .hero-desc { font-size: 16px; }

    .hero-cta-row {
        flex-direction: column;
    }
    .hero-cta-row .btn-primary,
    .hero-cta-row .btn-ghost {
        width: 100%;
        justify-content: center;
    }

    .floating-phone {
        width: 240px;
        height: 480px;
        border-width: 8px;
        border-radius: 44px;
    }
    .phone-inner { border-radius: 34px; }

    .price-amount {
        font-size: clamp(36px, 10vw, 52px);
    }

    .btn-primary {
        padding: 18px 28px;
        font-size: 11px;
        width: 100%;
        justify-content: center;
    }

    .section-header h2 {
        font-size: clamp(24px, 6vw, 36px);
    }

    /* Footer nav: stack to 1 col on very small */
    .footer-nav {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .download-cta-row {
        flex-direction: column;
    }
    .download-cta-row .btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Quality: single column */
    .quality-row {
        grid-template-columns: 1fr;
    }
}