/* ============================================================ GHOLAMI V3 - CSS RESPONSIVE MOBILE & TABLETTE Fichier séparé - Ne modifie pas les fichiers originaux Installation: Ajouter dans de index.html : ============================================================ */ /* ============================================================ TABLETTE (768px - 1024px) ============================================================ */ @media screen and (max-width: 1024px) { /* Sidebar réduite */ .sidebar { width: 200px !important; } /* Contenu principal ajusté */ .main { margin-left: 200px !important; padding: 12px !important; } /* Logo sidebar plus petit */ .sidebar-logo { padding: 12px 8px !important; } .sidebar-logo-img { width: 40px !important; height: 35px !important; } .sidebar-logo-text span { font-size: 9px !important; } /* Navigation items */ .nav-item { padding: 10px 12px !important; font-size: 12px !important; } /* Statistiques en 2 colonnes */ .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } /* Formulaires en 2 colonnes */ .form-row { grid-template-columns: repeat(2, 1fr) !important; } /* Tableaux scrollables */ .card table { display: block !important; overflow-x: auto !important; white-space: nowrap !important; } /* Boutons plus compacts */ .btn { padding: 6px 12px !important; font-size: 12px !important; } .btn-xs { padding: 3px 6px !important; font-size: 10px !important; } } /* ============================================================ MOBILE (< 768px) ============================================================ */ @media screen and (max-width: 768px) { /* Masquer sidebar par défaut */ .sidebar { position: fixed !important; left: -280px !important; width: 280px !important; height: 100vh !important; z-index: 1000 !important; transition: left 0.3s ease !important; box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important; } /* Sidebar ouverte (classe ajoutée par JS) */ .sidebar.open { left: 0 !important; } /* Contenu principal pleine largeur */ .main { margin-left: 0 !important; padding: 10px !important; padding-top: 60px !important; } /* Header de page */ .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .page-title { font-size: 18px !important; } /* Actions de page en wrap */ .page-actions { flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; } /* Statistiques en 2 colonnes puis 1 */ .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .stat { padding: 12px !important; } .stat-value { font-size: 20px !important; } .stat-label { font-size: 10px !important; } /* Cartes */ .card { padding: 12px !important; margin-bottom: 12px !important; border-radius: 10px !important; } .card h3 { font-size: 14px !important; } /* Formulaires en 1 colonne */ .form-row { grid-template-columns: 1fr !important; gap: 10px !important; } .form-group { margin-bottom: 12px !important; } .form-label { font-size: 12px !important; } .form-input, .form-select, input, select, textarea { padding: 10px !important; font-size: 14px !important; } /* Tableaux responsive */ .card table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .card table thead th, .card table tbody td { padding: 8px 6px !important; font-size: 11px !important; white-space: nowrap !important; } /* Masquer certaines colonnes sur mobile */ .card table .hide-mobile { display: none !important; } /* Boutons */ .btn { padding: 8px 12px !important; font-size: 12px !important; } .btn-xs { padding: 4px 6px !important; font-size: 10px !important; } /* Graphiques */ .charts { grid-template-columns: 1fr !important; } /* Modal responsive */ .modal-box { width: 95% !important; max-width: 100% !important; margin: 10px !important; padding: 15px !important; max-height: 85vh !important; } .modal-title { font-size: 16px !important; } /* Document view */ .doc-meta { grid-template-columns: 1fr !important; } .doc-body { padding: 12px !important; } /* Stock boxes */ .stock-boxes { flex-direction: column !important; } .stock-box { width: 100% !important; } /* Privileges grid */ .privileges-grid { grid-template-columns: 1fr !important; } /* User section sidebar */ .user-section { padding: 10px !important; } /* Tabs */ .tabs { flex-wrap: wrap !important; gap: 4px !important; } .tab { padding: 8px 12px !important; font-size: 11px !important; flex: 1 1 auto !important; text-align: center !important; } /* Badges */ .badge { padding: 3px 6px !important; font-size: 9px !important; } /* Logo sidebar centré */ .sidebar-logo { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 8px !important; padding: 15px 10px !important; } .sidebar-logo-img { width: 50px !important; height: 40px !important; } .sidebar-logo-text { text-align: center !important; } .sidebar-logo-text span { font-size: 10px !important; } } /* ============================================================ PETIT MOBILE (< 480px) ============================================================ */ @media screen and (max-width: 480px) { /* Statistiques en 1 colonne */ .stats { grid-template-columns: 1fr !important; } .stat { padding: 10px !important; } .stat-value { font-size: 18px !important; } /* Page title encore plus petit */ .page-title { font-size: 16px !important; } /* Boutons en full width */ .page-actions .btn { width: 100% !important; justify-content: center !important; } /* Modal encore plus compact */ .modal-box { padding: 12px !important; margin: 5px !important; } /* Tableaux très compacts */ .card table thead th, .card table tbody td { padding: 6px 4px !important; font-size: 10px !important; } } /* ============================================================ BOUTON MENU MOBILE (à ajouter dans le HTML) ============================================================ */ .mobile-menu-btn { display: none; position: fixed; top: 10px; left: 10px; z-index: 1001; background: linear-gradient(135deg, #0f1a2e, #162447); color: #B8956A; border: 1px solid #B8956A; border-radius: 8px; padding: 10px 14px; font-size: 20px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .mobile-menu-btn:hover { background: #B8956A; color: white; } @media screen and (max-width: 768px) { .mobile-menu-btn { display: block !important; } } /* Overlay quand sidebar ouverte */ .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; } .sidebar-overlay.active { display: block; } /* ============================================================ AMÉLIORATIONS TOUCH ============================================================ */ @media (hover: none) and (pointer: coarse) { /* Éléments cliquables plus grands pour le touch */ .btn, .nav-item, .tab { min-height: 44px !important; } .form-input, .form-select, input, select { min-height: 44px !important; } /* Supprimer les effets hover */ .btn:hover, .nav-item:hover { transform: none !important; } } /* ============================================================ ORIENTATION PAYSAGE MOBILE ============================================================ */ @media screen and (max-width: 900px) and (orientation: landscape) { .sidebar { width: 200px !important; } .sidebar.open { left: 0 !important; } .main { padding-top: 10px !important; } .modal-box { max-height: 90vh !important; } } /* ============================================================ IMPRESSION MOBILE ============================================================ */ @media print { .mobile-menu-btn, .sidebar-overlay { display: none !important; } }