/* ===================================================================
   PhoneLigne - Comportements tablette / desktop (mobile-first)
   =================================================================== */

/* -------------------- Tablette (≥ 640px) -------------------- */

@media (min-width: 640px) {

    .site-header .conteneur {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .site-header__accroche {
        display: block;
    }

    h1 {
        font-size: var(--fs-2xl);
    }

    .grille-articles {
        grid-template-columns: repeat(2, 1fr);
    }

    .repertoire__item {
        gap: var(--space-5);
    }

    .repertoire__photo {
        width: 72px;
        height: 72px;
    }
}

/* -------------------- Desktop (≥ 960px) -------------------- */

@media (min-width: 960px) {

    .conteneur {
        padding-inline: var(--space-6);
    }

    .grille-articles {
        grid-template-columns: repeat(3, 1fr);
    }

    .recherche {
        max-width: 480px;
    }

    /* La fiche fournisseur passe en deux colonnes : profil / articles */
    .fiche-fournisseur {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: var(--space-7);
        align-items: start;
    }
}

/* -------------------- Large desktop (≥ 1200px) -------------------- */

@media (min-width: 1200px) {

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