/* Charte de Très Gros Cubes, aux couleurs de Telecom Gaming Club : noir, orange lumineux, blanc
   cassé ; mêmes valeurs dans le site, le launcher et les pages du serveur d'auth */
:root {
  color-scheme: dark;
  --bg: #0b0b0e;
  --bg-alt: #121216;
  --surface: #18181d;
  --surface-2: #222229;
  --line: #2e2e37;
  --ink: #f1eee8;
  --muted: #aaa6ae;
  --accent: #ff8c00;
  --accent-hover: #ffa940;
  --accent-shade: #b35f00;
  --on-accent: #140a00;
  --ok: #5dd879;
  --off: #ff6b5e;
  --glow: 0 0 24px rgb(255 140 0 / 0.35);
  --font-display: 'Orbitron', 'Arial Black', system-ui, sans-serif;
  --font-text: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --radius: 4px;
}

/* Police des titres : Orbitron (licence OFL, assets/fonts/OFL.txt) */
@font-face {
  font-family: 'Orbitron';
  src: url('assets/fonts/orbitron.woff') format('woff');
  font-weight: 400 900;
  font-display: swap;
}

/* 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(--font-text);
  -webkit-text-size-adjust: 100%;
}

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

p {
  margin: 0;
}

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

a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

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

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

code {
  color: var(--ink);
}

kbd {
  display: inline-block;
  min-width: 1.8em;
  padding: 0 0.4em;
  border: 1px solid var(--line);
  border-bottom: 3px solid #000;
  border-radius: 3px;
  background: var(--surface-2);
  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(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.skip:focus {
  top: 16px;
}

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

.button:hover,
.download-main a:hover {
  background: var(--accent-hover);
  box-shadow:
    inset 0 -4px 0 var(--accent-shade),
    var(--glow);
  color: var(--on-accent);
}

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

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

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

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

.button-ghost:active {
  padding-block: 10px 13px;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* En-tête : fond quadrillé, halo orange derrière l'emblème */
.hero {
  position: relative;
  padding-bottom: 64px;
  border-bottom: 2px solid var(--accent);
  background:
    radial-gradient(circle at 78% 45%, rgb(255 140 0 / 0.16), transparent 42%),
    linear-gradient(rgb(255 255 255 / 0.025) 2px, transparent 2px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgb(255 255 255 / 0.025) 2px, transparent 2px) 0 0 / 40px 40px,
    var(--bg-alt);
  box-shadow: 0 2px 18px rgb(255 140 0 / 0.3);
}

/* Créneaux posés sur la ligne orange du bas */
.hero::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--accent) 0 24px, transparent 24px) 0 0 / 48px 8px repeat-x;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

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

/* Sur mobile, menu sur toute la largeur sous le logo */
.topbar .nav {
  width: 100%;
  justify-content: space-between;
  padding-block: 0;
}

.nav a {
  padding: 4px 2px;
  color: var(--ink);
  font: 600 0.75rem/1.4 var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav a:hover {
  color: var(--accent);
}

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

.hero-logo {
  display: block;
  width: 112px;
  height: 112px;
}

h1 {
  font: 900 clamp(2.25rem, 9vw, 4rem) / 1.1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

h1 .accent {
  color: var(--accent);
  text-shadow: 0 0 22px rgb(255 140 0 / 0.45);
}

/* Logotype TRÈS GROS CUBES en guise de titre */
.wordmark {
  display: block;
  width: min(100%, 520px);
  height: auto;
}

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

/* Badge de l'état du serveur */
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: 600 0.75rem/1.6 var(--font-display);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

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

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

[data-map='up'] .status-dot {
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  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(--ok) 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: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

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

/* Liens de téléchargement fermés avant l'ouverture (app.js) */
.download a[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.download-list a[aria-disabled='true']:hover {
  border-color: var(--line);
}

.download-main a[aria-disabled='true']:is(:hover, :active) {
  padding-block: 15px 19px;
  background: var(--accent);
  box-shadow: inset 0 -4px 0 var(--accent-shade);
}

.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: 800 clamp(1.375rem, 5vw, 2rem) / 1.2 var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Créneaux orange devant les titres */
h2::before {
  content: '';
  flex: none;
  width: 0.9em;
  height: 0.6em;
  background: var(--accent);
  clip-path: polygon(
    0 0,
    20% 0,
    20% 40%,
    40% 40%,
    40% 0,
    60% 0,
    60% 40%,
    80% 40%,
    80% 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

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 {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Coin orange en haut à gauche des encadrés */
.step::after,
.card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  border-top-left-radius: var(--radius);
  pointer-events: none;
}

.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(--accent);
  box-shadow: var(--glow);
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
  color: var(--on-accent);
  font: 900 1.25rem/1 var(--font-display);
}

.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-left: 2px solid var(--line);
  background: var(--bg-alt);
  color: var(--muted);
}

.tips b {
  display: block;
  color: var(--accent);
  font: 700 0.6875rem/1.8 var(--font-display);
  letter-spacing: 0.1em;
  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: var(--surface);
}

.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: 1px solid var(--accent);
  border-radius: var(--radius);
  background: rgb(11 11 14 / 0.88);
  color: var(--ink);
  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: 140px 24px 24px;
  background: var(--surface) url('assets/logo.svg') no-repeat center calc(50% - 44px) / 112px;
  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(--accent-shade);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.0625rem;
  overflow-wrap: anywhere;
}

.copy-status {
  color: var(--accent);
  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 orange */
.list li {
  position: relative;
  padding-left: 22px;
}

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

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

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

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

.faq details[open] {
  border-color: var(--accent-shade);
}

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

.faq summary:hover {
  color: var(--accent);
}

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

.faq summary::after {
  content: '+';
  color: var(--accent);
  font: 700 1.25rem/1.2 var(--font-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(--accent-shade);
  border-radius: var(--radius);
  background: rgb(255 140 0 / 0.05);
}

.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 */
.hero-guide {
  padding-bottom: 48px;
}

.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(--accent);
  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 : organisateur (TGC) puis mentions */
.footer {
  padding-block: 40px;
  border-top: 2px solid var(--accent);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 0.9375rem;
}

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

.org {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.org img {
  flex: none;
}

.org-label {
  display: block;
  color: var(--accent);
  font: 700 0.6875rem/1.8 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.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;
  }

  .nav {
    column-gap: 22px;
  }

  .topbar .nav {
    width: auto;
  }

  .nav a {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
  }

  .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: 24px;
  }

  .hero-art {
    order: 1;
    margin-right: 24px;
  }

  .hero-logo {
    width: 300px;
    height: 300px;
    animation: flotte 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);
  }
}

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

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