/* ===========================================================================
   Couleurs de thématiques — palette DSFR (« couleurs illustratives »).

   Chaque classe n'expose que deux variables, tirées telles quelles des jetons
   DSFR (définis sur :root par dsfr.min.css, adaptatifs clair/sombre) :
       --theme-color-bg    fond du badge / de la puce
       --theme-color-text  couleur du texte

   Les composants compacts qui ne sont pas des `fr-badge` les consomment :
   .project-row__theme (liste de résultats), .theme-card (grille /thematiques),
   .dashboard-themes__dot (bloc thématique du tableau de bord). Les vrais
   badges autonomes utilisent directement `fr-badge--<jeton>` du DSFR.

   Le choix par thématique est paramétrable dans /InnovInfo27690/themes ; la
   couleur reste secondaire, le libellé est toujours affiché (accessibilité).
   =========================================================================== */

.theme-color--green-tilleul-verveine { --theme-color-bg: var(--background-contrast-green-tilleul-verveine); --theme-color-text: var(--text-label-green-tilleul-verveine); }
.theme-color--green-bourgeon         { --theme-color-bg: var(--background-contrast-green-bourgeon);         --theme-color-text: var(--text-label-green-bourgeon); }
.theme-color--green-emeraude         { --theme-color-bg: var(--background-contrast-green-emeraude);         --theme-color-text: var(--text-label-green-emeraude); }
.theme-color--green-menthe           { --theme-color-bg: var(--background-contrast-green-menthe);           --theme-color-text: var(--text-label-green-menthe); }
.theme-color--green-archipel         { --theme-color-bg: var(--background-contrast-green-archipel);         --theme-color-text: var(--text-label-green-archipel); }
.theme-color--blue-ecume             { --theme-color-bg: var(--background-contrast-blue-ecume);             --theme-color-text: var(--text-label-blue-ecume); }
.theme-color--blue-cumulus           { --theme-color-bg: var(--background-contrast-blue-cumulus);           --theme-color-text: var(--text-label-blue-cumulus); }
.theme-color--purple-glycine         { --theme-color-bg: var(--background-contrast-purple-glycine);         --theme-color-text: var(--text-label-purple-glycine); }
.theme-color--pink-macaron           { --theme-color-bg: var(--background-contrast-pink-macaron);           --theme-color-text: var(--text-label-pink-macaron); }
.theme-color--pink-tuile             { --theme-color-bg: var(--background-contrast-pink-tuile);             --theme-color-text: var(--text-label-pink-tuile); }
.theme-color--yellow-tournesol       { --theme-color-bg: var(--background-contrast-yellow-tournesol);       --theme-color-text: var(--text-label-yellow-tournesol); }
.theme-color--yellow-moutarde        { --theme-color-bg: var(--background-contrast-yellow-moutarde);        --theme-color-text: var(--text-label-yellow-moutarde); }
.theme-color--orange-terre-battue    { --theme-color-bg: var(--background-contrast-orange-terre-battue);    --theme-color-text: var(--text-label-orange-terre-battue); }
.theme-color--brown-cafe-creme       { --theme-color-bg: var(--background-contrast-brown-cafe-creme);       --theme-color-text: var(--text-label-brown-cafe-creme); }
.theme-color--brown-caramel          { --theme-color-bg: var(--background-contrast-brown-caramel);          --theme-color-text: var(--text-label-brown-caramel); }
.theme-color--brown-opera            { --theme-color-bg: var(--background-contrast-brown-opera);            --theme-color-text: var(--text-label-brown-opera); }
.theme-color--beige-gris-galet       { --theme-color-bg: var(--background-contrast-beige-gris-galet);       --theme-color-text: var(--text-label-beige-gris-galet); }

/* fr-tag cliquable coloré (badges de thématiques sur la fiche projet et la page
   d'une thématique). L'attribut [class*="theme-color--"] + .fr-tag l'emporte sur
   le fond gris par défaut du DSFR ; le survol reste géré par le DSFR. */
.fr-tag[class*="theme-color--"] {
  background-color: var(--theme-color-bg, var(--background-contrast-grey));
  color: var(--theme-color-text, var(--text-default-grey));
}

/* Puce colorée réutilisable (grille des thématiques, bloc du tableau de bord) :
   petit rond dans la teinte saturée de la thématique, purement décoratif
   (aria-hidden côté gabarit). */
.theme-dot {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--theme-color-text, var(--text-mention-grey));
  vertical-align: baseline;
}

/* Filet gauche des cartes de thématiques (/thematiques) et des cartes du bloc
   « par thématique » du tableau de bord : teinte de la thématique au lieu du
   bleu France générique. */
.theme-card[class*="theme-color--"] { border-left-color: var(--theme-color-text); }
.dashboard-themes__card[class*="theme-color--"] { border-left-color: var(--theme-color-text); }