/* Optimisations pour mobile et suppression du flou */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; backface-visibility: hidden; } body { font-size: 16px; line-height: 1.5; text-size-adjust: 100%; } /* Amélioration de la sidebar pour mobile */ .sidebar { position: fixed; top: 0; left: -250px; width: 250px; height: 100%; z-index: 1050; transition: all 0.3s ease; overflow-y: auto; } .sidebar.show { left: 0; box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1); } .offcanvas-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000; opacity: 0.5; } /* Responsive tables */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; } /* Boutons tactiles optimisés */ .btn, button { min-height: 44px; min-width: 44px; padding: 10px 16px; font-size: 16px; touch-action: manipulation; } /* Amélioration des formulaires pour mobile */ .form-control, select { font-size: 16px; /* Empêche le zoom sur iOS */ min-height: 44px; } /* Optimisation des cartes pour mobile */ .card { margin-bottom: 1rem; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.375rem; } /* Media queries spécifiques */ @media (max-width: 768px) { body { font-size: 14px; } .container-fluid { padding-left: 10px; padding-right: 10px; } .table td, .table th { padding: 0.5rem; } .btn-sm { min-height: 36px; padding: 8px 12px; } .display-4 { font-size: 2rem; } h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } } @media (max-width: 576px) { .col-xs-6 { flex: 0 0 50%; max-width: 50%; } .col-xs-12 { flex: 0 0 100%; max-width: 100%; } .btn-group-vertical { width: 100%; } .btn-group-vertical > .btn { width: 100%; margin-bottom: 5px; } } /* Correction spécifique pour iOS */ @supports (-webkit-touch-callout: none) { .sidebar { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } } /* Animation de transition fluide */ .fade-in { animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .slide-in { animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }