/** * inactivity-modal.css * * Styles pour le modal d'inactivité centré * Utilisé sur toutes les pages de l'application * * Ce fichier doit être chargé EN DERNIER dans le * pour garantir la priorité des styles * * @version 1.0.0 * @requires auth-modals.css (chargé avant) */ /* ======================================== MODAL D'INACTIVITÉ CENTRÉ ======================================== */ /* Conteneur principal du modal */ #inactivity-modal, .inactivity-modal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 1000 !important; display: none !important; margin: 0 !important; background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(8px) !important; align-items: center !important; justify-content: center !important; } /* État actif du modal */ #inactivity-modal.is-active, .inactivity-modal.is-active { display: flex !important; } /* Contenu du modal */ #inactivity-modal .modal-content, .inactivity-modal .modal-content { max-width: 400px !important; width: 90% !important; margin: 0 !important; background: var(--card-background, #fff) !important; border-radius: var(--radius-xl, 16px) !important; box-shadow: var(--shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1)) !important; border: 1px solid var(--border-light, #f3f4f6) !important; overflow: hidden !important; position: relative !important; animation: modalSlideIn 0.3s ease-out !important; } /* Animation d'apparition */ @keyframes modalSlideIn { from { transform: translateY(-30px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Boîte de contenu */ #inactivity-modal .box, .inactivity-modal .box { padding: 28px !important; text-align: center !important; margin: 0 !important; background: var(--card-background, #fff) !important; border-radius: var(--radius-xl, 16px) !important; } /* Titre du modal */ #inactivity-modal .title, .inactivity-modal .title { margin-bottom: 15px !important; color: var(--text-primary, #1f2937) !important; font-size: 1.5rem !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: var(--text-primary, #1f2937) !important; background: none !important; } /* Icône du titre */ #inactivity-modal .title::before, .inactivity-modal .title::before { content: "⏳" !important; font-size: 1.2em !important; } /* Paragraphe de description */ #inactivity-modal p, .inactivity-modal p { margin-bottom: 24px !important; color: var(--text-secondary, #6b7280) !important; font-size: 1rem !important; line-height: 1.6 !important; } /* Bouton "Rester connecté" */ #inactivity-modal .button, #inactivity-modal .stay-connected-btn, .inactivity-modal .button, .inactivity-modal .stay-connected-btn { background: linear-gradient(135deg, var(--primary-color, #3b82f6), var(--primary-hover, #2563eb)) !important; color: white !important; border: none !important; padding: 14px 28px !important; border-radius: var(--radius-lg, 12px) !important; cursor: pointer !important; font-size: 1rem !important; font-weight: 600 !important; transition: all var(--transition-base, 0.2s ease-out) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)) !important; position: relative !important; overflow: hidden !important; } /* Effet de brillance au survol */ #inactivity-modal .button::before, #inactivity-modal .stay-connected-btn::before, .inactivity-modal .button::before, .inactivity-modal .stay-connected-btn::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important; transition: left 0.5s ease !important; } #inactivity-modal .button:hover::before, #inactivity-modal .stay-connected-btn:hover::before, .inactivity-modal .button:hover::before, .inactivity-modal .stay-connected-btn:hover::before { left: 100% !important; } /* État hover du bouton */ #inactivity-modal .button:hover, #inactivity-modal .stay-connected-btn:hover, .inactivity-modal .button:hover, .inactivity-modal .stay-connected-btn:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)) !important; } /* État actif du bouton */ #inactivity-modal .button:active, #inactivity-modal .stay-connected-btn:active, .inactivity-modal .button:active, .inactivity-modal .stay-connected-btn:active { transform: translateY(0) !important; } /* Icône du bouton */ #inactivity-modal .btn-icon, .inactivity-modal .btn-icon { font-size: 1.1em !important; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) !important; } /* ======================================== MODE SOMBRE ======================================== */ @media (prefers-color-scheme: dark) { #inactivity-modal, .inactivity-modal { background: rgba(0, 0, 0, 0.8) !important; } #inactivity-modal .modal-content, .inactivity-modal .modal-content { background: var(--card-background, #1e293b) !important; border-color: var(--border-light, #475569) !important; } #inactivity-modal .box, .inactivity-modal .box { background: var(--card-background, #1e293b) !important; } #inactivity-modal .title, .inactivity-modal .title { color: var(--text-primary, #f1f5f9) !important; -webkit-text-fill-color: var(--text-primary, #f1f5f9) !important; } #inactivity-modal p, .inactivity-modal p { color: var(--text-secondary, #94a3b8) !important; } } /* ======================================== RESPONSIVE ======================================== */ /* Tablettes */ @media (max-width: 768px) { #inactivity-modal .modal-content, .inactivity-modal .modal-content { width: 95% !important; max-width: 400px !important; } #inactivity-modal .box, .inactivity-modal .box { padding: 20px !important; } #inactivity-modal .title, .inactivity-modal .title { font-size: 1.25rem !important; } #inactivity-modal p, .inactivity-modal p { font-size: 0.9rem !important; } #inactivity-modal .button, #inactivity-modal .stay-connected-btn, .inactivity-modal .button, .inactivity-modal .stay-connected-btn { padding: 12px 24px !important; font-size: 0.9rem !important; } } /* Mobiles */ @media (max-width: 480px) { #inactivity-modal .modal-content, .inactivity-modal .modal-content { width: 90% !important; } } /* ======================================== ACCESSIBILITÉ ======================================== */ /* Réduction des animations pour les utilisateurs sensibles */ @media (prefers-reduced-motion: reduce) { #inactivity-modal .modal-content, .inactivity-modal .modal-content { animation: none !important; } #inactivity-modal .button::before, #inactivity-modal .stay-connected-btn::before, .inactivity-modal .button::before, .inactivity-modal .stay-connected-btn::before { transition: none !important; } #inactivity-modal .button:hover, #inactivity-modal .stay-connected-btn:hover, .inactivity-modal .button:hover, .inactivity-modal .stay-connected-btn:hover { transform: none !important; } } /* Focus visible pour la navigation au clavier */ #inactivity-modal .button:focus-visible, #inactivity-modal .stay-connected-btn:focus-visible, .inactivity-modal .button:focus-visible, .inactivity-modal .stay-connected-btn:focus-visible { outline: 3px solid var(--primary-color, #3b82f6) !important; outline-offset: 2px !important; }