Spaces:
Running
Running
| /* Même palette et même structure que le Space gridworld-dp */ | |
| :root { | |
| --navy: #162a40; | |
| --cyan: #0096c8; | |
| --orange: #dc7832; | |
| --light: #e4f0f8; | |
| --grey: #e0e0e0; | |
| --ok: #288c5a; | |
| --ko: #b42828; | |
| --text: #162a40; | |
| --muted: #5b6b7c; | |
| --border: #c9d6e2; | |
| --bg: #f7fafc; | |
| --panel: #ffffff; | |
| /* tokens du thème (graphiques SVG compris) */ | |
| --strong: #162a40; /* onglet actif, crochets des matrices, points */ | |
| --seg-on: #162a40; | |
| --on-accent: #fff; | |
| --btn-bg: #fff; | |
| --track: #e4f0f8; | |
| --plot-bg: #fff; /* fond des graphiques, et halo des étiquettes */ | |
| --grid: #e6edf3; | |
| --axis: #9fb0c0; | |
| --axis3: #b8c5d2; | |
| color-scheme: light; | |
| } | |
| :root[data-theme="dark"] { | |
| --cyan: #4fb6ea; --orange: #f09a5a; --ok: #4cc38a; --ko: #ef6b5b; | |
| --text: #e6edf3; --muted: #93a1b0; --border: #2c3a48; --bg: #10161d; --panel: #18212b; | |
| --strong: #e6edf3; --seg-on: #2a5576; --on-accent: #0d1b2a; --btn-bg: #18212b; --track: #243140; | |
| --plot-bg: #18212b; --grid: #243140; --axis: #5a6c7e; --axis3: #4a5c6e; | |
| color-scheme: dark; | |
| } | |
| /* sans JS : on suit le système */ | |
| @media (prefers-color-scheme: dark) { | |
| :root:not([data-theme="light"]) { | |
| --cyan: #4fb6ea; --orange: #f09a5a; --ok: #4cc38a; --ko: #ef6b5b; | |
| --text: #e6edf3; --muted: #93a1b0; --border: #2c3a48; --bg: #10161d; --panel: #18212b; | |
| --strong: #e6edf3; --seg-on: #2a5576; --on-accent: #0d1b2a; --btn-bg: #18212b; --track: #243140; | |
| --plot-bg: #18212b; --grid: #243140; --axis: #5a6c7e; --axis3: #4a5c6e; | |
| color-scheme: dark; | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { margin: 0; background: var(--bg); color: var(--text); } | |
| body { | |
| font-family: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif; | |
| font-size: 17px; | |
| line-height: 1.45; | |
| } | |
| code, pre, .mono { font-family: "Fira Mono", "SFMono-Regular", Menlo, Consolas, monospace; } | |
| #banner { | |
| background: var(--navy); color: #fff; | |
| padding: 14px 24px 12px; border-bottom: 4px solid var(--orange); | |
| display: flex; justify-content: space-between; align-items: center; gap: 12px; | |
| } | |
| #banner h1 { margin: 0; font-size: 1.6em; font-weight: 700; } | |
| #banner p { margin: 2px 0 0; color: var(--light); font-size: 0.9em; } | |
| /* Bouton clair / sombre, dans le bandeau */ | |
| .theme-toggle { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; | |
| border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; | |
| color: #fff; cursor: pointer; flex: none; } | |
| .theme-toggle:hover { border-color: var(--orange); } | |
| .theme-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } | |
| .theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; | |
| stroke-linecap: round; stroke-linejoin: round; } | |
| /* l'icône montre le thème vers lequel on bascule */ | |
| :root[data-theme="dark"] .theme-toggle .i-moon, :root:not([data-theme="dark"]) .theme-toggle .i-sun { display: none; } | |
| nav.tabs { | |
| display: flex; gap: 4px; flex-wrap: wrap; | |
| padding: 10px 24px 0; background: var(--bg); border-bottom: 1px solid var(--border); | |
| } | |
| nav.tabs button { | |
| font: inherit; font-weight: 600; color: var(--muted); | |
| background: none; border: none; border-bottom: 3px solid transparent; | |
| padding: 8px 14px; cursor: pointer; | |
| } | |
| nav.tabs button.active { color: var(--strong); border-bottom-color: var(--orange); } | |
| nav.tabs button:hover { color: var(--strong); } | |
| main.tab { display: none; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; padding: 18px 24px 32px; max-width: 1500px; margin: 0 auto; } | |
| main.tab.active { display: grid; } | |
| .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; } | |
| .sidebar .panel + .panel { margin-top: 14px; } | |
| .sidebar h3 { margin: 0 0 8px; font-size: 1em; } | |
| .explain p { margin: 0; font-size: 0.95em; } | |
| button, input { font: inherit; } | |
| .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } | |
| .seg button { border: none; background: var(--btn-bg); padding: 5px 10px; cursor: pointer; color: var(--muted); font-size: 0.9em; } | |
| .seg button + button { border-left: 1px solid var(--border); } | |
| .seg button.on { background: var(--seg-on); color: #fff; } | |
| .btn { border: 1px solid var(--border); background: var(--btn-bg); border-radius: 6px; padding: 6px 12px; cursor: pointer; } | |
| .btn:hover { border-color: var(--cyan); } | |
| .btn.primary { background: var(--cyan); border-color: var(--cyan); color: var(--on-accent); font-weight: 600; } | |
| .btn.play { min-width: 9.5em; font-weight: 700; } | |
| .slider { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95em; } | |
| .slider input { width: 150px; accent-color: var(--orange); } | |
| .toolbar { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; } | |
| .check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95em; cursor: pointer; user-select: none; } | |
| .check input { width: 18px; height: 18px; accent-color: var(--orange); margin: 0; } | |
| .hint { color: var(--muted); font-size: 0.9em; margin: 8px 0 0; } | |
| .toolbar .hint { margin: 0; } | |
| figure.plot { margin: 0; background: var(--plot-bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px; } | |
| figure.plot svg { | |
| display: block; margin: 0 auto; | |
| width: 100%; height: auto; aspect-ratio: 1 / 1; | |
| max-width: max(300px, calc(100vh - 240px)); | |
| touch-action: none; user-select: none; -webkit-user-select: none; | |
| cursor: crosshair; | |
| } | |
| figure.plot svg .pt { cursor: grab; } | |
| figure.plot svg.dragging, figure.plot svg.dragging .pt { cursor: grabbing; } | |
| figure.plot svg.del .pt { cursor: not-allowed; } | |
| figure.plot figcaption { font-weight: 600; margin: 2px 4px 6px; } | |
| figure.plot figcaption .sub { font-weight: 400; color: var(--muted); } | |
| figure.plot .toolbar.under { margin: 6px 4px 2px; } | |
| .plots { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; } | |
| .plots figure.plot svg { max-width: max(260px, calc(100vh - 320px)); } | |
| #plot3 { cursor: grab; } | |
| #plot3.dragging { cursor: grabbing; } | |
| #plot2 { touch-action: auto; cursor: default; } | |
| .bracket.c3 { grid-template-columns: auto auto auto; } | |
| .eigtab { border-collapse: collapse; font-variant-numeric: tabular-nums; } | |
| .eigtab th, .eigtab td { padding: 2px 10px; text-align: right; } | |
| .eigtab th { font-family: "Fira Sans", system-ui, sans-serif; font-weight: 700; } | |
| .eigtab tr:first-child th { border-bottom: 1px solid var(--border); } | |
| .eigtab tr:nth-child(2) td { padding-bottom: 6px; } | |
| .eigtab tr.u0 td { border-top: 1px solid var(--border); padding-top: 6px; } | |
| .eigtab tr:not(:first-child) th { color: var(--muted); font-style: italic; } | |
| .pc3 { color: var(--ko); } | |
| .bar .b3 { background: var(--ko); opacity: 0.6; } | |
| /* Panneau des résultats */ | |
| .stat { margin: 0 0 12px; } | |
| .stat:last-child { margin-bottom: 0; } | |
| .stat .lbl { font-size: 0.9em; color: var(--muted); margin-bottom: 3px; } | |
| .num { font-family: "Fira Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; } | |
| .vec, .mat { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; } | |
| .bracket { | |
| display: inline-grid; gap: 1px 14px; padding: 2px 8px; | |
| border-left: 2px solid var(--strong); border-right: 2px solid var(--strong); border-radius: 6px; | |
| text-align: right; | |
| } | |
| .bracket.c1 { grid-template-columns: auto; } | |
| .bracket.c2 { grid-template-columns: auto auto; } | |
| .eig { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; } | |
| .eig .tag { font-weight: 700; } | |
| .pc1 { color: var(--orange); } | |
| .pc2 { color: var(--cyan); } | |
| .bar { height: 12px; background: var(--track); border-radius: 6px; overflow: hidden; margin-top: 6px; display: flex; } | |
| .bar span { display: block; height: 100%; } | |
| .bar .b1 { background: var(--orange); } | |
| .bar .b2 { background: var(--cyan); opacity: 0.55; } | |
| .big { font-size: 1.6em; font-weight: 700; color: var(--orange); } | |
| .note { font-size: 0.85em; color: var(--muted); margin: 4px 0 0; } | |
| .warn { color: var(--orange); font-weight: 600; } | |
| footer { text-align: center; color: var(--muted); font-size: 0.85em; padding: 0 16px 24px; } | |
| @media (max-width: 1180px) { | |
| #tab-3d.active { grid-template-columns: minmax(0, 1fr); } | |
| } | |
| @media (max-width: 980px) { | |
| main.tab.active { grid-template-columns: minmax(0, 1fr); } | |
| figure.plot svg { max-width: min(100%, 640px); } | |
| } | |
| @media (max-width: 820px) { | |
| main.tab { padding: 12px 16px 24px; } | |
| nav.tabs { padding: 8px 16px 0; } | |
| .plots { grid-template-columns: minmax(0, 1fr); } | |
| .plots figure.plot svg { max-width: min(100%, 560px); } | |
| #banner { padding: 12px 16px 10px; } | |
| #banner h1 { font-size: 1.35em; } | |
| body { font-size: 16px; } | |
| } | |