/* ArchiveFever.Work — design system « zoom infini ».
   Un point, on zoome dedans. Toutes les mesures viennent de tokens.css (φ), toutes les couleurs
   de la palette Wada posée sur <html data-wada="…">. Angles droits, filets d'un pixel, Geist.
   Chaque page charge tokens.css puis site.css. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  color: var(--ink);
  scroll-padding-top: calc(var(--head-h) + var(--s0));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
}
body {
  margin: 0;
  min-width: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--f0);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { color: var(--on-dot); background: var(--fill); }
button, input, select, textarea { font: inherit; color: inherit; min-width: 0; }
button, a, input, select, label { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
:disabled { cursor: not-allowed; opacity: .382; }
img, svg, canvas, video { max-width: 100%; }
:where(h1, h2, h3, p, label, a, li) { overflow-wrap: break-word; }
:where(h1, h2, h3) { margin: 0; font-weight: 500; text-wrap: balance; }
:where(p) { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 1px solid var(--dot); outline-offset: var(--s-3); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: var(--s-1); left: var(--s-1); z-index: 100; padding: var(--s-1) var(--s0); background: var(--fill); color: var(--on-dot); font-family: var(--font-mono); font-size: var(--f-1); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.shell { width: min(var(--shell), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Texte bilingue statique : <span data-lang="fr">…</span><span data-lang="en">…</span> */
html[lang="fr"] [data-lang="en"], html[lang="en"] [data-lang="fr"] { display: none !important; }

/* ---------- Le point ---------- */
.z-dot { display: inline-block; width: var(--s-1); height: var(--s-1); flex-shrink: 0; border-radius: 50%; background: var(--dot); }

/* ---------- Combinaison Wada : trois pastilles et le numéro du livre ---------- */
.wada { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-3); font-family: var(--font-mono); font-size: var(--f-1); letter-spacing: var(--track-mono); white-space: nowrap; }
.wada i { display: block; width: var(--s-1); height: var(--s0); box-shadow: inset 0 0 0 1px var(--line); }
.wada i:nth-child(1) { background: var(--bg); }
.wada i:nth-child(2) { background: var(--ink); }
.wada i:nth-child(3) { background: var(--dot); }
.wada i:nth-child(3) { margin-right: var(--s-3); }

/* ---------- En-tête : le point (= dézoomer), la profondeur, la combinaison, la langue ---------- */
.z-head {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s0);
  min-height: var(--head-h);
  padding-inline: max(var(--s0), env(safe-area-inset-left)) max(var(--s0), env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 85.4%, transparent);
  -webkit-backdrop-filter: blur(var(--s-1));
  backdrop-filter: blur(var(--s-1));
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--f-1);
  letter-spacing: var(--track-mono);
}
.z-left, .z-right { display: flex; align-items: center; gap: var(--s0); min-width: 0; }
.z-home { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--s2); color: var(--ink); text-decoration: none; white-space: nowrap; }
.z-home .z-dot { transition: transform var(--t2) var(--ease-zoom); }
.z-home:hover .z-dot, .z-home:focus-visible .z-dot { transform: scale(var(--phi)); }
.z-home-txt { color: var(--ink-2); transition: color var(--t0); }
.z-home:hover .z-home-txt { color: var(--ink); }
.z-crumb { display: inline-flex; align-items: baseline; gap: var(--s-1); min-width: 0; overflow: hidden; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.z-crumb::before { content: "/"; color: var(--ink-3); }
.z-depth { color: var(--dot-ink); }

/* ---------- Pied : une ligne ---------- */
.z-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s1);
  margin-top: var(--s4);
  padding: var(--s1) max(var(--s0), env(safe-area-inset-right)) calc(var(--s1) + env(safe-area-inset-bottom)) max(var(--s0), env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--f-1);
  letter-spacing: var(--track-mono);
}
.z-foot a { color: var(--ink-2); text-decoration: none; transition: color var(--t0); }
.z-foot a:hover, .z-foot a[aria-current="page"] { color: var(--dot-ink); }
.z-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s0); }

/* ---------- Langue ---------- */
.lang { display: inline-flex; flex-shrink: 0; }
.lang button {
  appearance: none;
  min-width: var(--s2);
  min-height: var(--s2);
  padding: 0 var(--s-2);
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--f-1);
  letter-spacing: var(--track-mono);
  transition: color var(--t0);
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--dot); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: var(--s2);
  padding: var(--s-1) var(--s1);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-size: var(--f0);
  font-weight: 500;
  line-height: var(--lh-mid);
  text-decoration: none;
  transition: background-color var(--t0), border-color var(--t0), color var(--t0);
}
.btn:not(:disabled):hover { border-color: var(--ink); }
.btn.primary { color: var(--on-dot); background: var(--fill); border-color: var(--fill); }
.btn.primary:not(:disabled):hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.ghost { color: var(--ink); background: transparent; }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--s2);
  padding: var(--s-2) var(--s-1);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--f-1);
  line-height: var(--lh-mid);
  letter-spacing: var(--track-mono);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t0), border-color var(--t0);
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip[aria-pressed="true"] { color: var(--dot-ink); border-color: var(--dot-line); }

/* ---------- Champs ---------- */
.field { display: grid; gap: var(--s-2); min-width: 0; }
.field > label { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--f-1); letter-spacing: var(--track-mono); }
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]), select, textarea) {
  width: 100%;
  min-height: var(--s2);
  padding: var(--s-1) var(--s-1);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--f0);
  outline: none;
  transition: border-color var(--t0);
}
select {
  appearance: none;
  padding-right: var(--s2);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - var(--s0)) 50%, calc(100% - var(--s-1)) 50%;
  background-size: var(--s-2) var(--s-2);
  background-repeat: no-repeat;
}
:is(input, select, textarea):focus { border-color: var(--dot); }
input[aria-invalid="true"] { border-color: var(--bad); }
::placeholder { color: var(--ink-3); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--dot); }
.hint { color: var(--ink-3); font-size: var(--f-1); line-height: var(--lh); }

/* ---------- Typographie de page ---------- */
.h2 { font-size: clamp(var(--f2), 3.82vw, var(--f3)); line-height: var(--lh-mid); letter-spacing: -.0382em; }
.lead { max-width: var(--measure); color: var(--ink-2); font-size: clamp(var(--f0), 1.618vw, var(--f1)); line-height: var(--lh); }
.lead strong { color: var(--ink); font-weight: 500; }

/* ---------- Gabarits ---------- */
/* Les éléments partagés que les pages réutilisent ; chaque page porte le reste dans sa propre feuille. */
.hero { display: grid; gap: var(--s1); padding-block: var(--s3) var(--s2); }
@media (min-width: 900px) { .hero { padding-block: var(--s4) var(--s3); } }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); margin-top: var(--s1); }
/* 404 : le code est le titre, le zéro est le point. */
.err-code { font-size: clamp(var(--f5), 29.2vw, 23.4rem); line-height: .786; letter-spacing: -.09em; }
.step-head { display: flex; align-items: baseline; gap: var(--s-1); margin-bottom: var(--s0); font-size: var(--f0); font-weight: 500; }
.step-head .n { color: var(--dot-ink); font-family: var(--font-mono); font-size: var(--f-1); font-weight: 400; }

/* ---------- Toast et modale ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s1) + env(safe-area-inset-bottom));
  z-index: 60;
  width: max-content;
  max-width: calc(100vw - 2 * var(--s0));
  padding: var(--s-1) var(--s0);
  border: 1px solid var(--dot-line);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--f-1);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--s-1));
  transition: opacity var(--t1), transform var(--t2) var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--s0); background: color-mix(in srgb, var(--bg) 85.4%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--t1); }
.modal[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.modal-card { width: min(100%, 618px); max-height: calc(100dvh - 2 * var(--s0)); overflow: auto; border: 1px solid var(--line-strong); background: var(--bg); }
.modal-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s0); padding: var(--s0) var(--s1); border-bottom: 1px solid var(--line); }
.modal-title { font-size: var(--f0); font-weight: 500; }
.modal-b { display: grid; gap: var(--s-1); padding: var(--s1); color: var(--ink-2); }
.modal-b b { color: var(--ink); font-weight: 500; }

/* ---------- Mouvement ---------- */
@keyframes af-rise { from { opacity: 0; transform: translateY(var(--s-1)); } to { opacity: 1; transform: none; } }
@keyframes af-ping { 0% { box-shadow: 0 0 0 0 var(--dot-line); } 61.8%, 100% { box-shadow: 0 0 0 var(--s-1) transparent; } }
@keyframes af-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--s-2))); } }
@keyframes af-spin { to { transform: rotate(360deg); } }

/* ---------- Adaptations ---------- */
@media (max-width: 560px) {
  .z-home-txt, .z-head .wada { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .chip, .btn { border: 1px solid CanvasText; }
  .z-dot, .wada i { forced-color-adjust: none; }
}

/* ---------- Passage d'une page à l'autre (navigateurs récents) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t3); animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }