/* Medievalia - le site du serveur RP. Un manuscrit enlumine de nuit : l'or et le parchemin sur le bois sombre, les
   etendards des royaumes et l'embleme comme pieces maitresses. Une seule ambiance (sombre), voulue. */
:root {
  /* couleurs */
  --nuit: #120e0a;          /* le fond de la page */
  --bois: #1c150f;          /* les panneaux */
  --bois-clair: #2a2017;    /* les panneaux en relief, les survols */
  --trait: #3d2f20;         /* les filets */
  --parchemin: #ecdfc4;     /* le texte */
  --cendre: #ab9a7d;        /* le texte secondaire */
  --or: #d8a94c;            /* l'accent */
  --or-pale: #f2d48f;
  --sang: #a3352a;          /* le rouge des sceaux */
  --vert: #6f8f4e;          /* « ouvert » */
  /* typographies */
  --f-titre: "IM Fell English SC", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --f-texte: "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
  --f-label: "Alegreya Sans SC", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* echelle */
  --t-0: clamp(0.82rem, 0.78rem + 0.15vw, 0.9rem);
  --t-1: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --t-2: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  --t-3: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem);
  --t-4: clamp(2.8rem, 1.8rem + 4.4vw, 5.6rem);
  --largeur: 72rem;
  --gouttiere-g: max(16px, env(safe-area-inset-left, 0px));
  --gouttiere-d: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
html:has(.sommaire) { scroll-padding-top: 7.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--parchemin);
  font-family: var(--f-texte);
  font-size: var(--t-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--or-pale); text-decoration-color: color-mix(in srgb, var(--or) 50%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--or); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 400; line-height: 1.12; text-wrap: balance; margin: 0; }
p { margin: 0; }

.bande { padding-left: var(--gouttiere-g); padding-right: var(--gouttiere-d); }
.contenu { max-width: var(--largeur); margin: 0 auto; }
.etiquette {
  font-family: var(--f-label); font-weight: 700; font-size: var(--t-0);
  letter-spacing: 0.14em; text-transform: lowercase; color: var(--or);
}
.chapeau { color: var(--cendre); max-width: 40rem; }

/* le filet d'enluminure entre les parties */
.filet { display: flex; align-items: center; gap: 1rem; color: var(--or); margin: 0 auto; max-width: 20rem; }
.filet::before, .filet::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--or)); }
.filet::after { background: linear-gradient(90deg, var(--or), transparent); }
.filet svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

/* ---------------------------------------------------------------- l'en-tete */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--nuit); }
.entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--nuit) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
}
.entete .contenu { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.65rem; }
.marque { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--parchemin); }
.marque img { width: 34px; height: 34px; }
.marque span { font-family: var(--f-titre); font-size: 1.45rem; letter-spacing: 0.06em; }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a { font-family: var(--f-label); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: lowercase; color: var(--cendre); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--or-pale); }
.bouton {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.3rem;
  font-family: var(--f-label); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.08em; text-transform: lowercase;
  color: var(--nuit); background: linear-gradient(180deg, var(--or-pale), var(--or)); border: 1px solid #f7e2ad;
  border-radius: 3px; text-decoration: none; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bouton:hover { color: var(--nuit); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(216, 169, 76, 0.25); }
.bouton.discret { color: var(--parchemin); background: rgba(18, 14, 10, 0.55); border-color: var(--or); box-shadow: none; }
.bouton.discret:hover { color: var(--or-pale); background: rgba(42, 32, 23, 0.8); }
.bouton.petit { padding: 0.45rem 0.9rem; font-size: 0.9rem; }
.menu-bouton { display: none; background: none; border: 1px solid var(--trait); color: var(--parchemin); border-radius: 3px; padding: 0.4rem 0.7rem; font-family: var(--f-label); font-size: 0.9rem; cursor: pointer; }
@media (max-width: 860px) {
  .menu-bouton { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
         background: var(--bois); border-bottom: 1px solid var(--trait); padding: 0.5rem var(--gouttiere-d) 1rem var(--gouttiere-g); }
  .nav.ouvert { display: flex; }
  .nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--trait); }
  .nav .bouton { margin-top: 0.8rem; justify-content: center; }
}

/* ---------------------------------------------------------------- la grande banniere */
/* l'accueil : l'embleme en entier, le titre dessous (il ne mord que sur le bas de l'image, fondu dans la nuit) */
.heros { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--trait); }
.heros-image { position: relative; z-index: -1; margin-left: calc(-1 * var(--gouttiere-g)); margin-right: calc(-1 * var(--gouttiere-d)); }
.heros-image img { width: 100%; height: auto; aspect-ratio: 1672 / 941; max-height: 70vh; min-height: 13rem; object-fit: cover; object-position: 50% 38%; }
.heros-image::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.3) 0%, transparent 22%, transparent 58%, rgba(18, 14, 10, 0.75) 82%, var(--nuit) 100%); }
.heros .contenu { position: relative; margin-top: clamp(-7.5rem, -8vw, -1.5rem); display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; text-align: center; gap: 1.1rem; padding-block: 0 3.4rem; }
.heros h1 { font-size: var(--t-4); letter-spacing: 0.04em; color: var(--or-pale); text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8); }
.heros .accroche { font-size: var(--t-2); max-width: 38rem; color: var(--parchemin); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); }
.heros .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 0.4rem; }
/* la page des metiers : le titre sur une bande de l'image */
.heros.court .heros-image { position: absolute; inset: 0; z-index: -2; margin: 0; }
.heros.court .heros-image img { height: 100%; max-height: none; aspect-ratio: auto; }
.heros.court .heros-image::after { background: linear-gradient(180deg, rgba(18, 14, 10, 0.45) 0%, rgba(18, 14, 10, 0.6) 50%, rgba(18, 14, 10, 0.92) 88%, var(--nuit) 100%); }
.heros.court .contenu { margin-top: 0; min-height: clamp(20rem, 34vw, 28rem); padding-block: 3rem; }

/* ---------------------------------------------------------------- les parties */
.partie { padding-block: clamp(3.5rem, 7vw, 6rem); }
.partie + .partie { border-top: 1px solid var(--trait); }
.partie.sombre { background: var(--bois); }
.partie-tete { display: grid; gap: 0.8rem; margin-bottom: 2.6rem; }
.partie-tete h2 { font-size: var(--t-3); }
.partie-tete.centre { justify-items: center; text-align: center; }
.partie-tete.centre .chapeau { margin: 0 auto; }

/* ce qui rend le serveur unique */
.atouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.atout { background: var(--nuit); padding: 1.8rem 1.6rem; display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.atout svg { width: 2rem; height: 2rem; fill: var(--or); color: var(--or); }
.atout h3 { font-size: var(--t-2); color: var(--or-pale); }
.atout p { color: var(--cendre); }
@media (max-width: 900px) { .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .atouts { grid-template-columns: minmax(0, 1fr); } }

/* les quatre royaumes */
.royaumes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.royaume { display: grid; justify-items: center; text-align: center; gap: 0.5rem; min-width: 0; }
.royaume img { width: min(100%, 13rem); aspect-ratio: 345 / 520; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.7));
  transform-origin: 50% 0; transition: transform 0.6s ease; }
.royaume:hover img { transform: rotate(-1.2deg); }
.royaume h3 { font-size: var(--t-2); margin-top: 0.6rem; }
.royaume .devise { font-style: italic; color: var(--or); }
.royaume p.note { color: var(--cendre); font-size: 0.98rem; max-width: 16rem; }
@media (max-width: 900px) { .royaumes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; } }
@media (prefers-reduced-motion: reduce) { .royaume img { transition: none; } .royaume:hover img { transform: none; } }

/* les cartes des metiers */
.metiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.metier-carte { position: relative; display: grid; gap: 0.7rem; align-content: start; padding: 1.5rem 1.2rem 1.3rem; text-decoration: none; color: var(--parchemin);
  background: linear-gradient(180deg, var(--bois-clair), var(--bois)); border: 1px solid var(--trait); border-radius: 4px; min-width: 0;
  transition: border-color 0.2s ease, transform 0.2s ease; }
.metier-carte:hover { color: var(--parchemin); border-color: var(--or); transform: translateY(-2px); }
.metier-carte h3 { font-size: 1.45rem; }
.metier-carte p { color: var(--cendre); font-size: 1rem; line-height: 1.45; }
.metier-carte .suite { font-family: var(--f-label); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: lowercase; color: var(--or); }
@media (max-width: 1100px) { .metiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .metiers { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .metier-carte, .bouton { transition: none; } .metier-carte:hover, .bouton:hover { transform: none; } }

/* le medaillon d'un metier (son icone de la carte des royaumes) */
.medaillon { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, #6a5a48 0%, #3a2e22 55%, #1a130c 100%);
  box-shadow: 0 0 0 2px var(--or), 0 0 0 4px #2a1a0a, 0 6px 16px rgba(0, 0, 0, 0.55); }
.medaillon svg { width: 58%; height: 58%; fill: var(--or-pale); }
.medaillon.grand { width: 5rem; height: 5rem; }

.pastille { justify-self: start; display: inline-block; padding: 0.15rem 0.55rem; border-radius: 99px; font-family: var(--f-label); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: lowercase; border: 1px solid currentColor; }
.pastille.ouvert { color: var(--vert); }
.pastille.metier { color: var(--or); }
.pastille.bientot { color: var(--cendre); }

/* l'histoire */
.histoire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.histoire .lettrine::first-letter { font-family: var(--f-titre); float: left; font-size: 4.2rem; line-height: 0.85; padding: 0.3rem 0.6rem 0 0; color: var(--or); }
.histoire .texte { display: grid; gap: 1.1rem; }
.histoire figure { margin: 0; border: 1px solid var(--trait); padding: 0.6rem; background: var(--bois); }
.histoire figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.histoire figcaption { font-family: var(--f-label); font-size: 0.85rem; letter-spacing: 0.06em; color: var(--cendre); padding: 0.5rem 0.2rem 0.1rem; }
@media (max-width: 860px) { .histoire { grid-template-columns: minmax(0, 1fr); } }
.chiffres { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.chiffres div { background: var(--bois); padding: 1.4rem 1.2rem; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.3rem; min-width: 0; }
.chiffres dd { margin: 0; font-family: var(--f-titre); font-size: var(--t-3); line-height: 1; color: var(--or-pale); }
.chiffres dt { color: var(--cendre); font-size: 1rem; line-height: 1.35; }

/* rejoindre */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; counter-reset: etape; }
.etapes li { counter-increment: etape; display: grid; gap: 0.6rem; align-content: start; padding: 1.6rem 1.4rem; border: 1px solid var(--trait); background: var(--nuit); min-width: 0; }
.etapes li::before { content: counter(etape, upper-roman); font-family: var(--f-titre); font-size: 2.2rem; line-height: 1; color: var(--or); }
.etapes h3 { font-size: var(--t-2); }
.etapes p { color: var(--cendre); }
@media (max-width: 860px) { .etapes { grid-template-columns: minmax(0, 1fr); } }
.a-venir { margin-top: 1.4rem; color: var(--cendre); font-style: italic; }

/* suivez-nous : les reseaux */
.reseaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.reseau { display: grid; gap: 0.55rem; align-content: start; justify-items: start; padding: 1.8rem 1.6rem; min-width: 0; text-decoration: none; color: var(--parchemin);
  background: var(--nuit); border: 1px solid var(--trait); border-radius: 4px; transition: border-color 0.2s ease, transform 0.2s ease; }
.reseau:hover { color: var(--parchemin); border-color: var(--or); transform: translateY(-2px); }
.reseau svg { width: 2.4rem; height: 2.4rem; fill: var(--or); margin-bottom: 0.3rem; }
.reseau h3 { font-size: var(--t-2); color: var(--or-pale); }
.reseau .pseudo { font-family: var(--f-label); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--or); }
.reseau p { color: var(--cendre); }
.reseau .suite { font-family: var(--f-label); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: lowercase; color: var(--or); margin-top: 0.3rem; }
@media (max-width: 800px) { .reseaux { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .reseau { transition: none; } .reseau:hover { transform: none; } }

/* ---------------------------------------------------------------- la page des metiers */
.sommaire { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 3.75rem); z-index: 10; background: color-mix(in srgb, var(--bois) 94%, transparent);
  border-bottom: 1px solid var(--trait); backdrop-filter: blur(6px); }
.sommaire .contenu { position: relative; display: flex; gap: 0.4rem; overflow-x: auto; padding-block: 0.55rem; scrollbar-width: none; }
.sommaire .contenu::-webkit-scrollbar { display: none; }
.sommaire a { flex: none; font-family: var(--f-label); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.06em; text-transform: lowercase; text-decoration: none;
  color: var(--cendre); padding: 0.35rem 0.8rem; border: 1px solid transparent; border-radius: 99px; }
.sommaire a:hover, .sommaire a.actif { color: var(--or-pale); border-color: var(--trait); background: var(--bois-clair); }

/* les trois filieres */
.filieres { display: grid; gap: 1.4rem; }
.filiere { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: 1.4rem; border: 1px solid var(--trait); background: var(--nuit); }
.filiere h3 { font-size: var(--t-2); color: var(--or-pale); }
.chaine { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.maillon { display: grid; gap: 0.15rem; padding: 0.65rem 0.9rem; background: var(--bois); border: 1px solid var(--trait); border-radius: 3px; min-width: 0; }
.maillon b { font-family: var(--f-label); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--parchemin); }
.maillon span { font-size: 0.95rem; color: var(--cendre); line-height: 1.35; }
.maillon.joueur { border-color: var(--or); }
.fleche { color: var(--or); font-family: var(--f-label); font-size: 1.3rem; }
@media (max-width: 760px) {
  .filiere { grid-template-columns: minmax(0, 1fr); }
  .chaine { flex-direction: column; align-items: stretch; }
  .fleche { align-self: center; transform: rotate(90deg); line-height: 1; }
}
.legende { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; color: var(--cendre); font-size: 0.95rem; }
.legende i { display: inline-block; width: 0.9rem; height: 0.9rem; border: 1px solid var(--trait); background: var(--bois); vertical-align: -0.1rem; margin-right: 0.4rem; }
.legende i.joueur { border-color: var(--or); }

/* une fiche de metier */
.fiche { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.fiche-cote { position: sticky; top: 8.5rem; display: grid; gap: 1.1rem; padding: 1.6rem; background: linear-gradient(180deg, var(--bois-clair), var(--bois));
  border: 1px solid var(--trait); border-radius: 4px; }
.fiche-cote h2 { font-size: var(--t-3); }
.fiche-cote .devise-metier { font-style: italic; color: var(--or); }
.fiche-cote dl { margin: 0; display: grid; gap: 0.75rem; }
.fiche-cote dt { font-family: var(--f-label); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: lowercase; color: var(--or); }
.fiche-cote dd { margin: 0.1rem 0 0; color: var(--parchemin); font-size: 1.02rem; line-height: 1.45; }
.fiche-corps { display: grid; gap: 2rem; min-width: 0; }
.fiche-corps h3 { font-size: var(--t-2); color: var(--or-pale); margin-bottom: 0.6rem; }
.fiche-corps p + p { margin-top: 0.8rem; }
.journee { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; counter-reset: pas; }
.journee li { counter-increment: pas; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.journee li::before { content: counter(pas); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--or);
  font-family: var(--f-titre); color: var(--or); font-size: 1.15rem; }
.grades { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border: 1px solid var(--trait); }
.grades li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 1rem; }
.grades li + li { border-top: 1px solid var(--trait); }
.grades b { font-family: var(--f-titre); font-weight: 400; font-size: 1.12rem; color: var(--or-pale); }
.grades span { color: var(--cendre); }
@media (max-width: 560px) { .grades li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } }
.liens { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.liens a, .liens span { font-family: var(--f-label); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.04em; padding: 0.3rem 0.75rem; border: 1px solid var(--trait);
  border-radius: 99px; text-decoration: none; color: var(--parchemin); background: var(--bois); }
.liens a:hover { border-color: var(--or); color: var(--or-pale); }
.encadre { padding: 1.1rem 1.3rem; border-left: 2px solid var(--or); background: var(--bois); color: var(--parchemin); }
.encadre b { color: var(--or-pale); font-weight: 600; }
@media (max-width: 920px) { .fiche { grid-template-columns: minmax(0, 1fr); } .fiche-cote { position: static; } }

/* ---------------------------------------------------------------- la page des royaumes */
/* la carte */
.carte-bloc { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.carte-cadre { margin: 0; padding: 0.6rem; background: var(--bois); border: 1px solid var(--trait); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.carte-cadre img { width: 100%; height: auto; aspect-ratio: 1340 / 1060; }
.carte-cadre figcaption { font-family: var(--f-label); font-size: 0.85rem; letter-spacing: 0.06em; color: var(--cendre); padding: 0.55rem 0.2rem 0.1rem; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.points li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.points svg { width: 2.2rem; height: 2.2rem; fill: var(--or); }
.points h3 { font-size: 1.35rem; color: var(--or-pale); margin-bottom: 0.25rem; }
.points p { color: var(--cendre); }
@media (max-width: 900px) { .carte-bloc { grid-template-columns: minmax(0, 1fr); } }

/* un royaume : son etendard d'un cote, son histoire de l'autre (alternes) */
.royaume-fiche { overflow-x: clip; --couleur: var(--or); --clair: color-mix(in srgb, var(--couleur) 55%, var(--parchemin)); }
.royaume-fiche .contenu { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(1.8rem, 5vw, 4rem); align-items: start; }
.royaume-fiche.inverse .contenu { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
.royaume-fiche.inverse .blason { order: 2; }
.blason { position: sticky; top: 8.5rem; isolation: isolate; display: grid; justify-items: center; gap: 1rem; }
.blason::before { content: ""; position: absolute; inset: -10% -25% auto; height: 70%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--couleur) 45%, transparent), transparent); }
.blason img { width: min(100%, 15rem); height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.7)); }
.blason .pays { font-family: var(--f-label); font-weight: 700; letter-spacing: 0.2em; font-size: 0.9rem; color: var(--clair); }
.royaume-texte { display: grid; gap: 1.6rem; min-width: 0; }
.royaume-texte h2 { font-size: var(--t-3); }
.citation { margin: 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 3px solid var(--couleur); font-style: italic; font-size: var(--t-2); color: var(--clair); line-height: 1.35; }
.royaume-texte h3 { font-family: var(--f-label); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: lowercase; color: var(--clair); margin-bottom: 0.5rem; }
.modes { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.modes li { padding: 0.25rem 0.75rem; border-radius: 99px; font-family: var(--f-label); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.04em;
  color: var(--parchemin); background: color-mix(in srgb, var(--couleur) 22%, var(--nuit)); border: 1px solid color-mix(in srgb, var(--couleur) 60%, transparent); }
.faits { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.faits div { background: var(--nuit); padding: 1rem 1.1rem; min-width: 0; }
.partie.sombre .faits div { background: var(--bois); }
.faits dt { font-family: var(--f-label); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: lowercase; color: var(--clair); }
.faits dd { margin: 0.25rem 0 0; font-size: 1.02rem; line-height: 1.45; }
.chemin { padding: 1.2rem 1.4rem; background: color-mix(in srgb, var(--couleur) 12%, var(--nuit)); border: 1px solid color-mix(in srgb, var(--couleur) 45%, transparent); border-radius: 4px; }
.chemin p { color: var(--parchemin); }
@media (max-width: 860px) {
  .royaume-fiche .contenu, .royaume-fiche.inverse .contenu { grid-template-columns: minmax(0, 1fr); }
  .royaume-fiche.inverse .blason { order: 0; }
  .blason { position: relative; top: auto; }
  .blason img { width: min(60%, 13rem); }
}
@media (max-width: 520px) { .faits { grid-template-columns: minmax(0, 1fr); } }

/* les grades et les charges */
.echelles { display: grid; gap: 1.6rem; }
.echelle h3 { font-size: 1.35rem; color: var(--or-pale); margin-bottom: 0.8rem; }
.echelle ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.echelle li { position: relative; padding: 0.9rem 0.8rem; background: var(--bois); border: 1px solid var(--trait); border-radius: 3px; text-align: center; min-width: 0;
  font-family: var(--f-titre); font-size: 1.1rem; color: var(--parchemin); }
.echelle li:last-child { border-color: var(--or); color: var(--or-pale); }
.echelle li small { display: block; font-family: var(--f-texte); font-size: 0.88rem; color: var(--cendre); margin-top: 0.2rem; line-height: 1.3; }
@media (max-width: 760px) { .echelle ol { grid-template-columns: minmax(0, 1fr); } .echelle li { text-align: left; } }
.charges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.charges > div { padding: 1.4rem; background: var(--nuit); border: 1px solid var(--trait); min-width: 0; }
.charges h3 { font-size: 1.3rem; color: var(--or-pale); margin-bottom: 0.7rem; }
.charges ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.charges li b { font-weight: 600; color: var(--parchemin); }
.charges li span { display: block; color: var(--cendre); font-size: 0.98rem; line-height: 1.4; }
@media (max-width: 900px) { .charges { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- la page des regles */
.essentiel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; counter-reset: ess; }
.essentiel li { counter-increment: ess; display: grid; gap: 0.5rem; align-content: start; padding: 1.4rem 1.2rem; min-width: 0;
  background: linear-gradient(180deg, var(--bois-clair), var(--bois)); border: 1px solid var(--trait); border-radius: 4px; }
.essentiel li::before { content: counter(ess, upper-roman); font-family: var(--f-titre); font-size: 1.8rem; line-height: 1; color: var(--or); }
.essentiel h3 { font-size: 1.3rem; color: var(--or-pale); }
.essentiel p { color: var(--cendre); font-size: 1rem; line-height: 1.45; }
@media (max-width: 1100px) { .essentiel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .essentiel { grid-template-columns: minmax(0, 1fr); } }
.chapitre-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1.4rem; align-items: center; margin-bottom: 2.2rem; }
.chapitre-tete .numero { grid-row: span 2; font-family: var(--f-titre); font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 1; color: var(--or);
  padding-right: 1.4rem; border-right: 1px solid var(--trait); }
.chapitre-tete h2 { font-size: var(--t-3); }
.chapitre-tete p { color: var(--cendre); max-width: 46rem; }
.articles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.articles li { background: var(--nuit); padding: 1.4rem 1.5rem; display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.partie.sombre .articles li { background: var(--bois); }
.articles li:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* un nombre impair d'articles : le dernier prend toute la largeur */
.articles .ref { font-family: var(--f-label); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--or); }
.articles h3 { font-size: 1.3rem; color: var(--or-pale); }
.articles p { color: var(--parchemin); }
.articles .exemple { color: var(--cendre); font-style: italic; font-size: 1rem; line-height: 1.45; padding-left: 0.8rem; border-left: 2px solid var(--trait); }
.articles code, .commandes code { font-family: Consolas, "Courier New", monospace; font-size: 0.92em; color: var(--or-pale); background: rgba(216, 169, 76, 0.1);
  padding: 0.05rem 0.35rem; border-radius: 3px; }
@media (max-width: 800px) { .articles { grid-template-columns: minmax(0, 1fr); } .chapitre-tete .numero { padding-right: 1rem; } }
.commandes { margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 1.4rem; }
@media (max-width: 800px) { .commandes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .commandes { grid-template-columns: minmax(0, 1fr); } }
.commandes div { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; }
.commandes dt { margin: 0; }
.commandes dd { margin: 0; color: var(--cendre); font-size: 1rem; }
.sanctions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.sanctions li { padding: 1.1rem 1rem; background: var(--nuit); border: 1px solid var(--trait); border-top: 3px solid var(--sang); min-width: 0; }
.sanctions li:nth-child(1) { border-top-color: var(--or); }
.sanctions li:nth-child(2) { border-top-color: #c27a3a; }
.sanctions b { display: block; font-family: var(--f-titre); font-weight: 400; font-size: 1.2rem; color: var(--or-pale); margin-bottom: 0.2rem; }
.sanctions span { color: var(--cendre); font-size: 0.98rem; line-height: 1.4; }
@media (max-width: 800px) { .sanctions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .sanctions { grid-template-columns: minmax(0, 1fr); } }
.version { margin-top: 1.6rem; font-family: var(--f-label); font-size: 0.85rem; letter-spacing: 0.06em; color: var(--cendre); }

/* ---------------------------------------------------------------- la page « nous rejoindre » */
.prerequis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.prerequis li { display: grid; gap: 0.45rem; align-content: start; padding: 1.4rem 1.2rem; min-width: 0; background: var(--nuit); border: 1px solid var(--trait); border-radius: 4px; }
.partie.sombre .prerequis li { background: var(--bois); }
.prerequis li::before { content: "✦"; color: var(--or); font-size: 1.2rem; line-height: 1; }
.prerequis h3 { font-size: 1.25rem; color: var(--or-pale); }
.prerequis p { color: var(--cendre); font-size: 1rem; line-height: 1.45; }
@media (max-width: 1000px) { .prerequis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .prerequis { grid-template-columns: minmax(0, 1fr); } }
.guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: guide; }
.guide > li { counter-increment: guide; display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.4rem; padding: 1.8rem 0; }
.guide > li + li { border-top: 1px solid var(--trait); }
.guide > li::before { content: counter(guide); display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  border: 1px solid var(--or); box-shadow: inset 0 0 0 4px var(--nuit), inset 0 0 0 5px color-mix(in srgb, var(--or) 40%, transparent);
  font-family: var(--f-titre); font-size: 1.6rem; color: var(--or); }
.guide h3 { font-size: var(--t-2); color: var(--or-pale); margin-bottom: 0.5rem; }
.guide p + p, .guide p + ul, .guide ul + p { margin-top: 0.7rem; }
.guide ul { margin: 0; padding-left: 1.2rem; color: var(--parchemin); }
.guide ul li { margin-top: 0.3rem; }
.guide ul li::marker { color: var(--or); }
.guide .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
@media (max-width: 560px) { .guide > li { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; } }
kbd { display: inline-block; min-width: 1.9em; padding: 0.1rem 0.45rem; text-align: center; font-family: var(--f-label); font-weight: 700; font-size: 0.85em;
  letter-spacing: 0.03em; color: var(--parchemin); background: var(--bois-clair); border: 1px solid var(--trait); border-bottom-width: 3px; border-radius: 4px; }
.touches { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 2.4rem; }
.touches div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.8rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--trait); min-width: 0; }
.touches dt { margin: 0; }
.touches dd { margin: 0; color: var(--parchemin); font-size: 1.02rem; line-height: 1.4; }
@media (max-width: 760px) { .touches { grid-template-columns: minmax(0, 1fr); } }
.faq { display: grid; gap: 0.7rem; }
.faq details { background: var(--nuit); border: 1px solid var(--trait); border-radius: 4px; }
.partie.sombre .faq details { background: var(--bois); }
.faq details[open] { border-color: color-mix(in srgb, var(--or) 55%, var(--trait)); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.2rem;
  font-family: var(--f-titre); font-size: 1.2rem; color: var(--or-pale); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-label); font-size: 1.4rem; color: var(--or); flex: none; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.2rem 1.1rem; color: var(--parchemin); }
.faq details > div p + p { margin-top: 0.6rem; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------------------------------------------------------------- le pied de page */
.pied { border-top: 1px solid var(--trait); background: #0d0a07; }
.pied .contenu { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block: 3rem 2rem; }
.pied h3 { font-family: var(--f-label); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: lowercase; color: var(--or); margin-bottom: 0.7rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pied a { color: var(--cendre); text-decoration: none; }
.pied a:hover { color: var(--or-pale); }
.pied p { color: var(--cendre); font-size: 0.98rem; }
.pied .duel { display: block; width: 200px; max-width: 100%; height: auto; margin-top: 1.2rem; }   /* l'animation du duel (en bas a gauche) */
.pied .mentions { grid-column: 1 / -1; border-top: 1px solid var(--trait); padding-top: 1.2rem; font-size: 0.88rem; }
@media (max-width: 900px) { .pied .contenu { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied .contenu > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pied .contenu { grid-template-columns: minmax(0, 1fr); } }
.pied .sociaux a { display: inline-flex; align-items: center; gap: 0.5rem; }
.pied .sociaux svg { width: 1.05rem; height: 1.05rem; fill: currentColor; flex: none; }

/* l'apparition douce des parties (le contenu reste lisible sans elle) */
@media (prefers-reduced-motion: no-preference) {
  .apparait { animation: apparait 0.9s ease both; }
  @keyframes apparait { from { opacity: 0.001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}