/* ===== FEREDORN — style ===== */
:root {
  --bg: #14110f;
  --bg2: #1d1916;
  --panel: #221d19;
  --panel2: #2b2420;
  --ink: #e9e0d6;
  --ink-dim: #b3a896;
  --muted: #9a8f80;
  --line: #3a322c;
  --accent: #b5462f;     /* sang / rouille */
  --accent-text: #d46a50; /* même rouille, éclaircie pour le texte : contraste ≥ 4,5:1 sur le fond et les panneaux (l'accent seul : 3,5:1) */
  --accent2: #c9a14a;    /* or fané */
  --good: #6f9c5b;
  --bad: #c0492f;
  --bad-text: #e08a72;       /* texte "danger" au repos (badges, erreurs) */
  --bad-text-hover: #ff6b6b; /* texte "danger" au survol (plus vif) */
  --good-text: #7bc47f;      /* texte "réussi" (✓ Enregistré…) */
  --online: #4caf79;         /* présence en ligne, jauge de stockage */
  --on-accent: #fff;         /* texte sur la rouille ou le rouge (boutons pleins, sélection) */
  --on-gold: #1c1611;        /* texte sur l'or (bouton actif, tour en cours) */
  --shadow: 0 4px 18px rgba(0,0,0,.45);
  --radius: 10px;
  /* Échelle typographique : toutes les tailles de texte du site en dérivent. */
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 15px;
  --fs-xl: 16px; --fs-2xl: 18px; --fs-3xl: 22px; --fs-4xl: 26px; --fs-5xl: 30px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { height: 100%; }
/* min-height (et non height) : sinon body fait la hauteur de l'écran et la barre du haut,
   collante à l'intérieur de body, repart avec la page après un écran de défilement. */
body { min-height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
#app-wrap { min-height: 100vh; min-height: 100dvh; }
/* L'attribut hidden l'emporte toujours : sans ça, une règle display de classe (ex. .badge) l'écrase et l'élément reste affiché. */
[hidden] { display: none !important; }
.brand { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: 2px; color: var(--accent); }
.brand-sub { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
.nav-sep { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1.5px; margin: 14px 6px 6px; }
.nav-btn {
  display: block; width: 100%; text-align: left;
  background: transparent; color: var(--ink-dim);
  border: 1px solid transparent; border-radius: 8px;
  padding: 9px 12px; margin: 3px 0; cursor: pointer;
  font-size: var(--fs-base); transition: .15s;
}
.nav-btn:hover { background: var(--panel); color: var(--ink); }
.nav-btn.active { background: var(--panel2); color: var(--accent2); border-color: var(--line); }
.side-btn {
  display: block; width: 100%; margin: 5px 0; padding: 9px;
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; font-size: var(--fs-md);
}
.side-btn:hover { border-color: var(--accent2); }
.side-btn.danger:hover { border-color: var(--bad); color: #f0b0a0; }

/* Contenu : même gabarit pour toutes les pages (barre du haut + page centrée).
   Sur la fiche, un panneau de sections à gauche, comme la navigation du wiki. */
#content { min-width: 0; width: 100%; padding: 26px clamp(16px, 4vw, 60px); }
#page { max-width: 1290px; margin: 0 auto; }
#view { min-width: 0; }
body.mode-fiche .page-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
/* align-items: start empêche #fiche-panel de s'étirer sur toute la hauteur de la
   grille ; or #nav (position: sticky) n'a alors qu'une aussi petite hauteur que
   lui-même pour "flotter" en scrollant, et ne reste donc jamais visuellement fixe. */
#fiche-panel { align-self: stretch; }
.side-panel-head { padding: 6px 8px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.side-panel-head .name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.side-panel-head .meta { font-size: var(--fs-sm); color: var(--muted); }
.panel-action { display: block; width: 100%; text-align: center; margin: 4px 0 10px; }
/* Tiroir des sections (mobile) : bouton ☰ de la barre du haut, masqué sur PC */
.drawer-btn { display: none; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.drawer-btn:hover, .drawer-btn[aria-expanded="true"] { border-color: var(--accent2); }
.drawer-ico { position: relative; width: 18px; height: 14px; }
.drawer-ico span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--accent2); transition: transform .26s ease, top .26s ease, opacity .2s ease; }
.drawer-ico span:nth-child(1) { top: 0; }
.drawer-ico span:nth-child(2) { top: 6px; }
.drawer-ico span:nth-child(3) { top: 12px; }
.drawer-btn[aria-expanded="true"] .drawer-ico span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.drawer-btn[aria-expanded="true"] .drawer-ico span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.drawer-btn[aria-expanded="true"] .drawer-ico span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.drawer-backdrop, .drawer-head, .drawer-search { display: none; }
#view h1 { margin: 0 0 4px; font-size: var(--fs-4xl); color: var(--accent2); letter-spacing: .5px; overflow-wrap: anywhere; }
#view h2 { color: var(--accent2); font-size: var(--fs-2xl); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-top: 26px; }
.subtitle { color: var(--muted); margin: 0 0 18px; overflow-wrap: anywhere; }

/* Cards / grid */
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid > * { min-width: 0; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 8px; font-size: var(--fs-lg); color: var(--accent2); }
/* Cartes "vitales" de la fiche (EV, Fracture Mentale, Blessures) : liseré de
   sang à gauche pour les distinguer du texte d'ambiance. Décoratif : le sens
   reste porté par les titres et les valeurs. */
.card.vital { border-left: 3px solid var(--accent); }
.card.vital h3 { font-size: var(--fs-xl); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

/* Focus clavier visible (la souris ne l'affiche pas grâce à :focus-visible) */
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.ed-name[role="button"]:focus-visible { outline-offset: 4px; }
span[data-tip] { border-bottom: 1px dotted var(--muted); cursor: help; }

/* Forms */
label { display: block; margin: 10px 0 4px; color: var(--ink-dim); font-size: var(--fs-md); }
input[type=text], input[type=number], input[type=password], textarea, select {
  width: 100%; background: var(--bg2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: var(--fs-base);
  font-family: inherit;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent2); }
input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }
textarea { resize: vertical; min-height: 70px; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

/* Chips / choices */
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip {
  border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: 7px 13px; cursor: pointer; font-size: var(--fs-md); color: var(--ink-dim);
  font-family: inherit; line-height: 1.4;
}
.chip:hover { border-color: var(--accent2); color: var(--ink); }
.chip.sel { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip .em { margin-right: 5px; }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.chip:disabled:hover { border-color: var(--line); color: var(--ink-dim); }
/* Compétence apprise avec un PA : choisie mais verrouillée ici (elle se retire depuis la fiche). */
.chip.sel:disabled { opacity: .7; }
.chip.sel:disabled:hover { border-color: var(--accent); color: var(--on-accent); }
.chip-pa { font-size: var(--fs-2xs); font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 0 3px; margin-left: 4px; }

/* Carac table */
.carac-table { width: 100%; border-collapse: collapse; }
.carac-table th, .carac-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.carac-table th { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); text-transform: uppercase; }
.mod { color: var(--accent2); font-weight: 700; }

/* Stat pills */
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.pill {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; font-size: var(--fs-md);
}
.pill b { color: var(--accent2); }

/* Badges */
.badge { display:inline-block; padding: 2px 8px; border-radius: 6px; font-size: var(--fs-xs); background: var(--panel2); border:1px solid var(--line); color: var(--ink-dim); overflow-wrap: anywhere; max-width: 100%; }
.badge.ok { color: var(--good); border-color: #3c5a30; }
.badge.warn { color: #d8a24a; border-color: #5a4a22; }
.badge.bad { color: var(--bad-text); border-color: #5a2e22; }

/* Buttons */
.btn {
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px;
  padding: 10px 16px; cursor: pointer; font-size: var(--fs-base); font-weight: 600;
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent2); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn[disabled]:hover { filter: none; }
/* Système de boutons : mêmes réflexes pour tous (survol en douceur, état désactivé
   lisible) et, au doigt, des cibles assez grandes pour être touchées. */
.btn, .btn-edit, .wbtn, .step, .seg, .die, .chip, .nav-btn { transition: border-color .15s, color .15s, background-color .15s, filter .15s; }
.btn-edit:disabled, .step:disabled, .seg:disabled, .die:disabled { opacity: .45; cursor: not-allowed; }
.btn-edit:disabled:hover, .step:disabled:hover, .seg:disabled:hover, .die:disabled:hover { border-color: var(--line); color: var(--ink); filter: none; }
@media (pointer: coarse) {
  .wbtn { width: 32px; height: 32px; }
  .step { width: 34px; height: 34px; }
  .btn-edit.small { min-height: 32px; }
}
/* Chargement en cours : la même indication partout (petit cercle qui tourne). */
.chargement::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .5em; vertical-align: -.12em; border: 2px solid var(--line); border-top-color: var(--accent2); border-radius: 50%; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chargement::before { animation: none; } }
.wizard-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Blessures */
.zone-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.zone-row .zname { width: 130px; }

/* Lignes d'équipement : chacune dans sa propre carte, sinon un simple trait
   entre deux lignes chargées de champs se distingue mal. */
.eq-item {
  gap: 6px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}
.eq-item:last-child { margin-bottom: 0; }
.eq-item [data-eq-nom] { flex: 1 1 140px; min-width: 0; }
.eq-item select, .eq-item input[data-eq-portee] { flex: 0 1 auto; width: auto; min-width: 0; padding: 7px 8px; font-size: var(--fs-md); }
.eq-item input[data-eq-portee] { flex: 1 0 80px; }
.eq-item label { margin: 0; white-space: nowrap; }
.eq-item [data-eq-del] { margin-left: auto; padding: 7px 10px; }

/* ===== Wiki ===== */
.wiki-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
.wiki-search { width: 100%; margin-bottom: 12px; }
.wiki-nav, .side-panel { position: sticky; top: 70px; max-height: calc(100vh - 86px); max-height: calc(100dvh - 86px); overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
/* Bloc Blessures de la fiche (onglet Combat) : colonne à droite du contenu ; le
   bandeau de synthèse est déjà collant, la poupée défile avec l'onglet. */
.fiche-body-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: start; }
.fiche-blessures-col { min-width: 0; }
.fiche-blessures-col h2 { margin-top: 0; }

/* Page de connexion à une table (choix du personnage, description, rejoindre)
   — colonne étroite, même esprit que .wed-page.wiki-article{max-width:980px}. */
.table-lobby { max-width: 640px; margin: 0 auto; }
.table-lobby .card { margin-bottom: 14px; }
.table-lobby #tbl-lobby-desc-view { white-space: pre-line; }

/* Plateau de table de JDR : plein écran (échappe à #page{max-width:1290px}
   exactement comme #table-windows-layer/.corps-popup/les modales le font
   déjà), avec Joueurs/Chat en superposition repliables et un plateau
   zoomable/déplaçable. body.table-fullscreen-active bloque le scroll de la
   page derrière, même idée que body.drawer-open pour le tiroir mobile. */
body.table-fullscreen-active { overflow: hidden; }
.table-fullscreen { position: fixed; top: var(--topbar-h, 57px); left: 0; right: 0; bottom: 0; overflow: hidden; background: var(--bg); z-index: 10; display: flex; flex-direction: column; }
.table-topbar-mini { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.table-topbar-mini h1 { margin: 0; font-size: var(--fs-2xl); }
/* Groupes topbar : Navigation | Session | MJ — séparateur fin entre catégories. */
.tbl-group { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tbl-sep { flex: none; width: 1px; height: 22px; background: var(--line); }
.table-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* Konva monte son propre <canvas> dans #tbl-board-viewport (js/tables.js,
   initStage()) : fond, jetons, dessin et zoom/pan sont tous gérés par la
   Stage elle-même (stage.scale()/position()), pas par un transform CSS ici. */
.table-board-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.table-board-viewport:active { cursor: grabbing; }
.table-board-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; pointer-events: none; }

/* Barre d'outils de dessin (MJ/admin) : miroir de .table-zoom-ctrl, en haut-centre. */
.table-draw-toolbar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; box-shadow: var(--shadow); flex-wrap: wrap; justify-content: center; }
.table-draw-tool { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
background: var(--panel2); color: var(--ink); cursor: pointer; font-size: var(--fs-base); line-height: 1;
display: inline-flex; align-items: center; justify-content: center; }
.table-draw-tool svg { display: block; }
/* Menu MJ : fenêtre flottante (même système que les fiches perso), sections
   scènes / médias / paramètres (data-mj-section). */
.table-mj-sec { margin-bottom: 10px; }
.table-mj-sec > h3 { margin: 4px 0 8px; font-size: var(--fs-base); }
.table-mj-sec .muted { display: block; margin: 2px 0 6px; }
.table-mj-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.table-mj-row .btn-edit { flex: none; }
/* Liste des scènes du menu MJ : une ligne compacte par scène (vignette, nom +
   état, bouton principal, ⚙ réglages, ⋯ actions) ; les réglages s'ouvrent en
   accordéon sous la ligne (.sc-acc). */
.sc-search { width: 100%; margin-bottom: 8px; box-sizing: border-box; }
.table-scene-item { border: 1px solid transparent; border-radius: 10px; margin-bottom: 4px; }
.table-scene-item.active { background: rgba(216,162,74,.07); }
.table-scene-item.viewed { border-color: var(--accent2); }
.table-scene-row { margin: 0; padding: 4px 6px; }
.table-scene-thumb { width: 34px; height: 34px; border-radius: 6px; flex: none; object-fit: cover; border: 1px solid var(--line); }
.table-scene-main { flex: 1 1 110px; min-width: 0; text-align: left; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 2px 4px; font: inherit; }
.table-scene-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-scene-main .muted { margin: 0; }
.table-scene-main:hover b { text-decoration: underline; }
.table-scene-item.dragging { opacity: .4; }
/* Réglages d'une scène (accordéon) : labels compacts. */
.sc-acc { margin: 2px 6px 8px 6px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; }
.sc-acc label.small { display: block; margin: 6px 0; }
.sc-acc .table-mj-row label.small { margin: 0; }
.sc-acc input[type="text"], .sc-acc input[type="number"], .sc-acc select, .sc-acc textarea { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; box-sizing: border-box; }
.sc-acc input[type="text"], .sc-acc textarea { width: 100%; }
.sc-acc input[type="number"] { width: 84px; }
.sc-acc select { width: auto; }
.sc-acc summary { cursor: pointer; margin: 6px 0; color: var(--ink-dim); }
.sc-drop { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 6px 0; border: 2px dashed var(--line); border-radius: 8px; cursor: pointer; color: var(--ink-dim); }
.sc-drop img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.sc-drop:hover, .sc-drop:focus-visible, .sc-drop.over { border-color: var(--accent2); color: var(--ink); background: rgba(216,162,74,.08); }
.sc-foot { display: flex; gap: 10px; align-items: center; min-height: 18px; margin-top: 4px; }
#sc-status { color: var(--good-text); }
/* Barre réductible : repliée, seuls le toggle (une icône) reste visible. */
#tbl-draw-tools { display: contents; }
.table-draw-toolbar.collapsed #tbl-draw-tools { display: none; }

/* Bandeau d'aperçu MJ (previewScene, js/tables.js) : la scène affichée n'est
   pas celle que voient les joueurs — teinte "danger" pour que ce soit
   impossible à manquer, comme les erreurs (--bad-text). */
.table-preview-banner { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 14px; background: rgba(224,138,114,.12); border-bottom: 1px solid var(--bad); color: var(--bad-text); font-size: var(--fs-md); }
.table-preview-banner b { color: var(--ink); }
.table-preview-banner .btn-edit { flex: none; }
/* Aperçu de SON PROPRE brouillon (pas encore publié) : teinte "attention"
   plutôt que "danger" — rien d'anormal, juste un rappel que les joueurs ne
   voient pas ça (contrairement à .table-preview-banner : là, une vraie
   différence entre ce que le MJ regarde et ce que voient les joueurs). */
/* Brouillon en attente dans le panneau de paramètres d'une scène. */
/* Poignée de réordonnancement des scènes (glisser-déposer). */
.table-scene-drag { flex: none; cursor: grab; color: var(--ink-dim); font-size: var(--fs-lg); }
/* Barre d'actions de la calibration de grille (startGridCalibration) :
   flottante en bas-centre, au-dessus du plateau, comme .table-zoom-ctrl. */
.table-calib-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: min(92vw, 560px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; box-shadow: var(--shadow); font-size: var(--fs-md); }
.table-calib-bar .btn-edit { flex: none; }
#tbl-draw-toggle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
background: var(--panel2); color: var(--ink); cursor: pointer; font-size: var(--fs-base); line-height: 1;
display: inline-flex; align-items: center; justify-content: center; flex: none; }
.table-draw-tool.active { border-color: var(--accent2); background: var(--accent2); color: var(--on-gold); }
.table-draw-sep { display: inline-block; width: 1px; height: 18px; background: var(--line); margin: 0 2px; vertical-align: middle; }
.table-draw-swatches { display: flex; gap: 4px; }
.table-draw-toolbar .table-color-swatch { width: 18px; height: 18px; }
.table-draw-toolbar .table-color-swatch.active { outline: 2px solid var(--accent2); outline-offset: 1px; }

/* Panneaux Joueurs/Chat : un seul élément qui se réduit à une bande de ~40px
   (juste le bouton) au lieu d'un tiroir + pastille séparés — "s'agrandit
   quand on clique dessus". Superposition sans fond assombri : le plateau
   reste visible/cliquable derrière un panneau ouvert. */
.table-overlay-panel { position: absolute; top: 0; bottom: 0; width: min(86vw, 300px); background: var(--panel); border: 1px solid var(--line); transition: width .22s ease, background .15s ease; overflow: hidden; display: flex; flex-direction: column; z-index: 15; }
.table-overlay-panel.left { left: 0; border-radius: 0 10px 10px 0; }
.table-overlay-panel.right { right: 0; border-radius: 10px 0 0 10px; }
.table-overlay-panel.collapsed { width: 40px; }
/* Replié, tout le bandeau est le bouton "agrandir" (bindPanelToggle,
   js/tables.js) — pas que la petite icône dedans, plus facile à retrouver
   et à viser (surtout au tactile). Le survol/focus le montre clairement. */
.table-overlay-panel.collapsed { cursor: pointer; }
.table-overlay-panel.collapsed:hover, .table-overlay-panel.collapsed:focus-within { background: var(--panel2); }
/* Le bouton est épinglé à un coin fixe DU PANNEAU (pas dans le flux du
   .table-overlay-head) : sa position à l'écran ne dépend ni de l'ordre du
   DOM ni de la largeur courante du panneau, donc jamais coupé par
   l'overflow:hidden une fois replié à 40px — quel que soit le côté. */
.table-overlay-toggle { position: absolute; top: 8px; z-index: 1; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); cursor: pointer; font-size: var(--fs-lg); }
.table-overlay-panel.left .table-overlay-toggle { left: 8px; }
.table-overlay-panel.right .table-overlay-toggle { right: 8px; }
.table-overlay-toggle:hover { border-color: var(--accent2); }
.table-overlay-head { flex: none; display: flex; align-items: center; height: 46px; padding: 8px 8px 8px 46px; min-width: 260px; }
.carnet-head { cursor: pointer; }
.carnet-head h2 { flex: 1; }
#tbl-chat-head { cursor: pointer; }
/* Nouveau message pendant que la discussion est repliée : surlignage discret
   du titre (le badge compteur couvre le cas du panneau entièrement replié). */
.table-overlay-head.chat-new { box-shadow: inset 3px 0 0 var(--accent2); }
.table-overlay-head.chat-new h2 { color: var(--accent2); }
.table-overlay-panel.right .table-overlay-head { padding: 8px 46px 8px 8px; }
.table-overlay-head h2 { margin: 0; font-size: var(--fs-lg); }
.table-overlay-body { flex: 1; min-width: 260px; overflow-y: auto; padding: 0 10px 10px; }
/* Panneau Discussion : partage automatique de la hauteur — chaque section
   visible (discussion, carnet, notes) prend sa part, listes défilantes,
   formulaires et titres toujours visibles, jamais de débordement. Replier
   une section (clic titre) rend sa place aux autres. */
#tbl-chat-panel > .table-overlay-body { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
#tbl-chat-body, #tbl-carnet-body, #tbl-notes-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#tbl-rolls, #tbl-carnet-list, #tbl-notes-list { flex: 1 1 auto; min-height: 60px; max-height: none; overflow-y: auto; }
#tbl-chat-panel .table-chat-form { flex: none; }
#tbl-chat-panel .table-overlay-head { flex: none; }
#tbl-chat-panel #tbl-dice-error:empty { display: none; }
/* Titres Discussion / Carnet / Notes : même alignement, sans icônes, sans le
   soulignement global de #view h2 (largeurs incohérentes sinon). */
#tbl-chat-head h2, #tbl-carnet-head h2, #tbl-notes-head h2 { margin: 0; padding-bottom: 0; font-size: var(--fs-lg); font-weight: 700; flex: 1; border-bottom: none; }
.table-overlay-badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--bad); color: var(--on-accent); font-size: var(--fs-2xs); line-height: 15px; text-align: center; font-weight: 700; box-shadow: 0 0 0 2px var(--panel); }

/* Contrôle de zoom : petite barre flottante, toujours au centre-bas, hors
   des panneaux latéraux quel que soit leur état. */
.table-zoom-ctrl { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; box-shadow: var(--shadow); }
.table-zoom-ctrl button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); cursor: pointer; font-size: var(--fs-base); line-height: 1; }
.table-zoom-ctrl button.active { background: var(--accent2); border-color: var(--accent2); color: var(--on-gold); }
.table-zoom-ctrl input[type="range"] { width: 100px; }

.table-player-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; }
.table-player-name { font-size: var(--fs-md); display: flex; align-items: center; gap: 6px; }
.table-presence-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: 1px solid var(--muted); flex: none; }
.table-presence-dot.on { background: var(--online); border-color: var(--online); box-shadow: 0 0 0 2px rgba(76,175,121,.25); }
/* Description du profil : zone à défilement au-delà d'environ 6 lignes
   (sinon la carte Profil s'allonge indéfiniment). pre-line pour honorer les
   retours à la ligne saisis dans le champ, scrollbar seulement si besoin. */
.desc-scroll { max-height: 9em; overflow-y: auto; white-space: pre-line; }
/* Jauge disque du pilotage MJ. */
.storage-bar { height: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: 8px 0; }
.storage-bar > div { height: 100%; background: var(--online); }
/* Écran MJ : grille de cartes défilante (même coquille plein écran que le plateau). */
.table-mj-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; padding: 14px; align-content: start; }
/* Piste d'initiative (panneau Joueurs) : l'entrée courante ("à qui le tour ?")
   ressort, le reste suit les cartes joueur. */
.table-init-row { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; margin-bottom: 6px; font-size: var(--fs-md); }
.table-init-row.current { border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(201,161,74,.25); }
.table-init-score { font-weight: bold; min-width: 28px; text-align: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 1px 6px; }
.table-init-row.current .table-init-score { background: var(--accent2); border-color: var(--accent2); color: var(--on-gold); }
.table-init-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-init-turn { color: var(--accent2); }
.table-init-actions { display: flex; gap: 4px; }
.table-init-actions-bar { display: flex; gap: 6px; margin: 2px 0 8px; }
/* Entrées secrètes (🔒) : visibles du MJ et de leur auteur uniquement. */
.table-roll-secret { border-left: 3px solid #7a6bb0; padding-left: 6px; }
.wiki-sec-title { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1.5px; margin: 12px 6px 4px; }
.wiki-link { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--ink-dim); border-radius: 7px; padding: 7px 9px; cursor: pointer; font-size: var(--fs-md); }
.wiki-link:hover { background: var(--panel2); color: var(--ink); }
.wiki-link .em { margin-right: 6px; }
#wiki-art { scroll-margin-top: calc(var(--topbar-h, 57px) + 12px); }
.wiki-article { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; min-height: 60vh; min-width: 0; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.wiki-article h2 { color: var(--accent2); margin-top: 0; }
.wiki-art-title { font-size: var(--fs-3xl); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px; }
.wiki-article mark { background: rgba(201,161,74,.28); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.pwd-row { display: flex; gap: 6px; align-items: stretch; }
.pwd-row input { flex: 1; }
.pwd-eye { flex: 0 0 auto; padding: 0 12px; }
.wiki-article h3 { color: var(--accent2); border-bottom: 1px solid var(--line); padding-bottom: 5px; margin-top: 22px; font-size: var(--fs-xl); }
.wiki-article h4 { color: var(--ink); margin: 14px 0 4px; font-size: var(--fs-base); }
.wiki-article p { margin: 8px 0; }
.wiki-article ul, .wiki-article ol { margin: 8px 0; padding-left: 22px; }
.wiki-article li { margin: 3px 0; }
.w-intro { color: var(--ink-dim); font-style: italic; }
.w-note { background: var(--panel2); border-left: 3px solid var(--accent2); padding: 8px 12px; border-radius: 6px; font-size: var(--fs-md); }
.w-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: var(--fs-md); }
.w-table th, .w-table td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; vertical-align: top; }
.w-table th { background: var(--panel2); color: var(--ink); font-weight: 700; }
.w-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.w-steps { padding-left: 20px; }
.w-steps li { margin: 4px 0; }
.w-monsters { padding-left: 18px; }
.w-monsters li { margin: 5px 0; }
.w-monsters b { color: var(--accent-text); }
.w-stat { display:block; font-size:.82em; color:var(--ink-dim); opacity:.85; margin-top:.25rem; font-style:italic; }
.w-img { display:block; max-width:100%; height:auto; border-radius:8px; border:1px solid var(--line); margin:10px 0; }
.w-gallery { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.w-gallery img { width:calc(50% - 5px); max-width:100%; height:auto; border-radius:8px; border:1px solid var(--line); }
.w-gallery .w-full { width:100%; }
/* Deux blocs côte à côte (texte/image, etc.), largeur réglable en % sur chaque .w-col. */
.w-row { display:flex; gap:12px; align-items:flex-start; margin:12px 0; }
.w-col { min-width:0; }
.w-chip { display: inline-block; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; margin: 1px 2px; font-size: var(--fs-sm); }
.w-tag { display: inline-block; background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; }
.w-class { border: 1px solid var(--line); border-radius: 8px; padding: 10px 13px; margin: 10px 0; background: var(--bg2); }
.w-sub { margin: 6px 0; font-size: var(--fs-md); }
.w-sub ul { margin: 2px 0; }
.w-steps li { margin: 6px 0; }
@media (max-width: 760px) {
  .wiki-layout { grid-template-columns: 1fr; }
}

/* ===== Wiki édition ===== */
.wiki-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wiki-head-actions { display: flex; gap: 8px; padding-top: 6px; }
.btn-edit {
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 12px; font-size: var(--fs-md); cursor: pointer; font-weight: 600;
}
.btn-edit:hover { border-color: var(--accent); color: var(--accent-text); }
.btn-edit.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-edit.primary:hover { color: var(--on-accent); filter: brightness(1.1); }
.wiki-link-wrap { display: flex; align-items: center; gap: 4px; }
.wiki-link-wrap.active { background: var(--panel2); border-radius: 6px; }
.wiki-edit-btns { display: inline-flex; gap: 2px; margin-left: auto; }
.wbtn {
  background: var(--bg2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 5px; width: 24px; height: 24px; font-size: var(--fs-xs); cursor: pointer; padding: 0; line-height: 1;
}
.wbtn:hover { color: var(--accent-text); border-color: var(--accent); }
.wbtn.danger:hover { color: var(--bad-text-hover); border-color: var(--bad-text-hover); }
.wbtn:disabled { opacity: .3; cursor: default; }

/* ===== Modal ===== */
/* Modales et dialogues : au-dessus des fenêtres flottantes des tables (550-590), du menu
   contextuel (600) et des toasts (620) — sinon la fenêtre de progression ou une
   confirmation ouverte depuis une fiche de table passait dessous. */
#modal-root { position: fixed; inset: 0; z-index: 800; display: none; }
#modal-root.show { display: block; }
.modal-back { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.modal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(760px, 94vw); max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden;
}
.modal.modal-sm { width: min(380px, 92vw); }
/* Fenêtres de dialogue (confirmer / saisir / message) : au-dessus des autres fenêtres */
#dialog-root { position: fixed; inset: 0; z-index: 900; }
.dialog-msg { margin: 0; white-space: pre-line; }
.dialog-input { margin-top: 10px; }
.btn-edit.danger { background: var(--bad); border-color: var(--bad); color: var(--on-accent); }

/* Indicateur de sauvegarde de la fiche */
.save-status { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.save-status.ok { color: var(--good); }
.save-status.error { color: var(--bad-text); }
.save-status button { background: none; border: 1px solid currentColor; color: inherit; border-radius: 6px; padding: 1px 8px; font-size: var(--fs-sm); cursor: pointer; font-family: inherit; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: var(--fs-xl); }
.modal-x { background: none; border: none; color: var(--muted); font-size: var(--fs-2xl); cursor: pointer; }
.modal-x:hover { color: var(--bad-text-hover); }
.modal-body { padding: 14px 16px; overflow: auto; }
.modal-body label { display: block; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 10px 0 4px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.ed-input {
  width: 100%; background: var(--bg2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 7px; padding: 8px 10px; font-size: var(--fs-base); font-family: inherit;
}
.ed-input:focus { border-color: var(--accent); }
.ed-block { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 8px 0; background: var(--bg2); }
.ed-textarea { width: 100%; min-height: 90px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 8px; font-family: ui-monospace, "Courier New", monospace; font-size: var(--fs-md); resize: vertical; }

/* ===== Éditeur structuré des données ===== */
.modal-xl { width: min(1120px, 96vw); }
.re-layout { display: flex; gap: 14px; align-items: flex-start; }
.re-side { width: 200px; flex: none; display: flex; flex-direction: column; gap: 4px; }
.re-cat { text-align: left; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 7px 10px; cursor: pointer; font-size: var(--fs-md); }
.re-cat:hover { border-color: var(--accent); color: var(--accent-text); }
.re-main { flex: 1; min-width: 0; max-height: 64vh; max-height: 64dvh; overflow: auto; }
.re-sub { margin: 4px 0 4px 14px; border-left: 2px solid var(--line); padding-left: 10px; }
.re-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 8px 0; background: var(--bg2); }
.re-item > div:first-child { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 6px; }
.re-line { display: flex; gap: 6px; margin: 4px 0; }
.re-line .ed-input { flex: 1; }
.re-ent { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.re-formcard { border: 1px solid var(--accent); border-radius: 8px; padding: 10px; margin-top: 8px; background: var(--bg2); }

/* ===== Infobulles (survol) ===== */
.tip { position: fixed; z-index: 1000; display: none; max-width: 320px; pointer-events: none;
  background: var(--panel); color: var(--ink); border: 1px solid var(--accent);
  border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 28px rgba(0,0,0,.45); font-size: var(--fs-md); line-height: 1.45; }
.tip-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 4px; }
.tip-tag { display: inline-block; font-size: var(--fs-xs); color: var(--accent-text); border: 1px solid var(--accent);
  border-radius: 999px; padding: 1px 8px; margin-bottom: 6px; }
.tip-row { margin: 5px 0; }
.tip-warn { color: #ffb454; font-weight: 600; }

/* ===== Fiche : bandeau de synthèse + onglets (Combat / Personnage / Inventaire) =====
   Le bandeau reste collé sous la barre du haut (ou en haut de la fenêtre de
   fiche d'une table) ; sous 760 px il défile avec la page pour ne pas manger l'écran. */
.fiche-synthese { position: sticky; top: var(--topbar-h, 57px); z-index: 12; background: var(--bg); margin: 0 0 14px; padding: 8px 0 0; border-bottom: 1px solid var(--line); }
body:has(#owner-banner:not([hidden])) .fiche-synthese { top: calc(var(--topbar-h, 57px) + 56px); }
.fs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.fs-head { gap: 4px 12px; }
.fs-head .avatar-thumb { flex: none; }
.fs-name { margin: 0 !important; font-size: var(--fs-3xl) !important; }
.fs-sub { flex: 1 1 160px; min-width: 0; }
.fs-pa { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fs-vitals { gap: 8px 22px; }
.fs-vital { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.fs-lbl { font-weight: 700; color: var(--accent2); font-size: var(--fs-base); }
.ev-bar { width: 96px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ev-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.fs-chips { gap: 6px 8px; }
.fs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); font-size: var(--fs-md); }
.fs-chip.bad { color: var(--bad-text); border-color: var(--bad); }
.fs-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fiche-synthese > .roll-result { margin: 0 0 8px; }
.fiche-tabs { display: flex; gap: 4px; margin-top: 2px; }
.fiche-tab { padding: 8px 16px; border: 1px solid transparent; border-bottom: none; border-radius: 9px 9px 0 0; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.fiche-tab:hover { color: var(--ink); }
.fiche-tab.active { background: var(--panel); border-color: var(--line); color: var(--accent2); margin-bottom: -1px; }
.fiche-panel { min-width: 0; }
.fiche-panel .card, .fiche-panel .grid { margin-bottom: 14px; }
.fiche-panel .grid .card { margin-bottom: 0; }
/* Dans une fenêtre de table : bandeau collé en haut du corps (qui défile), bord à bord. */
.table-win-body .fiche-synthese { top: 0; margin: 0 -14px 12px; padding: 8px 14px 0; background: var(--panel); }
.table-win-body .fs-name { font-size: var(--fs-2xl) !important; }
.fiche-tab { white-space: nowrap; }
/* Bandeau compact (fenêtre de table, mobile) : EV et Fracture côte à côte, boutons de PA et sous-titre masqués.
   Dupliqué ci-dessous pour #view sous @media (max-width:760px) — activations différentes (largeur fixe de la
   fenêtre vs largeur de viewport), donc pas fusionnable en un seul sélecteur ; garder les deux en phase. */
.table-win-body .fs-sub { display: none; }
.table-win-body .fs-vitals { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.table-win-body .fs-vital { flex-direction: column; align-items: flex-start; gap: 2px; }
.table-win-body .fs-vital .stepper input { width: 46px; padding: 4px 2px; }
.table-win-body .fs-vital .step { width: 24px; height: 24px; }
.table-win-body .ev-bar { width: 100%; }
.table-win-body .fiche-tab { padding: 6px 10px; font-size: var(--fs-md); }
@media (max-width: 760px) {
  .fiche-synthese, body:has(#owner-banner:not([hidden])) .fiche-synthese { position: static; }
  .fiche-tab { flex: 1; padding: 8px 4px; text-align: center; font-size: var(--fs-md); }
  /* Miroir de .table-win-body .fs-* ci-dessus : garder les deux en phase. */
  #view .fs-sub { display: none; }
  #view .fs-vitals { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  #view .fs-vital { flex-direction: column; align-items: flex-start; gap: 2px; }
  #view .fs-vital .stepper input { width: 52px; }
  #view .ev-bar { width: 100%; }
  #view .fs-chip .roll-btn { padding: 0 6px; }
}

/* ===== Fiche : niveau, steppers, blessures segmentées ===== */
.fiche-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.lvl-box { font-size: var(--fs-md); font-weight: 400; color: var(--muted); margin-right: 4px; }
.lvl-box b { color: var(--accent-text); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper input { width: 64px; text-align: center; background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 6px 4px; }
.step { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); cursor: pointer; font-size: var(--fs-xl); line-height: 1; }
.step:hover { border-color: var(--accent); color: var(--accent-text); }
.seg-group { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.seg { font-size: var(--fs-sm); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg2); color: var(--muted); cursor: pointer; }
.seg:hover { border-color: var(--accent); }
.seg.sel { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } /* texte sombre sur rouille : 3,5:1 seulement */

/* Poupée de blessures (test) — images officielles du mod, teintées par-dessus
   (masque = silhouette de l'image, fondu "multiply" : le blanc de l'image
   prend la couleur de l'état, le contour noir reste noir). */
.corps-doll { position: relative; width: 340px; max-width: 100%; aspect-ratio: 380 / 930; margin: 0 auto; }
.corps-part-img { position: absolute; cursor: pointer; transition: opacity .15s; }
.corps-part-img.corps-hover { opacity: .85; }
/* -webkit-user-drag/user-select : les images de la poupée se chevauchent en une
   zone dense (une dizaine sous le curseur par membre) — sans ça, le drag natif
   d'une <img> s'amorce au moindre frémissement du pointeur (souris ou pavé
   tactile) et avale la molette tant qu'il n'est pas relâché : on ne peut plus
   scroller la fiche dès que le curseur passe sur le corps. Même correctif déjà
   appliqué aux images du wiki (#ed-content img) pour la même raison. */
.corps-part-img img, .corps-part-img .corps-tint { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-drag: none; user-drag: none; user-select: none; }
.corps-part-img .corps-tint { mask-size: contain; mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mix-blend-mode: multiply; }
.corps-symbole { position: absolute; transform: translate(-50%, -50%); font-size: var(--fs-lg); font-weight: 700; color: rgba(0,0,0,.7); text-shadow: 0 0 3px rgba(255,255,255,.7); pointer-events: none; user-select: none; }
.corps-legende { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.corps-legende-item { display: flex; align-items: center; gap: 5px; }
.corps-legende-swatch { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; font-size: var(--fs-sm); color: rgba(0,0,0,.65); }

/* Tables de JDR — plateau (fond d'écran + jetons + dessin), rendu par Konva
   (js/tables.js, initStage()) sur un <canvas> — plus de DOM/CSS par jeton. */
.table-bg-history { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.table-bg-history img { width: 90px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.table-media-item { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.media-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.media-lib-item { width: 118px; }
.media-lib-item .media-lib-meta { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-lib-actions { display: inline-flex; gap: 4px; align-items: center; justify-content: center; flex-wrap: wrap; }
.table-rolls { max-height: 220px; overflow-y: auto; }
.table-chat-form { display: flex; gap: 6px; margin-top: 8px; }
.table-chat-form input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 7px 9px; font: inherit; font-size: var(--fs-md); }
.table-color-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 6px; }
.table-color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.table-color-swatch:hover, .table-color-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Fenêtres flottantes de fiche (ouvertes depuis un jeton ou le panneau
   Joueurs) — plusieurs en même temps, déplaçables, réductibles. z-index
   550+ : au-dessus du plateau, sous .corps-popup (900) pour que la popup
   de blessure d'une fenêtre reste visible par-dessus. */
#table-windows-layer { position: fixed; inset: 0; pointer-events: none; z-index: 550; }
/* Message temporaire avec action (« ↶ Annuler »). */
.table-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 620; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 520px); padding: 9px 12px; background: var(--panel); border: 1px solid var(--accent2); border-radius: 12px; box-shadow: var(--shadow); font-size: var(--fs-md); }
.table-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.table-toast .btn-edit { flex: none; }
.table-toast-x { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: var(--fs-base); padding: 4px; }
.table-toast-x:hover { color: var(--ink); }
/* Bestiaire du MJ (fenêtre flottante). */
#tbl-bestiary-search { width: 100%; }
.bestiary-table { margin: 12px 0 4px; color: var(--accent2); font-size: var(--fs-base); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.bestiary-row { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.bestiary-info { min-width: 0; overflow-wrap: anywhere; }
.bestiary-stat { color: var(--ink-dim); margin-top: 2px; }
.bestiary-row .btn-edit { flex: none; }
.random-result { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--accent2); border-radius: 6px; background: var(--panel2, transparent); }
.random-result b { font-size: var(--fs-lg); }
.random-entries { margin: 8px 0 0; padding-left: 18px; }
#tbl-random-text { width: 100%; box-sizing: border-box; font-family: inherit; }
/* Image montrée par le MJ : par-dessus tout le plateau et ses fenêtres. */
#table-handout { position: fixed; inset: 0; z-index: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: rgba(8,6,5,.88); }
.table-handout-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.table-handout-fig img { max-width: min(92vw, 1600px); max-height: 80vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.table-handout-fig figcaption { color: var(--ink); font-size: var(--fs-xl); text-align: center; max-width: 80ch; overflow-wrap: anywhere; }
.table-handout-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.table-win { position: fixed; width: 420px; max-width: calc(100vw - 16px); max-height: 80vh;
  display: flex; flex-direction: column; pointer-events: auto;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55); overflow: hidden; }
.table-win-head { display: flex; align-items: center; gap: 4px; padding: 8px 10px;
  background: var(--panel2); border-bottom: 1px solid var(--line); cursor: grab; user-select: none; flex: none; }
.table-win-head:active { cursor: grabbing; }
.table-win-title { flex: 1; font-weight: 700; color: var(--accent2); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-win-min, .table-win-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: var(--fs-lg); line-height: 1; padding: 3px 7px; border-radius: 6px; }
.table-win-min:hover, .table-win-close:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.table-win-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 14px 14px; }
/* Poignée de redimensionnement (souris + tactile) : la taille est mémorisée
   par fiche comme la position. Masquée en mode réduit (180px forcés). */
.table-win-resize { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; cursor: nwse-resize; touch-action: none; }
.table-win-resize::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); border-bottom-right-radius: 5px; }
.table-win.minimized .table-win-resize { display: none; }
/* Le gabarit fiche à deux colonnes n'a pas la place dans une fenêtre de
   420px : on réutilise l'empilement déjà prévu pour mobile. */
.table-win-body .fiche-body-layout { display: block; }
.table-win-body .fiche-blessures-col { margin-top: 26px; }
.table-win.minimized { width: 180px; height: 40px; cursor: pointer; }
.table-win.minimized .table-win-body { display: none; }

/* z-index 900 : au-dessus des fenêtres flottantes de fiche (.table-win,
   550+), sinon la popup ouverte depuis la poupée d'une fenêtre se
   retrouverait cachée derrière son propre contenu. */
.corps-popup { position: fixed; z-index: 900; display: none; width: 210px; max-width: calc(100vw - 16px);
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.corps-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; color: var(--accent2); margin-bottom: 8px; font-size: var(--fs-base); }
.corps-popup-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: var(--fs-lg); line-height: 1; padding: 2px 4px; }
.corps-popup-x:hover { color: var(--ink); }
.corps-popup .seg-group { display: flex; flex-direction: column; gap: 4px; }
.corps-popup .seg { width: 100%; text-align: left; }

.lv-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.lv-row > span { flex: 1; font-size: var(--fs-base); }
.lv-row select { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px; }
.lv-row .btn-edit:disabled { opacity: .4; cursor: default; }
.ed-name { cursor: text; border-bottom: 1px dashed var(--line); padding: 0 2px; }
.ed-name:hover { border-color: var(--accent); color: var(--accent-text); }
.ed-name-input { font-size: var(--fs-4xl); font-weight: 700; background: var(--bg); border: 1px solid var(--accent); color: var(--ink); border-radius: 7px; padding: 2px 8px; }
.bg-line { margin: 6px 0; line-height: 1.5; }
.comp-badge { cursor: pointer; font-family: inherit; line-height: inherit; }
/* Jets cliquables de la fiche : 🎲 à côté d'une caractéristique / compétence,
   résultat affiché dans la carte, mini-menu de choix de la caractéristique. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.comp-pair { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; margin: 0 4px 4px 0; }
.roll-btn { padding: 2px 6px; line-height: 1.2; }
.carac-table .roll-cell { width: 1%; text-align: right; }
.roll-result { margin-top: 8px; padding: 6px 10px; border-left: 3px solid var(--accent2); background: var(--panel2); border-radius: 6px; }
.pick-menu { position: fixed; z-index: 700; display: flex; flex-direction: column; gap: 4px; min-width: 200px; max-width: calc(100vw - 16px); padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pick-menu .btn-edit { text-align: left; }
.comp-badge b { opacity: .6; margin-left: 2px; }
.comp-badge:hover { border-color: var(--bad); }
.dice-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dice-row input { width: 60px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 6px; }
.die { min-width: 42px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); cursor: pointer; font-weight: 700; }
.die:hover { border-color: var(--accent); color: var(--accent-text); }
.dice-result { margin-top: 10px; font-size: var(--fs-lg); }
.classe-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.classe-emoji { font-size: var(--fs-3xl); }
.classe-nom { font-size: var(--fs-2xl); font-weight: 700; cursor: help; }
.classe-nom:hover { color: var(--accent-text); }
.classe-bonus { margin: 4px 0 0 18px; padding: 0; }
.classe-bonus li { margin: 2px 0; }

/* ===== Éditeur wiki WYSIWYG ===== */
#ed-content.drag { outline: 2px dashed var(--accent); background: var(--bg); }
#ed-content img, #wiki-art img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 8px 0; }
#ed-content img.align-left, #wiki-art img.align-left { float: left; max-width: 45%; margin: 6px 14px 6px 0; }
#ed-content img.align-right, #wiki-art img.align-right { float: right; max-width: 45%; margin: 6px 0 6px 14px; }
#ed-content img.align-center, #wiki-art img.align-center { display: block; margin: 10px auto; }
#ed-content img.align-full, #wiki-art img.align-full { display: block; width: 100%; }
#ed-content img:hover { outline: 2px solid var(--accent); cursor: pointer; }
#ed-content img { -webkit-user-drag: none; user-drag: none; }
#ed-content:focus { outline: none; box-shadow: 0 0 0 2px rgba(201,161,74,.35); }

.w-link { color: var(--accent-text); text-decoration: underline; cursor: pointer; border: none; background: none; font: inherit; padding: 0; }
.w-link:hover { color: var(--accent2); }
.w-also { margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: var(--fs-base); color: var(--muted); }

.img-toolbar { position: fixed; z-index: 1200; display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; padding: 3px; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.img-toolbar button { width: 30px; height: 28px; border: none; background: var(--panel2); color: var(--ink); border-radius: 6px; cursor: pointer; font-size: var(--fs-base); }
.img-toolbar button:hover { background: var(--accent); color: var(--on-accent); }

/* ===== Menu du wiki en mode édition ===== */
.wiki-sec-edit { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.wiki-sec-edit .wbtn { opacity: .55; }
.wiki-sec-edit:hover .wbtn, .wiki-sec-edit .wbtn:focus-visible { opacity: 1; }
.wiki-grip { color: var(--muted); cursor: grab; font-size: var(--fs-xs); letter-spacing: -2px; padding: 0 2px 0 4px; user-select: none; }
.wiki-link-wrap[draggable="true"] { border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.wiki-link-wrap.dragging { opacity: .4; }
.wiki-link-wrap.drop-before { border-top-color: var(--accent2); }
.wiki-link-wrap.drop-after { border-bottom-color: var(--accent2); }
.wiki-sec-title.drop-into, .wiki-add-page.drop-into { color: var(--accent2); outline: 1px dashed var(--accent2); border-radius: 6px; }
.wiki-add-page { display: block; width: 100%; text-align: left; background: none; border: 1px dashed transparent; color: var(--muted); border-radius: 7px; padding: 5px 9px; margin: 2px 0 6px; cursor: pointer; font-size: var(--fs-sm); font-family: inherit; }
.wiki-add-page:hover { color: var(--accent2); border-color: var(--line); }
.wiki-add-sec { margin-top: 12px; border-color: var(--line); }

/* ===== Éditeur du wiki (fenêtre plein écran) ===== */
.modal.wed { top: 0; left: 0; transform: none; width: 100%; height: 100%; max-height: none; border: none; border-radius: 0; }
.wed-head { display: flex; align-items: center; gap: 12px; padding: 10px clamp(12px, 3vw, 28px); background: var(--bg2); border-bottom: 1px solid var(--line); }
.wed-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.wed .wed-section { width: auto; background: var(--panel); color: var(--ink-dim); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: var(--fs-md); max-width: 40%; }
.wed-sep { color: var(--muted); }
.wed-crumb-title { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wed-status { font-size: var(--fs-sm); color: var(--accent2); white-space: nowrap; }
.wed-meta { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.wed-meta.warn { color: var(--bad-text); }
.wed-lock { font-size: var(--fs-sm); }
.wed-hidden-toggle {
  flex: none; background: var(--panel2); color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 12px; font-size: var(--fs-md); cursor: pointer; font-weight: 600; white-space: nowrap;
}
.wed-hidden-toggle:hover { border-color: var(--accent2); color: var(--accent2); }
.wed-hidden-toggle.mj { background: rgba(181,70,47,.16); border-color: var(--accent); color: var(--accent-text); }
.wed-actions { display: flex; gap: 8px; }
.wed-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px clamp(12px, 3vw, 28px); background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.wed .wed-type { width: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; font: inherit; font-size: var(--fs-md); }
.wed-tsep { width: 1px; align-self: stretch; background: var(--line); margin: 3px 6px; flex: none; }
.wed-tb { flex: none; min-width: 32px; height: 32px; padding: 0 7px; background: none; border: 1px solid transparent; border-radius: 7px; color: var(--ink-dim); font-size: var(--fs-base); cursor: pointer; font-family: inherit; }
.wed-tb:hover { background: var(--panel2); color: var(--ink); }
.wed-tb[aria-pressed="true"] { background: var(--panel2); border-color: var(--line); color: var(--accent2); }
.wed-tb:disabled { opacity: .35; cursor: default; background: none; }
.wed-search { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px clamp(12px, 3vw, 28px); background: var(--bg); border-bottom: 1px solid var(--line); }
.wed-search-input { flex: 1; min-width: 120px; max-width: 260px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: var(--fs-md); }
.wed-search-count { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; min-width: 62px; }
.wed-scroll { flex: 1; overflow-y: auto; padding: 24px clamp(8px, 3vw, 28px) 40vh; }
.wed-page.wiki-article { max-width: 980px; margin: 0 auto; padding: 26px 34px 40px 58px; min-height: 70vh; }
.wed .wed-title { width: 100%; background: none; border: none; border-radius: 0; outline: none; color: var(--accent2); font: inherit; font-size: var(--fs-5xl); font-weight: 700; padding: 0 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.wed-title::placeholder { color: var(--muted); opacity: .6; }
.wed-content { outline: none; min-height: 40vh; }
.wed-content:focus { box-shadow: none; }
.wed-content > *, .wed-content .w-col > * { position: relative; }
.wed-content [data-ph]::before { content: attr(data-ph); position: absolute; left: 0; color: var(--muted); opacity: .7; pointer-events: none; font-style: normal; font-weight: 400; }
.wed-content .w-note[data-ph]::before { left: 12px; }
.wed-content .w-col > [data-ph]::before { right: 0; }
.wed-content hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.wed-content table { display: block; overflow-x: auto; }
.wed-content td:focus-within, .wed-content th:focus-within { outline: 1px solid var(--accent2); outline-offset: -1px; }
.wed-content .wed-dragging { opacity: .35; }
.wed-content img[data-upload] { min-height: 90px; min-width: 120px; background: var(--panel2); opacity: .55; }
.wed-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 8px 12px; border: 1px solid var(--accent2); border-radius: 8px; background: var(--panel2); font-size: var(--fs-md); }
.wed-draft span { flex: 1 1 260px; }

/* Bloc fixe (données du jeu) inséré au milieu d'une page générée : non éditable,
   seul le bouton en donne l'accès (à l'éditeur structuré des données). */
.wed-gen-preview { margin: 6px 0; border: 1px dashed var(--line); border-radius: 10px; padding: 4px 16px 14px; background: var(--bg2); cursor: default; user-select: none; }
.wed-gen-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 0; font-size: var(--fs-sm); color: var(--muted); }
.wed-gen-body .w-table { font-size: var(--fs-sm); }

/* Puce ⋮⋮▲▼ ancrée au coin haut-droit du bloc (survol souris, ou curseur/tap
   au tactile) — un seul élément partagé, jamais injecté dans #ed-content. */
.wed-handle { position: fixed; z-index: 12; display: flex; gap: 1px; padding: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.wed-handle-btn { width: 24px; height: 24px; padding: 0; border: none; border-radius: 5px; background: none; color: var(--muted); font-size: var(--fs-xs); line-height: 1; cursor: pointer; font-family: inherit; }
.wed-handle-btn:hover { background: var(--panel2); color: var(--ink); }
.wed-handle-btn:disabled { opacity: .35; cursor: default; }
.wed-handle-grip { cursor: grab; touch-action: none; font-size: var(--fs-sm); letter-spacing: -2px; }
.wed-handle-grip:active { cursor: grabbing; }
.wed-drop { position: fixed; z-index: 6; height: 3px; border-radius: 2px; background: var(--accent2); pointer-events: none; }
.wed-drop-col { position: fixed; z-index: 6; background: rgba(201,161,74,.16); border: 2px dashed var(--accent2); border-radius: 6px; pointer-events: none; }
.wed-drop-col::after { content: "◧ Côte à côte"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 3px 8px; background: var(--panel); border: 1px solid var(--accent2); border-radius: 6px; font-size: var(--fs-sm); color: var(--accent2); white-space: nowrap; }
.wed-collabel { position: fixed; z-index: 15; padding: 3px 7px; background: var(--panel); border: 1px solid var(--accent2); border-radius: 6px; font-size: var(--fs-sm); color: var(--accent2); pointer-events: none; box-shadow: 0 3px 10px rgba(0,0,0,.35); white-space: nowrap; }
.w-col-divider { flex: 0 0 8px; align-self: stretch; cursor: col-resize; touch-action: none; position: relative; }
.w-col-divider::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 3px; width: 2px; border-radius: 1px; background: var(--line); }
.w-col-divider:hover::after { background: var(--accent2); }

.wed-pop { position: fixed; z-index: 20; width: 290px; max-width: calc(100vw - 16px); max-height: min(360px, 60vh); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.55); padding: 6px; }
.wed .wed-pop-input { width: 100%; margin-bottom: 6px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 7px 9px; font: inherit; font-size: var(--fs-md); }
/* Menu contextuel des tables : au-dessus des fenêtres flottantes (menu MJ, fiches), sinon un ⋯ ouvert dans une fenêtre s'afficherait derrière elle. */
.table-pop { z-index: 600; }
.wed-pop-input:focus { border-color: var(--accent); outline: none; }
.wed-pop-head { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 6px 8px 3px; }
.wed-pop-sep { height: 1px; background: var(--line); margin: 5px 2px; }
.wed-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: 7px; color: var(--ink); padding: 6px 8px; cursor: pointer; font: inherit; font-size: var(--fs-md); }
.wed-pop-item.active, .wed-pop-item:focus-visible { background: var(--panel2); outline: none; }
.wed-pop-item:disabled { opacity: .35; cursor: default; }
.wed-pop-item.danger { color: var(--bad-text); }
.wed-pop-item .ic { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--bg2); font-size: var(--fs-md); font-weight: 700; color: var(--accent2); }
.wed-pop-item .lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wed-pop-item .lb small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.wed-pop-item kbd { font-family: ui-monospace, monospace; font-size: var(--fs-xs); color: var(--muted); }
.wed-pop-item .ck { color: var(--accent2); }
.wed-pop-empty { padding: 8px; color: var(--muted); font-size: var(--fs-md); }

.wed-bubble, .wed-tablebar { position: fixed; z-index: 15; display: flex; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--accent2); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.wed-bubble .wed-tb { min-width: 30px; height: 30px; }
.wed-tablebar { flex-wrap: wrap; max-width: calc(100vw - 16px); }
.wed-tablebar button { background: var(--panel2); border: 1px solid transparent; color: var(--ink); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.wed-tablebar button:hover { border-color: var(--accent2); }
.wed-tablebar button[aria-pressed="true"] { color: var(--accent2); border-color: var(--line); }
.wed-tablebar button.danger:hover { border-color: var(--bad-text-hover); }
.wed .img-toolbar { z-index: 15; }
.img-toolbar button[aria-pressed="true"] { background: var(--accent2); color: var(--on-gold); }

.wed-inlinebar { position: fixed; z-index: 15; display: flex; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--accent2); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.wed-inlinebar button { background: var(--panel2); border: 1px solid transparent; color: var(--ink); border-radius: 6px; padding: 5px 9px; font: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.wed-inlinebar button:hover { border-color: var(--accent2); }
.wed-inlinebar [data-inline="remove"]:hover { color: var(--bad-text-hover); border-color: var(--bad-text-hover); }

/* Badge 🔒 dans le menu du wiki, sur une page réservée au MJ */
.wiki-hidden-badge { font-size: var(--fs-xs); }

/* ===== Compte : connexion / inscription / personnages ===== */
#auth-root { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.auth-box { position: relative; width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); }
.auth-box h2 { color: var(--accent2); font-size: var(--fs-2xl); margin: 14px 0 10px; }
.auth-box .brand { text-align: center; }
.auth-error { color: var(--bad-text); font-size: var(--fs-md); min-height: 1.2em; margin: 6px 0; }
.form-ok { color: var(--good); font-size: var(--fs-md); min-height: 1.2em; margin: 6px 0; }
#topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px clamp(16px, 4vw, 40px); background: var(--bg2); border-bottom: 1px solid var(--line); }
#topbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
#topbar-actions .side-btn { display: inline-block; width: auto; margin: 0; padding: 7px 12px; }
#topbar-actions .side-btn.active { border-color: var(--accent2); color: var(--accent2); }
.brand-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; text-align: left; }
.brand-link:hover { color: var(--accent2); }
.topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar-left .save-status { margin: 0; }
/* Reste visible en défilant : on modifie la fiche de quelqu'un d'autre. */
#owner-banner { position: sticky; top: calc(var(--topbar-h, 57px) + 6px); z-index: 20; border: 1px solid var(--accent2); background: var(--panel); color: var(--accent2); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; font-size: var(--fs-base); box-shadow: var(--shadow); }
.detail-card { background: var(--bg2); }
.picker-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; }
.picker-item { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.picker-open { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; text-align: left; background: none; border: none; color: var(--ink); font-size: var(--fs-base); cursor: pointer; padding: 0; }
.picker-open:hover { color: var(--accent2); }

/* ===== Photo de personnage ===== */
.photo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 6px 0 12px; }
.photo-preview { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); }
.avatar-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); vertical-align: middle; margin-right: 10px; }

/* ===== Responsive (en fin de fichier pour primer sur les règles de base) ===== */
/* Entre 761 et ~1024px, .page-layout (barre de sections, 270px) ET
   .fiche-body-layout (colonne Blessures, 270px) sont tous les deux encore en
   grille côte à côte : la colonne principale de l'onglet Combat se retrouvait
   compressée à ~150-360px selon la largeur. On ne stack ici que la colonne
   Blessures (la barre de sections reste confortable seule jusqu'à 760px) —
   même repli qu'à 760px, juste déclenché plus tôt. */
@media (max-width: 1024px) {
  .fiche-body-layout { display: block; }
  .fiche-blessures-col { margin-top: 26px; }
}
@media (max-width: 760px) {
  /* Barre du haut sur une ligne */
  #topbar { flex-wrap: nowrap; padding: 8px 12px; }
  #topbar .brand { font-size: var(--fs-2xl); letter-spacing: 1px; }
  .topbar-left { gap: 10px; }

  /* Marge de sécurité en bas : sur certains navigateurs mobiles, la barre
     d'adresse/gestes masque les derniers pixels d'une page tout en la
     laissant "scrollée à fond" du point de vue du DOM — sans cette marge,
     la dernière section semble alors coupée. */
  #content { padding-bottom: max(48px, calc(env(safe-area-inset-bottom, 0px) + 32px)); }

  /* Sections du wiki et de la fiche : tiroir qui glisse depuis la gauche, sous la barre du haut */
  body.mode-fiche .page-layout { display: block; }
  .fiche-body-layout { display: block; }
  .fiche-blessures-col { margin-top: 26px; }
  .drawer-btn:not([hidden]) { display: inline-flex; }
  #wiki-nav, #nav.side-panel {
    position: fixed; top: var(--topbar-h, 57px); bottom: 0; left: 0; z-index: 45;
    width: min(86vw, 330px); max-height: none; margin: 0;
    border-left: none; border-radius: 0 14px 14px 0;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-104%); visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
  }
  #wiki-nav.open, #nav.side-panel.open {
    transform: none; visibility: visible; box-shadow: 14px 0 40px rgba(0, 0, 0, .55);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  }
  #wiki-nav:focus, #nav.side-panel:focus { outline: none; }
  .drawer-backdrop {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--topbar-h, 57px); z-index: 44;
    background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .28s ease;
  }
  body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }
  .drawer-head { display: block; padding: 4px 6px 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--accent2); }
  .drawer-search { display: block; margin-bottom: 4px; }

  /* Composants */
  .row { flex-direction: column; gap: 0; }
  .w-row { flex-direction: column; gap: 8px; }
  .w-col { width: 100% !important; }
  .w-col-divider { display: none; }
  .re-layout { flex-direction: column; }
  .re-side { width: auto; flex-direction: row; flex-wrap: wrap; }
  .re-main { max-height: none; }
  #ed-content img.align-left, #wiki-art img.align-left,
  #ed-content img.align-right, #wiki-art img.align-right { float: none; max-width: 100%; margin: 8px 0; }
  .wiki-article { padding: 16px; }

  /* Pas de zoom iOS au focus */
  input[type=text], input[type=number], input[type=password], input:not([type]), select, textarea,
  .ed-input, .ed-textarea, .stepper input, .dice-row input, .lv-input,
  .eq-item select, .eq-item input[data-eq-portee] { font-size: var(--fs-xl); }

  /* Cibles tactiles */
  .btn-edit { padding: 10px 14px; }
  .nav-btn { padding: 12px 12px; }
  .wbtn { width: 36px; height: 36px; font-size: var(--fs-base); }
  .step { width: 36px; height: 36px; }
  .seg { padding: 8px 10px; }
  .chip { padding: 9px 14px; }
  .modal-x { padding: 8px 10px; }
  .picker-open { padding: 8px 0; }
  .comp-badge { padding: 6px 10px; }
  .die { padding: 10px 12px; }
  .corps-popup-x { padding: 8px 10px; }
  .table-win-min, .table-win-close { padding: 8px 11px; }
  .table-overlay-toggle { width: 36px; height: 36px; }
  .table-zoom-ctrl button, .table-draw-tool { width: 32px; height: 32px; }

  /* Modales : en-tête toujours visible */
  .modal { top: 3vh; top: 3dvh; transform: translateX(-50%); max-height: 94vh; max-height: 94dvh; }

  /* Éditeur du wiki */
  .modal.wed { top: 0; transform: none; max-height: none; height: 100%; height: 100dvh; }
  .wed-head { flex-wrap: wrap; gap: 8px; }
  .wed-crumb { flex-basis: 100%; }
  .wed .wed-section { max-width: 60%; }
  .wed .wed-section, .wed .wed-type, .wed .wed-pop-input, .wed-search-input { font-size: var(--fs-xl); }
  .wed-actions { margin-left: auto; }
  .wed-tb { min-width: 38px; height: 38px; }
  .wed-page.wiki-article { padding: 16px 14px 30px; }
  .wed .wed-title { font-size: var(--fs-3xl); }
  .wed-pop-item { padding: 9px 8px; }
  .wed-tablebar { top: auto !important; bottom: 8px; left: 8px !important; right: 8px; max-width: none; justify-content: center; }
  .wed-tablebar button { padding: 8px 10px; }
  .img-toolbar button { width: 38px; height: 36px; }
  .wed-handle-btn { width: 36px; height: 36px; font-size: var(--fs-base); }
  .wed-hidden-toggle { padding: 9px 12px; }
  .wed-inlinebar button { padding: 8px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #wiki-nav, #nav.side-panel, .drawer-backdrop, .drawer-ico span { transition: none !important; }
}

@media (max-width: 480px) {
  #topbar-actions .lbl { display: none; }
  .save-status:not(.error) .st-text { display: none; }
  #topbar { gap: 6px; }
  #topbar .brand { font-size: var(--fs-xl); letter-spacing: .5px; white-space: nowrap; }
  .topbar-left { gap: 8px; }
  #topbar-actions { flex-wrap: nowrap; gap: 4px; }
  #topbar-actions .side-btn { padding: 8px 9px; font-size: var(--fs-xl); }
}

/* ===== Progression : panneau (PA, dépenses, journal) et écrans du MJ ===== */
.prog-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 8px; }
.prog-pa { font-size: var(--fs-lg); }
.prog-pa b { font-size: var(--fs-5xl); color: var(--accent2); margin-right: 4px; }
.prog-flash { color: var(--good); margin: 4px 0 8px; }
.prog-mj { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; border: 1px dashed var(--accent2); border-radius: 8px; }
.modal-body h5 { margin: 12px 0 4px; font-size: var(--fs-base); color: var(--accent2); }
.prog-carac { display: inline-flex; align-items: center; gap: 2px; }
.prog-talent-cats { display: flex; flex-direction: column; gap: 4px; }
.prog-talent-cat { border: 1px solid var(--line); border-radius: 8px; padding: 2px 10px; background: var(--panel2); }
.prog-talent-cat summary { cursor: pointer; padding: 6px 0; list-style: none; display: flex; align-items: baseline; gap: 6px; }
.prog-talent-cat summary::-webkit-details-marker { display: none; }
.prog-talent-cat summary::before { content: "▸"; color: var(--muted); }
.prog-talent-cat[open] summary::before { content: "▾"; }
.prog-talent-rows { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 10px; }
.prog-talent-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prog-talent-row.own { opacity: .85; }
.prog-talent-txt { display: flex; flex-direction: column; min-width: 0; }
.prog-talent-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prog-talent-row .btn-edit, .prog-talent-row .badge { white-space: nowrap; flex: none; }
.prog-journal { list-style: none; margin: 4px 0 0; padding: 0; max-height: 240px; overflow-y: auto; }
.prog-journal li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
.prog-when { color: var(--muted); font-size: var(--fs-sm); min-width: 70px; }
.prog-label { flex: 1 1 180px; }

/* Badge « rapport à la magie » d'une classe (wiki) */
.w-tag.w-magie { text-transform: none; }
.w-magie-majeur { color: #b9a3ff; border-color: #6b58b8; }
.w-magie-mineur { color: #e3c77a; border-color: #8a7433; }
.w-magie-aucun { color: var(--muted); }
.chip.locked { opacity: .45; cursor: not-allowed; }

/* Budget de points de caractéristiques (création) */
.car-budget { margin: 0 0 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); font-size: var(--fs-md); }
.car-budget.full { border-color: #4f8a4f; }
.car-budget.over { border-color: #b8783a; color: #e3b27a; }

/* Derniers jets de la fiche (sous les dés, onglet Combat) */
.derniers-jets { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.derniers-jets summary { cursor: pointer; color: var(--ink-dim); }
.derniers-jets ul { list-style: none; margin: 6px 0 8px; padding: 0; max-height: 220px; overflow-y: auto; }
.derniers-jets li { padding: 3px 0; border-bottom: 1px dashed var(--line); }

/* Notes du joueur (onglet Personnage) */
.fiche-notes { width: 100%; min-height: 96px; resize: vertical; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: var(--fs-base); line-height: 1.45; }
.fiche-notes:focus { border-color: var(--accent2); outline: none; }
.fiche-notes-print { white-space: pre-wrap; overflow-wrap: anywhere; }
.print-only { display: none; }

/* ===== Impression de la fiche (Ctrl+P, ou « 🖨 Imprimer la fiche ») =====
   Encre foncée sur papier blanc, les trois onglets à la suite, sans navigation, ni
   boutons, ni lanceur de dés ; la silhouette des blessures reste, en plus petit. */
@media print {
  :root {
    --bg: #fff; --bg2: #f2f2f2; --panel: #fff; --panel2: #f2f2f2;
    --ink: #111; --ink-dim: #333; --muted: #555; --line: #bbb;
    --accent: #8b2e1c; --accent-text: #8b2e1c; --accent2: #5c430c;
    --good: #2f6b1f; --bad: #9b2a17; --bad-text: #9b2a17; --bad-text-hover: #9b2a17;
    --shadow: none;
  }
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff; color: var(--ink); font-size: 10.5pt; }
  * { box-shadow: none !important; text-shadow: none !important; }
  #topbar, #fiche-panel, #owner-banner, #drawer-backdrop, #dialog-root, #modal-root, #table-toast,
  .fiche-tabs, #repos-card, #dice-card, .btn, .btn-edit, .wbtn, .roll-btn, .seg, .step, .roll-result, .no-print,
  [data-sctog], [data-shctog], [data-histog], .comp-badge b[aria-hidden] { display: none !important; }
  #content, #page, #view { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  body.mode-fiche .page-layout { display: block; }
  /* Les trois onglets à la suite, chacun sous son intitulé. */
  .fiche-panel[hidden] { display: block !important; }
  .print-only { display: block !important; }
  .fiche-panel::before { content: attr(data-titre); display: block; font-size: 13pt; font-weight: 700; color: var(--ink); border-bottom: 1.5pt solid var(--ink); padding-bottom: 2pt; margin: 12pt 0 6pt; break-after: avoid; }
  .fiche-body-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 150px; gap: 10pt; }
  .fiche-blessures-col { margin-top: 0 !important; }
  .corps-doll { width: 140px; }
  .card { background: none; border: .75pt solid var(--line); padding: 6pt 8pt; margin: 0 0 6pt; break-inside: avoid; }
  #view h1, #view h2, .card h3 { color: var(--ink); break-after: avoid; }
  #view h2 { margin-top: 10pt; }
  input, select, textarea { color: var(--ink) !important; background: none !important; border: none !important; padding: 0 !important; appearance: none; -webkit-appearance: none; }
  input[type="number"] { width: 3.2em !important; }
  a { color: inherit; text-decoration: none; }
  .ev-bar { border: .75pt solid var(--line); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .corps-doll, .corps-legende, .fs-chip { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Chronique de campagne (js/tables/chronicle.js) */
.chron-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.chron-tabs .active { border-color: var(--accent2); color: var(--ink); }
.chron-entry { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.chron-entry header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.chron-flash { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2); }
.chron-body { margin: 6px 0; white-space: pre-wrap; line-height: 1.5; }
.chron-liens { margin: 4px 0; }
.chron-lien { background: none; border: 0; padding: 0; color: var(--accent2); cursor: pointer; font: inherit; text-decoration: underline; }
.chron-entry footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chron-form label { display: block; margin-top: 6px; }
.chron-form textarea { width: 100%; box-sizing: border-box; }
.chron-refs { max-height: 150px; overflow-y: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: 6px; }
.chron-refs label { margin: 2px 0; }
.chron-terminee { color: var(--good-text); }
.chron-echouee { color: var(--bad-text); }

/* Icônes SVG (sprite en tête de index.html) : trait fin, en nuances de gris (la teinte du texte est
   passée en niveaux de gris, donc le contraste suit le fond du bouton) ; les détails du dessin sont
   à demi-opacité. */
.ico { width: 1em; height: 1em; vertical-align: -.125em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; filter: grayscale(1); pointer-events: none; }
button:disabled > .ico { opacity: .5; }