/* ============================================================ Domivae — dv-confirm : dialogue de confirmation à la charte Remplace window.confirm() / alert() natifs (barre grise « localhost indique », hors DA). Carte centrée sur scrim marine flouté. Piloté par public/assets/js/dv-confirm.js : dvConfirm({ title, message, confirmLabel, cancelLabel, tone:'default'|'danger', icon }) -> Promise Couleur d'accent adaptée au RÔLE de l'utilisateur (data-role sur la carte, posé par le JS depuis ) : owner → canard | tenant → abricot | manager/admin/agency/artisan → marine Le ton « danger » reste corail (sémantique d'avertissement) quel que soit le rôle. Fallbacks en dur (#…) : le composant marche même hors app.css (layout site.php n'importe que site.css). ============================================================ */ .dvc-scrim { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(1, 29, 45, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1); } .dvc-scrim.is-open { opacity: 1; pointer-events: auto; } .dvc-card { /* --- accent par défaut : canard (propriétaire + invités) --- */ --dvc-accent: var(--color-canard, #007E85); --dvc-accent-hover: var(--color-canard-dark, #005F65); --dvc-accent-soft: var(--color-blue-pastel, #E3F5F5); --dvc-accent-ink: #FFFFFF; width: 100%; max-width: 440px; background: var(--color-bg, #FFFFFF); border-radius: var(--radius-xl, 24px); box-shadow: var(--shadow-lg, 0 18px 40px rgba(1, 29, 45, 0.18), 0 4px 8px rgba(1, 29, 45, 0.08)); padding: 30px 30px 24px; text-align: center; transform: translateY(12px) scale(0.96); opacity: 0; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1); } .dvc-scrim.is-open .dvc-card { transform: translateY(0) scale(1); opacity: 1; } /* --- Accent selon le rôle de l'utilisateur --- */ .dvc-card[data-role="tenant"] { --dvc-accent: var(--color-apricot, #F5945D); --dvc-accent-hover: var(--color-apricot-dark, #E47B42); --dvc-accent-soft: var(--color-peach, #FBE8DA); --dvc-accent-ink: #FFFFFF; } .dvc-card[data-role="manager"], .dvc-card[data-role="admin"], .dvc-card[data-role="agency"], .dvc-card[data-role="artisan"] { --dvc-accent: var(--color-marine, #011D2D); --dvc-accent-hover: var(--color-marine-soft, #032B43); --dvc-accent-soft: var(--color-blue-pastel, #E3F5F5); --dvc-accent-ink: #FFFFFF; } .dvc-icon { width: 60px; height: 60px; border-radius: var(--radius-pill, 999px); margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: var(--dvc-accent-soft); } .dvc-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--dvc-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Ton danger : corail + pêche, quel que soit le rôle */ .dvc-card.tone-danger .dvc-icon { background: var(--color-peach, #FBE8DA); } .dvc-card.tone-danger .dvc-icon svg { stroke: var(--color-apricot, #F5945D); } .dvc-title { font-family: var(--font-display, 'Quicksand', system-ui, sans-serif); font-weight: 700; font-size: 21px; color: var(--color-marine, #011D2D); margin: 0 0 10px; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; } .dvc-message { font-family: var(--font-sans, 'Urbanist', system-ui, sans-serif); font-size: 14.5px; color: var(--color-text-muted, #717171); line-height: 1.6; margin: 0 auto 24px; max-width: 42ch; text-wrap: pretty; } .dvc-message strong { color: var(--color-marine, #011D2D); font-weight: 700; } .dvc-actions { display: flex; gap: 10px; } .dvc-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; font-family: var(--font-sans, 'Urbanist', system-ui, sans-serif); font-weight: 600; border-radius: var(--radius-pill, 999px); padding: 14px 18px; font-size: 15px; line-height: 1.2; transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 120ms, transform 120ms; } .dvc-btn:active { transform: scale(0.98); } .dvc-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 126, 133, 0.28); } .dvc-cancel { background: var(--color-bg, #FFFFFF); color: var(--color-marine, #011D2D); border: 1.5px solid var(--color-border-strong, #D1D5DB); } .dvc-cancel:hover { background: var(--color-bg-muted, #F2F2F2); border-color: var(--color-text-muted, #717171); } .dvc-ok { background: var(--dvc-accent); color: var(--dvc-accent-ink); } .dvc-ok:hover { background: var(--dvc-accent-hover); } /* Ton danger : bouton d'action corail, quel que soit le rôle */ .dvc-card.tone-danger .dvc-ok { background: var(--color-apricot, #F5945D); color: #FFFFFF; } .dvc-card.tone-danger .dvc-ok:hover { background: var(--color-apricot-dark, #E47B42); } @media (max-width: 460px) { .dvc-actions { flex-direction: column-reverse; } } @media (prefers-reduced-motion: reduce) { .dvc-scrim, .dvc-card { transition: opacity 120ms linear; } .dvc-card { transform: none; } }