/* DA commune aux outils internes NyleRP — reprise du vocabulaire des menus du jeu :
   fond très sombre, panneaux terracotta, accent or. Aucune dépendance externe : ces outils
   doivent s'ouvrir même sans réseau au-delà du site. */
:root {
  --fond:      #110F0F;
  --panneau:   #1A1311;
  --panneau-2: #221A17;
  --bord:      #3A2A22;
  --or:        #FFA827;
  --or-clair:  #FFD98A;
  --terre:     #C8721A;
  --texte:     #E5DCCD;
  --texte-bas: #8A6A4F;
  --vert:      #5CDB20;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--or); text-decoration: none; }
a:hover { color: var(--or-clair); }

.bandeau {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  background: var(--panneau);
  border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 20;
}
.bandeau h1 { margin: 0; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.bandeau .sous { color: var(--texte-bas); font-size: 12px; }
.bandeau nav { margin-left: auto; display: flex; gap: 8px; }
.bandeau nav a {
  padding: 6px 12px; border: 1px solid var(--bord); border-radius: 6px;
  font-size: 12px; color: var(--texte);
}
.bandeau nav a:hover, .bandeau nav a.actif { border-color: var(--or); color: var(--or); }

.contenu { max-width: 1500px; margin: 0 auto; padding: 22px; }

.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.carte {
  background: var(--panneau); border: 1px solid var(--bord); border-radius: 10px;
  padding: 22px; display: block; color: var(--texte);
}
.carte:hover { border-color: var(--or); }
.carte h2 { margin: 0 0 6px; font-size: 17px; color: var(--or); }
.carte p { margin: 0 0 12px; color: var(--texte-bas); font-size: 13px; }
.carte .chiffres { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; }
.carte .chiffres b { color: var(--or-clair); font-size: 16px; display: block; }

/* ── Bibliothèque ─────────────────────────────────────────────────────────── */
.filtres {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: var(--panneau); border: 1px solid var(--bord); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px; position: sticky; top: 57px; z-index: 10;
}
.filtres input, .filtres select {
  background: var(--panneau-2); border: 1px solid var(--bord); color: var(--texte);
  border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: inherit;
}
.filtres input:focus, .filtres select:focus { outline: none; border-color: var(--or); }
.filtres .compte { margin-left: auto; color: var(--texte-bas); font-size: 12px; }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.vignette {
  background: var(--panneau); border: 1px solid var(--bord); border-radius: 8px;
  padding: 8px; cursor: pointer; text-align: center;
}
.vignette:hover { border-color: var(--or); }
/* Damier : sans lui on ne distingue pas un pixel transparent d'un pixel noir — c'est
   exactement l'erreur qui se paie en jeu sur un fond clair. */
.vignette .cadre {
  height: 96px; display: flex; align-items: center; justify-content: center;
  background-image:
    linear-gradient(45deg, #2b2b2f 25%, transparent 25%, transparent 75%, #2b2b2f 75%),
    linear-gradient(45deg, #2b2b2f 25%, #242428 25%, #242428 75%, #2b2b2f 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
  border-radius: 5px; overflow: hidden;
}
/* image-rendering: pixelated — sans ça le navigateur lisse le pixel art et tout le travail
   de netteté part en fumée à l'affichage. */
.vignette img { image-rendering: pixelated; max-width: 100%; max-height: 96px; }
.vignette .nom {
  font-size: 11px; color: var(--texte); margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vignette .dim { font-size: 10px; color: var(--texte-bas); }

/* ── Fiche ────────────────────────────────────────────────────────────────── */
.voile {
  position: fixed; inset: 0; background: #000000c0; display: none;
  align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.voile.ouvert { display: flex; }
.fiche {
  background: var(--panneau); border: 1px solid var(--or); border-radius: 10px;
  max-width: 820px; width: 100%; max-height: 88vh; overflow: auto; padding: 22px;
}
.fiche h3 { margin: 0 0 4px; color: var(--or); font-size: 18px; }
.fiche .chemin { color: var(--texte-bas); font-size: 11px; word-break: break-all; margin-bottom: 14px; }
.fiche .apercus { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.fiche .apercus figure { margin: 0; text-align: center; }
.fiche .apercus figcaption { font-size: 11px; color: var(--texte-bas); margin-top: 4px; }
.fiche .apercus .cadre {
  background-image:
    linear-gradient(45deg, #2b2b2f 25%, transparent 25%, transparent 75%, #2b2b2f 75%),
    linear-gradient(45deg, #2b2b2f 25%, #242428 25%, #242428 75%, #2b2b2f 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
  border-radius: 6px; padding: 10px; display: inline-block;
}
.fiche img { image-rendering: pixelated; }
.fiche table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fiche td { padding: 5px 8px; border-bottom: 1px solid var(--bord); }
.fiche td:first-child { color: var(--texte-bas); width: 40%; }
.pastilles { display: flex; gap: 6px; }
.pastille { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--bord); }
.fermer { float: right; color: var(--texte-bas); cursor: pointer; font-size: 20px; line-height: 1; }
.fermer:hover { color: var(--or); }

/* ── Rendu en contexte ────────────────────────────────────────────────────── */
.contextes { margin-top: 16px; border-top: 1px solid var(--bord); padding-top: 14px; }
.contextes h4 { margin: 0 0 10px; font-size: 13px; color: var(--terre); text-transform: uppercase; letter-spacing: .05em; }
.reglages { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; font-size: 12px; }
.reglages input[type=range] { width: 130px; }
.ctx { margin-bottom: 10px; }
.ctx .titre { font-size: 11px; color: var(--texte-bas); margin-bottom: 3px; }
.ctx canvas { image-rendering: pixelated; border: 1px solid var(--bord); border-radius: 4px; display: block; }

.vide { color: var(--texte-bas); padding: 40px; text-align: center; }