/* ═══════════════════════════════════════════════════════════
   JOKKO Services — Responsive universel
   S'applique à TOUTES les pages sauf index.html (géré par JS)
   Breakpoints : ≤ 480px (mobile), ≤ 360px (très petit)
   ═══════════════════════════════════════════════════════════ */

/* ── Sécurité anti-débordement horizontal ── */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ════════════════════════════════════════
   MOBILE ≤ 480px
   ════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── AUTH (inscription, connexion, bienvenue) ── */
    .auth-container {
        padding: 24px 18px !important;
        border-radius: 14px !important;
    }
    .auth-container h2 { font-size: 18px !important; }

    /* ── SERVICES (services_techniques, livraison, etc.) ── */
    .service-card {
        padding: 16px 14px !important;
        border-radius: 14px !important;
    }
    .service-card > img  { width: 55px !important; margin-bottom: 6px !important; }
    .service-card h1     { font-size: 16px !important; margin-bottom: 4px !important; }
    .service-card p      { font-size: 12px !important; margin-bottom: 8px !important; }
    .service-list        { margin-top: 8px !important; }
    .service-list li     { margin-bottom: 5px !important; font-size: 12px !important; }
    .back-link           { padding: 8px 14px !important; font-size: 12px !important; margin-top: 12px !important; }

    /* ── NAVBAR (dashboard) ── */
    .navbar {
        padding: 10px 14px !important;
    }
    .nav-logo img  { height: 28px !important; }
    .nav-logo span { font-size: 12px !important; }
    .nav-nom       { font-size: 12px !important; }
    .btn-logout    { padding: 5px 10px !important; font-size: 11px !important; }

    /* ── CONTENU dashboard ── */
    .content { padding: 16px 12px 60px !important; }
    .section  { margin-bottom: 20px !important; }

    /* ── STATS GRID : 3 colonnes → 2 colonnes ── */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .stat-number { font-size: 20px !important; }
    .stat-label  { font-size: 9px !important; }

    /* ── HERO client/prestataire ── */
    .hero { padding: 20px 14px !important; margin-bottom: 16px !important; }
    .hero h2 { font-size: 16px !important; }
    .hero p  { font-size: 12px !important; }

    /* ── FICHE PRESTATAIRE ── */
    .fiche-hero {
        padding: 18px 16px !important;
        gap: 14px !important;
        border-radius: 14px !important;
    }
    .fiche-avatar { width: 56px !important; height: 56px !important; font-size: 24px !important; }
    .fiche-nom    { font-size: 16px !important; }
    .fiche-spec   { font-size: 11px !important; }
    .photos-fiche-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .wa-numero-ok     { font-size: 18px !important; }
    .wa-numero-masque { font-size: 18px !important; }

    /* ── CAT GRID client ── */
    .cat-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .cat-card  { padding: 12px 10px !important; }
    .cat-card .emoji { font-size: 20px !important; }
    .cat-card .label { font-size: 11px !important; }

    /* ── CARDS generiques ── */
    .white-card { padding: 14px !important; }
    .info-row   { font-size: 12px !important; }

    /* ── CGU / Politique / Comment fonctionne ── */
    .cgu-container,
    .cf-container,
    .politique-container {
        padding: 16px 14px !important;
    }

    /* ── COMMENT FONCTIONNE ── */
    .cf-hero    { padding: 28px 16px !important; }
    .cf-hero h1 { font-size: 20px !important; }
    .cf-etape   { padding: 16px !important; }
    .cf-step-num { font-size: 28px !important; }

    /* ── ONBOARDING ── */
    .onboarding-container { padding: 0 14px !important; }
    .grid-choices {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .choice-card { padding: 20px 16px !important; }

    /* ── TOPBAR vitrine (pages services) ── */
    .top-bar { padding: 8px 12px !important; }
    .btn-auth { padding: 8px 14px !important; font-size: 12px !important; margin-right: 8px !important; }

    /* ── FIL ANNONCES chips ── */
    .chips-bar { gap: 6px !important; padding: 8px 12px !important; }
    .chip { padding: 5px 10px !important; font-size: 11px !important; }

    /* ── SIGNALEMENT ── */
    .signal-modal { padding: 22px 16px 32px !important; }
    .signal-title { font-size: 14px !important; }

    /* ── MON ABONNEMENT ── */
    .abo-card { padding: 18px 14px !important; }
    .abo-price { font-size: 28px !important; }

    /* ── BOUTONS génériques trop larges ── */
    .btn-wa-action  { padding: 12px !important; font-size: 13px !important; }
    .btn-kyc        { padding: 11px !important; font-size: 12px !important; }
    .btn-publier-cta { padding: 12px 16px !important; font-size: 13px !important; }
    .btn-cta-service { padding: 12px 24px !important; font-size: 13px !important; }

    /* ── ADMIN ── */
    .admin-sidebar { width: 220px !important; }
    .admin-card    { padding: 14px !important; }
}

/* ════════════════════════════════════════
   TRÈS PETIT ≤ 360px (Samsung A, SE compact)
   ════════════════════════════════════════ */
@media (max-width: 360px) {

    .auth-container   { padding: 18px 14px !important; }
    .service-card     { padding: 12px 12px !important; }
    .service-card > img { width: 45px !important; margin-bottom: 4px !important; }
    .service-card h1  { font-size: 15px !important; }
    .service-list li  { margin-bottom: 3px !important; font-size: 11px !important; }
    .stats-grid       { grid-template-columns: 1fr 1fr !important; }
    .fiche-hero       { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .fiche-avatar     { width: 48px !important; height: 48px !important; font-size: 20px !important; }
    .cat-grid         { grid-template-columns: 1fr !important; }
    .nav-nom          { display: none !important; }
    .content          { padding: 12px 10px 60px !important; }
}