/** * Modales application — même famille visuelle que le plan PyroMap / pip-style-popup. * À charger en dernier dans le (après style.css et les CSS de page). */ :root { --pip-app-modal-overlay-bg: rgba(0, 0, 0, 0.58); --pip-app-modal-panel-bg: radial-gradient( 120% 80% at 50% -20%, rgba(236, 72, 153, 0.12) 0%, transparent 55% ), linear-gradient(175deg, rgba(22, 24, 38, 0.99) 0%, rgba(10, 12, 22, 0.97) 100%); --pip-app-modal-panel-edge: 1px solid rgba(255, 255, 255, 0.1); --pip-app-modal-panel-shadow: 0 0 0 1px rgba(236, 72, 153, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 32px 100px rgba(0, 0, 0, 0.65), 0 12px 40px rgba(0, 0, 0, 0.4); --pip-app-modal-pad-x: 22px; --pip-app-modal-pad-y: 22px; } /* ========== Overlay plein écran : .modal.modal-overlay-modern ========== */ .modal.modal-overlay-modern { align-items: center !important; justify-content: center !important; padding: max(24px, env(safe-area-inset-top), env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left), env(safe-area-inset-right)) !important; box-sizing: border-box !important; z-index: 4000 !important; background: var(--pip-app-modal-overlay-bg) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .modal.modal-overlay-modern .modal-content.modal-box-modern { position: relative !important; width: min(560px, 100%) !important; max-width: 100% !important; max-height: min(88vh, 860px) !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: rgba(236, 72, 153, 0.35) rgba(0, 0, 0, 0.2) !important; margin: 0 !important; padding: var(--pip-app-modal-pad-y) var(--pip-app-modal-pad-x) 20px !important; border-radius: 20px !important; border: var(--pip-app-modal-panel-edge) !important; background: var(--pip-app-modal-panel-bg) !important; box-shadow: var(--pip-app-modal-panel-shadow) !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } .modal.modal-overlay-modern .modal-content.modal-box-modern.modal-box-large { width: min(920px, 100%) !important; max-height: min(92vh, 920px) !important; } .modal.modal-overlay-modern .modal-content.modal-box-modern > h2 { margin: 0 0 14px !important; padding-right: 44px !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1.25 !important; color: rgba(241, 245, 249, 0.98) !important; } .modal.modal-overlay-modern .modal-content.modal-box-modern > .modal-close, .modal.modal-overlay-modern .modal-content.modal-box-modern > .modal-close-modern { position: absolute !important; top: 14px !important; right: 16px !important; z-index: 2 !important; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 10px !important; background: rgba(0, 0, 0, 0.2) !important; color: rgba(255, 255, 255, 0.88) !important; font-size: 26px !important; font-weight: 300 !important; line-height: 1 !important; cursor: pointer !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important; } .modal.modal-overlay-modern .modal-content.modal-box-modern > .modal-close:hover, .modal.modal-overlay-modern .modal-content.modal-box-modern > .modal-close-modern:hover, .modal.modal-overlay-modern .modal-content.modal-box-modern > .modal-close:focus-visible, .modal.modal-overlay-modern .modal-content.modal-box-modern > .modal-close-modern:focus-visible { color: #fce7f3 !important; border-color: rgba(236, 72, 153, 0.45) !important; background: rgba(236, 72, 153, 0.15) !important; } .modal.modal-overlay-modern .modal-content.modal-box-modern .modal-actions-modern { margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; gap: 12px !important; } .modal.modal-overlay-modern .modal-btn-modern.modal-btn-cancel { border: 1px solid rgba(255, 255, 255, 0.14) !important; background: rgba(0, 0, 0, 0.22) !important; color: rgba(248, 250, 252, 0.92) !important; } .modal.modal-overlay-modern .modal-btn-modern.modal-btn-cancel:hover { border-color: rgba(236, 72, 153, 0.35) !important; background: rgba(236, 72, 153, 0.12) !important; color: #fff !important; } .modal.modal-overlay-modern .modal-btn-modern.modal-btn-confirm { border: 1px solid rgba(236, 72, 153, 0.45) !important; background: linear-gradient( 135deg, rgba(236, 72, 153, 0.35), rgba(139, 92, 246, 0.28) ) !important; color: #fff !important; box-shadow: 0 10px 28px rgba(236, 72, 153, 0.22) !important; } /* ========== Confirmation (#confirmModal) — y compris sans modal-overlay-modern (facturation) ========== */ #confirmModal.modal { align-items: center !important; justify-content: center !important; padding: max(24px, env(safe-area-inset-top), env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left), env(safe-area-inset-right)) !important; box-sizing: border-box !important; z-index: 4000 !important; background: var(--pip-app-modal-overlay-bg) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } #confirmModal .modal-content.modern-modal-content, #confirmModal .modal-content.modal-box-modern { position: relative !important; width: min(440px, 100%) !important; max-height: min(85vh, 640px) !important; overflow: auto !important; padding: var(--pip-app-modal-pad-y) var(--pip-app-modal-pad-x) 20px !important; border-radius: 20px !important; border: var(--pip-app-modal-panel-edge) !important; background: var(--pip-app-modal-panel-bg) !important; box-shadow: var(--pip-app-modal-panel-shadow) !important; } #confirmModal .modal-content > h2 { margin: 0 0 14px !important; padding-right: 44px !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: rgba(241, 245, 249, 0.98) !important; } #confirmModal .modal-content > .modal-close { position: absolute !important; top: 14px !important; right: 16px !important; width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 10px !important; background: rgba(0, 0, 0, 0.2) !important; color: rgba(255, 255, 255, 0.88) !important; font-size: 26px !important; line-height: 1 !important; cursor: pointer !important; } #confirmModal .modern-modal-buttons { margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; display: flex !important; justify-content: flex-end !important; gap: 12px !important; } #confirmModal .modern-cancel-btn { appearance: none !important; border-radius: 11px !important; padding: 10px 18px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; background: rgba(0, 0, 0, 0.22) !important; color: rgba(248, 250, 252, 0.92) !important; transition: background 0.15s ease, border-color 0.15s ease !important; } #confirmModal .modern-cancel-btn:hover { border-color: rgba(236, 72, 153, 0.35) !important; background: rgba(236, 72, 153, 0.12) !important; color: #fff !important; } #confirmModal .modern-confirm-btn { appearance: none !important; border-radius: 11px !important; padding: 10px 18px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; border: 1px solid rgba(236, 72, 153, 0.45) !important; background: linear-gradient( 135deg, rgba(236, 72, 153, 0.35), rgba(139, 92, 246, 0.28) ) !important; color: #fff !important; box-shadow: 0 10px 28px rgba(236, 72, 153, 0.22) !important; } /* ========== Fiche projet & dashboard : .project-modal-overlay ========== */ .project-modal-overlay { padding: max(24px, env(safe-area-inset-top), env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left), env(safe-area-inset-right)) !important; box-sizing: border-box !important; background: var(--pip-app-modal-overlay-bg) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .project-modal-card { border-radius: 20px !important; border: var(--pip-app-modal-panel-edge) !important; background: var(--pip-app-modal-panel-bg) !important; box-shadow: var(--pip-app-modal-panel-shadow) !important; overflow: hidden !important; } .project-modal-header { padding: 18px var(--pip-app-modal-pad-x) 14px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; } .project-modal-header h3 { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.03em !important; } .project-modal-body { padding: 16px var(--pip-app-modal-pad-x) 20px !important; } .project-modal-footer { padding: 16px var(--pip-app-modal-pad-x) 22px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; gap: 12px !important; } .project-modal-close { width: 40px !important; height: 40px !important; border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; background: rgba(0, 0, 0, 0.2) !important; font-size: 18px !important; line-height: 1 !important; } .project-modal-close:hover { border-color: rgba(236, 72, 153, 0.45) !important; background: rgba(236, 72, 153, 0.15) !important; color: #fce7f3 !important; } /* ========== PDF viewer ========== */ .pdf-viewer-modal { padding: max(20px, env(safe-area-inset-top), env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left), env(safe-area-inset-right)) !important; box-sizing: border-box !important; background: var(--pip-app-modal-overlay-bg) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .pdf-viewer-box { border-radius: 20px !important; border: var(--pip-app-modal-panel-edge) !important; background: var(--pip-app-modal-panel-bg) !important; box-shadow: var(--pip-app-modal-panel-shadow) !important; overflow: hidden !important; } .pdf-viewer-header { padding: 16px 20px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; font-weight: 600 !important; } .pdf-viewer-header .action-btn { border-radius: 11px !important; padding: 10px 18px !important; } /* ========== Modal liste projets Pyromap (.pip-modal) ========== */ .pip-modal { padding: max(24px, env(safe-area-inset-top), env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left), env(safe-area-inset-right)) !important; } .pip-modal-backdrop { background: var(--pip-app-modal-overlay-bg) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .pip-modal-box { border-radius: 20px !important; border: var(--pip-app-modal-panel-edge) !important; background: var(--pip-app-modal-panel-bg) !important; box-shadow: var(--pip-app-modal-panel-shadow) !important; } .pip-modal-head { padding: 16px 20px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; } .pip-modal-head h2 { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.03em !important; } .pip-modal-close { width: 40px !important; height: 40px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 10px !important; background: rgba(0, 0, 0, 0.2) !important; font-size: 24px !important; } .pip-modal-close:hover { color: #fce7f3 !important; border-color: rgba(236, 72, 153, 0.45) !important; background: rgba(236, 72, 153, 0.15) !important; } .pip-modal-actions { padding: 16px 20px 20px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; gap: 12px !important; } /* ========== Vidéo catalogue ========== */ .video-modal { padding: max(24px, env(safe-area-inset-top), env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left), env(safe-area-inset-right)) !important; background: var(--pip-app-modal-overlay-bg) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .video-modal__box { border: var(--pip-app-modal-panel-edge) !important; background: var(--pip-app-modal-panel-bg) !important; box-shadow: var(--pip-app-modal-panel-shadow) !important; } .video-modal__head { padding: 16px 20px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .video-modal__close { border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; background: rgba(0, 0, 0, 0.2) !important; } /* ========== Nouveau projet (projets) — overlay aligné ========== */ .pip-projets-modal-overlay { padding: max(24px, env(safe-area-inset-top), env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left), env(safe-area-inset-right)) !important; }