/* L'atelier — une grotte, et quelques lumières dedans.
   Palette tirée des biomes de Luciole ; titres dans la police 5×7 du jeu (SVG générés au build). */

@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-italique.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --nuit: #100d18;      /* le fond de la grotte */
  --roche: #241c30;     /* la roche éclairée de loin */
  --paroi: #3a3048;     /* les liserés */
  --pierre: #9d92ae;    /* texte secondaire, le lilas des textes du jeu */
  --texte: #e9e3f0;
  --luciole: #f0d27a;   /* l'or du titre de Luciole */
  --pollen: #a6e07e;
  --cristal: #92caff;

  --mesure: 36rem;
  --gouttiere: clamp(16px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--nuit); }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: "Alegreya", Georgia, serif;
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--luciole); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--luciole); outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Titres en pixels : le SVG prend la couleur du texte, la taille vient du pas de pixel. */
.pix { margin: 0; line-height: 0; font-size: 1rem; font-weight: normal; }
.pix svg { display: block; height: calc(var(--px, 4px) * 11); width: auto; max-width: 100%; fill: currentColor; shape-rendering: crispEdges; overflow: visible; }
h1.pix { --px: clamp(5px, 1.6vw, 9px); color: var(--luciole); }
h2.pix { --px: 4px; color: var(--luciole); margin-bottom: 1.4rem; }
h3.pix { --px: 3px; color: var(--pierre); margin: 2.4rem 0 1rem; }

/* ---------- En-tête : la grotte vivante ---------- */

.grotte {
  position: relative;
  background: #000;
}
.grotte canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 120;
  image-rendering: pixelated;
  cursor: none;
  touch-action: pan-y;
}
.grotte .legende {
  position: absolute; right: var(--gouttiere); bottom: 10px;
  margin: 0; font-size: 0.85rem; color: var(--pierre); font-style: italic;
  pointer-events: none;
}

/* Barre de navigation discrète, en haut des pages intérieures */
.chemin {
  padding: 18px var(--gouttiere);
  font-size: 0.95rem;
  color: var(--pierre);
}
.chemin a { color: var(--pierre); }

/* ---------- Mise en page ---------- */

main { padding: 0 var(--gouttiere) 4rem; }
.colonne { max-width: var(--mesure); }
.large { max-width: 62rem; }

section { margin-top: clamp(3rem, 8vw, 6rem); }

p { margin: 0 0 1em; }
.chapeau { font-size: 1.25em; line-height: 1.55; max-width: 32rem; margin-top: 2.5rem; }
.discret { color: var(--pierre); }

/* ---------- Une œuvre : capture + texte ---------- */

.oeuvre {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 760px) { .oeuvre { grid-template-columns: 1fr; } }

.ecran {
  margin: 0;
  background: #000;
  border: 1px solid var(--paroi);
}
.ecran img {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated;
}
.ecran figcaption { padding: 0.5rem 0.8rem; font-size: 0.9rem; color: var(--pierre); border-top: 1px solid var(--paroi); }

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 1.25rem;
}

/* ---------- Téléchargements ---------- */

.telechargements { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 0.6rem; }
.bouton {
  display: inline-flex; flex-direction: column; gap: 0.1rem;
  padding: 0.7rem 1.1rem 0.6rem;
  background: var(--luciole); color: #1a1408;
  text-decoration: none; line-height: 1.25;
  border-radius: 2px;
  box-shadow: 0 0 0 0 rgba(240, 210, 122, 0);
  transition: box-shadow 0.25s ease;
}
.bouton:hover { box-shadow: 0 0 22px 2px rgba(240, 210, 122, 0.35); }
.bouton strong { font-weight: 700; }
.bouton small { font-size: 0.8rem; opacity: 0.75; }
.bouton.second { background: transparent; color: var(--luciole); outline: 1px solid var(--luciole); outline-offset: -1px; }

/* ---------- Tableaux, code, carnet ---------- */

table { border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: 0.95em; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 0.4rem 0.9rem 0.4rem 0; border-bottom: 1px solid var(--paroi); }
th { color: var(--pierre); font-weight: normal; font-style: italic; }
.defile { overflow-x: auto; }

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.82em;
  background: var(--roche);
  padding: 0.08em 0.35em;
  border-radius: 2px;
}
pre { background: var(--roche); padding: 0.9rem 1rem; overflow-x: auto; line-height: 1.45; }
pre code { background: none; padding: 0; }

ul { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: 0.45em; }
li::marker { color: var(--pollen); }

.carnet h2 { margin-top: 4rem; }
.carnet h3 { margin-top: 2.5rem; }
.carnet strong { color: var(--luciole); font-weight: 600; }
.carnet .entree-date { color: var(--pierre); font-style: italic; margin-bottom: 1.5rem; }

/* ---------- Pied de page ---------- */

footer {
  padding: 2rem var(--gouttiere) 3rem;
  color: var(--pierre);
  font-size: 0.9rem;
  border-top: 1px solid var(--paroi);
}
footer p { max-width: var(--mesure); }

@media (prefers-reduced-motion: reduce) {
  .bouton { transition: none; }
}

/* Le carnet garde des titres en texte : ils sont trop longs pour la police de pixels. */
.carnet h2.texte { font-size: 1.5em; font-weight: 600; color: var(--luciole); line-height: 1.3; margin: 4rem 0 1.2rem; }
.carnet h3.texte { font-size: 1.15em; font-weight: 600; color: var(--texte); margin: 2.5rem 0 0.8rem; }

/* ---------- Le Fil ---------- */

.plateau { background: #000; border: 1px solid var(--paroi); line-height: 0; }
.plateau canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  image-rendering: pixelated;
  touch-action: none;
  cursor: pointer;
}
.soustitre { font-size: 1.15em; font-weight: 600; margin: 0 0 0.6rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 1.6rem; }
button.bouton { font: inherit; font-size: 0.95rem; border: 0; cursor: pointer; padding: 0.55rem 1rem; }
.plateau { max-width: min(100%, 68vh); }
[hidden] { display: none !important; }