:root {
  interpolate-size: allow-keywords;
  --flow-bg: #19161e;
  --surface: #221e28;
  --surface-hover: #2a2531;
  --surface-press: #332d3b;
  --dim: var(--doa-hollow);
  --dim-hover: var(--doa-sub);
  --name-ink: var(--doa-sub);

  --size-name: clamp(2rem, 3.6vw, 3.25rem);
  --size-section: clamp(2rem, 4.2vw, 4.25rem);
  --size-m: clamp(1.2rem, 1.6vw, 1.6rem);
  --size-s: clamp(1rem, .96rem + .2vw, 1.125rem);
  --size-xs: .875rem;

  --margin: clamp(1rem, 2.4vw, 2.5rem);
  --section-gap: clamp(3.5rem, 6vw, 6rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Day theme: the kit's light tokens plus the page's own surfaces */
html.doa-theme-light {
  --flow-bg: #e4ded8;
  --surface: #dad3cc;
  --surface-hover: #d0c8c0;
  --surface-press: #c6bdb4;
  --dim: #75707c;
  --dim-hover: var(--doa-sub);
  --name-ink: #3a3640;
  color-scheme: light;
}
html:not(.doa-theme-light) .only-light, html.doa-theme-light .only-dark { display: none; }

html[data-lang="en"] .fr, html[data-lang="fr"] .en { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--doa-bg);
  color: var(--doa-ink);
  font-family: var(--doa-font);
  font-size: var(--size-s);
  line-height: 1.55;
  overflow-x: clip;
}
h1, h2, h3, p, ul, fieldset { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
img, svg { display: block; }
strong { font-weight: 700; }
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9em; padding: .05em .3em; background: var(--surface-hover);
}
::selection { background: var(--doa-accent); color: #fff; }
:focus-visible { outline: 3px solid var(--doa-ink); outline-offset: 3px; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Condensed heavy voice */
.pack h2 {
  font-weight: 900; font-stretch: 68%; text-transform: uppercase; letter-spacing: -.005em;
}

/* Bar */
.bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
  padding: .9rem var(--margin);
}
.nav { display: flex; align-items: center; gap: clamp(.7rem, 2.2vw, 2rem); font-size: var(--size-xs); font-weight: 500; }
.nav a {
  text-decoration: underline 2px transparent; text-underline-offset: .4em;
  white-space: nowrap; padding-block: .4rem;
  transition: text-decoration-color .15s, text-underline-offset .2s var(--ease);
}
.nav a:hover { text-decoration-color: var(--doa-accent); text-underline-offset: .22em; }
#langue {
  font: inherit; font-weight: 800; cursor: pointer;
  color: var(--doa-bg); background: var(--doa-ink); border: 0;
  padding: .35rem .7rem; transition: background-color .12s;
}
#langue:hover { background: var(--doa-sub); }
#theme {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  color: var(--doa-ink); background: transparent; border: 0; cursor: pointer;
  transition: background-color .12s;
}
#theme:hover { background: var(--surface-hover); }
#theme svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#theme .icon-moon { fill: currentColor; stroke: none; }
html:not(.doa-theme-light) #theme .icon-moon, html.doa-theme-light #theme .icon-sun { display: none; }

/* Horizontal cut: the stage spans the top, the cut runs across its bottom edge */
.split { display: block; }

.stage {
  --rise: clamp(2.5rem, 6vw, 6rem);
  position: relative; z-index: 2;
  background: var(--doa-bg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rise)), 0 100%);
}
/* The cut: only the band is pink, along the slanted bottom edge */
.stage::before {
  content: ""; position: absolute; inset: 0;
  background: var(--doa-accent);
  clip-path: polygon(0 calc(100% - 7px), 100% calc(100% - var(--rise) - 7px), 100% calc(100% - var(--rise)), 0 100%);
}
.stage-inner {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(.75rem, 1.6vw, 1.75rem);
  align-items: center; align-content: center;
  padding: clamp(4.5rem, 9vh, 6rem) var(--margin) calc(var(--rise) + clamp(1.5rem, 4vh, 2.5rem));
}
.stage-title { grid-column: 1 / span 6; grid-row: 1 / span 3; width: 100%; margin-left: -2%; }
.stage-inner > .lede, .stage-inner > .pack, .stage-inner > .socials { grid-column: 8 / -1; }
.stage-inner > .pack { margin-block: clamp(1.25rem, 3vh, 2rem); }
.lede { font-size: var(--size-m); line-height: 1.3; max-width: 24ch; }
.pack h2 { font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; }
.version {
  font-size: var(--size-xs); font-weight: 600; font-stretch: 100%; text-transform: none; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--doa-sub);
}
.pack-text { margin-top: .6rem; max-width: 44ch; }
.pack-button { margin-top: 1.25rem; }
/* The one strong action on the page: bright and wide.
   On hover only its label splits like the logo: the top half of the text slides along the cut,
   the pink band shows inside the letters, and five petals leave the cut. */
.button.button--hero {
  display: flex; width: 100%; max-width: 26rem; min-height: 4rem;
  padding: 0; font-size: 1.6rem;
  background: var(--doa-ink); color: var(--doa-bg); overflow: visible;
}
.button.button--hero::before { content: none; }
.button.button--hero:hover, .button.button--hero:focus-visible { background: #fff; }
html.doa-theme-light .button.button--hero:hover, html.doa-theme-light .button.button--hero:focus-visible { background: #2b2732; }
.cut-layer {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 4rem; padding: .75rem 1.75rem;
  transition: transform .34s cubic-bezier(.2, 1.45, .35, 1);
}
.button--hero > .cut-lo { position: relative; }
.button--hero > .cut-hi, .button--hero > .cut-band { position: absolute; inset: 0; }
.button--hero:hover > .cut-lo, .button--hero:focus-visible > .cut-lo { clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%); }
.button--hero > .cut-hi { clip-path: polygon(0 0, 100% 0, 100% 20%, 0 80%); visibility: hidden; }
.button--hero > .cut-band { color: var(--doa-accent); clip-path: polygon(0 80%, 100% 20%, 100% 11%, 0 71%); visibility: hidden; }
.button--hero:hover > .cut-hi, .button--hero:focus-visible > .cut-hi,
.button--hero:hover > .cut-band, .button--hero:focus-visible > .cut-band { visibility: visible; }
.button--hero:hover > .cut-layer, .button--hero:focus-visible > .cut-layer { transform: none; }
.button--hero:hover > .cut-hi, .button--hero:focus-visible > .cut-hi { transform: translate(6px, -5px); }
.button.button--hero:active { transform: scale(.98); }

.button--hero > .hero-petals { position: absolute; z-index: 3; left: calc(50% + 7.5rem); top: 36%; width: 0; height: 0; pointer-events: none; }
.hero-petals svg {
  position: absolute; left: -7px; top: -10px; width: 14px; height: 21px;
  fill: var(--doa-accent); opacity: 0;
}
.hero-petals svg:nth-child(1) { --dx: 34px; --dy: -34px; --r: 140deg; --s: .95; --o: .95; --t: .9s; }
.hero-petals svg:nth-child(2) { --dx: 62px; --dy: -14px; --r: -100deg; --s: .6; --o: .8; --t: 1s; }
.hero-petals svg:nth-child(3) { --dx: 48px; --dy: -60px; --r: 210deg; --s: .75; --o: .9; --t: 1.1s; }
.hero-petals svg:nth-child(4) { --dx: 88px; --dy: -44px; --r: 70deg; --s: .45; --o: .6; --t: 1.2s; }
.hero-petals svg:nth-child(5) { --dx: 20px; --dy: -70px; --r: -160deg; --s: .5; --o: .5; --t: 1.3s; }
.button--hero:hover .hero-petals svg, .button--hero:focus-visible .hero-petals svg {
  animation: hero-petal var(--t) cubic-bezier(.12, .75, .25, 1) forwards;
}
.hero-petals svg:nth-child(2) { animation-delay: 40ms; }
.hero-petals svg:nth-child(3) { animation-delay: 70ms; }
.hero-petals svg:nth-child(4) { animation-delay: 110ms; }
.hero-petals svg:nth-child(5) { animation-delay: 150ms; }
@keyframes hero-petal {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.2); }
  12% { opacity: 1; }
  100% { opacity: var(--o); transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(var(--s)); }
}
.pack-warning { margin-top: .9rem; font-weight: 700; font-size: var(--size-xs); }
.socials { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem .4rem .75rem; border-radius: 999px;
  background: var(--surface); color: var(--doa-sub);
  font-size: var(--size-xs); font-weight: 500; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.pill img { width: 10px; height: auto; }
.pill:hover { background: var(--surface-hover); color: var(--doa-ink); }
.pack-note { margin-top: .25rem; font-size: var(--size-xs); color: var(--doa-sub); max-width: 52ch; }

.flow {
  background: var(--flow-bg);
  margin-top: calc(-1 * clamp(2.5rem, 6vw, 6rem));
  padding: calc(clamp(2.5rem, 6vw, 6rem) + clamp(2.5rem, 5vw, 4.5rem)) var(--margin) 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start;
}
/* Guide on the left, the PS4 Extractor beside it */
.flow > .guide { grid-column: 1 / span 8; }
.flow > .extractor-card { grid-column: 9 / -1; position: sticky; top: 1.5rem; }
/* Without the guide (for now), the PS4 Extractor takes the middle */
.flow > .extractor-card:first-child { grid-column: 3 / span 8; position: static; }
.flow > .footer { grid-column: 1 / -1; }

/* Buttons: flat, square, with a skewed accent tab that slides in on hover */
.button {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 3.25rem; padding: .75rem 1.75rem;
  font: inherit; font-size: 1.15rem; font-weight: 900; font-stretch: 75%; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: background-color .12s, color .12s, transform .12s;
}
.button::before {
  content: ""; position: absolute; inset: 0 auto 0 -2rem; width: .9rem;
  background: var(--doa-accent); transform: skewX(-20deg);
  transition: translate .22s var(--ease);
}
.button > span { position: relative; transition: transform .22s var(--ease); }
.button:hover::before { translate: 2.2rem 0; }
.button:hover > span { transform: translateX(.45rem); }
.button:active { transform: scale(.97); }
.button--light { background: var(--doa-ink); color: var(--doa-bg); }
.button--ghost { background: var(--surface-press); color: var(--doa-ink); }
.button--ghost:hover { background: var(--surface-hover); }
.button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.button:disabled::before { display: none; }
.button:disabled > span { transform: none; }

.section-title {
  display: block;
  padding: .7rem 1.1rem;
  background: var(--surface-press); color: var(--doa-ink);
  font-weight: 700; font-stretch: 100%;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.2; letter-spacing: -.01em;
}

/* What's new: a small button next to the version, opening the patch notes */
.pack-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.notes-btn {
  position: relative; align-self: center;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem .3rem .4rem; border: 0; border-radius: 999px;
  font: inherit; font-size: var(--size-xs); font-weight: 600;
  color: var(--doa-sub); background: var(--surface); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.notes-btn:hover { background: var(--surface-hover); color: var(--doa-ink); }
.notes-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.notes-btn svg .fill { fill: currentColor; stroke: none; }
.notes-dot { position: absolute; top: .15rem; right: .2rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--doa-accent); }

.notes {
  width: min(36rem, calc(100vw - 2rem)); max-height: min(80vh, 40rem);
  padding: 0; border: 0; color: var(--doa-ink); background: var(--doa-bg);
  clip-path: polygon(0 1.25rem, 100% 0, 100% 100%, 0 100%);
}
.notes::backdrop { background: rgb(6 4 8 / .6); }
.notes[open] { animation: notes-in .32s var(--ease); }
@keyframes notes-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: none; } }
.notes-head {
  position: relative;
  padding: 2.5rem 3.5rem 1.25rem 1.5rem;
  background: var(--surface-press);
}
.notes-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(1.25rem + 5px);
  background: var(--doa-accent);
  clip-path: polygon(0 1.25rem, 100% 0, 100% 5px, 0 100%);
}
.notes-head h2 { font-weight: 900; font-stretch: 68%; text-transform: uppercase; font-size: 2rem; line-height: 1; }
.notes-version { color: var(--doa-sub); }
.notes-date { margin-top: .4rem; font-size: var(--size-xs); color: var(--doa-sub); }
.notes-close {
  position: absolute; top: 1.9rem; right: 1rem;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 0; background: transparent; color: var(--doa-sub); cursor: pointer;
}
.notes-close:hover { color: var(--doa-ink); background: var(--surface-hover); }
.notes-close svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.notes-list { display: grid; gap: .75rem; padding: 1.4rem 1.5rem 1.6rem; overflow: auto; }
.notes-list li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; color: var(--doa-sub); }
.notes-list li::before {
  content: ""; width: 1.25rem; height: .62rem; margin-top: .45rem;
  background: var(--doa-accent); clip-path: polygon(19% 0, 100% 0, 81% 100%, 0 100%);
}
.notes-hash { padding: 0 1.5rem 1.5rem; font-size: .75rem; color: var(--doa-sub); overflow-wrap: anywhere; }
.notes-hash code { background: var(--surface); padding: .1em .35em; }

/* Source code: a quiet link under the main action */
.source-link {
  display: inline-block; margin-top: .6rem;
  font-size: var(--size-xs); color: var(--doa-sub);
  text-decoration: underline 1px; text-underline-offset: .25em;
  transition: color .15s;
}
.source-link:hover { color: var(--doa-ink); }

/* Guide: a reel of pictures that runs by itself.
   The active picture is sharp in the middle; its neighbours peek out, smaller, blurred and dimmed. */
.reel {
  --w: 72%;
  position: relative; overflow: hidden;
  aspect-ratio: 2.47;
  outline-offset: 4px;
  touch-action: pan-y; user-select: none;
}
.reel-slide {
  position: absolute; top: 0; left: 50%; margin: 0;
  width: var(--w); aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--doa-bg);
  transform: translateX(-50%) scale(1);
  transition: transform .95s cubic-bezier(.65, 0, .25, 1), filter .95s cubic-bezier(.65, 0, .25, 1), opacity .95s cubic-bezier(.65, 0, .25, 1);
  will-change: transform, filter;
}
.reel-slide img, .reel-slide video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.reel-slide[data-pos="0"] { z-index: 3; }
.reel-slide[data-pos="1"], .reel-slide[data-pos="-1"] { z-index: 2; filter: blur(5px) brightness(.85); opacity: .8; cursor: pointer; }
.reel-slide[data-pos="1"] { transform: translateX(calc(-50% + 80%)) scale(.8); }
.reel-slide[data-pos="-1"] { transform: translateX(calc(-50% - 80%)) scale(.8); }
.reel-slide[data-pos="2"], .reel-slide[data-pos="-2"] { z-index: 1; filter: blur(12px) brightness(.5); opacity: 0; }
.reel-slide[data-pos="2"] { transform: translateX(calc(-50% + 150%)) scale(.65); }
.reel-slide[data-pos="-2"] { transform: translateX(calc(-50% - 150%)) scale(.65); }
.reel-slide.no-anim { transition: none; }
.media-ph {
  position: absolute; inset: 0; background: var(--surface);
  display: grid; place-content: center; justify-items: center; gap: .9rem;
  text-align: center; padding: 1rem;
}
.reel-slide:nth-child(2) .media-ph { background: #2e2433; }
.reel-slide:nth-child(3) .media-ph { background: #262433; }
.reel-slide:nth-child(4) .media-ph { background: #33242c; }
.reel-slide:nth-child(5) .media-ph { background: #242a33; }
html.doa-theme-light .reel-slide .media-ph { background: var(--surface); }
.ph-word {
  font-weight: 900; font-stretch: 68%; text-transform: uppercase; line-height: .9;
  font-size: clamp(2rem, 5vw, 4.75rem); color: var(--doa-sub); opacity: .35;
}
.ph-file { font-size: .8rem; color: var(--doa-sub); background: transparent; }

/* Without script: a plain row you can scroll sideways */
.guide:not(.reel-ready) .reel { aspect-ratio: auto; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.guide:not(.reel-ready) .reel-slide { position: relative; left: auto; transform: none; flex: 0 0 var(--w); scroll-snap-align: center; }
.guide:not(.reel-ready) .reel-controls { display: none; }

/* The only controls: progress rounds and a pause button, quiet, under the reel */
.reel-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.25rem; }
.reel-dots { display: flex; gap: .35rem; }
.reel-dot, .reel-toggle {
  display: grid; place-items: center; padding: .45rem .3rem;
  background: none; border: 0; cursor: pointer; color: var(--doa-sub);
}
.reel-dot .round { width: 1.9rem; height: .95rem; overflow: visible; fill: transparent; stroke: var(--dim); stroke-width: 2; transition: fill .2s, stroke .2s; }
.reel-dot:hover .round { stroke: var(--doa-sub); }
.reel-dot[aria-current="true"] .round { fill: var(--doa-accent); stroke: var(--doa-accent); animation: round-on .36s var(--ease); }
.reel-toggle svg { width: .95rem; height: .95rem; fill: currentColor; }
.reel-toggle:hover { color: var(--doa-ink); }
.reel-toggle .icon-play, .reel-toggle[aria-pressed="true"] .icon-pause { display: none; }
.reel-toggle[aria-pressed="true"] .icon-play { display: block; }
.guide-help { text-align: center; }

@keyframes round-on {
  0% { transform: scale(1.6); fill: #fff; stroke: #fff; opacity: 0; }
  25% { opacity: 1; }
  100% { transform: scale(1); }
}

/* PS4 Extractor */
.extractor-body { padding: clamp(1.1rem, 2vw, 1.6rem); background: var(--doa-bg); display: grid; gap: 1rem; justify-items: start; margin-top: 4px; }
.extractor-body p { color: var(--doa-sub); }
.step-link { font-size: var(--size-xs); color: var(--doa-sub); text-underline-offset: .25em; }
.step-link:hover { color: var(--doa-ink); }

/* Nav: short label on phones, Patreon stays in the pills there */
.nav-short { display: none; }
.nav a[aria-current="page"] { text-decoration-color: var(--doa-accent); }
.guide-help { margin-top: 1.25rem; font-size: var(--size-xs); color: var(--doa-sub); }
.guide-help a { color: var(--doa-ink); text-underline-offset: .2em; }

/* Inner pages: a shorter stage, same cut */
.stage--page .stage-inner { align-items: end; padding-bottom: calc(var(--rise) + clamp(1.5rem, 4vh, 2.5rem)); }
.page-home { grid-column: 1 / -1; justify-self: start; margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.page-home img { width: auto; height: clamp(2.25rem, 4vw, 3.25rem); }
.page-title {
  grid-column: 1 / span 7;
  font-weight: 900; font-stretch: 68%; text-transform: uppercase; line-height: .9; letter-spacing: -.005em;
  font-size: clamp(3rem, 9vw, 8rem);
}
.stage--page .lede { grid-column: 8 / -1; align-self: end; padding-bottom: .5rem; }
.flow > .faq, .flow > .report { grid-column: 1 / span 8; }
.flow > .side-card { grid-column: 9 / -1; position: sticky; top: 1.5rem; }
.side-body { padding: clamp(1.1rem, 2vw, 1.6rem); background: var(--doa-bg); display: grid; gap: 1rem; justify-items: start; margin-top: 4px; }
.side-body p { color: var(--doa-sub); }
.checklist { display: grid; gap: .8rem; }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; color: var(--doa-sub); }
.checklist .round { width: 1.75rem; height: .875rem; margin-top: .35rem; fill: transparent; stroke: var(--dim); stroke-width: 2; overflow: visible; }
.checklist a, .faq-a a { color: var(--doa-ink); text-decoration-color: var(--doa-accent); text-underline-offset: .2em; }

/* FAQ: questions that open in place; the round lights up when open */
.faq-list { display: grid; gap: 4px; margin-top: 4px; }
.faq-item { background: var(--surface); scroll-margin-top: 1.5rem; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.1rem;
  transition: background-color .1s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--surface-hover); }
.faq-item .round { flex: none; width: 2rem; height: 1rem; fill: transparent; stroke: var(--dim); stroke-width: 2; overflow: visible; transition: fill .15s, stroke .15s; }
.faq-item[open] .round { fill: var(--doa-accent); stroke: var(--doa-accent); }
.faq-item[open] summary { background: var(--surface-press); }
.faq-item::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
.faq-a { padding: 1rem 1.25rem 1.4rem; color: var(--doa-sub); max-width: 62ch; }
.faq-item:target summary { background: var(--surface-press); }

/* Bug report form */
.report-form { display: grid; gap: 1.5rem; margin-top: 4px; padding: clamp(1.25rem, 2.4vw, 2rem); background: var(--surface); justify-items: start; }
.field { display: grid; gap: .45rem; width: 100%; }
.field label { font-weight: 700; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--doa-ink);
  background: var(--doa-bg); border: 2px solid var(--surface-press); border-radius: 0;
  padding: .8rem .9rem; transition: border-color .12s;
}
.field textarea { resize: vertical; min-height: 10rem; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: var(--dim); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--doa-accent); }
.field-hint { font-size: var(--size-xs); color: var(--doa-sub); }
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.report-status { font-weight: 700; }
.report-status[data-etat="ok"] { color: var(--doa-ink); }
.report-status[data-etat="error"] { color: var(--doa-accent); }
.report-privacy { font-size: var(--size-xs); color: var(--doa-sub); max-width: 60ch; }

/* Footer */
.footer { padding: var(--section-gap) 0 var(--margin); display: grid; gap: 1.5rem; }
.footer-logo { width: min(100%, 16rem); height: auto; margin-left: -1%; }
.footer p { font-size: var(--size-xs); color: var(--doa-sub); max-width: 60ch; }

/* Reveal once, only when site.js runs */
.reveal-ready .reveal .reveal-item {
  opacity: 0; translate: 0 20px;
  transition: opacity .7s var(--ease), translate .7s var(--ease), background-color .1s, color .15s;
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s;
}
.reveal-ready .reveal.in .reveal-item { opacity: 1; translate: none; }

/* Short screens: the stage stops sticking so nothing is cut off */
/* Tablet and phone: one column under the stage */
@media (max-width: 900px) {
  .bar { position: relative; }
  .stage { --rise: 2.5rem; }
  .stage-inner { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; min-height: 0; padding: .5rem var(--margin) 3.75rem; }
  .stage-inner > .pack { margin: 0; }
  .stage-title { width: min(100%, 34rem); }
  .flow { display: block; margin-top: -2.5rem; padding: 4.5rem var(--margin) 0; }
  .flow > .extractor-card, .flow > .side-card { position: static; margin-top: var(--section-gap); }
  .page-title { font-size: clamp(2.75rem, 14vw, 5rem); }
  .stage--page .stage-inner { align-items: stretch; }
  .stage--page .lede { padding-bottom: 0; align-self: auto; }
  .page-home { align-self: flex-start; margin-bottom: .5rem; }
}
@media (max-width: 640px) {
  .bar { padding-block: .7rem; }
  .nav-long, .nav-patreon { display: none; }
  .nav-short { display: inline; }
  .nav { gap: .65rem; font-size: .8rem; }
  #langue { padding: .3rem .6rem; }
  .stage-inner { gap: .7rem; }
  .lede { font-size: 1.15rem; }
  .pack-text { font-size: 1rem; margin-top: .4rem; }
  .pack-button { margin-top: .8rem; }
  .reel { --w: 84%; aspect-ratio: 2.12; }
  .reel-slide[data-pos="1"] { transform: translateX(calc(-50% + 86%)) scale(.8); }
  .reel-slide[data-pos="-1"] { transform: translateX(calc(-50% - 86%)) scale(.8); }
}
@media (max-width: 380px) {
  .nav { gap: .5rem; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-ready .reveal .reveal-item { opacity: 1; translate: none; }
  .button--hero:hover > .cut-hi, .button--hero:focus-visible > .cut-hi { transform: none; }
  .reel-slide { transition: none; }
}