/* Tinhinan — bande partenaires (affiliation).
   Feuille autonome : chargée aussi bien par les pages publiques (site.css) que par le
   portail (portal.css), qui ne partagent pas la même base. Les jetons utilisés
   (--dawn, --dawn-gold, --paper, --line, --ease-out) viennent de tinhinan-theme.css. */
:root { --aff-line: var(--line, rgba(26,26,26,.10)); --aff-surface: #fbf8f2; --aff-accent: #a83e1f; }
/* Surfaces alignées sur les cartes d'offres d'emploi ; terracotta assombri en clair et
   éclairci en sombre pour tenir 4,5:1 sur le petit texte en capitales (titre, bouton). */
[data-theme="dark"] { --aff-surface: #161615; --aff-accent: #ff8566; }

/* ---------- Affiliation : bande partenaires (portail, emplois, podcast) ---------- */
.affiliates { margin: 3.5rem auto; max-width: 1100px; padding: 0 1.5rem; }
.affiliates[hidden] { display: none; }
.affiliates-title {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--aff-accent); margin: 0 0 1rem;
}
.affiliates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.affiliate-card {
    display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem 1.25rem;
    border: 1px solid var(--aff-line); border-radius: 14px;
    /* surface issue des jetons de thème : en sombre, un blanc translucide en dur virait
       au gris boueux et le texte clair tombait à 2,36:1 */
    background: var(--aff-surface); color: var(--ink);
    text-decoration: none;
    transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.affiliate-card:hover, .affiliate-card:focus-visible {
    transform: translateY(-3px); border-color: var(--dawn-gold);
    box-shadow: 0 14px 34px rgba(13, 20, 16, .10);
}
.affiliate-head { display: flex; align-items: center; gap: .6rem; }
.affiliate-logo { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; }
.affiliate-emoji { font-size: 1.35rem; line-height: 1; }
.affiliate-name { font-weight: 700; font-size: 1rem; }
.affiliate-tagline { margin: 0; font-size: .93rem; line-height: 1.5; }
.affiliate-desc { margin: 0; font-size: .84rem; line-height: 1.5; opacity: .72; }
.affiliate-cta {
    margin-top: .35rem; align-self: flex-start; font-family: var(--font-mono);
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--aff-accent);
    border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.affiliates-disclosure { margin: 1rem 0 0; font-size: .78rem; line-height: 1.55; opacity: .68; }
/* Variante sombre : explicite via data-affiliates-theme="dark" sur le conteneur.
   Surtout pas déduite de la page — sur le portail, la bande tombe sur la moitié claire,
   et une inversion automatique donnait du texte papier sur fond papier (contraste 1,01). */
.affiliates[data-affiliates-theme="dark"] .affiliate-card {
    background: rgba(242, 239, 234, .06); border-color: rgba(242, 239, 234, .16); color: var(--paper);
}
.affiliates[data-affiliates-theme="dark"] .affiliate-desc { opacity: .8; }
.affiliates[data-affiliates-theme="dark"] .affiliate-cta { color: var(--dawn-gold); }
.affiliates[data-affiliates-theme="dark"] .affiliates-disclosure { color: var(--paper); opacity: .74; }
@media (prefers-reduced-motion: reduce) { .affiliate-card { transition: none; } .affiliate-card:hover { transform: none; } }