/* =====================================================================
   Lore V — feuille de style

   Direction : Los Santos au crépuscule. Affiche sérigraphiée plutôt que
   note de service — ciel dégradé, aplats saturés, gros display, ombres
   dures. Le registre administratif reste un motif (tampons, étiquettes
   mono, fiches) et non le décor entier.

   Deux couches de couleur, à ne pas mélanger :
     1. la PALETTE de marque  (--sable, --nuit, --corail…) : fixe.
     2. les RÔLES thématiques (--fond, --texte, --trait…)  : basculent
        entre le mode jour et le mode nuit.
   Toujours utiliser les rôles dans les règles. La palette ne sert qu'à
   les définir, et pour les surfaces volontairement sombres dans les
   deux modes (bandeau de navigation, hero, pied de page).
   ===================================================================== */

:root{
  /* ================= PALETTE DE MARQUE (fixe) ================= */
  --sable:#f4ead6;
  --sable-clair:#fdf8ee;
  --sable-fonce:#e6d8bd;

  --nuit:#0a161d;
  --nuit-2:#123040;
  --petrole:#164a5c;
  --petrole-clair:#1f7183;

  --soleil:#e2a24a;
  --corail:#d06a45;
  --rose:#b65c7c;
  --tampon:#a52c22;
  --olive:#6b7a2f;

  --creme:#f4eee2;                 /* toujours clair : texte sur fond sombre */
  --creme-doux:rgba(244,238,226,.74);
  --ancre:#101a1f;                 /* toujours foncé : texte sur dégradé   */

  /* ==================== RÔLES — MODE JOUR ==================== */
  --fond:var(--sable);
  --fond-alt:var(--sable-clair);
  --surface:var(--sable-clair);
  --surface-2:var(--sable);
  --surface-3:var(--sable-fonce);

  --texte:#101a1f;
  --texte-corps:#2f383c;
  --texte-doux:#545e61;

  --trait:#101a1f;                 /* bordures franches                    */
  --trait-fin:#d8c8aa;             /* filets discrets                      */

  --alerte:var(--tampon);
  --valide:var(--olive);

  /* Couleurs de marque posées en TEXTE. Les aplats (--corail, --valide…)
     restent vifs pour les fonds, filets et décors ; en petit texte sur le
     sable ils tombaient sous 4,5:1 (WCAG AA). Ces variantes y montent.
     --corail-grand ne sert qu'au display d'au moins 24 px, où 3:1 suffit.
     --l-texte / --l-grand : luminosité OKLCH des textes tirés d'une couleur
     libre (factions, scores, catégories) — voir le bloc @supports en fin
     de feuille. */
  --corail-texte:#a13d16;
  --corail-grand:#cf4f19;
  --alerte-texte:var(--tampon);
  --valide-texte:#566226;
  --l-texte:.45;
  --l-grand:.5;

  --ombre-dure:0 14px 30px -20px rgba(12,26,34,.45);
  --ombre-bouton:4px 4px 0 var(--trait);
  --ombre-carte:0 18px 36px -24px rgba(12,26,34,.5);
  --ombre-flottante:0 26px 60px -30px rgba(12,26,34,.7);
  --ombre-survol:0 22px 42px -24px rgba(12,26,34,.62);
  --grain:.06;

  /* ==================== CARACTÈRES ==================== */
  /* Anton n'existe qu'en une graisse : ne jamais lui demander de gras,
     le navigateur en fabriquerait un faux, épais et sale. */
  --display:"Anton",Impact,"Haettenschweiler",sans-serif;
  /* Titres « signature » façon GTA (hero, grands titres, Mission réussie).
     Prévu pour Pricedown : il suffira de la déclarer dans polices.css et
     de la mettre en tête de cette liste, une fois la licence web acquise. */
  --signature:"Anton",Impact,"Haettenschweiler",sans-serif;
  --corps:"Barlow","Segoe UI",Arial,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,monospace;

  /* ==================== MESURES ==================== */
  --rail:clamp(1.15rem,4.5vw,4.5rem);
  --max:1280px;
  --barre:62px;

  --degrade:linear-gradient(96deg,var(--soleil),var(--corail) 54%,var(--rose));
  /* Le même dégradé quand il PORTE du texte encre (boutons, bandeaux) : au
     bout rose, l'encre tombait à 3,8:1. Un rose plus clair la remonte à
     5,8:1 sans changer l'allure. Le logo et le V géant gardent l'original. */
  --degrade-texte:linear-gradient(96deg,var(--soleil),var(--corail) 54%,#e0708f);

  /* ==================== MOUVEMENT ==================== */
  /* --ease : départ vif, arrivée douce — toutes les transitions.
     --ressort : dépasse un peu puis revient — ce qu'on touche (boutons). */
  --ease:cubic-bezier(.22,1,.36,1);
  --ressort:cubic-bezier(.34,1.56,.64,1);

  /* ==================== RONDEUR ====================
     Trois rayons pour tout le site (voir le bloc RONDEUR en fin de
     fichier). Trop rond, pas assez : ces deux chiffres, rien d'autre. */
  --rayon:16px;
  --rayon-petit:10px;
  --rayon-pilule:999px;

  color-scheme:light;
}

/* ==================== RÔLES — MODE NUIT ====================
   Déclaré deux fois : une fois pour la préférence système (sauf si le
   visiteur a explicitement choisi le jour), une fois pour le choix
   explicite du visiteur. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    --fond:#10222c;
    --fond-alt:#152b36;
    --surface:#193240;
    --surface-2:#1f3b49;
    --surface-3:#26485a;

    --texte:#e1dbce;
    --texte-corps:#b9c5ca;
    --texte-doux:#a5b5bd;

    --trait:#4a6b78;
    --trait-fin:#2a4653;

    --alerte:#e2695e;
    --valide:#a3b556;

    --corail-texte:#eea082;
    --corail-grand:#eea082;
    --alerte-texte:#ff9588;
    --valide-texte:#a9bb5c;
    --l-texte:.8;
    --l-grand:.7;

    --ombre-dure:0 14px 30px -18px rgba(0,0,0,.6);
    --ombre-bouton:4px 4px 0 rgba(0,0,0,.5);
    --ombre-carte:0 18px 36px -22px rgba(0,0,0,.72);
    --ombre-flottante:0 26px 60px -28px rgba(0,0,0,.85);
    --ombre-survol:0 22px 42px -22px rgba(0,0,0,.8);
    --grain:0;

    color-scheme:dark;
  }
}
:root[data-theme="sombre"]{
  --fond:#10222c;
  --fond-alt:#152b36;
  --surface:#193240;
  --surface-2:#1f3b49;
  --surface-3:#26485a;

  --texte:#e1dbce;
  --texte-corps:#b9c5ca;
  --texte-doux:#a5b5bd;

  --trait:#4a6b78;
  --trait-fin:#2a4653;

  --alerte:#e2695e;
  --valide:#a3b556;

  --corail-texte:#eea082;
  --corail-grand:#eea082;
  --alerte-texte:#ff9588;
  --valide-texte:#a9bb5c;
  --l-texte:.8;
  --l-grand:.7;

  --ombre-dure:0 14px 30px -18px rgba(0,0,0,.6);
    --ombre-bouton:4px 4px 0 rgba(0,0,0,.5);
  --ombre-carte:0 18px 36px -22px rgba(0,0,0,.72);
  --ombre-flottante:0 26px 60px -28px rgba(0,0,0,.85);
  --ombre-survol:0 22px 42px -22px rgba(0,0,0,.8);
  --grain:0;

  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}

/* Un `display:` posé sur une classe l'emporte sur la règle [hidden] du
   navigateur — 0,1,0 contre 0,0,1. Les filtres du registre et de
   l'actualité posaient donc l'attribut sans que rien ne se masque, et
   `.entree{display:grid}` gagnait en silence. On rétablit la priorité
   ici, une fois pour toutes. C'est le seul !important de la cascade
   ordinaire — les autres vivent dans @media print et
   prefers-reduced-motion, où il est d'usage. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barre) + 1rem)}
body{
  background:var(--fond);
  color:var(--texte);
  font-family:var(--corps);
  font-size:clamp(1.02rem,.97rem + .26vw,1.14rem);
  line-height:1.75;
  overflow-x:hidden;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
/* grain d'impression, très léger : donne du corps aux aplats */
body::after{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:var(--grain);
}
::selection{background:var(--corail);color:#fff}
img,svg{max-width:100%;display:block}

/* ---------- primitives ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--rail);padding-right:var(--rail)}

.eyebrow{
  font-family:var(--data);font-size:.76rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--corail-texte);
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:1.6rem;height:2px;background:currentColor;flex:none}
.titre{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.95;letter-spacing:-.005em;
  font-size:clamp(2.3rem,1.55rem + 3.4vw,4.1rem);
}
.mono{font-family:var(--data);font-size:.81rem;letter-spacing:.09em;text-transform:uppercase}
.lede{font-size:clamp(1.08rem,1rem + .5vw,1.32rem);line-height:1.6}
/* Barlow n'est servie qu'en romain : on marque l'emphase autrement
   plutôt que de laisser le navigateur pencher les lettres. */
em{font-style:normal;font-weight:600;color:var(--corail-texte)}
.bloc.nuit em,.bloc.petrole em,.entete em,.hero em{color:var(--soleil)}
p + p{margin-top:1.05em}
a{color:inherit}
strong,b{font-weight:700}

code{
  font-family:var(--data);font-size:.88em;
  background:var(--surface-3);padding:.08em .35em;
}
.entete code{background:rgba(244,238,226,.14);color:var(--creme)}

.tampon{
  display:inline-block;align-self:flex-start;
  font-family:var(--data);font-weight:600;font-size:.77rem;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;
  color:var(--tampon);border:2px solid var(--tampon);
  box-shadow:inset 0 0 0 1px var(--tampon);
  padding:.5rem .9rem;line-height:1.35;
  transform:rotate(-6.5deg);opacity:.9;mix-blend-mode:multiply;
}
.tampon b{display:block;font-weight:600;font-size:.92rem;letter-spacing:.1em}

/* ---------- boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--data);font-size:.82rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;padding:.85rem 1.35rem;
  border:2px solid var(--trait);background:var(--surface);color:var(--texte);
  cursor:pointer;text-decoration:none;text-align:center;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease);
}
.bouton:hover{transform:translate(-2px,-2px);box-shadow:var(--ombre-bouton)}
.bouton.plein{background:var(--degrade-texte);color:var(--ancre);border-color:var(--trait)}
.bouton.sombre{background:var(--petrole);color:var(--creme)}
.bouton.creux{background:transparent;color:var(--creme);border-color:rgba(244,238,226,.5)}
.bouton.creux:hover{border-color:var(--creme);box-shadow:5px 5px 0 rgba(10,22,29,.55)}

/* ---------- accès clavier ---------- */
:focus-visible{outline:3px solid var(--corail-grand);outline-offset:3px}
.saut{
  position:absolute;left:.6rem;top:-5rem;z-index:1000;
  background:var(--surface);color:var(--texte);border:2px solid var(--trait);
  padding:.6rem 1rem;font-family:var(--data);font-size:.81rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;transition:top .26s var(--ease);
}
.saut:focus{top:.6rem}

/* =====================================================================
   BARRE DE NAVIGATION — sombre dans les deux modes
   ===================================================================== */
.topbar{
  position:sticky;top:0;z-index:800;
  background:var(--nuit);color:var(--creme);
  border-bottom:1px solid rgba(244,238,226,.12);
}
.topbar .wrap{display:flex;align-items:center;gap:1rem;min-height:var(--barre)}
.marque{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.45rem;letter-spacing:.02em;display:flex;align-items:center;gap:.3rem;
  color:inherit;text-decoration:none;flex:none;
}
.marque .v{background:var(--degrade);color:var(--ancre);padding:0 .3rem;line-height:1.08}
.nav{margin-left:auto;display:flex;align-items:center;gap:.1rem}
.nav a{
  color:var(--creme);text-decoration:none;
  font-family:var(--data);font-size:.8rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.7rem .78rem;white-space:nowrap;position:relative;opacity:.7;
  transition:opacity .26s var(--ease);
}
.nav a:hover{opacity:1}
.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.3rem;
  height:2px;background:var(--soleil);
}
/* ---------- menus déroulants de la barre ----------
   Bâtis sur <details> : sans JavaScript ils s'ouvrent quand même, et le
   clavier les gère nativement. Le script n'ajoute que le confort. */
.deroulant{position:relative}
.deroulant > summary{
  list-style:none;cursor:pointer;position:relative;
  color:var(--creme);font-family:var(--data);font-size:.71rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  padding:.7rem .78rem;white-space:nowrap;opacity:.7;
  display:flex;align-items:center;gap:.45rem;
  transition:opacity .26s var(--ease);
}
.deroulant > summary::-webkit-details-marker{display:none}
.deroulant > summary::after{
  content:"";width:.4rem;height:.4rem;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .26s var(--ease);
}
.deroulant[open] > summary::after{transform:rotate(-135deg) translateY(1px)}
.deroulant > summary:hover,.deroulant[open] > summary,.deroulant[data-actif] > summary{opacity:1}
/* la rubrique dont une page est ouverte porte le même trait que les liens */
.deroulant[data-actif] > summary::before{
  content:"";position:absolute;left:.78rem;right:1.7rem;bottom:.3rem;
  height:2px;background:var(--soleil);
}
.deroulant > ul{
  position:absolute;top:calc(100% + 4px);left:0;z-index:20;
  min-width:15rem;list-style:none;padding:.3rem 0;
  border:1px solid rgba(244,238,226,.14);background:var(--nuit);
  box-shadow:var(--ombre-flottante);
}
.deroulant > ul a{display:block;padding:.62rem .95rem;opacity:.82;letter-spacing:.1em}
.deroulant > ul a:hover{opacity:1;background:rgba(244,238,226,.09)}
.deroulant > ul a[aria-current="page"]{opacity:1;background:rgba(240,165,44,.16)}
.deroulant > ul a[aria-current="page"]::after{display:none}

.nav .discord{
  margin-left:.7rem;background:transparent;color:var(--soleil);
  opacity:1;padding:.55rem 1rem;font-weight:600;border:1px solid var(--soleil);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
.nav .discord::after{display:none}
.nav .discord:hover{background:var(--soleil);color:var(--ancre)}

/* bascule jour / nuit */
.theme{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  background:transparent;border:2px solid rgba(244,238,226,.3);
  color:var(--creme);cursor:pointer;
  transition:border-color .24s var(--ease),background .24s var(--ease),transform .24s var(--ease);
}
.theme:hover{border-color:var(--soleil);color:var(--soleil);transform:translateY(-1px)}
.theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* l'icône annonce la destination : lune en mode jour, soleil en mode nuit */
.theme .soleil{display:none}
:root[data-theme="sombre"] .theme .soleil{display:block}
:root[data-theme="sombre"] .theme .lune{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .theme .soleil{display:block}
  :root:not([data-theme="clair"]) .theme .lune{display:none}
}

.burger{
  display:none;background:none;border:2px solid rgba(244,238,226,.3);
  color:var(--creme);cursor:pointer;padding:.5rem .6rem;flex:none;
}
.burger span{display:block;width:20px;height:2px;background:currentColor;margin:4px 0;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- pages ---------- */
.page{display:none}
/* Pas de `fill-mode` : si l'animation ne démarre pas (onglet en arrière-plan,
   compositing suspendu), la page reste visible au lieu de rester à zéro. */
.page.actif{display:block;animation:apparition .35s var(--ease)}
@keyframes apparition{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* sans JavaScript, tout le contenu reste accessible */
.sans-js .page{display:block}
.sans-js .page + .page{border-top:4px solid var(--trait)}
.sans-js .theme{display:none}
/* l'espace d'administration ne sert à rien sans JavaScript : on l'écarte
   du déroulé où toutes les pages s'affichent à la suite */
.sans-js #admin{display:none}

/* ---------- révélations au défilement ----------
   L'état masqué n'est posé que si le script a effectivement démarré
   l'observateur (classe `reveal-actif` sur <html>). Sans JavaScript, avec
   mouvement réduit, ou si l'observateur ne se déclenche pas, le contenu
   reste visible : une révélation ratée ne doit jamais effacer une section. */
/* Ce sont les ENFANTS qui apparaissent, l'un après l'autre (--i posé par
   app.js). `translate` et non `transform` : les cartes gardent leur
   transform de survol. La transition à retard ne vit que jusqu'à `.fini`,
   sinon le survol hériterait du retard. */
.reveal-actif [data-reveal]:not(.fini) > *{
  transition:opacity .6s var(--ease),translate .8s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}
.reveal-actif [data-reveal]:not(.vu) > *{opacity:0;translate:0 22px}
/* les filets de .promesses sont son fond : ils attendent les cases */
.reveal-actif .promesses:not(.vu){background:transparent}
.promesses{transition:background .6s var(--ease)}
/* Abandon : tout redevient visible d'un coup, sans transition — une
   transition ne s'anime pas là où l'observateur ne s'est pas déclenché. */
.reveal-abandon [data-reveal] > *{opacity:1;translate:none;transition:none}

/* =====================================================================
   HERO — sombre dans les deux modes, c'est le point fixe du site
   ===================================================================== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--nuit);color:var(--creme);
  min-height:min(86vh,780px);
  display:flex;align-items:flex-end;
  /* le bas doit laisser passer le tampon, qui déborde de la fiche */
  padding-block:clamp(4rem,12vw,7rem) clamp(3.5rem,7vw,5rem);
}
/* Le décor tient en quatre calques de même boîte (1600×760), posés en
   « cover » et calés en bas : superposés, ils redonnent le dessin entier.
   Ciel → fond de .hero-art ; lointain → ::before ; ville → ::after ;
   avant-plan (sol, palmiers) → sous les dégradés du voile, qui le couvrent
   comme il couvrait l'image unique. Aucun élément HTML en plus. */
.hero-art{
  position:absolute;inset:0;z-index:-2;overflow:hidden;
  background:url("../img/hero-ciel.svg") center bottom/cover no-repeat,var(--nuit);
}
.hero-art::before,.hero-art::after{
  content:"";position:absolute;inset:0;
  background-position:center bottom;background-size:cover;background-repeat:no-repeat;
}
.hero-art::before{background-image:url("../img/hero-lointain.svg")}
.hero-art::after{background-image:url("../img/hero-ville.svg")}
.hero-voile{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(10,22,29,.9) 0%,rgba(10,22,29,.72) 42%,rgba(10,22,29,.25) 72%,rgba(10,22,29,.45) 100%),
    linear-gradient(to top,rgba(10,22,29,.95) 4%,rgba(10,22,29,0) 46%),
    url("../img/hero-avant.svg") center bottom/cover no-repeat;
}
/* Profondeur au défilement, sans script : quand le hero sort de l'écran,
   le lointain prend du retard (32 % de la hauteur), la ville un peu moins
   (14 %), l'avant-plan suit la page. Le soleil semble se coucher derrière
   la ville. La chronologie est portée par .hero, jamais transformé : un
   calque qui mesurerait sa propre course pendant qu'on le déplace se
   courrait après. Sans prise en charge, ou si le visiteur a demandé moins
   d'animations, le décor reste immobile — c'est l'état par défaut. Pas de
   `animation-fill-mode` : voir « Points de vigilance » dans le README. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    /* Le retrait haut compense la barre de navigation collante (et le
       scroll-padding-top qu'elle impose) : la course démarre à 0 px de
       défilement, pas quelques pixels avant. */
    .hero{view-timeline:--hero block;view-timeline-inset:calc(var(--barre) + 4px) 0px}
    .hero-art::before,.hero-art::after{
      animation-timing-function:linear;
      animation-timeline:--hero;animation-range:exit 0% exit 100%;
    }
    .hero-art::before{animation-name:hero-lointain}
    .hero-art::after{animation-name:hero-ville}
  }
}
@keyframes hero-lointain{from{transform:none}to{transform:translateY(32%)}}
@keyframes hero-ville{from{transform:none}to{transform:translateY(14%)}}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,340px);gap:clamp(2rem,5vw,4rem);align-items:end;width:100%}
.hero .eyebrow{color:var(--soleil)}
.hero h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(3.9rem,2.2rem + 14vw,11rem);line-height:.86;letter-spacing:-.02em;
  margin:.5rem 0 0;display:flex;align-items:flex-start;gap:.05em;
  text-shadow:0 12px 40px rgba(10,22,29,.6);
}
.hero h1 .v{background:var(--degrade);color:var(--ancre);padding:0 .07em;text-shadow:none}
.hero-lede{max-width:44ch;margin-top:1.4rem;color:var(--creme);font-weight:400}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

.fiche{
  background:var(--surface);color:var(--texte);
  border:1px solid var(--trait);box-shadow:var(--ombre-flottante);
  padding:1.15rem 1.25rem 1.3rem;position:relative;
}
.fiche h2{
  font-family:var(--data);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--texte-doux);border-bottom:1px solid var(--trait-fin);padding-bottom:.6rem;
}
.fiche dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin-top:.9rem}
.fiche dt{font-family:var(--data);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-doux);padding-top:.25em}
.fiche dd{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em;line-height:1.15;text-align:right}
/* Ce tampon-ci déborde de la fiche sur le ciel du hero : en `multiply` la
   partie qui dépasse virerait au noir. Il a son propre fond, il n'en a
   pas besoin. */
:root[data-theme="sombre"] .tampon{color:var(--alerte-texte);border-color:#e2695e;box-shadow:inset 0 0 0 1px #e2695e;mix-blend-mode:normal}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .tampon{color:var(--alerte-texte);border-color:#e2695e;box-shadow:inset 0 0 0 1px #e2695e;mix-blend-mode:normal}
}

/* ---------- statut du serveur ---------- */
/* Ces blocs portent `hidden` dans le HTML et ne s'affichent qu'une fois
   la réponse obtenue (voir assets/js/statut.js). La marge est donc posée
   sur les enfants, jamais sur le conteneur : masqués, ils ne laissent
   aucun blanc derrière eux. */

.statut-point{
  width:.62rem;height:.62rem;border-radius:50%;flex:0 0 auto;
  background:var(--texte-doux);
}
.est-en-ligne .statut-point{
  background:var(--valide);box-shadow:0 0 0 0 rgba(122,138,74,.55);
  animation:pouls 2.8s ease-out infinite;
}
@keyframes pouls{70%,100%{box-shadow:0 0 0 .55rem rgba(122,138,74,0)}}
@media(prefers-reduced-motion:reduce){
  .est-en-ligne .statut-point{animation:none}
}

/* dans la fiche du serveur : fond clair */
.fiche-statut{
  display:flex;align-items:center;gap:.55rem;margin-top:.85rem;
  font-family:var(--data);font-size:.76rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--texte);
}
.fiche-statut.est-hors-ligne{color:var(--texte-doux)}

/* sous les boutons du hero : fond sombre */
.hero-adresse{margin:0}
.lien-nu{
  display:inline-block;margin-top:1rem;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--data);font-size:.74rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--creme);
  opacity:.72;text-decoration:underline;text-underline-offset:.3em;
  transition:opacity .24s var(--ease);
}
.lien-nu:hover{opacity:1}

/* en tête de la page Jeux : fond sombre */
.statut-barre{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem}
.statut-barre > *{margin-top:1.7rem}
.statut-ligne{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--data);font-size:.79rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--creme);
}
.statut-ligne.est-hors-ligne{opacity:.72}


/* =====================================================================
   SECTIONS
   ===================================================================== */
.bloc{padding-block:clamp(3.2rem,7vw,5.75rem);position:relative}
.bloc.creme{background:var(--fond-alt)}
.bloc.nuit{background:var(--nuit);color:var(--creme)}
.bloc.nuit .eyebrow{color:var(--soleil)}
.bloc.nuit .titre{color:var(--creme)}
.bloc.petrole{background:var(--petrole);color:var(--creme)}
.bloc.petrole .eyebrow{color:var(--soleil)}
/* Surfaces sombres dans les deux modes : le corail d'origine y est lisible
   (5,2:1 sur la nuit), les variantes « texte », faites pour le sable, y
   seraient trop foncées. On y rend l'aplat. La carte n'en fait pas partie :
   ses infobulles sont claires. */
.topbar,.hero,.entete,.bloc.nuit,.bloc.petrole,.partie,.promesse,.sortie,footer{
  --corail-texte:var(--corail);--corail-grand:var(--corail);
}
.bloc + .bloc:not(.nuit):not(.petrole){border-top:1px solid var(--trait-fin)}

.duo{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.duo > header{position:sticky;top:calc(var(--barre) + 1.5rem)}
/* colonne étroite : le display doit rester sous la largeur disponible,
   sinon les titres se cassent en mots isolés */
.duo > header .titre{margin-top:.6rem;font-size:clamp(1.7rem,1.25rem + 1.4vw,2.35rem);line-height:1}
.corps{max-width:64ch}
.corps > .titre{margin-bottom:.7rem}

/* en-tête de page intérieure */
.entete{
  background:var(--nuit);color:var(--creme);position:relative;overflow:hidden;
  padding-block:clamp(2.75rem,7vw,4.5rem);
}
.entete::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 130% at 88% 0%,rgba(226,97,47,.4),transparent 62%),
             radial-gradient(70% 120% at 8% 100%,rgba(31,113,131,.5),transparent 60%);
}
.entete .wrap{position:relative}
.entete .titre{color:var(--creme);margin-top:.7rem}
.entete .lede{color:var(--creme-doux);max-width:60ch;margin-top:1.1rem}
.entete h1:focus{outline:none}

/* ---------- en-tête avec capture du jeu ----------
   Trois couches dans .entete (isolée, pour que les fusions restent dedans) :
     fond nuit → ::after la photo, en « luminosity » : elle garde ses
     lumières mais prend la teinte nuit du fond, comme un duotone →
     ::before les lueurs corail/pétrole d'origine + un voile côté texte
     et un fondu en bas → .wrap le texte.
   Photo posée par app.js (--photo) seulement une fois chargée. */
.entete.a-photo{isolation:isolate;min-height:clamp(15rem,30vw,22rem);display:flex;align-items:flex-end}
.entete.a-photo .wrap{z-index:2;width:100%}
.entete.a-photo::before{
  z-index:1;
  background:
    linear-gradient(to right,rgba(10,22,29,.9) 0%,rgba(10,22,29,.7) 40%,rgba(10,22,29,.15) 78%,rgba(10,22,29,.3) 100%),
    linear-gradient(to top,var(--nuit) 0%,rgba(10,22,29,0) 45%),
    radial-gradient(90% 130% at 88% 0%,rgba(226,97,47,.45),transparent 62%),
    radial-gradient(70% 120% at 8% 100%,rgba(31,113,131,.45),transparent 60%);
}
.entete.a-photo::after{
  content:"";position:absolute;inset:-14% 0 0;z-index:0;
  background:var(--photo) center 40%/cover no-repeat;
  filter:contrast(1.12) saturate(.9);
  mix-blend-mode:luminosity;opacity:.85;
  animation:photo-entree 1.1s var(--ease);
}
/* pas de fill-mode : si l'animation ne part pas, la photo est déjà là */
@keyframes photo-entree{from{opacity:0;transform:scale(1.06)}}
/* en petit écran le texte occupe toute la largeur : voile uniforme */
@media(max-width:700px){
  .entete.a-photo::before{
    background:linear-gradient(to top,var(--nuit) 0%,rgba(10,22,29,.72) 55%,rgba(10,22,29,.55) 100%),
      radial-gradient(90% 130% at 88% 0%,rgba(226,97,47,.4),transparent 62%);
  }
}
/* Profondeur au défilement, comme le hero : la photo prend du retard. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .entete.a-photo{view-timeline:--entete block;view-timeline-inset:calc(var(--barre) + 4px) 0px}
    .entete.a-photo::after{
      animation:photo-entree 1.1s var(--ease),entete-recul linear;
      animation-timeline:auto,--entete;
      animation-range:normal,exit 0% exit 100%;
    }
  }
}
@keyframes entete-recul{to{translate:0 12%}}

/* ---------- cartes postales de l'accueil ---------- */
.cartes-postales{overflow:hidden}
.cartes-piste{
  list-style:none;display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(1rem,3vw,2.2rem);margin-top:1.6rem;padding-block:1rem;
}
.carte-postale{
  flex:0 1 clamp(14rem,24vw,19rem);
  background:var(--creme);padding:.55rem .55rem 2.1rem;
  box-shadow:var(--ombre-flottante),6px 6px 0 rgba(0,0,0,.35);
  rotate:-3deg;
  transition:rotate .45s var(--ressort),scale .45s var(--ressort),box-shadow .3s var(--ease);
}
.carte-postale:nth-child(even){rotate:2.5deg;translate:0 .8rem}
.carte-postale:nth-child(3n){rotate:-1.2deg}
.carte-postale:hover{rotate:0deg;scale:1.05;z-index:1;box-shadow:var(--ombre-flottante),10px 10px 0 rgba(0,0,0,.4)}
.carte-postale img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:saturate(1.05) contrast(1.05)}

/* citation détachée */
.citation{
  margin-top:2.4rem;padding:1.5rem 0 1.5rem 1.6rem;
  border-left:3px solid var(--soleil);
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,1.1rem + 1.3vw,2rem);line-height:1.05;letter-spacing:.005em;
}

.encadre{
  margin-top:2.2rem;background:var(--surface);
  border:2px solid var(--trait);box-shadow:var(--ombre-dure);
  padding:1.25rem 1.4rem;font-size:.96rem;color:var(--texte-corps);
}
.bloc.creme .encadre{background:var(--surface-2)}
.bloc.nuit .encadre,.bloc.petrole .encadre{background:rgba(244,238,226,.07);border-color:rgba(244,238,226,.3);box-shadow:none;color:var(--creme)}
.encadre .mono{display:block;color:var(--corail-texte);font-weight:600;margin-bottom:.5rem}
.encadre ul + p{margin-top:1.05em}
.engagements{list-style:none;display:grid;gap:.6rem;margin-top:.4rem}
.engagements li{position:relative;padding-left:1.3rem}
.engagements li::before{
  content:"";position:absolute;left:0;top:.6em;width:.6rem;height:.6rem;
  background:var(--corail);
}
.bloc.nuit .encadre .mono,.bloc.petrole .encadre .mono{color:var(--soleil)}

/* ---------- promesses ---------- */
.promesses{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(244,238,226,.18);list-style:none}
/* 4, 2 ou 1 colonne — jamais 3 : la quatrième case resterait seule et le
   fond (qui dessine les filets) remplirait les cases vides en gris. */
@media(max-width:980px){.promesses{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.promesses{grid-template-columns:1fr}}
.promesse{background:var(--nuit);padding:1.5rem 1.4rem 1.7rem}
.promesse .cle{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.85rem;line-height:1;color:var(--soleil)}
.promesse p{font-size:.9rem;color:var(--creme-doux);margin-top:.5rem}

/* ---------- parcours en étapes ---------- */
.parcours{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1.1rem;
  margin-top:2.2rem;list-style:none;
}
.etape{
  background:var(--surface);border:2px solid var(--trait);
  box-shadow:var(--ombre-carte);padding:1.35rem 1.3rem 1.6rem;position:relative;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.etape::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--soleil)}
.etape:hover{transform:translateY(-4px);box-shadow:var(--ombre-survol)}
.bloc.creme .etape{background:var(--surface-2)}
.etape .num{font-family:var(--display);font-weight:400;font-size:2.8rem;line-height:1;color:var(--corail-grand)}
.etape h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.28rem;letter-spacing:.01em;margin:.3rem 0 .4rem}
.etape p{font-size:.93rem;color:var(--texte-corps)}

/* ---------- charte ---------- */
.charte{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem;margin-top:2rem;list-style:none}
.article{
  background:var(--surface);border:2px solid var(--trait);
  padding:1.3rem 1.35rem 1.5rem;position:relative;
  box-shadow:var(--ombre-carte);transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.bloc.creme .article{background:var(--surface-2)}
.article:hover{transform:translateY(-4px);box-shadow:var(--ombre-survol)}
.article .ref{
  font-family:var(--data);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fond);background:var(--texte);
  display:inline-block;padding:.28rem .6rem;
}
.article h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.32rem;letter-spacing:.01em;margin:.7rem 0 .35rem}
.article p{font-size:.95rem;color:var(--texte-corps)}

/* =====================================================================
   REGISTRE DES MISES À JOUR
   ===================================================================== */
.filtres{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.filtre{
  font-family:var(--data);font-size:.77rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.55rem 1rem;cursor:pointer;
  border:2px solid var(--trait-fin);background:transparent;color:var(--texte-doux);
  transition:border-color .24s var(--ease),color .24s var(--ease),background .24s var(--ease);
}
.filtre:hover{border-color:var(--texte-doux);color:var(--texte)}
.filtre[aria-pressed="true"]{background:var(--texte);border-color:var(--texte);color:var(--fond)}

.chrono{margin-top:2.4rem;position:relative;padding-left:clamp(1.5rem,4vw,3rem)}
.chrono::before{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:3px;background:var(--trait-fin)}
.entree{
  position:relative;padding:0 0 2.2rem;
  display:grid;grid-template-columns:9rem minmax(0,1fr);gap:clamp(.9rem,3vw,2.5rem);
}
.entree::before{
  content:"";position:absolute;left:calc(-1 * clamp(1.5rem,4vw,3rem) - 6px);top:.55rem;
  width:15px;height:15px;background:var(--accent,var(--corail));border:3px solid var(--fond);
}
.bloc.creme .entree::before{border-color:var(--fond-alt)}
.entree .horo{font-family:var(--data);font-size:.79rem;letter-spacing:.07em;color:var(--texte-doux);line-height:1.8}
.entree .horo strong{display:block;font-size:1.02rem;font-weight:600;color:var(--texte);letter-spacing:.03em}
.entree .horo .version{display:inline-block;margin-top:.35rem;border:1px solid var(--trait-fin);padding:.1rem .45rem}
.entree h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.42rem;letter-spacing:.01em;margin:.45rem 0 .5rem}
.entree ul{list-style:none;display:grid;gap:.45rem}
.entree li{position:relative;padding-left:1.15rem;font-size:.96rem;color:var(--texte-corps)}
.entree li::before{content:"";position:absolute;left:0;top:.68em;width:.55rem;height:2px;background:var(--accent,var(--corail))}
.etiquette{
  display:inline-block;font-family:var(--data);font-size:.7rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;padding:.26rem .6rem;
  color:var(--creme);background:var(--accent,var(--corail));
}
.et-ajout{--accent:var(--valide)}
.et-structure{--accent:var(--petrole-clair)}
.et-retrait{--accent:var(--alerte)}
.et-correctif{--accent:var(--texte-doux)}
.vide{margin-top:1.5rem;font-family:var(--data);font-size:.85rem;letter-spacing:.07em;text-transform:uppercase;color:var(--texte-doux)}

/* =====================================================================
   FACTIONS
   ===================================================================== */
.outils{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;margin-top:2.2rem}
.wrap > .outils:first-child,.wrap > .filtres:first-child{margin-top:0}
.onglets{display:flex;border:2px solid var(--trait);background:var(--surface)}
.onglet{
  font-family:var(--data);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.75rem 1.3rem;border:0;background:transparent;color:var(--texte-doux);cursor:pointer;
  transition:background .26s var(--ease),color .26s var(--ease);
}
.onglet + .onglet{border-left:2px solid var(--trait)}
.onglet[aria-selected="true"]{color:var(--creme)}
.onglet[aria-selected="true"].illegal{background:var(--tampon)}
.onglet[aria-selected="true"].legal{background:var(--petrole)}
.onglet .compte{opacity:.65;margin-left:.45rem;font-weight:400}

.recherche{position:relative;flex:1;min-width:230px;max-width:340px}
.recherche input{
  width:100%;font-family:var(--data);font-size:.88rem;letter-spacing:.06em;
  padding:.72rem .8rem .72rem 2.2rem;border:2px solid var(--trait);
  background:var(--surface);color:var(--texte);
}
.recherche input::placeholder{color:var(--texte-doux)}
.recherche::before{
  content:"";position:absolute;left:.85rem;top:50%;width:.85rem;height:.85rem;
  margin-top:-.55rem;border:2px solid var(--texte-doux);border-radius:50%;
}
.recherche::after{
  content:"";position:absolute;left:1.55rem;top:50%;margin-top:.2rem;
  width:.45rem;height:2px;background:var(--texte-doux);transform:rotate(45deg);
}

.groupe{margin-top:2.6rem}
.groupe > h3{
  font-family:var(--data);font-size:.77rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-doux);display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem;
}
.groupe > h3::after{content:"";flex:1;height:1px;background:var(--trait-fin)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:1.1rem}

.carte{
  --accent:var(--petrole);
  --accent-bar:var(--accent);
  --accent-texte:var(--accent);
  background:var(--surface);border:2px solid var(--trait);
  box-shadow:var(--ombre-carte);padding:1.2rem 1.25rem 1.35rem;
  display:flex;flex-direction:column;gap:.55rem;position:relative;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.carte::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:5px;background:var(--accent-bar)}
.carte:hover{transform:translateY(-4px);box-shadow:var(--ombre-survol)}
/* Une fiche peut porter jusqu'à trois étiquettes — direction, score,
   statut. Sur une ligne elles rognaient le titre et se coupaient : le
   groupe passe donc à la ligne entière quand il ne tient plus. */
.carte > header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:.5rem .8rem;flex-wrap:wrap;
}
.carte > header h4{flex:1 1 auto;min-width:8ch}
.carte h4{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.32rem;line-height:1.05;letter-spacing:.01em}
.carte p{font-size:.92rem;color:var(--texte-corps);flex:1}
.pastille{
  font-family:var(--data);font-size:.66rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.24rem .5rem;flex:none;white-space:nowrap;
  border:1px solid var(--accent-texte);color:var(--accent-texte);
}
/* en mode nuit, les accents foncés sont éclaircis pour rester lisibles */
:root[data-theme="sombre"] .carte{
  --accent-bar:color-mix(in oklab,var(--accent) 76%,#ffffff);
  --accent-texte:color-mix(in oklab,var(--accent) 52%,#ffffff);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .carte{
    --accent-bar:color-mix(in oklab,var(--accent) 76%,#ffffff);
    --accent-texte:color-mix(in oklab,var(--accent) 52%,#ffffff);
  }
}
.zones{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.2rem}
.zones li{
  font-family:var(--data);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texte-doux);background:var(--surface-3);padding:.24rem .5rem;
}

.jetons{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.5rem}
.jetons li{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  border:1px solid var(--trait-fin);background:var(--surface);padding:.6rem .75rem;
  transition:border-color .24s var(--ease),transform .24s var(--ease);
}
.jetons li:hover{border-color:var(--trait);transform:translateX(3px)}
.jetons b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.02rem;letter-spacing:.01em}
.jetons span{font-family:var(--data);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--texte-doux);text-align:right;flex:none}

/* =====================================================================
   FORMULAIRE DE RECENSEMENT
   ===================================================================== */
.formulaire{
  margin-top:2.6rem;border:2px solid var(--trait);background:var(--surface);
  box-shadow:var(--ombre-dure);padding:clamp(1.3rem,3.5vw,2.25rem);
}
.bloc.creme .formulaire{background:var(--surface-2)}
.formulaire > h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.95rem;letter-spacing:.01em}
.formulaire > p.intro{font-size:.94rem;color:var(--texte-corps);margin-top:.45rem;max-width:60ch}
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.4rem;margin-top:1.9rem}
.champ{display:flex;flex-direction:column;gap:.4rem;border:0;padding:0;min-width:0}
.champ.large{grid-column:1/-1}
.champ label,.champ legend{font-family:var(--data);font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--texte-doux)}
.champ .aide{font-family:var(--corps);font-size:.85rem;color:var(--texte-doux);letter-spacing:0;text-transform:none;font-weight:400}
.champ input[type=text],.champ select,.champ textarea{
  font-family:var(--corps);font-size:1rem;color:var(--texte);
  background:var(--surface-2);border:2px solid var(--trait);padding:.68rem .8rem;width:100%;
  transition:box-shadow .24s var(--ease);
}
.bloc.creme .champ input[type=text],.bloc.creme .champ select,.bloc.creme .champ textarea{background:var(--surface)}
.champ input:focus,.champ select:focus,.champ textarea:focus{box-shadow:4px 4px 0 var(--corail-grand)}
.champ textarea{min-height:9.5rem;resize:vertical;line-height:1.55}
.champ select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 1.15rem,calc(100% - .75rem) 1.15rem;
  background-size:6px 6px;background-repeat:no-repeat;
}
.cases{display:flex;flex-wrap:wrap;gap:.5rem}
.case{
  display:flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:var(--data);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  border:2px solid var(--trait-fin);padding:.5rem .8rem;transition:border-color .24s var(--ease),color .24s var(--ease);
}
.case:hover{border-color:var(--texte-doux)}
.case input{accent-color:var(--corail);width:1rem;height:1rem}
.case:has(input:checked){border-color:var(--corail-texte);color:var(--corail-texte)}
.engagement{
  /* `.champ` impose une colonne : on repasse en ligne pour coller la case
     au texte plutôt que de l'empiler au-dessus. */
  grid-column:1/-1;display:flex;flex-direction:row;gap:.7rem;align-items:flex-start;
  border-top:1px solid var(--trait-fin);padding-top:1.3rem;font-size:.94rem;cursor:pointer;
}
.engagement input{margin-top:.35em;accent-color:var(--corail);width:1.05rem;height:1.05rem;flex:none}
.compteur{font-family:var(--data);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--texte-doux);align-self:flex-end}
.compteur.ok{color:var(--valide-texte)}
.erreur{font-family:var(--data);font-size:.71rem;letter-spacing:.07em;text-transform:uppercase;color:var(--alerte-texte);display:none}
.champ.invalide .erreur{display:block}
.champ.invalide input[type=text],.champ.invalide select,.champ.invalide textarea{border-color:var(--alerte)}
.actions-form{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.9rem}
.sortie{margin-top:1.9rem;border:2px solid var(--trait);background:var(--nuit);color:var(--creme);padding:1.15rem 1.25rem}
.sortie:focus{outline:none;box-shadow:0 0 0 3px var(--corail)}
.sortie h3{font-family:var(--data);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soleil)}
.sortie pre{font-family:var(--data);font-size:.8rem;line-height:1.75;white-space:pre-wrap;word-break:break-word;margin-top:.85rem}
.sortie .actions-form{margin-top:1.2rem}

/* =====================================================================
   APPEL FINAL, PIED DE PAGE, PAGES LÉGALES
   ===================================================================== */
.appel{
  background:var(--nuit-2);color:var(--creme);
  padding-block:clamp(2.75rem,6vw,4.25rem);position:relative;overflow:hidden;
}
.appel .wrap{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between;position:relative}
.appel .eyebrow{color:var(--soleil)}
.appel .titre{font-size:clamp(2.1rem,1.4rem + 3vw,3.4rem);max-width:17ch;margin-top:.6rem}
.appel p{color:var(--creme-doux);max-width:40ch;margin-top:.7rem}
.appel .bouton{background:var(--degrade-texte);color:var(--ancre);border-color:var(--ancre)}
.appel .bouton:hover{box-shadow:4px 4px 0 rgba(0,0,0,.45)}

footer{background:var(--nuit);color:var(--creme-doux);padding-block:3rem 2rem;font-size:.87rem}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(0,1fr));gap:2rem}
footer .wrap + .wrap{display:block;margin-top:0}
footer h2{font-family:var(--data);font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soleil);margin-bottom:.9rem}
footer .marque{font-size:1.35rem;color:var(--creme);margin-bottom:.9rem}
footer p{max-width:48ch;font-size:.82rem;line-height:1.6}
footer ul{list-style:none;display:grid;gap:.5rem}

/* Rubriques repliables du pied de page.
   Vingt et un liens empilés faisaient un pied de page plus haut que
   certaines pages. Repliés, ils tiennent en quatre lignes — et comme
   partout ailleurs sur le site, c'est un <details> : sans JavaScript ils
   s'ouvrent quand même, et le clavier les gère nativement. */
footer .pliant{border-bottom:1px solid rgba(244,238,226,.12)}
footer .pliant > summary{
  list-style:none;cursor:pointer;
  font-family:var(--data);font-size:.73rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soleil);
  padding:.85rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  transition:opacity .26s var(--ease);
}
footer .pliant > summary::-webkit-details-marker{display:none}
footer .pliant > summary:hover{opacity:.78}
footer .pliant > summary::after{
  content:"";width:.4rem;height:.4rem;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .26s var(--ease);
}
footer .pliant[open] > summary::after{transform:rotate(-135deg) translateY(1px)}
footer .pliant > ul{padding-bottom:1.1rem}

/* Le lien d'administration. Discret sans être caché : la page est fermée
   par un mot de passe côté serveur, et robots.txt l'écarte des moteurs —
   la dissimuler ne protégerait rien de plus, et obligerait l'équipe à
   retenir une adresse. */
.lien-admin{
  text-decoration:none;opacity:.42;
  transition:opacity .24s var(--ease),color .24s var(--ease);
}
.lien-admin:hover,.lien-admin:focus-visible{opacity:1;color:var(--soleil)}
footer a{text-decoration:none;opacity:.8;transition:opacity .24s var(--ease)}
footer a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.bas{
  margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(244,238,226,.16);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;
  font-family:var(--data);font-size:.71rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6;
  max-width:none;
}

/* `.legal` est posé sur un `.wrap` : on ne réduit pas le conteneur, sinon
   il se recentre et se désaligne des blocs pleine largeur de la même page.
   C'est chaque bloc de texte qui est ramené à une largeur de lecture. */
.legal > *{max-width:74ch}
.legal h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.6rem;letter-spacing:.01em;margin-top:2.4rem;
  padding-bottom:.4rem;border-bottom:2px solid var(--trait);
}
.legal p,.legal ul{margin-top:.9rem;font-size:.96rem;color:var(--texte-corps)}
.legal ul{list-style:none;display:grid;gap:.5rem}
.legal li{position:relative;padding-left:1.15rem}
.legal li::before{content:"";position:absolute;left:0;top:.68em;width:.55rem;height:2px;background:var(--corail)}
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.3rem;margin-top:1rem;font-size:.94rem}
.legal dt{font-family:var(--data);font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;color:var(--texte-doux);padding-top:.3em}
.legal a{text-underline-offset:3px}
.legal h3{
  font-family:var(--data);font-size:.84rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--corail-texte);margin-top:1.6rem;
}
.legal sup{font-size:.65em}

/* ---------- boutique ---------- */
.garde-fou{border-width:3px;border-color:var(--tampon)}
.garde-fou .mono{color:var(--alerte-texte)}

.produit{gap:.65rem}
.produit .prix{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  font-family:var(--display);text-transform:uppercase;
  font-size:1.9rem;line-height:1;color:var(--texte);
}
/* sans chiffre, le montant est en toutes lettres : on le distingue du titre
   par la couleur, sinon la carte a l'air d'avoir deux titres */
.produit .prix .montant{font-size:1.15rem;color:var(--accent-texte,var(--accent))}
.produit .prix .periode{
  font-family:var(--data);font-size:.77rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texte-doux);
}
.produit .prix .aremplir{font-size:1.5rem;padding:.05rem .5rem}
.inclus{list-style:none;display:grid;gap:.4rem;margin-top:.1rem}
.inclus li{position:relative;padding-left:1.5rem;font-size:.9rem;color:var(--texte-corps)}
.inclus li::before{
  content:"";position:absolute;left:.15rem;top:.42em;
  width:.5rem;height:.28rem;border-left:2px solid var(--accent-texte,var(--accent));
  border-bottom:2px solid var(--accent-texte,var(--accent));transform:rotate(-45deg);
}
.produit .fine{font-size:.82rem;color:var(--texte-doux);border-top:1px solid var(--trait-fin);padding-top:.7rem}
.produit .bouton{margin-top:auto;align-self:flex-start}

/* ---------- liste de remerciements ----------
   Une seule taille, un seul style : la page ne hiérarchise pas les noms. */
.merci{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.5rem}
.merci:empty{display:none}
.intro-groupe{font-size:.92rem;color:var(--texte-corps);max-width:62ch;margin:-.4rem 0 1rem}
.merci li{
  font-family:var(--display);text-transform:uppercase;font-size:1.15rem;
  letter-spacing:.01em;line-height:1.2;padding:.6rem .8rem;
  background:var(--surface);border-left:3px solid var(--corail);
}
.bloc.creme .merci li{background:var(--surface-2)}

/* L'équipe, lue sur Discord : un titre par grade, à la couleur du rôle. */
.equipe-grades .grade{
  font-family:var(--data);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texte-doux);margin:1.4rem 0 .6rem;padding-left:.6rem;
  border-left:3px solid var(--accent,var(--corail));
}
.equipe-grades .grade:first-child{margin-top:0}
.equipe{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem}
.equipe li{
  display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;background:var(--surface);
  font-family:var(--display);text-transform:uppercase;font-size:1.05rem;line-height:1.2;min-width:0;
}
.equipe li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.equipe img{width:48px;height:48px;border-radius:50%;flex:none;background:var(--surface-2)}

/* ---------- mes personnages (profil) ---------- */
.code-lier{font-size:1.6rem;letter-spacing:.14em;margin:.6rem 0;user-select:all}
.persos.grille{margin-top:1rem}
.carte.perso.morte{opacity:.6}
.carte.perso.morte h4{text-decoration:line-through}
.lien-bouton{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* ---------- table des touches ---------- */
.touches{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.5rem}
.touches li{
  display:flex;align-items:center;gap:.5rem;
  border:1px solid var(--trait-fin);background:var(--surface);padding:.55rem .7rem;
}
.bloc.creme .touches li{background:var(--surface-2)}
.touches span{
  font-size:.88rem;color:var(--texte-corps);margin-left:auto;text-align:right;
}
kbd{
  font-family:var(--data);font-size:.76rem;font-weight:600;line-height:1;
  min-width:2.1rem;padding:.4rem .45rem;text-align:center;
  border:2px solid var(--trait);border-bottom-width:4px;
  background:var(--fond);color:var(--texte);flex:none;
}
kbd.aremplir{border-color:var(--alerte);color:var(--alerte-texte)}

/* ---------- carte interactive ---------- */
.carte-cadre{
  margin-top:2rem;border:2px solid var(--trait);box-shadow:var(--ombre-dure);
  background:var(--nuit);
}
/* Deux pièges ici :
   1. `.carte-toile` EST le conteneur Leaflet, pas son parent ;
   2. `leaflet.css` est injecté après cette feuille, donc à spécificité
      égale son `.leaflet-container{background:#ddd}` l'emporterait.
   D'où le sélecteur en deux classes. */
.carte-cadre .carte-toile{
  height:clamp(20rem,62vh,38rem);width:100%;
  background:var(--nuit);font-family:var(--corps);
}
/* sélecteur de plan — même remarque de spécificité que pour le fond */
.carte-cadre .leaflet-control-layers{
  background:var(--surface);border:2px solid var(--trait);border-radius:0;
  box-shadow:var(--ombre-carte);padding:.6rem .75rem;
}
.carte-cadre .leaflet-control-layers-base label{
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--data);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texte);cursor:pointer;
}
.carte-cadre .leaflet-control-layers-base label + label{margin-top:.3rem}
.carte-cadre .leaflet-control-layers input{accent-color:var(--corail);margin:0}

/* lien de retour vers le sommaire d'une rubrique */
.retour{margin-top:1.4rem}
.retour a{
  font-family:var(--data);font-size:.74rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--creme-doux);text-decoration:none;
  border-bottom:1px solid rgba(244,238,226,.35);padding-bottom:.15rem;
  transition:color .24s var(--ease),border-color .24s var(--ease);
}
.retour a:hover{color:var(--soleil);border-color:var(--soleil)}

.carte-toile .leaflet-control-zoom a{
  background:var(--surface);color:var(--texte);border-color:var(--trait);
  font-family:var(--data);
}
.carte-toile .leaflet-control-zoom a:hover{background:var(--surface-2)}
.carte-toile .leaflet-bar{border:2px solid var(--trait);box-shadow:none}

/* ---------- fil d'actualité ----------
   Les classes `et-…` doivent venir APRÈS `.carte`, qui pose elle aussi
   `--accent` : à spécificité égale, c'est la dernière déclarée qui gagne. */
.actus{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.actu{gap:.5rem}
.actu > header{align-items:center;gap:.7rem}
.actu h3{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.42rem;line-height:1.08;letter-spacing:.01em;margin-top:.25rem;
}
.actu p{font-size:.92rem;color:var(--texte-corps)}
.horo-actu{
  font-family:var(--data);font-size:.72rem;letter-spacing:.1em;
  color:var(--texte-doux);white-space:nowrap;flex:none;
}
.et-annonce{--accent:#1f7183}
.et-evenement{--accent:#c2521f}
.et-reunion{--accent:#a07714}
.et-compte-rendu{--accent:#5c6669}

/* ---------- jalons de sommaire (FAQ) ---------- */
.jalons{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;flex:1 1 24rem}
.jalons a{
  display:block;font-family:var(--data);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:.5rem .85rem;
  border:2px solid var(--trait-fin);color:var(--texte-doux);text-decoration:none;
  transition:border-color .24s var(--ease),color .24s var(--ease);
}
.jalons a:hover{border-color:var(--corail);color:var(--corail-texte)}

/* ---------- questions fréquentes ---------- */
.faq{display:grid;gap:.6rem;margin-top:.5rem}
.faq details{border:2px solid var(--trait);background:var(--surface);transition:box-shadow .26s var(--ease)}
.bloc.creme .faq details{background:var(--surface-2)}
.faq details[open]{box-shadow:var(--ombre-dure)}
.faq summary{
  cursor:pointer;list-style:none;padding:.95rem 3rem .95rem 1.1rem;position:relative;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.08rem;letter-spacing:.01em;line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.15rem;top:1.25rem;
  width:.7rem;height:.7rem;border-right:2px solid var(--corail);border-bottom:2px solid var(--corail);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.5rem}
.faq summary:hover{color:var(--corail-texte)}
.faq p{padding:0 1.1rem 1.15rem;font-size:.94rem;color:var(--texte-corps);max-width:62ch}

/* ---------- repères documentaires (3 colonnes dans un encadré) ---------- */
.reperes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem;margin:1.2rem 0}
.reperes > div{border-top:2px solid var(--corail);padding-top:.7rem}
.reperes h4{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.1rem;letter-spacing:.01em;margin-bottom:.4rem}
.reperes p{font-size:.85rem;margin-top:.35rem}
.reperes p + p{margin-top:.35rem}
.reperes b{
  display:block;font-family:var(--data);font-size:.66rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--texte-doux);
}
.bloc.nuit .reperes b,.bloc.petrole .reperes b{color:var(--creme-doux)}

/* ---------- sommaire du règlement ---------- */
.sommaire{
  margin-top:2rem;border:2px solid var(--trait);background:var(--surface);
  box-shadow:var(--ombre-dure);padding:1.3rem 1.5rem 1.5rem;
}
.sommaire h2{
  font-family:var(--data);font-size:.73rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texte-doux);margin:0;border:0;padding:0;
}
.sommaire ol{margin-top:1rem;padding-left:0;list-style:none;counter-reset:som;display:grid;gap:.45rem}
.sommaire li{counter-increment:som;position:relative;padding-left:3.6rem;font-size:.94rem}
.sommaire li::before{
  content:"Art. " counter(som);position:absolute;left:0;top:.2em;white-space:nowrap;
  font-family:var(--data);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--texte-doux);
}
.sommaire a{text-decoration:none;border-bottom:1px solid var(--trait-fin);transition:border-color .24s var(--ease)}
.sommaire a:hover{border-color:var(--corail)}
/* intertitre du sommaire : ne consomme pas de numéro d'article */
.sommaire li.tete{
  counter-increment:none;padding-left:0;margin-top:1.2rem;
  font-family:var(--data);font-size:.79rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--corail-texte);
}
.sommaire li.tete::before{content:none}
.sommaire li.tete:first-child{margin-top:0}
.sommaire .raccourci{
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--trait-fin);
  font-size:.94rem;color:var(--texte-corps);
}

/* ---------- bandeau de partie dans le règlement ----------
   Sélecteur en deux classes : `.legal p` est plus spécifique qu'une classe
   seule et écraserait la couleur comme la taille. */
.partie,.legal .partie{
  margin-top:3.6rem;padding:.95rem 1.2rem;
  background:var(--nuit);color:var(--creme);
  font-family:var(--display);text-transform:uppercase;
  font-size:1.5rem;line-height:1.15;
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
}
.partie span{
  font-family:var(--data);font-size:.72rem;font-weight:600;letter-spacing:.13em;
  color:var(--soleil);flex:none;
}
.legal .partie + h2{margin-top:1.6rem}

/* ---------- lexique ----------
   Sélecteurs en deux classes : `.legal dl` et `.legal dt` sont plus
   spécifiques qu'une classe seule et reprendraient la main. */
.legal .lexique{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:.9rem;margin-top:1.3rem;max-width:none;
}
.legal .lexique > div{
  background:var(--surface);border:1px solid var(--trait-fin);
  border-left:4px solid var(--corail);padding:.9rem 1.05rem;
}
.bloc.creme .legal .lexique > div{background:var(--surface-2)}
.legal .lexique dt{
  font-family:var(--display);text-transform:uppercase;font-size:1.2rem;
  letter-spacing:.01em;line-height:1.1;color:var(--texte);padding:0;
}
.legal .lexique dt span{
  display:block;font-family:var(--data);font-size:.7rem;font-weight:500;
  letter-spacing:.08em;text-transform:none;color:var(--texte-doux);margin-top:.2rem;
}
.legal .lexique dd{font-size:.88rem;color:var(--texte-corps);margin-top:.55rem}
.legal .partie + p{margin-top:1.5rem}

/* ---------- aperçu de la charte sur la page Vision ---------- */
.apercu-charte{list-style:none;counter-reset:pr;display:grid;gap:.7rem;margin-top:1.8rem}
.apercu-charte li{
  counter-increment:pr;position:relative;padding-left:3.2rem;
  border-bottom:1px solid var(--trait-fin);padding-bottom:.7rem;
}
.apercu-charte li::before{
  content:counter(pr,decimal-leading-zero);position:absolute;left:0;top:-.1em;
  font-family:var(--display);font-size:1.6rem;color:var(--corail-grand);
}
.apercu-charte a{
  display:block;font-family:var(--display);text-transform:uppercase;
  font-size:1.2rem;letter-spacing:.01em;text-decoration:none;
  border-bottom:2px solid transparent;width:fit-content;transition:border-color .24s var(--ease);
}
.apercu-charte a:hover{border-color:var(--corail)}
.apercu-charte span{display:block;font-size:.9rem;color:var(--texte-doux);margin-top:.15rem}

/* ---------- échelle du player score ---------- */
.echelle{list-style:none;display:grid;gap:.6rem;margin-top:1.6rem}
.niveau{
  display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:1.1rem;align-items:center;
  border:2px solid var(--trait);background:var(--surface);padding:.9rem 1.1rem;
  border-left:6px solid var(--accent);
}
.niveau::before{display:none}
.niveau .lettre{
  font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1;
  color:var(--accent);text-align:center;
}
.niveau h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.15rem;letter-spacing:.01em;margin:0;color:var(--texte)}
.niveau p{font-size:.9rem;color:var(--texte-corps);margin-top:.15rem}

/* ---------- catégories d'entreprises ---------- */
.categories{list-style:none;display:grid;gap:1rem}
.categorie{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:clamp(1rem,3vw,2rem);
  background:var(--surface);border:2px solid var(--trait);box-shadow:var(--ombre-carte);
  padding:1.4rem 1.5rem;position:relative;
}
.categorie::before{content:"";position:absolute;left:-2px;top:-2px;bottom:-2px;width:6px;background:var(--accent)}
.categorie .lettre{
  font-family:var(--display);font-weight:400;font-size:clamp(3.2rem,2rem + 3vw,4.4rem);
  line-height:.85;color:var(--accent);
}
.categorie h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.5rem;letter-spacing:.01em}
.categorie > div > p{font-size:.95rem;color:var(--texte-corps);margin-top:.3rem}
.categorie dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1.2rem;margin-top:1rem;font-size:.9rem}
.categorie dt{font-family:var(--data);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--texte-doux);padding-top:.35em;white-space:nowrap}
.categorie dd{color:var(--texte-corps)}
/* Sur téléphone, l'intitulé insécable « Membres de gang » réduisait la
   colonne du texte au point de le faire déborder de la fiche : l'intitulé
   passe au-dessus de sa valeur. */
@media(max-width:560px){
  .categorie{grid-template-columns:3.2rem minmax(0,1fr);gap:1rem;padding-inline:1.2rem}
  .categorie dl{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .categorie dt{padding-top:.75rem}
  .categorie dt:first-child{padding-top:0}
}

.attribution .carte .zones{flex-direction:column;align-items:flex-start;gap:.3rem;margin-top:.4rem}
.attribution .carte .zones li{width:100%;text-transform:none;letter-spacing:.02em;font-size:.81rem}

/* ---------- pastille de catégorie sur une fiche ---------- */
.badges{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;flex:0 1 auto}
.cat{
  font-family:var(--data);font-size:.7rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:.24rem .45rem;color:var(--creme);
  background:var(--cat-couleur,var(--texte-doux));white-space:nowrap;
}
.cat-a{--cat-couleur:#a52c22}
.cat-b{--cat-couleur:#c2521f}
.cat-c{--cat-couleur:#a07714}
.cat-d{--cat-couleur:#5b6a28}
.cat-e{--cat-couleur:#1f6274}

/* Le faction score, sur les fiches du registre. Volontairement distinct
   du badge de catégorie : la catégorie dit le poids économique d'une
   entreprise, le score dit la qualité du jeu d'un groupe. Deux échelles
   A-E sur une même carte se confondraient si elles se ressemblaient. */
.score{
  font-family:var(--data);font-size:.7rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:.22rem .45rem;white-space:nowrap;
  border:1px solid var(--score-couleur,var(--texte-doux));
  color:var(--score-couleur,var(--texte-doux));
  background:transparent;
}
.score-a{--score-couleur:#4f7a2f}
.score-b{--score-couleur:#2f8f7d}
.score-c{--score-couleur:#1f7183}
.score-d{--score-couleur:#f0a52c}
.score-e{--score-couleur:#b4402f}

/* =====================================================================
   POINTS D'INTÉRÊT DE LA CARTE
   Les pastilles sont dessinées en CSS : pas une image à charger, et elles
   suivent le thème comme le reste.
   ===================================================================== */
.pin{
  display:block;width:14px;height:14px;border-radius:50%;
  background:var(--pin,var(--corail));
  border:2px solid var(--creme);
  box-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* Infobulles. leaflet.css est injecté APRÈS cette feuille : on gagne par
   la spécificité, pas par l'ordre. */
.carte-cadre .leaflet-popup-content-wrapper{
  background:var(--surface);color:var(--texte);
  border:2px solid var(--trait);border-radius:0;box-shadow:var(--ombre-carte);
}
.carte-cadre .leaflet-popup-tip{background:var(--surface);border:2px solid var(--trait)}
.carte-cadre .leaflet-popup-content{margin:.9rem 1.1rem;font-family:var(--corps)}
.carte-cadre .leaflet-popup-content .pin-cat{
  font-family:var(--data);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--corail-texte);margin-bottom:.2rem;
}
.carte-cadre .leaflet-popup-content h4{
  font-family:var(--display);font-size:1.15rem;line-height:1.2;margin-bottom:.35rem;
}
.carte-cadre .leaflet-popup-content p{font-size:.88rem;color:var(--texte-corps);line-height:1.5}
.carte-cadre .leaflet-popup-content a{
  display:inline-block;margin-top:.5rem;
  font-family:var(--data);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--corail-texte);
}
.carte-cadre .leaflet-popup-close-button{color:var(--texte-doux)}

/* Sélecteur de calques. */
.carte-cadre .leaflet-control-layers{
  background:var(--surface);border:2px solid var(--trait);border-radius:0;
  color:var(--texte);font-family:var(--corps);font-size:.84rem;
}
.carte-cadre .leaflet-control-layers-separator{border-top-color:var(--trait)}

/* Relevé de coordonnées, pour corriger un point mal placé. */
.carte-releve{
  background:var(--surface);border:2px solid var(--trait);
  padding:.45rem .7rem;font-family:var(--data);font-size:.74rem;color:var(--texte);
}
.carte-releve .mono{
  display:block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-doux);margin-bottom:.1rem;
}

/* =====================================================================
   LEAD OOC D'UNE FACTION — un interrupteur à trois positions

   Vert à droite  : un joueur répond de la faction devant l'équipe.
   Rouge à gauche : personne, le rôle peut être demandé.
   Bleu au milieu : faction automatisée, la question ne se pose pas.

   Tout est dessiné en CSS : la pastille est le fond, le bouton un
   ::before, le glyphe un ::after masqué. Aucune image à charger, et les
   trois états ne diffèrent que par deux valeurs.
   ===================================================================== */
.direction{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--data);font-size:.66rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.24rem .55rem .24rem .3rem;white-space:nowrap;
  border:1px solid currentColor;
}

.bascule{
  position:relative;display:inline-block;flex:none;
  width:2.05rem;height:1.05rem;border-radius:999px;
  background:var(--bascule);
}
/* le bouton blanc */
.bascule::before{
  content:"";position:absolute;top:.115rem;left:var(--bouton);
  width:.82rem;height:.82rem;border-radius:50%;background:#fff;
  transition:left .22s var(--ease);
}
/* le glyphe, centré sur le bouton et de la couleur du fond */
.bascule::after{
  content:"";position:absolute;top:.28rem;left:calc(var(--bouton) + .16rem);
  width:.5rem;height:.5rem;
  background-color:var(--bascule);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:left .22s var(--ease);
}

/* ---- personne ne répond de la faction ---- */
.direction.sans-lead{
  --bascule:#d8433f;--bouton:.115rem;
  color:#d8433f;cursor:pointer;
}
.direction.sans-lead .bascule::after{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/></svg>");
  mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/></svg>");
}
.direction.sans-lead:hover,.direction.sans-lead:focus-visible{
  background:#d8433f;color:#fff;
}
.direction.sans-lead:hover .bascule,.direction.sans-lead:focus-visible .bascule{
  background:#fff;
}
.direction.sans-lead:hover .bascule::before,
.direction.sans-lead:focus-visible .bascule::before{background:#d8433f}
.direction.sans-lead:hover .bascule::after,
.direction.sans-lead:focus-visible .bascule::after{background-color:#fff}

/* ---- un lead OOC en place ---- */
.direction.avec-lead{
  --bascule:#2faa63;--bouton:1.115rem;
  color:#2faa63;
}
.direction.avec-lead .bascule::after{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---- faction automatisée ---- */
.direction.automatisee{
  --bascule:#2f8fc4;--bouton:.615rem;
  color:#2f8fc4;
}
.direction.automatisee .bascule::after{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/></svg>");
  mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/></svg>");
}

/* ---------- légende de la page Factions ---------- */
/* Repliée par défaut : elle explique une fois, elle ne doit pas repousser
   le registre à chaque visite. C'est un <details>, comme partout ailleurs. */
.legende-factions{
  border:1px solid var(--trait);background:var(--surface);
  margin-bottom:2rem;
}
.legende-factions > summary{
  list-style:none;cursor:pointer;
  font-family:var(--data);font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--corail-texte);
  padding:.9rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.legende-factions > summary::-webkit-details-marker{display:none}
.legende-factions > summary::after{
  content:"";width:.4rem;height:.4rem;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .26s var(--ease);
}
.legende-factions[open] > summary::after{transform:rotate(-135deg) translateY(1px)}
.legende-corps{padding:0 1.1rem 1.2rem}
.legende-corps > p{font-size:.92rem;color:var(--texte-corps);max-width:78ch}
.legende-corps > p.fine{font-size:.84rem;color:var(--texte-doux);margin-top:1.1rem}

.echelle-fine{list-style:none;display:grid;gap:.45rem;margin:1.2rem 0 0}
.echelle-fine li{
  display:flex;align-items:baseline;gap:.85rem;
  padding-left:.7rem;border-left:3px solid var(--score-couleur,var(--trait));
}
.echelle-fine b{
  font-family:var(--display);font-size:1.1rem;line-height:1.2;flex:none;
  min-width:1.1rem;color:var(--score-couleur,var(--texte));
}
.echelle-fine span{font-size:.88rem;color:var(--texte-corps)}
.echelle-fine strong{color:var(--texte);margin-right:.45rem}
.echelle-fine strong::after{content:" —";color:var(--texte-doux);font-weight:400}

/* Chapeau d'article : pose ce que l'article va distinguer, avant que la
   numérotation ne commence. Employé là où deux notions voisines risquent
   de se confondre — les deux scores de l'article 3. */
/* Encadré d'alerte : ce qui doit être lu avant le reste de la page. */
.encadre.alerte{
  border-left-color:var(--alerte);
  background:color-mix(in srgb, var(--alerte) 7%, transparent);
}
.encadre.alerte .mono{color:var(--alerte-texte)}

.intro-article{
  font-size:1.02rem;line-height:1.65;color:var(--texte-corps);
  border-left:3px solid var(--corail);padding-left:1.1rem;margin-bottom:.5rem;
}
.intro-article strong{color:var(--texte)}

/* Intertitre à l'intérieur d'un article du règlement. */
.chapo{
  font-family:var(--data);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--corail-texte);
  margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--trait);
}

.aremplir{
  background:color-mix(in srgb,var(--alerte) 14%,transparent);
  border-bottom:2px solid var(--alerte);
  color:var(--alerte-texte);font-family:var(--data);font-size:.88rem;padding:.05rem .35rem;
}

/* ---------- avertissement d'arrivée ---------- */
.avertissement{
  /* le `*{margin:0}` du reset écrase le `margin:auto` qui centre un dialog
     modal : il faut le remettre, sinon la fenêtre se colle en haut à gauche */
  margin:auto;
  max-width:min(38rem,calc(100vw - 2rem));
  padding:0;border:2px solid var(--trait);background:var(--surface);
  color:var(--texte);box-shadow:var(--ombre-flottante);
}
.avertissement::backdrop{background:rgba(10,22,29,.78)}
.avertissement .filet{margin:0}
.avertissement .contenu{padding:1.5rem 1.7rem 1.7rem;position:relative}
.avertissement .mono{color:var(--corail-texte);font-weight:600}
.avertissement h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:2.1rem;line-height:1;letter-spacing:.01em;margin-top:.35rem;
}
.avertissement p{font-size:.92rem;color:var(--texte-corps)}
.avertissement p + p{margin-top:.85rem}
.avertissement .fine{
  font-size:.82rem;color:var(--texte-doux);
  border-top:1px solid var(--trait-fin);padding-top:.85rem;margin-top:1.1rem;
}
.avertissement .actions-form{margin-top:1.3rem}
.fermer{
  position:absolute;top:0;right:0;width:36px;height:36px;
  display:grid;place-items:center;background:none;cursor:pointer;
  border:2px solid var(--trait-fin);color:var(--texte-doux);
  font-family:var(--corps);font-size:1.2rem;line-height:1;
  transition:border-color .24s var(--ease),color .24s var(--ease);
}
.fermer:hover{border-color:var(--alerte);color:var(--alerte-texte)}

/* message non bloquant (remplace alert) */
.toast{
  position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,140%);
  z-index:1000;max-width:min(38rem,calc(100vw - 2rem));
  background:var(--nuit);color:var(--creme);border:2px solid var(--soleil);
  padding:.85rem 1.1rem;font-family:var(--data);font-size:.81rem;
  letter-spacing:.08em;line-height:1.6;box-shadow:var(--ombre-flottante);
  transition:transform .3s var(--ease),opacity .3s var(--ease);opacity:0;pointer-events:none;
}
.toast.visible{transform:translate(-50%,0);opacity:1}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .fiche{margin-top:1rem;max-width:400px}
  .duo{grid-template-columns:1fr}
  .duo > header{position:static}
  footer .wrap{grid-template-columns:1fr 1fr}
  footer .wrap > :first-child{grid-column:1/-1}
}
/* La barre complète — 4 liens directs, 2 rubriques déroulantes, le bouton
   Discord et la bascule de thème — mesure 968px. En dessous de 1000px le
   menu déroulant prend le relais. Seuil à tenir en phase avec app.js. */
@media(max-width:1000px){
  .burger{display:block}
  .theme{margin-left:auto}
  .topbar .wrap{gap:.6rem}
  .nav{
    position:fixed;inset:calc(var(--barre) + 4px) 0 auto;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--nuit);
    padding:.5rem var(--rail) 1.2rem;
    transform:translateY(-135%);transition:transform .28s var(--ease);
    box-shadow:0 24px 40px -26px rgba(0,0,0,.9);
    border-bottom:1px solid rgba(244,238,226,.14);
  }
  .nav.ouvert{transform:none}
  .nav a{padding:.95rem .2rem;opacity:.85;font-size:.88rem;border-bottom:1px solid rgba(244,238,226,.12)}
  .nav a[aria-current="page"]::after{left:.2rem;right:auto;width:1.6rem;bottom:.55rem}
  .nav .discord{margin:1rem 0 0;justify-content:center;border-color:var(--ancre)}
  /* dans le panneau déroulant, les sous-menus se déplient sur place */
  .deroulant{position:static}
  .deroulant > summary{
    padding:.95rem .2rem;font-size:.86rem;
    border-bottom:1px solid rgba(244,238,226,.12);
  }
  .deroulant > ul{
    position:static;padding:.2rem 0 .5rem .9rem;border:0;
    background-image:none;box-shadow:none;min-width:0;
  }
  .deroulant > ul a{padding:.7rem .2rem;font-size:.8rem;border-bottom:0}
  .deroulant[data-actif] > summary::before{left:.2rem;right:auto;width:1.6rem;bottom:.55rem}
}
@media(max-width:760px){
  .entree{grid-template-columns:1fr;gap:.6rem}
  .entree .horo{display:flex;align-items:baseline;gap:.7rem}
  .entree .horo strong{display:inline}
  .entree .horo .version{margin-top:0}
  .outils{align-items:stretch}
  .recherche{max-width:none}
  .appel .wrap{flex-direction:column;align-items:flex-start}
  footer .wrap{grid-template-columns:1fr}
}

/* =====================================================================
   IMPRESSION
   ===================================================================== */
@media print{
  body::after,.topbar,.hero-art,.hero-voile,.burger,.theme,
  .filtres,.outils,.actions-form,.appel,.saut,.toast{display:none!important}
  .page{display:block!important}
  body,.hero,.entete,.bloc,.bloc.creme,.bloc.nuit,.bloc.petrole,footer,.sortie,.promesse{
    background:#fff!important;color:#000!important
  }
  .hero h1,.entete .titre,.entete .lede,.hero-lede,footer p,.promesse p{color:#000!important}
  .carte,.article,.etape,.encadre,.formulaire,.fiche{box-shadow:none!important;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em}
}

/* =====================================================================
   MOUVEMENT RÉDUIT
   ===================================================================== */
/* =====================================================================
   DOSSIERS — dépôt de ticket, dépôt de candidature, suivi public
   ===================================================================== */

/* Le piège à robots. Surtout pas display:none : les automates savent le
   lire et sautent le champ. Hors de l'écran, il reste « rempli » pour
   celui qui remplit tout sans regarder. aria-hidden et tabindex="-1"
   l'écartent des lecteurs d'écran et du clavier. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.etat-envoi{
  margin-top:.9rem;font-size:.9rem;color:var(--texte-corps);min-height:1.4em;
}
.etat-envoi.erreur{
  color:var(--alerte-texte);font-weight:600;
  border-left:3px solid var(--alerte);padding-left:.7rem;
}

/* La référence rendue au déposant : on la lit, on la recopie, on la
   dicte. Elle mérite d'être lisible. */
.encadre [data-reference]{
  font-family:var(--data);font-size:1.15rem;letter-spacing:.08em;
  color:var(--corail-texte);
}

/* ---------- la frise du suivi ---------- */
.frise{list-style:none;margin-top:1.6rem;position:relative;padding-left:2.2rem}
.frise::before{
  content:"";position:absolute;left:.45rem;top:.6rem;bottom:.6rem;
  width:2px;background:var(--trait);
}
.etape-frise{position:relative;padding:0 0 1.4rem 0}
.etape-frise:last-child{padding-bottom:0}
.etape-frise::before{
  content:"";position:absolute;left:-2.2rem;top:.35rem;
  width:1rem;height:1rem;border-radius:50%;
  background:var(--fond);border:2px solid var(--trait);
}
.etape-frise.franchie::before{background:var(--texte-doux);border-color:var(--texte-doux)}
.etape-frise.courante::before{
  background:var(--corail);border-color:var(--corail);
  box-shadow:0 0 0 4px rgba(201,106,75,.22);
}
.etape-frise p{color:var(--texte-doux);font-size:.95rem}
.etape-frise.franchie p{color:var(--texte-corps)}
.etape-frise.courante p{color:var(--texte);font-weight:600}
.etape-frise .quand{
  display:block;margin-top:.15rem;
  font-family:var(--data);font-size:.72rem;letter-spacing:.06em;
  color:var(--texte-doux);
}

/* =====================================================================
   TEXTES TIRÉS D'UNE COULEUR LIBRE
   Les accents des factions se saisissent librement dans l'atelier : un
   mélange à pourcentage fixe ne garantit rien (un accent blanc resterait
   illisible). On garde la teinte, on plafonne la saturation et on FIXE la
   luminosité OKLCH : --l-texte (.45 / .8) donne au moins 4,67:1 sur les
   trois fonds clairs et 4,91:1 sur les cinq fonds sombres, quelle que soit
   la couleur saisie ; --l-grand (.5 / .7), réservé au display, au moins
   3,55:1 et 3,37:1. Un fond à .45 porte du crème à 5,69:1 au moins.
   Dans un @supports : une couleur relative qui contient var() ne peut pas
   avoir de repli déclaré juste au-dessus. Sans prise en charge, les règles
   d'origine s'appliquent.
   ===================================================================== */
@supports (color:oklch(from red l min(c,.1) h)){
  .carte,
  :root[data-theme="sombre"] .carte{--accent-texte:oklch(from var(--accent) var(--l-texte) min(c,.12) h)}
  @media(prefers-color-scheme:dark){
    :root:not([data-theme="clair"]) .carte{--accent-texte:oklch(from var(--accent) var(--l-texte) min(c,.12) h)}
  }
  .score{color:oklch(from var(--score-couleur,var(--texte-doux)) var(--l-texte) min(c,.12) h)}
  .echelle-fine b{color:oklch(from var(--score-couleur,var(--texte)) var(--l-texte) min(c,.12) h)}
  .niveau .lettre,.categorie .lettre{color:oklch(from var(--accent) var(--l-grand) min(c,.16) h)}
  .direction.sans-lead,.direction.avec-lead,.direction.automatisee{color:oklch(from var(--bascule) var(--l-texte) min(c,.12) h)}
  .direction.sans-lead:hover,.direction.sans-lead:focus-visible{background:oklch(from var(--bascule) .45 min(c,.12) h);color:#fff}
  .etiquette{background:oklch(from var(--accent,var(--corail)) .45 min(c,.12) h)}
  .cat{background:oklch(from var(--cat-couleur,var(--texte-doux)) .45 min(c,.12) h)}
}

/* =====================================================================
   SIGNATURE GTA — titres, appui des boutons, transitions de page
   ===================================================================== */
.titre,.hero h1{font-family:var(--signature)}
/* Lettrage de jaquette : remplissage crème, contour encre posé SOUS le
   remplissage (paint-order), ombre portée dure. Le V garde son aplat. */
.hero h1{
  color:var(--creme);
  -webkit-text-stroke:.05em var(--ancre);paint-order:stroke fill;
  text-shadow:.05em .05em 0 var(--ancre),0 12px 40px rgba(10,22,29,.6);
}
.hero h1 .v{-webkit-text-stroke:0}

/* Ce qu'on touche répond : décollage en ressort au survol, écrasement
   franc à l'appui (transition courte), rebond au relâchement. */
.bouton,.nav .discord{
  transition:transform .34s var(--ressort),box-shadow .26s var(--ease),
    background .26s var(--ease),border-color .26s var(--ease),color .26s var(--ease);
}
.bouton:active,.nav .discord:active{
  transform:translate(1px,1px) scale(.96);box-shadow:0 0 0 transparent;
  transition-duration:.07s;
}
.theme,.burger,.filtre,.onglet,.fermer{transition:transform .34s var(--ressort),border-color .26s var(--ease),color .26s var(--ease),background .26s var(--ease)}
.theme:active,.burger:active,.filtre:active,.onglet:active,.fermer:active{transform:scale(.9);transition-duration:.07s}
.carte:active,.etape:active,.article:active{transform:translateY(-1px) scale(.985);transition-duration:.1s}

/* Changement de page : View Transitions (app.js pose .vt quand le
   navigateur la gère). La barre a son propre nom : elle ne bouge pas. */
.topbar{view-transition-name:barre}
.vt .page.actif{animation:none}
::view-transition-old(root){animation:vt-sortie .2s var(--ease)}
::view-transition-new(root){animation:vt-entree .45s var(--ease)}
@keyframes vt-sortie{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-entree{from{opacity:0;transform:translateY(16px)}}

/* Menus : se déplient au lieu d'apparaître d'un coup. */
.deroulant[open] > ul{animation:deplier .3s var(--ease)}
@keyframes deplier{from{clip-path:inset(0 0 100% 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}

/* Avertissement : le fond se floute, la fenêtre monte avec un rebond. */
.avertissement::backdrop{backdrop-filter:blur(6px);animation:fondu .4s var(--ease)}
.avertissement[open]{animation:surgir .5s var(--ressort)}
@keyframes surgir{from{opacity:0;transform:translateY(24px) scale(.96)}}
@keyframes fondu{from{opacity:0}}

/* =====================================================================
   E — TRAIT DE NAVIGATION GLISSANT (desktop)
   Un seul trait qui suit le survol et revient sur la page ouverte. Les
   traits propres à chaque lien ne s'effacent que si app.js l'a posé.
   ===================================================================== */
.nav-curseur{display:none}
@media(min-width:1001px){
  .nav{position:relative}
  .nav-curseur{
    display:block;position:absolute;left:0;bottom:.3rem;height:2px;width:0;
    background:var(--soleil);pointer-events:none;opacity:0;
    transition:transform .5s var(--ease),width .5s var(--ease),opacity .2s var(--ease);
  }
  .nav.a-curseur a[aria-current="page"]::after,
  .nav.a-curseur .deroulant[data-actif] > summary::before{display:none}
}

/* =====================================================================
   B — ÉTOILES DE RECHERCHE
   Motif du HUD de GTA. Décor pur (aria-hidden) : elles ne mesurent rien.
   ===================================================================== */
.etoile{
  clip-path:polygon(50% 0,61.5% 35%,98% 35%,68.5% 57%,79.5% 92%,50% 71%,20.5% 92%,31.5% 57%,2% 35%,38.5% 35%);
}
.etoiles-recherche{
  position:absolute;top:clamp(1.2rem,3vw,2rem);right:var(--rail);
  display:flex;gap:.3rem;
  /* contour noir façon HUD : l'ombre suit la découpe des étoiles */
  filter:drop-shadow(0 0 1px var(--ancre)) drop-shadow(0 0 1px var(--ancre)) drop-shadow(2px 2px 0 rgba(10,22,29,.6));
}
.etoile{
  display:block;width:clamp(1.3rem,1rem + 1vw,1.9rem);aspect-ratio:1;background:var(--creme);
  transition:opacity .35s var(--ease),scale .5s var(--ressort);
  transition-delay:calc(var(--i,0) * 160ms + 500ms);
}
/* Avec JS, elles partent éteintes et s'allument une à une. */
html:not(.sans-js) .etoiles-recherche:not(.allumee) .etoile{opacity:.18;scale:.55}

/* =====================================================================
   A — MISSION RÉUSSIE
   Bandeau plein écran après un dépôt réussi (dossiers.js). Pas de
   fill-mode : si l'animation ne part pas, le bandeau reste lisible.
   ===================================================================== */
.mission{
  position:fixed;inset:0;z-index:950;display:grid;place-items:center;
  background:rgba(10,22,29,.45);cursor:pointer;
  transition:opacity .4s var(--ease);animation:fondu .3s var(--ease);
}
.mission.part{opacity:0;pointer-events:none}
.mission-bande{
  width:100%;text-align:center;padding:clamp(1.4rem,4vw,2.6rem) var(--rail);
  background:linear-gradient(to bottom,transparent,rgba(10,22,29,.92) 18%,rgba(10,22,29,.92) 82%,transparent);
  animation:bande .55s var(--ease);
}
@keyframes bande{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0 0 0 0)}}
.mission-titre{
  font-family:var(--signature);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,1.6rem + 6vw,6rem);line-height:1;letter-spacing:.01em;
  color:var(--soleil);
  -webkit-text-stroke:.05em var(--ancre);paint-order:stroke fill;
  text-shadow:.05em .05em 0 var(--ancre);
  animation:titre-mission .9s var(--ressort);
}
@keyframes titre-mission{from{opacity:0;transform:scale(1.35);letter-spacing:.2em}}
@keyframes respect{0%,35%{opacity:0;transform:translateY(8px)}}
.mission-respect{
  margin-top:.4rem;font-family:var(--signature);text-transform:uppercase;
  font-size:clamp(1.3rem,1rem + 1.4vw,2rem);color:var(--creme);
  -webkit-text-stroke:.05em var(--ancre);paint-order:stroke fill;
  animation:respect .9s var(--ease);
}
.mission-detail{
  margin:1rem auto 0;max-width:40ch;font-family:var(--data);font-size:.84rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--creme-doux);
}
.mission-detail b{color:var(--creme);font-size:1.05rem;letter-spacing:.12em}
.mission .bouton{margin-top:1.3rem}

/* =====================================================================
   CALME — retour « trop saturé, trop rempli » (octobre 2026)
   La machine à écrire en capitales ne reste qu'aux petites étiquettes
   (eyebrows, dates, références d'articles). Tout ce qu'on lit ou clique
   passe en Barlow, casse normale : le même texte, moitié moins de bruit.
   Bordures à 1 px, pastilles sans cadre, plus d'air entre les blocs.
   ===================================================================== */
.bouton,.nav a,.deroulant > summary,.filtre,.onglet,.case,.lien-nu,
.champ label,.champ legend,.fiche dt,.fiche-statut,.statut-ligne,
.pastille,.score,.direction,.zones li,.jetons span,.etiquette,
.vide,.compteur,.erreur,.groupe > h3,.sortie h3,
.recherche input,.legende-factions > summary{
  font-family:var(--corps);text-transform:none;letter-spacing:.01em;
}
.recherche input{font-size:.98rem}
.legende-factions > summary{font-size:.95rem;font-weight:600}
.bouton{font-size:.98rem;font-weight:600;padding:.78rem 1.4rem}
.nav a,.deroulant > summary{font-size:.95rem;font-weight:500}
.deroulant > ul a{letter-spacing:.01em}
.filtre,.onglet,.case{font-size:.93rem;font-weight:600}
.champ label,.champ legend{font-size:.92rem;font-weight:600}
.fiche dt{font-size:.9rem}
.fiche-statut,.statut-ligne,.lien-nu{font-size:.93rem;font-weight:600}
.groupe > h3{font-size:1rem;font-weight:600}
.vide,.compteur,.erreur{font-size:.92rem}
.sortie h3{font-size:.92rem;font-weight:600}

/* Étiquettes des cartes : du texte séparé par des points, plus des cadres. */
.pastille,.score,.direction{border:0;background:none;padding:0;font-size:.86rem;font-weight:600}
.direction{padding:.1rem .35rem .1rem 0}
.badges{gap:.2rem .5rem}
.badges > * + *::before{content:"·";margin-right:.5rem;color:var(--texte-doux);font-weight:400}
.zones{gap:.15rem .45rem}
.zones li{background:none;padding:0;font-size:.86rem}
.zones li + li::before{content:"·";margin-right:.45rem}

/* Bordures fines ; la barre de couleur des cartes devient un filet atténué. */
.carte,.etape,.article,.formulaire,.encadre,.onglets,.faq details,
.recherche input,.champ input[type=text],.champ select,.champ textarea,.filtre,.case{border-width:1px}
.onglet + .onglet{border-left-width:1px}
.carte::before{left:-1px;right:-1px;top:-1px;height:2px;background:color-mix(in oklab,var(--accent-bar) 65%,var(--surface))}
/* Encadré : un fond à peine teinté et un filet à gauche, plus de boîte dans la boîte. */
.encadre{border-width:0 0 0 3px;border-color:var(--soleil);box-shadow:none;background:color-mix(in oklab,var(--surface) 65%,var(--fond))}

/* De l'air : sections plus espacées, trois cartes par ligne au plus. */
.bloc{padding-block:clamp(3.8rem,8.5vw,7rem)}
.grille{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:1.5rem}
.carte{padding:1.5rem 1.5rem 1.6rem;gap:.75rem}
.parcours,.charte{gap:1.5rem}
.groupe{margin-top:3.4rem}

/* ---------- « Entrer en ville » : la porte vers le portail en jeu ----------
   Ni lien de rubrique, ni bouton d'action : un passage vers un autre
   univers. Il porte déjà les couleurs du portail (bleu État, or du
   sceau) : on voit avant de cliquer qu'on change de monde. */
.nav a.ville{
  display:inline-flex;align-items:center;gap:.4rem;opacity:1;margin-left:.5rem;
  color:#e7c977;background:#12355b;border:1px solid #c9a54a;
  padding:.5rem .85rem;transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.nav a.ville svg{width:.95rem;height:.95rem;fill:currentColor;flex:none}
.nav a.ville:hover{background:#1b4677;color:#f4dd96}
.nav a.ville::after{display:none}
@media(max-width:1000px){
  .nav a.ville{margin:1rem 0 0;justify-content:center;padding:.85rem 1rem}
}

/* ---------- code d'entrée en jeu (Suivre un dossier) ---------- */
.code-entree{margin-top:1.6rem}
.code-entree ol{margin:.8rem 0 0 1.2rem;display:grid;gap:.35rem}
.code-entree-valeur{
  font-family:var(--data);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem);font-weight:600;
  letter-spacing:.14em;color:var(--texte);user-select:all;margin-top:.3rem;
}
.code-entree .fine{font-size:.86rem;color:var(--texte-doux)}

/* =====================================================================
   MOTION — « ça bouge à l'arrivée, puis ça se repose »
   Aucune boucle. transform / opacity / clip-path seulement. Chaque état
   masqué dépend d'une classe posée par le script ET d'une préférence
   « mouvement accepté » : sans l'un ou l'autre, tout reste visible.
   ===================================================================== */

/* ---------- A. ouverture du hero (app.js : .intro-jouee) ---------- */
.hero h1 .lettres{display:flex}
.hero h1 .lettres > span{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  html:not(.sans-js):not(.intro-jouee) .hero h1 .lettres > span{opacity:0;translate:0 .45em}
  html:not(.sans-js):not(.intro-jouee) .hero h1 .v{opacity:0;translate:.4em 0}
  html:not(.sans-js):not(.intro-jouee) :is(.hero .eyebrow,.hero-lede,.hero-actions,.hero-adresse){opacity:0;translate:0 14px}
  html:not(.sans-js):not(.intro-jouee) .hero .fiche{opacity:0;translate:48px 0}
  .hero h1 .lettres > span{
    transition:opacity .5s var(--ease),translate .75s var(--ease);
    transition-delay:calc(150ms + var(--i,0) * 80ms);
  }
  .hero h1 .v{transition:opacity .4s var(--ease) .5s,translate .8s var(--ressort) .5s}
  .hero .eyebrow{transition:opacity .5s var(--ease),translate .6s var(--ease)}
  .hero-lede{transition:opacity .6s var(--ease) .7s,translate .7s var(--ease) .7s}
  .hero-actions,.hero-adresse{transition:opacity .6s var(--ease) .85s,translate .7s var(--ease) .85s}
  .hero .fiche{transition:opacity .7s var(--ease) .95s,translate .9s var(--ease) .95s}
  /* les étoiles s'allument une fois le titre posé */
  .etoile{transition-delay:calc(var(--i,0) * 160ms + 1250ms)}
}

/* ---------- B. titres et étiquettes des sections (app.js : .a-reveler) ---------- */
.reveal-actif .a-reveler{transition:clip-path .9s var(--ease),translate .9s var(--ease),opacity .5s var(--ease)}
/* état final : un masque plus large que le titre, pour ne jamais rogner
   un accent (É) ni l'ombre des lettres */
.reveal-actif .titre.a-reveler{clip-path:inset(-.4em -.3em -.4em -.3em)}
.reveal-actif .titre.a-reveler:not(.vu){clip-path:inset(0 -.3em 100% -.3em);translate:0 .35em}
.reveal-actif .eyebrow.a-reveler:not(.vu){opacity:0}
.eyebrow.a-reveler::before{transform-origin:left;transition:scale .7s var(--ease) .15s}
.reveal-actif .eyebrow.a-reveler:not(.vu)::before{scale:0 1}
.reveal-abandon .a-reveler{opacity:1;translate:none;clip-path:none}
.reveal-abandon .a-reveler::before{scale:none}

/* ---------- C. barre de navigation au défilement ---------- */
.topbar{transition:box-shadow .35s var(--ease)}
.topbar.compacte{box-shadow:0 12px 30px -18px rgba(0,0,0,.75)}
/* compacte sur ordinateur seulement : le panneau mobile se cale sur --barre */
@media(min-width:1001px){
  .topbar .wrap{transition:min-height .35s var(--ease)}
  .topbar.compacte .wrap{min-height:54px}
}
.progression{display:none}
@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .page-longue .progression{
      display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;
      background:var(--soleil);transform-origin:left;
      animation:progression linear;animation-timeline:scroll(root);
    }
  }
}
@keyframes progression{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- D. sommaire qui suit la lecture ---------- */
.sommaire ol{position:relative}
.sommaire-trait{
  position:absolute;left:-.9rem;top:0;width:3px;height:0;background:var(--soleil);
  opacity:0;pointer-events:none;
  transition:transform .45s var(--ease),height .45s var(--ease),opacity .3s var(--ease);
}
.sommaire a.actif{color:var(--corail-texte);border-color:currentColor}

/* ---------- E. blocs repliables qui se déplient ---------- */
@supports (interpolate-size:allow-keywords){
  @media(prefers-reduced-motion:no-preference){
    :root{interpolate-size:allow-keywords}
    details:not(.deroulant)::details-content{
      block-size:0;overflow:hidden;
      transition:block-size .4s var(--ease),content-visibility .4s allow-discrete;
    }
    details:not(.deroulant)[open]::details-content{block-size:auto}
  }
}
.faq summary::after,.legende-factions > summary::after{transition:transform .35s var(--ease),top .35s var(--ease)}

/* ---------- F. liens du texte : le soulignement se trace ----------
   Un filet léger reste toujours là (un lien doit se voir sans couleur) ;
   au survol, un trait plein le recouvre de gauche à droite. */
main :is(p,li,dd,td) a:not([class]):not(.sommaire a){
  text-decoration:none;
  background:
    linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat,
    linear-gradient(color-mix(in srgb,currentColor 45%,transparent),color-mix(in srgb,currentColor 45%,transparent)) 0 100%/100% 1px no-repeat;
  transition:background-size .4s var(--ease);
}
main :is(p,li,dd,td) a:not([class]):not(.sommaire a):is(:hover,:focus-visible){background-size:100% 2px,100% 1px}

/* ---------- G. le titre voyage d'une page à l'autre ---------- */
.page.actif h1{view-transition-name:titre-page}
::view-transition-group(titre-page){animation-duration:.55s;animation-timing-function:var(--ease)}

/* ---------- H. cartes inclinées sous la souris (app.js : .incline) ---------- */
.carte-postale{position:relative;transition:rotate .45s var(--ressort),scale .45s var(--ressort),box-shadow .3s var(--ease),transform .5s var(--ressort)}
.carte.incline,.carte-postale.incline{transition:transform .12s linear,box-shadow .26s var(--ease),rotate .45s var(--ressort),scale .45s var(--ressort)}
.carte.incline{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px)}
.carte-postale.incline{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
/* reflet qui suit le curseur */
.carte::after,.carte-postale::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 55%);
  transition:opacity .3s var(--ease);
}
.carte.incline::after,.carte-postale.incline::after{opacity:1}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal] > *{opacity:1!important;translate:none!important}
  html{scroll-behavior:auto}
}

/* ---------- page 404 : entrée en scène ----------
   La page est trop courte pour défiler : le parallaxe du hero n'y joue
   jamais. À la place, le relevé apparaît ligne à ligne et le tampon vient
   se poser en dernier, comme au guichet du cadastre. */
@media(prefers-reduced-motion:no-preference){
  .e404 .hero .eyebrow,.e404 .hero h1,.e404 .hero-lede,.e404 .hero-actions,.e404 .fiche{
    animation:apparition .6s var(--ease) both;
  }
  .e404 .hero h1{animation-delay:.1s}
  .e404 .hero-lede{animation-delay:.2s}
  .e404 .hero-actions{animation-delay:.3s}
  .e404 .fiche{animation-delay:.35s}
  .e404 .tampon{animation:tamponner .45s var(--ressort) .95s both}
}
@keyframes tamponner{from{opacity:0;transform:rotate(-16deg) scale(1.7)}to{opacity:.9;transform:rotate(-6.5deg) scale(1)}}

/* =====================================================================
   PROFIL DISCORD — le lien de la barre et la carte « Mon profil ».
   Une affiche, pas une fiche : portrait franc, nom en caractères
   d'affiche, filets durs. Les textes viennent de Discord en textContent.
   ===================================================================== */
.nav .profil{display:inline-flex;align-items:center;gap:.5rem;opacity:1;margin-left:.3rem}
.nav .profil::after{display:none}
.nav .profil img{width:26px;height:26px;border-radius:50%;border:1px solid var(--soleil);background:var(--nuit)}
.profil-carte{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center;
  padding:clamp(1.4rem,4vw,2.6rem);border:2px solid var(--trait);background:var(--surface);
  box-shadow:var(--ombre-carte);
}
.profil-portrait{
  width:clamp(110px,20vw,180px);height:auto;aspect-ratio:1;object-fit:cover;
  border:2px solid var(--trait);box-shadow:var(--ombre-bouton);background:var(--nuit);
}
.profil-fiche>p{margin:0 0 .5rem}
.profil-nom{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,4.4rem);line-height:.95;letter-spacing:.01em;margin:.1rem 0 .4rem;
  overflow-wrap:anywhere;
}
.profil-fiche .actions-form{margin-top:1.2rem}
/* Rôles Discord : le filet prend la couleur du rôle (posée en JS). */
.profil-roles{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0 0;padding:0}
.profil-roles li{font-family:var(--data);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.24rem .55rem;border:1px solid var(--trait);border-left-width:4px;background:var(--surface)}
@media(max-width:600px){.profil-carte{grid-template-columns:1fr;justify-items:start}}

/* =====================================================================
   RONDEUR
   Le site était d'équerre partout : boîtes, boutons, champs, pastilles.
   Ici, et seulement ici, les angles s'arrondissent. Les ombres décalées
   dures restent — c'est la signature — elles suivent l'arrondi. Hero,
   barre et pied de page, pleine largeur, restent droits.
   ===================================================================== */
.carte,.encadre,.article,.fiche,.profil-carte,.toast,.deroulant > ul,
.carte-postale,.equipe li,.grille .perso{border-radius:var(--rayon)}
.carte{overflow:hidden}
.carte-postale img,.profil-portrait{border-radius:calc(var(--rayon) - 6px)}
.bouton,.champ input[type=text],.champ select,.champ textarea,.onglets,
.nav .discord,.nav a.ville,.nav .profil,.bouton.discord{border-radius:var(--rayon-petit)}
.onglet:first-child{border-radius:calc(var(--rayon-petit) - 2px) 0 0 calc(var(--rayon-petit) - 2px)}
.onglet:last-child{border-radius:0 calc(var(--rayon-petit) - 2px) calc(var(--rayon-petit) - 2px) 0}
.pastille,.zones li,.profil-roles li,.etiquette,.article .ref,.filtre,.case,.lien-nu{border-radius:var(--rayon-pilule)}
.profil-roles li{border-left-width:1px;padding-left:.7rem}

/* =====================================================================
   BOUTONS DISCORD
   Tout ce qui mène à Discord porte ses couleurs officielles (blurple
   #5865F2) et son logo, pour qu'on sache avant de cliquer qu'on change
   de maison. Le logo salue au survol ; l'onde part du centre au clic.
   ===================================================================== */
.bouton.discord,.nav .discord,.nav .profil{
  --discord:#5865F2;--discord-survol:#4752C4;--discord-appui:#3C45A5;
  background:var(--discord);color:#fff;border-color:var(--discord);
  position:relative;overflow:hidden;isolation:isolate;opacity:1;
}
.nav .discord,.nav .profil{font-weight:600;padding:.55rem .95rem;margin-left:.6rem}
.bouton.discord::before,.nav .discord::before,.nav .profil:not(:has(img))::before{
  content:"";width:1.15em;height:1.15em;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36'%3E%3Cpath d='M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36'%3E%3Cpath d='M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transform-origin:50% 60%;transition:transform .3s var(--ressort);
}
.nav .discord,.nav .profil{display:inline-flex;align-items:center;gap:.5rem}
.bouton.discord:hover,.nav .discord:hover,.nav .profil:hover{
  background:var(--discord-survol);color:#fff;border-color:var(--discord-survol);
  transform:translateY(-2px);box-shadow:0 6px 0 var(--discord-appui);
}
.bouton.discord:hover::before,.nav .discord:hover::before,.nav .profil:hover::before{transform:rotate(-12deg) scale(1.12)}
.bouton.discord:active,.nav .discord:active,.nav .profil:active{
  background:var(--discord-appui);border-color:var(--discord-appui);transform:translateY(0) scale(.97);box-shadow:none;
}
.bouton.discord:focus-visible,.nav .discord:focus-visible,.nav .profil:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* l'onde : un disque qui s'ouvre depuis le centre au moment de l'appui */
.bouton.discord::after,.nav .discord::after,.nav .profil::after{
  content:"";position:absolute;inset:auto;left:50%;top:50%;width:0;height:0;border-radius:50%;
  background:rgba(255,255,255,.35);transform:translate(-50%,-50%);opacity:0;z-index:-1;
  display:block;
}
.bouton.discord:active::after,.nav .discord:active::after,.nav .profil:active::after{
  width:220%;padding-top:220%;height:auto;opacity:0;
  transition:width .4s var(--ease),padding-top .4s var(--ease),opacity .4s var(--ease);
}

/* =====================================================================
   « ENTRER EN VILLE » : vert GTA, puis la bascule « changement de
   personnage » : la page décolle dans les nuages, barre de chargement
   « SAN ANDREAS », et le portail arrive en plongée (bascule.js).
   ===================================================================== */
.nav a.ville{color:#eafbe7;background:#1f7a45;border-color:#2fb35f}
.nav a.ville:hover{background:#2a9a58;color:#fff}
@media(prefers-reduced-motion:no-preference){
  .nav a.ville:hover svg{animation:etoile-clin .6s var(--ressort) 1}
}
@keyframes etoile-clin{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(20deg)}100%{transform:scale(1)}}

/* ---------- la bascule (assets/js/bascule.js) ----------
   Le voile est un ciel de crépuscule avec des nuages CSS (deux calques
   de halos flous qui dérivent) et, en bas, la barre de chargement du
   jeu. La page recule bloc par bloc, pas <body> : un body transformé
   emporterait le voile fixé avec lui (il deviendrait son repère). */
.ciel{
  position:fixed;inset:0;z-index:2000;opacity:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#141f3a 0%,#5a3f6e 40%,#d9743c 78%,#f2b05a 100%);
  box-shadow:inset 0 0 22vmax rgba(0,0,0,.75);transition:opacity .5s var(--ease);
}
.ciel::before,.ciel::after{
  content:"";position:absolute;inset:-25%;pointer-events:none;filter:blur(22px);
  background:
    radial-gradient(ellipse 28% 16% at 18% 32%,rgba(255,236,220,.85),transparent 70%),
    radial-gradient(ellipse 36% 18% at 66% 50%,rgba(255,230,210,.75),transparent 70%),
    radial-gradient(ellipse 30% 14% at 40% 78%,rgba(255,240,225,.8),transparent 70%),
    radial-gradient(ellipse 22% 12% at 88% 24%,rgba(255,236,220,.7),transparent 70%);
}
.ciel::after{inset:-35%;filter:blur(36px);opacity:.6;transform:scale(1.25) translateX(12%)}
.ciel-barre{
  position:absolute;left:clamp(1.2rem,5vw,3.5rem);right:clamp(1.2rem,5vw,3.5rem);bottom:clamp(1.2rem,5vw,3.5rem);
  margin:0;display:flex;align-items:center;gap:1.2rem;opacity:0;transition:opacity .3s var(--ease);
}
.ciel-barre span{
  font-family:var(--signature);font-size:clamp(1.6rem,4vw,2.8rem);letter-spacing:.06em;
  text-transform:uppercase;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55);white-space:nowrap;
}
.ciel-barre i{flex:1;height:5px;background:rgba(255,255,255,.28);display:block;overflow:hidden;border-radius:3px}
.ciel-barre i::before{content:"";display:block;height:100%;width:0;background:#f5a623;box-shadow:0 0 12px #f5a623}

html.bascule-depart,html.bascule-arrivee{overflow:hidden}
html.bascule-depart body > :not(.ciel){
  transition:transform .55s cubic-bezier(.5,0,.85,.25),filter .55s ease-in,opacity .55s ease-in;
  transform:scale(.55);filter:blur(10px);opacity:0;
}
html.bascule-depart .ciel{opacity:1}
html.bascule-depart .ciel::before{animation:bascule-nuage1 1.5s cubic-bezier(.45,0,.9,.4) forwards}
html.bascule-depart .ciel::after{animation:bascule-nuage2 1.5s cubic-bezier(.45,0,.9,.4) forwards}
html.bascule-nuages .ciel{animation:bascule-tremble .35s linear infinite}
html.bascule-nuages .ciel-barre{opacity:1}
html.bascule-nuages .ciel-barre i::before{animation:bascule-charge .85s cubic-bezier(.2,.8,.3,1) forwards}

html.bascule-arrivee body > :not(.ciel){transform:scale(1.4);filter:blur(12px)}
html.bascule-arrivee .ciel{opacity:1}
html.bascule-arrivee .ciel::before{animation:bascule-nuage1 1.2s ease-out reverse forwards}
html.bascule-posee body > :not(.ciel){transition:transform .65s var(--ease),filter .65s var(--ease);transform:none;filter:none}
html.bascule-posee .ciel{transition:opacity .55s ease-out .1s;opacity:0}

@keyframes bascule-nuage1{to{transform:translate(-28%,10%) scale(1.15)}}
@keyframes bascule-nuage2{to{transform:scale(1.5) translateX(-22%)}}
@keyframes bascule-tremble{0%,100%{translate:0 0}25%{translate:2px -1px}50%{translate:-2px 1px}75%{translate:1px 2px}}
@keyframes bascule-charge{to{width:100%}}

/* Menu mobile : les trois boutons (ville, Discord, Connexion) empilés
   pleine largeur, même hauteur, centrés, sans la marge gauche du bureau. */
@media(max-width:1000px){
  .nav .discord,.nav .profil{margin:.6rem 0 0;width:100%;justify-content:center;padding:.85rem 1rem}
}