/**
 * Composants communs — Panthéon
 *
 * Prolonge tokens.css, qui ne portait jusqu'ici que des variables : les composants eux-
 * mêmes (en-tête, boutons, modales, toast) étaient recopiés à l'identique dans le <style>
 * de chaque page. Ne sont remontées ici que les règles qui étaient rigoureusement
 * identiques dans au moins trois pages — vérifié en comparant le CSS normalisé par le
 * moteur du navigateur, et non les noms de sélecteurs.
 *
 * À charger APRÈS tokens.css et AVANT le <style> de la page. Une page qui a besoin d'une
 * variante (largeur de modale propre à un écran, position du toast au-dessus d'une barre
 * d'action) redéclare la règle entière dans son <style> : étant plus loin dans la
 * cascade, sa version gagne. Ces variantes-là sont volontaires et restent chez elles.
 */

/* ── Reset ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Bandeau d'en-tête ────────────────────────────────────────────────────── */
#appHeader{background:linear-gradient(to bottom,#1a0a02,#2a1a0a);border-bottom:2px solid var(--border);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;}
.app-title{font-family:'Cinzel',serif;font-size:var(--fs-2xl);font-weight:700;color:var(--gold-light);letter-spacing:.1em;}
.header-right{display:flex;align-items:center;gap:12px;}
.btn-header{background:transparent;border:1px solid #c8a84b55;border-radius:2px;color:var(--gold-light);font-family:'Cinzel',serif;font-size:var(--fs-sm);letter-spacing:.1em;padding:5px 12px;cursor:pointer;transition:all .15s;}
.btn-header:hover{background:rgba(200,168,75,.15);border-color:var(--gold-light);}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn-primary{
  background:linear-gradient(to bottom,#9b7820,#7a5c10);
  border:1px solid #5a4008;border-radius:2px;
  color:#fdf3d8;font-family:'Cinzel',serif;font-size:var(--fs-base);font-weight:600;letter-spacing:.1em;
  padding:7px 16px;cursor:pointer;transition:filter .15s;
}
.btn-primary:hover{filter:brightness(1.1);}

.btn-cancel{background:transparent;border:1px solid var(--border);border-radius:2px;padding:6px 14px;font-family:'Cinzel',serif;font-size:var(--fs-base);cursor:pointer;color:var(--ink-light);}
.btn-cancel:hover{background:rgba(0,0,0,.05);}

.btn-sm{background:transparent;border:1px solid var(--border);border-radius:2px;font-family:'Cinzel',serif;font-size:var(--fs-sm);letter-spacing:.06em;padding:3px 8px;cursor:pointer;color:var(--ink-light);transition:all .15s;}
.btn-sm:hover{background:rgba(0,0,0,.05);}
.btn-sm.danger{border-color:rgba(139,26,26,.4);color:var(--red);}
.btn-sm.danger:hover{background:rgba(139,26,26,.1);}

/* ── Modales ──────────────────────────────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:200;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}

/* ── Toast ────────────────────────────────────────────────────────────────── */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#2a1a0a;color:var(--gold-light);border:1px solid var(--border);border-radius:3px;padding:9px 18px;font-family:'Cinzel',serif;font-size:var(--fs-md);z-index:300;opacity:0;transition:opacity .3s;pointer-events:none;}
#toast.show{opacity:1;}

/* ── Barre d'onglets (#97 : partagée pour que grimoire.html/memorial.html aient la même
   structure visuelle que les onglets d'app.html, plutôt que leur propre en-tête isolé) ── */
.tabs-bar {
  background: linear-gradient(135deg, #fdf3d8 0%, #f0dca8 100%);
  border-bottom: 2px solid var(--border);
  display: flex;
  padding: 0 24px;
}
.tabs-scroll {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.tab-btn {
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-light);
  padding: 12px 20px;
  white-space: nowrap;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
}
.tab-btn:hover { color: var(--ink); border-bottom-color: var(--gold-light); }
.tab-btn.active { color: var(--red); border-bottom-color: var(--red); }
/* Liens de droite (Grimoire / Mémorial) : séparateur visuel + poussés à droite quand la place le permet */
.tab-link-side { border-left: 1px solid rgba(107,76,30,.3); padding-left: 20px; }
.tab-link-push { margin-left: auto; }

/* ── Dropdown Annexes ─────────────────────────────────────────────────────── */
.tab-dropdown { position: relative; }
.tab-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: linear-gradient(135deg, #fdf3d8, #f0dca8);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  min-width: 180px;
  z-index: 200;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.tab-dropdown-menu.open { display: block; }
.tab-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  font-family: 'Cinzel', serif;
  font-size: var(--fs-base);
  letter-spacing: 0.07em;
  color: var(--ink-light);
  text-decoration: none;
  transition: background 0.12s;
}
.tab-dropdown-menu a:hover { background: rgba(139,105,20,0.15); color: var(--ink); }

/* ── Responsive de la barre ────────────────────────────────────────────────────
   white-space:nowrap (règle de base ci-dessus) : un libellé ne passe jamais sur 2 lignes.
   Les 11 entrées (8 onglets + Annexes + Grimoire + Mémorial) font ~1480px de large avec les
   paddings d'origine ; des paliers les resserrent progressivement pour que tout tienne sur une
   seule ligne, sans défilement, jusqu'à ~1015px. En dessous, toute la barre défile
   horizontalement (bloc suivant).
   Largeur nécessaire mesurée par palier (boutons + padding de la barre) : 1331 / 1287 / 1171 /
   1105 / 1035 / 964px. Chaque palier s'applique à ~50px au-dessus de sa largeur nécessaire :
   marge pour la barre de défilement verticale (comptée dans la largeur des media queries mais
   pas dans la mise en page) et les écarts de rendu de police d'un navigateur à l'autre.
   NB : à revérifier si un onglet est ajouté ou renommé. */
@media (max-width: 1540px) {
  .tabs-bar { padding: 0 16px; }
  .tab-btn { padding: 12px 14px; }
}
@media (max-width: 1400px) {
  .tab-btn { padding: 12px 12px; }
}
@media (max-width: 1340px) {
  .tab-btn { font-size: var(--fs-base); letter-spacing: 0.05em; }
}
@media (max-width: 1220px) {
  .tab-btn { padding: 12px 9px; }
}
@media (max-width: 1155px) {
  .tab-btn { padding: 12px 7px; letter-spacing: 0.03em; }
}
@media (max-width: 1085px) {
  .tab-btn { font-size: var(--fs-sm); }
}

/* Sous ~1015px les 11 entrées ne tiennent plus : la barre entière (onglets + Annexes +
   Grimoire + Mémorial) défile horizontalement. Comme overflow-x:auto force aussi overflow-y à
   auto, le menu Annexes (position:absolute) était rogné. Un élément absolu n'est rogné que si
   son bloc conteneur est DANS la zone qui défile : on retire donc le position:relative de
   .tab-dropdown (la barre elle-même n'est pas positionnée), ce qui ancre le menu sur un
   ancêtre extérieur à la barre (#topSticky sur app.html, la page ailleurs). top:auto conserve sa
   position dans le flux, juste sous le bouton, et elle suit le défilement de la page ;
   left/right:0 l'étalent sur toute la largeur, indépendamment du défilement horizontal de la
   barre. Aucun JS supplémentaire. */
@media (max-width: 1015px) {
  .tabs-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    flex-wrap: nowrap;
  }
  .tabs-bar::-webkit-scrollbar { height: 4px; }
  .tabs-scroll { flex: 0 0 auto; min-width: auto; }
  .tab-btn { flex: 0 0 auto; padding: 12px 12px; font-size: var(--fs-base); letter-spacing: 0.08em; }
  .tab-dropdown { flex: 0 0 auto; position: static; }
  .tab-dropdown-menu {
    top: auto;
    left: 0;
    right: 0;
    min-width: 0;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .tab-link-push { margin-left: 0; }
}
@media (max-width: 760px) {
  .tabs-bar { padding: 0 10px; }
  .tab-btn { padding: 12px 14px; }
}
@media (max-width: 460px) {
  .tab-btn { padding: 11px 12px; font-size: 11.5px; }
}
/* Écrans tactiles : cibles plus hautes partout ; le padding horizontal élargi (16px) ne
   s'applique qu'en mode défilement, sinon il ferait déborder les paliers ci-dessus. */
@media (pointer: coarse) {
  .tab-btn { padding-top: 14px; padding-bottom: 14px; }
}
@media (pointer: coarse) and (max-width: 1015px) {
  .tab-btn { padding-left: 16px; padding-right: 16px; }
}