/* ===========================================================================
   GUIDES PalMapLive — les 15 pages d'outils (wiki, élevage, tiers, capture…)
   ---------------------------------------------------------------------------
   Ces pages ne sont pas la vitrine : elles portent des composants sur mesure
   (tier lists, calculateurs, canvas, tableaux) qu'on ne touche pas. Ce fichier
   ne fait que deux choses, et c'est ce qui suffit à les faire basculer d'un
   coup dans la nouvelle identité :

   1. Il REDÉFINIT les 13 variables que les 15 pages déclaraient chacune de son
      côté, à l'identique (--bg, --panel, --accent, --text…). Leur bloc :root
      local a été supprimé : tout ce qu'elles dessinent avec ces variables suit
      désormais la palette de la vitrine, sans toucher à une seule de leurs
      règles.
   2. Il pose la typographie et les deux barres de navigation communes.

   Les couleurs viennent du même relevé que /vitrine.css (la texture de carte
   du jeu), et la même règle tient : L'AMBRE NE SERT QU'À CE QUI EST VIVANT OU
   CLIQUABLE. Les couleurs de DONNÉES (rangs de tier list, éléments, dots
   d'observation) ne sont pas de l'habillage et gardent leur teinte propre.
   =========================================================================== */

@font-face{font-family:'Archivo Exp';src:url(/fonts/archivo-exp700.woff2) format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(/fonts/archivo-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(/fonts/archivo-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/fonts/plexmono-500.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap}

:root{
  /* --- les 13 noms hérités, repointés sur la palette de la vitrine --- */
  --bg:#061118;
  --panel:#0b1f27;
  --panel2:#123c46;
  --border:rgba(147,166,173,.14);
  --border-strong:rgba(147,166,173,.30);
  --text:#e4edf0;
  --muted:#93a6ad;
  --accent:#f0a23c;
  --accent2:#f0a23c;          /* le second ton du dégradé : l'ambre est seule */
  --gold:#f0a23c;
  --green:#55d97a;
  --red:#f0685f;
  --grad:linear-gradient(135deg,#f0a23c,#e08a24);
  /* Les six paliers d'accent transparent de tokens.css sont écrits en rgba
     CYAN figé : sans ces six lignes, les fonds de survol, bordures actives et
     halos restaient bleus au milieu d'une page ambre. */
  --accent-10:rgba(240,162,60,.10);
  --accent-15:rgba(240,162,60,.15);
  --accent-22:rgba(240,162,60,.22);
  --accent-32:rgba(240,162,60,.32);
  --accent-45:rgba(240,162,60,.45);
  --accent-85:rgba(240,162,60,.85);
  --accent-soft:rgba(240,162,60,.14);
  --lueur:0 0 0 3px rgba(240,162,60,.16);

  /* --- noms propres à la nouvelle identité, pour les règles reprises ici --- */
  --abysse:#061118;
  --terre-clair:#2d5f66;
  --balise:#f0a23c;
  --balise-encre:#160c00;
  --trait:rgba(147,166,173,.14);
  --trait-fort:rgba(147,166,173,.30);

  /* Les pages écrivaient 'Segoe UI' en dur dans leur règle body ; elles
     passent par cette variable désormais (tokens.css la déclare aussi, on la
     redéfinit ici pour les guides seulement). */
  --police:'Archivo',system-ui,'Segoe UI',sans-serif;
  --police-mono:'Plex Mono',ui-monospace,Consolas,monospace;
  --d:'Archivo Exp',Impact,'Arial Narrow',sans-serif;
  --m:'Plex Mono',ui-monospace,Consolas,monospace;
}

html{background:var(--bg);color-scheme:dark}
body{font-family:var(--police);color:var(--text);-webkit-font-smoothing:antialiased}

/* ===== titres : même lettrage de carte que la vitrine ===== */
h1{font-family:var(--d);font-weight:700;text-transform:uppercase;letter-spacing:-.004em;
  line-height:1.05}
h1 span{background:none!important;-webkit-text-fill-color:currentColor;color:var(--balise)}
h2,h3{font-family:var(--d);font-weight:700;text-transform:uppercase;letter-spacing:0}

/* ===== barre du haut (le lien vers la carte, le bouton de langue) ===== */
.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 18px 0;max-width:1120px;margin:0 auto}
.topbar .navlink,.topbar .navpill{font-family:var(--m);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--crete,var(--muted));text-decoration:none;
  padding:7px 14px;border:1px solid var(--trait-fort);border-radius:4px;background:none;
  transition:color .2s,border-color .2s}
.topbar .navlink:hover,.topbar .navpill:hover{color:var(--balise);border-color:var(--balise)}

/* ===== la barre des guides (injectée par guides-nav.js) ===== */
.guidesbar{display:flex;gap:1px;flex-wrap:wrap;max-width:1120px;margin:14px auto 0;
  padding:0 18px}
.guidesbar a{font-family:var(--m);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:9px 13px;background:var(--panel);
  border:1px solid var(--trait);border-radius:3px;transition:color .18s,border-color .18s}
.guidesbar a:hover{color:var(--text);border-color:var(--trait-fort)}
.guidesbar a[aria-current]{color:var(--balise-encre);background:var(--balise);
  border-color:var(--balise)}

/* ===== pied commun (injecté par guides-nav.js) ===== */
.sitefoot{max-width:1120px;margin:48px auto 0;padding:22px 18px 30px;
  border-top:1px solid var(--trait);display:flex;gap:8px 16px;flex-wrap:wrap;
  align-items:center;justify-content:center;font-family:var(--m);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--terre-clair)}
.sitefoot a{color:var(--muted);text-decoration:none;transition:color .2s}
.sitefoot a:hover{color:var(--balise)}
.sitefoot .sep{opacity:.5}

/* Le focus clavier, identique à la vitrine. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--balise);outline-offset:3px;border-radius:4px}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;
  transition:none!important}}