/* ==========================================================================
   aa-chrome.css — Chrome de l'app, DA « Carnet d'atelier » (lot feat/da-chrome).

   Chargé APRÈS tokens.css dans base.html : les règles ici GAGNENT en cascade
   à spécificité égale. tokens.css est le socle FIGÉ — toute règle propre au
   chrome (sidebar / TabBar / header / nav / lanceur Voxa) vit dans CE fichier.

   Cache : fichier NOUVEAU → URL inédite côté nginx (expires 1y immutable),
   aucune copie stale ne peut exister ; le ?v= suit static_version comme les
   autres assets pour les bumps futurs.

   Sommaire :
     1. Wordmark serif display
     2. Nav globale (.aa-nav-item) — sidebar desktop + drawers
     3. TabBar — état actif lisible (encre + barre tampon)
     4. Badge compteur en tampon (.aa-chrome-stamp)
     5. Clearance TabBar (<1024px) des zones de contenu
     6. Lanceur Voxa — pulse discret quand mémos en attente
   ========================================================================== */

/* ==========================================================================
   1. Wordmark — serif display (direction-3 : « VoxNote » en serif, mock-top).
      .wm-wrapper porte le texte (V + oxNote) ; l'icône 3 barres reste telle
      quelle. S'applique partout où le lockup est inclus (header PWA, sidebar
      dashboard, headers factures/devis, drawers, pages auth).
   ========================================================================== */
.wm-wrapper {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   2. Nav globale — fragments/_nav-global.html (.aa-nav-item).
      Avant ce lot : classes déclarées dans les templates mais JAMAIS définies
      en CSS (le style vivait dans des style="" inline, purgés au passage).
      État actif direction-3 : fond encre léger + texte encre + graisse 700 —
      l'ambre redevient réservé à l'ACTION (CTA, Voxa).
   ========================================================================== */
.aa-nav-item {
  position: relative;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  min-height: 48px; /* cible tactile AAA */
  transition: background-color var(--aa-transition-dur) var(--aa-transition-ease),
              color var(--aa-transition-dur) var(--aa-transition-ease);
}
.aa-nav-item:hover {
  background: var(--bg-bloc);
  color: var(--text-primary);
}
.aa-nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.aa-nav-item-active {
  background: var(--encre-bg);
  color: var(--encre);
  font-weight: 700;
}
.aa-nav-item-active:hover {
  /* l'item courant ne « blanchit » pas au survol — il reste encré. */
  background: var(--encre-bg);
  color: var(--encre);
}
/* Barre d'encre verticale gauche — posée comme un trait de marge de carnet.
   Animée à l'arrivée sur la page (scaleY 0 → 1), façon coup de règle. */
.aa-nav-item-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--encre);
  transform-origin: center;
  animation: aa-chrome-ink-bar 220ms var(--aa-transition-ease) both;
}
@keyframes aa-chrome-ink-bar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ==========================================================================
   3. TabBar — état actif lisible.
      tokens.css §25 colore l'onglet actif en accent ; on ajoute une barre
      supérieure (repère immédiat pouce/œil) + graisse, sans toucher au socle.
   ========================================================================== */
.aa-tabbar-tab {
  position: relative; /* ancre la barre active + le tampon compteur */
}
.aa-tabbar-tab-active {
  font-weight: 700;
}
.aa-tabbar-tab-active::before {
  content: "";
  position: absolute;
  top: -8px; /* compense le padding-top 8px de .aa-tabbar */
  left: 50%;
  width: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  transform: translateX(-50%);
  animation: aa-chrome-tab-bar 220ms var(--aa-transition-ease) both;
}
@keyframes aa-chrome-tab-bar {
  from { transform: translateX(-50%) scaleX(0); }
  to   { transform: translateX(-50%) scaleX(1); }
}

/* ==========================================================================
   4. Badge compteur en TAMPON — mémos en attente de validation.
      Même langage que .aa-pill-alarm (bordure encreuse, rotation, entrée
      aa-stamp-in du socle §50) en format compteur compact. Brique = --error
      (les encres de métier sauge/brique sont mappées sur les tokens
      sémantiques — cf. tokens.css §1).
   ========================================================================== */
.aa-chrome-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--error);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform: rotate(-4deg);
  animation: aa-stamp-in var(--dur-fast) var(--ease-stamp) both;
}
/* Sur un onglet TabBar : tamponné en haut-droite de l'icône. */
.aa-tabbar-tab .aa-chrome-stamp {
  position: absolute;
  top: -2px;
  left: calc(50% + 8px);
}
/* Sur un item de nav : poussé à droite de la ligne. */
.aa-nav-item .aa-chrome-stamp {
  margin-left: auto;
}

/* ==========================================================================
   5. Clearance TabBar — le contenu dégage la TabBar fixe (64px + safe-area)
      tant qu'elle est visible (<1024px), plus de réserve fantôme au-delà.
      Remplace le pb-32 inconditionnel du shell PWA.
   ========================================================================== */
.aa-tabbar-clearance {
  padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) {
  .aa-tabbar-clearance { padding-bottom: 0; }
}

/* ==========================================================================
   6. Lanceur Voxa vivant — pulse DISCRET quand des mémos attendent.
      Déclencheur : base.html pose data-memos-pending sur <body> quand le
      contexte expose memos_pending_count > 0 (défensif — aujourd'hui la
      home). Halo d'encre ocre, 3 battements puis repos (pas de boucle
      infinie : c'est un clin d'œil, pas une alarme). Le lanceur masqué
      ([hidden], drawer ouvert) ne pulse pas.
   ========================================================================== */
@keyframes aa-voxa-pulse {
  0%, 100% { box-shadow: 0 5px 12px color-mix(in srgb, var(--accent) 32%, transparent); }
  50%      { box-shadow: 0 5px 12px color-mix(in srgb, var(--accent) 32%, transparent),
                         0 0 0 9px color-mix(in srgb, var(--accent) 16%, transparent); }
}
body[data-memos-pending] .aa-jarvis-tab:not([hidden]) {
  animation: aa-voxa-pulse 2.2s ease-in-out 3;
}

/* ==========================================================================
   Accessibilité mouvement — WCAG 2.3.3 : tout débrayé, états finaux posés.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .aa-nav-item,
  .aa-nav-item-active::before,
  .aa-tabbar-tab-active::before,
  .aa-chrome-stamp {
    transition: none;
    animation: none;
  }
  body[data-memos-pending] .aa-jarvis-tab:not([hidden]) {
    animation: none;
  }
}