/* Nimoria · page de choix des serveurs (nimoria.fr/serveurs/)
   Deux panneaux plein cadre, comme deux portes. Le monde choisi s'éclaire,
   l'autre s'efface. Polices du site, servies en local. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/site/polices/big-shoulders-display-var.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/site/polices/public-sans-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --goudron: #14120f;
  --beton: #232019;
  --os: #ece4d2;
  --sang: #8c1410;
  --sang-vif: #c0201a;
  --rubalise: #f2c21b;
  --bleu-ville: #4b7ea8;
  --trait: rgba(236, 228, 210, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

body {
  margin: 0;
  background: var(--goudron);
  color: var(--os);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--rubalise); color: var(--goudron); padding: .6rem 1rem; }
:focus-visible { outline: 3px solid var(--rubalise); outline-offset: 3px; }

/* -------------------------------------------------------------- en-tête --- */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--trait);
}
.retour { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; letter-spacing: .02em; }
.retour img { width: 26px; height: 26px; }
.retour:hover { color: var(--rubalise); }
.entete-note { margin: 0; color: rgba(236, 228, 210, 0.6); font-size: .92rem; }

main { flex: 1; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) 2rem; max-width: 96rem; margin: 0 auto; width: 100%; }

.titre-page {
  font-family: "Big Shoulders Display", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: .95;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: .01em;
}

/* --------------------------------------------------------------- choix --- */
.choix { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.monde a {
  position: relative; display: block; height: 100%; min-height: 26rem;
  text-decoration: none; overflow: hidden;
  border: 2px solid var(--trait);
  background: var(--beton);
  transition: border-color .25s ease, transform .25s ease;
}
.monde-image { position: absolute; inset: 0; }
.monde-image img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.55) contrast(1.05) brightness(.62);
  transition: filter .5s ease, transform .6s ease;
}
.monde a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.15) 0%, rgba(20, 18, 15, 0.82) 62%, rgba(20, 18, 15, 0.97) 100%);
}
.monde-texte { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 26rem; padding: clamp(1.25rem, 3vw, 2.25rem); gap: .7rem; }

.monde-nom {
  font-family: "Big Shoulders Display", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: .9;
}
.monde-nom em { display: block; font-style: normal; font-weight: 900; }
.monde-apocalypse .monde-nom em { color: var(--sang-vif); text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.monde-rp .monde-nom em { color: var(--bleu-ville); }

.monde-phrase { max-width: 42ch; color: rgba(236, 228, 210, 0.82); }
.monde-faits { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .84rem; }
.monde-faits span { border: 1px solid var(--trait); padding: .18rem .6rem; color: rgba(236, 228, 210, 0.75); }
.monde-etat { border-color: rgba(127, 166, 80, .5) !important; color: #a7d07c !important; }
.monde-etat-repos { border-color: rgba(75, 126, 168, .5) !important; color: #9dc4e0 !important; }
.monde-etat[data-hors] { border-color: rgba(192, 32, 26, .5) !important; color: #e08b86 !important; }

.monde-action {
  align-self: flex-start; margin-top: .4rem;
  font-family: "Big Shoulders Display", system-ui, sans-serif;
  font-weight: 700; font-size: 1.35rem; letter-spacing: .03em;
  padding: .45rem 1.1rem;
  background: var(--rubalise); color: var(--goudron);
  transition: background .2s ease;
}
.monde-rp .monde-action { background: var(--os); }

/* survol : le monde se réveille, l'autre s'éteint */
@media (hover: hover) {
  .monde a:hover .monde-image img, .monde a:focus-visible .monde-image img { filter: grayscale(0) contrast(1.08) brightness(.78); transform: scale(1.04); }
  .choix:hover .monde a:not(:hover) .monde-image img { filter: grayscale(.8) brightness(.45); }
  .monde a:hover { border-color: rgba(236, 228, 210, .45); }
  .monde-apocalypse a:hover .monde-action { background: var(--sang-vif); color: var(--os); }
  .monde-rp a:hover .monde-action { background: var(--bleu-ville); color: var(--os); }
}
/* clic : brève pulsation, puis la page suivante s'ouvre */
.monde a:active { transform: scale(.995); }

.bas-page { margin: 2.5rem 0 0; color: rgba(236, 228, 210, 0.5); font-size: .92rem; }

.pied { border-top: 1px solid var(--trait); padding: 1.2rem clamp(1rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; color: rgba(236, 228, 210, 0.45); font-size: .85rem; }
.pied p { margin: 0; max-width: 60ch; }