/* ============================================================
   PLANETE RP - Feuille de style principale
   Charte : violets spatiaux sur fond nuit
   ============================================================ */

/* ---------- 1. Variables & reset ---------- */
:root {
  /* Fonds */
  --bg:          #08040f;
  --bg-2:        #0e0720;
  --surface:     #150c28;
  --surface-2:   #1c1136;

  /* Violets de marque */
  --violet:      #8b5cf6;
  --violet-2:    #a855f7;
  --violet-deep: #6d28d9;
  --violet-soft: #c4b5fd;

  /* Texte */
  --text:        #ece7f7;
  --muted:       #a294c2;
  --muted-2:     #7c6f99;

  /* Divers */
  --border:      rgba(168, 85, 247, 0.16);
  --border-hi:   rgba(168, 85, 247, 0.42);
  --radius:      16px;
  --radius-sm:   10px;
  --maxw:        1180px;
  --header-h:    72px;

  --font-title:  "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body:   "Inter", "Segoe UI", system-ui, sans-serif;
}

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

/* L'attribut `hidden` doit toujours l'emporter. Le navigateur le traduit par
   un simple `display: none`, que la moindre regle de ce fichier posant un
   `display` (flex, grid, block...) vient annuler - l'element reste alors
   visible alors que le script le croit masque. Beaucoup de pages s'appuient
   sur cet attribut : les onglets du reglement, les resultats de recherche,
   les etats des pages de candidature et de l'espace staff. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* "clip" et non "hidden" : "hidden" ferait du body un conteneur de
     defilement, ce qui empecherait la barre d'onglets de rester collee. */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1em; }
a { color: var(--violet-2); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--violet-soft); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- 2. Utilitaires de mise en page ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

.container--pyramide { max-width: 1680px; }

.section { padding: 96px 0; position: relative; }
.section--tight { padding: 64px 0; }
/* Les onglets suivent immediatement l'en-tete de page : pas d'espace en haut. */
.section--rules { padding: 0 0 72px; }
.section--alt {
  background: linear-gradient(180deg, transparent, var(--bg-2) 12%, var(--bg-2) 88%, transparent);
}

.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-title);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violet-2);
  padding: 6px 14px;
  border: 1px solid var(--border-hi);
  border-radius: 100px;
  background: rgba(139, 92, 246, .08);
  margin-bottom: 18px;
}

.gradient-text {
  background: linear-gradient(100deg, #fff 10%, var(--violet-soft) 45%, var(--violet-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 3. Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .97rem;
  padding: 13px 26px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }

.btn--primary {
  background: linear-gradient(120deg, var(--violet-deep), var(--violet-2));
  color: #fff;
  box-shadow: 0 8px 30px rgba(124, 58, 237, .38);
}
.btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 38px rgba(139, 92, 246, .55);
}

.btn--ghost {
  background: rgba(255, 255, 255, .04);
  border-color: var(--border-hi);
  color: var(--text);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  color: #fff;
  background: rgba(139, 92, 246, .16);
  border-color: var(--violet);
  transform: translateY(-2px);
}

/* Vote Top Serveurs : reprend l'orange du site de vote pour qu'on le
   reconnaisse, et qu'il ressorte sur le fond violet. */
.btn--vote {
  background: linear-gradient(120deg, #ff5500, #ff7a00);
  color: #fff;
  box-shadow: 0 8px 30px rgba(255, 85, 0, .32);
}
.btn--vote:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 38px rgba(255, 110, 0, .5);
}

.btn--sm { padding: 9px 18px; font-size: .88rem; }

/* ---------- 4. Fond etoile ---------- */
#stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.aurora {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
}
.aurora--1 {
  top: -180px; left: -140px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(109, 40, 217, .55), transparent 68%);
}
.aurora--2 {
  top: 22%; right: -220px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(168, 85, 247, .32), transparent 68%);
}

/* Planete en rotation (dessinee par assets/js/planete.js).
   Elle appartient au ciel : elle ne defile pas avec la page. */
.planet {
  position: fixed;
  z-index: -1;
  left: 8vw;
  top: 43%;
  width: clamp(310px, 30vw, 600px);
  aspect-ratio: 660 / 520;
  opacity: .95;
  pointer-events: none;
  user-select: none;
  animation: drift 110s ease-in-out infinite alternate;
}

/* Derive de quelques pixels : le ciel n'est jamais tout a fait immobile. */
@keyframes drift {
  from { transform: translateY(-50%) translate3d(0, 0, 0); }
  to   { transform: translateY(-50%) translate3d(-16px, 12px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .planet { transform: translateY(-50%); }
}

/* ---------- 5. En-tete / navigation ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  /* Opacite volontairement elevee : le flou n'est pas supporte partout,
     le texte qui defile dessous doit rester illisible. */
  background: rgba(8, 4, 15, .94);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.header .container {
  /* L'en-tete porte plus que le contenu des pages : la marque, sept entrees,
     le bouton Discord et la pastille du compte. On lui laisse un gabarit plus
     large que les 1180 px du corps de page, sinon tout se tasse.

     1400 et non 1280 : en joueur connecte, l'entree "Deposer un dossier"
     porte le contenu a 1232 px, soit exactement la place disponible dans un
     gabarit de 1280. L'ecart entre le logo et "Accueil" tombait alors a zero,
     meme sur grand ecran. */
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand img {
  width: 40px; height: 40px;
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, .7));
}
.brand span {
  white-space: nowrap;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: .04em;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  /* Un libelle ne doit jamais se casser en deux lignes dans la barre. */
  white-space: nowrap;
  color: var(--muted);
  font-size: .94rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 100px;
  transition: color .2s ease, background .2s ease;
}
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav a.is-active { color: var(--violet-soft); background: rgba(139, 92, 246, .12); }

/* Le bouton Discord du menu ne sert qu'en version mobile : en desktop,
   celui de la barre d'en-tete fait deja le travail. */
.nav .btn { display: none; }

.header-actions { display: flex; align-items: center; gap: 12px; }

/* Compte connecte dans l'en-tete : avatar, pseudo, et de quoi sortir. */
.compte-bulle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 10px;
  max-width: 230px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  border-radius: 100px;
}
.compte-bulle__avatar {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
}
/* Un pseudo Discord peut etre tres long : il se coupe plutot que de pousser
   le bouton de deconnexion hors de l'ecran. */
.compte-bulle__pseudo {
  font-family: var(--font-title);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compte-bulle__sortie {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.compte-bulle__sortie:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
.compte-bulle__sortie:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }
.compte-bulle__sortie svg { width: 15px; height: 15px; }

.burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  position: relative;
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: background .2s ease;
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute; left: 0;
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.burger.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 60px) 0 80px;
  text-align: center;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 200px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}

.hero-logo {
  width: 118px; height: 118px;
  margin: 0 auto 28px;
  filter: drop-shadow(0 0 34px rgba(139, 92, 246, .85));
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.hero h1 {
  font-size: clamp(2.9rem, 8.5vw, 5.4rem);
  letter-spacing: -0.03em;
  margin-bottom: .25em;
}

.hero-tagline {
  font-family: var(--font-title);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--violet-soft);
  font-weight: 500;
  margin-bottom: 1.1em;
}

.hero-text {
  max-width: 620px;
  margin: 0 auto 2.4em;
  color: var(--muted);
  font-size: 1.06rem;
}

.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Largeur commune : sans elle, un libelle court donne un bouton plus petit
   que ses voisins et la rangee parait bancale. */
.hero-actions .btn { min-width: 232px; }

.hero-scroll {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  color: var(--muted-2);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-family: var(--font-title);
  animation: bob 2.4s ease-in-out infinite;
  z-index: 1;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); opacity: .6; }
  50%      { transform: translate(-50%, 8px); opacity: 1; }
}

/* ---------- 7. Bandeau statistiques ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: var(--surface); padding: 28px 20px; text-align: center; }
.stat-value {
  font-family: var(--font-title);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------- 8. Cartes ---------- */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--border-hi);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.card:hover::before { opacity: 1; }

.card-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(139, 92, 246, .25), rgba(168, 85, 247, .08));
  border: 1px solid var(--border-hi);
  margin-bottom: 18px;
  font-size: 1.4rem;
}
.card h3 { font-size: 1.16rem; margin-bottom: .5em; }
.card p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- 9. Etapes "Nous rejoindre" ---------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 26px 28px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -20px; left: 26px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-family: var(--font-title);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(140deg, var(--violet-deep), var(--violet-2));
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(124, 58, 237, .45);
}
.step h3 { font-size: 1.1rem; margin: 10px 0 .5em; }
.step p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- 10. Bloc CTA Discord ---------- */
.cta {
  position: relative;
  text-align: center;
  padding: 68px 32px;
  border-radius: 24px;
  border: 1px solid var(--border-hi);
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 246, .28), transparent 62%),
    linear-gradient(160deg, var(--surface-2), var(--bg-2));
  overflow: hidden;
}
.cta h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.cta p { color: var(--muted); max-width: 540px; margin: 0 auto 28px; }

/* ---------- 11. Page Reglement ---------- */
.page-hero {
  /* En-tete de page volontairement compact : sur une page de consultation,
     le contenu doit apparaitre sans avoir a defiler. */
  padding: calc(var(--header-h) + 36px) 0 28px;
  text-align: center;
  position: relative;
}
.page-hero h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.page-hero p { color: var(--muted); max-width: 640px; margin: 0 auto; }

/* Recherche plein texte. Le champ n'est pas colle en haut : il sert au
   depart d'une recherche, alors que la barre d'onglets accompagne la
   lecture. Le raccourci Ctrl+K le ramene sous les yeux a tout moment. */
.rule-search { margin-bottom: 14px; }

.rule-search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 18px;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.rule-search__field:focus-within {
  border-color: var(--border-hi);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .15);
}

.rule-search__icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--muted-2);
}
.rule-search__field:focus-within .rule-search__icon { color: var(--violet-2); }

.rule-search input {
  /* Base nulle : le champ occupe toute la largeur restante quel que soit
     le texte saisi. */
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
}
.rule-search input::placeholder { color: var(--muted-2); }
/* Chrome pose sa propre croix dans les champs de recherche : la notre
   suffit, et elle est atteignable au clavier. */
.rule-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.rule-search__clear {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-right: 8px;
  flex-shrink: 0;
  color: var(--muted);
  background: rgba(255, 255, 255, .05);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.rule-search__clear:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
.rule-search__clear:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }
.rule-search__clear svg { width: 15px; height: 15px; }

/* Cette ligne tombe pile devant la planete, dont le bord est clair : posee a
   nu elle s'y dissoudrait. D'ou la pastille sombre, dans la meme famille que
   les autres etiquettes de la page. */
.rule-search__count {
  display: inline-block;
  margin: 10px 4px 0;
  padding: 3px 14px;
  font-size: .88rem;
  color: var(--muted);
  background: rgba(8, 4, 15, .62);
  border-radius: 100px;
}
.rule-search__count strong { color: var(--violet-soft); font-weight: 600; }

/* Sous-onglets du reglement */
.tabs {
  display: flex;
  gap: 6px;
  padding: 7px;
  margin-bottom: 32px;
  /* La barre suit le lecteur : avec une vingtaine d'articles par rubrique,
     changer d'onglet ne doit pas obliger a remonter en haut de page. */
  position: sticky;
  /* Collee a l'en-tete, sans interstice : le moindre espace laisserait
     defiler une tranche de texte entre les deux. */
  top: var(--header-h);
  z-index: 50;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: 0 10px 30px rgba(8, 4, 15, .55);
  /* Sur ecran etroit la barre defile plutot que de se casser en deux lignes. */
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  /* Base nulle : les onglets se partagent la largeur a parts egales, quelle
     que soit la longueur du libelle. Sans min-width, aucun ne descend sous
     son texte : si la place manque, la barre defile plutot que de tasser. */
  flex: 1 1 0;
  white-space: nowrap;
  font-family: var(--font-title);
  font-size: .93rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 12px 20px;
  cursor: pointer;
  transition: color .2s ease, background .25s ease, border-color .25s ease;
}
.tab:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.tab:focus-visible {
  outline: 2px solid var(--violet-2);
  outline-offset: 2px;
}
.tab.is-active {
  color: #fff;
  background: linear-gradient(120deg, var(--violet-deep), var(--violet-2));
  box-shadow: 0 6px 22px rgba(124, 58, 237, .40);
}

.tab-panel[hidden] { display: none; }
.tab-panel { animation: panelIn .35s ease; }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Pendant une recherche, les resultats remplacent les rubriques : la
   selection d'onglet est conservee telle quelle et revient intacte des que
   le champ est vide. Le selecteur est volontairement plus specifique que
   `.tab-panel[hidden]`, qui reste en place dessous. */
.section--rules.is-searching .tab-panel { display: none; }

/* Les resultats traversent toutes les rubriques : pendant une recherche,
   aucun onglet ne doit se presenter comme celui qu'on est en train de lire.
   La barre reste cliquable - c'est le retour a la lecture normale. */
.section--rules.is-searching .tab.is-active {
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}
.section--rules.is-searching .tab.is-active:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .05);
}

.search-results { display: grid; gap: 16px; animation: panelIn .35s ease; }

.search-hit {
  display: block;
  padding: 22px 24px;
  color: var(--muted);
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.search-hit:hover,
.search-hit:focus-visible {
  color: var(--muted);
  border-color: var(--border-hi);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(8, 4, 15, .5);
}
.search-hit:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }

.search-hit__tag {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-title);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet-2);
  background: rgba(139, 92, 246, .12);
  border: 1px solid var(--border-hi);
  border-radius: 100px;
  padding: 3px 11px;
}
.search-hit__title {
  display: block;
  font-family: var(--font-title);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.search-hit__num { color: var(--violet-2); }
.search-hit__text {
  display: block;
  font-size: .93rem;
  line-height: 1.6;
}

/* Aucun resultat */
.search-empty {
  text-align: center;
  padding: 56px 30px;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius);
}
.search-empty h2 { font-size: 1.25rem; margin-bottom: .4em; }
.search-empty p { color: var(--muted-2); margin: 0; font-size: .95rem; }

/* Termes trouves : dans l'extrait d'un resultat comme dans l'article une
   fois ouvert. */
.search-hit mark,
.rule-block mark {
  color: var(--text);
  background: rgba(168, 85, 247, .32);
  border-radius: 3px;
  /* La marge autour du mot est dessinee par une ombre plutot que par du
     remplissage : le surlignage ne tombe qu'au milieu d'un mot ("otage"
     dans "otages"), et une vraie marge y ouvrirait un blanc. */
  padding: 0;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, .32);
}

/* L'article rejoint depuis un resultat s'annonce brievement : sur une page
   longue, le lecteur doit voir ou il vient d'atterrir. */
.rule-block.is-target {
  border-color: var(--border-hi);
  animation: hitLand 2.2s ease forwards;
}
@keyframes hitLand {
  0%, 55% { box-shadow: 0 0 0 2px rgba(168, 85, 247, .45), 0 0 34px rgba(139, 92, 246, .3); }
  100%    { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0), 0 0 0 rgba(139, 92, 246, 0); }
}

/* Rubrique en attente de contenu */
.soon {
  text-align: center;
  padding: 72px 30px;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius);
}
.soon-icon {
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  margin: 0 auto 20px;
  font-size: 1.7rem;
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(139, 92, 246, .25), rgba(168, 85, 247, .08));
  border: 1px solid var(--border-hi);
}
.soon h2 { font-size: 1.5rem; margin-bottom: .4em; }
.soon p { color: var(--muted-2); margin: 0; }

.rule-block {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 30px;
  margin-bottom: 26px;
  /* Un lien vers #fear-rp doit s'arreter sous la barre d'onglets collee,
     pas derriere elle. Cette marge s'ajoute au scroll-padding declare sur
     html : il suffit donc de compter la hauteur de la barre. */
  scroll-margin-top: 54px;
}
.rule-block > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.4rem;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
/* Un article peut etre redige en paragraphes plutot qu'en liste. */
.rule-block p {
  color: var(--muted);
  font-size: .97rem;
  margin-bottom: 1em;
}
.rule-block p:last-child { margin-bottom: 0; }
.rule-block strong { color: var(--text); font-weight: 600; }

.rule-block > h2 .num {
  font-size: .8rem;
  font-weight: 700;
  color: var(--violet-2);
  background: rgba(139, 92, 246, .14);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  padding: 4px 10px;
}

.rule-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: .97rem;
}
.rule-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 10px rgba(139, 92, 246, .8);
}
.rule-list li strong { color: var(--text); font-weight: 600; }
.rule-list li:last-child { margin-bottom: 0; }

/* Une liste inseree au milieu d'un article a besoin d'air avant le
   paragraphe qui la suit ; en fin d'article, elle n'en a pas. */
.rule-block .rule-list { margin-bottom: 1.2em; }
.rule-block .rule-list:last-child { margin-bottom: 0; }

.callout {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  /* Teinte violette posee sur un fond opaque : l'encart passe devant la
     planete sans que le decor traverse le texte. */
  background: linear-gradient(160deg, rgba(168, 85, 247, .13), rgba(168, 85, 247, .05)), var(--surface);
  border: 1px solid var(--border-hi);
  border-left: 3px solid var(--violet);
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: 26px;
}
.callout strong { color: var(--text); }
.callout--warn {
  background: linear-gradient(160deg, rgba(244, 114, 60, .12), rgba(244, 114, 60, .04)), var(--surface);
  border-color: rgba(244, 114, 60, .3);
  border-left-color: #f4723c;
}

/* Tableau des sanctions */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .94rem; }
thead th {
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-title);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
}
tbody td { padding: 14px 18px; border-top: 1px solid var(--border); color: var(--muted); }
tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .015); }
tbody td:first-child { color: var(--text); font-weight: 500; }

/* ---------- 11 bis. Pyramide du plateau illegal ----------
   Cinq bandes de pierre sombre, chacune cernee d'un filet d'or et separee
   des autres par un intervalle noir. Les matieres changent de niveau en
   niveau ; l'or, lui, ne quitte jamais les aretes. */
.pyramide {
  display: block;
  position: relative;

  --or-vif:   #d9c187;
  --or:       #a8873a;
  --or-fonce: #5c4310;
}

.pyramide-scene { position: relative; }

/* Devises gravees de part et d'autre. */
.devise {
  position: absolute;
  top: 26%;
  font-family: "Cinzel", Georgia, serif;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 2.1;
  text-transform: uppercase;
  color: rgba(190, 156, 78, .72);
  /* La planete passe derriere : sans ce halo, la gravure disparait dessus. */
  text-shadow: 0 0 12px rgba(6, 4, 13, .95), 0 1px 3px rgba(6, 4, 13, 1);
}
.devise--g { left: 0; text-align: left; }
.devise--d { right: 0; text-align: right; }
.devise::after {
  content: "";
  display: block;
  width: 1px; height: 44px;
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(168, 135, 58, .42), transparent);
}
.devise--d::after { margin-left: auto; }

.pyramide-forme {
  position: relative;
  width: min(100%, 800px);
  margin-inline: auto;
  padding-top: 56px;
}

/* ---------- La couronne ---------- */
.couronne {
  position: absolute;
  left: 50%; top: 0;
  width: 80px;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 12px rgba(168, 135, 58, .34));
  z-index: 3;
}

/* ---------- Les bandes ---------- */
.paliers {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Les bandes ne se touchent pas : l'intervalle sombre detache chaque
     niveau et laisse respirer les filets d'or. */
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.paliers li { display: block; }

.palier {
  position: relative;
  display: grid;
  place-items: end center;
  width: 100%;
  border: 0;
  padding: 0 0 14px;
  cursor: pointer;
  background: transparent;
  transition: filter .3s ease;
}

/* Deux decoupes superposees : la grande porte l'or, la petite la pierre.
   Ce qui depasse entre les deux forme le filet, y compris sur les cotes
   obliques - une simple bordure ne suivrait pas la pente. */
.palier-avant {
  position: absolute;
  inset: 0;
  clip-path: var(--forme);
  background: linear-gradient(180deg, var(--or-vif), var(--or) 42%, var(--or-fonce));
  filter: drop-shadow(0 0 8px rgba(168, 135, 58, .16));
  transition: filter .3s ease;
}
.palier-avant::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--forme-interne);
  background: var(--matiere);
}
/* Grain de pierre : sans lui, chaque bande resterait un aplat. */
.palier-avant::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--forme-interne);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .2;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.palier-texte {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-inline: 12px;
  max-width: 88%;
}

.palier-nom {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: .07em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #efe2be 4%, #c6a457 48%, #8a6a20 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .95));
}

.palier-mots {
  position: relative;
  padding-top: 9px;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(.5rem, .92vw, .66rem);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #d5c9a8;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.palier-mots::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 108%; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(168, 135, 58, .55), transparent);
}

/* Pente constante d'une bande a l'autre : la pyramide se lit d'un trait.
   La decoupe interne est rentree de 3 px pour degager le filet d'or. */
/* Le sommet loge son texte en son milieu : pose au fond comme les autres
   bandes, il collait a la pointe du filet. */
.palier--1 {
  place-items: center;
  padding: 78px 0 0;
  height: 300px;
  --forme: polygon(50% 0, 68.94% 100%, 31.06% 100%);
  --forme-interne: polygon(50% 10px, calc(68.94% - 6px) calc(100% - 3px), calc(31.06% + 6px) calc(100% - 3px));
  --matiere: radial-gradient(ellipse at 50% 120%, #241a3d, #100a20 55%, #06040d);
}
.palier--2 {
  height: 116px;
  --forme: polygon(30.62% 0, 69.38% 0, 76.7% 100%, 23.3% 100%);
  --forme-interne: polygon(calc(30.62% + 6px) 3px, calc(69.38% - 6px) 3px, calc(76.7% - 6px) calc(100% - 3px), calc(23.3% + 6px) calc(100% - 3px));
  --matiere: radial-gradient(ellipse at 50% 130%, #4a1424, #2c0a14 55%, #14040a);
}
.palier--3 {
  height: 116px;
  --forme: polygon(22.85% 0, 77.15% 0, 84.47% 100%, 15.53% 100%);
  --forme-interne: polygon(calc(22.85% + 6px) 3px, calc(77.15% - 6px) 3px, calc(84.47% - 6px) calc(100% - 3px), calc(15.53% + 6px) calc(100% - 3px));
  --matiere: radial-gradient(ellipse at 50% 130%, #23232c, #15151c 55%, #0a0a0e);
}
.palier--4 {
  height: 116px;
  --forme: polygon(15.09% 0, 84.91% 0, 92.23% 100%, 7.77% 100%);
  --forme-interne: polygon(calc(15.09% + 6px) 3px, calc(84.91% - 6px) 3px, calc(92.23% - 6px) calc(100% - 3px), calc(7.77% + 6px) calc(100% - 3px));
  --matiere: radial-gradient(ellipse at 50% 130%, #57400f, #332407 55%, #1a1204);
}
.palier--5 {
  height: 116px;
  --forme: polygon(7.32% 0, 92.68% 0, 100% 100%, 0 100%);
  --forme-interne: polygon(calc(7.32% + 6px) 3px, calc(92.68% - 6px) 3px, calc(100% - 6px) calc(100% - 3px), 6px calc(100% - 3px));
  --matiere: radial-gradient(ellipse at 50% 130%, #163321, #0d2016 55%, #061009);
}

.palier:hover .palier-avant { filter: brightness(1.2) drop-shadow(0 0 12px rgba(168, 135, 58, .3)); }
.palier:focus-visible { outline: 2px solid var(--or); outline-offset: -8px; }

/* Bande choisie : l'or s'allume franchement. */
.palier.is-active .palier-avant {
  filter: brightness(1.32) drop-shadow(0 0 16px rgba(217, 193, 135, .38));
}
.palier.is-active .palier-nom { filter: drop-shadow(0 0 10px rgba(207, 174, 92, .5)); }

/* Socle : le trait d'or et la lueur au sol. */
.pyramide-base {
  position: relative;
  display: block;
  margin-top: 28px;
  padding-top: 20px;
  font-family: "Cinzel", Georgia, serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(168, 135, 58, .6);
}
.pyramide-base::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 76%; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(168, 135, 58, .45), transparent);
}
.pyramide-base::after {
  content: "";
  position: absolute;
  left: 50%; top: -40px;
  width: 96%; height: 58px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(168, 135, 58, .13), transparent 68%);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
}

/* ---------- Detail du niveau ---------- */
.pyramide-detail {
  position: relative;
  min-height: 240px;
  max-width: 760px;
  margin: 52px auto 0;
}

.niveau[hidden] { display: none; }
.niveau {
  animation: niveauIn .38s ease;
  /* La planete passe derriere le detail : sans fond, le texte s y perd. */
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-left: 2px solid rgba(168, 135, 58, .45);
  border-radius: var(--radius);
  padding: 26px 26px 26px 24px;
}
@keyframes niveauIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

.niveau-rang {
  display: inline-block;
  font-family: "Cinzel", Georgia, serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 10px;
}
.niveau h2 {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.5rem, 3.1vw, 2.1rem);
  letter-spacing: .03em;
  margin-bottom: .5em;
}
.niveau p { color: var(--muted); margin-bottom: 1em; }
.niveau p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .niveau { animation: none; }
}

/* Les devises encadrent la pyramide tant qu'il y a la place ; en dessous
   elles passeraient sur les bandes. */
@media (max-width: 1200px) {
  .devise { display: none; }
}

/* Au large, le detail se range a droite de la pyramide. Les deux colonnes
   laterales sont egales : la pyramide reste au centre exact de la page. */
@media (min-width: 1360px) {
  .pyramide {
    display: grid;
    grid-template-columns: 1fr 2.6fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .pyramide-scene  { grid-column: 2; grid-row: 1; }

  /* Ici seulement la pyramide se retrecit avec la fenetre : passe 1500 px
     elle est a pleine largeur et la devise du sommet retrouve la taille
     des autres bandes. */
  .palier--1 .palier-mots { font-size: clamp(.5rem, .7vw, .66rem); }
  .pyramide-detail {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    max-width: 400px;
    justify-self: start;
  }
}


@media (max-width: 900px) {
  .pyramide-detail { min-height: 0; margin-top: 40px; }

  /* La pente ne change pas, mais la pyramide retrecit : chaque bande n a
     plus que sa largeur locale, et les devises doivent tenir dedans. */
  .palier-nom { font-size: clamp(.95rem, 2.4vw, 1.4rem); }
  .palier-mots { white-space: normal; line-height: 1.7; }
  /* Le texte du sommet est desormais a mi-hauteur : la ou le triangle ne
     fait que la moitie de sa base. */
  .palier--1 .palier-texte { max-width: 20%; }
  .palier--2 .palier-texte { max-width: 34%; }
  .palier--3 .palier-texte { max-width: 48%; }
  .palier--4 .palier-texte { max-width: 62%; }
  .palier--5 .palier-texte { max-width: 78%; }
}

@media (max-width: 560px) {
  /* Cotes droits obliges : sur 375 px un sommet court serait minuscule.
     On l'allonge pour que sa base reste large.*/
  .palier--1 {
    height: 270px;
    --forme: polygon(50% 0, 72.43% 100%, 27.57% 100%);
    --forme-interne: polygon(50% 8px, calc(72.43% - 5px) calc(100% - 3px), calc(27.57% + 5px) calc(100% - 3px));
  }
  .palier--2 {
    height: 76px;
    --forme: polygon(27% 0, 73% 0, 79.32% 100%, 20.68% 100%);
    --forme-interne: polygon(calc(27% + 5px) 3px, calc(73% - 5px) 3px, calc(79.32% - 5px) calc(100% - 3px), calc(20.68% + 5px) calc(100% - 3px));
  }
  .palier--3 {
    height: 76px;
    --forme: polygon(20.1% 0, 79.9% 0, 86.21% 100%, 13.79% 100%);
    --forme-interne: polygon(calc(20.1% + 5px) 3px, calc(79.9% - 5px) 3px, calc(86.21% - 5px) calc(100% - 3px), calc(13.79% + 5px) calc(100% - 3px));
  }
  .palier--4 {
    height: 76px;
    --forme: polygon(13.21% 0, 86.79% 0, 93.1% 100%, 6.9% 100%);
    --forme-interne: polygon(calc(13.21% + 5px) 3px, calc(86.79% - 5px) 3px, calc(93.1% - 5px) calc(100% - 3px), calc(6.9% + 5px) calc(100% - 3px));
  }
  .palier--5 {
    height: 76px;
    --forme: polygon(6.31% 0, 93.69% 0, 100% 100%, 0 100%);
    --forme-interne: polygon(calc(6.31% + 5px) 3px, calc(93.69% - 5px) 3px, calc(100% - 5px) calc(100% - 3px), 5px calc(100% - 3px));
  }
  /* Cotes droits obligent : chaque bande n a que sa propre largeur locale. */
  .palier-texte { gap: 5px; }
  .palier--1 .palier-texte { max-width: 24%; }
  .palier--2 .palier-texte { max-width: 42%; }
  .palier--3 .palier-texte { max-width: 55%; }
  .palier--4 .palier-texte { max-width: 68%; }
  .palier--5 .palier-texte { max-width: 80%; }
  .palier-mots {
    white-space: normal;
    letter-spacing: .06em;
    font-size: .48rem;
    line-height: 1.6;
  }
  .couronne { width: 64px; }
}

/* ---------- 12. Page Staff ---------- */
.staff-group { margin-bottom: 64px; }
.staff-group-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
}
.staff-group-head h2 { font-size: 1.5rem; margin: 0; white-space: nowrap; }
.staff-group-head .line { flex: 1; height: 1px; }
/* Les deux traits s'effacent en s'eloignant du titre. */
.staff-group-head .line:first-child { background: linear-gradient(90deg, transparent, var(--border-hi)); }
.staff-group-head .line:last-child  { background: linear-gradient(90deg, var(--border-hi), transparent); }
.staff-group-head .count {
  font-size: .8rem;
  color: var(--muted-2);
  font-family: var(--font-title);
  white-space: nowrap;
}

/* Les fiches gardent une largeur constante et restent centrees, meme
   quand un groupe ne compte qu'un seul membre. */
.staff-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.staff-row .staff-card {
  flex: 1 1 260px;
  max-width: 320px;
}

.staff-card {
  background: linear-gradient(165deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.staff-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-hi);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

.avatar {
  width: 88px; height: 88px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.9rem;
  color: #fff;
  background: linear-gradient(140deg, var(--violet-deep), var(--violet-2));
  border: 2px solid rgba(255, 255, 255, .12);
  box-shadow: 0 0 26px rgba(139, 92, 246, .4);
  overflow: hidden;
}
/* Photo ou avatar anime : le cercle vient du conteneur, l'image remplit
   tout l'espace et se recadre au centre. */
.avatar img,
.avatar video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Deux membres peuvent partager la meme initiale : ces variantes evitent
   deux pastilles rigoureusement identiques cote a cote. */
.avatar--b { background: linear-gradient(140deg, #4c1d95, #8b5cf6); }
.avatar--c { background: linear-gradient(140deg, #7c3aed, #c084fc); }

.staff-card h3 { font-size: 1.08rem; margin-bottom: 4px; }
.staff-role {
  display: inline-block;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-2);
  background: rgba(139, 92, 246, .12);
  border: 1px solid var(--border-hi);
  border-radius: 100px;
  padding: 3px 12px;
  margin-bottom: 12px;
}
.staff-card p { color: var(--muted); font-size: .9rem; margin: 0; }
.staff-tag {
  display: block;
  margin-top: 12px;
  font-size: .82rem;
  color: var(--muted-2);
  font-family: var(--font-title);
}

/* ---------- 12 bis. Compte, formulaires et espace staff ---------- */

/* Une colonne de lecture : un formulaire long est penible a remplir quand
   les champs font toute la largeur de l'ecran. */
.container--etroit { max-width: 780px; }

.chargement { color: var(--muted-2); text-align: center; padding: 40px 0; }

/* Le bloc .soon sert d'ecran d'etat (connexion, refus, confirmation) : il
   lui manquait juste une place pour ses boutons. */
.soon-actions { margin: 24px 0 0; }

/* ----- Formulaires ----- */

.bloc-champs {
  padding: 28px 26px;
  margin: 0 0 22px;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bloc-champs legend {
  padding: 4px 14px;
  font-family: var(--font-title);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violet-2);
  background: rgba(139, 92, 246, .1);
  border: 1px solid var(--border-hi);
  border-radius: 100px;
}

.champ { margin-bottom: 20px; }
.champ:last-child { margin-bottom: 0; }

.champ label,
.champ__etiquette {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-title);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
}

.champ input,
.champ select,
.champ textarea,
.dossier__note {
  width: 100%;
  padding: 12px 15px;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text);
  background: rgba(8, 4, 15, .55);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ textarea,
.dossier__note { resize: vertical; min-height: 90px; }

.champ input::placeholder,
.champ textarea::placeholder,
.dossier__note::placeholder { color: var(--muted-2); }

.champ input:focus,
.champ select:focus,
.champ textarea:focus,
.dossier__note:focus {
  outline: none;
  border-color: var(--border-hi);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .15);
}

/* Le navigateur signale lui-meme un champ mal rempli, mais seulement une
   fois qu'on a tente d'envoyer : sans :not(:placeholder-shown), tous les
   champs vides seraient rouges des l'arrivee sur la page. */
.champ input:invalid:not(:placeholder-shown),
.champ textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(244, 114, 60, .55);
}

.champ select {
  /* La fleche native reste sombre sur certains systemes : on la remplace. */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a294c2' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  padding-right: 40px;
}

.champ__aide {
  margin: 8px 0 0;
  font-size: .85rem;
  color: var(--muted-2);
}

.champ-duo { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.champ-duo .champ { margin-bottom: 20px; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.form-actions .champ__aide { margin: 0; }
.form-actions button:disabled { opacity: .6; cursor: progress; }


/* ----- Les deux portes de la page Candidature ----- */

.portes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.porte {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  text-align: center;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease;
}
.porte:hover { border-color: var(--border-hi); transform: translateY(-2px); }

.porte__icone {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin: 0 auto 18px;
  font-size: 1.5rem;
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(139, 92, 246, .25), rgba(168, 85, 247, .08));
  border: 1px solid var(--border-hi);
}
.porte h2 { font-size: 1.2rem; margin-bottom: .5em; }

.porte__compte {
  margin: 0 0 10px;
  font-family: var(--font-title);
  font-size: .88rem;
  font-weight: 600;
  color: var(--violet-2);
}
.porte__compte:empty { display: none; }

.porte__texte {
  color: var(--muted);
  font-size: .93rem;
  /* Pousse le bouton en bas : les deux portes alignent leurs boutons meme
     quand leurs textes n'ont pas la meme longueur. */
  flex: 1 1 auto;
  margin-bottom: 22px;
}

.porte .btn { align-self: center; }
.porte .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Retour vers l'accueil de la page */
.retour {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 16px 8px 12px;
  font-family: var(--font-title);
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.retour:hover { color: var(--text); border-color: var(--border-hi); }
.retour:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }

/* ----- Dossiers de candidature ----- */

.dossiers { display: grid; gap: 18px; margin-top: 24px; }

.dossier {
  padding: 24px 26px;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: opacity .2s ease;
}
/* Le temps que le serveur reponde, la carte s'estompe et ne repond plus :
   deux clics sur "Accepter" ne doivent pas partir en meme temps. */
.dossier.est-occupe { opacity: .5; pointer-events: none; }

.dossier__entete {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dossier__entete h3 { margin: 0; font-size: 1.2rem; }

.statut {
  font-family: var(--font-title);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid;
}
.statut--en_attente {
  color: #f4b03c;
  background: rgba(244, 176, 60, .12);
  border-color: rgba(244, 176, 60, .35);
}
.statut--acceptee {
  color: #4ade80;
  background: rgba(74, 222, 128, .12);
  border-color: rgba(74, 222, 128, .35);
}
.statut--refusee {
  color: #f4723c;
  background: rgba(244, 114, 60, .12);
  border-color: rgba(244, 114, 60, .35);
}

.dossier__meta {
  margin: 10px 0 0;
  font-size: .88rem;
  color: var(--muted-2);
}

.dossier__details { margin-top: 18px; }
.dossier__details summary {
  display: inline-block;
  font-family: var(--font-title);
  font-size: .88rem;
  font-weight: 600;
  color: var(--violet-2);
  cursor: pointer;
  padding: 6px 0;
}
.dossier__details summary:hover { color: var(--violet-soft); }
.dossier__details[open] summary { margin-bottom: 8px; }

.dossier__section { margin-top: 18px; }
.dossier__section h4 {
  margin: 0 0 8px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.dossier__texte p {
  margin: 0 0 .7em;
  font-size: .94rem;
  color: var(--muted);
}
.dossier__texte p:last-child { margin-bottom: 0; }

.dossier__decision {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.dossier__boutons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.dossier__signature {
  margin: 14px 0 0;
  font-size: .85rem;
  color: var(--muted-2);
  font-style: italic;
}

/* La reponse du staff, vue par le groupe sur sa page de candidature. */
.dossier__reponse {
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(139, 92, 246, .08);
  border-left: 3px solid var(--violet);
  border-radius: var(--radius-sm);
}
.dossier__reponse h4 {
  margin: 0 0 6px;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet-2);
}
.dossier__reponse p { margin: 0; font-size: .94rem; color: var(--muted); }
.dossier--mien .dossier__decision { display: none; }

/* Compteur dans les onglets de filtre */
.tab__total {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: .76rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, .1);
}
.tab.is-active .tab__total { background: rgba(0, 0, 0, .25); }


/* ---------- 12 ter. Le secret (fragments, pave, explosion) ---------- */

/* Un fragment doit se remarquer sans se signaler : il se confond avec les
   etoiles du fond tant qu'on ne le survole pas. Trop visible, la chasse est
   finie avant d'avoir commence ; invisible, personne ne la commence. */
.fragment {
  display: inline-block;
  width: 15px; height: 15px;
  padding: 0;
  vertical-align: middle;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .3;
  color: var(--violet-soft);
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
}
.fragment::before {
  content: "✦";
  display: block;
  font-size: 13px;
  line-height: 15px;
}
.fragment:hover,
.fragment:focus-visible {
  opacity: 1;
  color: #fff;
  transform: scale(1.35);
}
.fragment:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; }
/* Une fois trouve, il reste allume : on voit ce qu'on a deja fouille. */
.fragment.est-trouve {
  opacity: 1;
  color: var(--violet-2);
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, .9));
}

/* Annonce breve en bas d'ecran */
.secret-annonce {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 300;
  max-width: min(420px, calc(100vw - 40px));
  padding: 13px 20px;
  text-align: center;
  font-size: .92rem;
  color: var(--text);
  background: linear-gradient(160deg, var(--surface-2), var(--bg-2));
  border: 1px solid var(--border-hi);
  border-radius: 100px;
  box-shadow: 0 14px 40px rgba(8, 4, 15, .7);
  /* Hors jeu tant qu'elle n'a rien a dire : pas d'obstacle au clic. */
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity .3s ease, transform .3s ease;
}
.secret-annonce.est-visible { opacity: 1; transform: translate(-50%, 0); }

/* Le pave de saisie */
.secret {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 24px;
}
.secret__voile {
  position: absolute;
  inset: 0;
  background: rgba(8, 4, 15, .82);
  backdrop-filter: blur(6px);
}
.secret__boite {
  position: relative;
  width: min(400px, 100%);
  padding: 34px 30px 30px;
  text-align: center;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(8, 4, 15, .8);
  animation: secretEntre .28s ease;
}
@keyframes secretEntre {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* Code refuse : la boite fait non de la tete. */
.secret__boite.est-refuse { animation: secretNon .4s ease; }
@keyframes secretNon {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.secret__fermer {
  position: absolute;
  top: 10px; right: 12px;
  width: 32px; height: 32px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.secret__fermer:hover { color: var(--text); background: rgba(255, 255, 255, .07); }

.secret__boite h2 { font-size: 1.3rem; margin-bottom: .35em; }
.secret__sous { color: var(--muted-2); font-size: .9rem; margin-bottom: 24px; }

.secret__chiffres { display: flex; justify-content: center; gap: 10px; }
.secret__case {
  width: 54px; height: 64px;
  text-align: center;
  font-family: var(--font-title);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(8, 4, 15, .6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.secret__case:focus {
  outline: none;
  border-color: var(--border-hi);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .18);
}

.secret__etat {
  min-height: 1.4em;
  margin: 18px 0 20px;
  font-size: .88rem;
  color: var(--muted-2);
}
.secret__etat.est-faux { color: #f4723c; }

/* Le calque de l'explosion : au-dessus de tout, mais transparent aux clics. */
.secret-calque {
  position: fixed;
  inset: 0;
  z-index: 350;
  pointer-events: none;
}

/* ---------- 13. Pied de page ---------- */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  padding: 56px 0 28px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img {
  width: 38px; height: 38px;
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, .6));
}
.footer-brand span { font-family: var(--font-title); font-weight: 700; font-size: 1.05rem; }
.footer-col p { color: var(--muted); font-size: .93rem; max-width: 330px; }
.footer-col h4 {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.footer-col li { margin-bottom: 9px; }
.footer-col li a { color: var(--muted); font-size: .93rem; }
.footer-col li a:hover { color: var(--violet-soft); }

.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}
.socials a:hover {
  color: #fff;
  background: rgba(139, 92, 246, .2);
  border-color: var(--violet);
  transform: translateY(-2px);
}
.socials svg { width: 19px; height: 19px; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted-2);
  font-size: .85rem;
}

/* ---------- 13 bis. Bandeau "version de test" ----------
   Provisoire : a supprimer le jour de la mise en ligne definitive.
   Place en bas de l'ecran pour ne rien decaler dans la mise en page. */
.preview-flag {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 28px);
  padding: 9px 10px 9px 18px;
  border-radius: 100px;
  background: rgba(21, 12, 40, .97);
  border: 1px solid var(--border-hi);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .55);
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.4;
}
.preview-flag strong { color: var(--violet-soft); font-weight: 600; }
.preview-flag button {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.preview-flag button:hover { color: #fff; background: rgba(139, 92, 246, .25); }
.preview-flag[hidden] { display: none; }

@media (max-width: 560px) {
  .preview-flag { font-size: .78rem; padding: 8px 8px 8px 14px; bottom: 12px; }
}

/* Lien volontairement inactif tant que la vraie adresse n'existe pas. */
[data-soon] { cursor: not-allowed; opacity: .8; }

/* ---------- 14. Animations au defilement ---------- */
/* Le contenu est visible par defaut. Il n'est masque que si le JavaScript
   tourne (classe "js" posee dans le <head>), sinon un script casse rendrait
   toute la page blanche. */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 15. Responsive ---------- */
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Plus assez de place pour cinq colonnes egales : la barre defile. Les
     onglets gardent une largeur commune, sans quoi ils paraitraient
     bancals - le plus large impose la mesure. */
  .tab { flex: 0 0 auto; min-width: 186px; }
  /* Le menu s'allonge d'une entree quand on est connecte : le pseudo cede
     la place le premier, l'avatar suffit a dire qui est la. */
  .compte-bulle__pseudo { display: none; }
  .compte-bulle { padding: 5px; max-width: none; }
}

/* Le menu deroulant se declenche bien avant le telephone. Le cas le plus
   large est celui d'un joueur connecte : marque, sept entrees, bouton Discord
   et pastille du compte reclament 1190 px, auxquels s'ajoutent les ecarts et
   les marges - soit environ 1286 px de fenetre. En dessous, la barre deborde
   et le logo vient toucher "Accueil". Le seuil est pose a 1300 px.

   Les autres reglages mobiles restent, eux, a 780 px : ils concernent la
   mise en page des sections, pas la barre. */
@media (max-width: 1300px) {
  .burger { display: flex; }
  .header-actions .btn { display: none; }

  .nav {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 26px;
    background: rgba(8, 4, 15, .97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-140%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    /* Le menu peut depasser la hauteur de l'ecran une fois connecte : il
       defile plutot que de sortir par le bas. */
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { padding: 13px 16px; font-size: 1rem; }
  .nav .btn { margin-top: 10px; display: inline-flex; }

  /* Le menu porte deja "Se deconnecter" : l'icone de sortie ferait doublon,
     et elle serait collee au burger - trop facile a toucher par erreur.
     L'avatar reste, il suffit a dire qui est connecte. */
  .compte-bulle__sortie { display: none; }
}

@media (max-width: 780px) {
  /* Sur petit ecran la planete doit s'effacer derriere le texte. */
  .planet {
    left: -18vw;
    top: 30%;
    width: 96vw;
    opacity: .42;
  }

  /* Sur telephone, titre et chapeau mangent tout l'ecran : on les resserre
     pour que les onglets et la premiere regle restent atteignables. */
  .page-hero { padding: calc(var(--header-h) + 20px) 0 18px; }
  .page-hero h1 { font-size: clamp(1.85rem, 7.5vw, 2.4rem); }
  .page-hero p { font-size: .95rem; }
  .tabs { margin-bottom: 24px; }
  .rule-search input { padding: 12px 0; font-size: .93rem; }
  .rule-search__field { padding-left: 15px; }
  .search-hit { padding: 18px 18px; }
  .callout { padding: 14px 16px; font-size: .9rem; }

  .section { padding: 72px 0; }
  .grid--3, .grid--4, .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .cta { padding: 48px 22px; }
  .rule-block { padding: 26px 20px; }
  /* Le duo "niveau + effectif" se met l'un sous l'autre. */
  .champ-duo { grid-template-columns: 1fr; gap: 0; }
  .bloc-champs { padding: 22px 18px; }
  .dossier { padding: 20px 18px; }
  /* Les deux portes l'une sous l'autre : cote a cote, elles seraient
     illisibles sur un telephone. */
  .portes { grid-template-columns: 1fr; }
  .porte { padding: 26px 20px; }
}

@media (max-width: 420px) {
  /* Quatre cases de 54 px tiennent de justesse sur un petit telephone :
     on les resserre plutot que de risquer le debordement. */
  .secret__boite { padding: 30px 20px 26px; }
  .secret__case { width: 46px; height: 58px; font-size: 1.45rem; }
  .secret__chiffres { gap: 8px; }
  .hero-actions .btn { width: 100%; }
}