/*
 * ONB+ : la marque des contenus premium (badge, pied de bloc, encart, modale d'accès).
 * Sur :root, disponible partout. Distincte de --ternary, qui a d'autres usages que le premium.
 * Exception : les éléments des Nav sur fond noir gardent les couleurs ONB (ex. compteur de crédits).
 */
:root {
    --onb-plus: #b07a22;
    --onb-plus-tint: #fbf1dc;
    --onb-plus-bright: #fbc02d;
    /* fond d'une zone ONB+ (pied de bloc, encart, offre) */
    --onb-plus-wash: #fdf8ee;
    /* bordure d'un élément ONB+ */
    --onb-plus-line: #fde096;
}

/* Appels à l'action de l'accès (achat, connexion) : couleurs ONB, le rose signale l'action */
.onb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(45deg, var(--secondary), var(--secondary-lighten));
    color: #fff;
    font: 600 14px/16px Roboto;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s;
}
.onb-btn:hover {
    filter: brightness(1.1);
    color: #fff;
}
.onb-btn:focus-visible {
    outline: 2px solid var(--secondary-lighten);
    outline-offset: 2px;
}
.onb-btn.ghost {
    background: none;
    color: var(--secondary);
    box-shadow: inset 0 0 0 1px var(--secondary-lighten-3);
}
.onb-btn.ghost:hover {
    filter: none;
    background: var(--secondary-lighten-1);
    color: var(--secondary);
}
.onb-btn.sm {
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
}