/* Pages ouvertes à la troupe : elle lit, elle ne corrige rien et ne pose rien.
   Les valeurs cliquables sont déjà muettes pour elle (voir champVif dans editor.js). */
body.vue-joueur .cat-tools,body.vue-joueur .pose-nombre,body.vue-joueur #hero-add,
body.vue-joueur #bestiary-add,body.vue-joueur .cat-actions{display:none!important}
button.ico.coche-analyse{color:var(--green);border-color:var(--green);font-weight:700}
/* La table en ligne : son lien se lit d'un coup d'oeil et se copie d'un clic. */
#live-lien{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:6px}
#live-sieges{display:flex;flex-direction:column;gap:2px;margin-top:4px}
#live-sieges .pick-ligne:disabled{opacity:.55}
#open-live.has-news{border-color:var(--green);color:var(--green)}
.mj-tools{display:flex;gap:8px;flex-wrap:wrap;padding:12px 28px}.mj-tools button{font-size:14px}dialog{color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;width:min(840px,94vw);max-height:90dvh;padding:22px;overflow:auto}dialog::backdrop{background:#0007}dialog h2{font:26px Georgia;letter-spacing:0}dialog .dialog-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.edit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}/* Quatre champs d'identité tiennent une seule ligne : nom, classe, type, niveau. */.edit-grid.quatre{grid-template-columns:repeat(4,minmax(0,1fr))}dialog label{display:block;font-size:14px;color:var(--muted)}dialog input:not([type=checkbox]),dialog textarea{width:100%;border:1px solid var(--line);background:var(--field);border-radius:5px;color:var(--ink);padding:9px;margin-top:5px}dialog select{margin-top:5px}dialog textarea{resize:vertical;min-height:65px}.span-all{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}.attack-card,.catalog-row{border:1px solid var(--line);border-radius:7px;padding:12px;margin:10px 0}.catalog-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.catalog-row p{font-size:14px;color:var(--muted)}.catalog-row .toolbar{flex-shrink:0}/* L'intitulé d'un bloc de pastilles se lit comme l'intitulé d'un champ : même taille,
   même encre. Ce n'est pas un chapitre, c'est une étiquette. */
.etiquette{font-size:14px;color:var(--muted);margin:14px 0 0}
.mini-pool{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:6px 0 12px}
/* Une pastille par couleur de dé, teintée comme le dé : la face, le moins, le compte,
   le plus. Le champ reste un vrai champ — on peut y taper — mais il se fond dans la
   pastille au lieu de porter sa propre boîte. */
.die-pick{display:flex;align-items:center;gap:5px;padding:6px 7px;border-radius:11px;
 background:var(--teinte,#2b2b2b);box-shadow:inset 0 1px 0 #ffffff2e,0 2px 5px #00000038}
.die-pick .die-sq{width:22px;height:22px;flex:none;background:var(--face) center/contain no-repeat}
.die-pick button{flex:none;width:28px;height:28px;padding:0;border:0;border-radius:8px;
 background:#12171acc;color:#f4f0e6;font:700 17px/1 system-ui;cursor:pointer}
.die-pick button:hover{background:#12171a}
.die-pick input[type=number]{width:100%;min-width:0;margin:0!important;padding:0!important;border:0!important;
 background:none!important;text-align:center;font:800 17px/1 system-ui;color:#f4f0e6;
 -moz-appearance:textfield;appearance:textfield}
.die-pick input::-webkit-outer-spin-button,.die-pick input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Les dés à fond clair — blanc, os, vert, jaune — portent une encre sombre, comme les
   chiffres lancés sur le plateau : c'est la même règle, au même endroit. */
.die-pick.clair input{color:#1b2124}
.die-pick.clair button{background:#ffffffc4;color:#1b2124}
.die-pick.clair button:hover{background:#fff}/* Cadrer un socle : l'aperçu est rond comme le socle, et se manie à la main. */
#token-frame{display:grid;justify-items:center;gap:10px;margin-bottom:16px}
#token-frame p{margin:0}
#token-frame[hidden]{display:none}
.cadre-rond{width:220px;height:220px;border-radius:50%;overflow:hidden;border:2px solid var(--green);background:repeating-conic-gradient(#00000012 0% 25%,#0000 0% 50%) 50%/22px 22px,var(--panel-2);cursor:grab;touch-action:none}
.cadre-rond:active{cursor:grabbing}
.cadre-rond canvas{display:block;width:100%;height:100%}
.cadre-reglages{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.cadre-reglages label{display:flex;align-items:center;gap:8px;margin:0}
.cadre-reglages input[type=range]{width:200px;margin:0}
.cadre-reglages button{width:auto;margin:0}
.image-comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px}.image-comparison img{width:100%;height:230px;object-fit:contain;background:repeating-conic-gradient(#293337 0% 25%,#3b4649 0% 50%) 50%/18px 18px}.preview-token{height:70px;width:70px;object-fit:contain;background:var(--panel-2);border-radius:50%}.token>.portrait,.avatar img{width:100%;height:100%;object-fit:contain;border-radius:50%;pointer-events:none}.map.custom{background-size:contain;background-repeat:no-repeat}#save-status{font-size:13px;color:var(--muted);padding:0 28px}#actor-notes{white-space:pre-wrap}.notice{font-size:14px;color:var(--accent)}.form-error{color:#b03828;white-space:pre-wrap}.field-check{display:flex;gap:8px;align-items:center}.field-check input{width:auto}#busy-cover{position:fixed;inset:0;background:var(--bg);z-index:100;display:grid;place-items:center}#busy-cover[hidden]{display:none}@media(max-width:600px){.edit-grid{grid-template-columns:1fr 1fr}.mini-pool{grid-template-columns:repeat(2,1fr)}.image-comparison{grid-template-columns:1fr}.image-comparison img{height:160px}.catalog-row{flex-direction:column;align-items:stretch}.mj-tools{padding:10px 12px}dialog{padding:15px}.catalog-row .toolbar{flex-wrap:wrap}}
#share-panel p{margin:6px 0}#share-panel label{display:block;margin-top:12px;font-size:14px}#share-panel .toolbar{margin-top:12px}#shared-identity{overflow-wrap:anywhere}#open-share{position:relative}#open-share.has-news::after{content:"";position:absolute;top:4px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tabs{display:flex;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:4px}
.tabs button{border:0;background:transparent;color:var(--muted);padding:6px 14px;border-radius:6px;font-size:14px}
.tabs button:hover{background:var(--hover);color:var(--ink)}
.tabs button.on{background:var(--accent);color:var(--on-accent);font-weight:700}
#maps-page{display:none}
body.page-maps #maps-page{display:grid;grid-template-columns:230px minmax(0,1fr) 270px;gap:16px;padding:16px 28px 26px;align-items:start}
body.page-maps .intro,body.page-maps .mj-tools,body.page-maps main.layout,body.page-maps #save-status,body.page-maps footer{display:none!important}
#maps-page h2{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.maps-side,.maps-props{position:sticky;top:14px}
.maps-main{display:flex;flex-direction:column;gap:12px;min-height:calc(100dvh - 150px)}
.maps-bar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.maps-bar .grow{flex:1 1 220px;font-size:13px;color:var(--muted)}
.maps-bar input{width:100%;border:1px solid var(--line);background:var(--field);border-radius:6px;color:var(--ink);padding:9px;margin-top:5px}
.tool-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px}
.tool-bar select{width:auto;margin:0}.bar-sep{width:1px;height:26px;background:var(--line);margin:0 2px}#map-tools [data-tool=cut]{border-color:#4d6c8a;color:var(--t-select)}#map-tools [data-tool=cut].on{background:#7faddc;border-color:#7faddc}#map-tools [data-tool=lasso]{border-color:#4d6c8a;color:var(--t-select)}#map-tools [data-tool=lasso].on{background:#7faddc;border-color:#7faddc}.lasso-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}.lasso-layer polygon,.lasso-layer polyline{fill:#7faddc2e;stroke:#7faddc;stroke-width:2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}.lasso-layer polyline{fill:none}.lasso-layer .point{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;
 vector-effect:non-scaling-stroke}#undo,#redo,#czoom-in,#czoom-out,#czoom-reset{font-size:13px}#undo:disabled,#redo:disabled{opacity:.4}.maps-props #shape-lock{width:100%;margin-bottom:8px}
.tool-bar button{border-width:2px;font-weight:600}
#map-tools [data-tool=select]{border-color:#4d6c8a;color:var(--t-select)}
#map-tools [data-tool=wall]{border-color:#5b6a71;color:var(--t-wall)}
#map-tools [data-tool=door]{border-color:#a5703a;color:var(--t-door)}
#map-tools [data-tool=start]{border-color:#5f8d73;color:var(--t-start)}
#map-tools [data-tool=foe]{border-color:#a0625a;color:var(--t-foe)}
#map-tools button.on{color:#11181b}
#map-tools [data-tool=select].on{background:#7faddc;border-color:#7faddc}
#map-tools [data-tool=wall].on{background:#93a4ab;border-color:#93a4ab}
#map-tools [data-tool=door].on{background:#c98a4b;border-color:#c98a4b}
#map-tools [data-tool=start].on{background:#8bbd9c;border-color:#8bbd9c}
#map-tools [data-tool=foe].on{background:#d29180;border-color:#d29180}
.canvas-wrap{flex:1;display:grid;place-items:center;min-height:0;overflow:hidden;border-radius:10px}
#map-canvas{position:relative;transform-origin:0 0;will-change:transform;background:var(--map-bg) 0 0/100% 100% no-repeat;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;touch-action:none;user-select:none;box-shadow:0 10px 30px #0006}
#map-canvas.no-image{background-image:linear-gradient(#84958a1f 1px,transparent 1px),linear-gradient(90deg,#84958a1f 1px,transparent 1px);background-size:5% 8.333%;background-position:0 0;background-repeat:repeat}
/* Le plan de travail est agrandi par une mise à l'échelle : sans contrepartie, un repère
   de douze pixels en fait trente-six à trois fois. Bordures, contours de sélection et
   poignées se divisent donc par le zoom — ils gardent leur taille à l'œil, quel que soit
   le grossissement, et le tracé reste précis. */
#map-canvas{--z:1}
.shape{position:absolute;box-sizing:border-box;border-width:calc(2px / var(--z))}
.shape.wall{background:none}/* La matière est peinte par le contour lissé commun à l'éditeur et à la table ; la zone elle-même ne sert plus qu'à la saisie. */.wall-skin{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}/* Zones et traits sont une seule matière et se lisent comme telle. Le voile est porté par
   la toile entière, non par chaque tracé : sans quoi deux formes superposées cumulaient
   leurs transparences et la seconde se dessinait en plus sombre sur la première. */
.wall-skin{opacity:.85}
.wall-skin path.bord{fill:none;stroke:#6c7d85;stroke-width:1.4;vector-effect:non-scaling-stroke}
.wall-skin path.fond{fill:#0b1114;stroke:none}
/* La masse sélectionnée : chaque morceau peint en plein dans un groupe, et c'est le groupe
   entier qui devient translucide. Deux morceaux qui se chevauchent ne cumulent donc pas
   leurs transparences, et aucune couture ne se voit — on éclaire une zone de blocage, pas
   les pièces dont elle est faite. */
.calque-masse{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.calque-masse g{opacity:.42}
.calque-masse path{fill:var(--accent);stroke:none}
/* La boîte de la masse dit son étendue et porte les quatre poignées qui la tirent. Elle ne
   prend pas le clic : on attrape une masse par sa matière, jamais par le vide de sa boîte. */
.boite-masse{position:absolute;box-sizing:border-box;pointer-events:none;z-index:2;outline:calc(2px / var(--z)) dashed var(--accent);outline-offset:0}
.boite-masse .grip{display:block;pointer-events:auto}
.boite-masse.locked::after{content:'🔒';position:absolute;right:2px;top:1px;font-size:11px;opacity:.9}.shape.cut{background:#7faddc38;border:2px dashed #7faddc;pointer-events:none}/* L'aperçu d'un bloc en cours de tracé : la teinte de la matière, en pointillé. */.shape.bloc{background:#0b111466;border:2px dashed #6c7d85;pointer-events:none}.shape.cut .grip,.shape.bloc .grip{display:none!important}.shape.locked{cursor:not-allowed}.shape.locked::after{content:'🔒';position:absolute;right:2px;top:1px;font-size:11px;opacity:.9}.shape.foe.locked::after{right:-4px;top:-8px}
.shape.door{background:#c98a4b26;border:2px solid #c98a4b}.shape.door.keyed{background:#c98a4b1f;border-color:#f3d7a6;border-width:3px}
/* Un passage secret : violet et pointillé, dans l'éditeur comme sur la table. */
.shape.door.secret{background:#b06fd01f;border-color:#b06fd0;border-style:dashed;border-width:3px}.shape.door.keyed::before{content:'🔑';position:absolute;left:1px;top:0;font-size:10px}
.shape.door.open{background:#c98a4b14;border-style:dashed}.shape.door.tourne .grip{display:none!important}
.shape.start{background:#8bbd9c26;border:2px dashed #8bbd9c}
.shape.foe{width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:#6d443c;border:2px solid #d29180;display:grid;place-items:center;font:bold 14px Georgia;color:#f6e2dc;box-shadow:0 3px 8px #0007}
.shape.foe.hidden-foe{opacity:.55;border-style:dashed}
/* L'illustration du bestiaire tient tout le socle, comme sur la table de jeu. */
.shape.foe>.portrait{width:100%;height:100%;object-fit:contain;border-radius:50%;pointer-events:none;display:block}
/* Le contour de sélection épouse la forme : décalé, il doublait chaque trait à l'écran. */
.shape.selected{outline:calc(2px / var(--z)) solid var(--accent);outline-offset:0;z-index:2}
.grip{position:absolute;width:calc(9px / var(--z));height:calc(9px / var(--z));background:var(--accent);border:calc(1px / var(--z)) solid var(--on-accent);border-radius:calc(2px / var(--z));display:none}
.shape.selected:not(.locked) .grip{display:block}.shape.foe .grip{display:none!important}
.grip.nw{left:calc(-5px / var(--z));top:calc(-5px / var(--z));cursor:nwse-resize}.grip.ne{right:calc(-5px / var(--z));top:calc(-5px / var(--z));cursor:nesw-resize}
.grip.sw{left:calc(-5px / var(--z));bottom:calc(-5px / var(--z));cursor:nesw-resize}.grip.se{right:calc(-5px / var(--z));bottom:calc(-5px / var(--z));cursor:nwse-resize}
#map-list{max-height:min(46vh,420px);overflow:auto;margin-bottom:12px}
.map-row{display:block;width:100%;text-align:left;margin:6px 0;padding:9px 11px;border-radius:8px}
.map-row strong{display:block;font-size:14px}
.map-row small{color:var(--muted);font-size:11px}
.map-row.current{border-color:var(--accent);background:var(--sel-fond)}
.map-row.live strong::after{content:" ●";color:var(--green)}
.side-actions{display:flex;flex-direction:column;gap:7px}
.maps-props label{display:flex;gap:8px;align-items:center;font-size:14px;margin:10px 0}
.maps-props label input{width:auto}
.maps-props #shape-delete{width:100%}
.legend{list-style:none;padding:0;margin:0;font-size:12.5px;color:var(--muted)}
.legend li{display:flex;gap:9px;align-items:center;margin:9px 0;line-height:1.3}
.legend i{flex:none;width:20px;height:14px;border-radius:3px}
.sw-wall{background:#0b1114;border:1px solid #6c7d85}
.sw-door{background:#c98a4b;border:1px solid #e8b878}
.sw-door-open{background:#c98a4b2e;border:1px dashed #e8b878}.sw-ligne{background:#0b1114;height:4px;align-self:center}
/* Les traits de blocage : la même encre que les zones, en polygones puisqu'ils penchent. */
.calque-traits{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* Un trait choisi prend l'ambre, à son épaisseur réelle : un liseré de trois pixels
   autour d'un trait de deux en faisait une grosse barre. */
.calque-traits .trait.on{fill:var(--accent);filter:drop-shadow(0 0 2px #c98840)}
.trait-apercu{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 2;
 vector-effect:non-scaling-stroke;opacity:.9;fill:none}
.trait-aimant{fill:none;stroke:var(--green);stroke-width:2;vector-effect:non-scaling-stroke}
/* L'annonce du combat : courte, franche, une seule phrase avant d'y aller. */
#combat-start{width:min(420px,92vw)}
/* L'annonce ne barre plus la route : un bandeau paraît au-dessus de la table, se tient
   le temps qu'on le lise et s'efface seul. Rien à cliquer, rien à viser — il ne reçoit
   même pas la souris, pour ne jamais voler un clic à la carte qu'il survole. */
.annonce-flottante{position:fixed;z-index:80;pointer-events:none;
 padding:13px 30px;border-radius:14px;white-space:nowrap;
 background:#1b1410f2;color:#f6e9d8;border:1px solid #d2918059;
 font:700 clamp(21px,3.2vw,34px)/1.1 'Killam',Georgia,serif;letter-spacing:1.4px;
 box-shadow:0 14px 36px #00000073;animation:annonce-passe 2.6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes annonce-passe{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.84)}
 11%{opacity:1;transform:translate(-50%,-50%) scale(1)}
 72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
 100%{opacity:0;transform:translate(-50%,-62%) scale(1.03)}}
/* Sans mouvement : le même temps de lecture, en fondu seul. */
@media(prefers-reduced-motion:reduce){
 .annonce-flottante{animation-name:annonce-fondu}
 @keyframes annonce-fondu{0%{opacity:0;transform:translate(-50%,-50%)}
  10%{opacity:1;transform:translate(-50%,-50%)}78%{opacity:1;transform:translate(-50%,-50%)}
  100%{opacity:0;transform:translate(-50%,-50%)}}}
/* Le socle témoin de l'éditeur : rond comme un vrai socle, mais dessiné en pointillé
   pour qu'on ne le confonde jamais avec un combattant. Il ne quitte pas cette page. */
.echelle-token{position:absolute;z-index:6;border-radius:50%;cursor:grab;
 border:2px dashed #3f7bc0;background:#3f7bc022;display:grid;place-items:center;touch-action:none}
.echelle-token:hover{background:#3f7bc033}
.echelle-nom{font:700 9px/1 system-ui;letter-spacing:1px;color:#3f7bc0;pointer-events:none;
 text-shadow:0 1px 2px var(--panel)}
.echelle-grip{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;border-radius:50%;
 background:#3f7bc0;border:2px solid var(--panel);cursor:nwse-resize}.sw-secret{background:#b06fd033;border:2px dashed #b06fd0}
.sw-start{background:#8bbd9c26;border:1px dashed #8bbd9c}
.sw-cut{background:#7faddc38;border:1px dashed #7faddc}.sw-key{background:repeating-linear-gradient(45deg,#c98a4b 0 4px,#8d5f31 4px 8px);border:1px solid #f3d7a6}.sw-foe{background:#6d443c;border:2px solid #d29180;border-radius:50%;width:15px;height:15px}
@media(max-width:1150px){body.page-maps #maps-page{grid-template-columns:1fr;padding:14px}.maps-side,.maps-props{position:static}}

/* ---------- Pages Aventuriers, Talents, Armurerie et Bestiaire ---------- */
#heroes-page,#talents-page,#armory-page,#bestiary-page,#settings-page{display:none;padding:16px 28px 26px}
body.page-heroes #heroes-page,body.page-talents #talents-page,body.page-armory #armory-page,body.page-bestiary #bestiary-page,body.page-settings #settings-page{display:block}
body.page-settings .intro,body.page-settings .mj-tools,body.page-settings main.layout,body.page-settings #save-status,body.page-settings footer,
body.page-talents .intro,body.page-talents .mj-tools,body.page-talents main.layout,body.page-talents #save-status,body.page-talents footer,
body.page-heroes .intro,body.page-heroes .mj-tools,body.page-heroes main.layout,body.page-heroes #save-status,body.page-heroes footer,
body.page-armory .intro,body.page-armory .mj-tools,body.page-armory main.layout,body.page-armory #save-status,body.page-armory footer,
body.page-bestiary .intro,body.page-bestiary .mj-tools,body.page-bestiary main.layout,body.page-bestiary #save-status,body.page-bestiary footer{display:none!important}
.cat-panel{padding:20px 22px 24px}
.cat-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cat-head h2{margin:0;flex:1}
.cat-actions{display:flex;gap:8px}
.cat-filters{display:flex;gap:10px;margin:12px 0 18px;flex-wrap:wrap}
.cat-filters input{flex:1 1 240px;margin:0}
.cat-filters select{width:auto;min-width:190px;margin:0}
.cat-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;align-items:start}/* Les classes de talents : quatre colonnes au plus, la cinquième passe en dessous. */#talent-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.cat-col h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 12px system-ui;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:7px}
.cat-col h3 .compte{margin-left:auto;font-size:11px;letter-spacing:0;background:var(--hover);border-radius:9px;padding:1px 8px;color:var(--muted)}
.cat-col h3{border-radius:6px 6px 0 0;padding:6px 8px 7px}
/* Un bandeau de colonne se distingue par sa couleur d'encre, pas par son fond :
   les quatre types d'adversaires reposent sur le même clair que les Sbires. */
.cat-col.c-alpha h3{color:#c9806f}
.cat-col.c-solitaire h3{color:#c9853f}
.cat-col.c-boss h3{color:#9b6fb5}
.cat-col.c-generique h3{color:#a884c8;background:var(--panel-2)}
.cat-entry{margin-bottom:7px}
.cat-row{display:flex;align-items:center;gap:6px;margin-bottom:7px}
/* La pastille reprend le parchemin des fiches : fond clair, texte sombre. */
.cat-pill{flex:1;min-width:0;display:flex;align-items:center;gap:8px;text-align:left;border:1px solid #00000026;border-radius:9px;padding:8px 11px;font:700 15px 'Killam',Georgia,serif;letter-spacing:.3px;color:#2a2118;box-shadow:0 1px 0 #ffffff5c inset,0 2px 5px #0000004d}
.cat-pill .nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-pill:hover{filter:brightness(1.06)}
.cat-pill.k-melee{background:#eee0c4}
.cat-pill.k-ranged{background:#eee0c4}
.cat-pill.k-armor{background:#cfe0ea}
.cat-pill.k-object{background:#e6d9bd}
.cat-pill.k-object.consommable{background:#d9e7cd}
.cat-pill.k-standard{background:#dcd8cf}
.cat-pill.k-alpha{background:#e8d3cb}
.cat-pill.k-solitaire{background:#efdcc2}
.cat-pill.k-boss{background:#e2d0e8}
/* L'étiquette d'un objet est plus courte qu'un dé : sans plancher, la languette d'un
   objet s'asseyait quatre points plus bas que celle d'une arme. */
.cat-pill .tag{display:flex;align-items:center;min-height:22px;font:600 12px system-ui;color:#4a3f31;opacity:.85;white-space:nowrap}
.cat-pill .chev{font-size:15px;opacity:.5;transition:transform .15s}
.cat-pill.ouvert .chev{transform:rotate(180deg)}
/* Dés d’Amertume : la recette du jeu, en CSS pur — 22 px, rayon 5, pastille centrale de 6.
   Le liseré de 1,5 px est peint en ombre interne et non posé en bordure : une bordure
   fractionnaire s'arrondit différemment d'un dé à l'autre selon la densité de l'écran, et
   l'un se retrouve écrasé d'un pixel, sa pastille avec. Ici la boîte fait 22 × 22, point.
   La pastille est calée au demi-pixel près par une marge entière, jamais par « auto ». */
.pips{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
/* Le jeton d'état prend exactement le gabarit d'un dé — il hérite des mêmes règles de
   taille — et se pose en tête de la ligne, séparé du reste par un filet discret. */
/* L'image se pose en absolu dans la pastille plutôt qu'en enfant de grille : sur une
   grille, « hauteur : 100 % » se mesure contre une rangée que l'image dimensionne
   elle-même — le calcul tourne en rond, le navigateur retombe sur la taille naturelle,
   et le jeton dépassait de deux points, rognés en haut et en bas. Contre les bords de la
   pastille, la mesure est franche : le jeton entre en entier. */
.pips .etat-inflige{order:-1;position:relative;display:flex;align-items:center;justify-content:center;
 border-radius:5px;background:none;filter:none;margin-right:3px}
.pips .etat-inflige img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pips .etat-inflige.sans-jeton{background:var(--panel-2);border:1px solid var(--line);
 font:700 12px/1 system-ui;color:var(--muted)}
.die-sq,.pips .etat-inflige{box-sizing:border-box;flex:0 0 22px;width:22px;height:22px;aspect-ratio:1;border:0;background:var(--face) center/100% 100% no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}/* Un dé qui parle : la valeur remplace la pastille, en clair sur les faces sombres. */.die-sq.valeur{display:grid;place-items:center;font:800 12px/1 system-ui;color:rgba(0,0,0,.6)}.die-sq.valeur.clair{color:rgba(255,255,255,.8)}/* Carte d'attaque : les dés de l'arme, le bonus, le bouton. Rien d'autre à l'écran. */.attack-card{display:flex;flex-direction:column;gap:9px}.attack-pool{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:30px}/* Dans la carte d'attaque, les dés sont plus gros : c'est ce qu'on regarde avant de frapper. */.attack-card .pips{gap:7px}.attack-card .die-sq,.attack-card .pips .etat-inflige{flex-basis:30px;width:30px;height:30px;font-size:16px}.attack-dmg{font:700 17px system-ui;color:var(--red-mat)}/* Un bouton court et de largeur fixe, quelle que soit l'arme équipée. *//* Ce qui coûte l'Action porte le bleu de l'attaque : frapper et se dégeler dépensent la
   même activation, et se ressemblent donc. Ce qui coûte le Mouvement — se relever —
   garde le bouton neutre, pour qu'on lise le coût sur la forme du bouton. */
/* Tous les boutons d'Action ont la même hauteur, l'émoji de l'Analyse compris :
   sans hauteur fixe, sa ligne plus haute le faisait dépasser de la rangée. */
button.btn-action{width:auto;height:36px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;
 font:700 14px/1 system-ui;background:#3f7bc0;border-color:#3f7bc0;color:#f2f7fc}
.etat-actions button.btn-action{padding:0 18px}button.btn-action:hover:not(:disabled){background:#4d8bd2;border-color:#4d8bd2}button.btn-action:disabled{background:var(--disabled);border-color:var(--disabled);color:var(--disabled-ink)}
/* L'analyse porte le même bouton, en violet : même barre, même dessin, autre nature. */
/* Un talent tient le même bouton, en vert sombre : ce n'est ni une attaque ni un geste
   du MJ, c'est un pouvoir propre au combattant. */
button.btn-talent{background:#3f7d5e;border-color:#3f7d5e;color:#f1f9f4}
button.btn-talent:hover:not(:disabled){background:#4b8f6d;border-color:#4b8f6d}
/* Une Réaction ne coûte pas l'Action du tour : elle porte le violet, comme l'Analyse. */
button.btn-reaction{background:#9b7ad4;border-color:#9b7ad4;color:#fbf8ff}
button.btn-reaction:hover:not(:disabled){background:#ab8ce0;border-color:#ab8ce0}
button.btn-analyse{background:#9b7ad4;border-color:#9b7ad4;color:#fbf8ff}
button.btn-analyse:hover:not(:disabled){background:#ab8ce0;border-color:#ab8ce0}
button.btn-analyse.on{background:#8264bb;border-color:#8264bb}
button.btn-analyse[hidden]{display:none}.attack-card .attack-info,.attack-card .summary,.attack-card #attack-help{margin:0;font-size:13px}
/* Les cibles à portée, cliquables : plus besoin de viser sur la carte pour en changer. */
.targets{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:34px}
.cible{display:flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);font:700 13px 'Killam',Georgia,serif;color:var(--ink);max-width:100%}
.cible:hover{background:var(--hover)}
.cible .rond{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--green);color:var(--green);font:700 13px 'Killam',Georgia,serif;overflow:hidden}
.cible.adverse .rond{border-color:#cf8074;color:#cf8074}
.cible .rond img{width:100%;height:100%;object-fit:cover}
.cible .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cible .num{flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--hover);border:1.5px solid var(--line);font:700 10px/1 system-ui;color:var(--ink)}
/* Une cible se lit à sa couleur avant son nom : vert pour un allié, rouge pour un adversaire. */
.cible{border-color:#5f9b74;background:#5f9b7422;color:var(--ink)}
.cible .rond{border-color:#5f9b74}
.cible:hover{background:#5f9b7433}
.cible.adverse{border-color:#c2604f;background:#c2604f22}
.cible.adverse .rond{border-color:#c2604f}
.cible.adverse:hover{background:#c2604f33}
.cible.on{box-shadow:inset 0 0 0 2px #5f9b74;background:#5f9b7440}
.cible.adverse.on{box-shadow:inset 0 0 0 2px #c2604f;background:#c2604f40}
.targets .muted{font-size:13px}.attack-card .dice-results:empty{display:none}.attack-card .summary:empty{display:none}.attack-extras{display:flex;align-items:center;gap:8px}.attack-extras label{flex:none}.attack-extras select{margin:0;width:auto;flex:1}.attack-extras #roll{flex:none;font-size:15px;padding:6px 10px}.attack-card .rules{margin-top:2px}
/* Toutes les languettes du catalogue tiennent la même hauteur. Elle était dictée par le
   plus haut de leurs contenus, et l'écu de DEF dépassait le dé de six points : les armures
   s'en trouvaient plus épaisses que les armes. L'écu se règle donc sur le dé, sa forme
   gardée — un écu est plus haut que large. */
.cat-pill .ecu{flex:none;width:18px;height:22px}.cat-pill .ecu b{font-size:10px}
.cat-tools{display:flex;gap:2px}
.ico{border:0;background:transparent;color:var(--muted);padding:4px 6px;font-size:14px;line-height:1;border-radius:6px}
.ico:hover{background:var(--hover);color:var(--ink)}
/* Un « + » discret dans le titre d'une rubrique : créer sans quitter la fiche. */
.sous-titre{display:flex;align-items:center;gap:8px}
.ico.plus{font:700 16px system-ui;color:var(--accent);border:1px solid var(--line);padding:1px 8px 3px}
.ico.plus:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ico.danger:hover{background:#5c2b26;color:#ffd9d2}
.cat-detail{display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-size:13px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin:-3px 0 9px}
.cat-detail button{width:auto;margin:2px 0 0}
/* Poser une meute : le chiffre d'abord, le bouton ensuite. */
.pose-nombre{display:flex;align-items:center;gap:7px;margin-top:2px}
.pose-nombre input{width:58px;margin:0;text-align:center;font:700 14px system-ui;
 background:var(--field);border:1px solid var(--line);border-radius:6px;padding:7px 4px;color:var(--ink)}
.pose-nombre button{margin:0}
/* Une fiche d'aventurier par carte : portrait, chiffres et équipement d'un coup d'œil. */
#hero-search{flex:0 1 340px}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-items:start}
.hero-card{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:14px 15px 13px}
.hero-head{display:flex;align-items:center;gap:11px}
.hero-id{flex:1;min-width:0}
.hero-id strong{display:block;font:700 18px 'Killam',Georgia,serif;letter-spacing:.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-card .chips{margin:10px 0 2px}
.hero-card .stat-row{margin:10px 0 4px}
/* Les compétences sont ici affichées, pas jouées : pas de curseur ni de survol de bouton. */
.hero-card .skill-chip{cursor:default}
.hero-card .skill-chip:hover{background:rgba(var(--tint),.13)}
.hero-card .sheet-class{align-self:center}
.hero-kit{margin:0;font-size:13px}
/* Pastilles posées : sur une fiche on lit son équipement et ses talents, on ne clique pas.
   Même dessin qu'à l'armurerie, sans le survol ni le curseur d'un bouton. */
.gear-pills{display:flex;flex-direction:column;gap:6px;margin:2px 0 4px}
.gear-pills .cat-pill{flex:none;cursor:default}
.gear-pills .cat-pill:hover{filter:none}
.gear-pills .muted{font-size:13px}
.hero-sous{display:flex;align-items:center;gap:8px;margin:12px 0 6px;font:600 10px system-ui;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.hero-sous .ico.plus{font:700 14px system-ui;letter-spacing:0;padding:0 7px 2px}
/* Talents : une couleur par nature, portée par le liseré gauche et par l'abrégé. */
.cat-pill.t-act{background:#cfdcea;border-left:4px solid #4f7fb5}
.cat-pill.t-reac{background:#ddd3ea;border-left:4px solid #8b6bb5}
.cat-pill.t-pass{background:#dcd8cf;border-left:4px solid #8a8474}
.cat-pill.t-crit{background:#eccfd0;border-left:4px solid #b5525a}
.cat-pill.t-mait{background:#f0e0bd;border-left:4px solid #c99a3c}
.cat-pill.t-ame{background:#d3e5cd;border-left:4px solid #5e9a5b}
.t-badge{flex:none;font:700 10px system-ui;letter-spacing:.6px;background:#0000001f;border-radius:5px;padding:2px 6px;color:#3a3128}
.cat-pill.cliquable{cursor:pointer}
/* Attribuer des talents dans la fiche : des cases, groupées par classe, dans un cadre
   qui défile — un arbre complet ne doit pas repousser le reste du formulaire. */
/* La grille d'états de la fiche reprend le dessin du menu au clic droit. */
/* Une ligne de réglage : ce qu'on règle à gauche, de quoi le régler à droite. */
#settings-page .cat-panel{max-width:760px}
.reglage-titre{margin:0 0 6px;font:600 12px system-ui;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}
.reglage{display:flex;align-items:center;gap:18px;padding:11px 0;border-bottom:1px solid var(--line)}
.reglage:last-child{border-bottom:0}
.reglage>div{flex:1;min-width:0}
.reglage strong{display:block;font-size:15px}
.reglage p{margin:2px 0 0;font-size:13px}
.reglage select{width:auto;min-width:170px;margin:0}
.reglage button{width:auto;white-space:nowrap}
#raccourcis-erreur:empty{display:none}
#raccourcis-erreur.ok{color:var(--green)}
#state-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:5px}
#state-picker button{display:grid;justify-items:center;gap:3px;padding:7px 2px 6px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);font:600 10px system-ui;color:var(--muted);line-height:1.1}
#state-picker button:hover{background:var(--hover);color:var(--ink)}
#state-picker button.on{border-color:var(--green);background:var(--sel);color:var(--ink)}
#state-picker img,#state-picker .vide{width:28px;height:28px}
#state-picker .vide{display:grid;place-items:center;font-size:16px;color:var(--muted)}
#talent-filter{margin-bottom:10px}
#talent-picker{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--panel-2)}
.pick-famille+.pick-famille{margin-top:14px}
.pick-famille h3{display:flex;align-items:center;gap:8px;margin:0 0 7px;font:600 11px system-ui;letter-spacing:2px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:5px}
.pick-famille h3 .compte{margin-left:auto;font-size:11px;letter-spacing:0;background:var(--hover);border-radius:9px;padding:1px 8px}
.pick-talent{display:flex;align-items:center;gap:8px;margin-bottom:5px;padding:6px 10px;border-radius:8px;border:1px solid #00000026;border-left-width:4px;font:700 14px 'Killam',Georgia,serif;letter-spacing:.3px;color:#2a2118;cursor:pointer}
.pick-talent input{flex:none;width:auto;margin:0;accent-color:#3d3227}
.pick-talent .nom{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-talent .tag{font:600 11px system-ui;color:#4a3f31;opacity:.85}
.pick-talent:hover{filter:brightness(1.05)}
.pick-talent.t-act{background:#cfdcea;border-left-color:#4f7fb5}
.pick-talent.t-reac{background:#ddd3ea;border-left-color:#8b6bb5}
.pick-talent.t-pass{background:#dcd8cf;border-left-color:#8a8474}
.pick-talent.t-crit{background:#eccfd0;border-left-color:#b5525a}
.pick-talent.t-mait{background:#f0e0bd;border-left-color:#c99a3c}
.pick-talent.t-ame{background:#d3e5cd;border-left-color:#5e9a5b}
/* Choisir dans le catalogue : une ligne par entrée, sa pastille et son état. */
#picker-search{margin-bottom:12px}
#picker-body{max-height:min(56vh,420px);overflow:auto;border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--panel-2)}
#picker{width:min(560px,94vw)}
.pick-ligne{display:flex;align-items:center;gap:9px;width:100%;margin-bottom:6px;padding:4px;border:1px solid transparent;border-radius:10px;background:transparent}
.pick-ligne:hover{background:var(--hover)}
.pick-ligne.porte{border-color:var(--green);background:var(--sel)}
.pick-etat{flex:none;width:24px;font:700 15px system-ui;color:var(--muted)}
.pick-ligne.porte .pick-etat{color:var(--green)}
/* ---------- Choisir un combattant à mettre en scène ---------- */
/* Trois colonnes au moins : un bestiaire un peu fourni tenait sur deux écrans de haut.
   La fenêtre s'élargit d'autant, sinon les colonnes étouffent le nom et la jauge. */
#scene-picker{width:min(1140px,94vw)}
#scene-picker-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px;max-height:52vh;overflow:auto;margin-top:10px}
@media(min-width:1180px){#scene-picker-body{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){#scene-picker-body{grid-template-columns:repeat(2,minmax(0,1fr))}}
#scene-picker .pick-ligne{gap:10px;text-align:left;margin:0}
.pick-ligne .vignette{transform:none}
.pick-ligne .actor-body{flex:1;min-width:0}
.pick-ligne .pick-etat{flex:none}
.pick-texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pick-texte strong{font:700 14px 'Killam',Georgia,serif;letter-spacing:.3px}
.pick-texte small{font-size:12px;color:var(--muted)}
#scene-picker-search{margin-top:4px}
/* ---------- Les attaques offertes ---------- */
/* Un bouton nommé par attaque — celles de la fiche et celle de l'équipement — et ce
   bouton frappe : il n'y a plus de bouton « Attaque » à côté. Tous portent donc le bleu
   plein des Actions et leur hauteur ; celui qui vient de partir garde un liseré clair,
   car c'est sa réserve que la carte affiche. Ce qui empêche de frapper grise le bouton
   et en dit la raison au survol. */
button.choix-attaque{height:36px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;
 font:700 13px/1 system-ui;letter-spacing:0;border-radius:7px}
button.choix-attaque .pips{display:flex;gap:3px}
button.choix-attaque .die-sq,button.choix-attaque .pips .etat-inflige{flex:0 0 17px;width:17px;height:17px}
button.choix-attaque .loin{font-size:15px;line-height:1;opacity:.9}
button.choix-attaque.on{box-shadow:inset 0 0 0 2px #ffffffa6}
/* ---------- Corriger une valeur là où elle est lue ---------- */
/* Ce qui se modifie se voit : un soulignement discret au survol, le champ prend
   exactement la place du chiffre qu'il remplace. */
.modifiable{cursor:text;border-radius:6px;transition:background .12s}
.modifiable:hover{background:var(--hover);box-shadow:inset 0 -1px 0 var(--accent)}
.modifiable:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ecu.modifiable{cursor:text}
.ecu.verrou{opacity:.85;cursor:help}
.champ-vif{box-sizing:border-box;font:inherit;max-width:100%;padding:2px 5px;text-align:center;
 border:1px solid var(--accent);border-radius:6px;background:var(--field);color:var(--ink)}
.champ-vif.petit{font:600 12px/1.3 system-ui}
.champ-vif.texte{text-align:left;width:100%;font:inherit}
.champ-vif.zone{text-align:left;width:100%;font:inherit;resize:vertical;line-height:1.45}
.champ-vif.choix{font:600 12px system-ui;text-align:left;padding:2px 4px}
.stat-tile .champ-vif{display:block;width:100%;margin-top:5px;font:700 20px/1.2 'Killam',system-ui}
.stat-tile .champ-vif.petit{margin-top:6px;font:600 11px/1.3 system-ui}
.skill-chip .champ-vif{width:46px;padding:0 3px}
.chip .champ-vif,span.chip.modifiable{white-space:nowrap}
.chip.actif{border-color:var(--green);color:var(--green)}
/* Un bloc qui se replie : l'intitulé porte le compte de ce qu'il cache, pour qu'on sache
   s'il vaut la peine d'être ouvert. Le triangle du navigateur suffit à dire l'état. */
.bloc-replie{margin:6px 0}
.bloc-replie>summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
 padding:3px 0;color:var(--ink)}
/* Mis en boîte flexible, le résumé perd le triangle du navigateur : on en pose un à nous,
   qui pivote à l'ouverture — sans quoi rien ne dirait que le bloc se déplie. */
.bloc-replie>summary::-webkit-details-marker{display:none}
.bloc-replie>summary::before{content:'▸';flex:none;width:10px;font-size:12px;color:var(--muted);
 transition:transform .12s}
.bloc-replie[open]>summary::before{transform:rotate(90deg)}
.bloc-replie>summary:hover .bloc-titre{color:var(--accent)}
.bloc-replie .bloc-titre{font:700 15px 'Killam',Georgia,serif;letter-spacing:1px;text-transform:uppercase}
.bloc-replie>summary .compte{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:11px;
 background:var(--panel-2);border:1px solid var(--line);font:700 11px system-ui;color:var(--muted);text-align:center}
.bloc-replie[open]>summary{margin-bottom:4px}
/* La bibliothèque des effets, en tête de l'onglet Talents. */
.biblio{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 14px;background:var(--panel-2)}
/* Un effet tient sur une ligne : son nom, puis la phrase qu'il applique, dont les parties
   réglables sont en gras — c'est là ce qu'on vient chercher. */
.effet-fiche{padding:5px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.5}
.effet-fiche:first-child{border-top:0}
.effet-fiche .nom-effet{font:700 13px system-ui;text-transform:uppercase;letter-spacing:.6px;color:var(--accent)}
.effet-fiche b{font-weight:700;color:var(--ink)}
/* ---------- Le portrait, rond comme sur la carte ---------- */
.jeton-rond{flex:none;display:grid;place-items:center;overflow:hidden;border-radius:50%;
 background:#284a40;border:1px solid #9fc8b1;color:#cfe3d6;font-family:'Killam',Georgia,serif}
.jeton-rond img{width:100%;height:100%;object-fit:cover;display:block}
.jeton-rond.mini{width:26px;height:26px;font-size:14px}
/* Le jeton qui suit le doigt entre la fenêtre de choix et la carte. */
.jeton-rond.fantome-pose{position:fixed;z-index:70;width:44px;height:44px;font-size:20px;
 transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 6px 16px #0007;opacity:.95;transition:opacity .1s}
.jeton-rond.fantome-pose.hors{opacity:.35}
/* Le compte des copies, posé dans le cercle : le jeton fantôme est détouré, rien ne
   peut déborder sans être rogné. */
.jeton-rond .fantome-nombre{position:absolute;left:0;right:0;bottom:0;padding:1px 0;
 background:#161c1fd9;color:#f6efe4;font:700 12px/1.2 system-ui;text-align:center;letter-spacing:.3px}
.jeton-rond.grand{width:74px;height:74px;font-size:36px}
/* Le portrait du bestiaire se change d'un clic : le rond s'allume au survol,
   une légende dit ce qui arrivera, et la croix retire l'illustration posée. */
.jeton-boite{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.jeton-rond.modifiable{cursor:pointer}
.jeton-rond.modifiable:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.jeton-rond.modifiable:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.jeton-legende{font:600 10px system-ui;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.jeton-boite:hover .jeton-legende{color:var(--accent)}
.jeton-oter{position:absolute;top:-4px;right:-4px;width:22px;height:22px;padding:0;
 border-radius:50%;background:var(--panel);line-height:1;font-size:12px}
/* ---------- La fiche d'un modèle, sous sa languette ---------- */
.best-fiche{width:100%;display:flex;flex-direction:column;gap:10px}
.best-tete{display:flex;gap:12px;align-items:flex-start}
.best-ident{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.best-ident h4{margin:0;font:700 18px 'Killam',Georgia,serif;letter-spacing:.4px}
/* Quatre colonnes au bestiaire : la fiche dépliée est étroite, ses pastilles serrent le pas. */
.best-fiche .chips{margin:0;gap:5px}
.best-fiche .chips .chip{padding:3px 8px;font-size:11.5px}
.best-fiche .stat-row{margin:0}
.best-fiche h5{margin:4px 0 0;font:600 10px system-ui;letter-spacing:2px;text-transform:uppercase;
 color:var(--muted);display:flex;align-items:center;gap:7px}
.best-attaques{display:flex;flex-direction:column;gap:7px}
.best-attaque{border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:7px 9px;
 background:var(--panel);display:flex;flex-direction:column;gap:6px}
.best-att-tete{display:flex;align-items:center;gap:9px}
.best-att-tete b{font:700 15px 'Killam',Georgia,serif;letter-spacing:.3px}
.best-att-tete .pips{margin-left:auto;display:flex;gap:5px;align-items:center}
.best-att-bas{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.tag-mini{border:1px solid var(--line);border-radius:20px;padding:2px 9px;
 font:600 10px system-ui;letter-spacing:1px;color:var(--muted);white-space:nowrap}
.tag-mini.effet{border-style:dashed;color:var(--accent)}
.die-ajout{flex:0 0 22px;width:22px;height:22px;padding:0;border:1px dashed var(--line);
 border-radius:5px;background:transparent;color:var(--muted);font:700 14px/1 system-ui}
.die-ajout:hover{border-color:var(--accent);color:var(--accent)}
.best-attaque .die-sq,.best-attaque .pips .etat-inflige{cursor:pointer;padding:0}
.best-notes{margin:0;font-size:13px;white-space:pre-wrap}
@media (max-width:900px){#heroes-page,#talents-page,#armory-page,#bestiary-page{padding:14px}.cat-cols,#talent-cols,.hero-grid{grid-template-columns:1fr}}