/* TriZone — logo 3 points (natation · vélo · course) + couleurs sports (réf. Quadrizone) */

:root {
  --tz-swim: oklch(0.72 0.12 195);
  --tz-bike: oklch(0.72 0.17 55);
  --tz-run: oklch(0.7 0.16 145);
  --tz-health: oklch(0.68 0.14 25);
}

.tz-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--color-text, #f5f5f5);
  font-family: var(--font-display, "DM Serif Display", serif);
  font-weight: 600;
  font-size: var(--text-lg, 1.125rem);
  line-height: 1.1;
}

.tz-brand-logo:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm, 4px);
}

.tz-logo-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tz-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.2);
}

.tz-dot--swim {
  background: var(--tz-swim);
}

.tz-dot--bike {
  background: var(--tz-bike);
}

.tz-dot--run {
  background: var(--tz-run);
}

.tz-logo-text .tz-logo-z {
  color: var(--color-primary, oklch(0.72 0.17 55));
}

.tz-sport-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full, 999px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tz-sport-icon--swim {
  background: oklch(from var(--tz-swim) l c h / 0.2);
  color: var(--tz-swim);
}

.tz-sport-icon--bike {
  background: oklch(from var(--tz-bike) l c h / 0.2);
  color: var(--tz-bike);
}

.tz-sport-icon--run {
  background: oklch(from var(--tz-run) l c h / 0.2);
  color: var(--tz-run);
}

.tz-sport-icon--health {
  background: oklch(from var(--tz-health) l c h / 0.2);
  color: var(--tz-health);
}