/* ===== Campaign Manager VtM — « L'Heure bleue » (2026-07-14) ===== Deux modes complets pilotés par tokens : - NUIT (défaut, mode Live) : bleu minuit, ivoire lunaire, accent ambre sodium. - JOUR (mode Prep) : papier os, encre, accent ambre encré. Le rouge artériel n'est JAMAIS décoratif — réservé à la Soif, aux dégâts et aux échecs bestiaux (--hunger*, --danger, --warn-2). La bascule vit dans la topbar (data-theme sur , persisté en localStorage par core.js). */ /* ---------- fontes locales (static/fonts, pas de CDN) ---------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/inter-v20-latin_latin-ext-300.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-v20-latin_latin-ext-regular.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-v20-latin_latin-ext-500.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-v20-latin_latin-ext-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-v20-latin_latin-ext-700.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/cormorant-garamond-v21-latin_latin-ext-600.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/cormorant-garamond-v21-latin_latin-ext-700.woff2") format("woff2"); } :root { color-scheme: dark; /* contrôles natifs (select, scrollbars, date) en sombre */ /* NUIT — mode Live. Bleu minuit, ivoire lunaire, ambre sodium. */ --bg: #0a0f1c; --bg-2: #0d1424; /* champs, zones en retrait */ --panel: #121c30; --panel-2: #182440; --panel-deep:#0f1728; /* bas des dégradés de cartes/modales */ --border: #253352; /* Texte : ivoire lunaire et gris bleutés, seuils AA large partout */ --text: #eae5d8; --text-dim: #c3bfb2; --text-mut: #8e98ab; /* Accent AMBRE SODIUM — les noms --blood* sont conservés (utilisés partout) mais pointent sur l'ambre ; le vrai rouge sang vit dans --hunger*. */ --blood: #b77e2b; /* ambre profond */ --blood-2: #e1a144; /* liens/accents lumineux (sodium) */ --blood-dim: #6b4c1a; /* ambre sombre (fonds : bulle chat, pills) */ --on-accent: #201405; /* texte posé sur un aplat ambre */ --hunger: #a01c2e; /* dés de Soif uniquement */ --hunger-2: #d43850; --gold: #e1a144; --success: #6faf8a; --danger: #cb4038; /* rouge artériel — sémantique seulement */ /* Tokens sémantiques (U6) : états intermédiaires — plus de hex dispersés */ --ok: #4e9a6e; /* sain / mineur / gain */ --warn: #d98a4e; /* alerte douce */ --warn-2: #c83a30; /* alerte forte (messy critical, brèche sérieuse) */ --info: #5f9ea8; /* accents informatifs (toggle visibilité joueurs) */ --violet: #9b82c9; /* chips de secte (famille de filtre distincte) */ /* Surfaces inversées (toasts, infobulles, pills .tag) */ --inv-bg: #eae5d8; --inv-ink: #1a1f2e; /* Halos d'ambiance (body, topbar/sidebar) */ --bg-image: radial-gradient(1100px 500px at 75% -10%, rgba(225,161,68,.07), transparent 65%), radial-gradient(900px 700px at -10% 110%, rgba(30,45,80,.35), transparent 60%); --chrome-bg: radial-gradient(600px 300px at 0% 0%, rgba(225,161,68,.06), transparent 70%), linear-gradient(180deg, var(--bg-2), #0b101e); --topbar-h: 56px; /* Échelle typographique (6 tailles au lieu de 28) */ --fs-xs: .72rem; --fs-sm: .82rem; --fs-base: .92rem; --fs-md: 1.05rem; --fs-lg: 1.3rem; --fs-xl: 1.7rem; /* Rayons (3 + pilule) et espacement (échelle de 4px) — resserrés (Heure bleue) */ --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; --radius: var(--r-md); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --shadow: 0 8px 30px rgba(2,5,12,.55); --shadow-sm: 0 2px 8px rgba(2,5,12,.35); --glow-blood: 0 0 0 3px rgba(225,161,68,.25); --font: "Inter", "Segoe UI", system-ui, sans-serif; --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; } /* JOUR — mode Prep. Papier os, encre, ambre encré. Mêmes tokens, valeurs claires. */ :root[data-theme="light"] { color-scheme: light; --bg: #efebe1; --bg-2: #e5e0d1; --panel: #f8f5ed; --panel-2: #fffdf6; --panel-deep:#f2eee3; --border: #d5cdb8; --text: #232839; --text-dim: #494e61; --text-mut: #6e7385; --blood: #6e4708; --blood-2: #8a5a0e; --blood-dim: #ead9b5; /* lavis ambre : fonds sous texte encre */ --on-accent: #fff8ec; --hunger: #a62b22; --hunger-2: #c23a30; --gold: #8a5a0e; --success: #3e7a5b; --danger: #a62b22; --ok: #3e7a5b; --warn: #b4622a; --warn-2: #b02a22; --info: #3e7d88; --violet: #6a4f9e; --inv-bg: #232839; --inv-ink: #f5f2e8; --bg-image: radial-gradient(1100px 500px at 75% -10%, rgba(124,36,48,.05), transparent 65%), radial-gradient(900px 700px at -10% 110%, rgba(138,90,14,.06), transparent 60%); --chrome-bg: radial-gradient(600px 300px at 0% 0%, rgba(138,90,14,.05), transparent 70%), linear-gradient(180deg, var(--panel), var(--bg)); --shadow: 0 8px 26px rgba(60,50,30,.14); --shadow-sm: 0 2px 8px rgba(60,50,30,.10); --glow-blood: 0 0 0 3px rgba(138,90,14,.20); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } /* Racine à 15px : toute l'échelle rem (--fs-*) s'aligne sur la densité de la maquette (base ~13.8px au lieu de ~14.7px avec la racine navigateur à 16px). */ html { font-size: 15px; } body { font-family: var(--font); background-color: var(--bg); background-image: var(--bg-image); background-repeat: no-repeat; background-attachment: fixed; /* ancré au viewport : ne se répète pas quand le contenu défile */ color: var(--text); /* même corps que la maquette : Inter 14px, interlignage aéré */ font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color .35s ease, color .35s ease; } a { color: var(--blood-2); } h1,h2,h3,h4 { font-weight: 700; margin: 0 0 .5em; letter-spacing: .3px; color: var(--text); } /* Titrage d'apparat : serif d'époque, nettement plus grand (Cormorant rend petit) */ h1, h2 { font-family: var(--font-display); letter-spacing: .02em; } /* Titres de page : la maquette monte jusqu'à ~52px (« Nuit 23 ») */ h1 { font-size: clamp(2.3rem, 4.5vw, 3.5rem); font-weight: 700; line-height: 1.06; } h2 { font-size: 1.5rem; font-weight: 700; } /* Étiquette « eyebrow » (maquette) : majuscules espacées, ambre */ .eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blood-2); } h3 { font-size: var(--fs-md); } /* Gras nettement plus affirmé que le texte courant (Inter 600 est trop timide) */ b, strong { font-weight: 700; color: var(--text); } button { font-family: inherit; } /* sélection assortie au thème (la sélection bleue de Windows est un éclat lumineux dans un thème sombre) ; les scrollbars sont stylées plus bas. */ ::selection { background: var(--blood-dim); color: var(--text); } /* Focus clavier visible (:focus-visible = clavier seulement, le look souris ne change pas). Les champs de saisie gardent leur propre liseré + glow. */ :focus-visible { outline: 2px solid var(--blood-2); outline-offset: 2px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } /* ---------- icônes SVG (sprite /static/icons.svg, trait monochrome) ---------- */ svg.ic { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -.2em; } .btn svg.ic { width: 16px; height: 16px; } .btn.sm svg.ic, .btn.icon.sm svg.ic { width: 15px; height: 15px; } h2 svg.ic, h3 svg.ic { color: var(--blood-2); opacity: .85; margin-right: 2px; } .caret svg.ic { width: 14px; height: 14px; } .empty .big svg.ic { width: 44px; height: 44px; color: var(--blood-2); opacity: .8; } .vis-badge svg.ic { width: 14px; height: 14px; color: var(--gold); } /* ---------- états de chargement ---------- */ .spinner { display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -.15em; } @keyframes spin { to { transform: rotate(360deg); } } .btn.busy { pointer-events: none; opacity: .75; } .skel { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); } .skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent); animation: shimmer 1.4s infinite; } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .skel-row { height: 58px; margin-bottom: 10px; } /* Réduction des animations demandée par l'OS : tout est coupé (transitions, shimmer, spinner) — l'état reste lisible par le libellé, pas par le mouvement. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------- Layout ---------- */ .app { display: flex; flex-direction: column; min-height: 100vh; } /* barre du haut, pleine largeur : nom de l'app à gauche, actions à droite */ .topbar { height: var(--topbar-h); flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--chrome-bg); position: sticky; top: 0; z-index: 120; } /* ☰ toggle de sidebar (visible desktop ET mobile) collé au bord, puis la chronique */ .topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; } .topbar #nav-toggle { flex: 0 0 auto; color: var(--text-mut); } .topbar #nav-toggle:hover { color: var(--text); } .topbar-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } /* barre de recherche façon champ (maquette) : large, indice clavier à droite */ .searchbtn { display: flex; align-items: center; gap: 8px; min-width: 220px; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-2); color: var(--text-mut); font-size: var(--fs-sm); cursor: pointer; margin-right: 6px; } .searchbtn:hover { border-color: var(--blood-2); color: var(--text-dim); } .searchbtn svg.ic { width: 15px; height: 15px; } .searchbtn kbd { margin-left: auto; } /* sélecteur de chronique dans le bandeau (maquette) : eyebrow « Chronique » + nom en serif — le partagent la même indentation (3px). */ .chron-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-right: 6px; min-width: 0; } .chron-wrap .eyebrow { font-size: .6rem; letter-spacing: .13em; line-height: 1; margin: 0 0 0 3px; } .topbar-chronicle { width: auto; max-width: 240px; padding: 1px 6px 2px 3px; line-height: 1.15; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; } .topbar-chronicle:hover, .topbar-chronicle:focus { border-color: var(--border); background: var(--bg-2); } /* menu déroulant du compte (Profile / Log out) */ .account-menu { position: relative; } .account-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 200; min-width: 168px; padding: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .account-menu.open .account-dropdown { display: block; } .account-dropdown button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 9px 12px; border-radius: var(--r-md); font-size: var(--fs-base); } .account-dropdown button:hover { background: var(--panel); color: var(--text); } .account-dropdown button .ic { width: 18px; text-align: center; } /* page Profile */ .profile-info { display: flex; flex-direction: column; gap: 2px; } .profile-row { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); } .profile-row:last-child { border-bottom: none; } .profile-row .k { flex: 0 0 120px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } .profile-row .v { flex: 1; min-width: 0; } /* page News */ .news-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; } .news-entry { padding: 12px 0; border-bottom: 1px solid var(--border); } .news-entry:last-child { border-bottom: none; } .news-entry-head { display: flex; align-items: baseline; gap: 10px; } .news-entry-title { font-weight: 600; flex: 1; min-width: 0; } .news-entry-date { font-size: var(--fs-sm); flex: 0 0 auto; } .news-entry-actions { display: inline-flex; gap: 4px; } .news-entry-body { margin-top: 6px; font-size: var(--fs-base); } .news-event { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .news-event:last-child { border-bottom: none; } .news-event .ne-ic { flex: 0 0 auto; } .news-event .ne-text { flex: 1; min-width: 0; font-size: var(--fs-base); } .news-event .ne-date { flex: 0 0 auto; font-size: var(--fs-sm); } /* éditeur de jets par défaut (Settings) */ .roll-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .roll-row .roll-label { flex: 0 0 130px; } .roll-row .roll-attr, .roll-row .roll-skill { flex: 1; min-width: 0; } .roll-row .roll-del { flex: 0 0 auto; } /* onglet References (page Rules) : réutilise le style des blocs de l'écran Live */ .ref-tab { max-width: 820px; } .ref-custom-head { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 12px; } #ref-custom-list .acc-item + .acc-item { margin-top: 8px; } #ref-custom-list .acc-body table.live-table { margin-top: 8px; } #ref-custom-list .acc-body blockquote { margin: 8px 0; padding: 6px 12px; border-left: 2px solid var(--gold); color: var(--text-dim); } #ref-custom-list .acc-body hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; } @media (max-width: 860px) { .news-grid { grid-template-columns: 1fr; } } .app-body { display: flex; flex: 1 1 auto; min-height: 0; } .sidebar { width: 230px; flex: 0 0 230px; background: var(--chrome-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); } .app.nav-collapsed .sidebar { display: none; } .chronicle-box { padding: 14px 16px; border-bottom: 1px solid var(--border); } .chronicle-box label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-mut); } .chronicle-row { display: flex; gap: 6px; margin-top: 6px; } .chronicle-row select { flex: 1; } nav.menu { padding: 10px 8px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; } /* lien épinglé tout en bas de la sidebar (Chronicle Parameters) */ nav.menu a.pinned { margin-top: auto; border-top: 1px solid var(--border); border-radius: 0; padding-top: 14px; margin-bottom: 0; } nav.menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md); color: var(--text-mut); text-decoration: none; cursor: pointer; font-size: 13px; font-weight: 500; margin-bottom: 2px; transition: background .15s, color .15s; } nav.menu a .ic { width: 20px; text-align: center; font-size: var(--fs-md); } nav.menu a svg.ic { width: 18px; height: 18px; opacity: .85; } nav.menu a.active svg.ic { opacity: 1; } nav.menu a { border: 1px solid transparent; } nav.menu a:hover { background: var(--panel); color: var(--text); } nav.menu a.active { background: var(--panel-2); border-color: var(--border); color: var(--text); font-weight: 600; } nav.menu a.active .ic { filter: none; color: var(--blood-2); } .main { flex: 1; min-width: 0; padding: 26px 32px 60px; } .main.map-mode { padding: 0; } .map-frame { display: block; width: 100%; height: 100vh; border: 0; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-head .title-wrap h1 { margin: 0; text-wrap: balance; } .page-head .title-wrap .desc { color: var(--text-mut); font-size: var(--fs-base); max-width: 60ch; } /* ---------- utilitaires (U6) : espacement/typo sur les échelles --sp-*/--fs-* ---------- Remplacent les styles inline du JS — les ajustements suivent le thème. */ .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .pad-6 { padding: var(--sp-6); } .fs-xs { font-size: var(--fs-xs); } .fs-sm { font-size: var(--fs-sm); } .fs-base { font-size: var(--fs-base); } /* ---------- Controls ---------- */ input, select, textarea { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-base); outline: none; width: 100%; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { border-color: var(--blood-2); box-shadow: var(--glow-blood); } input::placeholder, textarea::placeholder { color: var(--text-mut); } textarea { resize: vertical; min-height: 90px; line-height: 1.55; } .field { display: block; margin-bottom: 12px; } .field textarea.big-area { min-height: 220px; } /* groupes de compulsions (par Type) */ .comp-group { margin-bottom: 18px; } .comp-group-head { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 1.5px; color: var(--blood-2); font-weight: 600; padding: 4px 2px 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .field > span { display: block; font-size: var(--fs-sm); color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; } /* fiche en lecture : les intitulés des champs Markdown (Background, Appearance…) sont des sous-titres de prose, pas des étiquettes de formulaire — même ambre profond que les sous-titres Markdown (.md-content h3+) */ .field.md-ro > span { color: var(--blood); } .btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); padding: 9px 16px; border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-base); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: background .15s, border-color .15s, transform .08s, box-shadow .15s, filter .15s; } .btn:hover { background: var(--panel); border-color: var(--blood); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--blood-2); border-color: var(--blood-2); color: var(--on-accent); font-weight: 700; box-shadow: 0 4px 16px rgba(225,161,68,.22); } .btn.primary:hover { filter: brightness(1.07); box-shadow: 0 6px 22px rgba(225,161,68,.32); } .btn.ghost { background: transparent; box-shadow: none; } .btn.ghost:hover { box-shadow: none; } .btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } .btn.danger:hover { background: var(--danger); color: #fff8ec; } .btn.sm { padding: 6px 10px; font-size: var(--fs-sm); } .btn.icon { padding: 7px 9px; } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } /* Cartes plates (maquette Heure bleue) : surface unie, bordure fine, ombre légère */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 22px; box-shadow: var(--shadow-sm); position: relative; } .muted { color: var(--text-mut); } /* chiffres tabulaires : tables, pools de dés et trackers restent alignés */ table, .pool-chip, .die { font-variant-numeric: tabular-nums; } .empty { text-align: center; color: var(--text-mut); padding: 50px 20px; } .empty .big { font-size: 2.4rem; opacity: .4; margin-bottom: 8px; } .row { display: flex; gap: 12px; flex-wrap: wrap; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Pastilles-contours (maquette) : transparentes, liseré fin, variantes sémantiques */ .tag { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--border); padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); letter-spacing: .05em; color: var(--text-mut); font-weight: 600; white-space: nowrap; } .tag.warm { color: var(--blood-2); border-color: color-mix(in srgb, var(--blood-2) 45%, transparent); } .tag.hot { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .tag.pub { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); } /* ---------- Modal ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; z-index: 1000; overflow-y: auto; backdrop-filter: blur(2px); } .modal { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--blood-2); border-radius: var(--r-lg); width: 100%; max-width: 560px; box-shadow: 0 20px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; max-height: calc(100vh - 48px); } .modal.wide { max-width: 920px; } .modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-head h2 { margin: 0; font-size: 1.3rem; } .modal-body { padding: 20px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .modal-head, .modal-foot { flex: 0 0 auto; } .modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; align-items: center; } .plot-edit-footer-left { flex: 1; display: flex; gap: 6px; } .x-close { background: none; border: none; color: var(--text-mut); font-size: var(--fs-lg); cursor: pointer; line-height: 1; } .x-close:hover { color: var(--text); } /* ---------- Toast ---------- */ #toasts { position: fixed; bottom: 20px; right: 20px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--inv-bg); color: var(--inv-ink); border: none; border-left: 4px solid var(--blood-2); font-weight: 500; padding: 11px 16px; border-radius: var(--r-md); box-shadow: var(--shadow); animation: slidein .25s; max-width: 340px; } .toast.ok { border-left-color: var(--success); } .toast.err { border-left-color: var(--danger); } @keyframes slidein { from { transform: translateX(40px); opacity: 0; } } /* ---------- Lists / cards generic ---------- */ .list-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; } .list-item:hover { border-color: var(--blood-dim); } .list-item .grow { flex: 1; min-width: 0; } .list-item .name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; } .list-item .sub { color: var(--text-mut); font-size: var(--fs-base); } /* avatars / portraits — médaillons circulaires cerclés de la couleur du clan (maquette Heure bleue). --clan est posé en inline par le JS quand il est connu. */ .avatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--bg-2); border: 2px solid var(--clan, var(--border)); } /* dans les cadres rectangulaires (éditeur de portrait), l'avatar reste carré */ .portrait-box .avatar { border-radius: var(--r-md); border-width: 1px; } /* avatar par défaut (aucune image) : logo de l'app, contenu et atténué */ .avatar-ph { object-fit: contain; padding: 5px; opacity: .6; } /* médaillon monogramme (aucun portrait) : initiales serif sur lavis de clan */ .medal { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--clan, var(--blood-2)); background: color-mix(in srgb, var(--clan, var(--blood-2)) 30%, var(--bg)); font-family: var(--font-display); font-weight: 700; color: var(--text); letter-spacing: .02em; user-select: none; } /* pastille de clan (têtes de groupes de l'arborescence PNJ) */ .clan-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--clan, var(--border)); display: inline-block; } .list-filter { margin-bottom: 14px; display: flex; gap: 10px; flex-wrap: wrap; } .list-filter input { flex: 1; min-width: 200px; max-width: 360px; } .list-filter select { flex: 0 0 auto; min-width: 140px; } /* Filtres de la page Characters : compacts ; la recherche garde une largeur utilisable et les selects passent à la ligne si l'espace manque. */ .list-filter.chars-filter { flex-wrap: wrap; } .list-filter.chars-filter input { flex: 1 1 220px; width: auto; min-width: 200px; max-width: 360px; } .list-filter.chars-filter select { flex: 0 0 auto; width: auto; min-width: 130px; } /* Filtre Powers : recherche + livre sur la même ligne. */ /* Filtre Locations : tous sur une ligne, proportionnel. */ .list-filter.loc-filter { flex-wrap: nowrap; } .list-filter.loc-filter input { flex: 2 1 0; min-width: 0; max-width: none; } .list-filter.loc-filter select { flex: 1 1 0; min-width: 0; } .list-filter.pow-filterbar { flex-wrap: wrap; } .list-filter.pow-filterbar input { max-width: none; min-width: 220px; } .list-filter.pow-filterbar select { flex: 0 0 auto; width: auto; min-width: 150px; } .pow-sabbat-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-dim); cursor: pointer; } .list-filter.pow-filterbar .pow-sabbat-toggle input { flex: 0 0 auto; width: auto; min-width: 0; max-width: none; margin: 0; } /* case à cocher en ligne dans les fiches (ex. Sabbat only) */ .cb-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; cursor: pointer; } .cb-row input { width: auto; margin: 0; flex: 0 0 auto; } .portrait-row { display: flex; gap: 16px; align-items: center; } .portrait-box { width: 110px; height: 110px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-2); overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .portrait-box img { width: 100%; height: 100%; object-fit: cover; } .portrait-box .ph { font-size: 2.4rem; opacity: .4; } .portrait-actions { display: flex; flex-direction: column; gap: 8px; } /* ============ DÉS ============ */ .dice-controls { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; } /* lanceurs multiples */ .rollers { display: flex; flex-direction: column; gap: 14px; max-width: 880px; margin-bottom: 16px; } .roller-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; } .roller-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .roller-head .roller-label { flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; font-weight: 600; font-size: var(--fs-md); padding: 6px 8px; border-radius: var(--r-md); } .roller-head .roller-label:hover, .roller-head .roller-label:focus { border-color: var(--border); background: var(--bg-2); } .roller-head-actions { display: flex; gap: 6px; flex: 0 0 auto; } .roller-card .dice-controls .r-weapon { min-width: 150px; height: 38px; } .dice-damage { margin-top: 8px; font-size: var(--fs-base); color: var(--text); } .dice-damage.miss { font-size: var(--fs-base); } .dice-damage .vs-kindred { display: block; margin-top: 2px; color: var(--blood-2); } /* table d'armes (modale Weapons) */ .weapons-table { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; } .wrow { display: grid; grid-template-columns: 1.5fr 1fr 64px 1.1fr 1.7fr 34px; gap: 8px; align-items: center; } .wrow.whead { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--text-mut); } .wrow.whead span { padding: 0 4px; } .wrow input, .wrow select { width: 100%; } .wrow .w-del { padding: 6px 8px; } /* tableau des types de relations (Chronicle Parameters) */ .reltype-row { display: grid; grid-template-columns: 1.6fr 56px 1fr 70px 34px; gap: 8px; align-items: center; margin-bottom: 6px; } .reltype-row.reltype-head { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--text-mut); margin-bottom: 8px; } .reltype-row input, .reltype-row select { width: 100%; } .reltype-row input.rt-color { padding: 2px; height: 34px; cursor: pointer; } .reltype-row .rt-prev { display: flex; align-items: center; } .reltype-row .rt-del { padding: 6px 8px; } /* page Powers (disciplines & pouvoirs) */ .disc-list { display: flex; flex-direction: column; gap: 14px; } .disc-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .disc-card-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .disc-img { width: 54px; height: 54px; flex: 0 0 auto; border-radius: var(--r-md); overflow: hidden; cursor: pointer; background: var(--bg-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .disc-img img { width: 100%; height: 100%; object-fit: cover; } .disc-img .ph { font-size: var(--fs-lg); opacity: .6; } .disc-head-main { flex: 1; min-width: 0; } .disc-head-main .disc-title { margin: 0; font-size: var(--fs-md); } .disc-head-main .disc-title .disc-nick { font-weight: 400; font-size: var(--fs-base); color: var(--text-mut); } .disc-head-main .disc-sub { font-size: var(--fs-sm); color: var(--text-mut); text-transform: uppercase; letter-spacing: 1px; } .disc-head-actions { display: flex; gap: 6px; flex: 0 0 auto; } .pow-table { padding: 8px 14px 12px; } .pow-list { display: flex; flex-direction: column; } .pow-line { display: flex; align-items: flex-start; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--border); } .pow-line:last-child { border-bottom: none; } .pow-line .pw-lvl { flex: 0 0 26px; font-size: var(--fs-xs); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; padding-top: 2px; } .pow-line .pw-title { flex: 0 0 auto; font-weight: 600; } .pow-line .pw-brief { flex: 1 1 auto; min-width: 0; color: var(--text-mut); font-size: var(--fs-sm); white-space: normal; line-height: 1.45; } .pow-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; } /* rappel cover (tir) */ .cover-note p { margin: 6px 0; } .cover-note .cover-static { background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--r-md); padding: 8px 12px; margin-top: 10px; } .cover-table { width: 100%; border-collapse: collapse; margin: 14px 0; } .cover-table th, .cover-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); } .cover-table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--text-mut); } .cover-table .cover-mod { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; } /* modale : jet depuis une fiche */ .srm-combo { position: relative; } .srm-combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); max-height: 240px; overflow-y: auto; } .srm-combo-item { padding: 8px 11px; cursor: pointer; font-size: var(--fs-base); } .srm-combo-item:hover { background: var(--blood-dim); } /* items avec portrait (sélecteur de PNJ) : une ligne lisible, nom + sous-titre tronqué */ .srm-combo-item.with-av { display: flex; align-items: center; gap: 9px; padding: 7px 11px; } .srm-combo-item .pill-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .srm-combo-item .pill-avatar.ph { background: var(--panel); border: 1px solid var(--border); } .srm-combo-item .ci-nm { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .srm-combo-item .ci-sub { margin-left: auto; padding-left: 10px; flex: 0 0 auto; font-size: var(--fs-sm); } .srm-combo-empty { padding: 8px 11px; color: var(--text-mut); font-size: var(--fs-base); } /* modale « Pinned NPCs » : de la place sous le champ pour que la liste de résultats s'affiche en entier au lieu d'être coincée dans un corps minuscule */ .pins-modal { min-height: 300px; } .srm-traits { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; } .srm-traits select { flex: 1; min-width: 130px; } .sr-plus { color: var(--text-mut); font-weight: 700; } .srm-pool { font-size: var(--fs-md); } .srm-pool #srm-pool { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; } .dice-counter { text-align: center; } .dice-counter .lab { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; color: var(--text-dim); } .dice-counter .stepper { display: flex; align-items: center; gap: 10px; } .dice-counter .stepper button { width: 36px; height: 36px; border-radius: var(--r-md); font-size: var(--fs-lg); background: var(--panel-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; } .dice-counter .stepper .val { font-size: var(--fs-xl); font-weight: 700; width: 42px; } .dice-counter.blood .val { color: var(--blood-2); } .dice-tray { margin: 40px 0 28px; min-height: 90px; display: flex; flex-wrap: wrap; gap: 30px; padding: 12px 8px; } /* Forme losange (dé à 10 faces) : le dé est tourné à 45°, le symbole est remis droit. */ .die { width: 56px; height: 56px; border-radius: var(--r-md); position: relative; border: 2px solid; user-select: none; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; margin: 6px; } .die .face { transform: rotate(-45deg); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .die .sym { width: 28px; height: 34px; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; } .die .sym-success { -webkit-mask-image: url(/assets/dice/success.svg); mask-image: url(/assets/dice/success.svg); } .die .sym-crit { -webkit-mask-image: url(/assets/dice/crit.svg); mask-image: url(/assets/dice/crit.svg); } .die .sym-messy-crit { -webkit-mask-image: url(/assets/dice/messy-crit.svg); mask-image: url(/assets/dice/messy-crit.svg); } .die .sym-bestial { -webkit-mask-image: url(/assets/dice/bestial.svg); mask-image: url(/assets/dice/bestial.svg); width: 34px; height: 34px; } .die.black { background: var(--panel-2); border-color: var(--border); color: var(--text); } :root[data-theme="light"] .die.black { background: #2a3350; border-color: #3c466b; color: #eae5d8; } .die.blood { background: #2a0c12; border-color: var(--hunger); color: #ffd9de; } .die.r-success { box-shadow: 0 0 0 2px var(--success), 0 0 14px rgba(74,157,91,.5); } .die.r-crit { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 16px rgba(225,161,68,.55); } .die.r-fail { opacity: .6; } .die.r-bestial { border-color: var(--hunger-2); box-shadow: 0 0 16px rgba(200,37,59,.7); color: #fff; } .die.selectable { cursor: pointer; } .die.selected { outline: 3px solid var(--gold); outline-offset: 2px; } @keyframes tumble { 0% { transform: rotate(45deg) scale(.6); opacity: 0; } 60% { transform: rotate(425deg) scale(1.12); } 100% { transform: rotate(405deg) scale(1); opacity: 1; } } .die.rolling { animation: tumble .55s cubic-bezier(.2,.8,.3,1.2); } .dice-result { padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--panel); margin-top: 18px; } .dice-result .verdict { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; } .dice-result .verdict.messy { color: var(--blood-2); } .dice-result .verdict.crit { color: var(--gold); } .dice-result .verdict.bestial { color: var(--blood-2); } .dice-result .verdict.success { color: var(--success); } .dice-result .verdict.fail { color: var(--text-dim); } .dice-result .detail { color: var(--text-dim); margin-top: 4px; } .wp-note { font-size: var(--fs-sm); color: var(--text-mut); margin-top: 10px; } .legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; font-size: var(--fs-sm); color: var(--text-dim); } .legend span::before { content: "■"; margin-right: 5px; } .legend .l-suc::before { color: var(--success); } .legend .l-crit::before { color: var(--gold); } .legend .l-bes::before { color: var(--blood-2); } .legend .l-fail::before { color: var(--text-mut); } /* ============ TIMELINE SESSIONS ============ */ /* Timeline éditoriale (maquette) : titres serif posés sur le fond, sans encadrés */ .timeline { position: relative; margin-left: 14px; padding-left: 26px; } .timeline::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--border); } .tl-item { position: relative; margin-bottom: 34px; } /* marqueur losange (dé à 10 faces) de la maquette */ .tl-item::before { content: ""; position: absolute; left: -31px; top: 6px; width: 9px; height: 9px; transform: rotate(45deg); background: var(--bg); border: 1.5px solid var(--blood-2); } .tl-date { display: inline-block; font-size: var(--fs-xs); color: var(--text-mut); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; } .tl-card { background: transparent; border: none; padding: 0; margin-top: 2px; } .tl-card h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; } .tl-tags { display: flex; gap: 7px; align-items: center; margin: 0 0 10px; } .tl-body { white-space: pre-wrap; color: var(--text-dim); max-width: 72ch; } .tl-prep { margin: 4px 0; } .tl-prep summary { color: var(--text-mut); cursor: pointer; font-size: var(--fs-sm); } .tl-actions { display: flex; gap: 8px; margin-top: 12px; opacity: 0; transition: opacity .12s; } .tl-item:hover .tl-actions, .tl-item:focus-within .tl-actions { opacity: 1; } @media (pointer: coarse) { .tl-actions { opacity: 1; } } /* ============ CALENDRIERS SESSIONS (trois mois côte à côte) ============ */ .cal-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .cal-nav .muted { margin-left: 6px; } .cal3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; } @media (max-width: 1080px) { .cal3 { grid-template-columns: repeat(2, 1fr); } .cal3 .mini-cal:last-child { display: none; } } /* 2 mois suffisent en étroit */ @media (max-width: 700px) { .cal3 { grid-template-columns: 1fr; } .cal3 .mini-cal:last-child { display: block; } } /* empilés : on remontre les 3 */ .mini-cal { padding: 14px 16px 16px; } .mc-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; text-align: center; margin-bottom: 10px; } .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .mc-head { margin-bottom: 4px; } .mc-head span { text-align: center; font-size: var(--fs-xs); color: var(--text-mut); font-weight: 600; text-transform: uppercase; } .cal-day { aspect-ratio: 1; min-width: 0; border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--text-dim); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; display: grid; place-items: center; position: relative; } .cal-day:hover { border-color: var(--border); color: var(--text); } .cal-day.today { border-color: var(--text-mut); } /* date à session : disque ambre plein (passée), anneau (à venir = en préparation) */ .cal-day.has-sess { background: var(--blood-2); color: var(--on-accent); font-weight: 700; } .cal-day.has-sess.future { background: color-mix(in srgb, var(--blood-2) 18%, transparent); border-color: var(--blood-2); color: var(--text); } .cal-day.sel { outline: 2px solid var(--blood-2); outline-offset: 1px; } .sess-hint { margin: 4px 0 0; } /* ============ FEUILLE DE PERSONNAGE ============ */ .sheet { display: flex; flex-direction: column; gap: 20px; } .sheet-section { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; margin-bottom: 14px; } .sheet-section > h3, .sheet-section > .rel-sec-head > h3 { color: var(--blood-2); text-transform: uppercase; letter-spacing: 1.5px; font-size: var(--fs-base); border-bottom: 1px solid var(--border); padding-bottom: 8px; } /* le header Relationships porte lui-même la bordure quand il contient le bouton */ .rel-sec-head { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 8px; } .rel-sec-head > h3 { border-bottom: none !important; padding-bottom: 0 !important; } .trait-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 26px; } .trait-cols h4 { color: var(--gold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .trait { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; } .trait .tname { font-size: var(--fs-base); } .trait .tname .spec { color: var(--gold); font-size: var(--fs-sm); font-style: italic; } .dots { display: inline-flex; gap: 4px; } .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--text-mut); background: transparent; } .dot.filled { background: var(--blood-2); border-color: var(--blood-2); } .dots.editable .dot { cursor: pointer; } .dots.editable .dot:hover { border-color: var(--blood-2); } .track { display: inline-flex; gap: 4px; flex-wrap: wrap; } .box { width: 18px; height: 18px; border: 1.5px solid var(--text-mut); border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; } .box.superficial { color: var(--gold); border-color: var(--gold); } /* dégât aggravé = rouge sémantique (pas l'accent) */ .box.aggravated { background: var(--hunger); border-color: var(--hunger-2); color: #ffd9de; } .disc-item, .adv-item { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } /* section Relationships (fiche) — lecture seule, reflète la carte */ .sheet-section .sheet-hint { color: var(--text-mut); font-size: var(--fs-sm); margin: 0 0 8px; } .rel-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rel-sec-head h3 { margin: 0; } .rel-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); } .rel-row:last-child { border-bottom: none; } .rel-row .rel-arrow { flex: 0 0 auto; color: var(--blood-2); width: 16px; text-align: center; } .rel-row .rel-label { flex: 0 0 auto; color: var(--text-dim); font-size: var(--fs-base); text-transform: uppercase; letter-spacing: .04em; } .rel-row .rel-target { flex: 1; min-width: 0; } .disc-item .dname { width: 160px; flex: 0 0 auto; } .disc-powers { width: 100%; } /* une discipline = un bloc (ligne + ses pouvoirs dessous), séparé du suivant */ .disc-block { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .disc-block:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 4px; } .disc-block .disc-item { margin-bottom: 0; } /* pouvoirs sous la discipline : décalés sous le nom, jamais à côté */ .disc-block .disc-powers-pick, .disc-block .disc-powers-ro { margin: 8px 0 0 12px; } .disc-powers-pick { min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .disc-powers-ro .power-link { padding: 1px 0; } .power-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2px 4px 2px 10px; font-size: var(--fs-sm); } .power-chip .chip-x { background: none; border: none; color: var(--text-mut); cursor: pointer; font-size: var(--fs-sm); line-height: 1; padding: 0 4px; } .power-chip .chip-x:hover { color: var(--blood-2); } .power-chip .chip-label { cursor: pointer; } .power-chip .chip-label:hover { text-decoration: underline; } .disc-powers-pick .power-add { width: auto; max-width: 220px; flex: 0 0 auto; font-size: var(--fs-base); padding: 6px 8px; } .disc-powers-pick .small { font-size: var(--fs-sm); } /* marqueur Fortitude à côté du maximum de Santé (pouvoir Resilience) */ .fort-mark { display: inline-flex; align-items: center; margin-left: 6px; color: var(--gold); vertical-align: middle; cursor: help; } .fort-mark svg.ic { width: 15px; height: 15px; } /* Rouse Check (feuille de personnage) */ .rouse-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .rouse-res { font-size: var(--fs-base); } .rouse-res.ok { color: var(--success); } .rouse-res.fail { color: var(--blood-2); } /* pouvoirs cliquables en lecture seule */ .disc-powers-ro { color: var(--text-mut); } .power-link { color: var(--blood-2); cursor: pointer; } .power-link:hover { text-decoration: underline; } /* modale de détail d'un pouvoir */ .pd-row { margin-bottom: 14px; } .pd-row .pd-label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin-bottom: 3px; } .pd-row .pd-val { color: var(--text); line-height: 1.55; } .subadd { margin-top: 6px; } /* Identité : 3 colonnes (maquette), 2 sur tablette, 1 sur mobile */ /* fiche en lecture seule : la valeur s'affiche au lieu d'un champ grisé */ .field-ro .field-val { font-size: var(--fs-base); color: var(--text); padding: 2px 0 1px; border-bottom: 1px solid var(--border); min-height: 1.5em; } /* fiche PNJ autonome : le nom se cale contre le portrait, pas contre le bord (la règle globale .page-head écarte titre et actions) */ .npc-head { justify-content: flex-start; } .identity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; } @media (max-width: 900px) { .identity-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .identity-grid { grid-template-columns: 1fr; } } /* ============ ARBORESCENCE PNJ ============ */ .tree .clan-group { margin-bottom: 6px; } .tree .clan-head { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 10px; border-radius: var(--r-md); font-weight: 600; } .tree .clan-head:hover { background: var(--panel); } .tree .clan-head .caret { transition: transform .15s; color: var(--text-mut); } .tree .clan-head.collapsed .caret { transform: rotate(-90deg); } .tree .clan-head .count { background: var(--blood-2); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 700; border-radius: var(--r-pill); padding: 1px 8px; } .tree .clan-children { margin-left: 26px; border-left: 1px solid var(--border); padding-left: 12px; } .tree .sect-sub { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); } .tree .sect-sub .count { color: var(--text-mut); font-size: var(--fs-xs); letter-spacing: normal; } /* ============ RELATIONSHIPS ============ */ .rel-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .rel-form .field { flex: 1; min-width: 150px; } .rel-form select, .rel-form input { width: 100%; } .rel-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 8px; } .rel-row .rel-lbl { color: var(--gold); font-size: var(--fs-base); } /* graphe de relations (Cytoscape) */ .graph-filters { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .graph-filters label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-dim); } .graph-filters select { width: auto; min-width: 150px; } .cy-graph { width: 100%; height: 72vh; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); } .graph-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-sm); } .graph-legend .lg-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .graph-legend .lg-group b { color: var(--text-dim); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 1px; margin-right: 2px; } .graph-legend .lg-item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); } .lg-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .lg-line { width: 20px; display: inline-block; flex: 0 0 auto; } /* sous-élément de menu (ex : Relationships sous Relationships Map) */ nav.menu a.sub { padding-left: 30px; font-size: var(--fs-base); } nav.menu a.sub .ic { font-size: var(--fs-base); opacity: .8; } /* sélecteur de membres (factions / coteries) */ .members-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); background: var(--panel); /* sous-encadré volcanic : le texte clair de l'îlot reste lisible */ border-radius: var(--r-md); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .mem-item { display: flex; align-items: center; gap: 9px; padding: 5px 7px; border-radius: var(--r-sm); cursor: pointer; } .mem-item:hover { background: var(--panel-2); } .mem-item input { width: auto; margin: 0; } .mem-item .muted { font-size: var(--fs-sm); } /* ============ LIEUX ============ */ /* accordéon Locations / Factions */ .acc-item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 8px; overflow: hidden; } .acc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; } .acc-head:hover { background: var(--panel-2); } .acc-head .caret { color: var(--text-mut); transition: transform .15s; flex: 0 0 auto; } .acc-item.open .acc-head .caret { transform: rotate(90deg); } .acc-head .acc-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-head .acc-meta { color: var(--text-mut); font-size: var(--fs-sm); flex: 0 0 auto; } .acc-head .acc-actions { display: flex; gap: 6px; flex: 0 0 auto; opacity: 0; transition: opacity .12s; } .acc-item:hover .acc-head .acc-actions, .acc-item.open .acc-head .acc-actions { opacity: 1; } .acc-body { display: none; padding: 0 16px 16px; } .acc-item.open .acc-body { display: block; } .acc-body .loc-photos { margin: 0 -16px 0; border-top: 1px solid var(--border); } .acc-body .desc { color: var(--text-dim); white-space: pre-wrap; margin: 12px 0 0; } .acc-body .desc.md { white-space: normal; } .acc-body .acc-notes { margin: 12px 0 0; padding: 10px 12px; border-left: 2px solid var(--gold); background: var(--bg-2); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--text-mut); font-size: var(--fs-base); font-style: italic; white-space: pre-wrap; } .acc-body .acc-notes .acc-notes-label { display: block; font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: var(--fs-xs); color: var(--gold); margin-bottom: 4px; } .acc-body .acc-notes p { margin: 0 0 .5em; } .acc-body .acc-notes :last-child { margin-bottom: 0; } .loc-photos { display: flex; gap: 6px; overflow-x: auto; padding: 10px; background: var(--bg-2); } .loc-photos img { height: 110px; border-radius: var(--r-sm); object-fit: cover; cursor: pointer; } .loc-photo-wrap { position: relative; flex: 0 0 auto; } .loc-photo-wrap .del { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.7); border: none; color: #fff; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; } /* galerie d'images dans la modale de lieu */ .loc-photos-edit { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .loc-photos-edit .loc-photo-wrap img { height: 90px; border-radius: var(--r-sm); object-fit: cover; } /* ============ RÈGLES (CHAT) ============ */ .chat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 0; height: calc(100vh - 130px); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .chat-list { background: var(--bg-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .chat-list .head { padding: 12px; border-bottom: 1px solid var(--border); } .conv { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); display: flex; gap: 6px; align-items: center; } .conv:hover { background: var(--panel); } .conv.active { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--blood-2); } .conv .ct { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-base); } .conv .del, .conv .ren { opacity: 0; cursor: pointer; color: var(--text-mut); } .conv:hover .del, .conv:hover .ren { opacity: 1; } .conv .ren:hover { color: var(--gold); } .conv .del:hover { color: var(--blood-2); } .chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; } .msg { max-width: 80%; padding: 12px 16px; border-radius: var(--r-lg); white-space: pre-wrap; line-height: 1.55; } .msg.user { align-self: flex-end; background: var(--blood-dim); border: 1px solid var(--blood); } .msg.assistant { align-self: flex-start; background: var(--panel); border: 1px solid var(--border); } .msg.assistant h1,.msg.assistant h2,.msg.assistant h3 { font-size: var(--fs-md); color: var(--gold); } /* Prose : texte courant en Inter Light. Le gras (700) tranche alors nettement, sans recourir à la couleur. Limité aux blocs de lecture — l'interface (étiquettes, boutons, chiffres) reste en 400, trop fragile en Light à 14px. */ .md, .md-content { font-weight: 300; } .md { white-space: normal; } .md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; } .md p { margin: 0 0 .6em; } .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: .7em 0 .3em; font-weight: 700; line-height: 1.25; } .md h1, .md h2 { font-size: var(--fs-lg); color: var(--gold); } /* titres — ambre clair */ .md h3, .md h4, .md h5, .md h6 { font-size: var(--fs-md); color: var(--blood); } /* sous-titres — ambre profond */ .md ul, .md ol { margin: .4em 0 .6em; padding-left: 1.4em; } .md li { margin: .2em 0; } .md code { background: var(--bg-2); padding: 1px 5px; border-radius: var(--r-sm); font-size: .88em; } .md pre { background: var(--bg-2); padding: 10px 12px; border-radius: var(--r-md); overflow-x: auto; margin: .5em 0; } .md pre code { background: none; padding: 0; } .md a { color: var(--blood-2); } .md strong { color: var(--text); } .chat-input { border-top: 1px solid var(--border); padding: 12px; display: flex; gap: 10px; background: var(--bg-2); } .chat-input textarea { min-height: 46px; max-height: 160px; } .pdf-bar { padding: 8px 12px; border-top: 1px solid var(--border); background: var(--bg-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); } .pdf-chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 10px; display: inline-flex; gap: 6px; align-items: center; } .pdf-chip .del { cursor: pointer; color: var(--text-mut); } .typing { color: var(--text-mut); font-style: italic; align-self: flex-start; } .books-bar { padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); } .book-chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 10px; display: inline-flex; gap: 6px; align-items: center; } .book-opt { display: grid; grid-template-columns: 1fr 84px 70px; gap: 8px; align-items: center; padding: 7px 4px; cursor: pointer; } .book-opt .bt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .book-opt input { width: auto; margin: 0 auto; flex: 0 0 auto; } .book-opt.all { border-bottom: 1px solid var(--border); margin-bottom: 6px; padding-bottom: 10px; } .book-head { display: grid; grid-template-columns: 1fr 84px 70px; gap: 8px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--text-mut); padding: 0 4px 4px; } .book-head span { text-align: center; } .book-head span:first-child { text-align: left; } .book-list { max-height: 320px; overflow-y: auto; } .book-list.disabled { opacity: .45; pointer-events: none; } /* citations NotebookLM [N] survolables */ .cites { font-size: .72em; color: var(--blood-2); white-space: nowrap; } .cite { cursor: help; padding: 0 1px; border-bottom: 1px dotted var(--blood-2); } .cite:hover { color: var(--gold); border-bottom-color: var(--gold); } .cite.no-ref { cursor: default; color: var(--text-mut); border-bottom: none; } #cite-tip { position: fixed; z-index: 9999; display: none; background: var(--inv-bg); color: var(--inv-ink); border: 1px solid var(--blood); border-radius: var(--r-md); padding: 9px 12px; font-size: var(--fs-sm); line-height: 1.45; box-shadow: var(--shadow); pointer-events: none; } #cite-tip.show { display: block; } /* ---------- character cards (grille 3 colonnes) ---------- */ .char-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .char-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 11px; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); } .char-card:hover { border-color: var(--blood-dim); } .char-card .grow { flex: 1; min-width: 0; cursor: pointer; } .char-card .name { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.2; font-weight: 600; display: flex; align-items: center; min-width: 0; } .char-card .name .nm-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .char-card .concept { color: var(--text-mut); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .char-card .avatar:not(.avatar-ph) { cursor: zoom-in; } /* actions en surimpression (n'amputent pas la largeur du nom hors survol) */ .char-card .acts { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: flex; gap: 4px; opacity: 0; transition: opacity .12s; padding-left: 10px; background: linear-gradient(90deg, transparent, var(--panel) 28%); } .char-card:hover .acts { opacity: 1; } .char-card .acts .btn { padding: 4px 8px; } /* popup plein écran du portrait */ /* au-dessus des modales (z 1000) : le zoom du portrait doit passer devant la fiche */ .img-popup { position: fixed; inset: 0; z-index: 1250; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 4vh 4vw; } .img-popup img { max-width: 92vw; max-height: 92vh; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow); } .img-popup-ph { text-align: center; color: var(--text-mut); } .img-popup-ph span { font-size: 5rem; display: block; opacity: .5; } /* toggle type de personnage (PC / NPC) */ .char-type { margin-bottom: 4px; } .char-type .lab { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--text-mut); margin-bottom: 5px; } .seg-group { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .seg { background: var(--bg-2); color: var(--text-dim); border: 0; padding: 7px 12px; cursor: pointer; font-size: var(--fs-base); } .seg + .seg { border-left: 1px solid var(--border); } .seg:hover { color: var(--text); } .seg.active { background: var(--blood-2); color: var(--on-accent); font-weight: 600; } /* ---------- combat (assistant guidé) ---------- */ .combat-host { } .combat-card { padding: 0; } .combat-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-mut); margin-bottom: 14px; } .combat-bc .bc { cursor: pointer; } .combat-bc .bc:hover { color: var(--text-dim); text-decoration: underline; } .combat-bc .bc.cur { color: var(--gold); cursor: default; text-decoration: none; } .combat-bc .bc-sep { opacity: .5; } .combat-title { font-size: var(--fs-lg); margin-bottom: 10px; } .combat-intro { color: var(--text-dim); margin: 0 0 16px; } .combat-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .combat-opt { text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 16px; cursor: pointer; color: var(--text); display: flex; flex-direction: column; gap: 3px; transition: border-color .12s, background .12s; } .combat-opt:hover { border-color: var(--blood-2); background: var(--panel-2); } .combat-opt .lab { font-weight: 600; } .combat-opt .hint { font-size: var(--fs-sm); color: var(--text-mut); } .combat-result { background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--blood); border-radius: var(--r-md); padding: 14px 18px; margin-top: 6px; } .combat-result ul { margin: 8px 0 0; padding-left: 20px; } .combat-result li { margin: 5px 0; } .combat-pool { display: inline-block; font-size: var(--fs-md); font-weight: 700; color: var(--gold); letter-spacing: .4px; margin-bottom: 8px; } .combat-actions { display: flex; gap: 10px; margin-top: 20px; } .combat-steps ol { margin: 0; padding-left: 22px; } .combat-steps li { margin: 6px 0; } .combat-example { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 16px; margin-top: 14px; } .combat-example .ex-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 6px; } .combat-example ul { list-style: none; margin: 8px 0; padding: 0; } .combat-example ul li { font-variant-numeric: tabular-nums; padding: 3px 0; } .combat-example p { margin: 6px 0; } /* ============================================================ PLOTS (KANBAN) */ .kanban { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding: 4px 4px 20px; min-height: 60vh; } /* colonnes transparentes (maquette) : l'en-tête et les cartes posés sur le fond */ .kanban-col { flex: 0 0 280px; background: transparent; border: none; display: flex; flex-direction: column; max-height: calc(100vh - 160px); } .kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 9px; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .kanban-col-title { flex: 1; font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--text-mut); } .kanban-col-count { font-size: var(--fs-sm); color: var(--text-mut); font-weight: 600; padding: 1px 4px; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; } .kanban-cards { flex: 1; overflow-y: auto; padding: 10px 2px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; transition: background .15s; border-radius: var(--r-md); } .kanban-cards.drag-over { background: color-mix(in srgb, var(--blood-2) 10%, transparent); } .plot-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; cursor: grab; transition: box-shadow .15s, opacity .15s, border-color .15s; } .plot-card:hover { border-color: var(--blood-2); box-shadow: var(--shadow-sm); } .plot-card.dragging { opacity: .4; cursor: grabbing; } .plot-card-head { display: flex; align-items: flex-start; gap: 8px; } .plot-card-title { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--text); line-height: 1.25; } .plot-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; flex: 0 0 auto; } .plot-card:hover .plot-card-actions { opacity: 1; } .plot-card-desc { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 6px; line-height: 1.4; } .plot-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; } .plot-card-foot .plot-card-npcs { margin-top: 0; flex: 1; min-width: 0; } .plot-card-npcs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } /* jauge de tension (0-5) — maquette Heure bleue : ambre, rouge en crise (5) */ .tension { display: inline-flex; gap: 3px; align-items: center; flex: 0 0 auto; padding: 4px 0; } .tension i { width: 14px; height: 4px; border-radius: 2px; background: var(--border); display: inline-block; } .tension i.on { background: var(--blood-2); } .tension.max i.on { background: var(--danger); } .tension.editable { cursor: pointer; padding: 6px 0; } .tension.editable i { width: 22px; height: 7px; } .tension.editable i:hover { outline: 1px solid var(--blood-2); outline-offset: 1px; } /* Chips neutres (maquette) : les personnages/factions liés sont des références, pas des alertes */ .npc-pill { font-size: var(--fs-xs); background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; } .faction-pill { font-size: var(--fs-xs); background: var(--bg-2); border: 1px dashed var(--border); color: var(--text-dim); border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; } /* ---- Markdown content ---- */ .md-content { line-height: 1.65; color: var(--text); } .md-content h1,.md-content h2,.md-content h3,.md-content h4,.md-content h5,.md-content h6 { margin: 1em 0 .4em; font-weight: 700; line-height: 1.25; } .md-content h1,.md-content h2 { color: var(--gold); } /* titres — ambre clair */ .md-content h3,.md-content h4,.md-content h5,.md-content h6 { color: var(--blood); } /* sous-titres — ambre profond */ .md-content h1 { font-size: var(--fs-lg); } .md-content h2 { font-size: var(--fs-md); } .md-content h3,.md-content h4,.md-content h5,.md-content h6 { font-size: var(--fs-md); } .md-content p { margin: .5em 0; } .md-content ul,.md-content ol { padding-left: 1.4em; margin: .4em 0; } .md-content li { margin: .2em 0; } .md-content blockquote { border-left: 3px solid var(--blood-dim); margin: .6em 0; padding: .2em .8em; color: var(--text-dim); font-style: italic; } .md-content code { background: var(--panel-2); border-radius: var(--r-sm); padding: 1px 5px; font-size: .88em; } .md-content pre { background: var(--panel-2); border-radius: var(--r-sm); padding: 10px 14px; overflow-x: auto; } .md-content pre code { background: none; padding: 0; } .md-content hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; } .md-content strong { color: var(--text); } /* ---- Description textarea tabs ---- */ /* sélecteur multi-entités (combo + pastilles) — remplace les listes de cases */ .token-picker .tp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .token-picker .tp-pills:empty { display: none; } .tp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 11px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-dim); } .tp-pill .pill-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } .tp-x { background: none; border: none; color: var(--text-mut); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; } .tp-x:hover { color: var(--danger); } /* aperçu markdown : cadre léger pour distinguer du champ de saisie */ .md-preview { border-top: 1px solid var(--border); } .pl-desc-tabs { display: flex; gap: 2px; margin-bottom: 6px; } .pl-tab { background: none; border: 1px solid var(--border); border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 4px 14px; font-size: var(--fs-sm); cursor: pointer; color: var(--text-dim); } .pl-tab.active { background: var(--panel-2); border-bottom-color: var(--panel-2); color: var(--text); } /* ---- Plot detail page ---- */ .plot-detail { max-width: 780px; } .plot-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .plot-detail-header-right { display: flex; align-items: center; gap: 10px; } .plot-col-badge { font-size: var(--fs-sm); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px 10px; color: var(--text-dim); } .plot-detail-title { font-size: 1.8rem; font-weight: 700; margin: 0 0 12px; color: var(--text); line-height: 1.2; } .plot-detail-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .plot-detail-desc { margin-top: 4px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .plot-detail-section { margin-top: 28px; } .plot-detail-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .plot-detail-section-head h2 { margin: 0; font-size: var(--fs-md); color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } /* ---- Scenario tree ---- */ /* Beat sheet vertical : lecture de haut en bas, embranchements en renvois (§). Remplace l'ancien arbre 2D (qui s'étalait horizontalement). */ .beat-sheet { max-width: 70ch; padding: 4px 0; } .bs-act { margin: 20px 0 2px; } .bs-act-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; border-top: 2px solid var(--blood); padding: 10px 0 6px; cursor: pointer; text-align: left; color: var(--text); font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; } .bs-act-head svg.ic { width: 15px; height: 15px; flex: 0 0 auto; } .bs-act-icon { color: var(--blood-2); display: inline-flex; } .bs-act-title { flex: 1; min-width: 0; } .bs-act-meta { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--text-mut); font-weight: 600; } .bs-act.done .bs-act-title { color: var(--text-mut); } .bs-act-desc { color: var(--text-dim); font-size: var(--fs-sm); margin: 2px 0 6px 24px; max-width: 62ch; } .bs-act-body { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; } .bs-act-body[hidden] { display: none; } .bs-beat { border-left: 3px solid var(--border); padding: 4px 0 6px 14px; } .bs-beat.bs-type-choice { border-left-color: var(--gold); } .bs-beat.bs-type-outcome { border-left-color: var(--ok); } .bs-beat.bs-type-info { border-left-color: var(--violet); } .bs-beat.current { background: color-mix(in srgb, var(--blood-2) 12%, transparent); border-left-color: var(--blood-2); } .bs-beat.done { opacity: .55; } .bs-beat.done .bs-title { text-decoration: line-through; } .bs-beat.flash { animation: bs-flash 1.2s ease; } @keyframes bs-flash { 0%, 100% { background: transparent; } 30% { background: color-mix(in srgb, var(--gold) 20%, transparent); } } .bs-beat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bs-cur { background: none; border: 1px solid var(--border); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer; color: var(--text-mut); flex: 0 0 auto; padding: 0; } .bs-cur svg.ic { width: 10px; height: 10px; } .bs-cur:hover { border-color: var(--blood-2); color: var(--blood-2); } .bs-beat.current .bs-cur { background: var(--blood-2); border-color: var(--blood-2); color: var(--on-accent); } .bs-num { font-size: var(--fs-xs); color: var(--text-mut); font-weight: 700; min-width: 26px; } .bs-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-mut); padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--r-pill); font-weight: 600; } .bs-chip svg.ic { width: 12px; height: 12px; } .bs-type-choice .bs-chip { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); } .bs-type-outcome .bs-chip { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .bs-type-info .bs-chip { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 45%, transparent); } .bs-title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; flex: 1; min-width: 120px; } .bs-done-lbl { font-size: var(--fs-xs); color: var(--text-mut); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; margin-left: auto; white-space: nowrap; } .bs-desc { color: var(--text-dim); line-height: 1.6; margin: 4px 0 0 34px; max-width: 62ch; } .bs-desc > :first-child { margin-top: 0; } .bs-desc > :last-child { margin-bottom: 0; } .bs-refs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 34px; } .bs-ref { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--blood-2); cursor: pointer; padding: 3px 10px; border: 1px dashed var(--border); border-radius: var(--r-pill); text-decoration: none; } .bs-ref:hover { border-color: var(--blood-2); background: var(--blood-dim); } .bs-ref svg.ic { width: 13px; height: 13px; } .bs-ref-n { color: var(--text-mut); font-weight: 700; } /* ---- Scenario editor ---- */ .se-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .se-node { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; } .se-node-row { display: flex; align-items: center; gap: 8px; } .se-type { flex: 0 0 auto; width: auto; font-size: var(--fs-sm); padding: 4px 6px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); } .se-title { font-size: var(--fs-base); flex: 1; min-width: 0; } .se-edge-row { display: flex; align-items: center; margin-top: 6px; flex-wrap: wrap; gap: 4px; } .se-desc { font-size: var(--fs-sm); resize: vertical; } .se-parent { width: auto; font-size: var(--fs-sm); padding: 3px 6px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); } .se-edge-label { font-size: var(--fs-sm); flex: 1; min-width: 0; } /* ---------- responsive ---------- */ @media (max-width: 860px) { .sidebar { position: fixed; left: 0; top: var(--topbar-h); z-index: 200; height: calc(100vh - var(--topbar-h)); transform: translateX(-100%); transition: transform .25s; } .sidebar.open { transform: translateX(0); } /* sur mobile la sidebar glisse hors écran : on ignore l'état desktop "collapsed" */ .app.nav-collapsed .sidebar { display: flex; } .main { padding: 18px 16px 60px; width: 100%; } .trait-cols { grid-template-columns: 1fr; } .grid2 { grid-template-columns: 1fr; } /* identity-grid a ses propres breakpoints */ .chat-layout { grid-template-columns: 1fr; height: auto; } .chat-list { max-height: 200px; } .char-grid { grid-template-columns: 1fr; } .scrim.show { position: fixed; left: 0; right: 0; top: var(--topbar-h); bottom: 0; background: rgba(0,0,0,.5); z-index: 150; } /* bandeau resserré : recherche en icône seule, la dropdown rétrécit */ .topbar { padding: 0 10px; } .topbar-chronicle { max-width: 150px; font-size: 1rem; } .searchbtn { min-width: 0; padding: 7px 9px; margin-right: 0; } .searchbtn .stxt, .searchbtn kbd { display: none; } } /* ---------- Séparateur de menu ---------- */ .nav-sep { border: none; border-top: 1px solid var(--border); margin: 6px 14px; } /* ---------- Mention autocomplete (@intellisense) ---------- */ .mention-dropdown { position: absolute; z-index: 10000; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--blood-2) 25%, transparent); min-width: 230px; max-width: 340px; max-height: 240px; overflow-y: auto; padding: 4px; } .mention-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background .1s; user-select: none; } .mention-item:hover, .mention-item.active { background: var(--blood-dim); } .mention-icon { font-size: var(--fs-base); flex: 0 0 auto; line-height: 1; } .mention-name { flex: 1; font-weight: 500; font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .mention-type { font-size: var(--fs-xs); color: var(--text-dim); background: color-mix(in srgb, var(--text) 8%, transparent); padding: 2px 6px; border-radius: var(--r-sm); flex: 0 0 auto; text-transform: uppercase; letter-spacing: .6px; } /* ---------- visibilité GM / joueurs ---------- */ /* harmonisé avec le reste du site : accent ambre, libellé standard */ .vis-toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size: var(--fs-base); color:var(--text-dim); user-select:none; padding:6px 0; } .vis-toggle input { accent-color: var(--blood-2); width:15px; height:15px; cursor:pointer; } .vis-toggle input:checked + span { color: var(--text); } /* cases à cocher et radios : accent ambre partout (fini le bleu navigateur) */ input[type="checkbox"], input[type="radio"] { accent-color: var(--blood-2); } .vis-badge { display:inline-flex; align-items:center; line-height:1; font-size:.82em; cursor:default; flex:0 0 auto; margin-left:6px; padding:2px 6px; border-radius: var(--r-sm); vertical-align:middle; background:color-mix(in srgb, var(--blood-2) 14%, transparent); border:1px solid color-mix(in srgb, var(--blood-2) 55%, transparent); box-shadow:0 0 6px color-mix(in srgb, var(--blood-2) 25%, transparent); } /* ---------- recherche globale (Ctrl+K) ---------- */ .search-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1300; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; } .search-box { width:min(660px, 92vw); background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } .search-box input { width:100%; padding:14px 16px; border:none; border-bottom:1px solid var(--border); background:transparent; color:var(--text); font:inherit; font-size: var(--fs-md); outline:none; } #gs-results { max-height:48vh; overflow-y:auto; } .gs-hint { padding:16px; color:var(--text-mut); font-size: var(--fs-base); } .gs-item { display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer; border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent); } .gs-item:last-child { border-bottom:none; } .gs-item.active { background:var(--panel-2); box-shadow:inset 3px 0 0 var(--blood-2); } .gs-ic { flex:0 0 auto; } .gs-title { color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gs-sub { color:var(--text-dim); font-size: var(--fs-sm); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gs-type { color:var(--text-mut); font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; flex:0 0 auto; } .gs-foot { display:flex; gap:16px; padding:8px 14px; border-top:1px solid var(--border); color:var(--text-mut); font-size: var(--fs-xs); } /* ---------- liens @mention ---------- */ .mention-link { color:var(--gold); cursor:pointer; text-decoration:none; border-bottom:1px dotted var(--gold); } .mention-link:hover { color:var(--text); border-bottom-color:var(--text); } /* ---------- backlinks (« Mentionné dans… ») ---------- */ .backlinks-list { display:flex; flex-direction:column; gap:6px; } .backlink-item { display:flex; align-items:flex-start; gap:10px; padding:8px 10px; cursor:pointer; background:var(--panel-2); border:1px solid var(--border); border-radius: var(--r-md); } .backlink-item:hover { border-color:var(--blood-2); } .bl-ic { flex:0 0 auto; } .bl-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .bl-title { color:var(--text); font-weight:600; font-size: var(--fs-base); } .bl-snippet { color:var(--text-dim); font-size: var(--fs-sm); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .bl-type { color:var(--text-mut); font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; } /* ---------- mise en évidence après navigation (recherche / mention) ---------- */ .flash { animation: flash-ring 1.8s ease-out; } @keyframes flash-ring { 0% { box-shadow: 0 0 0 3px var(--blood-2); } 100% { box-shadow: 0 0 0 3px transparent; } } /* ---------- Live Session (écran du Conteur) ---------- */ .live-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; } #live-prep, #live-init, #live-ref { grid-column:1 / -1; } /* U8 : un iPad paysage (1024px) garde les 2 colonnes ; 1 colonne sous 900px */ @media (max-width:900px) { .live-grid { grid-template-columns:1fr; } } .live-sec h2 { font-size: var(--fs-md); margin:0 0 10px; } .live-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-bottom:12px; } .live-card-head { display:flex; align-items:center; gap:10px; } .live-card-head .name { font-family: var(--font-display); font-size: 1.12rem; font-weight:600; } .live-card-head .concept { color:var(--text-dim); font-size: var(--fs-sm); } .live-tracks { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:10px; align-items:flex-end; } .live-track .lt-label { display:block; font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-mut); margin-bottom:4px; } .live-rouse { display:block; font-size: var(--fs-sm); margin-top:4px; } .live-pools { margin-top:12px; } .lp-chips { display:flex; flex-wrap:wrap; gap:6px; } .pool-chip { background:var(--panel-2); border:1px solid var(--border); color:var(--text-dim); border-radius: var(--r-pill); padding:3px 10px; font-size: var(--fs-sm); cursor:pointer; } .pool-chip b { color:var(--text); margin-left:3px; } .pool-chip:hover { border-color:var(--blood-2); color:var(--text); } .lp-custom { display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; } .lp-custom select { max-width:150px; } .lp-diff { width:60px; } .live-roll-result { margin-top:8px; font-size: var(--fs-sm); min-height:1.2em; } .live-roll-result .lr-dice { margin-left:6px; letter-spacing:.15em; color:var(--text-dim); } .live-roll-result .hd { color:var(--blood-2); font-weight:700; } .lr-success { color:var(--success); } .lr-crit { color:var(--gold); } .lr-messy { color:var(--warn-2); } .lr-bestial { color:var(--danger); } .lr-fail { color:var(--text-dim); } .init-add { display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap; } .init-add #init-name { flex:0 1 240px; } .init-list { display:flex; flex-direction:column; gap:5px; } .init-row { display:flex; align-items:center; gap:12px; padding:7px 12px; background:var(--panel); border:1px solid var(--border); border-radius: var(--r-md); } .init-row.active { border-color:var(--gold); box-shadow:inset 3px 0 0 var(--gold); } .init-row .init-val { font-weight:700; min-width:26px; text-align:right; color:var(--gold); } .live-ref-block { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; margin-bottom:10px; } .live-ref-block summary { cursor:pointer; font-weight:600; } .live-ref-block summary::marker { color:var(--text-mut); } .live-prep-body { margin-top:10px; } .live-table { border-collapse:collapse; margin-top:10px; font-size: var(--fs-base); width:100%; } .live-table th, .live-table td { border:1px solid var(--border); padding:5px 10px; text-align:left; } .live-table th { color:var(--text-dim); font-size: var(--fs-sm); text-transform:uppercase; letter-spacing:.05em; } .live-rules { margin:10px 0 4px; padding-left:20px; font-size: var(--fs-base); } .live-rules li { margin-bottom:5px; } .live-hr-item { margin-top:10px; } /* ---------- Live : victimes, relance, dégâts init ---------- */ .victim-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; } .victim-name { font-family: var(--font-display); font-weight:700; font-size: 1.2rem; margin-bottom:4px; } .victim-line { margin-top:4px; font-size: var(--fs-base); } .victim-res { font-weight:600; } .live-roll-result .rr { text-decoration:underline dotted; } .init-hp { font-size: var(--fs-sm); } /* ---------- post-mortem IA ---------- */ .pm-section { margin-bottom:18px; } .pm-section h3 { margin:0 0 8px; font-size: var(--fs-base); } .pm-empty { font-size: var(--fs-sm); margin:0; } .pm-row { display:flex; align-items:flex-start; gap:12px; padding:9px 12px; margin-bottom:6px; background:var(--panel-2); border:1px solid var(--border); border-radius: var(--r-md); } .pm-main { flex:1; min-width:0; font-size: var(--fs-base); } .pm-note { color:var(--text-dim); font-size: var(--fs-sm); margin-top:3px; } .pm-row .btn { flex:0 0 auto; white-space:nowrap; } /* ---------- journal d''XP ---------- */ .xp-add { display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap; } .xp-add input:not([type=number]) { flex:1; min-width:180px; } .xp-row { display:flex; align-items:center; gap:10px; padding:6px 10px; margin-bottom:4px; background:var(--panel-2); border:1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-base); } .xp-delta { font-weight:700; min-width:36px; text-align:right; } .xp-delta.gain { color:var(--success); } .xp-delta.spend { color:var(--danger); } .xp-date { font-size: var(--fs-sm); } /* ---------- handouts (F4) ---------- */ .handout-img { max-width: min(560px, 100%); border-radius: var(--r-md); border: 1px solid var(--border); display: block; } /* ---------- corbeille ---------- */ .trash-row { display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:6px; background:var(--panel-2); border:1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-base); } .trash-ic { flex:0 0 auto; } /* ---------- miniatures dans les pills Kanban ---------- */ .npc-pill { display:inline-flex; align-items:center; gap:5px; } .pill-avatar { width:18px; height:18px; border-radius:50%; object-fit:cover; flex:0 0 auto; } /* ---------- récents & épingles (sidebar) ---------- */ .recents { padding:8px 10px 14px; overflow-y:auto; } .rec-head { font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.07em; color:var(--text-mut); margin:10px 6px 4px; } .rec-item { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius: var(--r-md); cursor:pointer; color:var(--text-dim); font-size: var(--fs-base); } .rec-item:hover { background:var(--panel-2); color:var(--text); } .rec-item .ic { flex:0 0 auto; font-size: var(--fs-base); } .rec-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rec-pin { opacity:0; color:var(--text-mut); flex:0 0 auto; padding:0 2px; } .rec-item:hover .rec-pin { opacity:1; } .rec-pin.on { opacity:1; color:var(--gold); } kbd { background:var(--panel-2); border:1px solid var(--border); border-bottom-width:2px; border-radius: var(--r-sm); padding:1px 6px; font-size:.8em; font-family:inherit; } /* ---------- panneau latéral de fiches ---------- */ .side-panel { position:fixed; top:0; right:0; bottom:0; width:min(540px, 94vw); z-index:900; background:var(--bg-2); border-left:1px solid var(--border); box-shadow:var(--shadow); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .18s ease; } .side-panel.open { transform:translateX(0); } .sp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); } .sp-head h2 { margin:0; font-size: var(--fs-md); } .sp-sub { color:var(--text-dim); font-size: var(--fs-sm); margin-top:2px; } .sp-actions { display:flex; gap:6px; flex:0 0 auto; } .sp-body { flex:1; overflow-y:auto; padding:14px 16px; } .sp-portrait { width:110px; height:110px; border-radius: var(--r-lg); object-fit:cover; border:2px solid var(--border); float:right; margin:0 0 10px 12px; } .sp-section { margin-top:16px; } .sp-section h3 { margin:0 0 6px; font-size: var(--fs-base); color:var(--text-dim); } .sp-photos { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .sp-photos img { width:96px; height:72px; object-fit:cover; border-radius: var(--r-md); cursor:pointer; border:1px solid var(--border); } .sp-members { display:flex; gap:6px; flex-wrap:wrap; } /* chip de pool sélectionné (chargé dans les sélecteurs) */ .pool-chip.active { border-color:var(--blood-2); color:var(--text); background:var(--blood-dim); } .srm-combo-empty { padding:8px 11px; color:var(--text-mut); font-size: var(--fs-base); } /* ---------- Live : faces de dés compactes, dégâts, quick roll, house rules ---------- */ .mini-dice { display:inline-flex; gap:7px; margin:0 8px; vertical-align:middle; flex-wrap:wrap; } .mini-dice .die { width:22px; height:22px; border-radius: var(--r-sm); flex:0 0 auto; } .mini-dice .die .sym { width:11px; height:13px; } .mini-dice .die.mini-rr { outline:1.5px dashed var(--text-mut); outline-offset:1.5px; } .lr-dmg { display:block; margin-top:4px; font-size: var(--fs-base); } .qr-field { display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-base); color:var(--text-dim); } .qr-field input { width:64px; } .live-hr-head { display:flex; align-items:center; gap:10px; } .live-hr-head .live-hr-acts { margin-left:auto; opacity:0; } .live-hr-item:hover .live-hr-acts { opacity:1; } /* ---------- U8 : écran Live sur tablette (le vrai terrain : iPad derrière l'écran du Conteur). Sur appareil tactile, les cibles passent à >= 40px : cases de dégâts, points de Soif, chips de pool, initiative, boutons. ---------- */ @media (pointer: coarse) { .box { width: 32px; height: 32px; font-size: 1.05rem; } .track { gap: 6px; } .dot { width: 24px; height: 24px; } .dots { gap: 8px; } .pool-chip { padding: 10px 16px; font-size: var(--fs-base); } .lp-chips { gap: 8px; } .live-card .btn.sm, .init-row .btn.sm, .mb-row .btn.sm { padding: 10px 14px; min-height: 40px; } .init-row { padding: 12px 14px; gap: 14px; } .live-tracks { gap: 12px 26px; } /* actions d'accordéon toujours visibles (pas de hover au doigt) */ .acc-head .acc-actions, .live-hr-head .live-hr-acts, .rec-pin { opacity: 1; } } /* ---------- comptes (mode en ligne) ---------- */ .account-row { display:flex; align-items:center; gap:10px; padding:7px 10px; margin-bottom:5px; background:var(--panel-2); border:1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-base); } .acct-role { flex:0 0 auto; } /* ---------- registre des boons ---------- */ .boon-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; } .boon-holder { background:var(--panel-2); border:1px solid var(--border); border-radius: var(--r-pill); padding:4px 12px; font-size: var(--fs-sm); color:var(--text-dim); } .boon-h2 { font-size: var(--fs-md); margin:18px 0 8px; } .boon-list { display:flex; flex-direction:column; } .boon-row { display:flex; align-items:center; gap:10px; padding:9px 12px; margin-bottom:6px; background:var(--panel); border:1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-base); } .boon-row.repaid { opacity:.6; } .boon-notes { color:var(--text-dim); font-size: var(--fs-sm); margin-top:2px; } .boon-repaid { font-size: var(--fs-sm); } .boon-level { flex:0 0 auto; font-size: var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius: var(--r-sm); border:1px solid var(--border); min-width:58px; text-align:center; } .b-trivial { color:var(--text-mut); } .b-minor { color:var(--ok); border-color:var(--ok); } .b-major { color:var(--warn); border-color:var(--warn); } .b-blood { color:var(--blood-2); border-color:var(--blood-2); } .b-life { color:var(--on-accent); background:var(--blood-2); border-color:var(--blood-2); } /* ---------- brèches de Mascarade (Live) ---------- */ .mb-meter { display:flex; align-items:center; gap:10px; margin-bottom:10px; } .mb-gauge { flex:1; height:10px; border-radius: var(--r-sm); background:var(--panel-2); border:1px solid var(--border); overflow:hidden; } .mb-gauge-fill { height:100%; transition:width .3s, background .3s; } .mb-add { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; align-items:center; } .mb-add input[type=text] { flex:1; min-width:180px; } .mb-row { display:flex; align-items:center; gap:10px; padding:7px 12px; margin-bottom:5px; background:var(--panel); border:1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-base); } .mb-row.resolved { opacity:.55; } .mb-sev { flex:0 0 auto; font-weight:700; letter-spacing:1px; } .mb-sev-1 { color:var(--warn); } .mb-sev-2 { color:var(--warn-2); } .mb-sev-3 { color:var(--blood-2); } /* chips personnage-par-chronique dans la liste des comptes */ .acct-chars-line { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; } .acct-chip { background:var(--panel); border:1px solid var(--border); border-radius: var(--r-sm); padding:2px 8px; font-size: var(--fs-sm); } .acct-chron span { font-size: var(--fs-sm); } /* rangée « rôle par chronique » de la modale Comptes */ .acct-chron-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--border); } .acct-chron-row:first-child { border-top:none; } .acct-chron-name { flex:1 1 40%; min-width:0; font-family: var(--font-display); font-size:1.02rem; } .acct-chron-row select { flex:1 1 28%; min-width:0; } /* notes privées du joueur dans le panneau latéral */ .sp-mynote { width:100%; min-height:120px; resize:vertical; } .sp-note-status { display:inline-block; font-size: var(--fs-sm); margin-top:4px; } /* ---------- onglets de la page Settings ---------- */ .settings-tabs { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; } .set-tab { background:transparent; border:1px solid transparent; border-bottom:none; color:var(--text-dim); padding:8px 16px; border-radius: var(--r-md) var(--r-md) 0 0; cursor:pointer; font-size: var(--fs-base); display:inline-flex; align-items:center; gap:7px; } .set-tab svg.ic { width:15px; height:15px; opacity:.8; } .set-tab:hover { color:var(--text); } .set-tab.active { background:var(--blood-2); border-color:var(--blood-2); color:var(--on-accent); font-weight:600; margin-bottom:-1px; } .set-tab.active svg.ic { opacity:1; } /* ===== Revamp visuel — finitions transverses ===== */ /* Scrollbars sombres et discrètes (WebKit) */ * { scrollbar-width: thin; scrollbar-color: var(--panel-2) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: var(--r-md); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--border); background-clip: content-box; } /* ---------- infobulles custom (U7 : remplace la bulle title grise de Windows) ---------- Posées par core.js (title -> data-tip au survol). Sous le bouton, thème inversé (ash white sur les fonds sombres) — même look que l'infobulle des citations. */ [data-tip] { position: relative; } [data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: var(--inv-bg); color: var(--inv-ink); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em; padding: 4px 9px; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); white-space: nowrap; pointer-events: none; z-index: 1100; } /* Sélecteur de chronique : plus présent, comme un vrai sélecteur d'espace de travail */ #chronicle-select { font-weight: 700; } .chronicle-box { background: color-mix(in srgb, var(--bg) 55%, transparent); } /* En-tête de page : la description un cran plus lisible */ .page-head .title-wrap .desc { color: var(--text-dim); margin-top: 3px; } /* Petites étiquettes et pills : plates (maquette), le relief vient des bordures */ /* Onglets Settings : transition douce */ .set-tab { transition: background .15s, color .15s, border-color .15s; } /* ===== Pastille « aperçu joueur » du Conteur (mode view-as) ===== */ .viewas-banner { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; background: var(--blood-dim); border: 1px solid var(--blood-2); border-radius: var(--r-pill); color: var(--text); font-size: 13px; box-shadow: var(--shadow); } .viewas-banner .btn { white-space: nowrap; } /* ===== Fiche de personnage en onglets (modale Conteur) ===== */ .sheet-tabs { margin-bottom: 16px; } .modal-head h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-head .vis-toggle { margin: 0 14px 0 12px; flex: 0 0 auto; } .sheet-topgrid { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; } @media (max-width: 760px) { .sheet-topgrid { grid-template-columns: 1fr; } } /* Encadré « vitals » fusionné : Portrait + Status + Resonance dans une seule boîte. Les sous-sections rendues par renderSheet (Status, Resonance) perdent leur cadre. */ .vitals-main .sheet-section { border: none; padding: 0; margin: 0 0 14px; background: none; box-shadow: none; } .vitals-main .sheet-section:last-child { margin-bottom: 0; } .vitals-main .sheet-section > h3 { margin-top: 0; } .portrait-card { margin: 0; } /* portrait au ratio naturel (comme les vignettes de liste) : carré ou portrait */ .portrait-card .portrait-box { width: 100%; height: auto; min-height: 150px; max-height: 360px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .portrait-card .portrait-box img { width: 100%; height: auto; max-height: 360px; object-fit: contain; } .portrait-card .portrait-box img.avatar-ph { width: auto; height: 96px; } .portrait-card .char-type { margin-top: 4px; } .portrait-box { position: relative; overflow: hidden; } .portrait-ov { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 14px; padding: 7px 0; background: rgba(0, 0, 0, .58); opacity: 0; transition: opacity .15s; } .portrait-box:hover .portrait-ov { opacity: 1; } .portrait-ov button { background: none; border: none; cursor: pointer; font-size: 17px; color: #fff; line-height: 1; padding: 2px 6px; } .portrait-ov button:hover { transform: scale(1.15); } /* ===== v7 — « L'Heure bleue » (2026-07-14) ======================================== Le canevas clair v5/v6 (ash white + îlots volcanic re-scopés) est retiré : les deux modes sont désormais UNIFORMES et pilotés par les tokens de :root / :root[data-theme="light"]. Le canevas, les modales et les panneaux suivent. */ /* Zones de texte de fiche : hauteur de travail confortable d'emblée */ .sheet-section textarea { min-height: 170px; } .sheet-section textarea.big-area { min-height: 240px; } /* Lieux liés (section Domain and Haven de la fiche) */ .linked-locs { margin: -4px 0 12px; font-size: var(--fs-sm); color: var(--text-dim); } .linked-locs .ll-label { text-transform: uppercase; letter-spacing: 1px; font-size: var(--fs-xs); } .linked-locs .ll-chip { display: inline-block; background: var(--inv-bg); color: var(--inv-ink); font-weight: 600; border-radius: var(--r-pill); padding: 2px 10px; margin: 2px 2px 0 0; } /* cliquable seulement là où le panneau latéral existe (cf. sheet.js) */ .linked-locs .ll-link { cursor: pointer; transition: filter .12s; } .linked-locs .ll-link:hover { filter: brightness(1.15); } /* Toggle « Visible to players » dans le pied des modales : calé à gauche */ .modal-foot .vis-toggle { margin-right: auto; padding: 0; } .modal .vis-toggle { color: var(--text-mut); } .plot-edit-footer-left .vis-toggle { padding: 0; margin-right: 10px; } /* ============ LOT 4 — finitions maquette ============ */ /* ---- page Tonight des joueurs ---- Le prologue en pleine largeur (c'est le texte qu'on lit à l'ouverture), puis ses personnages et son bloc-notes côte à côte. Même patron que .tonight-grid du Conteur, en deux colonnes seulement. */ .ptonight-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; grid-template-areas: "prol prol" "chars notes"; } .ptonight-grid > * { min-width: 0; } .pt-prol { grid-area: prol; } .pt-chars { grid-area: chars; } .pt-notes { grid-area: notes; } @media (max-width: 860px) { .ptonight-grid { display: flex; flex-direction: column; } } /* ---- vue joueur : même gabarit que la modale du Conteur ---- .modal.wide plafonne à 920px : la feuille à onglets de « My Character » reprend la même largeur, pour que le joueur retrouve exactement la mise en page. */ .player-sheet-wrap { max-width: 920px; } .me-picker { margin-bottom: 12px; } .xp-remaining { margin: 8px 0 0; } .xp-remaining .xp-neg { color: var(--danger); } /* solde négatif : erreur de saisie */ /* pied de sidebar : lien Parameters épinglé tout en bas */ nav.menu.menu-foot { flex: 0 0 auto; padding: 6px 8px 12px; overflow: visible; border-top: 1px solid var(--border); margin: 0 6px; } /* chips de filtre par clan (Lore → Characters) */ .clan-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 16px; } .clan-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--panel); color: var(--text-mut); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s; } .clan-chip:hover { color: var(--text); border-color: var(--blood-2); } .clan-chip.on { background: var(--blood-2); border-color: var(--blood-2); color: var(--on-accent); } .clan-chip.on .clan-dot { outline: 1px solid var(--on-accent); outline-offset: 1px; } .clan-chip .clan-dot { width: 8px; height: 8px; } /* chips des autres familles de filtres : contour teinté par groupe (--hue) */ .chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 18px; } .chip-group { display: inline-flex; flex-wrap: wrap; gap: 7px; align-items: center; } .chip-sep { width: 1px; height: 18px; background: var(--border); margin: 0 6px; flex: 0 0 auto; } .fchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--panel); color: var(--text-mut); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s, background-color .12s; } .fchip:hover { color: var(--text); border-color: color-mix(in srgb, var(--hue, var(--blood-2)) 60%, transparent); } .fchip.on { color: var(--hue, var(--blood-2)); border-color: color-mix(in srgb, var(--hue, var(--blood-2)) 65%, transparent); background: color-mix(in srgb, var(--hue, var(--blood-2)) 13%, transparent); } /* ---- grille plate de cartes personnages (maquette) ---- */ .lore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; align-items: start; } .lcard { display: flex; flex-direction: column; gap: 10px; padding: 13px 13px 12px; isolation: isolate; } /* le filigrane z-index:-1 reste devant le fond de la carte */ .lcard:hover { border-color: var(--blood-2); } /* filigrane de clan : logo en masque, teinté à la couleur du clan, calé bas-droite */ .lcard.has-clanbg::after { content: ""; position: absolute; right: 4px; bottom: 2px; width: 112px; height: 112px; z-index: -1; pointer-events: none; background-color: var(--clan, var(--text-mut)); -webkit-mask: var(--clanbg) center / contain no-repeat; mask: var(--clanbg) center / contain no-repeat; opacity: .11; transform: rotate(-6deg); } .lcard-media { position: relative; border-radius: var(--r-sm); overflow: hidden; background: color-mix(in srgb, var(--clan, var(--border)) 12%, var(--bg-2)); display: flex; align-items: center; justify-content: center; min-height: 90px; } .lcard-img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; cursor: zoom-in; } .lcard-medal { width: 64px; height: 64px; font-size: 24px; margin: 26px 0; cursor: pointer; } .lcard-body { cursor: pointer; min-width: 0; } .lcard .name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; line-height: 1.2; display: flex; align-items: center; gap: 6px; min-width: 0; } .lcard .name .nm-txt { overflow: hidden; text-overflow: ellipsis; } .lcard .concept { color: var(--text-mut); font-size: var(--fs-sm); margin-top: 2px; } .lcard-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; min-height: 26px; } .lcard-foot .acts { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; } .lcard:hover .acts, .lcard:focus-within .acts { opacity: 1; } @media (pointer: coarse) { .lcard-foot .acts { opacity: 1; } } .lcard:hover .acts .btn, .lcard:focus-within .acts .btn { visibility: visible; } /* compteur de photos sur la vignette (lieux/factions) */ .lcard-count { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: rgba(6, 10, 20, .62); color: #eae5d8; } .lcard-count svg.ic { width: 12px; height: 12px; } /* états vides : ornement ◆ et cadre pointillé (maquette) */ .empty { border: 1px dashed var(--border); border-radius: var(--r-lg); } .empty::before { content: "◆ ◆ ◆"; display: block; color: var(--blood-2); font-size: .72rem; letter-spacing: .6em; margin-bottom: 12px; opacity: .75; } .empty .big { display: none; } /* l'ornement remplace la grosse icône délavée */ /* ---- alignement typographique sur la maquette ---- */ /* boutons : Inter demi-gras (la maquette pèse 600, l'app pesait 400) */ .btn { font-weight: 600; } /* titres de sections Live/Boons : serif à taille lisible (Cormorant rend petit) */ .live-sec h2 { font-size: 1.25rem; } .boon-h2 { font-size: 1.25rem; } .combat-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; } .disc-head-main .disc-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; } .gs-title { font-family: var(--font-display); font-size: 1.05rem; } /* ============ TONIGHT (tableau de bord du Conteur — maquette Heure bleue) ============ */ .tonight-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); align-items: start; grid-template-areas: "prep prep prep prep prep prep prol prol prol prol prol prol" "cote cote cote cote cote cote fils fils fils fils fils fils" "pnj pnj pnj pnj pnj pnj fils fils fils fils fils fils" "notes notes notes notes notes notes tools tools tools tools tools tools" "breach breach breach breach breach breach tools tools tools tools tools tools"; } .tonight-grid > * { min-width: 0; } .tn-prep { grid-area: prep; } .tn-cote { grid-area: cote; } .tn-pnj { grid-area: pnj; } .tn-breach { grid-area: breach; } .tn-prol { grid-area: prol; } .tn-notes { grid-area: notes; } /* les fils et les outils enjambent deux rangées : de la hauteur pour dérouler un scénario à gauche, et le pendant des notes + Masquerade à droite */ .tn-fils { grid-area: fils; align-self: stretch; } .tn-tools { grid-area: tools; align-self: stretch; } /* la carte Masquerade s'efface si la route est refusée (joueur) — pas de cadre vide */ .tn-breach:empty { display: none; } /* ...et les notes remontent occuper les deux rangées au lieu de laisser un trou */ .tonight-grid:has(.tn-breach:empty) .tn-notes { grid-row: 4 / span 2; } .btnrow { display: flex; gap: 8px; flex-wrap: wrap; } /* carte « Prochaine session » de l'en-tête */ .jchip { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 14px; background: var(--panel); text-align: right; flex: 0 0 auto; box-shadow: var(--shadow-sm); } .jchip b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; display: block; line-height: 1.15; } .jchip small { color: var(--text-mut); font-size: var(--fs-xs); } .card-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .card-head-row h2 { margin: 0; font-size: 1.4rem; } .linklike { color: var(--blood-2); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; } .linklike:hover { text-decoration: underline; } /* checklist de prep (cases markdown - [ ] cochables) */ .check { list-style: none; margin: 0; padding: 0; } .check li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px; border-top: 1px solid var(--border); cursor: pointer; } .check li:first-child { border-top: none; } .check .box { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; border: 1.5px solid var(--text-mut); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--on-accent); } .check .box svg.ic { width: 11px; height: 11px; opacity: 0; } .check li.done .box { background: var(--blood-2); border-color: var(--blood-2); } .check li.done .box svg.ic { opacity: 1; } .check li.done .lbl { color: var(--text-mut); text-decoration: line-through; } .progress { height: 3px; background: var(--border); border-radius: 2px; margin-top: 12px; overflow: hidden; } .progress i { display: block; height: 100%; background: var(--blood-2); border-radius: 2px; transition: width .3s ease; } .tn-prep-md { max-height: 300px; overflow-y: auto; } /* coterie : rangées compactes à trackers */ .tn-pc { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; padding: 11px 2px; border-top: 1px solid var(--border); isolation: isolate; } /* garde l'emblème de clan (z-index:-1) devant le fond de la carte */ .tn-pc:first-child { border-top: none; } .tn-pc .who { flex: 1 1 130px; min-width: 130px; cursor: pointer; position: relative; } .tn-pc .who b { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; line-height: 1.15; } .tn-pc .who small { color: var(--text-mut); font-size: var(--fs-xs); } .tn-pc.hungry .who b::after { content: "●"; color: var(--danger); font-size: 8px; vertical-align: super; margin-left: 5px; } .tn-pc .avatar { cursor: pointer; } /* emblème de clan de la rangée : même recette que le filigrane des vignettes (PNG noir en masque, teinté à la couleur du clan). Hors flux, collé à la fin du bloc nom — qui s'étire jusqu'aux trackers — donc juste avant les cases Health, sans rien pousser. z-index:-1 + isolation sur la rangée : il passe derrière le nom sans disparaître sous le fond de la carte. */ .tn-clan { position: absolute; right: 0; top: 50%; width: 38px; height: 38px; z-index: -1; pointer-events: none; background-color: var(--clan, var(--text-mut)); -webkit-mask: var(--clanbg) center / contain no-repeat; mask: var(--clanbg) center / contain no-repeat; opacity: .2; transform: translateY(-50%) rotate(-6deg); } .tn-trk { display: flex; flex-direction: column; gap: 3px; } .tn-trk label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-mut); font-weight: 600; } /* bouton dés au bout de la ligne + zone de jets dépliable */ .tn-pc-wrap { border-top: 1px solid var(--border); } .tn-pc-wrap:first-child { border-top: none; } .tn-pc-wrap .tn-pc { border-top: none; } .tn-roll-btn { margin-left: auto; flex: 0 0 auto; align-self: center; } .tn-roll-btn.open { color: var(--blood-2); border-color: var(--blood-2); } .tn-roll { padding: 4px 2px 12px 52px; } .tn-roll .live-pools { margin-top: 4px; } .tn-roll .lp-chips { gap: 5px; } @media (max-width: 620px) { .tn-roll { padding-left: 8px; } } /* PNJ épinglés : rangées compactes */ .tn-npc { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--border); } .tn-npc:first-child { border-top: none; } .tn-npc .nfo { flex: 1 1 0%; width: 0; } .tn-npc .nfo b { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.15; } .tn-npc .nfo small { display: block; color: var(--text-mut); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* fils sous tension */ .tn-fil { padding: 10px 2px; border-top: 1px solid var(--border); cursor: pointer; } .tn-fil:first-child { border-top: none; } .tn-fil .t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .tn-fil .t b { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; min-width: 0; } .tn-fil:hover .t b { color: var(--blood-2); } .tn-fil-cur { margin-top: 4px; font-size: var(--fs-sm); color: var(--blood-2); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .tn-fil-cur svg.ic { width: 12px; height: 12px; } .tn-fil-spine { margin-top: 3px; font-size: var(--fs-xs); color: var(--text-mut); } /* scénario du fil sélectionné, déroulé dans la carte */ .tn-fil-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .tn-fil-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .ml-auto { margin-left: auto; } .tn-fil-scn { max-height: 620px; overflow-y: auto; margin-top: 4px; } /* notes brutes de la nuit : la zone de saisie occupe la carte, qui suit la hauteur de la carte d'outils à côté */ .tn-notes { display: flex; flex-direction: column; } .tn-notes-ta { flex: 1 1 auto; min-height: 220px; resize: vertical; line-height: 1.55; } /* outils de table : le resolver / le rappel de couverture tiennent dans la carte */ .tn-tools #tn-tools-body { max-height: 520px; overflow-y: auto; } .tn-tools .combat-title { font-size: 1.2rem; } /* prologue à lire : filet d'ouverture et texte un peu plus grand que le corps courant — c'est de la lecture à voix haute, pas de la consultation */ .tn-prol-md { max-height: 340px; overflow-y: auto; padding-left: 16px; border-left: 2px solid var(--blood-2); font-size: 1.02rem; line-height: 1.6; max-width: 78ch; } @media (max-width: 1080px) { .tn-fil-scn, .tn-tools #tn-tools-body, .tn-prol-md { max-height: 480px; } } @media (max-width: 860px) { .tonight-grid { display: flex; flex-direction: column; } } /* ============ DOCK DE DÉS (lanceur V5 flottant — maquette Heure bleue) ============ */ .dice-dock { position: fixed; right: 22px; bottom: 22px; z-index: 600; } .dock-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--r-pill); background: var(--blood-2); color: var(--on-accent); border: 1px solid var(--blood); font-weight: 700; font-size: var(--fs-base); cursor: pointer; box-shadow: var(--shadow); } .dock-toggle:hover { filter: brightness(1.07); } .dock-toggle svg.ic { width: 17px; height: 17px; } .dock-panel { width: 316px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 16px; } .dock-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .dock-head b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; } .dock-steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .dock-step { border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 10px; background: var(--bg-2); } .dock-step label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-mut); font-weight: 600; } .dock-step.hunger label { color: var(--hunger-2); } .dock-step-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; } .dock-step-row b { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; } .dock-step.hunger .dock-step-row b { color: var(--hunger-2); } .dock-step-row button { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); color: var(--text-dim); font-size: 15px; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; } .dock-step-row button:hover { color: var(--text); border-color: var(--blood-2); } .dock-roll { width: 100%; justify-content: center; } .dock-tray { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 4px; } .dock-tray .die { width: 30px; height: 30px; border-radius: var(--r-sm); margin: 3px; border-width: 1.5px; } .dock-tray .die .sym { width: 14px; height: 17px; } .dock-tray .die.sym-bestial { width: 17px; height: 17px; } .dock-verdict { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin-top: 6px; } .dock-verdict.messy, .dock-verdict.bestial { color: var(--danger); } .dock-verdict.crit { color: var(--gold); } .dock-verdict.success { color: var(--success); } .dock-verdict.fail { color: var(--text-dim); } .dock-detail { font-size: var(--fs-sm); margin-top: 2px; } .dock-foot { display: flex; gap: 8px; margin-top: 12px; } .dock-foot .btn { flex: 1; justify-content: center; } @media (max-width: 700px) { .dice-dock { right: 14px; bottom: 14px; } .dock-panel { width: min(316px, calc(100vw - 28px)); } }