/* doc-project | public/assets/css/modal.css | habille les fenêtres modales accessibles avec animation et repli mobile */
.modal { width: min(620px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--ink); }
.modal::backdrop { background: rgba(10, 30, 26, .64); backdrop-filter: blur(6px); }
.modal[open] { animation: modalIn .25s both ease-out; }
.modal__panel { position: relative; padding: clamp(26px, 5vw, 48px); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-lg); }
.modal__panel h2 { margin-bottom: 18px; font-size: clamp(2rem, 5vw, 3.1rem); }
.modal__panel p, .modal__panel li { color: var(--muted); }
.modal__panel ul { padding-left: 20px; margin-bottom: 28px; }
.modal__close { position: absolute; top: 15px; right: 15px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); cursor: pointer; font-size: 1.35rem; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }