/* ============================================================================
 * MODULE 13 — COULEURS DES THÈMES
 * ----------------------------------------------------------------------------
 * Les sept couleurs sont les SEULES touches de couleur de l'interface.
 * Elles servent de pastilles, de bordures de sélection et de barres de
 * statistiques — jamais de fond de bloc.
 * ==========================================================================*/

:root {
  --theme-1: #D4AF37;   /* Trading            🟡 */
  --theme-2: #3B82F6;   /* Business / Contenu 🔵 */
  --theme-3: #EF4444;   /* Corps              🔴 */
  --theme-4: #A855F7;   /* Être               🟣 */
  --theme-5: #22C55E;   /* Admin & Argent     🟢 */
  --theme-6: #F97316;   /* Social             🟠 */
  --theme-7: #94A3B8;   /* Temps libre        ⚪ */
}

.t1 { --couleur-theme: var(--theme-1); }
.t2 { --couleur-theme: var(--theme-2); }
.t3 { --couleur-theme: var(--theme-3); }
.t4 { --couleur-theme: var(--theme-4); }
.t5 { --couleur-theme: var(--theme-5); }
.t6 { --couleur-theme: var(--theme-6); }
.t7 { --couleur-theme: var(--theme-7); }

/* Pastille pleine — repère de couleur d'une tâche ou d'un jour */
.pastille {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--couleur-theme, var(--texte-faible));
  flex: none;
}

/* Choix d'un thème dans le formulaire */
.puce-theme {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--cible);
  padding: 0 14px;
  border-radius: var(--rayon-petit);
  background: var(--surface-haut);
  border: 1.5px solid transparent;
  color: var(--texte-moyen);
  font-size: 15px;
  transition: border-color var(--transition), color var(--transition);
}

.puce-theme[aria-pressed="true"] {
  border-color: var(--couleur-theme);
  color: var(--texte);
}