/* Fenetres et bandeaux de l'application. * * Deux etats de theme, comme partout : la classe `light-mode` est posee sur * . On definit la palette sombre par defaut — c'est celle du produit — * et on la remplace en clair. */ .vx-dialogue { max-width: 28rem; width: calc(100% - 2rem); padding: 1.4rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; background: #111c29; color: #eef4fa; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .vx-dialogue::backdrop { background: rgba(4, 8, 18, 0.62); backdrop-filter: blur(2px); } .vx-dialogue__titre { margin: 0 0 0.6rem; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; } .vx-dialogue__texte { margin: 0; font-size: 0.9rem; line-height: 1.55; color: #c3d2e0; } /* Le detail porte la consequence : ce qui sera detruit, ce qui ne reviendra pas. Il se lit apres la question, jamais a sa place. */ .vx-dialogue__detail { margin: 0.6rem 0 0; font-size: 0.82rem; line-height: 1.5; color: #93a5b8; } .vx-dialogue__champ { width: 100%; margin-top: 0.9rem; padding: 0.55rem 0.7rem; border-radius: 0.55rem; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: inherit; font-size: 0.85rem; } .vx-dialogue__actions { margin-top: 1.3rem; display: flex; justify-content: flex-end; gap: 0.6rem; } .vx-dialogue__btn { min-width: 6rem; padding: 0.5rem 0.95rem; border-radius: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .vx-dialogue__btn:hover { background: rgba(255, 255, 255, 0.07); } .vx-dialogue__btn:focus-visible { outline: 2px solid #2dd4bf; outline-offset: 2px; } .vx-dialogue__btn--primaire { border-color: #0d9488; background: #0d9488; color: #ffffff; } .vx-dialogue__btn--primaire:hover { background: #0f766e; } /* L'action destructrice est rouge, et ce n'est pas decoratif : c'est le seul signal qui distingue « enregistrer » de « supprimer definitivement ». */ .vx-dialogue__btn--danger { border-color: #dc2626; background: #dc2626; color: #ffffff; } .vx-dialogue__btn--danger:hover { background: #b91c1c; } /* ── Bandeaux ───────────────────────────────────────────────────────────── En bas a droite : ils ne recouvrent pas l'en-tete ni le contenu qu'on vient de modifier. */ .vx-signaux { position: fixed; right: 1rem; bottom: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(26rem, calc(100vw - 2rem)); } .vx-signal { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.85rem; border-radius: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.12); background: #111c29; color: #eef4fa; font-size: 0.86rem; line-height: 1.45; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32); } .vx-signal--erreur { border-color: rgba(220, 38, 38, 0.45); background: #2a1416; } .vx-signal--ok { border-color: rgba(13, 148, 136, 0.45); background: #0f2320; } .vx-signal__texte { flex: 1; } .vx-signal__fermer { flex-shrink: 0; border: 0; background: transparent; color: inherit; opacity: 0.6; font-size: 1.05rem; line-height: 1; cursor: pointer; } .vx-signal__fermer:hover { opacity: 1; } .vx-signal__fermer:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 0.2rem; } /* ── Mode clair ─────────────────────────────────────────────────────────── */ html.light-mode .vx-dialogue { border-color: rgba(15, 27, 42, 0.12); background: #ffffff; color: #0f1b2a; box-shadow: 0 24px 60px rgba(15, 27, 42, 0.16); } html.light-mode .vx-dialogue::backdrop { background: rgba(15, 27, 42, 0.38); } html.light-mode .vx-dialogue__texte { color: #33475e; } html.light-mode .vx-dialogue__detail { color: #5a6b7f; } html.light-mode .vx-dialogue__champ { border-color: rgba(15, 27, 42, 0.16); background: #f6f8fa; } html.light-mode .vx-dialogue__btn { border-color: rgba(15, 27, 42, 0.18); } html.light-mode .vx-dialogue__btn:hover { background: rgba(15, 27, 42, 0.05); } html.light-mode .vx-signal { border-color: rgba(15, 27, 42, 0.12); background: #ffffff; color: #0f1b2a; box-shadow: 0 12px 30px rgba(15, 27, 42, 0.14); } html.light-mode .vx-signal--erreur { background: #fef2f2; border-color: rgba(220, 38, 38, 0.3); } html.light-mode .vx-signal--ok { background: #f0fdfa; border-color: rgba(13, 148, 136, 0.3); } @media (prefers-reduced-motion: reduce) { .vx-dialogue::backdrop { backdrop-filter: none; } }