/* =========================================================
   RESET
   ========================================================= */
* {
  margin: 0;
  box-sizing: border-box;
}

/* =========================================================
   VARIABLES UTILISÉES
   ========================================================= */
:root {
  --txt: #e8ecff;
  --neon: #00fff0;
  --beton-1: #2f3033;
  --beton-2: #3a3b3f;
}

/* =========================================================
   BODY — FOND GRIS BÉTON
   ========================================================= */
body {
  color: var(--txt);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;

  background:
    radial-gradient(800px 420px at 20% 15%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(700px 380px at 80% 25%, rgba(0,0,0,0.20), transparent 60%),
    linear-gradient(180deg, var(--beton-2), var(--beton-1));

  min-height: 100vh;
}

/* =========================================================
   TITRE DE PAGE (div.titre_page)
   ========================================================= */
.titre_page {
  max-width: 960px;
  margin: 40px auto 0;
  padding: 16px 18px;

  text-align: center;
  border-radius: 16px;
  color: #fff;

  box-shadow:
    0 0 0 3px var(--neon),
    0 0 18px 4px rgba(0,255,240,0.55);

  font-family: "Lucida Console", Monaco, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* =========================================================
   ZONE CONTENUE (div.wrap)
   ========================================================= */
.wrap {
  max-width: 960px;
  margin: 24px auto 0;
  padding: 16px;
}

/* =========================================================
   GRILLE DES BOUTONS (div.btns)
   ========================================================= */
.btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Écran étroit */
@media (max-width: 640px) {
  .btns {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   BOUTONS MÉTAL (a.metal-btn)
   ========================================================= */
.metal-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 72px;
  border-radius: 14px;

  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #101114;

  border: 1px solid rgba(0,0,0,0.35);

  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0) 28%),
    linear-gradient(0deg, rgba(0,0,0,0.22), rgba(0,0,0,0) 32%),
    linear-gradient(180deg, #f7f7f7 0%, #dcdcdc 40%, #bdbdbd 70%, #9a9a9a 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    inset 0 -2px 3px rgba(0,0,0,0.20),
    0 10px 18px rgba(0,0,0,0.35);

  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.metal-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.metal-btn:active {
  transform: translateY(0);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.28),
    inset 0 -1px 0 rgba(255,255,255,0.55),
    0 4px 10px rgba(0,0,0,0.30);
  filter: brightness(0.98);
}

.metal-btn:focus-visible {
  outline: 3px solid rgba(0,255,240,0.70);
  outline-offset: 4px;
}

/* =========================================================
   FOOTER LINK
   ========================================================= */
.footer-link {
  color: var(--txt);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,255,240,0.35);
}

.footer-link:hover {
  border-bottom-color: rgba(0,255,240,0.70);
}