/* Le site de FOOTSTREET (étape 9.3) : présentation, aide, confidentialité. Les couleurs et les polices du jeu : le goudron,
   la craie, le jaune de bombe, le rose des tags ; le tag en Rubik Spray Paint, les titres en Anton, les étiquettes au
   pochoir. Les polices sont servies par le site (Tools/site.py), pas par Google Fonts. */
@font-face { font-family: "Tag"; src: url("polices/tag.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Anton"; src: url("polices/anton.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Barlow"; src: url("polices/barlow.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pochoir"; src: url("polices/pochoir.woff") format("woff"); font-display: swap; }

:root {
  color-scheme: dark;
  --goudron: #19191d;
  --goudron-clair: #232328;
  --dalle: #26262c;
  --bord: rgba(237, 232, 224, 0.10);
  --craie: #ede8e0;
  --doux: #b3aea6;
  --encre: #0d0d0f;
  --jaune: #ffd11f;
  --rose: #ff4fa0;
  --bleu: #3ea6ff;
  --rouge: #ff5a4a;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--craie);
  background-color: var(--goudron);
  /* Le goudron : deux taches de lumière de lampadaire sur le noir. */
  background-image:
    radial-gradient(ellipse 80% 50% at 15% -10%, rgba(255, 209, 31, 0.10), transparent 70%),
    radial-gradient(ellipse 70% 45% at 95% 30%, rgba(255, 79, 160, 0.07), transparent 70%);
  background-attachment: fixed;
}

a { color: var(--jaune); text-underline-offset: 3px; }
a:hover { color: #fff; }

/* L'en-tête : le tag du jeu, la phrase, les trois pages. */
header {
  text-align: center;
  padding: 44px 16px 8px;
}

.tag {
  display: inline-block;
  margin: 0;
  font-family: "Tag", "Anton", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--jaune);
  text-shadow: 0 3px 0 var(--encre), 0 6px 0 rgba(255, 79, 160, 0.55), 0 10px 24px rgba(0, 0, 0, 0.6);
  transform: rotate(-3deg);
}

.tag a { color: inherit; text-decoration: none; }

.accroche {
  margin: 14px auto 0;
  max-width: 46ch;
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--craie);
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 22px 0 10px;
}

nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-family: "Pochoir", "Anton", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--craie);
  background: var(--goudron-clair);
  border: 1px solid var(--bord);
  border-radius: 4px;
}

nav a:hover { color: var(--jaune); }
nav a[aria-current="page"] { color: var(--encre); background: var(--jaune); border-color: var(--jaune); }

main {
  max-width: 880px;
  margin: 0 auto 40px;
  padding: 0 16px;
}

/* Les dalles de béton (les écrans du menu du jeu). */
.dalle {
  background: var(--dalle);
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 22px clamp(16px, 4vw, 34px);
  margin: 18px 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

h2 {
  margin: 0 0 10px;
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Le trait de bombe jaune sous les titres. */
h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 6px;
  background: var(--jaune);
  border-radius: 3px;
  transform: rotate(-1.5deg);
}

h3 {
  margin: 20px 0 4px;
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  color: var(--jaune);
}

p, li { margin: 0 0 10px; }
ul { padding-left: 1.2em; margin: 0 0 10px; }
strong { color: #fff; }
.doux { color: var(--doux); font-size: 0.95rem; }

/* La présentation : l'icône et la phrase d'accueil côte à côte. */
.intro {
  display: flex;
  gap: 22px;
  align-items: center;
}

.intro img {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  border-radius: 25px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}

.intro p { margin: 0; font-size: 1.12rem; }

.bientot {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  font-family: "Pochoir", "Anton", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre);
  background: var(--jaune);
  border-radius: 4px;
}

/* Les captures du jeu, scotchées. */
figure { margin: 18px 0; }

figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--bord);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

figcaption {
  margin-top: 8px;
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 700;
  color: var(--doux);
  text-align: center;
}

.deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.deux figure { margin: 0; }

/* Les modes de jeu et les commandes : des étiquettes au pochoir. */
.cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}

.cases li {
  margin: 0;
  padding: 14px;
  background: var(--goudron-clair);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--jaune);
  border-radius: 4px;
}

.cases li:nth-child(2n) { border-left-color: var(--rose); }

.cases strong {
  display: block;
  margin-bottom: 4px;
  font-family: "Pochoir", "Anton", sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--craie);
}

/* La confidentialité : le tableau des données. */
table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--bord); vertical-align: top; }
th {
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jaune);
}

.contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--encre);
  background: var(--jaune);
  border-radius: 4px;
}

.contact:hover { color: var(--encre); background: #fff; }

footer {
  text-align: center;
  color: var(--doux);
  font-size: 0.92rem;
  padding: 0 16px 36px;
}

footer a { color: var(--doux); }

@media (max-width: 560px) {
  .intro { flex-direction: column; text-align: center; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  td { border: none; padding: 3px 0; }
  td:first-child { color: #fff; }
  tr { border-bottom: 1px solid var(--bord); padding: 10px 0; }
}