/* =============================================================================
   ICHOR — L'ACCUEIL DES BILANS (et la page 404)
   Même direction que les éditions — « LE PARI TENU » : lumière plate, ombres
   dures décalées, règle graduée, grotesque très grasse + Georgia, rayons 0.
   Cette feuille est AUTONOME : la racine ne dépend d'aucune édition, parce que
   les éditions passent et que la racine reste. Les tokens sont ceux de
   s34/assets/bilan.css, recopiés à l'identique (mêmes ratios, calculés par L³).
   ============================================================================= */

:root {
  --fond:   oklch(0.175 0.006 85);
  --niv1:   oklch(0.225 0.006 85);
  --niv2:   oklch(0.275 0.006 85);

  --craie:  oklch(0.965 0.005 95);   /* 17,1:1 — titres */
  --craie2: oklch(0.855 0.008 95);   /* 12,2:1 — texte courant */
  --craie3: oklch(0.720 0.010 95);   /*  7,6:1 — texte secondaire */
  --craie4: oklch(0.615 0.012 95);   /*  5,1:1 — mentions */

  --tenu:   oklch(0.855 0.120 96);   /* ~12,3:1 — ce qui a rapporté */
  --casse:  oklch(0.745 0.130 254);  /*  ~8,1:1 — ce qui a coûté */
  --trait:  oklch(0.395 0.006 85);
  --trait2: oklch(0.500 0.006 85);

  --titre: "Arial Black", "Archivo Black", "Franklin Gothic Heavy", "Helvetica Neue Black",
           Impact, system-ui, sans-serif;
  --prose: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
           "Times New Roman", serif;
  --mono:  ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "DejaVu Sans Mono",
           "Courier New", monospace;

  --t-h1:    clamp(2.1rem, 1.1rem + 4.2vw, 4.4rem);
  --t-h3:    clamp(1.15rem, 0.95rem + 0.85vw, 1.5rem);
  --t-corps: clamp(1.02rem, 0.98rem + 0.2vw, 1.16rem);
  --t-petit: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);

  --reg1: 3px 3px 0 0 var(--niv2);

  --large: min(880px, 100% - var(--marge) * 2);
  --marge: clamp(1rem, 3.4vw, 4rem);
  --d2: 150ms;
  --e-sortie: cubic-bezier(.2, .7, .35, 1);

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--craie2);
  font-family: var(--prose);
  font-size: var(--t-corps);
  line-height: 1.62;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px,
      color-mix(in oklch, var(--trait) 26%, transparent) 47px 48px);
  background-attachment: fixed;
  min-block-size: 100dvh;
}

.enveloppe { inline-size: var(--large); margin-inline: auto; }

/* lien d'évitement */
.evite {
  position: absolute; inset-block-start: -100px; inset-inline-start: 1rem;
  background: var(--craie); color: var(--fond);
  font-family: var(--mono); font-size: var(--t-petit);
  padding: .8rem 1.2rem; z-index: 10;
}
.evite:focus-visible { inset-block-start: 1rem; outline: 3px solid var(--tenu); outline-offset: 2px; }

/* ── EN-TÊTE ──────────────────────────────────────────────────────────────── */
.entete { border-block-end: 1px solid var(--trait); background: var(--fond); }
.entete-haut { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-block: 1.1rem; }
.marque {
  font-family: var(--titre); font-weight: 900; letter-spacing: -0.012em;
  color: var(--craie); font-size: 1.25rem; text-transform: uppercase;
}
.marque-sous {
  font-family: var(--mono); font-size: var(--t-petit); color: var(--craie4);
  letter-spacing: .14em; text-transform: uppercase;
}

/* ── CORPS ────────────────────────────────────────────────────────────────── */
main { padding-block: clamp(2.4rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }

.numero {
  display: block; font-family: var(--mono); font-size: var(--t-petit);
  color: var(--craie4); letter-spacing: .14em; text-transform: uppercase;
  margin-block-end: 1.1rem;
}

h1 {
  font-family: var(--titre); font-weight: 900; letter-spacing: -0.012em;
  color: var(--craie); font-size: var(--t-h1); line-height: 1.04;
  text-transform: uppercase; margin: 0 0 1.4rem; text-wrap: balance;
}

.lede { font-size: var(--t-h3); line-height: 1.5; color: var(--craie2); max-inline-size: 58ch; margin-block: 0 2.6rem; }

/* ── LES ÉDITIONS ─────────────────────────────────────────────────────────── */
.editions { list-style: none; margin: 0 0 2.6rem; padding: 0; display: grid; gap: 1.1rem; }

.edition {
  display: grid; gap: .55rem;
  border: 1px solid var(--trait);
  background: var(--niv1);
  padding: 1.35rem clamp(1.1rem, 3vw, 1.8rem);
  text-decoration: none; color: var(--craie2);
  min-block-size: 44px;
  transition: transform var(--d2) var(--e-sortie), box-shadow var(--d2) var(--e-sortie);
}
.edition:hover { transform: translate(-2px, -2px); box-shadow: var(--reg1); border-color: var(--trait2); }
.edition:focus-visible { outline: 3px solid var(--tenu); outline-offset: 3px; }

.ed-quand {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--t-petit);
  letter-spacing: .12em; text-transform: uppercase; color: var(--craie3);
}
.ed-badge { border: 1px solid var(--trait2); padding: .15rem .55rem; color: var(--craie2); }
.ed-titre {
  font-family: var(--titre); font-weight: 900; letter-spacing: -0.012em;
  color: var(--craie); font-size: var(--t-h3); line-height: 1.18; text-transform: uppercase;
}
.edition:hover .ed-titre { text-decoration: underline; text-underline-offset: .18em; }
.ed-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ed-chiffre { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-petit); color: var(--craie3); }
.ed-chiffre strong { font-weight: 700; }
.ed-chiffre .est-tenu { color: var(--tenu); }
.ed-chiffre .est-casse { color: var(--casse); }

/* ── NOTE ─────────────────────────────────────────────────────────────────── */
.note {
  border: 1px solid var(--trait); border-inline-start: 4px solid var(--trait2);
  background: var(--niv1); padding: 1.15rem 1.35rem; max-inline-size: 68ch;
}
.note-tete {
  display: block; font-family: var(--mono); font-size: var(--t-petit);
  letter-spacing: .12em; text-transform: uppercase; color: var(--craie3);
  margin-block-end: .5rem;
}
.note p { margin: 0; color: var(--craie2); }
.note p + p { margin-block-start: .7rem; }

/* liste de liens du 404 */
.issues { list-style: none; margin: 0 0 2.2rem; padding: 0; display: grid; gap: .6rem; max-inline-size: 48ch; }
.issues a {
  display: flex; align-items: center; min-block-size: 44px;
  padding: .55rem 1rem; border: 1px solid var(--trait); background: var(--niv1);
  color: var(--craie); text-decoration: underline; text-underline-offset: .18em;
  transition: transform var(--d2) var(--e-sortie), box-shadow var(--d2) var(--e-sortie);
}
.issues a:hover { transform: translate(-2px, -2px); box-shadow: var(--reg1); }
.issues a:focus-visible { outline: 3px solid var(--tenu); outline-offset: 3px; }
.issues .ou { font-family: var(--mono); font-size: var(--t-petit); color: var(--craie4); margin-inline-start: auto; padding-inline-start: 1rem; }

/* ── PIED ─────────────────────────────────────────────────────────────────── */
.pied { border-block-start: 1px solid var(--trait); padding-block: 1.4rem 2rem; }
.pied p { margin: 0; font-size: var(--t-petit); color: var(--craie4); max-inline-size: 68ch; }

/* ── PRÉFÉRENCES & MODES ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .edition, .note, .issues a, .ed-badge { border: 1px solid CanvasText; }
  .edition:focus-visible, .issues a:focus-visible, .evite:focus-visible { outline: 3px solid Highlight; }
}

@media print {
  body { background: #fff; color: #000; }
  .evite { display: none; }
}