/* ShepX — variante « Industriel ».
   Référence : dossier technique imprimé. Fond anthracite, feuilles de papier
   superposées (gris clair, gris foncé, kraft), serif de titrage, grotesque
   énorme en ton sur ton, monospace pour toutes les métadonnées, traits de
   repère, tampon, bande de coches. Un seul monde visuel, peint explicitement. */

:root {
  --ground: #1B1B1B;
  --paper: #DAD8D2;
  --paper-ink: #1E1E1E;
  --paper-muted: #5E5C58;
  --paper-dark: #3A3A3A;
  --paper-dark-ink: #D9D7D1;
  --paper-dark-muted: #9A978F;
  --kraft: #A98A5B;
  --kraft-ink: #1E1E1E;
  --ground-ink: #CFCDC6;
  --ground-muted: #7E7C77;
  --stamp: #3D4A9C;
  --ok: #2F6B3A;
  --error: #8A2E24;

  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --grotesk: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* grain du papier : turbulence SVG, aucune image externe */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ground-ink);
  font-family: var(--grotesk);
  font-size: 1.0625rem;
  line-height: 1.6;
  position: relative;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: var(--grain);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-style: dotted; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
p { margin: 0; }
h1, h2 { margin: 0; text-wrap: balance; }
strong { font-weight: 600; }

.skip { position: absolute; left: 1rem; top: -3rem; background: var(--paper); color: var(--paper-ink); padding: 0.5rem 0.9rem; font-family: var(--mono); font-size: 0.85rem; z-index: 10; }
.skip:focus { top: 1rem; }

/* ---------- Marges de la feuille : folio, annotations verticales ---------- */

.pageno {
  position: fixed; top: 1.4rem; left: 1.6rem;
  font-family: var(--serif); font-size: 1.7rem; line-height: 1;
  color: var(--ground-muted);
  z-index: 5;
}
.margin {
  position: fixed;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ground-muted);
  writing-mode: vertical-rl;
  z-index: 5;
}
.margin-left { left: 1.6rem; bottom: 2rem; transform: rotate(180deg); }
.margin-right { right: 1.6rem; top: 6rem; }

/* ---------- Bandeau ---------- */

.topbar {
  position: relative; z-index: 2;
  max-width: 68rem; margin: 0 auto;
  padding: 1.6rem clamp(1.25rem, 5vw, 3rem) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand img { width: 36px; height: 36px; background: #fff; border-radius: 3px; padding: 2px; display: block; }
.brand span { font-family: var(--grotesk); font-weight: 700; font-stretch: 120%; letter-spacing: 0.14em; font-size: 1.05rem; color: var(--ground-ink); }
.brand b { color: var(--stamp); filter: brightness(1.7); }
.topbar nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.topbar nav a, .topmail { color: var(--ground-ink); text-decoration: none; }
.topbar nav a:hover, .topmail:hover { text-decoration: underline; }

/* ---------- Pile de feuilles ---------- */

.stack {
  position: relative; z-index: 1;
  max-width: 68rem; margin: 0 auto;
  padding: 2.5rem clamp(1.25rem, 5vw, 3rem) 5rem;
  display: flex; flex-direction: column;
}

.card {
  position: relative;
  padding: 1.8rem clamp(1.2rem, 3.5vw, 2.6rem) 1.6rem;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
  display: flex; flex-direction: column; gap: 1rem;
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: 0.22; pointer-events: none; mix-blend-mode: multiply;
}
.card > * { position: relative; z-index: 1; }
.card + .card, .divider + .card { margin-top: 1.4rem; }

.card-light { background: var(--paper); color: var(--paper-ink); }
.card-dark { background: var(--paper-dark); color: var(--paper-dark-ink); }
.card-kraft { background: var(--kraft); color: var(--kraft-ink); }
.card-light .muted, .card-kraft .muted { color: var(--paper-muted); }
.card-dark .muted { color: var(--paper-dark-muted); }

/* légères rotations : des feuilles posées, pas alignées au pixel */
.r1 { rotate: -0.5deg; } .r2 { rotate: 0.45deg; } .r3 { rotate: -0.3deg; } .r4 { rotate: 0.6deg; } .r5 { rotate: -0.45deg; }

/* ---------- Vocabulaire du document ---------- */

.meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.meta-mid { flex: 1; text-align: center; }
.meta .strong { font-family: var(--grotesk); font-weight: 700; font-stretch: 115%; font-size: 0.95rem; letter-spacing: 0.1em; }
.dotted { border: 0; border-top: 2px dotted currentColor; opacity: 0.45; margin: 0; width: 100%; }
.ticks { height: 14px; width: 100%; opacity: 0.7; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 4px); }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }

h1.serif { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.98; max-width: 16ch; }
h2.serif { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.05; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
h2.serif .ico { width: 1em; height: 1em; flex: 0 0 auto; }
.sub { font-size: 1.25rem; line-height: 1.3; margin-top: -0.4rem; }

.giant {
  font-family: var(--grotesk); font-weight: 700; font-stretch: 125%;
  font-size: clamp(4.2rem, 15vw, 12rem); line-height: 0.82; letter-spacing: -0.03em;
  color: rgba(0, 0, 0, 0.085);
  margin: -0.15em 0 -0.05em -0.04em;
  user-select: none; white-space: nowrap;
}
.card-dark .giant { color: rgba(255, 255, 255, 0.07); }

.lead { font-size: 1.15rem; line-height: 1.5; max-width: 40em; }
.arrows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.35rem 2rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.35; }
.arrows li::before { content: "↳ "; font-family: var(--mono); font-size: 0.85em; }

.kpis { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem 1.5rem; font-family: var(--mono); }
.kpis dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.kpis dd { margin: 0; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.pour { font-size: 0.98rem; }
.pour .lab { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-right: 0.6rem; opacity: 0.75; }
.para { max-width: 44em; }
.para strong, .lead strong { font-weight: 600; }

.receipt { margin: 0; display: flex; flex-direction: column; border-top: 1px dotted currentColor; }
.receipt .row { display: grid; grid-template-columns: 11rem 1fr; gap: 0.25rem 1.5rem; padding: 0.6rem 0; border-bottom: 1px dotted currentColor; }
.receipt dt { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.25em; }
.receipt dd { margin: 0; font-size: 0.96rem; line-height: 1.5; font-variant-numeric: tabular-nums; }

.note { font-family: var(--serif); font-style: italic; font-size: 1.05rem; padding-left: 1rem; border-left: 2px solid currentColor; }

.divider {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 3.2rem 0.4rem 0.2rem;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ground-muted);
}

/* Repères de calage et tampon : uniquement sur la feuille de tête */
.hero { padding-top: 2rem; }
.cross { position: absolute; width: 22px; height: 22px; top: 50%; margin-top: -11px; opacity: 0.8; z-index: 1; }
.cross::before, .cross::after { content: ""; position: absolute; background: currentColor; }
.cross::before { left: 0; right: 0; top: 10px; height: 1px; }
.cross::after { top: 0; bottom: 0; left: 10px; width: 1px; }
.cross-l { left: 0.6rem; } .cross-r { right: 0.6rem; }
.stamp {
  position: absolute; right: 4%; top: 32%; width: clamp(120px, 20%, 210px); height: auto;
  color: var(--stamp); opacity: 0.55; rotate: -12deg; z-index: 0;
  mix-blend-mode: multiply;
}
.stamp text { fill: currentColor; font-family: var(--mono); }
.stamp .stamp-ring { font-size: 15px; letter-spacing: 0.22em; }
.stamp .stamp-big { font-family: var(--grotesk); font-weight: 700; font-stretch: 120%; font-size: 30px; letter-spacing: 0.1em; }
.stamp .stamp-small { font-size: 11px; letter-spacing: 0.2em; }

/* ---------- Méthode (feuille sombre) ---------- */

.method { margin: 0; display: flex; flex-direction: column; border-top: 1px dotted currentColor; }
.method .row { display: grid; grid-template-columns: 13rem 1fr; gap: 0.3rem 1.5rem; padding: 0.8rem 0; border-bottom: 1px dotted currentColor; }
.method dt { display: flex; align-items: flex-start; gap: 0.5rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.method dt .ico { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: 0.15rem; }
.method dd { margin: 0; font-size: 0.96rem; line-height: 1.55; }
.stackline { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; opacity: 0.8; }

/* ---------- Formulaire (feuille kraft) ---------- */

.form { display: flex; flex-direction: column; gap: 1.2rem; max-width: 38rem; margin-top: 0.4rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.optional { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-style: italic; font-size: 0.95rem; margin-left: 0.4rem; opacity: 0.8; }
.field input, .field textarea {
  font: inherit; font-size: 1rem; color: var(--kraft-ink);
  background: rgba(255, 255, 255, 0.18);
  border: 0; border-bottom: 1px solid var(--kraft-ink); border-radius: 0;
  padding: 0.6rem 0.5rem; width: 100%;
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: 0; background: rgba(255, 255, 255, 0.3); border-bottom-width: 2px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom: 2px solid var(--error); }
.field-trap { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.button {
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper); background: var(--kraft-ink); border: 1px solid var(--kraft-ink); border-radius: 0;
  padding: 0.85rem 1.4rem; cursor: pointer;
}
.button:hover { background: var(--stamp); border-color: var(--stamp); }
.button:disabled { opacity: 0.6; cursor: progress; }
.form-privacy { font-family: var(--serif); font-style: italic; font-size: 0.98rem; opacity: 0.85; }
.form-status { font-size: 0.95rem; min-height: 1.5em; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--ok); }
.form-status.is-error { color: var(--error); }
.direct { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; margin-top: 0.4rem; }

/* ---------- Talon ---------- */

.stub {
  margin-top: 3rem; padding-top: 1.2rem;
  border-top: 1px dotted var(--ground-muted);
  display: flex; flex-wrap: wrap; gap: 0.4rem 2rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ground-muted);
}

/* ---------- Écrans étroits ---------- */

@media (max-width: 64rem) { .margin, .pageno { display: none; } }
@media (max-width: 48rem) {
  .r1, .r2, .r3, .r4, .r5 { rotate: 0deg; }
  .receipt .row, .method .row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .stamp { display: none; }
  .cross { display: none; }
  .meta-mid { flex-basis: 100%; text-align: left; order: 3; }
  .giant { font-size: 22vw; }
}

/* ---------- Menu latéral : l'index des feuilles, à droite ---------- */

.sidenav {
  position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%);
  z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ground-muted);
}
.sidenav ol { list-style: none; margin: 0; padding: 0.4rem 0; display: flex; flex-direction: column; gap: 0.15rem; border-top: 1px dotted var(--ground-muted); border-bottom: 1px dotted var(--ground-muted); }
.sidenav a {
  position: relative; display: block;
  padding: 0.28rem 0.6rem 0.28rem 0.2rem; text-decoration: none; color: var(--ground-muted);
  border-right: 2px solid transparent;
}
.sidenav a .n { display: block; font-family: var(--serif); font-size: 1.05rem; line-height: 1; letter-spacing: 0; text-transform: none; min-width: 1.6rem; text-align: right; }
/* le libellé vit hors du flux, à gauche du numéro : les numéros restent alignés */
.sidenav a .t {
  position: absolute; right: calc(100% + 0.2rem); top: 50%;
  white-space: nowrap; opacity: 0;
  transform: translate(6px, -50%); transition: opacity 0.15s, transform 0.15s;
}
.sidenav:hover a .t, .sidenav:focus-within a .t, .sidenav a[aria-current="true"] .t { opacity: 1; transform: translate(0, -50%); }
.sidenav a:hover, .sidenav a[aria-current="true"] { color: var(--paper); border-right-color: var(--paper); }
.sidenav-btn {
  font: inherit; font-family: var(--serif); font-size: 1.1rem; line-height: 1;
  color: var(--ground-muted); background: transparent; border: 1px dotted var(--ground-muted); border-radius: 0;
  width: 2rem; height: 2rem; cursor: pointer; margin-right: 0.35rem;
}
.sidenav-btn:hover { color: var(--paper); border-color: var(--paper); border-style: solid; }
@media (prefers-reduced-motion: reduce) { .sidenav a .t { transition: none; } }
@media (max-width: 64rem) { .sidenav { display: none; } }

/* ancres : laisser de l'air en haut au saut */
[data-page], .divider { scroll-margin-top: 1.5rem; }