/* * Overlays Nuxt UI (UModal / USlideover) — géométrie posée à la main. * Les composants @nuxt/ui portent des classes utilitaires tailwind que ce * projet ne génère pas (UnoCSS ne scanne pas node_modules) : sans ces règles, * voile et panneaux se rendent à leur position statique, en fin de , * donc hors écran. On cible la structure stable posée par reka-ui. */ /* Voile */ body > div.fixed.inset-0[data-state] { position: fixed; inset: 0; z-index: 90; background: rgb(15 20 25 / 0.45); backdrop-filter: blur(2px); } body > div.fixed.inset-0[data-state='open'] { animation: ldov-fade-in 0.15s ease; } /* Panneau latéral (USlideover — drawer mobile) */ body > [role='dialog'][data-side] { position: fixed; top: 0; bottom: 0; width: min(20rem, 86vw); z-index: 91; display: flex; flex-direction: column; overflow-y: auto; background: var(--mood-surface); color: var(--mood-text); box-shadow: 0 12px 40px rgb(0 0 0 / 0.3); } body > [role='dialog'][data-side='left'] { left: 0; right: auto; border-radius: 0 16px 16px 0; } body > [role='dialog'][data-side='right'] { right: 0; left: auto; border-radius: 16px 0 0 16px; } body > [role='dialog'][data-side='left'][data-state='open'] { animation: ldov-slide-left 0.18s ease; } body > [role='dialog'][data-side='right'][data-state='open'] { animation: ldov-slide-right 0.18s ease; } /* Modale centrée (UModal) */ body > [role='dialog']:not([data-side]) { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(26rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; z-index: 91; background: var(--mood-surface); color: var(--mood-text); border-radius: 16px; box-shadow: 0 18px 50px rgb(0 0 0 / 0.28); } body > [role='dialog']:not([data-side])[data-state='open'] { animation: ldov-pop 0.15s ease; } /* Blocs internes générés par Nuxt UI — classes posées via la prop :ui */ .ldov-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 3.5rem 0.5rem 1.25rem; } .ldov-title { margin: 0; font-size: 1.0625rem; font-weight: 800; color: var(--mood-text); } /* description a11y sans rendu visuel (lecteurs d'écran seulement) */ .ldov-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ldov-desc { margin: 0; padding: 0 1.25rem; font-size: 0.875rem; color: var(--mood-text-muted); } .ldov-body { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 1.25rem 1.25rem; } .ldov-close { position: absolute; top: 0.75rem; right: 0.75rem; display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; border-radius: 14px; background: var(--mood-input-bg); color: var(--mood-text); cursor: pointer; transition: background 0.1s ease, transform 0.1s ease; } .ldov-close:hover { background: var(--mood-accent-soft); transform: translateY(-1px); } .ldov-close:active { transform: translateY(0); } @keyframes ldov-fade-in { from { opacity: 0; } } @keyframes ldov-slide-left { from { transform: translateX(-100%); } } @keyframes ldov-slide-right { from { transform: translateX(100%); } } @keyframes ldov-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); } }