:root {
  --sky: #8FD3FF;
  --ink: #13294B;
  --cloud: #FFFFFF;
  --grass: #5DAA3C;
  --dirt: #6B4426;
  --dirt-line: #5A381E;
  --stone: #565C66;
  --bedrock: #26272B;
  --gold: #FFC93C;
  --cream: #FFF6E5;
  --pixel: "Pixelify Sans", system-ui, sans-serif;
  --body: "Bricolage Grotesque", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
}

* { box-sizing: border-box; margin: 0; }
body { font: 400 1.125rem/1.6 var(--body); color: var(--ink); background: var(--bedrock); }
a { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* En-tête */
.top {
  position: absolute; inset: 0 0 auto; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px var(--gutter);
}
.wordmark { font: 700 1.5rem var(--pixel); text-decoration: none; }
.top nav { display: flex; gap: clamp(16px, 3vw, 32px); }
.top nav a { font-weight: 600; text-decoration: none; }
.top nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Ciel */
.sky {
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center; gap: 24px;
  padding: 96px var(--gutter) 48px;
  background: var(--sky);
}
.intro h1 {
  font: 700 clamp(3.5rem, 10vw, 7rem)/0.95 var(--pixel);
  color: var(--cloud);
  text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 rgba(19, 41, 75, .2);
  margin-bottom: 24px;
}
.intro p { font-size: 1.25rem; max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
#islands { display: block; width: 100%; height: min(70vh, 560px); }

/* Boutons en bloc */
.btn {
  display: inline-block;
  padding: 14px 22px;
  font: 700 1.05rem var(--body);
  color: var(--ink); text-decoration: none;
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .18), 4px 4px 0 var(--ink);
}
.btn:hover { background: #FFD866; }
.btn:active { transform: translate(4px, 4px); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .18); }
.btn.alt { background: var(--cloud); }
.btn.alt:hover { background: #EAF6FF; }

/* Couches */
.layer { position: relative; padding: 88px var(--gutter) 96px; }
.layer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px;
  background-repeat: repeat-x;
}
.wrap { max-width: 1040px; margin: 0 auto; }
h2 { font: 700 clamp(2rem, 5vw, 3rem)/1.1 var(--pixel); margin-bottom: 12px; }

.dirt { background: var(--dirt); color: var(--cream); border-top: 16px solid var(--grass); }
.dirt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' fill='%235DAA3C'%3E%3Crect width='8' height='8'/%3E%3Crect x='16' width='16' height='8'/%3E%3Crect x='24' width='8' height='16'/%3E%3Crect x='40' width='8' height='12'/%3E%3Crect x='56' width='8' height='4'/%3E%3C/svg%3E"); }
.sub { max-width: 60ch; margin-bottom: 40px; opacity: .85; }

.servers { list-style: none; padding: 0; }
.servers li {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 16px 32px;
  padding: 28px 16px;
  border-top: 4px solid var(--dirt-line);
  scroll-margin-top: 24px;
}
.servers li:last-child { border-bottom: 4px solid var(--dirt-line); }
.servers li:target { background: rgba(255, 201, 60, .1); }
.servers h3 { font: 700 1.75rem var(--pixel); }
.servers li p { max-width: 52ch; opacity: .9; }

.state { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.state::before { content: ""; width: 12px; height: 12px; background: currentColor; }
.state.soon { color: var(--gold); }


.stone { background: var(--stone); color: #F4F5F7; }
.stone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' fill='%236B4426'%3E%3Crect width='16' height='8'/%3E%3Crect x='8' width='8' height='12'/%3E%3Crect x='32' width='8' height='8'/%3E%3Crect x='48' width='16' height='4'/%3E%3Crect x='56' width='8' height='12'/%3E%3C/svg%3E"); }


.bedrock { padding-top: 48px; padding-bottom: 48px; color: #B9BCC4; font-size: .9rem; }
.bedrock::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' fill='%23565C66'%3E%3Crect width='8' height='12'/%3E%3Crect x='8' width='16' height='4'/%3E%3Crect x='32' width='16' height='8'/%3E%3Crect x='40' width='8' height='16'/%3E%3C/svg%3E"); }

@media (max-width: 800px) {
  .sky { grid-template-columns: 1fr; min-height: auto; padding-top: 88px; }
  #islands { height: 400px; }
  .servers li { grid-template-columns: 1fr; padding-inline: 0; }
}

.servers li p.tech { margin-top: 8px; font-size: .95rem; font-weight: 600; color: var(--gold); opacity: 1; }