/* AlbionSnipe - shared shell: design tokens, header, buttons, footer.
   Charge par index.html, market-prices.html et craft-planner.html.
   ATTENTION, la phrase precedente disait aussi "et les guides generes": c'etait FAUX.
   tools/build_guides.py inline son PROPRE chrome et ne charge pas cette feuille, donc toute
   modification ici doit etre repetee la-bas jusqu'a ce que le template charge site.css.
   Les tokens refletent DESIGN_TOKENS.md et l'app. */
:root{
  /* AlbionSnipe "GRAPHITE" - acte 25/07/2026. Voir DESIGN_TOKENS.md.
     Principe: seules les DONNEES ont le droit d'avoir une couleur. Le chassis est achromatique
     (chroma moyenne 0.0047 en sombre, contre 0.0188 dans l'ancienne palette Night Scope).
     Les anciens noms restent en ALIAS pour ne casser aucune regle existante. */
  color-scheme:dark;
  --bg:#101011; --surface-1:#171718; --surface-2:#1F1F21; --surface-3:#26262A;
  --line:#2A2A2C; --line-strong:#6F6F77;
  --text:#EDEDEE; --text-2:#A8A8AB; --text-3:#8B8B8F;
  --accent:#3FBFC7; --accent-dim:#1E858C; --accent-ink:#04191B;
  --pos:#6FC97F; --neg:#FC5F44; --payout:#EFCA17; --payout-ink:#191200;
  /* villes, jeu SOMBRE (mesure: pire paire 17.5 en vision normale, 7.4 en daltonisme) */
  --c-black:#9C5C01; --c-caerleon:#E41767; --c-bridgewatch:#FE7613; --c-lymhurst:#03BB57;
  --c-martlock:#125EEF; --c-fortsterling:#85889F; --c-thetford:#DC69FE; --c-brecilien:#097E4E;
  /* ALIAS de migration (anciens noms Night Scope) */
  --bg-deep:#0B0B0C; --panel:var(--surface-1); --panel2:var(--surface-2);
  --border:var(--line); --border-strong:var(--line-strong);
  --dim:var(--text-2); --muted:var(--text-3);
  --brand:var(--accent); --brand-dim:var(--accent-dim); --brand-ink:var(--accent-ink);
  /* les lueurs sont SUPPRIMEES: elles pesaient autant que la teinte verte dans l'effet
     "site de pari". Les alias restent definis en transparent pour ne rien casser. */
  --brand-glow:transparent; --brand-soft:transparent;
  --vip:var(--payout); --bad:var(--neg); --warn:var(--neg);
  --radius:10px;
  --display:"Chakra Petch",sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* THEME CLAIR, construit pour la refonte (il n'en existait aucun). Le choix explicite gagne
   sur le systeme. Jeu de villes DIFFERENT du sombre: un jeu unique ne peut pas s'ecarter des
   deux accents a la fois. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FAFAFA; --surface-1:#FFFFFF; --surface-2:#F1F1F2; --surface-3:#E8E8EA;
  --line:#E3E3E5; --line-strong:#7C7C82;
  --text:#161617; --text-2:#55555A; --text-3:#66666C;
  --accent:#006E77; --accent-dim:#00565E; --accent-ink:#FFFFFF;
  --pos:#0B5C3B; --neg:#B00002; --payout:#8A5A00; --payout-ink:#FFFFFF;
  --c-black:#7B4E00; --c-caerleon:#B31555; --c-bridgewatch:#D96115; --c-lymhurst:#043F0A;
  --c-martlock:#0151E3; --c-fortsterling:#85889F; --c-thetford:#480C6B; --c-brecilien:#109847;
  --bg-deep:#F2F2F3;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    color-scheme:light;
    --bg:#FAFAFA; --surface-1:#FFFFFF; --surface-2:#F1F1F2; --surface-3:#E8E8EA;
    --line:#E3E3E5; --line-strong:#7C7C82;
    --text:#161617; --text-2:#55555A; --text-3:#66666C;
    --accent:#006E77; --accent-dim:#00565E; --accent-ink:#FFFFFF;
    --pos:#0B5C3B; --neg:#B00002; --payout:#8A5A00; --payout-ink:#FFFFFF;
    --c-black:#7B4E00; --c-caerleon:#B31555; --c-bridgewatch:#D96115; --c-lymhurst:#043F0A;
    --c-martlock:#0151E3; --c-fortsterling:#85889F; --c-thetford:#480C6B; --c-brecilien:#109847;
    --bg-deep:#F2F2F3;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.55;
     -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* subtitle-clean wrapping everywhere: balanced headings, no orphan word at the end of a paragraph */
h1,h2,h3{line-height:1.12;margin:0;text-wrap:balance}
p,li{text-wrap:pretty}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
.accent{color:var(--brand)}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono)}
svg.i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* header */
/* le fond suit le THEME. Il etait code en dur a rgba(10,15,13,.85), un noir herite de Night
   Scope: en theme clair le bandeau restait noir avec du texte noir dessus, mesure a 1,07 de
   contraste pour la marque et 2,61 pour les liens. Autrement dit le nom du site etait
   invisible. color-mix rend --bg a 85% d'opacite, donc le flou continue de laisser passer la
   page dans les deux themes. */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 85%, transparent);
       backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:18px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.4px;white-space:nowrap}
.brand .mark{width:26px;height:26px;flex:none}
/* nowrap on every link: two-word entries (Craft Planner, Market Prices) used to fold onto a
   second line when the bar ran tight, which pushed the whole header a row taller. The bar
   holds five links; anything more goes below the fold, not into the nav. */
.nav .links{display:flex;gap:16px;margin-left:8px;min-width:0}
.nav .links a{color:var(--dim);font-weight:600;font-size:13.5px;white-space:nowrap}
.nav .links a:hover{color:var(--text)}
.nav .links a.on{color:var(--brand)}
/* gold (--vip) is the exception marker inside the app's tables, never a tier marker on the
   site: the whole toolkit is free, so nothing here is allowed to read as a paid tier. */
.nav .links a.vip{color:var(--vip)}
/* le survol tire l'or vers la couleur du TEXTE, donc il s'eclaircit en sombre et s'assombrit
   en clair: le contraste monte dans les deux themes. L'ancien #f2c65c etait code en dur pour
   le sombre (11,78) et tombait a 1,55 sur fond clair, soit invisible. */
.nav .links a.vip:hover{color:color-mix(in srgb, var(--vip) 78%, var(--text))}
.nav .spacer{margin-left:auto}
.hdr-cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:9px 16px;font-weight:700;
     font-size:14px;cursor:pointer;border:1px solid transparent;transition:.15s}
.btn-primary{background:var(--brand);color:var(--brand-ink);font-family:var(--display);
     text-transform:uppercase;letter-spacing:.05em}
.btn-primary:hover{background:var(--accent-dim)}
.btn-ghost{background:var(--panel2);color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--brand-dim)}
.btn-discord{background:#5865F2;color:#fff}
.btn-discord:hover{background:#6b77f5}
/* bouton carre a icone seule (bascule de theme, injectee par assets/theme.js). Le padding
   lateral du .btn ferait un rectangle large pour une icone de 16px. */
.btn-icon{padding:9px;gap:0;line-height:0}

/* section furniture */
.eyebrow{color:var(--brand);font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-family:var(--mono);padding:4px 10px;border-radius:4px;margin-bottom:2px}
.pill.free{background:var(--brand-soft);color:var(--brand);border:1px solid color-mix(in srgb, var(--accent) 25%, transparent)}
/* "coming soon" is deliberately neutral, not gold: a gold badge next to a green "free" badge
   reads as a paid tier, which is exactly the confusion this build must not create. */
.pill.soon{background:rgba(147,168,156,.07);color:var(--dim);border:1px solid rgba(147,168,156,.22)}

footer{border-top:1px solid var(--border);padding:36px 0;color:var(--muted);font-size:13px;background:var(--bg-deep)}
footer .fl{display:flex;gap:8px;flex-direction:column;align-items:center;text-align:center}
footer a{color:var(--dim)}
footer a:hover{color:var(--text)}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

@media(max-width:820px){
  .nav .links{display:none}
}
@media(max-width:560px){
  /* keep both header buttons on one row on phones: compact them, Discord becomes icon-only.
     Sized so brand + both buttons fit 375px with zero horizontal scroll. */
  .nav{gap:8px}
  header .nav{padding-left:12px;padding-right:12px}
  .brand{font-size:17px}
  .hdr-cta{gap:6px}
  .hdr-cta .btn{padding:7px 9px;font-size:12.5px;gap:5px}
  .hdr-cta .btn-discord .lbl{display:none}
  .hdr-cta #hdrDl .opt{display:none}
}