/* Site public de Pokémon Explorateur du Monde : mêmes couleurs, police et cadres que le jeu (assets de la ROM). */
@font-face { font-family: 'PMD Font'; src: url('/assets/fonts/pmd-font.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Pixelify'; src: url('/assets/fonts/PixelifySans.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #070d24; --panel: #0d1838; --line: #31508f; --line-in: #7fa6ef; --line-hi: #cfe0ff;
  --gold: #ffd35c; --gold2: #f0a830; --txt: #eef3ff; --dim: #a9badf; --ok: #6ee27a;
  --shadow: 0 2px 0 #030716;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #040816 url('/assets/ui/fonds/motif_explorateur.png') repeat; background-size: 512px 384px; image-rendering: pixelated;
  color: var(--txt); font-family: 'PMD Font', 'Pixelify', system-ui, sans-serif; font-size: 24px; line-height: 1.3; }
body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(4,8,22,.88), rgba(4,8,22,.94)); z-index: -1; }
img { image-rendering: pixelated; max-width: 100%; display: block; }
a { color: var(--gold); }
h1, h2, h3 { font-weight: normal; margin: 0 0 12px; text-shadow: var(--shadow); }
h2 { font-size: 40px; color: var(--gold); }
h3 { font-size: 28px; color: var(--line-hi); }
p { margin: 0 0 12px; }
.muted { color: var(--dim); }
.wrap { width: min(1100px, 100% - 32px); margin: 0 auto; }

/* Cadres officiels (9-slice) */
.box { border: 16px solid transparent; border-image: url('/assets/ui/cadres/cadre1_blue_translucide.png') 8 fill / 16px stretch; padding: 8px 12px; }
.box.gold { border-image-source: url('/assets/ui/cadres/cadre1_yellow_translucide.png'); }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 12px solid transparent; border-image: url('/assets/ui/cadres/cadre1_blue_fin.png') 8 fill / 12px stretch;
  padding: 2px 10px; color: var(--txt); text-decoration: none; font: inherit; cursor: pointer; background: none; transition: transform .12s, filter .12s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.btn.primary { border-image-source: url('/assets/ui/cadres/cadre1_yellow_fin.png'); color: #ffe27a; }
.btn.big { font-size: 32px; padding: 6px 22px; }

/* En-tête */
header.top { position: sticky; top: 0; z-index: 10; background: rgba(5,10,30,.92); border-bottom: 2px solid var(--line); backdrop-filter: blur(3px); }
header.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.logo { font-size: 32px; color: var(--gold); text-decoration: none; text-shadow: 0 3px 0 #6b3b00; white-space: nowrap; }
nav { display: flex; gap: 18px; margin-left: auto; align-items: center; }
nav a { color: var(--line-hi); text-decoration: none; }
nav a:hover { color: var(--gold); }

/* Haut de page */
.hero { position: relative; overflow: hidden; border-bottom: 2px solid var(--line); }
.hero-bg { position: absolute; inset: 0; background: url('/assets/ui/fonds/titre_1.png') center / cover no-repeat; image-rendering: pixelated; filter: saturate(1.05); animation: lent 40s ease-in-out infinite alternate; }
@keyframes lent { from { transform: scale(1.04) translateX(-1%); } to { transform: scale(1.1) translateX(1%); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,22,.15) 0%, rgba(4,8,22,.55) 55%, rgba(4,8,22,.96) 100%); }
.hero .wrap { position: relative; z-index: 1; padding: 120px 0 56px; }
.hero h1 { font-size: 64px; color: var(--gold); text-shadow: 0 4px 0 #6b3b00, 0 0 24px rgba(0,0,0,.6); line-height: 1.05; }
.hero h1 small { display: block; font-size: 32px; color: var(--line-hi); text-shadow: 0 3px 0 #030716; margin-top: 8px; }
.hero .accroche { font-size: 28px; max-width: 760px; text-shadow: 0 2px 0 #030716, 0 0 12px rgba(0,0,0,.7); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.hero .note { font-size: 18px; color: var(--line-hi); text-shadow: 0 2px 0 #030716; }

section { padding: 56px 0 8px; }
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.carte { display: flex; flex-direction: column; gap: 8px; }
.carte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid var(--line); border-radius: 3px; transition: transform .2s; }
.carte:hover img { transform: scale(1.02); }
.carte p { font-size: 20px; color: var(--dim); }

.galerie { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.galerie img { width: 100%; height: 100%; object-fit: cover; border: 2px solid var(--line); border-radius: 3px; cursor: zoom-in; }
.galerie .petites { display: grid; gap: 12px; }

.touches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; font-size: 20px; }
.touches ul { margin: 0; padding-left: 20px; }
kbd { font: inherit; font-size: 18px; padding: 0 6px; border: 1px solid var(--line-in); border-radius: 3px; background: #0a1430; color: var(--gold); }

.notes .note-v { margin-bottom: 14px; }
.notes .note-v b { color: var(--gold); }
.notes ul { margin: 6px 0 0; padding-left: 22px; font-size: 20px; }
.notes li { margin-bottom: 4px; }

.discord { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.discord img { width: 160px; }

footer { margin-top: 56px; padding: 24px 0 40px; border-top: 2px solid var(--line); background: rgba(5,10,30,.85); font-size: 18px; color: var(--dim); }
footer .liens { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }

/* Visionneuse des captures */
#zoom { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; z-index: 50; cursor: zoom-out; padding: 16px; }
#zoom.on { display: flex; }
#zoom img { max-height: 92vh; border: 2px solid var(--line-in); }

/* Pages de texte (mentions légales, confidentialité) */
.texte { padding-top: 32px; }
.texte .box { font-size: 20px; }
.texte h2 { font-size: 32px; margin-top: 8px; }
.texte li { margin-bottom: 6px; }

/* Apparition douce au défilement */
.apparait { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.apparait.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero-bg { animation: none; } .apparait { opacity: 1; transform: none; transition: none; } }

/* Téléphone */
@media (max-width: 860px) {
  body { font-size: 20px; }
  .grille, .touches { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .hero .wrap { padding: 72px 0 40px; }
  .hero h1 { font-size: 44px; }
  .hero h1 small { font-size: 24px; }
  .hero .accroche { font-size: 22px; }
  h2 { font-size: 32px; }
  nav a:not(.btn) { display: none; }
  .logo { font-size: 24px; }
}