/*!****************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/modal/style.scss ***! \****************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /* ========================================================= ITU Modal block — frontend styles Le wrapper est invisible ; le .modal-content est déplacé sur par view.js lors de l'ouverture. ========================================================= */ .br-modal-block { display: none !important; } .br-modal-block .modal-content { display: none !important; } /* ── Overlay ────────────────────────────────────────────── */ .br-modal-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 2147483646 !important; opacity: 0; transition: opacity 0.35s ease; } .br-modal-overlay.is-visible { opacity: 1; } /* ── Modal content (sur ) ─────────────────────────── */ body > .modal-content, body > .modal-content.is-visible, body > .modal-content.is-closing { animation: none !important; } body > .modal-content { position: fixed !important; top: 50% !important; left: 50% !important; width: 90% !important; max-width: 800px !important; max-height: 90vh !important; background: #fff !important; border-radius: 10px !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35) !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex: none !important; overflow: hidden !important; z-index: 2147483647 !important; transform: translate(-50%, -50%) scale(0.2) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, visibility 0s linear 0.42s !important; } body > .modal-content.is-visible { transform: translate(-50%, -50%) scale(1) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, visibility 0s linear 0s !important; } /* ── Modal header ───────────────────────────────────────── */ .modal-header { width: 100%; position: relative; background-color: #e5f5fb; padding: 16px 24px; border-bottom: 2px solid #009dd9; display: flex; align-items: center; justify-content: center; } .modal-header h2.modal-title { font-size: 18px; font-weight: 700; margin: 0; } .modal-header p.card-description { margin: 0; font-size: 14px; font-weight: 400; color: #4a4a4a; } .br-modal-close { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: bold; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; line-height: 1; } .br-modal-close:hover { opacity: 1; } /* ── Scrollable body ────────────────────────────────────── */ .scrollable-content { padding: 20px; overflow-y: auto; max-height: calc(90vh - 120px); } .scrollable-content p, .scrollable-content li { text-align: left; } /* ── Scroll lock ────────────────────────────────────────── */ body.modal-open { overflow: hidden; } body.modal-open .ituTopNav { transform: none !important; } /* ── Responsive ─────────────────────────────────────────── */ @media (max-width: 768px) { body > .modal-content { width: 94% !important; max-height: 85vh !important; } .scrollable-content { padding: 18px; } } @media (max-width: 480px) { .modal-header { padding: 12px 16px; } .br-modal-close { font-size: 18px; } } /*# sourceMappingURL=style-index.css.map*/