/* doc-project | public/assets/css/components/modal.css | Structure les dialogs accessibles, panneaux, en-têtes, pieds et animations. | Expose: .modal | Dépend de: tokens.css | Impacte: toutes les modales | Tables: aucune */
.modal{width:min(720px,calc(100vw - 2rem));max-height:calc(100vh - 2rem);padding:0;border:0;border-radius:var(--radius-lg);background:transparent;box-shadow:var(--shadow-lg);overflow:visible}.modal::backdrop{background:rgba(13,18,22,.66);backdrop-filter:blur(3px)}.modal[open]{animation:modal-in 180ms ease-out}.modal__panel{display:grid;gap:1.2rem;max-height:calc(100vh - 2rem);overflow:auto;padding:1.45rem;background:#fff;border-radius:var(--radius-lg)}.modal__panel>header,.modal__panel>footer{display:flex;align-items:center;justify-content:space-between;gap:1rem}.modal__panel>header{padding-bottom:1rem;border-bottom:1px solid var(--ink-100)}.modal__panel>header h2{margin:0;font-size:1.45rem}.modal__panel>header p{margin-bottom:.3rem}.modal__panel>header>button{width:36px;height:36px;border:0;border-radius:50%;background:var(--ink-100);font-size:1.3rem}.modal__panel>footer{justify-content:flex-end;padding-top:1rem;border-top:1px solid var(--ink-100)}@keyframes modal-in{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:none}}