/* Single style entry point, imported once from main.tsx.
Order matters: tokens (variables) → fonts (@font-face) → base (resets). */
/* ============================================================
CoproJournal — design tokens (single source of truth)
Source: charte v1.2 « blanc gazette » — valeurs portées depuis
docs/maquettes/tokens.css (CJ-25). Dettes feedback (warn/alert/
block-strong) tokenisées depuis docs/12-design-system.html §17.
Rule #1: components reference ONLY these variables,
never raw hex values.
============================================================ */
:root {
/* — Neutrals: paper & ink — « blanc gazette » (CJ-25) — */
--cj-paper: #FFFFFF;
--cj-paper-warm: #F6F7F5; /* surface secondaire à peine teintée (froide) */
--cj-paper-raised: #FFFFFF; /* cartes : blanches, séparées par le filet */
--cj-rule: #E4E2DA; /* filets / bordures (vitrine) */
--cj-ink: #1A1815; /* titres, texte fort */
--cj-ink-soft: #3A3530; /* corps de texte (D.96) */
--cj-ink-muted: #6B6356; /* texte informatif — AA 5.9:1 sur blanc */
--cj-ink-faint: #847D72; /* DÉCOR uniquement (AA 4.1:1) — jamais d'info essentielle */
/* — Accent: the « registre » green — aligné charte v1.2 — */
--cj-accent: #2E6E57;
--cj-accent-strong: #235543; /* aligné sur la charte (était #235843) */
--cj-accent-soft: #4F8F76; /* decorative only, never critical text */
--cj-accent-wash: #E4EDE7;
/* — Section accents — LOCATIVE, never semantic (D.148) —
A « where am I » cue per consultation screen, NOT a status. Applied ONLY to the
masthead reveal rule + the in-flow editorial kicker; NEVER to a button, a state,
or a card-status border (those keep the role colours: accent=action, info=officiel).
Two are aliases of existing colours; only the AG ochre is a new hue (AA on white). */
--cj-section-journal: var(--cj-accent-strong); /* #235543 — the Mur is the brand's heart */
--cj-section-ag: #8A5E28; /* ocre registre — délibération (AA: 5.0:1) */
--cj-section-pv: var(--cj-info); /* #2F6690 — /pv EST l'officiel (D.114) */
/* Section card teint (D.148 « variante complète ») — two LOCATIVE (never semantic)
derivations of `--cj-section` used to tint the cards of a consultation screen:
--cj-section-wash = the faint ~8% tint behind a card's eyebrow/stamp band, on
white paper (mirrors the green `--cj-stamp-gradient` motif, in the section
hue, fading to transparent at the bottom just like the green one);
--cj-section-ink = the section hue used for the mono eyebrow text on that
near-white band. All three hues clear AA at ~12px mono on white (vert 7.0:1,
ocre 5.0:1, bleu 5.6:1 — see the hue comments above).
DEFAULT (here at `:root`, where `--cj-section` is UNSET) = the original GREEN
stamp gradient + accent-strong ink, so a card rendered OUTSIDE a section (the
styleguide mock, any non-consultation route) is byte-identical to before. The
real per-hue values are set on `.shell[data-section=…]` (AppShell.module.css),
where `--cj-section` is guaranteed defined — so `color-mix` never sees an
undefined custom property (which would void the whole declaration). */
--cj-section-wash: var(--cj-stamp-gradient);
--cj-section-ink: var(--cj-accent-strong);
/* — Semantic states (desaturated, calm by design) — */
--cj-neutral: #6B6356;
--cj-neutral-wash: #EEF0EF; /* froid, accordé au blanc gazette (était #ECE6DA beige) */
--cj-info: #2F6690;
--cj-info-ink: #1E4763;
--cj-info-wash: #E2EBF1;
/* Vert tilleul olive — couleur succès UNIQUE (instruction Junior, CJ-25).
Pas de variante « foncée » sémantique : #9DB850 est clair (~2.2:1 sur blanc),
donc réservé au DÉCOR (pastille, filet, fond de badge) — jamais en texte sur blanc.
--cj-success-ink = encre foncée POSÉE SUR le wash d'un badge (ce n'est pas une famille). */
--cj-success: #9DB850;
--cj-success-ink: #44521C; /* texte foncé sur le wash olive (AA sur --cj-success-wash) */
--cj-success-wash: #EFF3DF; /* olive très pâle, accordé à #9DB850 */
--cj-block: #9E3B2E; /* blocking/error ONLY — never decorative */
--cj-block-ink: #7A2C22;
--cj-block-strong: #883326; /* terre cuite plus foncée — hover « Supprimer » (doc 12 §17.2) */
--cj-block-wash: #F1E2DD;
/* — Feedback transitoire — toasts de modération (doc 12 §17) — */
/* « deux rouges » : --cj-block = état durable ; --cj-alert = alerte transitoire. Ne pas fusionner. */
--cj-warn: #F7C24A; /* toast « forme ajustée » — attention douce (§17.1) */
--cj-warn-ink: #5C4410; /* texte sur ambre */
--cj-warn-border: #E2AE33; /* bordure du toast ambre */
--cj-warn-wash: #FBF0D4; /* wash ambre (réserve, charte) */
--cj-alert: #F0655C; /* toast « publication refusée » — alerte transitoire (§17.2, D.103) */
--cj-alert-ink: #4A1410; /* texte sur corail */
--cj-alert-border: #D94E45; /* bordure du toast corail */
/* — Typography (D.57: Inter Tight everywhere, JetBrains Mono for metadata) — */
--cj-font-title: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
--cj-font-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
--cj-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
/* Échelle allégée sur mobile (CJ-25 U6) — plancher 17px JAMAIS franchi. */
--cj-text-2xs: 0.75rem; /* 12px — legal mentions only */
--cj-text-xs: 0.8125rem; /* 13px — metadata */
--cj-text-sm: 0.9375rem; /* 15px — secondary text, help */
--cj-text-base: 1.0625rem; /* 17px — default body (senior-friendly floor) */
--cj-text-md: 1.0625rem; /* 17px — publication body (= base, pile au plancher CJ-25) */
--cj-text-lg: 1.25rem; /* 20px — card title (allégé) */
--cj-text-xl: 1.625rem; /* 26px — section title */
--cj-text-2xl: 2rem; /* 32px — masthead/hero */
--cj-leading-tight: 1.2;
--cj-leading-snug: 1.3; /* interligne registre (corps de publication) */
--cj-leading-normal: 1.5;
--cj-leading-relaxed: 1.6;
--cj-weight-normal: 400;
--cj-weight-medium: 500;
--cj-weight-semibold: 600;
--cj-weight-bold: 700;
/* — Spacing (4px base) — */
--cj-space-1: 4px; --cj-space-2: 8px; --cj-space-3: 12px;
--cj-space-4: 16px; --cj-space-5: 24px; --cj-space-6: 32px; --cj-space-8: 48px;
/* — Radii — « moins bubble, plus gazette » (CJ-25), alignés vitrine — */
--cj-radius-sm: 3px; --cj-radius-md: 6px; --cj-radius-lg: 8px; --cj-radius-pill: 999px;
/* — Elevations (surface + hairline, no heavy shadow) — */
--cj-elev-1: 0 0 0 1px var(--cj-rule);
--cj-elev-2: 0 1px 2px rgba(26, 24, 21, 0.05), 0 0 0 1px var(--cj-rule);
--cj-elev-3: 0 8px 28px rgba(26, 24, 21, 0.14);
--cj-elev-4: 0 18px 50px rgba(26, 24, 21, 0.28); /* ombre profonde des modales (maquette 05) */
--cj-elev-header: 0 4px 16px rgba(26, 24, 21, 0.13); /* ombre PERMANENTE sous les en-têtes sticky (masthead, compose, reply) */
/* derived (not in maquette): modal/sheet backdrop */
--cj-backdrop: rgba(26, 24, 21, 0.45);
/* Frosted-glass surface shared by the sticky masthead, the role-switcher menu and
the mobile search panel (instruction Junior — aligned + a touch more transparent
than the former 0.92). Always paired with `backdrop-filter: blur(var(--cj-glass-blur))`
so the content showing through stays legible. */
--cj-glass: rgba(255, 255, 255, 0.78);
--cj-glass-blur: 10px;
/* Two LESS-transparent glass variants, kept for ISO-PIXEL parity with surfaces
that predate the masthead's 0.78/blur10 and must NOT shift (CJ-91 LOT2):
--cj-glass-strong = the bottom tab bar (0.95, barely see-through);
--cj-glass-medium = the compose + syndic-reply mastheads (0.92).
Both pair with `blur(var(--cj-glass-blur-8))` — the 8px blur these three
surfaces have always used (distinct from the masthead's 10px). */
--cj-glass-strong: rgba(255, 255, 255, 0.95);
--cj-glass-medium: rgba(255, 255, 255, 0.92);
--cj-glass-blur-8: 8px;
/* — Register « gazette » primitives (CJ-91 LOT2) — */
/* Chapeau rule: the 1.5px accent-strong hairline that OPENS every register entry
(wall billet, GA topic, consolidated decision, notifications/keyring panels…),
replacing a four-sided card border. Single source for the ~9 entry shells. */
--cj-rule-chapeau: 1.5px solid var(--cj-accent-strong);
/* Liseré rule (charte v1.4 « Reco C » — entrée registre = carte légère à liseré
gauche): the 3px accent-strong LEFT border that opens every FLUX register entry
(wall billet, GA topic, consolidated decision) as a light card. It REPLACES the
top chapeau on those flux entries; `--cj-rule-chapeau` stays for the SECTION
openings (famille B) untouched. Single source for the carded entry shells. */
--cj-rule-liseré: 3px solid var(--cj-accent-strong);
/* Stamp band gradient: the very-pale-green wash that fades out under the chapeau
rule on a register STAMP (wall `.reg-stamp`, decision `.stampRow`). The blue
syndic-encart head uses --cj-info-wash instead — a different motif, not this. */
--cj-stamp-gradient: linear-gradient(
180deg,
var(--cj-accent-wash) 0%,
var(--cj-accent-wash) 55%,
transparent 100%
);
/* — Touch targets & focus — */
--cj-touch-min: 48px; /* default target */
--cj-touch-floor: 44px; /* absolute floor, never below */
--cj-focus-ring: 2px solid var(--cj-accent-strong);
/* — Layout — */
--cj-content-max: 680px; /* colonne de LECTURE (~70 car./ligne) — mesure typo, pas une limite arbitraire */
--cj-shell-max: 1200px; /* largeur max desktop : fil de lecture 680px + gouttière latérale élargie (colonne recherche du Mur ~220px). Les icônes du bandeau restent collées au bord du contenu (justify-self:start), donc l'élargissement ne profite qu'aux gouttières. */
--cj-gutter: var(--cj-space-4);
/* derived: bottom tab bar height (without safe-area inset) */
--cj-tabbar-height: 64px;
/* CJ-67: height of the fixed « environnement d'acceptance » ribbon (without
the safe-area inset). Only consumed when html[data-cj-env] is set — see
base.css, which derives --cj-env-h from it; sticky headers offset by
var(--cj-env-h, 0px), so production (attribute never set) is untouched. */
--cj-env-banner-h: 28px;
/* — Motion (sober & quick) — */
/* NOT zeroed under prefers-reduced-motion any more (Junior, global pass): the app's
transitions are small, sub-0.5s, functional FEEDBACK, exactly what reduced-motion
does NOT need suppressed. Genuinely motion-y components reduce themselves (see
base.css note). So these keep their normal durations everywhere. */
--cj-motion-fast: 120ms;
--cj-motion-normal: 200ms;
--cj-ease: cubic-bezier(0.2, 0, 0, 1);
}
/* Self-hosted fonts (GDPR: no network call to Google — DV.06).
Files live in public/fonts/ (stable URLs, preloaded from index.html).
License: public/fonts/LICENSE-OFL.txt */
/* ===== Inter Tight — titles, body, UI (D.57: single brand family) ===== */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/inter-tight-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/inter-tight-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/inter-tight-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/inter-tight-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/inter-tight-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/inter-tight-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/inter-tight-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/inter-tight-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== JetBrains Mono — editorial metadata only (dates, eyebrows, codes) ===== */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
/* U+2116 (№) added: the register stamp « № · date · heure » now renders the
numero sign in real JetBrains Mono (re-subset includes the glyph). */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/jetbrains-mono-500-latin.woff2) format('woff2');
/* U+2116 (№): the stamp « № » cell uses medium (500) — must carry the glyph. */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/jetbrains-mono-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/jetbrains-mono-600-latin.woff2) format('woff2');
/* U+2116 (№): keep the glyph reachable at semibold too (defensive). */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
Global base — reset + element defaults on warm paper.
Everything references tokens.css variables (rule #1).
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
/* rem-based type scale: follows OS/browser font-size preferences */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--cj-font-body);
font-size: var(--cj-text-base); /* 17px floor, senior-friendly */
font-weight: var(--cj-weight-normal);
line-height: var(--cj-leading-normal);
background: var(--cj-paper);
color: var(--cj-ink);
min-height: 100svh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--cj-font-title);
font-weight: var(--cj-weight-semibold);
line-height: var(--cj-leading-tight);
letter-spacing: -0.02em;
color: var(--cj-ink);
overflow-wrap: break-word;
}
p {
color: var(--cj-ink-soft);
overflow-wrap: break-word;
}
a {
color: var(--cj-accent);
text-underline-offset: 3px;
}
a:hover {
color: var(--cj-accent-strong);
}
img,
svg,
video {
display: block;
max-width: 100%;
}
button,
input,
textarea,
select {
font: inherit;
color: inherit;
}
code,
pre {
font-family: var(--cj-font-mono);
}
::selection {
background: var(--cj-accent-wash);
color: var(--cj-ink);
}
/* Focus: visible ring, never removed (components add the wash halo). */
:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
/* Reduced motion — CoproJournal stance (Junior, global pass). The app's motion is all
small, sub-0.5s, FUNCTIONAL feedback (panel slides, the composer bar↔bubble morph,
gentle fades) — not the large / parallax / looping motion `prefers-reduced-motion`
targets. Blanket-killing every transition + keyframe here made each state change SNAP
with no accessibility gain (and broke the maquette's feel). So we DON'T zero motion
globally; instead each genuinely motion-y component reduces ITSELF:
- Spinner, skeleton (States), Modal, Sheet → `animation: none`;
- moderation loader → a gentle opacity pulse instead of the bounce;
- « publié » halo → opacity-only, no fade-in.
Here we only disable smooth scrolling, which is safe and never disorienting. */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* ===== Environment banner offset (CJ-67) ===== */
/* EnvBanner (acceptance builds only) sets html[data-cj-env] and pins a fixed
28px (+ notch) ribbon on top of the viewport. The WHOLE page shifts down by
the ribbon's height via a body padding, and every sticky header offsets its
`top` with var(--cj-env-h, 0px) — the 0px fallback keeps production (where
the attribute never exists) byte-identical, visual baselines included. */
html[data-cj-env] {
--cj-env-h: calc(var(--cj-env-banner-h) + env(safe-area-inset-top, 0px));
}
html[data-cj-env] body {
padding-top: var(--cj-env-h);
}
/* ===== Shared utilities ===== */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Action-cluster tooltip pill (maquette `.reg-action__lbl`). The dark `--cj-ink`
bubble with white small text that rides ABOVE a bare action icon (history,
author Modifier/Supprimer, syndic edit/erase, admin remove). Factored here
(CJ-91 LOT2) from four identical module copies — the only divergence was the
parent `.action` hover/focus REVEAL, which stays module-local (the parent is
CSS-module-scoped). The pill is hidden by default; each module flips its
`opacity` to 1 on its own `.action:hover/:focus-visible`.
NB ISO-PIXEL: no `font-family` is set on purpose — the originals never set one
(they inherit Inter Tight from the body via the button's `font: inherit`),
so the rendered text is byte-identical to before. */
.cj-action-lbl {
position: absolute;
bottom: 100%;
right: 0;
margin-bottom: 4px;
white-space: nowrap;
background: var(--cj-ink);
color: var(--cj-paper);
font-size: var(--cj-text-2xs);
font-weight: var(--cj-weight-medium);
padding: 3px 7px;
border-radius: var(--cj-radius-sm);
opacity: 0;
pointer-events: none;
z-index: 5;
transition: opacity var(--cj-motion-fast) var(--cj-ease);
}
/* Register-entry shell (maquette `.reg-entry`, CJ-91 LOT2). The plain white block
opened by a chapeau rule that the wall billet and the consolidated decision
share BYTE-FOR-BYTE (position/flex/chapeau/padding/min-width). Each consumer
composes this utility and adds only its own extras (a `gap`, the reveal halo…),
which never collide with these properties — so global/module cascade order is
irrelevant.
Charte v1.4 « Reco C »: a flux register entry is now a LIGHT CARD opened by a
LEFT liseré (white paper, 1px hairline border, a 3px accent-strong left rule,
rounded, no shadow) — replacing the former top chapeau. `overflow: hidden` clips
the inner stamp band to the card's rounded corners. Still no raised box / heavy
shadow: the elevation cue is the hairline + liseré, not a drop shadow. */
.cj-reg-entry {
position: relative;
display: flex;
flex-direction: column;
background: var(--cj-paper);
border: 1px solid var(--cj-rule);
/* Liseré tinted by the consultation section (D.148 « variante complète »): the 3px
left rule takes `--cj-section` on the 3 section screens, falling back to the green
accent-strong everywhere else (styleguide, non-section route) — so the change is
LOCATIVE and inert off-section. An « officiel » consumer (a blue decision) re-affirms
its blue with a MORE specific longhand override on top of this. */
border-left: 3px solid var(--cj-section, var(--cj-accent-strong));
border-radius: var(--cj-radius-lg);
box-shadow: none;
overflow: hidden;
padding: 0 var(--cj-space-4) var(--cj-space-2);
/* A grid/flex item defaults to `min-width: auto` and refuses to shrink below its
content's min-content width — a long stamp/word/photo row would then push the
entry past 100vw on a narrow phone. `min-width: 0` confines overflow to the
entry's own children. */
min-width: 0;
}
._spinner_5ucdc_1 {
animation: _spin_5ucdc_1 0.8s linear infinite;
}
@keyframes _spin_5ucdc_1 {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
._spinner_5ucdc_1 {
animation: none;
}
}
._btn_1mydr_1 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--cj-space-2);
/* Leaner buttons, LOCKED to a single height (instruction Junior — « une taille max =
la taille min »): min AND max are both the 44px touch FLOOR, so every button is
exactly 44px — it can neither grow taller nor shrink below (the floor also keeps it
accessible tous âges). Horizontal padding 24px → 20px; label size untouched (15px). */
min-height: var(--cj-touch-floor);
max-height: var(--cj-touch-floor);
padding: 0 calc(var(--cj-space-4) + var(--cj-space-1));
border: 1px solid transparent;
border-radius: var(--cj-radius-sm);
font-family: var(--cj-font-body);
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-semibold);
line-height: var(--cj-leading-tight);
cursor: pointer;
text-decoration: none;
transition:
background-color var(--cj-motion-fast) var(--cj-ease),
color var(--cj-motion-fast) var(--cj-ease),
border-color var(--cj-motion-fast) var(--cj-ease);
}
._btn_1mydr_1:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
box-shadow: 0 0 0 6px var(--cj-accent-wash);
}
._btn_1mydr_1:disabled {
opacity: 0.45;
cursor: not-allowed;
}
._btn_1mydr_1[aria-busy='true'] {
opacity: 0.85;
}
._fullWidth_1mydr_42 {
width: 100%;
}
/* — Primary: the single main action of a screen — */
._primary_1mydr_47 {
background: var(--cj-accent);
color: var(--cj-paper-raised);
}
._primary_1mydr_47:hover:not(:disabled),
._primary_1mydr_47:active:not(:disabled) {
background: var(--cj-accent-strong);
}
/* — Secondary — */
._secondary_1mydr_58 {
background: var(--cj-paper-raised);
border: 1px solid var(--cj-accent);
color: var(--cj-accent);
}
._secondary_1mydr_58:hover:not(:disabled),
._secondary_1mydr_58:active:not(:disabled) {
background: var(--cj-accent-wash);
color: var(--cj-accent-strong);
}
/* — Ghost: tertiary — bordered neutral button (maquette .cj-btn--ghost), NOT a link — */
._ghost_1mydr_71 {
background: transparent;
color: var(--cj-ink-soft);
border-color: var(--cj-rule);
}
._ghost_1mydr_71:hover:not(:disabled),
._ghost_1mydr_71:active:not(:disabled) {
background: var(--cj-paper-warm);
}
/* — Danger: rare, irreversible admin-side actions only — */
._danger_1mydr_83 {
background: var(--cj-block);
color: var(--cj-paper-raised);
}
._danger_1mydr_83:hover:not(:disabled),
._danger_1mydr_83:active:not(:disabled) {
background: var(--cj-block-ink);
}
._danger_1mydr_83:focus-visible {
outline-color: var(--cj-block-ink);
box-shadow: 0 0 0 6px var(--cj-block-wash);
}
/* Status badge — square corners (radius-sm) to match the gazette parti
(maquette .cj-badge), distinct from the old pill. */
._badge_1re6s_3 {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: var(--cj-radius-sm);
font-size: var(--cj-text-xs);
font-weight: var(--cj-weight-semibold);
line-height: var(--cj-leading-normal);
white-space: nowrap;
}
._icon_1re6s_15 {
display: inline-flex;
}
._icon_1re6s_15 > * {
width: 13px;
height: 13px;
}
._modified_1re6s_24 {
background: var(--cj-neutral-wash);
color: var(--cj-neutral);
}
._syndic_1re6s_29 {
background: var(--cj-accent-wash);
color: var(--cj-accent-strong);
}
._removed_1re6s_34 {
background: var(--cj-block-wash);
color: var(--cj-block-ink);
}
._new_1re6s_39 {
background: var(--cj-info-wash);
color: var(--cj-info-ink);
}
._inForce_1re6s_44 {
background: var(--cj-success-wash);
color: var(--cj-success-ink);
}
._row_4qq85_1 {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* Flat « hashtag » label (maquette .cj-tag): green wash, small, square corners,
« # » prefix. NOT a pill. */
._chip_4qq85_9 {
position: relative;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 9px;
border: 1px solid transparent;
border-radius: var(--cj-radius-sm);
background: var(--cj-accent-wash);
color: var(--cj-accent-strong);
font-size: var(--cj-text-xs);
font-weight: var(--cj-weight-medium);
line-height: 1.5;
white-space: nowrap;
/* Tags are free text (D.12): a normal tag stays on one line, but an unusually
long one must not push the row past the screen on a narrow phone. Cap the
chip at the content width and let an over-long label break inside it rather
than overflow. */
max-width: 100%;
overflow-wrap: anywhere;
}
/* The « # » prefix — half-muted, part of the label (maquette `.cj-tag`). */
._chip_4qq85_9::before {
content: '#';
opacity: 0.5;
}
/* In-feed « hashtag » size (maquette 01-mur.html `.hashtag` — reprise À
L'IDENTIQUE) : 15px, padding 1px 7px, radius 3px, et le « # » à PLEINE
opacité (il fait partie du mot, pas un préfixe discret comme `.cj-tag`). */
._hashtag_4qq85_37 {
font-size: var(--cj-text-sm);
padding: 1px 7px;
border-radius: var(--cj-radius-sm);
}
._hashtag_4qq85_37::before {
opacity: 1;
}
._hashtag_4qq85_37._interactive_4qq85_50 {
font-size: var(--cj-text-sm);
}
._note_4qq85_54 {
font-size: var(--cj-text-2xs);
color: var(--cj-accent-strong);
opacity: 0.85;
}
._interactive_4qq85_50 {
cursor: pointer;
font: inherit;
font-size: var(--cj-text-xs);
font-weight: var(--cj-weight-medium);
transition:
background-color var(--cj-motion-fast) var(--cj-ease),
color var(--cj-motion-fast) var(--cj-ease),
border-color var(--cj-motion-fast) var(--cj-ease);
}
._interactive_4qq85_50:hover:not(:disabled) {
color: var(--cj-accent);
}
/* Invisible touch-area extension: small flat visual, ≥44px target.
The label is ~22px tall, so -12px top/bottom lifts the hit-area past 44px. */
._interactive_4qq85_50::after {
content: '';
position: absolute;
inset: -12px -6px;
border-radius: inherit;
}
._interactive_4qq85_50:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
box-shadow: 0 0 0 6px var(--cj-accent-wash);
}
._interactive_4qq85_50:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Selected filter: solid accent fill, white label (maquette .cj-tag.is-active). */
._selected_4qq85_96 {
background: var(--cj-accent);
color: var(--cj-paper-raised);
}
._selected_4qq85_96::before {
opacity: 0.7;
}
._selected_4qq85_96:hover:not(:disabled) {
color: var(--cj-paper-raised);
}
/* Proposed (new) tag — same flat form, info tone to read as « pending ». */
._newTag_4qq85_110 {
background: var(--cj-info-wash);
color: var(--cj-info-ink);
}
._newTag_4qq85_110 ._note_4qq85_54 {
color: var(--cj-info-ink);
}
._newTag_4qq85_110._selected_4qq85_96 {
background: var(--cj-info);
color: var(--cj-paper-raised);
}
/* Card radius = 6px (maquette .cj-card) — « moins bubble, plus gazette ». */
._card_ytfdi_2 {
padding: var(--cj-space-5);
border-radius: var(--cj-radius-md);
}
/* Raised: the publication card / modal body — paper-raised + hairline. */
._raised_ytfdi_8 {
background: var(--cj-paper-raised);
box-shadow: var(--cj-elev-1);
}
/* Flat: secondary grouping on warm paper, no shadow. */
._flat_ytfdi_14 {
background: var(--cj-paper-warm);
border: 1px solid var(--cj-rule);
}
/* Shared field styling for Input + TextArea (doc 12 §6.2). */
._control_9sa0w_3 {
width: 100%;
min-height: var(--cj-touch-min);
padding: 12px 14px;
background: var(--cj-paper-warm);
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-sm);
font-family: var(--cj-font-body);
font-size: var(--cj-text-base); /* 17px — readable for all ages */
line-height: var(--cj-leading-normal);
color: var(--cj-ink);
transition:
border-color var(--cj-motion-fast) var(--cj-ease),
box-shadow var(--cj-motion-fast) var(--cj-ease);
}
._control_9sa0w_3::placeholder {
color: var(--cj-ink-muted);
}
._control_9sa0w_3:focus-visible {
outline: none; /* replaced by the accent ring below */
border-color: var(--cj-accent);
box-shadow: 0 0 0 3px var(--cj-accent-wash);
}
._textarea_9sa0w_29 {
min-height: 132px;
resize: vertical;
}
/* Error: border-block + message/icon carry the state (never color alone). */
._invalid_9sa0w_35 {
border-color: var(--cj-block);
}
._invalid_9sa0w_35:focus-visible {
border-color: var(--cj-block);
box-shadow: 0 0 0 3px var(--cj-block-wash);
}
._field_1hn0i_1 {
display: block;
}
._label_1hn0i_5 {
display: block;
margin-bottom: var(--cj-space-2);
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
}
._counter_1hn0i_13 {
margin-top: var(--cj-space-1);
font-size: var(--cj-text-xs);
color: var(--cj-ink-muted);
text-align: right;
}
/* Over the limit: the only place a counter turns block (doc 12 §6.2). */
._counterOver_1hn0i_21 {
color: var(--cj-block-ink);
font-weight: var(--cj-weight-semibold);
}
._error_1hn0i_26 {
display: flex;
gap: var(--cj-space-2);
align-items: flex-start;
margin-top: var(--cj-space-2);
font-size: var(--cj-text-sm);
color: var(--cj-block-ink);
}
._error_1hn0i_26 svg {
flex-shrink: 0;
margin-top: 2px;
}
._help_1hn0i_40 {
margin-top: var(--cj-space-2);
font-size: var(--cj-text-sm);
color: var(--cj-ink-muted);
line-height: var(--cj-leading-normal);
}
._banner_c7r1l_1 {
display: flex;
gap: var(--cj-space-3);
align-items: flex-start;
padding: var(--cj-space-4);
border-left: 4px solid;
border-radius: 0 var(--cj-radius-md) var(--cj-radius-md) 0;
}
._icon_c7r1l_10 {
display: inline-flex;
flex-shrink: 0;
margin-top: 2px;
/* CJ-25 U12 — quiet marker, not a badge: one notch back from the text. */
opacity: 0.8;
}
._body_c7r1l_18 {
display: block;
}
._title_c7r1l_22 {
font-weight: var(--cj-weight-semibold);
}
._title_c7r1l_22::after {
content: ' ';
}
._text_c7r1l_30 {
font-size: var(--cj-text-base);
line-height: var(--cj-leading-normal);
}
/* Info — replaces red for "look here" (novelty, pedagogy, anti-duplication). */
._info_c7r1l_36 {
background: var(--cj-info-wash);
border-left-color: var(--cj-info);
color: var(--cj-info-ink);
}
._success_c7r1l_42 {
background: var(--cj-success-wash);
border-left-color: var(--cj-success);
color: var(--cj-success-ink);
}
._neutral_c7r1l_48 {
background: var(--cj-neutral-wash);
border-left-color: var(--cj-neutral);
color: var(--cj-ink-soft);
}
/* Warn — an amber nudge asking for a fix (e.g. « set an AG date »). NOT an error/block
(that stays the single coral in-place note); the amber sits between info and block. */
._warn_c7r1l_56 {
background: var(--cj-warn-wash);
border-left-color: var(--cj-warn);
color: var(--cj-warn-ink);
}
/* Doc 12 §6.6/6.7/6.8 — moderation validation panel. Info tone, elev-2. */
._panel_1ldgl_3 {
padding: var(--cj-space-4) var(--cj-space-5);
background: var(--cj-info-wash);
border-left: 4px solid var(--cj-info);
border-radius: 0 var(--cj-radius-md) var(--cj-radius-md) 0;
box-shadow: var(--cj-elev-2);
}
._position_1ldgl_11 {
font-family: var(--cj-font-mono);
font-size: var(--cj-text-xs);
letter-spacing: 0.08em;
color: var(--cj-ink-muted);
margin-bottom: var(--cj-space-2);
}
._head_1ldgl_19 {
display: flex;
align-items: center;
gap: var(--cj-space-2);
font-size: var(--cj-text-base);
font-weight: var(--cj-weight-semibold);
color: var(--cj-info-ink);
letter-spacing: normal;
}
._head_1ldgl_19 svg {
flex-shrink: 0;
}
/* CJ-25 U12 — the « i » marker reads as a quiet cue, not a badge:
smaller (16px) + one tone softer than the heading text, thinner stroke. */
._headIcon_1ldgl_35 {
color: var(--cj-info);
opacity: 0.8;
stroke-width: 1.75;
}
._note_1ldgl_41 {
margin-top: var(--cj-space-2);
font-size: var(--cj-text-sm);
color: var(--cj-info-ink);
line-height: var(--cj-leading-normal);
}
/* The version that WILL be published — clearly distinct, raised paper. */
._preview_1ldgl_49 {
margin-top: var(--cj-space-4);
padding: var(--cj-space-4);
background: var(--cj-paper-raised);
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-md);
}
._previewTitle_1ldgl_57 {
font-size: var(--cj-text-md);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
}
._previewBody_1ldgl_63 {
margin-top: var(--cj-space-2);
font-size: var(--cj-text-base);
color: var(--cj-ink-soft);
line-height: var(--cj-leading-normal);
}
._tags_1ldgl_70 {
margin-top: var(--cj-space-3);
}
/* New tag confirmation (§6.8) — unchecked by default, 48px target. */
._newTag_1ldgl_75 {
display: flex;
gap: var(--cj-space-3);
align-items: flex-start;
margin-top: var(--cj-space-3);
padding: var(--cj-space-3) var(--cj-space-4);
min-height: var(--cj-touch-min);
background: var(--cj-info-wash);
border-radius: var(--cj-radius-sm);
cursor: pointer;
}
._checkbox_1ldgl_87 {
flex-shrink: 0;
width: 22px;
height: 22px;
margin-top: 2px;
accent-color: var(--cj-info);
cursor: pointer;
}
._checkbox_1ldgl_87:focus-visible {
outline: 2px solid var(--cj-info);
outline-offset: 2px;
}
._newTagBody_1ldgl_101 {
display: block;
}
._newTagLabel_1ldgl_105 {
font-size: var(--cj-text-sm);
color: var(--cj-info-ink);
}
._newTagHelp_1ldgl_110 {
display: block;
margin-top: 3px;
font-size: var(--cj-text-xs);
color: var(--cj-ink-muted);
}
._actions_1ldgl_117 {
display: flex;
gap: var(--cj-space-3);
flex-wrap: wrap;
margin-top: var(--cj-space-4);
}
/* In-place verdict note (maquette 03-publier). Quiet info tone, never block.
Tokens only. */
._modnote_1acgk_4 {
margin-top: var(--cj-space-4);
padding-top: 14px;
border-top: 1px solid var(--cj-rule);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
._infoNote_1acgk_14 {
display: inline-flex;
align-items: baseline;
gap: 6px;
background: none;
border: none;
padding: 0;
cursor: pointer;
text-align: left;
color: var(--cj-accent-strong);
font: inherit;
font-size: var(--cj-text-sm);
}
._infoNote_1acgk_14 svg {
align-self: center;
flex: none;
}
/* Official-reply voice (maquette 07-repondre `.info-note`): the « i » note wears
the institutional blue instead of the green action colour. */
._infoNote_1acgk_14._syndic_1acgk_35 {
color: var(--cj-info);
}
/* Verdict tones (instruction Junior): a moderation WARNING (amber) and a BLOCK (red)
must clearly STAND OUT — not the quiet green info. Both become a soft washed box with
a coloured left rule; the block adds an alert triangle + heavier ink so the reason for
the refusal is unmissable. Semantic tokens only (--cj-warn-* / --cj-block-*). */
._modnote_1acgk_4._adjusted_1acgk_43,
._modnote_1acgk_4._refused_1acgk_44 {
border-top: none;
border-left: 3px solid var(--cj-rule);
padding: 12px 14px;
border-radius: var(--cj-radius-sm);
}
._modnote_1acgk_4._adjusted_1acgk_43 {
background: var(--cj-warn-wash);
border-left-color: var(--cj-warn-border);
}
._modnote_1acgk_4._refused_1acgk_44 {
background: var(--cj-block-wash);
border-left-color: var(--cj-block);
}
._infoNote_1acgk_14._adjusted_1acgk_43 {
color: var(--cj-warn-ink);
font-weight: var(--cj-weight-medium);
}
._infoNote_1acgk_14._adjusted_1acgk_43 svg {
color: var(--cj-warn-border);
}
._infoNote_1acgk_14._refused_1acgk_44 {
color: var(--cj-block-ink);
font-weight: var(--cj-weight-semibold);
}
._infoNote_1acgk_14._refused_1acgk_44 svg {
color: var(--cj-block);
}
._origToggle_1acgk_74 {
background: none;
border: none;
color: var(--cj-ink-muted);
font: inherit;
font-size: var(--cj-text-sm);
text-decoration: underline;
cursor: pointer;
padding: 0;
}
._orig_1acgk_74 {
margin: 2px 0 0;
border-left: 3px solid var(--cj-rule);
padding: 2px 0 2px 14px;
background: none;
color: var(--cj-ink-muted);
font-size: var(--cj-text-sm);
line-height: 1.55;
font-style: italic;
}
._origLbl_1acgk_96 {
display: block;
font-family: var(--cj-font-mono);
font-size: 11px;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--cj-ink-muted);
margin-bottom: 4px;
}
/* "L'assistant relit votre texte…" overlay (maquette 03-publier). Brand-coloured
bouncing dots; motion zeroed under prefers-reduced-motion. Tokens only. */
._loader_17yvg_4 {
position: fixed;
inset: 0;
z-index: 150;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
}
._box_17yvg_15 {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--cj-space-4);
}
._dots_17yvg_22 {
display: flex;
gap: 9px;
}
._dots_17yvg_22 span {
width: 12px;
height: 12px;
border-radius: var(--cj-radius-pill);
background: var(--cj-accent);
animation: _cj-bounce_17yvg_1 0.9s infinite ease-in-out;
}
._dots_17yvg_22 span:nth-child(2) {
background: var(--cj-accent-soft);
animation-delay: 0.15s;
}
._dots_17yvg_22 span:nth-child(3) {
background: var(--cj-success);
animation-delay: 0.3s;
}
/* Official-reply voice (maquette 07-repondre): the third dot wears the
institutional blue instead of the green. Everything else stays identical. */
._syndic_17yvg_47 span:nth-child(3) {
background: var(--cj-info);
}
@keyframes _cj-bounce_17yvg_1 {
0%,
80%,
100% {
transform: translateY(0);
opacity: 0.45;
}
40% {
transform: translateY(-11px);
opacity: 1;
}
}
/* Opacity-only pulse for reduced-motion: no movement, but the loader still SHOWS
it's working (a frozen loader during a multi-second upload reads as a hang). */
@keyframes _cj-pulse_17yvg_1 {
0%,
100% {
opacity: 0.35;
}
50% {
opacity: 1;
}
}
._label_17yvg_76 {
font-size: var(--cj-text-sm);
color: var(--cj-ink-muted);
}
@media (prefers-reduced-motion: reduce) {
/* Drop the bounce (movement) but keep a gentle opacity pulse, STAGGERED per dot
so it reads as a travelling wave (not all blinking at once). `!important` beats
the global reduced-motion reset (base.css `* { animation-duration: 0.01ms }`);
animation-delay isn't reset there, so the stagger survives. */
._dots_17yvg_22 span {
animation: _cj-pulse_17yvg_1 1.2s infinite ease-in-out !important;
}
._dots_17yvg_22 span:nth-child(2) {
animation-delay: 0.2s !important;
}
._dots_17yvg_22 span:nth-child(3) {
animation-delay: 0.4s !important;
}
}
/* Transient verdict toast (maquette 03-publier · doc 12 §17). Single line, pill,
anchored above the action bar. Tokens only — the feedback trio is tokenised
(--cj-warn / --cj-alert, D.104/D.105). */
._toast_khovr_5 {
position: fixed;
left: 50%;
bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--cj-space-5));
transform: translate(-50%, 12px);
z-index: 120;
display: flex;
align-items: center;
gap: var(--cj-space-2);
max-width: calc(100vw - 2 * var(--cj-gutter));
white-space: nowrap;
border-radius: var(--cj-radius-pill);
padding: 10px 18px;
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-semibold);
box-shadow: var(--cj-elev-3);
opacity: 0;
visibility: hidden;
transition: opacity var(--cj-motion-normal) var(--cj-ease),
transform var(--cj-motion-normal) var(--cj-ease);
}
._toast_khovr_5._show_khovr_27 {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
/* Wall variant — the Wall stacks TWO fixed bottom bars (composer ~56px sitting
on the 64px tab bar). The default anchor (~one action bar) would sit under
them, so lift the toast clear above both (maquette 01-mur.html `bottom:168px`):
tab bar + composer + breathing room, all tokenised + safe-area aware. */
._wall_khovr_37 {
bottom: calc(
var(--cj-tabbar-height) + 56px + var(--cj-space-6) + var(--cj-space-3) +
env(safe-area-inset-bottom, 0px)
);
}
._toast_khovr_5 svg {
flex: none;
}
/* Success = a PALE pill (maquette 07-repondre `.toast--success`): olive wash bg,
dark olive ink, and the AUTHORITATIVE success colour --cj-success (#9DB850, D.105)
as the border — décor only, exactly as the charte prescribes (filet/pastille,
never text since ~2.2:1 on white). Same treatment as the success Banner
(border = --cj-success). Same family as the warn (ambre) / error (corail) toasts,
which are all pale-tinted pills, never a flat saturated fill. */
._success_khovr_54 {
background: var(--cj-success-wash);
color: var(--cj-success-ink);
border: 1px solid var(--cj-success);
}
._warning_khovr_60 {
background: var(--cj-warn);
color: var(--cj-warn-ink);
border: 1px solid var(--cj-warn-border);
}
._error_khovr_66 {
background: var(--cj-alert);
color: var(--cj-alert-ink);
border: 1px solid var(--cj-alert-border);
}
/* Full-screen photo viewer (maquette 03-publier). Dark backdrop, circular
controls. Tokens only. */
._lightbox_14t7d_4 {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(26, 24, 21, 0.92);
display: flex;
align-items: center;
justify-content: center;
}
._img_14t7d_14 {
max-width: 90vw;
max-height: 82vh;
border-radius: var(--cj-radius-sm);
}
._btn_14t7d_20 {
position: absolute;
background: rgba(255, 255, 255, 0.14);
color: var(--cj-paper);
border: none;
width: 44px;
height: 44px;
border-radius: var(--cj-radius-pill);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
._btn_14t7d_20:hover {
background: rgba(255, 255, 255, 0.24);
}
._prev_14t7d_38 {
left: 16px;
top: 50%;
transform: translateY(-50%);
}
._next_14t7d_44 {
right: 16px;
top: 50%;
transform: translateY(-50%);
}
._close_14t7d_50 {
top: 16px;
right: 16px;
}
._del_14t7d_55 {
left: 16px;
bottom: 16px;
background: rgba(240, 101, 92, 0.22);
}
._del_14t7d_55:hover {
background: var(--cj-block);
}
._count_14t7d_65 {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: var(--cj-paper);
font-family: var(--cj-font-mono);
font-size: var(--cj-text-xs);
letter-spacing: 0.1em;
}
._wrap_74bst_1 {
display: inline-flex;
align-items: center;
gap: var(--cj-space-2);
flex-wrap: wrap;
}
/* Small, sober pill — deliberately quieter than the old « Marquer mon intérêt »
button (Junior S1). Hugs its content. */
._btn_74bst_10 {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
/* Icon-only now (the « +1/−1 » text is gone, instruction Junior): a compact,
near-round thumb button — bigger thumb, balanced padding. */
min-height: 34px;
padding: 6px;
background: var(--cj-paper-raised);
border: 1px solid var(--cj-accent-soft);
border-radius: var(--cj-radius-pill);
font-family: var(--cj-font-body);
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-medium);
line-height: var(--cj-leading-tight);
color: var(--cj-accent-strong);
cursor: pointer;
transition:
background-color var(--cj-motion-fast) var(--cj-ease),
border-color var(--cj-motion-fast) var(--cj-ease),
transform var(--cj-motion-fast) var(--cj-ease);
}
._btn_74bst_10:hover:not(:disabled),
._btn_74bst_10:active:not(:disabled) {
background: var(--cj-accent-wash);
border-color: var(--cj-accent);
}
/* A tiny press feedback, complementing the thumb bump. */
._btn_74bst_10:active:not(:disabled) {
transform: scale(0.96);
}
._btn_74bst_10:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
._btn_74bst_10:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Marked: filled accent wash + a touch stronger border — a calm confirmation,
never a festive "liked" state. Pairs with the FILLED thumb + « −1 ». */
._marked_74bst_57 {
background: var(--cj-accent-wash);
border-color: var(--cj-accent);
}
/* The thumb sits in its own box so it can lift independently of the pill (the
pill must not reflow). `transform-origin: bottom` keeps the wrist anchored as
the thumb rises. */
._thumb_74bst_65 {
display: inline-flex;
transform-origin: bottom center;
will-change: transform;
}
._icon_74bst_71 {
display: block;
}
/* Facebook-style "bump": the thumb lifts up and swells, then settles back to its
place. A pronounced flourish (instruction Junior — « plus grande ») : lift +
scale to 1.5, 250ms. Plays once per fresh mark. */
._bump_74bst_78 {
animation: _thumbBump_74bst_1 250ms var(--cj-ease) both;
}
@keyframes _thumbBump_74bst_1 {
0% {
transform: translateY(0) scale(1);
}
35% {
transform: translateY(-10px) scale(1.5);
}
65% {
transform: translateY(-2px) scale(1.25);
}
100% {
transform: translateY(0) scale(1);
}
}
/* Count: an explicit, self-explanatory line (« N intéressés », Junior #4) —
quiet and informative, never a big aggressive number (D.07). */
._count_74bst_99 {
font-size: var(--cj-text-sm);
color: var(--cj-ink-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* NB: the bump is deliberately NOT softened under prefers-reduced-motion (instruction
Junior — « forcer le gros bump partout ») : the full thumbBump plays for everyone,
regardless of the OS « reduce motion » setting. */
/* Loading / empty / error states (doc 12 §6.10). */
/* ===== Loading — skeleton cards, gentle pulse ===== */
._loading_8q0a1_4 {
display: flex;
flex-direction: column;
gap: var(--cj-space-5);
}
._skeleton_8q0a1_10 {
padding: var(--cj-space-5);
background: var(--cj-paper-raised);
border-radius: var(--cj-radius-md); /* match Card (6px) — skeletons stand in for cards */
box-shadow: var(--cj-elev-1);
}
._skelLine_8q0a1_17 {
display: block;
height: 13px;
margin-bottom: var(--cj-space-3);
background: var(--cj-paper-warm);
border-radius: 4px;
animation: _pulse_8q0a1_1 1.4s ease-in-out infinite;
}
._skelLine_8q0a1_17:last-child {
margin-bottom: 0;
}
._skelW1_8q0a1_30 {
width: 40%;
}
._skelW2_8q0a1_33 {
width: 85%;
}
._skelW3_8q0a1_36 {
width: 65%;
}
@keyframes _pulse_8q0a1_1 {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
._skelLine_8q0a1_17 {
animation: none;
}
}
/* ===== Empty — benevolent ===== */
._empty_8q0a1_57 {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--cj-space-8) var(--cj-space-5);
color: var(--cj-ink-muted);
}
/* CJ-76 e: picks up the LOCATIVE section accent (--cj-section, D.148) set on the
shell per route, so the empty-state mark echoes "which screen" like the kicker
does — falling back to the neutral accent where no section is set (e.g. admin). */
._emptyIcon_8q0a1_69 {
display: inline-flex;
margin-bottom: var(--cj-space-3);
color: var(--cj-section, var(--cj-accent-soft));
}
._emptyMsg_8q0a1_75 {
font-size: var(--cj-text-base);
color: var(--cj-ink-soft);
max-width: 36ch;
}
._emptyAction_8q0a1_81 {
margin-top: var(--cj-space-4);
}
/* ===== Error & block — desaturated box, never bright red ===== */
._errorBox_8q0a1_86 {
padding: var(--cj-space-4) var(--cj-space-5);
background: var(--cj-block-wash);
border-left: 4px solid var(--cj-block);
border-radius: 0 var(--cj-radius-md) var(--cj-radius-md) 0;
}
._errorTitle_8q0a1_93 {
display: flex;
gap: var(--cj-space-2);
align-items: center;
font-size: var(--cj-text-base);
font-weight: var(--cj-weight-semibold);
color: var(--cj-block-ink);
}
._errorTitle_8q0a1_93 svg {
flex-shrink: 0;
}
._errorMsg_8q0a1_106 {
margin-top: var(--cj-space-2);
font-size: var(--cj-text-sm);
color: var(--cj-ink-soft);
line-height: var(--cj-leading-normal);
}
._errorAction_8q0a1_113 {
margin-top: var(--cj-space-4);
}
._overlay_15ead_1 {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
._backdrop_15ead_10 {
position: absolute;
inset: 0;
background: var(--cj-backdrop);
animation: _fade_15ead_1 var(--cj-motion-normal) var(--cj-ease);
}
._sheet_15ead_17 {
position: relative;
width: 100%;
max-width: var(--cj-content-max);
margin: 0 auto;
padding: var(--cj-space-5);
/* Safe-area inset so the sheet clears the home indicator on mobile. */
padding-bottom: calc(var(--cj-space-5) + env(safe-area-inset-bottom, 0px));
background: var(--cj-paper-raised);
border-radius: var(--cj-radius-lg) var(--cj-radius-lg) 0 0;
box-shadow: var(--cj-elev-3);
animation: _slide-up_15ead_1 var(--cj-motion-normal) var(--cj-ease);
/* Cap the sheet to the viewport and lay it out as a column so the BODY can scroll
inside it (a long version history must be scrollable — body scroll is locked while
the sheet is open). The header (title + close) and any footer actions stay pinned. */
display: flex;
flex-direction: column;
max-height: 88dvh;
}
._header_15ead_37 {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--cj-space-3);
}
._title_15ead_44 {
font-size: var(--cj-text-lg);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
}
._close_15ead_50 {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--cj-touch-min);
height: var(--cj-touch-min);
margin: calc(var(--cj-space-2) * -1) calc(var(--cj-space-2) * -1) 0 0;
background: transparent;
border: none;
border-radius: var(--cj-radius-sm);
color: var(--cj-ink-soft);
cursor: pointer;
}
._close_15ead_50:hover {
background: var(--cj-paper-warm);
color: var(--cj-ink);
}
._close_15ead_50:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
._body_15ead_75 {
margin-top: var(--cj-space-3);
font-size: var(--cj-text-base);
color: var(--cj-ink-soft);
line-height: var(--cj-leading-normal);
/* The scrollable region of the sheet: takes the remaining height and scrolls when
the content (e.g. a long history) overflows. min-height:0 lets a flex child shrink
below its content size so the overflow actually scrolls. */
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
._actions_15ead_89 {
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
margin-top: var(--cj-space-5);
}
@keyframes _fade_15ead_1 {
from {
opacity: 0;
}
}
@keyframes _slide-up_15ead_1 {
from {
transform: translateY(16px);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
._backdrop_15ead_10,
._sheet_15ead_17 {
animation: none;
}
}
/* Public « voir l'historique » icon button — same bare treatment as the author
Modifier/Supprimer and syndic edit/erase icons (maquette 05-actions
`.reg-action`), so the history reads as one of the action-cluster icons. The
hit-box size is set inline by the caller (36px on the wall, 30px in the syndic
header). Token-only (no raw hex). */
._action_3ofe2_7 {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: none;
border-radius: var(--cj-radius-sm);
color: var(--cj-ink-faint);
cursor: pointer;
flex: none;
transition:
color var(--cj-motion-fast) var(--cj-ease),
background var(--cj-motion-fast) var(--cj-ease);
}
._action_3ofe2_7 svg {
/* The glyph size is driven by the IconHistory `size` prop; svg fills it. */
display: block;
}
._action_3ofe2_7:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
/* Wall (publication cluster): warms toward the register green on hover, echoing
the pencil — history is a neutral, everyday affordance. */
._wall_3ofe2_35:hover {
background: var(--cj-paper-warm);
color: var(--cj-accent-strong);
}
/* Syndic header: tints with the institutional blue wash, matching the edit/erase
icons inside the blue encart. */
._syndic_3ofe2_42:hover {
background: var(--cj-info-wash);
color: var(--cj-info);
}
/* Tooltip bubble = the shared global `.cj-action-lbl` (base.css, CJ-91 LOT2).
Only the parent-scoped hover/focus REVEAL stays here (`.action` is module-local).
Shown on hover AND keyboard focus. */
._action_3ofe2_7:hover .cj-action-lbl,
._action_3ofe2_7:focus-visible .cj-action-lbl {
opacity: 1;
}
/* « Modifier » icon button — same bare treatment as the author Modifier/Supprimer
and syndic edit/erase icons (maquette 05-actions `.reg-action`), so the edit
action reads as one of the action-cluster icons (D.115/CJ-79). Sibling of
HistoryButton.module.css. The hit-box size is set inline by the caller (36px on
the register cards). Token-only (no raw hex). */
._action_90tb2_7 {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: none;
border-radius: var(--cj-radius-sm);
color: var(--cj-ink-faint);
cursor: pointer;
flex: none;
transition:
color var(--cj-motion-fast) var(--cj-ease),
background var(--cj-motion-fast) var(--cj-ease);
}
._action_90tb2_7 svg {
/* The glyph size is driven by the IconPencil `size` prop; svg fills it. */
display: block;
}
._action_90tb2_7:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
/* Register cards / wall cluster: warms toward the register green on hover,
echoing the author pencil. */
._wall_90tb2_35:hover {
background: var(--cj-paper-warm);
color: var(--cj-accent-strong);
}
/* Syndic header: tints with the institutional blue wash, matching the edit/erase
icons inside the blue encart. */
._syndic_90tb2_42:hover {
background: var(--cj-info-wash);
color: var(--cj-info);
}
/* Tooltip bubble = the shared global `.cj-action-lbl` (base.css, CJ-91 LOT2).
Only the parent-scoped hover/focus REVEAL stays here (`.action` is module-local).
Shown on hover AND keyboard focus. */
._action_90tb2_7:hover .cj-action-lbl,
._action_90tb2_7:focus-visible .cj-action-lbl {
opacity: 1;
}
/* Centred confirmation dialog (maquette 05-actions `.modal`). A small card
floated mid-viewport over a dimmed backdrop. Token-only (no raw hex). */
._overlay_1qvoj_4 {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--cj-space-5);
}
._backdrop_1qvoj_14 {
position: absolute;
inset: 0;
background: var(--cj-backdrop);
animation: _fade_1qvoj_1 var(--cj-motion-normal) var(--cj-ease);
}
._card_1qvoj_21 {
position: relative;
width: 100%;
max-width: 360px;
background: var(--cj-paper-raised);
border-radius: var(--cj-radius-lg);
box-shadow: var(--cj-elev-4);
/* Asymmetric card padding mirrors the maquette literal (05-actions
`.modal__card`); no token captures this exact 26/24/22 trio. */
padding: 26px 24px 22px;
text-align: center;
animation: _pop_1qvoj_1 var(--cj-motion-normal) var(--cj-ease);
}
/* Round icon medallion at the head — neutral by default, terre-cuite for danger
(maquette `.modal__icon`, block tone). */
._icon_1qvoj_37 {
width: 48px;
height: 48px;
margin: 0 auto var(--cj-space-3);
border-radius: var(--cj-radius-pill);
display: flex;
align-items: center;
justify-content: center;
}
._iconNeutral_1qvoj_47 {
background: var(--cj-neutral-wash);
color: var(--cj-ink-muted);
}
._iconBlock_1qvoj_52 {
background: var(--cj-block-wash);
color: var(--cj-block);
}
._icon_1qvoj_37 svg {
width: 22px;
height: 22px;
}
._title_1qvoj_62 {
font-size: var(--cj-text-lg);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
margin: 0 0 var(--cj-space-2);
}
._body_1qvoj_69 {
font-size: var(--cj-text-sm);
color: var(--cj-ink-soft);
line-height: var(--cj-leading-normal);
}
/* Actions laid SIDE BY SIDE (maquette `.modal__actions`), each flexing to share
the row evenly. The caller passes two Buttons; `fullWidth` makes each fill its
half. They stack only as a last resort on very narrow viewports. */
._actions_1qvoj_78 {
margin-top: var(--cj-space-5);
display: flex;
gap: var(--cj-space-3);
}
._actions_1qvoj_78 > * {
flex: 1 1 0;
min-width: 0;
}
@keyframes _fade_1qvoj_1 {
from {
opacity: 0;
}
}
@keyframes _pop_1qvoj_1 {
from {
transform: translateY(10px) scale(0.97);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
._backdrop_1qvoj_14,
._card_1qvoj_21 {
animation: none;
}
}
/* Masthead overflow (« ⋯ ») menu (A3). The trigger reuses the masthead's square
icon-button chrome (40px, hairline, radius-sm); the popover reuses the
RoleSwitcher menu grammar (OPAQUE raised paper + elevation shadow, never frosted
glass — a menu floats over the feed and must stay legible). Token-only. */
._root_1o0y1_6 {
position: relative;
display: inline-flex;
}
/* Square icon button — pixel-identical to the masthead bell/search toggle so the
⋯ sits in the same icon cluster without looking foreign. */
._trigger_1o0y1_13 {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-sm);
background: none;
color: var(--cj-ink-soft);
cursor: pointer;
}
._trigger_1o0y1_13:hover {
color: var(--cj-ink);
}
._trigger_1o0y1_13:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
/* Open: accent tint, mirrors the masthead's active icon-button state. */
._triggerOpen_1o0y1_36 {
color: var(--cj-accent);
border-color: var(--cj-accent-soft);
background: var(--cj-accent-wash);
}
/* Popover — dropped under the trigger, anchored to its RIGHT edge (it sits at the
far right of the masthead). OPAQUE raised paper + elevation shadow (RoleSwitcher
grammar): never frosted glass, so it never bleeds the feed through. */
._menu_1o0y1_45 {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 60;
min-width: 220px;
max-width: min(86vw, 320px);
padding: var(--cj-space-2);
background: var(--cj-paper-raised);
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-md);
box-shadow: var(--cj-elev-3);
display: flex;
flex-direction: column;
gap: 1px;
}
._item_1o0y1_62 {
display: flex;
align-items: center;
gap: var(--cj-space-2);
width: 100%;
padding: 8px 10px;
border: none;
background: none;
border-radius: var(--cj-radius-sm);
cursor: pointer;
text-align: left;
font: inherit;
font-size: var(--cj-text-sm);
color: var(--cj-ink-soft);
}
._item_1o0y1_62:hover {
background: var(--cj-paper-warm);
color: var(--cj-ink);
}
._item_1o0y1_62:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: -2px;
}
/* Fixed leading slot so every label aligns whatever its glyph width. */
._itemIcon_1o0y1_89 {
flex: none;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--cj-accent-strong);
}
._itemMain_1o0y1_99 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
._itemLabel_1o0y1_106 {
font-weight: var(--cj-weight-medium);
color: var(--cj-ink);
}
/* Secondary line under a label (the copropriété name of a role row). */
._itemNote_1o0y1_112 {
font-size: var(--cj-text-2xs);
color: var(--cj-ink-muted);
}
/* Hairline divider between the action group and the role group. */
._sep_1o0y1_118 {
height: 1px;
margin: var(--cj-space-1) 6px;
background: var(--cj-rule);
}
/* Small non-interactive section label (« Changer de rôle »). */
._heading_1o0y1_125 {
padding: 6px 10px 2px;
font-size: var(--cj-text-2xs);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink-muted);
}
/* The standardised « retour » affordance for full-screen flows (CJ-62 B). Chevron
« ‹ » + label, top-left, with a ≥44px touch target (senior-friendly). Quiet mono
ink so it reads as navigation, not an action button. */
._back_rujat_5 {
display: inline-flex;
align-items: center;
gap: 6px;
/* ≥44px touch target — the negative inline margin keeps the chevron optically
flush with the content edge despite the generous padding. */
min-height: 44px;
padding: 8px 8px 8px 4px;
margin-left: -4px;
border: none;
background: none;
color: var(--cj-ink-muted);
font-family: var(--cj-font-body);
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-medium);
cursor: pointer;
}
._back_rujat_5:hover {
color: var(--cj-ink);
}
._back_rujat_5:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
border-radius: var(--cj-radius-sm);
}
._back_rujat_5:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Shared segmented tabs (CJ-113) — tokens/rules copied VERBATIM from the original
inline `/pv` tabs (MinutesScreen.module.css `.tabs/.tab/.tabActive`) so the visual
baselines (CJ-98) are unaffected by the extraction. */
._tabs_utlyp_2 {
display: flex;
gap: var(--cj-space-1);
margin: var(--cj-space-4) 0 var(--cj-space-3);
border-bottom: 1px solid var(--cj-rule);
}
._tab_utlyp_2 {
flex: 1;
min-height: var(--cj-touch-min);
padding: var(--cj-space-2) var(--cj-space-1);
background: none;
border: none;
border-bottom: 2px solid transparent;
font-family: var(--cj-font-body);
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-medium);
color: var(--cj-ink-muted);
cursor: pointer;
}
._tab_utlyp_2:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: -2px;
}
._tabActive_utlyp_2 {
color: var(--cj-accent);
border-bottom-color: var(--cj-accent);
}
/* PWA invites + push topic choice (CJ-07). Bricks compose the design-system
tokens only (doc 12 §08) — warm paper, calm states, no alarming colour. */
/* Secondary helper line under an invite body (install hint, push privacy). */
._hint_zdn6a_5,
._privacy_zdn6a_6 {
margin-top: var(--cj-space-3);
font-size: var(--cj-text-sm);
color: var(--cj-ink-muted);
line-height: var(--cj-leading-normal);
}
._noneHint_zdn6a_13 {
margin-top: var(--cj-space-3);
font-size: var(--cj-text-sm);
color: var(--cj-ink-soft);
}
/* ===== Push topic checkboxes ===== */
._topics_zdn6a_20 {
list-style: none;
margin: var(--cj-space-4) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--cj-space-2);
}
._topicRow_zdn6a_29 {
display: flex;
align-items: flex-start;
gap: var(--cj-space-3);
/* Whole row is a comfortable target; the label fills it (cursor on text). */
padding: var(--cj-space-2) 0;
min-height: var(--cj-touch-min);
}
._topicCheck_zdn6a_38 {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-top: 2px;
accent-color: var(--cj-accent);
cursor: pointer;
}
._topicCheck_zdn6a_38:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
border-radius: var(--cj-radius-sm);
}
._topicCheck_zdn6a_38:disabled {
cursor: not-allowed;
opacity: 0.55;
}
._topicLabel_zdn6a_58 {
display: flex;
flex-direction: column;
gap: 2px;
cursor: pointer;
}
._topicCheck_zdn6a_38:disabled + ._topicLabel_zdn6a_58 {
cursor: not-allowed;
opacity: 0.7;
}
._topicTitle_zdn6a_70 {
font-size: var(--cj-text-base);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
line-height: var(--cj-leading-tight);
}
._topicHelp_zdn6a_77 {
font-size: var(--cj-text-sm);
color: var(--cj-ink-muted);
line-height: var(--cj-leading-normal);
}
/* Offline banner (CJ-76 a) — neutral secondary surface, never the error tone. */
._banner_8lf66_2 {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--cj-space-2);
padding: var(--cj-space-3) var(--cj-space-5);
background: var(--cj-paper-warm);
color: var(--cj-ink-soft);
font-size: var(--cj-text-sm);
text-align: center;
justify-content: center;
border-bottom: 1px solid var(--cj-rule);
}
._title_8lf66_16 {
font-weight: var(--cj-weight-semibold);
}
._body_8lf66_20 {
color: var(--cj-ink-muted);
}
/* « Nouvelle version disponible » banner (CJ-63) — good-news system notice:
green accent wash, never the amber (EnvBanner) or coral (ErrorState) tones.
Inline under the masthead (same slot family as OfflineBanner, which it sits
directly above) — NOT a fixed overlay, the two stack naturally in flow. */
._banner_1asnl_6 {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--cj-space-3);
padding: var(--cj-space-3) var(--cj-space-5);
background: var(--cj-accent-wash);
color: var(--cj-accent-strong);
font-size: var(--cj-text-sm);
text-align: center;
border-bottom: 1px solid var(--cj-accent-strong);
}
._text_1asnl_20 {
font-weight: var(--cj-weight-medium);
}
/* Pill button (spec): its own control, not the shared ui/Button — it needs a
dedicated "reloading" disabled state and no other variant ever applies. */
._action_1asnl_26 {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--cj-touch-floor);
padding: 0 var(--cj-space-5);
border: 1px solid var(--cj-accent-strong);
border-radius: var(--cj-radius-pill);
background: var(--cj-accent-strong);
color: var(--cj-paper-raised);
font-family: var(--cj-font-body);
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-semibold);
line-height: var(--cj-leading-tight);
cursor: pointer;
transition: opacity var(--cj-motion-fast) var(--cj-ease);
}
._action_1asnl_26:hover:not(:disabled) {
opacity: 0.9;
}
._action_1asnl_26:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
._action_1asnl_26:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* Role switcher nested inside the ⋯ overflow menu (instruction Junior): a collapsible
« En tant que … » row that expands to the role list. Styled to sit seamlessly among
the OverflowMenu rows (same padding, hover wash, radii). Token-only. */
._root_igksu_5 {
display: flex;
flex-direction: column;
}
/* The « En tant que … » trigger row — looks like a menu item, with a chevron that
flips when expanded. */
._trigger_igksu_12 {
display: flex;
align-items: center;
gap: var(--cj-space-2);
width: 100%;
padding: 8px 10px;
border: none;
background: none;
border-radius: var(--cj-radius-sm);
cursor: pointer;
text-align: left;
font: inherit;
font-size: var(--cj-text-sm);
color: var(--cj-ink);
}
._trigger_igksu_12:hover {
background: var(--cj-paper-warm);
}
._trigger_igksu_12:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: -2px;
}
._current_igksu_37 {
flex: 1;
min-width: 0;
font-weight: var(--cj-weight-medium);
}
._chevron_igksu_43 {
flex: none;
color: var(--cj-ink-muted);
transition: transform var(--cj-motion-fast) var(--cj-ease);
}
._chevronOpen_igksu_49 {
transform: rotate(180deg);
}
/* Expanded role list — indented a touch under the trigger so the hierarchy reads. */
._list_igksu_54 {
display: flex;
flex-direction: column;
gap: 1px;
padding-left: var(--cj-space-3);
}
._item_igksu_61 {
display: flex;
align-items: center;
gap: var(--cj-space-2);
width: 100%;
padding: 7px 10px;
border: none;
background: none;
border-radius: var(--cj-radius-sm);
cursor: pointer;
text-align: left;
font: inherit;
font-size: var(--cj-text-sm);
color: var(--cj-ink-soft);
}
._item_igksu_61:hover {
background: var(--cj-paper-warm);
color: var(--cj-ink);
}
._item_igksu_61:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: -2px;
}
/* Fixed leading slot — holds the active check (or the + for « add a role »). */
._check_igksu_88 {
flex: none;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--cj-accent-strong);
}
._itemMain_igksu_98 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
._itemName_igksu_105 {
font-weight: var(--cj-weight-medium);
color: var(--cj-ink);
}
._itemCopro_igksu_110 {
font-size: var(--cj-text-2xs);
color: var(--cj-ink-muted);
}
/* Role badge (CJ-44, D.164). A calm, NON-interactive role pill: 17px floor
(--cj-text-base, senior-friendly), medium weight, radius-sm. The tint says the
ROLE, never the page — the locative --cj-section-* tokens (D.148) are BANNED
here by design. Long copro/role labels are capped at 38vw with an ellipsis so
the badge never squeezes the masthead actions (flex: none keeps it rigid). */
._badge_ksiwh_7 {
flex: none;
display: inline-block;
max-width: 38vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--cj-text-base);
font-weight: var(--cj-weight-medium);
line-height: 1.2;
padding: 5px 10px;
border-radius: var(--cj-radius-sm);
/* NOT a button, NOT a menu (D.02): pure signage. */
pointer-events: none;
user-select: none;
}
/* Visitor — the default case of almost everyone: bare muted text, no wash, no
border. Hyper-discreet so the badge never reads as a « logged account ». */
._visitor_ksiwh_26 {
color: var(--cj-ink-muted);
background: none;
padding: 5px 0;
}
/* Editor — calm green (the brand accent wash), a role « with powers ». */
._editor_ksiwh_33 {
background: var(--cj-accent-wash);
color: var(--cj-accent-strong);
}
/* Syndic — the institutional blue voice (§10 / D.114). */
._syndic_ksiwh_39 {
background: var(--cj-info-wash);
color: var(--cj-info-ink);
}
/* Admin — inverted ink pill: the top of the hierarchy, saillant without red. */
._admin_ksiwh_45 {
background: var(--cj-ink);
color: var(--cj-paper);
}
/* Welcome tour overlay (CJ-101). OPAQUE paper background — NOT glass (D.149
gotcha: backdrop-filter/--cj-glass would look broken here, this sits above
arbitrary content on first load, sometimes before anything else has painted). */
._overlay_1suaj_5 {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--cj-space-5);
background: var(--cj-paper);
animation: _fade_1suaj_1 0.3s var(--cj-ease);
}
._card_1suaj_17 {
width: 100%;
max-width: 440px;
max-height: 88dvh;
overflow-y: auto;
position: relative;
padding: var(--cj-space-6) var(--cj-space-5) var(--cj-space-5);
background: var(--cj-paper-raised);
border-radius: var(--cj-radius-lg);
box-shadow: var(--cj-elev-3);
}
._close_1suaj_29 {
position: absolute;
top: var(--cj-space-3);
right: var(--cj-space-3);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: transparent;
border: none;
border-radius: var(--cj-radius-sm);
color: var(--cj-ink-soft);
cursor: pointer;
}
._close_1suaj_29:hover {
background: var(--cj-paper-warm);
color: var(--cj-ink);
}
._close_1suaj_29:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
._kicker_1suaj_55 {
margin: 0 0 var(--cj-space-2);
font-family: var(--cj-font-mono);
font-size: var(--cj-text-2xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cj-accent-strong);
}
._title_1suaj_64 {
margin: 0 0 var(--cj-space-2);
font-size: var(--cj-text-2xl);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
/* Programmatically focusable only (tabIndex -1) — no visible focus artefact
needed since it's never reached by Tab, only set on mount. */
outline: none;
}
._roleLine_1suaj_74 {
margin: 0 0 var(--cj-space-4);
font-size: var(--cj-text-base);
color: var(--cj-ink-soft);
}
._bullets_1suaj_80 {
margin: 0 0 var(--cj-space-5);
padding-left: 1.2em;
display: flex;
flex-direction: column;
gap: var(--cj-space-2);
font-size: var(--cj-text-base);
color: var(--cj-ink);
line-height: var(--cj-leading-normal);
}
._cta_1suaj_91 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: var(--cj-touch-min);
padding: var(--cj-space-3) var(--cj-space-4);
background: var(--cj-accent-strong);
color: var(--cj-paper);
border: none;
border-radius: var(--cj-radius-md);
font-size: var(--cj-text-base);
font-weight: var(--cj-weight-semibold);
cursor: pointer;
}
._cta_1suaj_91:hover {
filter: brightness(1.05);
}
._cta_1suaj_91:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
@keyframes _fade_1suaj_1 {
from {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
._overlay_1suaj_5 {
animation: none;
}
}
._shell_1iy7e_1 {
min-height: 100svh;
display: flex;
flex-direction: column;
}
/* Locative section accent (D.148) — resolve --cj-section per consultation route so the
masthead reveal rule and the in-flow editorial kicker inherit it. Aliases keep the
palette tight (journal=accent-strong, pv=info); only AG is a dedicated hue.
D.148 « variante complète » (card teint): each section also resolves the two
DERIVED card tokens here, where `--cj-section` is GUARANTEED defined — so the
`color-mix` in `--cj-section-wash` (tokens.css) never evaluates an undefined
custom property (which would void the declaration and drop the card's eyebrow
wash entirely). Off these routes the `:root` defaults stand (green/accent-strong),
so a card rendered outside a section is byte-identical to before.
--cj-section-wash = faint ~8% section tint behind the card eyebrow band;
--cj-section-ink = section hue for the mono eyebrow text (all 3 hues pass AA). */
._shell_1iy7e_1[data-section='journal'] {
--cj-section: var(--cj-section-journal);
--cj-section-wash: linear-gradient(
180deg,
color-mix(in srgb, var(--cj-section) 8%, var(--cj-paper)) 0%,
color-mix(in srgb, var(--cj-section) 8%, var(--cj-paper)) 55%,
transparent 100%
);
--cj-section-ink: var(--cj-section);
}
._shell_1iy7e_1[data-section='ag'] {
--cj-section: var(--cj-section-ag);
--cj-section-wash: linear-gradient(
180deg,
color-mix(in srgb, var(--cj-section) 8%, var(--cj-paper)) 0%,
color-mix(in srgb, var(--cj-section) 8%, var(--cj-paper)) 55%,
transparent 100%
);
--cj-section-ink: var(--cj-section);
}
._shell_1iy7e_1[data-section='pv'] {
--cj-section: var(--cj-section-pv);
--cj-section-wash: linear-gradient(
180deg,
color-mix(in srgb, var(--cj-section) 8%, var(--cj-paper)) 0%,
color-mix(in srgb, var(--cj-section) 8%, var(--cj-paper)) 55%,
transparent 100%
);
--cj-section-ink: var(--cj-section);
}
/* Skip link: hidden until focused (keyboard a11y). */
._skipLink_1iy7e_51 {
position: absolute;
left: var(--cj-space-3);
top: calc(var(--cj-space-3) * -1);
z-index: 200;
padding: var(--cj-space-2) var(--cj-space-4);
background: var(--cj-paper-raised);
border: 1px solid var(--cj-accent);
border-radius: var(--cj-radius-sm);
color: var(--cj-accent-strong);
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-semibold);
text-decoration: none;
transform: translateY(-150%);
transition: transform var(--cj-motion-fast) var(--cj-ease);
}
._skipLink_1iy7e_51:focus {
transform: translateY(calc(var(--cj-space-3) + 100%));
}
/* ===== Masthead — Direction C « une éditoriale » =====
A SINGLE sticky band. AT REST (its default class) it is fully TRANSPARENT: no
frosted glass, no permanent shadow, no bottom rule — the LEFT carries ONLY the
brand leaf; the action cluster (and the desktop nav) float over the page. Once
REVEALED (`.mastheadRevealed`, set when the editorial title scrolls off, or always
on non-consultation routes), it fades to opaque paper with a bottom hairline + a
discreet elevation, and the condensed title fades in beside the leaf.
The reveal transition is 0.5s/`--cj-ease` on background, border and shadow
(instruction Junior: « transparent → 100% opaque sur 0,5 s vers le bas, l'inverse
en remontant »). This 0.5s opacity-style cross-fade is INTENTIONALLY kept even under
prefers-reduced-motion: Junior explicitly asked for it, and an opacity fade is calm
(non-vestibular) — the same reasoning as the splash cross-fade. The scroll-driven
STATE still toggles regardless of the preference (see MastheadRevealProvider), so the
band stays transparent at rest (else the title would show twice without scrolling). */
._masthead_1iy7e_76 {
position: sticky;
/* CJ-67: sit under the fixed acceptance ribbon when present; 0px in prod. */
top: var(--cj-env-h, 0px);
z-index: 50;
background: transparent;
/* 2px so the section-coloured reveal rule (D.148) reads as a rubric marker. */
border-bottom: 2px solid transparent;
box-shadow: none;
/* Blur starts at 0 so it can fade IN with the rest (none→blur isn't animatable). */
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
transition:
background 500ms var(--cj-ease),
backdrop-filter 500ms var(--cj-ease),
-webkit-backdrop-filter 500ms var(--cj-ease),
border-color 500ms var(--cj-ease),
box-shadow 500ms var(--cj-ease);
}
/* Revealed: FROSTED GLASS (instruction Junior) — ~80% opaque paper (--cj-glass = 0.78,
the design's dedicated masthead glass) over a blurred backdrop so the scrolled
content shows through softly, a bottom hairline, and a small header shadow
(--cj-elev-header). All of it fades in over 0.5s with the reveal. */
._mastheadRevealed_1iy7e_76 {
background: var(--cj-glass);
backdrop-filter: blur(var(--cj-glass-blur));
-webkit-backdrop-filter: blur(var(--cj-glass-blur));
/* Section-coloured rubric rule (D.148); falls back to the neutral filet off the
consultation routes (where --cj-section is unset). */
border-bottom-color: var(--cj-section, var(--cj-rule));
box-shadow: var(--cj-elev-header);
}
/* ONE band on every screen, aligned on the CONTENT, not on the shell (instruction
Junior). The masthead shares the page's 3-column template:
[ left gutter 1fr ] [ reading column 680px ] [ right gutter 1fr ]
The lead (leaf + condensed title) sits at the LEFT edge of the content column; the
inline nav fills that same content column so its RIGHT edge == the content's right
edge on EVERY screen; the action cluster lives BEYOND, in the right gutter. Because
the content column is centred identically on /mur, /sujets-ag and /pv, that right
edge is the same on all three → coherent bar AND content that never shifts. */
._mastheadInner_1iy7e_129 {
max-width: var(--cj-shell-max);
margin: 0 auto;
/* Slim band (instruction Junior « plus étroit / écrasé »): tight vertical padding so
the masthead sits low; the 34px icon buttons drive its height. Horizontal gutter same. */
padding: 4px var(--cj-gutter);
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, var(--cj-content-max))
minmax(0, 1fr);
align-items: center;
column-gap: 0;
}
/* Lead — first cell of the content column, at its LEFT edge. Holds the brand leaf and,
once revealed, the condensed section title beside it. Pinned to row 1 so it SHARES the
cell with the nav (also row 1, col 2). */
._mastheadLead_1iy7e_147 {
grid-column: 2;
grid-row: 1;
justify-self: start;
display: flex;
align-items: center;
gap: var(--cj-space-2);
min-width: 0;
}
/* Brand leaf — always at the top-left of the band, on every screen. The mark is the
v2 leaf (accent green); it stays fully opaque whatever the band's reveal state. */
._brandLeaf_1iy7e_159 {
display: inline-flex;
align-items: center;
flex: none;
color: var(--cj-accent);
}
/* Action cluster — in the RIGHT gutter (3rd grid cell), hugging the FAR RIGHT of the
shell (instruction Junior: « collé tout à droite, pas à gauche de sa colonne »).
`justify-self: end` pins it to the gutter's right edge — i.e. the content's far
right edge, above the side-search column. Role pastille + ⋯ (the search magnifier
is hidden ≥1080px). On mobile the inner switches to flex, so this justify-self is
inert there and the cluster is pushed right by the lead's `margin-right: auto`. */
._mastheadRight_1iy7e_172 {
grid-column: 3;
grid-row: 1;
justify-self: end;
display: flex;
align-items: center;
gap: var(--cj-space-3);
flex: none;
}
/* ===== Mobile (≤860px): the inline nav is hidden (tab bar takes over), so the
3-column content grid has no purpose and would squeeze the cluster into a 0-width
right gutter. Revert to a simple flex band — lead LEFT (empty at rest, condensed
title once revealed), cluster hugging the RIGHT. Desktop is unchanged. ===== */
@media (max-width: 860px) {
._mastheadInner_1iy7e_129 {
display: flex;
align-items: center;
column-gap: 0;
}
._mastheadLead_1iy7e_147 {
margin-right: auto; /* push the action cluster to the far right */
}
._mastheadRight_1iy7e_172 {
margin-left: var(--cj-space-3);
}
}
/* Condensed section title (Direction C): the ONLY thing on the LEFT, once the band
is revealed. Title type at the base reading size (--cj-text-base = 17px), ink, fades
in. It is the SAME page title shown big in-flow — here it is the small persistent
label of the section once you've scrolled past the hero. (Spec named « --cj-text-base »
for this line; that's the SIZE token — the colour is plain ink.) */
._condensedTitle_1iy7e_205 {
min-width: 0;
font-family: var(--cj-font-title);
/* Condensed title (on scroll) — small + compressed (instruction Junior): 15px. */
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-semibold);
letter-spacing: -0.01em;
line-height: 1.1;
color: var(--cj-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Fades from transparent to fully opaque over 0.5s as the band reveals on scroll-down,
and back out on scroll-up — in sync with the band's own fade (instruction Junior).
Mounted at rest (opacity 0) so the transition can run BOTH ways; pointer-events off
while invisible so the empty ghost never intercepts a click. The fade is kept under
reduced motion (calm opacity cross-fade, explicit request — see `.masthead`). */
opacity: 0;
pointer-events: none;
transition: opacity 500ms var(--cj-ease);
}
._condensedTitleShown_1iy7e_227 {
opacity: 1;
pointer-events: auto;
}
/* ===== Inline desktop nav (maquette `.masthead__nav`) — hidden on mobile =====
Shares the CONTENT column (cell 2) with the lead: the lead is justify-self:start,
the nav is justify-self:end → the nav's RIGHT edge == the content's right edge on
every screen. They never collide horizontally (lead is short, nav is short). */
._inlineNav_1iy7e_236 {
display: none;
grid-column: 2;
grid-row: 1;
justify-self: end;
gap: 2px;
}
._inlineLink_1iy7e_244 {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 10px;
border-radius: var(--cj-radius-sm);
color: var(--cj-ink-muted);
text-decoration: none;
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-medium);
/* Sober hover affordance: a soft paper wash fades in and the link lifts a hair, so
it reads as clickable without any loud effect. */
transition:
color var(--cj-motion-fast) var(--cj-ease),
background var(--cj-motion-fast) var(--cj-ease),
transform var(--cj-motion-fast) var(--cj-ease);
}
._inlineLink_1iy7e_244:hover {
color: var(--cj-ink);
background: var(--cj-paper-warm);
transform: translateY(-1px);
}
._inlineLink_1iy7e_244:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
._inlineLinkActive_1iy7e_273 {
color: var(--cj-accent);
background: var(--cj-accent-wash);
}
/* ===== Square icon button (maquette `.search-toggle`) — the search magnifier and
the ⋯ overflow trigger share this 34px square (instruction Junior « plus petit /
écrasé »), hairline border, radius-sm. ===== */
._iconButton_1iy7e_281 {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-sm);
background: none;
color: var(--cj-ink-soft);
cursor: pointer;
text-decoration: none;
}
._iconButton_1iy7e_281:hover {
color: var(--cj-ink);
}
._iconButton_1iy7e_281:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
/* The inline nav replaces the bottom tab bar on desktop (≥ 861px), pushed to the
content's right edge by the lead's margin-auto — IDENTICAL on every screen. */
@media (min-width: 861px) {
._inlineNav_1iy7e_236 {
display: flex;
}
}
/* R6 — header search magnifier: hidden from 1080px up, where the SideSearch column
becomes the permanent search affordance (the same breakpoint the consultation lists
use to show the side column). Below 1080px (mobile + narrow desktop) the magnifier
stays in the band, between the role pastille and the ⋯. */
@media (min-width: 1080px) {
._searchToggle_1iy7e_317 {
display: none;
}
}
/* ===== Main content — single readable column, room for the tab bar ===== */
._main_1iy7e_323 {
flex: 1;
width: 100%;
}
._column_1iy7e_328 {
max-width: var(--cj-content-max);
margin: 0 auto;
padding: var(--cj-space-5) var(--cj-gutter);
/* Clear the fixed tab bar + safe-area inset. */
padding-bottom: calc(
var(--cj-tabbar-height) + var(--cj-space-6) + env(safe-area-inset-bottom, 0px)
);
}
/* The consultation lists widen to the two-column shell (feed + side tools). They own
their own gutters via their `.page`, so drop the column padding here (keep the
tab-bar clearance on mobile). */
._columnWide_1iy7e_341 {
max-width: var(--cj-shell-max);
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
/* ===== Bottom tab bar — 3 tabs, always labelled — MOBILE ONLY ===== */
/* The BAR spans the full width with a translucent, blurred paper (frosted glass over
the feed); an inner wrapper caps and centres the tabs in a 520px band (maquette
`.tabbar__in`). The maquette uses these literals (no token), so we keep them. */
._tabbar_1iy7e_351 {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 60;
/* Frosted glass — tokenised ISO-PIXEL (CJ-91 LOT2). */
background: var(--cj-glass-strong);
backdrop-filter: blur(var(--cj-glass-blur-8));
border-top: 1px solid var(--cj-rule);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Inner band: caps the tabs and centres them (maquette `.tabbar__in`). */
._tabbarInner_1iy7e_366 {
display: flex;
justify-content: space-around;
max-width: 520px;
margin: 0 auto;
}
._tab_1iy7e_351 {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: var(--cj-tabbar-height);
padding: var(--cj-space-2) var(--cj-space-1);
color: var(--cj-ink-muted);
text-decoration: none;
/* Maquette `.tab`: literal 11px (no token) — nav labels are an assumed exception
to the >=17px body rule, exactly like the maquette. */
font-size: 11px;
font-weight: var(--cj-weight-medium);
}
._tab_1iy7e_351:hover {
color: var(--cj-ink-soft);
}
._tab_1iy7e_351:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: -2px;
}
._tabIcon_1iy7e_399 {
display: inline-flex;
}
._tabLabel_1iy7e_403 {
line-height: 1.1;
text-align: center;
}
/* Active tab — accent colour only (maquette `.tab.is-active`): same weight as resting
tabs. Colour is NOT the only marker — NavLink sets aria-current="page". */
._tabActive_1iy7e_410 {
color: var(--cj-accent);
}
/* Desktop: the inline masthead nav replaces the bottom bar (maquette). */
@media (min-width: 861px) {
._tabbar_1iy7e_351 {
display: none;
}
}
/* Shared body layout for destructive confirmation modals (author erase, syndic
reply erase, admin removal) — maquette 05-actions `.modal`. The Modal brick
centres its body; the warning lead reads centred in `--cj-ink-muted`, while
the tombstone / mandatory-motive Banner keeps its own LEFT-aligned wash so a
banner reads as a left-ruled aside, not as centred prose. Token-only. */
._lead_j48nb_7 {
font-size: var(--cj-text-sm);
line-height: var(--cj-leading-normal);
color: var(--cj-ink-muted);
margin-bottom: var(--cj-space-3);
}
._note_j48nb_14 {
text-align: left;
}
/* Admin variant: the mandatory-motive Banner sits BELOW a reason field, so it
keeps the top margin that separates it from the textarea. */
._noteWithMargin_j48nb_20 {
margin-top: var(--cj-space-3);
text-align: left;
}
/* Author « manage mine » actions (maquette 05-actions `.reg-actions` /
`.reg-action`). BARE ~36px icon buttons, serrées à droite on the tag line —
no box, no separator rule, no text label (the label is a hover tooltip). The
trash warms to terre-cuite on hover, the pencil to the register green, echoing
the syndic reply icon. Token-only (no raw hex). */
._acts_1u1w7_7 {
flex: none;
margin-left: auto;
display: inline-flex;
gap: 2px;
}
._action_1u1w7_14 {
position: relative;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: none;
border-radius: var(--cj-radius-sm);
color: var(--cj-ink-faint);
cursor: pointer;
transition:
color var(--cj-motion-fast) var(--cj-ease),
background var(--cj-motion-fast) var(--cj-ease);
}
._action_1u1w7_14 svg {
width: 18px;
height: 18px;
}
._action_1u1w7_14:hover {
background: var(--cj-paper-warm);
}
._action_1u1w7_14:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
._edit_1u1w7_45:hover {
color: var(--cj-accent-strong);
}
._del_1u1w7_49:hover {
color: var(--cj-block);
}
/* Tooltip bubble = the shared global `.cj-action-lbl` (base.css, CJ-91 LOT2).
Only the parent-scoped hover/focus REVEAL stays here. */
._action_1u1w7_14:hover .cj-action-lbl,
._action_1u1w7_14:focus-visible .cj-action-lbl {
opacity: 1;
}
/* Admin force-majeure removal control on the wall tag line (D.22/D.126). A BARE
~36px icon button, same shape as the author's « manage mine » icons
(MyContentActions `.action`) so the cluster stays homogeneous — but a SHIELD
(moderation/authority), not the trash, to read as an admin act, not a self
delete. Token-only (no raw hex); the lead/note mirror EraseConfirmDialog. */
._action_tut1s_3 {
position: relative;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: none;
border-radius: var(--cj-radius-sm);
color: var(--cj-ink-faint);
cursor: pointer;
transition:
color var(--cj-motion-fast) var(--cj-ease),
background var(--cj-motion-fast) var(--cj-ease);
}
._action_tut1s_3 svg {
width: 18px;
height: 18px;
}
._action_tut1s_3:hover {
background: var(--cj-paper-warm);
}
._action_tut1s_3:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
/* Removal warms to the block (terre-cuite) on hover — same destructive cue as the
author trash, signalling « this strikes the entry ». */
._remove_tut1s_40:hover {
color: var(--cj-block);
}
/* Tooltip bubble = the shared global `.cj-action-lbl` (base.css, CJ-91 LOT2).
Only the parent-scoped hover/focus REVEAL stays here. */
._action_tut1s_3:hover .cj-action-lbl,
._action_tut1s_3:focus-visible .cj-action-lbl {
opacity: 1;
}
/* One photo thumbnail of the wall (maquette 01-mur.html `.reg-cell` — reprise À
L'IDENTIQUE). A small square tile; the empty/placeholder state shows the photo
glyph on warm paper with a hairline border. Only references tokens. */
._cell_14jot_5 {
position: relative;
flex: 0 0 auto;
/* « Adaptatives à l'écran » (maquette `.reg-cell`): a square tile that scales
with the viewport. The lower bound is tuned so a FULL row — 4 tiles + 3×5px
gaps — fits the narrowest phone inside the entry padding: at 320px the entry
content is ~256px, and 4 × (17.5vw = 56px) + 15px = 239px ≤ 256px. The old
19vw floor (60.8px → 258px) overflowed by a hair on a 320px screen. Above
~480px the tile is capped at 84px, unchanged from the maquette. */
width: clamp(52px, 17.5vw, 84px);
aspect-ratio: 1;
margin: 0;
border-radius: var(--cj-radius-sm);
overflow: hidden;
/* The cell carries the warm-paper bed + hairline so the placeholder (and any
letterboxing of a real image) reads as the maquette `.reg-cell`. */
background: var(--cj-paper-warm);
border: 1px solid var(--cj-rule);
}
._photo_14jot_25 {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Clickable variant (maquette 06 `.reply__photos` → lightbox): a bare button that
fills the cell, so the image/placeholder keeps the static look. */
._trigger_14jot_34 {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
._trigger_14jot_34:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
/* Placeholder (image unavailable): centred photo glyph, faint ink — maquette
`.reg-cell svg` (width 20px, color ink-faint). Never a flat green fill. */
._placeholder_14jot_51 {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--cj-ink-faint);
}
/* « +N » overflow badge on the last tile (maquette `.reg-more`). Decorative
(aria-hidden) overlay → `pointer-events: none` so a click on the « +N » passes
THROUGH to the trigger button underneath and opens the lightbox like any tile. */
._more_14jot_63 {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--cj-backdrop);
color: var(--cj-paper);
font-weight: var(--cj-weight-semibold);
font-size: var(--cj-text-md);
pointer-events: none;
}
/* Shared version-history display (#5c). The visual reference is the syndic reply
history (Junior): a calm, factual register list — version label LEFT, mono
date·heure stamp RIGHT, raw body below. Token-only, never raw hex. Editing is
transparent, not a fault (D.29). Publication AND syndic histories now render
through this one component; only the data source differs. */
._list_k0ktq_7 {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--cj-space-4);
}
._item_k0ktq_16 {
padding-bottom: var(--cj-space-4);
border-bottom: 1px solid var(--cj-rule);
display: flex;
flex-direction: column;
gap: var(--cj-space-2);
}
._item_k0ktq_16:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Header on ONE row: version label LEFT, date·heure stamp pushed RIGHT. On a
very narrow phone the row may wrap, the stamp dropping under the label — it
never overflows. */
._head_k0ktq_32 {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--cj-space-1) var(--cj-space-3);
}
/* Version label — a readable register heading so the eye lands on
« Version 3 — actuelle » first (senior-friendly floor). Title font, medium
weight, ink. */
._versionNo_k0ktq_43 {
font-family: var(--cj-font-title);
font-size: var(--cj-text-md);
font-weight: var(--cj-weight-semibold);
letter-spacing: -0.01em;
color: var(--cj-ink);
}
/* Mono date·heure stamp, right-aligned, with a middot between the two tokens.
Tabular numerals so dates/times align between versions when scanned. */
._stamp_k0ktq_53 {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--cj-space-3);
font-family: var(--cj-font-mono);
font-size: var(--cj-text-xs);
letter-spacing: 0.04em;
color: var(--cj-ink-muted);
font-variant-numeric: tabular-nums;
}
/* Middot separator between date and time (decorative — not content). */
._stamp_k0ktq_53 > span + span::before {
content: '·';
margin-right: var(--cj-space-3);
color: var(--cj-ink-faint);
}
._stampDate_k0ktq_72 {
color: var(--cj-ink-soft);
}
._stampTime_k0ktq_76 {
color: var(--cj-ink-muted);
}
/* Author-role label — last token of the mono stamp (PV/decision only). Already
translated by the wrapper; this component never sees a raw role (D.02/D.29).
The middot auto-separator chains it after the time. */
._stampRole_k0ktq_83 {
color: var(--cj-ink-muted);
}
/* Optional version heading shown above the body (decisions carry one, PV don't).
Mirrors the PV history sheet def (doc 12 §4.6). */
._itemTitle_k0ktq_89 {
font-size: var(--cj-text-md);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
}
/* The reviewer's note for this version — muted, set apart from the body. */
._changes_k0ktq_96 {
font-size: var(--cj-text-sm);
line-height: var(--cj-leading-relaxed);
color: var(--cj-ink-muted);
font-style: italic;
}
/* The version text — full reading size + relaxed leading so any version, not
just the current one, is comfortably legible. pre-wrap keeps the author's line
breaks; long unbreakable tokens (URLs, refs) wrap instead of widening the
sheet. Raw archive text — no bold lead-in, no emphasis, NO title (#5a). */
._itemBody_k0ktq_107 {
font-size: var(--cj-text-base);
line-height: var(--cj-leading-relaxed);
color: var(--cj-ink-soft);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
._empty_k0ktq_115 {
font-size: var(--cj-text-base);
color: var(--cj-ink-muted);
}
._footer_k0ktq_120 {
margin-top: var(--cj-space-5);
}
/* Syndic official reply — a LIGHT « official note » (instruction Junior « réponse A » :
alléger). No more card-in-card or pale-blue GRADIENT band: just a thin blue LEFT rule
(the institutional blue, D.114) opening a quiet note, a small mono « SYNDIC » eyebrow
+ date·heure stamp, and a softer/smaller body. Still clearly OFFICIAL (the blue), but
it no longer reads as a second pavé. Never a thread (D.05/D.26). Token-only (D.114). */
._encart_m3q7b_7 {
margin: var(--cj-space-3) 0 2px;
padding-left: var(--cj-space-3);
border-left: 2px solid var(--cj-info);
}
/* Eyebrow row (replaces the old gradient header band): a small mono « SYNDIC » marker
(left), the date·heure stamp + the manage actions (right). No background, no padding
band — it reads as a register eyebrow, not a stamped header. Wraps on a narrow screen
rather than overflow (`flex-wrap` + `min-width: 0`). */
._head_m3q7b_17 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--cj-space-2);
min-width: 0;
font-family: var(--cj-font-mono);
font-size: var(--cj-text-2xs);
}
/* « SYNDIC » role marker — shield + label, uppercase, institutional blue. Never a
name/avatar (D.02/D.27). */
._role_m3q7b_29 {
display: inline-flex;
align-items: center;
gap: 5px;
flex: none;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--cj-info);
font-weight: var(--cj-weight-semibold);
}
._role_m3q7b_29 svg {
width: 14px;
height: 14px;
flex: none;
}
/* Date·heure stamp, pushed to the right of the eyebrow. Muted, NOT uppercase (it is the
audit pair date·heure, D.29). Shrinks + ellipsises on a very narrow screen rather than
pushing the row past the edge. */
._meta_m3q7b_50 {
margin-left: auto;
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--cj-ink-muted);
font-size: var(--cj-text-2xs);
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
/* Manage actions (syndic only) — quiet ~28px icon buttons, never a toolbar. */
._acts_m3q7b_64 {
display: inline-flex;
gap: 0;
flex: none;
margin-left: 2px;
}
._action_m3q7b_71 {
position: relative;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: none;
border-radius: var(--cj-radius-sm);
color: var(--cj-ink-faint);
cursor: pointer;
transition:
color var(--cj-motion-fast) var(--cj-ease),
background var(--cj-motion-fast) var(--cj-ease);
}
._action_m3q7b_71 svg {
width: 15px;
height: 15px;
}
._action_m3q7b_71:hover {
background: var(--cj-info-wash);
}
._action_m3q7b_71:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
._edit_m3q7b_102:hover {
color: var(--cj-info);
}
._del_m3q7b_106:hover {
color: var(--cj-block);
}
/* Tooltip bubble = the shared global `.cj-action-lbl` (base.css). Only the parent-scoped
hover/focus REVEAL stays here (D.122). */
._action_m3q7b_71:hover .cj-action-lbl,
._action_m3q7b_71:focus-visible .cj-action-lbl {
opacity: 1;
}
/* Body — a quiet SECONDARY note: smaller (15px, --cj-text-sm) + softer ink, so it does
not compete with the 17px publication body above it. */
._body_m3q7b_119 {
padding: var(--cj-space-1) 0 0;
margin: 0;
font-size: var(--cj-text-sm);
line-height: var(--cj-leading-normal);
color: var(--cj-ink-soft);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* Photos « de l'intervention »: one thumbnail row, aligned to the note (the encart's
padding-left already insets it — no extra left padding here). */
._photos_m3q7b_131 {
display: flex;
gap: 5px;
margin: var(--cj-space-2) 0 0;
padding: 0;
list-style: none;
}
@media (max-width: 860px) {
._encart_m3q7b_7 {
/* No extra indent on mobile — the publication card's own padding already insets it. */
margin-left: 0;
}
}
/* « Répondre » — a BARE, discreet icon on the entry's tag line (maquette
06-reponse-syndic `.reg-action--reply`). Syndic-only; token-only. No box, no
label text: a quiet ~36px hit target that warms to the institutional blue on
hover, signalling the official voice it opens. */
._reply_12v7q_6 {
flex: none;
margin-left: auto;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: none;
border-radius: var(--cj-radius-sm);
color: var(--cj-ink-faint);
cursor: pointer;
transition:
color var(--cj-motion-fast) var(--cj-ease),
background var(--cj-motion-fast) var(--cj-ease);
}
._reply_12v7q_6 svg {
width: 18px;
height: 18px;
}
._reply_12v7q_6:hover {
color: var(--cj-info);
background: var(--cj-info-wash);
}
._reply_12v7q_6:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
/* Wall publication as a REGISTER ENTRY (maquette 01-mur.html, modèle
`.reg-entry`). No raised box: a plain white block opened by a dark-green
chapeau rule, separated from the next by air (margin set in WallScreen).
Only references tokens — never raw hex. */
._entry_6u2as_6 {
position: relative;
display: flex;
flex-direction: column;
/* No vertical `gap`: the inner rhythm is driven by EXPLICIT margins on each
block (maquette `.reg-entry`, which has no gap), so we never double up a
uniform gap with a block's own margin. Literal px values are copied from the
maquette where no token matches (6px stamp→text, 10px →tag line). */
/* Light CARD (charte v1.4 « Reco C »): a white block opened by a 3px accent-strong
LEFT liseré, a 1px hairline border, rounded corners, no shadow. `overflow:
hidden` clips the inner stamp band to the rounded corners. Kept module-local
(not the shared `.cj-reg-entry` utility) because `.tombstoneEntry` overrides
the liseré's COLOUR — a longhand override that must not depend on cross-
stylesheet ordering with a global shorthand. */
background: var(--cj-paper);
border: 1px solid var(--cj-rule);
/* Section-tinted liseré (D.148 « variante complète ») — the 3px left rule takes the
consultation section hue (`--cj-section`, = green journal here on /mur), falling
back to accent-strong off-section. `.tombstoneEntry` overrides the COLOUR back to
grey with a longhand below (a struck entry never carries the section tint). */
border-left: 3px solid var(--cj-section, var(--cj-accent-strong));
border-radius: var(--cj-radius-lg);
box-shadow: none;
overflow: hidden;
padding: 0 var(--cj-space-4) var(--cj-space-2);
/* The entry is a GRID item of the wall feed (.feed → .reg → .entry). A grid
(and flex) item defaults to `min-width: auto`, i.e. it refuses to shrink
below its content's min-content width — so a long stamp / word / photo row
would push the whole entry past 100vw on a narrow phone. `min-width: 0` lets
it shrink to the column and confines any overflow to its own children. */
min-width: 0;
}
/* Removal animation (P16, maquette 05-actions `.reg-entry.removing`): on a
successful author erase the entry fades to nothing and lifts slightly
(translateY(-6px)) before the wall reloads it as its tombstone (D.52). Same
mechanic, durations and easing as the maquette. Under prefers-reduced-motion
`--cj-motion-normal` is 0ms, so the change is instantaneous (acceptable) and
the card's safety timeout still drives the refresh. */
._removing_6u2as_39 {
opacity: 0;
transform: translateY(-6px);
transition:
opacity var(--cj-motion-normal) var(--cj-ease),
transform var(--cj-motion-normal) var(--cj-ease);
}
/* « Just-published » reveal (D.10): a halo behind the fresh entry that rises,
holds, then FADES OUT over ~2.3s (maquette 01-mur `.reg-entry.just-published`).
Behind content (z-index:-1) so text stays legible. Charte success olive at 60%
(olive is lighter than the maquette green, so a touch stronger). The 2300ms
animation finishes (opacity 0) BEFORE WallScreen drops the class at 2500ms — so
the entry never cuts off mid-fade. */
._justPublished_6u2as_59::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
/* Match the card's rounded corners so the halo never bleeds past them (Reco C). */
border-radius: inherit;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--cj-success) 60%, transparent),
transparent
);
animation: _cj-published_6u2as_1 2300ms var(--cj-ease) forwards;
}
/* Quick fade-in, hold, then a long gentle fade-out — the « publié » exit. */
@keyframes _cj-published_6u2as_1 {
0% { opacity: 0; }
8% { opacity: 1; }
40% { opacity: 1; }
100% { opacity: 0; }
}
/* Reduced motion: the halo is OPACITY-only (no movement, no vestibular trigger),
and the maquette (01-mur) fades it regardless of the setting. So we deliberately
EXEMPT it from the global reduce-motion reset (base.css `* { animation-duration:
0.01ms !important }`) — the `!important` here wins on specificity so the gentle
« publié » fade-out still plays. We only skip the fade-IN (appear at once) to keep
any animated entrance out of it. */
@media (prefers-reduced-motion: reduce) {
._justPublished_6u2as_59::after {
animation: _cj-published-out_6u2as_1 2300ms var(--cj-ease) forwards !important;
}
}
@keyframes _cj-published-out_6u2as_1 {
0% { opacity: 1; }
40% { opacity: 1; }
100% { opacity: 0; }
}
/* Stamp band (maquette `.reg-stamp`): a 3-column grid `№ · date · heure`, mono
12px, very-pale-green wash fading out at the bottom, flush to the body. The
№ (left) is server-assigned (CJ-80) — empty cell until then, the date stays
centred. The « modifié » history trigger rides in the right (time) cell. */
._stamp_6u2as_104 {
display: grid;
/* № (left, auto) · date (centre, flexible) · heure+badge (right, auto). The side
cells take their CONTENT width so the « modifié » badge in the heure cell is NEVER
squeezed — it's the CENTRE date column (`minmax(0, 1fr)`) that shrinks and, on a
very narrow phone, wraps. The maquette's symmetric `1fr auto 1fr` overlapped
date↔heure once the optional badge widened the right cell (Junior). */
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: baseline;
gap: var(--cj-space-2);
/* « № · date · heure » in real JetBrains Mono. The self-hosted woff2 now
includes U+2116 (№) in its `latin` slice, so the global mono token resolves
the whole stamp — number sign and digits — to JetBrains Mono. The scoped
fallback added in D.117/D.118 (to dodge the muddy serif « № ») is no longer
needed and was removed. */
font-family: var(--cj-font-mono);
font-size: var(--cj-text-2xs); /* 12px — matches the maquette literally */
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cj-ink-muted);
font-variant-numeric: tabular-nums;
/* Stamp band wash = the SECTION wash (D.148 « variante complète »): the faint ~8%
section tint on /mur, falling back to the green --cj-stamp-gradient off-section
(the :root default of --cj-section-wash). */
background: var(--cj-section-wash);
/* EDGE-TO-EDGE band (A2, instruction Junior): the band spans the FULL card width —
from the left liseré to the card's inner right edge — instead of being inset by the
card's 16px lateral padding. NEGATIVE side margins (`-var(--cj-space-4)`) cancel that
padding so the wash touches both sides; the card's `overflow: hidden` + radius clip
the corners cleanly. The 6px bottom margin keeps the stamp → text gap. The CONTENT
(accroche, body, photos, tags) keeps the 16px inset. */
margin: 0 calc(-1 * var(--cj-space-4)) 6px;
padding: var(--cj-space-2) var(--cj-space-4) var(--cj-space-3);
}
/* Stamp cells: `min-width: 0` lets each grid cell shrink under its content so the
3-column band (1fr · auto · 1fr) can never push the entry past its width on a
narrow phone. The lateral cells (№ / heure) keep their content on one line. */
/* № — left cell, accent-strong + medium (maquette `.reg-stamp .num`). */
._stampNum_6u2as_143 {
min-width: 0;
text-align: left;
/* Mono № in the section ink (D.148): green on /mur, falls back to accent-strong
off-section. `.stampMuted .stampNum` overrides it back to muted grey on a tombstone. */
color: var(--cj-section-ink);
font-weight: var(--cj-weight-medium);
}
._stampDate_6u2as_152 {
min-width: 0;
text-align: center;
color: var(--cj-ink-muted);
}
._stampTime_6u2as_158 {
/* Right cell: time, plus the optional « modifié » INDICATOR badge after it.
The badge is no longer clickable — the history access lives in the action
cluster on the tag line below (D.122). `min-width: 0` keeps the cell from
forcing the band wider when the badge is present on a narrow screen. */
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: var(--cj-space-2);
text-align: right;
}
/* Body text: soft ink, snug register leading. The accroche (first sentence) is
carried inline in soft bold. */
._text_6u2as_173 {
font-size: var(--cj-text-md);
line-height: var(--cj-leading-snug);
color: var(--cj-ink-soft);
white-space: pre-wrap;
/* `pre-wrap` keeps long words intact, so a single long token (URL, reference,
copy-pasted string) would push the entry past the screen on a narrow phone.
`anywhere` lets such a token break to the next line — the only safe default
for user-submitted text. Applies to the accroche span too (inherited). */
overflow-wrap: anywhere;
}
._accroche_6u2as_185 {
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
}
/* Collapsed body clamped to ~5 lines (maquette `.reg-text--clamp`). */
._clamp_6u2as_191 {
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
/* pre-wrap + line-clamp don't mix on all engines; clamp wins when collapsed. */
white-space: normal;
}
._moreLink_6u2as_201 {
align-self: flex-start;
/* text → « Lire la suite »: 4px (maquette `.reg-more-link` padding 4px 0 0;
--cj-space-1 == 4px). */
margin-top: var(--cj-space-1);
background: none;
border: none;
padding: 0;
color: var(--cj-accent-strong);
font: inherit;
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-medium);
cursor: pointer;
}
._moreLink_6u2as_201:hover {
color: var(--cj-accent);
}
._moreLink_6u2as_201:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
border-radius: 2px;
}
/* Photos: ONE row of small square thumbnails (maquette `.reg-photos`); each tile
is a PhotoThumb (its own CSS), the last carrying a « +N » overflow badge. */
._photos_6u2as_228 {
list-style: none;
padding: 0;
/* text → photos: 12px (maquette `.reg-photos` margin-top:12px; --cj-space-3 ==
12px, value preserved). */
margin: var(--cj-space-3) 0 0;
display: flex;
gap: 5px;
}
/* Tag line (maquette 05-actions / 06-reponse-syndic `.reg-hashtags`): the action
cluster is FLOATED RIGHT and the tag chips flow on the LEFT as inline content,
so when the tags are numerous they wrap and PASS UNDER the icons instead of
being squeezed by a flex sibling (exact mechanic of the maquette). A clearfix
makes the line englobe the float so the next block sits below the taller side.
The cluster MUST come FIRST in the DOM source for inline content to wrap around
the float — the chips that follow then flow to its left and underneath. */
._tags_6u2as_245 {
/* photos / text → tag line: 10px (maquette `.reg-hashtags` margin-top:10px;
no token = 10px copied literally). */
margin-top: 10px;
display: block;
}
/* Clearfix (maquette `.reg-hashtags::after`): the line wraps its floated cluster
so it never overlaps the syndic encart / next entry below. */
._tags_6u2as_245::after {
content: '';
display: block;
clear: both;
}
/* Chips flow inline and wrap (maquette `.reg-hashtags .hashtag`): the chips are
inline-block (TagChip is inline-flex), separated by a 6px right + 4px bottom
margin so successive rows breathe. `vertical-align: middle` keeps a single row
aligned with the icons; extra rows simply continue under the floated cluster.
Targets every inline chip child (the cluster is excluded — it's floated). */
._tags_6u2as_245 > :not(._cluster_6u2as_265) {
vertical-align: middle;
margin: 0 6px 4px 0;
}
/* Right-floated action cluster (maquette `.reg-actions`): the public
« historique » clock icon next to the author Modifier/Supprimer (or syndic
« Répondre ») icons — one serré group, 36px hit-boxes. The 10px left margin
keeps the last chip of a full first row off the icons. Floated right, so the
chips flow to its left and wrap underneath when numerous. */
._cluster_6u2as_265 {
float: right;
margin-left: 10px;
display: flex;
align-items: center;
gap: 2px;
}
/* Syndic official reply: rendered by the shared SyndicResponse encart
(components/syndic), accent-wash + left rule. CJ-12 / D.26. */
/* Removed / erased TOMBSTONE — calm, never silent (D.22/D.24/D.52), but now
visually a REGISTER ENTRY like any other (instruction Junior): same `.entry`
shell, same `.stamp` band, same `.text` body. Only two things change:
1. the left liseré (card border-left) + stamp gradient turn NEUTRAL GREY (not the
green of a live entry), so a struck entry reads instantly as withdrawn;
2. a small de-emphasised note (`.tombstoneNote`) carries the « Retiré par … » /
« Effacé le … » attribution UNDER the body — never a loud badge. */
/* Grey liseré (overrides the green `.entry` border-left from the card): a struck
entry reads instantly as withdrawn — the accent-strong left rule turns neutral. */
._tombstoneEntry_6u2as_17 {
border-left-color: var(--cj-ink-faint);
}
/* Grey stamp band: same geometry as `.stamp`, only the green accent-wash gradient
and the accent-strong № become neutral grey. */
._stampMuted_6u2as_147 {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--cj-ink-faint) 20%, transparent) 0%,
color-mix(in srgb, var(--cj-ink-faint) 20%, transparent) 55%,
transparent 100%
);
color: var(--cj-ink-muted);
}
._stampMuted_6u2as_147 ._stampNum_6u2as_143 {
color: var(--cj-ink-muted);
}
/* Small, de-emphasised attribution under the body (« Retiré par … » / « Effacé
le … »): muted ink, register leading, sits a touch below the body text. */
._tombstoneNote_6u2as_291 {
margin-top: var(--cj-space-2);
font-size: var(--cj-text-sm);
color: var(--cj-ink-muted);
}
/* Mobile (≤860px) — Reco C (charte v1.4): the entry is a CARD now, no longer
full-bleed. The card hugs the screen edge with only a HAIRLINE 4px gutter
(`--cj-space-1`, was 8px — instruction Junior « beaucoup plus près du bord »).
The page gutter (WallScreen `.page`) drops to 0 on mobile in tandem, so the total
card↔edge margin is ~4px. The text keeps its own 16px inner padding (legibility).
The header/states/composer keep their own page inset. */
@media (max-width: 860px) {
._entry_6u2as_6 {
margin-inline: 0; /* gutter moved up to `.page` padding (6px) — instruction Junior */
}
}
/* « Écrire une publication » composer (maquette `.composer-wrap` + `.composer`).
Only references tokens.
Desktop: a static green-relief bar at the top of the feed.
Mobile (≤860px): fixed just above the tab bar, right-anchored, and it FOLDS
into a round "+" bubble past ~half a screen of scroll (`.barCompact`). */
/* On desktop the wrap is a no-op container (the bar flows in the feed). */
._wrap_1xfgy_9 {
margin-bottom: var(--cj-space-5);
}
/* Bar — light field with an accent outline + accent text/icons (maquette
`.composer`). A field-looking link (cursor: text) that opens the compose
screen. */
._bar_1xfgy_6 {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: var(--cj-content-max);
height: 48px;
padding: 0 14px;
border: 1px solid var(--cj-accent-soft);
border-radius: var(--cj-radius-sm);
background: var(--cj-paper);
text-decoration: none;
cursor: text;
transition: border-color var(--cj-motion-fast) var(--cj-ease);
}
._bar_1xfgy_6:hover {
border-color: var(--cj-accent);
}
._bar_1xfgy_6:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
._pen_1xfgy_41 {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex: none;
color: var(--cj-accent);
}
._pen_1xfgy_41 svg {
width: 18px;
height: 18px;
}
._hint_1xfgy_56 {
flex: 1;
font-size: var(--cj-text-md);
font-weight: var(--cj-weight-medium);
color: var(--cj-accent-strong);
}
._photo_1xfgy_63 {
width: 18px;
height: 18px;
color: var(--cj-accent);
flex: none;
}
/* The "+" face — only used by the collapsed mobile bubble; hidden otherwise. */
._plus_1xfgy_71 {
display: none;
}
@media (max-width: 860px) {
/* Fixed above the tab bar; right-anchored so it folds towards the bubble
(maquette `.composer-wrap`). The tab bar height is tokenised. */
._wrap_1xfgy_9 {
position: fixed;
left: 0;
right: 0;
bottom: calc(var(--cj-tabbar-height) + env(safe-area-inset-bottom, 0px) - 7px);
z-index: 49;
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 0;
padding: 8px var(--cj-gutter) 10px;
background: var(--cj-paper);
box-shadow: 0 -4px 14px rgba(26, 24, 21, 0.05);
transition:
background 0.42s var(--cj-ease),
box-shadow 0.42s var(--cj-ease);
}
._bar_1xfgy_6 {
position: relative;
height: 46px;
margin: 0;
overflow: hidden;
/* Width is driven inline (px↔px) for a smooth bar↔bubble animation. */
transition:
width 0.42s var(--cj-ease),
height 0.42s var(--cj-ease),
border-radius 0.42s var(--cj-ease),
background-color 0.42s var(--cj-ease),
border-color 0.42s var(--cj-ease);
}
._pen_1xfgy_41,
._hint_1xfgy_56 {
transition: opacity 0.2s var(--cj-ease);
}
/* The photo glyph is dropped on mobile (no room beside the hint). */
._photo_1xfgy_63 {
display: none;
}
._plus_1xfgy_71 {
display: inline-flex;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
opacity: 0;
color: var(--cj-paper);
pointer-events: none;
transition: opacity 0.25s var(--cj-ease);
}
/* ── Collapsed (scrolled past ~0.5 screen): a round accent bubble ── */
._wrapCompact_1xfgy_133 {
background: transparent;
box-shadow: none;
pointer-events: none;
}
._barCompact_1xfgy_6 {
height: 56px;
border-radius: 28px;
background: var(--cj-accent);
border-color: var(--cj-accent);
pointer-events: auto;
box-shadow: 0 8px 20px rgba(35, 85, 67, 0.42);
/* Fold first in light, then let the green arrive at the very end (bg/border/
shadow delayed) — same easing in both directions. */
transition:
width 0.42s var(--cj-ease),
height 0.42s var(--cj-ease),
border-radius 0.42s var(--cj-ease),
background-color 0.16s var(--cj-ease) 0.32s,
border-color 0.16s var(--cj-ease) 0.32s,
box-shadow 0.16s var(--cj-ease) 0.32s;
}
._barCompact_1xfgy_6 ._pen_1xfgy_41,
._barCompact_1xfgy_6 ._hint_1xfgy_56 {
opacity: 0;
}
._barCompact_1xfgy_6 ._plus_1xfgy_71 {
opacity: 1;
}
}
/* (No reduced-motion override here: the bar↔bubble fold is functional feedback and now
plays by default — see base.css/tokens.css global stance.) */
/* The search FIELD itself (maquette `.search`), shared by the Wall, /pv and
/sujets-ag (CJ-93). A thin framed row with a leading magnifier; the input is
borderless and inherits the row. Token-only. */
._search_1pw4v_1 {
display: flex;
align-items: center;
gap: var(--cj-space-2);
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-sm);
padding: 0 12px;
transition: border-color var(--cj-motion-fast) var(--cj-ease);
}
._search_1pw4v_1:focus-within {
border-color: var(--cj-accent-soft);
}
._searchIcon_1pw4v_19 {
flex: none;
color: var(--cj-ink-muted);
}
._input_1pw4v_24 {
border: none;
outline: none;
background: none;
font: inherit;
font-size: var(--cj-text-sm);
color: var(--cj-ink);
padding: 11px 0;
width: 100%;
}
._input_1pw4v_24::placeholder {
color: var(--cj-ink-muted);
}
/* The native search "clear" cross is hidden to keep the row calm; clearing
happens by selecting all + delete, or by clearing the text/tag filters. */
._input_1pw4v_24::-webkit-search-cancel-button {
appearance: none;
}
/* « Tags les plus utilisés » (maquette `.side-label` + `.side-tags`). Only
references tokens. */
._block_1rep7_4 {
display: flex;
flex-direction: column;
}
/* Side label: small, muted, breathing above the chips (maquette 12px 0 8px). */
._label_1rep7_10 {
font-size: var(--cj-text-xs);
color: var(--cj-ink-muted);
margin: var(--cj-space-3) 0 var(--cj-space-2);
}
/* Chip wrap (maquette `.side-tags`: flex-wrap, 6px gap). */
._tags_1rep7_17 {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* Wall search panel wrapper (maquette `.tool-card`). The search FIELD styles now
live in `SearchField.module.css` (shared with /pv and /sujets-ag, CJ-93); this
module only holds the panel shell. The panel is CHROME-AGNOSTIC: the consumer
decides whether it's a bordered desktop column or a flush mobile sheet (see
WallScreen). */
._card_12vrg_7 {
/* No own border/padding: the consumer styles the surface via `className`. */
display: block;
}
/* In-flow editorial title (Direction C). Token-only. The big title leads each
consultation page; the masthead stays out of the way until this scrolls off. */
._root_k6yoo_4 {
/* Air under the title before the feed/composer begins, matching the register
rhythm. No top padding: the page's own column padding handles the top. */
margin-bottom: var(--cj-space-5);
}
/* Copro identity kicker (CJ-30) — « {name} · {lots} lots », /mur only, ABOVE the
decorative section kicker below. Mono, small, muted: a quiet signature line, not
competing with the big title. */
._identityKicker_k6yoo_13 {
margin: 0 0 var(--cj-space-2);
font-family: var(--cj-font-mono);
font-size: var(--cj-text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--cj-ink-muted);
}
/* Section kicker (D.148) — a short rule in the locative section colour, sitting just
above the big title as the at-rest « where am I » cue. Falls back to the brand accent
if no section is set. Decorative (aria-hidden); the
carries the real, non-colour
identity so the cue is never colour-only. */
._kicker_k6yoo_26 {
width: 34px;
height: 3px;
border-radius: 2px;
background: var(--cj-section, var(--cj-accent));
margin-bottom: var(--cj-space-3);
}
/* Big page title — the gazette hero (R5): 26px (--cj-text-xl, down from 32px), bold,
tight tracking, ink, matching the validated maquette. */
._title_k6yoo_36 {
margin: 0;
font-family: var(--cj-font-title);
font-size: var(--cj-text-xl);
font-weight: var(--cj-weight-bold);
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--cj-ink);
}
/* Dated sub-line — Wall + Sujets AG (CJ-55). Mono « tampon registre », quiet and small.
The date inside is wrapped in `data-cj-stamp` (masked by the visual tests). */
._subline_k6yoo_48 {
margin: var(--cj-space-2) 0 0;
font-family: var(--cj-font-mono);
font-size: var(--cj-text-xs);
line-height: 1.3;
color: var(--cj-ink-muted);
}
/* Clickable variant (CJ-55): the dated sub-line becomes a shortcut (Sujets AG → cycle
management). A discreet register link — inherits the mono/muted look, gains a pointer
and a hover underline in the section accent so the affordance reads without shouting. */
a._sublineLink_k6yoo_59 {
display: inline-block;
text-decoration: none;
cursor: pointer;
}
a._sublineLink_k6yoo_59:hover,
a._sublineLink_k6yoo_59:focus-visible {
color: var(--cj-section-ink, var(--cj-accent-strong));
text-decoration: underline;
text-underline-offset: 2px;
}
/* Reveal sentinel: a zero-height, invisible probe at the TOP of the title block. It
only exists for the masthead's IntersectionObserver to watch — no visual weight, no
layout effect (sits flush at the block's top edge). */
._sentinel_k6yoo_75 {
height: 1px;
}
/* Syndic contact card (CJ-31) — a quiet, self-contained block: mono kicker,
company/name, then cliquable tel:/mailto: actions at a ≥48px target
(D.10/D.48). Token-only, no card-in-card border (the Sheet/side column
already provides the surface). */
._card_1lex4_6 {
display: flex;
flex-direction: column;
gap: var(--cj-space-2);
}
._kicker_1lex4_12 {
margin: 0;
font-family: var(--cj-font-mono);
font-size: var(--cj-text-2xs);
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--cj-ink-muted);
}
._company_1lex4_21 {
margin: 0;
font-size: var(--cj-text-lg);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
}
._name_1lex4_28 {
margin: 0;
font-size: var(--cj-text-base);
color: var(--cj-ink-soft);
}
._actions_1lex4_34 {
display: flex;
flex-direction: column;
gap: var(--cj-space-1);
margin-top: var(--cj-space-2);
}
/* Cliquable tel:/mailto: row — full-width, ≥48px tall tap target. */
._action_1lex4_34 {
display: flex;
align-items: center;
gap: var(--cj-space-2);
min-height: 48px;
padding: var(--cj-space-2) var(--cj-space-3);
border-radius: var(--cj-radius-sm);
background: var(--cj-paper-warm);
color: var(--cj-ink);
font-size: var(--cj-text-base);
text-decoration: none;
word-break: break-word;
}
._action_1lex4_34 svg {
flex: none;
color: var(--cj-accent-strong);
}
._action_1lex4_34:hover,
._action_1lex4_34:focus-visible {
background: var(--cj-accent-wash);
}
/* Wall « Contacter votre syndic » affordance (CJ-31). Two renderings, split by
the SAME 1080px breakpoint the Wall's own tools column uses (WallScreen.module.css):
below it, a tappable row opens a Sheet; at/above it, the card sits directly in
the side column and the row is hidden. */
._entryRow_132c0_6 {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cj-space-2);
width: 100%;
min-height: var(--cj-touch-min);
margin: var(--cj-space-2) 0 var(--cj-space-4);
padding: var(--cj-space-3) var(--cj-space-4);
background: var(--cj-paper-warm);
border: none;
border-radius: var(--cj-radius-md);
color: var(--cj-ink);
font-family: var(--cj-font-body);
font-size: var(--cj-text-base);
font-weight: var(--cj-weight-medium);
text-align: left;
cursor: pointer;
}
._entryRow_132c0_6 svg {
flex: none;
color: var(--cj-ink-muted);
}
/* The desktop card is its OWN component instance mounted in the side column
(WallScreen), so it only needs to hide below the breakpoint — no separate
"show" rule needed above it (block is the natural display). */
._desktopCard_132c0_34 {
padding-top: var(--cj-space-4);
margin-top: var(--cj-space-4);
border-top: 1px solid var(--cj-rule);
}
@media (min-width: 1080px) {
._entryRow_132c0_6 {
display: none;
}
}
@media (max-width: 1079px) {
._desktopCard_132c0_34 {
display: none;
}
}
/* Wall layout — register feed + side tools (maquette 01-mur.html `.page` /
`.layout` / `.feed` / `.tools`). Only references tokens.
Desktop: two columns (feed ~680px + a 300px sticky search/tags column).
Mobile: one column; the tools panel slides over and PUSHES the feed. */
._page_h6d6c_1 {
max-width: var(--cj-shell-max);
margin: 0 auto;
padding: var(--cj-space-5) var(--cj-gutter) var(--cj-space-8);
}
/* Syndic reminder banner action (CJ-31) — an inline text-button inside the
Banner's body, styled as a discreet underlined link (no new Button variant
needed for a single inline call-to-action inside a sentence). */
._bannerAction_h6d6c_16 {
display: inline;
padding: 0;
border: none;
background: none;
font: inherit;
font-weight: var(--cj-weight-semibold);
color: inherit;
text-decoration: underline;
cursor: pointer;
}
/* CONTENT-DRIVEN layout (instruction Junior): the reading thread is centred in the
page EXACTLY like every other screen's `.column` — same 3-column template
[ 1fr | content 680px | 1fr ]. The feed lives in the centre cell; the side TOOLS
sit in the RIGHT gutter (3rd cell), so they hang to the right of the centred
content WITHOUT shifting it. Switching /mur ↔ /sujets-ag ↔ /pv therefore never
moves the content. The `minmax(0, …)` floors prevent overflow on narrow desktop. */
._layout_h6d6c_2 {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, var(--cj-content-max))
minmax(0, 1fr);
/* No grid gap: the feed must be centred by its equal gutters, just like `.column`.
The tools get their own breathing room via a left margin (below). */
column-gap: 0;
align-items: start;
}
/* The reading thread: the centre cell. It already spans 0…680px and is centred by
the two equal `1fr` gutters, so the feed simply fills it. No max-width / auto
margins needed here any more — the GRID centres it, identically to `.column`. */
._feed_h6d6c_2 {
grid-column: 2;
width: 100%;
/* min-width:0 lets the feed (and wide children) shrink to the viewport instead
of widening the column past 100vw. */
min-width: 0;
}
/* The composer slot is a plain wrapper on desktop; on mobile it becomes the
fixed bar/bubble container (its own CSS in WallComposer). */
._composerSlot_h6d6c_59 {
display: contents;
}
/* Register feed: entries are light CARDS (charte v1.4 « Reco C ») separated by air.
The inter-entry rhythm tightens to 24px (`--cj-space-5`) now that each block carries
its own border — less air needed between two bordered cards than between two
borderless blocks (was `--cj-space-6` / 32px). */
._reg_h6d6c_67 {
display: flex;
flex-direction: column;
}
._reg_h6d6c_67 > * + * {
margin-top: var(--cj-space-5);
}
._more_h6d6c_76 {
margin-top: var(--cj-space-5);
}
/* Infinite-scroll sentinel (P7): a zero-height probe at the foot of the feed.
It carries no visual weight — the IntersectionObserver just watches it cross
the viewport (with rootMargin) to load the next page. */
._sentinel_h6d6c_83 {
height: 1px;
}
/* ===== Tools (search + tags) — RIGHT gutter (cell 3) ===== */
/* The tools live in the right gutter so they hang to the RIGHT of the centred
content without moving it. They take the gutter's real width (it flexes with the
viewport), capped at 300px, with a small left margin off the content's edge.
They NEVER set a min-width that could widen the gutter and push the content. */
._tools_h6d6c_2 {
grid-column: 3;
min-width: 0;
width: 100%;
max-width: 300px;
margin-left: var(--cj-space-5);
/* Align the search INPUT ROW with the COMPOSER bar. The page title now lives in the
masthead (Facebook-style, instruction Junior), so the COMPOSER is the first thing
in the feed — the column just lifts by the panel card's own top padding (space-4,
which sits above the field) so « Rechercher… » meets « Écrire une publication ». */
margin-top: calc(-1 * var(--cj-space-4));
display: flex;
flex-direction: column;
gap: var(--cj-space-4);
position: sticky;
/* 74px under the masthead; CJ-67 adds the acceptance ribbon height (0px in prod). */
top: calc(74px + var(--cj-env-h, 0px));
}
/* TWO states, ONE breakpoint (instruction Junior — « dès que l'écran n'est pas assez
large pour afficher la colonne de recherche correctement, passe en version mobile »):
the centred 680px feed only leaves a gutter wide enough for the side column from
~1080px up (below that the column gets too cramped). 1080px is the chosen minimum —
the page itself keeps growing the gutter (hence the column) until --cj-shell-max
(1200px), where the column reaches ~220px. So:
• ≥ 1080px → the sticky side column above (grows with the viewport up to 1200px).
• < 1080px → the MOBILE behaviour: a single centred reading column + the search
as a full-width panel that slides from the masthead magnifier.
There is NO in-between « drop the column under the feed » zone any more — that was
the un-responsive gap Junior flagged (no magnifier, column lost at the very bottom). */
/* Search panel surface: on desktop a single LEFT rule (gazette « filet », instruction
Junior — no full box, no rounded corners). The WallScreen owns the chrome so the
same SearchPanel stays flush on mobile (the panel-mode override drops the border). */
._panelCard_h6d6c_126 {
border-left: 1px solid var(--cj-rule);
padding: var(--cj-space-4);
}
/* ===== Panel mode (< 1080px): single centred reading column + sliding search ===== */
/* Below the shell width the side column can't sit beside the centred feed, so the
search becomes the full-width panel that slides from the masthead magnifier — the
exact « mobile » search Junior wants to kick in as soon as the column won't fit. */
@media (max-width: 1079px) {
._layout_h6d6c_2 {
grid-template-columns: 1fr;
}
/* The feed keeps the SAME centred 680px reading column it has on desktop (it must
never widen past the reading measure just because the side column is gone). On a
true phone the viewport is narrower than the measure, so it simply fills. */
._feed_h6d6c_2 {
grid-column: 1;
max-width: var(--cj-content-max);
margin-inline: auto;
transition: padding-top 0.26s var(--cj-ease);
}
/* Tools slide down from under the masthead and PUSH the feed (no overlay), FULL
screen width (instruction Junior). Hidden (translated up) by default; revealed
when `.layoutSearching`. Reset every desktop-column property here. */
._tools_h6d6c_2 {
position: fixed;
top: var(--search-top, 56px);
left: 0;
right: 0;
z-index: 40;
width: auto;
max-width: none;
margin: 0;
/* Frosted glass, aligned with the masthead + role menu (token, instruction Junior). */
background: var(--cj-glass);
backdrop-filter: blur(var(--cj-glass-blur));
border-bottom: 1px solid var(--cj-rule);
padding: var(--cj-space-3) var(--cj-gutter) var(--cj-space-4);
/* Hide it FULLY above the viewport regardless of height (a fixed % under-shoots a
short panel and leaves a sliver). No shadow while hidden (it bleeds down otherwise
— instruction Junior: « pas d'ombre tant qu'il est caché »). */
transform: translateY(calc(-100% - var(--search-top, 56px) - 8px));
transition: transform 0.26s var(--cj-ease);
}
._layoutSearching_h6d6c_152 ._tools_h6d6c_2 {
transform: translateY(0);
/* Shadow ONLY when open — a hidden panel casts none (instruction Junior). */
box-shadow: 0 10px 22px rgba(26, 24, 21, 0.1);
}
/* In the panel the field is its own surface — drop the card chrome (the `.tools`
fixed surface already provides the border + padding). */
._panelCard_h6d6c_126 {
border: none;
padding: 0;
}
}
/* ===== Full mobile chrome (≤ 860px): the composer becomes the fixed bottom bar ===== */
/* Only here does the composer fold into the fixed bar/bubble (WallComposer) and the
bottom tab bar appear, so only here does the feed need bottom clearance for them.
Between 861 and 1079px the composer stays the static desktop bar (no tab bar), so
no bottom padding is needed. */
@media (max-width: 860px) {
._page_h6d6c_1 {
/* Content gutter on mobile (instruction Junior « padding 6px »): the 6px lateral
inset lives HERE, on the page wrapping the title AND the feed, so the editorial
title and the cards align at the SAME 6px edge. The cards carry no own margin. */
padding-inline: 6px;
padding-bottom: 128px;
}
}
/* (No reduced-motion override here: the panel's gentle top→bottom slide is functional
feedback and now plays by default — see base.css/tokens.css global stance.) */
/* Shared « content + side search » layout for the consultation screens
(/sujets-ag, /pv). Mirrors the Wall (WallScreen.module.css) — the SAME 3-column
grid, the SAME left-rule card on desktop, the SAME full-width sliding panel under
1080px — but the search aligns with the CONTENT below the header (these screens
have no composer to align on). Token-only. */
._page_1koqv_7 {
max-width: var(--cj-shell-max);
margin: 0 auto;
padding: var(--cj-space-5) var(--cj-gutter) var(--cj-space-8);
}
/* 3-column template identical to the Wall and every other `.column`:
[ 1fr | content 680px | 1fr ]. The content stays centred in the viewport, so
switching /mur ↔ /sujets-ag ↔ /pv never shifts it. Header (row 1) + content
(row 2) live in the centre cell; the search sits in the RIGHT gutter (cell 3),
row 2, so it hangs beside the content WITHOUT moving it. */
._layout_1koqv_18 {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, var(--cj-content-max))
minmax(0, 1fr);
column-gap: 0;
align-items: start;
}
/* Header (title + actions + tabs/banners): centre cell, row 1 — the title and its
buttons STAY in the centred content column (the alignment Junior insisted on). */
._header_1koqv_30 {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
/* Searchable content: centre cell, row 2. The search column's top meets this row. */
._content_1koqv_37 {
grid-column: 2;
grid-row: 2;
width: 100%;
min-width: 0;
}
/* ===== Search column — RIGHT gutter (cell 3), row 2 (beside the content) ===== */
/* Same behaviour as the Wall's `.tools`: takes the gutter's real width, capped, with
a small left margin off the content's edge; never a min-width that could push the
content. Aligned with the content top (row 2), i.e. just under the header. */
._tools_1koqv_45 {
grid-column: 3;
grid-row: 2;
min-width: 0;
width: 100%;
max-width: 300px;
margin-left: var(--cj-space-5);
position: sticky;
/* 74px under the masthead; CJ-67 adds the acceptance ribbon height (0px in prod). */
top: calc(74px + var(--cj-env-h, 0px));
}
/* Left-rule card (gazette « filet »), identical to the Wall's search card: a single
LEFT border, no full box, no rounded corners. */
._panelCard_1koqv_62 {
border-left: 1px solid var(--cj-rule);
padding: var(--cj-space-4);
}
/* ===== Panel mode (< 1080px): single centred column + full-width sliding search =====
Below the shell width the side column can't sit beside the centred content, so the
search becomes the full-width panel that slides from the masthead magnifier — the
exact « mobile » search the Wall uses, now on these screens too. */
@media (max-width: 1079px) {
._layout_1koqv_18 {
grid-template-columns: 1fr;
/* Opening the search pushes the whole column (header + content) down by the
panel's measured height — same feel as the Wall. */
transition: padding-top 0.26s var(--cj-ease);
}
._layoutSearching_1koqv_79 {
padding-top: var(--panel-h);
}
/* Both rows keep the centred reading measure (never widen past it just because the
side column is gone). On a true phone the viewport is narrower, so they fill. */
._header_1koqv_30,
._content_1koqv_37 {
grid-column: 1;
max-width: var(--cj-content-max);
margin-inline: auto;
width: 100%;
}
/* Tools slide down from under the masthead and PUSH the content (no overlay), FULL
screen width. Hidden (translated up) by default; revealed when `.layoutSearching`.
Reset every desktop-column property here. */
._tools_1koqv_45 {
position: fixed;
top: var(--search-top, 56px);
left: 0;
right: 0;
z-index: 40;
width: auto;
max-width: none;
margin: 0;
/* Frosted glass, aligned with the masthead + role menu (token). */
background: var(--cj-glass);
backdrop-filter: blur(var(--cj-glass-blur));
border-bottom: 1px solid var(--cj-rule);
padding: var(--cj-space-3) var(--cj-gutter) var(--cj-space-4);
/* Hide it FULLY above the viewport, independent of the panel's height. A fixed
percentage (was -135%) under-shoots a SHORT panel: /sujets-ag + /pv have only the
search field (~76px), so -135% left ~30px peeking at the top (behind the
transparent masthead) — Junior's « truc en haut ». Move up by the panel's own
height (100%) PLUS its top offset, so the bottom edge clears y=0 whatever the
height. */
transform: translateY(calc(-100% - var(--search-top, 56px) - 8px));
transition: transform 0.26s var(--cj-ease);
}
._layoutSearching_1koqv_79 ._tools_1koqv_45 {
transform: translateY(0);
/* Drop shadow ONLY when open — a HIDDEN panel must cast NO shadow into the viewport
(instruction Junior: « je ne dois pas voir l'ombre tant qu'il est caché »). Raw
rgba kept verbatim, like the other panel literals from the maquette. */
box-shadow: 0 10px 22px rgba(26, 24, 21, 0.1);
}
/* In the panel the field is its own surface — drop the card chrome (the fixed
`.tools` surface already provides the border + padding). */
._panelCard_1koqv_62 {
border: none;
padding: 0;
}
}
/* ===== Full mobile chrome (≤ 860px): the composer becomes the fixed bottom bar =====
Mirrors the Wall (WallScreen.module.css): only when a composer is present (#108) and
only at ≤860px does it fold into the fixed bottom bar/bubble (WallComposer) above the
tab bar — so only then does the content need bottom clearance for both. /pv has no
composer, so it never gets this padding. */
@media (max-width: 860px) {
/* Content gutter on mobile (instruction Junior « padding 6px »): the 6px lateral inset
lives HERE, on the page that wraps the title (`.header`) AND the cards (`.content`),
so the editorial title and the cards align at the SAME 6px edge. The cards carry no
own margin now. The fixed search panel keeps its own 16px gutter — it's a panel. */
._page_1koqv_7 {
padding-inline: 6px;
}
._hasComposer_1koqv_150._page_1koqv_7 {
padding-bottom: 128px;
}
}
/* Wrapper around the InterestPlusOne thumb: stacks the thumb and a calm inline
error under it (no toast, no red). Only references tokens. */
._wrap_15tkh_4 {
display: flex;
flex-direction: column;
gap: var(--cj-space-2);
}
/* Inline action group (CHANTIER A) — the pencil + history clock appended at the very
end of a text, kept together as « one word ». Only tokens. */
._group_13yxj_4 {
/* In the text flow (follows the last word), but an internal flex row so the two
icons line up cleanly. `white-space: nowrap` makes the PAIR atomic: if the line
runs out of room the whole group wraps to the next line TOGETHER, never split. */
display: inline-flex;
align-items: center;
white-space: nowrap;
/* A small forced space before the group, so it reads as appended after the last word
rather than glued to it. */
margin-left: var(--cj-space-1);
/* Sit on the text's baseline-ish line so the icons ride with the last line of copy
instead of pushing the line height. */
vertical-align: middle;
gap: 1px;
}
/* Photo grid (maquette 03-publier). Every photo as a square cell with an
always-visible delete cross; click opens the lightbox. Tokens only. */
/* Validation message (too many / too large) — just text, terre-cuite tone (no
box, per Junior). Clear + persistent until the next change. */
._error_9i8hy_6 {
margin-top: var(--cj-space-3);
color: var(--cj-block);
font-size: var(--cj-text-sm);
line-height: var(--cj-leading-normal);
}
._grid_9i8hy_13 {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: var(--cj-space-4);
}
._cell_9i8hy_20 {
position: relative;
flex: 0 0 auto;
width: clamp(56px, 19vw, 84px);
aspect-ratio: 1;
border-radius: var(--cj-radius-sm);
overflow: hidden;
background: var(--cj-paper-warm);
}
._open_9i8hy_30 {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
._img_9i8hy_40 {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Delete cross: always visible (mobile-friendly, not hover-gated). */
._remove_9i8hy_48 {
position: absolute;
top: 3px;
right: 3px;
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: var(--cj-radius-pill);
background: rgba(26, 24, 21, 0.6);
color: var(--cj-paper);
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
._remove_9i8hy_48:hover {
background: var(--cj-block);
}
._remove_9i8hy_48:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Add-proposal bottom sheet (US-05). Composes ui/Sheet + ui bricks; only
references tokens. */
._form_lgjd9_4 {
display: flex;
flex-direction: column;
gap: var(--cj-space-4);
}
._lead_lgjd9_10 {
font-size: var(--cj-text-base);
line-height: var(--cj-leading-normal);
color: var(--cj-ink-soft);
}
._actions_lgjd9_16 {
display: flex;
flex-direction: column;
gap: var(--cj-space-2);
margin-top: var(--cj-space-4);
}
/* EXIF reassurance under the photo row (Bloc D) — quiet, same wording as compose/syndic.
Copied from SyndicReplyScreen.module.css `.exifNote`. */
._exifNote_lgjd9_24 {
font-size: var(--cj-text-xs);
color: var(--cj-ink-muted);
line-height: var(--cj-leading-normal);
}
/* « Photos » trigger inside the sheet form (Bloc D). Copied from
SyndicReplyScreen.module.css `.addPhotos`, with `align-self: flex-start` so the
inline-flex button keeps its natural width inside the flex-column `.form`. */
._addPhotos_lgjd9_32 {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-sm);
padding: 0 14px;
height: 44px;
color: var(--cj-ink-soft);
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-medium);
cursor: pointer;
background: none;
flex: none;
}
._addPhotos_lgjd9_32:hover {
border-color: var(--cj-info);
}
._addPhotos_lgjd9_32:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Proposals list inside a topic card (doc 12 §7.4). A quiet bulleted list of
suggested solutions — never a comment thread (D.05). Only tokens. */
._block_agd1k_4 {
display: flex;
flex-direction: column;
gap: var(--cj-space-2);
}
/* « Last proposal » info-modal body (CJ-53) — centred calm prose, no destructive tone. */
._blockedBody_agd1k_11 {
margin: 0;
text-align: center;
line-height: 1.45;
color: var(--cj-ink);
}
/* « Propositions (N) » eyebrow subtitle (instruction Junior — le rendre plus visible sans
crier). Traité comme le kicker de section des TopicCard/DecisionCard : même registre mono
uppercase, mais porté à l'ENCRE DE SECTION (`--cj-section-ink` → ocre sur /sujets-ag, repli
accent-strong hors section) au lieu du gris `--cj-ink-muted` — c'est ce qui le sortait du
lot du reste (il partageait la teinte de `.heading`). Un léger filet de section sous le
libellé l'ancre comme « ce qui coiffe la liste » (chapeau), à l'image du filet chapeau du
registre, sans en faire un titre. Pas de deux-points. Tokens only. */
._subtitle_agd1k_25 {
font-family: var(--cj-font-mono);
font-size: var(--cj-text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cj-section-ink, var(--cj-accent-strong));
font-weight: var(--cj-weight-semibold);
padding-bottom: var(--cj-space-1);
border-bottom: 1px solid var(--cj-rule);
}
/* Sober count of proposals, mono eyebrow style for the gazette feel. */
._heading_agd1k_22 {
font-family: var(--cj-font-mono);
font-size: var(--cj-text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cj-ink-muted);
}
._list_agd1k_45 {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--cj-space-2);
}
/* Each proposal: a hanging bullet on the body. The action pair now lives INLINE at the
end of the text (CHANTIER A), not in a right-pinned cluster, so the row is a plain block. */
._item_agd1k_56 {
display: block;
}
/* The body text carries the hanging bullet + the generous reading size. The inline action
group is appended at the END of this text (it follows the last word inline). */
._itemBody_agd1k_62 {
position: relative;
display: block;
min-width: 0;
padding-left: var(--cj-space-4);
font-size: var(--cj-text-md);
line-height: var(--cj-leading-normal);
color: var(--cj-ink-soft);
white-space: pre-wrap;
}
._itemBody_agd1k_62::before {
content: '';
position: absolute;
left: 4px;
top: 0.7em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--cj-accent);
}
/* LIST clamp (#3) — the itemBody becomes a plain container for the clamped text span + the
trailing actions; the clamp (and the `white-space:normal` it needs) lives on the inner
span, not here. */
._itemBodyClampWrap_agd1k_87 {
white-space: normal;
}
/* Proposal body — CLAMPED state (#3): truncated to 5 lines, exactly like the topic
description (TopicCard `.bodyClamp`). `-webkit-box` engages the clamp AND makes the
overflow measurement meaningful (scrollHeight vs clientHeight). Applied while measuring
and while it actually overflows. `position:relative` anchors the fade overlay. */
._clampBox_agd1k_95 {
position: relative;
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
/* Proposal body — FITTING state (#3): once measured to fit in ≤5 lines, drop the clamp and
flow as plain inline text so the trailing inline actions land at the end of the last line
(mirrors TopicCard `.bodyInline`). */
._clampInline_agd1k_108 {
display: inline;
white-space: normal;
}
/* Same paper→transparent fade as the topic description (TopicCard `.bodyFade`) — signals
« il y a une suite », read whole via the detail view. Only when the body overflows. */
._clampFade_agd1k_115::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1.5em;
background: linear-gradient(to bottom, transparent, var(--cj-paper));
pointer-events: none;
}
/* When the proposal body is clamped, its inline actions can't ride inside the truncated
box — they sit just below it, hugging the text (a hairline top nudge, like the topic
card's no-body trail). Kept discreet: the pencil/history stay reachable even on a long
(clamped) proposal in the list. */
._clampActionsTrail_agd1k_130 {
display: block;
margin-top: 2px;
line-height: 1;
}
/* Author-only « modifier » trigger — INLINE variant (CHANTIER A): a small, discreet pencil
appended at the end of the proposal text, clearly tappable. Label rides as a hover tooltip
(shared global `.cj-action-lbl`); warms to the register green on hover. Token-only. */
._inlineEdit_agd1k_139 {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
background: transparent;
border-radius: var(--cj-radius-sm);
color: var(--cj-ink-muted);
cursor: pointer;
}
._inlineEdit_agd1k_139:hover {
background: var(--cj-paper-warm);
color: var(--cj-accent-strong);
}
._inlineEdit_agd1k_139:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
._inlineEdit_agd1k_139:hover .cj-action-lbl,
._inlineEdit_agd1k_139:focus-visible .cj-action-lbl {
opacity: 1;
}
._placeholder_agd1k_169 {
padding-left: var(--cj-space-4);
font-size: var(--cj-text-base);
font-style: italic;
color: var(--cj-ink-muted);
}
/* « Voir les autres propositions » — a calm register link to the detail view (shown on
the LIST card when more proposals exist than the 2-item cap). Mirrors the topic card's
« Voir la description complète » affordance: a bare text+chevron link in the section
ink, ≥44px hit target (mobile-first), the chevron nudges right on hover. */
._seeOthers_agd1k_180 {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--cj-space-1);
min-height: 44px;
/* Pull the link UP toward the proposals (instruction Junior — réduire l'espace entre les
propositions et « Voir les autres propositions », sobre). The 44px hit target is kept;
only the visual gap above is trimmed by cancelling the block's space-2 row gap. */
margin: calc(-1 * var(--cj-space-2)) 0 0;
padding: var(--cj-space-1) 0;
border: none;
background: none;
font: inherit;
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-medium);
color: var(--cj-section-ink, var(--cj-accent-strong));
cursor: pointer;
}
._seeOthers_agd1k_180 svg {
transition: transform var(--cj-motion-fast) var(--cj-ease);
}
._seeOthers_agd1k_180:hover svg {
transform: translateX(2px);
}
._seeOthers_agd1k_180:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
border-radius: 2px;
}
/* Read-only photo row of ONE proposal (Bloc D). Same thumbnail row as the wall / syndic
reply; inset to align UNDER the proposal text (past the hanging bullet, matching
`.itemBody` padding-left), sitting just below the body. Tokens only. */
._photos_agd1k_217 {
display: flex;
gap: 5px;
margin: var(--cj-space-2) 0 0;
padding: 0 0 0 var(--cj-space-4);
list-style: none;
}
/* GA topic as a REGISTER ENTRY (doc 12 §7.4, wireframe `.ph-entry`). A topic is
NOT a journal billet — it carries no date stamp and is sorted by cumulative
interest, never by date (D.07). So it reuses the wall's gazette treatment — a
plain white block opened by a dark-green chapeau rule, air between blocks (set
in TopicsScreen) — but keys the hierarchy on the AGENDA POINT: a strong title,
a sober interest line, the proposals, then the reversible interest mark.
No vote, no like, no gamified counter (D.07). Only references tokens. */
._entry_1c6zz_9 {
position: relative;
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
/* Light CARD (charte v1.4 « Reco C »): the same liseré that opens a wall entry, so
the two flux read as one gazette (a white block, 1px hairline border, a 3px
accent-strong LEFT rule, rounded, no shadow). `overflow: hidden` clips the inner
band to the rounded corners. No top padding: the band header below sits flush
under the top edge, like a publication stamp. */
background: var(--cj-paper);
border: 1px solid var(--cj-rule);
/* Section-tinted liseré (D.148 « variante complète ») — ocre on /sujets-ag, falling
back to accent-strong off-section. */
border-left: 3px solid var(--cj-section, var(--cj-accent-strong));
border-radius: var(--cj-radius-lg);
box-shadow: none;
overflow: hidden;
padding: 0 var(--cj-space-4) var(--cj-space-2);
}
/* Band header (instruction Junior — « même forme que le header de publication ») : a
tinted wash band at the top of the card, like a publication stamp / a decision
« stampRow ». The register № rides LEFT (Reco C / #107 — it replaced the old
« N propositions » count), the interest cluster RIGHT. The band sits inside the
card (no negative gutters) — see the margin note below. */
/* Left group of the band (instruction Junior): the register № followed — a small gap
later — by the topic's own actions (pencil + trash + history clock). Stays on the left;
the interest cluster keeps its `margin-left:auto` pin to the right. */
._stampLeft_1c6zz_38 {
display: flex;
align-items: center;
gap: var(--cj-space-2);
flex-wrap: wrap;
min-width: 0;
}
._stampRow_1c6zz_46 {
display: flex;
align-items: center;
gap: var(--cj-space-2);
flex-wrap: wrap;
/* Section wash (D.148 « variante complète ») — ocre tint on /sujets-ag, green
--cj-stamp-gradient off-section (the :root default of --cj-section-wash). */
background: var(--cj-section-wash);
/* EDGE-TO-EDGE band (A2, instruction Junior): the band spans the FULL card width —
from the left liseré to the card's inner right edge — instead of being inset by the
card's 16px lateral padding. NEGATIVE side margins (`-var(--cj-space-4)`) cancel that
padding so the wash touches both sides; the card's `overflow: hidden` + radius clip
the corners. The band's own lateral padding (16px) realigns the № eyebrow + interest
cluster with the card content below. */
margin: 0 calc(-1 * var(--cj-space-4));
padding: var(--cj-space-1) var(--cj-space-4);
}
/* Register № mono eyebrow (left of the band) — same treatment as the decision
« DÉCISION » marker / a publication stamp №. It REPLACED the former « N propositions »
count here (Reco C / #107); the № comes from the server seq_no (formatRegisterNo). */
._eyebrow_1c6zz_67 {
font-family: var(--cj-font-mono);
font-size: var(--cj-text-2xs);
letter-spacing: 0.08em;
text-transform: uppercase;
/* Section ink (D.148) — ocre on /sujets-ag, accent-strong off-section (AA on the
near-white wash: ocre 5.0:1). */
color: var(--cj-section-ink);
font-weight: var(--cj-weight-semibold);
}
/* Title row — just the agenda-point title now. The topic's own actions moved INLINE to
the end of the description (CHANTIER A), so this row no longer hosts a right cluster. */
._titleRow_1c6zz_80 {
display: flex;
align-items: flex-start;
gap: var(--cj-space-2);
}
/* Title = the agenda point, the loudest thing on the card (stronger than a wall
accroche: a topic leads with its title, a billet with its first sentence). The
size is set by the variant modifiers below (.titleList / .titleDetail). It takes the
remaining row width so the action cluster pins right. */
._title_1c6zz_80 {
flex: 1 1 auto;
min-width: 0;
font-weight: var(--cj-weight-bold);
letter-spacing: -0.01em;
line-height: var(--cj-leading-tight);
color: var(--cj-ink);
}
/* LIST variant (CJ-58 C) — the title may run up to TWO lines before it ellipsizes
(instruction Junior — one line was too aggressive, it cut titles that fit on two).
Longer than two lines → clamp with « … »; the FULL title is read on the detail view.
The clamp lives on the inner `.titleLink` button (CJ-58/U5), so the h2 just sets the
size. */
._titleList_1c6zz_88 {
font-size: var(--cj-text-lg);
min-width: 0;
}
/* The list title is a button routing to the detail view (CJ-58/U5): a BARE link,
inheriting the h2's bold weight, clamped to TWO lines (instruction Junior). It warms
to the section ink on hover so it reads as a follow-through, never a heavy CTA. */
._titleLink_1c6zz_102 {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
max-width: 100%;
margin: 0;
padding: 0;
border: none;
background: none;
font: inherit;
color: inherit;
text-align: left;
letter-spacing: inherit;
cursor: pointer;
overflow: hidden;
transition: color var(--cj-motion-fast) var(--cj-ease);
}
._titleLink_1c6zz_102:hover {
color: var(--cj-section-ink, var(--cj-accent-strong));
}
._titleLink_1c6zz_102:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
border-radius: 2px;
}
/* DETAIL variant (CJ-58 C) — the single-topic view leads LOUD: a larger title that
wraps in full (no clamp), more air below. */
._titleDetail_1c6zz_88 {
font-size: var(--cj-text-xl);
line-height: var(--cj-leading-snug);
}
/* « N intéressés » — quiet and informative, sits in the band beside the +1 thumb,
never a big aggressive number (D.07). */
._tally_1c6zz_150 {
font-size: var(--cj-text-sm);
color: var(--cj-ink-soft);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Optional exposé under the title — soft ink, snug register leading. */
._body_1c6zz_158 {
font-size: var(--cj-text-md);
line-height: var(--cj-leading-snug);
color: var(--cj-ink-soft);
white-space: pre-wrap;
}
/* DETAIL variant (CJ-58 C) — the exposé reads as the main content: a notch larger,
a generous interligne to settle a long description. Darker ink than the soft list
body so it reads as the body copy of a dedicated view. */
._bodyDetail_1c6zz_168 {
font-size: var(--cj-text-lg);
line-height: var(--cj-leading-relaxed);
color: var(--cj-ink);
}
/* LIST exposé wrapper (#1) — the
that hosts the text span PLUS the inline action
group (pencil + history) at the end of the last text line when the description is short.
It is a plain inline container: NO clamp lives here (the clamp is on the inner span),
so the actions after the span are never eaten by the truncation. */
._bodyListWrap_1c6zz_178 {
white-space: normal;
}
/* LIST exposé — CLAMPED state (CJ-58/U5). The register entry shows a PREVIEW of the
description, truncated to 5 lines (instruction Junior — the description IS shown on the
list, never the full text). The span is `display:-webkit-box` so the -webkit-line-clamp
engages; that also makes `scrollHeight` (full text) exceed `clientHeight` (5 lines) only
when there really is more — the read that drives the fade + the see-more row. This class
is on the span WHILE we measure (`!measured`) AND while it actually overflows; a fitting
description then swaps to `.bodyInline`. `position: relative` anchors the fade overlay. */
._bodyClamp_1c6zz_189 {
position: relative;
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
/* LIST exposé — FITTING state (#1). Once measured to fit in ≤5 lines, the text span drops
the clamp and flows as plain INLINE text, so the trailing inline action group (pencil +
history) lands at the very END of the last line — exactly like the detail view. No clamp,
no fade: the whole (short) description is already visible. */
._bodyInline_1c6zz_188 {
display: inline;
white-space: normal;
}
/* Soft paper-to-transparent fade on the last clamped line — signals « il y a une
suite », read in full on the detail view via « Voir les détails », never expanded
in place. Added ONLY when the exposé actually overflows the 5 lines (measured). */
._bodyFade_1c6zz_211::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1.5em;
background: linear-gradient(to bottom, transparent, var(--cj-paper));
pointer-events: none;
}
/* « Voir les détails » (CJ-58/U5) — a calm register affordance to the detail view,
ALWAYS present on the list card. A bare text+chevron link in the section ink (ocre
on /sujets-ag, D.148), never a boxed CTA. ≥44px hit target (mobile-first): full
row height with vertical padding, the chevron nudges right on hover. */
/* See-more ROW (#1) — hosts « Voir la description complète » AND, when the description is
clamped, the topic's inline actions (pencil + history) that couldn't ride inside the
clamped text. They sit together on this line: the link flows left, the actions right
after it, still « à la fin du texte affiché » (the affordance line under the preview). */
._seeDetailsRow_1c6zz_230 {
display: flex;
align-items: center;
gap: var(--cj-space-1);
/* Pull the whole row up toward the description, exactly like the standalone link did. */
margin-top: calc(-1 * var(--cj-space-2));
}
._seeDetails_1c6zz_230 {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--cj-space-1);
min-height: 44px;
/* The upward pull toward the description now lives on the wrapping `.seeDetailsRow`
(instruction Junior — réduire l'espace, sobre, pas un grand trou). The 44px hit target
is preserved by the row height + this vertical padding. */
margin: 0;
padding: var(--cj-space-1) 0;
border: none;
background: none;
font: inherit;
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-medium);
color: var(--cj-section-ink, var(--cj-accent-strong));
cursor: pointer;
}
._seeDetails_1c6zz_230 svg {
transition: transform var(--cj-motion-fast) var(--cj-ease);
}
._seeDetails_1c6zz_230:hover svg {
transform: translateX(2px);
}
._seeDetails_1c6zz_230:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
border-radius: 2px;
}
/* Interest cluster — pinned to the RIGHT of the band: « N intéressés » + the +1 thumb.
`margin-left: auto` keeps it right even when the eyebrow is absent. */
._interest_1c6zz_274 {
flex: none;
margin-left: auto;
display: flex;
align-items: center;
gap: var(--cj-space-2);
}
/* Tag line (maquette `.reg-hashtags`): green in-feed hashtags flow LEFT; the
action cluster (syndic « Répondre » icon) pins serré à DROITE on the same row.
Mirrors the wall tag line exactly. Items align to the TOP so the ~36px icon
sits on the first tag row when tags wrap. */
._tags_1c6zz_286 {
margin-top: var(--cj-space-1);
display: flex;
align-items: flex-start;
gap: var(--cj-space-2);
/* Hold the icon hit height even with only short tags on the left. */
min-height: 36px;
}
/* The chip row takes the remaining width and centres its chips against the 36px
cluster (which pins right via margin-left:auto). When there are no tags, the
cluster is the only child and still pins right. */
._tags_1c6zz_286 > :first-child:not(._cluster_1c6zz_298) {
flex: 1 1 auto;
min-width: 0;
align-self: center;
}
/* Right-aligned action cluster — same serré group / 36px hit-box as the wall. */
._cluster_1c6zz_298 {
flex: none;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 2px;
}
/* Trailing line that carries the inline action group on the LIST card (and the no-body
fallback): the clamp forbids hosting the group inside the clamped
, so it sits just
below, hugging the description with minimal spacing — « accolé à la fin du texte
affiché » (CHANTIER A). No margins/padding of its own beyond a hairline top nudge so it
reads as the continuation of the paragraph, not a new block. */
._bodyTrail_1c6zz_318 {
margin: 2px 0 0;
line-height: 1;
}
/* Depositor-only « modifier » trigger — INLINE variant (CHANTIER A): a small, discreet
pencil that reads as part of the text yet is clearly tappable. The label rides as a hover
tooltip (the shared global `.cj-action-lbl`); it warms to the register green on hover.
Smaller hit-box than the cluster icons (it's inline, not a pinned cluster). Token-only. */
._inlineEdit_1c6zz_327 {
position: relative;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: none;
border-radius: var(--cj-radius-sm);
color: var(--cj-ink-faint);
cursor: pointer;
transition:
color var(--cj-motion-fast) var(--cj-ease),
background var(--cj-motion-fast) var(--cj-ease);
}
._inlineEdit_1c6zz_327:hover {
background: var(--cj-paper-warm);
color: var(--cj-accent-strong);
}
._inlineEdit_1c6zz_327:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: 2px;
}
._inlineEdit_1c6zz_327:hover .cj-action-lbl,
._inlineEdit_1c6zz_327:focus-visible .cj-action-lbl {
opacity: 1;
}
/* « Ajouter une proposition » — a quiet ghost row, opened by a hairline so it
reads as a footer action, never a heavy boxed CTA. */
._actions_1c6zz_361 {
display: flex;
justify-content: flex-start;
margin-top: var(--cj-space-1);
padding-top: var(--cj-space-3);
border-top: 1px solid var(--cj-rule);
}
/* Removed / erased placeholders — calm, never silent (D.22/D.24/D.52). These
keep the flat Card surface (a deliberate, distinct treatment from an entry). */
._tombstone_1c6zz_371 {
display: flex;
flex-direction: column;
gap: var(--cj-space-2);
}
._metaRow_1c6zz_377 {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--cj-space-2);
}
._placeholder_1c6zz_384 {
font-size: var(--cj-text-base);
color: var(--cj-ink-muted);
font-style: italic;
}
/* Mobile (≤860px) — Reco C (charte v1.4): the entry is a CARD now, not full-bleed.
A HAIRLINE 4px lateral gutter (`--cj-space-1`, was 8px — instruction Junior); the
SideSearch `.page` gutter drops to 0 on mobile in tandem, so total card↔edge ≈ 4px.
Header/states keep their own page inset. */
@media (max-width: 860px) {
._entry_1c6zz_9 {
margin-inline: 0; /* gutter moved up to `.page` padding (6px) — instruction Junior */
}
}
/* Topic photos (Bloc D) — read-only thumbnail row below the exposé. Same grid rules as the
wall's PublicationCard `.photos` / the syndic reply row: text → photos 12px (--cj-space-3),
5px gap between tiles. Tokens only. */
._photos_1c6zz_401 {
list-style: none;
padding: 0;
margin: var(--cj-space-3) 0 0;
display: flex;
gap: 5px;
}
/* GA topics list layout (doc 12 §7.4). Mirrors the wall register feed: entries are
light CARDS (charte v1.4 « Reco C ») separated by air, each opened by its own
left liseré. Only references tokens. */
/* The composer slot is a plain wrapper on desktop; on mobile the WallComposer's own
CSS turns it into the fixed bottom bar/bubble. `display: contents` keeps the wrapper
transparent to layout (mirrors the Wall's `composerSlot`), so the bar flows in the
content column exactly like the Wall (#108). */
._composerSlot_149pd_9 {
display: contents;
}
/* Frozen cycle (CJ-13 #3): the disabled « + Déposer » sits where the live composer bar
would be, so the deposit affordance never vanishes when the list is non-empty. The
search magnifier lives in the masthead now (Direction C), so this row holds only the
button. */
._frozenComposerRow_149pd_17 {
display: flex;
align-items: center;
margin-bottom: var(--cj-space-5);
}
/* Search moved to the right column / sliding panel (CJ-93, via SideSearch) — the
in-list `.searchRow` is gone. */
._feed_149pd_25 {
display: flex;
flex-direction: column;
}
/* Register rhythm — Reco C (charte v1.4): entries are light cards, so the air between
them tightens to 24px (`--cj-space-5`), was 32px. */
._feed_149pd_25 > * + * {
margin-top: var(--cj-space-5);
}
._more_149pd_36 {
margin-top: var(--cj-space-5);
}
._header_1x4sh_1 {
margin-bottom: var(--cj-space-5);
}
/* Top band (CJ-44): back chevron anchored left, role badge anchored right. When a
screen has no back affordance an empty span keeps space-between honest. */
._topRow_1x4sh_7 {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cj-space-3);
margin-bottom: var(--cj-space-2);
}
._row_1x4sh_15 {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--cj-space-3);
}
._eyebrow_1x4sh_22 {
font-family: var(--cj-font-mono);
font-size: var(--cj-text-xs);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cj-accent);
margin-bottom: var(--cj-space-2);
}
._title_1x4sh_31 {
font-size: var(--cj-text-xl);
font-weight: var(--cj-weight-bold);
letter-spacing: -0.02em;
color: var(--cj-ink);
}
._intro_1x4sh_38 {
margin-top: var(--cj-space-3);
font-size: var(--cj-text-base);
color: var(--cj-ink-soft);
line-height: var(--cj-leading-normal);
}
._action_1x4sh_45 {
flex-shrink: 0;
/* Always pushed to the right — including when it's the ONLY child (no title, the
header is now an action bar; the title moved to the masthead). */
margin-left: auto;
}
/* Padded readable column for full-screen flows that live outside the tab
shell (compose, admin). Mirrors AppShell's column without the tab-bar inset. */
._pad_63tsh_3 {
max-width: var(--cj-content-max);
margin: 0 auto;
padding: var(--cj-space-5) var(--cj-gutter);
}
/* Topic deposit + topic edit flows (doc 12 §7.4). UNIFIED in-place writing surface
(no review screen): the exposé and the mandatory first proposal (D.08) — or, on the
edit, the title and the exposé (CHANTIER 2) — are framed as NUMBERED register blocks,
each opened by a chapeau rule + a mono eyebrow, so the contract reads at a glance.
The anti-duplication hint (D.09) reuses `.duplicate`/`.duplicateActions` INLINE.
(The `.proposalRecap`/`.recap*` classes are legacy of the old review screen, kept for
now to avoid churn; no live screen renders them.) Tokens only. */
._lead_1vjz4_9 {
font-size: var(--cj-text-base);
line-height: var(--cj-leading-normal);
color: var(--cj-ink-soft);
}
/* Reserve room so the last block is never hidden behind the fixed action bar below. */
._page_1vjz4_16 {
padding-bottom: 96px;
}
/* « Déposer le sujet » pinned to the bottom of the viewport (instruction Junior) —
the SAME fixed action-bar pattern as the wall/edit composer (ComposeLayout). */
._actionBar_1vjz4_22 {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 60;
background: var(--cj-paper);
border-top: 1px solid var(--cj-rule);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
._actionBarIn_1vjz4_32 {
max-width: var(--cj-content-max);
margin: 0 auto;
padding: 12px var(--cj-gutter);
}
/* A numbered register block (the exposé, then the proposal). Opened by an accent
chapeau rule like a wall/topic entry, so depositing feels of a piece with the
gazette — the two blocks read as the two parts of one deposit (D.08). */
._block_1vjz4_41 {
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
border-top: var(--cj-rule-chapeau);
padding-top: var(--cj-space-3);
}
/* More air BETWEEN the two register blocks (instruction Junior): when the exposé
carries an adjustment modnote (« voir mon texte d'origine »), it was sitting too
close to the « votre proposition de solution » block below. The extra top margin on
the 2nd block opens a clear separation in every state. */
._block_1vjz4_41 + ._block_1vjz4_41 {
margin-top: var(--cj-space-5);
}
/* Block head: the mono « № N · … » eyebrow LEFT, an optional « obligatoire » pill
RIGHT — making the mandatory first proposal (D.08) unmissable without shouting. */
._blockHead_1vjz4_59 {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--cj-space-2);
flex-wrap: wrap;
}
._blockEyebrow_1vjz4_67 {
font-family: var(--cj-font-mono);
font-size: var(--cj-text-2xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cj-accent-strong);
font-weight: var(--cj-weight-semibold);
}
/* « obligatoire » marker — a calm accent-wash pill, not a block/alert: a required
field is normal, never an error (D.08). */
._required_1vjz4_78 {
font-family: var(--cj-font-mono);
font-size: var(--cj-text-2xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cj-accent-strong);
background: var(--cj-accent-wash);
padding: 2px var(--cj-space-2);
border-radius: var(--cj-radius-sm);
}
/* Anti-duplication block: the info wash + the two choices under it. */
._duplicate_1vjz4_5 {
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
}
._duplicateActions_1vjz4_5 {
display: flex;
flex-wrap: wrap;
gap: var(--cj-space-2);
}
/* Recap of the author's first proposal on the review screen. */
._proposalRecap_1vjz4_6 {
margin-top: var(--cj-space-4);
padding: var(--cj-space-4);
background: var(--cj-paper-warm);
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-md);
display: flex;
flex-direction: column;
gap: var(--cj-space-2);
}
._recapHeading_1vjz4_114 {
font-family: var(--cj-font-mono);
font-size: var(--cj-text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cj-ink-muted);
}
/* Soft, non-culpabilising relecture note above the neutralised proposal —
mirrors the exposé's ModerationNotice note tone, kept lighter. */
._recapNote_1vjz4_124 {
font-size: var(--cj-text-sm);
line-height: var(--cj-leading-normal);
color: var(--cj-ink-muted);
}
._recapBody_1vjz4_130 {
font-size: var(--cj-text-md);
line-height: var(--cj-leading-normal);
color: var(--cj-ink-soft);
white-space: pre-wrap;
}
/* EXIF reassurance under a block's photo row (Bloc D) — quiet, same wording as the
compose/syndic flows. Copied from SyndicReplyScreen.module.css `.exifNote`. */
._exifNote_1vjz4_138 {
font-size: var(--cj-text-xs);
color: var(--cj-ink-muted);
line-height: var(--cj-leading-normal);
}
/* « Photos » trigger inside a register block (Bloc D). Copied from
SyndicReplyScreen.module.css `.addPhotos`, with `align-self: flex-start` so the
inline-flex button keeps its natural width inside the flex-column `.block` (which
would otherwise stretch it edge-to-edge). */
._addPhotos_1vjz4_146 {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-sm);
padding: 0 14px;
height: 44px;
color: var(--cj-ink-soft);
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-medium);
cursor: pointer;
background: none;
flex: none;
}
._addPhotos_1vjz4_146:hover {
border-color: var(--cj-info);
}
._addPhotos_1vjz4_146:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Admin screen (CJ-20, US-11). Sober governance console aligned on the design
system, register parti (« blanc gazette ») : each section is opened by an accent
chapeau rule (like the deposit blocks / AG cycle), and groups flat warm-paper
panels (Card elevation="flat") — no raised cards. Token-only — no ad-hoc colours. */
._sections_5bx77_6 {
display: flex;
flex-direction: column;
gap: var(--cj-space-6);
margin-top: var(--cj-space-4);
}
/* Register entry: an accent chapeau rule on top, flat, air around it. */
._section_5bx77_6 {
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
border-top: var(--cj-rule-chapeau);
padding-top: var(--cj-space-4);
}
._sectionHead_5bx77_22 {
display: flex;
flex-direction: column;
gap: var(--cj-space-1);
}
._sectionTitle_5bx77_28 {
font-size: var(--cj-text-lg);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
}
._sectionLead_5bx77_34 {
font-size: var(--cj-text-sm);
color: var(--cj-ink-soft);
line-height: var(--cj-leading-normal);
}
/* A vertical stack of cards/rows within a section. */
._stack_5bx77_41 {
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
}
/* One row item (a code, a tag) — content left, actions right. */
._row_5bx77_48 {
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
}
._rowMain_5bx77_54 {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--cj-space-3);
flex-wrap: wrap;
}
._rowText_5bx77_62 {
display: flex;
flex-direction: column;
gap: var(--cj-space-1);
min-width: 0;
}
._rowTitle_5bx77_69 {
font-size: var(--cj-text-base);
font-weight: var(--cj-weight-medium);
color: var(--cj-ink);
}
._rowMeta_5bx77_75 {
font-size: var(--cj-text-xs);
color: var(--cj-ink-muted);
line-height: var(--cj-leading-normal);
}
/* A cluster of buttons kept together (wraps on narrow screens). */
._rowActions_5bx77_82 {
display: flex;
gap: var(--cj-space-2);
flex-wrap: wrap;
}
/* A form laid inside a section card (merge / rename / remove-by-id). */
._form_5bx77_89 {
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
}
/* Native select, styled to match the form fields (doc 12 §6.2). Kept native
for accessibility and a senior-friendly OS picker — no heavy lib. */
._select_5bx77_97 {
width: 100%;
min-height: var(--cj-touch-min);
padding: var(--cj-space-3);
font-family: var(--cj-font-body);
font-size: var(--cj-text-base);
color: var(--cj-ink);
background: var(--cj-paper-warm);
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-md);
}
._select_5bx77_97:focus-visible {
outline: none;
border-color: var(--cj-accent);
box-shadow: 0 0 0 3px var(--cj-accent-wash);
}
/* Spacing helper for a block stacked under the sheet body (phrase field, error)
— keeps ConfirmActionSheet free of inline styles. */
._sheetBlock_5bx77_117 {
margin-top: var(--cj-space-4);
}
/* The clear, one-time code shown after a rotation. Monospaced, selectable. */
._revealCode_5bx77_122 {
font-family: var(--cj-font-mono);
font-size: var(--cj-text-lg);
font-weight: var(--cj-weight-semibold);
letter-spacing: 0.08em;
color: var(--cj-ink);
background: var(--cj-paper-warm);
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-sm);
padding: var(--cj-space-3) var(--cj-space-4);
margin: var(--cj-space-3) 0;
text-align: center;
user-select: all;
word-break: break-all;
}
/* The "Danger zone" gets a clearly delimited terre-cuite frame so it reads as
set-apart from everyday governance. Not bright red — the project's calm
terre cuite (doc 12 §1). */
._dangerZone_5bx77_141 {
border: 1px solid var(--cj-block);
border-radius: var(--cj-radius-md);
padding: var(--cj-space-4);
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
}
/* AG cycle management (CJ-13). Register parti (« blanc gazette ») : each section
is opened by an accent chapeau rule (like the deposit blocks / notifications
panel), flat — no boxed cards around the form. Tokens only — no ad-hoc colours. */
._sections_16gfg_5 {
display: flex;
flex-direction: column;
gap: var(--cj-space-6);
margin-top: var(--cj-space-4);
}
/* Register entry: an accent chapeau rule on top, flat, air around it. */
._section_16gfg_5 {
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
border-top: var(--cj-rule-chapeau);
padding-top: var(--cj-space-4);
}
._sectionHead_16gfg_21 {
display: flex;
flex-direction: column;
gap: var(--cj-space-1);
}
._sectionTitle_16gfg_27 {
font-size: var(--cj-text-lg);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
}
._sectionLead_16gfg_33 {
font-size: var(--cj-text-sm);
color: var(--cj-ink-soft);
line-height: var(--cj-leading-normal);
}
/* Current-state read-out (the AG date + theoretical badge) — a flat warm-paper
panel with a hairline (registre = no elevation), not a boxed Card. */
._statusCard_16gfg_41 {
display: flex;
flex-direction: column;
gap: var(--cj-space-1);
background: var(--cj-paper-warm);
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-md);
padding: var(--cj-space-4);
}
._statusLabel_16gfg_51 {
font-size: var(--cj-text-xs);
color: var(--cj-ink-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
._statusValue_16gfg_58 {
display: flex;
align-items: center;
gap: var(--cj-space-2);
flex-wrap: wrap;
font-size: var(--cj-text-lg);
font-weight: var(--cj-weight-medium);
color: var(--cj-ink);
}
/* The editable form — flows flat under the section's chapeau rule (no card box,
registre parti), like the deposit form. */
._form_16gfg_70 {
display: flex;
flex-direction: column;
gap: var(--cj-space-4);
}
/* Read-only freeze value shown to an editor (admin/syndic get the field instead). */
._readonlyRow_16gfg_77 {
display: flex;
flex-direction: column;
gap: var(--cj-space-1);
}
._readonlyHelp_16gfg_83 {
font-size: var(--cj-text-sm);
color: var(--cj-ink-soft);
line-height: var(--cj-leading-normal);
}
/* Discreet audit line (doc 12 §6.4 audit, D.29). Token-only. */
._audit_3b5pm_3 {
margin-top: var(--cj-space-1);
padding-top: var(--cj-space-2);
border-top: 1px solid var(--cj-rule);
font-size: var(--cj-text-xs);
color: var(--cj-ink-muted);
line-height: var(--cj-leading-normal);
}
/* Consolidated decision as a REGISTER ENTRY (doc 12 §4.5, D.11/D.20). The SYNTHESIS
of an AG decision — the loudest thing in « PV & décisions ». It joins the gazette
parti (« blanc gazette ») like the wall/topics entries: a plain white block opened
by an accent-strong chapeau rule, air between blocks (set in MinutesScreen), no
raised four-sided box. What sets a decision apart from raw minutes is a second cue
that survives without colour (WCAG 1.4.1): a « Décision » mono eyebrow + the
prominent PERIOD-OF-EFFECT stamp, the heart of a decision (D.20). Token-only. */
/* The entry SHELL (position/flex-column/chapeau/padding/min-width) is the shared
global `.cj-reg-entry` utility (base.css, CJ-91 LOT2), composed in the TSX —
the same accent-strong chapeau that opens a wall/topic entry, so the
institutional memory reads as one gazette. This module only adds the decision's
own inner `gap` (a disjoint property — no cascade conflict with the utility). */
._entry_r124i_14 {
gap: var(--cj-space-3);
}
/* Eyebrow band (maquette `.reg-stamp` tone): the « Décision » marker on the left,
the server-computed status badge pinned right. A very-pale-green wash fading out
under the chapeau rule, flush to the body — exactly the wall stamp treatment, but
keyed on the KIND rather than a date (a decision carries no publication stamp). */
._stampRow_r124i_22 {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cj-space-2);
flex-wrap: wrap;
/* Section wash (D.148 « variante complète ») — on /pv `--cj-section` = the
institutional blue (--cj-info, D.114), so a decision's eyebrow band reads BLUE,
consistent with the official voice it carries; falls back to the green
--cj-stamp-gradient off-section (the :root default of --cj-section-wash). */
background: var(--cj-section-wash);
/* EDGE-TO-EDGE band (A2, instruction Junior): the band spans the FULL card width —
from the left liseré to the card's inner right edge — instead of being inset by the
`.cj-reg-entry` 16px lateral padding. NEGATIVE side margins (`-var(--cj-space-4)`)
cancel that padding so the wash touches both sides; the card's `overflow: hidden` +
radius clip the corners. The band's own lateral padding (16px) realigns the № +
« Décision » marker + status badge with the card content below. */
margin: 0 calc(-1 * var(--cj-space-4));
padding: var(--cj-space-2) var(--cj-space-4) var(--cj-space-3);
}
/* Left group of the band: the register № + the « Décision » marker, side by side. */
._stampLead_r124i_44 {
display: flex;
align-items: baseline;
gap: var(--cj-space-2);
min-width: 0;
}
/* Register № (« № 016 ») — same mono accent-strong treatment as the wall stamp's
№ cell, in tabular figures so it never jitters. Tâche #107. */
._stampNum_r124i_53 {
font-family: var(--cj-font-mono);
font-size: var(--cj-text-2xs);
letter-spacing: 0.06em;
text-transform: uppercase;
/* Section ink (D.148) — blue (--cj-info) on /pv, accent-strong off-section
(AA on the near-white wash: bleu 5.6:1). */
color: var(--cj-section-ink);
font-weight: var(--cj-weight-medium);
font-variant-numeric: tabular-nums;
}
._eyebrow_r124i_65 {
font-family: var(--cj-font-mono);
font-size: var(--cj-text-2xs);
letter-spacing: 0.08em;
text-transform: uppercase;
/* Section ink (D.148) — blue on /pv, accent-strong off-section. */
color: var(--cj-section-ink);
font-weight: var(--cj-weight-semibold);
}
._badges_r124i_75 {
display: flex;
align-items: center;
gap: var(--cj-space-2);
flex-wrap: wrap;
}
/* The « modifié » badge opens the version history — reset the button so only
the inner Badge pill shows, with a clear focus ring for keyboard users. */
._historyButton_r124i_84 {
appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
border-radius: var(--cj-radius-pill);
}
._historyButton_r124i_84:focus-visible {
outline: 2px solid var(--cj-focus, var(--cj-accent));
outline-offset: 2px;
}
/* Title = what was decided, the loudest line (mirrors a topic title's weight). */
._title_r124i_100 {
font-size: var(--cj-text-lg);
font-weight: var(--cj-weight-bold);
letter-spacing: -0.01em;
line-height: var(--cj-leading-tight);
color: var(--cj-ink);
}
/* Period of effect — prominent, it's the heart of a decision (D.20/D.11). Set off
from the body in a quiet warm strip with the calendar glyph, so the « depuis le …
/ jusqu'au … » window is read at a glance, never buried in prose. */
._period_r124i_111 {
display: flex;
align-items: flex-start;
gap: var(--cj-space-2);
padding: var(--cj-space-2) var(--cj-space-3);
background: var(--cj-paper-warm);
border-radius: var(--cj-radius-sm);
font-size: var(--cj-text-base);
font-weight: var(--cj-weight-medium);
color: var(--cj-ink);
line-height: var(--cj-leading-snug);
}
._periodIcon_r124i_124 {
flex-shrink: 0;
margin-top: 2px;
color: var(--cj-accent-strong);
}
._body_r124i_130 {
font-size: var(--cj-text-md);
line-height: var(--cj-leading-snug);
color: var(--cj-ink-soft);
white-space: pre-wrap;
}
/* Linked AG topics (US-14) — a quiet "stems from" block. */
._linked_r124i_138 {
display: flex;
flex-direction: column;
gap: var(--cj-space-1);
padding: var(--cj-space-3);
background: var(--cj-paper-warm);
border-radius: var(--cj-radius-md);
}
._linkedLabel_r124i_147 {
font-size: var(--cj-text-xs);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* The contract exposes linked topic IDS only — we state a quiet count, not
titles we don't have. */
._linkedCount_r124i_157 {
font-size: var(--cj-text-base);
color: var(--cj-ink-soft);
}
/* Footer row: the discreet audit line on the left, the editor action (if any)
on the right. Wraps gracefully on a narrow phone. */
._footer_r124i_164 {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cj-space-2);
flex-wrap: wrap;
}
/* Mobile (≤860px) — Reco C (charte v1.4): the entry is a CARD now, not full-bleed.
A 6px lateral gutter (instruction Junior « padding 6px »); the SideSearch `.page`
gutter is 0 on mobile in tandem, so total card↔edge ≈ 6px. */
@media (max-width: 860px) {
._entry_r124i_14 {
margin-inline: 0; /* gutter moved up to `.page` padding (6px) — instruction Junior */
}
}
/* Minutes / notes of an AG session as a REGISTER ENTRY (doc 12 §4.5, D.11). The raw
SOURCE — secretary's notes — set BELOW the consolidated decisions. It shares the
gazette register form (chapeau rule + air, no raised box) but is deliberately
QUIETER than a decision: a muted rule (not accent-strong), a document eyebrow with
the « PV / note de séance » glyph, the session date as the title, and the long body
collapsed behind « Consulter ». That quieter rule + the doc eyebrow are the cues
that keep a PV distinct from a decision without relying on colour. Token-only. */
._entry_18rks_9 {
position: relative;
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
/* Light CARD with a GREY liseré (charte v1.4 « Reco C »): same card grammar as a
decision (white block, 1px hairline border, rounded, no shadow), but the left
rule is neutral `--cj-ink-faint`, not accent-strong — the secretary's note is
SUBORDINATE to the consolidated decision above it. That muted liseré (+ the doc
eyebrow in the TSX) keeps a PV distinct from a decision without resting on colour. */
background: var(--cj-paper);
border: 1px solid var(--cj-rule);
border-left: 3px solid var(--cj-ink-faint);
border-radius: var(--cj-radius-lg);
box-shadow: none;
overflow: hidden;
padding: var(--cj-space-3) var(--cj-space-4) var(--cj-space-2);
}
._topRow_18rks_28 {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cj-space-2);
flex-wrap: wrap;
}
._eyebrow_18rks_36 {
display: inline-flex;
align-items: center;
gap: var(--cj-space-1);
font-family: var(--cj-font-mono);
font-size: var(--cj-text-2xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cj-ink-muted);
font-weight: var(--cj-weight-medium);
}
._title_18rks_48 {
font-size: var(--cj-text-md);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
}
._body_18rks_54 {
font-size: var(--cj-text-base);
line-height: var(--cj-leading-relaxed);
color: var(--cj-ink-soft);
white-space: pre-wrap;
}
/* The « modifié » badge opens the version history — reset the button so only
the inner Badge pill shows, with a clear focus ring for keyboard users. */
._historyButton_18rks_63 {
appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
border-radius: var(--cj-radius-pill);
}
._historyButton_18rks_63:focus-visible {
outline: 2px solid var(--cj-focus, var(--cj-accent));
outline-offset: 2px;
}
/* Footer row: the discreet audit line on the left, the editor action (if any)
on the right. Wraps gracefully on a narrow phone. */
._footer_18rks_80 {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cj-space-2);
flex-wrap: wrap;
}
/* Mobile (≤860px) — Reco C (charte v1.4): the entry is a CARD now, not full-bleed.
A 6px lateral gutter (instruction Junior « padding 6px »); the SideSearch `.page`
gutter is 0 on mobile in tandem, so total card↔edge ≈ 6px. */
@media (max-width: 860px) {
._entry_18rks_9 {
margin-inline: 0; /* gutter moved up to `.page` padding (6px) — instruction Junior */
}
}
/* « PV & décisions » screen (doc 12 §4.5). Tabs + a gazette register feed. The
cards (DecisionCard / MinutesCard) are light CARDS (charte v1.4 « Reco C »), each
opened by its own left liseré (accent-strong for a decision, grey for a PV note),
the air living BETWEEN entries. Token-only; the tab pattern mirrors the keyring/
minutes tabs so the app feels of a piece. */
/* « Encoder une décision » composer slot (A5): a plain wrapper on desktop; on mobile
the WallComposer's own CSS turns it into the fixed bottom bar/bubble. `display:
contents` keeps the wrapper transparent to layout (mirrors the Wall/sujets), so the
bar flows in the content column on desktop and is `position: fixed` on mobile. */
._composerSlot_1phwh_11 {
display: contents;
}
/* (The reader search row is gone — the search magnifier lives in the masthead now,
Direction C, reachable on every consultation route including a plain /pv reader.) */
/* The view tabs (« En vigueur aujourd'hui » / « Tout ») moved to the shared
SegmentedTabs component (CJ-113, components/ui/SegmentedTabs.module.css) — the
`.tabs/.tab/.tabActive` rules that lived here are gone; MinutesScreen now only
composes the extracted component. */
/* (The retractions-bench shortcut moved to the masthead ⋯ menu — instruction Junior —
so its in-header `.benchRow` is gone.) Search moved to the right column / sliding panel
(CJ-93, via SideSearch) — the in-list `.searchRow` is gone too. */
/* Register feed: entries are NOT carded — the air lives BETWEEN blocks (their own
chapeau rule separates them), exactly like the wall/topics feeds. */
._feed_1phwh_29 {
display: flex;
flex-direction: column;
}
/* Register rhythm — Reco C (charte v1.4): entries are light cards, so the air between
them tightens to 24px (`--cj-space-5`), was 32px. */
._feed_1phwh_29 > * + * {
margin-top: var(--cj-space-5);
}
/* Gazette divider opening the « PV & notes » section (the raw source, below the
consolidated decisions). A mono eyebrow over a full-width hairline, so the shift
from synthesis to source reads as a section break — not just a heavier heading. */
._sectionHeading_1phwh_43 {
display: flex;
align-items: center;
gap: var(--cj-space-3);
font-family: var(--cj-font-mono);
font-size: var(--cj-text-xs);
font-weight: var(--cj-weight-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cj-ink-muted);
}
._sectionHeading_1phwh_43::after {
content: '';
flex: 1;
height: 1px;
background: var(--cj-rule);
}
/* CJ-108 — encoder/admin reminder banner's inline action, and the admin manage
Sheet's action row. */
._bannerAction_1phwh_64 {
display: inline;
padding: 0;
border: none;
background: none;
font: inherit;
font-weight: var(--cj-weight-semibold);
color: inherit;
text-decoration: underline;
cursor: pointer;
}
._manageActions_1phwh_76 {
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
margin-top: var(--cj-space-4);
}
/* Linked-topics selector (US-14, doc 12 §6.8 checkbox pattern). Token-only;
48px touch targets for senior readability. */
._fieldset_961y8_4 {
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-md);
padding: var(--cj-space-4);
margin: 0;
}
._legend_961y8_11 {
padding: 0 var(--cj-space-2);
font-size: var(--cj-text-base);
font-weight: var(--cj-weight-semibold);
color: var(--cj-ink);
}
._help_961y8_18 {
font-size: var(--cj-text-sm);
color: var(--cj-ink-muted);
margin-bottom: var(--cj-space-3);
}
._note_961y8_24 {
font-size: var(--cj-text-sm);
color: var(--cj-ink-muted);
font-style: italic;
}
._list_961y8_30 {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--cj-space-1);
}
._option_961y8_39 {
display: flex;
gap: var(--cj-space-3);
align-items: flex-start;
min-height: var(--cj-touch-min);
padding: var(--cj-space-2) var(--cj-space-3);
border-radius: var(--cj-radius-sm);
cursor: pointer;
}
._option_961y8_39:hover {
background: var(--cj-paper-warm);
}
._checkbox_961y8_53 {
flex-shrink: 0;
width: 22px;
height: 22px;
margin-top: 2px;
accent-color: var(--cj-accent);
cursor: pointer;
}
._checkbox_961y8_53:focus-visible {
outline: 2px solid var(--cj-accent);
outline-offset: 2px;
}
._optionLabel_961y8_67 {
font-size: var(--cj-text-base);
color: var(--cj-ink-soft);
line-height: var(--cj-leading-normal);
}
/* Compose flow layout (doc 12 §7.3). Tokens only. */
._form_gpqh5_3 {
display: flex;
flex-direction: column;
gap: var(--cj-space-5);
}
._photosBlock_gpqh5_9 {
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
}
._photosLabel_gpqh5_15 {
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-medium);
color: var(--cj-ink);
}
._reviewIntro_gpqh5_21 {
font-size: var(--cj-text-base);
color: var(--cj-ink-soft);
margin-bottom: var(--cj-space-4);
}
/* Stacked moderation cards (multi-topic, §6.7). */
._cards_gpqh5_28 {
display: flex;
flex-direction: column;
gap: var(--cj-space-4);
}
._doneActions_gpqh5_34 {
margin-top: var(--cj-space-5);
display: flex;
flex-direction: column;
gap: var(--cj-space-3);
}
/* Header trailing actions (Mon trousseau + Retour) on the compose flow. */
._headerActions_gpqh5_42 {
display: flex;
flex-wrap: wrap;
gap: var(--cj-space-1);
}
/* A locally-kept card: success wash + an inline "undo" affordance (§6.7). */
._keptRow_gpqh5_49 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--cj-space-2);
}
/* Encode PV/decision screen (doc 12 §4.5). Token-only; mirrors the compose flow
spacing (composes ComposeScreen.module.css for .form/.reviewIntro/.doneActions). */
/* Kind selector — Décision vs PV / note. Segmented, full-width on mobile. */
._kindToggle_1jg76_5 {
display: flex;
gap: var(--cj-space-1);
margin-bottom: var(--cj-space-4);
border: 1px solid var(--cj-rule);
border-radius: var(--cj-radius-md);
padding: 3px;
background: var(--cj-paper-warm);
}
._kindTab_1jg76_15 {
flex: 1;
min-height: var(--cj-touch-min);
padding: var(--cj-space-2) var(--cj-space-3);
background: none;
border: none;
border-radius: var(--cj-radius-sm);
font-family: var(--cj-font-body);
font-size: var(--cj-text-sm);
font-weight: var(--cj-weight-medium);
color: var(--cj-ink-muted);
cursor: pointer;
}
._kindTab_1jg76_15:focus-visible {
outline: var(--cj-focus-ring);
outline-offset: -2px;
}
._kindTabActive_1jg76_34 {
background: var(--cj-paper-raised);
color: var(--cj-accent);
box-shadow: var(--cj-elev-1);
}
/* Period of effect — two date fields side by side, stacking on narrow screens. */
._dates_1jg76_41 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cj-space-4);
}
@media (max-width: 28rem) {
._dates_1jg76_41 {
grid-template-columns: 1fr;
}
}
/* Native