/* ============================================================
   classements-mobile.css — Responsive MOBILE (portrait + paysage)
   À charger APRÈS classements.css
   Cible uniquement les appareils tactiles à petit écran via
   (pointer: coarse) — un desktop reste géré par classements.css.
   ============================================================ */

/* ---------- MOBILE PORTRAIT (tactile, ≤767px, portrait) ---------- */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 767px) {
    .classements-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
        padding: .75rem;
    }
}

/* Mobile portrait — écrans réduits (téléphones standards) */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
    #card-top-commerces,
    #card-top-populaire,
    #card-top-progression,
    #card-top-semaine,
    #card-top-favori,
    #card-top-visites { max-width: 100%; }

    .tc-img  { height: 68px; }
    .tc-name { font-size: .70rem; }
    .tc-note { font-size: .70rem; }
}

/* Mobile portrait — très petits téléphones */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 400px) {
    .tc-img        { height: 58px; }
    .tc-rank       { width: 20px; height: 20px; font-size: .6rem; }
    .tc-favori-btn { width: 20px; height: 20px; }
}

/* ---------- MOBILE PAYSAGE (tactile, ≤767px, paysage) ---------- */
@media (pointer: coarse) and (orientation: landscape) and (max-width: 767px) {
    .classements-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
        padding: .5rem .75rem;
    }

    #card-top-commerces,
    #card-top-populaire,
    #card-top-progression,
    #card-top-semaine,
    #card-top-favori,
    #card-top-visites { max-width: 100%; }

    .tc-img        { height: 58px; }
    .tc-name       { font-size: .68rem; }
    .tc-note       { font-size: .68rem; }
    .tc-rank       { width: 20px; height: 20px; font-size: .6rem; }
    .tc-favori-btn { width: 20px; height: 20px; }
}