/* Althéia : feuille de style commune aux trois pages */


:root {
  /* L'or du logo sur un bleu indigo de nuit claire */
  --nuit:   #171c44;   /* fond de la page */
  --ciel:   #2a3072;   /* ciel, vers l'horizon */
  --or:     #e0be88;   /* or du logo : titres, boutons, monde survie */
  --or-clair: #f6e3bd; /* reflets de l'or */
  --reflet: #7fe0f0;   /* monde créatif */
  --rose:   #ff9dbb;   /* la table de jeu */
  --vert:   #8eeaa8;   /* Minecraft */
  --violet: #c7a8ff;   /* ce qui viendra plus tard */
  --brume:  #f4efe3;   /* texte */
  --gris:   #b9c0e0;   /* texte secondaire */
  --filet:  rgba(185, 192, 224, .3);

  /* L'emblème du site */
  --embleme: url("embleme.webp");

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           "URW Palladio L", "TeX Gyre Pagella", Georgia, serif;
  --mono:  ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas,
           "DejaVu Sans Mono", monospace;

  --marge: clamp(1.25rem, 5vw, 4rem);
  --colonne: 120rem;
}

*, *::before, *::after { box-sizing: border-box; }

/* Sur les grands écrans, tout grandit avec la largeur : la page occupe l'espace au lieu de flotter au milieu */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: clamp(100%, .5rem + .625vw, 137.5%); }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--brume);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.65;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------
   L'horizon : l'emblème et le nom posés sur l'eau, et leur reflet dessous.
   ------------------------------------------------------------------ */

.horizon {
  --taille: min(27vw, 40vh, 34rem);          /* côté de l'emblème */
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  min-height: min(100vh, max(34rem, 150vw));
  min-height: min(100svh, max(34rem, 150vw));
  overflow: hidden;
}

.ciel {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255, 214, 150, .62), rgba(255, 214, 150, 0) 72%),
    linear-gradient(to bottom, #1a1f52 0%, #2c2f7c 38%, #5b3f9c 68%, #a2549a 88%, #e07a8e 100%);
  border-bottom: 1px solid rgba(255, 232, 190, .9);
}

.eau {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    radial-gradient(ellipse 44% 66% at 50% 0%, rgba(255, 214, 150, .30), rgba(255, 214, 150, 0) 70%),
    linear-gradient(to bottom, #8a4a93 0%, #4a3a8c 22%, #262b6c 50%, var(--nuit) 82%);
}

/* Calques dessinés par le script : étoiles dans le ciel, éclats de lumière sur l'eau */
.calque {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* L'enseigne : l'emblème, et le nom à sa droite, presque aussi haut que lui */
.enseigne {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--taille) * .05);
}

.embleme {
  flex: none;
  width: var(--taille);
  height: var(--taille);
  background: var(--embleme) center / contain no-repeat;
}

.nom {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--taille) * .68);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--or);
  background: linear-gradient(to bottom, var(--or-clair) 18%, var(--or) 52%, #b8935f 88%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Une ombre légère détache l'or du ciel clair de l'horizon */
.ciel .enseigne { filter: drop-shadow(0 .02em .5rem rgba(22, 20, 70, .55)); }

.enseigne--reflet {
  transform: scaleY(-1);
  filter: url(#ondes);
  opacity: .45;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 32%, rgba(0, 0, 0, 0) 70%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 32%, rgba(0, 0, 0, 0) 70%);
  user-select: none;
  pointer-events: none;
}

.accroche {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: clamp(1.25rem, 5vh, 3.5rem);
  margin: 0;
  padding-inline: var(--marge);
  text-align: center;
  font-size: clamp(1.05rem, .95rem + .7vw, 1.45rem);
  line-height: 1.4;
  text-wrap: balance;
}

.accroche .liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .9rem 1.6rem;
  margin-top: 1.1em;
  font-size: .85em;
}
.accroche .discret { color: var(--gris); text-underline-offset: .25em; }
.accroche .discret:hover { color: var(--brume); }

/* Une seule animation, au chargement : le reflet se forme sur l'eau. */
@media (prefers-reduced-motion: no-preference) {
  .enseigne--reflet { animation: apparition 2.4s cubic-bezier(.2, .7, .2, 1) .25s both; }
  .accroche { animation: leve 1.2s ease-out 1.5s both; }
  @keyframes apparition {
    from { opacity: 0;   transform: scaleY(-1.08); }
    to   { opacity: .45; transform: scaleY(-1); }
  }
  @keyframes leve {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------
   Le reste de la page, sous la surface.
   ------------------------------------------------------------------ */

main {
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: var(--marge);
}

section { padding-block: clamp(3.5rem, 9vw, 7rem) 0; }

h2 {
  color: var(--or-clair);
  margin: 0 0 .6em;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.chapeau {
  max-width: 38em;
  margin: 0 0 2.2em;
  color: var(--gris);
}

/* Les serveurs de jeu : deux colonnes, puis une ligne pour ce qui viendra */

.serveurs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.serveur {
  --accent: var(--vert);
  --teinte: 142, 234, 168;
  padding: 1.5rem clamp(1.1rem, 2.4vw, 1.75rem) .6rem;
  border-top: 3px solid var(--accent);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(to bottom, rgba(var(--teinte), .16), rgba(var(--teinte), .04) 70%);
}
.serveur--table { --accent: var(--rose); --teinte: 255, 157, 187; }

.serveur .jeu { margin: 0; color: var(--accent); font-size: .94em; }

.serveur h3 {
  margin: .1em 0 .5em;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.serveur p { margin: 0 0 1em; }
.serveur .note { color: var(--gris); font-size: .94em; }

.acces { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.acces li {
  display: grid;
  gap: .2rem;
  justify-items: start;
  padding-block: 1rem;
  border-top: 1px solid var(--filet);
}
.acces li:last-child { border-bottom: 0; }
.acces .role { color: var(--gris); font-size: .88em; }
.acces .bouton { margin-top: .45rem; }

.adresse {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  color: var(--or);
}
.adresse--creatif { color: var(--reflet); }
.serveur--table .adresse { color: var(--rose); }
a.adresse { text-decoration-thickness: 1px; text-underline-offset: .18em; }

.a-venir {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.5rem 1.75rem;
  border: 1px dashed rgba(199, 168, 255, .7);
  border-radius: 6px;
  background: rgba(199, 168, 255, .07);
  color: var(--gris);
}
.a-venir b { font-weight: 400; color: var(--violet); }

.bouton {
  display: inline-block;
  font: inherit;
  font-size: .88em;
  line-height: 1.2;
  padding: .7em 1.15em;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: var(--brume);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .25s, transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
/* Le fond se remplit de gauche à droite au survol */
.bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brume);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.bouton:hover { color: var(--nuit); transform: translateY(-2px); box-shadow: 0 .5rem 1.2rem rgba(10, 12, 40, .45); }
.bouton:hover::before { transform: scaleX(1); }
.bouton:active { transform: translateY(0) scale(.97); box-shadow: none; }
.bouton[data-etat="fait"] { background: var(--reflet); border-color: var(--reflet); color: var(--nuit); }
.bouton[data-etat="fait"]::before { transform: scaleX(0); }
.bouton--discord { border-color: var(--or); background: var(--or); color: var(--nuit); }
.bouton--discord::before { background: var(--or-clair); }
.bouton--discord:hover { border-color: var(--or-clair); box-shadow: 0 .5rem 1.6rem rgba(246, 227, 189, .35); }
/* Un reflet de lumière traverse le bouton doré */
.bouton--discord::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  opacity: 0;
}

/* Bouton « Faire un don » (soutien) — accent rose de la table */
.bouton--don { border-color: var(--rose); background: var(--rose); color: var(--nuit); }
.bouton--don::before { background: #ffc2d3; }
.bouton--don:hover { border-color: #ffc2d3; box-shadow: 0 .5rem 1.6rem rgba(255, 157, 187, .35); }

/* Étincelle lancée quand une adresse est copiée */
.etincelle {
  position: fixed;
  z-index: 10;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--or-clair);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .bouton--discord::after { animation: eclat 5.5s ease-in-out 2.5s infinite; }
  .bouton--discord:hover::after { animation: eclat-survol .8s ease-out; }
  @keyframes eclat {
    0%, 78% { left: -60%; opacity: 0; }
    80%     { opacity: 1; }
    100%    { left: 130%; opacity: 0; }
  }
  @keyframes eclat-survol {
    0%   { left: -60%; opacity: 1; }
    100% { left: 130%; opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .bouton, .bouton::before { transition: none; }
  .bouton:hover { transform: none; }
}
[data-copier] { min-width: 9.5em; }

/* Les étapes : une vraie suite, donc numérotée */

.etapes {
  list-style: none;
  counter-reset: etape;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.2rem clamp(1.5rem, 4vw, 3.5rem);
}
.etapes li { counter-increment: etape; }
.etapes li::before {
  content: counter(etape);
  display: block;
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  line-height: 1;
  color: var(--or);
  margin-bottom: .15em;
}
.etapes li:nth-child(2)::before { color: var(--vert); }
.etapes li:nth-child(3)::before { color: var(--reflet); }
.etapes strong { display: block; font-weight: 400; font-size: 1.15em; line-height: 1.3; margin-bottom: .3em; }
.etapes span { color: var(--gris); font-size: .94em; }
.etapes span a { color: var(--brume); text-underline-offset: .2em; }

/* Le reflet expliqué : ce qui passe d'un monde à l'autre */

.regles { width: 100%; border-collapse: collapse; }
.regles caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.regles th, .regles td {
  padding: 1.15rem 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--filet);
  font-weight: 400;
}
.regles tr:last-child th, .regles tr:last-child td { border-bottom: 1px solid var(--filet); }
.regles th { width: 42%; padding-right: 2rem; }
.regles thead th { border-top: 0; padding-block: 0 .7rem; font-size: .94em; }
.regles thead th:first-child { color: var(--or); }
.regles thead th:last-child  { color: var(--reflet); }
.regles td { color: var(--gris); }
.regles td b { font-weight: 400; color: var(--brume); }

/* Pied de page */

footer {
  position: relative;
  overflow: hidden;
  margin-top: clamp(4rem, 10vw, 8rem);
  padding: clamp(3rem, 8vw, 5.5rem) var(--marge) clamp(4rem, 10vw, 7rem);
  background: linear-gradient(to bottom, var(--nuit) 0%, #1d2258 45%, #3b2f80 80%, #6a3f8f 100%);
}
.pied {
  position: relative;
  max-width: calc(var(--colonne) - 2 * var(--marge));
  margin-inline: auto;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(224, 190, 136, .55);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.pied p { margin: 0; max-width: 30em; font-size: .94em; color: var(--gris); }
/* La ligne des mentions, tout en bas */
.mentions {
  position: relative;
  max-width: calc(var(--colonne) - 2 * var(--marge));
  margin: 2rem auto 0;
  font-size: .8em;
  color: var(--gris);
  opacity: .8;
}
.mentions a { color: inherit; }
.mentions a:hover, .mentions a:focus-visible { color: var(--accent); }

/* La page des mentions légales : du texte simple, en une colonne étroite */
.legal section { max-width: 42em; }
.legal p { margin: 0 0 .8em; }

@media (max-width: 52rem) {
  .serveurs { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .enseigne--reflet { filter: url(#ondes-petites); }
  .regles, .regles tbody, .regles tr, .regles th, .regles td { display: block; width: auto; }
  .regles thead { display: none; }
  .regles th { padding: 1.15rem 0 0; }
  .regles td { border-top: 0; padding: .35rem 0 1.15rem; }
  .regles tr:last-child th { border-bottom: 0; }
}

/* ====================================================================
   Ce qui suit sert aux trois pages : menu, liens vers les pages de jeu,
   puis les pages Minecraft et Foundry (bandeau, galerie, joueurs, staff).
   ==================================================================== */

/* La couleur d'accent suit la page : vert pour Minecraft, rose pour la table */
body { --accent: var(--or); --teinte: 224, 190, 136; }
body[data-page="minecraft"] { --accent: var(--vert); --teinte: 142, 234, 168; }
body[data-page="foundry"]   { --accent: var(--rose); --teinte: 255, 157, 187; }

/* ------------------------------------------------------------------ menu */

.nav {
  position: absolute;
  z-index: 3;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(.8rem, 2vw, 1.4rem) var(--marge);
  font-size: .9em;
}
.nav .marque {
  display: flex;
  align-items: center;
  gap: .5em;
  color: var(--or-clair);
  font-size: 1.2em;
  text-decoration: none;
}
.nav .marque::before {
  content: "";
  flex: none;
  width: 2.1em; height: 2.1em;
  background: var(--embleme) center / contain no-repeat;
}
.nav ul {
  display: flex;
  gap: clamp(1rem, 3vw, 2.2rem);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.nav ul a {
  display: block;
  padding-block: .35em;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: border-color .25s, color .25s;
}
.nav ul a:hover { border-bottom-color: currentColor; }
.nav ul a[aria-current="page"] { color: var(--accent); border-bottom-color: currentColor; }

/* ------------------------------------- accueil : liens vers les pages */

.serveur .jeu a { text-decoration: none; }
.serveur .jeu a:hover { text-decoration: underline; text-underline-offset: .2em; }
.serveur h3 a {
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition: background-size .35s cubic-bezier(.2, .7, .2, 1), color .25s;
}
.serveur h3 a:hover, .serveur h3 a:focus-visible { background-size: 100% 1px; color: var(--accent); }

p.suite { margin: 0; padding-block: 1rem 1.1rem; border-top: 1px solid var(--filet); }
.serveur p.suite { margin: 0; }
.suite a, a.suite {
  color: var(--accent);
  text-decoration: none;
  font-size: .94em;
}
.suite a span, a.suite span { display: inline-block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.suite a:hover, a.suite:hover { text-decoration: underline; text-underline-offset: .2em; }
.suite a:hover span, a.suite:hover span { transform: translateX(.3em); }

/* ----------------------------- page Discord : à quoi sert le Discord */

.usages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.usages .serveur { display: flex; flex-direction: column; padding-bottom: .4rem; }
.usages .serveur > p:not(.jeu):not(.suite) { flex: 1; }
.usages .serveur:not(:has(.suite)) { padding-bottom: 1.2rem; }
.serveur--annonces { --accent: var(--violet); --teinte: 199, 168, 255; }
.acces .appel { margin-top: .45rem; gap: .7rem; }
.acces .appel .bouton { margin-top: 0; }
.staff .pseudo { color: var(--accent); }
/* le lien d'invitation est long : un peu plus petit, pour tenir sur une ligne sur téléphone */
body[data-page="discord"] .acces .adresse { font-size: clamp(.95rem, .7rem + 1.5vw, 1.75rem); }

/* --------------------------- pages de jeu : le bandeau du haut de page */

.bandeau {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 34% at 50% 100%, rgba(255, 214, 150, .55), rgba(255, 214, 150, 0) 72%),
    linear-gradient(to bottom, #1a1f52 0%, #262b70 46%, #4a3a94 74%, #8f4d9b 91%, #e07a8e 100%);
  border-bottom: 1px solid rgba(255, 232, 190, .9);
}
.bandeau .calque { transform: none; }
.bandeau-contenu {
  position: relative;
  max-width: var(--colonne);
  margin-inline: auto;
  padding: clamp(6rem, 13vw, 9.5rem) var(--marge) clamp(5.5rem, 12vw, 9rem);
}
.bandeau .jeu { margin: 0 0 .5em; color: var(--accent); }
.bandeau h1 {
  margin: 0 0 .35em;
  max-width: 13em;
  font-weight: 400;
  font-size: clamp(2.5rem, 1.5rem + 4.6vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--or);
  background: linear-gradient(to bottom, var(--or-clair) 18%, var(--or) 60%, #c9a56f 95%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bandeau .chapeau { margin-bottom: 0; color: var(--brume); font-size: 1.08em; }

/* Les adresses, côte à côte dans le bandeau */
.acces--cote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  max-width: 54rem;
  margin-top: 2.2rem;
}
.acces--cote li { border-top-color: rgba(244, 239, 227, .35); padding-bottom: 0; }
body[data-page="foundry"] .acces .adresse { color: var(--rose); }

/* Sous l'horizon, une bande d'eau qui rejoint le fond de la page */
.rive {
  position: relative;
  overflow: hidden;
  height: clamp(4.5rem, 9vw, 7rem);
  background:
    radial-gradient(ellipse 44% 100% at 50% 0%, rgba(255, 214, 150, .28), rgba(255, 214, 150, 0) 70%),
    linear-gradient(to bottom, #8a4a93 0%, #4a3a8c 28%, #262b6c 60%, var(--nuit) 100%);
}
.rive + main > section:first-child { padding-top: clamp(1.5rem, 4vw, 3rem); }

/* --------------------------------------------------------- la galerie */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: clamp(.5rem, 1.4vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.galerie li { aspect-ratio: 16 / 9; }
.vignette {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(var(--teinte), .12);
  color: inherit;
  font: inherit;
  cursor: zoom-in;
}
.vignette img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.vignette:hover img, .vignette:focus-visible img { transform: scale(1.045); }
.vignette::after {            /* liseré de la couleur du jeu, au survol */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--accent);
  opacity: 0;
  transition: opacity .25s;
}
.vignette:hover::after, .vignette:focus-visible::after { opacity: 1; }
.vignette .legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2em .9em .65em;
  background: linear-gradient(to top, rgba(12, 14, 44, .88), rgba(12, 14, 44, 0));
  font-size: .82em;
  line-height: 1.3;
  text-align: left;
}
@media (min-width: 24rem) {
  /* la première image, en grand, quand il y en a assez pour remplir autour */
  .galerie[data-nombre="beaucoup"] li:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}
@media (min-width: 46rem) {
  .galerie { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  .galerie[data-nombre="peu"] { grid-template-columns: repeat(var(--par-ligne, 3), minmax(0, 1fr)); }
}

/* L'image en grand */
.visionneuse {
  width: 100vw; max-width: 100vw;
  height: 100vh; max-height: 100vh;
  height: 100dvh; max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brume);
}
.visionneuse::backdrop { background: rgba(9, 11, 34, .94); }
.visionneuse figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: .8rem;
  height: 100%;
  margin: 0;
  padding: 4rem clamp(.75rem, 6vw, 5rem) 1.25rem;
}
.visionneuse img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: 3px; }
.visionneuse figcaption { min-height: 1.5em; color: var(--gris); font-size: .9em; text-align: center; }
.visionneuse button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  padding: 0;
  border: 1px solid rgba(244, 239, 227, .5);
  border-radius: 50%;
  background: rgba(23, 28, 68, .75);
  color: var(--brume);
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.visionneuse button:hover { background: var(--or); border-color: var(--or); color: var(--nuit); }
.visionneuse .fermer    { top: .8rem; right: .8rem; }
.visionneuse .precedent { left: .8rem;  top: 50%; margin-top: -1.45rem; }
.visionneuse .suivant   { right: .8rem; top: 50%; margin-top: -1.45rem; }
.visionneuse[data-seule] .precedent, .visionneuse[data-seule] .suivant { display: none; }

/* ------------------------------------------------------- les joueurs */

.joueurs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: .8rem clamp(.8rem, 2vw, 1.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.joueurs li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--vert);
  border-radius: 0 6px 6px 0;
  background: linear-gradient(to right, rgba(142, 234, 168, .16), rgba(142, 234, 168, .03));
}
.tete {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 3px;
  background: rgba(142, 234, 168, .22);
  color: var(--vert);
  font-size: 1.4rem;
  line-height: 1;
  image-rendering: pixelated;       /* les têtes font 8 pixels de côté : on garde les pixels nets */
}
.pseudo { font-family: var(--mono); font-size: .95em; letter-spacing: -.02em; overflow-wrap: anywhere; }

/* --------------------------------------------------------- le staff */

.staff { margin: 0; padding: 0; list-style: none; }
.staff li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: .4rem 1.5rem;
  padding-block: 1rem;
  border-top: 1px solid var(--filet);
}
.staff li:last-child { border-bottom: 1px solid var(--filet); }
.staff .pseudo { font-size: 1.1em; }
.staff .role { color: var(--gris); }
.staff .bouton { min-width: 0; font-size: .8em; }

/* ------------------------------------ texte courant et fiche pratique */

.texte { max-width: 38em; }
.texte p { margin: 0 0 1em; }
.texte p:last-child { margin-bottom: 0; }

.fiche {
  display: grid;
  grid-template-columns: minmax(9rem, 17rem) minmax(0, 1fr);
  margin: 0;
}
.fiche dt, .fiche dd { margin: 0; padding-block: 1.05rem; border-top: 1px solid var(--filet); }
.fiche dt { padding-right: 2rem; color: var(--accent); }
.fiche dd { color: var(--gris); }
.fiche dd b { font-weight: 400; color: var(--brume); }
.fiche dd a { color: var(--brume); text-underline-offset: .2em; }
.fiche dt:last-of-type, .fiche dd:last-of-type { border-bottom: 1px solid var(--filet); }

/* Message affiché quand une liste est encore vide */
.vide {
  margin: 0;
  padding: 1.2rem 1.5rem;
  border: 1px dashed rgba(var(--teinte), .6);
  border-radius: 6px;
  background: rgba(var(--teinte), .06);
  color: var(--gris);
}
.compte { margin: -1.2em 0 1.6em; color: var(--gris); font-size: .94em; }

.appel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

/* ------------------------------------------------------ grands écrans */

@media (min-width: 90rem) {
  /* Les deux adresses Minecraft côte à côte ; rôle, adresse et bouton s'alignent d'une colonne à l'autre */
  .serveur--minecraft .acces {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
  .serveur--minecraft .acces li {
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-items: start;
  }
  .serveur--minecraft .acces .role { align-self: end; }

  /* Le texte courant se répartit sur deux colonnes plutôt que de laisser la moitié de l'écran vide */
  .texte { max-width: none; columns: 2; column-gap: clamp(3rem, 6vw, 7rem); }
  .texte p { break-inside: avoid; }

  .galerie:not([data-nombre="peu"]) { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
  .joueurs { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }   /* les joueurs se partagent la ligne */
  .chapeau { max-width: 46em; }
}

@media (prefers-reduced-motion: reduce) {
  .vignette img, .suite a span, a.suite span, .serveur h3 a { transition: none; }
  .vignette:hover img, .vignette:focus-visible img { transform: none; }
}

@media (max-width: 40rem) {
  /* sur petit écran, les flèches de l'image en grand passent en bas, de part et d'autre de la légende */
  .visionneuse figure { padding-bottom: .8rem; }
  .visionneuse figcaption { display: grid; place-items: center; min-height: 2.9rem; padding-inline: 3.6rem; }
  .visionneuse .precedent, .visionneuse .suivant { top: auto; bottom: .8rem; margin-top: 0; }
  .nav .marque { font-size: 0; gap: 0; }          /* il ne reste que l'emblème */
  .nav .marque::before { font-size: 1.05rem; }
  .fiche { display: block; }
  .fiche dt { padding: 1.05rem 0 0; border-bottom: 0; }
  .fiche dd { padding: .3rem 0 1.05rem; border-top: 0; }
  .fiche dt:last-of-type { border-bottom: 0; }
  .staff li { grid-template-columns: minmax(0, 1fr) auto; }
  .staff .role { grid-column: 1; grid-row: 2; }
  .staff .bouton { grid-column: 2; grid-row: 1 / span 2; }
}

/* ====================================================================
   Page Minecraft : l'univers du jeu.
   Police pixel, pierre sombre en fond, boutons et cases d'inventaire,
   une capture du monde en haut de page qui se fond dans la pierre.
   Pour changer l'image du haut : remplacer images/bandeaux/erebor-bandeau.webp
   (ou changer l'adresse dans --mc-bandeau ci-dessous).
   ==================================================================== */

/* Monocraft (licence OFL) : la police du jeu, redessinée pour rester lisible */
@font-face {
  font-family: "Monocraft";
  src: url("polices/monocraft.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Monocraft";
  src: url("polices/monocraft-gras.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}

body[data-page="minecraft"] {
  --mc-bandeau: url("images/bandeaux/erebor-bandeau.webp");
  --pixel: "Monocraft", var(--mono);
  --nuit: #1b1c21;               /* pierre sombre */
  --vert: #7ed957;               /* herbe */
  --or: #ffe27a;                 /* le jaune des titres du jeu */
  --or-clair: #fff3b8;
  --reflet: #6ff3f3;             /* le cyan du jeu, pour le créatif */
  --gris: #c4c4c4;
  --filet: rgba(255, 255, 255, .12);
  --accent: var(--vert);
  --teinte: 126, 217, 87;
  background: var(--nuit);
}

/* La pierre, en fond de toute la page, aux pixels nets */
body[data-page="minecraft"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(18, 19, 24, .55), rgba(18, 19, 24, .55)),
    url("images/textures/pierre.png") 0 0 / 64px 64px repeat;
  image-rendering: pixelated;
}

/* --- le haut de page : la capture, assombrie à gauche pour le texte, qui se fond dans la pierre */
.entete-mc { position: relative; isolation: isolate; }
.entete-mc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(14, 15, 20, .7) 0%, rgba(14, 15, 20, 0) 22%),
    linear-gradient(to right, rgba(14, 15, 20, .82) 0%, rgba(14, 15, 20, .5) 42%, rgba(14, 15, 20, 0) 78%),
    var(--mc-bandeau) center 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, .55) 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, .55) 82%, transparent 100%);
}
.entete-mc .bandeau { background: none; border-bottom: 0; }
.entete-mc .rive { background: none; height: clamp(5rem, 11vw, 10rem); }

body[data-page="minecraft"] .nav ul a { font-family: var(--pixel); text-shadow: 2px 2px 0 rgba(0, 0, 0, .7); }

body[data-page="minecraft"] .bandeau .jeu {
  font-family: var(--pixel);
  font-size: 1.05em;
  text-shadow: 2px 2px 0 #1c3a10;
}
body[data-page="minecraft"] .bandeau h1 {
  font-family: var(--pixel);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
  background: none;
  color: var(--or);
  -webkit-text-fill-color: currentColor;
  text-shadow: .07em .07em 0 #4a3a12;
}
body[data-page="minecraft"] .bandeau .chapeau { text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }

/* les adresses : comme une ligne de la liste des serveurs du jeu */
body[data-page="minecraft"] .acces--cote { gap: 1rem clamp(1rem, 3vw, 2rem); }
body[data-page="minecraft"] .acces--cote li {
  padding: 1rem 1.2rem 1.2rem;
  border: 2px solid #000;
  background: rgba(0, 0, 0, .58);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1);
}
body[data-page="minecraft"] .adresse { font-family: var(--pixel); letter-spacing: 0; color: var(--or); text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); }
body[data-page="minecraft"] .adresse--creatif { color: var(--reflet); }

/* --- les titres, en pixels, avec l'ombre dure du jeu et un bloc d'herbe devant */
body[data-page="minecraft"] h2 {
  font-family: var(--pixel);
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  text-shadow: .07em .07em 0 #3a3a3a;
}
body[data-page="minecraft"] h2::before {
  content: "";
  display: inline-block;
  width: .8em; height: .8em;
  margin-right: .35em;
  vertical-align: -.02em;
  background: url("images/textures/herbe.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
  box-shadow: .07em .07em 0 rgba(0, 0, 0, .45);
}

/* --- les boutons du jeu : pierre grise en relief, liseré blanc au survol */
body[data-page="minecraft"] .bouton {
  font-family: var(--pixel);
  font-size: .95em;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  border: 2px solid #000;
  border-radius: 0;
  background: linear-gradient(#8e8e8e, #6c6c6c);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .38), inset -2px -3px 0 rgba(0, 0, 0, .38);
  transition: none;
}
body[data-page="minecraft"] .bouton::before { display: none; }
body[data-page="minecraft"] .bouton:hover,
body[data-page="minecraft"] .bouton:focus-visible {
  color: #ffffa0;
  border-color: #fff;
  background: linear-gradient(#a3a9d8, #7d84bd);
  transform: none;
}
body[data-page="minecraft"] .bouton:active { transform: translateY(1px); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .3); }
body[data-page="minecraft"] .bouton--discord { background: linear-gradient(#6fc03e, #4b8f27); }
body[data-page="minecraft"] .bouton--discord:hover,
body[data-page="minecraft"] .bouton--discord:focus-visible { background: linear-gradient(#86d652, #5ba631); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .38), inset -2px -3px 0 rgba(0, 0, 0, .38); }
body[data-page="minecraft"] .bouton[data-etat="fait"] { background: linear-gradient(#6fc03e, #4b8f27); color: #fff; border-color: #000; }

/* --- les joueurs : chaque tête dans une case d'inventaire */
body[data-page="minecraft"] .joueurs li {
  border: 2px solid #000;
  border-radius: 0;
  background: rgba(0, 0, 0, .45);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
}
body[data-page="minecraft"] .tete {
  border-radius: 0;
  background: #8b8b8b;
  box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff;
  color: #373737;
}
body[data-page="minecraft"] .pseudo { font-family: var(--pixel); letter-spacing: 0; }

/* --- la galerie et les messages d'attente, aux angles droits */
body[data-page="minecraft"] .vignette { border-radius: 0; border: 2px solid #000; }
body[data-page="minecraft"] .vignette img { image-rendering: auto; }
body[data-page="minecraft"] .vignette::after { box-shadow: inset 0 0 0 2px #fff; }
body[data-page="minecraft"] .vignette .legende,
body[data-page="minecraft"] .visionneuse figcaption { font-family: var(--pixel); letter-spacing: 0; text-shadow: 2px 2px 0 rgba(0, 0, 0, .7); }
body[data-page="minecraft"] .vignette .legende { font-size: .95em; color: #fff; }
body[data-page="minecraft"] .vide {
  border: 2px solid #000;
  border-radius: 0;
  background: rgba(0, 0, 0, .45);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
}

/* --- la fiche pratique */
body[data-page="minecraft"] .fiche dt { font-family: var(--pixel); font-size: 1.05em; text-shadow: 2px 2px 0 #1c3a10; }
body[data-page="minecraft"] .suite a, body[data-page="minecraft"] a.suite { font-family: var(--pixel); }

/* --- le pied de page : une rangée de blocs d'herbe, puis la terre */
body[data-page="minecraft"] footer {
  padding-top: calc(clamp(3rem, 8vw, 5.5rem) + 3rem);
  background:
    linear-gradient(rgba(16, 11, 8, .72), rgba(10, 7, 5, .9)),
    url("images/textures/terre.png") 0 3rem / 3rem 3rem repeat;
  image-rendering: pixelated;
}
body[data-page="minecraft"] footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3rem;
  background: url("images/textures/herbe.png") 0 0 / 3rem 3rem repeat-x;
  box-shadow: 0 .4rem .8rem rgba(0, 0, 0, .45);
}
body[data-page="minecraft"] .pied { border-top: 0; padding-top: 0; }
body[data-page="minecraft"] .pied p { color: #d8cbbd; }

/* ====================================================================
   Pied de page : le bloc « Soutenir Althéia », présent sur toutes les pages
   ==================================================================== */
.pied--don { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 157, 187, .35); }
.pied--don p { max-width: 42em; }
.pied--don p b { font-weight: 400; color: var(--rose); }
body[data-page="minecraft"] .pied--don { border-top: 1px solid rgba(216, 203, 189, .3); padding-top: 1.75rem; }

/* ====================================================================
   Page Modules
   ==================================================================== */
body[data-page="modules"] { --accent: var(--violet); --teinte: 199, 168, 255; }

.module-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: .6em; }
.module-titre h2 { margin: 0; }
.etiquette {
  display: inline-block;
  padding: .2em .8em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1.4;
  white-space: nowrap;
}
.etiquette--libre   { color: var(--vert); }
.etiquette--licence { color: var(--rose); }
.etiquette--nouveau { margin-left: .35em; padding: .05em .6em; font-size: .62em; vertical-align: .2em; color: var(--or); }

.fonctions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 2rem 0 2.5rem;
  padding: 0;
  list-style: none;
}
.fonctions > li {
  padding: 1.15rem 1.3rem 1.3rem;
  border-top: 3px solid var(--accent);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(to bottom, rgba(var(--teinte), .15), rgba(var(--teinte), .03) 75%);
}
.fonctions h3 { margin: 0 0 .4em; font-weight: 400; font-size: 1.2em; line-height: 1.25; }
.fonctions p { margin: 0; color: var(--gris); font-size: .94em; }

.sous-titre {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 .8rem;
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem);
  line-height: 1.2;
  color: var(--or-clair);
}
.texte a { color: var(--brume); text-underline-offset: .2em; }
.texte a:hover { color: var(--accent); }
body[data-page="modules"] .etapes { margin-top: 1.5rem; }

/* ====================================================================
   Barre de navigation — identique sur toutes les pages
   ==================================================================== */
:root { --barre-h: 3.6rem; }

.barre {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--barre-h);
  padding: .4rem var(--marge);
  background: rgba(14, 16, 44, .82);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
          backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid rgba(224, 190, 136, .28);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--brume);
}
.barre a { color: inherit; text-decoration: none; }

.barre-marque { display: flex; align-items: center; gap: .55em; color: #f6e3bd; font-size: 1.25em; white-space: nowrap; }
.barre-embleme { flex: none; width: 2.1em; height: 2.1em; background: url("embleme.webp") center / contain no-repeat; }

.barre-liens {
  display: flex;
  align-items: center;
  gap: clamp(.4rem, 2vw, 1.6rem);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.barre-liens > li > a {
  display: block;
  padding: .55em .15em;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.barre-liens > li > a:hover { color: #f6e3bd; border-bottom-color: rgba(246, 227, 189, .5); }

/* La page en cours (le script ajoute aussi aria-current), et « Foundry VTT » allumé sur ses sous-pages */
body[data-page="minecraft"]       .barre a[data-page="minecraft"],
body[data-page="discord"]         .barre a[data-page="discord"],
body[data-page="foundry"]         .barre a[data-page="foundry"],
body[data-page="foundry-table"]   .barre a[data-page="foundry"],
body[data-page="foundry-modules"] .barre a[data-page="foundry"] { color: #f6e3bd; border-bottom-color: #e0be88; }
body[data-page="foundry-table"]   .barre a[data-page="foundry-table"],
body[data-page="foundry-modules"] .barre a[data-page="foundry-modules"] { background: rgba(224, 190, 136, .12); }

/* Le sous-menu Foundry VTT */
.barre-groupe { position: relative; display: flex; align-items: center; gap: .1rem; }
.barre-sous {
  display: grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.barre-sous:hover { background: rgba(255, 255, 255, .08); }
.barre-sous svg { transition: transform .2s; }
.barre-groupe--ouvert .barre-sous svg { transform: rotate(180deg); }

.barre-sous-liens {
  position: absolute;
  top: 100%;
  left: -1rem;
  z-index: 2;
  display: none;
  min-width: 18rem;
  margin: 0;
  padding: .9rem 0 0;               /* zone invisible : la souris passe du lien au menu sans le fermer */
  list-style: none;
}
.barre-sous-liens::before {
  content: "";
  position: absolute;
  inset: .5rem 0 0;
  z-index: -1;
  border: 1px solid rgba(224, 190, 136, .3);
  border-radius: 8px;
  background: #141841;
  box-shadow: 0 1rem 2.5rem rgba(5, 6, 20, .6);
}
.barre-sous-liens li { padding: 0 .4rem; }
.barre-sous-liens li:last-child { padding-bottom: .4rem; }
.barre-sous-liens a { display: block; padding: .6rem .8rem; border-radius: 5px; }
.barre-sous-liens a:hover, .barre-sous-liens a:focus-visible { background: rgba(255, 255, 255, .07); }
.barre-sous-liens b { display: block; font-weight: 400; color: #f6e3bd; }
.barre-sous-liens span { display: block; font-size: .85em; color: #b9c0e0; }

.barre-groupe--ouvert .barre-sous-liens { display: block; }
@media (hover: hover) and (min-width: 46.01rem) {
  .barre-groupe:hover .barre-sous-liens { display: block; }
}
@media (min-width: 46.01rem) {
  .barre-groupe:focus-within .barre-sous-liens { display: block; }
}

/* Le bouton « Menu », seulement sur petit écran */
.barre-menu {
  display: none;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  padding: .45rem .8rem;
  border: 1px solid rgba(244, 239, 227, .35);
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.barre-menu-icone, .barre-menu-icone::before, .barre-menu-icone::after {
  display: block;
  width: 1.1rem; height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .2s, opacity .2s;
}
.barre-menu-icone { position: relative; }
.barre-menu-icone::before, .barre-menu-icone::after { content: ""; position: absolute; left: 0; }
.barre-menu-icone::before { top: -6px; }
.barre-menu-icone::after  { top: 6px; }
.barre--ouverte .barre-menu-icone { background: transparent; }
.barre--ouverte .barre-menu-icone::before { transform: translateY(6px) rotate(45deg); }
.barre--ouverte .barre-menu-icone::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 46rem) {
  .barre--js .barre-menu { display: flex; }
  .barre--js .barre-liens {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--marge) 1rem;
    background: rgba(14, 16, 44, .97);
    border-bottom: 1px solid rgba(224, 190, 136, .28);
    box-shadow: 0 1rem 2rem rgba(5, 6, 20, .5);
  }
  .barre--js.barre--ouverte .barre-liens { display: flex; }
  .barre-liens { flex-wrap: wrap; justify-content: flex-end; }
  .barre-liens > li > a { padding: .75em 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .barre-groupe { display: block; }
  .barre-sous { display: none; }
  .barre-sous-liens { position: static; display: block; min-width: 0; padding: 0 0 .3rem 1rem; }
  .barre-sous-liens::before { display: none; }
  .barre-sous-liens li { padding: 0; }
  .barre-sous-liens a { padding: .55rem 0; border-radius: 0; }
  .barre-sous-liens span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .barre-sous svg, .barre-menu-icone, .barre-menu-icone::before, .barre-menu-icone::after { transition: none; }
}

/* La barre prend sa place en haut : le haut de page démarre dessous */
.horizon { min-height: calc(min(100svh, max(34rem, 150vw)) - var(--barre-h)); }
.bandeau-contenu { padding-top: clamp(3rem, 8vw, 6rem); }

/* Fil d'Ariane des sous-pages Foundry VTT */
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 1.4rem; font-size: .9em; color: var(--gris); }
.fil a { color: var(--brume); text-underline-offset: .2em; }
.fil a:hover { color: var(--accent); }

/* ====================================================================
   Pages Foundry VTT : couleurs
   ==================================================================== */
body[data-page="foundry"]         { --accent: #ff9a4a; --teinte: 255, 140, 60; --braise: #ff8a3d; }
body[data-page="foundry-table"]   { --accent: var(--rose); --teinte: 255, 157, 187; }
body[data-page="foundry-modules"] { --accent: var(--violet); --teinte: 199, 168, 255; }
body[data-page="foundry-table"] .acces .adresse { color: var(--rose); }
body[data-page="foundry"] .acces .adresse { color: #ffb07a; }

/* ====================================================================
   Page Foundry VTT (vue d'ensemble) : la forge
   ==================================================================== */
.bandeau--forge {
  background:
    radial-gradient(ellipse 55% 38% at 50% 100%, rgba(255, 128, 48, .55), rgba(255, 128, 48, 0) 72%),
    radial-gradient(ellipse 35% 45% at 80% 55%, rgba(255, 110, 40, .16), rgba(255, 110, 40, 0) 70%),
    linear-gradient(to bottom, #100e1d 0%, #1b1530 42%, #33192a 72%, #6e2c1d 91%, #d65f27 100%);
  border-bottom-color: rgba(255, 186, 120, .85);
}
.bandeau--forge h1 {
  background: linear-gradient(to bottom, #ffe2b8 15%, #ffb36b 60%, #e0763a 95%);
  -webkit-background-clip: text;
          background-clip: text;
}
.bandeau-contenu--logo {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.logo-fvtt {
  justify-self: center;
  width: 100%;
  max-width: 30rem;
  height: auto;
  filter: drop-shadow(0 1rem 2.5rem rgba(255, 110, 40, .35));
}
.rive--forge {
  background:
    radial-gradient(ellipse 44% 100% at 50% 0%, rgba(255, 140, 60, .3), rgba(255, 140, 60, 0) 70%),
    linear-gradient(to bottom, #6b2a1e 0%, #3a1d2e 30%, #221b48 62%, var(--nuit) 100%);
}

/* Les deux portes : la table et les modules */
.portes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.porte {
  --accent: var(--rose); --teinte: 255, 157, 187;
  display: flex;
  flex-direction: column;
  padding: 1.6rem clamp(1.2rem, 2.6vw, 2rem) 1.4rem;
  border-top: 3px solid var(--accent);
  border-radius: 0 0 8px 8px;
  background: linear-gradient(to bottom, rgba(var(--teinte), .17), rgba(var(--teinte), .04) 75%);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.porte:hover { transform: translateY(-3px); box-shadow: 0 1rem 2.5rem rgba(5, 6, 20, .45); }
.porte--modules { --accent: var(--violet); --teinte: 199, 168, 255; }
.porte .jeu { margin: 0; color: var(--accent); font-size: .94em; }
.porte h3 { margin: .1em 0 .45em; font-weight: 400; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.1; }
.porte h3 a { text-decoration: none; }
.porte h3 a:hover { color: var(--accent); }
.porte > p { margin: 0 0 1em; }
.porte-liste { margin: 0 0 1.4rem; padding: 0; list-style: none; color: var(--gris); }
.porte-liste li { position: relative; padding: .3rem 0 .3rem 1.4rem; }
.porte-liste li::before {
  content: "";
  position: absolute;
  left: .2rem; top: .85em;
  width: .5rem; height: .5rem;
  background: var(--accent);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.porte-liste b { font-weight: 400; color: var(--brume); }
.porte .appel { margin-top: auto; }

.fvtt-bref { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); margin-bottom: 1.6rem; }
.fvtt-d20 { flex: none; width: clamp(4.5rem, 9vw, 6.5rem); height: auto; filter: drop-shadow(0 .4rem 1.2rem rgba(255, 110, 40, .35)); }
.fvtt-bref .texte p { margin: 0; }
.note-marque { margin: 1.4rem 0 0; font-size: .85em; color: var(--gris); }

@media (max-width: 52rem) {
  .bandeau-contenu--logo { grid-template-columns: 1fr; }
  .logo-fvtt { grid-row: 1; max-width: 17rem; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .porte { transition: none; }
  .porte:hover { transform: none; }
}

/* ====================================================================
   Page Nos modules : l'argumentaire de Completed Westmarch
   ==================================================================== */
.accroche-module { max-width: 46em; margin: 0 0 1.8rem; font-size: 1.1em; line-height: 1.6; }
.accroche-module b { font-weight: 400; color: var(--violet); }
.atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.atouts li { padding-left: 1rem; border-left: 2px solid var(--violet); }
.atouts b { display: block; font-weight: 400; font-size: 1.35em; color: #f6e3bd; }
.atouts span { color: var(--gris); font-size: .94em; }

/* Sans script, sur petit écran : les liens passent sous la marque, les sous-pages restent accessibles depuis la page Foundry VTT */
@media (max-width: 46rem) {
  .barre:not(.barre--js) { flex-wrap: wrap; }
  .barre:not(.barre--js) .barre-liens { width: 100%; margin: 0; justify-content: flex-start; gap: 1.2rem; }
  .barre:not(.barre--js) .barre-liens > li > a { border-bottom: 0; padding: .4em 0; }
  .barre:not(.barre--js) .barre-sous-liens { display: none; }
}