/* Le test anti-Jérôme — l'Institut officiel (et absurde) de détection jérômienne.
   Wada 265 : Dull Violet Black (le bureau) · Apricot Yellow (le feuillet jaune) · Old Rose (l'encre du tampon) · Olive Yellow.
   Special Elite pour les titres tapés, Courier Prime pour le reste ; les écritures non latines (20 langues)
   retombent sur les polices système. Appât, montée de tension, screamer, puis la chute. Mesures : tokens.css (φ). */

.jeromed-page {
  --scripts: "Noto Sans", "Noto Sans CJK SC", "Noto Sans JP", "Noto Sans Arabic", "Noto Sans Devanagari", "Microsoft YaHei", "Yu Gothic", "Malgun Gothic", "Segoe UI", sans-serif;
  --type: "Courier Prime", "Courier New", var(--scripts);
  --typed: "Special Elite", "Courier Prime", "Courier New", var(--scripts);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: var(--type);
  /* Le bureau : un sous-main ligné, à peine visible. */
  background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 3%, transparent) 0 1px, transparent 1px var(--s1));
}
.jeromed-page :is(h1, h2) { font-family: var(--typed); font-weight: 400; }

/* ---------- Cadre ---------- */
.jeromed-header, .jeromed-footer {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s0);
  width: min(var(--shell), 100%);
  margin-inline: auto;
  padding: max(var(--s0), env(safe-area-inset-top)) max(var(--s1), env(safe-area-inset-right)) var(--s0) max(var(--s1), env(safe-area-inset-left));
  transition: opacity var(--t4) var(--ease);
}
.site-name { display: inline-flex; align-items: center; min-height: var(--s2); color: var(--ink); font-family: var(--type); font-size: var(--f-1); text-decoration: none; }
.site-name span { color: var(--dot); }
.site-name .z-dot { margin-inline-end: var(--s-1); }
.card-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.lang-current { color: var(--ink-3); }
.lang-current::before { content: "· "; }
.jeromed-footer { padding-block: var(--s0) max(var(--s1), env(safe-area-inset-bottom)); color: var(--ink-3); font-family: var(--type); font-size: var(--f-1); }
.jeromed-header .chip { font-family: var(--type); }
.jeromed-footer a { display: inline-flex; align-items: center; min-height: var(--s2); color: var(--ink-2); text-decoration: none; }
.jeromed-footer a:hover { color: var(--dot-ink); }
#footerNote { flex: 1; text-align: center; }

.jeromed-stage { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; padding: var(--s1) max(var(--s0), env(safe-area-inset-right)) var(--s1) max(var(--s0), env(safe-area-inset-left)); transform-origin: 50% 38.2%; }
.act { width: min(618px, 100%); }
.act:not([hidden]) { animation: af-rise var(--t3) var(--ease-out) both; }
.intro-copy { color: var(--ink-2); line-height: var(--lh); }
.jeromed-page .btn { min-height: calc(var(--s2) + var(--s-1)); max-width: 100%; font-family: var(--type); font-weight: 700; }

/* ---------- Étape 0 : choix de la langue ---------- */
.picker { display: grid; justify-items: center; gap: var(--s0); width: min(calc(var(--shell) * .618), 100%); text-align: center; }
.picker-avatar { width: var(--s3); height: var(--s3); border-radius: 50%; }
.picker h1 { font-size: clamp(var(--f2), 4vw, var(--f3)); letter-spacing: 0; }
.pick-sub { max-width: var(--measure); color: var(--ink-3); font-size: var(--f-1); }
.lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); width: 100%; }
@media (min-width: 640px) { .lang-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lang-option { display: flex; align-items: center; gap: var(--s-1); min-height: var(--s2); padding: var(--s-2) var(--s-1); border: 0; border-bottom: 1px dashed var(--line-strong); background: transparent; color: var(--ink); font-family: var(--type); text-align: start; transition: background-color var(--t0); }
.lang-option::before { content: ""; flex: none; width: var(--s0); height: var(--s0); box-shadow: inset 0 0 0 1px var(--ink-3); }
.lang-option:hover { background: var(--surface-2); }
.lang-option[aria-pressed="true"]::before { content: "✗"; display: grid; place-items: center; color: var(--dot); font: 700 var(--f0)/1 var(--type); box-shadow: inset 0 0 0 1px var(--dot); }
#pickGo { min-width: min(calc(var(--s5) * var(--phi)), 100%); }

/* ---------- Acte 1 : le formulaire, copie jaune ----------
   La palette s'inverse sur le feuillet : encre violette sur papier jaune ; les dérivés suivent. */
.bait {
  --bg: #ffdd00; --ink: #1e0e3f;
  --ink-2: color-mix(in srgb, var(--ink) 85.4%, var(--bg));
  --ink-3: color-mix(in srgb, var(--ink) 76.4%, var(--bg));
  --line: color-mix(in srgb, var(--ink) 14.6%, var(--bg));
  --line-strong: color-mix(in srgb, var(--ink) 38.2%, var(--bg));
  --surface-2: color-mix(in srgb, var(--ink) 9%, var(--bg));
  --dot-ink: var(--ink); --dot-soft: color-mix(in srgb, var(--dot) 23.6%, var(--bg)); --dot-line: var(--ink);
  --fill: var(--ink); --on-dot: var(--bg);
  position: relative; overflow: hidden;
  padding-inline-start: var(--s1);
  background: var(--bg); color: var(--ink);
  box-shadow: var(--s-2) var(--s-2) 0 color-mix(in srgb, #000 38.2%, transparent);
}
/* La marge perforée du classeur. */
.bait::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--s1); background: radial-gradient(circle, #1e0e3f 0 var(--s-3), transparent calc(var(--s-3) + .5px)) center / var(--s1) var(--s2) repeat-y; box-shadow: inset -1px 0 0 var(--line-strong); }
.bait-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); padding: var(--s0) var(--s1); border-bottom: var(--s-3) double var(--ink); color: var(--ink-2); font-size: var(--f-1); font-weight: 700; text-transform: uppercase; letter-spacing: .0618em; }
.form-code { margin-inline-start: auto; color: var(--ink-3); font-weight: 400; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s0); padding: var(--s-1) var(--s1); border-top: 1px dashed var(--line-strong); color: var(--ink-3); font-size: var(--f-2); letter-spacing: .146em; }
.barcode { width: var(--s5); max-width: 50%; height: var(--s1); background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 7px, var(--ink) 7px 10px, transparent 10px 11px); }
.bait-top img { width: var(--s1); height: var(--s1); border-radius: 50%; }
.bait-body { display: grid; gap: var(--s0); padding: var(--s2) var(--s1); }
.bait-body h1 { font-size: clamp(var(--f2), 5vw, var(--f3)); line-height: 1.146; letter-spacing: 0; text-transform: uppercase; }
.step:not([hidden]) { animation: af-rise var(--t2) var(--ease-out) both; }

/* Parodie de captcha : volontairement claire et « officielle » ; ses couleurs imitent l'original et sortent de la palette. */
.captcha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s0);
  width: min(400px, 100%);
  min-height: 78px;
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s0);
  border: 1px solid #d3d3d3;
  border-radius: 6px;
  background: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  color: #222;
  font-family: Roboto, Arial, system-ui, sans-serif;
  text-align: start;
}
.captcha:focus-visible { outline: 3px solid var(--dot); outline-offset: var(--s-3); }
.captcha-box { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #c1c1c1; border-radius: 3px; background: #fff; transition: border-color var(--t1); }
.captcha:hover .captcha-box { border-color: #b2b2b2; }
.captcha-spin, .captcha-check { position: absolute; opacity: 0; }
.captcha-spin { inset: -2px; border: 3px solid #4a90e2; border-right-color: transparent; border-radius: 50%; }
.captcha-check { width: 30px; height: 30px; color: #009e55; transform: scale(.382); }
.captcha.loading .captcha-box, .captcha[aria-checked="true"] .captcha-box { border-color: transparent; background: transparent; }
.captcha.loading .captcha-spin { opacity: 1; animation: af-spin var(--t3) linear infinite; }
.captcha[aria-checked="true"] .captcha-check { opacity: 1; transform: none; transition: transform var(--t2) cubic-bezier(.236, 1.618, .382, 1), opacity var(--t1); }
.captcha-label { font-size: 14px; font-weight: 500; }
.captcha-brand { display: grid; justify-items: center; gap: 1px; color: #555; font-size: 9px; text-align: center; }
.captcha-brand img { width: 28px; height: 28px; border-radius: 50%; }
.captcha-brand b { font-size: 10px; font-weight: 600; }
.captcha-brand small { font-size: 9px; color: #666; }

/* Quiz */
.quiz { display: grid; gap: var(--s0); padding-top: var(--s-2); border-top: 1px dashed var(--line-strong); }
.quiz-progress { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); padding-top: var(--s0); color: var(--ink-3); font-size: var(--f-1); text-transform: uppercase; letter-spacing: .0618em; }
.quiz-dots { display: flex; gap: var(--s-2); }
.quiz-dots i { width: var(--s0); height: var(--s0); box-shadow: inset 0 0 0 1px var(--ink-3); transition: background-color var(--t2) var(--ease); }
.quiz-dots i.on { background: var(--ink); }
.quiz h2 { font-size: var(--f1); line-height: var(--lh-mid); }
.quiz-hint { color: var(--ink-3); font-size: var(--f-1); }
.quiz-hint:empty { display: none; }
.options { display: grid; gap: var(--s-1); }
.option { display: flex; align-items: center; gap: var(--s-1); min-height: var(--s2); padding: var(--s-1) var(--s0); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); text-align: start; transition: border-color var(--t1), background-color var(--t1); }
.option { font-family: var(--type); }
.option::before { content: attr(data-key); display: grid; place-items: center; width: var(--s1); height: var(--s1); flex-shrink: 0; border: 1px solid var(--line-strong); color: var(--ink-3); font-family: var(--type); font-size: var(--f-1); }
.option:not(:disabled):hover { border-color: var(--dot-line); background: var(--dot-soft); }
.option[aria-pressed="true"] { border-color: var(--dot); background: var(--dot-soft); }
.option[aria-pressed="true"]::before { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.option:disabled { opacity: 1; cursor: default; }
.option:disabled:not([aria-pressed="true"]) { opacity: .382; }
.feedback { color: var(--dot-ink); line-height: var(--lh); }
.feedback:not(:empty) { padding: var(--s-1) var(--s0); border-inline-start: 1px solid var(--dot); background: var(--dot-soft); animation: af-rise var(--t2) var(--ease-out) both; }
#quizNext { justify-self: end; }

/* Une fois le captcha coché, l'introduction se replie : le quiz tient dans l'écran. */
.bait.quizzing :is(#introTitle, .intro-copy, #stepCaptcha) { display: none; }
.bait.quizzing :is(.quiz, .launch) { padding-top: 0; border-top: 0; }
.bait.quizzing .quiz-progress { padding-top: 0; }

/* Grille « sélectionnez toutes les images contenant Jérôme » (toutes les cases en contiennent un). */
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); width: min(calc(var(--s5) * var(--phi)), 100%); margin-inline: auto; padding: var(--s-2); background: #fff; }
.tile { position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; border: 0; border-radius: 4px; background: #e9e1d6; transition: transform var(--t0) var(--ease); }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tile[aria-pressed="true"] { transform: scale(.854); }
.tile[aria-pressed="true"]::after { content: "✓"; position: absolute; top: var(--s-3); left: var(--s-3); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #4a90e2; color: #fff; font-size: 13px; font-weight: 700; }
.tile:disabled { cursor: default; opacity: 1; }
.tile:nth-child(2) img { filter: blur(4px); }
.tile:nth-child(3) img { transform: scaleX(-1) rotate(12deg); }
.tile:nth-child(4) img { transform: rotate(180deg); }
.tile:nth-child(5) img { filter: hue-rotate(160deg) saturate(1.6); }
.tile:nth-child(6) img { transform: scale(3.2) translate(8%, 12%); }
.tile:nth-child(7) img { transform: scale(.3); }
.tile:nth-child(8) img { filter: brightness(.18) contrast(1.4); }
.tile:nth-child(9) img { transform: scale(1.8) rotate(-28deg) translate(-20%, -16%); filter: contrast(2) saturate(0); }

.launch { display: grid; gap: var(--s0); padding-top: var(--s1); border-top: 1px dashed var(--line-strong); }
.launch h2 { font-size: var(--f2); text-transform: uppercase; }
.launch-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.launch-actions .btn { flex: 1 1 var(--s5); }

/* ---------- Acte 2 : la mesure et la montée de tension ---------- */
.scan { display: grid; justify-items: center; gap: var(--s1); text-align: center; }
.scan h1 { font-size: clamp(var(--f2), 5vw, var(--f3)); text-transform: uppercase; }
.scanner { position: relative; display: grid; place-items: center; width: min(var(--s5), 56vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, currentColor 9%, transparent), transparent 70%); color: var(--good); transition: color var(--t2); }
.scan-face { width: 70.8%; opacity: .764; animation: breathe var(--t5) ease-in-out infinite; }
.scan-line { position: absolute; left: 9%; right: 9%; top: 9%; height: 2px; background: currentColor; box-shadow: 0 0 var(--s0) currentColor, 0 0 var(--s-3) currentColor; animation: scan 2.2s ease-in-out infinite alternate; }
@keyframes scan { from { top: 9%; } to { top: 88%; } }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
.jeromed-page.uneasy .scanner { color: var(--dot); }
.jeromed-page.uneasy .scan-face { animation-duration: .9s; }
.jeromed-page.alarm .scanner { color: var(--bad); }
.jeromed-page.alarm .scan-line { animation-duration: var(--t3); }

.loading-bar-wrap { display: grid; gap: var(--s-1); width: min(calc(var(--s5) * var(--phi)), 100%); }
#loadingTxt { min-height: var(--s2); color: var(--ink-2); font-size: var(--f-1); line-height: var(--lh); }
.loading-bar-bg { height: 2px; overflow: hidden; background: var(--surface-2); }
.loading-bar-fill { width: 0; height: 100%; background: var(--dot); box-shadow: 0 0 var(--s-1) var(--dot); transition: width var(--bar-speed, .5s) var(--ease); }
.loading-pct { color: var(--ink-3); font-family: var(--type); font-size: var(--f-1); font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.all-clear { padding: var(--s-1) var(--s0); border: 1px solid color-mix(in srgb, var(--good) 38.2%, var(--bg)); background: color-mix(in srgb, var(--good) 9%, var(--bg)); color: var(--good); font-size: var(--f-1); line-height: var(--lh); }

/* La vignette se resserre et la scène avance doucement pendant l'analyse. */
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 38.2%, transparent 23.6%, color-mix(in srgb, var(--bg) 96%, #000) 72%); opacity: 0; transition: opacity 8s linear; }
.jeromed-page.tense .vignette { opacity: .92; }
.jeromed-page.tense .jeromed-stage { transform: scale(1.0618); transition: transform 9s cubic-bezier(.4, 0, .6, 1); }
.jeromed-page.tense :is(.jeromed-header, .jeromed-footer) { opacity: .146; }
.jeromed-page.snap :is(.vignette, .jeromed-stage, .jeromed-header, .jeromed-footer) { transition: none !important; }
.jeromed-page.calm .vignette { opacity: .55; transition: opacity var(--t4) var(--ease); }

/* ---------- Acte 3 : le screamer (aberration chromatique rouge / cyan : effet voulu, hors palette) ---------- */
.scare { position: fixed; inset: -60px; z-index: 1000; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--dot) 38.2%, #000), #000 70%); }
.scare-face { width: max(125vmin, 70vmax); max-width: none; height: auto; border-radius: 50%; filter: contrast(1.35) saturate(1.5) drop-shadow(10px 0 0 rgba(255, 0, 40, .75)) drop-shadow(-10px 0 0 rgba(0, 230, 255, .6)); transform: scale(.12) rotate(-14deg); will-change: transform; }
.scare.go { animation: scare-shake 70ms linear 140ms 12; }
.scare.go .scare-face { animation: scare-in 150ms cubic-bezier(.2, 1.7, .35, 1) forwards; }
.scare.out { opacity: 0; transition: opacity var(--t2) var(--ease); }
@keyframes scare-in { from { transform: scale(.12) rotate(-14deg); } to { transform: scale(1) rotate(0deg); } }
@keyframes scare-shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-18px, 12px) rotate(-1.5deg); }
  50% { transform: translate(16px, -14px) rotate(1.2deg); }
  75% { transform: translate(-12px, -10px) rotate(-.8deg); }
  100% { transform: translate(0, 0); }
}

/* ---------- Acte 4 : la chute comique ---------- */
.chaos { display: grid; justify-items: center; gap: var(--s0); text-align: center; }
.mascot-scene { position: relative; width: min(calc(var(--s5) * var(--phi)), 85.4vw); padding: var(--s1) var(--s1) var(--s-2); }
.jerome-main { display: block; width: 85.4%; height: auto; margin: auto; border-radius: 50%; filter: drop-shadow(0 var(--s0) var(--s2) color-mix(in srgb, var(--dot) 38.2%, transparent)); animation: jerome-pop var(--t3) cubic-bezier(.2, 1.4, .4, 1) both, af-float 5s ease-in-out var(--t3) infinite; }
.speech { position: absolute; top: 0; inset-inline-end: -4px; z-index: 2; max-width: 61.8%; padding: var(--s-1) var(--s0); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font-size: var(--f-1); font-weight: 600; animation: jerome-pop var(--t2) var(--t3) both; }
.jerome-mini { position: absolute; height: auto; border-radius: 50%; animation: jerome-pop var(--t2) var(--t0) both; }
.mini-one { left: 0; bottom: 14%; width: 20%; transform: rotate(-16deg); }
.mini-two { right: 0; top: 38.2%; width: 16%; animation-delay: var(--t2); }
.mini-three { right: 12%; bottom: 0; width: 13%; animation-delay: var(--t3); }
@keyframes jerome-pop { from { opacity: 0; transform: scale(.3) rotate(-9deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

.victim { padding: var(--s-2) var(--s0); border: 1px dashed var(--dot-line); color: var(--dot-ink); font-family: var(--type); font-size: var(--f-1); text-transform: uppercase; letter-spacing: .0618em; }
#revealTitle { font-family: var(--typed); font-size: clamp(var(--f4), 11.09vw, var(--f5)); line-height: .92; letter-spacing: -.0236em; }
#revealTitle span { display: inline-block; animation: slam var(--t3) cubic-bezier(.2, 1.6, .4, 1) both; }
#revealTitle span:last-child { color: var(--dot); animation-delay: var(--t0); }
@keyframes slam { from { opacity: 0; transform: scale(2.4) rotate(-6deg); } to { opacity: 1; transform: none; } }
.punchline { max-width: 42ch; color: var(--ink-2); line-height: var(--lh); }

/* Le certificat : les mesures dans un cadre officiel, puis le tampon s'abat dessus. */
.certificate { position: relative; margin-top: var(--s1); width: min(calc(var(--s5) * var(--phi) * var(--phi)), 100%); padding: var(--s-2); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 0 0 var(--s-3) var(--bg), inset 0 0 0 calc(var(--s-3) + 1px) var(--line); }
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 0; }
.results div { display: grid; gap: var(--s-3); padding: var(--s-1); }
.results div + div { border-inline-start: 1px dashed var(--line-strong); }
.results dt { color: var(--ink-3); font-family: var(--type); font-size: var(--f-2); letter-spacing: .0618em; text-transform: uppercase; }
.results dd { margin: 0; font-size: var(--f1); font-weight: 700; }
.stamp {
  position: absolute; z-index: 2; inset-inline-end: 0; top: 0;
  display: grid; justify-items: center; gap: var(--s-3);
  margin: 0; padding: var(--s-1) var(--s0);
  border: var(--s-2) double var(--dot); border-radius: var(--s-2);
  background: color-mix(in srgb, var(--bg) 61.8%, transparent);
  color: var(--dot); font: 400 var(--f2)/1 var(--typed); letter-spacing: .0382em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none;
  --sx: 23.6%; --tilt: -11deg;
  transform: translate(var(--sx), -61.8%) rotate(var(--tilt));
  animation: stamp-slam var(--t3) cubic-bezier(.2, 1.6, .4, 1) calc(var(--t3) + var(--t0)) both;
}
[dir="rtl"] .stamp { --sx: -23.6%; --tilt: 11deg; }
.stamp span + span { font-size: var(--f0); }
@keyframes stamp-slam { from { opacity: 0; transform: translate(var(--sx), -61.8%) rotate(calc(var(--tilt) * 2.18)) scale(2.618); } to { opacity: 1; transform: translate(var(--sx), -61.8%) rotate(var(--tilt)) scale(1); } }
/* Les titres reçoivent le focus par programme pour les lecteurs d'écran : pas de contour visible. */
.jeromed-page [tabindex="-1"]:focus { outline: none; }

.chaos-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); width: min(618px, 100%); }
.chaos-actions .btn { flex: 1 1 var(--s5); }
.support-link { display: inline-flex; align-items: center; min-height: var(--s2); color: var(--ink-2); font-size: var(--f-1); text-underline-offset: var(--s-3); }
.support-link:hover { color: var(--dot-ink); }

/* Pluie de mini-Jérôme. */
.rain { position: fixed; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.drop { position: absolute; top: -90px; height: auto; border-radius: 50%; animation: fall var(--d, 3s) cubic-bezier(.4, 0, .8, .6) var(--delay, 0s) forwards; }
@keyframes fall { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100dvh + 180px)) rotate(var(--r, 360deg)); } }

/* Écritures de droite à gauche (arabe) */
[dir="rtl"] .lang-current::before { content: " · "; }

/* ---------- Adaptations ---------- */
@media (max-width: 540px) {
  .jeromed-header .card-controls { width: 100%; justify-content: space-between; }
  .captcha { gap: var(--s-1); padding-inline: var(--s-1); }
  .captcha-brand small { display: none; }
  .chaos-actions .btn { flex-basis: 100%; }
  .jeromed-footer { justify-content: center; text-align: center; }
}
@media (max-width: 640px) { #footerNote { order: 3; flex-basis: 100%; } }
@media (max-width: 360px) {
  .captcha { grid-template-columns: auto minmax(0, 1fr); }
  .captcha-brand { display: none; }
  .results { grid-template-columns: minmax(0, 1fr); }
  .results div + div { border-inline-start: 0; border-top: 1px solid var(--line-strong); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .jeromed-stage { padding-block: var(--s-1); }
  .mascot-scene { width: var(--s5); padding-top: var(--s0); }
  .scanner { width: var(--s4); }
  .chaos { gap: var(--s-1); }
}
/* Écrans bas (portables) : chaque acte tient sans défiler. */
@media (min-width: 541px) and (max-height: 820px) {
  .jeromed-header, .jeromed-footer, .jeromed-stage { padding-block: var(--s-1); }
  .bait-body { gap: var(--s-1); padding-block: var(--s1); }
  .picker { gap: var(--s-1); }
  .picker-avatar { width: var(--s2); height: var(--s2); }
  .chaos { gap: var(--s-1); }
  .mascot-scene { width: var(--s5); padding-top: var(--s0); }
  .jerome-main { width: var(--s4); }
  #revealTitle { font-size: clamp(var(--f3), 7vh, var(--f4)); }
  .chaos-actions .btn { min-height: var(--s2); }
}
/* Résultats sur grand écran : Jérôme à gauche (mineur), le reste à droite (majeur). */
@media (min-width: 900px) {
  .chaos { width: min(calc(var(--shell) * .786), 100%); grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); column-gap: var(--s2); row-gap: var(--s-1); align-items: center; justify-items: start; text-align: start; }
  .chaos > * { grid-column: 2; }
  .chaos > .mascot-scene { grid-column: 1; grid-row: 1 / span 6; justify-self: center; }
  .chaos .results { width: 100%; }
  .chaos .chaos-actions { justify-content: flex-start; width: 100%; }
}
/* Mouvement réduit : pas de secousse, pas de zoom, pas de pluie. Le visuel reste. */
@media (prefers-reduced-motion: reduce) {
  .jeromed-page.tense .jeromed-stage { transform: none; }
  .scare-face { transform: none; }
  .rain { display: none; }
  .stamp { animation: none; }
}