/* ═══════════════════════════════════════════════════════
   DEVISVOX — BASE.CSS
   Design tokens partagés + règles globales layout
   Chargé sans media query (s'applique à tous les breakpoints)
   ═══════════════════════════════════════════════════════ */

/* ── Tokens V2 partagés ──────────────────────────────── */
:root {
    --v2-accent:   #FF6B00;
    --v2-success:  #10B981;
    --v2-warning:  #F59E0B;
    --v2-danger:   #DC2626;
    --v2-text:     #0F172A;
    --v2-text2:    #475569;
    --v2-text3:    #94A3B8;
    --v2-border:   #E2E8F0;
    --v2-border2:  #CBD5E1;
    --v2-bg:       #F9FAFB;
    --v2-bg2:      #F1F5F9;
    --v2-r-sm:     14px;
    --v2-r-md:     18px;
    --v2-tr:       .18s ease;
    --v2-font:     -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    --v2-sh:       0 1px 4px rgba(0,0,0,.07);
    --v2-sh-md:    0 4px 16px rgba(0,0,0,.09);
}

/* ── Layout mobile global ────────────────────────────── */
@media (max-width: 768px) {
    #header        { display: none !important; }
    .main-content  { margin-top: 0 !important; }
    .nav-desktop   { display: none !important; }
    #sidebar       { display: none !important; }
    #bottom-nav    { display: flex !important; }
    button:not(.mic-main):not(.bell-btn):not(.btn-edit):not(.vc-mic-main),
    a { min-height: 44px; min-width: 44px; }
    body { font-size: 16px; }
    html { scroll-behavior: smooth; }

    /* Pages V2 — hauteur viewport */
    #devis-page, #factures-page, #dashboard-page,
    #menu-page, #assistant-page, #vocal-mobile-page {
        height: calc(100dvh - var(--bottom-nav-height, 70px));
        max-height: calc(100dvh - var(--bottom-nav-height, 70px));
        overflow: hidden;
        padding: 0 !important;
    }
}

/* ── Layout tablette global ──────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    :root { --sidebar-width: 200px; }
    #sidebar { width: var(--sidebar-width); }

    #devis-page, #factures-page, #dashboard-page,
    #menu-page, #assistant-page {
        height: calc(100vh - var(--header-height, 70px));
        overflow: hidden;
        padding: 0 !important;
    }

    .ia-fab     { display: none !important; }
    #bottom-nav { display: none !important; }

    /* Bottom sheet → dropdown centré */
    .v2-bs-overlay { background: rgba(0,0,0,.2); }
    .v2-bs {
        position: fixed; left: 50%; top: 50%; right: auto; bottom: auto;
        width: 360px; max-height: 80vh; overflow-y: auto;
        border-radius: 18px; padding: 0 0 12px;
        box-shadow: 0 8px 40px rgba(0,0,0,.18);
        transform: translate(-50%, -50%) scale(.92); opacity: 0;
        transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s ease;
    }
    .v2-bs.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    .v2-bs-btn   { padding: 13px 16px; font-size: 15px; }
    .v2-bs-title { font-size: 12px; padding: 0 20px 12px; }
}

/* ── Layout desktop global ───────────────────────────── */
@media (min-width: 1025px) {
    :root {
        --sidebar-width:     250px;
        --header-height:     70px;
        --bottom-nav-height: 0px;
    }

    #header                    { height: var(--header-height); padding-left: var(--sidebar-width); }
    .header-container          { padding: 0 var(--spacing-xl); }
    .logo h1                   { font-size: 24px; }
    .nav-desktop, .hamburger   { display: none; }

    #sidebar {
        display: block; position: fixed; top: 0; left: 0;
        width: var(--sidebar-width); height: 100vh;
        background-color: var(--bg-secondary);
        border-right: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm); z-index: 200;
        overflow-y: auto; padding-top: var(--spacing-xl);
    }
    .sidebar-nav { display: flex; flex-direction: column; gap: var(--spacing-xs); padding: 0 var(--spacing-md); }
    .sidebar-link { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border-radius: var(--border-radius-sm); color: var(--text-secondary); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); transition: var(--transition-fast); position: relative; }
    .sidebar-link .icon        { font-size: 22px; min-width: 24px; text-align: center; }
    .sidebar-link:hover        { background-color: var(--bg-primary); color: var(--text-primary); transform: translateX(4px); }
    .sidebar-link.active       { background-color: var(--accent-orange); color: white; }
    .sidebar-link.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 70%; background-color: white; border-radius: 0 4px 4px 0; }
    #sidebar::-webkit-scrollbar        { width: 6px; }
    #sidebar::-webkit-scrollbar-track  { background: transparent; }
    #sidebar::-webkit-scrollbar-thumb  { background: var(--border-color); border-radius: 3px; }

    .main-content { margin-left: var(--sidebar-width); margin-top: var(--header-height); min-height: calc(100vh - var(--header-height)); padding: var(--spacing-xl); transition: margin-left var(--transition-normal); }
    .container    { max-width: 1400px; margin: 0 auto; }

    .bottom-nav             { display: none; }
    #menu-mobile, #overlay-menu { display: none !important; }
    .footer                 { display: none; }
    .cookie-banner.show     { bottom: 0; }
    button:hover            { opacity: 0.9; }
    a:hover                 { opacity: 0.85; }
    button, a, .nav-link, .sidebar-link { cursor: pointer; }

    #devis-page, #factures-page, #dashboard-page,
    #menu-page, #assistant-page {
        height: calc(100vh - var(--header-height));
        overflow: hidden; padding: 0 !important;
    }
    .ia-fab     { display: none !important; }
    #bottom-nav { display: none !important; }

    /* Bottom sheet → modal centré */
    .v2-bs-overlay { background: rgba(0,0,0,.35); }
    .v2-bs {
        position: fixed; left: 50%; top: 50%; right: auto; bottom: auto;
        width: 480px; max-height: 75vh; overflow-y: auto;
        border-radius: 20px; padding: 0 0 16px;
        box-shadow: 0 12px 48px rgba(0,0,0,.22);
        transform: translate(-50%, -50%) scale(.9); opacity: 0;
        transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .25s ease;
    }
    .v2-bs.open    { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    .v2-bs-handle  { display: none; }
    .v2-bs-btn     { padding: 14px 20px; font-size: 15.5px; }
    .v2-bs-title   { font-size: 12px; padding: 16px 24px 14px; }
    .v2-bs-actions { padding: 6px 16px; }

    .vocal-modal { left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); align-items: flex-start; justify-content: flex-start; }
    .vocal-modal-content { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

@media (min-width: 1400px) {
    .container    { max-width: 1600px; }
    .main-content { padding: var(--spacing-xxl); }
}