Spaces:
Running
Running
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| Expression Émotionnelle — Viewer Styles | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg: #f5f6f8; | |
| --bg-surface: #ffffff; | |
| --bg-surface-alt: #f0f1f4; | |
| --border: #dfe1e6; | |
| --border-subtle: #e8eaef; | |
| --text-primary: #1a1d23; | |
| --text-secondary: #5e6372; | |
| --text-tertiary: #8b90a0; | |
| --accent: #4361ee; | |
| --accent-light: #e8edff; | |
| --danger: #ef476f; | |
| /* Mode highlight colours (matching previous visualization) */ | |
| --hl-designee: rgba(40, 80, 160, 0.30); | |
| --hl-comportementale: rgba(0, 130, 100, 0.30); | |
| --hl-suggeree: rgba(180, 100, 20, 0.30); | |
| --hl-montree: rgba(120, 50, 140, 0.30); | |
| --hl-autre: rgba(120, 120, 120, 0.30); | |
| --hl-decl-color: #cc0000; | |
| --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| --text-xs: 0.7rem; | |
| --text-sm: 0.8rem; | |
| --text-base: 0.875rem; | |
| --text-lg: 1rem; | |
| --text-xl: 1.25rem; | |
| --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; | |
| --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; | |
| --shadow-sm: 0 1px 2px rgba(0,0,0,.04); | |
| --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); | |
| --shadow-lg: 0 10px 15px rgba(0,0,0,.06), 0 4px 6px rgba(0,0,0,.04); | |
| --sidebar-w: 280px; | |
| } | |
| body { | |
| font-family: var(--font); | |
| font-size: var(--text-base); | |
| line-height: 1.5; | |
| color: var(--text-primary); | |
| background: var(--bg); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ── Layout ──────────────────────────────────────────────────────────────── */ | |
| #app-layout { display: flex; min-height: 100vh; } | |
| /* ── Sidebar ─────────────────────────────────────────────────────────────── */ | |
| #sidebar { | |
| width: var(--sidebar-w); | |
| min-width: var(--sidebar-w); | |
| background: var(--bg-surface); | |
| border-right: 1px solid var(--border); | |
| padding: var(--sp-4); | |
| overflow-y: auto; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| transition: width 0.2s ease, min-width 0.2s ease, padding 0.2s ease; | |
| } | |
| #sidebar.collapsed { | |
| width: 0; | |
| min-width: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| border-right: none; | |
| } | |
| .sidebar-header { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--sp-2); | |
| font-weight: 600; | |
| font-size: var(--text-base); | |
| color: var(--text-primary); | |
| padding-bottom: var(--sp-3); | |
| border-bottom: 1px solid var(--border-subtle); | |
| margin-bottom: var(--sp-4); | |
| flex-shrink: 0; | |
| } | |
| .sidebar-header svg { color: var(--text-tertiary); flex-shrink: 0; } | |
| .sidebar-header .btn-ghost { margin-left: auto; } | |
| /* Sidebar open button */ | |
| .sidebar-open-btn { | |
| display: none; /* shown via JS when sidebar collapsed */ | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 14px; | |
| margin-bottom: var(--sp-4); | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-family: var(--font); | |
| font-size: var(--text-sm); | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: background 0.12s ease; | |
| width: fit-content; | |
| } | |
| .sidebar-open-btn:hover { background: var(--bg-surface-alt); } | |
| .sidebar-open-btn svg { color: var(--text-tertiary); } | |
| #sidebar.collapsed ~ #main-content .sidebar-open-btn { display: inline-flex; } | |
| .btn-ghost { | |
| background: none; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| font-size: var(--text-sm); | |
| cursor: pointer; | |
| padding: 2px 8px; | |
| transition: all 0.15s ease; | |
| } | |
| .btn-ghost:hover { background: var(--bg-surface-alt); color: var(--text-primary); } | |
| /* Filter sections */ | |
| .filter-section { margin-bottom: var(--sp-4); } | |
| .filter-label { | |
| display: block; | |
| font-size: var(--text-xs); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--text-tertiary); | |
| margin-bottom: var(--sp-2); | |
| } | |
| #search-input { | |
| width: 100%; | |
| padding: 7px 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-family: var(--font); | |
| font-size: var(--text-sm); | |
| color: var(--text-primary); | |
| background: var(--bg); | |
| outline: none; | |
| transition: border-color 0.15s ease, box-shadow 0.15s ease; | |
| } | |
| #search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } | |
| #search-input::placeholder { color: var(--text-tertiary); } | |
| .checkbox-group { display: flex; flex-direction: column; gap: 2px; } | |
| .checkbox-group.scrollable { max-height: 180px; overflow-y: auto; padding-right: var(--sp-1); } | |
| .checkbox-group.scrollable::-webkit-scrollbar { width: 4px; } | |
| .checkbox-group.scrollable::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } | |
| .checkbox-item { | |
| display: flex; align-items: center; gap: var(--sp-2); | |
| padding: 3px var(--sp-2); border-radius: var(--radius-sm); | |
| cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); | |
| transition: background 0.1s ease; user-select: none; | |
| } | |
| .checkbox-item:hover { background: var(--bg-surface-alt); } | |
| .checkbox-item input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; } | |
| /* ── Main content ────────────────────────────────────────────────────────── */ | |
| #main-content { flex: 1; padding: var(--sp-5); overflow-x: hidden; min-width: 0; } | |
| /* Charts toggle button */ | |
| .charts-toggle-btn { | |
| display: flex; align-items: center; gap: 6px; | |
| padding: 8px 14px; margin-bottom: var(--sp-3); | |
| background: var(--bg-surface); border: 1px solid var(--border); | |
| border-radius: var(--radius); font-family: var(--font); | |
| font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); | |
| cursor: pointer; user-select: none; | |
| transition: background 0.12s ease; | |
| } | |
| .charts-toggle-btn:hover { background: var(--bg-surface-alt); color: var(--text-primary); } | |
| .charts-toggle-icon { transition: transform 0.2s ease; flex-shrink: 0; } | |
| .charts-toggle-btn.open .charts-toggle-icon { transform: rotate(180deg); } | |
| /* Charts row */ | |
| #charts-row { | |
| display: grid; grid-template-columns: 1fr 1fr; | |
| gap: var(--sp-4); margin-bottom: var(--sp-4); | |
| overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s ease; | |
| } | |
| #charts-row.charts-collapsed { | |
| max-height: 0; opacity: 0; margin-bottom: 0; | |
| } | |
| .chart-card { | |
| background: var(--bg-surface); border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); | |
| } | |
| .chart-card h3 { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-3); } | |
| .chart-bars { display: flex; flex-direction: column; gap: 6px; } | |
| .bar-row { display: flex; align-items: center; gap: var(--sp-2); } | |
| .bar-label { width: 110px; font-size: var(--text-xs); color: var(--text-secondary); text-align: right; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .bar-track { flex: 1; height: 18px; background: var(--bg-surface-alt); border-radius: 3px; overflow: hidden; } | |
| .bar-fill { height: 100%; border-radius: 3px; transition: width 0.35s ease; min-width: 2px; } | |
| .bar-count { width: 40px; font-size: var(--text-xs); color: var(--text-tertiary); text-align: right; flex-shrink: 0; } | |
| /* ── Legend ───────────────────────────────────────────────────────────────── */ | |
| #legend-bar { | |
| display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; | |
| margin-bottom: var(--sp-4); font-size: var(--text-sm); color: var(--text-secondary); | |
| } | |
| .legend-item { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; } | |
| .legend-swatch { display: inline-block; width: 18px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.08); } | |
| .legend-decl .legend-swatch-text { | |
| color: var(--hl-decl-color); font-weight: 700; text-decoration: underline; | |
| text-decoration-color: var(--hl-decl-color); font-size: var(--text-xs); | |
| } | |
| /* ── Table ────────────────────────────────────────────────────────────────── */ | |
| #table-container { | |
| background: var(--bg-surface); border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; | |
| } | |
| #table-toolbar { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); | |
| } | |
| #table-count { font-size: var(--text-sm); color: var(--text-secondary); } | |
| .table-pagination { display: flex; align-items: center; gap: var(--sp-1); } | |
| .table-pagination button { | |
| padding: 4px 10px; font-size: var(--text-sm); font-family: var(--font); | |
| border: 1px solid var(--border); border-radius: var(--radius-sm); | |
| background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; | |
| transition: all 0.12s ease; | |
| } | |
| .table-pagination button:hover:not(:disabled) { background: var(--bg-surface-alt); color: var(--text-primary); } | |
| .table-pagination button:disabled { opacity: 0.4; cursor: default; } | |
| .table-pagination button.active { background: var(--accent); color: #fff; border-color: var(--accent); } | |
| .table-pagination .page-info { font-size: var(--text-sm); color: var(--text-tertiary); margin: 0 var(--sp-2); } | |
| #table-scroll { overflow-x: auto; } | |
| #data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } | |
| #data-table th { | |
| position: sticky; top: 0; background: var(--bg-surface-alt); | |
| text-align: left; font-weight: 600; font-size: var(--text-xs); | |
| text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); | |
| padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); | |
| white-space: nowrap; user-select: none; | |
| } | |
| #data-table th.sortable { cursor: pointer; } | |
| #data-table th.sortable:hover { color: var(--text-primary); } | |
| #data-table th.sort-asc::after { content: ' ↑'; } | |
| #data-table th.sort-desc::after { content: ' ↓'; } | |
| #data-table td { | |
| padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-subtle); | |
| vertical-align: top; color: var(--text-secondary); | |
| } | |
| #data-table tbody tr { transition: background 0.1s ease; cursor: pointer; } | |
| #data-table tbody tr:hover { background: var(--bg-surface-alt); } | |
| #main-title { | |
| margin: 0 0 var(--sp-1) 0; | |
| font-size: 1.6rem; | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| color: var(--text-primary); | |
| } | |
| #main-subtitle { | |
| margin: 0 0 var(--sp-4) 0; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| #main-subtitle a { | |
| color: var(--text-secondary); | |
| text-decoration: underline; | |
| text-underline-offset: 2px; | |
| transition: color 0.15s ease; | |
| } | |
| #main-subtitle a:hover { | |
| color: var(--text-primary); | |
| } | |
| .col-text { min-width: 350px; } | |
| .col-tags { width: 120px; } | |
| /* ── Highlighted text spans ──────────────────────────────────────────────── */ | |
| .annotated-text { | |
| font-size: var(--text-sm); line-height: 1.7; | |
| color: var(--text-primary); white-space: pre-wrap; word-break: break-word; | |
| } | |
| /* Extra line-height when arrows are shown */ | |
| body.show-arrows .annotated-text { line-height: 3.2; } | |
| .hl-segment { border-radius: 2px; padding: 1px 0; } | |
| .hl-decl { | |
| color: var(--hl-decl-color); font-weight: 700; | |
| text-decoration: underline; text-decoration-color: var(--hl-decl-color); | |
| } | |
| body.hide-decl .hl-decl { color: inherit; font-weight: inherit; text-decoration: none; } | |
| /* Arrow callout: positioned from segment wrapper */ | |
| .hl-seg-wrap { position: relative; } | |
| .hl-emo-callout { | |
| position: absolute; | |
| left: 50%; top: calc(100% + 1px); | |
| transform: translateX(-50%); | |
| display: flex; flex-direction: column; align-items: center; | |
| white-space: nowrap; pointer-events: none; z-index: 2; | |
| line-height: 1; | |
| } | |
| .hl-callout-arrow { | |
| font-size: 10px; color: #999; line-height: 1; | |
| } | |
| .hl-callout-label { | |
| font-size: 8px; font-weight: 700; letter-spacing: 0.02em; | |
| color: var(--text-secondary); background: rgba(255,255,255,.85); | |
| padding: 0 3px; border-radius: 2px; line-height: 1.3; | |
| } | |
| /* Hide callouts when option is off */ | |
| body:not(.show-arrows) .hl-emo-callout { display: none; } | |
| /* Tag pills in table cells */ | |
| .tag-pills { display: flex; flex-wrap: wrap; gap: 3px; } | |
| .pill { | |
| display: inline-block; padding: 1px 8px; border-radius: 100px; | |
| font-size: var(--text-xs); font-weight: 500; white-space: nowrap; | |
| } | |
| .pill-colere { background: #fde8e8; color: #b91c1c; } | |
| .pill-degout { background: #ede9f6; color: #4c3d6d; } | |
| .pill-joie { background: #fef3cd; color: #92600a; } | |
| .pill-peur { background: #e2e5f1; color: #2d3256; } | |
| .pill-surprise { background: #d8f3f8; color: #19657a; } | |
| .pill-tristesse { background: #e0e8f0; color: #2c4a66; } | |
| .pill-admiration { background: #fdf0e0; color: #7a5321; } | |
| .pill-culpabilite { background: #ede8f0; color: #574765; } | |
| .pill-embarras { background: #f6e5eb; color: #8b3b55; } | |
| .pill-fierte { background: #dff0e5; color: #2d6b45; } | |
| .pill-jalousie { background: #f0e5e5; color: #6b3535; } | |
| .pill-autre { background: #ecedf0; color: #5a5d6b; } | |
| .pill-mode-comportementale { background: rgba(0,130,100,.12); color: #065f46; } | |
| .pill-mode-designee { background: rgba(40,80,160,.12); color: #1e3a8a; } | |
| .pill-mode-montree { background: rgba(120,50,140,.12); color: #6b21a8; } | |
| .pill-mode-suggeree { background: rgba(180,100,20,.12); color: #92400e; } | |
| .pill-corpus { | |
| background: var(--bg-surface-alt); color: var(--text-secondary); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| /* ── Modal ────────────────────────────────────────────────────────────────── */ | |
| #modal-backdrop { | |
| position: fixed; inset: 0; z-index: 1000; | |
| background: rgba(0,0,0,0.35); display: flex; | |
| align-items: center; justify-content: center; | |
| backdrop-filter: blur(2px); animation: fadeIn 0.15s ease; | |
| } | |
| #modal-backdrop.hidden { display: none; } | |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } | |
| @keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } | |
| #modal-card { | |
| background: var(--bg-surface); border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-lg); width: min(750px, 92vw); | |
| max-height: 85vh; overflow-y: auto; padding: var(--sp-6); | |
| position: relative; animation: slideUp 0.2s ease; | |
| } | |
| #modal-close { position: absolute; top: var(--sp-3); right: var(--sp-3); font-size: var(--text-lg); } | |
| #modal-title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--sp-4); padding-right: var(--sp-8); } | |
| .modal-field { margin-bottom: var(--sp-3); } | |
| .modal-field-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 2px; } | |
| .modal-field-value { font-size: var(--text-base); color: var(--text-primary); line-height: 1.6; } | |
| .modal-field-value.muted { color: var(--text-tertiary); font-style: italic; } | |
| .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } | |
| .modal-text-block { | |
| background: var(--bg-surface-alt); border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); | |
| font-size: var(--text-base); line-height: 1.8; | |
| white-space: pre-wrap; word-break: break-word; | |
| max-height: 400px; overflow-y: auto; | |
| } | |
| body.show-arrows .modal-text-block { line-height: 3.2; } | |
| .modal-ann-list { margin-top: var(--sp-3); } | |
| .modal-ann-item { | |
| background: var(--bg-surface-alt); border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); | |
| margin-bottom: var(--sp-2); font-size: var(--text-sm); | |
| } | |
| .modal-ann-item .tag-pills { margin-top: 4px; } | |
| /* ── Loading ─────────────────────────────────────────────────────────────── */ | |
| #loading-overlay { | |
| position: fixed; inset: 0; z-index: 2000; background: var(--bg); | |
| display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); | |
| } | |
| #loading-overlay.hidden { display: none; } | |
| #loading-overlay p { color: var(--text-secondary); font-size: var(--text-sm); } | |
| .loader-spinner { | |
| width: 32px; height: 32px; | |
| border: 3px solid var(--border); border-top-color: var(--accent); | |
| border-radius: 50%; animation: spin 0.7s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| /* ── Responsive ──────────────────────────────────────────────────────────── */ | |
| @media (max-width: 1024px) { | |
| #sidebar { width: 240px; min-width: 240px; } | |
| #charts-row { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 768px) { | |
| #app-layout { flex-direction: column; } | |
| #sidebar, #sidebar:not(.collapsed) { | |
| position: static; width: 100% ; min-width: 100% ; | |
| height: auto; max-height: 50vh; border-right: none; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| } | |