.home-body {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  scroll-behavior: smooth;
}

/* =========================================================
   BACKGROUND — lucioles + halo (repris de la page bêta)
========================================================= */

.background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Champ de dégradés. Quatre sources lumineuses très diluées plutôt qu'un seul
   halo : c'est ce qui remplace le fond plat. Les pourcentages d'arrêt sont
   larges pour qu'aucune ne dessine de cercle net. */
/* Nuages diffus. Des taches blanches très floues placées irrégulièrement : le
   ciel n'est plus un simple dégradé vertical, sans pour autant devenir une
   illustration. */
.background::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(42% 26% at 18% 16%, rgba(255, 255, 255, 0.62), transparent 70%),
    radial-gradient(34% 20% at 76% 10%, rgba(255, 255, 255, 0.52), transparent 72%),
    radial-gradient(50% 30% at 88% 42%, rgba(255, 255, 255, 0.38), transparent 74%),
    radial-gradient(58% 34% at 8% 62%,  rgba(255, 255, 255, 0.34), transparent 74%),
    radial-gradient(70% 40% at 50% 96%, rgba(122, 196, 122, 0.28), transparent 72%);
}

/* Grain + vignette, superposés dans la même couche.
   Le grain casse le banding : sur un fond aussi sombre, un dégradé pur affiche
   des bandes visibles sur beaucoup d'écrans. La vignette assombrit les bords
   pour concentrer le regard sur le centre lumineux du hero.
   L'intensité du grain est portée par l'attribut `opacity` DANS le SVG, pas par
   l'opacité de l'élément : sans ça, atténuer le grain atténuerait aussi la
   vignette, qui doit rester franche. feColorMatrix le désature — une turbulence
   brute est colorée et jurerait avec la palette. */
.background::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    /* Vignette BLEUE et non noire : sur un ciel, assombrir vers le noir
       grisaille. On fonce vers le bleu profond, ce qui creuse les bords tout en
       restant dans la gamme. Beaucoup plus légère qu'en thème sombre — un ciel
       vignetté trop fort perd sa luminosité, qui est tout l'intérêt.
       Le grain est conservé : il casse le banding, très visible sur un dégradé
       de bleus étendu. */
    radial-gradient(130% 95% at 50% 22%, transparent 52%, rgba(35, 105, 165, 0.34) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-size: auto, 180px 180px;
}

.glade-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(880px, 120vw);
  height: min(880px, 120vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Halo solaire : une lumière chaude et blanche derrière l'emblème, à la place
     de l'ancienne clairière verte. */
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.62) 0%, rgba(255, 246, 214, 0.28) 34%, transparent 62%),
    radial-gradient(circle, transparent 46%, rgba(245, 197, 66, 0.14) 58%, transparent 76%);
  filter: blur(40px);
  animation: gladePulse 10s ease-in-out infinite;
}

@keyframes gladePulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

.particles {
  position: absolute;
  inset: 0;
}

/* Particules dorées : nettement assagies. Elles étaient à 4 px avec une lueur
   de 14 px — des points lumineux francs, qui tiraient l'œil hors du hero.
   Réduites à 2 px avec une lueur courte, elles deviennent une poussière. */
/* Sur ciel clair, des points lumineux ne se voient pas : ce sont maintenant de
   petites paillettes blanches légèrement plus grandes, qui lisent comme des
   pollens portés par le vent plutôt que comme des lucioles. */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.5);
  animation: particleFloat 14s infinite ease-in-out, particleBlink 5s infinite ease-in-out;
}

/* Quelques-unes dorées, pour accrocher la lumière sans charger. */
.particle:nth-child(3),
.particle:nth-child(8) {
  background: rgba(255, 226, 140, 0.9);
  box-shadow: 0 0 7px 2px rgba(245, 197, 66, 0.55);
}

.particle:nth-child(1) { left: 8%; top: 20%; animation-delay: 0s; }
.particle:nth-child(2) { left: 22%; top: 60%; animation-delay: 1s; }
.particle:nth-child(3) { left: 38%; top: 15%; animation-delay: 2s; }
.particle:nth-child(4) { left: 55%; top: 70%; animation-delay: 1.5s; }
.particle:nth-child(5) { left: 68%; top: 30%; animation-delay: 3s; }
.particle:nth-child(6) { left: 80%; top: 55%; animation-delay: 0.5s; }
.particle:nth-child(7) { left: 92%; top: 25%; animation-delay: 2.5s; }
.particle:nth-child(8) { left: 45%; top: 45%; animation-delay: 4s; }
.particle:nth-child(9) { left: 15%; top: 45%; animation-delay: 3.5s; }
.particle:nth-child(10) { left: 88%; top: 10%; animation-delay: 1.8s; }

@keyframes particleFloat {
  0% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-38px) translateX(8px); }
  100% { transform: translateY(0) translateX(0); }
}

@keyframes particleBlink {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.7; }
}

/* =========================================================
   TRANSITION ENTRE ONGLETS

   Deux temps, volontairement asymétriques : une sortie brève (150 ms) pour ne
   pas faire attendre, une entrée un peu plus longue (300 ms) avec un léger
   déplacement vers le haut. Total perçu ~350 ms.

   Le fond, la barre de navigation et le pied de page ne bougent pas : seul
   #vue est remplacé. C'est ce qui donne l'impression de rester dans la même
   interface plutôt que de changer de page.
========================================================= */

.vue {
  position: relative;
  z-index: 1;
  /*
    LA VUE PREND LA HAUTEUR RESTANTE, ce qui colle le pied de page au bas de
    la fenêtre.

    `style.css` fait déjà du corps une colonne flexible d'au moins 100vh, mais
    aucun de ses enfants ne grandissait : une page plus courte que l'écran
    laissait le pied de page flotter au milieu, avec le décor qui continuait
    seul en dessous. L'accueil, réduit au héros et aux actualités, tombe
    justement dans ce cas.

    `min-height: 0` : un élément flexible ne rétrécit pas sous la taille de son
    contenu par défaut, ce qui ferait déborder une page plus longue que
    l'écran au lieu de la laisser défiler.
  */
  flex: 1 0 auto;
  min-height: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}

.vue.vue-sortie {
  opacity: 0;
  transform: translateY(-6px);
}

@keyframes vue-apparait {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.vue.vue-entree {
  animation: vue-apparait 300ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Mouvement réduit.
   Les animations ajoutées ici sont décoratives : flottement du logo, pulsation
   du halo, dérive des particules, apparition du hero. Pour qui a demandé moins
   de mouvement, tout doit s'arrêter — mais le contenu doit rester VISIBLE :
   d'où opacity/transform remis à l'état final plutôt qu'une simple coupure des
   animations, qui laisserait le hero à opacity 0. */
@media (prefers-reduced-motion: reduce) {
  .vue,
  .vue.vue-entree,
  .particle,
  .glade-glow,
  .hero-logo::before,
  .hero-logo img,
  .site-hero > * {
    animation: none !important;
  }

  .site-hero > *,
  .vue {
    opacity: 1;
    transform: none;
  }
  .vue { transition: none; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cta-button,
  .cta-button::after,
  .site-nav-links a::after {
    transition: none;
  }

  .cta-button:hover { transform: none; }
}

/* =========================================================
   NAV
========================================================= */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 12px 32px;

  /* Bandeau bleu nuit plein, comme sur la maquette : sur un ciel clair, une
     barre translucide se confondrait avec le fond et les liens deviendraient
     illisibles dès qu'un nuage passe dessous. */
  background: linear-gradient(180deg, #1b4d8f 0%, var(--nuit) 60%, var(--nuit-fonce) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: 0 4px 16px rgba(12, 50, 80, 0.28);
}

/* Liseré doré sous la barre, franc cette fois : il sépare nettement le bandeau
   du ciel, là où un filet dégradé se perdait. */
.site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--or-fonce), var(--or) 50%, var(--or-fonce));
  pointer-events: none;
}

.site-nav-links {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.site-nav-links a {
  position: relative;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  transition: color 0.2s ease;
}

/* Soulignement qui se déploie depuis le centre — plus élégant qu'un simple
   changement de couleur, et sans déplacer le texte. */
.site-nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or, #f5c542), transparent);
  transition: left 0.28s ease, right 0.28s ease;
}

.site-nav-links a:hover { color: var(--or, #f5c542); }
.site-nav-links a:hover::after { left: 14px; right: 14px; }

/* Page courante : le soulignement reste déployé en permanence. */
.site-nav-links a.actif { color: var(--or, #f5c542); }
.site-nav-links a.actif::after { left: 14px; right: 14px; }

.site-nav-links a:focus-visible {
  outline: 1px solid rgba(232, 200, 115, 0.6);
  outline-offset: 2px;
  border-radius: 6px;
}

.cta-button.small {
  padding: 9px 20px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  border-radius: 10px;
  min-width: 0;
}

.nav-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Le logo de la barre reste discret et s'éclaire au survol. */
.site-nav .logo { transition: opacity 0.2s ease; }
.site-nav .logo:hover { opacity: 0.85; }
.site-nav .logo .logo-mot { color: #fff;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}

/* =========================================================
   HERO
========================================================= */

.site-hero {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 104px) 24px clamp(40px, 7vh, 76px);
  text-align: center;
}

/* --- Surtitre « LA BÊTA EST OUVERTE » -------------------------------------
   Encadré de deux filets courts : la ligne gagne en présence sans grossir,
   ce qui la garderait sous le logo dans la hiérarchie. */
/* flex et non inline-flex : en inline, le paragraphe se met sur la même ligne
   que le logo qui le suit, et les deux se décalent symétriquement de part et
   d'autre du centre. Un flex de niveau bloc occupe sa propre ligne. */
.site-hero .eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--or-texte, #8a6108);
  margin: 0 0 26px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.site-hero .eyebrow::before,
.site-hero .eyebrow::after {
  content: "";
  width: clamp(22px, 5vw, 46px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 200, 115, 0.55));
}
.site-hero .eyebrow::after { background: linear-gradient(90deg, rgba(232, 200, 115, 0.55), transparent); }

/* --- « CHRONICLES OF A SHATTERED WORLD » ---------------------------------- */
.subtitle-tag {
  color: #2d4f70;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  /* L'énorme interlettrage pousse le mot vers la droite : on compense pour que
     la ligne reste optiquement centrée sous l'emblème. */
  text-indent: 0.42em;
  text-transform: uppercase;
  margin: 0 0 34px;
}

.site-hero .description,
.join-section .description {
  /* 60 caractères environ : au-delà, l'œil perd la ligne suivante. */
  max-width: 58ch;
  margin: 0 auto 40px;
  color: var(--texte-doux, #2d4f70);
  font-size: 1.05rem;
  line-height: 1.85;
  text-wrap: pretty;
}

.site-hero .actions,
.join-section .actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* --- Apparition ----------------------------------------------------------
   Le hero est visible au chargement : il n'est pas concerné par le reveal au
   défilement, d'où une animation propre, décalée dans l'ordre de lecture. */
@keyframes entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.site-hero > * {
  animation: entree 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.site-hero .eyebrow      { animation-delay: 0.05s; }
.site-hero .hero-logo    { animation-delay: 0.15s; }
.site-hero .subtitle-tag { animation-delay: 0.3s; }
.site-hero .description  { animation-delay: 0.4s; }
.site-hero .actions      { animation-delay: 0.5s; }
.site-hero .stats-bar    { animation-delay: 0.6s; }

/* Le logo cumule l'apparition et le flottement. Sans ce relais, l'animation
   d'entrée écraserait le transform du flottement et l'emblème resterait figé. */
.site-hero .hero-logo img { animation-delay: 0.9s; }

/* =========================================================
   STATS BAR
========================================================= */

/* La barre de statistiques faisait la jonction avec le reste de la page par un
   trait net sur toute la largeur, précédé d'un grand vide. Le filet s'éteint
   maintenant sur les bords, et un dégradé prend le relais sous la barre pour
   enchaîner sur la section suivante au lieu de la laisser tomber à plat. */
.stats-bar {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 52px);
  margin-top: clamp(44px, 7vh, 72px);
  padding-top: clamp(30px, 5vh, 46px);
  border-top: none;
}

.stats-bar::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--trait, rgba(160, 210, 150, 0.14)) 18%, rgba(232, 200, 115, 0.22) 50%, var(--trait, rgba(160, 210, 150, 0.14)) 82%, transparent);
}

/* Voile de raccord entre le hero et la première section. Placé sous la barre,
   hors flux, il n'occupe aucune hauteur : il ne creuse donc pas le vide qu'il
   est censé combler.
   Dégradé RADIAL et non linéaire : l'élément est large de 780 px comme le hero,
   un dégradé linéaire ne fondait que vers le bas et laissait deux arêtes
   verticales nettes — un rectangle clair posé sur le fond. */
.site-hero::after {
  content: "";
  position: absolute;
  /* Aucun débordement latéral : un ::after plus large que son parent élargit la
     page entière et, sur mobile, décale tout le contenu hors de l'écran. Le
     dégradé radial s'éteint de lui-même avant les bords, il n'en a pas besoin. */
  left: 0;
  right: 0;
  bottom: calc(-1 * clamp(60px, 9vh, 130px));
  height: clamp(60px, 9vh, 130px);
  background: radial-gradient(72% 130% at 50% 0%, rgba(120, 220, 140, 0.07), transparent 74%);
  pointer-events: none;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
}

.stat-number {
  font-family: 'Cinzel Decorative', 'Trebuchet MS', serif;
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--or-texte, #8a6108);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

.stat-label {
  margin-top: 6px;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim, #4a6b8a);
}

/* =========================================================
   SHARED SECTION STYLES
========================================================= */

section {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 70px 24px;
}

.eyebrow.center {
  text-align: center;
  display: block;
}

.section-title {
  font-family: 'Cinzel Decorative', 'Trebuchet MS', serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  text-align: center;
  margin: 0 0 44px;
  color: #123a6b;
}

/* =========================================================
   EN-TÊTE DE PAGE (routes autres que l'accueil)

   Remplace le hero sur les pages intérieures : même vocabulaire — surtitre,
   titre, chapeau — mais sans l'emblème, qui perdrait de sa force à être répété
   sur chaque onglet.
========================================================= */

.page-entete {
  padding-top: clamp(48px, 7vh, 84px);
  padding-bottom: 8px;
  text-align: center;
}

.page-entete .eyebrow.center { margin-bottom: 14px; }

.page-entete .section-title {
  margin-bottom: 20px;
}

.page-entete .description {
  max-width: 58ch;
  margin: 0 auto;
  color: var(--texte-doux, #2d4f70);
  font-size: 1.02rem;
  line-height: 1.8;
  text-wrap: pretty;
}

/*
  Page « section fermée » : la plus courte du site.

  Son contenu tient en quatre lignes, et le pied de page remontait donc au
  milieu de l'écran, avec le fond qui continuait seul en dessous. Elle occupe
  maintenant la hauteur de la fenêtre moins la barre, et centre son contenu
  dedans. Rien d'autre n'utilise cette classe : les pages qui ont assez de
  contenu gardent leur comportement.
*/
.page-entete.page-fermee {
  min-height: min(62vh, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-entete.page-fermee .actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* =========================================================
   APERÇUS (accueil)
========================================================= */

.apercus-section { text-align: center; }
.apercus-section .description { margin: 0 auto 40px; }

.apercus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  text-align: left;
}

.apercu {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff, #eef7fe);
  border: 1px solid var(--border, rgba(160, 210, 150, 0.25));
  border-radius: 16px;
  padding: 24px 22px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.apercu:hover {
  transform: translateY(-3px);
  border-color: rgba(232, 200, 115, 0.4);
  box-shadow: 0 14px 30px rgba(12, 50, 80, 0.22);
}

.apercu-icone { font-size: 1.5rem; line-height: 1; }

.apercu h3 {
  font-family: 'Cinzel Decorative', 'Trebuchet MS', serif;
  color: var(--or-texte, #8a6108);
  font-size: 1.05rem;
  margin: 14px 0 10px;
}

.apercu p {
  margin: 0 0 18px;
  color: var(--text-dim, #4a6b8a);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* Le libellé reste collé au bas quelle que soit la longueur du texte, sinon
   les cartes d'une même rangée l'afficheraient à des hauteurs différentes. */
.apercu-lien {
  margin-top: auto;
  color: var(--or-texte, #8a6108);
  font-size: 0.88rem;
  font-weight: 600;
}
.apercu-lien::after {
  content: " →";
  display: inline-block;
  transition: transform 0.22s ease;
}
.apercu:hover .apercu-lien::after { transform: translateX(3px); }

/* =========================================================
   LIENS DE SUITE (bas des pages intérieures)
========================================================= */

.suite-section { text-align: center; padding-top: 20px; }

.suite-libelle {
  color: var(--text-dim, #4a6b8a);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.suite-liens {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* =========================================================
   SUPPORT
========================================================= */

.support-section { max-width: 720px; }

.support-form,
.support-confirme,
.support-connexion {
  background: linear-gradient(180deg, #ffffff, #eef7fe);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(12, 50, 80, 0.16);
}

.support-confirme,
.support-connexion { text-align: center; }
.support-confirme .cta-button { margin-top: 24px; }
.support-connexion .actions { justify-content: center; margin-top: 24px; }

.support-compte {
  margin: 0 0 22px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(90, 171, 39, 0.1);
  border: 1px solid rgba(90, 171, 39, 0.3);
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.support-form label {
  display: block;
  margin: 18px 0 6px;
  font-size: 0.88rem;
  color: var(--texte-doux);
  font-weight: 600;
}
.support-form label:first-of-type { margin-top: 0; }

/* Les champs héritent des styles de style.css : on ne redéfinit que la
   disposition, pas leur apparence, pour rester aligné sur le reste du site. */
.support-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.support-paire label { margin-top: 18px; }

.support-indice {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.support-form .cta-button { margin-top: 26px; }

.support-erreur {
  border-radius: 12px;
  border: 1px solid var(--danger);
  background: rgba(196, 52, 42, 0.08);
  color: var(--danger);
  padding: 12px 16px;
  margin: 0 0 18px;
  font-size: 0.92rem;
}

.support-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.support-note.centre { text-align: center; margin: -14px auto 22px; }

/* ---------- Mes tickets (lecture seule) ---------- */

/* Le tiroir est un <details> : replié par défaut, il n'écrase pas le
   formulaire, qui reste l'action principale de la page. */
.support-tiroir-zone { max-width: 720px; margin: 0 auto 26px; }

.support-bouton {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #eef7fe);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(12, 50, 80, 0.12);
  cursor: pointer;
  font-weight: 700;
  color: var(--nuit);
  list-style: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.support-bouton::-webkit-details-marker { display: none; }
.support-bouton::marker { content: ''; }
.support-bouton:hover { box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(12, 50, 80, 0.18); }
.support-bouton:active { transform: translateY(1px); }
/* Le tiroir s'ouvre au clavier : le focus doit rester visible. */
.support-bouton:focus-visible { outline: 2px solid var(--ciel-fonce); outline-offset: 3px; }

.support-bouton-texte { flex: 1; }

.support-compteur {
  flex: none;
  min-width: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(90, 171, 39, 0.16);
  border: 1px solid rgba(90, 171, 39, 0.45);
  color: #3d8515;
  font-size: 0.8rem;
  text-align: center;
}

/* Chevron dessiné en CSS plutôt qu'en caractère : il pivote proprement et ne
   dépend pas de la police installée. */
.support-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease, margin 0.25s ease;
  opacity: 0.6;
}
.support-tiroir[open] .support-chevron { transform: rotate(-135deg); margin-top: 3px; }

.support-tiroir-corps { padding-top: 14px; }
.support-tiroir[open] .support-tiroir-corps { animation: tiroir-ouvre 0.28s ease both; }
.support-tiroir-corps .support-note.centre { margin: 0 auto 16px; }

@keyframes tiroir-ouvre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .support-tiroir[open] .support-tiroir-corps { animation: none; }
  .support-chevron { transition: none; }
}

.support-liste { display: grid; gap: 10px; }

.support-ticket {
  background: linear-gradient(180deg, #ffffff, #eef7fe);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.support-ticket summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--nuit);
}
/* Le marqueur natif (triangle) est retiré sur les deux moteurs : il casse
   l'alignement du libellé et du statut. */
.support-ticket summary::-webkit-details-marker { display: none; }
.support-ticket summary::marker { content: ''; }
.support-ticket summary:hover { background: rgba(18, 58, 107, 0.04); }

.support-ticket-sujet { flex: 1; }

.support-statut {
  flex: none;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid;
}
/* Le libellé porte l'information ; la couleur ne fait que la renforcer. */
.support-statut.s-ouvert   { color: #8a6108; border-color: rgba(214, 159, 28, 0.6); background: rgba(245, 197, 66, 0.16); }
.support-statut.s-en_cours { color: #0d4c86; border-color: rgba(18, 90, 160, 0.45); background: rgba(78, 168, 222, 0.16); }
.support-statut.s-resolu   { color: #3d8515; border-color: rgba(90, 171, 39, 0.55); background: rgba(134, 210, 74, 0.18); }
.support-statut.s-ferme    { color: var(--text-dim); border-color: var(--border); background: rgba(18, 58, 107, 0.05); }

.support-ticket-corps {
  padding: 0 18px 18px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.support-ticket-meta {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* pre-wrap conserve les retours à la ligne du joueur sans convertir son texte
   en HTML ; break-word empêche une longue URL de déborder du cadre. */
.support-ticket-message {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: 1.7;
  color: var(--texte-doux);
}

/* ---------- Réponses de l'équipe ---------- */

/* Pastille sur le résumé : le joueur voit qu'il y a du nouveau sans avoir à
   déplier chaque ticket. */
.support-badge-reponse {
  flex: none;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  color: #3d8515;
  border: 1px solid rgba(90, 171, 39, 0.55);
  background: rgba(134, 210, 74, 0.18);
}

.support-fil {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

/* Filet à gauche : la réponse se distingue au premier coup d'œil du message
   du joueur, sans changer la largeur du bloc. */
.support-reponse {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(90, 171, 39, 0.3);
  border-left: 3px solid rgba(90, 171, 39, 0.75);
  background: rgba(90, 171, 39, 0.07);
}

.support-reponse-meta {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.support-reponse-auteur { font-weight: 700; color: #3d8515; }

.support-attente {
  margin: 16px 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .support-form,
  .support-confirme,
  .support-connexion { padding: 24px 20px; }
  .support-paire { grid-template-columns: 1fr; gap: 0; }
}

/* =========================================================
   LORE
========================================================= */

.lore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}

.lore-card {
  background: linear-gradient(180deg, #ffffff, #eef7fe);
  border: 1px solid var(--border, rgba(160, 210, 150, 0.25));
  border-radius: 16px;
  padding: 26px 24px;
}

.lore-card h3 {
  font-family: 'Cinzel Decorative', 'Trebuchet MS', serif;
  color: var(--or-texte, #8a6108);
  font-size: 1.05rem;
  margin: 0 0 12px;
}

.lore-card p {
  color: var(--text-dim, #4a6b8a);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}

/* =========================================================
   FEATURES
========================================================= */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}

.feature-card {
  text-align: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(232, 244, 253, 0.85));
  border: 1px solid var(--border, rgba(160, 210, 150, 0.25));
  border-radius: 18px;
  padding: 32px 22px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 200, 115, 0.5);
}

.feature-icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
}

.feature-card h3 {
  font-family: 'Cinzel Decorative', 'Trebuchet MS', serif;
  color: #123a6b;
  font-size: 1rem;
  margin: 0 0 10px;
}

.feature-card p {
  color: var(--text-dim, #4a6b8a);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

/* =========================================================
   ROADMAP
========================================================= */

.roadmap-track {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 32px;
  border-left: 2px solid var(--border, rgba(160, 210, 150, 0.25));
}

.roadmap-step {
  position: relative;
  padding-bottom: 40px;
}

.roadmap-step:last-child {
  padding-bottom: 0;
}

.roadmap-dot {
  position: absolute;
  left: -39px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(160, 210, 150, 0.4);
}

.roadmap-step.done .roadmap-dot {
  background: var(--emerald, #5aab27);
  border-color: var(--emerald, #5aab27);
}

.roadmap-step.current .roadmap-dot {
  background: var(--gold, #d69f1c);
  border-color: var(--or, #f5c542);
  box-shadow: 0 0 12px rgba(232, 200, 115, 0.6);
}

.roadmap-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--or-texte, #8a6108);
  margin-bottom: 8px;
}

.roadmap-content h3 {
  font-family: 'Cinzel Decorative', 'Trebuchet MS', serif;
  color: #123a6b;
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.roadmap-content p {
  color: var(--text-dim, #4a6b8a);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}

/* =========================================================
   FAQ
========================================================= */

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(232, 244, 253, 0.85));
  border: 1px solid var(--border, rgba(160, 210, 150, 0.25));
  border-radius: 14px;
  padding: 18px 22px;
}

.faq-item summary {
  cursor: pointer;
  color: #123a6b;
  font-family: 'Cinzel Decorative', 'Trebuchet MS', serif;
  font-size: 0.95rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  color: var(--or-texte, #8a6108);
  font-size: 1.3rem;
  margin-left: 12px;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 14px 0 0;
  color: var(--text-dim, #4a6b8a);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* =========================================================
   GALLERY
========================================================= */

.gallery-note {
  text-align: center;
  color: var(--text-dim, #4a6b8a);
  font-size: 0.85rem;
  margin: -24px 0 32px;
}

/* Largeur de piste PLAFONNÉE à 320 px au lieu de 1fr : avec 1fr, une galerie ne
   contenant qu'une image la voyait s'étirer sur toute la largeur de la page.
   auto-fit et non auto-fill : auto-fill conserve les pistes vides, qui gardent
   leur place et poussent l'unique vignette contre le bord gauche. auto-fit les
   réduit à zéro, ce qui laisse `justify-content: center` la centrer vraiment. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
  gap: 18px;
}

/* Vignette d'une vraie capture.
   La hauteur est fixée au même rapport que les emplacements réservés pour que
   la grille reste régulière quelles que soient les dimensions des images
   déposées ; object-fit les recadre au lieu de les déformer. */
.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 8px 22px rgba(12, 50, 80, 0.18);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(12, 50, 80, 0.26);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* contain plutôt que cover : une boîte de dialogue ou une image au format
     inhabituel serait tronquée par un recadrage. On préfère la voir entière,
     sur fond blanc. */
}

.gallery-legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px;
  background: linear-gradient(180deg, transparent, rgba(13, 42, 79, 0.85));
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.gallery-placeholder {
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  border: 1px dashed rgba(232, 200, 115, 0.35);
  background: linear-gradient(135deg, rgba(90, 171, 39, 0.14), rgba(232, 200, 115, 0.08));

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--text-dim, #4a6b8a);
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* =========================================================
   JOIN
========================================================= */

.join-section {
  text-align: center;
  max-width: 720px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .site-nav {
    flex-wrap: wrap;
    padding: 10px 18px;
  }

  /* Les liens DOIVENT pouvoir passer à la ligne : en flex sans wrap, ils
     débordent au lieu de se replier, élargissent la page et décalent tout le
     contenu vers la droite. Les majuscules et l'interlettrage ajoutés pour le
     bureau coûtent cher en largeur, on les allège ici. */
  /* flex-basis: 100% et non width: 100% — la règle de base pose `flex: 1`, donc
     flex-basis: 0%, et sur un élément flex c'est la base qui décide, pas la
     largeur. Avec width seul, les liens restaient sur la première ligne et
     débordaient de l'écran en poussant toute la page vers la droite. */
  .site-nav-links {
    order: 3;
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 4px;
    padding-top: 2px;
  }

  .site-nav-links a {
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    padding: 6px 7px;
  }

  /* Première rangée : logo + actions. Réduits pour tenir sans déborder. */
  .site-nav .logo .logo-mot { color: #fff; font-size: 0.95rem; letter-spacing: 0.04em; }
  .site-nav .logo .logo-mark { width: 30px; height: 30px; }
  .nav-actions { gap: 6px; }
  .nav-actions .cta-button.small { padding: 8px 13px; font-size: 0.7rem; }

  .site-hero {
    padding: 44px 20px 40px;
  }

  /* Les interlettrages larges deviennent illisibles sur petit écran : le mot se
     casse et perd son alignement. On les resserre nettement. */
  .site-hero .eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    gap: 10px;
  }

  .subtitle-tag {
    font-size: 0.66rem;
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    margin-bottom: 26px;
  }

  .site-hero .description {
    font-size: 0.98rem;
    line-height: 1.75;
  }

  /* Boutons empilés et pleine largeur : côte à côte, ils se retrouvaient à
     deux mots par ligne. */
  .site-hero .actions {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .site-hero .actions .cta-button {
    width: 100%;
    max-width: 320px;
  }

  section {
    padding: 50px 20px;
  }
}

/* ============================================================
   Wiki

   Reprend les jetons de style.css : cartes blanches sur ciel, filets dorés,
   titres Cinzel. Aucune couleur nouvelle — le wiki doit se lire comme une
   section du site, pas comme une encyclopédie greffée dessus.
   ============================================================ */

.wiki-entete { padding-bottom: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Recherche ---------- */

.wiki-recherche {
  display: flex;
  gap: 10px;
  max-width: 540px;
  margin: 22px auto 0;
}
.wiki-recherche input {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.wiki-recherche .cta-button { flex: none; margin: 0; }

/* ---------- Cadre : barre latérale + contenu ---------- */

.wiki-cadre {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 34px;
  max-width: 1080px;
  margin: 34px auto 0;
  padding: 0 24px 60px;
  align-items: start;
}

.wiki-cote {
  position: sticky;
  top: 92px;
  background: linear-gradient(180deg, #ffffff, #eef7fe);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(12, 50, 80, 0.12);
}

.wiki-cote-tiroir > summary {
  display: none;             /* sur desktop l'arborescence est toujours ouverte */
}
.wiki-cote-titre { list-style: none; }
.wiki-cote-titre::-webkit-details-marker { display: none; }

.wiki-cote-accueil {
  display: block;
  font-weight: 700;
  color: var(--nuit);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.wiki-cote-accueil:hover { background: rgba(18, 58, 107, 0.06); }
.wiki-cote-accueil.courant { background: rgba(214, 159, 28, 0.16); color: var(--or-texte); }

.wiki-arbre { list-style: none; margin: 0; padding: 0; }
.wiki-arbre .wiki-arbre {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.wiki-arbre a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--texte-doux);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.35;
}
.wiki-arbre a:hover { background: rgba(18, 58, 107, 0.06); color: var(--nuit); }
.wiki-arbre a.ouvert { color: var(--nuit); font-weight: 600; }
.wiki-arbre a.courant {
  background: rgba(214, 159, 28, 0.16);
  color: var(--or-texte);
  font-weight: 700;
}
.wiki-compte {
  flex: none;
  font-size: 0.72rem;
  color: var(--text-dim);
  background: rgba(18, 58, 107, 0.07);
  border-radius: 999px;
  padding: 1px 7px;
}
.wiki-vide-cote { font-size: 0.85rem; color: var(--text-dim); font-style: italic; margin: 0; }

/* ---------- Fil d'Ariane ---------- */

.wiki-ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  margin-bottom: 22px;
  color: var(--text-dim);
}
.wiki-ariane a { color: var(--or-texte); text-decoration: none; }
.wiki-ariane a:hover { text-decoration: underline; }
.wiki-ariane .sep { opacity: 0.5; }
.wiki-ariane .courant { color: var(--nuit); font-weight: 600; }

/* ---------- Titres de section ---------- */

.wiki-section-titre {
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: 1.25rem;
  color: var(--nuit);
  margin: 30px 0 16px;
}
.wiki-principal > .wiki-section-titre:first-of-type { margin-top: 0; }

.wiki-vide {
  color: var(--text-dim);
  font-style: italic;
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}

/* ---------- Cartes de catégories ---------- */

.wiki-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.wiki-cartes.compactes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.wiki-carte {
  background: linear-gradient(180deg, #ffffff, #eef7fe);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(12, 50, 80, 0.1);
}
.wiki-carte:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 159, 28, 0.55);
  box-shadow: inset 0 1px 0 #fff, 0 12px 26px rgba(12, 50, 80, 0.16);
}
.wiki-carte-lien { display: block; padding: 18px; text-decoration: none; color: inherit; }
.wiki-carte-image { display: block; margin: -18px -18px 14px; }
.wiki-carte-image img { display: block; width: 100%; height: 130px; object-fit: cover; }
.wiki-carte-titre {
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--or-texte);
}
.wiki-carte-desc { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--texte-doux); }
.wiki-carte-enfants {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 9px;
}

/* ---------- Listes d'articles ---------- */

.wiki-articles, .wiki-recents, .wiki-resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.wiki-articles li a,
.wiki-resultats li a {
  display: block;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.wiki-articles li a:hover,
.wiki-resultats li a:hover { border-color: rgba(214, 159, 28, 0.55); background: #fff; }

.wiki-article-titre, .wiki-resultat-titre {
  display: block; font-weight: 700; color: var(--nuit);
}
.wiki-article-resume, .wiki-resultat-extrait {
  display: block; margin-top: 4px; font-size: 0.86rem;
  color: var(--text-dim); line-height: 1.5;
}
.wiki-resultat-chemin {
  display: block; margin-top: 2px; font-size: 0.78rem; color: var(--or-texte);
}
.wiki-compte-resultats { color: var(--texte-doux); margin: 0 0 14px; }

.wiki-recents li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.wiki-recents li a { text-decoration: none; color: inherit; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.wiki-recent-titre { font-weight: 600; color: var(--nuit); }
.wiki-recent-titre:hover { color: var(--or-texte); }
.wiki-recent-cat { font-size: 0.78rem; color: var(--or-texte); }
.wiki-recent-date { flex: none; font-size: 0.78rem; color: var(--text-dim); }

.wiki-cat-image img { width: 100%; border-radius: 14px; border: 1px solid var(--border); }

/* ---------- Article ---------- */

.wiki-article {
  background: linear-gradient(180deg, #ffffff, #f6fbff);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px 34px 26px;
  box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgba(12, 50, 80, 0.12);
}

.wiki-sommaire {
  background: rgba(18, 58, 107, 0.045);
  border: 1px solid var(--border);
  border-left: 3px solid var(--or);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 26px;
}
.wiki-sommaire-titre {
  margin: 0 0 8px; font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--or-texte);
}
.wiki-sommaire ul { list-style: none; margin: 0; padding: 0; }
.wiki-sommaire li { padding: 3px 0; font-size: 0.9rem; }
.wiki-sommaire li.n3 { padding-left: 16px; }
.wiki-sommaire li.n4, .wiki-sommaire li.n5 { padding-left: 32px; font-size: 0.85rem; }
.wiki-sommaire a { color: var(--texte-doux); text-decoration: none; }
.wiki-sommaire a:hover { color: var(--or-texte); text-decoration: underline; }

/* Corps rendu par wiki-markdown : jeu de balises fermé, donc styles ciblés. */
.wiki-corps { color: var(--texte-doux); line-height: 1.75; }
.wiki-corps > *:first-child { margin-top: 0; }
.wiki-titre {
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  color: var(--nuit);
  /* scroll-margin : sans lui, un clic dans le sommaire place le titre sous la
     barre de navigation fixe. */
  scroll-margin-top: 88px;
}
h2.wiki-titre { font-size: 1.4rem; margin: 34px 0 12px; }
h3.wiki-titre { font-size: 1.15rem; margin: 26px 0 10px; }
h4.wiki-titre, h5.wiki-titre { font-size: 1rem; margin: 22px 0 8px; }

.wiki-corps p { margin: 0 0 14px; }
.wiki-corps a { color: var(--or-texte); }
.wiki-liste { margin: 0 0 16px; padding-left: 22px; }
.wiki-liste li { margin: 5px 0; }

.wiki-citation {
  margin: 18px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--or);
  background: rgba(245, 197, 66, 0.08);
  border-radius: 0 10px 10px 0;
}
.wiki-citation p { margin: 0; font-style: italic; }

.wiki-separateur {
  border: 0; height: 1px; margin: 26px 0;
  background: linear-gradient(90deg, transparent, var(--or-fonce), transparent);
}

.wiki-code {
  background: var(--nuit-fonce);
  color: #d9ecfb;
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.wiki-corps code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(18, 58, 107, 0.08);
  border-radius: 5px;
  padding: 1px 5px;
}
.wiki-code code { background: none; padding: 0; color: inherit; }

.wiki-image img, .wiki-figure img {
  max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border);
}
.wiki-figure { margin: 18px 0; }
.wiki-figure figcaption {
  margin-top: 7px; font-size: 0.82rem; color: var(--text-dim); text-align: center;
}

/* Un tableau large défile dans son cadre ; la page ne défile jamais en largeur. */
.wiki-tableau-scroll { overflow-x: auto; margin: 0 0 18px; }
.wiki-tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.wiki-tableau th, .wiki-tableau td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border);
}
.wiki-tableau th { background: rgba(18, 58, 107, 0.06); color: var(--nuit); font-weight: 700; }

.wiki-pied {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 0.84rem; color: var(--text-dim);
}
.wiki-pied p { margin: 0 0 4px; }
.wiki-pied a { color: var(--or-texte); }

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .wiki-cadre {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 18px 48px;
  }
  /* L'arborescence devient un tiroir replié : sur un petit écran elle
     pousserait sinon le contenu très bas. Le <details> rend ce comportement
     sans JavaScript. */
  .wiki-cote { position: static; padding: 0; }
  .wiki-cote-tiroir > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-weight: 700;
    color: var(--nuit);
    cursor: pointer;
  }
  .wiki-cote-tiroir > summary::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
    opacity: 0.6;
    transition: transform 0.25s ease;
  }
  .wiki-cote-tiroir[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
  .wiki-cote-tiroir > *:not(summary) { margin-left: 18px; margin-right: 18px; }
  .wiki-cote-tiroir[open] { padding-bottom: 14px; }
  .wiki-article { padding: 22px 20px 20px; }
  .wiki-recherche { flex-direction: column; }
}

/* ============================================================
   Documents légaux

   Mentions, confidentialité, CGU, CGV. Une seule mise en forme pour les
   quatre : ce sont des pages de lecture continue, pas des écrans de jeu.

   Le corps réutilise « wiki-corps », déjà stylé plus haut — même moteur de
   rendu, donc mêmes balises à habiller. On ne redéfinit ici que le cadre.
============================================================ */

.legal-page {
  position: relative;
  z-index: 2;
  width: min(1060px, 100% - 48px);
  margin: clamp(30px, 5vw, 70px) auto 40px;
}

.legal-entete {
  text-align: center;
  margin-bottom: 26px;
}
.legal-titre {
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  margin: 6px 0 10px;
  color: var(--ui-nuit, #033982);
}
.legal-resume {
  margin: 0 auto;
  max-width: 62ch;
  color: #24486f;
  font-size: 0.98rem;
  line-height: 1.6;
}
.legal-meta {
  margin: 12px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b7391;
}

/*
  Sommaire à gauche, texte à droite. Le sommaire est « sticky » : sur un
  document de plusieurs écrans, il doit rester atteignable sans remonter.
*/
.legal-corps-grille {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.legal-corps-grille:not(:has(.legal-sommaire)) { grid-template-columns: minmax(0, 1fr); }

.legal-sommaire {
  position: sticky;
  top: 108px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(198, 138, 26, 0.35);
  border-radius: 12px;
  padding: 16px 18px;
  backdrop-filter: blur(3px);
}
.legal-sommaire-titre {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8c5c10;
}
.legal-sommaire ul { list-style: none; margin: 0; padding: 0; }
.legal-sommaire li { margin: 0 0 7px; line-height: 1.4; }
.legal-sommaire li.n3 { padding-left: 12px; }
.legal-sommaire li.n4 { padding-left: 24px; }
.legal-sommaire a {
  color: #24486f;
  text-decoration: none;
  font-size: 0.86rem;
}
.legal-sommaire a:hover { color: #8c5c10; text-decoration: underline; }

.legal-contenu {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(198, 138, 26, 0.35);
  border-radius: 14px;
  padding: clamp(20px, 3vw, 36px);
  box-shadow: 0 10px 30px rgba(3, 30, 70, 0.1);
}

/* Les tableaux de durées et de finalités doivent rester lisibles sur mobile :
   ils défilent dans leur propre boîte plutôt que d'élargir la page. */
.legal-contenu .wiki-corps table { width: 100%; }
.legal-contenu .wiki-tableau-scroll { overflow-x: auto; }

.legal-autres {
  margin-top: 30px;
  text-align: center;
}
.legal-autres-titre {
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5b7391;
}
.legal-autres ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
}
.legal-autres a { color: #24486f; font-size: 0.9rem; }

@media (max-width: 900px) {
  .legal-corps-grille { grid-template-columns: minmax(0, 1fr); }
  .legal-sommaire { position: static; }
}