/* ============================================================
   niveau.css — indicateur de niveau (CMQ FBO vitrine)
   Modèle v3 « course du métier » — décidé MOA 2026-05-21 (soir).
   Deux teintes teal pleines, plus de gris ni de hachures.
   La 6e case (toujours .off) matérialise le perfectionnement hors-école.
   ============================================================ */

.niveau-barre {
  display: inline-flex;
  align-items: center;
  gap: 0;
  vertical-align: middle;
}
.niveau-seg {
  display: inline-block;
  width: 6px;
  height: 14px;
  border-radius: 1px;
}
.niveau-seg + .niveau-seg { margin-left: 2px; }
.niveau-seg.on  { background: #3A8A85; }  /* teal vitrine — niveau atteint */
.niveau-seg.off { background: #7CD0B3; }  /* teal pastel saturé — atteignable / perfectionnement */
.niveau-label {
  font-size: 0.72rem;
  color: #5A6B6B;
  margin-left: 6px;
  white-space: nowrap;
  font-weight: 600;
}

/* Variante compact pour popups Leaflet (si réutilisée plus tard). */
.niveau-barre.compact .niveau-seg { width: 5px; height: 11px; }
.niveau-barre.compact .niveau-label { font-size: 0.68rem; }

/* Label seul (hors fiche métier) — un simple chip discret, sans barre.
   Évite le piège « N/6 = formation incomplète » dans les contextes sans
   métier de référence (popups, /formations/, panneau Apprendre). */
.niveau-label-seul {
  display: inline-block;
  font-size: 0.72rem;
  color: #5A6B6B;
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 10px;
  background: #F0F7F5;
  border: 1px solid #D9EBE6;
}

/* Print : conserver les deux teals distinguables en niveaux de gris. */
@media print {
  .niveau-seg.on  { background: #333; }
  .niveau-seg.off { background: #aaa; }
  .niveau-label-seul { background: transparent; border-color: #999; color: #333; }
}

/* Mobile : autoriser le wrap propre sous le titre. */
@media (max-width: 380px) {
  .niveau-barre { flex-wrap: wrap; }
  .niveau-label { margin-left: 4px; }
}