/* ============================================
   FFoodTrucks - Thème UNIFIÉ V3
   Responsive Desktop + iPad | Style Uber Eats
   ============================================ */

/* ===========================================
   1. VARIABLES DE THÈME (UNIFIÉ client + pro)
   =========================================== */

:root,
[data-theme="light"] {
    --bg-primary: #f8f8f8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f0f0;
    --bg-input: #f5f5f5;
    --bg-input-focus: #ffffff;
    --bg-nav: rgba(255,255,255,0.97);
    --bg-card: #ffffff;
    --bg-card-hover: #fafafa;
    --bg-badge: #f0f0f0;
    --bg-overlay: rgba(0,0,0,0.5);
    --bg-dropdown: #ffffff;
    --text-primary: #121212;
    --text-secondary: #666666;
    --text-tertiary: #888888;
    --text-placeholder: #aaaaaa;
    --text-inverse: #ffffff;
    --border-primary: #eeeeee;
    --border-secondary: #dddddd;
    --border-focus: #FF3B30;
    --shadow-soft: 0 4px 15px rgba(0,0,0,0.05);
    --shadow-medium: 0 8px 30px rgba(0,0,0,0.1);
    --shadow-pop: 0 8px 30px rgba(0,0,0,0.15);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-nav: 0 -2px 10px rgba(0,0,0,0.05);
    --accent: #FF3B30;
    --accent-light: rgba(255, 59, 48, 0.1);
    --accent-gradient: linear-gradient(135deg, #FF3B30, #ff5544);
    --success: #4CAF50;
    --success-light: rgba(76, 175, 80, 0.1);
    --warning: #FFC107;
    --warning-light: rgba(255, 193, 7, 0.1);
    --danger: #FF3B30;
    --info: #007AFF;
    --btn-primary-bg: #121212;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #f0f0f0;
    --btn-secondary-text: #333333;
    --slider-bg: #eeeeee;
    --slider-thumb-bg: #ffffff;
    --slider-thumb-border: #FF3B30;
    --skeleton-from: #f0f0f0;
    --skeleton-to: #e0e0e0;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 25px;
    --radius-full: 50px;
    --sidebar-width: 220px;
    color-scheme: light;
}

[data-theme="dark"] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --bg-input: #2a2a2a;
    --bg-input-focus: #333333;
    --bg-nav: rgba(26,26,26,0.97);
    --bg-card: #1e1e1e;
    --bg-card-hover: #252525;
    --bg-badge: #333333;
    --bg-overlay: rgba(0,0,0,0.7);
    --bg-dropdown: #1e1e1e;
    --text-primary: #f0f0f0;
    --text-secondary: #aaaaaa;
    --text-tertiary: #888888;
    --text-placeholder: #666666;
    --text-inverse: #121212;
    --border-primary: #333333;
    --border-secondary: #444444;
    --border-focus: #FF3B30;
    --shadow-soft: 0 4px 15px rgba(0,0,0,0.2);
    --shadow-medium: 0 8px 30px rgba(0,0,0,0.3);
    --shadow-pop: 0 8px 30px rgba(0,0,0,0.4);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-nav: 0 -2px 10px rgba(0,0,0,0.3);
    --accent: #FF3B30;
    --accent-light: rgba(255, 59, 48, 0.15);
    --accent-gradient: linear-gradient(135deg, #FF3B30, #ff0055);
    --success: #4CAF50;
    --success-light: rgba(76, 175, 80, 0.15);
    --warning: #FFC107;
    --warning-light: rgba(255, 193, 7, 0.15);
    --danger: #FF3B30;
    --info: #007AFF;
    --btn-primary-bg: #FF3B30;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #2a2a2a;
    --btn-secondary-text: #cccccc;
    --slider-bg: #333333;
    --slider-thumb-bg: #ffffff;
    --slider-thumb-border: #FF3B30;
    --skeleton-from: #2a2a2a;
    --skeleton-to: #333333;
    color-scheme: dark;
}

/* PRO : alias vers les thèmes client (identiques) */
[data-theme="pro-dark"] { color-scheme: dark; }
[data-theme="pro-dark"] { --bg-primary: #0a0a0a; --bg-secondary: #1a1a1a; --bg-tertiary: #2a2a2a; --bg-input: #2a2a2a; --bg-input-focus: #333333; --bg-nav: rgba(26,26,26,0.97); --bg-card: #1e1e1e; --bg-card-hover: #252525; --bg-badge: #333333; --bg-overlay: rgba(0,0,0,0.7); --bg-dropdown: #1e1e1e; --text-primary: #f0f0f0; --text-secondary: #aaaaaa; --text-tertiary: #888888; --text-placeholder: #666666; --text-inverse: #121212; --border-primary: #333333; --border-secondary: #444444; --border-focus: #FF3B30; --shadow-soft: 0 4px 15px rgba(0,0,0,0.2); --shadow-medium: 0 8px 30px rgba(0,0,0,0.3); --shadow-pop: 0 8px 30px rgba(0,0,0,0.4); --shadow-card: 0 2px 8px rgba(0,0,0,0.2); --shadow-nav: 0 -2px 10px rgba(0,0,0,0.3); --accent: #FF3B30; --accent-light: rgba(255,59,48,0.15); --accent-gradient: linear-gradient(135deg,#FF3B30,#ff0055); --success: #4CAF50; --success-light: rgba(76,175,80,0.15); --warning: #FFC107; --warning-light: rgba(255,193,7,0.15); --danger: #FF3B30; --info: #007AFF; --btn-primary-bg: #FF3B30; --btn-primary-text: #ffffff; --btn-secondary-bg: #2a2a2a; --btn-secondary-text: #cccccc; --slider-bg: #333333; --slider-thumb-bg: #ffffff; --slider-thumb-border: #FF3B30; --skeleton-from: #2a2a2a; --skeleton-to: #333333; }

[data-theme="pro-light"] { color-scheme: light; }
[data-theme="pro-light"] { --bg-primary: #f8f8f8; --bg-secondary: #ffffff; --bg-tertiary: #f0f0f0; --bg-input: #f5f5f5; --bg-input-focus: #ffffff; --bg-nav: rgba(255,255,255,0.97); --bg-card: #ffffff; --bg-card-hover: #fafafa; --bg-badge: #f0f0f0; --bg-overlay: rgba(0,0,0,0.5); --bg-dropdown: #ffffff; --text-primary: #121212; --text-secondary: #666666; --text-tertiary: #888888; --text-placeholder: #aaaaaa; --text-inverse: #ffffff; --border-primary: #eeeeee; --border-secondary: #dddddd; --border-focus: #FF3B30; --shadow-soft: 0 4px 15px rgba(0,0,0,0.05); --shadow-medium: 0 8px 30px rgba(0,0,0,0.1); --shadow-pop: 0 8px 30px rgba(0,0,0,0.15); --shadow-card: 0 2px 8px rgba(0,0,0,0.04); --shadow-nav: 0 -2px 10px rgba(0,0,0,0.05); --accent: #FF3B30; --accent-light: rgba(255,59,48,0.1); --accent-gradient: linear-gradient(135deg,#FF3B30,#ff5544); --success: #4CAF50; --success-light: rgba(76,175,80,0.1); --warning: #FFC107; --warning-light: rgba(255,193,7,0.1); --danger: #FF3B30; --info: #007AFF; --btn-primary-bg: #121212; --btn-primary-text: #ffffff; --btn-secondary-bg: #f0f0f0; --btn-secondary-text: #333333; --slider-bg: #eeeeee; --slider-thumb-bg: #ffffff; --slider-thumb-border: #FF3B30; --skeleton-from: #f0f0f0; --skeleton-to: #e0e0e0; }


/* ===========================================
   2. STYLES GLOBAUX
   =========================================== */

*, *::before, *::after { box-sizing: border-box; }

/* ── Header de base (mobile) ── */
.header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    position: sticky; top: 0; z-index: 100;
}
/* ── Pro pages: header fixe ── */
[data-page-type="pro"] .header {
    padding: 15px 20px;
    background: var(--bg-tertiary);
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
}

/* ── Pro pages: layout de base (mobile-first) ── */
[data-page-type="pro"] body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
}
[data-page-type="pro"] .main-wrapper {
    width: 100%;
    max-width: 600px;
    background: var(--bg-secondary);
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-primary);
    border-right: 1px solid var(--border-primary);
    padding-top: 76px;
}
[data-page-type="pro"] .container {
    padding: 20px;
    flex: 1;
}

/* ── Pro bottom-nav (mobile) ── */
.bottom-nav-pro {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    height: 80px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}
/* Masquer les liens nav tant que les permissions ne sont pas appliquées (anti-flash employé) */
.bottom-nav-pro:not(.nav-ready) .nav-item-pro { visibility: hidden; }

.nav-item-pro {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 10px;
    font-weight: bold;
    gap: 5px;
    cursor: pointer;
}
.nav-item-pro .material-icons { font-size: 22px; }
.nav-item-pro.active { color: var(--accent); }
.nav-spacer-pro { display: none; }
.nav-logout-pro { display: none !important; }
.nav-home-pro { display: none !important; }
.tab-badge {
    background: var(--accent);
    color: white;
    font-size: 10px;
    font-weight: 900;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 2px;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.back-btn { cursor: pointer; color: var(--text-primary); display: flex; align-items: center; }
.page-title { font-size: 20px; font-weight: 900; margin: 0; }
.header h1 { margin: 0; font-size: 20px; font-weight: 900; }

body, .main-wrapper, .header, .top-controls, .bottom-nav, .bottom-nav-pro,
.top-bar, .truck-card, .product-card, .order-card, .cart-item, .profile-card,
.stat-card, .chart-box, .form-input, .submit-btn, .cart-bar, .nav-btn, .nav-item-pro {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-toggle {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--bg-tertiary); border: 1px solid var(--border-primary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}
.theme-toggle:hover { background: var(--bg-secondary); border-color: var(--accent); }
.theme-toggle:active { transform: scale(0.9); }
.theme-toggle-knob {
    display: flex; align-items: center; justify-content: center;
}
.theme-toggle-knob .material-icons { font-size: 18px; color: var(--text-primary); transition: color 0.2s; }


/* ===========================================
   3. TABLETTE (768px - 1023px)
   =========================================== */
@media (min-width: 768px) {
    .main-wrapper { max-width: 900px !important; margin: 0 auto; }

    /* Grilles tablette */
    .trucks-grid, #trucks-list {
        display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 16px;
    }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Carte */
    #map { height: 220px !important; }
    #map.expanded { height: 450px !important; }

    /* Navigation tablette */
    .bottom-nav, .bottom-nav-pro {
        max-width: 900px !important; border-radius: 20px 20px 0 0;
    }

    /* Espacement */
    .container { padding: 25px 30px; }
    .header { padding: 20px 30px; }

    /* Pro pages tablette */
    [data-page-type="pro"] .main-wrapper { max-width: 900px; }
    .bottom-nav-pro { max-width: 900px; }
    [data-page-type="pro"] .container { padding: 25px 40px; }

    /* Cartes */
    .truck-card, .product-card, .order-card { padding: 16px 20px; }
    .truck-img { width: 90px !important; height: 90px !important; }
    .product-img { width: 90px !important; height: 90px !important; }
    .cart-bar { max-width: 860px !important; }
    .style-grid { grid-template-columns: repeat(2, 1fr); }
    .filters-row { gap: 15px; }
    .preview-area { height: 350px !important; }

    /* Grilles de listes */
    #order-list, #orders-container, #orders-content, #history-container {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;
    }
    #product-list {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;
    }
    #product-list > p { grid-column: 1 / -1; }

    /* Labels nav visibles sur tablette */
    .nav-label { display: inline !important; font-size: 11px; font-weight: 700; }
    .nav-btn { flex-direction: column !important; gap: 2px !important; }

    /* Cart page */
    .cart-list { max-width: 700px; margin: 0 auto; }
    .checkout-bar { max-width: 900px !important; }

    /* Profil */
    .profile-card { max-width: 700px; margin-left: auto; margin-right: auto; }

    /* ── Pages Client — Truck cards compactes horizontales dès tablette ── */
    [data-page-type="client"] .truck-card {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left;
        border-radius: var(--radius-md) !important;
        overflow: hidden;
        padding: 10px 12px !important;
        border: 1px solid var(--border-primary) !important;
        box-shadow: var(--shadow-card);
    }
    [data-page-type="client"] #trucks-list > div[style] {
        grid-column: 1 / -1;
    }
    [data-page-type="client"] .truck-card .truck-img {
        width: 70px !important;
        height: 70px !important;
        border-radius: 12px !important;
        margin-right: 10px !important;
        margin-bottom: 0;
        object-fit: cover;
        flex-shrink: 0 !important;
    }
    [data-page-type="client"] .truck-card .truck-info {
        padding: 0;
    }
    [data-page-type="client"] .truck-card .truck-name {
        font-size: 15px;
        margin-bottom: 2px;
    }
    [data-page-type="client"] .truck-card .fav-btn {
        padding: 6px;
    }
    [data-page-type="client"] .truck-card .fav-btn .material-icons { font-size: 20px; }
    [data-page-type="client"] .truck-card .offline-tag {
        top: 8px;
        right: 46px;
    }

    /* Skeleton cards compactes pour tablette (client) */
    [data-page-type="client"] .skeleton-card {
        flex-direction: row;
        padding: 10px 12px;
        overflow: hidden;
        margin-bottom: 0;
    }
    [data-page-type="client"] .skeleton-card .skeleton-img {
        width: 70px;
        height: 70px;
        border-radius: 12px;
        flex-shrink: 0;
    }
    [data-page-type="client"] .skeleton-card .skeleton-lines {
        padding: 0 0 0 10px;
        flex: 1;
        box-sizing: border-box;
    }
}


/* ===========================================
   3.5 TABLETTE+ — SIDEBAR PRO (768px+)
   =========================================== */
@media (min-width: 768px) {

    [data-page-type="pro"] .bottom-nav-pro {
        position: fixed !important;
        bottom: auto !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: var(--sidebar-width) !important;
        max-width: var(--sidebar-width) !important;
        height: 100vh !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding: 0 !important;
        gap: 0 !important;
        border-top: none !important;
        border-right: 1px solid var(--border-primary) !important;
        border-bottom: none !important;
        background: var(--bg-tertiary) !important;
        z-index: 1000;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 2px 0 20px rgba(0,0,0,0.06);
    }

    [data-page-type="pro"] .bottom-nav-pro::before {
        content: "FFoodTrucks";
        display: block;
        font-size: 18px;
        font-weight: 900;
        font-style: italic;
        color: var(--text-primary);
        padding: 18px 16px;
        border-bottom: 1px solid var(--border-primary);
        letter-spacing: -0.5px;
        flex-shrink: 0;
    }

    [data-page-type="pro"] .bottom-nav-pro::after {
        content: "Espace Gérant";
        display: block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--text-tertiary);
        padding: 12px 16px 8px;
        flex-shrink: 0;
    }

    [data-page-type="pro"] .nav-item-pro {
        flex: none !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        padding: 14px 20px !important;
        margin: 1px 0;
        font-size: 13px !important;
        gap: 10px !important;
        border-radius: 0 !important;
        border-left: 3px solid transparent;
        color: var(--text-secondary);
        text-decoration: none;
        transition: all 0.15s ease;
        box-sizing: border-box;
        min-height: 44px;
        font-weight: 600;
    }

    [data-page-type="pro"] .nav-item-pro:hover {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }

    [data-page-type="pro"] .nav-item-pro.active {
        background: rgba(255,59,48,0.06);
        color: var(--accent);
        border-left-color: var(--accent);
        font-weight: 800;
    }

    [data-page-type="pro"] .nav-item-pro.active .material-icons {
        color: var(--accent);
    }

    [data-page-type="pro"] .nav-item-pro .material-icons {
        font-size: 20px;
        flex-shrink: 0;
    }

    [data-page-type="pro"] .nav-spacer-pro { flex: 1 !important; display: block !important; }
    [data-page-type="pro"] .nav-logout-pro {
        border-top: 1px solid var(--border-primary);
        color: var(--text-tertiary) !important;
        display: flex !important;
    }
    [data-page-type="pro"] .nav-home-pro { display: flex !important; }

    [data-page-type="pro"] .main-wrapper:has(.bottom-nav-pro) {
        padding-left: var(--sidebar-width) !important;
        padding-bottom: 0 !important;
        box-sizing: border-box;
        min-height: 100vh;
    }

    [data-page-type="pro"] .top-bar,
    [data-page-type="pro"] .header {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    [data-page-type="pro"] .container {
        padding: 24px 28px !important;
        box-sizing: border-box;
        max-width: 100%;
    }

    [data-page-type="pro"] body { padding-bottom: 0 !important; }

    .bottom-nav, .bottom-nav-pro { padding-bottom: 0 !important; }

    [data-page-type="pro"] .bottom-nav-pro::-webkit-scrollbar { width: 3px; }
    [data-page-type="pro"] .bottom-nav-pro::-webkit-scrollbar-thumb {
        background: var(--border-secondary); border-radius: 3px;
    }
}

/* ===========================================
   4. DESKTOP (1024px+)
   =========================================== */
@media (min-width: 1024px) {

    /* ─── 4.1 RESET ─── */
    body { display: block !important; }
    .main-wrapper {
        max-width: 100% !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    /* ─── 4.2 BACK BUTTONS CACHÉS ─── */
    .back-btn, #btn-back { display: none !important; }
    [data-page-type="pro"] .header > div[onclick]:first-child { display: none !important; }
    .truck-header > div[onclick*="index"] { display: none !important; }

    /* ─── 4.3 TYPO ─── */
    .section-title, .page-title { font-size: 24px !important; }
    h1, .header h1 { font-size: 28px !important; }
    h2, .header h2 { font-size: 24px !important; }

    /* ─── 4.4 INPUTS ─── */
    .form-input, .input-field, .search-input,
    textarea.form-input, textarea.input-field {
        font-size: 15px !important; padding: 14px 16px !important;
    }

    #map { height: 280px !important; border-radius: var(--radius-xl) !important; }
    #map.expanded { height: 500px !important; }
    .preview-area { height: 400px !important; }
    .chart-bar-container { height: 180px !important; }
    .form-row-desktop { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

    /* Conteneurs centrés avec max-width */
    .main-content { max-width: 1200px; margin: 0 auto; }


    /* Sidebar PRO : déplacé dans @media (min-width: 768px) ci-dessus */

    [data-page-type="pro"] .container {
        padding: 35px 50px !important;
    }

    /* Grilles Pro */
    [data-page-type="pro"] #order-list {
        display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px;
    }
    [data-page-type="pro"] .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    /* #product-list : géré par foodtruck_carte.css (.products-grid auto-fill) */
    [data-page-type="pro"] #product-list > p { grid-column: 1 / -1; }
    [data-page-type="pro"] .tags-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    [data-page-type="pro"] .save-btn {
        position: fixed;
        bottom: 30px !important;
        left: calc(var(--sidebar-width) + 50%) !important;
        transform: translateX(calc(-50%)) !important;
        max-width: 500px;
        z-index: 200;
    }


    /* ═══════════════════════════════════════
       4.6 PAGES CLIENT — TOP NAV UBER EATS
       ═══════════════════════════════════════ */

    [data-page-type="client"] .main-wrapper {
        max-width: 1200px !important;
        margin: 0 auto !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* Bottom-nav → Top-bar pleine largeur style Uber Eats */
    [data-page-type="client"] .bottom-nav {
        position: fixed !important;
        bottom: auto !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 64px !important;
        border-top: none !important;
        border-bottom: 1px solid var(--border-primary) !important;
        border-radius: 0 !important;
        background: var(--bg-nav) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        z-index: 9999;
        box-shadow: 0 1px 8px rgba(0,0,0,0.04);
        padding: 0 40px !important;
        padding-bottom: 0 !important;
        box-sizing: border-box;
        justify-content: center !important;
        gap: 6px;
    }

    /* Logo dans la nav desktop */
    [data-page-type="client"] .bottom-nav .nav-logo {
        display: flex !important;
        align-items: center;
        margin-right: auto;
        font-size: 20px;
        font-weight: 900;
        font-style: italic;
        color: var(--text-primary);
        letter-spacing: -0.5px;
        cursor: pointer;
        white-space: nowrap;
        padding: 0 15px 0 0;
    }
    [data-page-type="client"] .bottom-nav .nav-logo .accent { color: var(--accent); }

    /* Boutons nav avec labels */
    [data-page-type="client"] .nav-btn {
        flex-direction: row !important;
        gap: 6px;
        border-radius: var(--radius-sm);
        padding: 10px 18px;
        width: auto; height: auto;
        min-width: auto; min-height: 40px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-secondary);
    }
    [data-page-type="client"] .nav-btn .material-icons { font-size: 20px; }
    [data-page-type="client"] .nav-btn .nav-label {
        display: inline !important;
        font-size: 14px;
        font-weight: 600;
    }
    [data-page-type="client"] .nav-btn:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    [data-page-type="client"] .nav-btn.active {
        background: var(--accent-light) !important;
        color: var(--accent) !important;
        box-shadow: none !important;
    }
    [data-page-type="client"] .nav-btn.active .material-icons {
        color: var(--accent) !important;
    }
    [data-page-type="client"] .nav-btn.active .nav-label {
        color: var(--accent) !important;
    }

    /* Toggle thème dans la nav desktop */
    [data-page-type="client"] .bottom-nav .nav-theme-toggle {
        display: flex !important;
        margin-left: auto;
        align-items: center;
    }

    /* Contenu décalé sous la top-nav (seulement si bottom-nav présente) */
    [data-page-type="client"] .main-wrapper:has(.bottom-nav) {
        padding-top: 64px !important;
    }

    /* Header page : pas sticky, scroll normal + cacher toggle (déjà dans la top-nav) */
    [data-page-type="client"] .header {
        position: relative !important;
        top: auto !important;
    }
    [data-page-type="client"] .header .theme-toggle {
        display: none !important;
    }

    /* Search bar sticky sous la top-nav */
    [data-page-type="client"] .top-controls {
        position: sticky !important;
        top: 64px !important;
        z-index: 900;
    }

    [data-page-type="client"] body { padding-bottom: 0 !important; }

    /* ── Grilles Client ── */
    [data-page-type="client"] .trucks-count {
        justify-content: center !important;
        font-size: 14px !important;
    }
    [data-page-type="client"] #trucks-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px;
    }

    /* Truck cards compactes horizontales sur desktop */
    [data-page-type="client"] .truck-card {
        flex-direction: row !important;
        align-items: center !important;
        padding: 12px 14px !important;
        border-radius: var(--radius-md) !important;
        border: 1px solid var(--border-primary) !important;
        box-shadow: var(--shadow-card);
    }
    [data-page-type="client"] .truck-card .truck-img {
        width: 72px !important;
        height: 72px !important;
        border-radius: 14px !important;
        margin: 0 12px 0 0 !important;
        flex-shrink: 0 !important;
        object-fit: cover;
    }
    [data-page-type="client"] .truck-card .truck-info {
        flex: 1;
        min-width: 0;
        padding: 0 !important;
    }
    [data-page-type="client"] .truck-card .truck-name {
        font-size: 15px;
        font-weight: 800;
        margin-bottom: 3px;
        gap: 8px;
    }
    [data-page-type="client"] .truck-card .truck-name > span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }
    [data-page-type="client"] .truck-card .truck-tags {
        font-size: 12px;
        line-height: 1.4;
    }
    [data-page-type="client"] .truck-services {
        display: flex !important;
    }
    [data-page-type="client"] .truck-card .fav-btn {
        padding: 6px !important;
        flex-shrink: 0;
    }
    [data-page-type="client"] .truck-card .fav-btn .material-icons { font-size: 22px; }
    [data-page-type="client"] .truck-card .offline-tag,
    [data-page-type="client"] .truck-card .event-tag {
        top: 8px;
        right: 46px;
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 6px;
    }

    /* Product cards desktop */
    [data-page-type="client"] .product-card { padding: 18px 22px; }
    [data-page-type="client"] .product-img,
    [data-page-type="client"] .p-img {
        width: 110px !important; height: 110px !important;
        border-radius: var(--radius-md) !important;
    }

    [data-page-type="client"] .menu-grid {
        grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important;
    }

    /* Orders/Profile grilles */
    [data-page-type="client"] #orders-container,
    [data-page-type="client"] #orders-content {
        display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px;
    }
    [data-page-type="client"] #history-container {
        display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px;
    }
    [data-page-type="client"] .info-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    [data-page-type="client"] .style-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Checkout / Cart desktop */
    [data-page-type="client"] .checkout-bar {
        max-width: 700px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 20px !important;
        border-radius: var(--radius-xl) !important;
        box-shadow: var(--shadow-pop) !important;
    }
    [data-page-type="client"] .cart-float {
        bottom: 30px; max-width: 500px;
    }

    /* Cart page layout */
    [data-page-type="client"] .cart-list {
        max-width: 750px;
        margin: 0 auto;
    }

    /* Modal desktop centré */
    [data-page-type="client"] .modal-overlay { align-items: center !important; }
    [data-page-type="client"] .modal-content {
        max-width: 650px !important; height: 80vh !important;
        border-radius: var(--radius-xl) !important;
        margin: auto; box-shadow: var(--shadow-pop);
    }

    /* Pages auth (pas de bottom-nav) : centré étroit */
    [data-page-type="client"] .main-wrapper:not(:has(.bottom-nav)) {
        max-width: 500px !important;
    }
    [data-page-type="client"] .main-wrapper:not(:has(.bottom-nav)) > *:first-child {
        margin-top: 0 !important;
    }

    /* Profil page desktop */
    [data-page-type="client"] .profile-card {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Menu page desktop : header plus grand + cacher toggle dupliqué */
    [data-page-type="client"] .truck-header {
        height: 280px !important;
    }
    [data-page-type="client"] .truck-header > div:has(.theme-toggle) {
        display: none !important;
    }

    /* Cat nav sticky sous la top-nav */
    [data-page-type="client"] .cat-nav {
        position: sticky !important;
        top: 64px !important;
        z-index: 50;
    }

    /* Reviews section */
    [data-page-type="client"] .reviews-section {
        max-width: 800px;
        margin: 0 auto;
    }


    /* ═══════════════════════════════════════
       4.7 HOVER & POLISH
       ═══════════════════════════════════════ */

    .truck-card, .product-card, .order-card, .product-item,
    .stat-card, .profile-card, .section-box, .chart-box, .summary-box {
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
    }

    .truck-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: var(--shadow-medium) !important;
    }
    .product-card:hover, .product-item:hover {
        transform: translateY(-2px); box-shadow: var(--shadow-medium);
    }
    .order-card:hover {
        transform: translateY(-2px); box-shadow: var(--shadow-medium);
    }
    .stat-card:hover {
        transform: translateY(-2px); box-shadow: var(--shadow-soft);
    }

    #toast-container {
        bottom: auto !important; top: 80px;
        right: 30px; left: auto !important; transform: none !important;
    }

    .bottom-nav { padding-bottom: 0 !important; }
}


/* ===========================================
   4.7 DESKTOP LARGE — SIDEBAR 240px (1200px+)
   =========================================== */
@media (min-width: 1200px) {
    :root { --sidebar-width: 240px; }
}


/* ===========================================
   5. GRAND ÉCRAN (1400px+)
   =========================================== */
@media (min-width: 1400px) {
    [data-page-type="client"] .main-wrapper:has(.bottom-nav) { max-width: 1400px !important; }
    [data-page-type="client"] #trucks-list { grid-template-columns: repeat(3, 1fr) !important; }
    [data-page-type="client"] .truck-card .truck-img { width: 76px !important; height: 76px !important; }
    [data-page-type="client"] .checkout-bar { max-width: 700px !important; }
    [data-page-type="client"] .menu-grid { grid-template-columns: repeat(3, 1fr) !important; }
    [data-page-type="pro"] #order-list { grid-template-columns: repeat(3, 1fr) !important; }
    /* #product-list : géré par foodtruck_carte.css */
    [data-page-type="pro"] .container { max-width: 100%; }
}


/* ===========================================
   6. TRÈS GRAND ÉCRAN (1800px+)
   =========================================== */
@media (min-width: 1800px) {
    [data-page-type="client"] .main-wrapper:has(.bottom-nav) { max-width: 1600px !important; }
    [data-page-type="client"] #trucks-list { grid-template-columns: repeat(4, 1fr) !important; }
    [data-page-type="client"] .truck-card .truck-img { width: 80px !important; height: 80px !important; }
    [data-page-type="pro"] #order-list { grid-template-columns: repeat(4, 1fr) !important; }
}


/* ===========================================
   7. PWA / APP-LIKE
   =========================================== */

.bottom-nav, .bottom-nav-pro { padding-bottom: env(safe-area-inset-bottom, 0); }
.main-wrapper { padding-top: env(safe-area-inset-top, 0); }

button, .nav-btn, .nav-item-pro, .tab, .cat-tab, .dropdown-btn, .dropdown-item,
.fav-btn, .add-btn, .qty-btn, .back-btn, .btn-back, .theme-toggle {
    min-height: 44px; min-width: 44px;
}

input, select, textarea { font-size: 16px !important; }

html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

::selection { background: var(--accent-light); color: var(--accent); }

/* Focus visible pour accessibilité clavier */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
button:focus-visible, .nav-btn:focus-visible, .nav-item-pro:focus-visible,
.dropdown-btn:focus-visible, .dropdown-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Skip to content (a11y) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 20px;
    background: var(--accent);
    color: white;
    padding: 10px 20px;
    border-radius: 0 0 10px 10px;
    z-index: 100000;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
}

@media (min-width: 768px) {
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg-primary); }
    ::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
}

.cat-nav::-webkit-scrollbar, .menu-nav::-webkit-scrollbar { display: none; }
.cat-nav, .menu-nav { -ms-overflow-style: none; scrollbar-width: none; }


/* ===========================================
   8. ANIMATIONS
   =========================================== */

@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-to) 50%, var(--skeleton-from) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

/* Skeleton cards prédéfinies */
.skeleton-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--border-primary);
    margin-bottom: 15px;
}
.skeleton-img {
    width: 70px; height: 70px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-to) 50%, var(--skeleton-from) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-to) 50%, var(--skeleton-from) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w100 { width: 100%; }

/* Skeleton vertical pour desktop */
@media (min-width: 1024px) {
    [data-page-type="client"] .skeleton-card {
        flex-direction: column;
        padding: 0;
        overflow: hidden;
    }
    [data-page-type="client"] .skeleton-card .skeleton-img {
        width: 100%;
        height: 180px;
        border-radius: 0;
    }
    [data-page-type="client"] .skeleton-card .skeleton-lines {
        padding: 14px 16px;
        width: 100%;
        box-sizing: border-box;
    }
}


/* ===========================================
   9. TOASTS
   =========================================== */

#toast-container {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; flex-direction: column; gap: 10px;
    width: 90%; max-width: 400px; pointer-events: none;
}

.toast {
    background: var(--bg-card); color: var(--text-primary); padding: 16px;
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex; align-items: center; gap: 12px;
    animation: slideUpFade 0.3s ease-out forwards;
    border: 1px solid var(--border-primary); pointer-events: auto;
}

.toast.success { border-left: 5px solid var(--success); }
.toast.error { border-left: 5px solid var(--accent); }
.toast.info { border-left: 5px solid var(--text-tertiary); }
.toast.warning { border-left: 4px solid #FF9500; }
.toast.warning .toast-icon { color: #FF9500; }
.toast-icon { font-size: 20px; }
.toast.success .toast-icon { color: var(--success); }
.toast.error .toast-icon { color: var(--accent); }

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut { to { opacity: 0; transform: translateY(-20px); } }


/* ===========================================
   10. STYLES COMMUNS PARTAGÉS
   =========================================== */

/* Body par défaut */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
}

/* Formulaires */
.form-group { margin-bottom: 15px; }
.form-group label,
.form-label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 6px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.form-input,
.input-field {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: border-color 0.3s;
}
.form-input:focus,
.input-field:focus { border-color: var(--accent); }
.form-input::placeholder,
.input-field::placeholder { color: var(--text-placeholder); }

/* Boutons principaux */
.submit-btn {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.submit-btn:hover { opacity: 0.9; }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.submit-btn:active { transform: scale(0.98); }

/* Logo */
.logo-text {
    font-size: 22px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -1px;
    color: var(--text-primary);
}
.logo-text span { color: var(--accent); }

/* Bouton retour */
.back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: 0.2s;
}
.back-btn:hover { background: var(--bg-card-hover); }

/* Titre de page */
.page-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--text-primary);
}

/* Liens retour */
.back-link {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: 0.3s;
}
.back-link:hover { color: var(--accent); }

/* Bandeau hors-ligne */
.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--accent);
    color: white;
    text-align: center;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: slideDown 0.3s ease-out;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.offline-banner .material-icons { font-size: 18px; }
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Animations réutilisables */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ===========================================
   11. ÉLÉMENTS RESPONSIFS MASQUÉS/VISIBLES
   =========================================== */

/* Labels de navigation — masqués en mobile */
.nav-label { display: none; }

/* Logo dans la barre de nav — masqué en mobile */
.nav-logo { display: none; }
.nav-logo .accent { color: var(--accent); }

/* Toggle thème dans la nav — masqué en mobile */
.nav-theme-toggle { display: none; }

/* Desktop layout helpers */
.desktop-only { display: none; }
.mobile-only { display: block; }
.tablet-only { display: none; }

/* Titre de page visible uniquement sur desktop (remplace le header caché) */
.desktop-page-title {
    display: none;
}
@media (min-width: 1024px) {
    .desktop-page-title {
        display: block !important;
        padding: 28px 40px 8px;
    }
    .desktop-page-title h1 {
        font-size: 28px !important;
        font-weight: 900;
        margin: 0;
        color: var(--text-primary);
    }
}

@media (min-width: 768px) {
    .tablet-only { display: block; }
}

@media (min-width: 1024px) {
    .desktop-only { display: block !important; }
    .mobile-only { display: none !important; }
}


/* ===========================================
   12. CART DESKTOP LAYOUT
   =========================================== */
@media (min-width: 1024px) {
    .cart-desktop-layout {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 30px;
        max-width: 1100px;
        margin: 0 auto;
        align-items: start;
    }
    .cart-desktop-layout .cart-items-col {
        min-width: 0;
    }
    .cart-desktop-layout .cart-summary-col {
        position: sticky;
        top: 90px;
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        padding: 24px;
        border: 1px solid var(--border-primary);
        box-shadow: var(--shadow-card);
    }
}


/* ===========================================
   13. MENU PAGE DESKTOP LAYOUT
   =========================================== */
@media (min-width: 1024px) {
    .menu-desktop-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
    .menu-desktop-layout {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 30px;
        align-items: start;
    }
    .menu-desktop-layout .menu-main-col {
        min-width: 0;
    }
    .menu-desktop-layout .menu-side-col {
        position: sticky;
        top: 90px;
    }
}


/* ===========================================
   14. PROFIL DESKTOP LAYOUT
   =========================================== */
@media (min-width: 1024px) {
    .profil-desktop-layout {
        max-width: 900px;
        margin: 0 auto;
    }
    .profil-header-desktop {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 30px 0;
    }
}


/* ===========================================
   15. LEGAL DRAWER — Bouton info + tiroir légal
   (Partagé sur toutes les pages)
   =========================================== */

/* ── Groupe droite header ── */
.header-right-group { display: flex; align-items: center; gap: 10px; }

/* ── Bouton info ── */
.legal-btn {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
    border-radius: 50% !important;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    display: flex !important; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    color: var(--text-secondary);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    padding: 0 !important;
    box-sizing: content-box !important;
    appearance: none; -webkit-appearance: none;
}
.legal-btn:hover { background: var(--bg-secondary); border-color: var(--accent); color: var(--accent); }
.legal-btn:active { transform: scale(0.88); }
.legal-btn .material-icons { font-size: 20px; pointer-events: none; }

/* Bouton dans la bottom-nav (desktop uniquement) */
.legal-btn-nav { display: none !important; }

/* ── Overlay backdrop ── */
.legal-overlay {
    position: fixed; inset: 0;
    background: var(--bg-overlay);
    z-index: 99990;   /* au-dessus du bottom-nav (9999) */
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.legal-overlay.show { opacity: 1; pointer-events: all; }

/* ── Bottom sheet (mobile/tablet) ── */
.legal-drawer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--bg-secondary);
    border-radius: 24px 24px 0 0;
    z-index: 99991;   /* au-dessus du bottom-nav (9999) */
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-pop);
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 85vh;    /* fallback navigateurs anciens */
    max-height: 85dvh;   /* dvh = hauteur viewport dynamique */
    overflow-y: auto;
}
.legal-drawer.open { transform: translateY(0); }

/* Handle tactile */
.legal-drawer-handle {
    width: 44px; height: 5px;
    background: var(--border-secondary);
    border-radius: 5px;
    margin: 14px auto 20px;
    flex-shrink: 0;
}

/* Header du drawer */
.legal-drawer-header {
    display: flex; align-items: center; gap: 14px;
    padding: 0 22px 18px;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 6px;
}
.legal-drawer-header-icon {
    width: 46px; height: 46px;
    background: var(--accent-light);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.legal-drawer-header-icon .material-icons { font-size: 24px; color: var(--accent); }
.legal-drawer-title {
    font-size: 18px; font-weight: 900; font-style: italic;
    color: var(--text-primary); margin: 0 0 2px; letter-spacing: -0.5px;
}
.legal-drawer-subtitle { font-size: 12px; color: var(--text-tertiary); font-weight: 500; margin: 0; }

/* Liens */
.legal-link {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 22px;
    text-decoration: none; color: var(--text-primary);
    transition: background 0.15s; cursor: pointer;
}
.legal-link:hover { background: var(--bg-tertiary); }
.legal-link:active { background: var(--accent-light); }

.legal-link-icon {
    width: 44px; height: 44px;
    background: var(--bg-tertiary); border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.15s;
}
.legal-link-icon .material-icons { font-size: 21px; color: var(--text-secondary); transition: color 0.15s; }
.legal-link:hover .legal-link-icon { background: var(--accent-light); }
.legal-link:hover .legal-link-icon .material-icons { color: var(--accent); }

.legal-link-text { flex: 1; }
.legal-link-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.legal-link-sub { font-size: 12px; color: var(--text-tertiary); font-weight: 500; }
.legal-link-arrow { font-size: 18px; color: var(--text-placeholder); flex-shrink: 0; }

/* Séparateur */
.legal-drawer-separator { height: 1px; background: var(--border-primary); margin: 6px 22px; }

/* Footer */
.legal-drawer-footer {
    padding: 14px 22px 0;
    border-top: 1px solid var(--border-primary);
    margin-top: 6px; text-align: center;
}
.legal-drawer-footer p { font-size: 12px; color: var(--text-tertiary); margin: 0; }

/* ── Desktop : dropdown ancré en haut à droite ── */
@media (min-width: 1024px) {

    /* Bouton dans la nav desktop (client) */
    .legal-btn-nav {
        display: flex !important;
        margin-left: 8px;
    }

    /* Bouton info dans la sidebar pro */
    .legal-nav-pro-item {
        margin-top: auto !important;
        border-top: 1px solid var(--border-primary) !important;
        color: var(--text-tertiary) !important;
    }
    .legal-nav-pro-item:hover { color: var(--accent) !important; }

    /* Le drawer devient un dropdown */
    .legal-drawer {
        position: fixed;
        bottom: auto;
        top: 72px;
        right: 16px; left: auto;
        width: 310px;
        border-radius: 20px;
        padding-bottom: 16px;
        transform: translateY(-8px);
        opacity: 0; pointer-events: none;
        transition: transform 0.22s ease, opacity 0.22s ease;
        max-height: calc(100vh - 90px);
    }
    .legal-drawer.open {
        transform: translateY(0);
        opacity: 1; pointer-events: all;
    }
    .legal-drawer-handle { display: none; }
    .legal-overlay { display: none !important; }
}