) — cette définition
les répare toutes les deux sans y toucher. Pattern proche de
.vocnc-q-card__meta (grid dt/dd) mais 2 colonnes fixes (label large,
valeur qui s'étire) plutôt qu'auto/1fr compact. */
.vocnc-meta-grid {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--space-2) var(--space-6);
margin: 0;
}
.vocnc-meta-grid dt {
color: var(--fg-muted);
font-size: var(--fs-caption);
}
.vocnc-meta-grid dd {
margin: 0;
}
/* ─── 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;
}
/* D9 (passe C) — le bouton d'export et sa mention de portée. La mention doit
être SOUS le bouton, pas à côté : dans .vocnc-section__actions (flex row),
un nu deviendrait un item de la rangée. Colonne dédiée, alignée à droite
comme le bouton qu'elle qualifie. */
.vocnc-export {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-1);
}
.vocnc-export__hint {
margin: 0;
max-width: 22rem;
text-align: right;
}
/* Sous le plancher produit (DV-7 : 360 px), la rangée d'actions se replie :
la mention repasse à gauche, comme le reste de la colonne. */
@media (max-width: 767px) {
.vocnc-export {
align-items: flex-start;
}
.vocnc-export__hint {
text-align: left;
}
}
/* 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);
}
/* D12 (passe C, tour 2) — `.vocnc-breadcrumb a` A ÉTÉ RETIRÉE, PAS AJUSTÉE.
Elle posait `color: var(--slate-600); text-decoration: none` — EXACTEMENT la
couleur du conteneur, donc du non cliquable — et sa spécificité (0,1,1)
écrasait `.vocnc-link` (0,1,0) que le tour 1 venait de poser sur les 8 liens
des 5 fils. La classe était présente et sans effet : le défaut D12(a) restait
entier au style CALCULÉ, et le spec du tour 1, qui ne vérifiait que la
présence de la classe, était vert dessus.
Retirée plutôt que surspécifiée parce qu'elle n'a plus aucun consommateur :
les 8 liens des 5 fils portent tous `.vocnc-link` (vérifié un par un), et
`.vocnc-link:hover` couvre déjà ce que faisait `.vocnc-breadcrumb a:hover`.
Monter la spécificité aurait gardé une règle qui ne sert qu'à être battue. */
/* D13a (passe C) — CONTENEUR DÉFILANT. `width: 100%` sur une table à 7 colonnes
n'est pas une contrainte : au viewport plancher du produit (360 px, DV-7) la
largeur intrinsèque des colonnes gagne, la table est peinte PAR-DESSUS la
bordure de sa card et court jusqu'au bord de l'écran. Le document déborde
alors horizontalement, et le navigateur applique un shrink-to-fit à TOUTE la
page — mesuré à 57,8 % sur le rapport, 703 px de scrollWidth sur le cockpit.
C'est la cause unique de huit constats mobiles de la passe C : les libellés
« collés » (R153/R154) et le pied « trop petit » (R160) n'étaient que cette
réduction. Le débordement est rendu au conteneur, qui le porte en défilement
local — la page, elle, cesse de déborder.
Même cause racine que l'issue #292 (tableau des périmètres).
`max-width: 100%` est nécessaire EN PLUS de `overflow-x` : dans une grille ou
un flex, la base de taille `auto` d'un enfant est sa largeur intrinsèque, et
un `overflow-x: auto` seul ne l'empêcherait pas de pousser son parent.
Preuve par mutation (V-C-13e, 2026-08-14) : `overflow-x: visible` fait tomber
V-C-13a en nommant la cause — `doc_scroll` 627 px pour `doc_client` 360 px sur
la page de rapport, table intrinsèque 585 px. */
.vocnc-table-scroll {
overflow-x: auto;
max-width: 100%;
}
/* ─── 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. Recette #357 (19/08) :
plus d'underline au hover — la ligne entière est cliquable (#356) et signale
déjà l'affordance (bg-subtle + pointer), le soulignement du seul titre était
redondant. L'underline reste au focus clavier : c'est le repère visuel du
porteur d'accessibilité dans un tableau dense. */
.vocnc-table__link {
color: inherit;
text-decoration: none;
}
.vocnc-table__link:focus-visible {
text-decoration: underline;
text-underline-offset: 2px;
}
/* #356 — ligne entière cliquable (contrôleur Stimulus row-link) : le curseur
annonce la zone sensible étendue, le hover bg-subtle est déjà porté par
.vocnc-table__row:hover. */
.vocnc-table__row--clickable {
cursor: pointer;
}
/* 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);
}
/* Checkpoint (audit UX/design, mineur DESIGN-5) — variante densité pour les
tableaux compacts (ex : correspondance référence <-> lien sur la
restitution), remplace le style inline font-size: var(--fs-caption)
dupliqué en vue. Pattern calqué sur .vocnc-table--admin ci-dessus. */
.vocnc-table--dense .vocnc-table__head th,
.vocnc-table--dense .vocnc-table__row td {
font-size: var(--fs-caption);
}
/* Checkpoint (audit UX/design, mineur DESIGN-6) — troncature d'une cellule
longue (ex : URL de réponse) avec ellipsis, remplace le style inline
max-width/overflow/text-overflow/white-space dupliqué en vue. */
.vocnc-table__cell--truncate {
max-width: 256px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* G2 (gauntlet indicateurs) — n accolé au score dans la table des formulaires
actifs (« pas de score sans n »). Discret : plus petit et atténué, il ne vole
pas la vedette au score. */
.vocnc-table__n {
font-size: var(--fs-caption);
color: var(--fg-muted);
}
/* Marqueur « fiabilité faible » (score sous le seuil de fiabilité de
l'indicateur) — teinte ambre foncée --color-status-warning-strong
(≥ 4,5:1 à 12 px sur ligne normale et survolée — D-QUID-7), taille caption,
non emphatique. */
.vocnc-table__low-confidence {
font-size: var(--fs-caption);
color: var(--color-status-warning-strong);
}
/* ─── 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;
}
/* Checkpoint (audit UX/design, mineur DESIGN-8) — largeur réduite pour un
champ numérique isolé (ex : "Nombre de liens à générer"), remplace le
style inline max-width dupliqué en vue. */
.vocnc-input--narrow {
max-width: 240px;
}
.vocnc-textarea {
height: auto;
min-height: 96px;
resize: vertical;
}
/* Recette 2026-07-11 (TÂCHE 3) — l'éditeur de champ (_field_form.html.erb) applique
la classe `vocnc-input--textarea` à ses text_area (Question, choix, motifs FCR),
mais cette classe n'était définie NULLE PART : les textarea héritaient donc du
`height: 40px` de `.vocnc-input` et clampaient leur contenu multi-lignes à une
seule ligne visible (« le contenu de certains champs n'est pas toujours visible »).
On rétablit une hauteur auto pilotée par l'attribut rows, avec resize vertical et
un min-height cohérent (~3 lignes). Le width reste 100% via `.vocnc-input`. */
.vocnc-input--textarea {
height: auto;
min-height: calc(3 * 1.4em + 2 * var(--space-2));
resize: vertical;
line-height: 1.4;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.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;
/* Checkbox centrée verticalement avec sa description (Phase 03.5 UAT). */
align-items: center;
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;
/* Annule les marges verticales de .vocnc-form__label (pensées pour un champ
empilé label-au-dessus-input) : ici le label est inline à côté de la
checkbox, toute marge verticale le désaligne. */
margin: 0;
}
.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).