/* =============================================================================
   Kratos — habillage « Nuit & or »
   Repris de design/planche_nuit.html, la planche retenue : fond nuit veiné de
   lueur, or, petites capitales serif, cadres à coins, grands chiffres de
   caractéristiques, inserts parchemin pour ce que le joueur écrit de sa main.
   Rien n'est importé d'un kit graphique : tout est en CSS, uniquement des
   dégradés, des bordures et des formes — pas de licence à traîner.

   Les PEAUX sont des surcharges de jetons posées sur <html data-peau="…"> par
   appliquerPeau() (app.js), d'après theme.peau du Système. Un écran ne connaît
   jamais une couleur en dur : il ne lit que des jetons, donc changer de peau
   repeint TOUTE l'application — coquille, fiche, constructeur, console, chat,
   carte et compte rendu compris.
   ========================================================================== */

/* ------------------------------------------------------------------ jetons */
:root {
  /* nuit-or — la peau par défaut */
  --nuit-1: #0b0d16; --nuit-2: #121627; --nuit-3: #1a2038;
  --voile: rgba(14, 18, 34, .74);
  --or: #d9b56a; --or-2: #f0d597; --or-3: #8c6f36;
  --lueur: rgba(240, 213, 151, .35);
  --texte: #ece3cf; --texte-2: #a99f89;
  --parch: #e9dcbc; --parch-2: #d6c39a; --parch-encre: #3a2a17; --parch-main: #2b3b6b;
  --hp: #d84a4a; --mana: #4f8fd6; --endu: #62b06a; --chance: #e2b23f; --magie: #9a63e0;
  --crit: #f5d76e; --ok: #62b06a; --bad: #d84a4a; --alerte: #e2b23f;
  --champ: rgba(0, 0, 0, .34);
  /* La surface de jeu de la carte. Elle ne peut pas valoir le fond de l'écran :
     un plateau doit se lire COMME un plateau, posé sur la nuit. */
  --plateau: #d9cdb0;
  --rayon: 3px;

  --display: "Cinzel", "Optima", Georgia, serif;
  --lettre: "Cormorant Garamond", Georgia, serif;
  --body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --main: "Caveat", "Segoe Script", cursive;

  color-scheme: dark;
  font-family: var(--body);
}

[data-peau="sepia-cuivre"] {
  --nuit-1: #100c08; --nuit-2: #1b140d; --nuit-3: #2a1f14; --voile: rgba(24,17,10,.78);
  --or: #c9955a; --or-2: #ecc48f; --or-3: #7a5530; --lueur: rgba(236,196,143,.32);
  --texte: #eadfcd; --texte-2: #a89377; --mana: #7f9ec4; --magie: #b98ad6;
  --plateau: #d8c6a4;
}
[data-peau="sang-or"] {
  --nuit-1: #0c0707; --nuit-2: #160c0c; --nuit-3: #241212; --voile: rgba(22,12,12,.8);
  --or: #d9b56a; --or-2: #f0d597; --or-3: #8c6f36; --lueur: rgba(200,50,50,.32);
  --texte: #efe2d6; --texte-2: #b09a90; --crit: #ff8f6b;
  --plateau: #d3c0ad;
}
[data-peau="neon-arcane"] {
  --nuit-1: #07050e; --nuit-2: #100a1f; --nuit-3: #1a1030; --voile: rgba(16,10,31,.8);
  --or: #ff4fb0; --or-2: #ffb3dd; --or-3: #8a2a63; --lueur: rgba(255,79,176,.35);
  --texte: #f4e8ff; --texte-2: #b39bc9; --crit: #ff8ad0; --mana: #6fb7ff; --magie: #c08bff;
  --plateau: #241a3c;
  --display: "Cinzel", Georgia, serif;
}
[data-peau="console"] {
  --nuit-1: #050505; --nuit-2: #0d0d0d; --nuit-3: #161616; --voile: rgba(10,10,10,.85);
  --or: #ff7a1a; --or-2: #ffb36b; --or-3: #7a3a0a; --lueur: rgba(255,122,26,.3);
  --texte: #f2eee8; --texte-2: #9a938a; --crit: #ffc46b;
  --plateau: #1e1e1e;
  /* Une console n'a pas de serif gravé : tout passe en linéale, et les
     libellés gardent l'espacement large des interfaces techniques. */
  --display: "Nunito Sans", sans-serif; --lettre: "Nunito Sans", sans-serif; --main: "Nunito Sans", sans-serif;
  --rayon: 0px;
}
[data-peau="pixel-quest"] {
  --nuit-1: #0a0d1c; --nuit-2: #121a33; --nuit-3: #1a2547; --voile: rgba(14,20,45,.85);
  --or: #62d9ff; --or-2: #b8f0ff; --or-3: #2a6b85; --lueur: rgba(98,217,255,.35);
  --texte: #eef7ff; --texte-2: #93a9c4; --crit: #b8f0ff; --mana: #7fb2ff;
  --plateau: #22305e;
  --rayon: 0px;
}
/* La seule peau claire : un dossier de papier sur une table en bois. Les rôles
   des jetons sont conservés (nuit-1 = le fond, texte = l'encre), donc tout
   l'habillage suit sans qu'une seule règle ne soit réécrite. */
[data-peau="parchemin-bois"] {
  --nuit-1: #2e2117; --nuit-2: #e7dcc2; --nuit-3: #f3ead3; --voile: rgba(243, 234, 211, .93);
  --or: #8a6a32; --or-2: #5d4520; --or-3: #c0ab82; --lueur: rgba(138, 106, 50, .18);
  --texte: #37291a; --texte-2: #6a553a;
  --champ: rgba(255, 255, 255, .55);
  --hp: #a8392f; --mana: #35618f; --endu: #3f7a44; --chance: #9a7420; --magie: #6b3f97;
  --crit: #9a6b16; --ok: #3f7a44; --bad: #a8392f;
  --plateau: #efe4c8;
  color-scheme: light;
}

/* « ARÈNE » (2026-10-18) — d'après la galerie MU Online (Behance) : nuit indigo qui vire au violet, halos lumineux, accent violet
   électrique, boutons pleins arrondis, onglets soulignés d'un trait de lumière, cartes en VERRE teinté (coins arrondis, filet clair,
   léger flou), médaillons ronds à halo de RARETÉ, capitales espacées en linéale géométrique. Une peau GÉNÉRALE : choisie par le MJ
   pour la table (tables_jeu.peau), vue par tous — le site, Kratos et Demos (Peaux.swift porte les mêmes jetons). */
[data-peau="arene"] {
  --nuit-1: #0b0824; --nuit-2: #1b1357; --nuit-3: #2c2080; --voile: rgba(30, 20, 96, .5);
  --or: #8f63ff; --or-2: #cdbaff; --or-3: #4a3aa0; --lueur: rgba(143, 99, 255, .38);
  --texte: #efecff; --texte-2: #aea8dc;
  --crit: #cdbaff; --mana: #6f9bff; --magie: #c08bff;
  --champ: rgba(8, 5, 32, .5);
  --plateau: #2a2070;
  --rayon: 12px;
  --display: "Avenir Next", "Nunito Sans", -apple-system, "Segoe UI", sans-serif;
  --lettre: "Avenir Next", "Nunito Sans", -apple-system, sans-serif;
  --main: "Avenir Next", "Nunito Sans", sans-serif;
}

/* Le décor : dégradé indigo → violet, deux halos froids (en bas à gauche, à droite) au lieu des étoiles. */
[data-peau="arene"] body::before {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(143, 99, 255, .42) 0%, transparent 56%),
    radial-gradient(circle at 6% 94%, rgba(111, 139, 255, .22), transparent 46%),
    radial-gradient(circle at 98% 44%, rgba(143, 99, 255, .2), transparent 42%),
    linear-gradient(180deg, #1d1268, #0e0a38 58%, #05031a);
}
[data-peau="arene"] body::after { opacity: .12; }

[data-peau="arene"] h1, [data-peau="arene"] h2, [data-peau="arene"] h3 { letter-spacing: .1em; font-weight: 800; }
[data-peau="arene"] h1 { text-shadow: 0 0 26px var(--lueur); }
[data-peau="arene"] .brand-nom { letter-spacing: .24em; font-weight: 800; }
[data-peau="arene"] #topbar {
  background: linear-gradient(180deg, rgba(27, 19, 87, .78), rgba(11, 8, 36, .6));
  border-bottom: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(20, 8, 90, .5);
}
[data-peau="arene"] #topnav button, [data-peau="arene"] #topnav span { border-color: rgba(255, 255, 255, .18); border-radius: 999px; }
[data-peau="arene"] #topnav button:hover { border-color: var(--or); background: rgba(143, 99, 255, .18); }

/* Les cartes : du verre teinté. Plus de coins ornés, un filet clair en haut à gauche, une lueur violette dans l'angle. */
[data-peau="arene"] .card, [data-peau="arene"] .sheet-header {
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, .16);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(143, 99, 255, .2), transparent 60%),
    linear-gradient(145deg, rgba(44, 32, 128, .5), rgba(11, 8, 36, .72));
  box-shadow: 0 14px 36px rgba(20, 8, 90, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px);
}
[data-peau="arene"] .card::after { display: none; }
[data-peau="arene"] .carac-item, [data-peau="arene"] .derive, [data-peau="arene"] .carte-perso, [data-peau="arene"] .demande {
  border-radius: 14px; border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(160deg, rgba(44, 32, 128, .42), rgba(11, 8, 36, .66));
  box-shadow: 0 10px 26px rgba(20, 8, 90, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
[data-peau="arene"] .carte-perso.pnj { border-style: solid; }
[data-peau="arene"] .carte-tete .nom, [data-peau="arene"] .carte-perso .ruban {
  clip-path: none; border-radius: 999px; color: #fff; letter-spacing: .14em;
  background: linear-gradient(180deg, #a98bff, var(--or)); box-shadow: 0 0 14px var(--lueur);
}
[data-peau="arene"] .section-title { letter-spacing: .26em; }

/* Boutons : pleins, arrondis, violet électrique ; le secondaire est un verre à contour. */
[data-peau="arene"] button {
  clip-path: none; border-radius: 999px; padding: .55rem 1.25rem; color: #fff; letter-spacing: .14em;
  background: linear-gradient(180deg, #a98bff, var(--or));
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 0 18px var(--lueur), inset 0 1px 0 rgba(255, 255, 255, .3);
}
[data-peau="arene"] button:hover { color: #fff; box-shadow: 0 0 28px rgba(143, 99, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .4); }
[data-peau="arene"] button.secondary, [data-peau="arene"] button.ghost-danger {
  color: var(--texte); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); box-shadow: none;
}
[data-peau="arene"] button.secondary:hover { background: rgba(255, 255, 255, .13); box-shadow: 0 0 16px var(--lueur); }
[data-peau="arene"] button.danger { color: #fff; background: linear-gradient(180deg, #e0605a, #b53434); border-color: rgba(255, 255, 255, .3); }
[data-peau="arene"] button.small { padding: .3rem .8rem; clip-path: none; }
[data-peau="arene"] button.mini { border-radius: 8px; padding: 0 .4rem; }

/* Champs : arrondis, creux, filet qui s'allume en violet. */
[data-peau="arene"] input, [data-peau="arene"] select, [data-peau="arene"] textarea {
  border-radius: 10px; border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 8px rgba(5, 3, 26, .6);
}
[data-peau="arene"] input:focus, [data-peau="arene"] select:focus, [data-peau="arene"] textarea:focus { border-color: var(--or); box-shadow: inset 0 1px 8px rgba(5, 3, 26, .6), 0 0 16px var(--lueur); }

/* Onglets : texte clair, souligné d'un trait de lumière sous l'onglet actif (plus de pavé plein). */
[data-peau="arene"] .onglets, [data-peau="arene"] .mec-liste, [data-peau="arene"] .carte-onglets { border-bottom-color: rgba(255, 255, 255, .14); }
[data-peau="arene"] .onglet, [data-peau="arene"] .mec-onglet, [data-peau="arene"] .module-btn {
  border-radius: 8px 8px 0 0; border: 0; border-bottom: 2px solid transparent; letter-spacing: .18em; color: var(--texte-2); background: transparent;
}
[data-peau="arene"] .onglet.actif, [data-peau="arene"] .mec-onglet.actif, [data-peau="arene"] .mec-onglet.mecaniqueActive, [data-peau="arene"] .module-btn.actif {
  color: #fff; background: linear-gradient(180deg, transparent, rgba(143, 99, 255, .22));
  border-bottom-color: var(--or-2); box-shadow: 0 6px 14px -6px var(--or); font-weight: 800;
}
[data-peau="arene"] .pill, [data-peau="arene"] .tag, [data-peau="arene"] .chip { background: rgba(143, 99, 255, .16); border-color: rgba(205, 186, 255, .4); }
[data-peau="arene"] .badge { background: linear-gradient(180deg, #a98bff, var(--or)); color: #fff; border-color: transparent; }
[data-peau="arene"] .carte-jauges .rail, [data-peau="arene"] .res-rail { clip-path: none; border-radius: 999px; border-color: rgba(255, 255, 255, .16); }
[data-peau="arene"] .carte-jauges .rail i, [data-peau="arene"] .res-rail i { border-radius: 999px; }

/* La RARETÉ (donnée du Système : --rarete vient de sa palette, jamais d'ici). Valable pour TOUTES les peaux — sobre ailleurs. */
.rarete-pastille {
  display: inline-block; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--rarete, var(--or)); border: 1px solid rgba(255, 255, 255, .45); box-shadow: 0 0 10px var(--rarete, var(--or));
}
.carte-perso.a-rarete { border-color: var(--rarete); box-shadow: 0 0 0 1px var(--rarete), 0 0 18px color-mix(in srgb, var(--rarete) 55%, transparent), 0 10px 24px rgba(0, 0, 0, .5); }
.pill-rarete { color: var(--rarete); border-color: var(--rarete); background: color-mix(in srgb, var(--rarete) 16%, transparent); }
[data-peau="arene"] .carte-perso.a-rarete { box-shadow: 0 0 0 1px var(--rarete), 0 0 30px color-mix(in srgb, var(--rarete) 70%, transparent), 0 10px 26px rgba(20, 8, 90, .5); }

/* ------------------------------------------------------------------- socle */
* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--texte);
  background: var(--nuit-1);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Le ciel : deux lueurs et un dégradé, posés en fixed pour que le décor ne
   défile pas avec le contenu. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -12%, var(--lueur) 0%, transparent 55%),
    radial-gradient(circle at 12% 82%, rgba(80, 120, 255, .07), transparent 42%),
    linear-gradient(180deg, var(--nuit-2), var(--nuit-1) 62%);
}
/* Les étoiles : huit points, aucune image. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 33% 68%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 74% 47%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 78%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 44% 90%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 55%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 96% 12%, #fff 50%, transparent 51%);
}
[data-peau="parchemin-bois"] body::after { opacity: 0; }
/* Sur la peau claire, le « ciel » devient un plateau de bois. */
[data-peau="parchemin-bois"] body::before {
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #3a2a1c, #241a11 70%);
}

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--or-2); margin: 0 0 .5rem;
  text-wrap: balance;
}
h1 { font-size: clamp(22px, 3vw, 32px); text-shadow: 0 0 22px var(--lueur), 0 2px 0 rgba(0,0,0,.5); }
h2 { font-size: clamp(18px, 2.2vw, 24px); }
h3 { font-size: 15px; }
h4 { font-size: 12px; letter-spacing: .18em; color: var(--texte-2); }
p { margin: 0 0 .6rem; }
b, strong { color: var(--texte); }
small { font-size: .82em; }
a, a.link { color: var(--or-2); cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; }
a:hover, a.link:hover { border-bottom-color: var(--or); }
::selection { background: var(--or); color: var(--nuit-1); }
:focus-visible { outline: 2px solid var(--or-2); outline-offset: 2px; }

.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--texte-2); }
.aide { color: var(--texte-2); font-size: .8rem; font-style: italic; margin: .2rem 0 .5rem; }
.error, .err, .erreur-ligne { color: var(--bad); }
.vide { color: var(--texte-2); font-style: italic; }
.nom { font-weight: 600; }

/* ------------------------------------------------------------- la coquille */
#topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap;
  padding: .55rem clamp(12px, 3vw, 28px);
  background: linear-gradient(180deg, var(--voile), rgba(0,0,0,.5));
  border-bottom: 1px solid var(--or-3);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
/* Le bandeau annonce la table où l'on joue, et à quel titre : deux lignes,
   le nom du Système et le rôle, pour que personne ne confonde le site (les
   joueurs) avec la console du MJ. */
.brand { display: flex; flex-direction: column; gap: .1rem; line-height: 1.05; }
.brand-nom {
  font-family: var(--display); font-weight: 900; font-size: 1.05rem;
  letter-spacing: .28em; color: var(--or-2);
  text-shadow: 0 0 18px var(--lueur);
}
.brand-role {
  font-family: var(--display); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--texte-2); opacity: .85;
}
#topnav { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
#topnav button, #topnav span {
  font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  background: transparent; color: var(--texte-2);
  border: 1px solid var(--or-3); border-radius: var(--rayon);
  padding: .32rem .7rem; cursor: pointer; clip-path: none;
  box-shadow: none;
}
#topnav button:hover { color: var(--or-2); border-color: var(--or); background: rgba(255,255,255,.05); box-shadow: 0 0 12px var(--lueur); }

/* Le salon flotte en bas à droite : la page se réserve sa hauteur, sinon il
   recouvre la dernière carte (le bouton « Régénérer » du code d'invitation,
   par exemple, passait dessous). */
#app { max-width: 1180px; margin: 0 auto; padding: 1.5rem clamp(12px, 3vw, 24px) 5rem; }
body:has(#dock) #app { padding-bottom: 8.5rem; }
#app.plein { max-width: none; padding: 0; }
/* Sur la peau claire, le fond de page est une table en bois : le contenu ne
   peut pas s'écrire dessus à l'encre brune. On pose donc une vraie feuille —
   c'est le dossier posé sur la table, et tout ce qui vit hors d'une carte
   (liens, titres, aides) retrouve un support lisible. */
[data-peau="parchemin-bois"] #app {
  background: linear-gradient(160deg, var(--nuit-3), var(--nuit-2));
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  margin-block: 0 2rem; padding-bottom: 3rem;
}
[data-peau="parchemin-bois"] #app.plein { background: none; box-shadow: none; margin: 0; padding: 0; }
[data-peau="parchemin-bois"] #topbar { background: linear-gradient(180deg, rgba(58,42,28,.95), rgba(36,26,17,.9)); }
[data-peau="parchemin-bois"] .brand-nom, [data-peau="parchemin-bois"] #topnav button { color: #e9d9b8; }
[data-peau="parchemin-bois"] .brand-role { color: #c9b48a; }
[data-peau="parchemin-bois"] #topnav button { border-color: #8a6a32; }
/* Les ombres portées « nuit » n'ont pas de sens sur du papier : on les allège. */
[data-peau="parchemin-bois"] .card, [data-peau="parchemin-bois"] .sheet-header {
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 18px rgba(60,40,20,.18);
  backdrop-filter: none;
}
[data-peau="parchemin-bois"] .carac-item, [data-peau="parchemin-bois"] .derive,
[data-peau="parchemin-bois"] .carte-perso, [data-peau="parchemin-bois"] .demande {
  background: rgba(255,255,255,.4); box-shadow: inset 0 0 12px rgba(150,120,70,.12);
}
[data-peau="parchemin-bois"] .carac-bubble input, [data-peau="parchemin-bois"] h1,
[data-peau="parchemin-bois"] .derive .valeur, [data-peau="parchemin-bois"] .seance-num { text-shadow: none; }
[data-peau="parchemin-bois"] button { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 3px rgba(60,40,20,.25); }
[data-peau="parchemin-bois"] .background-col textarea { filter: drop-shadow(0 3px 6px rgba(60,40,20,.25)); }

/* -------------------------------------------------------------- primitives */
/* Le cadre filigrané de la planche : voile sombre, filet or, et quatre coins
   dessinés en dégradés — aucun élément supplémentaire dans le HTML. */
.card {
  position: relative;
  background: var(--voile);
  border: 1px solid var(--or-3);
  border-radius: var(--rayon);
  padding: 1rem 1.15rem 1.1rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 0 40px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.4);
  backdrop-filter: blur(3px);
}
.card::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--or), var(--or)) 0 0 / 2px 13px no-repeat,
    linear-gradient(var(--or), var(--or)) 0 0 / 13px 2px no-repeat,
    linear-gradient(var(--or), var(--or)) 100% 0 / 2px 13px no-repeat,
    linear-gradient(var(--or), var(--or)) 100% 0 / 13px 2px no-repeat,
    linear-gradient(var(--or), var(--or)) 0 100% / 2px 13px no-repeat,
    linear-gradient(var(--or), var(--or)) 0 100% / 13px 2px no-repeat,
    linear-gradient(var(--or), var(--or)) 100% 100% / 2px 13px no-repeat,
    linear-gradient(var(--or), var(--or)) 100% 100% / 13px 2px no-repeat;
  filter: drop-shadow(0 0 3px var(--lueur));
  opacity: .85;
}

/* « — SECTION — » : le titre des dossiers, avec son filet qui file à droite. */
.section-title, .cat-label {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--display); font-weight: 700; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--or-2);
  margin: 0 0 .7rem; white-space: nowrap;
}
.section-title::after {
  content: ""; flex: 1; min-width: 0; height: 1px;
  background: linear-gradient(90deg, var(--or-3), transparent);
}
/* Le filet de séparation autonome. */
.filet {
  display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0 1rem;
  font-family: var(--display); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--or);
}
.filet::before, .filet::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--or), transparent); }

/* Boutons : le losange coupé de la planche, en or gravé. */
button {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--or-2); cursor: pointer;
  padding: .52rem 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.4));
  border: 1px solid var(--or); border-radius: var(--rayon);
  box-shadow: 0 0 12px var(--lueur), inset 0 0 12px rgba(0,0,0,.45);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transition: box-shadow .15s, transform .05s, color .15s;
}
button:hover { box-shadow: 0 0 20px var(--lueur), inset 0 0 12px rgba(0,0,0,.45); color: #fff; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }
button.secondary {
  color: var(--texte-2); border-color: var(--or-3); box-shadow: inset 0 0 12px rgba(0,0,0,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.35));
}
button.secondary:hover { color: var(--texte); border-color: var(--or); box-shadow: 0 0 14px var(--lueur), inset 0 0 12px rgba(0,0,0,.45); }
button.danger { border-color: var(--bad); color: #ffc0c0; box-shadow: 0 0 12px rgba(216,74,74,.35), inset 0 0 12px rgba(0,0,0,.45); }
button.ghost-danger { background: transparent; border-color: rgba(216,74,74,.5); color: var(--bad); box-shadow: none; }
button.ghost-danger:hover { border-color: var(--bad); box-shadow: 0 0 14px rgba(216,74,74,.35); color: #ffc0c0; }
/* La coupe en biais ne tient pas sous 90 px de large : les petits boutons la
   perdent plutôt que de rogner leur propre texte. */
button.small { padding: .28rem .65rem; font-size: 10px; letter-spacing: .12em; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
button.mini {
  padding: 0 .4rem; min-width: 22px; height: 22px; font-size: 11px; letter-spacing: 0;
  clip-path: none; border-radius: var(--rayon); box-shadow: inset 0 0 8px rgba(0,0,0,.5);
}

/* Champs : gravés dans la nuit, jamais blancs. */
input, select, textarea {
  font-family: var(--body); font-size: .92rem; color: var(--texte);
  background: var(--champ);
  border: 1px solid var(--or-3); border-radius: var(--rayon);
  padding: .4rem .55rem;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.5);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--or);
  box-shadow: inset 0 1px 6px rgba(0,0,0,.5), 0 0 12px var(--lueur);
}
input::placeholder, textarea::placeholder { color: var(--texte-2); opacity: .6; }

/* Mot de passe : l'œil est posé DANS le champ, à droite, sans le style gravé
   des boutons — c'est une commande du champ, pas une action de la page. */
.champ-secret { position: relative; }
.champ-secret input { padding-right: 2.5rem; }
.champ-secret .oeil {
  position: absolute; top: 50%; right: .2rem; transform: translateY(-50%);
  width: 2.1rem; height: 1.9rem; padding: 0; display: grid; place-items: center;
  color: var(--texte-2); background: transparent; border: 0; border-radius: var(--rayon);
  box-shadow: none; clip-path: none;
}
.champ-secret .oeil:hover { color: var(--or-2); box-shadow: none; }
/* button:active descend d'un pixel : ici, ça casserait le centrage vertical. */
.champ-secret .oeil:active { transform: translateY(calc(-50% + 1px)); }
.champ-secret .oeil[aria-pressed="true"] { color: var(--or); }
select option { background: var(--nuit-2); color: var(--texte); }
input[type=checkbox], input[type=radio] { accent-color: var(--or); box-shadow: none; }
input[type=color] { padding: 2px; height: 30px; }
input[type=range] { accent-color: var(--or); box-shadow: none; border: 0; background: transparent; }
input[type=file] { color: var(--texte-2); }

label {
  display: block; margin-bottom: .2rem;
  font-family: var(--display); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--texte-2);
}
label.inline, .case-inline {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--body); font-size: .88rem; letter-spacing: 0;
  text-transform: none; color: var(--texte); margin: .25rem 0;
}

.row { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }

.pill, .badge, .tag, .chip {
  font-family: var(--display); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--or-3); border-radius: 999px; padding: .12rem .55rem;
  color: var(--or-2); background: rgba(0,0,0,.35); white-space: nowrap;
}
.badge { background: var(--or); color: var(--nuit-1); border-color: var(--or); font-weight: 700; box-shadow: 0 0 10px var(--lueur); }
.chip { cursor: pointer; clip-path: none; box-shadow: none; padding: .18rem .6rem; }
.chip:hover { border-color: var(--or); color: #fff; box-shadow: 0 0 10px var(--lueur); }

.list-item, .liste-editable > div, .item-editable {
  display: flex; gap: .5rem; align-items: center;
  padding: .45rem .1rem; border-bottom: 1px dashed rgba(217,181,106,.16);
}
.list-item:last-child { border-bottom: 0; }
.poignee { cursor: grab; color: var(--or-3); user-select: none; padding: 0 .2rem; }
.poignee:active { cursor: grabbing; }
.drag { opacity: .45; }
.over { box-shadow: inset 0 2px 0 var(--or); }

.mini-table, .equip-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.mini-table th, .equip-table th {
  font-family: var(--display); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-2); text-align: left; font-weight: 700;
  border-bottom: 1px solid var(--or-3); padding: .3rem .4rem;
}
.mini-table td, .equip-table td { padding: .25rem .4rem; border-bottom: 1px dashed rgba(217,181,106,.14); }

/* ==========================================================================
   LA FICHE — un dossier de personnage : portrait, identité manuscrite,
   grands chiffres de caractéristiques, jauges lumineuses, crans de compétence.
   ========================================================================== */
.fiche-barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }

.sheet-header {
  position: relative;
  display: grid; grid-template-columns: 220px minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.4rem; align-items: stretch;
  background: var(--voile); border: 1px solid var(--or-3); border-radius: var(--rayon);
  padding: 1.2rem; margin-bottom: 1.2rem;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 0 50px rgba(0,0,0,.45), 0 14px 36px rgba(0,0,0,.45);
}
/* Le portrait est la pièce centrale du dossier : cadre gravé, plaque en bas. */
.photo-box {
  position: relative; min-height: 240px; cursor: pointer; overflow: hidden;
  border: 1px solid var(--or-3); border-radius: var(--rayon);
  background-size: cover; background-position: center;
  background-color: var(--nuit-3);
  background-image:
    radial-gradient(ellipse at 50% 38%, rgba(120,140,200,.3), transparent 55%),
    linear-gradient(180deg, var(--nuit-3), var(--nuit-1) 82%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.6), 0 12px 30px rgba(0,0,0,.5);
  display: grid; place-items: center;
}
.photo-box::after {
  content: "Portrait"; position: absolute; left: 0; right: 0; bottom: 0;
  padding: .4rem .7rem; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent);
  font-family: var(--display); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--or-2);
}
.photo-box:hover { border-color: var(--or); box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.5), 0 0 22px var(--lueur); }
.photo-hint { font-family: var(--display); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-2); }
.photo-box input[type=file] { display: none; }

.id-fields { display: flex; flex-direction: column; justify-content: center; gap: .9rem; }
.id-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.id-field { flex: 1 1 150px; min-width: 0; }
.id-field-pill {
  display: block; margin-bottom: .15rem;
  font-family: var(--display); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--texte-2);
}
/* Ce que le joueur écrit de sa main est manuscrit — c'est la règle du dossier :
   l'imprimé est au jeu, la main est au personnage. */
.id-field input, #p-background, #p-histoire-secrete, .ident-field {
  width: 100%; font-family: var(--main); font-size: 1.35rem; font-weight: 600;
  color: var(--or-2); background: transparent;
  border: 0; border-bottom: 1px dotted var(--or-3); border-radius: 0;
  box-shadow: none; padding: .1rem .1rem .15rem;
}
.id-field input:focus, .ident-field:focus { box-shadow: 0 2px 10px -4px var(--lueur); border-bottom-color: var(--or); }
#p-nom { font-size: 1.9rem; color: var(--texte); }

/* Le background : un insert de parchemin, bords déchirés, écrit à la main. */
.background-col { display: flex; flex-direction: column; }
.background-col textarea {
  flex: 1; min-height: 150px; resize: vertical;
  font-family: var(--main); font-size: 1.15rem; line-height: 1.35;
  color: var(--parch-main); border: 0; border-radius: 0; box-shadow: none;
  padding: 1rem 1.1rem;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.45), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(120,90,40,.2), transparent 45%),
    linear-gradient(160deg, var(--parch), var(--parch-2));
  clip-path: polygon(0 2%, 4% 0, 14% 1.5%, 26% 0, 38% 1.3%, 50% 0, 62% 1.6%, 74% .2%, 86% 1.6%, 96% .3%, 100% 4%,
    99% 20%, 100% 40%, 98.8% 60%, 100% 80%, 99% 96%, 95% 100%, 84% 98.6%, 72% 100%, 60% 98.5%, 48% 100%,
    36% 98.7%, 24% 100%, 12% 98.5%, 2% 100%, 0 95%, 1.2% 78%, 0 60%, 1.3% 40%, 0 20%);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.55));
}
.background-col textarea::placeholder { color: #8a7551; }
.background-col textarea:focus { filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)) drop-shadow(0 0 12px var(--lueur)); }

/* ------------------------------------------------------- bandeau de jauges */
.ressources-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--voile); border: 1px solid var(--or-3); border-radius: var(--rayon);
  margin-bottom: 1.2rem; overflow: hidden;
}
/* Les séparateurs sont dessinés DANS chaque cellule, pas par un fond doré que
   la grille laisserait voir : une rangée incomplète (une jauge sans maximum en
   fin de liste) affichait sinon un grand pavé d'or à la place de la case vide. */
.res-item { padding: .6rem .8rem; box-shadow: inset -1px -1px 0 var(--or-3); }
.res-item label { margin-bottom: .3rem; }
/* Le rail lumineux de la planche : coin coupé, verre sombre, néon dedans. */
.res-rail {
  height: 12px; border: 1px solid var(--or-3); background: rgba(0,0,0,.55);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.8); margin-bottom: .4rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.res-rail i {
  display: block; height: 100%; transition: width .25s ease;
  background: linear-gradient(90deg, var(--hp), color-mix(in srgb, var(--hp) 55%, white));
  box-shadow: 0 0 12px var(--hp);
}
/* Chaque jauge prend sa teinte de son rang : vie, souffle, ressource, chance… */
.res-item:nth-child(2) .res-rail i { background: linear-gradient(90deg, var(--mana), color-mix(in srgb, var(--mana) 55%, white)); box-shadow: 0 0 12px var(--mana); }
.res-item:nth-child(3) .res-rail i { background: linear-gradient(90deg, var(--endu), color-mix(in srgb, var(--endu) 55%, white)); box-shadow: 0 0 12px var(--endu); }
.res-item:nth-child(4) .res-rail i { background: linear-gradient(90deg, var(--chance), color-mix(in srgb, var(--chance) 55%, white)); box-shadow: 0 0 12px var(--chance); }
.res-item:nth-child(n+5) .res-rail i { background: linear-gradient(90deg, var(--magie), color-mix(in srgb, var(--magie) 55%, white)); box-shadow: 0 0 12px var(--magie); }
.res-chiffres { display: flex; align-items: center; gap: .3rem; }
.res-chiffres .slash { color: var(--texte-2); }
.res-cur, .res-max {
  width: 3.4rem; text-align: center; font-family: var(--display); font-weight: 700;
  font-size: 1.05rem; color: var(--texte); padding: .15rem .2rem;
}
.res-cur { color: var(--or-2); }
.boutons-jauge { display: flex; gap: .3rem; }

/* ------------------------------------------- caractéristiques : les tuiles */
.caracs-card .carac-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .6rem;
  margin-top: .4rem;
}
.carac-item {
  position: relative; text-align: center; padding: .7rem .35rem .6rem;
  border: 1px solid var(--or-3); border-radius: var(--rayon);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.35));
  box-shadow: inset 0 0 18px rgba(0,0,0,.55);
  transition: border-color .15s, box-shadow .15s;
}
.carac-item:hover, .carac-item:focus-within { border-color: var(--or); box-shadow: inset 0 0 18px rgba(0,0,0,.55), 0 0 16px var(--lueur); }
.carac-label {
  display: block; margin-bottom: .25rem;
  font-family: var(--display); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--texte-2); white-space: normal;
}
.carac-bubble-wrap { display: grid; place-items: center; }
.carac-bubble { width: 100%; }
/* Le grand chiffre : c'est LUI le champ de saisie, pas une bulle autour. */
.carac-bubble input {
  width: 100%; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1;
  color: var(--texte); background: transparent; border: 0; box-shadow: none;
  padding: 0; text-shadow: 0 0 14px var(--lueur);
  -moz-appearance: textfield;
}
.carac-bubble input::-webkit-outer-spin-button, .carac-bubble input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.carac-bubble input:focus { color: var(--or-2); }
.carac-budget-line {
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .9rem; padding: .32rem .8rem;
  border: 1px solid var(--or-3); border-radius: var(--rayon);
  font-family: var(--display); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--or-2);
}
.carac-budget-line b { font-size: 1rem; }
.carac-budget-line b.over { color: var(--bad); text-shadow: 0 0 12px rgba(216,74,74,.6); }
.carac-budget-line .muted { letter-spacing: .1em; }

/* ------------------------------------------------- dérivés, états, chips */
.derives { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.derive {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  padding: .35rem .6rem; border: 1px solid var(--or-3); border-radius: var(--rayon);
  background: rgba(0,0,0,.28);
}
.derive .etq { font-family: var(--display); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-2); }
.derive .valeur { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--or-2); text-shadow: 0 0 10px var(--lueur); }
.etats, .cases-a-cocher { display: flex; flex-wrap: wrap; gap: .4rem; }
.etat {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .28rem .7rem; border: 1px solid var(--or-3); border-radius: 999px;
  font-size: .82rem; color: var(--texte-2); background: rgba(0,0,0,.3);
  transition: all .15s;
}
.etat:hover { border-color: var(--or); color: var(--texte); }
.etat.actif { border-color: var(--or); color: var(--nuit-1); background: linear-gradient(180deg, var(--or-2), var(--or)); box-shadow: 0 0 14px var(--lueur); font-weight: 700; }
.etat-pastille { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.suggestions { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0; }

/* ------------------------------------------------------------ compétences */
.skill-cat-card { padding-top: .9rem; }
.skill-cat-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap; margin-bottom: .6rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--or-3);
}
.skill-cat-header .cat-label { margin: 0; }
.dice-progression {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--display); font-size: 10px; letter-spacing: .1em; color: var(--texte-2);
}
.dice-progression .arrow { color: var(--or); }
.cat-sub { font-family: var(--body); letter-spacing: 0; font-style: italic; }

.skill-row-sheet {
  display: grid; grid-template-columns: 1fr repeat(3, 22px) 30px 24px;
  align-items: center; gap: .45rem;
  padding: .32rem 0; border-bottom: 1px dotted rgba(217,181,106,.16);
}
.skill-name { font-size: .95rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
/* Les crans : des losanges gravés, remplis d'or quand le rang est acquis. */
.skill-cell {
  width: 18px; height: 18px; transform: rotate(45deg); cursor: pointer;
  border: 1px solid var(--or-3); background: rgba(0,0,0,.5);
  box-shadow: inset 0 0 6px rgba(0,0,0,.8);
  color: transparent; font-size: 0; justify-self: center;
  transition: all .15s;
}
.skill-cell:hover { border-color: var(--or); box-shadow: 0 0 10px var(--lueur); }
.skill-cell.filled {
  background: linear-gradient(135deg, var(--or-2), var(--or));
  border-color: var(--or-2); box-shadow: 0 0 10px var(--lueur);
}
.skill-jet-btn, .skill-del-btn {
  padding: 0; width: 28px; height: 28px; font-size: 13px; letter-spacing: 0;
  clip-path: none; border-radius: var(--rayon); justify-self: center;
}
.skill-del-btn { width: 22px; height: 22px; border-color: transparent; background: transparent; box-shadow: none; color: var(--texte-2); font-size: 11px; }
.skill-del-btn:hover { color: var(--bad); border-color: rgba(216,74,74,.5); box-shadow: none; }
.jet-out { grid-column: 1 / -1; }
.new-skill { flex: 1; min-width: 140px; }

/* La demande du MJ, posée en haut de la fiche du joueur. */
.fiche-demandes:empty { display: none; }
.fiche-demandes { display: flex; flex-direction: column; gap: .5rem; margin-top: .7rem; }
.fiche-demandes .demande { animation: demande-arrive .45s ease both; }
@keyframes demande-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fiche-demandes .demande { animation: none; } }

/* « Ce serveur » : le diagnostic d'hébergement, sur l'accueil. */
.diag-grille { display: grid; gap: .2rem; margin-top: .6rem; }
.diag-ligne { font-size: .85rem; font-family: var(--mono, ui-monospace, monospace); }
.diag-ligne.ok { color: var(--ok); }
.diag-ligne.ko { color: var(--bad); }
.diag-soucis { margin-top: .7rem; border-left: 2px solid var(--bad); padding-left: .6rem; font-size: .88rem; }
.diag-soucis ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.diag-soucis li { margin-bottom: .3rem; }
.aide.ok { color: var(--ok); }

/* La bande-son, sous la barre du dock : ce que la table entend, et le réglage
   de sa propre oreille. */
.bande-son {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .3rem .6rem; border-top: 1px solid var(--or-3);
  background: rgba(0,0,0,.25); font-size: .82rem;
}
.bs-titre { color: var(--or-2); font-family: var(--display); font-size: .78rem; letter-spacing: .06em;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-etat { color: var(--texte-2); font-size: .76rem; font-style: italic; }
.bs-erreur { color: var(--bad); font-size: .76rem; flex: 1; min-width: 120px; }
.bs-activer {
  font-family: var(--display); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding: .2rem .5rem; border: 1px solid var(--or); color: var(--or-2);
  background: rgba(217,181,106,.12); border-radius: var(--rayon); cursor: pointer; clip-path: none; box-shadow: none;
}
.bs-muet { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0 .2rem; box-shadow: none; clip-path: none; }
.bs-volume { flex: 1; min-width: 70px; max-width: 120px; accent-color: var(--or); }

/* Les deux natures d'un fil privé : le chuchotement, et le scellé que le
   MJ ne lira jamais. La différence doit sauter aux yeux au moment du choix
   comme à chaque ouverture du fil. */
.choix-nature { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0 .2rem; }
.choix-nature .nature { display: flex; gap: .5rem; align-items: flex-start; padding: .45rem .6rem; border: 1px solid var(--or-3); border-radius: var(--rayon); cursor: pointer; }
.choix-nature .nature:has(input:checked) { border-color: var(--or); background: rgba(217,181,106,.08); }
.choix-nature .nature span { display: flex; flex-direction: column; gap: .12rem; }
.choix-nature .nature b { font-family: var(--display); font-size: .92rem; color: var(--texte); }
.choix-nature .nature small { font-size: .8rem; color: var(--texte-2); line-height: 1.35; }
.sceau { color: var(--or-2); font-family: var(--display); font-size: .82rem; letter-spacing: .06em; }
.scelles-avis { border-left: 2px solid var(--or-3); padding-left: .6rem; }

/* L'ambiance du salon.
   Le décor est posé sur le CORPS du dock (qui ne défile pas), et le fil de
   discussion pose par-dessus un voile dégradé : l'image reste immobile, les
   messages restent lisibles, et la zone de saisie garde un fond franc pour
   qu'on voie ce qu'on tape. */
.dock-corps.avec-ambiance {
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.dock-corps.avec-ambiance .chat-log {
  background: linear-gradient(180deg, rgba(11,13,22,.62) 0%, rgba(11,13,22,.86) 55%, rgba(11,13,22,.94) 100%);
}
.dock-corps.avec-ambiance .chat-form,
.dock-corps.avec-ambiance .dock-membres {
  background: rgba(11,13,22,.94);
  backdrop-filter: blur(3px);
}
[data-peau="parchemin-bois"] .dock-corps.avec-ambiance .chat-log {
  background: linear-gradient(180deg, rgba(244,236,220,.7) 0%, rgba(244,236,220,.9) 55%, rgba(244,236,220,.96) 100%);
}
[data-peau="parchemin-bois"] .dock-corps.avec-ambiance .chat-form,
[data-peau="parchemin-bois"] .dock-corps.avec-ambiance .dock-membres { background: rgba(244,236,220,.95); }
/* En plein écran (l'écran Salon de la console), le décor a la place de respirer. */
[data-embed="salon"] .dock-corps.avec-ambiance { background-position: center top; }

/* Déposer un fichier : la cible se signale pendant qu'on la survole. */
.depot-survol {
  outline: 2px dashed var(--or); outline-offset: -4px;
  background-color: rgba(217,181,106,.1) !important;
}
.photo-box.depot-survol::after { content: "Lâche l'image ici"; }

/* La case du portrait pendant l'envoi : on voit qu'il se passe quelque chose. */
.photo-box.envoi { opacity: .55; }
.photo-box.envoi::after {
  content: "envoi…"; position: absolute; inset: auto 0 .4rem 0; text-align: center;
  font-family: var(--display); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--or-2);
}

/* L'opposition : deux jets côte à côte, la marge tranche. */
.zone-opposition:empty { display: none; }
.zone-opposition { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.journal-entry.oppose { outline: 1px solid var(--or); outline-offset: -1px; background: rgba(217,181,106,.07); }
.verdict-opposition {
  flex: 1; min-width: 280px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border: 1px solid var(--or-3); border-radius: var(--rayon);
  background: linear-gradient(180deg, rgba(217,181,106,.08), transparent);
}
.oppo-camp { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.oppo-camp:last-child { text-align: right; }
.oppo-camp b { font-family: var(--display); font-size: .92rem; color: var(--texte); }
.oppo-camp span { font-size: .78rem; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oppo-camp em { font-style: normal; font-size: .8rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.oppo-camp.gagne b { color: var(--or-2); text-shadow: 0 0 12px var(--lueur); }
.oppo-camp.gagne em { color: var(--ok); }
.oppo-verdict {
  font-family: var(--display); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--or-2); text-align: center; padding: 0 .3rem;
}
.verdict-opposition.egalite .oppo-verdict { color: var(--texte-2); }

/* « Ouvre la carte, on t'attend » — l'avertissement du modèle hôte-autoritaire. */
.carte-alerte {
  margin-top: .3rem; font-size: .82rem; line-height: 1.35;
  color: var(--bad, #d98a6a); border-left: 2px solid currentColor; padding-left: .5rem;
}

/* Les références d'un Système, à cliquer plutôt qu'à taper. */
.palette-refs { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.jeton-ref {
  font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0;
  text-transform: none; padding: .12rem .4rem; border-radius: 3px;
  background: rgba(217,181,106,.08); color: var(--texte-2);
  border: 1px solid var(--or-3); cursor: pointer; clip-path: none; box-shadow: none;
}
.jeton-ref:hover { color: var(--or-2); border-color: var(--or); background: rgba(217,181,106,.16); }

/* --------------------------------------------------------------- matériel */
.equip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.equip-grid .card { margin-bottom: 0; }
/* Un tableau d'équipement a autant de colonnes que le MJ en a déclaré.
   Les champs se PARTAGENT la largeur de la carte au lieu de garder la taille
   par défaut d'un <input> (≈ 170 px chacun), qui poussait le tableau hors du
   cadre dès trois colonnes et obligeait à le faire défiler pour écrire. */
.block-body { display: flex; flex-direction: column; gap: .3rem; overflow-x: auto; }
.equip-table { table-layout: fixed; width: 100%; min-width: 0; }
.equip-table input, .equip-table textarea, .mini-table input {
  width: 100%; min-width: 0; box-sizing: border-box; padding: .2rem .35rem; font-size: .84rem;
}
.equip-table th, .equip-table td { overflow: hidden; }
/* la colonne du ✕ ne prend que sa place */
.equip-table th:last-child, .equip-table td:last-child { width: 2.1rem; padding-inline: .15rem; text-align: center; }
.equip-table td:last-child button { padding: .15rem .3rem; }
/* Un tableau de trois colonnes ou plus mérite deux cases de la grille : sinon
   chaque champ tombe sous les 60 px et plus rien n'est lisible. */
@media (min-width: 820px) { .equip-grid .bloc-large { grid-column: span 2; } }
.cols, .new-col, .add-col { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------- la boîte de jet & verdict */
.boite-jet { min-width: 340px; max-width: 460px; }
.boite-jet .desav { color: var(--bad); }
.faces { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: .6rem 0; }
/* Un dé : une pierre gravée, pas un carré gris. */
.face, .barre-face {
  width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--texte);
  border: 1px solid var(--or); border-radius: 6px;
  background: linear-gradient(160deg, var(--nuit-3), var(--nuit-1));
  box-shadow: 0 0 10px var(--lueur), inset 0 0 10px rgba(0,0,0,.6);
}
.face.crit, .face.reussite-critique {
  border-color: var(--crit); color: var(--crit);
  box-shadow: 0 0 24px rgba(245,215,110,.7), inset 0 0 14px rgba(245,215,110,.2);
}
.face.echec-critique { border-color: var(--bad); color: #ffb3b3; box-shadow: 0 0 22px rgba(216,74,74,.6), inset 0 0 12px rgba(216,74,74,.2); }
.resultat, .jet-result, .proba-resultat { text-align: center; }
.resultat .nom, .jet-result .nom {
  font-family: var(--display); font-size: 1.5rem; font-weight: 900; letter-spacing: .07em;
  color: var(--crit); text-shadow: 0 0 22px var(--lueur), 0 2px 0 rgba(0,0,0,.6);
}
.jet-result {
  border-left: 3px solid var(--or-3); padding: .35rem .6rem; margin: .3rem 0;
  background: rgba(0,0,0,.28); border-radius: 0 var(--rayon) var(--rayon) 0; text-align: left;
}
.jet-result.reussite, .jet-result.succes { border-left-color: var(--ok); }
.jet-result.echec { border-left-color: var(--bad); }
.jet-result.reussite-critique { border-left-color: var(--crit); box-shadow: 0 0 18px rgba(245,215,110,.25); }
.jet-result.echec-critique { border-left-color: var(--bad); box-shadow: 0 0 18px rgba(216,74,74,.25); }
.jet-result.annule, .annule { opacity: .5; text-decoration: line-through; }
.effets, .effets-appliques { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.effet {
  font-family: var(--display); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--or-3); border-radius: 999px; padding: .1rem .5rem; color: var(--texte-2);
}

/* ==========================================================================
   LE CONSTRUCTEUR DE SYSTÈME — un atelier : deux colonnes, l'établi à gauche,
   les probabilités qui répondent à droite.
   ========================================================================== */
.constructeur { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
.constructeur-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.constructeur-colonne { min-width: 0; }
.onglets, .mec-liste, .carte-onglets {
  display: flex; gap: .3rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--or-3); margin-bottom: 1rem; padding-bottom: .4rem;
}
.onglet, .mec-onglet, .module-btn {
  font-family: var(--display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: .4rem .85rem; cursor: pointer; color: var(--texte-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--rayon);
  clip-path: none; box-shadow: none;
}
.onglet:hover, .mec-onglet:hover, .module-btn:hover { color: var(--or-2); border-color: var(--or-3); box-shadow: none; }
.onglet.actif, .mec-onglet.actif, .mec-onglet.mecaniqueActive, .module-btn.actif {
  color: var(--nuit-1); background: linear-gradient(180deg, var(--or-2), var(--or));
  border-color: var(--or); box-shadow: 0 0 14px var(--lueur); font-weight: 700;
}
.modele, .mec-editeur { border: 1px solid var(--or-3); border-radius: var(--rayon); padding: .7rem .8rem; margin-bottom: .7rem; background: rgba(0,0,0,.25); }
.modele { cursor: pointer; }
.modele:hover { border-color: var(--or); box-shadow: 0 0 14px var(--lueur); }

/* Le panneau de probabilités : un oscilloscope collé à l'établi. */
.proba-panel {
  position: sticky; top: 4.2rem;
  border: 1px solid var(--or-3); border-radius: var(--rayon); padding: .9rem 1rem;
  background: var(--voile); box-shadow: inset 0 0 40px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.4);
}
.proba-reglages { display: grid; gap: .4rem; margin-bottom: .7rem; }
.proba-caracs { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.proba-succes {
  font-family: var(--display); font-weight: 900; font-size: 2.2rem; line-height: 1;
  color: var(--crit); text-align: center; text-shadow: 0 0 24px var(--lueur);
  margin: .3rem 0 .6rem;
}
.proba-barre { display: grid; grid-template-columns: 82px 1fr 46px; align-items: center; gap: .5rem; margin: .3rem 0; font-size: .78rem; }
.proba-barre .rail { height: 9px; border: 1px solid var(--or-3); background: rgba(0,0,0,.55); clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.proba-barre .rail i { display: block; height: 100%; background: linear-gradient(90deg, var(--or), var(--or-2)); box-shadow: 0 0 10px var(--lueur); }
.proba-barre .n { text-align: right; font-family: var(--display); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   LA CONSOLE DU MJ — cartes de personnages, demandes, tour de jeu,
   journal, séances, cartes.
   ========================================================================== */
.cartes-persos { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1rem; margin-top: .8rem; }
/* Chaque personnage est une carte à jouer, avec son ruban de nom. */
.carte-perso {
  position: relative; padding: 1rem .8rem .8rem; text-align: center;
  border: 1px solid var(--or-3); border-radius: var(--rayon);
  background: linear-gradient(180deg, var(--nuit-3), var(--nuit-1));
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 10px 24px rgba(0,0,0,.5);
}
.carte-perso.pnj { border-style: dashed; }
.carte-tete { margin-bottom: .5rem; }
.carte-tete .nom, .carte-perso .ruban {
  display: inline-block; max-width: 100%;
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nuit-1);
  background: linear-gradient(180deg, var(--or-2), var(--or));
  padding: .28rem .7rem;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}
.carte-sous, .carte-perso .role { font-family: var(--lettre); font-style: italic; font-size: .92rem; color: var(--texte-2); }
.carte-caracs, .carte-derives {
  display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .5rem;
  margin-top: .55rem; font-size: .72rem; text-align: left;
}
.carte-caracs span, .carte-derives span {
  display: flex; justify-content: space-between; align-items: baseline; gap: .3rem;
  border-bottom: 1px dotted rgba(217,181,106,.22); color: var(--texte-2); min-width: 0;
}
.carte-caracs span { flex-direction: row-reverse; }
.carte-caracs b, .carte-derives b { font-family: var(--display); font-size: .9rem; color: var(--or-2); }
/* Une jauge de carte tient sur UNE ligne : nom · rail · valeur · boutons.
   Le rail ne s'affiche que s'il y a un maximum — sinon la ligne garde sa place
   sans dessiner une barre vide qui ne veut rien dire. */
.carte-jauges { margin-top: .6rem; display: grid; gap: .3rem; }
.jauge-ligne {
  display: grid; grid-template-columns: minmax(48px, auto) 1fr auto auto;
  gap: .4rem; align-items: center; font-size: .74rem; text-align: left;
}
.jauge-ligne .etq { font-family: var(--display); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); white-space: nowrap; }
.jauge-ligne .valeur { font-family: var(--display); font-size: .82rem; color: var(--or-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte-jauges .rail {
  height: 7px; border: 1px solid var(--or-3); background: rgba(0,0,0,.6); border-radius: 1px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.carte-jauges .rail.vide { visibility: hidden; }
.carte-jauges .rail i { display: block; height: 100%; background: linear-gradient(90deg, var(--hp), color-mix(in srgb, var(--hp) 55%, white)); box-shadow: 0 0 8px var(--hp); transition: width .25s; }
.jauge-ligne:nth-child(2) .rail i { background: linear-gradient(90deg, var(--mana), color-mix(in srgb, var(--mana) 55%, white)); box-shadow: 0 0 8px var(--mana); }
.jauge-ligne:nth-child(3) .rail i { background: linear-gradient(90deg, var(--endu), color-mix(in srgb, var(--endu) 55%, white)); box-shadow: 0 0 8px var(--endu); }
.jauge-ligne:nth-child(n+4) .rail i { background: linear-gradient(90deg, var(--chance), color-mix(in srgb, var(--chance) 55%, white)); box-shadow: 0 0 8px var(--chance); }
.boutons-jauge { display: flex; gap: .2rem; }
.boutons-jauge button { min-width: 19px; height: 19px; font-size: .72rem; }
.carte-etats { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; margin-top: .5rem; }
/* Un état posé sur une carte est une étiquette, pas une pastille de couleur. */
.carte-etats .etat-pastille {
  width: auto; height: auto; border-radius: 999px; background: rgba(216,74,74,.18);
  border: 1px solid var(--bad); color: #ffc0c0; padding: .06rem .5rem;
  font-family: var(--display); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
}
.carte-actions { display: flex; gap: .3rem; justify-content: center; margin-top: .6rem; flex-wrap: wrap; }
.carte-corps { text-align: left; }
.menu-flottant {
  position: absolute; z-index: 50; min-width: 190px;
  background: var(--nuit-2); border: 1px solid var(--or); border-radius: var(--rayon);
  box-shadow: 0 14px 34px rgba(0,0,0,.65), 0 0 18px var(--lueur); padding: .3rem;
}
.menu-flottant button { display: block; width: 100%; text-align: left; clip-path: none; border: 0; background: transparent; box-shadow: none; color: var(--texte); letter-spacing: .08em; }
.menu-flottant button:hover { background: rgba(255,255,255,.07); color: var(--or-2); box-shadow: none; }

/* demandes de jet : une consigne posée sur la table */
.demande {
  border: 1px solid var(--or-3); border-left: 3px solid var(--or); border-radius: var(--rayon);
  padding: .55rem .7rem; margin-bottom: .45rem; background: rgba(0,0,0,.3);
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
}
.demande.resolue { opacity: .45; border-left-color: var(--ok); }
.demande-corps { flex: 1; min-width: 180px; }
.demande-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.demande-message { font-family: var(--lettre); font-style: italic; font-size: 1rem; color: var(--texte); }

/* tour de jeu */
.ini-tete { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ini-ordre { display: flex; flex-direction: column; gap: .25rem; }
.ini-ordre { list-style: none; padding: 0; margin: 0; }
.ini-ordre > div, .ini-ordre > li {
  display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .6rem;
  padding: .35rem .6rem; border: 1px solid var(--or-3); border-radius: var(--rayon);
  background: rgba(0,0,0,.25);
}
.ini-ordre > div.actif, .ini-ordre > li.actif {
  border-color: var(--or); background: linear-gradient(90deg, rgba(240,213,151,.16), transparent);
  box-shadow: 0 0 16px var(--lueur);
}
.ini-ordre > li { grid-template-columns: 2.2rem 1fr auto auto auto; }
.ini-ordre > li.pnj .nom { font-style: italic; }
.ini-participants { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; }
.ini-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin: 0; padding: .4rem .6rem; border: 1px solid var(--or-3); border-radius: var(--rayon); }
.ini-groupe legend { padding: 0 .3rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--or-2); }
.ini-case { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.ini-ordre .score { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--or-2); text-align: center; }

/* journal */
.journal { max-height: 340px; overflow-y: auto; padding-right: .3rem; }
.journal-entry {
  display: flex; gap: .6rem; align-items: baseline; justify-content: space-between;
  padding: .3rem .1rem; border-bottom: 1px dotted rgba(217,181,106,.14); font-size: .85rem;
}
.journal-texte { flex: 1; min-width: 0; }
.journal-actions { display: flex; gap: .25rem; flex: none; }
.flash { animation: flash-or .9s ease; }
@keyframes flash-or { from { background: rgba(240,213,151,.22); } to { background: transparent; } }

/* séances & comptes rendus */
.seance-ligne { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.seance-etat {
  font-family: var(--display); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  padding: .18rem .6rem; border: 1px solid var(--or-3); border-radius: 999px;
  color: var(--texte-2); background: rgba(0,0,0,.3);
}
.seance-etat.ouverte { border-color: var(--ok); color: var(--nuit-1); background: var(--ok); box-shadow: 0 0 12px rgba(98,176,106,.5); font-weight: 700; }
.seance-titre { font-family: var(--lettre); font-style: italic; font-size: 1.1rem; color: var(--or-2); }
.seance-historique { margin-top: .7rem; display: flex; flex-direction: column; gap: .35rem; }
.seance-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .4rem .6rem; border: 1px solid var(--or-3); border-radius: var(--rayon); background: rgba(0,0,0,.25);
}
.seance-num { font-family: var(--display); font-weight: 900; font-size: 1.25rem; color: var(--or); min-width: 1.6rem; text-align: center; text-shadow: 0 0 12px var(--lueur); }
.seance-corps { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.seance-corps small { color: var(--texte-2); }

/* liste des cartes de scène */
.carte-item {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  padding: .45rem .65rem; margin-bottom: .35rem;
  border: 1px solid var(--or-3); border-radius: var(--rayon); background: rgba(0,0,0,.25);
}
.carte-item.active { border-color: var(--or); background: linear-gradient(90deg, rgba(240,213,151,.12), transparent); box-shadow: 0 0 14px var(--lueur); }
.carte-item-corps { flex: 1; min-width: 160px; }

/* accueil & corbeille */
.corbeille { border-style: dashed; }
.btn-new-table, .btn-del-perso, .btn-del-systeme { flex: none; }

/* ==========================================================================
   MODALES, TOASTS
   ========================================================================== */
.modal-overlay, .modal-fond {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 1rem; background: rgba(5, 6, 12, .72); backdrop-filter: blur(3px);
  overflow-y: auto;
}
.modal-overlay > .card, .modal-fond > .modal, .modal {
  max-width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; margin: 0;
  background: var(--nuit-2); border: 1px solid var(--or);
  box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 30px var(--lueur);
  border-radius: var(--rayon); padding: 1.1rem 1.2rem;
}
.modal h3 { margin-top: 0; }
.toast {
  position: fixed; left: 50%; bottom: 1.6rem; transform: translate(-50%, 1.4rem); z-index: 120;
  padding: .6rem 1.1rem; border-radius: var(--rayon);
  font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--nuit-2); color: var(--texte); border: 1px solid var(--bad);
  box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 18px rgba(216,74,74,.35);
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { border-color: var(--ok); box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 18px rgba(98,176,106,.35); }

/* ------------------------------------------ ce que la passe avait laissé nu */
/* L'indicateur d'enregistrement : il doit se voir sans crier. */
.save-status {
  font-family: var(--display); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texte-2); transition: color .2s;
}
.save-status.ok { color: var(--ok); }
.save-status.err { color: var(--bad); }
.save-status.en-cours { color: var(--or); }

/* La création guidée : une ligne par caractéristique, le chiffre au milieu. */
.creation .aide { margin-bottom: .8rem; }
.creation-ligne {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: .5rem;
  align-items: center; padding: .35rem .1rem;
  border-bottom: 1px dotted rgba(217,181,106,.16);
}
.creation-ligne .etq { font-family: var(--display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-2); }
.creation-ligne .valeur { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--or-2); min-width: 2ch; text-align: center; text-shadow: 0 0 12px var(--lueur); }
.creation-ligne select { min-width: 5rem; }

/* Constructeur : un champ nommé, une sous-carte, une liste de mécaniques. */
.champ { margin-bottom: .6rem; }
.champ > input, .champ > select, .champ > textarea { width: 100%; }
.sous-carte {
  border: 1px solid var(--or-3); border-left: 3px solid var(--or); border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: .7rem .8rem; margin: .7rem 0; background: rgba(0,0,0,.22);
}
.sous-carte h4 { margin-top: 0; color: var(--or-2); }
.mecaniques { display: flex; flex-direction: column; gap: .5rem; }
.reglages { display: grid; gap: .5rem; }
.erreurs {
  border: 1px solid var(--bad); border-radius: var(--rayon); padding: .5rem .7rem; margin: .6rem 0;
  background: rgba(216,74,74,.1); color: #ffc0c0; font-size: .85rem;
}
/* Un conteneur d'erreurs vide ne doit pas dessiner un cadre rouge dans le vide. */
.erreurs:empty, .effets:empty, .suggestions:empty, .carte-etats:empty { display: none; }
.erreurs ul { margin: .2rem 0 0; padding-left: 1.1rem; }

/* Un degré de résultat : sa clé, son libellé, puis ses effets automatiques. */
.resultat {
  display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: .4rem .6rem;
  align-items: center; padding: .4rem 0; text-align: left;
  border-bottom: 1px dotted rgba(217,181,106,.16);
}
.resultat > .etq {
  font-family: ui-monospace, Menlo, monospace; font-size: .76rem; letter-spacing: 0;
  color: var(--texte-2); text-transform: none;
}
.resultat > input { min-width: 0; }
.resultat .effets { grid-column: 2; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.resultat .effet {
  display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .35rem;
  border-radius: var(--rayon); text-transform: none; letter-spacing: 0; font-family: var(--body);
}
.resultat .effet select, .resultat .effet input { padding: .15rem .3rem; font-size: .78rem; }
.ajout.empile { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; }
.sac-list-item { gap: .4rem; }
/* Les trois rangs de compétence : même losange, densité croissante — le rang
   se lit à l'éclat, pas à une couleur arbitraire. */
.skill-cell.lvl1.filled { background: linear-gradient(135deg, var(--or), var(--or-3)); }
.skill-cell.lvl2.filled { background: linear-gradient(135deg, var(--or-2), var(--or)); }
.skill-cell.lvl3.filled { background: linear-gradient(135deg, #fff, var(--or-2)); box-shadow: 0 0 14px var(--lueur); }
.skill-cell.lvl4.filled { background: linear-gradient(135deg, #fff, var(--or-2) 70%, var(--or)); box-shadow: 0 0 18px var(--lueur), 0 0 4px #fff; }
.skill-cell.lvl5.filled, .skill-cell.lvl6.filled, .skill-cell.lvl7.filled, .skill-cell.lvl8.filled, .skill-cell.lvl9.filled {
  background: radial-gradient(circle at 35% 35%, #fff, var(--or-2) 55%, var(--or)); box-shadow: 0 0 22px var(--or-2), 0 0 6px #fff; border-color: #fff;
}
.survol { outline: 1px solid var(--or); }

/* ==========================================================================
   LE DOCK — chat et vocal, ancrés en bas de l'écran.
   ========================================================================== */
.dock {
  position: fixed; right: 1rem; bottom: 0; z-index: 60;
  width: min(430px, calc(100vw - 2rem));
  display: flex; flex-direction: column; font-size: .86rem;
  background: var(--voile); border: 1px solid var(--or-3); border-bottom: 0;
  border-radius: var(--rayon) var(--rayon) 0 0;
  box-shadow: 0 -6px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
}
.dock-barre {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .4rem; align-items: center;
  padding: .35rem .5rem; border-bottom: 1px solid var(--or-3);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}
.dock-barre .dock-titre, .dock-barre .dock-label { grid-row: 1; }
.dock-onglets, .dock-vocal { grid-column: 1 / -1; }
.dock-titre { background: transparent; border: 0; box-shadow: none; clip-path: none; color: var(--or-2); padding: 0 .2rem; font-size: .8rem; }
.dock-label { font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--or-2); cursor: pointer; }
.dock-onglets { display: flex; gap: .25rem; overflow-x: auto; }
.dock-onglet {
  font-family: var(--display); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(0,0,0,.35); border: 1px solid var(--or-3); border-radius: var(--rayon);
  color: var(--texte-2); padding: .2rem .55rem; white-space: nowrap; clip-path: none; box-shadow: none;
}
.dock-onglet:hover { color: var(--or-2); border-color: var(--or); box-shadow: none; }
.dock-onglet.actif { background: linear-gradient(180deg, var(--or-2), var(--or)); color: var(--nuit-1); border-color: var(--or); font-weight: 700; box-shadow: 0 0 12px var(--lueur); }
.dock-onglet .badge, .dock-label .badge { margin-left: .25rem; padding: 0 .3rem; font-size: 8.5px; }
.dock-corps { display: none; flex-direction: column; min-height: 0; }
.dock.ouvert .dock-corps { display: flex; }
.dock-membres { padding: .35rem .7rem; font-size: .74rem; color: var(--texte-2); border-bottom: 1px solid rgba(217,181,106,.16); }
.dock-regle { color: var(--or); font-style: italic; }

.dock-vocal { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.vocal-principal { padding: .22rem .6rem; font-size: 9.5px; letter-spacing: .14em; clip-path: none; }
.vocal-principal.dedans { background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 70%, black)); color: #fff; border-color: var(--ok); box-shadow: 0 0 14px rgba(98,176,106,.5); }
.vocal-muet { padding: .1rem .38rem; min-width: 0; height: auto; clip-path: none; font-size: .8rem; }
.vocal-muet.actif { border-color: var(--bad); color: #ffb3b3; box-shadow: 0 0 12px rgba(216,74,74,.4); }
.vocal-option { display: inline-flex; align-items: center; gap: .25rem; margin: 0; font-size: 9.5px; letter-spacing: .1em; color: var(--texte-2); }
.vocal-gens { display: inline-flex; gap: .2rem; }
.vocal-gen {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 8.5px; font-weight: 700; color: var(--nuit-1);
  background: var(--ok); box-shadow: 0 0 10px rgba(98,176,106,.55);
}
.vocal-gen.muet { background: rgba(255,255,255,.2); color: var(--texte-2); box-shadow: none; }
.dock-vocal .muted { font-size: .7rem; }

.chat-log {
  height: 42vh; min-height: 200px; overflow-y: auto;
  padding: .55rem .7rem; display: flex; flex-direction: column; gap: .35rem;
  background: rgba(0,0,0,.25);
}
.msg { display: flex; flex-direction: column; gap: .12rem; }
.msg.same { margin-top: -.2rem; }
.msg-tete { display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--texte-2); }
.msg-tete b { font-family: var(--display); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--or-2); }
.msg-tete time { margin-left: auto; opacity: .6; font-size: .68rem; }
.msg-portrait { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--or-3); }
.msg-pastille {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: .6rem; font-weight: 700;
  background: var(--nuit-3); color: var(--or-2); border: 1px solid var(--or-3);
}
.msg-joueur { font-style: italic; opacity: .65; }
.msg-corps { padding-left: 1.65rem; }
.msg-texte { white-space: pre-wrap; word-break: break-word; }
.msg-cite {
  border-left: 2px solid var(--or); padding: .08rem .45rem; margin-bottom: .2rem;
  background: rgba(240,213,151,.1); font-size: .76rem; border-radius: 0 var(--rayon) var(--rayon) 0;
}
/* Trois voix, trois traitements : le personnage parle en italique, le MJ
   narre en lettres, le joueur parle en clair. */
.msg.voix-jeu .msg-texte { font-family: var(--lettre); font-style: italic; font-size: 1.02rem; color: var(--texte); }
.msg.voix-narration .msg-corps {
  margin-left: 1.65rem; padding: .35rem .6rem; border-left: 2px solid var(--or);
  background: rgba(240,213,151,.07); border-radius: 0 var(--rayon) var(--rayon) 0;
}
.msg.voix-narration .msg-texte { font-family: var(--lettre); font-size: 1.05rem; color: var(--or-2); }
.msg-media { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .25rem; }
.msg-media img, .msg-media video { max-width: 128px; max-height: 128px; border-radius: var(--rayon); border: 1px solid var(--or-3); }
.msg-jet {
  display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; margin-top: .25rem;
  padding: .25rem .5rem; font-size: .76rem;
  border: 1px solid var(--or-3); border-left: 3px solid var(--or);
  background: rgba(0,0,0,.35); border-radius: 0 var(--rayon) var(--rayon) 0;
}
.msg-jet.ok { border-left-color: var(--ok); }
.msg-jet.ko { border-left-color: var(--bad); }
.msg-jet-titre { font-family: var(--display); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--or-2); }
.msg-jet-titre em { font-style: normal; font-weight: 400; opacity: .65; color: var(--texte-2); }
.msg-jet-des { font-family: ui-monospace, Menlo, monospace; color: var(--texte); }
.msg-jet-verdict { color: var(--texte-2); }
.msg-reactions { display: flex; gap: .2rem; flex-wrap: wrap; margin-top: .15rem; }
.reaction { padding: 0 .35rem; font-size: .72rem; letter-spacing: 0; clip-path: none; border-radius: 999px; box-shadow: none; background: rgba(0,0,0,.35); color: var(--texte); }
.reaction:hover { border-color: var(--or); box-shadow: 0 0 10px var(--lueur); }
.reaction.mienne { border-color: var(--or); background: rgba(240,213,151,.18); }
.msg-outils { display: none; gap: .15rem; margin-top: .12rem; }
.msg:hover .msg-outils { display: flex; align-items: center; flex-wrap: wrap; }
.msg-outils button { padding: 0 .28rem; min-width: 0; height: 19px; font-size: .68rem; letter-spacing: 0; clip-path: none; background: transparent; border-color: var(--or-3); box-shadow: none; color: var(--texte-2); }
.msg-outils button:hover { color: var(--or-2); border-color: var(--or); box-shadow: none; }
.msg-emojis { display: inline-flex; gap: .1rem; }

.chat-citation, .chat-apercus { padding: .3rem .7rem; border-top: 1px solid rgba(217,181,106,.16); }
.chat-citation { display: flex; align-items: center; gap: .4rem; font-size: .74rem; background: rgba(240,213,151,.08); }
.chat-citation button { margin-left: auto; background: transparent; border: 0; box-shadow: none; clip-path: none; padding: 0 .3rem; color: var(--texte-2); }
.chat-apercus { display: flex; gap: .3rem; flex-wrap: wrap; }
.chat-apercus figure { margin: 0; position: relative; }
.chat-apercus img, .chat-apercus video { width: 52px; height: 52px; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--or-3); }
.chat-apercus button {
  position: absolute; top: -6px; right: -6px; width: 17px; height: 17px; min-width: 0; padding: 0;
  border-radius: 50%; clip-path: none; font-size: .6rem; background: var(--bad); color: #fff; border-color: var(--bad); box-shadow: none;
}
.chat-form { border-top: 1px solid var(--or-3); padding: .4rem .6rem .6rem; }
.chat-voix { display: flex; gap: .25rem; align-items: center; margin-bottom: .3rem; flex-wrap: wrap; }
.chat-voix .voix {
  font-family: var(--display); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  padding: .12rem .55rem; border-radius: 999px; clip-path: none; box-shadow: none;
  background: rgba(0,0,0,.35); color: var(--texte-2); border: 1px solid var(--or-3);
}
.chat-voix .voix:hover { color: var(--or-2); border-color: var(--or); box-shadow: none; }
.chat-voix .voix.actif { background: linear-gradient(180deg, var(--or-2), var(--or)); color: var(--nuit-1); border-color: var(--or); font-weight: 700; }
.voix-perso { font-size: .72rem; padding: .1rem .3rem; }
.chat-ligne { display: flex; gap: .35rem; align-items: flex-end; }
.chat-ligne textarea { flex: 1; resize: none; font-family: var(--body); font-size: .88rem; padding: .35rem .5rem; }
.chat-attache { cursor: pointer; font-size: 1.05rem; margin: 0; padding: 0 .15rem; color: var(--or-2); text-transform: none; letter-spacing: 0; }
.chat-ligne button { padding: .35rem .7rem; font-size: 9.5px; }
.choix-membres { display: flex; flex-direction: column; gap: .3rem; margin: .6rem 0; }
.choix-membres label { display: flex; align-items: center; gap: .45rem; font-family: var(--body); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--texte); margin: 0; }

/* ==========================================================================
   LA CARTE — l'écran de scène. Il était déjà sombre : il passe aux jetons,
   donc il suit la peau du Système comme le reste.
   ========================================================================== */
.carte-ecran {
  display: grid; grid-template-columns: 68px 0 1fr 304px; grid-template-rows: auto 1fr;
  grid-template-areas: "entete entete entete entete" "outils biblio scene panneau";
  height: calc(100vh - 49px); min-height: 480px; background: var(--nuit-1); color: var(--texte);
}
/* La bibliothèque n'occupe sa colonne que quand un outil de terrain est pris. */
.carte-ecran.avec-biblio { grid-template-columns: 68px 292px 1fr 304px; }
.carte-ecran.sans-panneau { grid-template-columns: 68px 0 1fr 0; }
.carte-ecran.sans-panneau.avec-biblio { grid-template-columns: 68px 292px 1fr 0; }
.carte-ecran.sans-panneau .carte-panneau { display: none; }
.carte-entete {
  grid-area: entete; display: flex; align-items: center; gap: .7rem;
  padding: .4rem .9rem; border-bottom: 1px solid var(--or-3);
  background: linear-gradient(180deg, var(--voile), rgba(0,0,0,.5));
}
.carte-entete b { font-family: var(--display); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or-2); }
.carte-hud { margin-left: auto; font-family: var(--display); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.carte-hud.alerte { color: var(--alerte); font-weight: 700; text-shadow: 0 0 12px var(--lueur); }
.carte-outils {
  grid-area: outils; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .3rem 0; overflow-y: auto;
  background: linear-gradient(180deg, var(--voile), rgba(0,0,0,.45)); border-right: 1px solid var(--or-3);
}
/* Un outil porte son nom : une icône seule, à 40 px, ne se lit pas. */
.carte-outil {
  width: 58px; min-height: 42px; padding: .2rem 0 .15rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  clip-path: none; border-radius: var(--rayon); border-color: var(--or-3); color: var(--texte-2);
  background: rgba(0,0,0,.35); box-shadow: inset 0 0 10px rgba(0,0,0,.5); letter-spacing: 0;
  text-transform: none;
}
.carte-outil .oi { font-size: 1.05rem; line-height: 1; }
.carte-outil .ol { font-size: 7.5px; letter-spacing: .04em; opacity: .85; line-height: 1.1; max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-outil:hover { color: var(--or-2); border-color: var(--or); box-shadow: 0 0 14px var(--lueur); }
.carte-outil.actif { background: linear-gradient(180deg, var(--or-2), var(--or)); color: var(--nuit-1); border-color: var(--or); box-shadow: 0 0 16px var(--lueur); }
/* ------------------------------------------------------- la bibliothèque
   L'ancienne palette tenait dans la colonne d'outils : trente-six pastilles de
   18 px sans nom, illisibles. Elle a sa propre colonne, avec le dessin réel de
   chaque objet, son nom et ce qu'il fait au jeu. */
.carte-biblio {
  grid-area: biblio; display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(180deg, var(--voile), rgba(0,0,0,.4));
  border-right: 1px solid var(--or-3);
}
.biblio-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .55rem .7rem .4rem; border-bottom: 1px solid var(--or-3);
  font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--or-2);
}
.biblio-tete small { letter-spacing: .1em; color: var(--texte-2); font-size: 8.5px; }
#biblio-recherche {
  margin: .45rem .6rem .35rem; width: calc(100% - 1.2rem); padding: .35rem .5rem; font-size: .85rem;
  box-sizing: border-box;
}
/* le mode : pinceau, rectangle, pot — un sélecteur segmenté en tête */
.biblio-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: .5rem .6rem 0; }
.biblio-modes button {
  display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .35rem .2rem;
  font-family: var(--display); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2);
  background: rgba(0,0,0,.35); border: 1px solid var(--or-3); border-radius: var(--rayon); clip-path: none; box-shadow: none;
}
.biblio-modes button span { font-size: .95rem; line-height: 1; }
.biblio-modes button:hover { color: var(--or-2); border-color: var(--or); }
.biblio-modes button.actif { background: linear-gradient(180deg, var(--or-2), var(--or)); color: var(--nuit-1); border-color: var(--or); box-shadow: 0 0 12px var(--lueur); }
/* la largeur du pinceau */
.biblio-tailles { display: flex; align-items: center; gap: 4px; padding: .35rem .6rem 0; }
.biblio-tailles > span, .biblio-tailles > small { font-family: var(--display); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.biblio-tailles > span { margin-right: .25rem; }
.biblio-tailles > small { margin-left: auto; letter-spacing: .08em; }
.biblio-tailles button {
  width: 30px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); border: 1px solid var(--or-3); border-radius: var(--rayon); clip-path: none; box-shadow: none;
}
.biblio-tailles button i { display: block; border-radius: 50%; background: var(--texte-2); }
.biblio-tailles button:hover { border-color: var(--or); }
.biblio-tailles button.actif { border-color: var(--or); background: rgba(217,181,106,.18); }
.biblio-tailles button.actif i { background: var(--or-2); }
/* le rail des familles : un clic, une famille */
.biblio-rail { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 .6rem .45rem; border-bottom: 1px solid var(--or-3); }
.biblio-rail button {
  flex: 1 1 calc(20% - 3px); min-width: 48px; max-width: calc(20% - 3px); display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .3rem .05rem .25rem; background: rgba(0,0,0,.3); border: 1px solid transparent; border-radius: var(--rayon);
  clip-path: none; box-shadow: none; letter-spacing: 0; text-transform: none; color: var(--texte-2);
}
.biblio-rail button span { font-size: 1rem; line-height: 1; }
.biblio-rail button small { font-family: var(--display); font-size: 7px; letter-spacing: .04em; text-transform: uppercase; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biblio-rail button:hover { border-color: var(--or-3); color: var(--or-2); }
.biblio-rail button.actif { background: rgba(217,181,106,.16); border-color: var(--or); color: var(--or-2); }
/* la grille de vignettes */
.biblio-grille { flex: 1; min-height: 0; overflow-y: auto; padding: .2rem .5rem .6rem; }
.biblio-famille {
  font-family: var(--display); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-2); padding: .55rem .2rem .3rem; position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, var(--nuit-2) 70%, transparent);
}
.biblio-famille em { font-style: normal; opacity: .6; margin-left: .3rem; }
.biblio-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.biblio-case {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
  padding: .35rem .2rem .3rem; background: rgba(0,0,0,.25); border: 1px solid transparent; border-radius: var(--rayon);
  clip-path: none; box-shadow: none; letter-spacing: 0; text-transform: none; cursor: pointer;
}
.biblio-case span {
  font-family: var(--corps, system-ui); font-size: .72rem; line-height: 1.15; text-align: center; color: var(--texte);
  max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.biblio-case:hover { border-color: var(--or-3); background: rgba(255,255,255,.05); }
.biblio-case.actif { border-color: var(--or); background: rgba(217,181,106,.14); box-shadow: 0 0 12px var(--lueur); }
.biblio-case.actif span { color: var(--or-2); }
.biblio-vignette { flex: 0 0 auto; border-radius: 3px; }
.biblio-etoile {
  position: absolute; top: 1px; right: 2px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: .72rem; line-height: 1; color: var(--texte-2); text-shadow: 0 0 4px #000; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.biblio-case:hover .biblio-etoile, .biblio-etoile.actif { opacity: 1; }
.biblio-etoile.actif, .biblio-etoile:hover { color: var(--or-2); }
.biblio-vide { padding: .8rem .4rem; font-size: .8rem; }
/* combien de versions d'un même objet — un chiffre discret, en bas de case */
.biblio-versions {
  position: absolute; bottom: 2px; left: 3px; min-width: 13px; height: 13px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 8px; font-weight: 700; line-height: 1;
  color: var(--nuit-1); background: var(--or-3); border-radius: 7px;
}
.biblio-case:hover .biblio-versions, .biblio-case.actif .biblio-versions { background: var(--or-2); }
/* les versions, en grand, sous le terrain en main */
.biblio-versions-bande { padding: .4rem .6rem .55rem; border-top: 1px solid var(--or-3); background: rgba(0,0,0,.28); }
.biblio-versions-bande > span {
  display: block; margin-bottom: .3rem;
  font-family: var(--display); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-2);
}
.biblio-versions-rang { display: flex; flex-wrap: wrap; gap: 4px; }
.biblio-version {
  padding: 2px; background: rgba(0,0,0,.3); border: 1px solid transparent; border-radius: var(--rayon);
  clip-path: none; box-shadow: none; line-height: 0;
}
.biblio-version:hover { border-color: var(--or-3); }
.biblio-version.actif { border-color: var(--or); box-shadow: 0 0 10px var(--lueur); }
/* ce qui est sous le pinceau */
.biblio-detail { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-top: 1px solid var(--or-3); background: rgba(0,0,0,.35); }
.biblio-detail-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.biblio-detail-texte b { font-family: var(--corps, system-ui); font-size: .9rem; font-weight: 600; color: var(--or-2); letter-spacing: 0; text-transform: none; }
.biblio-detail-texte small { font-size: .7rem; color: var(--texte-2); line-height: 1.25; }
.biblio-fav { width: 30px; height: 30px; flex: 0 0 auto; padding: 0; font-size: 1rem; line-height: 1; background: transparent; border: 1px solid var(--or-3); border-radius: 50%; clip-path: none; box-shadow: none; color: var(--texte-2); }
.biblio-fav:hover, .biblio-fav.actif { color: var(--or-2); border-color: var(--or); }

.carte-scene { grid-area: scene; position: relative; overflow: hidden; background: var(--nuit-1); touch-action: none; }
.carte-scene canvas { display: block; }
.carte-panneau {
  grid-area: panneau; display: flex; flex-direction: column; min-height: 0;
  background: var(--voile); border-left: 1px solid var(--or-3);
}
.carte-onglets { margin: 0; padding: 0; border-bottom: 1px solid var(--or-3); }
.carte-onglets button { flex: 1; border-radius: 0; clip-path: none; background: transparent; border: 0; border-bottom: 2px solid transparent; box-shadow: none; color: var(--texte-2); font-size: 9.5px; padding: .5rem .3rem; }
.carte-onglets button.actif { color: var(--or-2); border-bottom-color: var(--or); background: rgba(240,213,151,.07); }
.carte-corps { padding: .6rem .7rem; overflow-y: auto; font-size: .85rem; flex: 1; }
.carte-bloc { border: 1px solid var(--or-3); border-radius: var(--rayon); padding: .55rem .65rem; margin-bottom: .6rem; background: rgba(0,0,0,.28); }
.carte-bloc h4 { margin: 0 0 .35rem; }
.carte-bloc .row { margin-bottom: .3rem; }
.carte-bloc input[type=number] { width: 4.6rem; }
.carte-upload .bouton { display: inline-block; cursor: pointer; }
.carte-pion { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem; border-radius: var(--rayon); cursor: pointer; border: 1px solid transparent; }
.carte-pion:hover { background: rgba(255,255,255,.05); }
.carte-pion.actif { border-color: var(--or); background: rgba(240,213,151,.12); box-shadow: 0 0 14px var(--lueur); }
.carte-pion-pastille {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .78rem; overflow: hidden; flex: none;
  background: var(--nuit-3); color: var(--texte);
}
.carte-pion-pastille img { width: 100%; height: 100%; object-fit: cover; }
.carte-pion-corps { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.carte-pion-corps small { color: var(--texte-2); }
.carte-pion-actions { display: flex; gap: .2rem; }
.carte-ligne { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; }
.carte-ligne i { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.carte-ligne span { flex: 1; cursor: pointer; min-width: 0; }
.carte-ligne small { color: var(--texte-2); }
.carte-journal { font-size: .8rem; padding: .15rem 0; border-bottom: 1px dotted rgba(217,181,106,.14); }
.carte-journal time { font-family: ui-monospace, Menlo, monospace; color: var(--texte-2); margin-right: .3rem; }
.carte-journal.prive { opacity: .65; font-style: italic; }

/* ==========================================================================
   LE COMPTE RENDU DE SÉANCE — un document, pas un écran : il se lit
   par-dessus la table, et il s'imprime tel quel.
   ========================================================================== */
.digest-overlay { position: fixed; inset: 0; z-index: 80; overflow-y: auto; padding: 1.4rem 1rem 4rem; background: rgba(5, 6, 12, .78); backdrop-filter: blur(4px); }
.digest-barre { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; gap: .4rem; max-width: 860px; margin: 0 auto .6rem; }
/* Le compte rendu est du papier : sur toutes les peaux, c'est un document
   d'archive qu'on relit et qu'on imprime, pas une interface. */
.digest {
  max-width: 860px; margin: 0 auto; padding: 2.2rem 2.4rem 2.4rem;
  color: var(--parch-encre); font-size: .95rem; line-height: 1.55;
  background:
    radial-gradient(circle at 12% 6%, rgba(255,255,255,.5), transparent 38%),
    radial-gradient(circle at 88% 94%, rgba(120,90,40,.16), transparent 42%),
    linear-gradient(160deg, var(--parch), var(--parch-2));
  border-radius: 2px; box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.digest .eyebrow { font-family: var(--display); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #8a6a32; font-weight: 700; }
.digest h1 { margin: .25rem 0 .35rem; font-size: 1.85rem; color: #2e2013; text-shadow: none; letter-spacing: .04em; }
.digest h2 {
  display: flex; align-items: center; gap: .7rem;
  font-size: 1rem; margin: 1.7rem 0 .55rem; padding-bottom: .2rem;
  color: #4a341c; border-bottom: 2px solid #8a6a32;
}
.digest h3 { font-size: .82rem; margin: .8rem 0 .3rem; color: #6b4d29; }
.digest h4 { margin: .5rem 0 .2rem; color: #7a6244; }
.digest p, .digest .aide { color: #5b452c; }
.digest .muted { color: #7a6244; }
.digest-tete { border-bottom: 1px solid rgba(90,60,20,.25); padding-bottom: .8rem; }
.digest-gens { padding-left: 1.1rem; margin: 0; }
.digest-gens .pill { color: #4a341c; border-color: #a8834a; background: rgba(255,255,255,.4); }
.digest-chrono, .digest-chuchote { display: flex; flex-direction: column; gap: .25rem; }
.digest-msg, .digest-jet { display: grid; grid-template-columns: 3rem 1fr; gap: .5rem; align-items: baseline; }
.digest-msg time, .digest-jet time { font-family: ui-monospace, Menlo, monospace; font-size: .76rem; color: #96795a; }
.digest-msg b { color: #2e2013; }
.digest-msg.voix-narration span { font-family: var(--lettre); font-style: italic; color: #4a341c; }
.digest-msg.voix-jeu span { font-style: italic; }
.digest-jet span { background: rgba(138,106,50,.12); border-left: 3px solid #8a6a32; padding: .15rem .5rem; border-radius: 0 3px 3px 0; }
.digest-jet.ok span { border-left-color: #3f7a44; }
.digest-jet.ko span { border-left-color: #a8392f; }
.digest-jet.annule span { opacity: .55; text-decoration: line-through; }
.digest-chuchote { margin-top: .6rem; padding: .6rem .85rem; border: 1px dashed #8a6a32; border-radius: 3px; background: rgba(255,255,255,.3); }
.digest-chuchote.entre-joueurs { border-style: solid; border-color: #a8392f; background: rgba(168,57,47,.06); }
.digest-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.digest-table td, .digest-table th { padding: .25rem .4rem; border-bottom: 1px solid rgba(90,60,20,.2); text-align: left; }
.digest-table th { font-family: var(--display); font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: #7a6244; }
.digest .mono { font-family: ui-monospace, Menlo, monospace; }
.digest-pied { margin-top: 2rem; padding-top: .6rem; border-top: 1px solid rgba(90,60,20,.25); font-size: .78rem; color: #7a6244; }

/* ==========================================================================
   RESPONSIVE — la fiche tient sur un téléphone, le dock prend la largeur.
   ========================================================================== */
@media (max-width: 900px) {
  .constructeur { grid-template-columns: 1fr; }
  .proba-panel { position: static; }
  .sheet-header { grid-template-columns: 160px minmax(0, 1fr); }
  .sheet-header .background-col { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .carte-ecran {
    grid-template-columns: 46px 1fr; grid-template-rows: auto 1fr auto;
    grid-template-areas: "entete entete" "outils scene" "panneau panneau";
  }
  .carte-panneau { max-height: 38vh; border-left: 0; border-top: 1px solid var(--or-3); }
  .carte-ecran.sans-panneau { grid-template-rows: auto 1fr 0; }
  .carte-outil { width: 52px; min-height: 42px; }
  .carte-hud { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 14px; }
  #app { padding: 1rem .8rem 5rem; }
  .sheet-header { grid-template-columns: 1fr; }
  .photo-box { min-height: 200px; max-width: 260px; margin: 0 auto; width: 100%; }
  /* En colonne, un `flex: 1` sur les champs les ferait grandir en HAUTEUR : les
     libellés se retrouvaient séparés par de grands vides. */
  .id-row { flex-direction: column; gap: .5rem; }
  .id-field { flex: none; }
  #topbar { padding: .45rem .8rem; }
  .brand-nom { font-size: .95rem; letter-spacing: .2em; }
  #topnav button, #topnav span { padding: .28rem .5rem; font-size: 9px; letter-spacing: .12em; }
  .caracs-card .carac-grid { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); }
  .carac-bubble input { font-size: 1.6rem; }
  .ressources-bar { grid-template-columns: 1fr; }
  .skill-row-sheet { grid-template-columns: 1fr repeat(3, 20px) 28px 22px; gap: .3rem; }
  .dock { right: 0; left: 0; width: auto; border-radius: 0; border-left: 0; border-right: 0; }
  .chat-log { height: 38vh; }
  .digest { padding: 1.4rem 1.1rem 1.8rem; }
  .digest-msg, .digest-jet { grid-template-columns: 2.4rem 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   IMPRESSION — la fiche et le compte rendu redeviennent du papier : encre
   noire sur blanc. Une feuille de nuit imprimée, c'est une cartouche vidée.
   ========================================================================== */
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  body::before, body::after { display: none !important; }
  #topbar, .fiche-barre, .toast, .modal-overlay, .modal-fond, .suggestions, .dock,
  .skill-jet-btn, .skill-del-btn, .add-skill, .new-skill, .carte-ecran,
  .res-moins, .res-plus, .boutons-jauge, .photo-box input[type=file], .jet-out,
  button, .badge, .menu-flottant { display: none !important; }
  #app { max-width: none; padding: 0; }
  a, a.link { color: #000; text-decoration: none; }
  h1, h2, h3, h4, .section-title, .cat-label, .carac-label, .id-field-pill, .etq, label {
    color: #000 !important; text-shadow: none !important;
  }
  .section-title::after, .filet::before, .filet::after { background: #999 !important; }
  .card, .sheet-header, .ressources-bar {
    background: #fff !important; border: 1px solid #999 !important; box-shadow: none !important;
    backdrop-filter: none !important; break-inside: avoid; page-break-inside: avoid; margin-bottom: 6mm;
  }
  .card::after { display: none !important; }
  .res-item { background: #fff !important; }
  .res-rail { border-color: #999 !important; background: #fff !important; box-shadow: none !important; }
  .res-rail i { background: #666 !important; box-shadow: none !important; }
  .carac-item, .derive, .demande, .seance-item, .carte-item, .carte-perso {
    background: #fff !important; border-color: #999 !important; box-shadow: none !important;
  }
  .carac-bubble input, input, textarea, select {
    color: #000 !important; background: transparent !important; border-color: #bbb !important;
    box-shadow: none !important; text-shadow: none !important;
  }
  /* Le manuscrit reste manuscrit sur le papier : c'est le sens de la fiche. */
  .id-field input, .ident-field, #p-background, #p-histoire-secrete { color: #1a1a5a !important; }
  .background-col textarea { background: #fff !important; clip-path: none !important; filter: none !important; border: 1px solid #ccc !important; }
  .skill-cell { border-color: #666 !important; background: #fff !important; }
  .skill-cell.filled { background: #333 !important; }
  .etat:not(.actif) { display: none; }
  .etat.actif { border: 1px solid #000 !important; background: #eee !important; color: #000 !important; box-shadow: none !important; }
  .equip-grid { grid-template-columns: 1fr 1fr; }
  /* Le compte rendu : imprimé seul, sans le voile ni la barre d'outils. */
  body.impression-digest > *:not(.digest-overlay) { display: none !important; }
  body.impression-digest .digest-overlay { position: static; background: none; padding: 0; overflow: visible; backdrop-filter: none; }
  body.impression-digest .digest-barre { display: none; }
  body.impression-digest .digest {
    max-width: none; padding: 0; border-radius: 0; box-shadow: none;
    background: #fff !important; color: #000 !important;
  }
  .digest h1, .digest h2, .digest h3, .digest h4, .digest b { color: #000 !important; }
  .digest-chuchote { border-color: #666 !important; background: #fff !important; }
}

/* Les animations ne s'imposent à personne. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ==========================================================================
   MODE INTÉGRÉ — le site affiché DANS Kratos.app (index.html?embed=…).
   L'app porte sa propre navigation : le site retire la sienne et rend son
   écran plein cadre. Aucune couleur n'est touchée : c'est la même peau.
   ========================================================================== */
[data-embed] #topbar, [data-embed] .retour { display: none !important; }
[data-embed] #app { padding-top: .6rem; }
[data-embed] .carte-ecran { height: 100vh; }
/* Fiche, carte et constructeur : le chat a son propre écran dans l'app. */
[data-embed="fiche"] .dock, [data-embed="carte"] .dock, [data-embed="systeme"] .dock { display: none !important; }
/* Salon : le dock n'est plus un dock, c'est l'écran entier. */
[data-embed="salon"] #app { display: none !important; }
[data-embed="salon"] .dock {
  position: fixed; inset: 0; width: auto; border: 0; border-radius: 0;
  box-shadow: none; backdrop-filter: none; background: transparent;
}
[data-embed="salon"] .dock-corps { flex: 1; min-height: 0; }
[data-embed="salon"] .chat-log { height: auto; flex: 1; min-height: 0; }
[data-embed="salon"] #dock-reduire { display: none; }

/* ---------------------------------------------------------- les blessures
   La silhouette de la fiche de jeu, en lignes : six endroits, chacun sa
   protection et sa rangée de cases qu'on coche de gauche à droite. */
.localisations { display: flex; flex-direction: column; gap: .3rem; }
.loc-general {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .45rem .6rem; margin-bottom: .35rem;
  border: 1px solid var(--or-3); border-radius: var(--rayon); background: rgba(0,0,0,.25);
}
.loc-general-titre { font-family: var(--display); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-2); }
.loc-general b { font-family: var(--corps, system-ui); font-size: 1rem; color: var(--bad); }
.loc-general b.loc-indemne { color: var(--texte-2); font-weight: 500; }
.loc-malus { font-size: .8rem; color: var(--texte-2); }
.loc-zone { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .2rem 0; }
.loc-nom { flex: 0 0 9.5rem; font-size: .84rem; color: var(--texte); }
.loc-cases { display: inline-flex; gap: 3px; }
.loc-case {
  width: 26px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 8.5px; letter-spacing: .04em;
  background: rgba(0,0,0,.35); color: var(--texte-2);
  border: 1px solid var(--or-3); border-radius: 3px; clip-path: none; box-shadow: none;
}
.loc-case:hover { border-color: var(--or); color: var(--or-2); }
.loc-case.prise { background: #7a2118; border-color: #b0402f; color: #ffd9c9; }
/* Deux cases par palier : la seconde est plus étroite et sans nom — c'est la
   même blessure, pas un degré de plus. Un écart marque la fin du palier. */
.loc-case:not(.tete-palier) { width: 18px; opacity: .92; }
.loc-case.fin-palier { margin-right: 7px; }
.loc-part { display: inline-flex; flex-direction: column; gap: 1px; }
.loc-part > span { font-family: var(--display); font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
.loc-part input { width: 3.4rem; padding: .15rem .3rem; font-size: .82rem; }
.loc-total { font-size: .78rem; color: var(--texte-2); font-variant-numeric: tabular-nums; min-width: 5.5rem; }
.loc-pr { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--texte-2); }
.loc-pr input { width: 3.2rem; padding: .2rem .3rem; font-size: .82rem; }
.loc-coup { display: inline-flex; align-items: flex-end; gap: .35rem; flex-wrap: wrap; }
.loc-soin { margin-left: auto; }
@media (max-width: 720px) {
  .loc-nom { flex-basis: 100%; }
  .loc-soin { margin-left: 0; }
}

/* ------------------------------------------------- ce qui se calcule tout seul
   Une valeur que le Système calcule ne se tape pas : elle s'affiche, sans
   cadre de saisie, avec sa formule dessous pour qu'on sache d'où elle vient. */
.res-calc {
  display: inline-block; min-width: 2.4rem; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--texte); padding: .15rem .2rem; cursor: help;
  border-bottom: 1px dashed var(--or-3);
}
output.res-cur.res-calc { color: var(--or-2); min-width: 3.4rem; }
.res-origine { margin-top: .3rem; font-size: .68rem; color: var(--texte-2); overflow-wrap: anywhere; }
.res-impose { display: flex; align-items: center; gap: .3rem; margin-top: .25rem; font-size: .68rem; }
.res-impose input { width: 4.2rem; padding: .1rem .3rem; font-size: .75rem; }
.res-souci { margin: .2rem 0 0; }

/* Un état donné par une blessure ou une condition : il ne se décoche pas. */
.etat.auto { cursor: default; }
.etat.auto input { cursor: not-allowed; }
.etat .etat-source { display: block; font-style: italic; opacity: .85; }
.etat .etat-source.err { color: var(--bad); }

/* Les blessures lisent la protection dans son tableau : un nombre, pas un champ. */
.loc-pr-lue { cursor: help; }
.loc-pr-lue output {
  display: inline-block; min-width: 1.6rem; text-align: center; font-family: var(--display);
  font-weight: 700; font-size: .95rem; color: var(--or-2); border-bottom: 1px dashed var(--or-3);
}
.loc-barre { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .2rem; }
.loc-tirage-dit { font-size: .84rem; color: var(--or-2); }
.loc-zone.touchee { outline: 1px solid var(--or); outline-offset: 2px; border-radius: 3px; background: rgba(217,181,106,.1); }
.loc-malus.loc-lie { color: var(--or-2); cursor: help; }

/* Tableaux d'équipement : les colonnes qui comptent s'alignent à droite, la
   case calculée n'a pas de cadre, et le pied porte la somme que citent les
   formules. */
.equip-table th.num, .equip-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.equip-table td.num input { text-align: right; }
.equip-table select { width: 100%; }
.equip-table output.calc {
  display: block; padding: .2rem .35rem; font-family: var(--display); font-weight: 700;
  color: var(--or-2); cursor: default;
}
.equip-table output.calc.err { color: var(--bad); cursor: help; }
.equip-table tfoot td {
  border-top: 1px solid var(--or-3); border-bottom: 0; padding-top: .35rem;
  font-family: var(--display); font-size: .78rem; color: var(--texte-2);
}
.equip-table tfoot td.num { color: var(--texte); font-weight: 700; padding-right: .75rem; }
/* Le tableau des protections : une ligne par localisation, le nom en tête. */
.prot-table th[scope="row"] {
  text-align: left; font-family: var(--corps, system-ui); font-size: .84rem; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--texte); white-space: nowrap;
}
.prot-table th:first-child { width: 9.5rem; }
.prot-table th.num, .prot-table td.num { width: 6rem; }
/* La règle « dernière colonne étroite » vise la colonne des boutons ✕ : ce
   tableau n'en a pas, sa dernière colonne est du texte. */
.prot-table th:last-child, .prot-table td:last-child { width: auto; padding-inline: .4rem; text-align: left; }
.prot-table th.num:last-child, .prot-table td.num:last-child { width: 6rem; text-align: right; }

@media print {
  .res-origine, .res-impose, .loc-barre, .loc-coup, .loc-soin { display: none !important; }
  .res-calc, .loc-pr-lue output, .equip-table output.calc { color: #000 !important; border-color: #999 !important; }
}

/* Un avertissement n'est pas une erreur : il se lit, il n'empêche rien. */
.aide.warn { color: var(--orange, #e0a04a); }

/* Constructeur : hors de l'onglet Règles il n'y a pas de panneau de
   probabilités à loger — la colonne prend toute la largeur. Et un élément de
   liste qui s'empile sur plusieurs lignes garde sa poignée et sa croix en
   haut, pas flottantes au milieu. */
.constructeur:not(:has(.proba-panel)) { grid-template-columns: minmax(0, 1fr); }
.item-editable > .corps.empile { flex: 1; min-width: 0; }
.item-editable:has(> .corps.empile) { align-items: flex-start; }
.item-editable:has(> .corps.empile) > .poignee { padding-top: .5rem; }

/* Un nombre n'a pas besoin de la largeur d'un nom : les colonnes qui comptent
   sont étroites, le texte prend le reste. */
.equip-table th.num { width: 5.6rem; }
.equip-table th.choix { width: 8.5rem; }
@media (min-width: 820px) { .equip-grid .bloc-tres-large { grid-column: 1 / -1; } }

/* Reprendre d'un modèle : ce qui manque, ce qui diffère, et ce qu'on a repris. */
.reprise-modele { width: min(720px, 94vw); max-height: 88vh; overflow-y: auto; }
.reprise-ligne { display: flex; align-items: flex-start; gap: .55rem; padding: .3rem 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--corps, system-ui); font-size: .92rem; font-variant: normal; color: var(--texte); }
.reprise-ligne input { margin-top: .25rem; flex: 0 0 auto; }
.reprise-ligne small { display: block; color: var(--texte-2); font-style: italic; }
.reprise-ligne.differe .pill, .reprise-ligne.nature .pill { border-color: var(--orange, #e0a04a); color: var(--orange, #e0a04a); }
.reprise-bilan { border-left: 2px solid var(--ok); padding: .2rem 0 .2rem .7rem; margin-top: .6rem; font-size: .88rem; }
.reprise-bilan ul { margin: .3rem 0 0; padding-left: 1.1rem; }

select.invalide { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }

.cle-variable { display: inline-flex; align-items: center; gap: 1px; }
.cle-variable input { width: auto; min-width: 5ch; padding: 3px 6px; font-size: .9em; }

/* L'accès d'une fiche : ce que le MJ ouvre, verrouille ou masque personnage par personnage. */
.acces-carte summary { cursor: pointer; display: flex; gap: .8rem; align-items: baseline; list-style: none; }
.acces-carte summary::-webkit-details-marker { display: none; }
.acces-carte summary::before { content: "▸"; color: var(--or); margin-right: .3rem; }
.acces-carte[open] summary::before { content: "▾"; }
.acces-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .3rem .9rem; margin-top: .6rem; }
.acces-titre { grid-column: 1 / -1; font-family: var(--display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin-top: .5rem; }
.acces-ligne { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.acces-ligne > span:first-child { flex: 1; }
.acces-ligne select { max-width: 15rem; font-size: .85rem; }
.acces-cascade > span:first-child { opacity: .6; }
.acces-lecture { position: relative; }
.acces-lecture::after { content: "lecture seule"; position: absolute; top: .3rem; right: .5rem; font: 600 .62rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); pointer-events: none; }
.acces-lecture input:disabled, .acces-lecture button:disabled, .acces-lecture textarea:disabled { opacity: .55; cursor: not-allowed; }
select.acces-defaut { font-size: .8rem; max-width: 14rem; }

/* ---- expérience : niveaux, sous-niveaux, achats ---- */
.xp-pistes { display: grid; gap: .55rem; }
.xp-piste { padding-left: calc(var(--prof, 0) * 1.1rem); }
.xp-piste[hidden] { display: none; }
.xp-tete { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.xp-nom { font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.xp-niveau { font-family: var(--display); color: var(--or); font-size: 1.05rem; }
.xp-rail { height: 7px; margin: .25rem 0 .2rem; border: 1px solid var(--or-3); border-radius: 4px; background: rgba(0,0,0,.4); overflow: hidden; }
.xp-rail i { display: block; height: 100%; background: linear-gradient(90deg, var(--or-3), var(--or)); transition: width .25s; }
.xp-detail.err { color: var(--bad); }
.achat-xp { position: absolute; top: 3px; right: 3px; width: 1.5rem; padding: 0; line-height: 1.4; font-size: 12px; opacity: .55; }
.carac-item:hover .achat-xp, .achat-xp:focus-visible, .res-item:hover .achat-xp { opacity: 1; }
.res-chiffres .achat-xp { position: static; margin-left: .3rem; }

/* ---- « s'active si… » : une donnée qui n'existe qu'à une condition ---- */
details.activation { margin: .25rem 0 .1rem; font-size: .85rem; }
details.activation > summary { cursor: pointer; list-style: none; color: var(--texte-2); display: inline-flex; align-items: baseline; gap: .35rem; }
details.activation > summary::-webkit-details-marker { display: none; }
details.activation > summary::before { content: "▸"; color: var(--or-3); }
details.activation[open] > summary::before { content: "▾"; }
details.activation > summary code { color: var(--or-2); }
details.activation > input { margin-top: .3rem; width: 100%; }
.acces-condition { grid-column: 1 / -1; font-size: .78rem; color: var(--texte-2); margin: -.15rem 0 .2rem; }
.acces-condition code { color: var(--or-2); }
.acces-condition.eteinte { color: var(--alerte); }

/* ---- les joueurs d'une séance ---- */
.seance-joueurs { display: block; margin-top: .15rem; }
.seance-presents { margin: .35rem 0 .1rem; font-size: .88rem; }


/* ---- actions de ligne : une arme, un sort ---- */
td.des input { font-family: ui-monospace, Menlo, monospace; min-width: 6.5rem; }
td.des input.err { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
td.actions-ligne { white-space: nowrap; }
td.actions-ligne .lancer-ligne { margin-right: .35rem; }
.boite-action .devis-liste { list-style: none; margin: .2rem 0 .6rem; padding: 0; }
.boite-action .devis-liste li { padding: .15rem 0; }
.boite-action .devis-liste li.manque { color: var(--bad); }
.boite-action .champ { margin: .5rem 0; }
.boite-action .sortie-action { margin-top: .8rem; }
.journal-degats { margin-top: .2rem; font-size: .92em; }
details.action-ligne { margin-top: .6rem; padding: .5rem .7rem; border: 1px solid var(--bord, rgba(255,255,255,.12)); }
details.action-ligne > summary { cursor: pointer; }

/* ---- profil public d'un personnage ---- */
.profil-public .profil-photo { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--or, #d9b66b); }
.profil-public .profil-photo.vide { display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; background: rgba(255,255,255,.04); }
.profil-public .profil-identite { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .8rem; margin: .8rem 0; }
.profil-public .profil-identite dt { color: var(--texte-2, #a99f89); }
.profil-public .profil-identite dd { margin: 0; }
.profil-public .profil-toile { display: flex; justify-content: center; margin: .6rem 0; color: var(--texte, #ece3cf); }
.profil-lien { cursor: pointer; text-decoration: underline dotted; }

/* ---- l'histoire personnelle : une seconde zone sous le background, plus discrète ---- */
.background-col .histoire-secrete-titre { margin-top: .6rem; }
.background-col textarea.histoire-secrete { min-height: 5.5rem; opacity: .92; border-style: dashed; }

/* l'initiative dans le créateur de Système */
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem 1rem; }
.ini-presence { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .8rem; color: var(--texte-2, inherit); }
.jauge-mini { font-variant-numeric: tabular-nums; }
.acces-archetype-choix { margin: .4rem 0 .8rem; }
.acces-archetype { margin-top: .5rem; }
.acces-archetype > summary { cursor: pointer; font-size: .85rem; color: var(--texte-2, inherit); }
.acces-wrap { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.acces-annonce { font-size: .8rem; }
.non-accordees-liste { display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.non-accordee { display: inline-flex; flex-direction: column; padding: .4rem .7rem; border: 1px dashed var(--or-3); border-radius: var(--rayon); opacity: .7; }
.non-accordee small { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.acquerir-liste { display: flex; flex-direction: column; gap: .9rem; }
.acquerir-tete { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.acquerir-corps { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: center; }
.acquerir-entree { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .6rem; border: 1px solid var(--or-3); border-radius: var(--rayon); }
.acquerir-entree.acquise { opacity: .6; }
/* les dés 3D : un tapis au-dessus de la page, le temps d'un jet */
.des3d-tapis { position: fixed; left: 50%; top: 14vh; transform: translateX(-50%); z-index: 90; width: min(92vw, 680px); height: min(46vh, 340px);
  background: radial-gradient(ellipse at center, rgba(40,28,14,.94), rgba(10,8,6,.94)); border: 1px solid var(--or-3); border-radius: var(--rayon);
  box-shadow: 0 18px 60px rgba(0,0,0,.6), 0 0 28px var(--lueur); cursor: pointer; transition: opacity .25s ease; }
.des3d-tapis.sortie { opacity: 0; }
/* (2026-10-18) les dés posés restent à l'écran : les clics les traversent, seule la croix les range */
.des3d-tapis.pose { pointer-events: none; cursor: default; }
.des3d-tapis.pose .des3d-passer { pointer-events: auto; opacity: .85; cursor: pointer; }
.des3d-plateau { width: 100%; height: 100%; display: block; }
.des3d-passer { position: absolute; right: .5rem; top: .5rem; padding: .1rem .5rem; font-size: .8rem; opacity: .6; }
.des3d-interrupteur { margin-left: auto; }
.des3d-legende { position: absolute; left: 0; right: 0; bottom: .45rem; text-align: center; font-size: .85rem; letter-spacing: .06em; color: var(--or-2, #f0d597); pointer-events: none; text-shadow: 0 1px 4px #000; }
select.hors-liste { border-color: var(--alerte, #e2b23f); color: var(--alerte, #e2b23f); }
.notes-mj-card textarea { width: 100%; min-height: 6rem; border-style: dashed; margin-top: .4rem; }
@media print { .notes-mj-card { display: none !important; } }
.fiche-joueur { margin: 0 0 .6rem; font-size: .95rem; letter-spacing: .02em; }
.fiche-joueur .muted { text-transform: uppercase; font-size: .7rem; letter-spacing: .14em; margin-right: .4rem; }

/* ---- les fiches en vue simplifiée (assets/fiches.js) ---- */
.fiches-barre { position: sticky; top: 0; z-index: 5; background: var(--nuit-2, #121627); padding: .5rem 0 .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--or-3, rgba(201,154,58,.3)); }
.fiches-filtres { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.fiches-filtres button { font-size: .8rem; padding: .25rem .7rem; }
.fiches-filtres button.actif { outline: 1px solid var(--or, #c99a3a); }
.fiches-cherche { flex: 1 1 12rem; max-width: 18rem; }
.fiches-aide { font-size: .75rem; }
.fiches-onglets { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.fiche-onglet { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; padding: .35rem .7rem; min-width: 9rem; text-align: left; white-space: nowrap; }
.fiche-onglet .fo-joueur { font-weight: 700; font-size: .85rem; }
.fiche-onglet .fo-nom { font-style: italic; font-size: .82rem; }
.fiche-onglet.actif { outline: 2px solid var(--or, #c99a3a); }
.fiche-simple .fs-tete { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.fs-joueur { font-weight: 700; font-size: .95rem; }
.fs-joueur .muted { text-transform: uppercase; font-size: .68rem; letter-spacing: .14em; margin-right: .3rem; font-weight: 400; }
.fs-nom { margin: .1rem 0 .2rem; }
.fs-identite { font-size: .85rem; }
.fs-accroche { font-style: italic; margin-top: .3rem; }
.fs-ligne { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .9rem 0; }
.fs-jauges, .fs-caracs { display: flex; flex-wrap: wrap; gap: .5rem; }
.fs-jauge, .fs-carac { display: flex; flex-direction: column; align-items: center; min-width: 4.6rem; padding: .3rem .5rem; border: 1px solid var(--or-3, rgba(201,154,58,.3)); border-radius: 4px; }
.fs-etq { text-transform: uppercase; font-size: .66rem; letter-spacing: .12em; opacity: .8; }
.fs-etats { margin-bottom: .6rem; }
.fs-bloc { margin-top: .8rem; }
.fs-cat { margin: .25rem 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; }
.fs-cat > .fs-etq { min-width: 9rem; }
.fs-comp { white-space: nowrap; }
.fs-rang { letter-spacing: .1em; opacity: .85; }
.fs-equipement { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 1.2rem; }
.fs-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.fs-table th { text-align: left; font-weight: 400; text-transform: uppercase; font-size: .66rem; letter-spacing: .1em; opacity: .75; }
.fs-table td, .fs-table th { padding: .15rem .3rem; border-bottom: 1px solid var(--or-3, rgba(201,154,58,.2)); }
.fs-texte { white-space: pre-wrap; }
.fs-notes-mj { border-top: 1px dashed var(--or-3, rgba(201,154,58,.4)); padding-top: .5rem; }

/* « RUNE & OMBRE » (2026-10-18) — d'après les écrans « système de progression » de Rodion : noir violacé, violet qui luit, cadres
   biseautés (coins coupés) au filet violet, capitales gravées espacées, lueur sur ce qui est actif. Générale : Kratos, Demos, site. */
[data-peau="rune-ombre"] {
  --nuit-1: #07050d; --nuit-2: #100b1d; --nuit-3: #1b1331; --voile: rgba(16, 11, 29, .86);
  --or: #a56bff; --or-2: #dcc8ff; --or-3: #4b2f8a; --lueur: rgba(165, 107, 255, .42);
  --texte: #ece6ff; --texte-2: #a99ccb;
  --crit: #dcc8ff; --mana: #7aa2ff; --magie: #c08bff;
  --champ: rgba(5, 3, 14, .62);
  --plateau: #1f1538;
  --rayon: 2px;
}
[data-peau="rune-ombre"] body::before {
  background:
    radial-gradient(ellipse at 50% -12%, rgba(165, 107, 255, .3) 0%, transparent 55%),
    radial-gradient(circle at 92% 90%, rgba(138, 77, 255, .16), transparent 45%),
    linear-gradient(180deg, #1a0f3a, #0b0716 60%, #030207);
}
[data-peau="rune-ombre"] h1, [data-peau="rune-ombre"] h2, [data-peau="rune-ombre"] h3 { letter-spacing: .12em; text-transform: uppercase; }
[data-peau="rune-ombre"] h1 { text-shadow: 0 0 22px var(--lueur); }
[data-peau="rune-ombre"] #topbar { background: linear-gradient(180deg, rgba(27, 19, 49, .9), rgba(7, 5, 13, .7)); border-bottom: 1px solid rgba(165, 107, 255, .35); box-shadow: 0 6px 26px rgba(42, 15, 102, .5); }
/* le cadre biseauté : coins coupés, filet violet, lueur intérieure en haut */
[data-peau="rune-ombre"] .card, [data-peau="rune-ombre"] .sheet-header {
  border: 1px solid rgba(165, 107, 255, .45); border-radius: 0;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  background: radial-gradient(ellipse at 50% 0%, rgba(165, 107, 255, .16), transparent 65%), linear-gradient(180deg, rgba(27, 19, 49, .9), rgba(7, 5, 13, .94));
  box-shadow: inset 0 0 22px rgba(165, 107, 255, .08);
}
[data-peau="rune-ombre"] .card::after { display: none; }
[data-peau="rune-ombre"] .carac-item, [data-peau="rune-ombre"] .derive, [data-peau="rune-ombre"] .carte-perso, [data-peau="rune-ombre"] .demande {
  border-radius: 0; border-color: rgba(165, 107, 255, .4);
  background: linear-gradient(180deg, rgba(27, 19, 49, .8), rgba(7, 5, 13, .88)); box-shadow: inset 0 0 16px rgba(165, 107, 255, .07);
}
[data-peau="rune-ombre"] .section-title { letter-spacing: .28em; text-shadow: 0 0 10px var(--lueur); }
[data-peau="rune-ombre"] button { border-radius: 0; color: #fff; letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(180deg, #b183ff, #6a35c9); border: 1px solid rgba(220, 200, 255, .5); box-shadow: 0 0 14px var(--lueur); }
[data-peau="rune-ombre"] button:hover { box-shadow: 0 0 26px rgba(165, 107, 255, .7); }
[data-peau="rune-ombre"] button.secondary, [data-peau="rune-ombre"] button.ghost-danger { color: var(--texte); background: rgba(165, 107, 255, .1); border-color: rgba(165, 107, 255, .45); box-shadow: none; }
[data-peau="rune-ombre"] button.danger { color: #fff; background: linear-gradient(180deg, #d9534f, #8f2424); }
[data-peau="rune-ombre"] input, [data-peau="rune-ombre"] select, [data-peau="rune-ombre"] textarea { border-radius: 0; border-color: rgba(165, 107, 255, .4); }
[data-peau="rune-ombre"] input:focus, [data-peau="rune-ombre"] select:focus, [data-peau="rune-ombre"] textarea:focus { border-color: var(--or); box-shadow: 0 0 14px var(--lueur); }
[data-peau="rune-ombre"] .onglet.actif, [data-peau="rune-ombre"] .mec-onglet.actif, [data-peau="rune-ombre"] .module-btn.actif { color: #fff; background: linear-gradient(180deg, transparent, rgba(165, 107, 255, .25)); border-bottom: 2px solid var(--or-2); box-shadow: 0 6px 14px -6px var(--or); }
[data-peau="rune-ombre"] .pill, [data-peau="rune-ombre"] .tag, [data-peau="rune-ombre"] .chip { background: rgba(165, 107, 255, .15); border-color: rgba(220, 200, 255, .4); border-radius: 0; }
[data-peau="rune-ombre"] .badge { background: linear-gradient(180deg, #b183ff, #6a35c9); color: #fff; border-color: transparent; }

/* « HUD CYAN » (2026-10-19) — d'après les écrans de données futuristes de Rodion : nuit bleu-noir, cyan qui luit, panneaux de VERRE aux
   coins très arrondis, SANS bordure ni filet : de l'air, des aplats translucides, des lueurs. Générale : Kratos, Demos, site. */
[data-peau="hud-cyan"] {
  --nuit-1: #030b14; --nuit-2: #071a2b; --nuit-3: #0c2a42; --voile: rgba(7, 26, 43, .82);
  --or: #3de0ff; --or-2: #aef3ff; --or-3: #167a96; --lueur: rgba(61, 224, 255, .38);
  --texte: #e6f7ff; --texte-2: #8bb4c7;
  --crit: #aef3ff; --mana: #5ab0ff; --magie: #7af0d4;
  --champ: rgba(2, 10, 18, .6);
  --plateau: #0c2a42;
  --rayon: 14px;
}
[data-peau="hud-cyan"] body::before {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(61, 224, 255, .26) 0%, transparent 52%),
    radial-gradient(circle at 90% 95%, rgba(25, 200, 255, .12), transparent 45%),
    linear-gradient(180deg, #082338, #04101c 58%, #01060c);
}
[data-peau="hud-cyan"] h1, [data-peau="hud-cyan"] h2, [data-peau="hud-cyan"] h3 { letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
[data-peau="hud-cyan"] h1 { text-shadow: 0 0 24px var(--lueur); }
[data-peau="hud-cyan"] #topbar { background: rgba(7, 26, 43, .55); backdrop-filter: blur(14px); border-bottom: none; box-shadow: 0 10px 40px rgba(10, 74, 102, .35); }
[data-peau="hud-cyan"] .card, [data-peau="hud-cyan"] .sheet-header {
  border: none; border-radius: 18px;
  background: linear-gradient(180deg, rgba(61, 224, 255, .09), rgba(61, 224, 255, .025));
  backdrop-filter: blur(10px); box-shadow: 0 8px 40px rgba(0, 0, 0, .35);
}
[data-peau="hud-cyan"] .card::after { display: none; }
[data-peau="hud-cyan"] .carac-item, [data-peau="hud-cyan"] .derive, [data-peau="hud-cyan"] .carte-perso, [data-peau="hud-cyan"] .demande {
  border: none; border-radius: 14px; background: rgba(61, 224, 255, .06); box-shadow: none;
}
[data-peau="hud-cyan"] .section-title { letter-spacing: .22em; text-shadow: 0 0 10px var(--lueur); }
[data-peau="hud-cyan"] button { border: none; border-radius: 999px; color: #00131a; font-weight: 600; background: linear-gradient(180deg, #8af0ff, #19c8ff); box-shadow: 0 0 18px var(--lueur); }
[data-peau="hud-cyan"] button:hover { box-shadow: 0 0 30px rgba(61, 224, 255, .65); }
[data-peau="hud-cyan"] button.secondary, [data-peau="hud-cyan"] button.ghost-danger { color: var(--texte); background: rgba(61, 224, 255, .12); box-shadow: none; }
[data-peau="hud-cyan"] input, [data-peau="hud-cyan"] select, [data-peau="hud-cyan"] textarea { border: none; border-radius: 12px; background: rgba(2, 10, 18, .6); }

/* (2026-10-23) La page « Acquérir » de la fiche : on y entre en cliquant sur les points d'expérience. */
.res-item.res-xp, .xp-card.cliquable { cursor: pointer; }
.res-item.res-xp:hover, .xp-card.cliquable:hover { box-shadow: 0 0 0 1px var(--accent, #c9a96a) inset; }
.res-acquerir, .xp-acquerir { font-size: .8em; margin-left: .4em; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.acquerir-entete h2 { margin: .4rem 0 .3rem; }
.acquerir-entete p { margin: 0; max-width: 60ch; }

/* Les gestes d'un état actif, sur la fiche (prouesses de Voie, se relever…) */
.etat-gestes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.etat-gestes-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.etat-gestes-ligne[hidden] { display: none; }
.etat-gestes-titre { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); margin-right: 4px; }
.geste-btn small { opacity: .7; margin-left: 4px; }
@media print { .etat-gestes { display: none; } }