/* ─────────────────────────────────────────────────────────────
   Decoia — socle commun aux pages du site.
   Fond de galerie : les intérieurs sont la seule source de couleur.
   Trois familles : serif système pour les titres, sans pour le texte,
   monospace pour les annotations techniques (le vocabulaire du plan).
   ───────────────────────────────────────────────────────────── */

/* Instrument Serif — SIL Open Font License 1.1, auto-hébergée (voir fonts/LICENSE).
   Auto-hébergée plutôt que servie par un CDN : une requête de moins, aucune
   dépendance à un tiers, et le rendu ne change pas selon le système du visiteur. */
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --ground:   #12100E;
  --raised:   #1B1815;
  --line:     #2C2723;
  --ink:      #F4F1EC;
  --ink-mid:  #B4ABA0;
  --ink-low:  #7C736A;
  --sage:     #9CBCA6;

  --serif: "Instrument Serif", ui-serif, "New York", Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --rule: 1px solid var(--line);

  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

.wrap { padding-inline: var(--gutter); }

/* Annotations techniques : petites capitales espacées, en monospace. */
.tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-low);
}

/* ── En-tête ─────────────────────────────────────────────── */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  border-bottom: var(--rule);
}
header .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
header img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
header .name { font-family: var(--serif); font-size: 20px; letter-spacing: -.01em; }
/* L'annotation de droite ne doit jamais pousser l'en-tête au-delà de l'écran. */
header > .tag { min-width: 0; text-align: right; }
@media (max-width: 420px) { header > .tag { display: none; } }

/* ── Titres ──────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* ── Pied ────────────────────────────────────────────────── */

footer { border-top: var(--rule); padding-block: 56px 72px; }
.foot { display: flex; flex-wrap: wrap; gap: 40px 64px; justify-content: space-between; }
.foot-col { display: flex; flex-direction: column; gap: 10px; max-width: 42ch; }
.foot-col p { color: var(--ink-mid); font-size: 15.5px; }
.foot-col a { color: var(--sage); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.colophon { margin-top: 48px; padding-top: 24px; border-top: var(--rule); display: flex; flex-wrap: wrap; gap: 12px 28px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}