/* PAGE « NOUS SOUTENIR » — complète apropos.css (classes .ap-*) */

.ss-intro { margin: -4px 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

.ss-usage { display: grid; gap: 10px; }
.ss-usage-item { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center; }
.ss-usage-item .ap-icon { grid-row: span 2; }
.ss-usage-item p { font-size: 13.5px; color: var(--muted); }

.ss-confirm {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding: 12px 14px; border-radius: 12px;
    text-decoration: none; font-size: 13.5px; font-weight: 600;
    color: var(--primary); background: rgba(211,171,79,.18);
    border: 1px dashed var(--secondary);
}
.ss-confirm i { font-size: 20px; color: #128c4a; }

.ss-thanks {
    margin-top: 26px; padding: 24px 18px; text-align: center; color: #fff;
    border-radius: 20px; border-bottom: 4px solid var(--secondary);
    background: linear-gradient(160deg, var(--primary), var(--tertiary));
}
.ss-thanks i  { font-size: 30px; color: var(--secondary); }
.ss-thanks h3 { margin: 8px 0 6px; font-size: 18px; }
.ss-thanks p  { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gold-light); }

@media (min-width: 640px) {
    .ss-usage { grid-template-columns: repeat(3, 1fr); }
    .ss-usage-item { display: block; text-align: center; }
    .ss-usage-item .ap-icon { margin: 0 auto 10px; }
}