/* ========== Top nav — logo centré ==========
   Grille à trois zones : zone libre à gauche, logo au centre, session à
   droite. Les deux côtés sont en 1fr, donc le logo reste optiquement centré
   quel que soit le contenu des côtés. La zone gauche est vide aujourd'hui :
   elle existe pour équilibrer la grille, pas pour être remplie. */

.anima-topnav {
  height: var(--topnav-h);
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); /* one-off hairline shadow, no matching shadow token */
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1046;
  isolation: isolate;
}

.anima-topnav-inner {
  max-width: 900px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

@media (max-width: 767.98px) {
  .anima-topnav-inner {
    padding: 0 16px;
  }
}

.anima-topnav-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-width: 0;
}

.anima-topnav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  min-width: 0;
}

/* ---- Marque : logo Anima ---- */

.anima-topnav-mark {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* Seule la hauteur est pilotée, la largeur suit le ratio de l'image. Le fichier
   servi est un recadrage du logo officiel dont la baseline « Beyond Fantasy » a
   été retirée : à cette taille elle n'était plus lisible, seulement bruyante. */
.anima-topnav-logo {
  display: block;
  height: 36px;
  width: auto;
}

@media (max-width: 575.98px) {
  .anima-topnav-logo {
    height: 30px;
  }
}

/* ---- Zone droite : dés, ambiance, menu de profil ----
   Le thème et la déconnexion ne sont plus des boutons de la bannière : ils sont
   passés dans le menu de la pastille de profil (components/topnav/profile-menu).
   Ce qui les remplace ici n'apparaît que sur téléphone, et occupe la même largeur —
   la zone garde donc trois boîtes au plus, comme avant. */

.anima-topnav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.anima-topnav-icon:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* ---- Déclencheurs dés / ambiance : téléphone uniquement ----
   Au-dessus de 767,98 px ce sont les pastilles flottantes (.dice-fab dans
   dice-roller.css, .anima-ambient-fab dans pages/adventures.css) qui portent ces
   actions ; sous ce seuil elles sont masquées, la barre de navigation occupant le bas
   de l'écran. Les afficher des deux côtés dédoublerait le même bouton.
   Cette règle suit `.anima-topnav-icon` dans le fichier et a la même spécificité :
   c'est l'ordre qui fait gagner `display: none`. Ne pas la déplacer plus haut. */
.anima-topnav-trigger {
  display: none;
  position: relative; /* ancre du compteur .anima-topnav-badge */
  font-size: 0.9rem; /* les deux libellés sont des emoji : 0,78rem les rendait timides */
}

@media (max-width: 767.98px) {
  .anima-topnav-trigger {
    display: flex;
  }
}

/* « Ça joue » : la pastille flottante le dit par une pulsation ; à 29 px et à côté du
   logo, une animation permanente serait du bruit. Même information, en teinte. */
.anima-topnav-trigger.is-live {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Compteur de nappes actives, repris de .anima-ambient-fab__badge (adventures.css) et
   redimensionné : le badge de la pastille fait 1,1rem pour un bouton de 3rem, ce qui
   déborderait d'un bouton de 29 px. */
.anima-topnav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

/* ---- Menu de profil ---- */

/* `position: relative` ancre le panneau déroulant ; `.anima-topnav` ne pose aucun
   `overflow`, le panneau peut donc dépasser sous la bannière. */
.anima-topnav-menu {
  position: relative;
  display: flex;
  min-width: 0;
}

.anima-topnav-profile {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px 3px 3px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface-2);
  text-decoration: none;
  min-width: 0;
  /* Le déclencheur est devenu un <button> (c'était un <LinkTo>, donc un <a>) : sans
     ces deux-là il hériterait de la police et du curseur par défaut du navigateur. */
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}

.anima-topnav-profile:hover {
  border-color: var(--accent);
}

/* Seul usage légitime de Cinzel sous 1rem : uniquement des capitales. */
.anima-topnav-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.anima-topnav-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Panneau déroulant. `z-index: 1` suffit : `.anima-topnav` porte `isolation: isolate`,
   donc l'empilement se joue à l'intérieur de la bannière, elle-même à 1046. Le panneau
   passe ainsi au-dessus du contenu de la page mais SOUS les modales de combat (1300) —
   même plafond que la bannière qui le contient. */
.anima-topnav-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); /* one-off shadow, no matching token */
  overflow: hidden;
}

.anima-topnav-menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.8rem;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.anima-topnav-menu-item:hover,
.anima-topnav-menu-item:focus-visible {
  background: var(--surface-2);
  color: var(--accent);
}

@media (max-width: 575.98px) {
  .anima-topnav-profile {
    padding: 3px;
    border-color: transparent;
    background: none;
  }
  .anima-topnav-name {
    display: none;
  }
}


/* ========== Sidebar ========== */

.anima-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
}

.anima-sidebar .nav-link {
  color: var(--muted);
  border-radius: 2px;
  padding: 8px 12px;
  font-size: 0.8rem;
  margin-bottom: 2px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.anima-sidebar .nav-link:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.anima-sidebar .nav-link.active {
  color: var(--accent);
  background: var(--surface-2);
}


/* ========== Main content area ========== */

.anima-main {
  flex: 1;
  min-width: 0;
  padding: 28px 32px;
  max-width: 900px;
}

@media (max-width: 767.98px) {
  .anima-main {
    padding: 20px 16px;
  }
}


/* ========== Tab bar (replaces sidebar) ========== */

.anima-tab-bar {
  /* 2px et non 1 : c'est l'épaisseur réellement rendue depuis toujours, elle
     venait des règles de la fiche de personnage qui écrasaient cette classe
     depuis pages/characters.css. Ces règles ont été renommées
     (.anima-sheet-tabs) ; la valeur est rapatriée ici pour que le rendu de la
     navigation ne bouge pas d'un pixel. Même chose pour le padding et le
     margin-bottom de .anima-tab plus bas. */
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); /* one-off hairline shadow, no matching shadow token */
  padding: 0;
  position: sticky;
  top: var(--topnav-h);
  z-index: 1045;
  isolation: isolate;
}

.anima-tab-bar-inner {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: flex-end;
  gap: 0;
  /* Même traitement que .anima-subtab-bar-inner : sous ~600px les 4 (ou 5)
     onglets ne tiennent pas, ils débordaient au lieu de défiler. */
  overflow-x: auto;
  scrollbar-width: none;
}

.anima-tab-bar-inner::-webkit-scrollbar {
  display: none;
}

.anima-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 16px; /* valeur réellement rendue — cf. commentaire sur .anima-tab-bar */
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; /* remonte sur le liseré de 2px de la barre */
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.anima-tab > svg {
  flex: 0 0 auto;
}

/* L'onglet « Combats » est le seul de la rangée qui ne soit pas un lien de
   route : il ouvre un menu, ou saute droit au combat quand il n'y en a qu'un. Il
   est écrit en <button> et non en <div role="button" tabindex="0"> — ce dernier
   se prenait le focus au clavier sans pouvoir s'activer (ni Entrée ni Espace ne
   déclenchent un gestionnaire de clic sur un <div>), et son `role="button"`
   sortait au passage l'icône et le compteur de l'arbre d'accessibilité.
   Ces déclarations éteignent l'habillage natif du bouton pour que l'onglet reste
   identique aux <a> voisins.
   Les trois bordures sont éteintes par leur seule largeur, et non par un
   raccourci `border` : la bordure basse appartient à `.anima-tab` juste
   au-dessus, et la bordure haute au bloc mobile plus bas — toutes deux de même
   spécificité que ce sélecteur, mais écrites après lui, donc gagnantes. Un
   `border: 0` ici les effacerait toutes les deux. */
.anima-combats-tab {
  appearance: none;
  background: none;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
  text-align: inherit;
}

/* Variante courte du libellé (« Persos », « Aventure », « Ress. »), portée par
   les seuls onglets qui en ont besoin. Éteinte par défaut : sur grand écran la
   place ne manque pas, c'est le nom complet qui s'affiche. Le bloc mobile plus
   bas inverse les deux.
   `display: none` et non `visibility: hidden` : le harnais mobile choisit le
   libellé à mesurer sur `offsetParent !== null`, qu'un élément seulement
   invisible garde non nul — il mesurerait alors les deux variantes. */
.anima-tab-label-short {
  display: none;
}

.anima-tab:hover {
  color: var(--ink);
  text-decoration: none;
}

.anima-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Téléphone : la navigation principale passe en bas de l'écran ──────────
   Seule la mise en page bascule ; le markup ne change qu'en ceci que trois
   libellés existent en deux variantes (cf. .anima-tab-label-short). Les
   libellés abandonnent le traitement mono/majuscules/interlettré des onglets
   desktop : à ~84 px de large par onglet, il réclamait ~104 px pour
   « Ressources ». Roboto en casse normale a rapproché du budget sans descendre
   sous 0.8rem, mais n'y suffisait pas.
   La cible est 360 px, pas 422 : c'est la largeur de référence du harnais
   mobile, qui fait tourner ses sept assertions aux DEUX largeurs. À 360 px la
   boîte de contenu d'un onglet tombe à 68,00 px (contre 80,39 à 422), et TROIS
   libellés sur cinq n'y tenaient pas — « Personnages » 91,8 px, « Ressources »
   81,00, « Aventures » 72,22. D'où trois variantes courtes, toutes activées par
   ce seul point de rupture : « Persos » (46,73), « Ress. » (37,78),
   « Aventure » (64,72). Pas de palier intermédiaire — « Ressources » débordait
   déjà à 422 px (81,00 pour 80,39, il n'y passait que par la tolérance d'1 px
   de l'assertion), donc sa variante courte est nécessaire dès 422 ; et
   « Aventure » ne retire qu'un caractère au pluriel, l'afficher dès 422 px ne
   coûte rien de visible là où un second seuil coûterait une règle de plus.
   Les deux libellés restants tiennent nus à 360 px : « Artefacts » 65,20 px
   (+2,80) et « Combats » 63,97 (+4,03). C'est « Artefacts » qui porte
   désormais la marge la plus faible du lot — c'est lui qu'un changement de
   police ou de padding fera céder en premier.

   ⚠ La hauteur rendue de cette barre est figée dans le jeton --bottomnav-h
   (tokens.css), dont dépend le dégagement bas de .anima-main-content. Toucher
   au padding, à la taille d'icône, au libellé ou au badge ci-dessous change
   cette hauteur : remesurer et mettre le jeton à jour. */
@media (max-width: 767.98px) {
  .anima-tab-bar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: none;
    border-top: 2px solid var(--border);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); /* one-off, symétrique de celle du haut */
  }

  .anima-tab-bar-inner {
    padding: 0;
    overflow-x: visible; /* les 5 onglets se partagent la largeur : plus rien à faire défiler */
    /* flex-end servait le liseré du bas quand la barre était en haut. Ici les
       onglets n'ont pas tous la même hauteur (celui des combats porte un badge),
       et coller les autres en bas faisait flotter leurs icônes ~23px plus bas.
       stretch leur donne la hauteur de la rangée, les contenus s'alignant en
       haut de chaque onglet. */
    align-items: stretch;
  }

  .anima-tab {
    flex: 1 1 0;
    /* min-width: 0 est indispensable et pas cosmétique : sans lui, min-width:auto
       plancherise chaque onglet à sa largeur min-content, les onglets s'élargissent
       au lieu de se partager les 422 px, et la barre déborde à nouveau. C'est aussi
       ce qui rend l'assertion 4 du harnais capable de détecter un libellé trop long. */
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 6px 2px;
    margin-bottom: 0;
    border-bottom: none;
    border-top: 2px solid transparent;
    margin-top: -2px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.1;
  }

  /* Pas de border-bottom-color à neutraliser ici : .anima-tab passe la bordure
     basse à `none` juste au-dessus, ce qui suffit à l'éteindre quelle que soit
     sa couleur. */
  .anima-tab.active {
    border-top-color: var(--accent);
  }

  .anima-tab > svg {
    width: 17px;
    height: 17px;
  }

  /* Bascule des deux variantes de libellé. Le `:has()` cible les onglets qui
     portent une variante courte, quel que soit leur nombre : les autres n'en ont
     pas, leur nom complet reste donc affiché sans exception à écrire ici. C'est
     ce qui a permis d'ajouter « Aventure » et « Ress. » sans toucher à ce bloc. */
  .anima-tab-label-short {
    display: inline;
  }

  .anima-tab:has(.anima-tab-label-short) .anima-tab-label {
    display: none;
  }

  /* Le dégagement bas du contenu vit avec .anima-main-content, plus bas dans ce
     fichier — le poser ici ne servirait à rien : le raccourci `padding` de son
     propre bloc mobile, postérieur, le réécrirait. */
}


/* ========== Sub-tab bar (secondary, under a grouped parent tab) ========== */

.anima-subtab-bar {
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.anima-subtab-bar-inner {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
}

@media (max-width: 767.98px) {
  .anima-subtab-bar-inner {
    padding: 0 16px;
  }
}

.anima-subtab {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 8px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.anima-subtab:hover {
  color: var(--ink);
  text-decoration: none;
}

.anima-subtab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}


/* ========== Main content area (no sidebar) ========== */

.anima-main-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

@media (max-width: 767.98px) {
  .anima-main-content {
    /* Sous ce seuil la barre d'onglets est `fixed` en bas (cf. le bloc mobile de
       .anima-tab-bar) : elle est hors flux et recouvre la fin du contenu. Le
       dégagement bas doit donc dépasser la barre AVANT de commencer à respirer.
       Les 48px d'origine sont conservés tels quels et repartent du haut de la
       barre au lieu du bas de l'écran : le confort visuel ne change pas, il est
       seulement mesuré depuis le bon bord. */
    padding: 20px 16px calc(var(--bottomnav-h) + 48px);
  }
}


/* ========== Section header (title + action button) ========== */

.anima-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}


/* ========== Gold ✦ divider ========== */

.anima-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0;
}

.anima-divider::before,
.anima-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.anima-divider-ornament {
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 4px;
}


/* Le bouton « retour » a été supprimé : il faisait doublon avec l'onglet
   « Aventures » ci-dessus, qui mène à la même route. La zone gauche de la
   bannière reste vide — voir le bloc « Top nav » en tête de fichier. */


/* ========== Two-column grid ========== */

.anima-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .anima-grid-2 {
    grid-template-columns: 1fr;
  }
}