/* 14h moins 12 — feuille de style de la page unique (one-page). */

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/PressStart2P-Regular.woff2") format("woff2");
}

/* jetons */
:root {
  /* surfaces */
  --sky:        #eaf3f7;
  --paper:      #f7fbfd;
  --panel:      #ffffff;
  --sand:       #f6efe6;
  --night:      #16243a;
  --night-deep: #0e1727;
  /* encres */
  --ink:        #1e2124;
  --ink-soft:   #5b6570;
  --ink-faint:  #8d99a5;
  /* traits */
  --line:       #b9cfdb;
  --line-soft:  #d9e7ee;
  /* accents */
  --accent:     #b4553f;
  --accent-dark:#8e402e;
  --accent-pale:#f3e2dc;
  --gold:       #e8b84b;
  --leaf:       #2f7d5d;
  --brand:      #b4553f;
  /* rythme */
  --px:   4px;
  --gut:  clamp(20px, 4vw, 48px);
  --maxw: 1180px;
  --pixel: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--sky);
  background-image:
    repeating-linear-gradient(0deg,  rgba(30,33,36,.028) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(30,33,36,.028) 0 1px, transparent 1px 16px);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { image-rendering: pixelated; image-rendering: -moz-crisp-edges; }

ul, ol { padding-left: 1.3em; }
li + li { margin-top: .45em; }

/* typographie */
h1, h2, h3, h4 {
  font-family: var(--pixel);
  font-weight: 400;
  letter-spacing: .5px;
  text-wrap: balance;
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(20px, 4.2vw, 40px); line-height: 1.55; margin: 0 0 .6em; }
h2 { font-size: clamp(16px, 2.6vw, 26px); line-height: 1.65; margin: 0 0 .8em; }
h3 { font-size: clamp(13px, 1.7vw, 17px); line-height: 1.7;  margin: 0 0 .7em; }
h4 { font-size: clamp(11px, 1.3vw, 13px); line-height: 1.8;  margin: 0 0 .7em; }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-dark); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--ink); }

strong, b { font-weight: 700; color: var(--ink); }

.lead { font-size: clamp(18px, 1.7vw, 21px); color: var(--ink-soft); max-width: 62ch; }
.small { font-size: 15px; color: var(--ink-soft); }
.tiny  { font-family: var(--pixel); font-size: 10px; line-height: 2; color: var(--ink-faint); }

.eyebrow {
  font-family: var(--pixel);
  font-size: 10px;
  line-height: 2;
  letter-spacing: 1.5px;
  color: var(--accent-dark);
  margin: 0 0 calc(var(--px) * 4);
  display: block;
}

.u-full { max-width: none; }

.u-m-0     { margin: 0; }
.u-mt-14   { margin-top: 14px; }
.u-mt-16   { margin-top: 16px; }
.u-mt-28   { margin-top: 28px; }
.u-mt-wide { margin-top: clamp(28px, 4vw, 44px); }

.u-top     { align-items: start; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* gabarit */
.wrap {
  width: min(100% - (var(--gut) * 2), var(--maxw));
  margin-inline: auto;
}

.section { padding: clamp(48px, 7vw, 96px) 0; position: relative; }
.section-paper { background: var(--paper); }
.section-sand  { background: var(--sand); }
.section-panel { background: var(--panel); }

.section-head { margin-bottom: clamp(28px, 4vw, 52px); }
.section-head p { color: var(--ink-soft); }

.section-head h2 .hl,
.subhead h2 .hl { color: var(--accent); }

.subhead {
  margin: clamp(48px, 6vw, 76px) 0 clamp(22px, 3vw, 34px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 3px solid var(--line);
}

.subhead h2 { text-wrap: pretty; }
.subhead p { color: var(--ink-soft); }

.zigzag {
  height: 12px;
  background:
    conic-gradient(from 135deg at 50% 0, var(--line-soft) 0 90deg, transparent 90deg)
    0 0 / 24px 12px repeat-x;
}

.checker {
  height: 8px;
  background:
    repeating-conic-gradient(var(--line-soft) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
}

.grid { display: grid; gap: clamp(16px, 2vw, 26px); }

/* min() plafonne le minimum de colonne à la largeur disponible : sous 340px
   de fenêtre, une piste de 320px débordait et créait un défilement horizontal. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 3); align-items: center; }

/* boutons */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--panel);
  --btn-lip: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--px) * 2.5);
  font-family: var(--pixel);
  font-size: clamp(10px, 1.05vw, 12px);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 0;
  border-radius: 0;
  padding: 17px 22px 15px;
  cursor: pointer;
  box-shadow: 0 var(--px) 0 var(--btn-lip);
  transition: transform .06s steps(2), box-shadow .06s steps(2);
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 0 calc(100% - 6px), 0 6px);
}
.btn:hover  { color: var(--btn-fg); transform: translateY(2px); box-shadow: 0 2px 0 var(--btn-lip); }
.btn:active { transform: translateY(var(--px)); box-shadow: 0 0 0 var(--btn-lip); }

.btn-primary { --btn-bg: var(--accent); --btn-fg: #fff; --btn-lip: var(--accent-dark); }
.btn-ghost {
  --btn-bg: var(--panel);
  --btn-fg: var(--ink);
  --btn-lip: var(--line);
  box-shadow: 0 var(--px) 0 var(--line), inset 0 0 0 3px var(--ink);
}
.btn-ghost:hover  { box-shadow: 0 2px 0 var(--line), inset 0 0 0 3px var(--ink); }
.btn-ghost:active { box-shadow: 0 0 0 var(--line), inset 0 0 0 3px var(--ink); }

.btn-sm { font-size: 10px; padding: 12px 15px 10px; }
.btn-lg { font-size: clamp(11px, 1.3vw, 14px); padding: 21px 28px 19px; }

.btn .arw {
  width: 12px; height: 12px; flex: none;
  background: currentColor;
  clip-path: polygon(0 33%, 58% 33%, 58% 8%, 100% 50%, 58% 92%, 58% 67%, 0 67%);
}

/* focus */
.btn:focus-visible,
.card:focus-visible { clip-path: none; }

/* cartes */
.card {
  position: relative;
  background: var(--panel);
  border: 3px solid var(--ink);
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: 0 6px 0 var(--line);
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px), 0 10px);
}
.card > :last-child { margin-bottom: 0; }
.card-soft { border-color: var(--line); box-shadow: 0 6px 0 var(--line-soft); }

/* vignettes jeu */
.game-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.game-card .thumb {
  display: block;
  background: var(--sky);
  border-bottom: 3px solid var(--ink);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.game-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.game-card .body { padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.game-card h3 { margin: 0; }
.game-card p { font-size: 15.5px; color: var(--ink-soft); margin: 0; flex: 1; }

.game-card .foot {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 2px; padding-top: 16px;
  border-top: 2px solid var(--line-soft);
}

.game-card .specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.game-card .specs .price { display: flex; flex-direction: column; justify-content: flex-end; }

.game-card .foot .btn {
  width: 100%;
  font-size: clamp(9px, 0.95vw, 11px);
  padding: 17px 12px 15px;
  margin-bottom: var(--px);
  justify-content: center;
  text-align: center;
}

/* la carte « fonctionnalités communes » */
.feature-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--sand);
  border-color: var(--accent);
  box-shadow: 0 6px 0 var(--accent-pale);
}
.feature-card .body {
  flex: 1;
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-card .eyebrow { margin: 0; }
.feature-card h3 { margin: 0; }

.feature-list { margin: 2px 0 0; }
.feature-list li { margin: 0 0 .5em; }
.feature-list li:last-child { margin-bottom: 0; }

.feature-note {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 2px solid var(--accent-pale);
  max-width: none;
  font-size: 15px;
  color: var(--ink-soft);
}

.goals { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.goals li { margin: 0; }

.price {
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sky);
  border: 2px solid var(--line);
  padding: 8px 10px 6px;
  display: inline-block;
}
.price em { font-style: normal; display: block; font-size: 8px; color: var(--ink-soft); margin-bottom: 4px; }

/* chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--pixel);
  font-size: 9px;
  line-height: 1.8;
  color: var(--ink-soft);
  background: var(--panel);
  border: 2px solid var(--line);
  padding: 7px 9px 5px;
  text-decoration: none;
}
.chip i {
  width: 8px; height: 8px; flex: none; display: block;
  background: var(--accent);
}

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--panel);
  border-bottom: 3px solid var(--ink);
}
.site-header .bar {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 12px 0;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { width: clamp(112px, 12vw, 148px); height: auto; }

.nav-main { margin-left: auto; }
.nav-main ul {
  list-style: none;
  display: flex;
  gap: clamp(10px, 1.6vw, 22px);
  margin: 0; padding: 0;
}
.nav-main li { margin: 0; }
.nav-main a {
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 2px 8px;
  border-bottom: 3px solid transparent;
  display: block;
  white-space: nowrap;
}
.nav-main a:hover { color: var(--accent); border-bottom-color: var(--line); }

.nav-main a.is-current { border-bottom-color: var(--accent); color: var(--accent); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 10px;
  background: var(--panel);
  border: 3px solid var(--ink);
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 3px; background: var(--ink);
  margin: 0 0 5px;
}
.nav-toggle span:last-child { margin-bottom: 0; }
.nav-toggle[aria-expanded="true"] { background: var(--ink); }
.nav-toggle[aria-expanded="true"] span { background: var(--panel); }

.header-cta { flex: none; }

@media (max-width: 1040px) {
  .header-cta { display: none; }
  .nav-toggle { display: block; }
  .nav-main {
    position: absolute;
    inset: 100% 0 auto;
    background: var(--panel);
    border-bottom: 3px solid var(--ink);
    display: none;
    padding: 8px var(--gut) 20px;
  }
  .nav-main.is-open { display: block; }
  .nav-main ul { flex-direction: column; gap: 0; }
  .nav-main li { border-top: 2px solid var(--line-soft); }
  .nav-main a { padding: 16px 0; border-bottom: 0; font-size: 12px; }
  .nav-main a.is-current { color: var(--accent); }
  .nav-main .nav-cta { margin-top: 18px; display: block; }
}
@media (min-width: 1041px) { .nav-main .nav-cta { display: none; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  font-family: var(--pixel); font-size: 11px;
  background: var(--ink); color: var(--panel);
  padding: 14px 18px;
}
.skip-link:focus { left: 8px; top: 8px; color: var(--panel); }

/* scène parallax */

.stage {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f4fbfe 0%, var(--sky) 58%, #dbeaf1 100%);
}

.layer {
  position: absolute;
  left: 0; bottom: 44px;
  width: calc(100% + var(--tile));
  height: var(--layer-h);
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: var(--tile) auto;
  image-rendering: pixelated;
  will-change: transform;
  animation: drift var(--speed) linear infinite;
  pointer-events: none;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--tile)), 0, 0); }
}

.layer-far  { --tile: calc(var(--layer-h) * var(--r-ap)); --speed: 21s; opacity: .55; }
.layer-near { --tile: calc(var(--layer-h) * var(--pp-part) * var(--r-pp)); --speed: 7s; opacity: 1; }

.stage .ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  background: #cfe0e8;
  border-top: 4px solid var(--ink);
  overflow: hidden;
}
.stage .ground::after {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: calc(100% + 48px);
  height: 4px;
  background: repeating-linear-gradient(90deg, rgba(30,33,36,.2) 0 16px, transparent 16px 48px);
  animation: ground-drift 1.4s linear infinite;
}
@keyframes ground-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-48px, 0, 0); }
}

/* runner */

.runner {
  position: absolute;
  bottom: 40px;
  left: clamp(24px, 12%, 140px);
  width: 80px;
  height: 96px;
  background-repeat: no-repeat;
  background-size: 560px 96px;
  image-rendering: pixelated;
  transform: scale(var(--runner-scale, 1));
  transform-origin: bottom left;
}

/* la troupe du démonstrateur */
.runner-set {
  position: absolute; inset: 0;
  --saut: calc((var(--stage-h, 330px) - 136px) * .8);
}
.runner-set .runner {
  opacity: 0;
  transform-origin: bottom center;
  animation:
    act 2s steps(1) infinite,
    hop 2s linear infinite,
    cast 6s steps(1) infinite;
}
.runner-set .runner-fusee {
  width: 128px;
  background-size: 1152px 96px;
  animation:
    act-wide 2s linear infinite,
    hop 2s linear infinite,
    cast 6s steps(1) infinite;
}
/* zèbre */
.runner-set .runner-zebre {
  width: 144px;
  background-size: 1296px 96px;
  animation:
    act-zebre 2s linear infinite,
    hop 2s linear infinite,
    cast 6s steps(1) infinite;
}

/* fusée */
.runner-set .runner-fusee { --runner-scale: .75; }

.runner-set .runner-astronaute { animation-delay: 0s, 0s, 0s; }
.runner-set .runner-fusee      { animation-delay: 0s, 0s, 2s; }
.runner-set .runner-zebre      { animation-delay: 0s, 0s, 4s; }

/* astronaute */
@keyframes act {
  0%   { background-position-x:     0; }   /* pose 1 : contact */
  5%   { background-position-x:  -80px; }  /* pose 2 : passage */
  10%  { background-position-x: -160px; }  /* pose 3 : contact opposé */
  15%  { background-position-x: -240px; }  /* pose 4 : passage */
  20%  { background-position-x:     0; }
  25%  { background-position-x:  -80px; }
  30%  { background-position-x: -160px; }
  35%  { background-position-x: -240px; }
  40%  { background-position-x: -320px; }  /* pose 5 : saut, pieds décollés */
  55%  { background-position-x: -400px; }  /* pose 6 : chute, jambes tendues */
  70%  { background-position-x: -480px; }  /* pose 7 : accroupi */
}
@keyframes act-zebre {
  0%   { background-position-x: 0;         animation-timing-function: steps(6, jump-none); }
  40%  { background-position-x: -720px;    animation-timing-function: step-start; }  /* poses 1 à 6 : course */
  55%  { background-position-x: -864px;    animation-timing-function: step-start; }  /* pose 7 : saut */
  70%  { background-position-x: -1008px;   animation-timing-function: step-start; }  /* pose 8 : chute */
  100% { background-position-x: -1152px; }                                           /* pose 9 : accroupi */
}
@keyframes act-wide {
  0%   { background-position-x: 0;       animation-timing-function: steps(6, jump-none); }
  40%  { background-position-x: -640px;  animation-timing-function: step-start; }
  55%  { background-position-x: -768px;  animation-timing-function: step-start; }  /* case 6 : saut */
  70%  { background-position-x: -896px;  animation-timing-function: step-start; }  /* case 7 : chute */
  100% { background-position-x: -1024px; }                                         /* case 8 : accroupi */
}

@keyframes hop {
  0%, 40%   { transform: scale(var(--runner-scale, 1)) translateY(0) rotate(0deg); }
  40.5%     { transform: scale(var(--runner-scale, 1)) translateY(calc(var(--saut) * -.066)) rotate(-11.5deg); }
  42.5%     { transform: scale(var(--runner-scale, 1)) translateY(calc(var(--saut) * -.306)) rotate(-11.5deg); }
  45%       { transform: scale(var(--runner-scale, 1)) translateY(calc(var(--saut) * -.556)) rotate(-9.2deg); }
  50%       { transform: scale(var(--runner-scale, 1)) translateY(calc(var(--saut) * -.889)) rotate(-4.6deg); }
  55%       { transform: scale(var(--runner-scale, 1)) translateY(calc(var(--saut) * -1))    rotate(0deg); }
  60%       { transform: scale(var(--runner-scale, 1)) translateY(calc(var(--saut) * -.889)) rotate(4.6deg); }
  65%       { transform: scale(var(--runner-scale, 1)) translateY(calc(var(--saut) * -.556)) rotate(9.2deg); }
  67.5%     { transform: scale(var(--runner-scale, 1)) translateY(calc(var(--saut) * -.306)) rotate(11.5deg); }
  69.5%     { transform: scale(var(--runner-scale, 1)) translateY(calc(var(--saut) * -.066)) rotate(11.5deg); }
  70%, 100% { transform: scale(var(--runner-scale, 1)) translateY(0) rotate(0deg); }
}
@keyframes cast { 0% { opacity: 1; } 33.33% { opacity: 0; } 100% { opacity: 0; } }

.demo-shell.is-manual .runner-set .runner { animation: act 2s steps(1) infinite, hop 2s linear infinite; }
.demo-shell.is-manual .runner-set .runner-fusee { animation: act-wide 2s linear infinite, hop 2s linear infinite; }
.demo-shell.is-manual .runner-set .runner-zebre { animation: act-zebre 2s linear infinite, hop 2s linear infinite; }
.demo-shell.is-manual[data-char="astronaute"] .runner-astronaute,
.demo-shell.is-manual[data-char="fusee"]      .runner-fusee,
.demo-shell.is-manual[data-char="zebre"]      .runner-zebre { opacity: 1; }

/* le style graphique : pixelart (défaut) ou dessin réaliste */
.demo-shell {
  --r-ap: 1.0169;   /* 960 / 944 */
  --r-pp: 2;        /* 960 / 480 */
  --pp-part: .7;
}
.demo-shell[data-decor="foret"] { --r-ap: .8889; --r-pp: 2.16; }  /* 960/1080 et 864/400 */

.demo-shell .runner-astronaute { background-image: url("../img/personnalisation/sprite-joueur-astronaute-pixelart.webp"); }
.demo-shell .runner-fusee      { background-image: url("../img/personnalisation/sprite-joueur-fusee-pixelart.webp"); }
.demo-shell .runner-zebre      { background-image: url("../img/personnalisation/sprite-joueur-zebre-pixelart.webp"); }

.demo-shell[data-style="dessin"] .runner-astronaute { background-image: url("../img/personnalisation/sprite-joueur-astronaute-dessin.webp"); }
.demo-shell[data-style="dessin"] .runner-fusee      { background-image: url("../img/personnalisation/sprite-joueur-fusee-dessin.webp"); }
.demo-shell[data-style="dessin"] .runner-zebre      { background-image: url("../img/personnalisation/sprite-joueur-zebre-dessin.webp"); }

/* le dessin est lissé par le navigateur, le pixelart reste crénelé */
.demo-shell[data-style="dessin"] .layer,
.demo-shell[data-style="dessin"] .runner { image-rendering: auto; }

/* hero */
.hero {
  position: relative;
  background: var(--night);
  border-bottom: 4px solid var(--ink);
  overflow: hidden;
}

.hero-sky,
.footer-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-sky   { background: linear-gradient(180deg, var(--night-deep) 0%, var(--night) 62%, #24405f 100%); }
.footer-sky { background: linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%); }

.footer-sky { transform: scaleX(-1); }

.hero-sky::before,
.footer-sky::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 3px;
  background: #fff;
  box-shadow:
     40px  60px 0 #fff,   180px  30px 0 rgba(255,255,255,.8),
    320px 110px 0 #fff,   460px  50px 0 rgba(255,255,255,.7),
    610px 140px 0 rgba(255,255,255,.9),   700px  24px 0 #fff,
    830px  96px 0 rgba(255,255,255,.75),  940px 160px 0 #fff,
   1080px  44px 0 rgba(255,255,255,.85), 1210px 120px 0 rgba(255,255,255,.7),
   1340px  70px 0 #fff,  1460px 190px 0 rgba(255,255,255,.75),
   1580px  36px 0 #fff,  1700px 128px 0 rgba(255,255,255,.7),
   1840px  64px 0 rgba(255,255,255,.85),
    120px 210px 0 rgba(255,255,255,.6),   520px 240px 0 rgba(255,255,255,.55),
    880px 268px 0 rgba(255,255,255,.6),  1290px 236px 0 rgba(255,255,255,.55),
   1620px 262px 0 rgba(255,255,255,.5),
     80px 330px 0 rgba(255,255,255,.5),   420px 366px 0 rgba(255,255,255,.45),
    690px 312px 0 rgba(255,255,255,.55), 1010px 392px 0 rgba(255,255,255,.4),
   1400px 344px 0 rgba(255,255,255,.5),  1760px 400px 0 rgba(255,255,255,.4),
    260px 152px 0 var(--gold),            760px 196px 0 var(--gold),
   1150px 300px 0 var(--gold),           1520px 108px 0 var(--gold);
  animation: twinkle 2.4s steps(2) infinite;
}

.hero-sky::after,
.footer-sky::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  background: transparent;
  box-shadow:
     95px  18px 0 rgba(255,255,255,.45),  240px  86px 0 rgba(255,255,255,.35),
    385px 172px 0 rgba(255,255,255,.4),   545px  14px 0 rgba(255,255,255,.3),
    660px  74px 0 rgba(255,255,255,.45),  790px 226px 0 rgba(255,255,255,.35),
    905px  52px 0 rgba(255,255,255,.4),  1020px 132px 0 rgba(255,255,255,.3),
   1130px 208px 0 rgba(255,255,255,.45), 1265px  28px 0 rgba(255,255,255,.35),
   1385px 164px 0 rgba(255,255,255,.4),  1495px 250px 0 rgba(255,255,255,.3),
   1655px  92px 0 rgba(255,255,255,.4),  1790px 220px 0 rgba(255,255,255,.35),
    165px 288px 0 rgba(255,255,255,.35),  350px 412px 0 rgba(255,255,255,.28),
    600px 348px 0 rgba(255,255,255,.35),  845px 384px 0 rgba(255,255,255,.3),
   1080px 330px 0 rgba(255,255,255,.35), 1330px 420px 0 rgba(255,255,255,.28),
   1560px 356px 0 rgba(255,255,255,.32), 1880px 300px 0 rgba(255,255,255,.3);
  animation: twinkle-dust 3.7s steps(2) infinite;
}
@keyframes twinkle      { 50% { opacity: .5; } }
@keyframes twinkle-dust { 50% { opacity: .3; } }

.hero-scan,
.footer-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 2px, transparent 2px 6px);
  opacity: .5;
}

.footer-scan { opacity: .3; }

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(34px, 5vw, 56px);
  padding: clamp(44px, 6.5vw, 92px) 0 clamp(56px, 7vw, 96px);
  color: var(--sky);
}
.hero-copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-copy > :last-child { margin-bottom: 0; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pixel);
  font-size: 10px;
  line-height: 2;
  letter-spacing: 1.5px;
  color: var(--gold);
  background: rgba(0,0,0,.35);
  border: 2px solid var(--gold);
  padding: 9px 12px 7px;
  margin: 0 0 clamp(20px, 3vw, 30px);
}

.hero-badge .led,
.cartridge-led,
.arcade-led,
.versus-led {
  width: 9px; height: 9px; flex: none;
  background: var(--gold);
  animation: blink 1.4s steps(2) infinite;
}
@keyframes blink { 50% { opacity: .25; } }

.hero h1 {
  font-size: clamp(22px, 4.4vw, 46px);
  line-height: 1.5;
  color: #fff;
  max-width: 28ch;
  -webkit-hyphens: manual;
  hyphens: manual;
  text-shadow:
    4px 4px 0 var(--accent-dark),
    8px 8px 0 rgba(0,0,0,.45);
  margin-bottom: .7em;
}
.hero h1 .hl { color: var(--gold); }

.hero .lead { color: #cddfe9; max-width: 72ch; }
.hero .cluster { margin-top: clamp(26px, 3.5vw, 36px); justify-content: center; }

.hero .cluster .btn-lg { font-size: clamp(10px, 1vw, 12px); padding: 19px 22px 17px; }
.hero .btn-ghost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  box-shadow: 0 var(--px) 0 rgba(0,0,0,.5), inset 0 0 0 3px #fff;
}
.hero .btn-ghost:hover  { box-shadow: 0 2px 0 rgba(0,0,0,.5), inset 0 0 0 3px var(--gold); color: var(--gold); }
.hero .btn-ghost:active { box-shadow: 0 0 0 rgba(0,0,0,.5), inset 0 0 0 3px #fff; }

.hero-stats {
  list-style: none;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 0;
  margin: 0;
  background: rgba(255,255,255,.24);
  border: 2px solid rgba(255,255,255,.24);
}
.hero-stats li {
  margin: 0;
  background: rgba(0,0,0,.4);
  padding: 13px 16px 11px;
  font-family: var(--pixel);
  font-size: 13px;
  line-height: 1.6;
  color: #fff;
}
.hero-stats em {
  font-style: normal;
  display: block;
  font-size: 8px;
  line-height: 1.9;
  letter-spacing: 1px;
  color: #9db6c7;
  margin-bottom: 6px;
}

@media (min-width: 960px) {
  .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* démonstrateur */
.demo-shell { display: grid; gap: clamp(20px, 3vw, 32px); align-items: start; }
@media (min-width: 900px) { .demo-shell { grid-template-columns: minmax(0, 1.55fr) minmax(260px, .95fr); } }

/* le cadre d'arcade */
.arcade {
  border: 4px solid var(--ink);
  background: var(--panel);
  box-shadow: 0 8px 0 var(--brand);
  padding: 12px;
}
.arcade-top {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px 10px;
  font-family: var(--pixel); font-size: 9px; line-height: 2; color: var(--night);
}

.arcade-led { width: 10px; height: 10px; background: var(--brand); }
.arcade-screen {
  position: relative;
  border: 3px solid var(--ink);
  overflow: hidden;
}
.arcade-screen .stage {
  --stage-h: clamp(230px, 34vw, 330px);
  --layer-h: calc(var(--stage-h) - 44px);
  height: var(--stage-h);
  background: linear-gradient(180deg, #ffffff 0%, var(--sky) 100%);
}

/* le HUD factice */
.hud-fake {
  position: absolute;
  inset: 10px 10px auto;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
  font-family: var(--pixel); font-size: 10px; line-height: 1.8;
  color: var(--ink);
  pointer-events: none;
  z-index: 3;
}
.hud-fake .box {
  background: rgba(255,255,255,.86);
  border: 2px solid var(--brand);
  padding: 7px 9px 5px;
}
.hud-fake .box em { font-style: normal; display: block; font-size: 8px; color: var(--ink-soft); margin-bottom: 4px; }
.hud-fake .lives { display: flex; gap: 4px; }
.hud-fake .lives img { width: 16px; height: 16px; }
.hud-fake .lives img:last-child { opacity: .22; }

.demo-controls { display: grid; gap: 20px; }

.ctrl-group > h3 {
  font-size: clamp(11px, 1.3vw, 13px);
  line-height: 1.8;
  margin-bottom: 10px;
  color: var(--ink-soft);
}
.ctrl-row { display: flex; flex-wrap: wrap; gap: 8px; }

.opt-btn {
  font-family: var(--pixel);
  font-size: 9px;
  line-height: 1.7;
  padding: 10px 11px 8px;
  background: var(--panel);
  color: var(--ink-soft);
  border: 2px solid var(--line);
  cursor: pointer;
  transition: transform .06s steps(2);
}
.opt-btn:hover { border-color: var(--ink); color: var(--ink); }
.opt-btn[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--sky);
}

/* tableau comparatif */
.table-wrap { overflow-x: auto; border: 3px solid var(--ink); background: var(--panel); }
table { border-collapse: collapse; width: 100%; min-width: 640px; }
th, td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 2px solid var(--line-soft); font-size: 15.5px; }
thead th {
  font-family: var(--pixel); font-size: 10px; line-height: 1.9; font-weight: 400;
  background: var(--sky); border-bottom: 3px solid var(--ink); color: var(--ink);
}
tbody tr:last-child td,
tbody tr:last-child th { border-bottom: 0; }
tbody th[scope="row"] { font-weight: 700; }
td.is-us, th.is-us { background: var(--accent-pale); }
th.is-us { background: var(--accent); color: #fff; }

/* le tableau de positionnement */
.versus table { min-width: 760px; }
.versus thead th { vertical-align: bottom; }
.versus thead th.is-us em {
  display: block;
  font-style: normal;
  font-size: 8px;
  line-height: 1.9;
  letter-spacing: 1px;
  margin-top: 5px;
  color: #f6ded7;
}

.versus-led {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
}

.versus .versus-corner {
  background: var(--sand);
  border-bottom: 3px solid var(--ink);
  font-family: var(--pixel);
  font-size: 9px;
  line-height: 1.9;
  color: var(--night);
  white-space: nowrap;
}
.versus tbody th[scope="row"] {
  background: var(--sky);
  border-right: 2px solid var(--line-soft);
  font-family: var(--pixel);
  font-size: 9px;
  line-height: 1.9;
  font-weight: 400;
  color: var(--ink-soft);
  white-space: nowrap;
  width: 1%;
}

.versus tbody th,
.versus tbody td { vertical-align: middle; }

.versus .is-us { border-left: 3px solid var(--accent); border-right: 3px solid var(--accent); }
.versus tbody tr:last-child .is-us { border-bottom: 3px solid var(--accent); }
.versus tbody .is-us { color: var(--ink); font-weight: 600; }

.table-hint {
  margin: 12px 0 0;
  font-family: var(--pixel);
  font-size: 9px;
  line-height: 1.9;
  color: var(--ink-faint);
}
@media (min-width: 860px) { .table-hint { display: none; } }

/* à propos */
.about-grid { display: grid; gap: clamp(20px, 3vw, 34px); align-items: start; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(280px, .92fr) minmax(0, 1.08fr); }
  .cartridge { position: sticky; top: 148px; }
}

@media (min-width: 900px) and (max-height: 760px) {
  .cartridge { position: static; }
}

/* la cartouche */
.cartridge {
  background: var(--night);
  border: 4px solid var(--ink);
  box-shadow: 0 8px 0 var(--line);
  padding: 12px 12px 0;
  clip-path: polygon(
    0 0, calc(100% - 60px) 0, calc(100% - 60px) 16px, 100% 16px,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    12px 100%, 0 calc(100% - 12px));
}
.cartridge-top {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px;
  padding: 0 2px;
  max-width: none;
  font-family: var(--pixel);
  font-size: 9px; line-height: 2;
  letter-spacing: 1px;
  color: var(--gold);
}
.cartridge-label {
  background: var(--panel);
  border: 3px solid var(--ink);
  padding: clamp(18px, 2.2vw, 26px);
}
.cartridge-label h3 {
  font-size: clamp(16px, 2.6vw, 26px);
  line-height: 1.65;
  margin: 0 0 12px;
  text-shadow: 3px 3px 0 var(--accent-pale);
}
.cartridge-role {
  font-family: var(--pixel);
  font-size: 10px; line-height: 1.9;
  letter-spacing: 1px;
  color: var(--accent);
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--line-soft);
}
.cartridge-label p { font-size: 15.5px; color: var(--ink-soft); }
.cartridge-label p:last-child { margin-bottom: 0; }

.cartridge-pins {
  height: 16px;
  margin: 12px 0 0;
  background: repeating-linear-gradient(90deg, var(--gold) 0 12px, var(--night-deep) 12px 22px);
}

/* la petite histoire */
.lore {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 48px;
  display: grid;
  gap: clamp(20px, 2.6vw, 28px);
  counter-reset: lore;
}
.lore::before {
  content: "";
  position: absolute;
  left: 17px; top: 14px; bottom: 14px;
  width: 4px;
  background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 16px);
}
.lore li { position: relative; margin: 0; }
.lore li::before {
  counter-increment: lore;
  content: counter(lore);
  position: absolute;
  left: -48px; top: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-family: var(--pixel);
  font-size: 11px; line-height: 1;
  color: #fff;
  background: var(--accent);
  border: 3px solid var(--ink);
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 0 calc(100% - 6px), 0 6px);
}
.lore h3 { margin: 0 0 10px; padding-top: 4px; }
.lore p { color: var(--ink-soft); margin: 0; }

/* contact */
.contact-card { text-align: center; }
.contact-card .deco-item { margin: 0 auto 18px; }
.contact-value {
  font-family: var(--pixel);
  font-size: clamp(13px, 2vw, 19px);
  line-height: 1.7;
  display: inline-block;
  margin: 0 0 14px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 4px solid var(--accent);
  overflow-wrap: break-word;
}
.contact-value:hover { color: var(--accent-dark); border-bottom-color: var(--ink); }

/* footer */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--night);
  border-top: 4px solid var(--ink);
  padding: clamp(40px, 5vw, 64px) 0 28px;
  color: var(--sky);
}

.site-footer > .wrap { position: relative; z-index: 2; }
.site-footer .cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.site-footer .foot-h {
  font-size: clamp(11px, 1.3vw, 13px);
  line-height: 1.8;
  margin: 0 0 .7em;
  color: var(--gold);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 10px; }
.site-footer a { color: var(--sky); text-decoration: none; font-size: 15.5px; }

.site-footer a:hover { color: var(--gold); text-decoration: underline; }

.site-footer .small { color: rgba(234, 243, 247, .78); }
.site-footer .tiny  { color: rgba(234, 243, 247, .6); }
.site-footer strong { color: var(--gold); }

.site-footer .foot-editor,
.site-footer .foot-editor:hover { color: var(--gold); text-decoration: none; }
.site-footer .foot-editor:hover strong { text-decoration: underline; }
.site-footer .brand img { width: 150px; }
.footer-bottom {
  margin-top: 32px; padding-top: 20px;
  border-top: 2px solid rgba(255, 255, 255, .2);
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
}

.foot-legal { font-size: inherit !important; text-decoration: underline; }

/* fenêtre modale */
.modal {
  padding: 0;
  border: 0;
  background: none;
  max-width: min(760px, calc(100vw - 2 * var(--gut)));
  max-height: calc(100vh - 2 * var(--gut));
  width: 100%;
  overflow: visible;
  color: var(--ink);
}
.modal::backdrop { background: rgba(14, 23, 39, .82); }

.modal:not([open]):target {
  display: block;
  position: fixed;
  z-index: 100;
  inset: var(--gut) auto auto 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 100vmax rgba(14, 23, 39, .82);
}

.modal-panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2 * var(--gut));
  background: var(--panel);
  border: 4px solid var(--ink);
  box-shadow: 0 8px 0 var(--accent-dark);
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    12px 100%, 0 calc(100% - 12px), 0 12px);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 32px);
  background: var(--night);
  border-bottom: 4px solid var(--ink);
}
.modal-head h2 { margin: 0; color: #fff; font-size: clamp(13px, 1.8vw, 17px); }
.modal-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  font-family: var(--pixel);
  font-size: 18px;
  line-height: 1;
  color: var(--night);
  background: var(--sky);
  border: 3px solid var(--ink);
  text-decoration: none;
}
.modal-close:hover { color: #fff; background: var(--accent); }

.modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(20px, 2.8vw, 34px);
}
.modal-body h3 {
  font-size: clamp(11px, 1.4vw, 13px);
  line-height: 1.9;
  margin: 1.8em 0 .6em;
  color: var(--accent);
}
.modal-body > h3:first-child { margin-top: 0; }
.modal-body p { max-width: none; }

.modal-body ul { list-style: none; padding: 0; margin: 0 0 1.3em; display: grid; gap: 10px; }
.modal-body li { position: relative; padding-left: 22px; }
.modal-body li::before {
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px;
  background: var(--accent);
}
.modal-body > :last-child { margin-bottom: 0; }

.modal-foot {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: clamp(14px, 2vw, 20px) clamp(20px, 2.6vw, 32px);
  background: var(--sky);
  border-top: 3px solid var(--line);
}

body.has-modal { overflow: hidden; }

/* divers */
.callout {
  border-left: 8px solid var(--accent);
  background: var(--accent-pale);
  padding: clamp(18px, 2.2vw, 26px);
}
.callout > :last-child { margin-bottom: 0; }
.callout p { max-width: none; }

.tick { list-style: none; padding: 0; }
.tick li { position: relative; padding-left: 30px; }
.tick li::before {
  content: "";
  position: absolute; left: 0; top: .45em;
  width: 14px; height: 10px;
  background: var(--leaf);
  clip-path: polygon(0 40%, 12% 30%, 40% 62%, 88% 0, 100% 12%, 40% 100%);
}

.deco-item { width: 56px; height: 56px; flex: none; }

/* économie hors écran */
.is-idle,
.is-idle *,
.is-idle *::before,
.is-idle *::after { animation-play-state: paused !important; }

/* mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .runner { background-position-x: 0 !important; }
  .demo-shell:not(.is-manual) .runner-astronaute { opacity: 1; }
  .layer, .stage .ground::after { transform: none !important; }
}

/* impression */
@media print {
  .site-header, .site-footer, .stage, .hero-sky, .hero-scan,
  .demo-controls, .btn { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .hero, .hero-inner { background: #fff; color: #000; padding-bottom: 0; }
  .hero h1 { color: #000; text-shadow: none; }
}