/* =====================================================================
   Opera Populi : composants de base (tons, icônes, tesselles, marque)
   ===================================================================== */

/* ---------- Tons : data-tone (tons des statuts : status.js) et data-outcome fixent --tone* ---------- */
[data-tone="warn"], [data-outcome="partial"] {
  --tone: var(--st-pending); --tone-bg: var(--st-pending-bg); --tone-fg: var(--st-pending-fg);
}
[data-tone="info"] {
  --tone: var(--st-selected); --tone-bg: var(--st-selected-bg); --tone-fg: var(--st-selected-fg);
}
[data-tone="success"], [data-outcome="implemented"] {
  --tone: var(--st-implemented); --tone-bg: var(--st-implemented-bg); --tone-fg: var(--st-implemented-fg);
}
[data-tone="merge"] {
  --tone: var(--st-merged); --tone-bg: var(--st-merged-bg); --tone-fg: var(--st-merged-fg);
}
[data-tone="danger"], [data-outcome="failed"] {
  --tone: var(--st-rejected); --tone-bg: var(--st-rejected-bg); --tone-fg: var(--st-rejected-fg);
}
[data-tone="neutral"] {
  --tone: var(--st-moderated); --tone-bg: var(--st-moderated-bg); --tone-fg: var(--st-moderated-fg);
}
[data-tone="muted"] {
  --tone: var(--st-expired); --tone-bg: var(--st-expired-bg); --tone-fg: var(--st-expired-fg);
}
[data-tone="stale"] {
  --tone: var(--st-outdated); --tone-bg: var(--st-outdated-bg); --tone-fg: var(--st-outdated-fg);
}

/* ---------- Icônes et tesselles décoratives ---------- */
.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.tessera {
  display: inline-block; flex: none;
  width: .7em; height: .7em;
  border-radius: var(--r-2xs);
  background: var(--accent);
  rotate: -8deg;
}
.tessera--live { background: var(--tess-4); animation: breathe 2.6s var(--ease-out) 2; }
/* Pulsations limitées à 2 cycles (moins de 5 s, WCAG 2.2.2) */
@keyframes breathe { 50% { scale: .72; opacity: .65; } }

/* ---------- Marque ---------- */
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--text); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-semibold);
  font-variation-settings: var(--soft); letter-spacing: -.02em;
}
.brand__mark { flex: none; width: 2rem; height: 2rem; transition: rotate var(--dur-slow) var(--ease-spring); }
.brand:hover .brand__mark { rotate: -14deg; }
.brand__name em { color: var(--accent-text); }
@media (max-width: 24rem) {
  .site-header .brand { font-size: var(--fs-lg); gap: .5rem; }
  .site-header .brand__mark { width: 1.75rem; height: 1.75rem; }
}
/* 320 px (WCAG 1.4.10) : logo seul, le nom reste le nom accessible du lien */
@media (max-width: 22.5rem) {
  .site-header .brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.brand--sm { font-size: var(--fs-md); }
.brand--sm .brand__mark { width: 1.5rem; height: 1.5rem; }