/* FALLENDED — site statique.
   Aucune dépendance, aucun build. Les couleurs d'équipe sont celles du jeu (D8),
   et la typographie reprend l'identité de l'interface : capitales + interlettrage,
   parce qu'il n'y a aucune police embarquée dans le projet. */

:root {
  --red:      #b02e26;
  --red-lite: #ff6a5c;   /* le rouge d'equipe est trop sombre pour du texte sur une photo */
  --blue:   #3ab3da;
  --yellow: #fed83d;
  --white:  #f9fffe;

  --ink:    #05070a;
  --ink-2:  #0b0f15;
  --ink-3:  #121824;
  --line:   #1d2634;
  --text:   #c9d4e2;
  --dim:    #7b8899;

  --max:    1180px;
  --sans:   system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:   ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- the game's own voice: caps + tracking ------------------------------- */

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 18px;
}

h1, h2, h3 { text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.05; margin: 0; }

h2 { font-size: clamp(30px, 5vw, 54px); color: var(--white); }
h3 { font-size: 19px; letter-spacing: 0.16em; color: var(--white); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

section { position: relative; }

.lede { font-size: clamp(18px, 2.2vw, 22px); color: #a9b7c8; max-width: 62ch; }

/* --- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
}

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,7,10,.55) 0%, rgba(5,7,10,0) 32%),
    linear-gradient(0deg, var(--ink) 2%, rgba(5,7,10,.72) 30%, rgba(5,7,10,0) 62%);
}

.hero .wrap { position: relative; z-index: 2; width: 100%; padding-bottom: 8vh; }

.title {
  font-size: clamp(56px, 13vw, 176px);
  letter-spacing: 0.02em;
  color: var(--white);
  text-transform: uppercase;
  line-height: 0.88;
  margin: 0 0 6px;
  text-shadow: 0 6px 40px rgba(0,0,0,.65);
}

.kingdoms { display: flex; gap: 6px; margin: 0 0 26px; }
.kingdoms span { width: 58px; height: 7px; }
.kingdoms .k1 { background: var(--red); }
.kingdoms .k2 { background: var(--blue); }
.kingdoms .k3 { background: var(--yellow); }
.kingdoms .k4 { background: var(--white); }

.tagline {
  font-size: clamp(19px, 2.6vw, 27px);
  color: #dbe5f0;
  max-width: 30ch;
  margin: 0 0 30px;
  text-shadow: 0 2px 20px rgba(0,0,0,.8);
}

/* --- the clock strip ------------------------------------------------------ */

.clock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.clock div {
  padding: 22px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(11,15,21,.72);
  backdrop-filter: blur(3px);
}

.clock b { display: block; color: var(--white); font-size: 13px; letter-spacing: 0.2em; }
.clock small { color: var(--dim); font-size: 13px; }

/* --- generic band --------------------------------------------------------- */

.band { padding: clamp(70px, 11vw, 140px) 0; }
.band + .band { border-top: 1px solid var(--line); }

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

/* --- full-bleed plate ----------------------------------------------------- */

.plate { position: relative; overflow: hidden; }
.plate img { width: 100%; height: clamp(360px, 62vh, 760px); object-fit: cover; }

.plate .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 24px;
  background: linear-gradient(0deg, rgba(5,7,10,.94), rgba(5,7,10,0));
}

.plate .cap .wrap { padding: 0 24px; }

/* --- triptych ------------------------------------------------------------- */

.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.strip figure { margin: 0; position: relative; }
.strip img { width: 100%; height: clamp(200px, 30vw, 420px); object-fit: cover; }

.strip figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 16px 16px 14px;
  background: linear-gradient(0deg, rgba(5,7,10,.92), rgba(5,7,10,0));
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white);
}

@media (max-width: 720px) { .strip { grid-template-columns: 1fr; } }

/* --- figures -------------------------------------------------------------- */

figure.solo { margin: 0; }
figure.solo img { width: 100%; border: 1px solid var(--line); }
figure.solo figcaption { color: var(--dim); font-size: 14px; padding-top: 12px; }

/* --- numbers -------------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 46px;
}

.figures div { background: var(--ink-2); padding: 26px 22px; }
.figures b { display: block; font-family: var(--mono); font-size: 34px; color: var(--yellow); line-height: 1; }
.figures small { display: block; margin-top: 10px; color: var(--dim); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }

/* --- download ------------------------------------------------------------- */

.get { text-align: center; }

.btn {
  display: inline-block;
  margin-top: 30px;
  padding: 19px 44px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 0;
}

.btn:hover { background: var(--white); text-decoration: none; }

.note {
  margin-top: 26px;
  color: var(--dim);
  font-size: 14px;
  font-family: var(--mono);
}

footer {
  border-top: 1px solid var(--line);
  padding: 46px 0 70px;
  color: var(--dim);
  font-size: 14px;
}

footer p { margin: 0 0 8px; max-width: 74ch; }


/* --- figure pleine largeur, legende dans la colonne ----------------------- */

figure.solo.wide { width: 100%; }
figure.solo.wide img { border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
figure.solo.wide figcaption { padding-top: 16px; max-width: 74ch; }
figure.solo.wide strong { color: var(--white); }

figure.solo strong { color: var(--white); }

.figures { margin-top: 70px; }