/* * TradeDojo - local screen. * * Both themes are defined here from the first unit, because retrofitting a * light theme onto hard-coded colours is how a codebase ends up with two * palettes that disagree. Every colour a component uses is a token below; * nothing downstream writes a hex value. * * Dark is the default (a trading desk at night), light is a deliberate switch. * Red and green are reserved for P&L, and they mean "this number is negative" * or "this number is positive" - never "do something". * * Amended when the side control became a pair of buttons: red and green also * name the DIRECTION of an order, long or short. That is still a statement of * fact - which way this position points - and not an incitement, which is why * the two buttons are the same size, the same weight, and equally easy to * press. The rule the amendment does not touch: neither colour ever means * "act", so nothing on this screen is green because it wants to be clicked. * The tokens are --side-long and --side-short, distinct from --up and --down * precisely so that a change to the P&L colours cannot silently restyle a * control, or the reverse. * * Every pair here is measured, not eyeballed: tests/test_front_end.py computes * the WCAG ratio of each one on every run. Text clears 4.5:1 and the outline of * a form control clears 3:1 - which is why --text-faint and --border-strong are * less subtle than they would be if the choice were left to taste. * * Several tokens are translucent, because the panels are glass. That is not a * hole in the measurement: the test composites each one onto the surface it is * painted on before measuring, so the ratio describes what the eye receives. * Two consequences worth knowing before editing this block: * * - --bg is the page. Nothing is painted under it, so it stays opaque. * Since E02 something is painted OVER it: --scene, and two haloes above * that. The colour still has to be here - it is the fallback, and it is * the surface every ratio below is composited on - but on the parts of * the page no panel covers, what the eye receives is the decor and not * this colour. The inks that end up there are measured separately, * against the decor itself, and one of them does not clear 4.5:1 under a * halo. See tests/test_front_end.py, HALO_SHORTFALL. * - --bg-raised is the opaque surface beneath the glass, and the fallback * when backdrop-filter is unavailable or switched off. A panel that drops * its blur must land on --bg-raised, never on a translucent token alone, * or its text loses the background its contrast was measured against. */ /* Revue calibrée P-04 (MAJEUR, passe libre) : une barre fixe en HAUT occulte la cible de toute ancre et de tout scrollIntoView — ce qu'une barre au pied ne faisait jamais. Le lien d'accessibilité « Skip to content » amenait le titre TRANCHÉ EN DEUX derrière la barre (mesuré, A/B contre la base). Une règle ferme la classe entière. */ html { scroll-padding-top: var(--pad-nav-top); } :root { color-scheme: dark; /* RESTYLE: how far down the five restyled pages start, i.e. the height of the deck's own two rows plus the gap under them. A LENGTH token, not a colour - the --pad prefix is the one the theme-parity guard already excludes, and there is nothing theme-dependent about a distance. The value written here is the pre-script frame only: deckMeasure() (app.js) replaces it with a real getBoundingClientRect the moment the deck is shown, and again on every resize. */ --pad-deck-top: 5.75rem; /* P-04 : LA hauteur de la barre de navigation haute, la seule constante de géométrie qu'elle grave. Tout ce qui doit commencer sous elle (le shell, la sidebar sticky, les coques Console/deck, la feuille Others) lit CETTE variable — jamais une copie. Le safe-area-inset-top est dans la barre elle-même (son padding), donc inclus ici. */ --pad-nav-top: calc(2.9rem + env(safe-area-inset-top)); /* RESTYLE (chantier pages v1 -> design v2, decision d'Erwann du 2026-08-21/22, verbatim: "surtout des neons dores derriere les touches en hover ou au click"). The gold behind a key, and the ONE colour this chantier adds. What it is allowed to say, in full: it says ACTIVE or HOVERED KEY - never a sign, never a market state. Red and green remain the sign of a number or the direction of an order, and nothing else in this product may borrow their job. Four bornes, from RESTYLE_TRACKER.md sec.3.1, none of them negotiable without a second word from Erwann: never at rest (opacity 0 by default), never on the Trade screen, never on a control that commits an order, never a sign. And it is a SHADOW, never ink: --neon-* is forbidden in `color` and in a border a reader has to read, because an ink has to pass the contrast audit and a glow does not. THE HALO IS TWO LAYERS (R8, decision d'Erwann du 2026-08-22, verbatim : « j'aime bien or lumineux moi, un peu des deux c'est bien »). An inner ring of LUMINOUS gold - what the eye reads as gold - and an outer edging, --neon-rim, which is what makes the ring have a body against the page. In DARK the two are the same gold: on a #0b0a18 page the luminous gold already carries the ring at 12:1, so the rim is simply that gold's own soft outer feather, and these four values are UNCHANGED from what the browser pass validated. In LIGHT the luminous gold cannot carry it - see the light block, where the rim becomes a deeper gold. Floors, per THEME and per LAYER, in test_the_gold_neon_is_perceptible_in_both_themes (tests/test_front_end.py). */ --neon-gold: #f5c451; --neon-soft: rgba(245, 196, 81, 0.35); --neon-mid: rgba(245, 196, 81, 0.55); --neon-hot: rgba(245, 196, 81, 0.85); --neon-rim: rgba(245, 196, 81, 0.35); /* Surfaces. --bg-sunken is translucent: it darkens whatever carries it. */ --bg: #0b0a18; --bg-raised: #171430; --bg-sunken: rgba(11, 10, 24, 0.45); --border: rgba(199, 205, 235, 0.16); --border-strong: rgba(199, 205, 235, 0.5); /* Text, four tones from loudest to quietest. */ --text: #ffffff; --text-soft: #c3c9da; --text-muted: #9aa1b8; --text-faint: #999eb2; /* Meaning. Factual only: the sign of a number, the state of a feed. */ --up: #3fd699; --down: #f17a89; --flat: #9aa1b8; --accent: #ac8cf9; --warn: #d6a860; /* The same two hues, tuned to be read as text rather than seen as a mark. */ --accent-text: #c4b5fd; --warn-text: #f0c37e; --em: #ffffff; /* Chart tokens, handed to the charting library so it follows the theme. */ --chart-grid: rgba(199, 205, 235, 0.07); --chart-text: #999eb2; --chart-watermark: rgba(199, 205, 235, 0.07); --chart-up: #3fd699; --chart-down: #f17a89; /* Indicator overlays (chart(F01)/(F02), WORKFLOWS_MULTI_AGENTS.md sec.5, avenant CH1). None of these are --up/--down/--warn/--accent: those four are reserved (the header comment above this block, and the P&L doctrine) for a sign or a state, never for "one more line among six on a chart". --indicator-volume-* are the one deliberate exception - a volume bar's own colour IS the sign of that candle, the same fact --chart-up/--chart-down already carry, so it borrows their hue (muted) rather than inventing an eighth one. chart(F03) adds the MACD tokens beside these if it ships - a token declared and read nowhere fails test_no_token_is_declared_and_never_read on purpose. chart(corr-L2) removed --indicator-donchian for the same reason: the toggle it painted is gone (Lea's review, no fiche backs it yet), and a declared, unread token fails that same test on purpose. */ --indicator-ema-fast: #5ec8f2; --indicator-ema-slow: #3d6fd6; --indicator-bollinger: #38b2ac; --indicator-rsi: #e0c341; --indicator-volume-up: rgba(63, 214, 153, 0.5); --indicator-volume-down: rgba(241, 122, 137, 0.5); /* Glass. Every one of these is translucent by design; --bg-raised is the opaque surface underneath, and the fallback when blur is unavailable. */ --glass-panel: rgba(255, 255, 255, 0.05); --glass-border: rgba(199, 205, 235, 0.16); --glass-row: rgba(255, 255, 255, 0.04); --glass-row-hover: rgba(255, 255, 255, 0.08); --glass-track: rgba(255, 255, 255, 0.08); /* The outline had to be firmed up when it was finally painted: a control edge needs 3:1, and on the stack it really sits on - a recessed well over glass over the decor - it was measuring 2.95. Two points of alpha. */ --input-bg: rgba(11, 10, 24, 0.55); --input-border: rgba(199, 205, 235, 0.45); /* Identity gradient. It is a surface: it carries --on-accent, so it is darker than --accent, which is an ink and has to be lighter. JEU Z0 / correction C10 of SPEC_JEU.md 6.3 - re-checked here rather than retuned. The prototype's own --grad-a/--grad-b (#6d6af8/#8b5cf6) measure 4.14:1 and 4.23:1 for white text, an AA failure the audit found on 15+ buttons in both themes. This sheet's values are already darker than the prototype's - retuned before this chantier existed, for a reason this comment did not used to say - and the two endpoints alone were already in the suite's contrast list below. What was missing is the MIDDLE of the gradient: two passing endpoints do not prove a passing path between them. Computed by hand, both themes (grad-a/b do not vary by theme), WCAG relative luminance at each stop: the two endpoints alone give 4.601:1 at grad-a and 4.561:1 at grad-b. On the CONTINUOUS interpolation (no rounding) that path is monotonic - sRGB gamma decoding is convex - so its true minimum is the grad-b endpoint. A real renderer does not paint the continuous path: it rounds each channel to an 8-bit integer at every pixel, and that rounding is not monotonic (R rises, G falls with the heaviest WCAG weight, B barely rises). JEU-FIX2-F20: the exhaustive 8-bit-rounded worst point is 4.5442:1 at t=0.9516 (#8459ec), strictly between the two endpoints - not grad-b - which still clears 4.5:1, but with a 0.98% margin, not 1.4%. Voie (a) of the correction - darken the gradient - remains satisfied; nothing here moved. The test below sweeps at 1/255 (8-bit resolution) rather than the coarser 2% this comment used to describe, so it can actually see the rounding ripple that carries the real worst point. The margin is thin, which is a decision for whoever retunes this next: do not lighten either stop without re-running the sweep, not just the endpoints. And the corollary this chantier's primitives hold to: no text painted on this gradient ever drops to less than full --on-accent via `opacity` - that is what actually broke the prototype's banner subtitle (12px at opacity:.85, 3.46:1) and its "PROPOSED TODAY" pill (9px on a translucent white fill, 3.21:1). Hierarchy on this surface is carried by weight and size, never by dimming the ink toward the background. */ --grad-a: #6664e9; --grad-b: #8558ec; --on-accent: #ffffff; /* The page behind the panels. */ --scene: radial-gradient(1200px 680px at 4% -12%, #33236d 0%, rgba(51, 35, 109, 0) 55%), radial-gradient(1000px 620px at 106% 116%, #421f88 0%, rgba(66, 31, 136, 0) 55%), linear-gradient(160deg, #141031 0%, #0b0a18 55%, #110d2a 100%); --orb-opacity: 1; /* The two haloes that drift over the scene. Each is a whole gradient rather than a colour, exactly like --scene above, for a reason worth keeping: the fade has to end on the same hue at zero alpha, and spelling that end `transparent` fades through transparent BLACK in the engines that follow the older rule - a grey bruise around a violet halo. The hue is identical in both themes; only --orb-opacity tells them apart. */ --orb-a: radial-gradient(circle, rgba(109, 106, 248, 0.18), rgba(109, 106, 248, 0) 70%); --orb-b: radial-gradient(circle, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0) 70%); /* Direction of a trade, and the ink that sits on it. */ --side-long: #22c07e; --side-long-ink: #04150d; --side-short: #e0596e; --side-short-ink: #1c0509; /* Verdicts. Deliberately the same hues as --up/--warn/--down: a verdict is a statement of fact, not a fourth vocabulary. */ --verdict-supported: #3fd699; --verdict-mixed: #d6a860; --verdict-refuted: #f17a89; --verdict-none: #c2c9d8; /* L2: the Laboratory's own seven, lessons.VERDICTS - the SAME hues as --up/--warn/--accent/--down/--text-faint, byte for byte (never a new colour, and never a var() reference either - the existing four verdict tokens just above already set that precedent). Test_the_ink_on_a_ glass_panel_clears_its_floor's own comment says why no new INK_ON_GLASS entry is needed: a token worth the SAME value as one already on that list is covered the moment that one is, checked rather than assumed. */ --verdict-validated: #3fd699; --verdict-not-yet: #d6a860; --verdict-ambiguous: #d6a860; --verdict-other-lesson: #ac8cf9; --verdict-no-line: #f17a89; --verdict-curriculum-complete: #3fd699; --verdict-no-curriculum: #999eb2; /* Emphasis washes and rings. Surfaces and outlines of state - --ring-accent-strong doubles as the global :focus-visible outline (style.css, "The focus ring is the one outline that has to beat every other state"), which is why F8 (jeu-fix, BLOQUANT, jeu-socle-lea.md) holds it to WCAG 1.4.11's 3:1 floor for a non-text UI indicator, not just the 4.5:1 text floor the rest of this block answers to. 0.78 measured 3.04:1 at its worst surface (--bg-raised) - technically over the floor, close enough to fail on any future rounding of the surfaces it sits on. Raised to 0.9: worst point 3.65:1 (test_every_colour_pair_meets_its_contrast_floor, test_front_end.py), same hue, more of it - exactly what ":focus-visible"'s own comment already says the strongest ring in the set is for. */ --wash-accent: rgba(139, 92, 246, 0.14); --ring-accent: rgba(139, 92, 246, 0.42); --ring-accent-strong: rgba(139, 92, 246, 0.9); --shadow-accent: rgba(109, 106, 248, 0.38); --wash-up: rgba(63, 214, 153, 0.12); --ring-up: rgba(63, 214, 153, 0.4); --wash-warn: rgba(214, 168, 96, 0.12); --ring-warn: rgba(214, 168, 96, 0.42); /* --scrim was removed at E15 and returns here (JEU Z0, jeu-Z0-4), in the same commit as the rule that spends it - the day the E15 comment named as the only honest way back. What changed: this chantier's node sheet and full-screen practice session (.jeu-sheet / .jeu-session below) ARE the modal dialog E15 said this product did not have. The one confirmation the account ticket asks for stays an inline block - that doctrine does not move - but a sheet that covers the path behind it, or a session that replaces the screen for the length of twelve flashcards, needs the backdrop to read as inert while it is up, and a scrim is what says so without a word. The values are this chantier's own, not the prototype's - the audit (docs/reviews/jeu-audit-gardes.md, piege 5) measured the prototype's tokens against this sheet's own contrast harness and found 20 of them under floor, so nothing here is aligned to that source. Dark: derived from --bg itself, so the veil reads as the room going quiet rather than an alien black flash. Light: derived from --em, this sheet's own near- black ink, at an alpha gentle enough not to read as an error state. No ink is ever painted ON a scrim - it carries no text - so no contrast floor applies to it the way one applies to every token above. */ --scrim: rgba(11, 10, 24, 0.6); /* The lab keeper. Illustration fills: no text sits on any of them. */ --keeper-body: #f0aab0; --keeper-body-2: #d4868f; --keeper-gill: #f2778f; --keeper-coat: #f4f6fd; --keeper-coat-line: #a8adc6; --keeper-ink: #241c46; --keeper-blush: #e59aa6; --keeper-glass: rgba(226, 232, 255, 0.34); /* Type and rhythm. Rewritten against the maquette rather than nudged: the three numbers below were the ones this sheet shipped with before the first refonte and they never moved, so counting was the only honest way to set them. --gap is the layout gutter. The proto writes it 27 times as 13px and the second export 11 times as 14px, always on the container that lays panels out; 14px is the later of the two sources and the one whose file is a stylesheet rather than inline attributes. Was 16px. --pad is what a panel holds its content in. The proto's glass blocks run 13 to 17px with a mode of 14x15, so 15px. Was 20px. --radius goes the OTHER WAY, and that is worth saying because the unit is called "tighten". On radius the proto is looser than us, not tighter: 204 border-radius declarations with a mode of 9px for controls, against our 6px. Following the maquette here means growing. The panel radius is separate and already right - E03 set it to 16px, which is the proto's mode for a panel. The body stays at 15px/1.55. It is NOT an écart despite what the tracker row said: the second export declares exactly `font:15px/1.55 var(--font-ui)` on body, and this sheet has carried that byte for byte since before the boucle. The row has been corrected. One mechanical fact that bounds all of this: no rule sets a font-size on `html`, so the rem is pinned at 16px and nothing here rescales with the body. Every rem below is an absolute measurement in disguise. */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* JEU Z3-magazine (M2a, decision de cadrage 2026-08-02): the fiche's own reading face. Georgia, never an embedded binary and never a CDN link - REVIEW-DELTA sec.1 proposed the prototype's "Source Serif 4" -> Georgia -> "Iowan Old Style" chain; the first link is a Google Fonts request this product refuses (rule 1 of this file's own header: nothing here depends on a network fetch to render). The gap in rendering against the prototype is assumed, not hidden. Declared once, in :root only, same convention as --font-ui/--font-mono directly above: a font stack does not vary by theme, so it is exempt from test_both_themes_define_exactly_the_same_tokens (the "--font" prefix) rather than duplicated into the light block for no reason. */ --font-read: Georgia, "Iowan Old Style", serif; --radius: 9px; --radius-panel: 16px; --gap: .875rem; --pad: .9375rem; /* JEU Z3-magazine (M2a): the fiche's own reading ink, distinct from --text/--text-soft - REVIEW-DELTA sec.1's second new token. This one DOES vary by theme (a colour, not a font stack), so it is declared in both blocks and carries its own contrast measurement rather than reusing an existing pair by assumption. Measured against --bg-raised (the panel's opaque fallback) at 11.70:1, and against #382b6a (WORST_GLASS_SURFACE, test_front_end.py - the darkest real point a glass panel actually rests on) at 8.01:1: comfortably over the 4.5:1 floor either way the fiche's own .panel ends up painted. Same value the prototype shipped (#ccd1e3) - re-measured here rather than trusted, and it holds. */ --text-read: #ccd1e3; /* L1 (fidelite chantier), the Laboratory's bench. Named per the PHOTO they point to rather than per which theme is active - both tokens exist in BOTH blocks with the SAME url() in each (the prototype's own IMAGE_TOKENS shape, IMPLEMENTATION_PREP sec.1) - the theme decides which one a rule actually PAINTS (`#labo-bench`/`:root[data-theme="light"] #labo-bench`, further down this sheet), the same division of labour --bg/--scene already keep between "what exists" and "what is active". No CDN, no embedded binary: served from this app's own /img/, vendored and budgeted by tests/test_static_assets_budget.py (A0). */ --bench-dark: url("/img/labo-bench-dark.webp"); --bench-light: url("/img/labo-bench-light.webp"); /* The scrim the bench header's own text sits on, over a real photograph rather than a flat token - --bg-sunken (already used for text-over-decor elsewhere in this sheet) was measured and rejected for THIS surface: its existing contrast pairs are proven against --bg, a flat colour, never against an arbitrary photograph, and the worst theoretical pixel a photo can offer (pure white under a dark scrim, pure black under a light one) dropped --text-faint under 4.5:1 (3.90:1 light, computed by hand before writing this token) even where --text/--text-muted held. Derived from --bg's own RGB per theme (the same convention --scrim documents for itself, two entries up), at an alpha chosen so --text-muted clears 4.5:1 against the WORST possible photograph, not merely the real one - 5.34:1 dark / 5.16:1 light at pure white/black, computed by hand; re-measured against the real photos in a browser before commit. The header therefore only ever sets --text/--text-muted on this scrim, never --text-faint (residual: a future header line that needs --text-faint here would need either a stronger scrim or its own measurement, not an assumption that this one covers it). */ --bench-scrim: rgba(11, 10, 24, 0.86); /* The letter's own paper - cream in BOTH app themes (a page does not change colour when the room's lights do), so --paper/--paper-ink/ --paper-muted read identically here and in the light block below; declared in both anyway, never exempted, because test_both_themes_define_exactly_the_same_tokens compares token NAMES and would not know "this one never varies" from a coincidence of value. K-L1p3-7 (Karim revue L1 passe 3, 2026-08-22): it did not know it either - `--paper` was #fffaf0 in the light block while all three comments claimed one colour. The claim is now held by name, by test_the_letters_paper_is_the_same_cream_in_both_themes (tests/test_front_end.py). Measured: 13.27:1 (--paper-ink on --paper, this block's own values, opaque colours composited directly - no page beneath them to blend with, unlike a translucent surface). Same pair the prototype shipped (#f4e9d8/#2a2018), re-measured here rather than trusted. */ --paper: #f4e9d8; --paper-ink: #2a2018; /* The paper's own quiet tone (a caption, an eyebrow) - never --text-faint/ --text-muted on this surface: both are tuned for the app's OWN dark/ light backgrounds, and --text-muted's dark-theme value (#9aa1b8, a pale blue-grey meant for a DARK surface) reads at a crushing ~2:1 on cream paper. Measured before picking this value: #7a6a53 (the prototype's own --paper-muted) gave 4.36:1 here, under the 4.5:1 floor by enough that rounding could not be trusted; darkened to #6a5c46, which clears 5.41:1. */ --paper-muted: #6a5c46; /* fidelite.C3 - the touch of an instrument (CONSOLE_TRACKER sec.2/3). Every colour the dials, the rail and the key paint, named here so the component rules below read tokens only. Knobs are CSS (K-A0-7): a brushed cap on a bevelled body, the prototype's own values. */ --knob-face: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .14), transparent 60%), conic-gradient(from 0deg, #3a3d4c, #24262f 25%, #3a3d4c 50%, #24262f 75%, #3a3d4c); --knob-shadow: 0 3px 7px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .12), inset 0 1px 1px rgba(255, 255, 255, .18), inset 0 -2px 3px rgba(0, 0, 0, .5); --knob-cap: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .25)); --knob-puck: #cfd2df; --knob-puck-hl: #ffffff; --knob-puck-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); --rail-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .06); --rail-key-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -2px 3px rgba(0, 0, 0, .25) inset, 0 2px 4px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .15); --lamp-off: rgba(0, 0, 0, .3); --lamp-off-shadow: inset 0 1px 1px rgba(0, 0, 0, .4); --lamp-on: #ffffff; --lamp-on-glow: 0 0 4px rgba(255, 255, 255, .85); --plate-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .05); --touch-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 rgba(0, 0, 0, .45), 0 4px 8px rgba(0, 0, 0, .35); --touch-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 rgba(0, 0, 0, .45), 0 7px 14px rgba(0, 0, 0, .4); --touch-shadow-down: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35); /* fidelite.C4 - the shell's MATTER (prototype tokens, A0's vendored textures; the gradients alone paint if a file is missing - the same pure-CSS fallback the bench already practices). */ --tex-shell: linear-gradient(180deg, rgba(10, 9, 20, .40), rgba(8, 7, 16, .62)), url("/img/console-tex-graphite.webp"); --tex-seam: linear-gradient(180deg, rgba(30, 27, 50, .30), rgba(10, 9, 20, .58)), url("/img/console-tex-microbead.webp"); --tex-face: linear-gradient(180deg, rgba(11, 10, 24, .84), rgba(11, 10, 24, .90)), url("/img/console-tex-graphite.webp"); --face-vignette: radial-gradient(130% 100% at 50% 0%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .16) 100%); --orb-metal: conic-gradient(from 210deg, #b9bcc6, #6f727c 12%, #e2e4ea 26%, #7f828b 41%, #c7cad3 55%, #686b74 70%, #dfe1e8 86%, #b9bcc6); --orb-metal-shadow: 0 4px 9px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .14), inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -2px 3px rgba(0, 0, 0, .4); --orb-cap: radial-gradient(circle at 34% 28%, #3b3750 0%, #221f33 46%, #14121f 100%); --orb-cap-shadow: inset 0 3px 5px rgba(0, 0, 0, .65), inset 0 -1px 1px rgba(255, 255, 255, .08), 0 1px 1px rgba(255, 255, 255, .16); --face-seat-shadow: inset 0 2px 6px rgba(0, 0, 0, .28), inset 0 -1px 0 rgba(255, 255, 255, .05); } :root[data-theme="light"] { color-scheme: light; /* RESTYLE: see the dark block's comment for the doctrine this token carries, and for the TWO LAYERS this block is the whole reason for. Trois etalonnages, et le troisieme est une DECISION, pas une mesure. 1. Or pale (#a9741a, alphas .40/.62/.90), pose a l'aveugle en U0. Mesure au navigateur par la passe claire (U7), contre --bg #eef0f7 : 3.55 (gold), 3.08 (hot), 2.10 (mid), 1.58 (soft), la ou le sombre rend 12.04 / 8.82 / 4.20 / 2.34 contre le sien. Le `0 0 0 1px` du survol - le trait qui FAIT le halo - a 1.58:1, ne se voyait pas. 2. Or profond (#8a5a06, alphas .55/.78/.95), pose par U7 : 5.20 / 4.72 / 3.42 / 2.27. Le halo existait enfin sur le papier, au prix de l'eclat : ce n'etait plus de l'or lumineux, c'etait du brun dore. 3. CELUI-CI. Decision d'Erwann du 2026-08-22, verbatim : « j'aime bien or lumineux moi, un peu des deux c'est bien ». Alors les deux, mais pas melanges - EMPILES, chacun a son travail : --neon-gold/hot/mid/soft = le COEUR LUMINEUX, ce que l'oeil lit comme de l'or. La teinte est #d29810, et elle n'est pas choisie a l'oeil : c'est le point median en LUMINANCE RELATIVE entre l'or lumineux du theme sombre (#f5c451, Y = 0.5949) et l'or profond de U7 (#8a5a06, Y = 0.1273) - Y = 0.3620 pour une cible de 0.3611. « Un peu des deux », au sens exact. Teinte 42 deg et saturation 0.86 : la meme famille que #f5c451 (42 deg, 0.89), pas un brun. Les alphas montent (.95 / .85 / .70 contre .85 / .55 / .35 en sombre) parce que sur du papier une lueur diluee n'est plus une lueur. --neon-rim = le LISERE EXTERIEUR, et lui seul porte la perceptibilite. Il garde l'or profond de U7 (#8a5a06) et monte a .85 : 3.92:1 sur --bg, 4.29 sur --bg-raised, soit BIEN AU-DESSUS de ce que U7 avait obtenu de son meilleur ton (2.27 / 2.39). Le halo clair est donc plus present qu'apres U7, et il est dore lumineux. C'est la seule facon d'avoir les deux. Mesures de ce bloc, contre --bg / --bg-raised : --neon-gold 2.24 / 2.55 (U7 : 5.20 / 5.92 ; U0 : 3.55 / 4.04) --neon-hot 2.16 / 2.43 (U7 : 4.72 / 5.32 ; U0 : 3.08 / 3.43) --neon-mid 1.99 / 2.20 (U7 : 3.42 / 3.72 ; U0 : 2.10 / 2.23) --neon-soft 1.76 / 1.89 (U7 : 2.27 / 2.39 ; U0 : 1.58 / 1.64) --neon-rim 3.92 / 4.29 (le trait qui dessine : +73 % sur U7) ET LE SENS DES GARDES CHANGE AVEC, ce qui est le point a ne pas manquer : un PLANCHER de contraste ne peut pas tenir « reste lumineux » - foncer un ton fait MONTER son contraste, donc un plancher seul laisse repasser l'or profond en silence. Alors les gardes sont de deux sortes, et test_front_end.py les porte toutes les deux : - le LISERE a des planchers (3.5 / 3.8), plus une garde de non-regression qui epingle les chiffres de U7 ; - le COEUR a des planchers BAS (il n'a plus a porter la forme) et, surtout, un plancher de LUMINANCE et un test de famille de teinte : c'est la decision d'Erwann rendue falsifiable. */ --neon-gold: #d29810; --neon-soft: rgba(210, 152, 16, 0.70); --neon-mid: rgba(210, 152, 16, 0.85); --neon-hot: rgba(210, 152, 16, 0.95); --neon-rim: rgba(138, 90, 6, 0.85); --bg: #eef0f7; --bg-raised: #ffffff; --bg-sunken: rgba(233, 231, 246, 0.75); --border: rgba(70, 60, 140, 0.18); --border-strong: rgba(70, 60, 140, 0.62); --text: #191c2b; --text-soft: #3d445e; --text-muted: #4e5570; --text-faint: #5d6480; --up: #0d825a; --down: #c43f55; --flat: #4e5570; --accent: #6d3df1; --warn: #966a25; --accent-text: #5b3fc4; --warn-text: #8a6220; --em: #10131f; --chart-grid: rgba(70, 60, 140, 0.12); --chart-text: #5d6480; --chart-watermark: rgba(35, 30, 80, 0.07); --chart-up: #0d825a; --chart-down: #c43f55; /* Same keys as the dark theme, darkened for a light background the way --up/--down/--verdict-* already are above. */ --indicator-ema-fast: #0e7bab; --indicator-ema-slow: #1d4f9e; --indicator-bollinger: #157b73; --indicator-rsi: #8a6d10; --indicator-volume-up: rgba(13, 130, 90, 0.35); --indicator-volume-down: rgba(196, 63, 85, 0.35); --glass-panel: rgba(255, 255, 255, 0.8); --glass-border: rgba(70, 60, 140, 0.18); --glass-row: rgba(70, 60, 140, 0.05); --glass-row-hover: rgba(70, 60, 140, 0.1); --glass-track: rgba(70, 60, 140, 0.14); --input-bg: rgba(255, 255, 255, 0.92); --input-border: rgba(70, 60, 140, 0.61); --grad-a: #6664e9; --grad-b: #8558ec; --on-accent: #ffffff; --scene: radial-gradient(1200px 680px at 4% -12%, #ded8f6 0%, rgba(222, 216, 246, 0) 55%), radial-gradient(1000px 620px at 106% 116%, #e7dcfa 0%, rgba(231, 220, 250, 0) 55%), linear-gradient(160deg, #f7f6fd 0%, #eef0f7 55%, #f3effc 100%); --orb-opacity: 0.4; /* Same two hues as the dark theme, by design: --orb-opacity is what makes them whisper here instead of glow. */ --orb-a: radial-gradient(circle, rgba(109, 106, 248, 0.18), rgba(109, 106, 248, 0) 70%); --orb-b: radial-gradient(circle, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0) 70%); --side-long: #0d865d; --side-long-ink: #ffffff; --side-short: #c43f55; --side-short-ink: #ffffff; --verdict-supported: #0d825a; --verdict-mixed: #966a25; --verdict-refuted: #c43f55; --verdict-none: #707584; /* L2: the Laboratory's own seven - same hues as the dark theme's own comment explains, this theme's own --up/--warn/--accent/--down/ --text-faint values. */ --verdict-validated: #0d825a; --verdict-not-yet: #966a25; --verdict-ambiguous: #966a25; --verdict-other-lesson: #6d3df1; --verdict-no-line: #c43f55; --verdict-curriculum-complete: #0d825a; --verdict-no-curriculum: #5d6480; --wash-accent: rgba(109, 106, 248, 0.1); --ring-accent: rgba(109, 106, 248, 0.34); /* F8 (jeu-fix, BLOQUANT, jeu-socle-lea.md): 0.62 on the light theme's own rgb(109,106,248) measured 2.05-2.28:1 against this theme's three surfaces - well under WCAG 1.4.11's 3:1 floor for the non-text focus ring this token doubles as (see the dark block's own comment on the same token). Alpha alone could not fix it even at 1.0 (3.37:1, no margin): this base rgb reads too pale against a near-white theme regardless of opacity. Darkened toward the hue --border-strong already uses on this theme (rgba(70,60,140,0.62), already proven at this exact 3:1 floor) rather than invented cold: worst point now 3.86:1 (test_every_colour_pair_meets_its_contrast_floor). */ --ring-accent-strong: rgba(70, 66, 220, 0.8); --shadow-accent: rgba(109, 106, 248, 0.26); --wash-up: rgba(14, 143, 99, 0.1); --ring-up: rgba(14, 143, 99, 0.32); --wash-warn: rgba(185, 131, 46, 0.1); --ring-warn: rgba(185, 131, 46, 0.34); /* See the dark block for the arbitrage this token reopens (JEU Z0). This value is derived from --em, the light theme's own near-black ink. */ --scrim: rgba(16, 19, 31, 0.35); --keeper-body: #e2919c; --keeper-body-2: #bf6a78; --keeper-gill: #d94e6e; --keeper-coat: #ffffff; --keeper-coat-line: #8f93ab; --keeper-ink: #1d1638; --keeper-blush: #cf7b8b; --keeper-glass: rgba(120, 130, 170, 0.16); /* JEU Z3-magazine (M2a): see the dark block's own comment for the token's purpose and measurement method. Light-theme value, also the prototype's own (#2d3252) - re-measured, not trusted: 12.43:1 against --bg-raised, 11.76:1 against #f9f8fd (WORST_GLASS_SURFACE, light). */ --text-read: #2d3252; /* See the dark block for what these mean and how they were measured. --bench-dark/--bench-light: identical url()s in both blocks on purpose (IMAGE_TOKENS shape) - the theme decides which one paints, not which one exists. --bench-scrim: derived from THIS theme's own --bg (238, 240, 247), alpha 0.90 rather than the dark block's 0.86 - --text-muted's margin against a pure-black photo pixel was thinner here (4.91:1 at 0.86) than the dark block's own worst case, computed by hand before picking the higher alpha. --paper/--paper-ink/--paper-muted: same cream, same ink as the dark block - the letter does not change colour with the room. K-L1p3-7 (Karim revue L1 passe 3, 2026-08-22, mineur): that sentence was FALSE for one of the three. `--paper` shipped as #fffaf0 here against #f4e9d8 in the dark block - two creams, not one - while three separate comments (this one, the dark block's, and .labo-paper's in index.html) all claimed a single colour, and test_both_themes_define_exactly_the_same_tokens compares token NAMES, never values. Corrected TOWARDS the prose and towards D4's own "papier creme": #f4e9d8, the value the prototype shipped and the one the dark block has measured (13.27:1 for --paper-ink, 5.41:1 for --paper-muted - the same numbers now hold in both themes, since all three values are identical). Held by test_the_letters_paper_is_the_same_cream_in_both_themes (tests/test_front_end.py); the per-theme contrast floors keep their own guard beside it. Decision taken alone and journalled "a relire": it is a VISIBLE colour, so Lea/Erwann may still want a different cream under the light theme - in which case it is the three comments that change, and this guard that goes away. */ --bench-dark: url("/img/labo-bench-dark.webp"); --bench-light: url("/img/labo-bench-light.webp"); --bench-scrim: rgba(238, 240, 247, 0.90); --paper: #f4e9d8; --paper-ink: #2a2018; --paper-muted: #6a5c46; /* fidelite.C3: the same instruments under light - a pale cap, the prototype's own light values; the shadows soften, the rail and the key keep their geometry. */ --knob-face: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .55), transparent 60%), conic-gradient(from 0deg, #e9eaf1, #c9ccd8 25%, #e9eaf1 50%, #c9ccd8 75%, #e9eaf1); --knob-shadow: 0 3px 7px rgba(35, 30, 80, .30), 0 1px 0 rgba(255, 255, 255, .8), inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -2px 3px rgba(0, 0, 0, .28); --knob-cap: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .35), rgba(0, 0, 0, .12)); --knob-puck: #ffffff; --knob-puck-hl: #ffffff; --knob-puck-shadow: drop-shadow(0 1px 2px rgba(35, 30, 80, .35)); --rail-shadow: inset 0 1px 3px rgba(35, 30, 80, .25), inset 0 -1px 0 rgba(255, 255, 255, .5); --rail-key-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -2px 3px rgba(0, 0, 0, .18) inset, 0 2px 4px rgba(35, 30, 80, .25), 0 0 0 1px rgba(35, 30, 80, .12); --lamp-off: rgba(35, 30, 80, .18); --lamp-off-shadow: inset 0 1px 1px rgba(35, 30, 80, .25); --lamp-on: #ffffff; --lamp-on-glow: 0 0 4px rgba(255, 255, 255, .9); --plate-shadow: inset 0 1px 2px rgba(35, 30, 80, .15), 0 1px 0 rgba(255, 255, 255, .6); --touch-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(35, 30, 80, .35), 0 4px 8px rgba(35, 30, 80, .22); --touch-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(35, 30, 80, .35), 0 7px 14px rgba(35, 30, 80, .26); --touch-shadow-down: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 rgba(35, 30, 80, .35), 0 1px 2px rgba(35, 30, 80, .22); /* fidelite.C4: the same instruments under light - aluminium and the pale bead, the prototype's own light layers. */ --tex-shell: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(186, 189, 203, .22)), url("/img/console-tex-aluminium.webp"); --tex-seam: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(200, 203, 218, .34)), url("/img/console-tex-light.webp"); --tex-face: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(250, 250, 253, .58)), url("/img/console-tex-aluminium.webp"); --face-vignette: radial-gradient(130% 100% at 50% 0%, rgba(0, 0, 0, 0) 66%, rgba(35, 30, 80, .07) 100%); --orb-metal: conic-gradient(from 210deg, #e9eaf1, #c2c5d1 12%, #ffffff 26%, #cdd0da 41%, #f2f3f7 55%, #babdc9 70%, #ffffff 86%, #e9eaf1); --orb-metal-shadow: 0 3px 7px rgba(35, 30, 80, .30), 0 1px 0 rgba(255, 255, 255, .8), inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -2px 3px rgba(0, 0, 0, .28); --orb-cap: radial-gradient(circle at 34% 28%, #ffffff 0%, #e6e8f0 46%, #cfd2de 100%); --orb-cap-shadow: inset 0 3px 5px rgba(35, 30, 80, .25), inset 0 -1px 1px rgba(255, 255, 255, .6), 0 1px 1px rgba(255, 255, 255, .8); --face-seat-shadow: inset 0 2px 6px rgba(35, 30, 80, .14), inset 0 -1px 0 rgba(255, 255, 255, .5); } * { box-sizing: border-box; } /* The browser hides [hidden] with a rule of its own, and any class here that sets `display` outranks it. A panel would then stay on screen with its hidden attribute set: the markup says gone, the eye says there, and no test that reads files can tell. This line settles it once for the whole sheet - the attribute is a statement about existence, not a style suggestion. */ [hidden] { display: none !important; } body { margin: 0; padding: 0; /* A colour with an image over it, in that order, and the order is the whole point. --bg stays painted and opaque underneath --scene, so the page falls back to it if the three gradients never render. Writing `background: var(--scene)` alone would have dropped the colour and left --bg declared and read nowhere in the sheet. What the colour does NOT do any more is describe what the eye receives everywhere: the suite still composites its twenty-five pairs onto --bg, which is right under a panel and wrong in the gutters, where the decor is what is actually there. Two guards cover that gap for the inks that are on the decor today; the day the panels turn to glass, most of the screen joins them and the whole measurement has to be re-opened. Fixed, so the decor stays anchored to the window while content scrolls. */ background-color: var(--bg); background-image: var(--scene); background-attachment: fixed; color: var(--text); font: 15px/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; } /* The two haloes of the decor, as pseudo-elements rather than markup. Two reasons, both structural: an element in the page needs an id for nothing, and the id contract runs both ways here - anything the page declares, the script must address; and a decoration in the DOM is one more thing a screen reader has to be told to ignore, where a pseudo-element is already silent. Fixed and inert: they never scroll, never lengthen the page, never take a click. At z-index -1 they sit above the page colour and below every panel, so the decor shows in the gutters and behind the sidebar - which, until the panels turn to glass, is the only place it shows at all. */ body::before, body::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; opacity: var(--orb-opacity); } body::before { top: 100px; left: 44%; width: 360px; height: 360px; background: var(--orb-a); filter: blur(12px); animation: orb-drift 10s ease-in-out infinite; } body::after { bottom: -80px; left: 12%; width: 320px; height: 320px; background: var(--orb-b); filter: blur(14px); animation: orb-drift 14s ease-in-out infinite; } /* Eight pixels, over ten seconds. The proto calls this tdFloat; the front has never carried the maquette's `td` prefix (--td-bg-grad became --scene the day the palette landed), so the name follows the sheet's own convention rather than the export's namespace. Like the unread pulse, it stops entirely for anyone who has asked their system for less motion. */ @keyframes orb-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } /* The grade card at the foot of the sidebar. It is the one component of the gamified set the maquette places OUTSIDE the four views that do not exist here yet - a sidebar foot, visible from every screen - which is why it is the only one E11 lands rather than reports. Branched to GET /api/ranks at W2/R06. Rank 1 (Observer) is granted on arrival (ECHELLE_RANGS.md), so there is no truly empty state left: a fresh account reads "Observer" here, for real, rather than a placeholder saying nothing has happened yet. The bar's width is the share of the NEXT grade's own public criteria already met - a count of booleans the route served, never a percentage this sheet invented; app.js sets it from that count and nothing else. */ .grade-card { margin-top: auto; padding: .625rem .6875rem; border: 1px solid var(--glass-border); border-radius: var(--radius-panel); background: var(--glass-row); } .grade-card .eyebrow { margin: 0 0 .25rem; color: var(--text-faint); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .grade-card p { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--text-muted); } .grade-card .grade-name { font-size: .9375rem; font-weight: 700; color: var(--text); line-height: 1.3; } .grade-card .hint { margin: .25rem 0 0; font-size: .75rem; } .grade-card .bar { height: 4px; margin: .4rem 0 .35rem; border-radius: 2px; background: var(--glass-track); overflow: hidden; } .grade-card .bar > i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); } /* The next grade's public criteria (Home view). One line per criterion, verbatim text served by the route with its own number spliced in - never retyped here - and a plain met/not-yet marker that is a direction (achieved or not), not a verdict on a person. */ .grade-criteria { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; } .grade-criteria li { display: flex; align-items: flex-start; gap: .55rem; font-size: .875rem; color: var(--text-muted); } /* A plain dot, not a glyph: no checkmark character survives the CI's ban on decorative characters above U+2190, and building an SVG at runtime would need the namespace URI as a JS string, which the same CI forbids inside static/. The dot is decoration only - the fact itself is the "progress" text beside it ("3 of 5"), which says the same thing in words. */ /* CAMPUS-V2 U5 (revue wf_5d9a1bd9, BLOQUANT L7549) : le carnet de la scene partage le BUILDER des lignes de critere — il partage donc les REGLES qui peignent leurs etats, dans la MEME declaration (une virgule, jamais une jumelle qui derive). */ .grade-criteria .criterion-mark, .campus-notebook-criteria .criterion-mark { flex: none; width: .5rem; height: .5rem; margin-top: .3rem; border-radius: 50%; background: var(--text-faint); } .grade-criteria li[data-met="true"] .criterion-mark, .campus-notebook-criteria li[data-met="true"] .criterion-mark { background: var(--up); } .grade-criteria .criterion-text, .campus-notebook-criteria .criterion-text { flex: 1; } .grade-criteria .criterion-progress { display: block; margin-top: .1rem; font-size: .75rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* A criterion nobody can satisfy on this deployment, said once and factually - never a second colour, which would read as a warning or a fault of the trader's rather than a fact about this product's current reach. Nothing wears it since R02 (2026-08-10); the style stays for the next one. */ .grade-criteria .criterion-note { display: block; margin-top: .1rem; font-size: .75rem; color: var(--text-faint); font-style: italic; } /* Regularity (Home view). A count read from the engine, and a calendar of small blocks whose only job is to show density - none of them carries text of its own, which is why the grid is aria-hidden and the real numbers live in .regularity-count instead. No colour here is directional (up/down): the wash is the same hue at every level, only its strength changes, so nothing on this grid can be misread as a gain or a loss. */ .regularity-count { margin: 0; font-size: .875rem; color: var(--text); font-variant-numeric: tabular-nums; } .regularity-cal { margin-top: .6rem; display: grid; grid-template-columns: repeat(14, 1fr); gap: .2rem; } .regularity-cal .reg-day { aspect-ratio: 1; border-radius: 3px; background: var(--glass-track); } .regularity-cal .reg-day[data-level="1"] { background: var(--wash-accent); } .regularity-cal .reg-day[data-level="2"] { background: var(--ring-accent); } .regularity-cal .reg-day[data-level="3"] { background: var(--accent); } /* The path list. Its own marker is dropped because each item already carries its lesson number, and a browser counter beside "1.1" reads as a second, contradictory index. */ .path-list { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; } .path-list li { color: var(--text-muted); font-size: .875rem; } .path-list .node-idx { margin-right: .4rem; color: var(--text-faint); } /* The experiment's milestones (W3). Same shape as the path list because they are read the same way — a clock, then a fact — with a class of their own so the two lists stay tellable apart: one is a curriculum, the other is a day. The clock is `num` so it lines up as the session advances. */ .milestone-list { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; } .milestone-list li { display: flex; align-items: baseline; gap: .4rem; color: var(--text-muted); font-size: .875rem; } .milestone-list .node-idx { color: var(--text-faint); flex: none; } /* The path, as a list of lists. HISTOIRE, AU PASSE (SENTIER->CAMPUS S-1, 2026-09-01) : ce paragraphe a longtemps decrit le portage du chemin sinueux - l'arithmetique des centres, la Bezier, le rail SVG - depuis la maquette de SPEC_JEU sec.3. Ce dessin est MORT avec S-1 (decision d'Erwann : le campus remplace le sentier), et `jeuPathGeometry` avec lui. La prose qui decrivait un dessin mort a ete corrigee dans le meme mouvement : un commentaire faux coute autant qu'un chiffre faux (regle 4). Ce que ce bloc possede AUJOURD'HUI est le regroupement que cette liste a toujours dessine - la grille des unites, et la banniere au-dessus de chacune : le blason, le titre, la jauge segmentee et le compte servi. Sous cette banniere vit desormais une `.path-list`, la meme graphie que #home-path, et rien d'autre. */ .unit-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gap); } /* A grid item's automatic min-width is its own max-content size by default. Trouve au navigateur a 375px, le 2026-08 : le scroller du sentier aurait du pouvoir retrecir et ne le pouvait pas, parce que .unit (l'item de grille un cran plus haut) ne descendait pas sous les 339px que son contenu voulait. Le sentier est mort a S-1 et cette cause avec lui ; la release, elle, reste juste par elle-meme : rien dans une unite n'a jamais besoin d'etre plus large que la colonne qu'on lui donne. */ .unit { min-width: 0; } .unit-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: 0 0 .4rem; padding: .5rem .625rem; border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--glass-row); } .unit-head .u-n { color: var(--text-faint); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .unit-head .u-title { color: var(--text-soft); font-size: .875rem; font-weight: 600; } /* The crest (J1-4): the unit's own number, quiet until the unit is whole - then it wears the same identity gradient a validated segment and a validated node both already wear (never --up: a finished unit is not a profit either). No per-unit pictogram: the maquette indexes one by an `icon` field /api/lessons does not serve, and seven invented icons with no source would be exactly the kind of figure C1 already struck once from this screen (the belt). The number the route already serves is the crest, full stop. */ .unit-crest { flex: none; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--wash-accent); border: 1px solid var(--ring-accent); color: var(--accent-text); font-size: .8125rem; font-weight: 800; } .unit-crest[data-done="true"] { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); border-color: transparent; color: var(--on-accent); } .unit-head .unit-count { margin-left: auto; color: var(--text-faint); font-size: .75rem; white-space: nowrap; } /* UNITE CAMPUS-FRONT: the wing's own fictional name (CAMPUS_WING_KEYS, static/app.js), decorative chrome ahead of the real .unit-head banner - never a replacement for .u-title, which still carries the served unit.title unchanged just below it. */ .wing-eyebrow { margin: 0 0 .3rem; color: var(--accent-text); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } /* UNITE CAMPUS-FRONT: the portal plaque - two paragraphs the page already ships elsewhere (learn.units.doctrine at the foot of .unit-list, learn.path.footnote atop the path panel), presented here a second time as the campus's own entrance signage. Never re-typed: both keep the SAME data-i18n key as their other instance, so a translation only ever has one place to change. */ .campus-portal .plaque { color: var(--text); font-size: .9375rem; font-weight: 700; line-height: 1.45; } .campus-portal .plaque-sub { margin-top: .5rem; color: var(--text-soft); font-size: .8125rem; line-height: 1.55; } /* The orientation map: a plain disclosure panel (WAI-ARIA APG "disclosure"), toggled by #campus-map-btn (static/app.js, initCampusMap) - ships `hidden`, the honest closed state, never a dialog with a focus trap since nothing behind it stops being interactive. */ .campus-map-list { display: grid; gap: .5rem; } .campus-map-item { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; width: 100%; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--glass-row); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .campus-map-item:hover { background: var(--glass-row-hover); } .campus-map-item-wing { color: var(--accent-text); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .campus-map-item-unit { color: var(--text-soft); font-size: .8125rem; } /* --- CAMPUS-MONDE U1: the pannable full-width map ---------------------- */ /* Same tokens as every other panel on this page - a distinct wrapper because it is not itself a .panel (it takes the column's full width and clips its own scroll area, which .panel's grid neighbours never do). */ .campus-map-world { border: 1px solid var(--glass-border); border-radius: var(--radius-panel); background: var(--glass-panel); overflow: hidden; } .campus-topbar { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; padding: .75rem var(--pad); border-bottom: 1px solid var(--glass-border); } .campus-topbar-title { flex: 1 1 auto; min-width: 0; } .campus-topbar-h { margin: 0; color: var(--text); font-size: .9375rem; font-weight: 800; } .campus-topbar-sub { margin: .15rem 0 0; color: var(--text-muted); font-size: .75rem; overflow-wrap: break-word; } /* S-4 (retouche Lea, revue calibree) : meme habillage que .campus-topbar- sub, une classe A ELLE plutot qu'un partage - .campus-topbar-sub disparait sous 760px (media query plus bas), exactement la largeur ou le repli est la SEULE voie reelle (iOS Safari, brief S-4) : partager la classe aurait tu le message la ou il compte le plus. */ .campus-fullscreen-hint { margin: .15rem 0 0; color: var(--text-muted); font-size: .75rem; overflow-wrap: break-word; } .campus-topbar-controls { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .campus-ctl { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .625rem; border: 1px solid var(--glass-border); border-radius: var(--radius); background: transparent; color: var(--text-soft); font: inherit; font-weight: 700; font-size: .8125rem; cursor: pointer; white-space: nowrap; } .campus-ctl:hover { background: var(--glass-row-hover); color: var(--text); } /* S-4 : meme regle minimale que .labo-tool-icon (l'icone jumelle du banc plein ecran) - empeche le SVG de s'etirer dans le bouton flex. */ .campus-fullscreen-icon { flex: none; } /* CAMPUS-MONDE U2: the illustrations toggle's pressed state - "off" is the pressed one (aria-pressed="true" means the ambient pulse is silenced), same accent-ring idiom the theme button already wears elsewhere in this sheet, never a second colour vocabulary invented for one control. */ .campus-ctl[aria-pressed="true"] { border-color: var(--accent); color: var(--text); } /* Suite E1 of the prototype prompt's corrective pass: one compact row, 96px at most, below 760px - the subtitle drops, the controls scroll sideways instead of wrapping onto a second and third line, and every target keeps its 44px floor. */ @media (max-width: 759px) { .campus-topbar { max-height: 96px; flex-wrap: nowrap; overflow-x: auto; } .campus-topbar-sub { display: none; } .campus-topbar-controls { flex-wrap: nowrap; flex: none; } /* The title itself must not wrap onto a second and third line either - measured: with only .campus-topbar-controls held to one line, "Learn — the campus" alone was still enough to blow the 96px ceiling wide open (four stacked lines of title, then the controls, then a runt line under them). One `nowrap` on the title joins it to the SAME horizontally-scrollable row the controls already have - reachable in full by scrolling, never clipped, and it is what keeps the whole bar to one line. */ .campus-topbar-title { flex: none; min-width: 0; } .campus-topbar-h { white-space: nowrap; } } /* CAMPUS-PROTO U3: the hero and its three cartridges (campus.html .learn-hero) - static markup, native fragment anchors, no script. The cartridges are real : color and decoration are set explicitly so none of them ever falls back to the browser's link blue (the removed- class trap, CHECKLIST_CHANTIER.md sec.4). */ .campus-hero { padding: 1.25rem 1.25rem .875rem; border: 1px solid var(--glass-border); border-radius: var(--radius-panel); background: var(--bg-raised); } .campus-hero-kicker { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } .campus-hero-h { margin: .35rem 0 .4rem; font-size: 1.55rem; line-height: 1.15; } .campus-hero-lede { margin: 0 0 .5rem; max-width: 46rem; color: var(--text-soft); line-height: 1.5; } .campus-hero-slot { display: block; width: 100%; max-width: 32rem; height: auto; margin: .25rem auto; } .campus-carts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin-top: .5rem; } .campus-cart { display: flex; flex-direction: column; gap: .3rem; padding: .75rem; min-height: 44px; border: 1px solid var(--glass-border); border-radius: var(--radius-panel); background: var(--bg-sunken); color: var(--text); text-decoration: none; } .campus-cart:hover { background: var(--glass-row-hover); } .campus-cart-art { display: block; width: 4.5rem; height: auto; } .campus-cart-name { font-weight: 700; } .campus-cart-line { font-size: .82rem; color: var(--text-soft); line-height: 1.4; } .campus-cart-note { font-size: .75rem; color: var(--text-faint); } /* Announced, not built - the dashed border is the whole difference, the words do the honest work. */ .campus-cart--announced { border-style: dashed; } .campus-story-name { margin: 0 0 .4rem; font-weight: 700; } .campus-viewport { position: relative; overflow: hidden; height: 22rem; touch-action: none; cursor: grab; background: var(--bg-sunken); } .campus-viewport:active { cursor: grabbing; } /* S-4 (plein ecran) : la racine (#campus-fullscreen-root, index.html) n'a AUCUNE regle tant qu'elle n'est pas active - un div nu autour de #campus-map-section ne doit rien changer a la mise en page d'aujourd'hui. `.campus-fullscreen-active` est la SEULE classe que campusApplyFullscreen State() (app.js) ecrit dessus, dans les DEUX chemins (vraie Fullscreen API et repli maison) - une classe, un lecteur CSS, jamais deux jeux de regles a garder en phase. z-index 68 : au-dessus de TOUT ce que le reste de la feuille empile (barre 62, feuille 63, moment gagne 65, tour d'accueil 66, toast XP 67) - "z-index au-dessus du reste" (brief S-4) - jamais SOUS la barre comme la Console/le Labo/le deck (60/61) : ceux-la restent volontairement PARTIELS (decision (a), "la Console garde son ecran moins une barre fine"), le repli maison campus vise au contraire a APPROCHER une vraie fullscreen, la seule maniere de le faire sur iOS Safari qui n'a pas l'API sur un element. En-dessous du jeu (.jeu-overlay, 70) : une fiche de lecon doit pouvoir s'ouvrir PAR-DESSUS le campus plein ecran - c'est pour cela que campusBorrowNeighbours() (app.js) deplace #nodesheet- overlay ET #mentor-dock DANS la racine plein ecran plutot que de compter sur la seule cascade : en VRAIE Fullscreen API (top layer), un z-index ne peut rien pour un element reste HORS du sous-arbre plein ecran, quelle que soit sa valeur - seul le deplacer dans l'arbre le rend a nouveau atteignable/visible. test_the_bar_stacks_above_the_ shells_and_below_the_immersive_surfaces (tests/test_front_end_ tabbar.py) tient ce rang. */ .campus-fullscreen-root.campus-fullscreen-active { position: fixed; inset: 0; z-index: 68; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg); padding: max(.625rem, env(safe-area-inset-top)) max(.625rem, env(safe-area-inset-right)) max(.625rem, env(safe-area-inset-bottom)) max(.625rem, env(safe-area-inset-left)); } /* La section garde son propre cadre (bordure/fond) mais remplit la racine plutot que la hauteur fixe (22rem) que .campus-viewport porte hors plein ecran - `flex: 1` + `min-height: 0` (CHECKLIST_CHANTIER sec.4 : un enfant flex sans plancher se fait ecraser a zero par ses propres freres) laisse #campus-map-panel, deplace dans la meme racine (index. html), garder sa place normale EN DESSOUS plutot que d'etre pousse hors cadre. */ .campus-fullscreen-active > #campus-map-section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .campus-fullscreen-active > #campus-map-section .campus-viewport { flex: 1 1 auto; min-height: 0; height: auto; } .campus-world { position: absolute; inset: 0; transform: translate(var(--campus-pan-x, 0px), var(--campus-pan-y, 0px)) scale(var(--campus-zoom, 1)); transform-origin: center center; transition: transform .2s ease; } /* No transition while a real drag is in progress (app.js toggles this class on pointerdown/up) - see initCampusWorld's own comment for why. */ .campus-world.is-panning { transition: none; } @media (prefers-reduced-motion: reduce) { .campus-world { transition: none; } } .campus-diorama { display: block; width: 100%; height: auto; } .campus-diorama-accent { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; fill: none; } /* The lantern - CATALOGUE_OBJETS_CAMPUS.md's own cross-wing object: one per building always lit in dark theme. This is the unit's ONLY ambient-life declaration; it moves by opacity alone never a transform and both endpoints of its cycle stay well above zero (never 0) so the element it lights is never mistaken for hidden between beats - the keyframe-that- ends-hidden trap this repo's own cliquet already names (CHECKLIST_ CHANTIER.md L6082) does not apply here by construction. Comma-free on purpose - a comment full of commas directly above a rule gets read as fake selector text by this sheet's own global reduced-motion guard (test_front_end.py::animated_selectors) exactly the "comma trap" this repo's own cliquet already names (L2298/L3088). */ .campus-diorama-glow { fill: var(--accent); opacity: .78; animation: campusLanternPulse 4.2s ease-in-out infinite; } @keyframes campusLanternPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .campus-diorama-glow { animation: none; } } /* CAMPUS-PROTO U1: the named image mount. The box commits to the prototype's own facade proportions (300x150 - campus.html facadeSvg) so a painting dropped in later reshapes nothing; the skeleton SVG centers inside it (preserveAspectRatio letterboxes, never stretches), and the raster, once loaded, covers the same box. */ .campus-slot { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 8px; background: var(--bg-sunken); } .campus-slot .campus-diorama { position: absolute; inset: 0; width: 100%; height: 100%; } .campus-slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* La porte de revelation (2026-08-31, premiere reception reelle) : une img `hidden` n'a pas de boite et un lazy sans boite ne charge JAMAIS. Opacite 0 au repos - la boite existe pour le chargeur, le squelette reste seul visible, l'icone cassee d'un fichier absent aussi - et SEULE la regle data-art ci-dessous revele. */ opacity: 0; } /* Suite E3, extended to the raster: illustrations off never empties the box - the skeleton stays drawn, the painting stands down. Own guard, separate from the lantern's (one selector each, neither entails the other). */ [data-decor="off"] .campus-slot-img { display: none; } /* Le raster ne se revele que par l'evenement load reel : campusSlotNode pose data-art="loaded" sur le slot, et cette regle est l'UNIQUE ecrivain d'opacite non nulle de l'img. */ .campus-slot[data-art="loaded"] .campus-slot-img { opacity: 1; } /* ===== CAMPUS-V2 U2 : la scene-carte ============================== */ /* La couche entiere est une porte d'OPACITE (jamais hidden/display sur le monde) : elle ne monte que si la scene ACTIVE a reellement charge (data-campus-scene, pose par le seul campusSceneRefresh sur load reel) ET si les illustrations sont on - sinon c'est la LISTE SIMPLE de #learn-units qui sert (D5 reecrite, 2026-09-01 : l'epine est morte). */ .campus-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; } .campus-world[data-campus-scene="on"] .campus-scene { opacity: 1; } /* Illustrations off : la scene se retire, meme si son attribut est encore pose - a specificite EGALE la derniere regle gagne, et celle-ci vit APRES la revelation ci-dessus, a dessein (garde d'ordre + unicite). */ .campus-world[data-decor="off"] .campus-scene { opacity: 0; } /* Les etats des quatre montures, poses par campusSceneRefresh : off = l'autre variante (portrait/paysage) - display:none, donc son lazy ne tire JAMAIS tant qu'on ne bascule pas de variante ; idle = l'autre theme de la variante courante - boite a opacite 0, c'est le prechargement discret de l'autre scene ; active = la scene du theme courant. */ .campus-scene .campus-scene-slot { display: none; } .campus-scene .campus-scene-slot[data-scene-state="idle"] { display: block; position: absolute; inset: 0; opacity: 0; } .campus-scene .campus-scene-slot[data-scene-state="active"] { display: block; position: absolute; inset: 0; opacity: 1; } /* Le squelette de la scene ne peint jamais par-dessus la scene elle-meme : il vit sous la porte d'opacite de la couche, comme l'img. */ .campus-scene .campus-scene-slot svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--border); } /* ===== fin CAMPUS-V2 U2 =========================================== */ /* ===== CAMPUS-V2 U3 : les 95 noeuds sur la scene ================== */ /* La couche ne prend la carte que quand la scene ET les noeuds sont vraiment la (deux attributs, chacun pose par son seul ecrivain) ; sous illustrations off, tout se retire et c'est la LISTE SIMPLE de #learn-units qui ressert (la porte du repli, plus bas dans cette feuille) - a specificite egale, la derniere regle gagne : les regles decor-off vivent APRES. */ .campus-node-layer { position: absolute; inset: 0; display: none; } .campus-world[data-campus-scene="on"][data-campus-nodes="on"] .campus-node-layer { display: block; } /* L'attribut decor est DOUBLE a dessein : la regle de revelation porte DEUX attributs (0,4,0) et l'egalite de specificite est ce qui permet a l'ordre de source de trancher - un [data-decor="off"] simple (0,3,0) perdrait TOUJOURS. */ .campus-world[data-decor="off"][data-decor="off"] .campus-node-layer { display: none; } .campus-node-paths { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; } .campus-paths-mobile { display: none; } @media (max-width: 620px) { .campus-paths-desktop { display: none; } .campus-paths-mobile { display: block; } } .campus-scene-labels { position: absolute; inset: 0; pointer-events: none; } .campus-scene-label { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -120%); pointer-events: auto; border: 1px solid var(--border); border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; background: var(--glass-panel); color: var(--text); box-shadow: 0 0 0 1px var(--wing-color, var(--accent)); cursor: pointer; white-space: nowrap; } /* D-4 (decision d'Erwann du 2026-09-01) : LA STRUCTURE ACCESSIBLE DE LA COUCHE. Quand la photo tient la carte, #learn-units passe en display:none - donc hors de l'arbre d'accessibilite - et la couche n'offrait alors qu'UNE liste plate de 95 boutons sans nom accessible. Elle porte desormais une
    NOMMEE par aile, precedee d'une en-tete visuellement cachee (.sr-only) qui redit le nom de l'aile, le libelle d'unite servi et le compte « N of M validated ». Aucune de ces trois boites n'est positionnee : le bloc de reference des 95 jalons absolus reste #campus-nodes, exactement comme avant. */ .campus-node-groups, .campus-node-group, .campus-node-list { list-style: none; margin: 0; padding: 0; } .campus-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); } @media (max-width: 620px) { .campus-node { left: var(--mx); top: var(--my); } } /* Le bouton reste lessonNode tel quel (meme aria, meme fiche) - seule sa PEAU change sous cette couche : un jalon rond, le titre en infobulle au survol comme au focus (jamais retire du nom accessible). */ .campus-node .node { display: block; width: 16px; height: 16px; min-width: 16px; padding: 0; border-radius: 50%; border: 2px solid var(--wing-color, var(--accent)); background: var(--glass-row); overflow: visible; position: relative; } .campus-node-major .node { width: 22px; height: 22px; min-width: 22px; } .campus-node .node[data-state="validated"] { background: var(--wing-color, var(--accent)); } .campus-node .node[data-state="proposed"] { box-shadow: 0 0 0 4px var(--glass-track); } /* S-1 CLOTURE (J7) : LA CIBLE D'UN JALON EST SON DISQUE, ET RIEN D'AUTRE. Mesure au vrai navigateur (2026-09-01) : `.campus-node .node` est `overflow: visible`, et ces trois spans - invisibles a l'oeil par `font-size: 0` - restent DANS LE FLUX et restent CLIQUABLES. Le verdict mesurait 29x13 px, pendu 32 px SOUS le haut d'un disque de 16 px : la cible reelle d'un jalon depassait donc largement sa pastille, et c'est par cette queue que « The Registrar's Hall » et « The Specimen Gallery » recevaient le clic d'un noeud voisin a leur centre EXACT, au cadre etroit. `font-size: 0` repond a « est-ce lisible » ; il ne repond pas a « est-ce cliquable » - deux questions differentes (cliquet sec.4, L3533). Le titre en infobulle porte deja la meme declaration, pour la meme raison. */ .campus-node .node-idx, .campus-node .node-state, .campus-node .verdict { font-size: 0; /* HORS FLUX ET SANS SURFACE. `pointer-events: none` seul ne suffit PAS - mesure au navigateur : le disque restait cliquable 19 a 31 px SOUS son centre, la ou ces spans se posaient. Un