/* =============================================
   ATOM CRAFT BEER — CSS Responsive
   Breakpoints :
     - Tablette large : 1200px
     - Tablette       : 1024px
     - Mobile large   : 768px
     - Mobile         : 480px
   ============================================= */

/* ---- Tablette large (max 1200px) ---- */
@media (max-width: 1200px) {

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3.2rem;
    }

    .footer__col--brand {
        grid-column: 1 / -1;
    }
}

/* ---- Tablette (max 1024px) ---- */
@media (max-width: 1024px) {

    h1 { font-size: 5.6rem; }
    h2 { font-size: 3.2rem; }
    h3 { font-size: 2.4rem; }

    /* Header : masquer le topbar */
    .header__topbar {
        display: none;
    }

    /* Navigation : menu mobile en overlay */
    .header__nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--white);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 999;
        overflow-y: auto;
    }

    .header__nav.header__nav--open {
        display: flex;
    }

    .header__nav-list {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
        width: 100%;
        padding: 2rem;
    }

    .header__nav-list li a {
        font-size: 2.4rem;
        padding: 1.2rem 2rem;
        display: block;
    }

    /* Afficher le burger */
    .header__burger {
        display: flex;
        position: relative;
        z-index: 1000;
    }

    /* Grille footer : 2 colonnes */
    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Mobile large (max 768px) ---- */
@media (max-width: 768px) {

    h1 { font-size: 4rem; }
    h2 { font-size: 2.8rem; }
    h3 { font-size: 2.2rem; }

    .container {
        padding: 0 1.6rem;
    }

    /* Footer : 1 colonne */
    .footer__grid {
        grid-template-columns: 1fr;
    }

    .footer__bottom {
        flex-direction: column;
        text-align: center;
        gap: 1.2rem;
    }

    .footer__legal {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.6rem;
    }

    /* Panier header */
    .header__cart-count {
        font-size: 0.9rem;
    }
}

/* ---- Mobile (max 480px) ---- */
@media (max-width: 480px) {

    h1 { font-size: 3.2rem; }
    h2 { font-size: 2.4rem; }

    .btn {
        font-size: 1.4rem;
        padding: 1rem 1.6rem;
    }

    /* 404 */
    .error-404__code {
        font-size: 8rem;
    }

    .error-404__title {
        font-size: 2.8rem;
    }
}