for horizontal overflow.
The table itself becomes scrollable instead of pushing the whole page wider. */
.v2-table-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--v2-radius-lg);
}
.v2-table {
width: 100%;
min-width: 600px; /* readable threshold; below this the wrapper scrolls horizontally */
background: hsl(var(--v2-card));
border: 1px solid hsl(var(--v2-border-default));
border-radius: var(--v2-radius-lg);
overflow: hidden;
border-collapse: separate;
border-spacing: 0;
}
/* When a v2-table is inside a Shared:ChartCard body, it inherits
the card's overflow:hidden — wrap it in v2-table-scroll for horizontal scroll. */
.v2-table thead th {
background: hsl(var(--v2-muted-bg) / 0.5);
color: hsl(var(--v2-muted));
font-size: var(--v2-text-11);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--v2-space-3) var(--v2-space-4);
text-align: left;
border-bottom: 1px solid hsl(var(--v2-border-default));
}
.v2-table tbody td {
padding: var(--v2-space-3) var(--v2-space-4);
border-bottom: 1px solid hsl(var(--v2-border-subtle));
color: hsl(var(--v2-foreground));
font-size: var(--v2-text-14);
font-variant-numeric: tabular-nums;
transition: background var(--v2-duration-fast) var(--v2-ease);
}
.v2-table tbody tr:last-child td {
border-bottom: 0;
}
.v2-table tbody tr {
transition: background var(--v2-duration-fast) var(--v2-ease);
}
.v2-table tbody tr:hover td {
background: hsl(var(--v2-muted-bg) / 0.5);
}
/* === Badge === */
.v2-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: var(--v2-text-12);
font-weight: 600;
padding: 0.25rem 0.625rem;
border-radius: var(--v2-radius-full);
line-height: 1;
}
.v2-badge--success {
color: hsl(var(--v2-success-700));
background: hsl(var(--v2-success-50));
}
.v2-badge--danger {
color: hsl(var(--v2-danger-700));
background: hsl(var(--v2-danger-50));
}
.v2-badge--warning {
color: hsl(var(--v2-warning-800));
background: hsl(var(--v2-warning-50));
}
.v2-badge--info {
color: hsl(var(--v2-info-700));
background: hsl(var(--v2-info-50));
}
.v2-badge--default {
color: hsl(var(--v2-muted));
background: hsl(var(--v2-muted-bg));
}
/* === ConfirmDialog (override Bootstrap) === */
.v2-modal .modal-content {
border: 0;
border-radius: var(--v2-radius-lg);
box-shadow: var(--v2-shadow-lg);
}
/* === Page header (legacy, kept for backwards compat) ===
The page title is now rendered inside `.v2-topbar` (top header bar).
This `.v2-page-header` block is no longer used by V2 templates but the
styles are kept in case any external page still uses the old structure. */
/* === Grid utilities (Axe 2 — strict gap tokens) === */
.v2-grid {
display: grid;
gap: var(--v2-space-4);
}
.v2-grid--kpis {
/* Force 5 cols on desktop so the strip never collapses to 3+2 or 4+1.
Intermediate breakpoint at 1280→4 cols, 1100→3 cols smooths the transition. */
grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1280px) {
.v2-grid--kpis {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 1100px) {
.v2-grid--kpis {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.v2-grid--kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.v2-grid--kpis {
grid-template-columns: 1fr;
}
}
.v2-grid--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
.v2-grid--cols-2 {
grid-template-columns: 1fr;
}
}
/* Payloads JSON côte à côte (requête ↔ réponse PSP) : la comparaison en
vis-à-vis n'a de valeur que si chaque colonne reste lisible. En dessous de
1200 px, deux colonnes de JSON deviennent des couloirs — on empile alors
pour rendre à chaque payload TOUTE la largeur de la page. */
.v2-grid--payloads {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1200px) {
.v2-grid--payloads {
grid-template-columns: 1fr;
}
}
.v2-grid--cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
.v2-grid--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.v2-grid--cols-3 { grid-template-columns: 1fr; }
}
.v2-grid--cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1280px) {
.v2-grid--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.v2-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
.v2-grid--cols-4 { grid-template-columns: 1fr; }
}
/* === Mobile Safari quirks ===
Prevent iOS Safari from auto-scaling text size on orientation change
(it bumps font-size by ~110% on landscape which scrambles tabular-nums
alignment). Combined with the viewport meta this is the duo that
makes V2 look identical between iPhone Safari and desktop Chrome. */
html,
body.v2-dashboard {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* iOS native date inputs render their picker out of band — make sure the
form-control container can shrink on small screens so the picker doesn't
force the toolbar wider than the viewport. */
@media (max-width: 600px) {
body.v2-dashboard input[type="date"].form-control {
min-width: 0;
width: 100%;
}
}
/* === Chart card extras (Sprint Bridge-B refactor v2) === */
/* Right-aligned badge in chart card header (e.g. "X transactions" counter). */
.v2-chart-card__badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.6rem;
border-radius: var(--v2-radius-full);
background: hsl(var(--v2-muted-bg));
color: hsl(var(--v2-muted));
font-size: var(--v2-text-13);
font-weight: 500;
white-space: nowrap;
}
/* Wraps a Chart.js canvas. Without this, Chart.js can set a pixel width
that overflows the grid cell on responsive breakpoints. */
.v2-chart-canvas-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.v2-chart-canvas-wrapper > canvas {
max-width: 100% !important;
height: 100% !important;
}
/* === Donut + side-list layout (Next.js parity) ===
Renders as : [donut canvas] [legend list with label / value / pct]. */
.v2-donut-row {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 1rem;
align-items: center;
min-height: 240px;
}
@media (max-width: 768px) {
.v2-donut-row {
grid-template-columns: 1fr;
}
}
.v2-donut-canvas-wrapper {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
}
.v2-donut-canvas-wrapper > canvas {
max-width: 100% !important;
height: 100% !important;
}
.v2-legend-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
/* Plus de max-height + scroll. Quand il y a > 7 prestataires, on ne
montre que les 7 plus gros et on agrège le reste dans une ligne
"+ N autres" (faite côté Twig avec |slice). Le donut reste complet. */
overflow: hidden;
}
.v2-legend-list__item--more {
/* Ligne "+ N autres" — un peu plus discrète que les vrais items */
color: hsl(var(--v2-muted));
font-style: italic;
font-size: var(--v2-text-13);
padding-top: 0.4rem;
margin-top: 0.2rem;
border-top: 1px dashed hsl(var(--v2-border));
}
.v2-legend-list__item--more .v2-legend-list__dot {
background: repeating-linear-gradient(
45deg,
hsl(var(--v2-muted)) 0 2px,
transparent 2px 5px
) !important;
}
.v2-legend-list__item {
display: grid;
grid-template-columns: 0.7rem 1fr auto auto;
align-items: center;
gap: 0.6rem;
font-size: var(--v2-text-14);
color: hsl(var(--v2-foreground));
padding: 0.2rem 0;
border-bottom: 1px solid hsl(var(--v2-border) / 0.6);
}
.v2-legend-list__item:last-child {
border-bottom: none;
}
.v2-legend-list__dot {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
border-radius: var(--v2-radius-full);
flex-shrink: 0;
}
.v2-legend-list__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: hsl(var(--v2-foreground));
}
.v2-legend-list__value {
color: hsl(var(--v2-muted));
font-variant-numeric: tabular-nums;
text-align: right;
}
.v2-legend-list__pct {
font-weight: 600;
color: hsl(var(--v2-foreground));
font-variant-numeric: tabular-nums;
text-align: right;
min-width: 2.5rem;
}
/* ════════════════════════════════════════════════════════════════
Premium UI pass — buttons, inputs, forms, filter bars
Scoped to .v2-main so we don't bleed into the legacy Twig dashboard.
════════════════════════════════════════════════════════════════ */
/* === Buttons (Axe 2 — premium: tighter, sharper, single transition) === */
.v2-main .btn {
border-radius: var(--v2-radius-md);
font-weight: 500;
font-size: var(--v2-text-14);
padding: var(--v2-space-2) var(--v2-space-4);
transition: all var(--v2-duration-fast) var(--v2-ease);
display: inline-flex;
align-items: center;
gap: var(--v2-space-2);
line-height: 1.2;
border-width: 1px;
letter-spacing: -0.005em;
/* Premium subtle highlight at top — gives buttons depth without shadow */
position: relative;
}
.v2-main .btn-sm {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: var(--v2-space-2) var(--v2-space-3);
font-size: var(--v2-text-13);
border-radius: var(--v2-radius-sm);
gap: var(--v2-space-1);
}
.v2-main .btn-lg {
padding: var(--v2-space-3) var(--v2-space-5);
font-size: var(--v2-text-14);
border-radius: var(--v2-radius-md);
}
.v2-main .btn-primary {
background: hsl(var(--v2-primary-500));
border-color: hsl(var(--v2-primary-500));
color: white;
}
.v2-main .btn-primary:hover,
.v2-main .btn-primary:focus {
background: hsl(var(--v2-primary-600));
border-color: hsl(var(--v2-primary-600));
color: white;
box-shadow: 0 0 0 3px hsl(var(--v2-primary-500) / 0.2);
}
.v2-main .btn-outline-secondary {
background: hsl(var(--v2-card));
border-color: hsl(var(--v2-border));
color: hsl(var(--v2-foreground));
}
.v2-main .btn-outline-secondary:hover,
.v2-main .btn-outline-secondary:focus {
background: hsl(var(--v2-muted-bg));
border-color: hsl(var(--v2-border));
color: hsl(var(--v2-foreground));
box-shadow: 0 0 0 3px hsl(var(--v2-border) / 0.5);
}
/* === Cyan accent buttons (eZengo brand) === */
.v2-main .btn-outline-primary {
background: hsl(var(--v2-card));
border-color: hsl(var(--v2-primary-500) / 0.55);
color: hsl(var(--v2-primary-600));
font-weight: 500;
}
.v2-main .btn-outline-primary:hover,
.v2-main .btn-outline-primary:focus {
background: hsl(var(--v2-primary-50));
border-color: hsl(var(--v2-primary-500));
color: hsl(var(--v2-primary-700));
box-shadow: 0 0 0 3px hsl(var(--v2-primary-500) / 0.18);
}
.v2-main .btn-info,
.v2-modal .btn-info {
background: hsl(var(--v2-primary-500));
border-color: hsl(var(--v2-primary-500));
color: white;
font-weight: 500;
}
.v2-main .btn-info:hover,
.v2-main .btn-info:focus,
.v2-modal .btn-info:hover,
.v2-modal .btn-info:focus {
background: hsl(var(--v2-primary-600));
border-color: hsl(var(--v2-primary-600));
color: white;
box-shadow: 0 0 0 3px hsl(var(--v2-primary-500) / 0.2);
}
.v2-main .btn-outline-info {
background: hsl(var(--v2-card));
border-color: hsl(var(--v2-primary-500) / 0.55);
color: hsl(var(--v2-primary-600));
}
.v2-main .btn-outline-info:hover,
.v2-main .btn-outline-info:focus {
background: hsl(var(--v2-primary-50));
border-color: hsl(var(--v2-primary-500));
color: hsl(var(--v2-primary-700));
box-shadow: 0 0 0 3px hsl(var(--v2-primary-500) / 0.18);
}
/* Light variant — used in V1 for "clear" — keep neutral but with cyan focus */
.v2-main .btn-light,
.v2-modal .btn-light {
background: hsl(var(--v2-muted-bg));
border-color: hsl(var(--v2-border));
color: hsl(var(--v2-foreground));
}
.v2-main .btn-light:hover,
.v2-main .btn-light:focus {
background: hsl(var(--v2-card));
border-color: hsl(var(--v2-primary-500) / 0.55);
color: hsl(var(--v2-primary-700));
}
.v2-main .btn-outline-danger {
background: hsl(var(--v2-card));
border-color: hsl(var(--v2-danger-500) / 0.4);
color: hsl(var(--v2-danger-600));
}
.v2-main .btn-outline-danger:hover,
.v2-main .btn-outline-danger:focus {
background: hsl(var(--v2-danger-50));
border-color: hsl(var(--v2-danger-500));
color: hsl(var(--v2-danger-600));
box-shadow: 0 0 0 3px hsl(var(--v2-danger-500) / 0.18);
}
.v2-main .btn-outline-warning {
background: hsl(var(--v2-card));
border-color: hsl(var(--v2-warning-500) / 0.4);
color: hsl(var(--v2-warning-600));
}
.v2-main .btn-outline-warning:hover,
.v2-main .btn-outline-warning:focus {
background: hsl(var(--v2-warning-50));
border-color: hsl(var(--v2-warning-500));
color: hsl(var(--v2-warning-600));
}
.v2-main .btn-outline-success {
background: hsl(var(--v2-card));
border-color: hsl(var(--v2-success-500) / 0.4);
color: hsl(var(--v2-success-600));
}
.v2-main .btn-outline-success:hover,
.v2-main .btn-outline-success:focus {
background: hsl(var(--v2-success-50));
border-color: hsl(var(--v2-success-500));
color: hsl(var(--v2-success-600));
}
.v2-main .btn-danger,
.v2-modal .btn-danger {
background: hsl(var(--v2-danger-500));
border-color: hsl(var(--v2-danger-500));
color: white;
}
.v2-main .btn-danger:hover,
.v2-main .btn-danger:focus,
.v2-modal .btn-danger:hover,
.v2-modal .btn-danger:focus {
background: hsl(var(--v2-danger-600));
border-color: hsl(var(--v2-danger-600));
color: white;
}
.v2-main .btn-warning,
.v2-modal .btn-warning {
background: hsl(var(--v2-warning-500));
border-color: hsl(var(--v2-warning-500));
color: white;
}
.v2-main .btn-success,
.v2-modal .btn-success {
background: hsl(var(--v2-success-500));
border-color: hsl(var(--v2-success-500));
color: white;
}
.v2-modal .btn-secondary {
background: hsl(var(--v2-card));
border: 1px solid hsl(var(--v2-border));
color: hsl(var(--v2-foreground));
}
.v2-main .btn-group .btn + .btn {
margin-left: -1px;
}
.v2-main .btn-group .btn:focus {
z-index: 2;
}
/* === Form labels — premium typography === */
.v2-main .form-label {
font-size: var(--v2-text-13);
font-weight: 600;
color: hsl(var(--v2-foreground) / 0.72);
margin-bottom: 0.4rem;
display: block;
}
/* === Form controls (Axe 2 — premium inputs/selects) ===
No box-shadow on default state (premium = clean), thin border, subtle bg,
cyan focus ring scaled to ~3px. */
.v2-main .form-control,
.v2-main .form-select {
background: hsl(var(--v2-card));
border: 1px solid hsl(var(--v2-border-default));
color: hsl(var(--v2-foreground));
font-size: var(--v2-text-14);
border-radius: var(--v2-radius-md);
padding: var(--v2-space-2) var(--v2-space-3);
line-height: 1.4;
transition: border-color var(--v2-duration-fast) var(--v2-ease),
box-shadow var(--v2-duration-fast) var(--v2-ease),
background var(--v2-duration-fast) var(--v2-ease);
box-shadow: none;
width: 100%;
letter-spacing: -0.005em;
}
.v2-main .form-control:hover,
.v2-main .form-select:hover {
border-color: hsl(var(--v2-border-strong));
}
.v2-main .form-control::placeholder {
/* Alpha relevée de 0.6 → 0.9 : à 0.6 le contraste placeholder tombait à
2,56:1 (sous la cible WCAG AA 4,5:1 fixée dans PRODUCT.md). À 0.9 = 4,73:1,
tout en restant plus clair que le texte saisi. */
color: hsl(var(--v2-muted) / 0.9);
letter-spacing: -0.005em;
}
.v2-main .form-control:focus,
.v2-main .form-select:focus {
outline: none;
border-color: hsl(var(--v2-primary-500));
box-shadow: 0 0 0 3px hsl(var(--v2-primary-500) / 0.15);
background: hsl(var(--v2-card));
}
.v2-main .form-control:disabled,
.v2-main .form-control[readonly],
.v2-main .form-select:disabled {
background: hsl(var(--v2-muted-bg));
color: hsl(var(--v2-muted));
cursor: not-allowed;
}
.v2-main .form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M3.204 5L8 10.481 12.796 5 14 6.227 8 13 2 6.227 3.204 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 12px;
padding-right: 2.4rem;
}
.v2-main .form-text,
.v2-main small.form-text {
color: hsl(var(--v2-muted));
font-size: var(--v2-text-12);
margin-top: 0.3rem;
display: block;
}
.v2-main .invalid-feedback,
.v2-main .form-error,
.v2-main .alert-danger {
color: hsl(var(--v2-danger-600));
font-size: var(--v2-text-13);
}
.v2-main .alert-danger {
background: hsl(var(--v2-danger-50));
border: 1px solid hsl(var(--v2-danger-500) / 0.3);
border-radius: var(--v2-radius);
padding: 0.75rem 1rem;
}
.v2-main .form-check {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding-left: 0;
}
.v2-main .form-check-input {
margin: 0;
width: 1.05rem;
height: 1.05rem;
border: 1px solid hsl(var(--v2-border));
border-radius: var(--v2-radius-xs);
cursor: pointer;
flex-shrink: 0;
}
.v2-main .form-check-input:checked {
background-color: hsl(var(--v2-primary-500));
border-color: hsl(var(--v2-primary-500));
}
.v2-main .form-check-input:focus {
box-shadow: 0 0 0 3px hsl(var(--v2-primary-500) / 0.18);
outline: none;
}
/* === Premium form layout === */
.v2-form-section {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid hsl(var(--v2-border));
}
.v2-form-section:last-of-type {
border-bottom: 0;
}
.v2-form-section__title {
font-size: var(--v2-text-14);
font-weight: 600;
color: hsl(var(--v2-foreground));
margin: 0 0 0.25rem;
}
.v2-form-section__hint {
font-size: var(--v2-text-13);
color: hsl(var(--v2-muted));
margin: 0 0 1rem;
}
.v2-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 1.25rem;
}
.v2-form-grid--full {
grid-template-columns: 1fr;
}
@media (max-width: 768px) {
.v2-form-grid {
grid-template-columns: 1fr;
}
}
.v2-form-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.6rem;
padding: 1rem 1.5rem;
border-top: 1px solid hsl(var(--v2-border));
background: hsl(var(--v2-muted-bg) / 0.4);
}
.v2-form-footer__hint {
margin-right: auto;
color: hsl(var(--v2-muted));
font-size: var(--v2-text-14);
}
/* === Filter bar (Axe 2 — strict token spacing) === */
.v2-filter-bar {
background: hsl(var(--v2-card));
border: 1px solid hsl(var(--v2-border-default));
border-radius: var(--v2-radius-md);
box-shadow: var(--v2-shadow-xs);
padding: var(--v2-space-3) var(--v2-space-4);
margin-bottom: var(--v2-space-3);
display: grid;
gap: var(--v2-space-3);
grid-template-columns: 1fr;
}
.v2-filter-bar__row {
display: grid;
gap: var(--v2-space-3);
grid-template-columns: var(--v2-filter-cols, repeat(auto-fit, minmax(180px, 1fr)));
align-items: end;
}
/* Filter bars degrade gracefully — many small selects compressed to <140px
become unusable. Below 1100px, ignore the inline --v2-filter-cols and let
the bar wrap with auto-fit minmax(180px, 1fr). */
@media (max-width: 1100px) {
.v2-filter-bar__row {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}
}
@media (max-width: 480px) {
.v2-filter-bar__row {
grid-template-columns: 1fr !important;
}
}
.v2-filter-bar__count {
color: hsl(var(--v2-muted));
font-size: var(--v2-text-14);
font-weight: 500;
padding-top: 0.5rem;
border-top: 1px solid hsl(var(--v2-border));
}
.v2-filter-bar__count strong {
color: hsl(var(--v2-primary-600));
font-weight: 700;
}
.v2-filter-bar .form-label {
margin-bottom: 0.3rem;
color: hsl(var(--v2-foreground) / 0.72);
font-size: var(--v2-text-13);
font-weight: 600;
}
/* "Filtered" state — adds a cyan accent ring to inputs/selects with non-default values.
Triggered by adding `.v2-filtered` class server-side, OR via :not(:placeholder-shown). */
.v2-filter-bar .form-control.v2-filtered,
.v2-filter-bar .form-select.v2-filtered {
border-color: hsl(var(--v2-primary-500));
box-shadow: 0 0 0 2px hsl(var(--v2-primary-500) / 0.12);
background-color: hsl(var(--v2-primary-50) / 0.4);
}
.v2-filter-bar .form-control:not(:placeholder-shown):not([type="date"]) {
border-color: hsl(var(--v2-primary-500) / 0.55);
}
/* Period selector — keep solid cyan for the active button (inherited from .btn-primary)
AND use cyan-tinted outline for the inactive ones (apply class .v2-period-group on the wrapper). */
.v2-period-group .btn {
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
/* === Nav tabs (bootstrap) — premium accent === */
.v2-main .nav-tabs {
border-bottom: 1px solid hsl(var(--v2-border));
gap: 0.25rem;
}
.v2-main .nav-tabs .nav-link {
border: 0;
background: transparent;
color: hsl(var(--v2-muted));
font-weight: 500;
font-size: var(--v2-text-14);
padding: 0.65rem 1rem;
border-radius: 0;
border-bottom: 2px solid transparent;
transition: color 0.12s ease, border-color 0.12s ease;
display: inline-flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
}
.v2-main .nav-tabs .nav-link:hover {
color: hsl(var(--v2-foreground));
border-bottom-color: hsl(var(--v2-border));
}
.v2-main .nav-tabs .nav-link.active {
color: hsl(var(--v2-primary-600));
border-bottom-color: hsl(var(--v2-primary-500));
background: transparent;
}
/* === Modal (ConfirmDialog) premium polish === */
.v2-modal .modal-header {
border-bottom: 1px solid hsl(var(--v2-border));
padding: 1rem 1.5rem;
}
.v2-modal .modal-title {
font-size: var(--v2-text-16);
font-weight: 600;
color: hsl(var(--v2-foreground));
}
.v2-modal .modal-body {
padding: 1rem 1.5rem;
color: hsl(var(--v2-foreground));
font-size: var(--v2-text-14);
line-height: 1.55;
}
.v2-modal .modal-footer {
border-top: 1px solid hsl(var(--v2-border));
padding: 0.85rem 1.25rem;
background: hsl(var(--v2-muted-bg) / 0.4);
gap: 0.5rem;
}
/* === ChartCard with body padding 0 (when used as a form wrapper) === */
.v2-chart-card--form .v2-chart-card__body {
padding: 0;
}
/* === Breadcrumb premium (used in detail page templates) === */
.v2-breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--v2-text-14);
margin-bottom: 0.4rem;
flex-wrap: wrap;
}
.v2-breadcrumb__item {
color: hsl(var(--v2-muted));
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: color 0.12s ease;
}
.v2-breadcrumb__item:hover {
color: hsl(var(--v2-primary-600));
}
.v2-breadcrumb__separator {
color: hsl(var(--v2-border));
font-weight: 400;
user-select: none;
}
.v2-breadcrumb__current {
color: hsl(var(--v2-foreground));
font-weight: 500;
}
/* Meta-row under the page title (registered date, counts, etc.) */
.v2-page-header__meta {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
font-size: var(--v2-text-14);
color: hsl(var(--v2-muted));
}
.v2-page-header__meta-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.v2-page-header__meta-sep {
color: hsl(var(--v2-border));
user-select: none;
}
/* The action buttons on page header — stack on narrow screens */
.v2-page-header > div:last-child {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-end;
}
@media (max-width: 768px) {
.v2-page-header {
flex-direction: column;
align-items: flex-start;
}
.v2-page-header > div:last-child {
width: 100%;
justify-content: flex-start;
}
}
/* === Sortable column header buttons === */
.v2-sort-btn {
background: transparent;
border: 0;
padding: 0;
margin: 0;
color: inherit;
font: inherit;
text-transform: inherit;
letter-spacing: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.3rem;
transition: color 0.12s ease;
}
.v2-sort-btn:hover {
color: hsl(var(--v2-foreground));
}
.v2-sort-btn--active {
color: hsl(var(--v2-primary-600));
}
/* === JSON Viewer (json-viewer Stimulus controller, Sprint F V1→V2 merge) === */
.v2-jv-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.75rem;
border: 1px solid hsl(var(--v2-border));
border-bottom: 0;
border-radius: var(--v2-radius) var(--v2-radius) 0 0;
background: hsl(var(--v2-muted-bg));
font-size: var(--v2-text-12);
color: hsl(var(--v2-muted));
}
.v2-jv-toolbar__type {
font-family: var(--v2lux-font-mono);
font-weight: 600;
color: hsl(var(--v2-primary-600));
background: hsl(var(--v2-primary-50));
padding: 0.15rem 0.5rem;
border-radius: var(--v2-radius-sm);
}
.v2-jv-copy {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: hsl(var(--v2-card));
border: 1px solid hsl(var(--v2-border));
color: hsl(var(--v2-foreground));
font-size: var(--v2-text-12);
padding: 0.25rem 0.5rem;
border-radius: var(--v2-radius-sm);
cursor: pointer;
transition: background 0.12s ease;
}
.v2-jv-copy:hover { background: hsl(var(--v2-muted-bg)); }
.v2-jv-copy--ok {
background: hsl(var(--v2-success-50));
color: hsl(var(--v2-success-600));
border-color: hsl(var(--v2-success-500) / 0.4);
}
.v2-jv {
margin: 0;
background: hsl(var(--v2-card));
border: 1px solid hsl(var(--v2-border));
border-radius: 0 0 var(--v2-radius) var(--v2-radius);
padding: 0.75rem 0.9rem;
font-family: var(--v2lux-font-mono);
/* ⛔ PAS de max-height (retiré le 2026-07-25). Un plafond de 520 px
enfermait le payload dans une petite fenêtre à ascenseur : pour lire une
réponse PSP un peu longue, il fallait scroller DANS un cadre, au milieu
d'une page qui scrolle déjà — inconfortable et source d'erreur quand on
compare requête et réponse. Le payload s'affiche donc en entier ; les
blocs
du viewer restent là pour replier ce qu'on ne lit pas.
Seul l'axe horizontal garde un ascenseur, pour les valeurs très longues
(jetons, URLs) qui ne doivent pas élargir la page. */
font-size: var(--v2-text-14);
line-height: 1.5;
color: hsl(var(--v2-foreground));
overflow-x: auto;
/* No more white-space:pre — line breaks come from .jv-line block divs.
This eliminates the double-spacing caused by `\n` + display:block. */
white-space: normal;
tab-size: 2;
}
.v2-jv--raw {
white-space: pre-wrap;
word-break: break-all;
line-height: 1.4;
}
/* JSON tokens — punchy, high-contrast palette for readability */
.v2-jv .jv-key { color: hsl(214 95% 38%); font-weight: 600; } /* deep blue */
.v2-jv .jv-string { color: hsl(142 71% 28%); } /* deep green */
.v2-jv .jv-number { color: hsl(28 92% 38%); font-weight: 500; } /* deep orange */
.v2-jv .jv-bool { color: hsl(280 65% 42%); font-weight: 600; } /* purple */
.v2-jv .jv-null { color: hsl(var(--v2-muted)); font-style: italic; }
.v2-jv .jv-bracket { color: hsl(var(--v2-foreground)); font-weight: 700; }
.v2-jv .jv-comma { color: hsl(var(--v2-muted)); margin-right: 0.05rem; }
.v2-jv .jv-colon { color: hsl(var(--v2-muted)); margin-right: 0.15rem; }
/* Each row is a tightly-packed block — no \n needed between lines. */
.v2-jv .jv-line {
display: block;
padding: 0;
margin: 0;
min-height: 1.35em;
word-break: break-word;
}
.v2-jv .jv-line:hover {
background: hsl(var(--v2-muted-bg) / 0.6);
border-radius: var(--v2-radius-2xs);
}
/* Collapsible objects/arrays via native
*/
.v2-jv .jv-collapsible {
display: inline;
}
.v2-jv .jv-collapsible > summary {
display: inline;
cursor: pointer;
list-style: none;
user-select: none;
}
.v2-jv .jv-collapsible > summary::-webkit-details-marker { display: none; }
.v2-jv .jv-collapsible > summary::before {
content: '▾';
color: hsl(var(--v2-primary-500));
font-size: var(--v2-text-10);
margin-right: 0.25rem;
display: inline-block;
}
.v2-jv .jv-collapsible:not([open]) > summary::before {
content: '▸';
}
.v2-jv .jv-summary-meta {
color: hsl(var(--v2-muted));
font-size: var(--v2-text-11);
font-style: italic;
margin-left: 0.4rem;
font-weight: 400;
}
.v2-jv .jv-collapsible:not([open]) > .jv-line {
display: none;
}
/* Notifications accordion polish (Bootstrap defaults are too noisy) */
.v2-notif-accordion .accordion-button {
background: hsl(var(--v2-card));
color: hsl(var(--v2-foreground));
font-size: var(--v2-text-14);
padding: 0.65rem 1rem;
box-shadow: none;
border-radius: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.v2-notif-accordion .accordion-button:not(.collapsed) {
background: hsl(var(--v2-muted-bg));
color: hsl(var(--v2-foreground));
box-shadow: none;
}
.v2-notif-accordion .accordion-item {
border: 1px solid hsl(var(--v2-border));
margin-bottom: 0.5rem;
border-radius: var(--v2-radius);
overflow: hidden;
}
.v2-notif-accordion .accordion-body {
padding: 1rem;
background: hsl(var(--v2-card));
}
/* === Premium link styles (Sprint F V1→V2 merge — visibility pass) ===
Apply .v2-link for inline links (with underline-on-hover) or .v2-link-btn
for the "ghost button" style ("Voir tout le call →"). All V2 detail pages
should use these instead of inline color: hsl(--v2-primary-500). */
.v2-link {
color: hsl(var(--v2-primary-600));
text-decoration: none;
border-bottom: 1px dashed hsl(var(--v2-primary-500) / 0.3);
transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
padding: 0.05rem 0.1rem;
border-radius: var(--v2-radius-2xs);
}
.v2-link:hover {
color: hsl(var(--v2-primary-700));
border-bottom-color: hsl(var(--v2-primary-500));
background: hsl(var(--v2-primary-50));
}
.v2-link--strong {
font-weight: 600;
border-bottom-style: solid;
}
/* Ghost button — for action links inside card headers ("Voir tout le call →"). */
.v2-link-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: hsl(var(--v2-primary-600));
background: hsl(var(--v2-primary-50));
border: 1px solid hsl(var(--v2-primary-500) / 0.25);
padding: 0.35rem 0.7rem;
border-radius: var(--v2-radius);
font-size: var(--v2-text-13);
font-weight: 500;
text-decoration: none;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
white-space: nowrap;
}
.v2-link-btn:hover {
background: hsl(var(--v2-primary-100));
border-color: hsl(var(--v2-primary-500));
color: hsl(var(--v2-primary-700));
}
/* Auto-style anchors inside data lists / dl elements — these were too plain
before. Color picks the primary blue and on-hover gets a soft background. */
.v2-chart-card__body dl a:not(.btn):not(.v2-link-btn) {
color: hsl(var(--v2-primary-600));
text-decoration: none;
font-weight: 500;
border-bottom: 1px dashed hsl(var(--v2-primary-500) / 0.3);
transition: all 0.12s ease;
padding: 0.05rem 0.15rem;
border-radius: var(--v2-radius-2xs);
}
.v2-chart-card__body dl a:not(.btn):not(.v2-link-btn):hover {
background: hsl(var(--v2-primary-50));
border-bottom-color: hsl(var(--v2-primary-500));
color: hsl(var(--v2-primary-700));
}
/* Same auto-style on table cell links. */
.v2-table tbody a:not(.btn):not(.v2-link-btn) {
color: hsl(var(--v2-primary-600));
text-decoration: none;
font-weight: 500;
transition: color 0.12s ease;
}
.v2-table tbody a:not(.btn):not(.v2-link-btn):hover {
color: hsl(var(--v2-primary-700));
text-decoration: underline;
}
/* === Generic table cell utilities — font cohesion ===
All list/data tables share the same font-family (Geist, inherited from body)
and the same base size (0.875rem from .v2-table tbody td).
These classes only adjust weight / color / sub-size for semantic emphasis.
Kept generic (cell-*) so they work in any list (Transactions, Sites, Users…). */
/* Primary identifier (link or text) — cyan when link, medium weight, NO monospace */
/* Identifiant de ligne (ID, nom, rang, mois de cohorte…).
⚠ Cette classe est portée AUSSI BIEN par des que par des inertes.
Elle colorait tout en cyan et soulignait au survol sans distinction, donc la
moitié des tableaux du backoffice promettait un clic qui n'existait pas :
sur « Récurrence : drop-off par rang », les six libellés Achat initial /
Rebill 1… ressemblaient à des liens et ne menaient nulle part.
L'affordance de lien est donc désormais réservée aux vrais liens (voir la
règle suivante). Les lignes réellement cliquables au niveau du gardent
leur signal propre : cursor pointer + fond au survol
(`.v2-table tbody tr:hover`).
`.v2-tx-id` a été retiré du sélecteur : zéro usage dans templates/. */
.v2-cell-id {
display: inline-block;
font-family: inherit; /* Geist, not monospace */
font-size: inherit; /* 0.875rem from td */
font-weight: 600;
font-variant-numeric: tabular-nums;
color: hsl(var(--v2-foreground));
text-decoration: none;
line-height: 1.2;
}
/* Le descendant `a .v2-cell-id` couvre le cas où le est enveloppé dans
un parent (liste des partenaires : avatar + nom dans le même lien). */
a.v2-cell-id,
a .v2-cell-id {
color: hsl(var(--v2-primary-600));
}
a.v2-cell-id:hover,
a:hover .v2-cell-id {
color: hsl(var(--v2-primary-700));
text-decoration: underline;
}
/* Sub-text under primary cell (TID truncated, company name, mail, website…) */
.v2-cell-sub,
.v2-tx-sub {
font-family: inherit;
font-size: var(--v2-text-12); /* 12px — tight under the main 14px */
font-weight: 400;
color: hsl(var(--v2-muted));
line-height: 1.3;
margin-top: 0.125rem;
font-variant-numeric: tabular-nums;
/* Truncate gracefully when wide values like full TIDs are dropped in */
max-width: 28ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Amount / numeric cell — readable medium weight, tabular for column alignment */
.v2-cell-amount,
.v2-tx-amount {
font-family: inherit;
font-size: inherit;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: hsl(var(--v2-foreground));
white-space: nowrap;
}
/* Muted secondary cell (counts of sites, etc.) — same size as base, just muted */
.v2-cell-muted {
font-family: inherit;
font-size: inherit;
color: hsl(var(--v2-muted));
}
/* ── Rebill · onglet Complétude des données ─────────────────────────────── */
/* Palette de statut — un seul jeu de variables pilote toute la couleur :
--dc = teinte forte (texte/jauge/icône), --dc-bg = fond clair (chips/pastilles). */
/* Teintes de statut. Elles ne portent plus que la ligne de cause et le bandeau
de synthèse : les pastilles sont passées au composant maison `Shared:Badge`,
qui a ses propres rampes. Les valeurs sont alignées sur les tokens du système
(--v2-success-600, --v2-warning-600, --v2-danger-600) au lieu des teintes
locales d'origine : l'onglet affichait deux verts pour la même sémantique,
le sien à 152° et le canonique à 142°, à 200 px l'un de l'autre. */
.v2-dc-banner--complete,
.v2-dc-row--complete { --dc: var(--v2-success-700); --dc-bg: 152 46% 95%; --dc-line: 152 40% 80%; }
.v2-dc-banner--partial,
.v2-dc-row--partial,
.v2-dc-row--invalid { --dc: var(--v2-warning-800); --dc-bg: 40 92% 94%; --dc-line: 38 82% 78%; }
.v2-dc-row--missing { --dc: var(--v2-danger-700); --dc-bg: 6 78% 96%; --dc-line: 6 72% 84%; }
.v2-dc-banner--factor,
.v2-dc-row--factor { --dc: var(--v2-danger-700); --dc-bg: 348 82% 96%; --dc-line: 348 70% 85%; }
/* Bandeau de synthèse — pleine couleur de statut. */
.v2-dc-banner {
display: flex;
align-items: center;
gap: var(--v2-space-3);
margin-bottom: var(--v2-space-4);
padding: 0.85rem 1.1rem;
border: 1px solid hsl(var(--dc-line));
border-radius: var(--v2-radius-lg);
background: hsl(var(--dc-bg));
}
.v2-dc-banner__icon {
display: flex;
flex-shrink: 0;
color: hsl(var(--dc));
}
.v2-dc-banner__text {
margin: 0;
font-size: var(--v2-text-13);
line-height: 1.5;
color: hsl(var(--v2-foreground));
}
.v2-dc-banner__text strong { color: hsl(var(--dc)); }
/* Scorecard — une carte par élément de donnée. */
/* Barre d'action du scorecard : bascule « Tout déplier / replier » (pilote
tous les
via le contrôleur Stimulus details-group). */
.v2-dc-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: var(--v2-space-3);
}
.v2-dc-toolbar__toggle {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
font-size: var(--v2-text-12);
font-weight: 500;
color: hsl(var(--v2-foreground));
background: hsl(var(--v2-card));
border: 1px solid hsl(var(--v2-border-default));
border-radius: var(--v2-radius-full);
cursor: pointer;
transition: background var(--v2-duration, 160ms) var(--v2-ease, ease),
border-color var(--v2-duration, 160ms) var(--v2-ease, ease);
}
.v2-dc-toolbar__toggle:hover {
background: hsl(var(--v2-muted-bg));
border-color: hsl(var(--v2-border-strong));
}
.v2-dc-toolbar__toggle:focus-visible {
outline: 2px solid hsl(var(--v2-primary-500));
outline-offset: 2px;
}
.v2-dc-toolbar__icon {
display: inline-flex;
color: hsl(var(--v2-muted));
}
@media (prefers-reduced-motion: reduce) {
.v2-dc-toolbar__toggle { transition: none; }
}
/* ── Liste de complétude : une ligne dépliable par élément ──────────────────
Remplace la grille de cartes + la liste de disclosures qui traitaient la MÊME
donnée de deux façons. La grille de cartes identiques et les carrés d'icônes
teintés sont deux motifs explicitement bannis par PRODUCT.md, et la maison
résout « N métriques proportionnelles » en lignes partout ailleurs (Paybox,
MID/PSP, Santé opérationnelle).
La ligne est un
natif : clavier et lecteur d'écran sans une ligne
de JS. C'est ce qui a fait préférer la liste au sémantique, qui
aurait imposé de remplacer la disclosure par du script. */
.v2-dc-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.v2-dc-row {
border: 1px solid hsl(var(--v2-border));
border-radius: var(--v2-radius);
background: hsl(var(--v2-card));
overflow: hidden;
}
.v2-dc-row__summary {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
cursor: pointer;
list-style: none;
font-size: var(--v2-text-13);
color: hsl(var(--v2-foreground));
transition: background var(--v2-duration, 160ms) var(--v2-ease, ease);
}
.v2-dc-row__summary::-webkit-details-marker { display: none; }
.v2-dc-row__summary:hover { background: hsl(var(--v2-muted-bg) / 0.5); }
.v2-dc-row__summary:focus-visible {
outline: 2px solid hsl(var(--v2-primary-500));
outline-offset: -2px;
}
/* Icône sans fond teinté : le canon maison (`.v2-insight__icon`) est un glyphe
coloré sur fond neutre. Le statut est déjà porté par la pastille et par le
chiffre, la teinte de fond était une redondance criarde. */
.v2-dc-row__icon {
display: inline-flex;
flex-shrink: 0;
color: hsl(var(--dc, var(--v2-muted)));
}
.v2-dc-row__name {
flex: 0 0 auto;
min-width: 9rem;
font-size: var(--v2-text-13);
}
.v2-dc-row__pct {
margin-left: auto;
flex-shrink: 0;
font-size: var(--v2-text-16);
font-variant-numeric: tabular-nums;
color: hsl(var(--dc, var(--v2-foreground)));
}
.v2-dc-row__pct small { font-size: 0.7em; margin-left: 1px; }
.v2-dc-row .v2-dc-meter { flex: 0 1 140px; margin: 0; }
.v2-dc-row__split {
flex: 0 0 auto;
font-size: var(--v2-text-11);
color: hsl(var(--v2-muted));
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.v2-dc-row__chevron {
display: inline-flex;
flex-shrink: 0;
color: hsl(var(--v2-muted));
transition: transform var(--v2-duration, 160ms) var(--v2-ease, ease);
}
.v2-dc-row[open] .v2-dc-row__chevron { transform: rotate(180deg); }
.v2-dc-row__body {
padding: 0 12px 12px;
border-top: 1px solid hsl(var(--v2-border-subtle));
padding-top: 10px;
}
/* Sous 720px la ligne se replie en deux niveaux : la ventilation chiffrée passe
à la ligne plutôt que de comprimer la jauge jusqu'à l'illisible. */
@media (max-width: 720px) {
.v2-dc-row__summary { flex-wrap: wrap; }
.v2-dc-row__name { min-width: 0; flex: 1 1 auto; }
.v2-dc-row__split { flex-basis: 100%; order: 10; }
.v2-dc-row .v2-dc-meter { flex-basis: 100%; order: 9; }
}
@media (prefers-reduced-motion: reduce) {
.v2-dc-row__summary,
.v2-dc-row__chevron { transition: none; }
}
.v2-dc-meter {
height: 9px;
border-radius: var(--v2-radius-full);
background: hsl(var(--v2-muted-bg));
overflow: hidden;
}
/* Jauge 3 segments (complétude « vraie ») : valide (vert) puis bidon (ambre)
posés sur le track « absent » (gris muted). Largeurs inline (template).
Couleurs alignées sur les statuts complete/partial des cartes. */
.v2-dc-meter--3 {
display: flex;
gap: 1px;
position: relative;
}
/* Marqueur du seuil de fiabilité configuré, posé sur la jauge à `left: seuil%`
(style inline). Trait vertical sombre — l'absolu le sort du flux flex, donc il
n'affecte pas les segments. La légende au-dessus explicite ce qu'il représente. */
.v2-dc-meter__threshold {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: hsl(var(--v2-foreground) / 0.8);
z-index: 2;
}
.v2-dc-meter__seg {
display: block;
height: 100%;
transition: width var(--v2-duration, 160ms) var(--v2-ease, ease);
}
.v2-dc-meter__seg--valid { background: hsl(var(--v2-dc-valid)); }
.v2-dc-meter__seg--junk { background: hsl(var(--v2-dc-junk)); }
/* Flag informationnel « données figées » (§4bis) — note neutre (gris), JAMAIS
un encart coloré d'alerte : une valeur figée est souvent juste du test. */
.v2-dc-frozen {
display: flex;
gap: var(--v2-space-2, 8px);
align-items: flex-start;
margin-top: var(--v2-space-4, 16px);
padding: var(--v2-space-3, 12px) var(--v2-space-4, 16px);
border: 1px solid hsl(var(--v2-border));
border-radius: var(--v2-radius, 10px);
background: hsl(var(--v2-muted-bg));
}
.v2-dc-frozen__icon {
color: hsl(var(--v2-muted));
margin-top: 1px;
flex-shrink: 0;
}
.v2-dc-frozen__title {
margin: 0 0 2px;
font-size: var(--v2-text-13);
font-weight: 600;
color: hsl(var(--v2-foreground));
}
.v2-dc-frozen__text {
margin: 0;
font-size: var(--v2-text-12);
line-height: 1.5;
color: hsl(var(--v2-muted));
}
.v2-dc-frozen__text strong {
color: hsl(var(--v2-foreground));
font-weight: 600;
}
/* Callouts « facteur » (§5) : la causalité « comble ce champ → +X pts ».
Ton affirmatif mais sobre — accent vert sur le gain, fond légèrement teinté. */
.v2-dc-factors {
display: flex;
flex-direction: column;
gap: var(--v2-space-2, 8px);
margin-bottom: var(--v2-space-4, 16px);
}
.v2-dc-factor {
display: flex;
gap: var(--v2-space-2, 8px);
align-items: flex-start;
padding: var(--v2-space-3, 12px) var(--v2-space-4, 16px);
border: 1px solid hsl(var(--v2-primary-500) / 0.18);
border-radius: var(--v2-radius, 10px);
background: hsl(var(--v2-primary-50) / 0.5);
}
.v2-dc-factor__icon { color: hsl(var(--v2-dc-valid)); margin-top: 1px; flex-shrink: 0; }
.v2-dc-factor__text {
margin: 0;
font-size: var(--v2-text-13);
line-height: 1.55;
color: hsl(var(--v2-foreground));
}
.v2-dc-factor__gain { color: hsl(var(--v2-dc-valid-ink)); }
.v2-dc-factor__body { display: flex; flex-direction: column; gap: 3px; }
.v2-dc-factor__trend {
margin: 0;
display: flex;
align-items: center;
gap: 5px;
font-size: var(--v2-text-12);
color: hsl(var(--v2-muted));
}
.v2-dc-factor__trend svg { flex-shrink: 0; }
.v2-dc-factor__trend--up { color: hsl(var(--v2-dc-valid-ink)); }
/* Rappel des facteurs dans l'onglet Alertes + CTA vers Complétude. */
.v2-dc-alertlink { display: flex; flex-direction: column; gap: var(--v2-space-3, 12px); }
.v2-dc-alertlink__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v2-dc-alertlink__item {
display: flex; gap: 8px; align-items: center;
font-size: var(--v2-text-13); color: hsl(var(--v2-foreground));
}
.v2-dc-alertlink__icon { color: hsl(var(--v2-dc-junk)); flex-shrink: 0; }
.v2-dc-alertlink__cta {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px;
font-size: var(--v2-text-13); font-weight: 500;
color: hsl(var(--v2-foreground));
background: hsl(var(--v2-background, 0 0% 100%));
border: 1px solid hsl(var(--v2-border));
border-radius: var(--v2-radius, 10px);
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease;
}
.v2-dc-alertlink__cta:hover { background: hsl(var(--v2-primary-50) / 0.6); border-color: hsl(var(--v2-primary-500) / 0.3); }
.v2-dc-mini {
display: grid;
grid-template-columns: 56px 1fr 48px;
align-items: center;
gap: var(--v2-space-2);
font-size: var(--v2-text-12);
}
.v2-dc-mini__label { color: hsl(var(--v2-muted)); }
.v2-dc-mini__track {
height: 7px;
border-radius: var(--v2-radius-full);
background: hsl(var(--v2-muted-bg));
overflow: hidden;
}
.v2-dc-mini__fill {
display: block;
height: 100%;
border-radius: var(--v2-radius-full);
background: hsl(212 70% 54%);
}
.v2-dc-mini__val {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
color: hsl(var(--v2-foreground));
}
.v2-dc-row__audit {
display: flex;
align-items: flex-start;
gap: 0.4rem;
margin: 0.15rem 0 0;
font-size: var(--v2-text-12);
line-height: 1.5;
color: hsl(var(--v2-muted));
}
.v2-dc-row__audit svg { flex-shrink: 0; margin-top: 2px; }
.v2-dc-row__audit strong { color: hsl(var(--v2-foreground)); }
.v2-dc-row__audit--factor { color: hsl(var(--dc)); }
.v2-dc-row__audit--factor strong { color: hsl(var(--dc)); }
/* Distill : le second niveau (critère, diversité, comparaison avec/sans) est
replié sous les cartes « à surveiller » — la carte montre par défaut le
headline décisionnel (% + jauge + cause), le reste s'ouvre au clic. Natif
| , the table always fills 100% of its container with NO empty horizontal space inside rows. ⛔ Ce layout fixe vivait ICI, donc s'appliquait à TOUTE table --rich (audit 2026-07-25) — y compris aux trois qui n'ont jamais eu de carte de largeurs. Sans carte, `fixed` divise la place en parts ÉGALES : sur /dashboard/difference, 9 colonnes à 102 px, la colonne Δ (qui n'affiche qu'un « – ») aussi large que « Site / Partenaire » dont le nom de site était tronqué. Et le `min-width: 0` annulait le plancher de 600 px de .v2-table, donc la carte ne défilait JAMAIS : elle se comprimait jusqu'à couper le texte (96 cellules rognées à 1280 px, `overflow: hidden` sans ellipse). Le layout fixe est désormais porté par --cols, que seules les tables réellement cartographiées déclarent. Les autres retrouvent le layout auto (colonnes dimensionnées par leur contenu) et le plancher de scroll. Toute nouvelle table --rich doit donc ajouter --cols ET sa carte, ou ne déclarer ni l'un ni l'autre. */ .v2-table--rich { width: 100%; } .v2-table--cols { table-layout: fixed; min-width: 0; } .v2-table--rich tbody td { padding-top: var(--v2-space-3); padding-bottom: var(--v2-space-3); vertical-align: top; /* No mid-word breaking — keeps "Paiement", "Autorisation" intact. Long technical strings (TIDs, emails) still wrap via overflow-wrap on the .v2-cell-sub class which has its own ellipsis. */ word-break: normal; overflow-wrap: break-word; /* With fixed table-layout, cells must contain their overflow rather than expand. Sub-text uses its own ellipsis; main cell text wraps cleanly. */ overflow: hidden; } /* Primary cell text (links like site name, client name) — single line with ellipsis so column widths stay strict. */ .v2-table--rich tbody td > a:not(.btn) { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* Operation cell label NEVER wraps mid-word (Paiement / Autorisation are too short to need wrapping anyway). */ .v2-table--rich .v2-op, .v2-table--rich .v2-op span { white-space: nowrap; } /* Flags (3DS / 1-click / Direct) inline, no wrap */ .v2-table--rich .v2-flag { white-space: nowrap; } /* The "Source" sub-info wraps in the Client cell instead of overflowing */ .v2-table--rich .v2-cell-sub { max-width: 100%; } /* Per-column FIXED widths (sum = 100%). With `table-layout: fixed` the browser respects these exactly — content overflowing a cell gets truncated with the cell's text-overflow rules (ellipsis on sub-text). */ .v2-col-ref { width: 14%; } /* Référence + date + tid */ .v2-col-site { width: 17%; } /* Site / Partner / PSP */ .v2-col-op { width: 12%; } /* Operation + flags */ .v2-col-state { width: 14%; } /* Badge + error message */ .v2-col-amount { width: 12%; } /* Amount + card */ .v2-col-client { width: 22%; } /* Name + email + IP/country */ .v2-col-actions { width: 9%; min-width: 88px; } /* Total: 100% — no wasted gaps */ /* When Client is hidden (priority-tertiary, <1280px), redistribute its 22% across the remaining columns proportionally. Client width 22% goes: +6% Site, +5% State, +5% Amount, +3% Op, +2% Ref, +1% Actions. */ @media (max-width: 1280px) { .v2-col-ref { width: 16%; } .v2-col-site { width: 23%; } .v2-col-op { width: 15%; } .v2-col-state { width: 19%; } .v2-col-amount { width: 17%; } .v2-col-actions { width: 10%; } /* ⛔ Cette règle MANQUAIT (audit 2026-07-25). Les largeurs ci-dessus somment 100 % en supposant Client masqué — mais rien ne le masquait : la table réclamait 122 %, chaque colonne perdait ~18 % de sa largeur et `overflow: hidden` coupait le texte en plein milieu d'un mot. Le commentaire de la section « Card grid » décrivait déjà ce masquage comme acquis. */ .v2-table--rich .v2-col-priority-tertiary { display: none; } } /* When Site/Operation also hidden (≤980px), redistribute again */ @media (max-width: 979px) { .v2-col-ref { width: 30%; } .v2-col-state { width: 30%; } .v2-col-amount { width: 25%; } .v2-col-actions { width: 15%; } /* ⛔ Idem : sans cette règle la table réclamait 160 % de sa largeur (100 % + Site 23 % + Op 15 % + Client 22 %). */ .v2-table--rich .v2-col-priority-secondary { display: none; } } /* === Sticky Actions column (always visible) === The "voir le détail" / refund icons must NEVER be clipped, even on a narrow viewport where the table overflows horizontally. We pin the last column to the right edge of the card body using `position: sticky`. This is the same pattern Stripe uses for transaction tables. */ .v2-table--rich thead th.v2-col-actions, .v2-table--rich tbody td:last-child { position: sticky; right: 0; background: hsl(var(--v2-card)); /* Subtle left-edge shadow to mark the boundary when the row scrolls behind it — a premium touch (Stripe / Linear pattern). */ box-shadow: -3px 0 6px -3px hsl(var(--v2-foreground) / 0.06); z-index: 4; } .v2-table--rich thead th.v2-col-actions { background: hsl(var(--v2-muted-bg) / 0.5); z-index: 12; /* Above the sticky thead row */ } /* Hover state — the sticky cell needs the same row hover background or it will look "out of sync" with the rest of the row. */ .v2-table--rich tbody tr:hover td:last-child { background: hsl(var(--v2-primary-50) / 0.5); } /* Safety net : horizontal scroll on the card body so the table can be wider than the card. With the sticky Actions column above, the user keeps access to the action buttons no matter the scroll position. */ .v2-chart-card:has(.v2-table--rich) > .v2-chart-card__body { overflow-x: auto; } /* ════════════════════════════════════════════════════════════════ Card grid — tablet & mobile only (<900px viewport) On true tablet/mobile, the 7-col table doesn't make sense. Each |
|---|