/* ==========================================================================
   Blocs de page AURA
   --------------------------------------------------------------------------
   Navigation, hero, cartes serveur, esport, galerie, news, wiki, pied de page.

   La navigation mobile n'existe pas dans les templates : leur barre se contente
   d'un flex-wrap, illisible sous 700 px. Elle est construite ici.
   ========================================================================== */

/* ==========================================================================
   1. Navigation
   ========================================================================== */

/* La barre reste en haut de l'écran au défilement.
   En position fixe plutôt que sticky : body porte overflow-x: hidden, ce qui
   en fait un conteneur de défilement et casse sticky sur plusieurs
   navigateurs. */
.nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--nav-h);
}

/* Fond posé dès qu'on quitte le haut de la page : sans lui, les liens
   passeraient par-dessus le contenu et deviendraient illisibles.

   Seul un hero plein écran justifie une barre transparente au repos. Les
   autres pages commencent sous la barre, pas derrière : elle y est opaque
   dès le chargement, sans attendre le premier défilement. */
.nav--solid,
.nav:not(.nav--overlay) {
  background: rgba(12, 12, 12, 0.92);
  border-bottom-color: var(--line);
}

@supports (backdrop-filter: blur(1px)) {
  .nav--solid,
  .nav:not(.nav--overlay) {
    background: rgba(12, 12, 12, 0.72);
    backdrop-filter: blur(14px);
  }
}

/* Les pages sans hero commencent directement par du contenu : il faut
   réserver la place de la barre, qui ne prend plus de hauteur dans le flux. */
.nav-spacer {
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

/* Le losange, logo d'AURA. */
.nav__mark {
  width: 0.875rem;
  height: 0.875rem;
  background: var(--acc);
  transform: rotate(45deg);
  flex: none;
}

.nav__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.875rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

.nav__links a {
  padding-block: var(--sp-3);
}

.nav__links a[aria-current="page"] {
  color: var(--acc);
}

.nav__cta {
  background: var(--acc);
  color: var(--ink);
  padding: var(--sp-3) var(--sp-5);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.nav__cta:hover {
  color: var(--ink);
  filter: brightness(1.12);
}

/* Bouton d'ouverture du menu, masqué dès qu'il y a la place pour les liens. */
.nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-right: calc(-1 * var(--sp-2));
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}

@media (min-width: 62rem) {
  .nav__links  { display: flex; }
  .nav__burger { display: none; }
}

/* ---- Panneau mobile ------------------------------------------------------ */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu[hidden] {
  display: none;
}

.menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--gutter-sm);
  border-bottom: 1px solid var(--line);
}

.menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}

.menu__body {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--gutter-sm) var(--sp-12);
  gap: var(--sp-1);
}

.menu__group {
  padding: var(--sp-6) 0 var(--sp-2);
  font-size: var(--t-3xs);
  font-weight: 800;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted-2);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 3.25rem;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  text-transform: uppercase;
  line-height: 1;
}

.menu__item[aria-current="page"] {
  color: var(--acc);
}

.menu__foot {
  margin-top: auto;
  padding: var(--sp-6) var(--gutter-sm) var(--sp-10);
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(55rem, 100svh);
  overflow: hidden;
}

/* Hero de l'accueil : exactement l'écran moins le bandeau défilant, pour que
   celui-ci tombe pile en bas du premier écran. Le plancher de 30rem évite que
   le contenu se tasse sur un téléphone en paysage ; le bandeau passe alors
   sous la ligne de flottaison, ce qui est préférable à un hero illisible. */
.hero--full {
  min-height: max(30rem, calc(100svh - var(--ticker-h)));
}

.hero--compact {
  min-height: min(34rem, 80svh);
}

.hero__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-6);
  /* La barre étant en position fixe, le contenu doit lui réserver sa place
     en haut : sans ça, un hero court passerait dessous. */
  padding-top: calc(var(--nav-h) + var(--sp-6));
  padding-bottom: var(--sp-10);
}

.hero__title {
  /* Le point final est coloré en accent dans le template. */
  margin: 0;
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-8);
}

.hero__lede {
  max-width: 32.5rem;
  font-size: var(--t-xl);
  line-height: var(--lh-normal);
  font-weight: 500;
  color: var(--text-2);
}

/* ==========================================================================
   3. Cartes serveur
   ========================================================================== */

.srv-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.srv-card {
  position: relative;
  flex: 1 1 32.5rem;
  min-width: 0;
  min-height: 26rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: var(--sp-8);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--surface-2);
}

@media (min-width: 48rem) {
  .srv-card { min-height: 42.5rem; }
}

.srv-card__top,
.srv-card__body {
  position: relative;
  z-index: 2;
}

.srv-card__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}

.srv-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.srv-card__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 7vw, 7rem);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.srv-card__text {
  max-width: 27.5rem;
  font-size: var(--t-md);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.srv-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-weight: 800;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

/* ---- Bloc de mise en avant d'un serveur -------------------------------- */

.focus {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16);
  align-items: center;
}

.focus__text {
  flex: 1 1 26rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.focus__media {
  flex: 1 1 32.5rem;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.focus__media > :first-child {
  grid-column: span 2;
}

.focus__media figure,
.focus__media div {
  margin: 0;
  height: 16rem;
  overflow: hidden;
}

.focus__media > :first-child {
  height: 21rem;
}

.focus__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Liste numérotée des points forts. */
.steps {
  display: flex;
  flex-direction: column;
}

.steps li {
  display: flex;
  gap: var(--sp-6);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
}

.steps li:last-child {
  border-bottom: 1px solid var(--line);
}

.steps__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--d-sm);
  color: var(--acc);
  flex: none;
}

.steps__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.steps__body strong { font-size: var(--t-lg); }

.steps__body span {
  color: var(--muted);
  font-size: var(--t-sm);
}

/* Bandeau sombre sur visuel, pour le focus Minecraft. */
.band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40rem;
  overflow: hidden;
}

.band__body {
  position: relative;
  z-index: 2;
  max-width: 35rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: var(--sp-16);
}

/* Adresse de connexion, en monospace discret. */
.addr {
  font-size: var(--t-xs);
  font-weight: 600;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  color: var(--muted);
  word-break: break-all;
}

.addr--solid {
  border: 0;
  background: rgba(12, 12, 12, 0.8);
  color: var(--text-2);
}

/* ==========================================================================
   4. Esport
   ========================================================================== */

.esport-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 30rem;
  overflow: hidden;
}

@media (min-width: 48rem) {
  .esport-hero { min-height: 45rem; }
}

.esport-hero__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-6);
  padding-bottom: var(--sp-12);
}

.esport-hero__text {
  max-width: 24rem;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--text-2);
}

.team-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.team-card {
  flex: 1 1 18.75rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
}

.team-card__media {
  position: relative;
  height: 16.25rem;
  overflow: hidden;
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__tag {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  background: var(--acc);
  color: var(--ink);
  font-size: var(--t-3xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-3);
}

.team-card__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

/* Carte de recrutement, en pleine couleur d'accent. */
.recruit {
  flex: 1 1 18.75rem;
  min-width: 0;
  min-height: 22.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: var(--sp-8);
  box-sizing: border-box;
  background: var(--acc);
  color: var(--ink);
}

.recruit:hover { color: var(--ink); }

.recruit__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  border-top: 2px solid var(--ink);
  padding-top: var(--sp-4);
  font-weight: 800;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

/* ---- Tableau des matchs ------------------------------------------------- */

.matches {
  overflow-x: auto;
}

.matches__table {
  min-width: 47.5rem;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--text);
}

.match {
  display: grid;
  grid-template-columns: 8.75rem minmax(0, 1fr) 13.75rem 8.75rem;
  align-items: center;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.match__when {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.match__date {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.25rem;
  line-height: 1;
}

.match__time {
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--muted);
}

.match__teams {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  text-transform: uppercase;
}

.match__meta {
  font-size: var(--t-xs);
  color: var(--muted);
}

/* ---- Valeurs ------------------------------------------------------------ */

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--sp-4);
}

.value {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--line);
}

.value__icon {
  font-size: 1.75rem;
  color: var(--acc);
}

/* ==========================================================================
   5. Galerie
   ========================================================================== */

.shot {
  margin: 0;
  flex: 0 0 auto;
  width: min(35rem, 85vw);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.shot--narrow {
  width: min(23.75rem, 85vw);
}

.shot__media {
  height: 15rem;
  overflow: hidden;
}

@media (min-width: 48rem) {
  .shot__media { height: 23.75rem; }
}

.shot__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==========================================================================
   6. News
   ========================================================================== */

.news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-6);
}

.news-grid__main { flex: 2 1 32.5rem; min-width: 0; }

.news-grid__side {
  flex: 1 1 20rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.news-card__media {
  height: 14rem;
  overflow: hidden;
}

.news-card--lead .news-card__media { height: 26.25rem; }
.news-card--small .news-card__media { height: 11.875rem; }

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__meta {
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.news-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 0.95;
  text-transform: uppercase;
}

.news-card--lead .news-card__title { font-size: clamp(2rem, 4vw, 2.75rem); }
.news-card--small .news-card__title { font-weight: 800; font-size: 1.5rem; }

/* ==========================================================================
   7. Wiki
   ========================================================================== */

.wiki-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}

@media (min-width: 64rem) {
  .wiki-layout {
    grid-template-columns: 15rem minmax(0, 1fr) 13rem;
    gap: var(--sp-10);
  }
}

.wiki-side,
.wiki-toc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

@media (min-width: 64rem) {
  .wiki-side,
  .wiki-toc {
    position: sticky;
    top: var(--sp-8);
    max-height: calc(100svh - var(--sp-16));
    overflow-y: auto;
  }
}

.wiki-side__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.wiki-side__title {
  font-size: var(--t-3xs);
  font-weight: 800;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted-2);
  padding-bottom: var(--sp-2);
}

.wiki-side a,
.wiki-toc a {
  font-size: var(--t-sm);
  color: var(--muted);
  padding-block: var(--sp-2);
  border-left: 2px solid transparent;
  padding-left: var(--sp-3);
  transition: color 0.15s, border-color 0.15s;
}

.wiki-side a:hover,
.wiki-toc a:hover {
  color: var(--text);
}

.wiki-side a[aria-current="page"],
.wiki-toc a[aria-current="true"] {
  color: var(--acc);
  border-left-color: var(--acc);
}

.wiki-toc__title {
  font-size: var(--t-3xs);
  font-weight: 800;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Liste d'articles sur l'accueil du wiki. */
.wl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  transition: background 0.15s, border-color 0.15s;
}

.wl:hover {
  background: #1A1A1A;
  border-color: var(--line-2);
}

.wl__title {
  font-weight: 600;
  font-size: var(--t-base);
}

.wiki-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sp-6);
}

.wiki-cat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Navigation précédent/suivant en bas d'article. */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: var(--sp-8);
  margin-top: var(--sp-8);
}

.pager__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1 1 14rem;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  min-width: 0;
}

.pager__link:hover { border-color: var(--acc); }

.pager__link--next { text-align: right; }

.pager__dir {
  font-size: var(--t-3xs);
  font-weight: 800;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted-2);
}

.pager__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  text-transform: uppercase;
}

/* ==========================================================================
   8. Bloc communauté
   ========================================================================== */

.community {
  background: var(--acc);
  color: var(--ink);
}

.community a { color: var(--ink); }

.community__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding-block: var(--sp-16);
}

.community__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
  border-top: 2px solid var(--ink);
  padding-top: var(--sp-7);
}

.community__text {
  max-width: 28.75rem;
  font-size: var(--t-lg);
  line-height: var(--lh-normal);
  font-weight: 600;
}

.community__cta {
  background: var(--ink);
  color: var(--text);
  padding: var(--sp-6) var(--sp-8);
  font-weight: 800;
  font-size: var(--t-base);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

.community__cta:hover { color: var(--text-bright); }

.community__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.community__socials a {
  font-weight: 800;
  font-size: var(--t-xs);
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-2);
}

/* ==========================================================================
   9. Pied de page
   ========================================================================== */

.footer {
  background: var(--bg);
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding-block: var(--sp-18) var(--sp-8);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-10);
}

.footer__about {
  max-width: 20rem;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--muted);
}

.footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10) var(--sp-18);
  font-size: var(--t-sm);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__col-title {
  font-size: var(--t-3xs);
  font-weight: 800;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Le mot AURA en très grand, à peine détaché du fond. */
.footer__ghost {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--d-ghost);
  line-height: 0.75;
  text-transform: uppercase;
  color: var(--ghost);
  letter-spacing: var(--ls-display);
  text-align: center;
  user-select: none;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--t-2xs);
  color: var(--muted-2);
}

.footer__bottom a { color: var(--muted-2); }
.footer__bottom a:hover { color: var(--text); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

/* ==========================================================================
   10. Pages utilitaires
   ========================================================================== */

.page-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: var(--sp-16) var(--sp-10);
}

.error-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
  padding-block: var(--sp-18);
}

/* Avertissement de contenu provisoire, visible en développement. */
.provisional {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted-2);
}

.empty {
  padding: var(--sp-10);
  border: 1px dashed var(--line-2);
  color: var(--muted);
  font-size: var(--t-sm);
  text-align: center;
}

/* ==========================================================================
   11. Encoche et zone sûre
   --------------------------------------------------------------------------
   La barre étant fixée en haut, elle doit descendre sous l'encoche des
   téléphones ; c'est aussi pour ça que .nav-spacer ajoute cet écart.
   ========================================================================== */

.nav__inner {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ==========================================================================
   12. Fil d'Ariane
   ========================================================================== */

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crumbs li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--muted);
}

/* Séparateur généré, pour ne pas le coder dans le HTML. */
.crumbs li + li::before {
  content: "/";
  color: var(--line-3);
}

.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current="page"] { color: var(--acc); }

/* ==========================================================================
   13. Compléments de mise en avant
   ========================================================================== */

.focus__lede,
.band__lede {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--muted);
}

.band__lede {
  max-width: 35rem;
  color: var(--text-2);
  line-height: 1.55;
}

.sec-head--spaced {
  margin-bottom: var(--sp-10);
}

/* ==========================================================================
   14. Fiche serveur
   ========================================================================== */

/* Barre de connexion, soulignée d'un filet d'accent comme dans le template. */
.connect {
  background: var(--surface-2);
  border-top: 2px solid var(--acc);
  border-bottom: 1px solid var(--line);
}

.connect__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block: var(--sp-8);
}

.connect__block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.connect__addr {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
  word-break: break-all;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
}

@media (min-width: 62rem) {
  .about-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--sp-16);
  }
}

.about-grid__media {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.about-grid__media figure {
  margin: 0;
  height: 15rem;
  overflow: hidden;
}

.about-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}

@media (min-width: 62rem) {
  .info-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--sp-16);
  }
}

/* Tableau de caractéristiques. */
.specs {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.specs__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}

.specs__row:last-child {
  border-bottom: 1px solid var(--line);
}

.specs dt {
  font-size: var(--t-3xs);
  font-weight: 800;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted-2);
}

.specs dd {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

/* Liste de règles, numérotée par le compteur CSS. */
.rules {
  counter-reset: rule;
  display: flex;
  flex-direction: column;
}

.rules li {
  counter-increment: rule;
  position: relative;
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-12);
  border-top: 1px solid var(--line);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--text-3);
}

.rules li:last-child {
  border-bottom: 1px solid var(--line);
}

.rules li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--sp-5);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--acc);
}

/* ==========================================================================
   15. Article isolé (news, pages légales)
   ========================================================================== */

.article {
  max-width: 48rem;
}

.article__lede {
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--text);
}

/* Les pages légales numérotaient leurs sections : on restitue la numérotation
   par un compteur, pour ne pas la coder dans le texte. */
.legal-body {
  counter-reset: legal;
}

.legal-body h2 {
  counter-increment: legal;
}

.legal-body h2::before {
  content: counter(legal) ". ";
  color: var(--acc);
}

.legal-nav {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   16. Sélecteur de jeu du wiki
   ========================================================================== */

.wiki-pick {
  position: relative;
  flex: 1 1 20rem;
  min-width: 0;
  min-height: 15rem;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-6);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--surface-2);
}

.wiki-pick__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ==========================================================================
   17. Kit de composants (page /styleguide)
   ========================================================================== */

.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sp-6);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--sp-4);
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.swatch__chip {
  height: 3.5rem;
  border: 1px solid var(--line-2);
}

.swatch__name {
  font-size: var(--t-xs);
  font-weight: 700;
}

.swatch__token {
  font-size: var(--t-3xs);
  color: var(--muted-2);
}

.swatch__chip--bg        { background: var(--bg); }
.swatch__chip--surface   { background: var(--surface); }
.swatch__chip--surface-2 { background: var(--surface-2); }
.swatch__chip--surface-3 { background: var(--surface-3); }
.swatch__chip--line      { background: var(--line); }
.swatch__chip--line-2    { background: var(--line-2); }
.swatch__chip--muted-2   { background: var(--muted-2); }
.swatch__chip--muted     { background: var(--muted); }
.swatch__chip--text      { background: var(--text); }
.swatch__chip--acc       { background: var(--acc); }
.swatch__chip--ok        { background: var(--ok); }
.swatch__chip--err       { background: var(--err); }
.swatch__chip--danger    { background: var(--danger); }

/* ==========================================================================
   18. Patchnotes
   ========================================================================== */

.patches {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* Filet vertical reliant les versions, avec une puce par entrée. */
.patch {
  position: relative;
  padding-left: var(--sp-8);
  border-left: 2px solid var(--line);
}

.patch::before {
  content: "";
  position: absolute;
  left: -0.4375rem;
  top: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--acc);
  transform: rotate(45deg);
}

.patch__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.patch__changes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.patch__changes li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--text-3);
}

.patch__changes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.625rem;
  height: 2px;
  background: var(--acc);
}