/* ============================================================================= REVERENTIA - Modal-loader generique (charte luxe) - Desktop : modal centre, backdrop sombre + blur, fade-in - Mobile (<= 768px) : volet plein-hauteur slide depuis la droite ============================================================================= */ /* ---- Backdrop & shell ---- */ .rev-modal-loader { position: fixed; inset: 0; z-index: 1200; /* au-dessus du cookie-modal (1100) */ display: none; } .rev-modal-loader:not([hidden]) { display: block; } .rev-modal-loader__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 600ms ease; } .rev-modal-loader.is-visible .rev-modal-loader__backdrop { opacity: 1; } .rev-modal-loader__shell { position: absolute; background: #0A0A0A; color: #f5f0eb; border: 1px solid rgba(234, 200, 128, 0.18); overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; } /* Desktop : modal centre */ @media (min-width: 769px) { .rev-modal-loader__shell { top: 50%; left: 50%; transform: translate(-50%, -42%); width: min(520px, calc(100vw - 48px)); max-height: calc(100vh - 64px); opacity: 0; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease; } .rev-modal-loader.is-visible .rev-modal-loader__shell { transform: translate(-50%, -50%); opacity: 1; } } /* Mobile : volet plein-hauteur slide depuis la droite */ @media (max-width: 768px) { .rev-modal-loader__shell { top: 0; right: 0; bottom: 0; width: min(420px, 88vw); max-height: 100vh; transform: translateX(100%); transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1); border-top: none; border-bottom: none; border-right: none; } .rev-modal-loader.is-visible .rev-modal-loader__shell { transform: translateX(0); } } /* ---- Close ---- */ .rev-modal-loader__close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; background: transparent; border: 1px solid rgba(234, 200, 128, 0.22); color: #eac880; border-radius: 50%; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; z-index: 2; transition: border-color 200ms ease, color 200ms ease, transform 200ms ease; } .rev-modal-loader__close svg { display: block; } .rev-modal-loader__close:hover, .rev-modal-loader__close:focus-visible { border-color: #eac880; color: #f0d9a0; outline: none; } .rev-modal-loader__close:active { transform: scale(0.94); } /* ---- Panels (only one visible at a time) ---- */ .rev-modal-loader__panels { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; display: flex; flex-direction: column; } .rev-modal-loader__panel { display: flex; flex-direction: column; min-height: 100%; } .rev-modal-loader__panel[hidden] { display: none; } /* ---- Body scroll lock (applique via JS sur ) ---- */ body.rev-modal-open { overflow: hidden; } /* ---- Reduce motion ---- */ @media (prefers-reduced-motion: reduce) { .rev-modal-loader__backdrop, .rev-modal-loader__shell { transition: opacity 100ms ease; transform: none !important; } }