/* =============================================================================
   RESPONSIVE BASE - ETS AAD
   Consolidé depuis: responsive_unified.css, responsive.css, responsive_enhanced.css,
   mobile_fix.css, menu_responsive.css, menu_tablet_optimization.css,
   header_footer_mobile_fix.css, force_responsive_global.css,
   ipad_responsive.css, ipad_fix_global.css, android_tablet_fix.css

   BREAKPOINTS STANDARDISÉS :
     @media (max-width: 480px)                         — petit mobile
     @media (max-width: 768px)                         — mobile/tablet
     @media (min-width: 769px) and (max-width: 1024px) — tablette
     @media (min-width: 1025px)                        — desktop
   ============================================================================= */

/* =============================================================================
   === VARIABLES RESPONSIVE (responsive_unified.css) ===
   ============================================================================= */

:root {
    --mobile-padding: 1rem;
    --tablet-padding: 1.5rem;
    --desktop-padding: 2rem;
    --mobile-font-size: 0.95rem;
    --tablet-font-size: 1rem;
    --desktop-font-size: 1rem;
    --touch-target-min: 44px;
    /* Repli si design-system non chargé (évite #003865 / gris hors palette) */
    --rb-focus: var(--hl-blue-dark, #073652);
    --rb-border: var(--border, #e2e8f0);
    --rb-label: var(--text-primary, #334155);
}

/* =============================================================================
   === BASE TOUS ÉCRANS ===
   ============================================================================= */

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    position: relative;
}

* {
    box-sizing: border-box;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* Scroll smooth */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* =============================================================================
   === FORMULAIRES — BASE RESPONSIVE ===
   ============================================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select,
.form-control,
.form-select,
.form-input {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--rb-border);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--rb-focus);
    outline-offset: 2px;
    border-color: var(--rb-focus);
}

label,
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--rb-label);
    font-size: 0.95rem;
}

.form-group,
.mb-3,
.mb-4 {
    margin-bottom: 1.5rem;
}

.btn,
button,
input[type="submit"],
input[type="button"] {
    min-height: var(--touch-target-min);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-width: 20px;
    min-height: 20px;
    margin-right: 0.5rem;
    cursor: pointer;
}

/* =============================================================================
   === TABLEAUX — BASE RESPONSIVE ===
   ============================================================================= */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.table-responsive table {
    width: 100%;
    min-width: 600px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.table th,
.table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.table th {
    background-color: var(--bg-tertiary, #f9fafb);
    font-weight: 600;
    color: var(--text-primary, #374151);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* =============================================================================
   === GRILLES ET CARTES ===
   ============================================================================= */

.grid,
.stats-grid,
.modules-grid,
.cards-grid,
.roles-grid {
    display: grid;
    gap: 1.5rem;
    width: 100%;
}

.card,
.card-hl,
.role-card,
.module-card,
.stat-card {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

/* =============================================================================
   === LAYOUT CONTAINERS ===
   ============================================================================= */

.container,
.container-fluid,
.content-wrapper,
.page-container,
.dashboard-container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
}

.main-content {
    width: 100%;
    max-width: 100%;
    padding: var(--mobile-padding);
}

/* =============================================================================
   === ROW / COLUMN ===
   ============================================================================= */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.row > * {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* =============================================================================
   === TYPOGRAPHIE RESPONSIVE ===
   ============================================================================= */

h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    line-height: 1.3;
    margin-bottom: 0.875rem;
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

h4 {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    line-height: 1.4;
    margin-bottom: 0.625rem;
}

h5 {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

h6 {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

p, li, span, div {
    font-size: clamp(0.95rem, 1.5vw, 1rem);
    line-height: 1.6;
}

/* =============================================================================
   === MODALES — BASE ===
   ============================================================================= */

.modal-dialog {
    margin: 1rem;
    max-width: 90%;
}

/* =============================================================================
   === MOBILE MENU TOGGLE — BASE ===
   ============================================================================= */

.mobile-menu-toggle {
    display: none !important;
    background: none !important;
    border: none !important;
    color: var(--color-primary) !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 1001 !important;
}

.mobile-menu-toggle:hover {
    background: var(--bg-tertiary) !important;
}

.mobile-menu-toggle:focus {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
}

/* Sidebar overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* User menu */
.user-menu {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-md) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Top header base */
.top-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: fixed !important;
    z-index: 999 !important;
}

/* Footer base */
.footer-hl {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    background: var(--hl-blue-dark) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Utilities */
.hide-mobile { display: block; }
.hide-desktop { display: none; }
.show-mobile-only { display: none; }
.show-desktop-only { display: block; }

/* =============================================================================
   === DESKTOP (min-width: 1025px) ===
   ============================================================================= */

@media (min-width: 1025px) {
    /* Sidebar full */
    .sidebar {
        width: 260px !important;
        transform: translateX(0) !important;
        position: fixed !important;
    }

    .sidebar-header {
        padding: var(--space-lg) !important;
    }

    .sidebar-header h4 {
        font-size: 1.25rem !important;
    }

    .menu-item,
    .menu-group-title {
        padding: var(--space-md) var(--space-lg) !important;
        font-size: 0.95rem !important;
    }

    .menu-subitem {
        padding: var(--space-sm) var(--space-lg) var(--space-sm) calc(var(--space-lg) + 20px + var(--space-sm)) !important;
        font-size: 0.9rem !important;
    }

    .menu-item i,
    .menu-subitem i {
        width: 20px !important;
        margin-right: var(--space-sm) !important;
    }

    .menu-toggle {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    /* Header */
    .top-header {
        left: 260px !important;
        width: calc(100% - 260px) !important;
        height: 56px !important;
        padding: 0 var(--space-xl) !important;
    }

    /* User menu */
    .user-menu {
        gap: var(--space-md) !important;
    }

    .user-menu .dropdown-toggle span {
        display: inline !important;
    }

    /* Footer */
    .footer-hl {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
    }

    .footer-hl .container {
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 var(--space-xl) !important;
    }

    /* Containers */
    .container,
    .container-fluid,
    .content-wrapper,
    .page-container,
    .dashboard-container {
        padding-left: var(--desktop-padding);
        padding-right: var(--desktop-padding);
    }

    .main-content {
        padding: var(--desktop-padding);
    }

    /* Grilles */
    .grid,
    .stats-grid,
    .modules-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .cards-grid,
    .roles-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    /* iPad Pro */
    .sidebar { width: 260px !important; }

    .main-content {
        margin-left: 260px !important;
        padding: 2rem !important;
    }

    .form-row,
    .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    .stats-grid,
    .modules-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }

    .card-hl,
    .modern-card {
        padding: 1.75rem !important;
    }
}

/* =============================================================================
   === TABLETTE (min-width: 769px) and (max-width: 1024px) ===
   ============================================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Sidebar visible sur tablette — sauf page connexion */
    body:not(.page-login) .sidebar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 240px !important;
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        position: fixed !important;
        z-index: 1000 !important;
    }

    .sidebar.collapsed {
        transform: translateX(-240px);
    }

    /* Menu sidebar - Contenu */
    .sidebar-header {
        padding: var(--space-md) var(--space-lg) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: var(--hl-blue-dark) !important;
    }

    .sidebar-header h4 {
        font-size: 1.1rem !important;
        margin: 0 !important;
    }

    /* Menu items tablet */
    .menu-group-title {
        min-height: 48px !important;
        padding: 0.875rem 1rem !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        font-size: 0.8rem !important;
    }

    .menu-group-title:hover { background: rgba(255, 255, 255, 0.12) !important; }
    .menu-group-title:active { background: rgba(255, 255, 255, 0.18) !important; transform: scale(0.98) !important; transition: transform 0.1s ease !important; }

    .menu-group-title i.fa-chevron-down {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        font-size: 0.75rem !important;
    }

    .menu-group-title.expanded i.fa-chevron-down { transform: rotate(180deg) !important; }

    .menu-item,
    .menu-subitem {
        min-height: 48px !important;
        padding: 0.875rem 1rem !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15) !important;
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        align-items: center !important;
        font-size: 0.9rem !important;
    }

    .menu-item:active,
    .menu-subitem:active { transform: scale(0.98) !important; transition: transform 0.1s ease !important; }

    .menu-subitem {
        padding: 0.625rem 1rem 0.625rem 2.5rem !important;
        font-size: 0.85rem !important;
    }

    .menu-subitem.active {
        background: rgba(255, 255, 255, 0.2) !important;
        border-left: 3px solid var(--hl-orange) !important;
    }

    .menu-item i,
    .menu-subitem i {
        width: 20px !important;
        font-size: 1rem !important;
        margin-right: 0.75rem !important;
        opacity: 0.9 !important;
    }

    .menu-group { margin-bottom: 0.5rem !important; }

    .menu-group + .menu-group {
        margin-top: 0.5rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-top: 0.5rem !important;
    }

    /* Menu group content */
    .menu-group-content {
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden !important;
    }

    .menu-group-content.expanded {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        height: auto !important;
    }

    .menu-group-content:not(.expanded) {
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }

    /* Menu toggle */
    .menu-toggle { display: none !important; }
    .mobile-menu-toggle { display: none !important; }
    .sidebar-overlay { display: none !important; }
    .sidebar-overlay.active { display: none !important; }

    /* Scrollbar sidebar tablette */
    .sidebar::-webkit-scrollbar { width: 6px !important; }
    .sidebar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1) !important; }
    .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3) !important; border-radius: 3px !important; }
    .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5) !important; }

    /* Header tablette */
    .top-header {
        left: 240px !important;
        width: calc(100% - 240px) !important;
        height: 65px !important;
        padding: 0 1.5rem !important;
    }

    .mobile-menu-toggle { display: block !important; }

    /* User menu tablette */
    .user-menu { gap: var(--space-sm) !important; }
    .user-menu .dropdown-toggle { padding: 0.5rem 0.75rem !important; font-size: 0.9rem !important; }
    .user-menu .dropdown-toggle span { display: inline !important; }

    /* Main content tablette */
    .main-content {
        margin-left: 240px !important;
        padding: 1.5rem !important;
        width: calc(100% - 240px) !important;
        margin-top: 56px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Override inline margin-left: 0 sur iPad */
    .main-content[style*="margin-left: 0"],
    .main-content[style*="margin-left:0"],
    .page-container[style*="margin-left: 0"],
    .page-container[style*="margin-left:0"],
    .dashboard-container[style*="margin-left: 0"],
    .dashboard-container[style*="margin-left:0"] {
        margin-left: 240px !important;
    }

    body .main-content,
    body .page-container,
    body .dashboard-container {
        margin-left: 240px !important;
        width: calc(100% - 240px) !important;
    }

    /* Containers tablette */
    .container,
    .container-fluid,
    .content-wrapper,
    .page-container,
    .dashboard-container {
        padding-left: var(--tablet-padding);
        padding-right: var(--tablet-padding);
        width: 100% !important;
        max-width: 100% !important;
    }

    .content-wrapper {
        max-width: 100% !important;
        padding: 0 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .page-container,
    .dashboard-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grilles tablette */
    .grid,
    .stats-grid,
    .modules-grid,
    .cards-grid,
    .roles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .form-row,
    .form-grid {
        display: -ms-grid !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }

    .modules-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }

    .col-md-6,
    .col-lg-4,
    .col-lg-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
    }

    .col-md-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    /* Cards tablette */
    .card,
    .card-hl,
    .role-card,
    .module-card,
    .stat-card {
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    .card-hl,
    .modern-card,
    .card {
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        transition: box-shadow 0.3s ease !important;
    }

    .card-hl:hover,
    .modern-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    }

    /* Formulaires tablette */
    .form-hl,
    .form-container,
    .card-hl,
    .card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem !important;
        box-sizing: border-box !important;
    }

    .form-row > *,
    .row > * {
        width: 100% !important;
    }

    .form-hl,
    .form-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem !important;
        box-sizing: border-box !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="tel"],
    input[type="search"],
    textarea,
    select,
    .form-control,
    .form-select,
    .form-input,
    .form-select,
    .form-textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 0.875rem 1rem !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    .form-label { font-size: 0.9rem !important; margin-bottom: 0.625rem !important; }
    .help-text { font-size: 0.8rem !important; margin-top: 0.5rem !important; }

    /* Visibilité */
    .text-muted, .text-secondary { color: #6b7280 !important; }

    /* Focus states tablette */
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        border-color: #4f46e5 !important;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
        outline: none !important;
    }

    /* Hover états tablette */
    .btn-modern:hover,
    .btn-hl:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    /* Boutons tablette */
    .btn,
    button {
        min-height: 44px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }

    .btn-group {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .btn-group .btn {
        flex: 1 1 auto !important;
        margin-bottom: 0.5rem !important;
    }

    .btn-modern,
    .btn-hl,
    .btn-icon,
    a.btn,
    button {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.75rem 1rem !important;
    }

    /* Icônes dans les boutons */
    .btn-modern i,
    .btn-hl i { font-size: 1rem !important; margin-right: 0.5rem !important; }

    .actions-cell { gap: 0.75rem !important; }
    .btn-icon { width: 40px !important; height: 40px !important; }

    /* Tableaux tablette */
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        border-radius: 0.5rem !important;
        border: 1px solid #e5e7eb !important;
        padding: 0.5rem !important;
    }

    .table,
    .table-hl {
        width: 100% !important;
        font-size: 0.95rem !important;
    }

    .table th,
    .table td,
    .table-hl th,
    .table-hl td {
        padding: 0.875rem 0.75rem !important;
        font-size: 0.9rem !important;
    }

    .modern-table th,
    .modern-table td {
        padding: 0.875rem 0.75rem !important;
        font-size: 0.9rem !important;
    }

    /* Modales tablette */
    .modal-dialog {
        margin: 1rem auto !important;
        max-width: 90% !important;
    }

    .modal-content { border-radius: 12px !important; }
    .modal-body { padding: 1.5rem !important; }
    .modal-footer { flex-direction: row !important; justify-content: flex-end !important; }
    .modal-footer .btn { margin: 0 0.5rem !important; min-width: 120px !important; }

    /* Typographie tablette */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.25rem !important; }

    p, li, span { font-size: 1rem !important; line-height: 1.6 !important; }

    /* Touch targets tablette */
    .menu-item,
    .menu-group-title,
    .menu-subitem {
        min-height: 44px !important;
    }

    .menu-toggle,
    .mobile-menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Navigation améliorée tablette */
    .menu-group-title {
        font-size: 0.95rem !important;
        padding: 0.875rem 1rem !important;
    }

    .menu-subitem {
        font-size: 0.9rem !important;
        padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    }

    /* Badges tablette */
    .badge { padding: 0.5rem 0.75rem !important; font-size: 0.85rem !important; }

    /* Alerts tablette */
    .alert { padding: 1rem 1.25rem !important; font-size: 0.95rem !important; }

    /* Page header tablette */
    .page-header {
        margin-bottom: 1.5rem !important;
        padding-bottom: 1rem !important;
        border-bottom: 2px solid #e5e7eb !important;
        margin-bottom: 2rem !important;
    }

    /* Sections tablette */
    .form-section { padding: 1.5rem !important; }

    .stats-grid > *,
    .modules-grid > * { margin-bottom: 0 !important; }

    /* Form actions tablette */
    .form-actions { gap: 1rem !important; margin-top: 2rem !important; padding-top: 1.5rem !important; }

    /* Footer tablette — garder padding vertical + ne pas écraser la grille (voir .row > * ci-dessus) */
    .footer-hl {
        margin-left: 240px !important;
        width: calc(100% - 240px) !important;
        padding: var(--space-xl) 0 var(--space-lg) !important;
        background: var(--hl-blue-dark) !important;
        color: rgba(255, 255, 255, 0.94) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .footer-hl .container { padding: 0 1.5rem !important; }

    .footer-hl .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-xl) !important;
    }

    .footer-hl .row > * {
        width: auto !important;
        min-width: 0 !important;
    }

    .footer-hl .col-md-4:last-child { grid-column: 1 / -1 !important; }

    .footer-hl p,
    .footer-hl .footer-bottom,
    .footer-hl .footer-bottom p {
        color: rgba(255, 255, 255, 0.88) !important;
    }

    .footer-hl a {
        color: rgba(255, 255, 255, 0.96) !important;
    }

    /* Scroll smooth */
    .sidebar,
    .main-content,
    .table-responsive {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }

    /* Overflow tablette */
    body, html { overflow-x: hidden !important; max-width: 100vw !important; }
    img { max-width: 100% !important; height: auto !important; }
    video, iframe { max-width: 100% !important; height: auto !important; }

    /* Android specific */
    * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05) !important; }
    a, button, input[type="button"], input[type="submit"],
    .btn, .menu-item, .menu-group-title, .menu-subitem {
        min-height: 48px !important;
        min-width: 48px !important;
    }

    .sidebar, .main-content, .table-responsive, .clients-table-container {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Fix visibilité Android — hors page connexion */
    body:not(.page-login) .sidebar { visibility: visible !important; opacity: 1 !important; display: block !important; }
    .menu-item, .menu-group-title, .menu-subitem { visibility: visible !important; opacity: 1 !important; }
    .menu-group-content.expanded { visibility: visible !important; opacity: 1 !important; display: block !important; max-height: 1000px !important; }
    .menu-group-title { cursor: pointer !important; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important; touch-action: manipulation !important; }
    .menu-group-title i { visibility: visible !important; opacity: 1 !important; display: inline-block !important; }

    /* Fix zoom Android */
    html { -webkit-overflow-scrolling: touch !important; overflow-scrolling: touch !important; }
}

/* Tablette paysage */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .sidebar { width: 220px !important; }

    .main-content {
        margin-left: 220px !important;
        width: calc(100% - 220px) !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    .top-header {
        left: 220px !important;
        width: calc(100% - 220px) !important;
        height: 60px !important;
        padding: 0 1.25rem !important;
    }

    .sidebar-header { padding: var(--space-sm) var(--space-md) !important; }
    .sidebar-header h4 { font-size: 1rem !important; }

    .menu-group-title {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.8rem !important;
    }

    .menu-item,
    .menu-subitem {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.85rem !important;
    }

    .menu-subitem { padding-left: 2.25rem !important; }

    .form-row,
    .form-grid,
    .stats-grid,
    .modules-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }

    .footer-hl {
        margin-left: 220px !important;
        width: calc(100% - 220px) !important;
        padding: var(--space-lg) 0 var(--space-md) !important;
        background: var(--hl-blue-dark) !important;
        color: rgba(255, 255, 255, 0.94) !important;
    }
    .footer-hl .row { grid-template-columns: repeat(3, 1fr) !important; }
    .footer-hl .row > * { width: auto !important; min-width: 0 !important; }
    .footer-hl .col-md-4:last-child { grid-column: auto !important; }
}

/* iPad Portrait spécifique */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .sidebar { width: 260px !important; }
    .sidebar.collapsed { transform: translateX(-260px); }
    .main-content { margin-left: 260px !important; padding: 1.5rem !important; width: calc(100% - 260px) !important; }
    .top-header { left: 260px !important; width: calc(100% - 260px) !important; }

    .form-row,
    .form-grid,
    .stats-grid,
    .modules-grid,
    .actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }
}

/* =============================================================================
   === MOBILE (max-width: 768px) ===
   ============================================================================= */

@media (max-width: 768px) {
    /* Sidebar masquée */
    .sidebar {
        width: 260px !important;
        transform: translateX(-100%) !important;
        -webkit-transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        -webkit-transition: -webkit-transform 0.3s ease-in-out !important;
        z-index: 2000 !important;
        position: fixed !important;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3) !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }

    .sidebar-header {
        padding: var(--space-md) var(--space-lg) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: var(--hl-blue-dark) !important;
    }

    .sidebar-header h4 { font-size: 1.1rem !important; }

    /* Scrollbar sidebar mobile */
    .sidebar::-webkit-scrollbar { width: 4px !important; }
    .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3) !important; }

    /* Overlay */
    .sidebar-overlay.active {
        display: block !important;
        animation: fadeIn 0.3s ease !important;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Mobile menu toggle visible */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Header mobile */
    .top-header {
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        padding: 0 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
    }

    .top-header .mobile-menu-toggle { order: 1 !important; flex-shrink: 0 !important; }
    .top-header .user-menu { order: 2 !important; flex-shrink: 0 !important; margin-left: auto !important; }

    /* User menu mobile */
    .user-menu { gap: 0.5rem !important; flex-wrap: wrap !important; }
    .user-menu .dropdown-toggle { padding: 0.5rem !important; font-size: 0.85rem !important; min-height: 44px !important; min-width: 44px !important; }
    .user-menu .dropdown-toggle span { display: none !important; }
    .user-menu .dropdown-toggle i { font-size: 1.1rem !important; margin: 0 !important; }
    .user-menu .badge-hl { display: none !important; }
    .user-menu .dropdown-menu { right: 0 !important; left: auto !important; min-width: 200px !important; max-width: calc(100vw - 2rem) !important; margin-top: 0.5rem !important; }
    .user-menu .dropdown-item { padding: 0.75rem 1rem !important; font-size: 0.9rem !important; min-height: 44px !important; display: flex !important; align-items: center !important; }

    /* Main content mobile */
    .main-content,
    .main-content[style*="margin-left"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 56px !important;
    }

    /* Tous éléments avec margin-left inline */
    [style*="margin-left: 260px"],
    [style*="margin-left:260px"],
    [style*="margin-left: 280px"],
    [style*="margin-left:280px"],
    [style*="margin-left: 260px"],
    [style*="margin-left:260px"],
    [style*="margin-left: 240px"],
    [style*="margin-left:240px"],
    [style*="margin-left: 220px"],
    [style*="margin-left:220px"] {
        margin-left: 0 !important;
    }

    /* Containers mobile */
    .container,
    .container-fluid,
    .content-wrapper,
    .page-container,
    .dashboard-container,
    .form-container,
    [class*="container"],
    [class*="wrapper"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Formulaires mobile */
    .form-hl,
    .form,
    form,
    .card-hl,
    .card,
    .form-hl,
    .form-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
    }

    .form-row,
    .row,
    [class*="row"],
    [class*="grid"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .form-row > *,
    .row > *,
    [class*="col-"] {
        width: 100% !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="tel"],
    textarea,
    select,
    .form-control,
    .form-select,
    [class*="input"],
    [class*="select"] {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        -webkit-appearance: none;
        appearance: none;
        padding: 0.75rem 1rem !important;
        box-sizing: border-box !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator { font-size: 18px; }
    textarea { resize: vertical; min-height: 120px; }

    .form-label { font-size: 0.9rem; margin-bottom: 0.5rem; }

    /* Boutons mobile */
    .btn,
    button,
    [type="submit"],
    [type="button"],
    [class*="btn"] {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        margin: 0.25rem 0 !important;
    }

    .btn-group,
    [class*="btn-group"] {
        flex-direction: column !important;
        width: 100% !important;
    }

    .btn-group > * { width: 100% !important; margin-bottom: 0.5rem !important; }

    /* Tables mobile */
    .table-responsive,
    [class*="table"] {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        position: relative;
        border-radius: 8px;
    }

    .table-responsive::after {
        content: '';
        position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
        background: linear-gradient(to left, transparent, rgba(0, 56, 101, 0.12));
        pointer-events: none;
    }

    .table,
    .table-hl,
    table {
        min-width: 600px !important;
        width: 100% !important;
        font-size: 0.875rem !important;
    }

    .table th,
    .table td,
    .table-hl th,
    .table-hl td,
    th, td {
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap !important;
    }

    /* Table card view mobile */
    .table-mobile-cards { display: block; }
    .table-mobile-cards thead { display: none; }
    .table-mobile-cards tbody,
    .table-mobile-cards tr,
    .table-mobile-cards td { display: block; width: 100%; }
    .table-mobile-cards tr { margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; background: var(--bg-card); }
    .table-mobile-cards td { border: none; padding: 0.5rem 0; text-align: left; }
    .table-mobile-cards td:before { content: attr(data-label) ": "; font-weight: 600; color: #6b7280; display: inline-block; min-width: 120px; }

    /* Cards mobile */
    .card,
    .card-hl,
    [class*="card"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
    }

    .stats-grid,
    .modules-grid,
    .cards-grid,
    [class*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    [class*="col-"] {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .col-md-6,
    .col-lg-4,
    .col-lg-6,
    .col-xl-4,
    .col-xl-6 { width: 100%; margin-bottom: 1rem; }

    /* Modales mobile */
    .modal-dialog,
    [class*="modal"] {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
    }

    .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .modal-header { flex-shrink: 0; border-bottom: 1px solid #e5e7eb; padding: 1rem; }
    .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem; }
    .modal-footer { flex-shrink: 0; border-top: 1px solid #e5e7eb; padding: 1rem; flex-direction: column; }
    .modal-footer .btn { width: 100% !important; margin: 0.25rem 0 !important; }

    /* Sections */
    .hero-section,
    .page-header-hl,
    .search-section,
    [class*="hero"],
    [class*="header"] {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Menu */
    .sidebar { width: 260px !important; }
    .menu-item { padding: 0.75rem 1rem; }
    .menu-subitem { padding: 0.625rem 1rem 0.625rem 2.5rem; }
    .menu-item,
    .menu-group-title {
        padding: var(--space-md) var(--space-lg) !important;
        font-size: 0.95rem !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }
    .menu-group-title { font-size: 0.85rem !important; min-height: 48px !important; }
    .menu-subitem {
        padding: var(--space-sm) var(--space-lg) var(--space-sm) calc(var(--space-lg) + 20px + var(--space-sm)) !important;
        font-size: 0.9rem !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    .menu-item i, .menu-subitem i { width: 20px !important; margin-right: var(--space-sm) !important; font-size: 1rem !important; }
    .menu-toggle {
        display: block !important;
        position: absolute !important;
        right: var(--space-md) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: var(--white) !important;
        font-size: 1.25rem !important;
        padding: 0.5rem !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: none !important;
        cursor: pointer !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    .menu-toggle:hover { background: rgba(255, 255, 255, 0.2) !important; }
    .menu-item.active, .menu-subitem.active { background: rgba(255, 255, 255, 0.2) !important; border-left-width: 4px !important; }

    /* Menu group content mobile */
    .menu-group-content {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    .menu-group-content.expanded { max-height: 1000px !important; }

    /* Typographie mobile */
    h1 { font-size: 1.75rem !important; line-height: 1.3 !important; }
    h2 { font-size: 1.5rem !important; line-height: 1.3 !important; }
    h3 { font-size: 1.25rem !important; line-height: 1.4 !important; }
    h4 { font-size: 1.1rem !important; line-height: 1.4 !important; }
    h5 { font-size: 1rem !important; line-height: 1.4 !important; }
    h6 { font-size: 0.95rem !important; line-height: 1.4 !important; }
    p, li, span { font-size: 0.95rem !important; line-height: 1.6 !important; }

    /* Pagination mobile */
    .pagination { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
    .pagination .page-link { padding: 0.5rem 0.75rem; font-size: 0.9rem; }

    /* Dropdown mobile */
    .dropdown-menu { max-width: calc(100vw - 2rem); left: auto !important; right: 1rem !important; }

    /* Utilitaires mobile */
    .hide-mobile { display: none !important; }
    .hide-desktop { display: block !important; }
    .show-mobile-only { display: block !important; }
    .show-desktop-only { display: none !important; }
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    .text-md-center { text-align: center !important; }
    .mb-md-3 { margin-bottom: 1rem !important; }
    .mt-md-3 { margin-top: 1rem !important; }
    .d-mobile-none { display: none !important; }
    .d-mobile-block { display: block !important; }
    .d-mobile-flex { display: flex !important; }
    .d-mobile-grid { display: grid !important; }
    .w-mobile-100 { width: 100% !important; }
    .w-mobile-auto { width: auto !important; }
    .text-mobile-center { text-align: center !important; }
    .text-mobile-left { text-align: left !important; }
    .text-mobile-right { text-align: right !important; }
    .flex-mobile-column { flex-direction: column !important; }
    .flex-mobile-row { flex-direction: row !important; }
    .gap-mobile-sm { gap: 8px !important; }
    .gap-mobile-md { gap: 12px !important; }
    .gap-mobile-lg { gap: 16px !important; }
    .p-mobile-sm { padding: 8px !important; }
    .p-mobile-md { padding: 12px !important; }
    .p-mobile-lg { padding: 16px !important; }
    .m-mobile-sm { margin: 8px !important; }
    .m-mobile-md { margin: 12px !important; }
    .m-mobile-lg { margin: 16px !important; }
    .mb-mobile-0 { margin-bottom: 0 !important; }
    .mt-mobile-0 { margin-top: 0 !important; }
    .w-100-mobile { width: 100% !important; }
    .d-none-mobile { display: none !important; }
    .d-block-mobile { display: block !important; }
    .d-flex-mobile { display: flex !important; }
    .flex-column-mobile { flex-direction: column !important; }
    .text-center-mobile { text-align: center !important; }
    .p-0-mobile { padding: 0 !important; }
    .m-0-mobile { margin: 0 !important; }
    .force-responsive { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; }
    .force-full-width { width: 100% !important; max-width: 100% !important; }
    .force-no-margin { margin-left: 0 !important; margin-right: 0 !important; }
    .force-column { flex-direction: column !important; display: flex !important; }

    /* Espacement */
    .p-3, .p-4, .p-5 { padding: 1rem !important; }
    .m-3, .m-4, .m-5 { margin: 1rem !important; }
    .px-3, .px-4, .px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-3, .py-4, .py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

    /* Footer mobile */
    .footer-hl {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: var(--space-xl) 0 var(--space-md) 0 !important;
        background: var(--hl-blue-dark) !important;
        color: rgba(255, 255, 255, 0.94) !important;
        visibility: visible !important;
        opacity: 1 !important;
        -webkit-font-smoothing: antialiased !important;
    }

    .footer-hl .container { padding: 0 1rem !important; }

    .footer-hl .row {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-lg) !important;
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }

    .footer-hl .col-md-4 { width: 100% !important; margin-bottom: var(--space-md) !important; }
    .footer-hl h5 { font-size: 1.1rem !important; margin-bottom: var(--space-sm) !important; }
    .footer-hl p, .footer-hl ul li { font-size: 0.9rem !important; }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
        padding-top: var(--space-md) !important;
        margin-top: var(--space-lg) !important;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 0.85rem !important;
    }

    /* Performance mobile */
    * { -webkit-tap-highlight-color: rgba(0,0,0,0.1); }
    .card, .btn { transition-duration: 0.2s; }

    /* Accessibilité mobile */
    button:focus, a:focus, input:focus, select:focus, textarea:focus {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

    /* Touch targets mobile */
    a, button, input[type="checkbox"], input[type="radio"], .clickable {
        min-height: 44px;
        min-width: 44px;
    }

    button, a.btn, input[type="submit"], input[type="button"], .clickable {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }

    .btn-hl { min-height: 44px; }

    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

    .mobile-menu-toggle,
    .user-menu .dropdown-toggle,
    .user-menu .dropdown-item { min-height: 44px !important; min-width: 44px !important; }

    /* Overflow mobile */
    html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; }
    * { max-width: 100vw !important; }
    .container, .container-fluid, .row, [class*="container"], [class*="wrapper"] { overflow-x: hidden !important; }

    /* Override width fixes */
    [style*="width: 150px"], [style*="width:150px"],
    [style*="width: 200px"], [style*="width:200px"],
    [style*="width: 300px"], [style*="width:300px"],
    [style*="width: 400px"], [style*="width:400px"],
    [style*="min-width: 1000px"], [style*="min-width:1000px"] {
        width: auto !important;
        min-width: auto !important;
        max-width: 100% !important;
    }

    /* Specific pages */
    .stocks-page, .warehouse-dashboard, .movements-list, .stock-summary,
    .orders-list, .order-form, .order-detail,
    .forecast-new, .forecast-edit, .forecast-list,
    .promotion-workflow, .promotion-dashboard,
    .flotte-dashboard, .vehicle-detail { margin-left: 0 !important; width: 100% !important; }

    .loading-summary-detail .main-content,
    .loading-summary-detail [style*="margin-left: 260px"],
    .loading-summary-detail [style*="margin-left: 280px"],
    .orders-list .main-content,
    .orders-list [style*="margin-left: 260px"],
    .orders-list [style*="margin-left: 280px"],
    .stock-summary .main-content,
    .stock-summary [style*="margin-left: 260px"],
    .stock-summary [style*="margin-left: 280px"],
    .warehouse-dashboard .main-content,
    .warehouse-dashboard [style*="margin-left: 260px"],
    .warehouse-dashboard [style*="margin-left: 280px"],
    .movements-list .main-content,
    .movements-list [style*="margin-left: 260px"],
    .movements-list [style*="margin-left: 280px"] { margin-left: 0 !important; width: 100% !important; }

    .movements-list table { min-width: 600px !important; }

    /* Footer corrections */
    footer[style*="margin-left"] { margin-left: 0 !important; }
    span[style*="margin-left"], .badge[style*="margin-left"], [style*="margin-left"] { margin-left: 0.25rem !important; }
}

/* Mobile paysage */
@media (max-width: 768px) and (orientation: landscape) {
    .sidebar { transform: translateX(-100%) !important; }

    .main-content,
    .main-content[style*="margin-left"] {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .top-header { height: 56px !important; padding: 0 0.75rem !important; }

    .form-row,
    .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .stats-grid,
    .modules-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .form-hl, .form-container, .card-hl, .card { padding: 1rem !important; }

    input[type="text"], input[type="email"], input[type="password"], input[type="number"],
    input[type="date"], input[type="time"], textarea, select, .form-control, .form-select {
        font-size: 16px !important;
        padding: 0.625rem 0.875rem !important;
    }

    .btn, button {
        width: auto !important;
        min-height: 40px !important;
        padding: 0.625rem 1.25rem !important;
        font-size: 0.95rem !important;
    }

    .btn-group { flex-direction: row !important; flex-wrap: wrap !important; }
    .btn-group .btn { flex: 1 1 auto !important; margin-bottom: 0.5rem !important; }

    .table, .table-hl { font-size: 0.85rem !important; }
    .table th, .table td, .table-hl th, .table-hl td { padding: 0.5rem 0.75rem !important; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; }

    h1 { font-size: 1.5rem !important; line-height: 1.3 !important; }
    h2 { font-size: 1.25rem !important; line-height: 1.3 !important; }
    h3 { font-size: 1.1rem !important; line-height: 1.4 !important; }
    h4 { font-size: 1rem !important; line-height: 1.4 !important; }
    p, li, span { font-size: 0.9rem !important; line-height: 1.5 !important; }

    .modal-dialog { margin: 0.5rem auto !important; max-width: 95% !important; }
    .modal-content { border-radius: 8px !important; }
    .modal-body { padding: 1rem !important; max-height: calc(100vh - 200px) !important; overflow-y: auto !important; }
    .modal-footer { flex-direction: row !important; padding: 0.75rem 1rem !important; }
    .modal-footer .btn { margin: 0 0.25rem !important; min-width: 100px !important; }

    .card, .card-hl { padding: 1rem !important; margin-bottom: 0.75rem !important; }

    .p-3, .p-4, .p-5 { padding: 0.75rem !important; }
    .m-3, .m-4, .m-5 { margin: 0.75rem !important; }

    /* Menu mobile paysage */
    .sidebar { width: 260px !important; }
    .sidebar-header { padding: var(--space-sm) var(--space-md) !important; }
    .sidebar-header h4 { font-size: 1rem !important; }
    .menu-item, .menu-group-title { padding: 0.75rem var(--space-md) !important; font-size: 0.9rem !important; min-height: 44px !important; }
    .menu-subitem { padding: 0.625rem var(--space-md) 0.625rem 2.25rem !important; font-size: 0.85rem !important; min-height: 40px !important; }
    .menu-item i, .menu-subitem i { width: 18px !important; font-size: 0.9rem !important; }
    .menu-group-title { font-size: 0.8rem !important; }

    .user-menu .dropdown-toggle span { display: inline !important; font-size: 0.8rem !important; }
    .user-menu .dropdown-toggle { padding: 0.5rem 0.75rem !important; }

    button, a.btn, input[type="submit"], input[type="button"], .btn {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: 10px 14px !important;
    }

    .footer-hl { padding: var(--space-lg) 0 var(--space-sm) 0 !important; }
    .footer-hl .row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-md) !important; }
    .footer-hl .col-md-4:last-child { grid-column: 1 / -1 !important; }
}

/* =============================================================================
   === PETIT MOBILE (max-width: 480px) ===
   ============================================================================= */

@media (max-width: 480px) {
    .sidebar { width: 100% !important; max-width: 320px !important; }
    .sidebar-header { padding: var(--space-sm) var(--space-md) !important; }
    .sidebar-header h4 { font-size: 1rem !important; }
    .menu-item, .menu-group-title { padding: var(--space-sm) var(--space-md) !important; font-size: 0.9rem !important; min-height: 44px !important; }
    .menu-subitem { padding: var(--space-xs) var(--space-md) var(--space-xs) 2rem !important; font-size: 0.85rem !important; min-height: 40px !important; }
    .menu-item i, .menu-subitem i { width: 18px !important; font-size: 0.9rem !important; }
    .menu-group-title { font-size: 0.8rem !important; }

    .top-header { height: 56px !important; padding: 0 0.75rem !important; }

    .user-menu { gap: 0.25rem !important; }
    .user-menu .dropdown-toggle { padding: 0.4rem !important; font-size: 0.8rem !important; }
    .user-menu .dropdown-toggle i { font-size: 1rem !important; }
    .user-menu .dropdown-menu { min-width: 180px !important; font-size: 0.85rem !important; }

    .main-content,
    .form-container,
    .container,
    .dashboard-container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .form-hl, .card-hl, .card { padding: 0.75rem !important; }

    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }
    h4 { font-size: 1rem !important; }

    h1 { font-size: 1.5rem !important; line-height: 1.3 !important; }
    h2 { font-size: 1.25rem !important; line-height: 1.3 !important; }
    h3 { font-size: 1.1rem !important; line-height: 1.4 !important; }
    h4 { font-size: 1rem !important; line-height: 1.4 !important; }
    h5 { font-size: 0.95rem !important; line-height: 1.4 !important; }
    h6 { font-size: 0.9rem !important; line-height: 1.4 !important; }
    p, li { font-size: 0.9rem !important; line-height: 1.6 !important; }

    .btn, button { padding: 0.625rem 0.875rem !important; font-size: 0.95rem !important; }

    .table, .table-hl { font-size: 0.8rem !important; }
    .table th, .table td, .table-hl th, .table-hl td { padding: 0.4rem 0.5rem !important; }

    .badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
    .alert { padding: 0.75rem 1rem; font-size: 0.9rem; }

    .pagination .page-link { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
    .pagination .page-item:not(.active) { display: none; }
    .pagination .page-item.active,
    .pagination .page-item:first-child,
    .pagination .page-item:last-child { display: block; }

    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
    .text-sm-center { text-align: center !important; }
    .w-sm-100 { width: 100% !important; }

    .footer-hl { padding: var(--space-lg) 0 var(--space-sm) 0 !important; }
    .footer-hl .container { padding: 0 0.75rem !important; }
    .footer-hl h5 { font-size: 1rem !important; }
    .footer-hl p, .footer-hl ul li, .footer-bottom { font-size: 0.8rem !important; }
    .footer-hl ul li { margin-bottom: var(--space-xs) !important; }
    .footer-bottom p { font-size: 0.75rem !important; line-height: 1.4 !important; }
}

/* Petit mobile paysage */
@media (max-width: 480px) and (orientation: landscape) {
    .sidebar { width: 100% !important; max-width: 260px !important; }
    .sidebar-header { padding: 0.5rem var(--space-sm) !important; }
    .sidebar-header h4 { font-size: 0.95rem !important; }
    .menu-item, .menu-group-title { padding: 0.5rem var(--space-sm) !important; font-size: 0.85rem !important; min-height: 40px !important; }
    .menu-subitem { padding: 0.4rem var(--space-sm) 0.4rem 1.75rem !important; font-size: 0.8rem !important; min-height: 36px !important; }
    .menu-item i, .menu-subitem i { width: 16px !important; font-size: 0.85rem !important; }
    .menu-group-title { font-size: 0.75rem !important; }

    .form-row, .row { grid-template-columns: 1fr !important; gap: 0.5rem !important; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
    .stats-grid, .modules-grid, .cards-grid { grid-template-columns: 1fr !important; }

    h1 { font-size: 1.25rem !important; }
    h2 { font-size: 1.1rem !important; }
    h3 { font-size: 1rem !important; }
    h4 { font-size: 0.95rem !important; }
    p, li, span { font-size: 0.85rem !important; }

    .top-header { height: 50px !important; padding: 0 0.75rem !important; }
    .btn, button { min-height: 36px !important; padding: 0.5rem 1rem !important; font-size: 0.9rem !important; }
    .table, .table-hl { font-size: 0.8rem !important; }
    .table th, .table td, .table-hl th, .table-hl td { padding: 0.4rem 0.5rem !important; }
}

/* =============================================================================
   === ACCESSIBILITY & PERFORMANCE ===
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body, .sidebar-header, .card, .btn {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* =============================================================================
   === PRINT STYLES ===
   ============================================================================= */

@media print {
    .sidebar,
    .top-header,
    .mobile-menu-toggle,
    .btn,
    button,
    .pagination,
    .sidebar-overlay {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .card, .card-hl {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }

    .table-hl, .table { border-collapse: collapse; }
    .table-hl th, .table-hl td, .table th, .table td { border: 1px solid #000; padding: 8px; }
    a { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
}

/* =============================================================================
   === FLEXBOX RESPONSIVE HELPERS ===
   ============================================================================= */

@media (max-width: 768px) {
    .flex-row-mobile { flex-direction: column; }
    .flex-wrap-mobile { flex-wrap: wrap; }
    .justify-center-mobile { justify-content: center; }
    .align-center-mobile { align-items: center; }
}