/* ═══════════════════════════════════════════════════════════════════════════════
   CADENCEGROW — wordmark canonique. SOURCE UNIQUE de l'identité en page.
   Change ici -> change partout (login, header/sidebar, écran de chargement, docs).
   Piste 5 validée : [beat] Cadence + grow (petit, ambre, en bas de ligne).
   100% tokens : --amber / --ink / --font-display (voir tokens.css et :root du login).
   Zéro couleur / police en dur. Épuré : le beat + deux mots, rien de plus.
   ═══════════════════════════════════════════════════════════════════════════════ */

.cad {
  --cad-size: 22px;                 /* pilote TOUT (barres, gaps, grow) en em */
  display: inline-flex;
  align-items: flex-end;
  gap: .52em;
  font-size: var(--cad-size);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* ── LE BEAT : 4 barres verticales arrondies, hauteurs rythmées ── */
.cad-beat { display: inline-flex; align-items: flex-end; gap: .13em; height: .92em; }
.cad-beat i {
  width: .16em;
  border-radius: .09em;             /* arrondi proportionnel (pas de radius fixe) */
  background: var(--amber);
  display: block;
}
.cad-beat i:nth-child(1) { height: .48em; }
.cad-beat i:nth-child(2) { height: .82em; }
.cad-beat i:nth-child(3) { height: 1em;   }
.cad-beat i:nth-child(4) { height: .60em; }

/* ── LE WORDMARK : Cadence (dominant) + grow (petit, ambre) ── */
.cad-word {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.021em;
  font-size: 1em;
  line-height: .82;
  display: inline-flex;
  align-items: baseline;
}
.cad-grow {
  font-size: .40em;                 /* petit — complète sans voler la vedette */
  font-weight: 700;
  color: var(--amber);
  letter-spacing: .005em;
  margin-left: .14em;
  align-self: baseline;             /* aligné en bas de ligne */
}

/* ── TAILLES (une seule variable) ── */
.cad--xs { --cad-size: 15px; }
.cad--sm { --cad-size: 17.5px; }
.cad--md { --cad-size: 22px; }
.cad--lg { --cad-size: 30px; }
.cad--xl { --cad-size: 40px; }

/* ── MONOCHROME (fond clair, impression, export) : tout en currentColor ── */
.cad--mono { --amber: currentColor; --ink: currentColor; }
.cad--mono .cad-grow { opacity: .62; }   /* garde la hiérarchie sans couleur */

/* ── ICÔNE SEULE : le coureur (espaces réduits : favicon, sidebar repliée, onglet) ── */
.cad-run { width: 1.15em; height: 1.15em; color: var(--amber); display: inline-block; font-size: var(--cad-size, 22px); flex: 0 0 auto; }
.cad-run svg { width: 100%; height: 100%; display: block; }
.cad-run--mono { color: currentColor; }

/* ── ANIMATION DU BEAT (CSS only) — SEULEMENT si .cad--animated (login + chargement).
      Statique partout ailleurs (aucune distraction pendant l'usage). Courte, discrète. ── */
.cad--animated .cad-beat i {
  transform-origin: bottom center;
  animation: cadBeat 1.15s ease-in-out infinite;
}
.cad--animated .cad-beat i:nth-child(1) { animation-delay: 0s;    }
.cad--animated .cad-beat i:nth-child(2) { animation-delay: .13s;  }
.cad--animated .cad-beat i:nth-child(3) { animation-delay: .26s;  }
.cad--animated .cad-beat i:nth-child(4) { animation-delay: .39s;  }
@keyframes cadBeat { 0%, 100% { transform: scaleY(.72); } 50% { transform: scaleY(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .cad--animated .cad-beat i { animation: none; }
}

/* ── SIDEBAR : LE MÊME lockup (beat + Cadencegrow) partout, chaque page et chaque état.
      UN seul logo — jamais le coureur seul, le « grow » ne disparaît jamais. ── */
.sb-brand { align-items: center; overflow: hidden; }
.sb-brand .cad { flex: 0 0 auto; }