/* ===== SUPPORT SECTION (KO-FI) ===== */
.support {
    padding: 85px 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.support-container {
    position: relative;
    max-width: 450px;
    margin: 0 auto;
    padding: 10px;
    background: linear-gradient(145deg, #19122580, #100d18);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    overflow: hidden;
}

.support-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(300px circle at 85% 0%, #b66cff12, transparent 70%);
    pointer-events: none;
}

/* Le widget Ko-fi est nativement clair et son contenu ne peut pas être stylé
   directement (iframe cross-origin). Deux adaptations pour l'intégrer au thème :
   1. Filtre sombre (sur le iframe) : fonds clairs → sombres, textes foncés →
      clairs, teintes (violet, rouge) globalement préservées.
   2. Recadrage (sur le cadre) : la bannière de profil et l'avatar sont des
      images que l'inversion rendrait méconnaissables — on les masque en
      décalant le iframe de 112px vers le haut via une fenêtre de 470px,
      calée sur le contenu (≈30px au-dessus du titre, ≈30px sous la ligne
      « Powered by Ko-fi »). La tuile (450px) encadre le widget, dont la
      largeur interne est plafonnée à ~400px par Ko-fi.
   Pour revenir au widget clair d'origine : supprimer « filter » et
   « margin-top », et remettre la hauteur du cadre à 712px. */
.support-frame {
    position: relative;
    z-index: 1;
    height: 470px;
    border-radius: 14px;
    overflow: hidden;
}

.support-frame iframe {
    display: block;
    width: 100%;
    height: 712px;
    border: none;
    background: transparent;
    margin-top: -112px;
    filter: invert(1) hue-rotate(180deg);
}

@media (max-width: 768px) {
    .support {
        padding: 60px 16px;
    }
    .support-container {
        padding: 8px;
        border-radius: 18px;
    }
}
/* ===== END SUPPORT ===== */