:root {
    --atp-black: #111111;
    --atp-white: #ffffff;
    --atp-gray-light: #f4f4f4;
    --atp-gray-mid: #cccccc;
    --atp-gray-dark: #555555;
    --atp-accent: #c0392b; /* remplacé en inline par la couleur choisie dans les réglages */
    --atp-radius: 8px;
}

.atp-btn {
    background: var(--atp-black);
    color: var(--atp-white);
    border: 2px solid var(--atp-black);
    border-radius: var(--atp-radius);
    padding: 10px 22px;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.atp-btn:hover:not(:disabled) {
    background: var(--atp-accent);
    border-color: var(--atp-accent);
}
.atp-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.atp-btn.secondary {
    background: var(--atp-white);
    color: var(--atp-black);
}
.atp-btn.secondary:hover {
    border-color: var(--atp-accent);
    color: var(--atp-accent);
}

.atp-btn-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

.atp-field label, .atp-title, .atp-recap-box h3 {
    color: var(--atp-black);
}

.atp-loader {
    display: none;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    margin-left: 8px;
    animation: atp-spin .7s linear infinite;
    vertical-align: middle;
}
.atp-btn.loading .atp-loader { display: inline-block; }
.atp-btn.loading .atp-btn-text { opacity: .6; }
@keyframes atp-spin { to { transform: rotate(360deg); } }

.atp-error {
    color: #b00020;
    background: #fdecea;
    border: 1px solid #f5c2c0;
    border-radius: var(--atp-radius);
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 14px;
}