/* ============================================================
   FogenCraft — COMPOSANTS (0.92.0)
   Chaque composant est dessiné UNE fois, ici, avec ses états. Les pages
   les assemblent (pages.css) ; le mouvement s'y ajoute (mouvement.css).

   LE CADRE EN PIXELS
   ------------------
   Un cadre n'est jamais un `border` sur l'élément : il est peint par un
   pseudo-élément `::before` découpé aux coins (`--coin-pixel`), pour que
   l'anneau de focus — qui se trace HORS de la boîte — ne soit pas rogné
   par le découpage. Un composant qui a un cadre a donc `position:
   relative` et `isolation: isolate`, et son contenu passe au-dessus.
   ============================================================ */

/* ---------------------------------------------------- les rôles */
/* Ce qui est étiquette d'office : petites capitales pixel, 12 px. */
label, .eyebrow, .etapes, .tableau th, .fiche-cles dt, .tuile .t, .pied-titre,
.compteur .etiquette, .stat .nom, .plaque, .pastille {
  font-family: var(--police-pixel); font-size: var(--t-etiquette); font-weight: 400;
  letter-spacing: .125em; text-transform: uppercase;
}
/* Ce qui est valeur d'office : VT323, jamais sous 20 px, jamais en gras
   (la police n'a qu'une graisse : le gras serait synthétisé, baveux). */
.faits b, .tuile b, .compteur .valeur, .stat .valeur, .bandeau-donnees b, .fiche-cles dd,
.tableau td.fin, .progression-tete b, .perk b, .version strong, .echelle b, .special-compact b, .signature b {
  font-family: var(--police-pipboy); font-size: var(--t-pipboy); font-weight: 400;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
/* Ce qui bouge par pixels a besoin d'une boîte. */
.pas, .forum-onglet, .groupe-titre { position: relative; overflow: hidden; }

/* Le grain et le voile de tube cathodique, sous le contenu. Sans
   `mix-blend-mode` : à 5 % sur un fond uni, il ne changeait rien et
   forçait la recomposition de toute la page au défilement. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--texture-beton) repeat; background-size: 260px 260px; opacity: .05;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 4px);
}
body > * { position: relative; z-index: 1; }
#poussiere { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .9; }

/* ---------------------------------------------------- le cadre commun */

.bouton, .panneau, .tuile, .champ-cadre, .ecran, .sous-menu, .forum-onglet,
.forum-ligne, .forum-message, .carte-jeu, .voie, .objet, .commentaire-cadre, .article-cadre {
  position: relative; isolation: isolate;
}
.bouton::before, .panneau::before, .tuile::before, .ecran::before, .sous-menu::before,
.forum-onglet::before, .forum-ligne::before, .forum-message::before, .carte-jeu::before,
.voie::before, .objet::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: var(--coin-pixel);
  background: var(--_fond, var(--surface));
  border: var(--_trait, var(--trait-fin)) solid var(--_bord, var(--bordure));
  box-shadow: var(--_relief, 0 0 0 transparent), var(--_ombre, 0 0 0 transparent);
  transition: background-color var(--duree-vite), border-color var(--duree-vite), box-shadow var(--duree-vite);
}

/* ---------------------------------------------------- navigation */
/* LE MENU EST GÉNÉRÉ (navigation.py) : quatre groupes. Bureau dès 1024 px. */

.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-2) var(--marge);
  min-height: var(--h-nav);
  background: var(--fond);
  border-bottom: var(--trait-fort) solid var(--surface-haute);
}
.nav::after {   /* le filet jaune, une ligne de pixels sous la barre */
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--jaune) 0 8px, transparent 8px 16px);
  opacity: .5;
}
.nav .marque { margin-right: auto; display: block; line-height: 0; flex: none; }
.nav .marque img { height: 56px; width: auto; display: block; }
/* SOUS 46 REM, DEUX LIGNES : le logo seul, entier et centré, puis le bouton, la
   session et le burger. Sur une seule ligne, le logo était rogné à la largeur
   du texte, « Mon espace » coupé en « ESP » et tout se disputait 360 px
   (signalé par l'exploitant le 7 septembre 2026). La barre cesse d'être
   collante : deux lignes sur un téléphone, c'est un tiers de l'écran. */
@media (max-width: 46rem) {
  .nav { position: relative; flex-wrap: wrap; row-gap: var(--e-2); padding-top: var(--e-3); }
  .nav .marque { flex-basis: 100%; margin-right: 0; display: flex; justify-content: center; }
  .nav .marque img { height: 76px; max-width: 100%; }
  .nav .nav-cta { margin-right: auto; }
}
@media (max-width: 399.98px) { .nav .marque img { height: 64px; } .nav { padding-inline: var(--e-3); } }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav .groupes { display: flex; gap: var(--e-4); }
.nav .groupe { position: relative; }
.groupe-titre {
  display: block; padding: var(--e-2) 0; background: none; border: 0;
  border-bottom: var(--trait-fin) solid transparent; cursor: pointer;
  color: var(--texte); font-family: var(--police-pixel); font-size: var(--t-bouton);
  letter-spacing: .08em; text-transform: uppercase;
}
.groupe-titre::after { content: " ▾" / ""; color: var(--texte-faible); }
.groupe-titre:hover, .groupe-titre[aria-expanded="true"] { color: var(--jaune); }
.groupe.actif > .groupe-titre { border-bottom-color: var(--jaune); }
.sous-menu a {
  display: block; padding: var(--e-3) var(--e-4);
  color: var(--texte); text-decoration: none;
  font-family: var(--police-pixel); font-size: var(--t-bouton);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.sous-menu a:hover, .sous-menu a:focus-visible { color: var(--jaune); background: var(--surface-haute); }
.sous-menu a[aria-current="page"] { color: var(--jaune); }
.nav-cta { flex: none; }

/* DISCORD DANS LA BARRE, au même niveau que les groupes : c'est là que la
   communauté se retrouve, on ne la range pas sous un titre. */
.nav-discord { flex: none; display: inline-flex; align-items: center; gap: var(--e-2);
               padding: var(--e-2) var(--e-3); min-height: 40px;
               color: var(--texte-doux); text-decoration: none;
               font-family: var(--police-pixel); font-size: var(--t-bouton);
               letter-spacing: .08em; text-transform: uppercase;
               border: var(--trait-fin) solid var(--bordure); }
.nav-discord:hover, .nav-discord:focus-visible { color: var(--jaune); border-color: var(--jaune); }
.nav-discord svg { flex: none; }
/* Sur téléphone, l'icône suffit : la barre y tient déjà sur deux lignes. */
@media (max-width: 46rem) {
  .nav-discord span { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip-path: inset(50%); white-space: nowrap; }
  .nav-discord { padding: var(--e-2); }
}

.burger {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: var(--trait-fin) solid var(--bordure); color: var(--texte);
  cursor: pointer;
}
.burger span { display: block; width: 20px; height: 3px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 3px; background: currentColor;
  transition: transform .18s;
}
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

#navSession { display: flex; align-items: center; gap: var(--e-3);
              font-family: var(--police-pixel); font-size: var(--t-bouton); text-transform: uppercase; }
#navSession .qui { color: var(--texte-doux); }
#navSession a { color: var(--texte-doux); text-decoration: none; padding: var(--e-2) 0; }
#navSession a:hover { color: var(--jaune); }

@media (min-width: 1200px) {
  .burger { display: none; }
  .nav .menu[data-ouvert] { display: flex; align-items: center; gap: var(--e-5); }
  /* PAS DE VIDE ENTRE LE TITRE ET SA LISTE. Le cadre est dessiné par le
     `::before`, calé sur la boîte de remplissage : une bordure haute
     transparente reste hors du cadre, invisible, mais fait partie de
     l'élément — le pointeur qui descend ne « sort » plus du groupe. */
  .sous-menu {
    display: none; position: absolute; left: calc(-1 * var(--e-4)); top: 100%;
    border-top: 6px solid transparent;
    min-width: 15rem; padding: var(--e-2) 0; z-index: 41;
    --_fond: var(--surface); --_bord: var(--filet); --_ombre: var(--ombre-md);
  }
  .groupe-titre[aria-expanded="true"] + .sous-menu { display: block; animation: fg-deplier var(--duree-vite) var(--pas-anim); }
  @keyframes fg-deplier { from { opacity: 0; transform: translateY(-4px); } }
  .sous-menu a[aria-current="page"]::before { content: "[" / ""; margin-right: .4em; opacity: .6; }
  .sous-menu a[aria-current="page"]::after  { content: "]" / ""; margin-left:  .4em; opacity: .6; }
  #navSession .sceau { display: inline-block; }
}
@media (max-width: 1199.98px) {
  #navSession .qui { display: none; }
  .nav .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--e-2) var(--marge) var(--e-5);
    background: var(--surface);
    border-bottom: var(--trait-fort) solid var(--separateur);
    box-shadow: var(--ombre-lg);
    max-height: calc(100svh - var(--h-nav)); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav .menu[data-ouvert="false"] { display: none; }
  .nav .groupes { flex-direction: column; gap: var(--e-3); }
  .groupe-titre { pointer-events: none; cursor: default; padding: var(--e-4) 0 var(--e-1);
                  color: var(--texte-faible); border-bottom: var(--trait-fin) solid var(--separateur); }
  .groupe-titre::after { content: none; }
  .groupe.actif > .groupe-titre { border-bottom-color: var(--separateur); }
  .sous-menu { display: block; }
  .sous-menu a { padding: var(--e-3) 0; white-space: normal; }
  .sous-menu a[aria-current="page"] { border-left: var(--trait-fort) solid var(--jaune); padding-left: var(--e-3); }
  .nav-cta { padding-inline: var(--e-3); font-size: var(--t-etiquette); letter-spacing: .04em;
             min-width: 0; flex: 0 1 auto; white-space: nowrap; }
  .nav { gap: var(--e-3); }
  #navSession .sceau { display: none; }
}

/* ---------------------------------------------------- boutons */
/* Le bouton de Minecraft : un bloc à deux arêtes, qui s'enfonce au clic. */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 44px; padding: var(--e-3) var(--e-5);
  font-family: var(--police-pixel); font-size: var(--t-bouton);
  letter-spacing: .08em; text-transform: uppercase;
  background: transparent; border: 0; color: var(--texte);
  cursor: pointer; text-decoration: none; text-align: center;
  overflow: hidden;
  --_fond: var(--surface-haute); --_bord: var(--bordure); --_relief: var(--relief);
  transition: color var(--duree-vite), transform var(--duree-vite);
}
.bouton:hover:not(:disabled) { color: var(--jaune); --_bord: var(--jaune); }
.bouton:active:not(:disabled) { transform: translateY(2px); --_relief: var(--relief-enfonce); }
.bouton-grand { min-height: 52px; padding: var(--e-4) var(--e-6); font-size: 1rem; }

.bouton-primaire { color: var(--sur-jaune); --_fond: var(--jaune); --_bord: var(--jaune); font-weight: 700; }
.bouton-primaire:hover:not(:disabled) { color: var(--sur-jaune); --_fond: var(--jaune-survol); --_bord: var(--jaune-survol);
                                        --_relief: var(--relief), var(--lueur-jaune); }
.bouton-primaire:disabled { color: #7C8073; --_fond: #33362B; --_bord: #3E4235; --_relief: none; cursor: not-allowed; }

.bouton-secondaire { --_fond: var(--surface-haute); }
.bouton-fantome { --_fond: transparent; --_bord: var(--texte); --_relief: none; }
.bouton-fantome:hover { --_bord: var(--jaune); }
.bouton-discret { color: var(--texte-doux); --_fond: transparent; --_relief: none; }
.bouton-discret:hover:not(:disabled) { color: var(--alerte); --_bord: var(--alerte); }
/* Un appel neutralisé (vitrine) : il se lit — c'est une information, pas
   un contrôle désactivé — donc des couleurs qui contrastent, pas une opacité. */
.bouton-inerte { cursor: default; color: var(--sur-jaune); --_fond: #B8942A; --_bord: #B8942A; --_relief: none; }
.bouton.travaille { pointer-events: none; }

/* Un petit bouton dans une cellule ou un filtre. */
.tableau .fin .bouton, .filtres .bouton, .raccourcis .bouton { min-height: 36px; padding: var(--e-2) var(--e-3); }
.filtres .bouton.actif { color: var(--jaune); --_bord: var(--jaune); }

.copie { background: none; border: none; color: var(--bleu-clair); font: inherit;
         cursor: pointer; padding: var(--e-2) 0; text-decoration: underline dotted; text-underline-offset: .25em;
         overflow-wrap: anywhere; }
.copie:hover { color: var(--jaune); }
.lien-discret { background: none; border: none; padding: var(--e-2) 0; cursor: pointer;
                font-family: var(--police-pixel); font-size: var(--t-etiquette);
                text-transform: uppercase; color: var(--texte-faible); }
.lien-discret:hover { color: var(--alerte); }

/* ---------------------------------------------------- panneaux et tuiles */
/* Une plaque : cadre en escalier, quatre vis. Réservée aux formulaires et
   aux données, jamais à la décoration. */

.panneau { padding: var(--e-5); --_fond: var(--surface); --_bord: var(--filet); }
.panneau::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 10px 10px, var(--filet) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--filet) 0 2px, transparent 2.5px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--filet) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--filet) 0 2px, transparent 2.5px);
}
.panneau > * { position: relative; z-index: 1; }
.panneau:hover { --_bord: color-mix(in srgb, var(--filet) 55%, var(--jaune)); }
.panneau + .panneau { margin-top: var(--e-4); }
.panneau > h2, .panneau > h3 { margin-bottom: var(--e-4); color: var(--jaune); font-size: var(--t-h3); font-weight: 400; }
.panneau > h2::after, .panneau > h3::after { content: " _" / ""; opacity: .35; }
/* LA MESURE DE LECTURE, ET LA PLACE PERDUE. Un texte long se lit mal au-delà
   d'environ 90 caractères par ligne : d'où cette borne. Mais 68 laissait la
   moitié droite d'un panneau vide, ce qui se voit comme un défaut plutôt que
   comme du soin (signalé le 6 septembre 2026). 84 reste dans les clous et
   comble l'essentiel du vide. */
.panneau > p, .entete .aide, .panneau > .aide { max-width: 84ch; }

.tuiles { display: grid; gap: var(--e-3); margin-bottom: var(--e-5);
          grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tuile { padding: var(--e-4); --_fond: var(--surface); }
.tuile::after { content: ""; position: absolute; left: 0; top: var(--marche); bottom: var(--marche);
                width: var(--trait-fort); background: var(--_liseret, var(--bordure)); z-index: 0; }
.tuile > * { position: relative; z-index: 1; }
.tuile:hover { transform: translateY(-3px); --_bord: var(--filet); --_ombre: var(--ombre-sm); }
.tuile { transition: transform var(--duree) var(--courbe), box-shadow var(--duree); }
.tuile .t { display: block; color: var(--texte-faible); }
.tuile b { display: block; margin-top: var(--e-2); font-size: 1.7rem; color: var(--jaune); }
.tuile .d { display: block; margin-top: var(--e-2); font-size: var(--t-petit); color: var(--texte-doux); overflow-wrap: anywhere; }
.tuile.ok        { --_liseret: var(--succes); }  .tuile.ok b        { color: var(--succes); }
.tuile.ko        { --_liseret: var(--alerte); }  .tuile.ko b        { color: var(--alerte); }
.tuile.attention { --_liseret: var(--jaune); }
.tuile.avec-icone { display: grid; grid-template-columns: 1fr auto; grid-template-areas:
                    "t icone" "b icone" "d icone"; column-gap: var(--e-3); align-items: center; }
.tuile.avec-icone > .t { grid-area: t; } .tuile.avec-icone > b { grid-area: b; }
.tuile.avec-icone > .d { grid-area: d; } .tuile.avec-icone > .icone-karma { grid-area: icone; margin: 0; }

.carte-jeu { padding: var(--e-4); --_fond: var(--surface); }
.carte-jeu::after { content: ""; position: absolute; left: var(--marche); right: var(--marche); top: 0;
                    height: var(--trait-fort); background: var(--jaune); z-index: 0; }
.carte-jeu > * { position: relative; z-index: 1; }
.carte-jeu h3 { margin: 0 0 var(--e-3); }
.carte-jeu p { margin: 0 0 var(--e-3); color: var(--texte-doux); }
.carte-jeu p:last-child { margin-bottom: 0; }

.grille-2 { display: grid; gap: var(--e-4); align-items: start; }
.grille-2 > * { min-width: 0; }
@media (min-width: 1024px) { .grille-2 { grid-template-columns: 62fr 38fr; gap: var(--e-5); } }
@media (max-width: 1023.98px) { #etatFiche > div:last-child { order: -1; } }

/* ---------------------------------------------------- en-tête de page */

.entete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
  padding-bottom: var(--e-4); margin-bottom: var(--e-6);
  border-bottom: var(--trait-fin) solid var(--bordure);
}
.entete h1 { font-size: var(--t-h1); }
.entete h1::before { content: "> " / ""; color: var(--jaune); }

.eyebrow { display: flex; align-items: center; gap: var(--e-3); margin: 0 0 var(--e-3); color: var(--jaune); }
.eyebrow .num { padding: 3px 6px 2px; border: var(--trait-fin) solid currentColor; }
.etapes { color: var(--texte-doux); }
.etapes b { color: var(--jaune); font-weight: 400; }

.plaque { display: inline-block; margin-top: var(--e-4); padding: 4px var(--e-3);
          border: var(--trait-fin) solid var(--bordure); color: var(--texte-faible); }
.sceau { padding: 2px var(--e-2); border: var(--trait-fin) solid var(--alerte); color: var(--alerte); white-space: nowrap;
         font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase; }

/* Le damier de danger, purement décoratif. */
.rayures { height: 12px;
           background: repeating-linear-gradient(90deg, var(--jaune) 0 6px, transparent 6px 12px),
                       repeating-linear-gradient(90deg, transparent 0 6px, var(--jaune) 6px 12px);
           background-size: 12px 6px; background-position: 0 0, 0 6px; background-repeat: repeat-x; opacity: .7; }

/* ---------------------------------------------------- formulaires */

.champ { margin-bottom: var(--e-4); }
.champ:last-child { margin-bottom: 0; }
label { display: block; margin-bottom: var(--e-2); color: var(--texte-doux); }
.opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texte-faible); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select, textarea {
  width: 100%; min-height: 46px; padding: var(--e-3);
  background: var(--fond); color: var(--texte);
  border: var(--trait-fin) solid var(--bordure); border-radius: 0;
  font-size: 1rem; line-height: 1.5;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.5);
}
input:hover, select:hover, textarea:hover { border-color: var(--filet); }
input, select, textarea { transition: border-color var(--duree-vite), box-shadow var(--duree); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 0; border-color: var(--jaune); box-shadow: inset 2px 2px 0 rgba(0,0,0,.5), var(--lueur-jaune);
}
textarea { min-height: 10rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--jaune); }

/* LE CHAMP RÉPOND (vivant.js pose .ok/.ko et .verdict). */
.champ.ok :is(input, select, textarea) { border-color: var(--succes); }
.champ.ko :is(input, select, textarea) { border-color: var(--alerte); }
.champ.ok :is(input, select, textarea):focus-visible { box-shadow: inset 2px 2px 0 rgba(0,0,0,.5), 0 0 18px rgba(92,184,92,.3); }
.champ.ko :is(input, select, textarea):focus-visible { box-shadow: inset 2px 2px 0 rgba(0,0,0,.5), 0 0 18px rgba(224,96,91,.3); }
/* Un verdict est une phrase : Inter, pas VT323 sous 20 px (illisible). */
.verdict { display: block; margin-top: var(--e-1); min-height: 1.2em;
           font-family: var(--police-texte); font-size: var(--t-petit); color: var(--alerte); overflow-wrap: anywhere; }
.verdict::before { content: "> " / ""; opacity: .6; }
.verdict:empty::before { content: none; }
.verdict.bon { color: var(--succes); }
.verdict.bon::after { content: " ✓"; }

.aide { margin: var(--e-2) 0 0; color: var(--texte-doux); text-transform: none; letter-spacing: 0;
        font-family: var(--police-texte); font-size: var(--t-petit); }
.aide.trop-court, .aide.ko { color: var(--alerte); }
.aide.ok { color: var(--succes); }
.valeur-figee { margin: 0; padding: var(--e-3); background: var(--surface);
                border: var(--trait-fin) dashed var(--bordure); color: var(--jaune);
                font-family: var(--police-pipboy); font-size: var(--t-pipboy); }
.paire { display: grid; gap: var(--e-4); }
@media (min-width: 576px) { .paire { grid-template-columns: 1fr 1fr; } }
.ligne-formulaire { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); }
.ligne-formulaire > * { flex: 1 1 12rem; min-width: 0; }
.ligne-formulaire > .bouton { flex: 0 0 auto; }
.rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: var(--e-3) 0; }
.rangee > label { display: inline-flex; align-items: center; gap: var(--e-1); margin: 0; }

.actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: var(--e-3); justify-content: flex-end; flex-wrap: wrap;
  margin-top: var(--e-5); padding: var(--e-4) 0;
  background: linear-gradient(to top, var(--fond) 70%, transparent);
}
@media (max-width: 575px) { .actions { flex-direction: column-reverse; } .actions .bouton { width: 100%; } }

.message { margin-top: var(--e-4); padding: var(--e-4);
           border-left: var(--trait-fort) solid var(--alerte);
           background: color-mix(in srgb, var(--alerte) 12%, var(--surface)); font-size: var(--t-petit); }
.message.succes { border-left-color: var(--succes); background: color-mix(in srgb, var(--succes) 12%, var(--surface)); }
.bandeau-action:empty { display: none; }
.bandeau-action { position: fixed; top: var(--h-nav); left: 0; right: 0; z-index: 39;
                  padding: var(--e-3) var(--marge); text-align: center;
                  background: var(--jaune); color: var(--sur-jaune);
                  font-family: var(--police-texte); font-size: var(--t-petit); font-weight: 500; }
.bandeau-alerte { padding: var(--e-3) var(--marge);
                  background: color-mix(in srgb, var(--alerte) 16%, var(--fond));
                  border-bottom: var(--trait-fin) solid var(--alerte); font-size: var(--t-petit); }
.bandeau-alerte p { max-width: var(--largeur-page); margin: 0 auto; }

/* ---------------------------------------------------- S.P.E.C.I.A.L. */

.compteur {
  position: sticky; top: var(--h-nav); z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4);
  background: var(--surface-haute); border: var(--trait-fin) solid var(--bordure);
  transition: border-color var(--duree), box-shadow var(--duree);
}
.compteur .etiquette { color: var(--texte-doux); }
.compteur .valeur { font-size: 2.4rem; transition: color var(--duree); }
.compteur[data-etat="reste"] { border-color: var(--jaune); }
.compteur[data-etat="reste"][data-zero] { box-shadow: var(--lueur-jaune); }
.compteur[data-etat="reste"] .valeur { color: var(--jaune); }
.compteur[data-etat="depasse"] { border-color: var(--alerte); }
.compteur[data-etat="depasse"] .valeur { color: var(--alerte); }

.stat { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--e-3);
        padding: var(--e-2) 0; border-bottom: var(--trait-fin) solid var(--separateur); }
@media (max-width: 480px) {
  .stat { grid-template-columns: 1fr auto auto; grid-template-areas: "nom nom nom" "jauge valeur pas"; }
  .stat .nom { grid-area: nom; } .stat .jauge { grid-area: jauge; width: auto; }
  .stat .valeur { grid-area: valeur; } .stat > span:last-child { grid-area: pas; }
}
.stat:last-child { border-bottom: none; }
.stat .nom { min-width: 0; overflow-wrap: anywhere; }
/* La jauge est en cellules : un SPECIAL est un compte entier de 1 à 10. */
.stat .jauge { position: relative; width: 102px; height: 12px; overflow: hidden; box-sizing: content-box;
               background: #090B07; border: var(--trait-fin) solid var(--bordure); }
.stat .jauge i { display: block; height: 100%; background: var(--phosphore);
                 box-shadow: var(--lueur-phosphore); transition: width var(--duree) var(--courbe); }
.stat .jauge::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                      background: repeating-linear-gradient(90deg, transparent 0 8px, #090B07 8px 10px); }
.stat .valeur { min-width: 2ch; text-align: right; color: var(--jaune); font-size: 1.5rem; }
.pas { width: 44px; height: 44px; padding: 0; position: relative; overflow: hidden;
       background: var(--surface-haute); color: var(--texte);
       border: var(--trait-fin) solid var(--bordure); box-shadow: var(--relief);
       font-family: var(--police-pipboy); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.pas:hover:not(:disabled) { border-color: var(--jaune); color: var(--jaune); }
.pas:active:not(:disabled) { box-shadow: var(--relief-enfonce); }
.pas:disabled { opacity: .28; cursor: not-allowed; }

.effets { margin-top: var(--e-4); border-top: var(--trait-fin) solid var(--separateur); padding-top: var(--e-3); }
.effets summary { cursor: pointer; padding: var(--e-2) 0; font-family: var(--police-pixel); font-size: var(--t-etiquette);
                  text-transform: uppercase; color: var(--jaune); }
.effets dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); margin: var(--e-4) 0 0; font-size: var(--t-petit); }
.effets dt { font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase;
             color: var(--texte-doux); align-self: baseline; }
.effets dd { margin: 0; color: var(--texte-doux); }
.effets dd strong { color: var(--texte); }

/* ---------------------------------------------------- tableaux */

.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-petit); }
.tableau th { text-align: left; padding: var(--e-2) var(--e-3); color: var(--texte-doux);
              border-bottom: var(--trait-fin) solid var(--bordure); white-space: nowrap; }
.tableau td { padding: var(--e-3); border-bottom: 1px solid var(--separateur); vertical-align: middle; }
.tableau tbody tr { transition: background-color var(--duree-vite); }
.tableau tbody tr:hover td { background: color-mix(in srgb, var(--jaune) 6%, transparent); }
.tableau tr:last-child td { border-bottom: none; }
.tableau .mono { font-family: var(--police-pipboy); font-size: var(--t-pipboy); }
.tableau .fin { text-align: right; white-space: nowrap; }
.tableau .alerte { color: var(--alerte); }
.tableau tr.echoue td { color: var(--alerte); }
/* La barre d'un classement : proportionnelle au premier (vivant.js pose --w). */
td.avec-barre { position: relative; }
td.avec-barre::after { content: ""; position: absolute; left: var(--e-3); bottom: 4px; height: 3px;
                       width: calc(100% - 2 * var(--e-3));
                       background: repeating-linear-gradient(90deg, var(--jaune) 0 4px, transparent 4px 6px);
                       transform-origin: left; transform: scaleX(var(--w, 0)); opacity: .8;
                       transition: transform var(--duree-lente) var(--courbe); }

/* ---------------------------------------------------- pastilles, voyants */

.pastille { display: inline-flex; align-items: center; gap: var(--e-2);
            padding: 3px var(--e-3); border: var(--trait-fin) solid currentColor; white-space: nowrap; }
.pastille::before { content: ""; width: 6px; height: 6px; background: currentColor; box-shadow: 0 0 6px currentColor; }
.pastille.ok { color: var(--succes); }
.pastille.attente { color: var(--jaune); }
.pastille.ko, .pastille.refus { color: var(--alerte); }
.voyant { width: 8px; height: 8px; background: var(--succes); box-shadow: 0 0 10px var(--succes); align-self: center; }
[data-en-ligne="false"] .voyant { background: var(--alerte); box-shadow: 0 0 10px var(--alerte); }

/* ---------------------------------------------------- fiches et listes */

.fiche-cles { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3) var(--e-4); margin: 0; font-size: var(--t-petit); }
.fiche-cles dt { color: var(--texte-doux); align-self: center; }
.fiche-cles dt::before { content: "[" / ""; margin-right: .3em; opacity: .4; }
.fiche-cles dt::after  { content: "]" / ""; margin-left:  .3em; opacity: .4; }
.fiche-cles dd { margin: 0; overflow-wrap: anywhere; }
.histoire-lue { margin: var(--e-4) 0 0; padding-top: var(--e-4); border-top: var(--trait-fin) solid var(--separateur);
                white-space: pre-wrap; color: var(--texte-doux); }
.vide { padding: var(--e-6) var(--e-4); text-align: center; color: var(--texte-doux); }
.vide .bouton { margin-top: var(--e-4); }
/* LES APTITUDES — une grille de cartes lisibles d'un coup d'œil.
   Pas de nouvelle couleur ni de nouvelle police : les jetons du site
   suffisent, et une page de 76 entrées doit rester calme. */
.aptitudes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-3);
}
.aptitude {
  border: var(--trait-fin) solid var(--bordure);
  padding: var(--e-3);
  background: var(--surface-haute);
}
.aptitude-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}
.aptitude-tete b { font-family: var(--police-pixel); }
/* « Perception 5 » ne se coupe pas en deux lignes : c'est une seule information. */
.aptitude-tete .rang { white-space: nowrap; }
.aptitude p { margin: 0 0 var(--e-2); }
.aptitude p:last-child { margin-bottom: 0; }

.liste-choix { margin: var(--e-3) 0 0; padding-left: 1.2rem; }
.liste-choix li { margin-bottom: var(--e-2); }
.liste-nette { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-3); max-width: 84ch; }
.liste-nette li { position: relative; padding-left: var(--e-5); font-size: var(--t-petit); color: var(--texte-doux); }
.liste-nette li::before { content: "■" / ""; position: absolute; left: 0; color: var(--jaune); font-size: .6em; top: .5em; }
.liste-nette b { color: var(--texte); }
.et-maintenant { margin: var(--e-4) 0 0; padding-left: 1.4em; }
.et-maintenant li { margin-bottom: var(--e-2); }
.commande { margin: var(--e-4) 0 0; padding: var(--e-3); background: #05060B; border-left: var(--trait-fort) solid var(--jaune); }
.commande code { color: var(--jaune); font-size: var(--t-pipboy); }
.avec-icone { display: flex; align-items: flex-start; gap: var(--e-3); }
.avec-icone img { flex: none; }
.paliers { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0; }
.palier { padding: var(--e-2) var(--e-3); background: var(--surface-haute); border: var(--trait-fin) solid var(--bordure);
          font-family: var(--police-pixel); font-size: var(--t-etiquette); white-space: nowrap; }
.embleme { display: block; width: 44px; height: 44px; flex: none; background: var(--src) no-repeat center / contain;
           transition: transform .18s; }
.icone-karma { vertical-align: middle; margin-right: var(--e-2); }
td.fin .icone-karma { margin: 0 var(--e-2) 0 0; }

/* ---------------------------------------------------- les écrans (Pip-Boy) */

.ecran, .terminal {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--e-5);
  font-family: var(--police-pipboy); font-size: var(--t-pipboy); line-height: 1.35;
  --_fond: var(--phosphore-sombre); --_bord: rgba(92,224,92,.35); --_trait: var(--trait-fort);
  color: var(--phosphore);
}
.terminal::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--coin-pixel);
                    background: var(--_fond); border: var(--_trait) solid var(--_bord);
                    box-shadow: inset 0 0 40px rgba(0,0,0,.85); }
.terminal.vert  { --_fond: #05130A; color: var(--phosphore); }
.terminal.ambre { --_fond: #150F08; color: var(--ambre); --_bord: rgba(255,182,66,.35); }
.terminal::after {   /* le balayage */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.06) 0%, transparent 72%),
              repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
}
.terminal > * { position: relative; z-index: 1; }
.terminal .invite { display: block; margin: 0 0 var(--e-4); font-family: var(--police-pixel);
                    font-size: var(--t-etiquette); text-transform: uppercase; opacity: .8;
                    text-shadow: 0 0 6px currentColor; }
.terminal .invite::before { content: "> " / ""; }
.terminal .invite::after { content: "_" / ""; margin-left: .1em; }
/* Une aide est une phrase : Inter ; assombrie par une couleur, pas par une
   opacité qui aurait aussi délavé le lien qu'elle contient. */
.terminal .aide { color: color-mix(in srgb, currentColor 78%, #000); font-family: var(--police-texte); font-size: var(--t-petit); }
.terminal h3, .terminal .copie { color: inherit; }
.terminal .tableau th { color: inherit; opacity: .65; border-bottom-color: currentColor; }
.terminal .tableau td { border-bottom-color: color-mix(in srgb, currentColor 28%, transparent); }
.terminal .fiche-cles dt { color: inherit; opacity: .65; }
.terminal .fiche-cles dd { text-shadow: 0 0 6px color-mix(in srgb, currentColor 45%, transparent); }
.terminal .pastille { border-color: currentColor; }
.ecran-erreur { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }

.sortie-console { margin: var(--e-4) 0 0; padding: var(--e-4); max-height: 22rem; overflow: auto;
                  background: var(--phosphore-sombre); border: var(--trait-fin) solid var(--bordure);
                  font-family: var(--police-pipboy); font-size: var(--t-pipboy); line-height: 1.4;
                  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--phosphore); }
.sortie-console:empty { display: none; }
.sortie-console .echo { margin-bottom: var(--e-3); }
.sortie-console .echo b { display: block; color: var(--jaune); font-weight: 400; }
.sortie-console .echo.erreur span { color: var(--alerte); }
.journal-serveur { white-space: pre; overflow: auto; overflow-wrap: normal; min-width: 0; max-width: 100%;
                   max-height: 30rem; overscroll-behavior-x: contain; }
#vueConfig { color: var(--texte-doux); max-height: 26rem; }
.ligne-console { display: grid; grid-template-columns: 1fr auto; gap: var(--e-2); }
.ligne-console input { font-family: var(--police-pipboy); font-size: var(--t-pipboy); }
@media (max-width: 575px) { .ligne-console { grid-template-columns: 1fr; } }
.raccourcis { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-4); }

/* ---------------------------------------------------- onglets */

.onglets { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: var(--e-5);
           border-bottom: var(--trait-fin) solid var(--bordure); }
.onglets button { min-height: 44px; padding: var(--e-3) var(--e-4); background: none; border: none;
                  border-bottom: var(--trait-fort) solid transparent; margin-bottom: -2px;
                  color: var(--texte-doux); cursor: pointer;
                  font-family: var(--police-pixel); font-size: var(--t-bouton); text-transform: uppercase; }
.onglets button:hover { color: var(--texte); }
.onglets button[aria-selected="true"] { color: var(--jaune); border-bottom-color: var(--jaune); }

.forum-rubriques { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-4) 0 var(--e-5); }
.forum-onglet { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .35rem .9rem;
                cursor: pointer; background: transparent; border: 0; color: inherit; overflow: hidden;
                font-family: var(--police-pixel); font-size: var(--t-bouton); text-transform: uppercase;
                --_fond: var(--surface); transition: color var(--duree-vite); }
.forum-onglet:hover { color: var(--jaune); }
.forum-onglet[aria-current="true"], .forum-onglet[aria-selected="true"] { color: var(--jaune); --_bord: var(--jaune);
                                                                        --_relief: inset 0 -4px 0 var(--jaune); }
.forum-onglet[disabled] { opacity: .35; cursor: default; }
.forum-compte { opacity: .6; font-size: inherit; }
/* Une hauteur réservée : les onglets arrivent en JS et poussaient le tableau. */
.onglets-classement { align-items: center; margin-bottom: var(--e-4); min-height: 6.5rem; }
.onglets-classement .t { font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase;
                         color: var(--texte-faible); margin-right: var(--e-2); }
.onglets-classement .t:not(:first-child) { flex-basis: 100%; margin-top: var(--e-2); }

/* ---------------------------------------------------- le forum */

.forum-liste { display: flex; flex-direction: column; gap: var(--e-3); }
.forum-ligne { padding: var(--e-3) var(--e-4); --_fond: var(--surface); }
.forum-epingle::after { content: ""; position: absolute; left: 0; top: var(--marche); bottom: var(--marche);
                        width: var(--trait-fort); background: var(--jaune); }
.forum-titre { display: block; font-weight: 600; margin-bottom: var(--e-2); }
.forum-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-3); }
.forum-etiquette { font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase;
                   padding: .1rem .45rem; border: var(--trait-fin) solid var(--bordure); opacity: .8; }
.forum-avatar { position: relative; flex: none; display: inline-block; }
.forum-avatar > span { position: absolute; inset: 0; background-repeat: no-repeat; }
.forum-avatar-chapeau { z-index: 1; }
.forum-avatar-vide { background: var(--separateur); }
.forum-signature { display: flex; align-items: center; gap: .6rem; }
.forum-titre, .forum-ligne { overflow-wrap: anywhere; }
.forum-banniere { display: block; font-size: .85em; opacity: .7; }
.forum-message { overflow-wrap: anywhere; padding: var(--e-4); margin: var(--e-3) 0; --_fond: var(--surface); }
.forum-message p, .commentaire p, .depannage dd { max-width: 84ch; }
.forum-pages { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: var(--e-5) 0; }

.fil { margin-top: var(--e-6); padding-top: var(--e-5); border-top: var(--trait-fin) solid var(--separateur); }
.fil > h3 { color: var(--texte-doux); margin-bottom: var(--e-4); }
.commentaire { padding: var(--e-4) 0; border-bottom: 1px solid var(--separateur); }
.commentaire header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
                      flex-wrap: wrap; margin-bottom: var(--e-3); }
.commentaire time { font-family: var(--police-pipboy); font-size: var(--t-pipboy); color: var(--texte-faible); white-space: nowrap; }
.commentaire p { margin: 0 0 var(--e-2); }
.commentaire p:last-of-type { margin-bottom: 0; }
.signature b { display: block; color: var(--jaune); }
.signature .details { display: block; font-family: var(--police-pixel); font-size: var(--t-etiquette);
                      text-transform: uppercase; color: var(--texte-faible); margin-top: 2px; }
.form-commentaire { display: grid; gap: var(--e-3); justify-items: start; margin-top: var(--e-5); }
.form-commentaire textarea { min-height: 5.5rem; }
.form-commentaire .aide:empty { display: none; }
@media (max-width: 575px) { .form-commentaire .bouton { width: 100%; } }

/* ---------------------------------------------------- rédaction et rendu */

.barre-actu { display: flex; gap: var(--e-3); flex-wrap: wrap; }
@media (max-width: 575px) { .barre-actu .bouton { width: 100%; } }
.outils { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--e-2); }
.outils button { min-width: 40px; height: 40px; padding: 0 var(--e-2); background: var(--surface-haute); color: var(--texte);
                 border: var(--trait-fin) solid var(--bordure); cursor: pointer;
                 font-family: var(--police-pipboy); font-size: 1.1rem; line-height: 1; }
.outils button:hover { border-color: var(--jaune); color: var(--jaune); }
.apercu { margin-top: var(--e-4); border: var(--trait-fin) solid var(--bordure); background: var(--fond); }
.apercu summary { padding: var(--e-3) var(--e-4); cursor: pointer; font-family: var(--police-pixel);
                  font-size: var(--t-etiquette); text-transform: uppercase; color: var(--texte-doux); }
.apercu .corps { padding: 0 var(--e-4) var(--e-4); }
.corps h2, .corps h3, .corps h4 { margin: var(--e-5) 0 var(--e-3); }
.corps h2 { font-size: var(--t-h3); color: var(--jaune); }
.corps h3 { font-size: 1rem; }
.corps h4 { font-size: .9rem; color: var(--texte-doux); }
.corps p { color: var(--texte-doux); max-width: 78ch; overflow-wrap: anywhere; }
.corps blockquote { margin: var(--e-4) 0; padding: var(--e-2) 0 var(--e-2) var(--e-4);
                    border-left: var(--trait-fort) solid var(--jaune); color: var(--texte); font-style: italic; max-width: 60ch; }
.corps code { background: var(--surface-haute); padding: 1px 5px; border: 1px solid var(--bordure); }
.corps hr { border: none; border-top: var(--trait-fin) solid var(--separateur); margin: var(--e-5) 0; }
.corps ul { margin: var(--e-4) 0; }

/* ---------------------------------------------------- progression, relevé, objets */

.releve { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.perks { display: grid; gap: var(--e-2); }
.perk { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
        padding: var(--e-2) var(--e-3); background: var(--surface-haute); border-left: var(--trait-fort) solid var(--jaune); }
.perk .rang { font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase;
              color: var(--texte-doux); white-space: nowrap; }
.progression { padding: var(--e-2) var(--e-3); background: var(--surface-haute); border-left: var(--trait-fort) solid var(--jaune); }
.progression + .progression { margin-top: var(--e-2); }
.progression-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-2); }
.progression .aide { margin: var(--e-2) 0 0; }
.progression-totale { border-left-color: var(--texte-doux); margin-bottom: var(--e-3); }
.jauge-longue { display: block; height: 10px; overflow: hidden; background: #090B07; border: var(--trait-fin) solid var(--bordure); }
.jauge-longue i { display: block; height: 100%; background: var(--phosphore);
                  background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.35) 6px 8px);
                  transition: width .4s linear; }
.jauge-longue i[style*="width: 0%"] { background: transparent; }
.avec-peau { display: grid; gap: var(--e-5); align-items: start; }
.cotes-fiche { min-width: 0; }
@media (min-width: 560px) { .avec-peau { grid-template-columns: auto 1fr; } }
.peaux { display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: center; }
.peaux canvas.peau { max-width: none; }
.peau { display: block; background: linear-gradient(180deg, var(--surface-haute), var(--fond));
        border: var(--trait-fin) solid var(--bordure); padding: var(--e-3); }
.apparence { display: grid; gap: var(--e-4); }
.titre-equipement { margin: 0 0 var(--e-2); font-family: var(--police-pixel); font-size: var(--t-etiquette);
                    text-transform: uppercase; color: var(--texte-doux); }
.equipement { display: grid; gap: var(--e-2); align-content: start; }
.objet { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2); --_fond: var(--surface-haute); }
.objet img { flex: none; }
.objet i { display: block; font-style: normal; font-family: var(--police-pixel); font-size: var(--t-etiquette);
           text-transform: uppercase; color: var(--texte-faible); }
.objet b { display: block; font-size: var(--t-petit); font-weight: 500; overflow-wrap: anywhere; }
.objet .usure { display: inline-block; margin-top: 2px; font-family: var(--police-pipboy); font-size: var(--t-pipboy); color: var(--jaune); }
.boutons-lanceur { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: 0 0 var(--e-3); }

/* ---------------------------------------------------- boutique, classement */

.tuiles.articles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tuiles.solde-boutique { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tuiles.solde-boutique .liste-choix { margin: var(--e-2) 0 0; padding: 0; list-style: none; }
.tuiles.solde-boutique .liste-choix li { margin: 0 0 var(--e-2); }
.tuile.article { display: flex; flex-direction: column; gap: var(--e-2); }
.tuile.article .vignette { width: 64px; height: 64px; object-fit: contain; align-self: flex-start; }
.tuile.article b { font-size: 1.3rem; }
.tuile.article .d { flex: 1; }
.tuile.article .prix { font-family: var(--police-pipboy); font-size: var(--t-pipboy); color: var(--jaune); }
.tuile.article .bouton { align-self: flex-start; margin-top: var(--e-2); }
#tblClassement tr.moi td { background: color-mix(in srgb, var(--jaune) 10%, transparent); font-weight: 600; }
#tblClassement .pastille { margin-left: var(--e-2); }
.classement-nom { display: inline-flex; align-items: center; gap: var(--e-3); }
.classement-embleme { width: 26px; height: 26px; }

/* ---------------------------------------------------- pied de page */

.pied { position: relative; margin-top: var(--e-8); padding: var(--e-7) 0 var(--e-5);
        background: var(--surface); border-top: var(--trait-fort) solid var(--surface-haute); }
.pied::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 4px;
                background: repeating-linear-gradient(90deg, var(--jaune) 0 8px, transparent 8px 16px); opacity: .5; }
.pied-cols { display: grid; gap: var(--e-6); max-width: var(--largeur-page); margin: 0 auto; padding: 0 var(--marge); }
.pied-marque { margin: 0 0 var(--e-3); font-family: var(--police-pixel); font-size: 1.1rem; font-weight: 700; color: var(--jaune); }
.pied-titre { margin: 0 0 var(--e-4); color: var(--jaune); }
.pied-baseline { color: var(--texte-doux); font-size: var(--t-petit); max-width: 42ch; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.pied a { color: var(--texte-doux); text-decoration: none; font-size: var(--t-petit); display: inline-block; padding: var(--e-2) 0; }
.pied a:hover { color: var(--jaune); }
.pied-reseau { display: grid; grid-template-columns: 1fr auto; gap: var(--e-3) var(--e-4); margin: 0; font-size: var(--t-petit); }
.pied-reseau dt { font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase; color: var(--texte-doux); }
.pied-reseau dd { margin: 0; text-align: right; font-family: var(--police-pipboy); font-size: var(--t-pipboy); }
.mentions { max-width: var(--largeur-page); margin: var(--e-6) auto 0; padding: var(--e-4) var(--marge) 0;
            border-top: 1px solid var(--separateur); display: flex; justify-content: space-between; gap: var(--e-3);
            flex-wrap: wrap; color: var(--texte-doux); font-family: var(--police-texte); font-size: var(--t-petit); }
@media (min-width: 768px) { .pied-cols { grid-template-columns: 1.6fr 1fr 1.2fr; } }

/* La boîte qui explique la redirection vers le forum (session.js). */
/* FOND ET FILET EXPLICITES : le cadre en escalier des panneaux se dessine en
   `::before` a z-index -1, donc DERRIERE le fond propre du <dialog> — il y
   serait invisible, et la boite dependrait de la couleur par defaut du
   navigateur. On la peint nous-memes. */
.fg-dialogue { max-width: 34rem; width: calc(100% - 2 * var(--e-4)); padding: var(--e-5);
               color: var(--texte); background: var(--surface);
               border: var(--trait-fin) solid var(--filet); }
.fg-dialogue::backdrop { background: rgba(0, 0, 0, .72); }
.fg-dialogue h2 { margin-bottom: var(--e-3); color: var(--jaune);
                  font-size: var(--t-h3); font-weight: 400; }
.fg-dialogue p { margin-bottom: var(--e-3); }
.fg-dialogue-actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-4); }

/* « Ce n'est pas le bon compte ? » — replié par défaut : c'est une réparation,
   pas une invitation. Le dépliant reste discret sous la fiche. */
.corriger-pseudo { margin-top: var(--e-4); border-top: var(--trait-fin) solid var(--separateur);
                   padding-top: var(--e-3); }
.corriger-pseudo summary { cursor: pointer; font-family: var(--police-pixel);
                           font-size: var(--t-etiquette); text-transform: uppercase;
                           color: var(--texte-faible); }
.corriger-pseudo summary:hover { color: var(--jaune); }
.corriger-pseudo form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-3);
                        margin-top: var(--e-3); }
.corriger-pseudo .champ { flex: 1 1 14rem; }
.corriger-pseudo .message { flex: 1 1 100%; margin: 0; }

/* Le corps d'un message écrit dans l'éditeur visuel. Le HTML est assaini par
   le serveur ; ici on ne fait que l'habiller pour qu'il ressemble au site. */
.corps-message > :first-child { margin-top: 0; }
.corps-message > :last-child { margin-bottom: 0; }
.corps-message p { margin: 0 0 var(--e-3); max-width: 70ch; }
.corps-message ul, .corps-message ol { margin: 0 0 var(--e-3) var(--e-5); }
.corps-message li { margin-bottom: var(--e-2); }
.corps-message blockquote { margin: 0 0 var(--e-3); padding-left: var(--e-4);
                            border-left: var(--trait-fort) solid var(--filet);
                            color: var(--texte-doux); }
.corps-message pre { margin: 0 0 var(--e-3); padding: var(--e-3);
                     background: var(--surface-haute); overflow-x: auto; }
.corps-message code { font-family: var(--police-pipboy); font-size: .95em; }
.corps-message h2, .corps-message h3, .corps-message h4 {
  margin: var(--e-4) 0 var(--e-2); color: var(--jaune); font-weight: 400; }
.corps-message hr { border: 0; border-top: var(--trait-fin) solid var(--separateur);
                    margin: var(--e-4) 0; }

/* Une entrée de menu qui porte du nouveau. Discret : une couleur, pas une
   pastille qui saute aux yeux à chaque page. */
.sous-menu a.a-du-nouveau { color: var(--jaune); font-weight: 600; }

/* ------------------------------------------- l'éditeur visuel (TinyMCE)
   Son habillage « oxide-dark » est bleu-gris, avec des coins arrondis : rien
   de la charte. On le repeint depuis ici — la barre d'outils et le cadre sont
   dans NOTRE document, seule la zone de saisie est un cadre à part (voir
   editeur-contenu.css). Le skin écrit `.tox .tox-tbtn` et arrive après nous dans la
   cascade : on le bat par la spécificité — `.tox.tox-tinymce .tox-tbtn` —
   pas par `!important`. */
.tox.tox-tinymce { border: var(--trait-fin) solid var(--filet); border-radius: 0;
                   background: var(--surface); box-shadow: var(--relief);
                   font-family: var(--police-texte); }
/* Le skin peint l'en-tete avec `.tox:not(.tox-tinymce-inline) .tox-editor-header`
   (0,3,0) : on monte d'un cran. */
.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header,
.tox.tox-tinymce .tox-editor-header { background: var(--surface-haute); border-bottom: var(--trait-fin) solid var(--separateur);
                          box-shadow: none; padding: var(--e-1) var(--e-2); }
.tox.tox-tinymce .tox-toolbar, .tox.tox-tinymce .tox-toolbar__primary, .tox.tox-tinymce .tox-toolbar__overflow,
.tox.tox-tinymce .tox-toolbar-overlord { background: transparent; background-image: none; }
.tox.tox-tinymce .tox-toolbar__group { padding: 0 var(--e-2); border-color: var(--separateur); }
.tox.tox-tinymce .tox-tbtn { color: var(--texte-doux); background: transparent; border-radius: 0;
                 width: 36px; height: 36px; margin: 2px 1px; }
.tox.tox-tinymce .tox-tbtn svg { fill: var(--texte-doux); }
.tox.tox-tinymce .tox-tbtn:hover, .tox.tox-tinymce .tox-tbtn:focus { background: var(--surface); color: var(--jaune); box-shadow: none; }
.tox.tox-tinymce .tox-tbtn:hover svg, .tox.tox-tinymce .tox-tbtn:focus svg { fill: var(--jaune); }
.tox.tox-tinymce .tox-tbtn--enabled, .tox.tox-tinymce .tox-tbtn--enabled:hover { background: var(--fond); color: var(--jaune);
                                                         box-shadow: var(--relief-enfonce); }
.tox.tox-tinymce .tox-tbtn--enabled svg { fill: var(--jaune); }
.tox.tox-tinymce .tox-tbtn--disabled svg, .tox.tox-tinymce .tox-tbtn--disabled:hover svg { fill: var(--separateur); }
.tox.tox-tinymce .tox-tbtn:focus-visible { outline: var(--trait-fin) solid var(--jaune-focus); outline-offset: -2px; }
.tox.tox-tinymce .tox-split-button { border-radius: 0; }
.tox.tox-tinymce .tox-split-button:hover, .tox.tox-tinymce .tox-split-button:focus { box-shadow: none; }
.tox.tox-tinymce .tox-edit-area { border-top: none; }
.tox.tox-tinymce .tox-edit-area::before { border-color: var(--jaune-focus); border-radius: 0; }
.tox.tox-tinymce .tox-edit-area__iframe { background: var(--fond); }
.tox.tox-tinymce .tox-sidebar-wrap, .tox.tox-tinymce .tox-editor-container { background: var(--fond); }
/* Les menus déroulants (listes, émojis, lien) et les dialogues. */
body .tox .tox-menu, body .tox .tox-collection, body .tox .tox-dialog, body .tox .tox-pop {
  background: var(--surface); border: var(--trait-fin) solid var(--filet); border-radius: 0;
  box-shadow: var(--ombre-md); color: var(--texte); }
body .tox .tox-collection__item { color: var(--texte); border-radius: 0; }
body .tox .tox-collection__item--active, body .tox .tox-collection__item--enabled { background: var(--surface-haute); color: var(--jaune); }
body .tox .tox-dialog__header, body .tox .tox-dialog__footer { background: var(--surface-haute); border-color: var(--separateur); }
body .tox .tox-dialog__title { font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase;
                          letter-spacing: .08em; color: var(--jaune); }
body .tox .tox-label, body .tox .tox-form__group label { color: var(--texte-doux); font-family: var(--police-pixel);
                                              font-size: var(--t-etiquette); text-transform: uppercase; }
body .tox .tox-textfield, body .tox .tox-listbox, body .tox .tox-selectfield select, body .tox .tox-textarea {
  background: var(--fond); color: var(--texte); border: var(--trait-fin) solid var(--bordure); border-radius: 0; }
body .tox .tox-textfield:focus, body .tox .tox-listbox:focus { border-color: var(--jaune); box-shadow: none; }
body .tox .tox-button { border-radius: 0; font-family: var(--police-pixel); font-size: var(--t-etiquette);
                   text-transform: uppercase; letter-spacing: .06em;
                   background: var(--jaune); border-color: var(--jaune); color: var(--trait); }
body .tox .tox-button:hover { background: var(--jaune-survol); border-color: var(--jaune-survol); }
body .tox .tox-button--secondary { background: var(--surface-haute); border-color: var(--bordure); color: var(--texte); }
body .tox .tox-button--secondary:hover { border-color: var(--jaune); color: var(--jaune); background: var(--surface-haute); }
body .tox .tox-button--naked { color: var(--texte-doux); }
body .tox .tox-tooltip__body { background: var(--fond); color: var(--texte); border: var(--trait-fin) solid var(--filet);
                          border-radius: 0; font-family: var(--police-texte); }
body .tox .tox-tooltip__arrow { border-bottom-color: var(--filet); }
.tox.tox-tinymce .tox-statusbar { display: none; }