:root { --bg:#15171c; --panel:#1d2027; --panel2:#191c22; --line:#2c313c; --txt:#e6e8ec; --dim:#9aa2b1; --accent:#6ea8fe; --ok:#3ecf8e; --no:#e5646e; --char:#c9a3ff; --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; --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; --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; --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; --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; --ink:#dde3ec; } * { box-sizing:border-box; } 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; } #st-list { width:250px; flex:none; overflow-y:auto; display:flex; flex-direction:column; gap:6px; } #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(--ok); } .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.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-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:rgba(255,255,255,.05); } .me-cart.cur { background:rgba(255,255,255,.09); color:var(--accent); } .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) ——— */ #csedit { display:none; position:fixed; inset:0; z-index:90; flex-direction:column; background:var(--bg,#0e1015); color:var(--txt); } body.csopen #csedit { display:flex; } body.cs-preview #csedit { display:none; } /* pendant la simulation, le VN prend le dessus */ body.cs-preview #vn-reply { display:none; } /* pas de prompt de réponse en simulation */ /* ——— M3d : ÉDITEUR d'INTRIGUES (réutilise le châssis .cse-* ; + arbre de conditions composite) ——— */ #isedit { display:none; position:fixed; inset:0; z-index:90; flex-direction:column; background:var(--bg,#0e1015); color:var(--txt); } body.isopen #isedit { display:flex; } .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-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-head { display:flex; align-items:center; gap:14px; padding:12px 20px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.2); } .cse-title { font-weight:bold; color:var(--accent); font-size:15px; } .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); } .cse-ai { padding:8px 20px; border-bottom:1px solid var(--line); background:var(--ink); } .cse-ai .st-assist { border-top:none; padding-top:0; margin-top:0; } .cse-main { flex:1; display:flex; min-height:0; } .cse-rail { width:250px; flex:none; overflow-y:auto; padding:14px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:9px; background:rgba(0,0,0,.12); } .cse-new { padding:11px; border-radius:9px; border:1px dashed var(--ok); background:transparent; color:var(--ok); cursor:pointer; font:inherit; font-weight:600; } .cse-new:hover { background:rgba(127,208,165,.1); } .cse-card { padding:11px 13px; border-radius:9px; border:1px solid var(--line); background:var(--panel-2,var(--panel2)); cursor:pointer; transition:.14s; } .cse-card:hover { border-color:var(--accent); } .cse-card.on { border-color:#c9a24a; background:rgba(40,34,18,.4); } .cse-cn { font-weight:600; font-size:14px; margin-bottom:3px; } .cse-cs { font-size:11px; color:var(--dim); } .cse-edit { flex:1; overflow-y:auto; padding:20px 26px 40px; max-width:920px; } .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; } .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-foot { position:sticky; bottom:0; display:flex; gap:10px; padding:14px 0 0; margin-top:6px; background:linear-gradient(180deg, transparent, var(--bg,#0e1015) 40%); } .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; } @media (max-width:760px){ .cse-main { flex-direction:column; } .cse-rail { width:100%; max-height:26vh; flex-direction:row; overflow-x:auto; } .cse-edit { padding:14px; } .st-body { flex-direction:column; } #st-list { width:100%; max-height:30vh; } #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; } /* ═══ B1 : Éditeur Sprites & émotions (plein écran) ═══ */ #spriteedit { display:none; position:fixed; inset:0; z-index:95; flex-direction:column; background:var(--bg,#0e1015); color:var(--txt); } body.spriteedit-open #spriteedit { display:flex; } /* ————— 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; } } .se-head { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.2); } .se-title { font-weight:bold; color:var(--accent); font-size:15px; white-space:nowrap; } .se-head .grow { flex:1; } .se-msg { font-size:12px; color:var(--dim); } .se-msg.ok { color:var(--ok); } .se-msg.err { color:#e8896b; } .se-body { flex:1; display:flex; min-height:0; } .se-side { width:220px; flex-shrink:0; overflow-y:auto; padding:10px; border-right:1px solid var(--line); background:rgba(0,0,0,.12); } .se-sec-t { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); margin:2px 0 8px; } .se-char { display:flex; align-items:center; gap:8px; font-size:13px; padding:6px 8px; border-radius:6px; cursor:pointer; } .se-char:hover { background:rgba(255,255,255,.05); } .se-char.cur { background:rgba(255,255,255,.09); color:var(--accent); } .se-char-n { font-size:10px; color:var(--dim); margin-left:auto; } /* nb de sprites attachés */ .se-main { flex:1; min-width:0; overflow-y:auto; padding:14px 18px; } .se-forms { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:14px; } .se-form { font-size:12px; padding:5px 12px; border:1px solid var(--line); border-radius:16px; background:transparent; color:var(--dim); cursor:pointer; } .se-form.on { border-color:var(--accent); color:var(--accent); background:rgba(255,255,255,.05); } .se-form-add { font-size:12px; padding:5px 10px; border:1px dashed var(--line); border-radius:16px; background:transparent; color:var(--dim); cursor:pointer; } .se-board { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; } .se-slot { border:1px solid var(--line); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:6px; background:rgba(255,255,255,.02); } .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:10px; color:var(--dim); line-height:1.3; min-height:22px; } .se-thumb { position:relative; height:150px; 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; } .se-thumb.empty { cursor:pointer; border:1.5px dashed var(--line); 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 { width:280px; flex-shrink:0; overflow-y:auto; padding:14px; border-left:1px solid var(--line); background:rgba(0,0,0,.12); } .se-big { height:300px; 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; } .se-try label { font-size:12px; color:var(--dim); display:block; margin-bottom:4px; } .se-try input { width:100%; box-sizing:border-box; margin-bottom:8px; } .se-try-res { font-size:12px; } .se-try-res b { color:var(--accent); } @media (max-width:760px){ .se-side { width:130px; } .se-preview { display:none; } } /* --- 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; } /* --- 🔌 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; } @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; } @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; }