:root { --bg:#15171c; --panel:#1d2027; --panel2:#191c22; --line:#2c313c; --txt:#e6e8ec; --dim:#9aa2b1; --accent:#6ea8fe; --ok:#3ecf8e; --no:#e5646e; --char:#c9a3ff; --on-accent:#12141a; --ink:#12141a; } /* ===== THÈMES du site : chaque palette redéfinit les variables de base ([data-theme] sur , ou localement sur une pastille du sélecteur pour qu'elle se prévisualise elle-même). « nuit » = défaut. ===== */ [data-theme="nuit"] { --bg:#15171c; --panel:#1d2027; --panel2:#191c22; --line:#2c313c; --txt:#e6e8ec; --dim:#9aa2b1; --accent:#6ea8fe; --ok:#3ecf8e; --no:#e5646e; --char:#c9a3ff; --on-accent:#12141a; --ink:#12141a; } [data-theme="neon"] { --bg:#0a1022; --panel:#111a30; --panel2:#0d1526; --line:#243352; --txt:#e2ebff; --dim:#8598c4; --accent:#4fc9ff; --ok:#43e6a4; --no:#ff5f86; --char:#a884ff; --on-accent:#070c1a; --ink:#070c1a; } [data-theme="abysse"] { --bg:#08080b; --panel:#141419; --panel2:#101015; --line:#2b2b34; --txt:#f4f5f8; --dim:#a2a4af; --accent:#7fb3ff; --ok:#4fe2a2; --no:#ff6c78; --char:#d3adff; --on-accent:#0c0c10; --ink:#0c0c10; } [data-theme="braise"] { --bg:#161009; --panel:#241a10; --panel2:#1c140c; --line:#3d2e1c; --txt:#f1e7d6; --dim:#b39d7e; --accent:#e6a24e; --ok:#a6c06a; --no:#e57a5c; --char:#e0946a; --on-accent:#0f0a05; --ink:#0f0a05; } /* thème CLAIR (jour) : fonds clairs, texte sombre, accents assombris pour rester lisibles sur blanc */ [data-theme="clair"] { --bg:#eef1f6; --panel:#ffffff; --panel2:#e8ecf3; --line:#ccd4e1; --txt:#1a1e27; --dim:#5b6472; --accent:#2f6fe0; --ok:#1c9e6a; --no:#d23c48; --char:#7d4fd0; --on-accent:#ffffff; --ink:#dde3ec; } * { box-sizing:border-box; } /* v36 : JETONS de la charte du Studio — dérivés du thème (ils suivent les cinq palettes sans copie) */ :root { --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --row:32px; --ctl:28px; --fs:13px; --fs-label:12.5px; --sel:color-mix(in srgb, var(--accent) 22%, transparent); --hover:color-mix(in srgb, var(--txt) 6%, transparent); --focus:var(--accent); --line-ctl:color-mix(in srgb, var(--line) 70%, var(--txt) 8%); --surface-1:var(--panel); --surface-2:var(--panel2); --surface-3:var(--ink); } body.st-confort { --row:40px; --ctl:32px; } body { margin:0; font:15px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--txt); height:100vh; display:flex; } #left { flex:1; display:flex; flex-direction:column; min-width:0; position:relative; } body.player-view .sidebar { display:none; } /* MOBILE (<=760px) : on EMPILE — colonne centrale d'abord (plein ecran), sidebars dessous. Sans ca, les deux sidebars a largeur fixe ecrasaient le centre (~50px). */ @media (max-width:760px){ body { flex-direction:column; height:auto; min-height:100vh; } #left { flex:none; min-height:calc(100vh - 38px); } .sidebar { width:auto; border-left:none; border-top:1px solid var(--line); } } #log { flex:1; overflow-y:auto; padding:18px; } .msg { margin:0 0 14px; max-width:92%; } .msg .who { font-size:12px; color:var(--dim); margin-bottom:2px; } .msg.user { margin-left:auto; text-align:right; } .msg.user .bubble { background:#26303f; } .msg.ooc .bubble { background:#2a2536; border-color:#463a5e; } .bubble { background:var(--panel); border:1px solid var(--line); padding:9px 12px; border-radius:10px; white-space:pre-wrap; display:inline-block; text-align:left; } .bubble p { margin:0 0 .6em; } .bubble p:last-child { margin-bottom:0; } .msg-act { margin-top:5px; margin-right:6px; padding:3px 9px; font-size:12px; background:transparent; color:var(--dim); border:1px solid var(--line); border-radius:6px; cursor:pointer; } .msg-act:hover { color:var(--txt); border-color:var(--accent); } .msg-act:disabled { opacity:.4; } .msg-act.ic { font-size:15px; line-height:1; padding:4px 9px; } /* boutons ICONE seuls (infobulle via title) */ .msg-actions { text-align:left; } /* LLM : boutons en bas a GAUCHE (sous la bulle) */ .msg.user .msg-actions { text-align:right; } /* user : boutons en bas a DROITE (sous la bulle) */ /* Boutons d'action DISCRETS : invisibles tant que la souris n'est pas sur la bulle. La rangee fait partie du bloc .msg (juste dessous) : on peut descendre dessus sans les faire disparaitre. Uniquement quand un vrai survol existe — au tactile ils restent visibles. */ @media (hover: hover){ .msg .msg-actions { opacity:0; pointer-events:none; transition:opacity .15s; } .msg:hover .msg-actions, .msg .msg-actions:focus-within { opacity:1; pointer-events:auto; } } .edit-area { width:100%; min-height:70px; background:var(--panel); color:var(--txt); border:1px solid var(--accent); border-radius:8px; padding:9px 12px; font:inherit; resize:vertical; } .edit-bar { margin-top:5px; } #inbar { display:flex; gap:8px; align-items:flex-end; padding:12px; border-top:1px solid var(--line); } #inbar textarea { flex:1; resize:none; height:46px; background:var(--panel); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:10px; font:inherit; } #inbar .col { display:flex; flex-direction:column; gap:6px; } .ooc-lbl { font-size:12px; color:var(--dim); display:flex; align-items:center; gap:5px; cursor:pointer; user-select:none; white-space:nowrap; } button { background:#2a2f3a; color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:9px 12px; cursor:pointer; font:inherit; } button:hover { border-color:var(--accent); } button:disabled { opacity:.5; cursor:default; } #send:disabled, #vn-go:disabled { cursor:not-allowed; opacity:.45; } /* « Génération… » en cours : nettement grisé */ .sidebar { width:300px; border-left:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; overflow-y:auto; } .sidebar h2 { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin:16px 16px 8px; } .pad { padding:0 16px 8px; } .kv { display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); } .kv .k { color:var(--dim); } .mut { border:1px solid var(--line); border-radius:8px; padding:8px; margin-bottom:8px; background:var(--panel2); } .mut.character { border-color:#3d3358; } .mut.player { border-color:#2f6e4f; } .mut.conflict { border-color:#e5a06e; } .mut.conflict .head { color:#e5a06e; } .src { font-size:10px; padding:1px 6px; border-radius:8px; margin-left:6px; vertical-align:1px; border:1px solid var(--line); color:var(--dim); } .src.code { border-color:#2f6e4f; color:var(--ok); } .src.llm { border-color:#5a4a7a; color:#b9a5e8; } .src.dice { border-color:#7a6a2f; color:#e8d78a; } .src.plot { border-color:#7a4a2f; color:#e8b48a; } .src.casting { border-color:#4a6a3a; color:#b8d89a; } .form-badge { display:inline-block; border:1px solid var(--line); border-radius:10px; padding:0 8px; font-size:11px; color:var(--dim); margin-right:2px; cursor:pointer; } .form-badge.on { border-color:var(--accent); color:var(--accent); } .form-sw { background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:0 7px; cursor:pointer; font:inherit; font-size:12px; } .form-sw:hover { border-color:var(--accent); } body.chatspage #inbar, body.chatspage #log, body.chatspage .sidebar, body.chatspage #setup-panel { display:none !important; } body.chatspage #chats-panel { display:block !important; } /* Largeur DÉFINIE (pas dictée par le contenu) : la page Chats garde la même largeur qu'il y ait 0 ou 20 chats. Sans width définie, ce flex-item à marges auto se dimensionne au contenu (la grille de cartes l'élargissait). */ #chats-panel { width:min(680px, 100%); margin:20px auto; padding:0 16px; overflow-y:auto; } .cp-head-actions { display:flex; gap:8px; align-items:center; } .cp-head { display:flex; align-items:center; justify-content:space-between; } .cp-head h2 { border:none; padding:0; } .cp-head button, .cp-new button { background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:6px 12px; cursor:pointer; font:inherit; } .cp-head button:hover, .cp-new button:hover { border-color:var(--accent); } /* La ligne « nouveau chat » garde une taille modeste (comme quand il y a 0 chat), même si les cartes en dessous sont larges. */ .cp-new { display:flex; gap:8px; margin:10px auto 16px; max-width:460px; } .cp-new input { flex:1; background:var(--ink); color:inherit; border:1px solid var(--line); border-radius:6px; padding:7px; font:inherit; } /* Les chats se listent VERTICALEMENT (une carte par ligne), larges = lisibles. */ #chats-grid { display:flex; flex-direction:column; gap:12px; } .chat-card { position:relative; border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--panel2); cursor:pointer; display:flex; flex-direction:column; gap:6px; min-height:96px; } .chat-card:hover { border-color:var(--accent); } .chat-card.active { border-color:var(--ok); } .cc-name { font-weight:bold; color:var(--accent); padding-right:52px; font-size:15px; } .cc-meta { font-size:11px; color:var(--dim); } .cc-excerpt { font-size:13px; line-height:1.5; color:var(--txt); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .cc-del, .cc-export, .cc-debug { position:absolute; top:8px; background:transparent; border:none; color:var(--dim); cursor:pointer; font-size:13px; padding:2px; line-height:1; } .cc-del { right:8px; } .cc-export { right:32px; } .cc-debug { right:56px; font-size:12px; opacity:.7; } .cc-debug:hover { color:var(--accent); opacity:1; } .cc-del:hover { color:var(--no); } /* ---------- STUDIO des mondes (v18) : page pleine, liste + editeur ---------- */ body.studiopage #inbar, body.studiopage #log, body.studiopage .sidebar, body.studiopage #setup-panel, body.studiopage #chats-panel { display:none !important; } body.studiopage #studio-panel { display:flex !important; } /* ---------- Bibliothèque de personnages : page PLEINE (comme le Studio), plus de modale ---------- */ body.charspage #inbar, body.charspage #log, body.charspage .sidebar, body.charspage #setup-panel { display:none !important; } body.charspage #persos-panel { display:block !important; } #persos-panel { width:min(680px, 100%); margin:20px auto; padding:0 16px; overflow-y:auto; } #persos-grid { display:flex; flex-direction:column; gap:12px; } .cp-sub { color:var(--dim); font-size:12px; margin:6px 2px 14px; line-height:1.5; } /* PC : le Studio prend TOUTE la largeur disponible (adaptatif) ; le mobile repasse en colonne plus bas. Une marge laterale confortable, sans plafond de largeur. */ #studio-panel { flex-direction:column; width:100%; margin:12px auto; padding:0 28px; overflow:hidden; flex:1; min-height:0; } /* sous-fenêtres du Studio en QUASI PLEIN ÉCRAN : les gros menus de création (personnages, sites, bestiaire, quêtes…) respirent sur PC au lieu de s'entasser dans 860px */ body.studiopage #modal { width:min(1400px, 96vw); max-height:94vh; } /* modale « pleine » à la demande (openModal(..., true)) : fiche joueur et autres gros formulaires */ #modal.modal-full { width:min(1400px, 96vw); max-height:94vh; } .st-head { display:flex; align-items:center; justify-content:space-between; } .st-head h2 { border:none; padding:0; } .st-head button { background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:6px 12px; cursor:pointer; font:inherit; } .st-head button:hover { border-color:var(--accent); } .st-body { display:flex; gap:16px; flex:1; min-height:0; margin-top:10px; } /* ——— v28 : ESPACE DE TRAVAIL du monde — rail de modules à gauche, page à droite ——— */ .st-ws { display:flex; gap:18px; align-items:flex-start; min-height:100%; } .st-rail { position:sticky; top:0; width:232px; flex:none; display:flex; flex-direction:column; gap:3px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--panel,#151820); } .st-railbtn { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:transparent; border:1px solid transparent; color:var(--txt); border-radius:8px; padding:8px 10px; cursor:pointer; font:inherit; font-size:13px; } .st-railbtn:hover { background:var(--hover); border-color:var(--line); } .st-railbtn.on { background:var(--sel); border-color:color-mix(in srgb, var(--accent) 55%, transparent); color:var(--txt); } /* v36 : UNE couleur de sélection */ .st-ric { width:20px; text-align:center; font-size:15px; } .st-rlb { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .st-rn { font:600 11px ui-monospace,monospace; color:var(--dim); background:var(--panel-2,var(--panel2)); border-radius:5px; padding:1px 6px; } .st-railsep { font:600 10px ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); padding:8px 10px 2px; } .st-page { flex:1; min-width:0; } .st-page .st-sec { border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:14px; background:var(--panel,#151820); } /* v28.1 : plus de colonne de gauche — l'accueil est une grille de cartes, le monde ouvert prend tout l'écran */ #studio-panel { position:relative; } .st-head { gap:12px; } .st-head .grow { flex:1; } .st-head h2 { margin:0; } .st-crumb { color:var(--dim); font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40vw; } .st-home { padding:6px 2px 30px; } .st-hsec { margin-bottom:26px; } .st-hst { font:600 11px ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:0 0 10px 2px; } .st-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; } .st-card { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; min-height:96px; padding:14px 16px; background:var(--panel,#151820); border:1px solid var(--line); border-radius:12px; color:var(--txt); cursor:pointer; font:inherit; } .st-card:hover { border-color:var(--accent); transform:translateY(-1px); } .st-cic { font-size:22px; } .st-cn { font-weight:600; font-size:15px; } .st-csub { font-size:12px; color:var(--dim); line-height:1.35; } .st-pg { min-height:60vh; } .st-pgh { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line); } .st-pgh h3 { margin:0; font-size:17px; } .st-pgh .grow { flex:1; } .st-pgh button { background:transparent; border:1px solid var(--line); color:inherit; border-radius:8px; padding:7px 12px; cursor:pointer; font:inherit; } .st-pgh button:hover { border-color:var(--accent); } #st-pagebody { max-width:1400px; font-size:13px; } /* ——— v36 : LE GABARIT « rail / liste maîtresse / inspecteur » (charte PC) ——— */ .st-pg-bare #st-pagebody { max-width:none; display:flex; flex-direction:column; height:calc(100vh - 128px); min-height:420px; } .st-pbar { display:flex; align-items:center; gap:var(--sp-2); height:44px; flex:none; padding:0 var(--sp-2) 0 0; margin-bottom:var(--sp-3); border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:2; } .st-pbar button { background:transparent; border:1px solid var(--line); color:inherit; border-radius:8px; height:var(--ctl); padding:0 12px; cursor:pointer; font:inherit; font-size:var(--fs); } .st-pbar button:hover { border-color:var(--accent); background:var(--hover); } .st-pbar button.pri { border-color:var(--ok); color:var(--ok); } .st-pbar button.pri:hover { background:color-mix(in srgb, var(--ok) 14%, transparent); } .st-pbar #st-pg-back { width:var(--ctl); padding:0; text-align:center; } .st-pbar #st-pg-help { width:var(--ctl); padding:0; border-radius:50%; } .st-pbar .grow { flex:1; } .st-crumb2 { display:flex; align-items:center; gap:6px; font-size:var(--fs); color:var(--dim); min-width:0; overflow:hidden; white-space:nowrap; } .st-crumb2 .st-cr.cur { color:var(--txt); font-weight:600; overflow:hidden; text-overflow:ellipsis; } .st-crumb2 .st-crs { opacity:.6; } .st-pill { font-size:11px; font-weight:600; color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent); border-radius:999px; padding:2px 9px; } .st-status { font-size:12px; color:var(--dim); } .st-menu { position:relative; } .st-menu-list[hidden] { display:none; } .st-menu-list { position:absolute; right:0; top:calc(100% + 4px); display:flex; flex-direction:column; min-width:180px; padding:4px; gap:2px; background:var(--surface-1); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:5; } .st-menu-list button { border:none; text-align:left; height:var(--ctl); display:flex; justify-content:space-between; gap:12px; } .st-menu-list button.danger:hover { border-color:transparent; color:var(--no); background:color-mix(in srgb, var(--no) 12%, transparent); } .st-menu-list kbd { font:11px ui-monospace,monospace; color:var(--dim); border:1px solid var(--line); border-radius:4px; padding:0 5px; } .st-gab { display:grid; grid-template-columns:var(--master-w,320px) minmax(0,1fr); gap:var(--sp-4); flex:1; min-height:0; } .st-master { display:flex; flex-direction:column; min-height:0; border:1px solid var(--line); border-radius:12px; background:var(--surface-1); overflow:hidden; } .st-master-h { display:flex; gap:6px; padding:var(--sp-2); border-bottom:1px solid var(--line); } .st-master-h input, .st-master-h select { height:var(--ctl); background:var(--surface-3); color:inherit; border:1px solid var(--line-ctl); border-radius:8px; padding:0 8px; font:inherit; font-size:var(--fs); min-width:0; } .st-master-h input { flex:1 1 90px; min-width:70px; } .st-master-h select { max-width:120px; flex:0 1 auto; min-width:60px; } .st-master-h button { width:var(--ctl); height:var(--ctl); padding:0; background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:8px; cursor:pointer; font:inherit; } .st-master-h button:hover { border-color:var(--accent); color:var(--txt); } .st-master-n { font:600 11px ui-monospace,monospace; color:var(--dim); padding:4px var(--sp-3); border-bottom:1px solid var(--line); } .st-master-l { flex:1; min-height:0; overflow:auto; padding:4px; outline:none; } .st-master-l:focus-visible { box-shadow:inset 0 0 0 2px var(--focus); border-radius:8px; } .st-mrow { display:flex; align-items:center; gap:8px; width:100%; height:var(--row); padding:0 8px; background:transparent; border:1px solid transparent; color:var(--txt); border-radius:8px; cursor:pointer; font:inherit; font-size:var(--fs); text-align:left; } .st-mrow:hover { background:var(--hover); } .st-mrow.sel { background:var(--sel); border-color:color-mix(in srgb, var(--accent) 45%, transparent); } .st-mic { width:20px; text-align:center; flex:none; } .st-mnm { flex:1 1 40%; min-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .st-mmeta { color:var(--dim); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34%; flex:0 1 auto; } .st-mbadge { font:600 10.5px ui-monospace,monospace; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border-radius:5px; padding:1px 5px; white-space:nowrap; } .st-insp { min-height:0; overflow:auto; padding:0 var(--sp-2) var(--sp-6) 0; } .st-insp-in { max-width:880px; } .st-insp-empty { color:var(--dim); font-size:var(--fs); padding:var(--sp-5); border:1px dashed var(--line); border-radius:12px; text-align:center; } .st-insp-t { display:flex; align-items:baseline; gap:10px; margin:2px 0 var(--sp-3); font-size:19px; font-weight:700; } .st-insp-t .st-insp-id { font:12px ui-monospace,monospace; color:var(--dim); } .st-sec2 { border:1px solid var(--line); border-radius:12px; margin-bottom:var(--sp-3); background:var(--surface-1); } .st-sec2 > summary { cursor:pointer; list-style:none; padding:9px 14px; font-size:var(--fs); font-weight:600; color:var(--accent); display:flex; align-items:center; gap:8px; user-select:none; } .st-sec2 > summary::-webkit-details-marker { display:none; } .st-sec2 > summary::before { content:"▸"; font-size:11px; color:var(--dim); transition:transform .15s; } .st-sec2[open] > summary::before { transform:rotate(90deg); } .st-sec2-b { padding:4px 14px 14px; } .st-fld { margin-bottom:var(--sp-3); } .st-fld > label { display:flex; flex-direction:column; gap:4px; font-size:var(--fs-label); color:var(--dim); } .st-fld > label .st-vh { display:block; } .st-fld input, .st-fld textarea, .st-fld select, .st-gv input, .st-gv select, .st-elem select, .st-elem input { background:var(--surface-3); color:var(--txt); border:1px solid var(--line-ctl); border-radius:8px; padding:0 9px; height:var(--ctl); font:inherit; font-size:var(--fs); } .st-fld textarea { height:auto; min-height:64px; padding:7px 9px; resize:vertical; line-height:1.5; } .st-fld input:focus, .st-fld textarea:focus, .st-fld select:focus, .st-gv input:focus, .st-gv select:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 2px color-mix(in srgb, var(--focus) 30%, transparent); } .st-grid { display:grid; grid-template-columns:38% 62%; gap:6px 12px; align-items:center; margin-bottom:var(--sp-2); } .st-g { font-size:var(--fs-label); color:var(--dim); } .st-gv { display:flex; align-items:center; gap:8px; min-width:0; } .st-gv > input[type=number] { width:110px; } .st-gv > select { max-width:100%; min-width:0; flex:1; } .st-gv > input[type=checkbox] { width:16px; height:16px; margin:0; } .st-unit { font-size:12px; color:var(--dim); } .st-help { font-size:12px; color:var(--dim); margin:4px 0 2px; line-height:1.45; } .st-fld-err { color:var(--no); font-size:12px; margin-top:4px; } .st-invalid, .st-fld .st-invalid { border-color:var(--no) !important; } .st-elems, .st-refrows, .st-inv, .st-loot { display:flex; flex-direction:column; gap:6px; margin:4px 0 8px; } .st-elem, .st-refrow, .st-invrow, .st-lootrow { display:flex; align-items:center; gap:6px; } .st-refrow select, .st-invrow select, .st-lootrow select { flex:1; min-width:0; } .st-invrow input[type=number], .st-lootrow input[type=number] { width:84px; } .st-refrow select, .st-invrow input, .st-invrow select, .st-lootrow input, .st-lootrow select { background:var(--surface-3); color:var(--txt); border:1px solid var(--line-ctl); border-radius:8px; padding:0 9px; height:var(--ctl); font:inherit; font-size:var(--fs); } .st-refrow button, .st-invrow button, .st-lootrow button { background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:8px; height:var(--ctl); padding:0 10px; cursor:pointer; font:inherit; font-size:12px; } .st-refrow button:hover, .st-invrow button:hover, .st-lootrow button:hover { border-color:var(--no); color:var(--no); } .st-banner { border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background:var(--sel); border-radius:10px; padding:8px 12px; font-size:12.5px; margin-bottom:var(--sp-3); line-height:1.45; } .st-gv > .st-unit + input { margin-left:4px; } .st-insp .st-fx-stage { max-width:520px; } .st-insp .st-scenchecks { margin-top:4px; } .st-elem select { flex:0 0 160px; } .st-elem input { width:80px; } .st-elem button, .st-elem-add { background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:8px; height:var(--ctl); padding:0 10px; cursor:pointer; font:inherit; font-size:12px; } .st-elem button:hover { border-color:var(--no); color:var(--no); } .st-elem-add { align-self:flex-start; } .st-elem-add:hover { border-color:var(--accent); color:var(--txt); } .st-porte-no [data-sec="porte"] .st-elems, .st-porte-no [data-sec="porte"] .st-grid, .st-porte-no [data-sec="porte"] .st-help, .st-porte-no [data-sec="porte"] .st-fld { display:none; } .st-porte-off { display:none; } .st-porte-no .st-porte-off { display:block; } /* v72 : un PASSIF ne coute rien (regle du moteur) — ses trois champs de cout disparaissent et une ligne dit pourquoi, au lieu d'accepter une saisie que le serveur efface en silence. */ .st-cout-no .st-cout { display:none; } .st-inv-no .st-inv { display:none; } /* v77 : les champs d'invocation, sur une invocation seule */ /* v77 : une condition que le serveur n'a pas su relire se voit, au lieu de se deguiser en feuille */ .ct-illisible { border-left:3px solid var(--no); background:color-mix(in srgb, var(--no) 10%, transparent); } .ct-illb { color:var(--no); font-size:12.5px; } .st-cout-off { display:none; } .st-cout-no .st-cout-off { display:block; } /* v76 : un champ que le MOTEUR derive (stats sous archetype) se lit, ne se tape pas — il gardait l'air saisissable et changer le seul niveau l'ecrasait en silence. */ .st-derive-ro { opacity:.72; cursor:not-allowed; background:var(--panel2); } .st-insp .st-assist { margin:0; } /* v39 — la page Personnages : champs en deux colonnes, champ rare à ajouter, journées (routine en grille), affinités, frise de la chronologie, galerie de sprites */ .st-cfields { display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-4); } .st-cfields .st-fld { min-width:0; } .st-cadd select { background:var(--surface-3); color:var(--dim); border:1px dashed var(--line); border-radius:8px; height:var(--ctl); padding:0 9px; font:inherit; font-size:var(--fs-label); } .st-cadd select:hover { color:var(--txt); border-style:solid; } .st-days { display:grid; grid-template-columns:110px 1fr 1fr; gap:6px 10px; align-items:center; margin:var(--sp-2) 0; } .st-days-h, .st-days-r { display:contents; } .st-days-h span { font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.04em; } .st-days-m { font-size:var(--fs-label); color:var(--dim); } .st-days input { background:var(--surface-3); color:var(--txt); border:1px solid var(--line-ctl); border-radius:8px; padding:0 9px; height:var(--ctl); font:inherit; font-size:var(--fs); min-width:0; } .st-days input:focus { outline:none; border-color:var(--focus); } .st-days-h2 { margin-top:var(--sp-4); margin-bottom:4px; font-size:var(--fs-label); color:var(--accent); font-weight:600; } .st-checks { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; margin:4px 0 8px; } .st-rels { display:flex; flex-direction:column; gap:4px; margin:4px 0 8px; } .st-rels .rel-line { margin:0; } .st-frise { position:relative; display:flex; gap:var(--sp-4); overflow-x:auto; padding:10px 8px 6px; margin-bottom:var(--sp-3); } .st-frise-line { position:absolute; left:8px; right:8px; top:16px; height:2px; background:var(--line); } .st-frise-pt { position:relative; background:transparent; border:0; color:inherit; font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; flex:0 0 auto; width:150px; padding:0; text-align:center; } .st-frise-dot { width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid var(--surface-1); box-shadow:0 0 0 2px var(--accent); margin-bottom:6px; } .st-frise-pt.destin .st-frise-dot { background:var(--surface-1); } .st-frise-k { font-size:11px; color:var(--dim); } .st-frise-t { font-size:var(--fs-label); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .st-frise-pt:hover .st-frise-t { color:var(--accent); } .st-flash { outline:2px solid var(--focus); outline-offset:2px; border-radius:8px; } .st-sprites { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-3); } .st-sprite { margin:0; width:110px; position:relative; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:6px; display:flex; flex-direction:column; align-items:center; gap:4px; } .st-sprite img { max-width:96px; max-height:120px; object-fit:contain; } .st-sprite figcaption { font-size:11px; color:var(--dim); text-align:center; word-break:break-all; } .st-sprite button { position:absolute; top:4px; right:4px; background:var(--surface-3); border:1px solid var(--line); border-radius:6px; color:var(--dim); font:inherit; font-size:11px; padding:1px 6px; cursor:pointer; } .st-sprite button:hover, .st-sprite button.arm { border-color:var(--no); color:var(--no); } .st-insp .st-up { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:4px 0; } .st-insp .st-up input[type=text], .st-insp .st-up select { background:var(--surface-3); color:var(--txt); border:1px solid var(--line-ctl); border-radius:8px; padding:0 9px; height:var(--ctl); font:inherit; font-size:var(--fs); } .st-insp .st-up input[type=text] { width:110px; } /* v40 — la page Sites : mots en lignes, décors par moment ; l'éditeur de carte : décors, « Ici », épingles */ .st-wordrow input { flex:1; min-width:0; background:var(--surface-3); color:var(--txt); border:1px solid var(--line-ctl); border-radius:8px; padding:0 9px; height:var(--ctl); font:inherit; font-size:var(--fs); } .st-wordrow input:focus { outline:none; border-color:var(--focus); } .st-bgslots { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3); margin-bottom:var(--sp-2); } .st-bgslot { display:flex; flex-direction:column; gap:6px; min-width:0; } .st-bgslot-t { font-size:var(--fs-label); color:var(--dim); } .st-bgfig { width:auto; } .st-bgfig img { max-width:100%; max-height:110px; object-fit:cover; } .st-bgempty { color:var(--dim); font-size:12px; border:1px dashed var(--line); border-radius:8px; padding:18px; text-align:center; } .st-bgslot .st-up input[type=file] { max-width:150px; font-size:11px; } body.st-dirty #st-pg-save { border-color:var(--ok); color:var(--ok); } #st-toasts { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:120; pointer-events:none; } .st-toast { pointer-events:auto; display:flex; align-items:center; gap:12px; background:var(--surface-1); border:1px solid var(--line); border-left:3px solid var(--accent); color:var(--txt); border-radius:10px; padding:9px 12px; font-size:13px; max-width:420px; box-shadow:0 10px 30px rgba(0,0,0,.35); animation:st-toast-in .18s ease-out; } .st-toast.ok { border-left-color:var(--ok); } .st-toast.err { border-left-color:var(--no); } .st-toast.out { opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; } .st-toast button { background:transparent; border:1px solid var(--line); color:var(--accent); border-radius:6px; padding:3px 10px; cursor:pointer; font:inherit; font-size:12px; } @keyframes st-toast-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } @media (max-width:1439px){ .st-gab { --master-w:280px; } } /* les sous-menus héritaient du style de la modale (#modal-body) : même rendu des champs en page */ #st-pagebody input, #st-pagebody textarea, #st-pagebody select { background:var(--ink); color:inherit; border:1px solid var(--line); border-radius:6px; padding:6px; font:inherit; } #st-pagebody input[type=checkbox], #st-pagebody input[type=radio] { width:auto; padding:0; } /* v51 — LE TEXTE ÉTAIT ROGNÉ DANS LA MOITIÉ DES CHAMPS DU STUDIO. La règle ci-dessus vient de l'ancienne modale et porte un ID : elle BATTAIT la charte du gabarit (`padding:0 9px`) et remettait `padding:6px` dans une hauteur fixe de --ctl — il ne restait plus que 14 px pour une ligne de 19,5 px, d'où les lettres coupées en haut et en bas dès qu'un champ était rempli. La charte reprend la main, à la même force. */ #st-pagebody .st-gab input, #st-pagebody .st-gab select { padding:0 9px; } #st-pagebody .st-gab textarea { padding:7px 9px; } #st-pagebody .st-gab input[type=checkbox], #st-pagebody .st-gab input[type=radio] { padding:0; } #st-editor { flex:1; min-width:0; overflow-y:auto; padding-bottom:24px; } .st-group { font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; margin-top:10px; } .st-item { border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer; background:var(--panel2); font-size:13px; } .st-item:hover { border-color:var(--accent); } .st-item.sel { border-color:var(--accent); background:var(--sel); } /* v36 : la même que le rail */ .st-item .st-rk { float:right; font-size:11px; color:var(--dim); } .st-new { border-style:dashed; color:var(--dim); text-align:center; } .st-sec { border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:12px; background:var(--panel); } .st-sec h3 { margin:0 0 10px; font-size:13px; color:var(--accent); border:none; padding:0; } .st-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .st-row label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--dim); flex:1; min-width:130px; } .st-row label.st-wide { flex-basis:100%; } .st-row input, .st-row select, .st-row textarea { background:var(--ink); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; font-size:13px; } .st-row textarea { resize:vertical; } .st-pair { display:flex; align-items:center; gap:5px; } /* base + gain d'un archétype, sur une ligne */ .st-pair input { flex:1; min-width:0; max-width:80px; } .st-li-base { opacity:.72; } /* S2 : compétence de BASE (non surchargée) */ .st-li-base:hover { opacity:1; } /* S5 : PRÉVIZ de l'éditeur ⚡ — petite scène qui joue le preset (fx-anim) + l'effet d'écran */ .st-fx-stage { position:relative; height:130px; margin:8px 0; border-radius:10px; overflow:hidden; background:radial-gradient(circle at 50% 70%, #1a2030, #0a0d14 75%); border:1px solid var(--line); } .fxs-shake { animation:fxs-shake .5s ease-in-out; } @keyframes fxs-shake { 0%,100%{transform:none;} 20%{transform:translateX(-7px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} } .fxs-flash { animation:fxs-flash .55s ease-out; } @keyframes fxs-flash { 0%{box-shadow:none;} 30%{box-shadow:inset 0 0 60px var(--fxcol);} 100%{box-shadow:none;} } .st-scen { font-size:11px; } .st-scenchecks { display:flex; flex-wrap:wrap; gap:4px 14px; } .st-scencheck { font-size:12.5px; } /* MÉGA-GÉNÉRATION IA (barre « Contenu du monde ») */ .st-mega { border:1px solid var(--accent); border-radius:10px; padding:10px 12px; margin-bottom:12px; background:color-mix(in srgb, var(--accent) 8%, transparent); } .st-mega-in { display:flex; align-items:center; gap:8px; } .st-mega-star { font-size:16px; } .st-mega-in input { flex:1; min-width:0; background:var(--bg); border:1px solid var(--line); color:inherit; border-radius:6px; padding:7px 10px; font:inherit; font-size:13px; } .st-mega-in button.pri { border:1px solid var(--ok); color:var(--ok); background:transparent; border-radius:6px; padding:7px 14px; cursor:pointer; font:inherit; font-size:13px; white-space:nowrap; } .st-mega-in button.pri:hover { background:color-mix(in srgb, var(--ok) 15%, transparent); } .st-mega-in button:disabled { opacity:.5; cursor:default; } .st-mega-opts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; } .st-mega-lbl { font-size:11px; color:var(--dim); } .st-mega-opts input[type=range] { flex:1; min-width:100px; max-width:220px; accent-color:var(--accent); } .st-seg { display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; } .st-seg button { border:none; background:transparent; color:var(--dim); font:inherit; font-size:12px; padding:5px 11px; cursor:pointer; } .st-seg button.on { background:var(--accent); color:#fff; } .st-mega-warn { font-size:11px; color:var(--dim); margin-top:7px; } .st-mega-out { font-size:12px; margin-top:6px; min-height:0; } .st-mega-out:empty { display:none; } .st-mega-out.ok { color:var(--ok); } .st-mega-out.err { color:var(--no); } .st-mega-out.run { color:var(--accent); } .st-mega-out.warn { color:#d9a441; } /* W5 : succès partiel (une passe a échoué mais le reste est écrit) */ /* W5c : liste d'APERÇU des passes (aperçu -> appliquer par lot -> annuler) */ .st-mega-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; } .st-mega-lhead { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--dim); } .st-mega-how { font-size:11.5px; color:var(--dim); line-height:1.5; margin:6px 0 2px; border-left:2px solid var(--line); padding:2px 0 2px 9px; } .st-mega-how b { color:var(--fg); } .st-mega-pass { border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:var(--panel2); } .st-mega-pass.done { border-color:var(--ok); opacity:.75; } .st-mega-pass.err { border-color:var(--no); } .st-mega-pass.empty { opacity:.5; } .st-mega-pt { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; } .st-mega-cnt { color:var(--dim); font-size:12px; flex:1; min-width:80px; } .st-mega-done { color:var(--ok); font-size:12px; } .st-mega-none { color:var(--dim); font-size:12px; } .st-mega-perr { color:var(--no); font-size:12px; } .st-mega-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; } .st-mega-chip { font-size:11px; padding:1px 7px; border-radius:10px; background:rgba(127,127,127,.16); color:var(--dim); } .st-mega-apply.sm, .pri.sm { font-size:12px; padding:2px 10px; } /* W5d : progression de « Monde entier » (nombreuses petites portions) */ .st-mega-prog { display:flex; align-items:center; gap:8px; margin-top:8px; } .st-mega-bar { flex:1; height:8px; border-radius:5px; background:rgba(127,127,127,.2); overflow:hidden; } .st-mega-bar > i { display:block; height:100%; width:0; background:var(--accent); transition:width .25s ease; } .st-mega-ptxt { font-size:11px; color:var(--dim); white-space:nowrap; } .st-btns { display:flex; gap:8px; flex-wrap:wrap; } .st-btns button, .st-li button, .st-assist button, .st-up button { background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:6px 12px; cursor:pointer; font:inherit; font-size:13px; } .st-btns button:hover, .st-li button:hover, .st-assist button:hover, .st-up button:hover { border-color:var(--accent); } .st-btns button.pri { border-color:var(--ok); color:var(--ok); } .st-btns button.danger:hover, .st-li button.danger:hover { border-color:var(--no); color:var(--no); } .st-assist { display:flex; gap:8px; flex-wrap:wrap; align-items:center; border-top:1px dashed var(--line); padding-top:10px; margin-top:6px; } .st-assist input { flex:1; min-width:180px; background:var(--ink); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; font-size:13px; } .st-assist select { background:var(--ink); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px; font:inherit; font-size:12px; } .st-assist button[data-role="undo"] { border-color:#c9a24a; color:#e8c877; } .st-assist button[data-role="undo"]:disabled { opacity:.4; cursor:default; border-color:var(--line); color:var(--dim); } /* IA PAR CHAMP (v18.1) : un ✨ discret sous chaque champ, deplie une barre (consigne + ops) */ .st-fai-wrap { margin:-2px 0 8px; } .st-fai-toggle { background:transparent; border:none; color:var(--dim); cursor:pointer; font:inherit; font-size:12px; padding:2px 0; } .st-fai-toggle:hover { color:var(--accent); } .st-fai { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:4px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--ink); } .st-fai[hidden] { display:none; } .st-fai input { flex:1; min-width:140px; background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:5px 8px; font:inherit; font-size:12px; } .st-fai button { background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:4px 10px; cursor:pointer; font:inherit; font-size:12px; } .st-fai button:hover { border-color:var(--accent); } .st-fai button[data-op="rewrite"]:hover { border-color:#c9a24a; color:#e8c877; } /* champ pleine largeur de l'editeur monde (chaque champ texte + sa barre IA en bloc) */ #st-editor .st-field { margin-bottom:6px; } #st-editor .st-field > label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--dim); } #st-editor .st-field > label input, #st-editor .st-field > label textarea { background:var(--ink); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; font-size:13px; } #st-editor .st-field > label textarea { resize:vertical; } .st-li { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); padding:6px 2px; font-size:13px; } .st-li .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; } .st-li .dim { color:var(--dim); font-size:12px; } .st-up { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; border-top:1px dashed var(--line); padding-top:10px; } .st-up select, .st-up input[type="text"] { background:var(--ink); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px; font:inherit; font-size:12px; } .st-up input[type="file"] { font-size:12px; color:var(--dim); max-width:210px; } .st-err { color:var(--no); font-size:12px; min-height:14px; margin-top:6px; } .st-note { font-size:12px; color:var(--dim); margin:4px 0 10px; } /* module W : éditeur de QUÊTES — étape = n° + type + cible + consigne + supprimer */ .st-check { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim); margin:6px 0; } .st-check input { width:auto; } .st-qstep { display:flex; align-items:center; gap:6px; margin-bottom:6px; } .st-qnum { flex:none; width:18px; height:18px; border-radius:50%; background:#2a2f3a; color:#c9a24a; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; } .st-qstep select, .st-qstep input { background:var(--ink); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px; font:inherit; font-size:12px; } .st-qstep select[data-qs="type"] { flex:none; } .st-qstep [data-qs="cible"] { flex:1; min-width:110px; } .st-qstep [data-qs="desc"] { flex:2; min-width:120px; } /* W1 : editeur de CARTE (zones/villes/quartiers) */ .st-zone, .st-ville { border:1px solid var(--line); border-radius:8px; padding:10px; margin-bottom:8px; background:var(--panel); } .st-zone .st-row, .st-ville .st-row { align-items:flex-end; } .st-zone label, .st-ville label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--dim); } .st-zone input, .st-zone select, .st-zone textarea, .st-ville input, .st-ville select, .st-ville textarea { background:var(--ink); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:5px 7px; font:inherit; font-size:12px; } .st-zone label.st-wide, .st-ville label.st-wide { flex-basis:100%; } .st-adj, .st-quarts { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; } .st-adj-t { display:block; font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; } .st-adj { display:flex; flex-wrap:wrap; gap:6px; } .st-adj .st-adj-t { flex-basis:100%; } .st-dir { display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--dim); } .st-quart { display:flex; gap:6px; margin-bottom:5px; flex-wrap:wrap; } .st-quart input { flex:1; min-width:90px; } .st-quart button.danger, .st-zone .st-row button.danger, .st-ville .st-row button.danger { background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:6px; padding:4px 9px; cursor:pointer; font:inherit; } .st-quart button.danger:hover, .st-zone button.danger:hover, .st-ville button.danger:hover { border-color:var(--no); color:var(--no); } .st-quarts button:not(.danger) { background:transparent; border:1px dashed var(--line); color:var(--dim); border-radius:6px; padding:4px 10px; cursor:pointer; font:inherit; font-size:12px; } /* W2 : formulaire boutique (Studio) — la description pleine largeur + inventaire */ .st-shopform label.st-wide { display:block; margin-top:8px; } .st-shopform textarea { width:100%; box-sizing:border-box; background:var(--ink); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px; font:inherit; resize:vertical; margin-top:4px; } .st-inv-line { display:flex; gap:6px; margin-bottom:5px; align-items:center; } .st-inv-line input[data-il="item"] { flex:1; min-width:110px; } .st-inv-line input[data-il="prix"], .st-inv-line input[data-il="stock"] { width:76px; flex:none; } /* W3 : présence & routine + stats du PNJ (éditeur perso) */ .st-row2 { display:flex; gap:10px; flex-wrap:wrap; } .st-row2 > label.grow { flex:1; min-width:150px; } .st-routine { display:flex; flex-direction:column; gap:6px; margin-top:8px; } .st-rt-row { display:flex; gap:8px; align-items:center; } .st-rt-lb { flex:none; width:74px; font-size:12px; color:var(--dim); font-weight:600; } .st-rt-row input { flex:1; min-width:80px; background:var(--panel-2,var(--panel2)); border:1px solid var(--line); color:inherit; border-radius:7px; padding:7px 9px; font:inherit; font-size:13px; } .st-stats { display:flex; gap:10px; flex-wrap:wrap; } .st-stat { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--dim); } .st-stat input { width:72px; background:var(--panel-2,var(--panel2)); border:1px solid var(--line); color:inherit; border-radius:7px; padding:7px 9px; font:inherit; } /* W3 : « autour de toi » (présence calculée) dans le panneau d'état */ .presence-h { margin-top:10px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ok); border-top:1px solid var(--line); padding-top:8px; } .kv.presence .k { color:#a0d8b8; } .kv.coin .k { color:#d8cf9a; } .kv.ailleurs .k { color:var(--dim); } .kv.presence span:last-child { color:var(--dim); font-style:italic; } /* W1.5 : carte du monde (overlay SVG) */ #map-overlay { display:none; position:fixed; inset:0; z-index:95; flex-direction:column; background:rgba(8,10,14,.94); } body.mapopen #map-overlay { display:flex; } #map-head { display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--line); font-weight:bold; color:var(--accent); } #map-head #map-close { margin-left:auto; background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:4px 12px; cursor:pointer; font:inherit; } #map-head #map-close:hover { border-color:var(--accent); } #map-niveaux { display:flex; align-items:center; gap:5px; font-weight:normal; } .map-nlbl { font-size:12px; color:var(--dim); } .map-nbtn { background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:6px; min-width:26px; padding:2px 6px; cursor:pointer; font:inherit; font-size:12px; } .map-nbtn:hover { border-color:var(--accent); } .map-nbtn.on { border-color:var(--ok); color:var(--ok); } #map-svg-wrap { flex:1; overflow:auto; padding:20px; display:flex; } /* rendu à la taille NATURELLE, rétréci seulement si ça dépasse — jamais étiré */ .map-svg { margin:auto; max-width:100%; max-height:100%; } .map-svg.map-play { cursor:crosshair; } /* carte jouable : clic = se déplacer */ .map-hit { fill:transparent; } /* zone cliquable invisible (descente dans une sous-carte) */ .map-hit.map-descend { cursor:pointer; } .map-hit.map-descend:hover { fill:rgba(216,74,56,.16); } .map-empty { margin:auto; color:var(--dim); font-size:14px; } /* ——— M1 : carte VORONOÏ (île continue, frontières partagées, branchée sur le moteur spatial) ——— */ .map-sea { fill:#b6cfcd; } .map-sea-wave { fill:none; stroke:#9db8b6; stroke-width:1.3; opacity:.45; } .map-stone { fill:#24222a; } /* donjon : fond de pierre */ .map-beyond { fill:#d0bf94; } /* région : terres au-delà de la frontière */ .map-city-bg { fill:#dcd7cb; } /* urbain : papier ville */ .map-coast-halo { fill:none; stroke:#86a09c; stroke-width:12; opacity:.5; } .map-land { fill:#ecdfbf; } .map-coast { fill:none; stroke:#5b4a2f; stroke-width:2.6; } .map-border { fill:none; stroke:#5b4a2f; stroke-width:3; stroke-dasharray:10 3 2 3; stroke-linejoin:round; } .map-floor-halo { fill:none; stroke:#000; stroke-width:16; opacity:.45; } .map-floor-ring { fill:none; stroke:#3a3324; stroke-width:5; } .map-cell { opacity:.5; } /* teinte terrain (fill posé en style inline) */ .map-cell.water { opacity:.72; } .map-frontier { fill:none; stroke:#7c6942; stroke-width:1.3; opacity:.8; } /* frontière PARTAGÉE (nette) */ .map-fogcell { fill:#c8bda2; opacity:.9; } .map-fog-q { fill:#6d5f42; font:700 30px Georgia, "Times New Roman", serif; opacity:.5; } .map-fog-t { fill:#6d5f42; font:italic 12px Georgia, serif; opacity:.6; letter-spacing:.6px; } .map-roof { fill:#b06a4b; stroke:#5b4a2f; stroke-width:1; } .map-roof-b { fill:#ece0c4; stroke:#5b4a2f; stroke-width:1; } .map-zn-halo { fill:none; stroke:#f0e5c6; stroke-width:3.6; stroke-linejoin:round; font:700 15px Georgia, "Times New Roman", serif; paint-order:stroke; } .map-zn { fill:#40341c; font:700 15px Georgia, "Times New Roman", serif; } .map-zn.here { fill:#8a4b12; } .map-here-halo { fill:#c0392b; opacity:.22; } /* POINT ROUGE = joueur */ .map-here { fill:#d84a38; stroke:#fff; stroke-width:1.6; } .map-here-core { fill:#fff; } /* module W : CIBLE de quête (ambre) au-dessus d'une zone objectif découverte */ .map-obj-o { fill:none; stroke:#c9a24a; stroke-width:2.2; opacity:.95; } .map-obj-m { fill:none; stroke:#c9a24a; stroke-width:1.5; opacity:.85; } .map-obj-c { fill:#c9a24a; } .map-obj { filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); } .map-title { fill:#4a3d22; font:700 20px Georgia, serif; letter-spacing:.04em; } .map-title-h { fill:none; stroke:#f0e5c6; stroke-width:4; font:700 20px Georgia, serif; letter-spacing:.04em; paint-order:stroke; } .map-frame-o { fill:none; stroke:#5b4a2f; stroke-width:3; } .map-frame-i { fill:none; stroke:#8a7448; stroke-width:1.2; } .map-comp-disc { fill:#e7dcc0; stroke:#5b4a2f; stroke-width:1.4; opacity:.92; } .map-comp-2 { fill:#8a7448; } .map-comp-1 { fill:#5b4a2f; } .map-comp-n { fill:#5b4a2f; font:700 12px Georgia, serif; } /* ——— M2 : symboles de terrain DESSINÉS (encre sur parchemin) ——— */ .map-ink { fill:none; stroke:#5b4a2f; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .map-hatch { fill:none; stroke:#6f5c39; stroke-width:1; stroke-linecap:round; opacity:.7; } .map-mtn { fill:#d9cfb2; stroke:#5b4a2f; stroke-width:1.5; stroke-linejoin:round; } .map-snow { fill:none; stroke:#f6f1e3; stroke-width:2.2; stroke-linejoin:round; } .map-hill { fill:#d3c88f; stroke:#5b4a2f; stroke-width:1.4; stroke-linejoin:round; opacity:.92; } .map-tree { fill:#93a862; stroke:#4c5f34; stroke-width:1.1; stroke-linejoin:round; } .map-tree2 { fill:#a6b56f; stroke:#4c5f34; stroke-width:1.1; } .map-trunk { stroke:#5b4a2f; stroke-width:1.5; } .map-reedtip { fill:#7d8a4c; } .map-marshpool { fill:#a8c3bf; opacity:.6; } .map-dune { fill:none; stroke:#bf9f5c; stroke-width:1.6; stroke-linecap:round; } .map-wave2 { fill:none; stroke:#6f9aa0; stroke-width:1.3; opacity:.8; } .map-flag { fill:#c0392b; stroke:#8a3d2e; stroke-width:.8; } .map-rock { fill:#cabd9c; stroke:#5b4a2f; stroke-width:1.4; } .map-cave-mouth { fill:#332c20; } /* ——— thèmes moderne / futuriste (POIs + décor) : même plume parchemin, accents verre/énergie ——— */ .map-glass { fill:#a9c2c6; stroke:#5b6f72; stroke-width:.5; opacity:.72; } /* fenêtres / verre (moderne) */ .map-glow { fill:none; stroke:#4f9aa2; stroke-width:1.4; stroke-linecap:round; opacity:.85; } /* énergie (futuriste) */ .map-glow-f { fill:#8fd0d6; stroke:#3f8890; stroke-width:.8; } /* ——— couche 3 (décor esthétique) : ornements végétaux/minéraux, palette parchemin ——— */ .map-frond { fill:none; stroke:#6f8a3f; stroke-width:1.5; stroke-linecap:round; } .map-cactus { fill:none; stroke:#5f7d43; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .map-grass { fill:none; stroke:#7d8a4c; stroke-width:1.3; stroke-linecap:round; } .map-flower-p { fill:#d98fa6; stroke:#a85f74; stroke-width:.5; } .map-flower-c { fill:#e6c34c; stroke:#b8863a; stroke-width:.5; } /* ——— M3 : rivières / routes / rails / marqueurs nommés ——— */ .map-river { fill:#8fb3c6; opacity:.92; } .map-river-c { fill:none; stroke:#6f97ad; stroke-width:1; opacity:.7; } .map-road-casing { fill:none; stroke:#efe4c4; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; } .map-road-major { fill:none; stroke:#9a6a34; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; } .map-road-minor { fill:none; stroke:#7a6034; stroke-width:1.7; stroke-dasharray:1 5; stroke-linecap:round; opacity:.85; } .map-rail { stroke:#4a4136; stroke-width:2; fill:none; } .map-rail-ties { stroke:#4a4136; stroke-width:6; fill:none; stroke-dasharray:1.4 6; } .map-stn-o { fill:#fff; stroke:#b03a2e; stroke-width:2.6; } .map-stn-i { fill:#b03a2e; } .map-tower { fill:#d8b58a; stroke:#5b4a2f; stroke-width:1.3; stroke-linejoin:round; } .map-tower-x { fill:none; stroke:#5b4a2f; stroke-width:1; } .map-stair-b { fill:#e7dcc0; stroke:#5b4a2f; stroke-width:1.2; } .map-stair-s { fill:#c6b184; stroke:#5b4a2f; stroke-width:.7; } /* ——— Carte v2 : label d'aire, marqueur d'entrée de sous-carte, fil d'Ariane ——— */ .map-aire-l { font-size:13px; font-style:italic; opacity:.9; } .map-aire-edge { fill:none; stroke:#7c6942; stroke-width:1.1; opacity:.42; } /* bord d'aire DOUX (lit « terrain », pas polygone) */ .map-border-int { fill:none; stroke:#7c6942; stroke-width:1.6; stroke-linejoin:round; opacity:.75; } /* frontière COMMUNE entre régions (en jeu) */ .map-reg-here { stroke:#8a4b12; stroke-width:2; } /* région où se trouve le joueur */ .map-entry-o { fill:#f2e6c4; stroke:#8a5a12; stroke-width:1.6; stroke-dasharray:3 2; } .map-entry-q { fill:#8a5a12; font:700 10px Georgia, serif; } .map-entry-in-o { fill:none; stroke:#3f7d3a; stroke-width:1.8; } .map-entry-in { fill:#3f7d3a; } .map-trail { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--dim); } .map-bc { color:var(--dim); } .map-bc.cur { color:var(--accent); font-weight:700; } .map-bc[data-ascend] { cursor:pointer; text-decoration:underline dotted; } .map-bc[data-ascend]:hover { color:var(--accent); } .map-bc-sep { opacity:.6; } /* ═══ Éditeur de carte v2 (plein écran, visuel) ═══ */ #mapedit { display:none; position:fixed; inset:0; z-index:95; flex-direction:column; background:var(--bg,#0e1015); color:var(--txt); } body.mapedit-open #mapedit { display:flex; } .me-head { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.2); } .me-title { font-weight:bold; color:var(--accent); font-size:15px; white-space:nowrap; } .me-head .grow { flex:1; } .me-bc { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); flex-wrap:wrap; } .me-bc-i { cursor:pointer; } .me-bc-i.cur { color:var(--accent); font-weight:700; } .me-bc-i:hover { text-decoration:underline; } .me-msg { font-size:12px; color:var(--dim); } .me-msg.ok { color:var(--ok); } .me-msg.err { color:#e8896b; } .me-save.on { box-shadow:0 0 0 2px var(--ok) inset; } .me-body { flex:1; display:flex; min-height:0; } .me-side { width:302px; flex-shrink:0; overflow-y:auto; padding:8px 12px 20px; border-right:1px solid var(--line); background:rgba(0,0,0,.12); } .me-canvas { flex:1; position:relative; min-width:0; display:flex; background:#222530; } .me-svg { width:100%; height:100%; touch-action:none; } .me-canvas-hint { position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:2; font-size:12px; color:#f0e5c6; background:rgba(0,0,0,.5); padding:3px 10px; border-radius:20px; pointer-events:none; } .me-sec-t { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); margin:12px 0 6px; } .me-tools { display:flex; flex-wrap:wrap; gap:4px; } .me-tool { font-size:12px; padding:5px 8px; } .me-tool.on { border-color:var(--accent); color:var(--accent); } .me-themes { display:flex; gap:4px; margin:2px 0 6px; } /* sélecteur de thème d'icônes (fantasy/moderne/futuriste) */ .me-theme { flex:1; font-size:11px; padding:4px 2px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--dim); cursor:pointer; } .me-theme.on { background:var(--accent); color:#fff; border-color:var(--accent); } .me-palette { max-height:200px; overflow-y:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; } .me-pgrp { grid-column:1/-1; font-size:10px; color:var(--dim); margin-top:4px; } .me-poi { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 2px; font-size:10px; cursor:pointer; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--txt); } .me-poi.on { border-color:var(--accent); background:rgba(255,255,255,.06); } .me-poi-ic { width:30px; height:30px; } .me-locks { display:flex; flex-direction:column; gap:3px; } .me-lock { font-size:12px; display:flex; align-items:center; gap:6px; cursor:pointer; } .me-props label { display:block; font-size:12px; margin-bottom:6px; } .me-props input, .me-props select, .me-props textarea { width:100%; box-sizing:border-box; } .me-selt { font-size:12px; font-weight:700; color:var(--accent); margin-bottom:6px; } .me-hint { font-size:11px; color:var(--dim); margin:6px 0; } .me-subrow { margin:6px 0; } .me-dim { color:var(--dim); font-weight:400; font-size:11px; } .me-bgs { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; } .me-bg { margin:0; position:relative; width:84px; display:flex; flex-direction:column; align-items:center; gap:2px; background:rgba(0,0,0,.2); border:1px solid var(--line); border-radius:8px; padding:4px; } .me-bg img { max-width:76px; max-height:52px; object-fit:cover; border-radius:4px; } .me-bg figcaption { font-size:10px; color:var(--dim); } .me-bg button { position:absolute; top:2px; right:2px; font-size:10px; padding:0 4px; background:rgba(0,0,0,.55); border:1px solid var(--line); color:inherit; border-radius:5px; cursor:pointer; width:auto; } .me-bg button.arm { border-color:var(--no); color:var(--no); } .me-bgup { display:flex; gap:4px; align-items:center; flex-wrap:wrap; margin:4px 0 8px; } .me-bgup select { width:auto; } .me-bgup input[type=file] { width:auto; max-width:140px; font-size:11px; } .me-bgup button { width:auto; } .me-ici { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 8px; } .me-chip { background:rgba(255,255,255,.05); border:1px solid var(--line); color:inherit; border-radius:999px; padding:2px 9px; font:inherit; font-size:11.5px; cursor:pointer; } .me-chip:hover { border-color:var(--accent); } /* v70 — UNE PUCE ACTIVE SE VOIT. `.on` n'avait de style QUE dans la page Médias (`.st-md-kinds .me-chip.on`) : partout ailleurs — les FORMES d'un personnage depuis v48, les PLANS depuis v69 — la puce choisie était strictement identique aux autres. On ne savait pas où on était. Un changement de bordure ne suffit pas : c'est la sélection principale d'une page, elle prend l'aplat d'accent, comme la ligne sélectionnée d'une liste maîtresse. */ /* v75 : le texte d'une puce ACTIVE suit le jeton `--on-accent` — mesure : sur l'aplat d'accent, le blanc ne passe le seuil AA que dans le thème clair (4,7) et tombe a 1,9-2,4 partout ailleurs ; l'encre du thème fait l'inverse. Un jeton nomme pour son rôle règle les six thèmes d'un coup (7,6 a 10,3 sur les sombres, 4,7 sur le clair). C'est la finition de la demande « mets un effet sur celui actif » : encore fallait-il pouvoir LIRE lequel. */ .me-chip.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); } .me-chip.on:hover { border-color:var(--accent); } .me-pin circle { fill:var(--accent); stroke:#fff; stroke-width:1.2; } .me-pin text { font:700 8px sans-serif; fill:#fff; pointer-events:none; } .me-cartes { display:flex; flex-direction:column; gap:2px; } .me-cart-tree { display:flex; flex-direction:column; gap:2px; } .me-cart { display:flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:5px; cursor:pointer; } .me-cart:hover { background:var(--hover); } .me-cart.cur { background:var(--sel); color:var(--txt); } /* v36 : la même sélection partout */ .me-cart.drag { opacity:.45; } .me-cart.drop { outline:2px dashed var(--accent); outline-offset:-2px; background:rgba(255,255,255,.06); } .me-cart-k { font-size:9px; text-transform:uppercase; color:var(--dim); } .me-cart-n { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .me-cart-x { margin-left:auto; border:none; background:transparent; color:var(--dim); font-size:15px; line-height:1; cursor:pointer; padding:0 3px; border-radius:4px; } .me-cart-x:hover { color:#fff; background:#b03a2e; } .me-cart-new { width:100%; margin-bottom:6px; padding:6px 8px; font-size:12px; border:1px dashed var(--line); background:transparent; color:var(--fg); border-radius:6px; cursor:pointer; } .me-cart-new:hover { border-color:var(--accent); color:var(--accent); } .me-cart-root { margin-top:6px; padding:6px 8px; font-size:11px; text-align:center; color:var(--dim); border:1px dashed var(--line); border-radius:6px; } .me-cart-root.drop { outline:2px dashed var(--accent); color:var(--accent); } .me-fr { fill:none; stroke:#5b4a2f; stroke-width:2.4; } .me-fr-empty { fill:none; stroke:#7c6942; stroke-width:2; stroke-dasharray:8 5; opacity:.6; } .me-aire { opacity:.55; } .me-aire.sel { opacity:.72; } .me-aire-b { fill:none; stroke:#7c6942; stroke-width:1.4; } .me-aire-b.sel { stroke:var(--accent); stroke-width:2.2; } .me-riv { fill:none; stroke:#6f9aa0; stroke-width:4; stroke-linecap:round; opacity:.85; } .me-riv.sel { stroke:#33aaaa; } .me-road { fill:none; stroke:#9a7b46; stroke-width:3; stroke-linecap:round; stroke-dasharray:1 5; } .me-road.grand { stroke-width:4; stroke-dasharray:none; } .me-road.sel { stroke:var(--accent); } .me-h { cursor:grab; } .me-h-poi { fill:#d84a38; stroke:#fff; stroke-width:1.6; } .me-h-poi.sel { fill:#fff; stroke:#c0392b; stroke-width:2.4; } .me-h-v { fill:#f0e5c6; stroke:#5b4a2f; stroke-width:1.4; } .me-h-v.sel { fill:var(--accent); } .me-h-round { fill:#3f7d3a; } /* sommet ARRONDI (vert) vs ANGULEUX (parchemin) */ .me-node-mark { fill:#f0e5c6; stroke:#5b4a2f; stroke-width:1.4; pointer-events:none; opacity:.9; } .me-node-mark.me-h-round { fill:#3f7d3a; stroke:#2c5a28; } .me-sub-dot { fill:#3f7d3a; stroke:#fff; stroke-width:1; } .me-draft { fill:rgba(200,180,120,.15); stroke:var(--accent); stroke-width:2; stroke-dasharray:6 4; } .me-draft-h { fill:var(--accent); } .me-skel { fill:none; stroke:#8a5a12; stroke-width:1; stroke-dasharray:4 4; opacity:.5; } /* squelette (ancres reliées) en mode Sommets */ /* Carte v2.1 : 2 modes + subdivision (régions à frontières communes) */ .me-modes { display:inline-flex; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; } .me-mode { font-size:12px; padding:5px 10px; border:none; border-radius:0; background:transparent; color:var(--dim); cursor:pointer; } .me-mode.on { background:var(--accent); color:#fff; } .me-reg-f { opacity:.62; cursor:pointer; } .me-reg-f.sel { opacity:.82; } .me-coast { fill:none; stroke:#5b4a2f; stroke-width:2.4; stroke-linejoin:round; } .me-border { fill:none; stroke:#7c6942; stroke-width:1.6; stroke-linejoin:round; } .me-dim { opacity:.30; pointer-events:none; } /* Carte v2.2 : couche 3 décor (esthétique) — la sélection ressort via une lueur d'accent */ .me-decor-g.sel { filter:drop-shadow(0 0 3px var(--accent)); } .me-reglist { display:flex; flex-direction:column; gap:2px; max-height:150px; overflow-y:auto; } .me-reg { display:flex; align-items:center; gap:7px; font-size:12px; padding:3px 6px; border-radius:5px; cursor:pointer; } .me-reg:hover { background:rgba(255,255,255,.05); } .me-reg.cur { background:rgba(255,255,255,.09); color:var(--accent); } .me-reg-sw { width:12px; height:12px; border-radius:3px; border:1px solid var(--line); flex-shrink:0; } /* ——— M2.5 : éditeur Carte INTERACTIF (Studio) — glisser/créer/sélectionner ——— */ .st-geo-wrap { margin:10px 0 8px; } .st-geo-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; } .st-geo-hint { font-size:11px; color:var(--dim); } .st-geo-svg { width:100%; max-height:56vh; display:block; background:#b6cfcd; border:1px solid var(--line); border-radius:8px; } .st-geo-bg { fill:transparent; cursor:crosshair; } .st-geo-art { pointer-events:none; } .st-geo-handle { fill:#d84a38; stroke:#fff; stroke-width:2; cursor:grab; } .st-geo-handle:hover { fill:#e85a48; } .st-geo-handle.sel { fill:#fff; stroke:#c0392b; stroke-width:3; } .st-zone.st-zone-sel { outline:2px solid var(--ok); outline-offset:2px; border-radius:6px; } /* ——— v21 : ÉDITEUR d'événements scriptés (plein écran) ——— */ /* v66 — UNE SIMULATION NE TOUCHE JAMAIS LA VRAIE PARTIE. Cette règle (1 id + 1 classe + 1 élément) perdait en spécificité contre `#vn.await #vn-reply { display:flex }` (2 ids) de vn.css — et la fin d'un aperçu ajoute justement la classe `await` : le PROMPT DE JEU réapparaissait, et `vnSend` POSTe /api/turn sans rien savoir de l'aperçu. L'auteur qui testait une scène pouvait jouer un vrai tour de sa partie sans s'en apercevoir. Même chose pour tout ce qui agit sur la partie : le journal (qui sait rembobiner), le menu personnage, la carte, les boutiques, les quêtes, le combat, le sélecteur d'API. Une simulation MONTRE, elle n'agit pas. */ body.cs-preview #vn.await #vn-reply, body.cs-preview #vn-reply { display:none !important; } body.cs-preview #vn-hist, body.cs-preview #vn-map, body.cs-preview #vn-shop, body.cs-preview #vn-quests, body.cs-preview #vn-menu, body.cs-preview #vn-api, body.cs-preview #vn-fight { display:none !important; } .qs-checks { display:flex; flex-wrap:wrap; gap:8px 16px; } .qs-chk { flex-direction:row !important; align-items:center; gap:6px; color:var(--txt) !important; } .qs-type { min-width:220px; font-weight:600; } .qs-bb2 { padding-top:0 !important; } .qs-hint { padding:0 12px 10px !important; } .qs-pal { margin-top:12px; } /* v51 — la PALETTE (ajouter une étape de quête, un beat de scène) n'avait AUCUN style : ses boutons retombaient sur le bouton générique, en `inline-block`, où l'émoji décale la ligne de base — texte petit et jamais centré. Ils suivent maintenant la charte : hauteur de contrôle, centrage des deux axes, émoji détaché du libellé. */ .cse-pal { display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-2); } /* les GROUPES de beats l'un sous l'autre */ .cse-palg { display:flex; flex-wrap:wrap; gap:var(--sp-2); } /* les beats d'un groupe, en lignes */ /* la palette des QUÊTES porte les deux classes et contient ses boutons SANS groupe : elle reste en lignes (sans ce rappel, `flex-direction:column` de .cse-pal la mettait en colonne, un bouton par ligne). */ .qs-pal { display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:var(--sp-2); } .cse-pb { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:0 12px; line-height:1.2; font-size:var(--fs); border-radius:8px; } .cse-pb:hover { border-color:var(--accent); } /* ——— v28 : châssis des éditeurs plein écran — sommaire collant, pages, aide, notes ——— */ .cse-edit { max-width:1120px; } .cse-btn.sm { padding:7px 12px; font-size:12px; } .cse-edit textarea.cse-ta { background:var(--panel-2,var(--panel2)); border:1px solid var(--line); color:var(--txt); border-radius:7px; padding:8px 10px; font:inherit; font-size:13px; resize:vertical; min-width:200px; } .cse-condwrap { margin-top:8px; } .cse-map { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; } .cse-maph { font:600 11px ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; } .cse-mapl { font-size:13px; padding:4px 0; border-bottom:1px dashed var(--line); } .cse-optadv { margin:2px 0 10px 26px; padding:10px 12px; border:1px dashed var(--line); border-radius:9px; background:rgba(0,0,0,.12); display:flex; flex-direction:column; gap:10px; } .cse-optsec .ise-subh { margin-bottom:6px; } .cse-eff { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:4px 0; } .cse-mini.on { border-color:#c9a24a; color:#e8c877; } /* ——— v28 : ARBRE de conditions (condtree.js) ——— */ .ct-grp { border:1px solid var(--line); border-radius:9px; padding:8px 10px; margin:5px 0; background:rgba(120,140,200,.06); } .ct-grp.root { background:rgba(120,140,200,.04); } .ct-gh { display:flex; gap:8px; align-items:center; margin-bottom:6px; } .ct-gate { font-size:12px !important; font-weight:600; } .ct-kids { display:flex; flex-direction:column; gap:5px; padding-left:10px; border-left:2px solid var(--line); } .ct-empty { font-size:11px; color:var(--dim); font-style:italic; padding:4px 2px; } .ct-add { display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; } .ct-leaf, .ct-not { display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .ct-not { border-left:2px solid rgba(232,137,107,.4); padding-left:8px; } .ct-notlb { font:600 11px ui-monospace,monospace; color:#e8896b; } .ct-notk { flex:1; min-width:200px; } .ct-type { max-width:230px; } .ct-op { color:#c9a24a; } .ct-f { display:inline-flex; gap:5px; align-items:center; flex-wrap:wrap; } .ct-and { font-size:12px; color:var(--dim); } .cse-edit .ct-leaf input, .cse-edit .ct-leaf select { padding:6px 8px; font-size:12.5px; } .ise-dir { background:var(--panel-2,var(--panel2)); border:1px solid var(--line); color:var(--txt); border-radius:7px; padding:8px 10px; font:inherit; font-size:13px; resize:vertical; width:100%; } .ise-brow { display:flex; gap:14px; flex-wrap:wrap; margin:8px 0; align-items:center; } .ise-inline { flex-direction:row !important; align-items:center; gap:6px; font-size:12px; } .ise-tag { font-size:11px; color:#c9a24a; margin-left:8px; } .ise-sub { border:1px solid var(--line); border-radius:9px; padding:9px 11px; margin:8px 0; background:rgba(0,0,0,.12); } .ise-subh { font:600 11px ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-bottom:7px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .ise-eff, .ise-branch { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:5px 0; } .ise-efff, .ise-lv { display:inline-flex; gap:5px; align-items:center; flex-wrap:wrap; } .ise-branch { flex-direction:column; align-items:stretch; border-left:3px solid rgba(201,162,74,.35); padding-left:9px; } .ise-brh { display:flex; gap:8px; align-items:center; } .ise-goto { margin-left:auto; font-size:12px; color:var(--dim); } .ise-grp { border:1px solid var(--line); border-radius:9px; padding:8px 9px; margin:5px 0; background:rgba(120,140,200,.06); } .ise-gh { display:flex; gap:8px; align-items:center; margin-bottom:6px; } .ise-gate { font-size:12px !important; font-weight:600; } .ise-gk { display:flex; flex-direction:column; gap:5px; padding-left:10px; border-left:2px solid var(--line); } .ise-gadd { display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; } .ise-leaf, .ise-not { display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .ise-not { border-left:2px solid rgba(232,137,107,.4); padding-left:8px; } .ise-notlb { font:600 11px ui-monospace,monospace; color:#e8896b; } .ise-notk { flex:1; min-width:200px; } .ise-lt { max-width:190px; } .ise-cats { display:inline-flex; gap:3px; flex-wrap:wrap; } .ise-cat { flex-direction:row !important; align-items:center; gap:3px; font-size:10px; padding:2px 5px; border:1px solid var(--line); border-radius:6px; cursor:pointer; color:var(--dim); } .ise-cat.on { border-color:var(--ok); color:var(--ok); } .ise-cat input { display:none; } .cse-add.xs { padding:4px 8px; font-size:11px; } .ise-sim { max-height:70vh; overflow-y:auto; } .ise-simh { font-weight:bold; color:var(--accent); margin-bottom:6px; } .ise-simtrig { font-size:12px; color:#c9a24a; margin-bottom:10px; } .ise-simlist { padding-left:20px; display:flex; flex-direction:column; gap:10px; } .ise-simb { line-height:1.5; } .ise-simep { font-size:12px; color:#c9a24a; } .ise-simeff { font-size:12px; color:var(--ok); } .ise-simbr { font-size:12px; color:var(--dim); } .ise-simend { font-size:12px; color:var(--accent); } .ise-simh2 { display:flex; align-items:center; gap:10px; margin-bottom:10px; } .ise-simh2 .grow { flex:1; } body.st-inworld .st-head h2 { font-size:15px; color:var(--dim); } /* v28.1 : le nom du monde prend la vedette */ .ise-simfloat { position:fixed; inset:8% 12%; z-index:120; background:var(--panel,#151820); border:1px solid var(--line); border-radius:12px; padding:18px 22px; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.5); } .cse-msg { font-size:13px; } .cse-msg.ok { color:var(--ok); } .cse-msg.err { color:#e8896b; } .cse-x { margin-left:auto; background:transparent; border:1px solid var(--line); color:inherit; border-radius:7px; padding:6px 14px; cursor:pointer; font:inherit; } .cse-x:hover { border-color:var(--accent); } /* v41 : le corps des éditeurs de scènes / quêtes / intrigues vit dans l'INSPECTEUR du gabarit */ .st-insp .cse-edit { padding:0; max-width:880px; overflow:visible; } .st-insp .cse-sec { margin:0 0 var(--sp-3); } .st-insp .ise-simfloat { position:static; inset:auto; margin:0 0 var(--sp-3); max-height:none; } .cse-sec { background:var(--panel,#151820); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:16px; } .cse-sh { font:600 12px ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; color:#c9a24a; margin-bottom:12px; } .cse-row2 { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; } .cse-row2 + .cse-row2 { margin-top:10px; } .cse-edit label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim); } .cse-edit label.grow { flex:1; min-width:160px; } .cse-edit label.chk { flex-direction:row; align-items:center; gap:6px; color:var(--txt); } .cse-edit input, .cse-edit select { background:var(--panel-2,var(--panel2)); border:1px solid var(--line); color:var(--txt); border-radius:7px; padding:8px 10px; font:inherit; font-size:13px; } .cse-edit input[type=checkbox] { width:auto; } .cse-edit input[type=range] { padding:0; } .cse-hint { font-size:12px; color:var(--dim); font-style:italic; padding:6px 2px; } .cse-hint.sm { font-size:11px; } .cse-add { background:transparent; border:1px dashed var(--line); color:var(--dim); border-radius:8px; padding:8px 14px; cursor:pointer; font:inherit; margin-top:8px; } .cse-add.sm { padding:6px 12px; font-size:12px; } .cse-add:hover { border-color:var(--accent); color:var(--accent); } /* conditions */ .cse-cond { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; } .cse-cond select, .cse-cond input { padding:7px 9px; } .cse-ct { min-width:130px; } .cse-op { color:#c9a24a; } .cse-cv { display:flex; gap:6px; flex-wrap:wrap; } .cse-mini { background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:6px; width:26px; height:26px; cursor:pointer; font-size:12px; flex:none; display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1; } /* v56.2 : le glyphe au centre */ .cse-mini:hover { border-color:var(--accent); color:var(--txt); } .cse-mini.del:hover { border-color:#e8896b; color:#e8896b; } /* timeline / beats */ .cse-tl { display:flex; flex-direction:column; gap:9px; } .cse-beat { border:1px solid var(--line); border-radius:10px; overflow:hidden; border-left-width:4px; } .cse-beat.cat-dialogue { border-left-color:#6f9fd0; } .cse-beat.cat-scene { border-left-color:#c9a24a; } .cse-beat.cat-fx { border-left-color:#cf7a5a; } .cse-beat.cat-logic { border-left-color:#6fca97; } .cse-bh { display:flex; align-items:center; gap:9px; padding:8px 12px; background:rgba(0,0,0,.18); } .cse-bic { font-size:15px; } .cse-blb { font-weight:600; font-size:13px; } .cse-bnum { font:600 11px ui-monospace,monospace; color:var(--dim); background:var(--panel-2,var(--panel2)); border-radius:5px; padding:2px 7px; } .cse-bctl { margin-left:auto; display:flex; gap:5px; } .cse-bb { display:flex; gap:9px; flex-wrap:wrap; align-items:center; padding:12px; } .cse-bb > input, .cse-bb > select { padding:8px 10px; } .cse-bb .grow, .cse-bb input.grow { flex:1; min-width:180px; } .cse-setact, .cse-setf { display:inline-flex; gap:8px; align-items:center; } .cse-setf { flex-wrap:wrap; } /* grille d'effets */ .cse-fxgrid { display:flex; flex-wrap:wrap; gap:6px; width:100%; } .cse-fx { padding:7px 11px; border-radius:7px; border:1px solid var(--line); background:var(--panel-2,var(--panel2)); color:var(--dim); cursor:pointer; font:inherit; font-size:12px; } .cse-fx:hover { border-color:#cf7a5a; } .cse-fx.on { border-color:#cf7a5a; background:rgba(207,122,90,.16); color:#f0b89e; } .cse-fxopts { display:flex; gap:14px; flex-wrap:wrap; align-items:center; width:100%; margin-top:8px; } .cse-fxopts label { flex-direction:row; align-items:center; gap:7px; } /* choix */ .cse-opts { width:100%; display:flex; flex-direction:column; gap:7px; margin-top:8px; } .cse-opt { display:flex; gap:7px; align-items:center; } .cse-oi { font:600 11px ui-monospace,monospace; color:#c9a24a; width:18px; text-align:center; flex:none; } .cse-arrow { color:var(--dim); } /* pied */ .cse-btn { padding:11px 20px; border-radius:9px; border:1px solid var(--line); background:var(--panel-2,var(--panel2)); color:var(--txt); cursor:pointer; font:inherit; font-weight:600; } .cse-btn.pri { background:#c9a24a; border-color:#c9a24a; color:#1a1405; } .cse-btn.save { border-color:var(--ok); color:var(--ok); } .cse-btn.save:hover { background:rgba(127,208,165,.12); } .cse-btn.del { margin-left:auto; border-color:var(--line); color:var(--dim); } .cse-btn.del:hover { border-color:#e8896b; color:#e8896b; } /* v28 : le pied n'est plus collant (il masquait la timeline) — le sommaire collant du haut porte Simuler/Enregistrer */ @media (max-width:760px){ .cse-edit { padding:14px; } .st-body { flex-direction:column; } .st-ws { flex-direction:column; } .st-rail { position:static; width:100%; flex-direction:row; flex-wrap:wrap; } .st-railbtn { width:auto; } .st-railsep { width:100%; } .cse-map { grid-template-columns:1fr; } #studio-panel { margin:8px auto; padding:0 10px; } } .cc-export:hover { color:var(--accent); } .cc-empty { color:var(--dim); font-style:italic; font-size:12px; } .msg.dice { text-align:center; margin:2px 0 8px; } .msg.dice .bubble { display:inline-block; background:transparent; border:1px dashed #7a6a2f; color:#e8d78a; font-size:12px; font-family:ui-monospace,monospace; padding:3px 10px; } /* W4 : échange de COMBAT (lignes mécaniques dans le fil) */ .msg.combat { text-align:center; margin:2px 0 8px; } .msg.combat .bubble { display:inline-block; background:rgba(150,40,40,.10); border:1px solid rgba(190,70,60,.55); border-radius:8px; color:#f0c9b0; font-size:12.5px; line-height:1.55; padding:5px 12px; text-align:left; } /* W4 : PANNEAU de combat (PV + Attaquer/Fuir) — flotte au-dessus du chat ET du VN */ /* En VN (scène plein écran z=80), le panneau devient un HUD AU-DESSUS de la scène, remonté au-dessus de la boîte de dialogue (176px) — sinon le décor avale les clics du combat. */ body.vn-open #combat-panel { z-index:90; bottom:200px; } #combat-panel { position:fixed; left:50%; bottom:78px; transform:translateX(-50%); z-index:60; width:min(440px,92vw); background:linear-gradient(180deg, rgba(28,14,16,.96), rgba(16,9,12,.98)); border:1px solid rgba(200,80,70,.6); border-radius:14px; padding:12px 14px; box-shadow:0 10px 34px rgba(0,0,0,.5); color:var(--txt); } #combat-panel .cbt-head { font-weight:700; font-size:15px; color:#f2b8a6; margin-bottom:8px; } .cbt-bar-wrap { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .cbt-bar-bg { flex:1; height:12px; border-radius:7px; background:rgba(255,255,255,.10); overflow:hidden; border:1px solid rgba(0,0,0,.35); } #cbt-bar { height:100%; width:100%; border-radius:7px; transition:width .35s ease; background:linear-gradient(90deg,#e0503f,#f28b5a); } #cbt-pv { font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; min-width:78px; text-align:right; } #cbt-lines { min-height:1.4em; font-size:12.5px; line-height:1.5; color:#f0c9b0; white-space:pre-line; margin-bottom:10px; } .cbt-btns { display:flex; gap:8px; } /* S6a — TES barres (PV + énergie du monde) : le HUD montre les DEUX camps, pas que le monstre */ #cbt-you { display:flex; flex-direction:column; gap:4px; margin:2px 0 8px; padding:6px 8px; border-radius:9px; background:rgba(122,199,255,.07); border:1px solid rgba(122,199,255,.22); } .cbt-you-row { display:flex; align-items:center; gap:8px; } .cbt-you-lab { font-size:11.5px; color:#bcd6ef; min-width:74px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cbt-you-barbg { flex:1; height:9px; border-radius:6px; background:rgba(255,255,255,.10); overflow:hidden; border:1px solid rgba(0,0,0,.35); position:relative; } #cbt-you-bar { display:block; height:100%; width:100%; border-radius:6px; transition:width .35s ease; background:linear-gradient(90deg,#3fae5f,#7ad98c); } #cbt-you-mpbar { display:block; height:100%; width:100%; border-radius:6px; transition:width .35s ease; background:linear-gradient(90deg,#3f7ce0,#7cc7ff); } #cbt-you-pv, #cbt-you-mp { font-size:11.5px; color:var(--dim); font-variant-numeric:tabular-nums; min-width:56px; text-align:right; } /* S6a — le CHANGEMENT se VOIT : flash de la barre touchée + chiffre flottant (-12 / +8), ANCRÉ sur le conteneur de LIGNE (jamais réécrit par un textContent, pas d'overflow:hidden) */ .cbt-bar-wrap, .cbt-you-row, .cbt-inv-barw { position:relative; } .bar-hit { animation:cbt-barhit .45s ease; } @keyframes cbt-barhit { 0% { box-shadow:0 0 0 2px rgba(255,120,90,.85), 0 0 14px rgba(255,120,90,.6); } 100% { box-shadow:none; } } .cbt-float { position:absolute; right:2px; top:-12px; font-weight:800; font-size:14px; z-index:2; pointer-events:none; animation:cbt-float 1.35s ease forwards; text-shadow:0 1px 3px rgba(0,0,0,.8); } .cbt-float.bad { color:#ff7a5c; } .cbt-float.good { color:#7ad98c; } .cbt-float.mp { color:#7cc7ff; } @keyframes cbt-float { 0% { opacity:0; transform:translateY(4px); } 15% { opacity:1; } 100% { opacity:0; transform:translateY(-22px); } } /* S6b — panneau REPLIÉ (style « normal ») : bandeau compact pendant qu'on LIT la bulle rédigée */ #combat-panel.cbt-folded #cbt-lines, #combat-panel.cbt-folded #cbt-skills, #combat-panel.cbt-folded #cbt-st, #combat-panel.cbt-folded .cbt-btns:not(#cbt-foldrow), #combat-panel.cbt-folded #cbt-inv { display:none !important; } #combat-panel.cbt-folded { padding:8px 12px; opacity:.94; } #combat-panel.cbt-folded #cbt-you { margin-bottom:4px; } #cbt-foldrow { margin-top:2px; } .cbt-btns button { flex:1; padding:9px 10px; border-radius:9px; font-size:14px; } /* S2b : engagement (au contact / à distance) + ⚡ picker de compétences */ .cbt-engage { font-size:11px; font-weight:600; color:var(--dim); padding:2px 8px; border-radius:20px; background:rgba(255,255,255,.08); vertical-align:middle; white-space:nowrap; } #cbt-skills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } .cbt-sk { padding:6px 10px; border-radius:8px; font-size:13px; background:rgba(255,255,255,.07); border:1px solid var(--line); color:var(--txt); cursor:pointer; } .cbt-sk:disabled { opacity:.4; cursor:not-allowed; } .cbt-sk .dim { color:var(--dim); font-variant-numeric:tabular-nums; } /* S2c : la créature INVOQUÉE (allié réel) — nom + mini barre de PV verte */ #cbt-inv { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#bfe8c0; margin-bottom:8px; } .cbt-inv-barw { flex:1; } .cbt-inv-barbg { display:block; height:8px; border-radius:5px; background:rgba(255,255,255,.10); overflow:hidden; border:1px solid rgba(0,0,0,.35); } #cbt-inv-bar { display:block; height:100%; width:100%; border-radius:5px; transition:width .35s ease; background:linear-gradient(90deg,#3fae5c,#7fd48a); } #cbt-inv-pv { font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; min-width:52px; text-align:right; } /* S3 : ligne des ALTÉRATIONS actives (poison, garde, étourdi…) */ #cbt-st { font-size:11.5px; color:#d9c3f0; margin-bottom:8px; line-height:1.5; } /* S4 : résumé élémentaire + compétences d'objet sous les emplacements d'équipement */ .eq-extra { font-size:11px; color:var(--dim); line-height:1.5; } /* S5 : ANIMATIONS de combat — presets moteur joués sur un overlay (.fx-anim + fxa-), couleur de l'ÉLÉMENT via --fxcol. Utilisés en jeu (panneau/VN) ET par la préviz de l'éditeur ⚡. */ .fx-anim { position:absolute; inset:0; pointer-events:none; z-index:80; overflow:hidden; border-radius:inherit; } .fx-anim::before, .fx-anim::after { content:""; position:absolute; opacity:0; } .fxa-taillade::before { left:-30%; top:42%; width:160%; height:4px; border-radius:3px; background:linear-gradient(90deg, transparent, var(--fxcol), #fff, transparent); box-shadow:0 0 16px var(--fxcol); transform:rotate(-22deg); animation:fxa-slash .5s ease-out forwards; } @keyframes fxa-slash { 0%{opacity:0; translate:-18% 0;} 18%{opacity:1;} 100%{opacity:0; translate:22% 0;} } .fxa-impact::before { left:50%; top:50%; width:18px; height:18px; border-radius:50%; background:var(--fxcol); box-shadow:0 0 26px var(--fxcol); animation:fxa-burst .45s ease-out forwards; } @keyframes fxa-burst { 0%{opacity:1; transform:translate(-50%,-50%) scale(.4);} 100%{opacity:0; transform:translate(-50%,-50%) scale(7);} } .fxa-projectile::before { left:-8%; top:46%; width:28px; height:8px; border-radius:6px; background:linear-gradient(90deg, transparent, var(--fxcol), #fff); box-shadow:0 0 16px var(--fxcol); animation:fxa-shoot .55s cubic-bezier(.25,.6,.35,1) forwards; } @keyframes fxa-shoot { 0%{opacity:0; left:-8%;} 12%{opacity:1;} 88%{opacity:1;} 100%{opacity:0; left:96%;} } .fxa-projectile::after { right:4%; top:42%; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 26px var(--fxcol); animation:fxa-hit .22s ease-out .48s forwards; } @keyframes fxa-hit { 0%{opacity:1; transform:scale(.5);} 100%{opacity:0; transform:scale(3.4);} } .fxa-explosion::before { left:50%; top:52%; width:26px; height:26px; border-radius:50%; border:3px solid var(--fxcol); box-shadow:0 0 30px var(--fxcol), inset 0 0 18px var(--fxcol); animation:fxa-ring .6s ease-out forwards; } .fxa-explosion::after { left:50%; top:52%; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 34px 10px var(--fxcol); animation:fxa-burst .5s ease-out forwards; } @keyframes fxa-ring { 0%{opacity:1; transform:translate(-50%,-50%) scale(.3);} 100%{opacity:0; transform:translate(-50%,-50%) scale(6);} } .fxa-lueur::before { inset:0; background:radial-gradient(circle at 50% 62%, var(--fxcol), transparent 62%); animation:fxa-glow .85s ease-in-out forwards; } @keyframes fxa-glow { 0%{opacity:0;} 35%{opacity:.85;} 100%{opacity:0;} } .fxa-aura::before { left:50%; top:88%; width:44%; height:56%; border-radius:50%; background:radial-gradient(ellipse at 50% 100%, var(--fxcol), transparent 70%); transform:translateX(-50%); animation:fxa-rise .85s ease-out forwards; } @keyframes fxa-rise { 0%{opacity:0; translate:0 12%;} 30%{opacity:.9;} 100%{opacity:0; translate:0 -26%;} } .fxa-cercle::before { left:50%; top:64%; width:150px; height:52px; border:2px solid var(--fxcol); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 20px var(--fxcol), inset 0 0 20px var(--fxcol); animation:fxa-circle .9s ease-out forwards; } .fxa-cercle::after { left:50%; top:64%; width:8px; height:120px; transform:translate(-50%,-95%); background:linear-gradient(0deg, var(--fxcol), transparent); animation:fxa-beam .7s ease-out .2s forwards; } @keyframes fxa-circle { 0%{opacity:0; scale:.5;} 30%{opacity:1;} 100%{opacity:0; scale:1.25;} } @keyframes fxa-beam { 0%{opacity:0;} 40%{opacity:.95;} 100%{opacity:0;} } .fxa-morsure::before, .fxa-morsure::after { left:50%; top:50%; width:70px; height:34px; border:4px solid var(--fxcol); border-radius:50% 50% 0 0 / 100% 100% 0 0; box-shadow:0 0 14px var(--fxcol); } .fxa-morsure::before { animation:fxa-jaw-h .4s ease-in forwards; } .fxa-morsure::after { transform:translate(-50%, 10%) rotate(180deg); animation:fxa-jaw-b .4s ease-in forwards; } @keyframes fxa-jaw-h { 0%{opacity:1; transform:translate(-50%,-120%);} 100%{opacity:0; transform:translate(-50%,-46%);} } @keyframes fxa-jaw-b { 0%{opacity:1; transform:translate(-50%, 30%) rotate(180deg);} 100%{opacity:0; transform:translate(-50%,-30%) rotate(180deg);} } /* S5 : version PANNEAU des effets d'écran (mode chat) */ .fxp-shake { animation:fxp-shake .5s ease-in-out; } @keyframes fxp-shake { 0%,100%{transform:translateX(-50%);} 20%{transform:translateX(calc(-50% - 7px));} 40%{transform:translateX(calc(-50% + 6px));} 60%{transform:translateX(calc(-50% - 4px));} 80%{transform:translateX(calc(-50% + 3px));} } .fxp-flash { animation:fxp-flash .55s ease-out; } @keyframes fxp-flash { 0%{box-shadow:0 10px 34px rgba(0,0,0,.5);} 30%{box-shadow:0 0 42px var(--fxcol);} 100%{box-shadow:0 10px 34px rgba(0,0,0,.5);} } /* v21 : SCÈNE SCRIPTÉE en Chat — panneau cinématique (répliques + repères + choix) */ .msg.cutscene { margin:14px 0; } .cs-card { position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:linear-gradient(180deg, rgba(16,18,26,.55), rgba(9,11,17,.9)); box-shadow:0 6px 22px rgba(0,0,0,.28); } .cs-card::before, .cs-card::after { content:""; position:absolute; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, #c9a24a, transparent); opacity:.55; } .cs-card::before { top:0; } .cs-card::after { bottom:0; } .cs-enter { animation:csIn .5s ease; } @keyframes csIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } .cs-head { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.28); } .cs-clap { font-size:15px; } .cs-scene { flex:1; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt); opacity:.82; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cs-time { font-size:11px; color:#c9a24a; white-space:nowrap; } .cs-vn { background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:6px; width:26px; height:24px; cursor:pointer; font-size:11px; } .cs-vn:hover { border-color:#c9a24a; color:#e8d7a0; } .cs-body { padding:14px 16px; display:flex; flex-direction:column; gap:9px; } .cs-line { display:flex; gap:9px; align-items:baseline; flex-wrap:wrap; } .cs-name { font-size:12px; font-weight:600; color:#0e1320; padding:3px 8px; border-radius:5px; white-space:nowrap; } .cs-say { color:var(--txt); line-height:1.5; } .cs-narr { font-style:italic; color:#c2c8d4; text-align:center; padding:2px 12px; line-height:1.5; } .cs-stage { text-align:center; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#7f8798; } .cs-stage.cs-mus { color:var(--accent); } .cs-fxmark { text-align:center; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--csfx,#cf9b7a); opacity:.85; } .cs-choices { display:flex; flex-direction:column; gap:8px; padding:12px 16px 16px; border-top:1px solid var(--line); } .cs-q { text-align:center; font-style:italic; color:#c2c8d4; margin-bottom:2px; } .cs-choice { padding:11px 16px; border-radius:9px; border:1px solid var(--line); background:var(--panel2); color:var(--txt); font:inherit; font-size:14px; cursor:pointer; text-align:center; transition:.14s; } .cs-choice:hover:not([disabled]) { border-color:#c9a24a; background:rgba(40,34,18,.6); transform:translateY(-1px); } .cs-choice[disabled] { opacity:.5; cursor:default; } .cs-choices.done .cs-choice { opacity:.5; } .cs-lock { flex:1; align-self:center; color:#c9a24a; font-size:13px; text-align:center; border:1px dashed color-mix(in srgb, #c9a24a 50%, var(--line)); border-radius:8px; padding:11px; } body.cs-pending #inp { opacity:.45; } .plot-card { border:1px solid #7a4a2f; border-radius:8px; padding:8px; margin-bottom:8px; background:var(--panel2); font-size:12px; } .plot-card .t { color:#e8b48a; font-size:13px; } .plot-card .st { color:var(--dim); margin-top:3px; } .plot-card.resolved { opacity:.55; border-style:dashed; } /* M4 : rôle du fil — la MAJEURE (colonne vertébrale) est pleine, la SECONDAIRE (filler) discrète. */ .plot-card.secondary { border-left:3px solid #6a5a3a; } .plot-role { display:inline-block; font-size:9px; text-transform:uppercase; letter-spacing:.06em; padding:1px 5px; border-radius:6px; margin-right:6px; vertical-align:middle; font-weight:700; } .plot-role.maj { background:#7a4a2f; color:#ffe6cf; } .plot-role.sec { background:transparent; color:var(--dim); border:1px solid #6a5a3a; } body.narrative .row.stats.attrs { display:none; } /* attributs ignores en mode narratif */ /* Setup en GRILLE 2 colonnes (moins de scroll) ; les champs larges portent .span2. En mobile (<760px) : retour a une seule colonne. */ #setup-panel { width:min(920px, 96%); margin:24px auto; padding:20px 24px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:0 26px; align-content:start; } #setup-panel h2, #setup-panel .setup-intro, #setup-panel .span2, #setup-panel .setup-err, #setup-panel #su-go { grid-column:1 / -1; } #setup-panel h2 { margin:0 0 6px; border:none; padding:0; } .setup-intro { font-size:13px; color:var(--dim); margin:0 0 14px; } #setup-panel label { display:block; font-size:13px; margin-bottom:10px; } #setup-panel .hint { color:var(--dim); font-size:11px; } #setup-panel input, #setup-panel select, #setup-panel textarea { display:block; width:100%; margin-top:4px; background:var(--ink); color:inherit; border:1px solid var(--line); border-radius:6px; padding:7px; font:inherit; box-sizing:border-box; } #su-go { margin-top:6px; padding:9px 18px; font-size:14px; justify-self:start; } /* S1e : ligne archétype + niveau du joueur au setup (le select prend la place, le niveau reste étroit) */ #su-arch-row .su-arch-line { display:flex; gap:8px; align-items:flex-end; } #su-arch-row .su-arch-line #su-archetype { flex:1; width:auto; } #su-arch-row .su-niv { display:flex; flex-direction:column; gap:3px; white-space:nowrap; } #su-arch-row .su-niv input { width:80px; } .setup-err { color:var(--no); font-size:12px; min-height:16px; margin:4px 0; } @media (max-width:760px){ #setup-panel { grid-template-columns:1fr; width:min(560px, 96%); gap:0; } } body.setup #inbar, body.setup #log { display:none; } body.setup #setup-panel { display:grid !important; } .op-card { border:1px solid var(--line); border-radius:8px; padding:10px; margin-bottom:8px; cursor:pointer; font-size:13px; line-height:1.45; background:var(--panel); } .op-card:hover { border-color:var(--accent); } .op-card .n { color:var(--accent); font-weight:bold; margin-right:6px; } .uni-card { border:1px solid #3a5a6a; border-radius:8px; padding:8px; font-size:12px; background:var(--panel2); margin-bottom:8px; } .uni-card .t { color:#8ac8e0; font-size:13px; } .uni-card .d { color:var(--dim); margin-top:3px; } .uni-save { margin-top:8px; width:100%; background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:5px; cursor:pointer; font:inherit; font-size:12px; } .uni-save:hover { border-color:#8ac8e0; } button[disabled].mode-btn { opacity:.4; cursor:not-allowed; } .dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:1px; } #topbar { position:fixed; top:0; left:0; right:0; height:38px; display:flex; align-items:center; gap:8px; padding:0 12px; background:var(--ink); border-bottom:1px solid var(--line); z-index:50; } #topbar .brand { font-weight:bold; color:var(--accent); margin-right:8px; } #topbar .tb { background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:3px 10px; cursor:pointer; font:inherit; font-size:13px; } #topbar .tb:hover:not([disabled]) { border-color:var(--accent); } #topbar .tb[disabled] { opacity:.4; cursor:not-allowed; } /* onglet ACTIF : on sait où on est */ #topbar .tb.on { border-color:var(--accent); background:rgba(138,184,232,.16); color:#cfe3fb; } /* 3 zones : gauche (nav) · milieu (chat) · droite (compte). Milieu centré, droite calée à droite. */ #topbar .tb-left { display:flex; align-items:center; gap:8px; flex:1 1 auto; } #topbar .tb-mid { display:none; align-items:center; gap:8px; } /* le groupe « chat » (icônes centrales) n'apparaît qu'EN PARTIE et SUR LA PAGE DU CHAT : ouvrir un menu plein écran (Mondes / Personnages / Chats) QUITTE le chat et masque ses icônes ; on n'y revient (et à ses icônes) que par l'onglet « Chat ». */ body.ingame:not(.studiopage):not(.charspage):not(.chatspage) #topbar .tb-mid { display:flex; } #topbar .tb-right { display:flex; align-items:center; gap:10px; flex:1 1 auto; justify-content:flex-end; } #topbar .dim { color:var(--dim); font-size:12px; } /* v20.9 : bandeau HORLOGE discret (heure du monde) */ .tb-clock { color:#c9a24a; font-size:12px; white-space:nowrap; border:1px solid var(--line); border-radius:6px; padding:2px 8px; } body { padding-top:38px; box-sizing:border-box; } body.nologin #topbar { display:none; } body.nologin { padding-top:0; } /* DESKTOP par défaut : le wrapper d'outils est « transparent » (ses 3 zones restent des items flex de #topbar, layout inchangé) et le bouton ☰ est masqué. */ #tb-tools { display:contents; } #tb-burger { display:none; background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; font:inherit; font-size:18px; line-height:1; padding:2px 10px; cursor:pointer; } #tb-burger:hover { border-color:var(--accent); } /* MOBILE : plus de scroll horizontal. La barre ne montre que la marque (change de mode) + le ☰ ; tous les outils passent dans un menu DÉROULANT vertical (regroupés, gros boutons tactiles). */ @media (max-width:760px){ #topbar { gap:6px; padding:0 10px; } #tb-burger { display:inline-flex; align-items:center; justify-content:center; margin-left:auto; } #tb-tools { display:none; } #topbar.tb-open #tb-tools { display:flex; flex-direction:column; align-items:stretch; gap:6px; position:fixed; top:38px; left:0; right:0; max-height:calc(100dvh - 38px); overflow-y:auto; background:var(--ink); border-bottom:1px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.45); padding:8px 12px 14px; z-index:49; } /* les 3 zones s'empilent en colonne (pleine largeur), séparées par un filet discret */ #topbar.tb-open #tb-tools .tb-left, #topbar.tb-open #tb-tools .tb-mid, #topbar.tb-open #tb-tools .tb-right { flex:none; width:100%; flex-direction:column; align-items:stretch; gap:6px; justify-content:flex-start; } #topbar.tb-open #tb-tools .tb-mid, #topbar.tb-open #tb-tools .tb-right { border-top:1px solid var(--line); padding-top:8px; margin-top:2px; } /* boutons pleine largeur, alignés à gauche, cibles tactiles confortables */ #topbar.tb-open #tb-tools .tb { width:100%; text-align:left; padding:11px 12px; font-size:15px; } #topbar.tb-open #tb-tools .tb-clock { align-self:flex-start; } #topbar .brand { font-size:15px; } } #login-panel { position:fixed; inset:0; background:var(--bg,var(--ink)); display:flex; align-items:center; justify-content:center; z-index:100; } .login-box { width:320px; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); } .login-box h2 { margin:0 0 14px; border:none; padding:0; } .login-box label { display:block; font-size:13px; margin-bottom:10px; } .login-box input { display:block; width:100%; margin-top:4px; background:var(--ink); color:inherit; border:1px solid var(--line); border-radius:6px; padding:7px; font:inherit; box-sizing:border-box; } .login-box .lg-key-hint { display:block; margin-top:4px; font-size:11px; color:var(--dim); } #modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:90; display:flex; align-items:center; justify-content:center; } #modal { width:520px; max-height:75vh; overflow-y:auto; background:var(--panel2); border:1px solid var(--line); border-radius:12px; } #modal-head { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); font-weight:bold; } #modal-head button { background:transparent; border:none; color:var(--dim); cursor:pointer; font-size:15px; } #modal-body { padding:14px; font-size:13px; } .li-row { display:flex; align-items:center; gap:8px; padding:7px 4px; border-bottom:1px solid #21252d; } .li-row .grow { flex:1; } .li-row button { background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:2px 8px; cursor:pointer; font:inherit; font-size:12px; } .li-row button:hover { border-color:var(--accent); } .li-row button.danger:hover { border-color:var(--no); color:var(--no); } #modal-body input { background:var(--ink); color:inherit; border:1px solid var(--line); border-radius:6px; padding:6px; font:inherit; } .acc-l { display:block; margin:8px 0 4px; color:var(--dim); font-size:12px; } .acc-l input, .acc-l select { display:block; width:100%; margin-top:4px; background:var(--ink); color:inherit; border:1px solid var(--line); border-radius:6px; padding:6px; font:inherit; box-sizing:border-box; } .ps-hint { color:var(--dim); font-size:12px; line-height:1.5; margin:0 0 10px; } .ps-form { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; } .ps-row { display:flex; flex-direction:column; gap:2px; font-size:12px; } .ps-row span { color:var(--dim); } .ps-row input { width:100%; box-sizing:border-box; } /* v25.81 : champ CANON d'un personnage incarné — visible mais verrouillé (la fiche fait foi) */ .ps-row.ps-locked input[readonly] { opacity:.75; cursor:not-allowed; border-style:dashed; } .ps-acts { display:flex; gap:8px; margin-top:12px; } .ps-acts button, .ps-edit { background:#2a6ef0; color:#fff; border:none; border-radius:6px; padding:6px 12px; cursor:pointer; font:inherit; } .ps-acts .ghost, .ps-edit { background:transparent; border:1px solid var(--line); color:inherit; } .ps-edit { font-size:12px; padding:2px 8px; } .row.stats { color:var(--ok); font-weight:600; } .mut .head { font-size:13px; } .mut .detail { font-size:12px; color:var(--dim); margin:3px 0 6px; } .mut .acts { display:flex; gap:6px; } .mut .acts .yes { border-color:var(--ok); } .mut .acts .yes:hover{ background:#173a2b; } .mut .acts .no { border-color:var(--no); } .mut .acts .no:hover { background:#3a1a1d; } .card { border:1px solid var(--line); border-radius:8px; padding:10px; margin-bottom:8px; background:var(--panel2); } .card .name { font-weight:600; color:var(--char); } .card .name .you { font-size:11px; color:var(--dim); font-weight:400; } .card .grp { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin:7px 0 2px; border-bottom:1px solid var(--line); } .card .grp.secret { color:#e5a06e; } .card .row { font-size:13px; margin-top:2px; } .card .row .lbl { color:var(--dim); } /* F4 : affinites (chips en fiche + bouton MJ) */ .card .grp.rel-grp { display:flex; align-items:center; justify-content:space-between; } .card .rel-edit { background:transparent; border:none; color:var(--dim); cursor:pointer; font-size:12px; padding:0 2px; line-height:1; } .card .rel-edit:hover { color:var(--accent); } .card .rel-row { display:flex; flex-wrap:wrap; gap:4px; } .rel-chip { font-size:11px; border:1px solid var(--line); border-radius:10px; padding:1px 7px; color:var(--txt); background:var(--ink); } .rel-chip b { color:var(--accent); } .rel-row .dim { color:var(--dim); font-size:12px; } .rel-line { display:flex; align-items:center; gap:6px; margin:5px 0; } .rel-line .grow { flex:1; min-width:0; font-size:13px; } .rel-line select { background:var(--ink); color:inherit; border:1px solid var(--line); border-radius:6px; padding:4px 6px; font:inherit; font-size:12px; } .rel-line button { background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:4px 10px; cursor:pointer; font:inherit; font-size:12px; } .rel-line button:hover { border-color:var(--accent); } /* W2 : panneau d'achat (boutiques du lieu courant) — rendu dans la modale commune */ .shop-purse { font-size:13px; color:var(--dim); margin-bottom:10px; } .shop-purse b { color:#e6c86e; } .shop-card { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:10px; } .shop-h { display:flex; align-items:center; gap:8px; } .shop-h b { color:var(--txt); } .shop-type { font-size:11px; color:var(--dim); border:1px solid var(--line); border-radius:9px; padding:1px 7px; } .shop-d { font-size:12px; color:var(--dim); margin:4px 0 8px; } .shop-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-top:1px dashed var(--line); } .shop-item { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .shop-price { color:#e6c86e; font-size:13px; white-space:nowrap; } .shop-stk { font-size:12px; color:var(--dim); min-width:30px; text-align:right; } .shop-inf { font-size:14px; color:var(--ok); min-width:30px; text-align:right; } .shop-out { font-size:12px; color:var(--no); min-width:30px; text-align:right; } .shop-buy { background:transparent; border:1px solid var(--ok); color:var(--ok); border-radius:6px; padding:4px 12px; cursor:pointer; font:inherit; font-size:12px; } .shop-buy:hover:not(:disabled) { background:rgba(127,208,165,.12); } .shop-buy:disabled { border-color:var(--line); color:var(--dim); cursor:not-allowed; } /* Module W — JOURNAL DES QUÊTES (modale) : cartes + étapes faite/courante/à venir */ .quests-box { display:flex; flex-direction:column; gap:10px; } .q-card { border:1px solid var(--line); border-radius:8px; padding:10px 12px; } .q-card.done { opacity:.68; } .q-h { display:flex; align-items:center; gap:8px; } .q-h b { color:var(--txt); flex:1; } .q-badge { font-size:11px; border-radius:9px; padding:1px 8px; white-space:nowrap; } .q-badge.a { color:#e6c86e; border:1px solid #e6c86e; } .q-badge.d { color:var(--ok); border:1px solid var(--ok); } .q-giver { font-size:12px; color:#c9a24a; margin:3px 0 2px; } .q-giver b { color:#e0c069; } .q-d { font-size:12px; color:var(--dim); margin:4px 0 8px; line-height:1.5; } .q-step { display:flex; align-items:flex-start; gap:8px; padding:3px 0; font-size:13px; color:var(--txt); } .q-step .q-ic { width:16px; text-align:center; flex:none; } .q-ic.ok { color:var(--ok); } .q-ic.cur { color:#e6c86e; } .q-ic.todo { color:var(--dim); } .q-step.ok .q-txt { color:var(--dim); text-decoration:line-through; } .q-step.cur .q-txt { color:#f0e2b8; font-weight:600; } #topbar .tb.has, #vn-ctl button.has { box-shadow:0 0 0 1px #e6c86e inset; } /* 🎯 : quête en cours */ /* module RPG : inventaire ENRICHI — puce colorée par type + effet, infobulle = description */ .inv-chips { display:inline-flex; flex-wrap:wrap; gap:4px; vertical-align:middle; } .inv-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:1px 8px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); cursor:default; } .inv-chip .chip-eff { color:var(--ok); font-size:10px; } .inv-chip.it-arme { border-color:#b5563e; } .inv-chip.it-armure { border-color:#5a83b0; } .inv-chip.it-consommable { border-color:#7fa85a; } .inv-chip.it-cle { border-color:#c9a24a; } .inv-chip.it-quete { border-color:#a06fc0; } .inv-chip.it-divers { border-color:var(--line); } /* module RPG : compétences CONNUES — même puce, colorée par type (attaque/soin/buff/malus/utilitaire/passif) */ .sk-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:1px 8px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); cursor:default; } .sk-chip .chip-eff { color:var(--ok); font-size:10px; } .sk-chip.sk-attaque { border-color:#b5563e; } .sk-chip.sk-soin { border-color:#7fa85a; } .sk-chip.sk-buff { border-color:#5a83b0; } .sk-chip.sk-malus { border-color:#a06fc0; } .sk-chip.sk-utilitaire { border-color:var(--line); } .sk-chip.sk-passif { border-color:#c9a24a; } /* module RPG : bonus d'équipement sur une stat effective + ligne « équipement » (menus par emplacement) */ .attr-bonus { color:var(--ok); font-size:10px; margin-left:2px; vertical-align:top; } .eq-row .eq-slots { display:inline-flex; flex-wrap:wrap; gap:6px; vertical-align:middle; } .eq-slot { display:inline-flex; align-items:center; gap:4px; } .eq-slot .eq-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--dim); } .eq-sel { font-size:11px; padding:1px 4px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); color:var(--txt); max-width:150px; } /* module RPG : GROUPE — puce par compagnon (point vert = présent ici) + menu « recruter » */ .party-row .party-chip, .party-row .party-add { margin:2px 4px 2px 0; } .party-chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:1px 4px 1px 8px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); } .party-dot { width:7px; height:7px; border-radius:50%; background:var(--line); flex:none; } .party-dot.here { background:var(--ok); box-shadow:0 0 4px var(--ok); } .party-x { background:none; border:none; color:var(--dim); cursor:pointer; font-size:11px; padding:0 2px; line-height:1; } .party-x:hover { color:#d08a8a; } .party-add { font-size:11px; padding:1px 4px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); color:var(--txt); } .st-fai-host { margin-top:-2px; } .mode-row { display:flex; align-items:center; gap:6px; margin-bottom:10px; } .mode-lbl { font-size:12px; color:var(--dim); } .mode-btn { padding:4px 10px; font-size:13px; } /* ————— Panneau ADMIN plein écran à onglets ————— */ #admin { display:none; position:fixed; inset:0; z-index:96; flex-direction:column; background:var(--bg,#0e1015); color:var(--txt); } body.admin-open #admin { display:flex; } .adm-head { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.2); flex:0 0 auto; } .adm-head .adm-h-title { font-weight:bold; color:var(--accent); font-size:16px; white-space:nowrap; } .adm-head .grow { flex:1; } .adm-tabs { display:flex; gap:6px; padding:8px 12px 0; border-bottom:1px solid var(--line); flex:0 0 auto; overflow-x:auto; } .adm-tab { background:transparent; border:1px solid var(--line); border-bottom:none; color:var(--dim); padding:8px 14px; border-radius:8px 8px 0 0; cursor:pointer; white-space:nowrap; font-size:13px; } .adm-tab.on { color:var(--accent); background:rgba(255,255,255,.05); border-color:var(--accent); font-weight:bold; } .adm-body { flex:1 1 auto; overflow-y:auto; padding:16px; } .adm-pane { display:none; max-width:900px; margin:0 auto; } .adm-pane.on { display:block; } .adm-pane .adm-sec { margin:0 0 18px; } .adm-pane .adm-sec-t { font-weight:bold; color:var(--accent); margin-bottom:4px; } .adm-pane .adm-sec-d { font-size:12px; color:var(--dim); margin-bottom:8px; } .adm-note { font-size:12px; color:var(--dim); background:rgba(255,255,255,.04); border-left:3px solid var(--accent); padding:8px 10px; border-radius:0 6px 6px 0; margin:0 0 14px; } /* Réponse coupée par le plafond de sortie : dit à l'écran, jamais deviné */ /* Blocs d'invite (owner) : ce que le moteur ajoute aux invites, visible et réglable */ .blk-grp { margin:0 0 20px; } .blk-grp-h { font-weight:bold; color:var(--accent); margin:0 0 8px; font-size:14px; } .blk { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:0 0 10px; background:rgba(255,255,255,.02); } .blk-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; } .blk-help { font-size:12px; color:var(--dim); margin:0 0 8px; line-height:1.45; } .blk-lock { font-size:11px; color:var(--dim); border:1px solid var(--line); border-radius:20px; padding:1px 8px; } .blk-mod { font-size:11px; color:var(--accent); border:1px solid var(--accent); border-radius:20px; padding:1px 8px; } .blk-ta { width:100%; box-sizing:border-box; font-family:inherit; font-size:13px; line-height:1.5; resize:vertical; padding:8px 10px; border-radius:6px; border:1px solid var(--line); background:rgba(0,0,0,.25); color:inherit; } .blk-ta[readonly] { opacity:.75; cursor:not-allowed; } .blk-btns { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; } /* Éditeur de profils LLM (façon SillyTavern) */ .llm-layout { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; } .llm-side { flex:0 0 230px; display:flex; flex-direction:column; gap:6px; } .llm-plist { display:flex; flex-direction:column; gap:4px; max-height:340px; overflow-y:auto; } .llm-pitem { display:flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:13px; background:rgba(255,255,255,.02); } .llm-pitem.sel { border-color:var(--accent); background:rgba(255,255,255,.06); } .llm-pitem .grow { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .llm-pitem .llm-star { color:var(--accent); } .llm-pitem .llm-bi { font-size:10px; color:var(--dim); border:1px solid var(--line); border-radius:4px; padding:0 4px; } .llm-edit { flex:1 1 340px; min-width:300px; } .llm-row { display:flex; align-items:center; gap:10px; margin:0 0 10px; } .llm-row > label { flex:0 0 200px; font-size:13px; } .llm-row input[type=range] { flex:1; min-width:100px; } .llm-row input[type=number] { flex:0 0 80px; } .llm-ext { border-top:1px dashed var(--line); margin-top:14px; padding-top:10px; } .llm-ext-t { font-size:12px; color:var(--dim); margin-bottom:8px; } .llm-btns { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } /* — éditeur de preset ULTRA-COMPLET : volets repliables + drapeaux + utilitaires + gestionnaire d'invites — */ .llm-fold { border:1px solid var(--line); border-radius:9px; margin:0 0 10px; background:rgba(255,255,255,.02); overflow:hidden; } .llm-fold > summary { cursor:pointer; list-style:none; padding:9px 12px; font-weight:bold; font-size:13px; color:var(--accent); display:flex; align-items:center; gap:8px; user-select:none; } .llm-fold > summary::-webkit-details-marker { display:none; } .llm-fold > summary::before { content:"▸"; font-size:11px; color:var(--dim); transition:transform .15s; } .llm-fold[open] > summary::before { transform:rotate(90deg); } .llm-fold[open] > summary { border-bottom:1px solid var(--line); } .llm-fold-b { padding:12px; } .llm-note-sm { font-size:11px; color:var(--dim); line-height:1.4; margin-bottom:10px; } .llm-fgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; } .llm-frow { display:flex; align-items:center; gap:10px; min-height:30px; } /* :not(.llm-sw) — l'interrupteur EST aussi un enfant direct ; sans ça il heriterait de flex:1 et s'etirerait */ .llm-frow > label:not(.llm-sw) { flex:1; font-size:12px; color:var(--txt); } .llm-frow input[type=number], .llm-frow input[type=text], .llm-frow select { flex:0 0 120px; max-width:120px; } .llm-urow { display:flex; flex-direction:column; gap:3px; margin-bottom:10px; } .llm-urow > label { font-size:12px; color:var(--dim); } .llm-urow > textarea { width:100%; resize:vertical; font-family:inherit; font-size:12px; line-height:1.4; background:var(--bg2,rgba(0,0,0,.25)); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px 8px; } /* interrupteur (booléens) */ .llm-sw { position:relative; display:inline-block; width:38px; height:20px; flex:0 0 auto; cursor:pointer; } .llm-sw.sm { width:32px; height:18px; } .llm-sw input { position:absolute; opacity:0; width:0; height:0; } .llm-sw > span { position:absolute; inset:0; background:rgba(255,255,255,.12); border-radius:20px; transition:.15s; } .llm-sw > span::before { content:""; position:absolute; height:14px; width:14px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; } .llm-sw.sm > span::before { height:12px; width:12px; } .llm-sw input:checked + span { background:var(--accent); } .llm-sw input:checked + span::before { transform:translateX(18px); } .llm-sw.sm input:checked + span::before { transform:translateX(14px); } .llm-sw input:disabled + span { opacity:.5; } /* gestionnaire d'invites */ .pm-list { display:flex; flex-direction:column; gap:8px; } .pm-row { border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:rgba(255,255,255,.02); } .pm-row.off { opacity:.5; } .pm-head { display:flex; align-items:center; gap:8px; } .pm-head .grow { flex:1; } .pm-name { font-size:13px; font-weight:600; } input.pm-name { flex:0 0 auto; width:auto; min-width:120px; max-width:220px; font-weight:600; padding:3px 6px; } .pm-badge { font-size:9px; text-transform:uppercase; letter-spacing:.04em; border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--dim); } .pm-badge.mk { color:#7fb2ff; border-color:rgba(127,178,255,.34); } .pm-badge.sys { color:var(--accent); border-color:var(--accent); } .pm-badge.cus { color:#e0a86b; border-color:rgba(224,168,107,.34); } .pm-mini { padding:2px 7px; font-size:12px; line-height:1.2; min-width:0; } .pm-content { width:100%; margin-top:7px; resize:vertical; font-family:inherit; font-size:12px; line-height:1.45; background:var(--bg2,rgba(0,0,0,.25)); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px 8px; } .pm-mknote { margin-top:6px; font-size:11px; color:var(--dim); font-style:italic; } .pm-add { margin-top:10px; } /* v25.123 : poids du module + recapitulatif — un preset court doit se LIRE comme un preset qui marche */ .pm-tok { font-size:9px; letter-spacing:.03em; border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--dim); white-space:nowrap; } .pm-sum { border:1px solid var(--line); border-radius:8px; padding:7px 10px; margin:0 0 2px; background:rgba(255,255,255,.04); font-size:12px; font-weight:600; color:var(--txt); } .pm-sum-n { display:block; margin-top:3px; font-size:11px; font-weight:400; color:var(--dim); font-style:italic; } /* « Moteur extract Forge » : module SYSTÈME (case à cocher), en tête du gestionnaire d'invites */ .pm-sys { border:1px dashed var(--line); border-radius:8px; padding:8px 10px; margin:0 0 10px; background:rgba(255,255,255,.02); } .pm-sys.on { border-style:solid; border-color:var(--accent); background:rgba(255,255,255,.05); } .pm-sys .pm-head { display:flex; align-items:center; gap:8px; } /* affectation d'un preset à un contexte (Forge / monde) + puces sur la liste */ .llm-bind { border:1px solid var(--line); border-radius:9px; padding:11px 12px; margin:4px 0 12px; background:rgba(255,255,255,.02); } .llm-bind .adm-sec-t { margin-bottom:4px; } .llm-bind-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; } .llm-bind-row > label { font-size:12px; color:var(--dim); } .llm-bind-row select { flex:1 1 180px; min-width:140px; max-width:100%; } .llm-bindbtn { border:1px solid var(--line); background:transparent; } .llm-bindbtn.on { border-color:var(--accent); background:var(--accent); color:#0b0d12; font-weight:bold; } .llm-bindbtn.ghost, .llm-bind-row .ghost { opacity:.75; } .llm-chip { display:inline-block; font-size:9px; font-weight:bold; vertical-align:middle; margin-left:5px; border-radius:4px; padding:1px 5px; line-height:1.5; } .llm-chip.cl { color:#8fd6b0; background:rgba(96,190,140,.16); } .llm-chip.fo { color:#7fb2ff; background:rgba(127,178,255,.16); } .llm-chip.wo { color:#e0a86b; background:rgba(224,168,107,.16); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:640px){ .llm-fgrid { grid-template-columns:1fr; } } /* ═══ v48 : Sprites & émotions — la planche des émotions DANS l'inspecteur du gabarit (plus de plein écran) ═══ */ .se-forms { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:2px 0 6px; } /* v70 : la forme active suit la règle GÉNÉRALE des puces (`.me-chip.on`). Elle avait la sienne, plus faible et posée PLUS BAS dans le fichier — elle annulait donc l'aplat, et la forme choisie restait indiscernable des autres. Une seule règle pour toutes les puces. */ .se-form-add { border-style:dashed; color:var(--dim); } .se-wrap { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:var(--sp-4); align-items:start; margin-top:8px; } .se-board { display:grid; grid-template-columns:repeat(auto-fill, minmax(138px, 1fr)); gap:10px; } /* v69 — LA RANGÉE DES PLANS (cadrage), sous celle des formes : même jeton de puce, plus une pastille de compte pour qu'on voie d'un coup d'œil ce qui est rempli et ce qui ne l'est pas. */ .se-plans { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); } .se-plan { display:inline-flex; align-items:center; gap:6px; } .se-plan-n { min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; line-height:17px; text-align:center; } .se-plan:not(.on) .se-plan-n { background:var(--line); color:var(--dim); } .se-slot { border:1px solid var(--line); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:5px; background:var(--surface-2); } .se-slot.resolved { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; } .se-slot-h { display:flex; align-items:baseline; gap:6px; } .se-emo { font-weight:700; font-size:13px; } .se-emo-fr { font-size:11px; color:var(--dim); } .se-words { font-size:10.5px; color:var(--dim); line-height:1.3; min-height:22px; } .se-thumb { position:relative; height:130px; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; background-color:#3a3d47; background-image:linear-gradient(45deg,#2c2f38 25%,transparent 25%),linear-gradient(-45deg,#2c2f38 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2c2f38 75%),linear-gradient(-45deg,transparent 75%,#2c2f38 75%); background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; } .se-thumb img { max-width:100%; max-height:100%; object-fit:contain; } /* v70 : le fichier DIT s'il n'a pas de canal alpha — sinon l'auteur voit un fond blanc sans savoir s'il vient de son export ou de l'outil. Ce n'est pas une erreur : c'est un constat. */ .se-noalpha { position:absolute; left:4px; right:4px; bottom:4px; text-align:center; font-size:10px; font-weight:700; padding:2px 4px; border-radius:6px; background:rgba(180,120,20,.92); color:#fff; } .se-thumb.empty { cursor:pointer; border:1.5px dashed var(--line); background:transparent; color:var(--dim); font-size:12px; text-align:center; } .se-thumb.empty:hover { border-color:var(--accent); color:var(--accent); } .se-slot-btns { display:flex; gap:6px; } .se-slot-btns button { flex:1; font-size:11px; padding:4px 2px; } .se-preview { position:sticky; top:0; border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--surface-2); } .se-sec-t { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); margin:2px 0 8px; } .se-big { height:260px; border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:10px; background-color:#3a3d47; background-image:linear-gradient(45deg,#2c2f38 25%,transparent 25%),linear-gradient(-45deg,#2c2f38 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2c2f38 75%),linear-gradient(-45deg,transparent 75%,#2c2f38 75%); background-size:22px 22px; background-position:0 0,0 11px,11px -11px,-11px 0; } .se-big img { max-width:100%; max-height:100%; object-fit:contain; } .se-big-empty { color:var(--dim); font-size:12px; text-align:center; padding:0 10px; } .se-try label { font-size:12px; color:var(--dim); display:block; margin-bottom:4px; } .se-try input { width:100%; box-sizing:border-box; margin:4px 0 8px; } .se-try-res { font-size:12px; } .se-try-res b { color:var(--accent); } @media (max-width:1439px){ .se-wrap { grid-template-columns:1fr; } .se-preview { position:static; } } /* --- topbar : badge compteur + bouton MJ actif --- */ .badge { display:inline-block; min-width:16px; padding:0 4px; margin-left:5px; border-radius:9px; background:#e5646e; color:#fff; font-size:10px; font-weight:bold; text-align:center; vertical-align:1px; } #tb-mj.on { border-color:#c9a3ff; color:#c9a3ff; } /* --- tiroir createur (MJ) --- */ #mj-drawer { position:fixed; top:38px; right:0; bottom:0; width:340px; background:var(--panel); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .18s ease; z-index:70; display:flex; flex-direction:column; } body.mj-open #mj-drawer { transform:translateX(0); } .mj-head { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); font-weight:bold; } .mj-head button { background:transparent; border:none; color:var(--dim); cursor:pointer; font-size:15px; } .mj-body { overflow-y:auto; padding:12px 14px; } .mj-sec { margin-bottom:18px; } .mj-sec-t { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); margin-bottom:8px; border-bottom:1px solid #23272f; padding-bottom:4px; } .mj-sec-t .count { color:#e5a06e; margin-left:4px; } .mj-hint { font-size:11px; color:var(--dim); margin-top:6px; min-height:14px; } .mj-sec .wide { display:block; width:100%; margin-top:6px; background:transparent; color:inherit; border:1px solid var(--line); border-radius:6px; padding:7px; cursor:pointer; font:inherit; } .mj-sec .wide:hover { border-color:var(--accent); } .mj-sec .subtle { color:var(--dim); font-size:12px; } /* segmented control (vue debug + mode contenu) */ .seg { display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; } .seg button { background:transparent; border:none; color:var(--dim); padding:5px 11px; cursor:pointer; font:inherit; font-size:12px; } .seg button:not(:last-child) { border-right:1px solid var(--line); } .seg button.on { background:#2a2f3a; color:var(--txt); } /* --- modal Reglages --- */ #settings-bg { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:95; display:flex; align-items:center; justify-content:center; } #settings-modal { width:560px; max-height:80vh; overflow-y:auto; background:var(--panel2); border:1px solid var(--line); border-radius:12px; } .sm-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-weight:bold; position:sticky; top:0; background:var(--panel2); } .sm-head button { background:transparent; border:none; color:var(--dim); cursor:pointer; font-size:15px; } .sm-body { padding:8px 16px 16px; } .sm-sec { margin-top:16px; } .sm-sec-t { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); margin-bottom:6px; } .sm-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid #21252d; } .sm-row b { font-size:13px; } .sm-d { font-size:11px; color:var(--dim); } .mode-btn.active { border-color:var(--accent); background:#243247; color:#fff; } .mini { padding:2px 7px; font-size:11px; } .empty { color:var(--dim); font-size:13px; padding:4px 0; } /* --- F3 v2 : chapitres (modal 📖 + fenetre 📜 du VN) --- */ .rb-item { display:flex; align-items:center; gap:8px; font-size:12px; padding:5px 0; border-bottom:1px solid #21252d; } .rb-item .lab { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dim); } .rb-item.star .lab { color:#e8d78a; } .rb-w { color:var(--dim); font-weight:normal; font-size:11px; } .sm-val { font-size:13px; color:var(--accent); white-space:nowrap; } /* --- menu API (modal generique #modal) --- */ .apim-note { font-size:11px; color:var(--dim); margin-bottom:8px; } .apim-card { border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:8px; } .apim-card.def { border-color:var(--accent); } .apim-top { display:flex; align-items:center; gap:6px; } .apim-top .lab { flex:1; font-weight:600; font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; } .apim-card.def .lab { color:var(--accent); } .apim-def { font-size:11px; color:var(--accent); white-space:nowrap; } .apim-sub { font-size:11px; color:var(--dim); margin-top:3px; word-break:break-all; } /* offre gratuite : entree OFFERTE verrouillee + bandeau quota + section owner */ .apim-card.locked { border-style:dashed; opacity:.92; } .apim-lock { color:var(--dim); } .apim-free { font-size:12px; color:var(--fg); background:rgba(120,180,255,.10); border:1px solid var(--line); border-radius:8px; padding:6px 9px; margin-bottom:8px; } .apim-free b { color:var(--accent); } .apim-free-left { color:var(--dim); font-size:11px; } /* v25.99 — 🧠 RAISONNEMENT : interrupteur GLOBAL, posé aux DEUX endroits où l'on règle les LLM (menu 🔌 « Fournisseurs API » et Administration › LLM & Profils). Une rangée de trois états, l'actif surligné, puis DEUX lignes : ce que le réglage fait vraiment sur l'API branchée, et pourquoi il existe. Il se distingue des cartes d'API par son fond neutre : ce n'est pas une API de plus, c'est un réglage qui vaut pour toutes. */ .think-row { margin-top:14px; padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); } .think-h { font-size:12.5px; font-weight:700; margin-bottom:7px; } .think-seg { display:flex; flex-wrap:wrap; gap:6px; } .think-b { flex:1 1 auto; min-width:96px; padding:7px 9px; font-size:12.5px; border-radius:8px; background:transparent; border:1px solid var(--line); color:var(--dim); cursor:pointer; } .think-b:hover { border-color:var(--accent); } .think-b.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; } .think-n { margin-top:7px; font-size:12px; color:var(--txt); word-break:break-word; } .think-d { margin-top:5px; font-size:11px; color:var(--dim); line-height:1.45; } /* bloc OPTIONNEL : la case est l'information principale — décoché, le texte ne part jamais */ .blk.opt { border-style:dashed; } .blk.opt.on { border-style:solid; border-color:var(--accent); } .blk-opt { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); cursor:pointer; white-space:nowrap; } .blk.opt.on .blk-opt { color:var(--accent); } .blk-opt input { width:15px; height:15px; margin:0; accent-color:var(--accent); } .blk.lvl select { width:100%; box-sizing:border-box; margin-top:6px; background:var(--ink); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:7px 9px; font:inherit; font-size:13px; } /* --- 🎁 profils d'expérience (v25.66) : éditeur owner des lots, même famille que les blocs --- */ .exp-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:8px; } .exp-grid label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim); } .exp-grid input, .exp-grid select { background:var(--ink); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font:inherit; font-size:13px; box-sizing:border-box; width:100%; } .exp-cks { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:12px; color:var(--dim); } .exp-ck { display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap; } .exp-ck input { width:14px; height:14px; margin:0; accent-color:var(--accent); } @media (max-width:700px){ .exp-grid { grid-template-columns:1fr; } } /* le sélecteur VIVANT du menu réglages (partie en cours) */ #sm-exp { background:var(--ink); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font:inherit; font-size:13px; max-width:46%; } /* --- v25.73 : proposition IA des assets VN (Studio) --- */ .st-vna { max-height:60vh; overflow-y:auto; padding-right:6px; } .st-vna-h { margin:14px 0 8px; color:var(--accent); font-size:14px; } .st-vna-it { border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin-bottom:8px; } .st-vna-it.deja { opacity:.6; } .st-vna-f { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; } .st-vna-f code { background:var(--ink); border:1px solid var(--line); border-radius:6px; padding:2px 7px; } .st-vna-tag { margin-left:auto; font-size:11px; color:var(--dim); border:1px solid var(--line); border-radius:99px; padding:1px 8px; } .st-vna-it:not(.deja) .st-vna-tag { color:var(--accent); border-color:var(--accent); } .st-vna-why { font-size:12px; color:var(--dim); margin-top:5px; } .st-vna-p { font-size:12px; margin-top:5px; padding:6px 8px; border-left:2px solid var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent); border-radius:0 8px 8px 0; white-space:pre-wrap; } .st-vna-btns { display:flex; gap:10px; margin-top:12px; } .st-vna-err { border-color:#a33; } /* --- v25.71 : WIZARD de création (choix du monde -> fiche réduite) + verrous de monde --- */ .cp-create-big { font-size:15px; padding:10px 22px; } body.wizpage .cp-head, body.wizpage .cp-new, body.wizpage #chats-grid { display:none !important; } body.wizpage #wiz-world { display:block !important; } #wiz-world { max-width:920px; margin:0 auto; } .wiz-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; } .wiz-head h2 { margin:0; flex:1; } .wiz-skip { display:block; width:100%; text-align:left; margin-bottom:14px; padding:12px 14px; border:1px dashed var(--line); border-radius:12px; background:transparent; color:var(--txt); cursor:pointer; font:inherit; } .wiz-skip:hover { border-color:var(--accent); } #wiz-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; } .wiz-card { cursor:pointer; } .wiz-card:hover { border-color:var(--accent); } .su-worldlock { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:8px 12px; background:color-mix(in srgb, var(--accent) 6%, transparent); } .su-worldlock #su-wizback { flex:none; padding:4px 10px; } .su-wl-b { font-size:13px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; } .su-wl-fix { color:var(--dim); } .su-wl-fix i { font-style:normal; opacity:.75; } #su-mode option:disabled, #su-dice:disabled { opacity:.55; } /* --- v25.69 : CADRAGE du monde au setup (comment on y entre) + BRIÉFING d'entrée en jeu --- */ .su-cadrage { border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:10px 12px; background:color-mix(in srgb, var(--accent) 6%, transparent); } .su-cad-h { font-weight:700; color:var(--accent); font-size:13px; margin-bottom:6px; } .su-cad-b { font-size:13px; line-height:1.55; color:var(--txt); } .msg.brief .bubble { border:1px dashed var(--line); border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); font-size:14px; line-height:1.6; } .msg.brief .bubble p { margin:0 0 8px; } .msg.brief .bubble p:last-child { margin-bottom:0; } /* --- v25.67 : partie muette (ouverture LLM ratée) -> bandeau de reprise dans le chat --- */ .op-retry { margin:24px auto; max-width:520px; padding:16px; border:1px dashed var(--line); border-radius:12px; text-align:center; display:flex; flex-direction:column; gap:12px; color:var(--dim); font-size:13px; } .op-retry button { align-self:center; } /* --- v34 : partie terminée (mort selon la règle du monde / fin scriptée) -> bandeau dans le fil --- */ .fin-partie { margin:24px auto; max-width:560px; padding:18px; border:1px solid var(--line); border-radius:12px; text-align:center; display:flex; flex-direction:column; gap:10px; color:var(--txt); font-size:13px; background:color-mix(in srgb, var(--accent) 6%, transparent); } .fin-partie.mort { border-color:color-mix(in srgb, #c0392b 55%, var(--line)); background:color-mix(in srgb, #c0392b 8%, transparent); } .fin-partie-t { font-size:17px; font-weight:700; } .fin-partie-d { line-height:1.55; } .fin-partie-n { color:var(--dim); font-size:12px; } .fin-partie-a { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .etat-chip { color:var(--dim); font-size:12px; white-space:nowrap; } .etat-chip.mort { color:#c0392b; font-weight:600; } /* --- 🔌 pastille de chat : bascule d'API sur place (Forge / VN) --- */ .api-chip { gap:5px; width:auto; padding:0 10px; max-width:170px; } /* .mm-btn + un libellé */ .api-chip-lab { font-size:12px; font-weight:600; color:var(--dim); max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .api-chip-lab:empty { display:none; } /* aucune API : icône seule */ #api-pop-bg { position:fixed; inset:0; z-index:95; } /* capte le clic « dehors » */ #api-pop { position:fixed; z-index:96; max-height:60vh; overflow-y:auto; padding:8px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.45); } .api-pop-h { font-size:11px; color:var(--dim); padding:2px 6px 6px; } .api-pop-free { font-size:11px; color:var(--dim); padding:0 6px 6px; } .api-pop-free b { color:var(--accent); } .api-pop-empty { font-size:12px; color:var(--dim); padding:6px; } .api-pop-row { display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; padding:7px 8px; border:0; border-radius:8px; background:transparent; color:var(--txt); font:inherit; text-align:left; cursor:pointer; } .api-pop-row.locked { cursor:default; opacity:.8; } .api-pop-row:not(.locked):hover { background:rgba(255,255,255,.07); } .api-pop-row.on { background:rgba(120,180,255,.10); } .api-pop-mark { width:14px; flex:none; color:var(--accent); font-size:12px; } .api-pop-txt { min-width:0; display:flex; flex-direction:column; } .api-pop-txt b { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .api-pop-txt span { font-size:11px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .api-pop-row.on .api-pop-txt b { color:var(--accent); } .api-pop-manage { width:100%; margin-top:6px; padding:7px; border-radius:8px; font-size:12px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; } .api-pop-manage:hover { color:var(--accent); border-color:var(--accent); } /* 2e section de la MÊME feuille : le preset. Un filet la sépare du fournisseur — c'est une autre question (« avec quels réglages ? » et non « avec quelle API ? »), pas une autre pastille. */ .api-pop-h.prs-h { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); } .prs-tabs { display:flex; gap:4px; padding:0 4px 6px; } .prs-tab { flex:1; padding:5px 4px; border-radius:7px; font-size:11px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--dim); } .prs-tab:hover { color:var(--txt); } .prs-tab.on { color:var(--accent); border-color:var(--accent); background:rgba(120,180,255,.10); } @media (max-width:760px){ .api-chip-lab { display:none; } .api-chip { width:40px; padding:0; } .prs-tab { padding:8px 4px; font-size:12px; } } /* doigt : les onglets restent cliquables */ .apim-owner { border:1px solid var(--accent); border-radius:10px; padding:10px 12px; margin-bottom:12px; background:rgba(255,200,90,.06); } .apim-owner-h { font-weight:700; font-size:13px; margin-bottom:4px; } .apim-owner-d { font-size:11px; color:var(--dim); margin-bottom:8px; line-height:1.35; } .apim-owner .acc-l { display:block; font-size:12px; color:var(--dim); margin-top:8px; } .apim-owner .acc-l input { width:100%; box-sizing:border-box; margin-top:3px; background:var(--ink); color:inherit; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:13px; } .apim-owner-row { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; } .apim-owner-row .ow-on { color:var(--accent); font-size:12px; } .apim-owner-row .ow-off { color:var(--dim); font-size:12px; } .apim-owner-row code { font-size:11px; } .apim-owner .setup-err { font-size:11px; } /* Admin : encarts Maintenance & « voir comme » (sous la gestion des comptes) */ .adm-sec { border-top:1px solid var(--line); margin-top:12px; padding-top:10px; } .adm-sec-t { font-weight:700; font-size:13px; margin-bottom:3px; } .adm-sec-d { font-size:11px; color:var(--dim); margin-bottom:8px; line-height:1.35; } .adm-ck { display:flex; align-items:center; gap:8px; font-size:13px; margin:4px 0; cursor:pointer; } .adm-ck input { width:16px; height:16px; } /* Maintenance : overlay plein écran (couvre la topbar) quand TOUT est coupé */ #maint-overlay { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(8,10,16,.92); backdrop-filter:blur(3px); } #maint-overlay .maint-card { text-align:center; max-width:420px; padding:28px 32px; } #maint-overlay .maint-ico { font-size:52px; line-height:1; margin-bottom:12px; } #maint-overlay .maint-msg { font-size:17px; color:var(--fg); margin-bottom:18px; line-height:1.4; } /* « Voir comme » : pastille fixe en bas, AU-DESSUS de l'overlay (l'admin peut toujours ressortir) */ #viewas-bar { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:210; display:flex; align-items:center; gap:12px; padding:8px 14px; border-radius:999px; background:var(--accent); color:#101014; box-shadow:0 6px 22px rgba(0,0,0,.45); font-size:13px; } #viewas-bar .va-lbl { font-weight:700; } #viewas-bar .va-exit { border:0; border-radius:999px; padding:4px 12px; font-size:12px; font-weight:700; cursor:pointer; background:#101014; color:var(--accent); } #viewas-bar .va-wipe { border:1px solid #101014; border-radius:999px; padding:4px 12px; font-size:12px; font-weight:700; cursor:pointer; background:transparent; color:#101014; } body.viewas-on #topbar { box-shadow:inset 0 -2px 0 var(--accent); } /* liseré : rappel « mode aperçu » */ .apim-mlbl { display:block; margin:8px 0 4px; color:var(--dim); font-size:12px; } .apim-mrow { display:flex; gap:6px; align-items:center; } .apim-mrow .apim-mbox { flex:1; min-width:0; display:flex; } .apim-mrow select, .apim-mrow input { flex:1; min-width:0; background:var(--ink); color:inherit; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; font-size:12px; } .apim-mrow button { white-space:nowrap; } .apim-btns { display:flex; justify-content:space-between; gap:8px; margin-top:14px; } /* ===== (d) MENU PERSONNAGE unifié (plein écran, style JRPG) — assemble les briques b/c/quêtes ===== */ #charmenu { display:none; } body.cmopen #charmenu { display:block; position:fixed; inset:0; z-index:120; background:rgba(8,10,14,.5); backdrop-filter:blur(3px); } /* voile neutre : le PANNEAU porte le thème */ .cm-panel { position:absolute; inset:2.2vh 2.2vw; display:flex; flex-direction:column; overflow:hidden; background:linear-gradient(160deg, var(--panel), var(--bg)); border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02); } .cm-head { display:flex; align-items:center; justify-content:space-between; padding:13px 20px; border-bottom:1px solid var(--line); background:linear-gradient(90deg, color-mix(in srgb, var(--char) 14%, transparent), transparent 55%); } .cm-title { font-weight:800; letter-spacing:2px; text-transform:uppercase; font-size:15px; background:linear-gradient(90deg, var(--char), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; } .cm-close { background:none; border:1px solid var(--line); color:var(--dim); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:14px; } .cm-close:hover { color:var(--txt); border-color:var(--char); } .cm-body { flex:1; display:grid; grid-template-columns:minmax(270px, 330px) 1fr; gap:16px; padding:16px; min-height:0; } .cm-left { display:flex; flex-direction:column; gap:12px; overflow-y:auto; min-height:0; } .cm-right { display:flex; flex-direction:column; min-height:0; } /* carte joueur */ .cm-hero { background:linear-gradient(150deg, color-mix(in srgb, var(--char) 12%, var(--panel)), var(--panel)); border:1px solid var(--line); border-radius:12px; padding:14px; } .cm-hero-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .cm-ava { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:22px; color:#0d0f14; background:var(--a, var(--char)); box-shadow:0 0 14px -3px var(--a, var(--char)); flex:none; } .cm-hero-name { font-weight:700; font-size:16px; } .cm-hero-lv { color:var(--char); font-size:12px; } .cm-stat { display:flex; align-items:center; gap:8px; margin:5px 0; font-size:11px; } .cm-slbl { width:26px; color:var(--dim); font-weight:700; } .cm-sval { color:var(--dim); font-size:10px; white-space:nowrap; } .cm-gauge { flex:1; height:8px; border-radius:6px; background:var(--ink); overflow:hidden; border:1px solid var(--line); } .cm-gauge > span { display:block; height:100%; border-radius:6px; } .cm-gauge.hp > span { background:linear-gradient(90deg, #3ecf8e, #6fe0b0); } .cm-gauge.mp > span { background:linear-gradient(90deg, #6ea8fe, #9ec3ff); } .cm-gauge.xp > span { background:linear-gradient(90deg, #c9a3ff, #e6d2ff); } .cm-attrs { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); } .cm-attr { font-size:11px; color:var(--dim); } .cm-attr b { color:var(--txt); } .cm-bo { color:var(--ok); font-size:9px; margin-left:1px; font-style:normal; } /* compagnons */ .cm-allies { display:flex; flex-direction:column; gap:8px; } .cm-ally { display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 10px; } .cm-ally .cm-ava { width:34px; height:34px; font-size:15px; border-radius:9px; } .cm-ally-id { min-width:0; flex:1; } .cm-ally-name { font-weight:600; font-size:13px; display:flex; align-items:center; gap:6px; } .cm-ally-role { color:var(--dim); font-size:10px; } .cm-dot { width:7px; height:7px; border-radius:50%; background:var(--line); flex:none; } .cm-dot.here { background:var(--ok); box-shadow:0 0 5px var(--ok); } .cm-ally-hp { margin-top:4px; } .cm-ally-hp .cm-gauge { height:5px; } .cm-place { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:auto; } .cm-place-h { color:var(--dim); font-size:10px; text-transform:uppercase; letter-spacing:1px; } .cm-place-n { font-weight:600; margin:3px 0 8px; } .cm-mapbtn { width:100%; background:rgba(110,168,254,.12); border:1px solid var(--accent); color:var(--txt); border-radius:8px; padding:6px; cursor:pointer; font-size:12px; } .cm-mapbtn:hover { background:rgba(110,168,254,.22); } /* onglets + contenu */ .cm-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; } .cm-tab { display:flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); color:var(--dim); padding:8px 14px; border-radius:10px; cursor:pointer; font-size:12px; font-weight:600; } .cm-tab:hover { color:var(--txt); } .cm-tab.on { color:#fff; border-color:transparent; background:linear-gradient(135deg, var(--char), var(--accent)); box-shadow:0 4px 16px -4px var(--char); } .cm-tab-ic { font-size:14px; } .cm-content { flex:1; overflow-y:auto; background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:14px; } .cm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(205px, 1fr)); gap:10px; } .cm-item { background:var(--panel); border:1px solid var(--line); border-left-width:3px; border-radius:10px; padding:10px 12px; } .cm-item-h { display:flex; align-items:center; justify-content:space-between; gap:8px; } .cm-item-h b { font-size:13px; } .cm-tag { font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--dim); background:var(--ink); padding:1px 6px; border-radius:6px; white-space:nowrap; } .cm-item-d { color:var(--dim); font-size:11px; margin-top:5px; line-height:1.4; } .cm-item-eff { color:var(--ok); font-size:11px; margin-top:6px; font-weight:600; } .cm-item.it-arme, .cm-item.sk-attaque { border-left-color:#b5563e; } .cm-item.it-armure, .cm-item.sk-buff { border-left-color:#5a83b0; } .cm-item.it-consommable, .cm-item.sk-soin { border-left-color:#7fa85a; } .cm-item.it-cle, .cm-item.sk-passif { border-left-color:#c9a24a; } .cm-item.it-quete, .cm-item.sk-malus { border-left-color:#a06fc0; } .cm-slots { display:flex; flex-direction:column; gap:10px; } .cm-slot { display:flex; align-items:center; gap:10px; } .cm-slot-lbl { width:80px; text-transform:uppercase; font-size:10px; letter-spacing:1px; color:var(--dim); flex:none; } .cm-slot-sel { flex:1; max-width:280px; background:var(--panel); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:5px 8px; } .cm-bonus { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); color:var(--ok); font-size:12px; } .cm-recruit { margin-top:12px; } .cm-recruit select { background:var(--panel); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:6px 10px; } .cm-x { background:none; border:none; color:var(--dim); cursor:pointer; margin-left:auto; font-size:12px; } .cm-x:hover { color:var(--no); } .cm-ally.lg .cm-ally-name { font-size:14px; } .cm-quest { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; } .cm-quest.done { opacity:.6; } .cm-quest-h { display:flex; justify-content:space-between; gap:10px; align-items:center; } .cm-qbadge { font-size:10px; padding:1px 8px; border-radius:8px; white-space:nowrap; } .cm-qbadge.a { background:rgba(110,168,254,.15); color:var(--accent); } .cm-qbadge.d { background:rgba(62,207,142,.15); color:var(--ok); } .cm-qgiver { color:var(--char); font-size:11px; margin:4px 0; } .cm-qstep { display:flex; gap:6px; font-size:12px; color:var(--dim); margin-top:4px; } .cm-qstep.ok { color:var(--ok); } .cm-qstep.cur { color:var(--txt); } .cm-hist { display:flex; flex-direction:column; gap:8px; } .cm-hrow { display:flex; gap:10px; font-size:12px; padding:8px 10px; border-radius:8px; background:var(--panel); border:1px solid var(--line); } .cm-hwho { flex:none; font-weight:700; color:var(--dim); width:64px; } .cm-hrow.u .cm-hwho { color:var(--accent); } .cm-hrow.a .cm-hwho { color:var(--char); } .cm-htxt { color:var(--txt); line-height:1.45; } .cm-bottom { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; padding:11px 20px; border-top:1px solid var(--line); background:linear-gradient(90deg, rgba(110,168,254,.06), transparent); font-size:12px; } .cm-bcell { color:var(--dim); } .cm-bcell.trame { color:var(--txt); margin-left:auto; } .cm-empty { color:var(--dim); text-align:center; padding:30px; font-size:13px; } .cm-empty.sm { padding:10px; text-align:left; font-size:11px; } @media (max-width:820px){ .cm-body { grid-template-columns:1fr; } .cm-panel { inset:0; border-radius:0; } } /* sélecteur de THÈME (compte) : chaque pastille porte data-theme -> se prévisualise dans SA palette */ .theme-pick { display:flex; flex-wrap:wrap; gap:8px; } .theme-sw { display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:92px; cursor:pointer; background:var(--panel); color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:9px 11px; } .theme-sw.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 5px 16px -6px var(--accent); } .theme-sw-dots { display:flex; gap:4px; } .theme-sw-dots i { width:14px; height:14px; border-radius:50%; display:block; } .theme-sw-lbl { font-size:12px; font-weight:600; } /* sélecteur de POLICE (compte) : chaque bouton s'affiche DANS sa police (aperçu) */ .font-pick { display:flex; flex-wrap:wrap; gap:8px; } .font-sw { cursor:pointer; background:var(--panel); color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:8px 15px; font-size:16px; } .font-sw.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 5px 16px -6px var(--accent); } /* import de polices (Owner) : ajout + liste avec suppression */ .uf-add { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px; } .uf-add input:not([type=file]) { flex:1; min-width:120px; } .uf-add input, .uf-add button { background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font:inherit; font-size:12px; } .uf-err { color:var(--no); font-size:12px; min-height:0; margin-top:4px; } .uf-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; } .uf-row { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:6px 10px; } .uf-name { font-size:16px; } .uf-del { background:none; border:1px solid var(--line); color:var(--dim); border-radius:6px; padding:3px 8px; cursor:pointer; font-size:11px; } .uf-del:hover { color:var(--no); border-color:var(--no); } /* ===== SKIN « Cristal » : habillage ORNEMENTAL original (SVG/CSS, inspiré JRPG cyan — aucun asset externe), theme-aware (prend var(--accent)). Cadres encochés + liseré lumineux + plaques + emblème. Appliqué d'abord au menu personnage ; s'étendra aux autres surfaces. ===== */ [data-skin="cristal"] .cm-panel { clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 42%, transparent)); border:1px solid color-mix(in srgb, var(--accent) 60%, var(--line)); } [data-skin="cristal"] .cm-panel::before { /* DOUBLE liseré d'accent lumineux, en retrait du bord */ content:""; position:absolute; inset:7px; pointer-events:none; z-index:3; clip-path:polygon(17px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px); border:1px solid color-mix(in srgb, var(--accent) 75%, transparent); box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 0 30px -10px var(--accent); } [data-skin="cristal"] .cm-panel::after { /* ÉQUERRES de coin (angles carrés : haut-droite + bas-gauche) */ content:""; position:absolute; inset:0; pointer-events:none; z-index:3; background: linear-gradient(var(--accent),var(--accent)) 100% 0 / 30px 2px no-repeat, linear-gradient(var(--accent),var(--accent)) 100% 0 / 2px 30px no-repeat, linear-gradient(var(--accent),var(--accent)) 0 100% / 30px 2px no-repeat, linear-gradient(var(--accent),var(--accent)) 0 100% / 2px 30px no-repeat; filter:drop-shadow(0 0 4px var(--accent)); } [data-skin="cristal"] .cm-head { position:relative; } [data-skin="cristal"] .cm-head::after { /* emblème de coin : cercles concentriques */ content:""; position:absolute; right:56px; top:50%; transform:translateY(-50%); width:14px; height:14px; z-index:4; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 70%, transparent); box-shadow:0 0 6px -1px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent), inset 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } [data-skin="cristal"] .cm-title { /* vraie PLAQUE biseautée : dégradé d'accent + jeton + souligné */ -webkit-text-fill-color:currentColor; color:var(--txt); position:relative; padding:5px 34px 5px 18px; z-index:4; background:linear-gradient(100deg, color-mix(in srgb, var(--accent) 32%, var(--panel)), color-mix(in srgb, var(--accent) 6%, transparent) 82%); clip-path:polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%); box-shadow:inset 0 -2px 0 -0.5px color-mix(in srgb, var(--accent) 70%, transparent); } [data-skin="cristal"] .cm-title::before { content:""; position:absolute; left:-6px; top:50%; width:5px; height:17px; transform:translateY(-50%); background:var(--accent); box-shadow:0 0 9px var(--accent); border-radius:1px; } [data-skin="cristal"] .cm-content { clip-path:polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); } [data-skin="cristal"] .cm-item, [data-skin="cristal"] .cm-quest, [data-skin="cristal"] .cm-hero, [data-skin="cristal"] .cm-ally { clip-path:polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); } [data-skin="cristal"] .cm-tab { clip-path:polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px); } [data-skin="cristal"] .cm-tab.on { box-shadow:0 0 20px -3px var(--char), 0 0 8px -1px var(--accent), inset 0 2px 0 -0.5px color-mix(in srgb, #fff 45%, transparent); } [data-skin="cristal"] .cm-hero { box-shadow:inset 3px 0 0 -1px var(--accent); position:relative; } [data-skin="cristal"] .cm-hero::after { /* petit emblème de coin sur la carte joueur */ content:""; position:absolute; right:11px; top:11px; width:9px; height:9px; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); } [data-skin="cristal"] .cm-mapbtn, [data-skin="cristal"] .cm-place { clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); } /* ---- SKIN « Cristal » sur le RESTE DU CHROME : cohérent avec le menu/VN, mais SOBRE (le menu et la bulle VN gardent le traitement fort ; ici, encoche discrète + bord d'accent + glow léger). ---- */ [data-skin="cristal"] .card, [data-skin="cristal"] .chat-card, [data-skin="cristal"] .st-sec, [data-skin="cristal"] .op-card, [data-skin="cristal"] .uni-card, [data-skin="cristal"] .plot-card, [data-skin="cristal"] .st-zone, [data-skin="cristal"] .st-ville, [data-skin="cristal"] .shop-card { clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); border-color:color-mix(in srgb, var(--accent) 32%, var(--line)); } [data-skin="cristal"] .chat-card.active { box-shadow:0 0 16px -4px var(--accent); } [data-skin="cristal"] #modal, [data-skin="cristal"] #settings-modal { border:1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 22px -6px var(--accent); } [data-skin="cristal"] #modal-head, [data-skin="cristal"] .sm-head { border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent); background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%); } [data-skin="cristal"] #topbar { border-bottom:1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow:0 2px 14px -7px var(--accent); } [data-skin="cristal"] #mj-drawer { border-left:1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow:-8px 0 34px -14px var(--accent); } [data-skin="cristal"] .pri, [data-skin="cristal"] .mode-btn.on { clip-path:polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); box-shadow:0 0 12px -4px var(--accent); } /* ═══════════════ BANQUE DE LOREBOOKS (écran plein — autonome depuis R1, le mode Classic est parti) ═══════════════ */ .brand { user-select:none; } #lbk-home { position:fixed; inset:38px 0 0 0; z-index:40; display:flex; flex-direction:column; background:var(--bg); color:var(--txt); } #lbb-back { font-size:20px; background:transparent; border:0; color:var(--txt); cursor:pointer; padding:2px 8px; border-radius:8px; } #lbb-back:hover { background:var(--panel2); } /* v25.99 — EN-TÊTES QUI TIENNENT DANS UN TÉLÉPHONE. Bug VÉCU (capture du joueur, écran ~390 px) : l'en-tête d'un fil — ← avatar, nom de la carte, badge NSFW, puis ℹ️ 🧠 📚 — mesurait 393 px sur 390, si bien que le 📚 tombait HORS CADRE : il fallait « défiler de droite à gauche » pour l'atteindre. La cause n'est pas le nombre de boutons mais le fait que RIEN, dans cette rangée, n'acceptait de rétrécir : un texte a par défaut `min-width:auto`, c'est-à-dire la largeur de son plus long mot, et il pousse tout le reste dehors. Correctif de CLASSE — il vaut pour l'en-tête .lbk-head (banque de lorebooks) : • le TITRE est le seul élément élastique : il rétrécit et se termine en « … » (.lbk-head-t) ; • les boutons ne rétrécissent JAMAIS (flex:0 0 auto) — un bouton coupé n'est plus un bouton ; • le tampon .grow absorbe l'espace libre en premier et disparaît en premier ; • en dernier recours (banque de lorebooks : « ⬆ Importer (JSON ST) »…), la rangée passe à la ligne plutôt que de sortir du cadre. */ .lbk-head { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel); flex-wrap:wrap; min-width:0; } .lbk-head > * { flex:0 0 auto; min-width:0; } .lbk-head > .grow { flex:1 1 0; } .lbk-head-t { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* TÉLÉPHONE : marges resserrées, boutons au gabarit du doigt. COULEUR (accent à droite, panneau bordé à gauche) et à l'alignement : la bulle peut donc manger presque toute la ligne, et les gouttières du fil se resserrent d'autant. */ @media (max-width:760px){ /* v25.99 — la rangée d'en-tête se resserre AVANT d'avoir à tronquer le nom de la carte : marges et écart réduits, boutons carrés au gabarit du doigt (40 px) sans texte autour. On y gagne ~40 px, de quoi loger ℹ️ 🧠 📚 en entier sur un écran de 360 px. */ .lbk-head { gap:6px; padding:10px 8px; } .lbk-head > button { padding:0; width:40px; min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; } .lbk-head > button.pri, #lbb-new, #lbb-import { width:auto; min-width:0; padding:0 10px; } } /* ————— MULTIMODAL (admin+) : joindre 📎 / générer 🎨 + rendu des images dans les bulles ————— */ .mm-prev { display:none; flex-wrap:wrap; gap:6px; flex-basis:100%; order:-1; } /* aperçu = pleine ligne AU-DESSUS de la saisie */ .mm-chip { position:relative; display:inline-flex; align-items:center; gap:5px; max-width:190px; padding:3px; border:1px solid var(--line); border-radius:8px; background:var(--bg); font-size:12px; color:var(--dim); } .mm-chip img { width:42px; height:42px; object-fit:cover; border-radius:6px; display:block; } .mm-chip.file { padding:6px 9px; } .mm-chip button { position:absolute; top:-7px; right:-7px; width:18px; height:18px; line-height:1; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--dim); font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .mm-chip button:hover { color:var(--no); border-color:var(--no); } .mm-btn { padding:0; width:40px; min-width:40px; height:40px; border-radius:12px; font-size:17px; line-height:1; display:inline-flex; align-items:center; justify-content:center; } /* 📎 / 🎨 — même hauteur que Envoyer */ .inbar-mm { display:flex; gap:6px; align-items:center; } .inbar-mm button { height:40px; } /* 🔌 📎 🎨 et Envoyer à la MÊME hauteur — un bouton plus plat que ses voisins se voyait au premier coup d'œil */ .mm-msg-atts { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px; } /* images/fichiers du message, AVANT le texte */ .mm-msg-img { max-width:min(280px,70%); max-height:280px; border-radius:12px; border:1px solid var(--line); display:block; cursor:zoom-in; } .mm-msg-file { font-size:12px; color:var(--dim); border:1px solid var(--line); border-radius:8px; padding:5px 9px; background:var(--bg); } /* carte réservée à un palier : grisée, non ouvrable */ @media (min-width:1100px){ } /* ——— éditeur d'ENTRÉES façon World Info (cartes + banque) ——— */ .lbe { border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:var(--panel2); } .lbe-off { opacity:.55; } .lbe-head { display:flex; align-items:center; gap:8px; padding:6px 10px; } .lbe-head button { background:transparent; border:none; color:var(--dim); cursor:pointer; font-size:14px; } .lbe-dot { font-size:11px !important; } .lbe-on input { width:14px; height:14px; } .lbe-name { flex:0 1 260px; min-width:120px; background:var(--ink); border:1px solid var(--line); color:inherit; border-radius:6px; padding:4px 8px; font-size:13px; } .lbe-sum { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dim); font-size:12px; } .lbe-tok { color:var(--dim); font-size:11px; white-space:nowrap; } .lbe-fold { margin-left:auto; } .lbe-body { padding:0 10px 10px; display:flex; flex-direction:column; gap:8px; } .lbe-body input, .lbe-body textarea, .lbe-body select { background:var(--ink); border:1px solid var(--line); color:inherit; border-radius:6px; padding:6px 8px; font-size:13px; box-sizing:border-box; } .lbe-body textarea { width:100%; resize:vertical; } .lbe-keys, .lbe-keys2 { width:100%; } .lbe-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .lbe-row .lbe-keys2 { flex:1; min-width:180px; } .lbe-chk { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); } .lbe-chk input { width:14px; height:14px; } .lbe-opts label { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); } .lbe-opts input[type="number"] { width:80px; } .lbe-empty { color:var(--dim); font-size:13px; padding:14px 4px; } #lbb-body { flex:1; overflow-y:auto; padding:20px 24px 60px; max-width:1500px; width:100%; margin:0 auto; box-sizing:border-box; } .lbb-intro { color:var(--dim); font-size:13px; margin-bottom:16px; max-width:900px; } .lbb-row { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px; background:var(--panel2); } .lbb-main { flex:1; min-width:0; } .lbb-name { font-weight:600; margin-right:8px; } .lbb-n { color:var(--dim); font-size:12px; margin-left:6px; } .lbb-desc { color:var(--dim); font-size:12px; margin-top:4px; } .lbb-badge { font-size:11px; border:1px solid var(--line); border-radius:10px; padding:1px 8px; color:var(--dim); margin-right:4px; white-space:nowrap; } .lbb-acts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .lbb-acts button, .lbb-exp { background:transparent; border:none; color:var(--dim); cursor:pointer; font-size:14px; text-decoration:none; } .lbb-link { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--dim); cursor:pointer; } .lbb-link input { width:14px; height:14px; } .lbb-warn { border:1px solid var(--warn, #b58a3c); border-radius:8px; padding:8px 12px; font-size:13px; margin-bottom:12px; } /* barre « Brouillon retrouvé » (Restaurer / Ignorer) — banque ET éditeur de carte */ .lbb-draft { display:flex; align-items:center; gap:8px; flex-wrap:wrap; border:1px solid var(--warn, #b58a3c); border-radius:8px; padding:8px 12px; font-size:13px; margin-bottom:12px; background:color-mix(in srgb, var(--warn, #b58a3c) 12%, transparent); } .lbb-draft button { padding:4px 12px; } .lbb-sec { font-weight:600; margin:22px 0 8px; } .lbb-offrow { opacity:.6; } /* ——— générateur d'entrées IA (façon WorldInfo Recommender) ——— */ .lbai-head { font-size:12px; color:var(--dim); margin:10px 0 6px; display:flex; gap:8px; align-items:center; } .lbai-head button { background:transparent; border:1px solid var(--line); border-radius:6px; color:inherit; cursor:pointer; font-size:12px; padding:2px 8px; } .lbai-sug { border:1px dashed var(--line); border-radius:8px; padding:8px 10px; margin-bottom:6px; } .lbai-added { opacity:.5; } .lbai-sug-h { display:flex; align-items:center; gap:8px; } .lbai-sug-h .lbb-n { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lbai-sug-h button { background:transparent; border:1px solid var(--line); border-radius:6px; color:inherit; cursor:pointer; padding:2px 8px; } .lbai-sug-c { color:var(--dim); font-size:12px; margin-top:4px; white-space:pre-wrap; } .lbb-edacts { display:flex; justify-content:space-between; margin-top:16px; } @media (max-width:760px){ .lbb-row { flex-direction:column; } .lbb-acts { justify-content:flex-start; } } .cl-fld { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; } .cl-fld label { font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.04em; } .cl-fld input, .cl-fld textarea { border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--txt); padding:9px 11px; font:inherit; font-size:14px; resize:vertical; } .cl-fld-d { display:block; margin-top:4px; font-size:11px; color:var(--dim); } /* copie traduite verrouillée */ /* ————— v25.62 : UNIFORMISATION — trois familles d'éléments revenaient partout avec chacune leur style : les TITRES de section, les PASTILLES d'action (✎ ✕ ⬇ ▶ ↺ ⏏) et les LISTES de cartes. Une seule règle par famille désormais ; les blocs historiques plus bas ne font qu'affiner. */ .lbb-sec, .blk-grp-h { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); font-weight:600; } .lbb-acts button, .lbb-exp { border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; padding:3px 8px; font-size:13px; line-height:1.5; text-decoration:none; } .lbb-acts button:hover, .lbb-exp:hover { color:var(--accent); border-color:var(--accent); } /* pied de menu : même gabarit que les boutons voisins */ /* v25.61 : bandeau des lorebooks moteur dans le panneau du fil (toujours actifs, non cochables) */ @media (max-width: 560px){ } /* menu API owner : contexte max par palier */ .apim-ctx { display:flex; flex-direction:column; gap:6px; margin-top:4px; } .apim-ctx-row { display:flex; align-items:center; gap:8px; } .apim-ctx-lbl { flex:0 0 96px; font-size:13px; } .apim-ctx-in { flex:1; min-width:0; } .apim-ctx-tok { font-size:11px; color:var(--dim); } /* éditeur : bloc IA (owner) — génération de fiche */ .cl-ai { border:1px solid var(--accent); border-radius:10px; padding:10px 12px; margin:2px 0 12px; background:rgba(120,140,255,.06); display:flex; flex-direction:column; gap:8px; } .cl-ai-h { font-weight:700; font-size:13px; } .cl-ai textarea { width:100%; box-sizing:border-box; resize:vertical; } .cl-ai-btns { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .cl-ai-status { font-size:12px; color:var(--dim); } /* éditeur : image de la carte (avatar = PNG d'export) */ /* indicateur « Traduction en cours… » */ @keyframes cl-spin { to { transform:rotate(360deg); } } /* panneau Modération */ .mod-list { border:1px solid var(--line); border-radius:8px; margin:6px 0 10px; max-height:34vh; overflow:auto; } .mod-row { display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--line); } .mod-row:last-child { border-bottom:0; } .mod-row .grow { flex:1; min-width:0; font-size:13px; } .mod-rk { color:var(--dim); font-size:11px; } .mod-ip { color:var(--dim); font-size:11px; font-family:ui-monospace,monospace; } .mod-banned { color:#ff8f9e; font-size:11px; font-weight:700; } .mod-pub { color:var(--accent); font-size:11px; } .mod-intro { color:var(--dim); font-size:11px; } /* ============================================================================================ Onboarding NerveGear (SAO) — écran de démarrage plein écran, look « full-dive » ASSUMÉ (cyan sur noir, monospace) quel que soit le thème du site : c'est un écran de boot, pas du chrome. 100% CSS. ============================================================================================ */ #nervegear { position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 90% at 50% 30%, #0a1526 0%, #060a14 55%, #03050b 100%); color:#cfe9f5; font:15px/1.5 system-ui,sans-serif; overflow:auto; padding:24px; box-sizing:border-box; --ng-cy:#58e6ff; --ng-cy2:#22b4e6; --ng-line:rgba(88,230,255,.22); --ng-dim:#7a94ab; } #nervegear .ng-scan { position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:screen; background:repeating-linear-gradient(180deg, rgba(88,230,255,.05) 0 2px, transparent 2px 4px); } #nervegear::after { content:""; position:absolute; inset:0; background:#eafcff; opacity:0; pointer-events:none; } #nervegear.ng-launch::after { animation:ng-flash .9s ease-out forwards; } @keyframes ng-flash { 0%{opacity:0} 22%{opacity:.05} 60%{opacity:.95} 100%{opacity:0} } #nervegear.ng-launch .ng-create { animation:ng-dive .9s ease-in forwards; } @keyframes ng-dive { to { transform:scale(1.12); opacity:0; filter:blur(6px); } } /* -- BOOT ------------------------------------------------------------------------------------ */ .ng-bootscr { position:relative; z-index:1; text-align:left; max-width:560px; width:100%; } .ng-bootlog { font:14px/1.7 ui-monospace,"Courier New",monospace; color:var(--ng-cy); margin:0; white-space:pre-wrap; text-shadow:0 0 10px rgba(88,230,255,.5); min-height:180px; } .ng-bootgo { margin-top:18px; text-align:center; color:var(--ng-cy); letter-spacing:2px; font-size:13px; animation:ng-pulse 1.3s ease-in-out infinite; transition:opacity .4s; } @keyframes ng-pulse { 0%,100%{opacity:.45} 50%{opacity:1} } /* -- CRÉATION D'AVATAR ----------------------------------------------------------------------- */ .ng-create, .ng-persona { position:relative; z-index:1; width:100%; max-width:760px; background:linear-gradient(180deg, rgba(12,26,46,.86), rgba(6,12,24,.92)); border:1px solid var(--ng-line); border-radius:16px; padding:22px 24px; box-shadow:0 0 60px rgba(20,120,180,.22), inset 0 0 40px rgba(20,90,140,.1); } .ng-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--ng-line); padding-bottom:12px; margin-bottom:16px; } .ng-title { font-weight:800; letter-spacing:5px; font-size:15px; color:var(--ng-cy); text-shadow:0 0 14px rgba(88,230,255,.55); } .ng-pseudo { display:flex; align-items:center; gap:8px; font-size:18px; } .ng-pseudo .ng-lbl { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ng-dim); } .ng-pseudo b { color:#eaf6ff; text-shadow:0 0 12px rgba(88,230,255,.4); } .ng-pseudo .ng-lock { font-size:13px; opacity:.75; } .ng-body { display:flex; gap:22px; align-items:stretch; } .ng-preview { flex:0 0 200px; display:flex; flex-direction:column; align-items:center; gap:10px; background:radial-gradient(80% 70% at 50% 32%, rgba(40,120,170,.22), transparent 70%); border:1px solid var(--ng-line); border-radius:12px; padding:12px; } #ng-fig { width:100%; height:260px; } .ng-profile { font-size:11.5px; color:var(--ng-dim); text-align:center; line-height:1.5; } .ng-panel { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; } .ng-sub { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ng-cy); opacity:.85; margin-top:4px; } .ng-dims { display:flex; flex-direction:column; gap:7px; } .ng-dim { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--ng-line); border-radius:9px; padding:6px 8px 6px 12px; background:rgba(10,22,40,.5); } .ng-dim-lbl { font-size:12.5px; color:#bcd6e6; } .ng-cyc { display:flex; align-items:center; gap:6px; } .ng-cyc-v { min-width:96px; text-align:center; color:#eaf6ff; font-size:13px; } .ng-cyc-b { background:transparent; border:1px solid var(--ng-line); color:var(--ng-cy); border-radius:7px; padding:2px 9px; font-size:13px; line-height:1.4; cursor:pointer; } .ng-cyc-b:hover { border-color:var(--ng-cy); box-shadow:0 0 10px rgba(88,230,255,.35); } .ng-size { display:flex; align-items:center; gap:10px; font-size:12.5px; color:#bcd6e6; } .ng-size input[type=range] { flex:1; accent-color:var(--ng-cy); } .ng-size b { color:#eaf6ff; min-width:56px; text-align:right; } .ng-arrivals { display:flex; gap:10px; flex-wrap:wrap; } .ng-arr { flex:1; min-width:180px; background:rgba(10,22,40,.5); border:1px solid var(--ng-line); color:#cfe9f5; border-radius:10px; padding:10px 12px; font-size:12.5px; text-align:left; cursor:pointer; } .ng-arr:hover { border-color:var(--ng-cy); } .ng-arr.on { border-color:var(--ng-cy); color:#eaf6ff; box-shadow:0 0 16px rgba(88,230,255,.28); background:rgba(30,90,140,.35); } .ng-err { color:#ff8f9e; font-size:12.5px; min-height:16px; margin-top:8px; } /* -- LINK START ------------------------------------------------------------------------------ */ .ng-link { display:block; width:100%; margin-top:14px; padding:15px; border:none; border-radius:12px; background:linear-gradient(180deg, var(--ng-cy), var(--ng-cy2)); color:#04121e; font-weight:800; letter-spacing:4px; font-size:19px; cursor:pointer; box-shadow:0 0 26px rgba(88,230,255,.5); transition:transform .1s, box-shadow .2s; } .ng-link i { font-style:normal; color:#c8283a; } .ng-link:hover { box-shadow:0 0 40px rgba(88,230,255,.8); transform:translateY(-1px); } .ng-link:disabled { opacity:.7; cursor:default; } .ng-link-sm { font-size:14px; letter-spacing:2px; } .ng-persona { max-width:520px; text-align:left; } .ng-persona label { display:block; font-size:12.5px; color:#bcd6e6; margin:10px 0 4px; } .ng-persona input, .ng-persona textarea { width:100%; box-sizing:border-box; background:rgba(6,14,26,.8); color:#eaf6ff; border:1px solid var(--ng-line); border-radius:9px; padding:9px 11px; font:inherit; resize:vertical; } .ng-persona input:focus, .ng-persona textarea:focus { outline:none; border-color:var(--ng-cy); } .ng-persona-hint { color:var(--ng-dim); font-size:12px; margin:2px 0 6px; } .ng-persona-hint.ng-temp { text-align:left; margin:6px 0 8px; } .ng-plink { background:none; border:1px solid var(--ng-cy); color:var(--ng-cy); border-radius:6px; padding:2px 8px; margin-left:8px; font-size:12px; cursor:pointer; } .ng-plink:hover { background:rgba(80,200,255,.12); } @media (max-width:640px) { .ng-body { flex-direction:column; } .ng-preview { flex:0 0 auto; flex-direction:row; align-items:center; } #ng-fig { width:120px; height:150px; } } /* Setup : monde à onboarding — nom/desc pilotés par le NerveGear (verrouillés), note d'info. */ .su-ob-note { font-size:12px; color:var(--accent); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin:2px 0 4px; background:var(--panel2); } label.su-locked { opacity:.5; } /* ————————————————————————————— PWA : installation + confort « app installée » ————————————————————————————— Bloc self-contained. Les encoches (safe-area) ne s'appliquent QU'EN mode installé (display-mode:standalone) : le rendu dans un navigateur normal reste STRICTEMENT inchangé. */ .pwa-sec .mode-btn { margin-top:8px; } .pwa-badge { display:inline-block; font-size:12px; color:var(--ok); border:1px solid var(--line); border-radius:8px; padding:6px 10px; background:var(--panel2); } @media (display-mode: standalone) { #topbar { box-sizing:border-box; height:calc(38px + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px); } body { padding-top:calc(38px + env(safe-area-inset-top, 0px)); } #topbar.tb-open #tb-tools { top:calc(38px + env(safe-area-inset-top, 0px)); } #inbar { padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); } } /* v25.40 — autocomplétion des modules de bannière : on tape « {{ », la liste s'affiche */ .bn-pop { position:fixed; z-index:9999; max-width:min(520px, 94vw); max-height:min(320px, 52vh); overflow-y:auto; background:var(--panel2); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.45); padding:5px; } .bn-h { font-size:11px; opacity:.65; padding:3px 7px 5px; } .bn-it { display:flex; flex-direction:column; gap:1px; padding:5px 8px; border-radius:7px; cursor:pointer; font-size:13px; } .bn-it b { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--accent); } .bn-it span { font-size:11.5px; opacity:.72; line-height:1.35; } .bn-it.on, .bn-it:hover { background:rgba(255,255,255,.08); } /* v25.35 — liens lorebook <-> monde Forge : panneau de la banque + liste de la fiche du monde */ .lbb-worlds { flex-basis:100%; margin-top:8px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.03); display:flex; flex-wrap:wrap; gap:6px 14px; } .lbb-worlds-t { flex-basis:100%; font-size:12px; opacity:.75; } .lbb-worlds label { display:flex; align-items:center; gap:6px; font-size:13px; } .st-lb { margin:10px 0; padding:10px; border:1px solid var(--line); border-radius:10px; } .st-lb-t { font-weight:600; margin-bottom:4px; } .st-lb-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; } .st-lb-n { flex:1 1 200px; } .st-lb-n em { opacity:.65; font-style:normal; font-size:12px; } .st-lb-add { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; } .st-lb-add select { flex:1 1 200px; } /* v25.38 — éditeur d'une fiche de la bibliothèque de personnages */ .ce-ai { display:flex; gap:8px; margin-bottom:10px; } .ce-ai input { flex:1; } .ce-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; } .ce-f { display:flex; flex-direction:column; gap:3px; font-size:13px; } .ce-f span { opacity:.75; } .ce-dossier { margin-top:10px; } .ce-dossier textarea { width:100%; box-sizing:border-box; resize:vertical; } @media (max-width: 720px){ .ce-grid { grid-template-columns:1fr; } } .st-mega-one { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0; } .st-mega-one select { flex:1 1 180px; } .st-mega-one input[type=number] { width:70px; } /* Studio v27 : image plein écran d'une cutscene, dans la bulle de scène (clic = grand) */ .cs-cg { display:block; width:100%; max-height:220px; object-fit:cover; border-radius:8px; margin:4px 0; cursor:zoom-in; } .cs-cg.zoom { position:fixed; inset:0; width:100vw; height:100vh; max-height:none; object-fit:contain; z-index:200; background:rgba(0,0,0,.92); border-radius:0; margin:0; cursor:zoom-out; } /* Studio v27 : éditeur de chronologie (fiche de personnage) */ .st-chrono-row { display:grid; grid-template-columns:90px 110px 1fr auto; gap:6px; align-items:start; margin:4px 0; } .st-chrono-row textarea { grid-column:1 / span 4; width:100%; box-sizing:border-box; } .st-chrono-row .st-chrono-eff { grid-column:1 / span 4; width:100%; box-sizing:border-box; } .st-chrono-row .st-chrono-destin { grid-column:1 / span 4; } /* v33 : effets STRUCTURÉS d'une étape (une ligne = un type + une cible choisie) et « quand » */ .st-chrono-row .st-eff { grid-column:1 / span 4; border:1px dashed var(--line); border-radius:7px; padding:6px 8px; } .st-eff-t { font-size:11.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; } .st-eff-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:3px 0; } .st-eff-row > select, .st-eff-row > input { flex:0 1 auto; min-width:120px; } .st-eff-row > input[list], .st-eff-row > input[maxlength="300"], .st-eff-row > input[maxlength="120"] { flex:1 1 220px; } /* v61 : le ✕ tient la DROITE de la ligne, quelle que soit la largeur des contrôles du type choisi — une ligne « niveau 14 » et une ligne « donner l'objet … » alignent leur bouton. */ .st-eff-del { flex:none; padding:4px 8px; margin-left:auto; } .st-eff-row > .sm-d { flex:1 1 auto; font-size:12.5px; } /* « ce personnage » */ .st-eff-add { background:transparent; border:1px dashed var(--line); color:var(--dim); border-radius:7px; padding:4px 9px; font:inherit; font-size:12px; cursor:pointer; margin-top:2px; } .st-eff-add:hover { color:inherit; border-style:solid; } .st-chrono-row .st-chrono-l3 { grid-column:1 / span 4; display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .st-chrono-row .st-hab-cond { grid-column:1 / span 4; } /* v30 : HABITUDES d'un personnage (où il passe ses journées) — une ligne + son « quand » */ .st-hab-row { border:1px solid var(--line); border-radius:9px; padding:8px; margin:6px 0; background:var(--panel-2,var(--panel2)); } .st-hab-l1 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .st-hab-l1 > select { flex:none; } .st-hab-et { display:inline-flex; gap:6px; align-items:center; font-size:12px; color:var(--dim); } .st-hab-et input { width:70px; } .st-hab-p { display:inline-flex; gap:5px; align-items:center; font-size:12px; color:var(--dim); } .st-hab-p input { width:56px; } .st-hab-q { flex:0 1 auto; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:transparent; border:1px dashed var(--line); color:var(--dim); border-radius:7px; padding:6px 9px; font:inherit; font-size:12px; cursor:pointer; } .st-hab-q:hover { color:inherit; border-style:solid; } .st-hab-cond { margin-top:8px; } .st-hab-tr { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; font-size:12px; color:var(--dim); } .st-hab-tr label { display:inline-flex; gap:4px; align-items:center; cursor:pointer; } .st-hab-cartes { display:flex; flex-wrap:wrap; gap:4px 12px; max-height:110px; overflow:auto; font-size:12px; flex:1 1 320px; border:1px dashed var(--line); border-radius:7px; padding:6px 8px; } .st-hab-cartes label { display:inline-flex; gap:4px; align-items:center; cursor:pointer; white-space:nowrap; } .st-cg-row { display:flex; gap:8px; align-items:center; margin:4px 0; } .st-cg-thumb { max-height:70px; border-radius:6px; } /* v27.3 : règles du monde (cases à cocher, éditeur de monde) */ .st-rules { display:flex; flex-wrap:wrap; gap:14px; margin:6px 0 10px; } /* v34 : la conséquence du 0 PV — une règle choisie, ses tours à terre, le texte du monde */ .st-zpv { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:4px 0 10px; } .st-zpv > label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim); margin:0; } .st-zpv .st-zpv-x { flex:1 1 280px; } .st-rules2 > label { min-width:260px; } /* v42 : zones sûres, mort d'un personnage */ .st-newhint { margin:0 0 10px; } /* v43 : assistant « nouveau monde » */ .st-refs-l { display:flex; flex-wrap:wrap; gap:6px; } /* v44 : « Cité dans » */ .st-ask { display:flex; flex-direction:column; gap:6px; margin:6px 0; padding:8px 10px; border:1px solid var(--accent); border-radius:10px; background:var(--surface-2); } /* v46 : saisie en place */ .st-ask label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim); } .st-ask input, .st-ask textarea { background:var(--ink); color:var(--txt); border:1px solid var(--line-ctl); border-radius:8px; padding:6px 9px; font:inherit; font-size:var(--fs); } .st-ask .st-btns { display:flex; gap:6px; margin:0; } button.arm, .me-cart-x.arm { border-color:var(--no) !important; color:var(--no) !important; } /* v46 : bouton armé (deux clics) */ .st-hpop { position:fixed; z-index:5000; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5); display:flex; flex-direction:column; overflow:hidden; } /* v45 : aide en popover */ .st-hpop-h { display:flex; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line); } .st-hpop-h button { background:transparent; border:1px solid var(--line); color:inherit; border-radius:8px; font:inherit; font-size:12px; padding:2px 8px; cursor:pointer; } .st-hpop-b { overflow:auto; padding:6px 14px 12px; font-size:13px; line-height:1.5; } .st-hpop-b h3 { margin:12px 0 4px; font-size:13px; color:var(--accent); } .st-hpop-b code { background:var(--ink); padding:0 4px; border-radius:4px; } .st-pal { position:fixed; inset:0; z-index:4500; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; } /* v45 : palette Ctrl+K */ .st-pal[hidden], .st-hpop[hidden] { display:none; } /* display:flex ne doit pas vaincre [hidden] : un calque caché n'intercepte rien */ .st-pal-in { width:min(640px, 92vw); background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 48px rgba(0,0,0,.55); overflow:hidden; } #st-pal-q { width:100%; box-sizing:border-box; border:none; border-bottom:1px solid var(--line); background:var(--ink); color:var(--txt); font:inherit; font-size:15px; padding:12px 14px; outline:none; } .st-pal-l { max-height:50vh; overflow:auto; padding:6px; } .st-pal-r { display:flex; gap:10px; align-items:center; width:100%; text-align:left; background:transparent; border:none; color:inherit; font:inherit; padding:7px 10px; border-radius:8px; cursor:pointer; } .st-pal-r.cur, .st-pal-r:hover { background:var(--surface-2); } .st-pal-n { flex:1; } .st-pal-m { color:var(--dim); font-size:12px; } .st-pal-f { padding:6px 12px; font-size:11px; color:var(--dim); border-top:1px solid var(--line); } .st-md-prev { margin-bottom:8px; } /* v44 : page Médias */ .st-md-prev img { max-width:100%; max-height:340px; border-radius:8px; border:1px solid var(--line); background:var(--ink); } .st-md-prev.st-md-audio audio { width:100%; } .st-md-file code { font-size:12px; color:var(--dim); } .st-md-kinds { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; } /* v75 — LA PUCE DU TYPE CHOISI dans « ＋ Ajouter un média » était une pastille bleue VIDE : la règle d'ici (plus spécifique, posée plus bas) reposait `color:var(--accent)` sur le fond `var(--accent)` de `.me-chip.on` (ligne 687) — texte et fond identiques, contraste mesuré 1,00:1. C'est l'oubli jumeau de `.se-form.on`, retiré en v70 : la règle générale des puces suffit, elle pose déjà la bordure d'accent ET le texte blanc. On ne la surcharge plus. */ .st-md-form label { min-width:180px; } #st-md-del.arm { border-color:var(--no); color:var(--no); } .st-refchip i { font-style:normal; color:var(--dim); } .st-refs-n { color:var(--dim); font-weight:400; } .st-wsec .st-row { margin-bottom:4px; } .st-row > .st-field { flex:1 1 100%; } .card .hors-row { display:flex; align-items:center; gap:8px; } /* v42 : hors du récit (mort / parti) + « Revient » */ .card .hors-badge { font-size:11px; color:var(--dim); border:1px solid var(--line); border-radius:10px; padding:1px 7px; } .card .hors-back { font-size:11px; } .st-zpv input[type=number] { width:74px; } .st-zpv .st-note { flex-basis:100%; margin:0; } /* v27.5 : AIDE du créateur de monde (plein écran) + garde « modifications non enregistrées » */ /* v72 — LA FENETRE D'AIDE PLEIN ECRAN s'appelait `.st-help`, comme les explications EN LIGNE des inspecteurs (regle de la ligne 238). Cette regle-ci, posee plus bas, gagnait : les 17 explications du Studio (mesurees sur cinq modules) etaient TOUTES a `display:none` — tout ce que l'outil avait a dire a l'auteur, invisible. La fenetre (une seule, dans aide.html) prend un nom a elle. */ .st-aide { display:none; position:fixed; inset:0; z-index:96; flex-direction:column; background:var(--bg,#0e1015); color:var(--txt); } body.sthelp-open .st-aide { display:flex; } .st-aide .sth-head { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:15px; } .st-aide .sth-head .grow { flex:1; } .st-aide .sth-head button { background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:4px 10px; cursor:pointer; font:inherit; } .st-aide .sth-body { display:flex; flex:1; min-height:0; } .st-aide .sth-nav { width:240px; flex:none; overflow-y:auto; border-right:1px solid var(--line); padding:8px; display:flex; flex-direction:column; gap:2px; } .st-aide .sth-nav button { text-align:left; background:transparent; border:none; color:inherit; padding:7px 10px; border-radius:6px; cursor:pointer; font:inherit; font-size:13px; } .st-aide .sth-nav button:hover, .st-aide .sth-nav button.on { background:var(--panel2); color:var(--accent); } .st-aide .sth-content { flex:1; overflow-y:auto; padding:14px 28px 60px; max-width:960px; line-height:1.55; font-size:14px; } .st-aide .sth-sec { padding:8px 0 22px; border-bottom:1px solid var(--line); } .st-aide .sth-sec h2 { margin:14px 0 8px; font-size:20px; } .st-aide .sth-sec h3 { margin:14px 0 6px; font-size:15px; color:var(--accent); } .st-aide .sth-sec code { background:var(--panel2); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:12.5px; } .st-aide .sth-sec ul, .st-aide .sth-sec ol { padding-left:22px; } .st-aide .sth-sec li { margin:4px 0; } @media (max-width:760px){ .st-aide .sth-body { flex-direction:column; } .st-aide .sth-nav { width:auto; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--line); } } #modal { position:relative; } #st-leave { position:absolute; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:5; } #st-leave .st-leave-box { background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:18px 20px; max-width:440px; } #st-leave .st-leave-box p { color:var(--dim); font-size:13px; } #st-leave .st-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } /* v50.1 — bandeau BROUILLON en tête de l'inspecteur (Quêtes, Scènes, Intrigues) : enregistré, pas joué tant que… */ .st-brouillon { border:1px solid var(--warn, #b58a3c); border-radius:8px; padding:8px 12px; margin:0 0 12px; font-size:13px; background:color-mix(in srgb, var(--warn, #b58a3c) 12%, transparent); } /* v53 — le CALCUL d'auteur (feuille « calcul » de l'arbre de conditions, action « Calculer une variable » des scènes). Le champ est en chasse fixe : une formule se relit signe par signe, et l'alignement des opérateurs y aide autant que dans un tableur. Le verdict rendu par l'analyseur du moteur (✓, ou la phrase qui dit ce qui cloche) est posé À CÔTÉ du champ, jamais en survol : une erreur qu'il faut aller chercher n'est pas une erreur signalée. */ .ct-calc { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size: calc(var(--fs) - 0.5px); } .ct-calc-msg { display:inline-flex; align-items:center; min-height:var(--ctl); padding:0 6px; font-size: calc(var(--fs) - 1px); line-height:1.25; white-space:normal; max-width:40ch; color:var(--dim); } .ct-calc-msg.ok { color:var(--ok); } .ct-calc-msg.err { color:var(--no); } .cse-eq { display:inline-flex; align-items:center; min-height:var(--ctl); padding:0 6px; opacity:.75; } #st-pagebody .st-gab .ct-calc { padding:0 9px; } /* v54 — la MISE EN SCÈNE FINE d'un beat « personnage » : repliée par défaut (elle sert rarement), ouverte d'office si l'auteur y a déjà mis quelque chose. Les champs sont petits et alignés sur une ligne : ce sont des réglages, pas une fiche. */ .cse-mep { margin-top:6px; } .cse-mep > summary { cursor:pointer; font-size:calc(var(--fs) - 1px); color:var(--dim); list-style:none; padding:2px 0; user-select:none; } .cse-mep > summary::before { content:"▸ "; } .cse-mep[open] > summary::before { content:"▾ "; } .cse-mepb { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-2); padding:6px 0 2px; } .cse-mini-l { display:inline-flex; flex-direction:column; gap:2px; font-size:calc(var(--fs) - 2px); color:var(--dim); } .cse-mep-mi { flex-direction:row; align-items:center; gap:6px; min-height:var(--ctl); } .cse-mepb .cse-hint { flex:1 1 100%; } /* v55 — la BARRE DE MISE EN FORME d'une réplique. Elle est discrète (des glyphes, pas des mots) : elle sert à envelopper une sélection, pas à se faire lire. Le verdict de l'analyseur du moteur se pose au bout de la barre — à côté du texte, jamais en survol. */ .cse-rtwrap { display:flex; flex-direction:column; gap:3px; min-width:0; } .cse-rt { display:flex; align-items:center; flex-wrap:wrap; gap:2px; } .cse-rtb { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px; padding:0 5px; font-size:13px; line-height:1; border:1px solid var(--line); border-radius:6px; background:var(--panel2); color:var(--txt); cursor:pointer; } .cse-rtb:hover { border-color:var(--accent); } .cse-rt-sep { display:inline-block; width:1px; height:16px; margin:0 4px; background:var(--line); } .cse-rt-msg { font-size:calc(var(--fs) - 2px); padding-left:6px; color:var(--dim); } .cse-rt-msg.ok { color:var(--ok); } .cse-rt-msg.err { color:var(--no); } /* v56 — LA CARTE DU RÉCIT. La carte prend la place, le panneau de droite porte ce qui cloche et l'élément choisi. Le canvas est un vrai plan de travail : il prend le focus clavier (F = tout voir, 0 = zoom 100 %, Échap = quitter le focus). */ .gv-wrap { display:flex; flex-direction:column; height:100%; min-height:0; gap:var(--sp-2); } .gv-bar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); padding:0 0 2px; } .gv-q { min-width:220px; flex:0 1 300px; } .gv-f { display:inline-flex; align-items:center; gap:5px; font-size:calc(var(--fs) - 1px); color:var(--dim); white-space:nowrap; } .gv-btn { display:inline-flex; align-items:center; gap:6px; min-height:var(--ctl); padding:0 11px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--txt); cursor:pointer; } .gv-btn:hover, .gv-btn.on { border-color:var(--accent); } .gv-btn.pri { border-color:var(--accent); margin-top:8px; } .gv-cpt { margin-left:auto; font-size:calc(var(--fs) - 1px); color:var(--dim); } .gv-body { display:flex; gap:var(--sp-2); flex:1 1 auto; min-height:0; } #gv-cv { flex:1 1 auto; min-width:0; height:100%; border:1px solid var(--line); border-radius:10px; background:radial-gradient(circle at 50% 0%, #161b26 0%, #10141c 70%); cursor:grab; outline:none; } #gv-cv:focus { border-color:var(--accent); } .gv-side { width:330px; flex:0 0 330px; display:flex; flex-direction:column; gap:6px; min-height:0; overflow:auto; } .gv-sh { font-weight:600; font-size:calc(var(--fs) - 1px); color:var(--dim); padding-top:4px; display:flex; align-items:center; gap:8px; } .gv-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:18px; padding:0 6px; border-radius:9px; font-size:11px; background:var(--panel2); color:var(--dim); } .gv-badge.err { background:color-mix(in srgb, var(--no) 24%, transparent); color:var(--no); } .gv-badge.warn { background:color-mix(in srgb, var(--warn, #b58a3c) 24%, transparent); color:var(--warn, #b58a3c); } .gv-badge.ok { background:color-mix(in srgb, var(--ok) 20%, transparent); color:var(--ok); } /* un défaut qu'on ne peut pas atteindre en un clic n'est pas signalé, il est décoré : chaque ligne recentre la carte sur le coupable. */ .gv-anos { display:flex; flex-direction:column; gap:3px; max-height:38vh; overflow:auto; } .gv-ano { display:flex; gap:7px; text-align:left; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--txt); cursor:pointer; font-size:calc(var(--fs) - 1px); line-height:1.35; } .gv-ano:hover { border-color:var(--accent); } .gv-ano .gv-ag { flex:0 0 auto; opacity:.9; } .gv-ano.erreur { border-left:3px solid var(--no); } .gv-ano.avertissement { border-left:3px solid var(--warn, #b58a3c); } .gv-ano.note { border-left:3px solid var(--line); color:var(--dim); } .gv-det { display:flex; flex-direction:column; gap:4px; } .gv-dt { font-size:var(--fs); } .gv-kind { font-size:calc(var(--fs) - 2px); color:var(--dim); } .gv-dx { font-size:calc(var(--fs) - 1px); color:var(--dim); line-height:1.4; } .gv-dm { font-size:calc(var(--fs) - 2px); color:var(--dim); } .gv-dh { font-weight:600; font-size:calc(var(--fs) - 2px); color:var(--dim); margin-top:6px; } .gv-liens { display:flex; flex-direction:column; gap:2px; } .gv-lien { text-align:left; padding:4px 7px; border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--txt); cursor:pointer; font-size:calc(var(--fs) - 1px); } .gv-lien:hover { border-color:var(--accent); } .gv-lien i { color:var(--dim); font-style:italic; } .gv-boucle { color:var(--warn, #b58a3c); } /* v56.1 — une ligne d'anomalie dont le coupable est MASQUÉ le dit : sans ça, le clic pose la caméra sur du vide et l'auteur croit l'outil cassé. */ .gv-ano.masq { opacity:.62; } .gv-masq { font-style:italic; color:var(--dim); } /* un lien d'ÉTAT est PROBABLE (l'un pose, l'autre attend) : il ne se lit jamais comme un chemin sûr */ .gv-lien.gv-l-etat { border-style:dashed; } .gv-prob { color:var(--dim); } /* v57.1 — fiche archétype : courbes en petits multiples (une échelle par panneau), paliers, rééquilibrage */ .st-curves-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; } .st-curve { border:1px solid var(--line); border-radius:8px; padding:6px 8px 4px; background:var(--panel2); min-width:0; } .st-curve-h { display:flex; justify-content:space-between; gap:6px; font-size:12px; margin-bottom:2px; } .st-curve-v { color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .st-curve svg { width:100%; height:90px; display:block; } .st-curve-line { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; } .st-curve-ref { fill:none; stroke:var(--dim); stroke-width:1.5; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; } .st-curve-grid { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; } .st-curve-cursor { stroke:var(--txt); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.6; } .st-curve-x { display:flex; justify-content:space-between; font-size:10px; color:var(--dim); } .st-curve-leg { font-size:12px; color:var(--dim); margin:8px 0 4px; } .st-curve-leg-a, .st-curve-leg-r { display:inline-block; width:18px; height:0; border-top:2px solid var(--accent); vertical-align:middle; } .st-curve-leg-r { border-top:2px dashed var(--dim); } .st-curve-tbl { width:100%; border-collapse:collapse; font-size:12px; margin-top:6px; } .st-curve-tbl th, .st-curve-tbl td { text-align:right; padding:2px 6px; border-bottom:1px solid var(--line); } .st-curve-tbl th:first-child { text-align:left; color:var(--dim); font-weight:normal; } .st-ladder .st-lad { display:flex; gap:10px; align-items:center; padding:4px 0; border-bottom:1px solid var(--line); font-size:13px; } .st-lad-n { width:56px; color:var(--dim); flex:none; } .st-lad-nm { flex:1; } .st-lad-m { color:var(--dim); font-size:12px; } .st-lad-h { color:var(--dim); font-size:12px; margin-bottom:4px; } .st-eqpanel { border:1px solid var(--accent); border-radius:8px; padding:10px 12px; margin-bottom:10px; background:var(--panel2); } .st-eqpanel .st-row { margin-top:8px; display:flex; gap:8px; } /* v57.5 — masque de chargement : le fond du thème reste peint (jamais de blanc), le contenu attend que boot() ait dessiné la vue finale. Posé dans (script à nonce), retiré par yfBootReveal. */ html.yf-boot { background:var(--bg, #15171c); } html.yf-boot body > * { visibility:hidden !important; } /* v57.6 — table des statistiques DÉRIVÉES : la formule à gauche, les valeurs par palier à droite. Les lignes « héritées » (plus lues par aucune loi de combat) sont estompées, pas cachées. */ .st-dv-tbl th:first-child { white-space:nowrap; } .st-dv-tbl .st-dv-f { text-align:left; } .st-dv-tbl .st-dv-f code { font-size:11px; color:var(--txt); background:var(--panel2); padding:1px 5px; border-radius:4px; } .st-dv-tbl .st-dv-n { display:block; color:var(--dim); font-size:11px; margin-top:2px; } .st-dv-tbl tr.st-dv-herit th, .st-dv-tbl tr.st-dv-herit td { opacity:.55; } /* v79 — l'Atelier : fabriquer un buste ou un visage depuis le plein pied, sans second export. Le canevas est damé : l'auteur VOIT ce qui est transparent, au lieu de croire à un fond blanc. */ #se-atl{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px} #se-atl .se-atl-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;max-width:1100px;width:100%;max-height:94vh;display:flex;flex-direction:column;overflow:hidden} #se-atl .se-atl-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)} #se-atl .se-atl-h .grow{flex:1} #se-atl .se-atl-sub{color:var(--muted);font-size:.9em} #se-atl .se-atl-b{display:flex;gap:18px;padding:16px;overflow:auto;align-items:flex-start} /* v80 : le canevas prend la FORME du cadre choisi — carré pour un buste (il garde les bras), portrait 2:3 pour un plein pied. Même surface à l'oeil, pour que la comparaison soit honnête. */ #se-atl canvas.cad-carre{width:400px;height:400px} #se-atl canvas{width:320px;height:480px;flex:0 0 auto;border:1px solid var(--line);border-radius:10px;cursor:grab; background-color:#8a8a8a;background-image:linear-gradient(45deg,#6f6f6f 25%,transparent 25%,transparent 75%,#6f6f6f 75%),linear-gradient(45deg,#6f6f6f 25%,transparent 25%,transparent 75%,#6f6f6f 75%); background-size:18px 18px;background-position:0 0,9px 9px} #se-atl canvas:active{cursor:grabbing} #se-atl .se-atl-side{flex:1;min-width:280px;display:flex;flex-direction:column;gap:12px} #se-atl .se-atl-lb{font-weight:600} #se-atl .se-atl-chips{display:flex;gap:8px;flex-wrap:wrap} #se-atl .se-atl-z{display:flex;align-items:center;gap:10px} #se-atl .se-atl-z input{flex:1} #se-atl .se-atl-out{color:var(--muted);font-size:.9em;font-family:ui-monospace,monospace;word-break:break-all} .se-slot-btns .se-atl-b{background:var(--accent);color:var(--on-accent);border-color:transparent} /* v85.1 — l'OUTIL DE VOIX : décrire, créer, écouter, fixer (monde et fiche) */ .st-voix-slot{flex:1 1 100%;display:flex;flex-direction:column;gap:6px} .st-voix-slot>b{font-size:.95em} #st-voix-pool{display:flex;flex-direction:column;gap:8px} .st-voixo{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)} .st-voixo-d{width:100%;min-height:32px;resize:vertical} .st-voixo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .st-voixo-bar button{padding:3px 10px} .st-voixo-bar button:disabled{opacity:.45;cursor:not-allowed} .st-voixo-hum{max-width:140px} .st-voixo-del{margin-left:auto} .st-voixo-etat{flex:1 1 220px;font-size:.88em;color:var(--dim)} .st-voixo-etat.ok{color:var(--ok)} .st-voixo-etat.warn{color:#d8a13a} .st-voixo-etat.err{color:var(--no)} .st-voixo.busy{opacity:.8} .st-cvoix{display:flex;flex-direction:column;gap:4px;margin-top:8px} .st-voix-nokey{flex:1 1 100%;color:#d8a13a} /* v86 — la voix ENREGISTRÉE d'une bulle : une ligne compacte sous la réplique, un résumé en tête */ .cse-voix{flex:1 1 100%;display:flex;align-items:center;gap:6px;margin-top:4px} .cse-voix .cse-voix-etat{width:18px;text-align:center;flex:none;cursor:help} .cse-voix .cse-voix-gen{width:auto;padding:0 9px} .cse-voix .cse-mini:disabled{opacity:.4;cursor:not-allowed} .cse-voix-jeu{flex:1 1 180px;min-width:140px;font-size:12px;padding:4px 8px} .cse-voix.busy{opacity:.6} .cse-voix-tete{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);margin:0 0 8px} .cse-voix-tete:empty{display:none} .cse-voix-tete .cse-mini{width:auto;padding:0 9px} .cse-voix-tete .cse-mini:disabled{opacity:.4;cursor:not-allowed}