/* Couleurs et polices, mode clair */
:root {
  color-scheme: light dark;
  --bg: #f7f5ef;
  --bg-alt: #eef1e7;
  --surface: #ffffff;
  --ink: #1b1e22;
  --muted: #565c64;
  --line: #dcd9cf;
  --accent: #2b7a35;
  --accent-shade: #1c5524;
  --on-accent: #ffffff;
  --link: #22702d;
  --grass: #5aa63f;
  --grass-shade: #3f8530;
  --gold: #f0b43c;
  --off: #c0392b;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --radius: 6px;
}

/* Couleurs, mode sombre */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111417;
    --bg-alt: #15191d;
    --surface: #1b2025;
    --ink: #eceae4;
    --muted: #a5abb3;
    --line: #2c3239;
    --accent: #62c46e;
    --accent-shade: #3d8c48;
    --on-accent: #0b1a0e;
    --link: #82d68c;
    --grass: #4f9a3a;
    --grass-shade: #3a7a2b;
    --off: #ff7b6e;
  }
}

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

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1.0625rem/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
}

p {
  margin: 0;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

code,
kbd {
  font-family: var(--mono);
  font-size: 0.9em;
}

kbd {
  display: inline-block;
  min-width: 1.8em;
  padding: 0 0.4em;
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  font-weight: 700;
  text-align: center;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Lien d'évitement visible au clavier */
.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--bg);
}

.skip:focus {
  top: 16px;
}

/* Boutons */
.button,
.download-main a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 13px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: inset 0 -4px 0 var(--accent-shade);
  color: var(--on-accent);
  font: 700 1rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
}

.button:active,
.download-main a:active {
  padding-block: 12px 11px;
  box-shadow: inset 0 -2px 0 var(--accent-shade);
}

.button:hover,
.download-main a:hover {
  filter: brightness(1.08);
}

.button-small {
  padding: 7px 14px 10px;
  font-size: 0.9375rem;
}

.button-ghost {
  background: var(--surface);
  box-shadow:
    inset 0 0 0 2px var(--line),
    inset 0 -4px 0 var(--line);
  color: var(--ink);
}

.button-ghost:active {
  box-shadow:
    inset 0 0 0 2px var(--line),
    inset 0 -2px 0 var(--line);
}

/* En-tête */
.hero {
  position: relative;
  padding-bottom: 64px;
  background: var(--bg-alt);
}

/* Bordure d'herbe pixelisée sous l'en-tête */
.hero::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 24px;
  background:
    linear-gradient(var(--grass), var(--grass)) 0 0 / 100% 8px no-repeat,
    linear-gradient(
        90deg,
        var(--grass) 0 24px,
        transparent 24px 40px,
        var(--grass) 40px 56px,
        transparent 56px 72px,
        var(--grass) 72px 80px,
        transparent 80px
      )
      0 8px / 96px 8px repeat-x,
    linear-gradient(
        90deg,
        transparent 8px,
        var(--grass-shade) 8px 16px,
        transparent 16px 48px,
        var(--grass-shade) 48px 56px,
        transparent 56px
      )
      0 16px / 96px 8px repeat-x;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 20px;
  padding-block: 16px;
}

.nav a {
  padding: 4px 2px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.nav a:hover {
  text-decoration: underline;
}

.hero-body {
  display: grid;
  gap: 20px;
  padding-top: 16px;
}

.hero-logo {
  width: 88px;
  height: 88px;
}

h1 {
  font-size: clamp(2.75rem, 12vw, 5rem);
  font-weight: 850;
  letter-spacing: -0.03em;
}

h1 .accent {
  color: var(--link);
}

.pitch {
  max-width: 34ch;
  margin-top: 12px;
  color: var(--muted);
  font-size: clamp(1.125rem, 3.6vw, 1.375rem);
  line-height: 1.45;
}

/* Badge du nombre de joueurs */
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: 600 0.875rem/1.4 var(--mono);
  text-decoration: none;
}

.status:hover,
.download-list a:hover,
.toc a:hover {
  border-color: var(--accent);
}

.status-dot {
  width: 10px;
  height: 10px;
  background: var(--muted);
}

[data-map='up'] .status-dot {
  background: var(--grass);
  animation: clignote 2s steps(1) infinite;
}

[data-map='down'] .status-dot {
  background: var(--off);
}

@keyframes clignote {
  50% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--grass) 35%, transparent);
  }
}

/* Téléchargement */
.download {
  margin-top: 28px;
}

.download-main {
  display: grid;
  justify-content: start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.download-main a {
  display: block;
  padding: 15px 24px 19px;
  font-size: 1.0625rem;
}

.download-main a:active {
  padding-block: 17px;
}

/* Flèche pixelisée */
.download-main a::before {
  content: '';
  display: inline-block;
  margin-right: 12px;
  vertical-align: -2px;
  width: 14px;
  height: 16px;
  background: currentColor;
  clip-path: polygon(
    4px 0,
    10px 0,
    10px 8px,
    14px 8px,
    14px 10px,
    12px 10px,
    12px 12px,
    10px 12px,
    10px 14px,
    8px 14px,
    8px 16px,
    6px 16px,
    6px 14px,
    4px 14px,
    4px 12px,
    2px 12px,
    2px 10px,
    0 10px,
    0 8px,
    4px 8px
  );
}

.download-label {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.875rem;
}

.download-list,
.toc ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.download-list a,
.toc a {
  display: inline-block;
  padding: 6px 12px;
  border: 2px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.download-list .verb {
  display: none;
}

.download-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Sections */
main {
  padding-bottom: 88px;
}

.section {
  padding-top: clamp(56px, 10vw, 88px);
}

h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Petit bloc devant les titres */
h2::before {
  content: '';
  flex: none;
  width: 0.55em;
  height: 0.55em;
  background: var(--grass);
  box-shadow: inset 0 -0.14em 0 var(--grass-shade);
}

h3 {
  font-size: 1.1875rem;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 28px;
}

.section-head h2 {
  margin: 0;
}

/* Étapes */
.steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step,
.card,
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.step {
  padding: 24px;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  background: var(--gold);
  box-shadow: inset -4px -4px 0 rgb(0 0 0 / 0.18);
  color: #1b1e22;
  font: 800 1.375rem/1 var(--mono);
}

.step h3 {
  margin-bottom: 8px;
}

.step p,
.card p,
.faq p {
  color: var(--muted);
}

.tips {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tips li {
  padding: 10px 12px;
  border-radius: 4px;
  background: var(--bg);
}

.tips b {
  display: block;
  color: var(--muted);
  font: 700 0.75rem/1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Carte */
.live {
  display: grid;
  gap: 16px;
}

.map {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #1a1f24;
}

.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 16px;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.map-cover span {
  padding: 8px 14px;
  border-radius: 4px;
  background: rgb(17 20 23 / 0.85);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9375rem;
}

.map-cover:focus-visible {
  outline-offset: -6px;
}

.map-down {
  display: none;
}

[data-map='down'] .map-down {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 120px 24px 24px;
  background: var(--surface) url('assets/logo.svg') no-repeat center calc(50% - 36px) / 72px;
  color: var(--muted);
  text-align: center;
}

/* Infos pratiques */
.cards {
  display: grid;
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
}

.address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.address code {
  padding: 7px 12px;
  border: 2px dashed var(--line);
  border-radius: 4px;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.0625rem;
  overflow-wrap: anywhere;
}

.copy-status {
  color: var(--link);
  font-weight: 600;
  font-size: 0.875rem;
}

.list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

/* Puces carrées */
.list li {
  position: relative;
  padding-left: 22px;
}

.list li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 8px;
  height: 8px;
  background: var(--gold);
}

.list b {
  color: var(--ink);
}

/* FAQ */
.faq-intro,
.lead {
  margin: -12px 0 24px;
  color: var(--muted);
}

.faq {
  display: grid;
  gap: 8px;
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  color: var(--link);
  font: 700 1.25rem/1.2 var(--mono);
}

.faq details[open] summary::after {
  content: '−';
}

.faq p {
  padding: 0 20px 18px;
}

/* Appel vers le guide, sous les étapes */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 16px;
  padding: 20px 24px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
}

.cta p {
  font-weight: 700;
  font-size: 1.1875rem;
}

/* Lien vers le guide en bas d'une carte */
.card .more {
  margin-top: auto;
  font-weight: 600;
}

/* Guide */
.toc ol {
  margin-top: 28px;
}

.lead {
  max-width: 70ch;
}

.steps + .cards {
  margin-top: 16px;
}

.note {
  margin-top: 16px;
  padding: 10px 14px;
  border-left: 4px solid var(--gold);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Tableaux des touches : action à gauche, touche à droite */
.keys {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.keys th,
.keys td {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.keys tr:first-child > * {
  border-top: 0;
}

.keys th {
  padding-right: 16px;
  color: var(--muted);
  font-weight: 400;
  text-align: left;
}

.keys td {
  text-align: right;
  white-space: nowrap;
}

.qwerty {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* Pied de page */
.footer {
  padding-block: 40px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 0.9375rem;
}

.footer-body {
  display: grid;
  gap: 8px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
}

.footer-legal {
  font-size: 0.8125rem;
}

/* Tablette */
@media (min-width: 640px) {
  .wrap {
    padding-inline: 32px;
  }

  .cards {
    grid-template-columns: 1fr 1fr;
  }

  .card-address {
    grid-column: 1 / -1;
  }
}

/* Ordinateur */
@media (min-width: 960px) {
  .hero-body {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-top: 32px;
  }

  .hero-art {
    order: 1;
    display: grid;
    justify-items: center;
    gap: 28px;
    margin-right: 32px;
  }

  .hero-logo {
    width: 280px;
    height: 280px;
    animation: flotte 6s ease-in-out infinite;
  }

  /* Ombre au sol du cube */
  .hero-art::after {
    content: '';
    width: 180px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    animation: ombre 6s ease-in-out infinite;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .map {
    aspect-ratio: auto;
    height: 520px;
  }

  .cards {
    grid-template-columns: repeat(6, 1fr);
  }

  .card {
    grid-column: span 2;
  }

  .card-half {
    grid-column: span 3;
  }

  .section-faq {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
    gap: 32px;
  }
}

@keyframes flotte {
  50% {
    transform: translateY(-12px);
  }
}

@keyframes ombre {
  50% {
    transform: scaleX(0.85);
    opacity: 0.6;
  }
}

/* Mouvements réduits */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
  }
}