/* Notes sous les pins — site de la chasse (notessouslespins.youngteam.net)
   Direction : une page de carnet, pas une page de campagne. Le site est le frère du Jade et le
   Granit, dont il reprend la colonne étroite et le serif, mais en négatif : le Jade était du
   granit sombre veiné de jade, celui-ci est du papier clair à l'encre brune, puisque la chasse
   tient sur une feuille imprimée. Un seul accent vert de pin pour les liens et les ornements, un
   seul rouille pour la date et le prix. Aucune photo, aucun décor : la matière vient du grain du
   papier, tiré d'une turbulence SVG, et des filets doubles d'un avis d'époque.

   21 septembre 2026 : la page prend le registre victorien de la feuille. Le titre n'est plus
   composé, c'est le titre gravé de la feuille (`titre.png`, extrait de gen-titre-bloc.png, encre
   noire sur fond transparent, inversée le soir) ; la colonne est cadrée d'un filet gras et d'un
   filet maigre, comme un avis placardé ; les intertitres et l'ornement sont posés entre deux
   filets, et les boutons sont des tickets à double encadrement. Pas d'ornement en bas de page :
   la gravure ne sert qu'une fois, au titre. */

:root {
  color-scheme: light;
  --paper: #f5f1e8;
  --paper-soft: #ebe5d7;
  --ink: #23211c;
  --muted: #6b655a;
  --pine: #3f5a45;
  --pine-soft: rgba(63, 90, 69, .35);
  --rust: #8a4b2f;
  --line: #d6cdb9;
  --grain: .07;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --display: 'Spectral', Georgia, serif;
  --measure: 38rem;
}

/* Le soir, un papier brun et une encre crème : même carnet, lampe baissée. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1f1c17;
    --paper-soft: #29251f;
    --ink: #e8e1d3;
    --muted: #a59d8d;
    --pine: #8fb39a;
    --pine-soft: rgba(143, 179, 154, .4);
    --rust: #d18f6b;
    --line: #3b362e;
    --grain: .05;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1f1c17;
  --paper-soft: #29251f;
  --ink: #e8e1d3;
  --muted: #a59d8d;
  --pine: #8fb39a;
  --pine-soft: rgba(143, 179, 154, .4);
  --rust: #d18f6b;
  --line: #3b362e;
  --grain: .05;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  min-height: 100vh;
  background: var(--paper);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(63, 90, 69, .07), transparent),
    radial-gradient(ellipse 60% 40% at 12% 108%, rgba(138, 75, 47, .06), transparent);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Le grain : une turbulence SVG posée sur toute la page, multipliée au papier. Assez fine pour
   qu'on ne la voie pas, assez présente pour que le fond ne soit plus un aplat d'écran. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 240px 240px;
}

/* La colonne : un placard d'époque, filet gras dehors, filet maigre dedans, quatre losanges aux
   angles comme les vignettes de coin d'un imprimeur. */
main {
  position: relative;
  max-width: var(--measure);
  margin: clamp(1rem, 4vw, 3.2rem) auto;
  padding: clamp(3rem, 8vw, 4.6rem) clamp(1.2rem, 5vw, 3rem) clamp(2.6rem, 7vw, 3.8rem);
  border: 2px solid var(--ink);
}
main::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--ink);
  opacity: .55;
  pointer-events: none;
}
main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--ink) 0 2px, transparent 2px),
    radial-gradient(circle, var(--ink) 0 2px, transparent 2px),
    radial-gradient(circle, var(--ink) 0 2px, transparent 2px),
    radial-gradient(circle, var(--ink) 0 2px, transparent 2px);
  background-repeat: no-repeat;
  background-size: 9px 9px;
  background-position: 12px 12px, calc(100% - 12px) 12px, 12px calc(100% - 12px), calc(100% - 12px) calc(100% - 12px);
  opacity: .7;
}

/* ——— en-tête ——— */
header { text-align: center; margin-bottom: 3.2rem; }

/* Le titre gravé de la feuille, encre noire sur transparent : le papier de la page se voit au
   travers. Le soir, l'encre est inversée pour rester lisible sur le papier brun. */
.wordmark { font-size: 0; line-height: 0; }
.wordmark img {
  display: block;
  width: min(100%, 30rem);
  height: auto;
  margin: 0 auto;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark img { filter: invert(1) brightness(.94); }
}
:root[data-theme="dark"] .wordmark img { filter: invert(1) brightness(.94); }

.tagline {
  margin-top: 1.5rem;
  font-style: italic;
  color: var(--muted);
  font-size: 1.08rem;
}

/* Les deux derniers boutons prennent l'air maintenant que l'ornement de fin a sauté. */
section + .actions { margin-top: 2.6rem; }

/* ——— le bandeau de la date, en avis d'époque ——— */
.opening {
  margin: 0 auto 3.4rem;
  padding: 1.9rem 1.4rem 2rem;
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  box-shadow: inset 0 3px 0 -2px var(--line), inset 0 -3px 0 -2px var(--line);
  text-align: center;
}
.opening .label {
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}
.opening .date {
  font-family: var(--display);
  font-variant-caps: small-caps;
  font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  color: var(--rust);
  letter-spacing: .05em;
  line-height: 1.25;
  font-variant-numeric: oldstyle-nums;   /* les chiffres descendent sous la ligne, comme au XIXe */
}
.opening .prize { margin-top: .6rem; font-size: 1.08rem; }
.countdown {
  margin-top: 1.1rem;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: .95rem;
  letter-spacing: .06em;
}

/* ——— corps ——— */
section { margin-bottom: 3rem; text-align: center; }
section p { text-wrap: pretty; }
p + p { margin-top: 1rem; }
h2 {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
}
h2::before,
h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

a { color: var(--pine); text-decoration: none; border-bottom: 1px solid var(--pine-soft); }
a:hover { border-bottom-color: var(--pine); }
a:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 2px; }

/* ——— boutons de papeterie ——— */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  margin-top: 1.6rem;
}
.button {
  display: inline-block;
  padding: .72rem 1.5rem;
  border: 1px solid var(--ink);
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.button:hover { background: var(--pine); border-color: var(--pine); color: var(--paper); box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--pine); }
.button.discord:hover { background: #5865f2; border-color: #5865f2; color: #fff; box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px #5865f2; }

/* ——— pied de page ——— */
.byline {
  margin-top: 3.4rem;
  text-align: center;
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  header, .opening, section, .actions, .byline { animation: rise .8s ease both; }
  .opening { animation-delay: .08s; }
  section  { animation-delay: .16s; }
  .actions, .byline { animation-delay: .24s; }
  @keyframes rise { from { opacity: .001; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Le lien de la signature reste dans la couleur de la signature : un filet, pas une couleur. */
.byline a { color: inherit; border-bottom-color: var(--line); }
.byline a:hover { color: var(--pine); border-bottom-color: var(--pine); }
.opening .actions { margin-top: 1.4rem; }