/* ============================================================
   AU FIL DES ÂMES — assets/css/modal_confirmation.css
   Modale de confirmation réutilisable (douce, sur la palette du site).
   Autonome : ne dépend d'aucun style de bouton propre à une page.
   S'utilise avec assets/js/modal_confirmation.js.
   ============================================================ */

.modal-confirm {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
}
.modal-confirm[hidden] { display: none; }

.modal-confirm-fond {
    position: absolute; inset: 0;
    background: rgba(30, 28, 26, .45);
    animation: modal-fond-apparition .2s ease;
}

.modal-confirm-carte {
    position: relative;
    background: var(--fond-carte, #fffdfa);
    border-radius: var(--rayon-lg, 14px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    max-width: 440px; width: 100%;
    padding: 1.9rem 1.9rem 1.6rem;
    animation: modal-carte-apparition .22s ease;
}

.modal-confirm-titre {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.5rem; line-height: 1.2;
    color: var(--texte-principal, #1e1c1a);
    margin: 0 0 .7rem;
}

.modal-confirm-texte {
    font-size: .98rem; line-height: 1.6;
    color: var(--texte-secondaire, #6b5f52);
    margin: 0 0 1.5rem;
}

.modal-confirm-actions {
    display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap;
}

/* ── Boutons autonomes, pleine rondeur (comme les boutons du site) ──── */
.modal-confirm-btn {
    font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
    font-size: .92rem;
    line-height: 1;
    padding: .7rem 1.5rem;
    border-radius: 999px;            /* pill, cohérent avec btn-principal / btn-secondaire */
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--transition, .2s ease),
                color var(--transition, .2s ease),
                border-color var(--transition, .2s ease),
                filter var(--transition, .2s ease);
}

.modal-confirm-btn-valider {
    background: var(--accent, #4a6741);
    color: #fff;
}
.modal-confirm-btn-valider:hover { filter: brightness(.92); }

.modal-confirm-btn-annuler {
    background: transparent;
    color: var(--texte-secondaire, #6b5f52);
    border-color: var(--bordure, #d9d2c7);
}
.modal-confirm-btn-annuler:hover { background: var(--accent-doux, #eef0ea); }

.modal-confirm-btn:focus-visible {
    outline: 2px solid var(--accent, #4a6741);
    outline-offset: 2px;
}

@keyframes modal-fond-apparition  { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-carte-apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .modal-confirm-fond, .modal-confirm-carte { animation: none; }
}