/* ── THÉMATIQUES D'ASSOCIATION : pastille + icône + badge ──
   Rendu des catégories thématiques dans les résultats de recherche (autocomplete
   /association + picker au dépôt d'avis). La catégorie est calculée côté JS
   (themeCategory() dans engine.js) et posée en classe .theme-<key>.

   • Couleur : pilotée par la variable --cat-fg de la classe .theme-<key> (+ variante sombre).
   • Icône  : /img/themes/<key>.svg — REMPLAÇABLE par la graphiste (même nom de fichier,
              aucune modif de code). Cf. wwwroot/img/themes/README.md.
   Découplé de la RSE : purement cosmétique. */

.theme-pastille {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);                                              /* fallback si color-mix absent */
  background: color-mix(in srgb, var(--cat-fg, var(--green)) 15%, transparent);
  color: var(--cat-fg, var(--green-dark));
}

/* Icône monochrome recolorée via mask : prend la couleur --cat-fg de la catégorie.
   La forme vient de /img/themes/<key>.svg (alpha du SVG = masque). */
.theme-ico {
  width: 22px;
  height: 22px;
  display: block;
  background-color: var(--cat-fg, var(--green-dark));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.theme-ico-sante         { -webkit-mask-image: url('/img/themes/sante.svg');         mask-image: url('/img/themes/sante.svg'); }
.theme-ico-social        { -webkit-mask-image: url('/img/themes/social.svg');        mask-image: url('/img/themes/social.svg'); }
.theme-ico-environnement { -webkit-mask-image: url('/img/themes/environnement.svg'); mask-image: url('/img/themes/environnement.svg'); }
.theme-ico-education     { -webkit-mask-image: url('/img/themes/education.svg');     mask-image: url('/img/themes/education.svg'); }
.theme-ico-culture       { -webkit-mask-image: url('/img/themes/culture.svg');       mask-image: url('/img/themes/culture.svg'); }
.theme-ico-sport         { -webkit-mask-image: url('/img/themes/sport.svg');         mask-image: url('/img/themes/sport.svg'); }
.theme-ico-loisirs       { -webkit-mask-image: url('/img/themes/loisirs.svg');       mask-image: url('/img/themes/loisirs.svg'); }
.theme-ico-economie      { -webkit-mask-image: url('/img/themes/economie.svg');      mask-image: url('/img/themes/economie.svg'); }
.theme-ico-droits        { -webkit-mask-image: url('/img/themes/droits.svg');        mask-image: url('/img/themes/droits.svg'); }
.theme-ico-culte         { -webkit-mask-image: url('/img/themes/culte.svg');         mask-image: url('/img/themes/culte.svg'); }
.theme-ico-autre         { -webkit-mask-image: url('/img/themes/autre.svg');         mask-image: url('/img/themes/autre.svg'); }

.theme-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--accent);                                              /* fallback si color-mix absent */
  background: color-mix(in srgb, var(--cat-fg, var(--green)) 14%, transparent);
  color: var(--cat-fg, var(--green-dark));
}

/* ── Couleurs par catégorie (thème clair) ── */
.theme-sante         { --cat-fg: #c0392b; }
.theme-social        { --cat-fg: #d97706; }
.theme-environnement { --cat-fg: #2e7d32; }
.theme-education     { --cat-fg: #2563eb; }
.theme-culture       { --cat-fg: #7c3aed; }
.theme-sport         { --cat-fg: #0891b2; }
.theme-loisirs       { --cat-fg: #db2777; }
.theme-economie      { --cat-fg: #b07d1e; }
.theme-droits        { --cat-fg: #4f46e5; }
.theme-culte         { --cat-fg: #6d5f9c; }
.theme-autre         { --cat-fg: var(--green-dark); }

/* ── Variantes sombres (fg éclairci pour le contraste sur fond foncé) ── */
html.dark .theme-sante         { --cat-fg: #ec8074; }
html.dark .theme-social        { --cat-fg: #f0b45f; }
html.dark .theme-environnement { --cat-fg: #79c07d; }
html.dark .theme-education     { --cat-fg: #7aa7fb; }
html.dark .theme-culture       { --cat-fg: #b79cf7; }
html.dark .theme-sport         { --cat-fg: #4fc3d9; }
html.dark .theme-loisirs       { --cat-fg: #f472b6; }
html.dark .theme-economie      { --cat-fg: #d8ab5a; }
html.dark .theme-droits        { --cat-fg: #9a92f5; }
html.dark .theme-culte         { --cat-fg: #a99cd6; }
html.dark .theme-autre         { --cat-fg: var(--green-mid); }