/* Composants Arcade Push, copies depuis le design system. Ne pas editer : npm run tokens. */
/* ---------- base ---------- */
html { color-scheme: dark; }
body { margin: 0; background: var(--ground); color: var(--ink-soft); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.ap-stage { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); }
.ap-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); }
.ap-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ap-icon { display: block; flex: none; }

/* focus clavier (ajout) */
.ap-btn:focus-visible, .ap-chip:focus-visible, .ap-game:focus-visible, .ap-link:focus-visible,
.ap-navbtn:focus-visible, .ap-seg__item:focus-visible, .ap-search__go:focus-visible, .ap-panel--link:focus-visible {
  outline: 2px solid var(--coin); outline-offset: 3px;
}

/* ---------- la tranche : couche arriere partagee ---------- */
.ap-btn, .ap-chip, .ap-navbtn, .ap-search__go, .ap-game { position: relative; -webkit-tap-highlight-color: transparent; }
.ap-btn::before, .ap-chip::before, .ap-navbtn::before, .ap-search__go::before, .ap-game::before, .ap-seg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--edge);
  transform: translateY(var(--ap-depth, var(--depth)));
}

/* ---------- Button ---------- */
.ap-btn {
  --ap-depth: var(--depth); --ap-face: var(--coin); --ap-rim: var(--coin-rim); --ap-label: var(--ink-inverse);
  display: inline-flex; vertical-align: top; margin: 0 0 var(--ap-depth); padding: 0; border: 0; background: none;
  border-radius: var(--radius-xl); font: inherit; text-decoration: none; cursor: pointer;
}
.ap-btn__face {
  position: relative; display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.75em 1.5em; border: 2px solid var(--ap-rim); border-radius: inherit; background: var(--ap-face); color: var(--ap-label);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 900; letter-spacing: 0.025em; text-transform: uppercase; white-space: nowrap;
  transition: transform var(--duration-base) var(--ease-standard);
}
.ap-btn:hover .ap-btn__face { transform: translateY(var(--lift-hover)); }
.ap-btn:active .ap-btn__face { transform: translateY(var(--ap-depth)); transition-duration: var(--duration-press); }
.ap-btn__end { transition: transform var(--duration-hover) var(--ease-standard); }
.ap-btn:hover .ap-btn__end { transform: translateX(4px); }
.ap-btn--sm .ap-btn__face { font-size: 12px; line-height: 16px; }
.ap-btn--lg { --ap-depth: var(--depth-lg); }
.ap-btn--lg .ap-btn__face { font-size: 16px; line-height: 24px; }
.ap-btn--wide { display: flex; width: 100%; }
.ap-btn--coin .ap-btn__face { background: linear-gradient(90deg, var(--coin), var(--coin-deep)); }
.ap-btn--coin:hover .ap-btn__face { background: linear-gradient(90deg, var(--coin-bright), var(--coin-deep)); }
.ap-btn--coin.ap-btn--glow .ap-btn__face { box-shadow: var(--glow-coin-lift); }
.ap-btn--blue { --ap-face: var(--blue); --ap-rim: var(--blue-rim); --ap-label: var(--ink); }
.ap-btn--violet { --ap-face: var(--violet); --ap-rim: var(--violet-rim); --ap-label: var(--ink); }
.ap-btn--danger { --ap-face: var(--danger); --ap-rim: var(--danger-rim); --ap-label: var(--ink); }
.ap-btn--paper { --ap-face: var(--paper); --ap-rim: var(--edge); --ap-label: var(--ink-inverse); }
.ap-btn--paper-discord { --ap-face: var(--paper); --ap-rim: var(--edge); --ap-label: var(--discord); }
.ap-btn--dark { --ap-face: var(--ground); --ap-rim: var(--edge); --ap-label: var(--ink); }
.ap-btn--dark:hover .ap-btn__face { color: var(--coin); }
.ap-btn--discord { --ap-face: var(--discord); --ap-rim: var(--edge); --ap-label: var(--ink); }
.ap-btn[disabled], .ap-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; }
.ap-btn[disabled] .ap-btn__face, .ap-btn[aria-disabled="true"] .ap-btn__face { transform: translateY(var(--ap-depth)); }

/* ---------- TextLink ---------- */
.ap-link {
  display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); text-decoration: none; border-radius: var(--radius-sm);
  font: 900 12px/16px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; transition: color var(--duration-base) var(--ease-standard);
}
.ap-link:hover { color: var(--ink); }
.ap-link .ap-icon { transition: transform var(--duration-hover) var(--ease-standard); }
.ap-link:hover .ap-icon { transform: translateX(4px); }
.ap-link--coin { color: var(--coin); }
.ap-link--coin:hover { color: var(--coin-bright); }
.ap-link--danger { color: var(--danger-text); }
.ap-link--blue { color: var(--blue-text); }

/* ---------- FilterChip ---------- */
.ap-chip {
  --ap-depth: var(--depth-sm); display: inline-flex; vertical-align: top; margin: 0 0 var(--ap-depth); padding: 0; border: 0; background: none;
  border-radius: var(--radius-lg); font: inherit; text-decoration: none; cursor: pointer;
}
.ap-chip__face {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 2px solid var(--edge); border-radius: inherit;
  background: var(--surface); color: var(--ink); font: 900 11px/16px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  transition: transform var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.ap-chip:hover .ap-chip__face { transform: translateY(var(--lift-chip-hover)); color: var(--coin); }
.ap-chip:active .ap-chip__face { transform: translateY(var(--ap-depth)); transition-duration: var(--duration-press); }
.ap-chip[aria-pressed="true"] .ap-chip__face { background: var(--coin); border-color: var(--coin-rim); color: var(--ink-inverse); }
.ap-chiprow { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* ---------- Badge ---------- */
.ap-badge { display: inline-flex; align-items: center; gap: 4px; font: 900 10px/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.ap-badge--platform { padding: 4px 6px; border-radius: var(--radius-md); background: var(--edge); color: var(--ink); }
.ap-badge--coin { padding: 4px 10px; border-radius: var(--radius-full); background: var(--coin); color: var(--ink-inverse); }
.ap-badge--count { padding: 8px 12px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--ground-deep); color: var(--ink); font-size: 11px; }

/* ---------- StatChip ---------- */
.ap-stat {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; border: 2px solid var(--edge); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--hard-4);
}
.ap-stat__icon { font-size: 20px; line-height: 1; }
.ap-stat__value { display: block; font: 900 16px/1 var(--font-sans); letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ap-stat__label { display: block; margin-top: 3px; font: 900 9px/1.2 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- SearchBar ---------- */
.ap-search {
  display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; width: 100%; max-width: var(--container-3xl);
  padding: 6px 8px 6px 18px; border: 2px solid var(--edge); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--hard-4);
  transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.ap-search:focus-within { transform: translateY(var(--lift-hover)); border-color: var(--coin); }
.ap-search__input {
  flex: 1; min-width: 0; margin: 0; padding: 10px 0; border: 0; background: none; outline: none; color: var(--ink);
  font: 500 16px/24px var(--font-sans);
}
.ap-search__input::placeholder { color: var(--ink-muted); }
.ap-search__go { --ap-depth: var(--depth-sm); flex: none; margin: 0 0 var(--ap-depth); padding: 0; border: 0; background: none; border-radius: var(--radius-lg); cursor: pointer; }
.ap-search__go span {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border: 2px solid var(--coin-rim);
  border-radius: inherit; background: var(--coin); font-size: 18px; line-height: 1; transition: transform var(--duration-base) var(--ease-standard);
}
.ap-search__go:hover span { transform: translateY(-2px); background: var(--coin-bright); }
.ap-search__go:active span { transform: translateY(var(--ap-depth)); }

/* ---------- GameCard ---------- */
.ap-game { display: block; width: 168px; max-width: 100%; aspect-ratio: 2 / 3; margin-bottom: var(--depth); border-radius: var(--radius-xl); color: var(--ink); text-decoration: none; }
.ap-game__face {
  position: absolute; inset: 0; overflow: hidden; border: 2px solid var(--line); border-radius: inherit; background: var(--surface);
  transition: transform var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard);
}
.ap-game:hover .ap-game__face { transform: translateY(var(--lift-hover)); border-color: var(--line-hover); }
.ap-game:active .ap-game__face { transform: translateY(var(--depth)); transition-duration: var(--duration-press); }
.ap-game__art { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--duration-media) var(--ease-out); }
.ap-game__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-game:hover .ap-game__art { transform: scale(1.05); }
.ap-game__shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim) 0%, var(--scrim-mid) 22%, #00000000 55%); }
.ap-game__badge { position: absolute; top: 8px; left: 8px; }
.ap-game__meta { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.ap-game__title { margin: 0; font: 900 13px/1.2 var(--font-sans); letter-spacing: -0.025em; color: var(--ink); text-shadow: 0 2px 10px #000000e6, 0 0 20px #000000cc; }
.ap-game__dl { display: flex; align-items: center; gap: var(--space-1); font: 700 10px/1.2 var(--font-sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ap-grid-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.ap-grid-games .ap-game { width: 100%; }
@media (max-width: 639px) { .ap-grid-games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- SectionHeader ---------- */
.ap-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.ap-sechead__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 900 12px/16px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--coin); }
.ap-sechead__title { margin: 0; font: 900 30px/1.08 var(--font-sans); letter-spacing: -0.05em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.ap-sechead__action { flex: none; padding-bottom: 4px; }
@media (max-width: 639px) {
  .ap-sechead { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .ap-sechead__title { font-size: 24px; }
}

/* ---------- StepHeading ---------- */
.ap-step { display: flex; align-items: center; gap: 14px; margin: 0; }
.ap-step__num {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; box-sizing: border-box; border: 2px solid var(--edge);
  border-radius: var(--radius-lg); box-shadow: var(--hard-2); background: var(--blue); color: var(--ink); font: 900 18px/1 var(--font-sans);
}
.ap-step__num--coin { background: var(--coin); color: var(--ink-inverse); }
.ap-step__num--go { background: var(--go); color: var(--ink-inverse); }
.ap-step__num--violet { background: var(--violet); }
.ap-step__num--danger { background: var(--danger); }
.ap-step__title { font: 900 24px/1.33 var(--font-sans); letter-spacing: -0.05em; text-transform: uppercase; color: var(--ink); }

/* ---------- IconTile ---------- */
.ap-tile {
  display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; box-sizing: border-box; border: 2px solid var(--edge);
  border-radius: var(--radius-xl); box-shadow: var(--hard-3); background: var(--blue); color: var(--ink);
}
.ap-tile--sm { width: 40px; height: 40px; border-radius: var(--radius-lg); }
.ap-tile--violet { background: var(--violet); }
.ap-tile--danger { background: var(--danger); }
.ap-tile--coin { background: var(--coin); color: var(--ink-inverse); }
.ap-tile--go { background: var(--go); color: var(--ink-inverse); }
.ap-tile--ink { background: var(--edge); color: var(--coin); box-shadow: var(--hard-4-soft); }
.ap-tile--sunken { background: var(--surface-sunken); border-color: var(--line); box-shadow: none; color: var(--ink-muted); }
.ap-tile--sunken.ap-tile--i-pink { color: var(--pink-text); }
.ap-tile--sunken.ap-tile--i-go { color: var(--go-text); }
.ap-tile--sunken.ap-tile--i-blue { color: var(--blue-text); }
.ap-tile--sunken.ap-tile--i-violet { color: var(--violet-text); }
.ap-tile--sunken.ap-tile--i-coin { color: var(--coin); }

/* ---------- Panel ---------- */
.ap-panel {
  position: relative; box-sizing: border-box; padding: var(--space-8); border: 2px solid var(--line); border-radius: var(--radius-2xl);
  background: var(--surface); box-shadow: var(--hard-4); color: var(--ink-soft);
}
.ap-panel--r3 { border-radius: var(--radius-3xl); }
.ap-panel--fade { background: linear-gradient(135deg, var(--surface), var(--surface-low)); }
.ap-panel--deep { background: var(--ground-deep); }
.ap-panel--coin { border-color: var(--edge); background: linear-gradient(135deg, var(--coin), var(--coin-deep)); color: var(--ink-inverse); }
.ap-panel--discord { border-color: var(--edge); background: linear-gradient(135deg, var(--discord), var(--discord-deep)); color: var(--discord-soft); }
.ap-panel--link { display: block; text-decoration: none; transition: transform var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard); }
.ap-panel--link:hover { transform: translateY(var(--lift-hover)); border-color: var(--line-hover); }
.ap-panel--link:active { transform: translateY(0); box-shadow: none; }

/* ---------- FeatureCard ---------- */
.ap-feature { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.ap-feature__title { margin: 0; font: 900 20px/1.4 var(--font-sans); letter-spacing: 0.025em; text-transform: uppercase; color: var(--ink); }
.ap-feature__text { margin: 0; max-width: 34ch; font: 500 14px/1.5 var(--font-sans); color: var(--ink-soft); }
.ap-feature__action { margin-top: var(--space-2); }
.ap-feature__glyph { display: block; color: var(--ink); line-height: 0; }
.ap-feature--row { flex-direction: row; align-items: flex-start; gap: var(--space-5); text-align: left; }
.ap-feature--row .ap-feature__title { letter-spacing: -0.025em; }
.ap-feature--row .ap-feature__body { display: flex; flex-direction: column; gap: var(--space-2); }
.ap-feature--row .ap-feature__action { margin-top: var(--space-2); }
.ap-feature--sm { gap: var(--space-3); }
.ap-feature--sm .ap-feature__title { font-size: 14px; line-height: 20px; letter-spacing: 0.05em; }
.ap-panel--coin .ap-feature__title, .ap-panel--coin .ap-feature__text { color: var(--ink-inverse); }
.ap-panel--coin .ap-feature__text { font-weight: 700; }
.ap-panel--discord .ap-feature__title { color: var(--ink); }
.ap-panel--discord .ap-feature__text { color: var(--discord-soft); }

/* ---------- PromoBanner ---------- */
.ap-promo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: var(--space-10); }
.ap-promo__lead { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.ap-promo__icon { flex: none; font-size: 32px; line-height: 1; }
.ap-promo__title { margin: 0; font: 900 30px/1.2 var(--font-sans); letter-spacing: -0.05em; color: var(--ink); text-wrap: balance; }
.ap-promo__title--caps { text-transform: uppercase; line-height: 1.08; }
.ap-promo__text { margin: 8px 0 0; max-width: 44ch; font: 500 15px/1.55 var(--font-sans); color: var(--ink-muted); }
.ap-panel--discord .ap-promo__text { color: var(--discord-soft); }
.ap-promo__action { flex: none; }
@media (max-width: 639px) {
  .ap-promo { flex-direction: column; align-items: flex-start; padding: var(--space-6); }
  .ap-promo__lead { align-items: flex-start; }
}

/* ---------- MediaFrame ---------- */
.ap-media { position: relative; box-sizing: border-box; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--line); border-radius: var(--radius-2xl); background: var(--ground-deep); box-shadow: var(--hard-4); }
.ap-media > img, .ap-media > video, .ap-media > .ap-media__fill { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-2xl-inner); }
.ap-media--r3 { border-radius: var(--radius-3xl); }
.ap-media--r3 > img, .ap-media--r3 > video, .ap-media--r3 > .ap-media__fill { border-radius: var(--radius-3xl-inner); }

/* ---------- TextField ---------- */
.ap-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ap-field__label { font: 900 11px/16px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
.ap-field__input {
  box-sizing: border-box; width: 100%; margin: 0; padding: 11px 14px; border: 2px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--ground); color: var(--ink); font: 500 14px/20px var(--font-sans); box-shadow: var(--hard-3); outline: none;
  transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.ap-field__input::placeholder { color: var(--ink-muted); }
.ap-field__input:focus { transform: translateY(var(--lift-input-focus)); border-color: var(--coin); }
.ap-field--blue .ap-field__input:focus { border-color: var(--blue-rim); }
.ap-field--violet .ap-field__input:focus { border-color: var(--violet-rim); }
.ap-field__hint { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.ap-field--error .ap-field__input { border-color: var(--danger-rim); }
.ap-field--error .ap-field__hint { color: var(--danger-text); }

/* ---------- EmptyState ---------- */
.ap-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-4); text-align: center; }
.ap-empty__icon { font-size: 40px; line-height: 1; filter: grayscale(1); opacity: 0.55; }
.ap-empty__text { margin: 0; max-width: 40ch; font: 500 14px/1.5 var(--font-sans); color: var(--ink-muted); }

/* ---------- NavBar ---------- */
.ap-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); box-sizing: border-box; width: 100%; max-width: var(--container-4xl);
  margin: 0 auto; padding: var(--space-2) var(--space-3); border: 2px solid var(--edge); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--hard-4);
}
.ap-nav__side { display: flex; align-items: center; gap: var(--space-2); }
.ap-navbtn {
  --ap-depth: var(--depth-sm); display: inline-flex; vertical-align: top; margin: 0 0 var(--ap-depth); padding: 0; border: 0; background: none;
  border-radius: var(--radius-lg); font: inherit; text-decoration: none; cursor: pointer;
}
.ap-navbtn__face {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--edge); border-radius: inherit;
  background: var(--paper); color: var(--ink-inverse); font: 800 12px/16px var(--font-sans); white-space: nowrap; transition: transform var(--duration-base) var(--ease-standard);
}
.ap-navbtn:hover .ap-navbtn__face { transform: translateY(-2px); }
.ap-navbtn:active .ap-navbtn__face { transform: translateY(var(--ap-depth)); }
.ap-navbtn--brand { border-radius: var(--radius-xl); }
.ap-navbtn--brand .ap-navbtn__face { gap: 8px; padding: 8px 16px; background: var(--paper-dim); font-size: 15px; line-height: 20px; font-weight: 900; letter-spacing: -0.025em; }
.ap-navbtn--brand .ap-icon { color: var(--blue); }
.ap-seg { --ap-depth: var(--depth-sm); position: relative; display: flex; margin-bottom: var(--ap-depth); border-radius: var(--radius-lg); }
.ap-seg__item {
  position: relative; display: inline-flex; align-items: center; margin-left: -2px; padding: 6px 12px; border: 2px solid var(--edge); background: var(--paper);
  color: var(--ink-inverse); font: 800 12px/16px var(--font-sans); text-decoration: none; white-space: nowrap; transition: transform var(--duration-base) var(--ease-standard);
}
.ap-seg__item:first-child { margin-left: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.ap-seg__item:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.ap-seg__item:hover { transform: translateY(-2px); z-index: 1; }
.ap-seg__item[aria-current="page"], .ap-seg__item--coin { background: var(--coin); }
.ap-nav__menu { display: none; }
@media (max-width: 719px) {
  .ap-nav .ap-seg { display: none; }
  .ap-nav__menu { display: inline-flex; }
}

/* ---------- Footer ---------- */
.ap-footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); border-top: 1px solid var(--hairline); background: var(--ground-deep); text-align: center; }
.ap-footer__brand { display: inline-flex; align-items: center; gap: 8px; font: 800 13px/20px var(--font-sans); letter-spacing: -0.025em; color: var(--ink-muted); }
.ap-footer__copy { margin: 0; font: 500 12px/16px var(--font-sans); color: var(--ink-faint); }
.ap-footer__legal { margin: var(--space-2) 0 0; max-width: 540px; font: 700 10px/1.6 var(--font-sans); letter-spacing: 0.025em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- mouvement reduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .ap-btn__face, .ap-chip__face, .ap-navbtn__face, .ap-seg__item, .ap-game__face, .ap-game__art, .ap-search, .ap-search__go span,
  .ap-field__input, .ap-panel--link, .ap-link .ap-icon, .ap-btn__end { transition: none !important; transform: none !important; }
}