/* =============================================================================
   05-utilities.css — UTILITAIRES ATOMIQUES
   -----------------------------------------------------------------------------
   Helpers à classe unique pour remplacer les attributs `style="…"` collés sur
   les éléments (notamment dans les ~105 articles). Dernier maillon de la
   cascade : ils ont le dernier mot, ce qui évite tout recours à `!important`.
   N'en ajouter que si un besoin se répète. Ne pas recréer un framework complet.
   ============================================================================= */
/* Marges verticales (échelle de tokens) */
.nt-m-0   { margin: 0; }
.nt-mt-0  { margin-top: 0; }
.nt-mb-0  { margin-bottom: 0; }
.nt-mb-xs { margin-bottom: var(--nt-space-xs); }
.nt-mb-sm { margin-bottom: var(--nt-space-sm); }
.nt-mb-md { margin-bottom: var(--nt-space-md); }
.nt-mb-lg { margin-bottom: var(--nt-space-lg); }
.nt-mt-md { margin-top: var(--nt-space-md); }
.nt-mt-lg { margin-top: var(--nt-space-lg); }
/* Couleurs de texte (via tokens) */
.nt-text-muted  { color: var(--nt-text-muted); }
.nt-text-strong { color: var(--nt-text-strong); }
.nt-text-gold   { color: var(--nt-gold); }
/* Typographie */
.nt-serif   { font-family: var(--nt-font-heading); }
.nt-mono    { font-family: var(--nt-font-mono); }
.nt-uppercase { text-transform: uppercase; letter-spacing: .05em; }
/* Alignement */
.nt-text-center { text-align: center; }
.nt-text-left   { text-align: left; }
/* Accessibilité : masquage visuel mais lisible par lecteurs d'écran */
.nt-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
/* Full-bleed ponctuel (déborder la colonne de contenu sur 100vw) */
.nt-full-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; }
/* ============================================================
   MIGRATION 2026-06-23 — Design système Nooktails
   ============================================================ */
/* ── Focus visible A11y ──────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--nt-gold);
  outline-offset: 2px;
}
/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nook-hub-card,
  .nook-hub-card__title,
  .entry-content a[href*='amazon']:has(strong),
  .entry-content a[href*='tag=nooktails-21']:has(strong),
  .entry-content table td a[href*='amazon'] {
    transition: none;
    transform: none;
  }
}