/* ==========================================================================
   Breakpoints — Mobile First : le style.css couvre le mobile,
   ces règles étendent/adaptent l'affichage à partir des tablettes/desktop.
   ========================================================================== */

@media (min-width: 768px) {
    .main-nav {
        display: flex;
        gap: 28px;
        font-size: 0.85rem;
        letter-spacing: 0.03em;
    }

    .burger { display: none; }

    .hero { padding: 140px 20px; }
    .hero h1 { font-size: 3rem; }

    .footer-inner {
        grid-template-columns: repeat(4, 1fr);
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }

    .values-inner {
        grid-template-columns: repeat(3, 1fr);
        text-align: left;
    }

    .product-layout {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .hero h1 { font-size: 3.4rem; }

    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .product-layout {
        grid-template-columns: 3fr 2fr;
    }
}