/* Hero's Draft — feuille de style du site vitrine.
   Palette : #0B493A et #EAF06A, plus les variations validees le 18/08.
   Deux polices : Press Start 2P pour les titres et libelles, VT323 pour le
   corps -- Press Start 2P est a chasse fixe et illisible sur un paragraphe,
   or les patch notes sont de vraies phrases longues. */

@font-face {
  font-family: 'Press Start 2P';
  src: url('fonts/press-start-2p-latin.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'VT323';
  src: url('fonts/vt323-latin.woff2') format('woff2');
  font-display: swap;
}

:root {
  --bg:    #062E24;
  --panel: #0B493A;
  --deep:  #041D17;
  --dim:   #083C2F;
  --line:  #0F5C48;
  --line2: #12705A;
  --y:     #EAF06A;
  --y2:    #C2C955;
  --pale:  #F5F8C4;
  --mut:   #7FAE99;
  --mut2:  #8FC4AC;

  --title: 'Press Start 2P', 'Courier New', monospace;
  --body:  'VT323', 'Courier New', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--bg);
  color: var(--mut2);
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.45;
}

a { color: var(--y); }

/* ---- barre de navigation ---- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--deep);
  border-bottom: 3px solid var(--line);
  padding: 15px 26px;
}
.nav__logo { font-family: var(--title); color: var(--y); font-size: 12px; letter-spacing: 1px; text-decoration: none; }
.nav__links { display: flex; gap: 22px; }
.nav__links a { font-family: var(--title); font-size: 9px; color: var(--mut); text-decoration: none; }
.nav__links a[aria-current='page'] { color: var(--y); }

/* ---- bloc d'identite ---- */
.hero { text-align: center; padding: 52px 26px 44px; }
.hero__title {
  font-family: var(--title);
  color: var(--y);
  font-size: clamp(20px, 6vw, 34px);
  letter-spacing: 3px;
  margin: 0;
  text-shadow: 0 0 18px rgba(234, 240, 106, .35), 4px 4px 0 var(--deep);
}
.hero__kicker { font-family: var(--title); color: var(--y2); font-size: 10px; letter-spacing: 4px; margin: 18px 0 0; }
.hero__pitch { max-width: 560px; margin: 20px auto 0; font-size: 21px; line-height: 1.5; }

.cta { display: flex; gap: 18px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.btn {
  font-family: var(--title);
  font-size: 11px;
  padding: 16px 22px;
  border: 3px solid var(--y);
  text-decoration: none;
  display: inline-block;
}
.btn--primary { background: var(--y); color: var(--bg); box-shadow: 5px 5px 0 var(--deep), 0 0 18px rgba(234, 240, 106, .45); }
.btn--ghost   { background: transparent; color: var(--y); box-shadow: 5px 5px 0 var(--deep); }
.btn small    { display: block; font-family: var(--body); font-size: 15px; margin-top: 8px; opacity: .75; }

/* ---- structure ---- */
.wrap { max-width: 820px; margin: 0 auto; padding: 0 26px; }
.section-title {
  font-family: var(--title);
  color: var(--y2);
  font-size: 11px;
  letter-spacing: 2px;
  border-bottom: 2px solid var(--line);
  padding-bottom: 10px;
  margin: 44px 0 18px;
}

/* ---- panneau facon fenetre de menu RPG ---- */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--line2) 0%, var(--panel) 100%);
  border: 3px solid var(--y);
  padding: 26px;
  box-shadow:
    inset 0 0 0 3px var(--deep),
    inset 0 0 0 6px var(--line2),
    0 0 16px rgba(234, 240, 106, .40),
    0 0 34px rgba(234, 240, 106, .16);
}
.panel::before, .panel::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--y);
  box-shadow: 0 0 9px rgba(234, 240, 106, .75);
}
.panel::before { top: -3px; left: -3px; }
.panel::after  { bottom: -3px; right: -3px; }
/* Empilement des panneaux de notes.html, sans style en ligne cote JS. */
.panel + .panel { margin-top: 22px; }

.badge {
  display: inline-block;
  font-family: var(--title);
  background: var(--y);
  color: var(--bg);
  font-size: 9px;
  padding: 6px 10px;
  letter-spacing: 1px;
}
.note__version { font-family: var(--title); color: var(--y); font-size: clamp(14px, 4vw, 22px); margin-top: 16px; text-shadow: 0 0 12px rgba(234, 240, 106, .45); }
.note__date    { font-size: 18px; margin-top: 8px; }
.note__category { font-family: var(--title); color: var(--pale); font-size: 10px; letter-spacing: 1px; margin: 22px 0 8px; }
.note__list    { margin: 0; padding-left: 22px; font-size: 19px; line-height: 1.5; }
.note__list li { margin-bottom: 7px; }
.link-more {
  display: inline-block;
  font-family: var(--title);
  margin-top: 20px;
  font-size: 9px;
  border-bottom: 2px solid var(--y);
  padding-bottom: 4px;
  text-decoration: none;
}

/* ---- grille de versions ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.card {
  background: var(--panel);
  border: 3px solid var(--deep);
  box-shadow: inset 0 0 0 2px var(--line);
  padding: 18px 13px;
  text-align: center;
  text-decoration: none;
  display: block;
}
.card__label { font-family: var(--title); color: var(--y); font-size: 14px; }
.card__meta  { color: var(--mut2); font-size: 17px; margin-top: 9px; }
.grid--legacy .card { background: var(--dim); }
.grid--legacy .card__label { color: var(--y2); font-size: 12px; }

.align-right { text-align: right; margin-top: 16px; }

/* ---- messages de repli ---- */
.fallback { font-size: 19px; }
.fallback p { margin: 0 0 .75rem; }

@media (max-width: 600px) {
  body { font-size: 18px; }
  .grid { grid-template-columns: 1fr; }
}