/* ============================================================
VoC.nc — Design System Tokens
Registre : SaaS transactionnel self-serve, fond clair majoritaire
Héritage : RESILIENCE (tokens structurels partagés)
============================================================ */
/* ---------- Fonts (Fontsource CDN — Geist MIT uniquement) ---------- */
@import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5/index.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5/index.css");
:root {
/* ============================================================
COLOR — Slate (neutre dominant) + Ember (accent chaud unique).
Pas de troisième couleur marketing.
============================================================ */
/* Slate — neutre dominant, hue ~220, inchangé vs RESILIENCE */
--slate-50: #F5F6F8;
--slate-100: #ECEEF1;
--slate-200: #D6D8DC;
--slate-400: #8D9094;
--slate-600: #4C5159;
--slate-800: #22262E;
--slate-900: #0F1117;
/* Ember — accent ambre chaud, signal CX humaine */
--ember-50: #FBEFE2;
--ember-100: #F5DBB8;
--ember-200: #EAC089;
--ember-400: #D18A2A;
--ember-600: #A66411;
--ember-800: #7A480B;
--ember-900: #543109;
/* Sémantiques — UI système uniquement, jamais décoratifs */
--success: #3B7A4F;
--warning: #AA7E2C;
--danger: #9E3B30;
/* ---------- Application tokens ---------- */
--bg-page: #FFFFFF; /* dominante claire */
--bg-surface: #FFFFFF;
--bg-subtle: var(--slate-50); /* sidebars, stripes */
--bg-inverse: var(--slate-900); /* cards sombres isolées */
--bg-muted: var(--slate-100);
--fg: var(--slate-900); /* jamais noir pur */
--fg-muted: var(--slate-600);
--fg-subtle: var(--slate-400);
--fg-inverse: var(--slate-100);
--fg-inverse-muted: #9BA3AE;
--border: var(--slate-200);
--border-strong: var(--slate-400);
--border-inverse: #2A2F39;
--accent: var(--ember-600);
--accent-hover: var(--ember-800);
--accent-subtle: var(--ember-50);
/* ============================================================
TYPE — 2 familles, role-exclusif. Pas de serif (retiré).
============================================================ */
--font-sans: "Geist Variable", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Type scale */
--fs-display-xl: 56px;
--fs-display-l: 44px;
--fs-display-m: 32px;
--fs-h2: 24px;
--fs-h3: 20px;
--fs-h4: 16px;
--fs-lead: 18px;
--fs-body: 16px;
--fs-ui: 14px;
--fs-caption: 12px;
--fs-eyebrow: 12px;
/* Line heights */
--lh-display: 1.05;
--lh-heading: 1.30;
--lh-body: 1.65;
--lh-ui: 1.55;
/* Letter-spacing */
--ls-display-xl: -0.020em;
--ls-display-l: -0.015em;
--ls-display-m: -0.010em;
--ls-h2: -0.005em;
--ls-eyebrow: 0.120em;
--ls-caption: 0.020em;
--ls-wordmark: 0.040em; /* voc.nc wordmark, lowercase, serré */
/* Weights */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
/* ============================================================
SPACING — base 4, strict (hérité)
============================================================ */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
--section-y-desktop: 96px;
--section-y-mobile: 48px;
/* ============================================================
RADII (hérités)
============================================================ */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 999px;
/* ============================================================
MOTION
============================================================ */
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
/* ============================================================
ELEVATION — focus Ember, modal minimal
============================================================ */
--shadow-focus: 0 0 0 3px rgba(166, 100, 17, 0.20); /* ember-600 @ 20% */
--shadow-sm: 0 1px 2px rgba(15, 17, 23, 0.04);
--shadow-md: 0 2px 6px rgba(15, 17, 23, 0.06), 0 1px 2px rgba(15, 17, 23, 0.04);
--shadow-modal: 0 8px 24px rgba(15, 17, 23, 0.12), 0 2px 6px rgba(15, 17, 23, 0.06);
/* ============================================================
LAYOUT
============================================================ */
--container-max: 1200px;
--container-gutter: 24px;
/* Dashboard shell */
--app-sidebar-w: 240px;
--app-header-h: 56px;
/* ---------- Phase 02.4 — Dark in-app shell (D-02.4-01) ---------- */
/* Tokens consommés par .vocnc-sidebar, .vocnc-app__col2, .vocnc-footer-legal--app */
--app-shell-bg: var(--slate-900); /* sidebar + in-app footer */
--app-shell-fg: var(--slate-100);
--app-shell-fg-muted: #9BA3AE; /* alias de --fg-inverse-muted existant */
--app-shell-border: var(--border-inverse);
--app-shell-active-bg: rgba(255, 255, 255, 0.06);
--app-shell-divider: rgba(255, 255, 255, 0.08);
--app-col2-bg: var(--slate-50); /* secondary panel (Col 2) */
--app-col2-bg-strong: var(--slate-100);
--app-main-bg: #FFFFFF;
--col-width-sidebar: 240px;
--col-width-list: 360px;
/* UAT round 7 (2026-05-13) — hauteur uniforme des 3 headers du shell app
(sidebar__brand + col2-header + vocnc-header). Permet l'alignement
horizontal visuel des trois zones « brand / nav / titre page ». */
--header-height: 64px;
/* UAT round 7 (2026-05-14) — hauteur attendue du footer in-app
(.vocnc-footer-legal--app). Sert à réserver l'espace inférieur sur
les colonnes fixées (sidebar, col2) pour qu'elles ne couvrent pas
le footer quand celui-ci est sticky-bottom (pattern : pieds de page
collé au bas de l'écran si le contenu n'occupe pas tout le viewport). */
--footer-height: 72px;
}
/* ============================================================
BASE
============================================================ */
html, body {
margin: 0;
padding: 0;
background: var(--bg-page);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: var(--fw-regular);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* UAT round 7 (2026-05-13) — la règle body flex column 100vh d'UAT-H est
retirée parce que le footer in-app a été déplacé À L'INTÉRIEUR de
`.vocnc-app` (row 3 de la grille). Body redevient un block standard, ce
qui permet à `position: sticky` sur `.vocnc-sidebar` de fonctionner
correctement contre le scroll document.
Les layouts publics (auth/legal/marketing/survey) appliquent eux-mêmes
`display: flex; flex-direction: column; min-height: 100vh` sur leur
propre classe body (vocnc-auth, vocnc-legal, etc.) — pas d'impact. */
/* ============================================================
SEMANTIC TYPE
============================================================ */
.display-xl { font-family: var(--font-sans); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display-xl); font-weight: var(--fw-medium); }
.display-l { font-family: var(--font-sans); font-size: var(--fs-display-l); line-height: 1.10; letter-spacing: var(--ls-display-l); font-weight: var(--fw-medium); }
.display-m { font-family: var(--font-sans); font-size: var(--fs-display-m); line-height: 1.20; letter-spacing: var(--ls-display-m); font-weight: var(--fw-medium); }
.h2 { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-h2); font-weight: var(--fw-medium); }
.h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: 1.40; font-weight: var(--fw-medium); }
.h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: 1.50; font-weight: var(--fw-medium); }
.lead { font-size: var(--fs-lead); line-height: 1.60; color: var(--fg-muted); }
.body { font-size: var(--fs-body); line-height: var(--lh-body); }
.ui-label { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.caption {
font-size: var(--fs-caption);
line-height: 1.40;
letter-spacing: var(--ls-caption);
color: var(--fg-muted);
}
/* EYEBROW — signature shared with RESILIENCE (ADN commun) */
.eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
line-height: 1.40;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
font-weight: var(--fw-medium);
color: var(--fg-muted);
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--inverse { color: var(--fg-inverse-muted); }
/* MONO — chiffres alignés, identifiants techniques */
.mono, .tabular {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* Link interne — signature */
.link-sys {
font-family: var(--font-mono);
font-size: var(--fs-caption);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
font-weight: var(--fw-medium);
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
white-space: nowrap;
display: inline-block;
transition: color var(--duration-base) var(--ease);
}
.link-sys:hover { color: var(--accent-hover); }
/* Focus ring — Ember */
:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-radius: var(--radius-sm);
}
::selection {
background: var(--ember-100);
color: var(--slate-900);
}
/* ============================================================
LEGAL PAGES — Typographic hierarchy (Phase 02.2 Plan 12, G-01)
Scope : uniquement les vues servies par LegalController (layout legal.html.erb).
Raison : les balises brutes , , ,
,
doivent avoir
une hiérarchie visuelle claire (UAT test 1 gap G-01). On applique ici
le type scale Geist sans réécrire les 5 vues ERB.
============================================================ */
.vocnc-legal__main {
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.vocnc-legal__main h1 {
font-family: var(--font-sans);
font-size: var(--fs-display-m); /* 32px */
line-height: 1.20;
letter-spacing: var(--ls-display-m);
font-weight: var(--fw-medium);
color: var(--fg);
margin: 0 0 var(--space-6) 0; /* premier élément, pas de margin-top */
}
.vocnc-legal__main h2 {
font-family: var(--font-sans);
font-size: var(--fs-h2); /* 24px */
line-height: var(--lh-heading);
letter-spacing: var(--ls-h2);
font-weight: var(--fw-medium);
color: var(--fg);
margin: var(--space-12) 0 var(--space-4) 0;
}
.vocnc-legal__main h3 {
font-family: var(--font-sans);
font-size: var(--fs-h3); /* 20px */
line-height: 1.40;
font-weight: var(--fw-medium);
color: var(--fg);
margin: var(--space-8) 0 var(--space-3) 0;
}
.vocnc-legal__main p {
margin: 0 0 var(--space-4) 0;
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.vocnc-legal__main ul,
.vocnc-legal__main ol {
margin: 0 0 var(--space-4) 0;
padding-left: var(--space-6);
}
.vocnc-legal__main li {
margin-bottom: var(--space-2);
line-height: var(--lh-body);
}
.vocnc-legal__main li:last-child {
margin-bottom: 0;
}
.vocnc-legal__main strong {
font-weight: var(--fw-semibold);
color: var(--fg);
}
.vocnc-legal__main a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.vocnc-legal__main a:hover {
color: var(--accent-hover);
}
.vocnc-legal__main code {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--bg-muted);
color: var(--fg-muted);
padding: 0 var(--space-1);
border-radius: var(--radius-sm);
}
.vocnc-legal__main time {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* Caption utility déjà stylée en global — pas de re-déclaration ici. */
/* Responsive : marges ajustées sur mobile */
@media (max-width: 640px) {
.vocnc-legal__main h1 {
font-size: 28px;
}
.vocnc-legal__main h2 {
font-size: 22px;
margin-top: var(--space-8);
}
.vocnc-legal__main h3 {
font-size: 18px;
margin-top: var(--space-6);
}
}
/* ============================================================
voc.nc — Layouts & Partials (Phase 2.2, A-03)
Consomme les tokens de vocnc_design.css (source canonique).
Styles spécifiques aux layouts application/survey/legal + footer.
============================================================ */
/* ---------- Wordmark voc.nc ---------- */
/* SKILL.md L22 : lowercase, Geist Medium, letter-spacing 0.04em */
.vocnc-wordmark {
font-family: var(--font-sans);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wordmark);
color: var(--fg);
font-size: var(--fs-h4);
text-decoration: none;
}
/* Phase 03 UAT 2026-05-10 — wordmark wrappé dans link_to root_path
(header + footer + sidebar dashboard). Reset des styles UA pour préserver
l'apparence wordmark (pas d'underline ni de bleu). Le focus visible est
conservé via :focus-visible (--focus-ring du design system).
IMPORTANT — spécificité : UA stylesheet a `a:link { text-decoration: underline }`
avec spécificité (0,1,1). Notre `.vocnc-wordmark-link` seul est (0,1,0) et perd.
On inclut `:link` dans la liste pour matcher la spécificité, idem `:visited`. */
.vocnc-wordmark-link,
.vocnc-wordmark-link:link,
.vocnc-wordmark-link:visited,
.vocnc-wordmark-link:hover,
.vocnc-wordmark-link:active {
color: inherit;
text-decoration: none;
display: inline-block;
}
.vocnc-wordmark-link:focus-visible {
outline: 2px solid var(--focus-ring, var(--fg));
outline-offset: 2px;
border-radius: 2px;
}
/* ---------- Footer légal commun (D-05 / A-03) ---------- */
/* Note UAT-01d : pas de margin-top — l'espacement est porté par le grid shell
(.vocnc-app gap) ou par padding interne. Évite les doubles gouttières
entre la dernière section main et le footer légal. */
.vocnc-footer-legal {
border-top: 1px solid var(--border);
padding: var(--space-6) 0;
font-size: var(--fs-caption);
color: var(--fg-muted);
background: var(--bg-surface);
}
.vocnc-footer-legal__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-gutter);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
@media (min-width: 768px) {
.vocnc-footer-legal__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.vocnc-footer-legal__brand {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* UAT round 7 (2026-05-14) — sur mobile, le brand passe en colonne pour que
la mention "Un produit RESILIENCE · Nouméa" soit ALIGNÉE À GAUCHE avec les
liens légaux du dessous (au lieu d'être collée au wordmark sur une seule
ligne avec align-items:center qui décalait optiquement le bloc). Le séparateur
inter-items "·" disparaît puisque les items sont sur des lignes séparées. */
@media (max-width: 768px) {
.vocnc-footer-legal__brand {
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
}
.vocnc-footer-legal__sep {
display: none;
}
}
.vocnc-footer-legal__sep {
color: var(--fg-subtle);
}
.vocnc-footer-legal__rsl {
color: inherit;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
.vocnc-footer-legal__rsl:hover {
color: var(--fg);
}
.vocnc-footer-legal__nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
}
.vocnc-footer-legal__nav a {
color: inherit;
text-decoration: none;
}
.vocnc-footer-legal__nav a:hover {
color: var(--fg);
text-decoration: underline;
}
/* ---------- Layout legal (pages publiques /mentions-legales, etc.) ---------- */
.vocnc-legal {
background: var(--bg-subtle);
color: var(--fg);
font-family: var(--font-sans);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.vocnc-legal__header {
border-bottom: 1px solid var(--border);
background: var(--bg-surface);
}
.vocnc-legal__header-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-4) var(--container-gutter);
display: flex;
align-items: center;
}
.vocnc-legal__main {
flex: 1;
max-width: 768px;
margin: 0 auto;
padding: var(--space-12) var(--container-gutter);
width: 100%;
}
/* ============================================================
Cookie table (Phase 02.2 Plan 12, G-09)
Table lisible et cohérente avec le design system sur la page
politique_cookies.html.erb.
Scope : uniquement la classe .vocnc-cookie-table.
============================================================ */
.vocnc-cookie-table-wrapper {
width: 100%;
overflow-x: auto;
margin: var(--space-6) 0;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-surface);
}
.vocnc-cookie-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
color: var(--fg);
margin: 0; /* override du margin global .vocnc-legal__main */
}
.vocnc-cookie-table caption {
caption-side: bottom;
padding: var(--space-3) var(--space-4);
color: var(--fg-muted);
font-size: var(--fs-caption);
line-height: 1.40;
text-align: left;
border-top: 1px solid var(--border);
}
.vocnc-cookie-table thead {
background: var(--bg-subtle);
}
.vocnc-cookie-table thead th {
padding: var(--space-3) var(--space-4);
text-align: left;
vertical-align: bottom;
font-weight: var(--fw-medium);
font-size: var(--fs-ui);
color: var(--fg);
border-bottom: 1px solid var(--border-strong);
white-space: nowrap;
}
.vocnc-cookie-table tbody td {
padding: var(--space-3) var(--space-4);
vertical-align: top;
border-top: 1px solid var(--border);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
}
.vocnc-cookie-table tbody tr:first-child td {
border-top: 0;
}
.vocnc-cookie-table tbody tr:nth-child(even) {
background: var(--bg-subtle);
}
.vocnc-cookie-table code {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--bg-muted);
color: var(--fg);
padding: 0 var(--space-1);
border-radius: var(--radius-sm);
white-space: nowrap;
}
.vocnc-cookie-table__col-legal-basis {
font-size: var(--fs-caption);
color: var(--fg-muted);
}
/* ============================================================
OPT-05 vues /annuler-mon-opposition + /s/:token/opt-out
Phase 02.2 Plan 17 round 3 gap closure G-41.
Classes utilisees par : cancel.html.erb, cancel_verify_form.html.erb,
cancel_request_sent.html.erb, cancel_success.html.erb,
optionally fallback_otp.html.erb.
============================================================ */
/* Wrapper content — max-width + layout vertical coherent avec .vocnc-legal__main
mais scope-isole a la classe elle-meme pour eviter collisions. */
.vocnc-legal-content {
max-width: 640px;
margin: 0 auto;
padding: var(--space-4) 0 var(--space-8);
color: var(--fg);
font-family: var(--font-sans);
}
.vocnc-legal-content > h1 {
font-size: var(--fs-display-m, 32px);
font-weight: var(--fw-semibold, 600);
line-height: 1.15;
margin: 0 0 var(--space-4);
color: var(--fg);
}
.vocnc-legal-content > p,
.vocnc-legal-content > ul,
.vocnc-legal-content > ol {
font-size: var(--fs-body, 16px);
line-height: var(--lh-body, 1.55);
margin: 0 0 var(--space-4);
color: var(--fg);
}
.vocnc-legal-content > ul,
.vocnc-legal-content > ol {
padding-left: var(--space-6);
}
/* Formulaire — labels + inputs + spacing vertical */
.vocnc-form {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin: var(--space-6) 0;
}
.vocnc-form label {
display: block;
font-size: var(--fs-ui, 14px);
font-weight: var(--fw-medium, 500);
margin-bottom: var(--space-2);
color: var(--fg);
}
.vocnc-form input[type="tel"],
.vocnc-form input[type="text"],
.vocnc-form input[type="email"] {
display: block;
width: 100%;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border);
background: var(--bg-surface);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-body, 16px);
line-height: 1.4;
border-radius: var(--radius-md);
box-sizing: border-box;
}
.vocnc-form input:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Boutons primaires (CTA) */
.vocnc-btn {
display: inline-block;
padding: var(--space-2) var(--space-4);
font-family: var(--font-sans);
font-size: var(--fs-ui, 14px);
font-weight: var(--fw-medium, 500);
line-height: 1.4;
border: 0;
border-radius: var(--radius-md);
cursor: pointer;
text-decoration: none;
text-align: center;
transition: opacity 120ms ease;
}
.vocnc-btn--primary {
background: var(--accent);
color: #FFFFFF;
}
.vocnc-btn--primary:hover {
opacity: 0.92;
}
/* Override contextuel : dans le layout legal, `.vocnc-legal__main a`
(vocnc_design.css) force color: accent + underline avec spécificité (0,1,1),
supérieure à `.vocnc-btn--primary` (0,1,0). Un link_to avec class .vocnc-btn
hériterait donc de la couleur accent sur fond accent → texte invisible.
Les sélecteurs ci-dessous (spécificité 0,2,1) restaurent l'apparence bouton. */
.vocnc-legal__main a.vocnc-btn {
text-decoration: none;
}
.vocnc-legal__main a.vocnc-btn--primary,
.vocnc-legal__main a.vocnc-btn--primary:hover {
color: #FFFFFF;
}
.vocnc-btn:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ALTCHA Web Component visibility — le widget rend son propre shadow-DOM,
mais on force un display:block + spacing vertical pour qu il s inscrive
proprement dans le flow du form. */
altcha-widget {
display: block;
margin: var(--space-4) 0;
min-height: 56px; /* evite layout shift pendant le PoW */
}
/* ============================================================
Phase 02.3 (D-13, D-24, D-30) — Layout app authentifié
Shell sidebar+header+main, posé sur grille CSS Grid 240px 1fr.
Mobile : sidebar collapse en burger sous 768px (Stimulus optionnel
à brancher Plan ultérieur — Wave 1 livre la structure CSS uniquement).
============================================================ */
/* UAT round 7 (2026-05-13) — grille 3 rows (header fixed-height / main 1fr / footer auto).
La row 1 réserve var(--header-height) même si .vocnc-header est `position: fixed`
(out-of-flow) — main commence donc bien sous le header sticky.
Footer défile avec le main (pas sticky — voir .vocnc-footer-legal--app). */
.vocnc-app {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: var(--header-height) 1fr auto;
grid-template-areas:
"sidebar header"
"sidebar main"
"sidebar footer";
min-height: 100vh;
background: var(--bg-page);
color: var(--fg);
font-family: var(--font-sans);
}
/* Phase 02.4 — variante 3-pane shell (form builder, settings, campaigns, responses).
Col2 (panel filtres/onglets/liste) entre sidebar et main. Toutes les aires
(header/main/footer) sont décalées vers la 3e colonne.
UAT round 7 (2026-05-14) — la row 3 (footer) est étendue sur col2 + col3
("sidebar footer footer") : le footer in-app couvre désormais visuellement
col2 + main, plus uniquement la colonne main. Le rendu noir était dissonant
quand seul le main portait le footer (col2 restait blanche jusqu'en bas). */
.vocnc-app--has-col2 {
grid-template-columns: var(--col-width-sidebar) var(--col-width-list) 1fr;
grid-template-areas:
"sidebar col2 header"
"sidebar col2 main"
"sidebar footer footer";
}
/* UAT round 7 — col2 passe en `position: fixed` (idem sidebar) pour rester
visible quand le main scrolle. Internal overflow-y: auto pour gérer le
contenu plus haut que le viewport. `padding-top: 0` pour que le col2-header
sticky touche le bord supérieur ; padding sides/bottom appliqué pour les
children (form list, tabs list, etc.).
UAT round 7 (2026-05-14) — `padding-bottom: var(--footer-height)` ajouté pour
que le contenu scrollable de col2 ne se masque pas sous le footer in-app
(qui passe en z-index 11 au-dessus de col2 et couvre les 72px du bas du
viewport quand sticky-bottom). Sans ça, les derniers items de col2
(ex: dernier onglet de paramètres) restent inaccessibles, cachés derrière
le footer dark. */
.vocnc-app__col2 {
grid-area: col2;
position: fixed;
top: 0;
left: var(--col-width-sidebar);
width: var(--col-width-list);
height: 100vh;
box-sizing: border-box;
background: var(--app-col2-bg);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
min-height: 0;
padding: 0 var(--space-4) var(--footer-height);
gap: var(--space-3);
overflow-y: auto;
z-index: 4;
}
/* UAT round 7 — header interne du col2 (titre du panneau : "Mes formulaires",
"Filtres", "Paramètres", etc.). Sticky en haut du col2 pour rester visible
quand col2 scrolle internement. Aligné en hauteur sur les autres headers.
`margin: 0 -space-4` annule le padding latéral du col2 parent pour que la
border-bottom du header s'étende jusqu'aux bords de col2. */
.vocnc-app__col2-header {
position: sticky;
top: 0;
height: var(--header-height);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin: 0 calc(-1 * var(--space-4));
padding: 0 var(--space-4);
background: var(--app-col2-bg);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
z-index: 1;
}
/* UAT-G — Col 3 main des vues 3-pane. Single source of truth pour le padding,
aligné avec .vocnc-main (2-pane). */
.vocnc-app__main {
grid-area: main;
padding: var(--space-6) var(--space-8);
min-width: 0;
}
.vocnc-sidebar {
/* UAT round 7 (2026-05-13) — passage de `position: sticky` à `position: fixed`.
`sticky` refusait de prendre — vraisemblablement à cause d'un containing
block implicite créé par un parent (`transform`, `contain`, ou la
combinaison body-flex/grid-1fr). `fixed` court-circuite tout ça : la
sidebar est ancrée au viewport indépendamment du flow.
Le `grid-area: sidebar` reste pour signaler l'intention (la colonne 1 du
grid garde sa largeur de 240px et réserve l'espace), même si le `fixed`
retire la sidebar du flow grid. */
grid-area: sidebar;
position: fixed;
top: 0;
left: 0;
width: 240px;
height: 100vh;
/* UAT round 7 (2026-05-13) — `box-sizing: border-box` REQUIS : sans ça,
`content-box` (default) ajoute le padding (16px top + 16px bottom) au
height: 100vh → sidebar fait 100vh+32px, déborde sous le viewport, et le
tenant pill (poussé en bas via margin-top: auto) est clippé. */
box-sizing: border-box;
background: var(--app-shell-bg);
color: var(--app-shell-fg);
border-right: 1px solid var(--app-shell-border);
display: flex;
flex-direction: column;
padding: var(--space-4) var(--space-3);
gap: var(--space-4);
overflow-y: auto;
z-index: 10;
}
/* UAT round 7 — brand area du sidebar : hauteur uniforme avec les autres
headers de l'app (col2-header + vocnc-header). Divider bottom matche
visuellement la border-bottom du vocnc-header. */
.vocnc-sidebar__brand {
height: var(--header-height);
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0 var(--space-3);
border-bottom: 1px solid var(--app-shell-border);
margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-3)) 0;
/* margin negative compense le padding du parent .vocnc-sidebar pour que la
brand area atteigne les bords gauche/droit sans gap visuel. */
flex-shrink: 0;
}
.vocnc-sidebar__nav {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1;
}
.vocnc-sidebar__nav-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
color: var(--app-shell-fg-muted);
text-decoration: none;
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
border-radius: var(--radius-md);
border-left: 2px solid transparent;
transition: background 120ms ease, color 120ms ease;
}
.vocnc-sidebar__nav-item:hover {
background: var(--app-shell-active-bg);
color: var(--app-shell-fg);
}
/* Phase 02.4 — bump contrast WCAG AAA sur fond slate-900 :
ember-200 (#EAC089) sur slate-900 = 11.3:1 (RESEARCH §10).
Border ember-400 conservée pour le rappel visuel du jalon Ember (D-03). */
.vocnc-sidebar__nav-item--active {
color: var(--ember-200);
border-left-color: var(--ember-400);
background: var(--app-shell-active-bg);
font-weight: var(--fw-medium);
}
.vocnc-sidebar__nav-item svg {
stroke: currentColor;
}
/* UAT round 7 (2026-05-13) — topbar sticky inspirée du sketch 006.
`position: fixed` (cohérent avec la sidebar) — le grid réserve var(--header-height)
sur la row 1 pour que le main commence bien sous le header.
En 2-pane : left = 240px (clear sidebar) ; en 3-pane : left = 240+col-width-list
(clear sidebar + col2). Hauteur strictement var(--header-height) pour l'alignement
horizontal avec sidebar__brand et app__col2-header. */
.vocnc-header {
grid-area: header;
position: fixed;
top: 0;
left: var(--col-width-sidebar);
right: 0;
height: var(--header-height);
box-sizing: border-box;
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
padding: 0 var(--space-6);
/* UAT round 7 (2026-05-14) — passage de flex-direction:column (2-row) à
flex-direction:row (3 sections : burgers | title-group | actions).
Pour le détail du raisonnement, voir application.html.erb (UAT round 7
2026-05-14). Les anciens .vocnc-header__row sont supprimés du markup. */
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-3);
z-index: 5;
}
/* En 3-pane, le topbar démarre après sidebar + col2 (les 3 zones « header » du
shell — sidebar__brand, col2-header, vocnc-header — partagent la même ligne). */
.vocnc-app--has-col2 .vocnc-header {
left: calc(var(--col-width-sidebar) + var(--col-width-list));
}
/* UAT round 7 (2026-05-14) — wrapper title-group : eyebrow EMPILÉ au-dessus du
h1, les deux left-aligned. Prend l'espace flex restant entre les burgers (à
gauche, mobile-only) et les actions (à droite). */
.vocnc-header__title-group {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.vocnc-header__eyebrow {
margin: 0;
/* Truncation propre si breadcrumb très long (TENANT · Section · Subsection…). */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vocnc-header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
/* UAT round 5 — page title dans le header authentifié (slot :header_left).
Style sobre : taille H4 + weight medium. */
.vocnc-header__title {
font-family: var(--font-sans);
font-size: var(--fs-h4);
font-weight: var(--fw-medium);
color: var(--fg);
margin: 0;
line-height: 1.4;
}
.vocnc-main {
grid-area: main;
/* UAT-G — aligné sur .vocnc-app__main pour padding consistent cross-routes. */
padding: var(--space-6) var(--space-8);
/* UAT round 7 (2026-05-13) — `overflow-y: auto` retiré : le scroll doit
se faire au niveau du document (pas internal-main), pour que la sidebar
`position: sticky; top: 0` fonctionne contre le scroll viewport. */
min-width: 0;
}
/* UAT round 7 (2026-05-14) — état desktop par défaut : boutons toggle drawer
mobile et backdrop cachés. PLACÉS AVANT la media query @max-width:768px
pour que les rules mobiles override correctement (specificité égale →
c'est l'ordre source qui tranche). */
.vocnc-header__mobile-toggle,
.vocnc-mobile-backdrop {
display: none;
}
@media (max-width: 768px) {
.vocnc-app,
.vocnc-app--has-col2 {
/* UAT round 7 (2026-05-14) — `.vocnc-app--has-col2` également resetée
en single column (sans cet override, le 3-pane garde son grid-template
3-cols sur mobile alors que sidebar/col2 sont display:none → grid
laisse 240+360px de gouttière vide à gauche). */
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"footer";
}
/* UAT round 7 (2026-05-14) — sidebar et col2 passent en MODE DRAWER sur
mobile (au lieu de display:none qui supprimait toute navigation). Par
défaut off-screen via translateX(-100%) ; mobile-nav controller toggle
les classes `vocnc-app--sidebar-open` / `vocnc-app--col2-open` qui
remettent translateX(0). z-index >= backdrop pour passer au-dessus de
l'overlay sombre quand ouvert. */
.vocnc-sidebar {
display: flex; /* re-active vs display:none antérieur */
transform: translateX(-100%);
transition: transform 200ms ease;
z-index: 20; /* > backdrop (15) > col2 mobile (16) */
}
.vocnc-app--sidebar-open .vocnc-sidebar {
transform: translateX(0);
}
.vocnc-app__col2 {
display: flex;
/* col2 sur mobile : drawer même UX que sidebar mais starts at left:0
(sans offset sidebar, puisque sidebar est elle-même drawer). Largeur
limitée à 320px pour que l'utilisateur voie un peu du main derrière. */
left: 0;
width: min(320px, 90vw);
height: 100vh;
transform: translateX(-100%);
transition: transform 200ms ease;
padding-bottom: var(--space-4); /* override du var(--footer-height) desktop */
z-index: 16;
}
.vocnc-app--col2-open .vocnc-app__col2 {
transform: translateX(0);
}
/* Backdrop semi-transparent visible quand un drawer est ouvert. Le hidden
attribute est synchronisé par mobile-nav#syncBackdrop.
UAT round 7 (2026-05-14) — `:not([hidden])` requis : la règle desktop
`.vocnc-mobile-backdrop { display: none }` (au-dessus de cette media)
gagne par défaut. On override via display:block UNIQUEMENT quand
l'attribut hidden est absent (= drawer ouvert). Quand hidden=true, on
retombe sur display:none → backdrop invisible et non-cliquable. */
.vocnc-mobile-backdrop:not([hidden]) {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 15;
}
.vocnc-header,
.vocnc-app--has-col2 .vocnc-header {
/* Sidebar masquée → header part du bord gauche.
UAT round 7 (2026-05-14) — padding latéral réduit (8px au lieu de 24px
desktop) + gap entre items resserré (4px au lieu de 12px) pour rapprocher
le burger du bord gauche et coller les 2 toggles burger + col2. */
left: 0;
padding: 0 var(--space-2);
gap: var(--space-1);
}
.vocnc-main {
padding: var(--space-4);
}
/* Boutons de toggle drawer dans le topbar — visibles uniquement sur mobile.
UAT round 7 (2026-05-14) — margin-right retiré : redondant avec
`.vocnc-header { gap: var(--space-1) }` du media block, et créait un
décalage cumulé (8px margin + 4px gap = 12px entre toggles). */
.vocnc-header__mobile-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--fg);
cursor: pointer;
flex-shrink: 0;
}
.vocnc-header__mobile-toggle:hover,
.vocnc-header__mobile-toggle:focus-visible {
background: var(--bg-subtle);
border-color: var(--border);
}
.vocnc-header__mobile-toggle svg {
stroke: currentColor;
}
}
/* Squelette layout auth (consommé Plan 06 — Devise auth pages) */
.vocnc-auth {
background: var(--bg-subtle);
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: var(--font-sans);
}
.vocnc-auth__header {
padding: var(--space-6) var(--space-4);
border-bottom: 1px solid var(--border);
background: var(--bg-surface);
}
.vocnc-auth__main {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: center;
padding: var(--space-8) var(--space-4);
}
/* ============================================================
Layout survey public — /r/:token (Phase 02.3 Plan 03, D-25)
Mobile-first, RGPD-strict (no-Stimulus, no-cookie, SURV-01 / SURV-06).
Le bouton submit `.vocnc-btn--primary` est l'unique élément Ember
visible (D-03 inviolable). Footer D-12 reskinné en classes vocnc-*.
============================================================ */
.vocnc-survey-body {
background: var(--bg-subtle);
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: var(--font-sans);
color: var(--fg);
margin: 0;
}
.vocnc-survey {
flex: 1;
max-width: 480px;
width: 100%;
margin: 0 auto;
padding: var(--space-6) var(--space-4);
}
@media (min-width: 640px) {
.vocnc-survey {
max-width: 640px;
padding: var(--space-8);
}
}
.vocnc-survey__brand {
padding-block: var(--space-4);
text-align: center;
margin-bottom: var(--space-4);
}
.vocnc-survey__footer {
max-width: 480px;
margin: var(--space-8) auto 0;
padding: var(--space-4);
border-top: 1px solid var(--border);
text-align: center;
font-size: var(--fs-caption);
color: var(--fg-muted);
}
.vocnc-survey__footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.vocnc-survey__footer-links a {
color: var(--slate-600);
text-decoration: none;
}
.vocnc-survey__footer-links a:hover {
color: var(--slate-900);
text-decoration: underline;
}
.vocnc-survey__footer .vocnc-eyebrow a {
color: inherit;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
/* ============================================================
Phase 02.4 — Footer dark variant in-app (D-02.4-01)
Modificateur appliqué uniquement par application.html.erb (Plan 02
passe `variant: "app"` au partial _footer_legal). La règle de base
.vocnc-footer-legal reste claire pour les layouts publics
(legal/auth/survey/marketing) — invariant T2 / regression UAT-01d.
============================================================ */
.vocnc-footer-legal--app {
/* UAT round 7 (2026-05-13) — footer placé en row 3 de la grille .vocnc-app
(colonne droite uniquement, sidebar restant visible à gauche).
UAT round 7 (2026-05-14) — `position: relative; z-index: 11` pour que le
footer passe AU-DESSUS de col2 (z-index 4, position fixed) en mode
3-pane. Sans ça, col2 (fixed) couvre le footer en flow → footer invisible
derrière col2 dans les 72px du bas du viewport (sticky-bottom case). */
grid-area: footer;
position: relative;
z-index: 11;
background: var(--app-shell-bg);
color: var(--app-shell-fg);
border-top: 1px solid var(--app-shell-border);
}
.vocnc-footer-legal--app a {
color: var(--app-shell-fg);
}
.vocnc-footer-legal--app a:hover {
color: var(--ember-200);
}
.vocnc-footer-legal--app .vocnc-footer-legal__brand {
color: var(--app-shell-fg);
}
/* UAT round 7 (2026-05-14) — wordmark masqué dans la variante dark in-app.
Raison : `.vocnc-wordmark` force `color: var(--fg)` (slate-900 / dark)
qui devient INVISIBLE sur le footer slate-900 → un gros vide sur mobile
(le span occupait sa hauteur sans rien afficher). Le wordmark est déjà
omniprésent dans le shell (sidebar__brand) — le re-rendre dans le footer
est redondant. Sur les layouts publics (light footer), le wordmark reste
visible (couleur fg sombre sur bg clair). */
.vocnc-footer-legal--app .vocnc-wordmark-link {
display: none;
}
/* UAT round 7 (2026-05-13) — alignement du footer in-app avec la colonne main.
Sans cet override, le footer interne (.vocnc-footer-legal__inner) utilise
`max-width: var(--container-max)` + `padding: 0 var(--container-gutter)` (24px),
alors que la colonne main (.vocnc-main / .vocnc-app__main) utilise un padding
horizontal de `var(--space-8)` (32px) sans max-width. Résultat : décalage
visuel de 8px entre le footer et le contenu main, et centrage du footer sur
les écrans larges. Override : aligner padding sur space-8, retirer max-width
pour que le footer suive la largeur réelle de la colonne. Invariant T2
préservé : la règle de base `.vocnc-footer-legal` (layouts publics) reste
inchangée — seul le variant `--app` est ajusté. */
.vocnc-footer-legal--app .vocnc-footer-legal__inner {
max-width: none;
padding: 0 var(--space-8);
}
@media (max-width: 768px) {
.vocnc-footer-legal--app .vocnc-footer-legal__inner {
padding: 0 var(--space-4);
}
}
/* ============================================================
voc.nc — Components atomiques (Phase 02.3, D-07)
Consomme tokens vocnc_design.css (LOCKED). BEM-like (D-09).
RESERVED Ember : .vocnc-btn--primary, .vocnc-sidebar__nav-item--active,
a:focus-visible (ring), .vocnc-stat__delta--up. Voir UI-SPEC §Ember.
Règle inviolable : un seul élément Ember visible par écran.
============================================================ */
/* ─── Composant 1 : Card + variants (D-16) ─── */
.vocnc-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
.vocnc-card--compact {
padding: var(--space-4);
}
.vocnc-card--inverse {
background: var(--slate-900);
color: var(--slate-100);
border-color: var(--slate-800);
}
.vocnc-card__header {
/* UAT round 7 (2026-05-13) — passage de flex row à flex column.
L'ancienne valeur `flex-direction: row + justify-content: space-between`
ne convient à AUCUN des usages réels : tous les card__header empilent
verticalement eyebrow / title / subtitle (api_tokens/new, imports/*,
forms/*, shared_reports, admin/*, tenant_settings/*). 6 pages Devise
contournaient avec `style="display:block"` inline — preuve que le
défaut était mal calibré. Column par défaut + items align-items start. */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
margin-bottom: var(--space-3);
}
.vocnc-card__title {
font-family: var(--font-sans);
font-size: var(--fs-h3);
font-weight: var(--fw-medium);
color: var(--fg);
margin: 0 0 var(--space-3) 0;
}
/* Sous-titre carte — tagline mutée sous le titre dans .vocnc-card__header
(Phase 02.3 WR-02 — utilisé par api_tokens/new, imports/new, imports/show,
shared_reports/access_code). Slate 600 caption — pas Ember (D-03). */
.vocnc-card__subtitle {
font-size: var(--fs-caption);
color: var(--slate-600);
margin: 0 0 var(--space-3) 0;
}
.vocnc-card__body {
color: var(--fg);
font-size: var(--fs-body);
line-height: var(--lh-body, 1.55);
}
.vocnc-card__footer {
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: var(--space-3);
}
/* ─── Composant 2 : Stat / KPI (D-17) ─── */
.vocnc-stat {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.vocnc-stat__value {
font-family: var(--font-mono);
font-weight: var(--fw-medium);
font-size: 32px;
font-variant-numeric: tabular-nums;
color: var(--fg);
line-height: 1.1;
margin: 0;
}
.vocnc-stat__delta {
font-size: var(--fs-caption);
color: var(--slate-600);
margin: 0;
}
.vocnc-stat__delta--up {
color: var(--ember-600);
}
.vocnc-stat__delta--down {
color: var(--danger);
}
.vocnc-stat--inverse .vocnc-stat__value {
color: var(--slate-100);
}
.vocnc-stat--inverse .vocnc-stat__delta {
color: var(--slate-200);
}
/* ─── Composant 3 : Eyebrow (D-22) ─── */
.vocnc-eyebrow {
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-medium);
color: var(--slate-600);
margin: 0;
}
.vocnc-eyebrow--inverse {
color: var(--slate-200);
}
/* ─── Composant 4 : Grid responsive ─── */
.vocnc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-4);
}
.vocnc-grid--cols-4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
.vocnc-grid--cols-4 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
/* ─── Composant 5 : Section ─── */
.vocnc-section {
margin-block: var(--space-8);
}
.vocnc-section__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-4);
gap: var(--space-3);
flex-wrap: wrap;
}
.vocnc-section__header h1,
.vocnc-section__header h2,
.vocnc-section__header .vocnc-section__title {
font-size: var(--fs-h3);
font-weight: var(--fw-medium);
color: var(--fg);
margin: 0;
}
/* Conteneur d'actions à droite du header de section
(filtre date + CTA "Exporter CSV", boutons "Créer un formulaire"…). */
.vocnc-section__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
/* Fil d'Ariane simple (forms/report — Plan 02 Task 2). */
.vocnc-breadcrumb {
font-family: var(--font-sans);
font-size: var(--fs-ui);
color: var(--slate-600);
margin-bottom: var(--space-2);
}
.vocnc-breadcrumb a {
color: var(--slate-600);
text-decoration: none;
}
.vocnc-breadcrumb a:hover {
text-decoration: underline;
}
/* ─── Composant 6 : Table (D-18, généralisation .vocnc-cookie-table) ─── */
.vocnc-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: var(--fs-ui);
color: var(--fg);
background: var(--bg-surface);
}
.vocnc-table__head {
background: var(--bg-subtle);
}
.vocnc-table__head th {
padding: var(--space-3) var(--space-4);
text-align: left;
font-weight: var(--fw-medium);
font-size: var(--fs-ui);
color: var(--slate-600);
border-bottom: 1px solid var(--border-strong);
vertical-align: bottom;
}
.vocnc-table__row td {
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--border);
vertical-align: top;
}
.vocnc-table__row:hover {
background: var(--bg-subtle);
}
.vocnc-table__row--invalid {
border-left: 3px solid var(--danger);
background: #FFF7F6;
}
/* IN-07 — Lien sur première colonne d'une .vocnc-table__row pour remplacer
l'ancien `onclick="window.location=..."` (a11y + CSP). Le lien hérite de
la couleur slate-900 du td parent et reste lisible — l'underline n'apparaît
qu'au hover/focus pour ne pas surcharger un tableau dense. Le hover de la
row est déjà géré par .vocnc-table__row:hover (bg-subtle), donc visuellement
le lien et la row partagent l'état hover. */
.vocnc-table__link {
color: inherit;
text-decoration: none;
}
.vocnc-table__link:hover,
.vocnc-table__link:focus {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Variante densité admin pour tableaux ledger 500+ lignes (D-29 Plan 07).
Padding compressé 8/12 (au lieu de 12/16 base) + font-size caption (13 au lieu de 14)
pour scroll efficace sur ledger SystemSmsCredit append-only.
Hover slate-50 préservé (déjà sur .vocnc-table__row:hover, mais explicit ici
pour éviter ambiguïté si la base change). */
.vocnc-table--admin .vocnc-table__head th,
.vocnc-table--admin .vocnc-table__row td {
padding: var(--space-2) var(--space-3);
font-size: var(--fs-caption);
}
.vocnc-table--admin .vocnc-table__head th {
text-transform: uppercase;
letter-spacing: 0.04em;
}
.vocnc-table--admin .vocnc-table__row:hover {
background: var(--bg-subtle);
}
/* ─── Composant 7 : Input + textarea + select (D-15) ─── */
.vocnc-input,
.vocnc-textarea,
.vocnc-select {
display: block;
width: 100%;
height: 40px;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border);
background: var(--bg-surface);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.4;
border-radius: var(--radius-md);
box-sizing: border-box;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
/* Variante compacte pour les filtres inline (date-filter, alert_threshold). */
.vocnc-input--sm {
height: 32px;
padding: var(--space-1) var(--space-2);
font-size: var(--fs-caption);
width: auto;
}
.vocnc-textarea {
height: auto;
min-height: 96px;
resize: vertical;
}
.vocnc-input:focus-visible,
.vocnc-textarea:focus-visible,
.vocnc-select:focus-visible {
border-color: var(--accent);
outline: 0;
box-shadow: 0 0 0 3px rgba(166, 100, 17, 0.20);
}
.vocnc-input:disabled,
.vocnc-textarea:disabled,
.vocnc-select:disabled {
background: var(--slate-50);
color: var(--slate-600);
cursor: not-allowed;
}
/* ─── Composant 8 : Input group (icon + input alignés) ─── */
.vocnc-input-group {
display: flex;
gap: var(--space-2);
align-items: center;
}
.vocnc-input-group .vocnc-input,
.vocnc-input-group .vocnc-select {
flex: 1;
}
/* ─── Composant 9 : Form field (label + input + helper) ─── */
.vocnc-form__field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
/* Phase 03 UAT round 7 — row 2-col pour grouper deux champs côte-à-côte
(signup: name+legal_form, postal_code+city ; tenant_settings: idem).
Sur écran étroit (<640px), les deux champs se replient en colonne. */
.vocnc-form__row--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
@media (max-width: 640px) {
.vocnc-form__row--split {
grid-template-columns: 1fr;
}
}
.vocnc-form__field--checkbox {
flex-direction: row;
align-items: flex-start;
gap: var(--space-2);
}
.vocnc-form__label--checkbox {
font-weight: var(--fw-regular) !important;
font-size: var(--fs-ui);
line-height: 1.45;
color: var(--fg);
cursor: pointer;
}
.vocnc-form__label--checkbox a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.vocnc-form__label--checkbox a:hover {
color: var(--accent-hover);
}
/* Phase 03 UAT round 3 — sections de form (signup multi-section).