/* =========================================================================
   sim-types.css — Tokens & styles des BADGES et du FILTRE « par type »
   du catalogue des simulations (simulations.html).

   Fichier isolé et volontairement autonome : il sert de socle au futur
   chantier de charte graphique interne des simulations. Ne dépend que des
   tokens neutres de sommaire.css (--ui, --serif, --card…).

   Axe pédagogique « type » (orthogonal au domaine) :
     observer · explorer · mesurer (TP) · entrainer (s'entraîner) · calculer
   Choix de design : « explorer » regroupe ~83 % du catalogue → rendu DISCRET
   (puce neutre) pour que les 4 types minoritaires et utiles ressortent.
   ========================================================================= */

:root {
  /* couleur d'accent (texte plein / puce active) par type */
  --type-observer:  #0e7490;  /* cyan  */
  --type-explorer:  #64748b;  /* ardoise (discret) */
  --type-mesurer:   #15803d;  /* vert (TP / labo) */
  --type-entrainer: #6d28d9;  /* violet */
  --type-calculer:  #1d4ed8;  /* bleu */

  /* fond clair + bordure du badge (posé sur carte blanche) */
  --type-observer-bg:  #ecfeff;  --type-observer-bd:  #a5f3fc;
  --type-explorer-bg:  #f1f5f9;  --type-explorer-bd:  #e2e8f0;
  --type-mesurer-bg:   #ecfdf5;  --type-mesurer-bd:   #a7f3d0;
  --type-entrainer-bg: #f5f3ff;  --type-entrainer-bd: #ddd6fe;
  --type-calculer-bg:  #eff6ff;  --type-calculer-bd:  #dbe7ff;

  /* texte lisible sur ces fonds (AA garanti) */
  --type-observer-ink:  #155e75;
  --type-explorer-ink:  #475569;  /* muté, mais AA */
  --type-mesurer-ink:   #166534;
  --type-entrainer-ink: #5b21b6;
  --type-calculer-ink:  #1e40af;
}

/* ---------- Badge sur la carte (eyebrow au-dessus du titre) ---------- */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 5px;
  padding: 1px 8px 1px 6px;
  border: 1px solid var(--type-explorer-bd);
  border-radius: 999px;
  background: var(--type-explorer-bg);
  color: var(--type-explorer-ink);
  font-family: var(--ui);
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
  white-space: nowrap;
  max-width: 100%;
}
.type-badge .tb-ico { font-size: .82em; line-height: 1; }
.type-badge .tb-lbl { overflow: hidden; text-overflow: ellipsis; }
/* marqueur « + » pour une page composite (usage secondaire) */
.type-badge .tb-plus {
  margin-left: 2px; font-weight: 800; opacity: .7;
  cursor: help;
}

.type-badge.type-observer  { color: var(--type-observer-ink);  background: var(--type-observer-bg);  border-color: var(--type-observer-bd); }
.type-badge.type-mesurer   { color: var(--type-mesurer-ink);   background: var(--type-mesurer-bg);   border-color: var(--type-mesurer-bd); }
.type-badge.type-entrainer { color: var(--type-entrainer-ink); background: var(--type-entrainer-bg); border-color: var(--type-entrainer-bd); }
.type-badge.type-calculer  { color: var(--type-calculer-ink);  background: var(--type-calculer-bg);  border-color: var(--type-calculer-bd); }
/* explorer = valeurs par défaut ci-dessus (puce neutre, discrète) */
.type-badge.type-explorer  { font-weight: 600; }

/* ---------- Barre de filtres « par type » ---------- */
.type-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 22px;
}
.type-bar-label {
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-3, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.type-bar .result-count {
  margin-left: auto;
  font-family: var(--ui);
  font-size: .8rem;
  color: var(--ink-3, #64748b);
  white-space: nowrap;
}

/* Les puces réutilisent la base .filter-tag (sommaire) ; on ne surcharge que
   l'état actif, coloré par type. Spécificité > .filter-tag.active. */
.type-tag .tt-ico { margin-right: 3px; }
.filter-tag.type-tag.t-observer.active  { background: var(--type-observer);  border-color: var(--type-observer);  color: #fff; }
.filter-tag.type-tag.t-explorer.active  { background: var(--type-explorer);  border-color: var(--type-explorer);  color: #fff; }
.filter-tag.type-tag.t-mesurer.active   { background: var(--type-mesurer);   border-color: var(--type-mesurer);   color: #fff; }
.filter-tag.type-tag.t-entrainer.active { background: var(--type-entrainer); border-color: var(--type-entrainer); color: #fff; }
.filter-tag.type-tag.t-calculer.active  { background: var(--type-calculer);  border-color: var(--type-calculer);  color: #fff; }

/* Focus clavier visible (accessibilité) — en complément de l'éventuel style du site */
.filter-tag.type-tag:focus-visible { outline: 2px solid var(--type-calculer); outline-offset: 2px; }

/* ---------- Mode nuit (défensif : sommaire.css est clair, mais nav.js
   peut poser html[data-lecture="nuit"] ; on garde les badges lisibles) ---------- */
html[data-lecture="nuit"] {
  --type-observer-bg:  rgba(14,116,144,.16);  --type-observer-bd:  rgba(14,116,144,.42);  --type-observer-ink:  #67e8f9;
  --type-explorer-bg:  rgba(100,116,139,.16); --type-explorer-bd:  rgba(100,116,139,.38); --type-explorer-ink:  #cbd5e1;
  --type-mesurer-bg:   rgba(21,128,61,.18);   --type-mesurer-bd:   rgba(21,128,61,.42);   --type-mesurer-ink:   #86efac;
  --type-entrainer-bg: rgba(109,40,217,.20);  --type-entrainer-bd: rgba(109,40,217,.44);  --type-entrainer-ink: #c4b5fd;
  --type-calculer-bg:  rgba(29,78,216,.20);   --type-calculer-bd:  rgba(29,78,216,.44);   --type-calculer-ink:  #93c5fd;
}