/* ============================================================
   Outil « IBAN de la prison » — blog/partials/outil-virement.php
   Complète css/outil-ecrou.css (chargée avant) : seuls le bloc IBAN, le
   libellé à écrire et l'avis « IBAN manquant » sont définis ici.
   Jetons du design system uniquement : le thème sombre suit tout seul.
   ============================================================ */

/* ── Coordonnées bancaires ── */
.ov__bank {
    margin-top: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    overflow: hidden;
}
.ov__line {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
    padding: 12px 14px;
}
.ov__line + .ov__line { border-top: 1px solid var(--border); }
.ov__line-main { min-width: 0; flex: 1 1 220px; }
.ov__label {
    display: block;
    font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}
.ov__val {
    display: block;
    font-size: .94rem; font-weight: 600; line-height: 1.45;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.ov__val--mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.ov__val--iban { font-size: 1.06rem; font-weight: 700; letter-spacing: .01em; }

.ov__copy {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    font: inherit; font-size: .84rem; font-weight: 700; line-height: 1.2;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}
.ov__copy:hover { border-color: var(--brand); }
.ov__copy svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ov__copy--main {
    background: var(--brand); border-color: var(--brand); color: #fff;
    box-shadow: var(--shadow-brand);
}
html[data-theme="dark"] .ov__copy--main { color: #0C0C16; }
.ov__copy--main:hover { background: var(--brand-600); }
.ov__copy.is-done, .ov__copy.is-done:hover {
    background: var(--trust-100); border-color: transparent; color: var(--trust); box-shadow: none;
}
.ov__copy:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* ── Libellé à écrire ── */
.ov__libelle { margin-top: 12px; }

/* ── IBAN manquant ── */
.ov__missing {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: var(--r-sm);
    font-size: .9rem; line-height: 1.6;
    color: var(--ink-soft);
    background: var(--warm-100);
}
.ov__missing strong { color: var(--ink); font-weight: 700; }

.article-body .oe .ov__list { margin: 8px 0 0; padding-left: 18px; font-size: .9rem; line-height: 1.65; color: var(--ink-soft); }
.article-body .oe .ov__list li { margin: 0 0 4px; }
.article-body .oe .ov__list strong { color: var(--ink); }

@media (max-width: 560px) {
    .ov__line { padding: 12px; }
    .ov__copy { width: 100%; justify-content: center; padding: 11px 14px; }
    .ov__val--iban { font-size: 1rem; }
}