/* ============================================================
   confirmation.css : boite de confirmation

   Etape P1 UX, modale de confirmation, lot 1, 30/09/2026.

   Remplace le dialogue natif confirm(), bloquant et supprimable par le
   navigateur, et les deux modales de confirmation ecrites en ligne avec leurs
   styles en dur.

   PAS DE LISERE : l'action destructive se signale par la couleur de son icone
   et de son bouton, jamais par un trait colore sur un bord.

   Z-INDEX 4000 : au-dessus de tout, y compris de la palette de recherche
   (3000) et des modales de l'application (1000 a 2000). Une confirmation
   s'ouvre toujours PAR-DESSUS ce qui l'a demandee.
   ============================================================ */

.ap-confirm {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ap-confirm-voile {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .5);
}

.ap-confirm-boite {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 24px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    text-align: center;
}

/* ── Icone ─────────────────────────────────────────────────── */
.ap-confirm-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
}
.ap-confirm-danger .ap-confirm-icone { background: #fef2f2; color: #dc2626; }
.ap-confirm-icone svg { width: 24px; height: 24px; }

/* ── Textes ────────────────────────────────────────────────── */
.ap-confirm-titre {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}
.ap-confirm-message {
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
    margin-bottom: 20px;
    /* Les messages repris des confirm() natifs portent leurs sauts de ligne en
       « \n ». Sans pre-line, HTML les ecrase et un message de trois paragraphes
       s'affiche d'un seul bloc (lot A, 30/09/2026). Les espaces multiples
       restent replies, seules les fins de ligne sont conservees. */
    white-space: pre-line;
}

/* ── Saisie de confirmation et valeur a recopier ────────────── */
.ap-confirm-saisie,
.ap-confirm-copie-valeur {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    margin-bottom: 20px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #0f172a;
    background: #fff;
}
.ap-confirm-saisie:focus,
.ap-confirm-copie-valeur:focus {
    outline: 2px solid var(--ap-primary, #2563eb);
    outline-offset: 1px;
    border-color: transparent;
}
textarea.ap-confirm-saisie {
    resize: vertical;
    min-height: 68px;
    line-height: 1.5;
}
/* Contrainte annoncee AVANT la saisie, pas apres coup. */
.ap-confirm-aide {
    margin: -14px 0 18px;
    font-size: 12px;
    color: #64748b;
}

.ap-confirm-copie {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.ap-confirm-copie-valeur {
    /* Un lien est long : on le laisse defiler plutot que deborder la boite. */
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    background: #f8fafc;
}
.ap-confirm-copie-bouton {
    flex-shrink: 0;
    padding: 9px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}
.ap-confirm-copie-bouton:hover { background: #f1f5f9; }

/* ── Actions ───────────────────────────────────────────────── */
.ap-confirm-actions {
    display: flex;
    gap: 10px;
}
.ap-confirm-actions button {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s;
}

/* Renoncer reste le geste le plus neutre, et le plus facile a atteindre. */
.ap-confirm-non {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
}
.ap-confirm-non:hover { background: #f8fafc; color: #0f172a; }

.ap-confirm-oui {
    border: 0;
    background: #2563eb;
    color: #fff;
}
.ap-confirm-oui:hover { filter: brightness(.94); }
/* Saisie de confirmation non conforme : le bouton doit se VOIR inactif, sans
   quoi l'utilisateur clique dans le vide sans comprendre pourquoi. */
.ap-confirm-oui:disabled,
.ap-confirm-oui:disabled:hover {
    opacity: .45;
    cursor: not-allowed;
    filter: none;
}

/* Rouge UNIQUEMENT pour une action irreversible : ailleurs, le rouge est un
   statut et non un bouton. */
.ap-confirm-danger .ap-confirm-oui { background: #dc2626; }

.ap-confirm button:focus-visible {
    outline: 2px solid var(--ap-primary, #2563eb);
    outline-offset: 2px;
}

@media (max-width: 420px) {
    .ap-confirm-actions { flex-direction: column-reverse; }
}