/* ═══════════════════════════════════════
   SHARED — L'Apothicarium
   Chargé par toutes les pages
   ═══════════════════════════════════════ */

/* Fonts custom */
@font-face {
  font-family: 'Barbarian';
  src: url('../fonts/Barbarian.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}

/* Variables globales */
:root{
  --gold:#c9a554;--gold-light:#e8c97a;--gold-dim:rgba(201,165,84,.3);
  --bg:#080b16;--bg2:#0c0f1e;--bg3:#10142a;
  --vita:#c42b2b;--mana:#3b6fd4;--vigor:#2d8c4e;
  --font-display:'Cinzel Decorative','Cinzel',serif;
  --font-head:'Cinzel',serif;
  --font-body:'Raleway',sans-serif;
}

/* Base */
html{scroll-behavior:smooth;height:100%}
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 8%,rgba(13,27,72,.26) 0%,transparent 70%),
    radial-gradient(ellipse 55% 40% at 88% 42%,rgba(8,18,52,.20) 0%,transparent 65%),
    radial-gradient(ellipse 65% 50% at 14% 86%,rgba(11,22,64,.23) 0%,transparent 68%);
  background-attachment:fixed;
  color:var(--gold);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
@media(max-width:768px){
  body{background-attachment:scroll}
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}

/* Visually hidden — accessible aux lecteurs d'écran uniquement */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — accessibilité clavier */
.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-head);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .8rem 2rem;
  z-index: 9999;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--bg);
  outline-offset: 2px;
}

/* Focus visible — accessibilité clavier */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}