/* ════════════════════════════════════════════════════════
   CMCI OBILI — RESPONSIVE
   Règles responsive globales pour le base.html actuel
   (topbar, sidebar droit, drawer auth, accordéons, footer)
   ════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   1. DESKTOP LARGE (≥1400px)
   ════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
    :root { --container-max: 1320px; }
}

/* ════════════════════════════════════════════════════════
   2. DESKTOP / TABLET LARGE (992px - 1199.98px)
   La nav desktop (.cmci-nav-links) ne s'affiche qu'à partir
   de xl (1200px, classe Bootstrap d-xl-flex) -> entre 992 et
   1199px, le hamburger est seul visible. On resserre juste
   la topbar pour laisser plus de place au logo.
   ════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .cmci-brand-slogan { display: none; }
}

/* ════════════════════════════════════════════════════════
   3. TABLET (768px - 991.98px)
   ════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .cmci-topbar { padding: 0 var(--sp-2); }
    .cmci-sidebar { width: 360px; }
    .auth-drawer { width: 380px; }
}

/* ════════════════════════════════════════════════════════
   4. MOBILE (≤767.98px)
   ════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    :root { --nav-h: 64px; }
    body { padding-top: var(--nav-h); }

    /* Topbar resserrée */
    .cmci-topbar { padding: 0 0.9rem; gap: 0.6rem; }
    .cmci-brand { gap: 0.5rem; padding: 0.15rem 0; }
    .cmci-brand-logo { height: 38px; width: 38px; font-size: 0.95rem; }
    .cmci-brand-name { font-size: 0.92rem; }
    .cmci-brand-slogan { display: none; }
    .cmci-topbar.scrolled { height: 56px; }

    /* Sidebar et drawer occupent (presque) tout l'écran */
    .cmci-sidebar { width: 92vw; max-width: 92vw; }
    .auth-drawer  { width: 100vw; max-width: 100vw; }

    /* Header du sidebar plus compact */
    .sb-header { padding: 1rem 1.1rem; }
    .sb-user-block { padding: 0.85rem 1.1rem; }

    /* Sous-menus accordéon : un peu moins de retrait/padding */
    .sb-sub-link { padding: 0.6rem 0.9rem 0.6rem 2.4rem; font-size: 0.88rem; }
    .sb-acc-toggle { padding: 0.7rem 1.1rem; font-size: 0.9rem; }

    /* Drawer auth : tabs et corps resserrés */
    .auth-drawer-body { padding: 1.4rem 1.15rem; }
    .auth-tab { padding: 0.8rem; font-size: 0.85rem; }

    /* Footer : colonnes empilées (Bootstrap gère déjà col-12/col-md),
       on ajuste juste les espacements verticaux */
    .cmci-footer { padding-top: 2.5rem; }
    .f-logo-block { margin-bottom: 0.85rem; }
}

/* ════════════════════════════════════════════════════════
   5. PETIT MOBILE (≤575.98px)
   ════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .icon-btn { width: 36px; height: 36px; font-size: 0.9rem; }
    .cmci-ham { width: 36px; height: 36px; font-size: 1rem; }

    /* Boutons connexion/inscription topbar (visiteur) compacts */
    .btn-topbar-join,
    .btn-topbar-login { padding: 0.45rem 0.85rem; font-size: 0.78rem; }

    /* Sélecteur de thème : grille au lieu d'une seule ligne qui déborde */
    .sb-theme-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; }
    .sb-swatch { width: 100%; height: 30px; border-radius: var(--r-sm); }

    /* Boutons langue empilent mieux si texte long */
    .sb-lang-btn { font-size: 0.74rem; padding: 0.4rem 0.3rem; }
}

/* ════════════════════════════════════════════════════════
   6. ACCESSIBILITÉ — zones tactiles minimales (mobile/tablette)
   ════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .sb-link, .sb-sub-link, .sb-acc-toggle, .sb-support-link { min-height: 44px; }
    .icon-btn, .cmci-ham { min-width: 40px; min-height: 40px; }
}

/* ════════════════════════════════════════════════════════
   7. IMPRESSION
   ════════════════════════════════════════════════════════ */
@media print {
    .cmci-topbar,
    .cmci-sidebar,
    .auth-drawer,
    .cmci-overlay,
    .flash-wrap { display: none !important; }
    body { padding-top: 0; background: #fff !important; color: #000 !important; }
    .cmci-footer { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}