/* ==========================================================================
   SIMPIO — Overlays (modals de confirmation) — charte ardoise premium
   Réf : docs/design/refonte-ardoise-maquette-reference.html (section overlays)

   RÈGLE STRICTE (exigence DG) : 3 variantes VISUELLEMENT DISTINCTES, jamais
   interchangeables. Le ROUGE est RÉSERVÉ au destructif — jamais une validation.
     - destructive : rouge (#dc2626), icône alerte, "action irréversible"
     - validation  : émeraude (#059669), icône coche, action positive
     - info        : slate (#334155), icône info, neutre
   ========================================================================== */

.sp-confirm.mud-dialog {
    border-radius: var(--sp-radius-card);
    overflow: hidden;
    box-shadow: var(--sp-shadow-pop);
    max-width: 440px;
}

/* En-tête : bandeau d'accent + icône selon la variante */
.sp-confirm-head {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 22px 14px;
}
.sp-confirm-ic {
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex: 0 0 auto;
}
.sp-confirm-title { font-size: 16px; font-weight: 800; color: var(--sp-ink); }

.sp-confirm-body { padding: 0 22px 8px; font-size: 13.5px; color: var(--sp-text); line-height: 1.5; }

/* Bandeau d'avertissement (destructif uniquement) */
.sp-confirm-warn {
    margin: 12px 22px 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--sp-danger-bg);
    color: #991b1b;
    font-size: 12.5px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}

.sp-confirm-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 16px 22px 20px;
}
.sp-confirm-btn {
    padding: 9px 18px; border-radius: var(--sp-radius-ctrl);
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; transition: all .15s;
}
.sp-confirm-btn-cancel { background: #fff; color: var(--sp-text); border-color: var(--sp-border); }
.sp-confirm-btn-cancel:hover { background: var(--sp-bg); }

/* ---- Variante DESTRUCTIF (rouge, réservé) ---- */
.sp-confirm--destructive .sp-confirm-ic { background: var(--sp-danger-bg); color: var(--sp-danger); }
.sp-confirm--destructive .sp-confirm-btn-primary { background: var(--sp-danger); color: #fff; }
.sp-confirm--destructive .sp-confirm-btn-primary:hover { background: #b91c1c; }

/* ---- Variante VALIDATION (émeraude, positif) ---- */
.sp-confirm--validation .sp-confirm-ic { background: var(--sp-success-bg); color: var(--sp-success); }
.sp-confirm--validation .sp-confirm-btn-primary { background: var(--sp-success); color: #fff; }
.sp-confirm--validation .sp-confirm-btn-primary:hover { background: #047857; }

/* ---- Variante INFO / NEUTRE (violet, action non destructive) ---- */
.sp-confirm--info .sp-confirm-ic { background: var(--sp-accent-pale); color: var(--sp-accent); }
.sp-confirm--info .sp-confirm-btn-primary { background: var(--sp-accent); color: #fff; }
.sp-confirm--info .sp-confirm-btn-primary:hover { background: #5a2fd6; }