/* Couche « backoffice » : le shell et ses variantes l'emportent sur la base par la couche, plus par la spécificité. */
@layer backoffice {
/* Backoffice marchand (ADR-0020) : shell à navigation latérale, tableau de bord et finances.
   Uniquement les tokens du design system : pas de dégradé, élévation par surface + bordure. */

body.merchant { background: var(--color-canvas); }

/* Shell : navigation sombre (encre), entrée active sur l'accent avec texte encre (5,22:1). */
.m-shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.m-sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-5) var(--space-3);
  background: var(--color-nav); color: var(--color-nav-text);
}
.m-sidebar a:focus-visible, .m-sidebar button:focus-visible, .m-sidebar summary:focus-visible, .m-sidebar select:focus-visible { outline: var(--focus-width) solid var(--color-accent); outline-offset: var(--focus-offset); }
.m-brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 17px; padding: 0 var(--space-2); }
.m-brand-mark { width: 12px; height: 12px; border-radius: 4px; background: var(--color-accent); }
.m-brand-tag { font-weight: 500; font-size: 13px; color: var(--color-nav-muted); }
.m-merchant { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-nav-hover); }
.m-merchant-name { font-weight: 600; }
.m-merchant-role { font-size: 13px; color: var(--color-nav-muted); }
.m-switch summary { cursor: pointer; font-size: 13px; color: var(--color-accent); margin-top: var(--space-1); }
.m-switch ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.m-switch a { color: var(--color-nav-text); }

.m-nav ul { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: 2px; }
.m-nav-title { margin: 0 0 var(--space-2); padding: 0 var(--space-3); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-nav-muted); }
.m-nav a {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--color-nav-text); text-decoration: none; font-weight: 500;
  transition: background var(--dur-fast) var(--ease-standard);
}
.m-nav a .m-icon { flex: none; color: var(--color-nav-muted); }
.m-nav a:hover { background: var(--color-nav-hover); }
.m-nav a[aria-current="page"] { background: var(--color-accent); color: var(--color-ink); font-weight: 600; }
.m-nav a[aria-current="page"] .m-icon { color: var(--color-ink); }
.m-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-nav a.m-nav-sub { min-height: var(--tap-min); padding-left: calc(var(--space-3) + 32px); font-size: 14px; font-weight: 400; color: var(--color-nav-muted); gap: var(--space-2); }
.m-nav a.m-nav-sub[aria-current="page"] { color: var(--color-ink); font-weight: 600; }
.m-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; }
.m-dot-open { background: var(--color-accent); }
.m-dot-closed { background: var(--color-ink-subtle); }
.m-logout { margin-top: auto; }
/* Barèmes d'un pays (ADR-0018) : une valeur par carte, son explication dessous, sur deux colonnes quand la place le
   permet. Les valeurs composées (montant par véhicule, catégories) prennent toute la largeur. */
.rule-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--space-3) var(--space-4); }
/* Bloc, pas grille : l'unité qu'un montant ou un pourcentage écrit après sa case (« SLE », « % ») reste sur la même ligne. */
.field.rule-field { display: block; padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-canvas); }
.rule-field > label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.rule-field > input, .rule-field > select { margin-right: var(--space-1); }
.rule-field .help-text { margin-top: var(--space-1); }
.rule-field input:not([type="checkbox"]):not([type="radio"]) { max-width: 16rem; }
.rule-field .help-text { color: var(--color-ink-muted); font-size: 0.875rem; line-height: 1.4; }
.rule-field-wide { grid-column: 1 / -1; }
.rule-amounts > div, .rule-field-wide > div:not(.help-text) { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.rule-amounts .field { display: block; min-width: 13rem; }
/* Cases à cocher d'une valeur composée (catégories interdites) : en colonnes, pas une longue liste. */
[data-rule-field="prohibited_categories"] > div:not(.help-text) { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-1) var(--space-4); }
.rule-amounts .field > label { display: block; font-weight: 500; margin-bottom: var(--space-1); }
.rule-amounts .field input { max-width: 9rem; }
.rule-form fieldset { border: 0; padding: 0; margin: 0; }
/* Langue de l'interface (ADR-0066), sous la déconnexion. */
.m-locale-switch { display: flex; gap: var(--space-1); padding: var(--space-1) var(--space-2); }
.m-locale-switch a { color: var(--color-nav-muted); text-decoration: none; font-size: var(--font-size-sm, 0.875rem); padding: 2px 6px; border-radius: var(--radius-sm, 4px); }
.m-locale-switch a[aria-current="true"] { color: var(--color-nav-text); background: var(--color-nav-hover); font-weight: 600; }
.m-locale-switch a:hover { background: var(--color-nav-hover); }
.m-logout-button {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-nav-muted); font: inherit; font-weight: 500; cursor: pointer;
}
.m-logout-button:hover { background: var(--color-nav-hover); color: var(--color-nav-text); }

/* Toute la largeur à droite du menu : un plafond laissait un vide sur les grands écrans. Les formulaires gardent
   leur propre largeur de lecture (`m-form-narrow`, `--measure`). */
.m-main { padding: var(--space-8); width: 100%; min-width: 0; }
.m-auth { min-height: 100vh; display: grid; place-items: start center; padding: var(--space-4); }

/* En-tête de page et filtres */
.m-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.m-page-head h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.02em; }
.m-icon { display: inline-block; vertical-align: middle; }
.m-page-head p { margin: var(--space-1) 0 0; }
.m-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.m-segmented { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); background: var(--color-surface); }
.m-segmented a { min-height: var(--tap-min); display: inline-flex; align-items: center; padding: 0 var(--space-4); border-radius: var(--radius-sm); color: var(--color-ink); text-decoration: none; font-weight: 500; font-size: 14px; }
.m-segmented a:hover { background: var(--color-neutral-soft); }
.m-segmented a[aria-current="true"] { background: var(--color-ink); color: var(--color-surface); }
.m-scope { display: flex; gap: var(--space-2); align-items: center; margin: 0; }
.m-range input[type="date"] { font: inherit; min-height: var(--tap-min); padding: 0 var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
.m-scope select { font: inherit; min-height: var(--tap-min); padding: 0 var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }

/* KPI */
.m-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.m-kpi { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.m-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.m-kpi-label { margin: 0; font-size: 13px; font-weight: 500; color: var(--color-ink-muted); }
.m-tile { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); flex: none; }
.m-tone-1 { background: var(--viz-1-soft); color: var(--viz-1-deep); }
.m-tone-2 { background: var(--viz-2-soft); color: var(--viz-2-deep); }
.m-tone-3 { background: var(--viz-3-soft); color: var(--viz-3-deep); }
.m-tone-4 { background: var(--viz-4-soft); color: var(--viz-4-deep); }
.m-kpi-value { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-kpi-focal { border-color: var(--viz-1); border-top-width: 4px; }
.m-kpi-focal .m-kpi-value { font-size: 32px; }
/* Le focal des Opérations porte sur l'attente : quand elle n'est pas nulle, la carte le dit.
   La couleur ne porte jamais seule — le libellé et le chiffre restent (DESIGN_SYSTEM §5). */
.m-kpi-alarm { border-color: var(--color-danger); background: var(--color-danger-soft); }
.m-kpi-alarm .m-kpi-value { color: var(--color-danger); }
.m-tone-alarm { background: var(--color-surface); color: var(--color-danger); }
.m-trend { margin: 0; font-size: 13px; color: var(--color-ink-muted); }
.m-trend-value { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 2px var(--space-2); border-radius: var(--radius-full); }
.m-trend-up .m-trend-value { background: var(--color-accent-soft); color: var(--color-accent-deep); }
.m-trend-down .m-trend-value { background: var(--color-danger-soft); color: var(--color-danger); }
.m-trend-flat .m-trend-value { background: var(--color-neutral-soft); color: var(--color-ink-muted); }

/* Cartes et grilles */
.m-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); min-width: 0; }
.m-card h2 { font-size: 16px; margin: 0 0 var(--space-4); }
.m-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4); }
.m-card-head h2 { margin: 0; }
.m-grid { display: grid; gap: var(--space-4); }
.m-grid > .m-card { margin-bottom: 0; }
.m-grid { margin-bottom: var(--space-4); }
.m-grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.m-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-main .table td.m-num, .m-main .table td .button { white-space: nowrap; }
.m-empty { text-align: left; }
.m-empty .button { margin-top: var(--space-2); }
.m-main a.button { display: inline-flex; align-items: center; min-height: var(--tap-min); text-decoration: none; }
.m-num, .table .m-num { text-align: right; font-variant-numeric: tabular-nums; }
.m-split { margin: 0 0 var(--space-4); }
.m-split p { margin: 0 0 var(--space-2); }

.m-stats { display: grid; gap: var(--space-4); margin: 0 0 var(--space-3); }
.m-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); border-bottom: 1px solid var(--color-line); padding-bottom: var(--space-3); }
.m-stats > div:last-child { border-bottom: 0; padding-bottom: 0; }
/* Titre de section entre deux rangées de cartes (indicateurs, ADR-0077). */
.m-section-title { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; margin: var(--space-8) 0 var(--space-4); }
.m-stats dt { color: var(--color-ink-muted); }
.m-stats dd { margin: 0; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; text-align: right; }

/* Graphique en barres (SVG) */
.m-chart { margin: 0; }
.m-chart svg { display: block; width: 100%; height: auto; }
.m-chart-axis { stroke: var(--color-line); stroke-width: 1; }
.m-chart-bar rect { fill: var(--viz-1); }
.m-chart-bar:hover rect { fill: var(--color-ink); }
.m-chart-bar text { fill: var(--color-ink-muted); font-size: 11px; font-family: var(--font-sans); }

/* Jauges de répartition (SVG : la CSP interdit les styles en ligne) */
.m-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.m-bars-label { display: flex; justify-content: space-between; font-weight: 500; margin-bottom: var(--space-1); }
.m-bars p { margin: var(--space-1) 0 0; }
.m-meter { display: block; width: 100%; height: 8px; }
.m-meter-track { fill: var(--color-neutral-soft); }
.m-meter-fill { fill: var(--viz-1); }
.m-fill-1 { fill: var(--viz-1); }
.m-fill-2 { fill: var(--viz-2); }
.m-fill-3 { fill: var(--viz-3); }
.m-fill-4 { fill: var(--viz-4); }
.m-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: var(--space-2); vertical-align: 0; }
.m-swatch-1 { background: var(--viz-1); }
.m-swatch-2 { background: var(--viz-2); }
.m-swatch-3 { background: var(--viz-3); }
.m-swatch-4 { background: var(--viz-4); }

/* Carte de chaleur jour × heure */
/* Positionné : les libellés masqués de la grille restent dans le conteneur défilant au lieu d'élargir la page. */
.m-heatmap-wrap { overflow-x: auto; position: relative; }
.m-heatmap { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 640px; table-layout: fixed; }
.m-heatmap thead th:first-child { width: 40px; }
.m-heatmap thead th { overflow: visible; }
.m-heatmap th { font-size: 11px; font-weight: 500; color: var(--color-ink-muted); text-align: left; padding: 0 var(--space-1); white-space: nowrap; }
.m-heat { height: 26px; border-radius: 4px; text-align: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.m-heat-0 { background: var(--color-neutral-soft); }
.m-heat-1 { background: var(--color-accent-soft); color: var(--color-accent-deep); }
.m-heat-2 { background: color-mix(in srgb, var(--color-accent-deep) 45%, var(--color-surface)); color: var(--color-ink); }
.m-heat-3 { background: var(--color-accent-deep); color: var(--color-surface); }
.m-legend { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-3) 0 0; }
.m-legend .m-heat { display: inline-block; width: 18px; height: 12px; }

/* Finances */
.m-balance-value { margin: var(--space-2) 0 var(--space-4); font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-balance-owed { color: var(--color-warning); }
.m-balance { background: var(--color-accent-soft); border-color: var(--color-accent-soft); }
.m-balance-warning { background: var(--color-warning-soft); border-color: var(--color-warning-soft); }
.m-balance .m-equation { background: var(--color-surface); }
.m-main a.button .m-icon { margin-right: var(--space-2); }
.m-equation { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-canvas); border-radius: var(--radius-md); }
.m-equation > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.m-equation dt { color: var(--color-ink-muted); }
.m-equation dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.m-statement { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
.m-statement th, .m-statement td { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); font-weight: 400; text-align: left; }
.m-statement td { text-align: right; font-weight: 600; }
.m-statement-total th, .m-statement-total td { font-weight: 700; border-bottom: 2px solid var(--color-ink); }
.m-table-flat { border: 0; }

/* Catalogue et fiches produit */
.m-grid-1-3 { grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr); align-items: start; }
.m-filter-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 2px; }
.m-filter-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-ink); text-decoration: none; }
.m-filter-list a:hover { background: var(--color-neutral-soft); }
.m-filter-list a[aria-current="true"] { background: var(--color-accent-soft); color: var(--color-accent-deep); font-weight: 600; }
.m-count { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 24px; text-align: center; padding: 1px var(--space-2); border-radius: var(--radius-full); background: var(--color-neutral-soft); color: var(--color-ink-muted); }
.m-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--color-neutral-soft); color: var(--color-ink-muted); }
.m-pill-published { background: var(--color-accent-soft); color: var(--color-accent-deep); }
.m-pill-draft, .m-pill-neutral { background: var(--color-neutral-soft); color: var(--color-ink-muted); }
.m-pill-archived { background: var(--color-warning-soft); color: var(--color-warning); }
.m-pill-info { background: var(--color-info-soft); color: var(--color-info); }
.m-pill-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.m-disclosure { border-top: 1px solid var(--color-line); padding-top: var(--space-3); margin-top: var(--space-3); }
.m-disclosure summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-accent-deep); min-height: var(--tap-min); }
.m-disclosure form { margin-top: var(--space-3); min-width: 0; }
/* Un extrait de format (en-tête CSV) : police à chasse fixe, et coupé plutôt que débordant — une ligne sans espace qui ne
   se coupe pas élargit toute la colonne, puis la page. */
.m-code { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-neutral-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.m-product { padding: var(--space-4) var(--space-5); }
.m-product-main { display: flex; align-items: center; gap: var(--space-4); }
.m-product-text { flex: 1; min-width: 0; }
.m-product-text h2 { margin: 0 0 var(--space-1); font-size: 16px; }
.m-product-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.m-product-price { margin: 0; font-weight: 600; white-space: nowrap; }
.m-thumb { width: 64px; height: 64px; border-radius: var(--radius-md); object-fit: cover; flex: none; background: var(--color-neutral-soft); }
.m-thumb-empty { display: inline-grid; place-items: center; color: var(--color-ink-subtle); background: var(--color-neutral-soft); border-radius: var(--radius-md); }
span.m-thumb-empty.m-thumb { width: 64px; height: 64px; }
.m-breadcrumb { margin: 0 0 var(--space-2); }
.m-breadcrumb a { text-decoration: none; font-weight: 500; }
.m-form { display: grid; gap: var(--space-4); }
/* Un formulaire d'une colonne dans une carte pleine largeur : des lignes de 1 000 px ne se lisent pas. */
.m-form-narrow { max-width: 40rem; }
/* Remise d'une campagne : le champ du type qui n'est pas choisi s'efface. */
form:has(input[value="PERCENTAGE"]:checked) .m-discount-amount,
form:has(input[value="FIXED_AMOUNT"]:checked) .m-discount-percent { display: none; }
.m-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.m-form select, .m-form textarea, .m-variant input:not([type="checkbox"]):not([type="radio"]), .m-form input:not([type="checkbox"]):not([type="radio"]) { font: inherit; min-height: var(--control-h); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); width: 100%; }
.m-form textarea { min-height: 88px; resize: vertical; }
.m-form fieldset { display: grid; gap: var(--space-3); }
.m-photo { display: grid; place-items: center; aspect-ratio: 1 / 1; margin-bottom: var(--space-4); border-radius: var(--radius-md); background: var(--color-neutral-soft); overflow: hidden; }
.m-photo img { width: 100%; height: 100%; object-fit: cover; }
.m-photo .m-thumb-empty { width: 100%; height: 100%; }
.m-variants { display: grid; gap: var(--space-3); }
.m-variant { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); align-items: end; padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.m-variant .choice { align-self: center; }
.m-card input[type="file"] { width: 100%; max-width: 100%; font: inherit; }
.m-card input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent-deep); }
.button-danger { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger); }
.button-danger:hover { background: var(--color-danger-soft); color: var(--color-danger); border-color: var(--color-danger); }

/* Réglages de boutique */
.m-stack { display: grid; gap: var(--space-4); align-content: start; }
.m-stack > .m-card { margin-bottom: 0; }
.m-schedule { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.m-day { display: grid; gap: var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-3); }
.m-day legend { font-weight: 600; }
.m-slot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.m-photo-cover { aspect-ratio: 16 / 9; }
.m-photo-logo { aspect-ratio: 1 / 1; max-width: 160px; }
.notice-info { background: var(--color-info-soft); color: var(--color-info); }

/* Historique et ordonnances */
.m-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); margin: var(--space-4) 0 0; }
.m-pager > span { margin-right: auto; }
.m-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.m-files a { display: inline-flex; min-height: var(--tap-min); align-items: center; padding: 0 var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); text-decoration: none; font-weight: 500; }
.m-prescription .action-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: end; }

/* Équipe et activation */
.m-members { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.m-member { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.m-member-text { flex: 1; min-width: 0; }
.m-member-text p { margin: 0 0 2px; }
.m-member-name { font-weight: 600; }
.m-member { flex-wrap: wrap; }
.m-member-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.m-disclosure-inline > summary { list-style: none; }
.m-disclosure-inline > summary::-webkit-details-marker { display: none; }
.m-disclosure-inline[open] { flex-basis: 100%; }
.m-disclosure-inline .m-form { margin-top: var(--space-2); }
.m-indent { padding-left: var(--space-6); }
.m-form .choice { align-items: flex-start; }
.m-form input[type="radio"] { margin-top: 3px; accent-color: var(--color-accent-deep); }
.m-auth-alt { margin: var(--space-4) 0 0; text-align: center; }

/* Opérations : plan des livreurs et tableau de bord */
.m-map { margin: 0; }
.m-map .map-ground { fill: var(--color-canvas); stroke: var(--color-line); }
.map-grid { stroke: var(--color-line); stroke-width: 1; }
.map-route { stroke: var(--color-ink-subtle); stroke-width: 2; stroke-dasharray: 6 5; }
.m-map .map-pickup { fill: var(--viz-2); }
.m-map .map-dropoff { fill: var(--viz-3); }
.m-map .map-courier { fill: var(--viz-1); stroke: var(--color-surface); stroke-width: 3; }
.m-map .map-courier.is-busy { fill: var(--color-ink); }
.map-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; fill: var(--color-ink); paint-order: stroke; stroke: var(--color-surface); stroke-width: 4px; }
/* Chaque livreur et chaque point du plan mène à sa page : la main le dit, le focus clavier se voit. */
.map-link { cursor: pointer; }
.map-link:hover .map-courier, .map-link:focus-visible .map-courier { stroke: var(--color-accent); }
.map-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.map-north path { fill: var(--color-ink); }
.map-north text, .map-scale text, .map-empty { font-family: var(--font-sans); font-size: 12px; font-weight: 600; fill: var(--color-ink-muted); }
.map-scale line { stroke: var(--color-ink-muted); stroke-width: 2; }
.m-legend .square-pickup { background: var(--viz-2); }
.m-legend .square-dropoff { background: var(--viz-3); }
.m-legend .dot-free { background: var(--viz-1); }
.m-route-swatch { display: inline-block; width: 18px; border-top: 2px dashed var(--color-ink-subtle); margin-right: var(--space-1); vertical-align: middle; }
.m-dot-busy { background: var(--color-ink); }
.m-live { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 13px; font-weight: 600; color: var(--color-accent-deep); background: var(--color-accent-soft); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
.m-all-clear { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-deep); font-weight: 600; }
.m-pill .m-icon { margin-right: 2px; }
.m-kpi-top .m-kpi-label { font-size: 13px; }

/* Carte en direct (ADR-0039) : le plan SVG reste affiché tant que le script n'a pas démarré (ou s'il est bloqué). */
/* La carte se superpose au plan et occupe exactement sa place : créée avec une taille réelle, elle peut se cadrer sur
   la ville. Masquée par `display: none`, elle naissait dans un conteneur de taille nulle et s'ouvrait sur une mappemonde. */
.m-map { position: relative; }
/* Sélecteur à deux niveaux : la feuille de MapLibre, chargée après la nôtre, pose `position: relative` sur son propre
   conteneur et l'emporterait à spécificité égale. */
.m-map .m-livemap { position: absolute; inset: 0; visibility: hidden; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-line); background: var(--color-canvas); }
.m-live-badge { display: none; }
.m-livemap-card.is-live .m-map .m-livemap { visibility: visible; }
.m-livemap-card.is-live .m-live-badge { display: inline-flex; }
/* Le plan garde sa place sous la carte : c'est lui qui donne sa hauteur au cadre, et il réapparaît si la carte tombe. */
.m-livemap-card.is-live .m-map-fallback { visibility: hidden; }
.m-livemap-card.is-live .m-map-fallback-note { display: none; }
/* Navigateur sans WebGL : le plan reste, et la note dit pourquoi la carte détaillée n'est pas là. */
.m-map-no-webgl { display: none; }
.m-livemap-card.is-unsupported .m-map-no-webgl { display: inline; }
.m-livemap-card.is-unsupported .m-map-fallback-note { display: none; }
.m-map-status:empty, .m-livemap-card.is-live .m-map-status { display: none; }
/* Flux rompu : l'agent doit le voir, sinon des positions figées passent pour des positions à jour. */
.m-stale-badge { display: none; background: var(--color-warn-soft, var(--color-canvas)); color: var(--color-ink); border: 1px solid var(--color-line); }
.m-livemap-card.is-live.is-stale .m-live-badge { display: none; }
.m-livemap-card.is-live.is-stale .m-stale-badge { display: inline-flex; }
.m-livemap-card.is-stale .m-map .m-livemap { opacity: .72; }
.m-livemap .maplibregl-ctrl-attrib { font-size: 11px; }

/* Écrans hérités (fiches Ops, support, Admin) dans le shell commun : mêmes cartes, mêmes titres, mêmes KPI. */
.m-main .page-head { margin-bottom: var(--space-6); align-items: flex-end; }
.m-main .page-head h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.02em; }
.m-main .panel { border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-4); }
.m-main .panel h2, .m-main section > h2 { font-size: 16px; }
.m-main .table-wrap { border-radius: var(--radius-lg); }
.m-main .kpis { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.m-main .kpi { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); border-top: 3px solid var(--viz-1); }
.m-main .kpi:nth-child(4n+2) { border-top-color: var(--viz-3); }
.m-main .kpi:nth-child(4n+3) { border-top-color: var(--viz-2); }
.m-main .kpi:nth-child(4n+4) { border-top-color: var(--viz-4); }
.m-main .badge-critical { background: var(--color-danger-soft); color: var(--color-danger); }
.m-main .badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.m-main .button:not(.button-quiet):not(.button-danger) { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }

/* Barre de tête : elle n'existe que sur téléphone, où elle remplace la colonne de navigation. */
.m-topbar { display: none; }
.m-nav-dismiss { display: none; }

/* Écrans étroits : la navigation passe en tête, les grilles s'empilent. */
@media (max-width: 1080px) {
  .ops-queues { grid-template-columns: minmax(0, 1fr); }
  .m-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-grid-2-1, .m-grid-3, .m-grid-1-3, .m-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .ops-queue-list .ops-alert { grid-template-columns: minmax(0, 1fr) auto; }
  .ops-queue-list .ops-alert-actions { grid-column: 1 / -1; justify-content: flex-start; }
  /* La barre de tête est collante : sans cette réserve, tout saut d'ancre — le panneau de navigation
     comme le lien d'évitement — cale sa cible juste dessous, cachée. */
  html { scroll-padding-top: 60px; }
  .m-shell { grid-template-columns: minmax(0, 1fr); }

  /* Le marchand arrivait sur un pavé de navigation sombre — jusqu'à une vingtaine de liens — avant le
     titre de sa page (DESIGN_REVIEW §4.1). La colonne se replie derrière la barre ; :target l'ouvre,
     le lien « Fermer » rend la main au contenu. Aucun JavaScript : c'est la contrainte du terrain. */
  .m-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    position: sticky; top: 0; z-index: 8;
    min-height: 56px; padding: var(--space-2) var(--space-4);
    background: var(--color-nav); color: var(--color-nav-text);
  }
  .m-topbar .m-brand { padding: 0; font-size: 16px; }
  .m-topbar-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--tap-min); padding: 0 var(--space-3);
    border: 1px solid var(--color-nav-muted); border-radius: var(--radius-sm);
    color: var(--color-nav-text); text-decoration: none; font-weight: 600;
  }
  .m-topbar-toggle:focus-visible, .m-nav-dismiss:focus-visible { outline: var(--focus-width) solid var(--color-accent); outline-offset: var(--focus-offset); }

  /* scroll-margin-top : sans lui, le saut d'ancre cale le haut du panneau sous la barre collante,
     qui recouvre alors le lien « Fermer ». */
  .m-sidebar { display: none; position: static; height: auto; gap: var(--space-4); padding-top: var(--space-4); scroll-margin-top: 56px; }
  .m-sidebar:target { display: flex; }
  /* La barre porte déjà la marque : la répéter dans le panneau ne dit rien de plus. */
  .m-sidebar > .m-brand { display: none; }
  .m-nav-dismiss {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    align-self: flex-end; min-height: var(--tap-min); padding: 0 var(--space-3);
    border: 1px solid var(--color-nav-muted); border-radius: var(--radius-sm);
    color: var(--color-nav-text); text-decoration: none; font-weight: 600;
  }

  .m-nav a.m-nav-sub { padding-left: calc(var(--space-3) + 28px); }
  .m-logout { margin-top: var(--space-2); }
  .m-main { padding: var(--space-4); }
  .m-kpis { grid-template-columns: minmax(0, 1fr); }
  /* La vignette et le texte tiennent la première ligne ; le prix et l'action passent dessous, alignés
     sur le texte. En flex-wrap simple, le titre se cassait mot à mot contre le prix. */
  .m-product-main { flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
  .m-product-text { flex: 1 1 60%; min-width: 0; }
  .m-product-price { flex: 0 0 auto; margin-left: calc(64px + var(--space-3)); font-size: 17px; }
  .m-product-main > .button, .m-product-main > form { margin-left: auto; }
  .m-page-head h1, .m-main .page-head h1 { font-size: 26px; }
  /* Un segment ne se coupe pas en deux lignes : la barre défile latéralement si elle ne tient pas. */
  .m-filters { width: 100%; }
  .m-segmented { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .m-segmented a { white-space: nowrap; }
  .m-scope { flex-wrap: wrap; width: 100%; }
  .m-scope select { flex: 1 1 140px; }
}

/* Alertes Ops actionnables (ADR-0042) : une ligne par situation, ce qu'elle signifie, depuis quand, et l'action qui la
   règle ; le panneau s'ouvre sur place, sans quitter le tableau de bord. */
.m-live[hidden] { display: none; }
.m-live .m-dot { background: currentColor; }
/* Un flux rompu fait lire des données figées comme si elles étaient fraîches : c'est le risque le plus
   sérieux de l'écran, il ne se signale pas par une pastille de 13 px (DESIGN_REVIEW §3.4). */
.m-live { min-height: var(--tap-min); padding: var(--space-2) var(--space-4); border: 1px solid transparent; font-size: 14px; }
.m-live[data-state="polling"] { color: var(--color-ink-muted); background: var(--color-neutral-soft); border-color: var(--color-line-strong); }
.m-live[data-state="paused"] { color: var(--color-warning); background: var(--color-warning-soft); border-color: var(--color-warning); font-weight: 700; }
.m-live[data-state="paused"] .m-dot, .m-live[data-state="polling"] .m-dot { width: 10px; height: 10px; }
.ops-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ops-alert { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); padding: var(--space-4); border: 1px solid var(--color-line); border-left: 4px solid var(--color-warning); border-radius: var(--radius-md); background: var(--color-surface); }
/* Une alerte critique se distingue par le fond, pas par quatre pixels de liseré : c'est la
   distinction la plus importante de l'écran (DESIGN_REVIEW §3.2). */
.ops-alert.is-critical { border-left-color: var(--color-danger); background: var(--color-danger-soft); border-color: var(--color-danger-soft); }
.ops-alert-what { display: grid; gap: var(--space-1); min-width: 0; }
.ops-alert-what .m-pill { justify-self: start; }
.ops-alert-subject { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ops-alert-hint { margin: 0; }
/* « Depuis combien de temps » est ce qui fait décider un agent : c'est un chiffre, pas une métadonnée
   grise (DESIGN_REVIEW §3.3). */
.ops-alert-age {
  margin: 0; align-self: start;
  font-size: 20px; line-height: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink); white-space: nowrap;
}
.ops-alert.is-critical .ops-alert-age { color: var(--color-danger); }
.ops-alert-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.ops-action > summary { list-style: none; display: inline-flex; align-items: center; }
.ops-action > summary::-webkit-details-marker { display: none; }
.ops-action[open] { flex-basis: 100%; }
.ops-action[open] > summary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-surface); }
.ops-action-panel { margin-top: var(--space-3); padding: var(--space-4); max-width: var(--measure); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-canvas); }
.ops-action-panel textarea { width: 100%; }
.ops-action-panel fieldset { margin: 0; padding: 0; border: 0; }
.ops-action-panel legend { font-weight: 600; margin-bottom: var(--space-1); }
.ops-photos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ops-resolution { margin: 0; }
.ops-alert.is-resolved { border-left-color: var(--color-accent); }

/* Files de travail (livraisons, commandes, argent) : une ligne dense par situation — ce qui se passe, sur quoi, depuis
   quand, et l'action. Le panneau d'une action ouverte prend toute la largeur sous sa ligne. */
.ops-queue-list { gap: 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.ops-queue-list .ops-alert { grid-template-columns: 190px minmax(0, 1fr) 80px 270px; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 0; border-top: 1px solid var(--color-line); border-left: 4px solid var(--color-warning); border-radius: 0; }
.ops-queue-list .ops-alert:first-child { border-top: 0; }
.ops-queue-list .ops-alert, .ops-queue-list .ops-alert.is-critical { background: var(--color-surface); }
/* Pas de fond rouge par ligne : quand tout est rouge, plus rien ne ressort. Le critique se lit à la barre, à la
   pastille et à l'âge. */
.ops-queue-list .ops-alert.is-critical { border-left-color: var(--color-danger); }
.ops-queue-list .ops-alert:hover { background: var(--color-canvas); }
.ops-queue-list .m-pill { justify-self: start; }
.ops-queue-list .ops-alert-age { align-self: center; font-size: 16px; line-height: 22px; text-align: right; }
.ops-queue-list .ops-alert-actions { grid-column: auto; justify-content: flex-end; }
.ops-queue-list .ops-alert:has(.ops-action[open]) .ops-alert-actions { grid-column: 1 / -1; justify-content: flex-start; }

.ops-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.ops-filters a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-full); color: var(--color-ink-muted); text-decoration: none; background: var(--color-surface); }
.ops-filters a:hover { border-color: var(--color-line-strong); color: var(--color-ink); }
.ops-filters a[aria-current] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-deep); font-weight: 600; }
.ops-filter-hint { margin: 0 0 var(--space-3); }
.ops-search { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); max-width: 420px; }
.ops-search input { flex: 1; min-width: 0; }

/* Vue d'ensemble : une carte par file, qui mène à la file. La plus urgente se voit à sa couleur. */
.ops-queues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.ops-queue { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5, 20px); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); text-decoration: none; }
.ops-queue:hover { border-color: var(--color-line-strong); }
.ops-queue.is-critical { border-color: var(--color-danger); background: var(--color-danger-soft); }
.ops-queue.is-clear { background: var(--color-canvas); }
.ops-queue-head { display: flex; align-items: center; gap: var(--space-2); }
.ops-queue-name { font-size: 18px; font-weight: 600; }
.ops-queue-count strong { font-size: 28px; line-height: 1; }
.ops-queue-critical { color: var(--color-danger); font-weight: 600; }
.ops-queue-go { margin-top: var(--space-2); color: var(--color-accent-deep); font-weight: 600; }

/* Badge du menu : combien attendent dans la file, rouge s'il y en a une critique. */
.ops-nav-badge { margin-left: auto; min-width: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--color-warning-soft); color: var(--color-warning); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.ops-nav-badge.is-critical { background: var(--color-danger); color: var(--color-surface); }

/* Accueil de la plateforme (admin) : l'état technique, puis une carte par pays, du plus actif au plus en retrait. */
.m-section-title { margin: var(--space-6) 0 var(--space-3); font-size: 18px; }
.admin-countries { display: grid; gap: var(--space-4); }
.admin-country { display: grid; gap: var(--space-4); align-content: start; }
.admin-country h3 { margin: 0; font-size: 20px; }
.admin-country-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.admin-country-head p { margin: var(--space-1) 0 0; }
.admin-country-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.admin-country-badges a.m-pill { text-decoration: none; }
.admin-country-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Chiffres compacts d'une carte : une tuile par indicateur, la valeur en grand, l'alerte en couleur et en mot. */
.m-mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: 0; }
.m-mini-stats > div { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-canvas); }
.m-mini-stats dt { font-size: 13px; color: var(--color-ink-muted); }
.m-mini-stats dd { margin: var(--space-1) 0 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-mini-stats > .is-warning { border-color: var(--color-warning); background: var(--color-warning-soft); }
.m-mini-stats > .is-warning dd { color: var(--color-warning); }
.m-mini-stats > .is-danger { border-color: var(--color-danger); background: var(--color-danger-soft); }
.m-mini-stats > .is-danger dd { color: var(--color-danger); }
.m-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.m-section-head .m-section-title { margin-top: 0; }
/* Filtres d'une liste : les champs sur une grille, le bouton aligné sur leur bas. */
.m-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--space-3); align-items: end; }
.m-filter-grid label { margin: 0; }
@media (max-width: 1080px) { .m-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .m-filter-grid { grid-template-columns: minmax(0, 1fr); } }
.m-card-flush { padding: 0; overflow: hidden; }
/* Journal d'audit : une ligne par action, avant/après repliés. */
.audit-table td { vertical-align: top; }
.audit-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-code { font-size: 13px; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--color-neutral-soft); white-space: nowrap; }
.audit-id { font-size: 13px; font-variant-numeric: tabular-nums; word-break: break-all; }
.audit-reason { max-width: 360px; }
.audit-diff { margin-top: var(--space-2); }
.audit-diff summary { min-height: var(--tap-min); display: inline-flex; align-items: center; cursor: pointer; color: var(--color-accent-deep); font-weight: 600; }
.audit-diff .diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.audit-diff pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; }
.admin-country h3 a { color: var(--color-ink); text-decoration: none; }
.admin-country h3 a:hover { color: var(--color-accent-deep); text-decoration: underline; }
.admin-country [data-readiness] { margin: 0; display: flex; align-items: center; gap: var(--space-1); }
.admin-country [data-readiness="ready"] { color: var(--color-accent-deep); }
.admin-country-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
a.m-pill { text-decoration: none; }
.admin-search { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.admin-search-field { flex: 1 1 260px; }
.admin-search input[type="search"] { width: 100%; }
.admin-country-links { margin: 0 0 var(--space-4); }
.admin-operators { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.admin-operators li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.admin-operators input[type="text"] { flex: 1 1 200px; }

/* Espace Administration : même palette, surface de navigation plus claire et badge encadré.
   Un administrateur qui a les deux accès sait où il est sans lire (DESIGN_REVIEW §4.6).
   Aucun second accent : la distinction passe par la surface, comme l'élévation (DESIGN_SYSTEM §1). */
body.admin .m-sidebar { background: var(--color-nav-hover); }
body.admin .m-nav a:hover { background: var(--color-nav); }
body.admin .m-merchant { background: var(--color-nav); }
body.admin .m-brand-tag {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-nav-muted);
  border-radius: var(--radius-sm);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-nav-text);
}
body.admin .m-topbar { background: var(--color-nav-hover); }

/* Écrans convertis au shell mais restés sur le vocabulaire commun : `card`, `hint` et les groupes de
   cases à cocher n'étaient définis nulle part pour les backoffices — `.card` n'existe que dans la
   feuille de la landing. Ces écrans rendaient donc un formulaire nu, sans carte ni alignement. */
.m-main .card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  min-width: 0;
}
.m-main .card > h2:first-child { margin-top: 0; }
.hint { color: var(--color-ink-muted); font-size: 13px; line-height: 19px; margin: 0; }

/* Cases à cocher multiples : Symfony rend une suite plate input, label, input, label… Sans grille,
   chaque libellé tombait sous sa case. */
.m-main .field > div:has(> input[type="checkbox"]),
.m-main .field > div:has(> input[type="radio"]) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: center;
}
.m-main .field > div > input[type="checkbox"],
.m-main .field > div > input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-accent-deep); }
.m-main .field > div > label { font-weight: 400; min-height: 28px; display: flex; align-items: center; }
}

/* Fiche d'un compte (ADR-0078) : les actions côte à côte ; celle qu'on ouvre prend toute la ligne. */
.account-actions { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); align-items: flex-start; }
.account-actions > details[open] { flex-basis: 100%; }
.m-filters-bar { justify-content: flex-end; margin-bottom: var(--space-4); }
/* Chiffres d'une fiche de compte : trois colonnes de « libellé — valeur », une sur téléphone. */
.m-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); }
.m-stats-grid > div:last-child { border-bottom: 1px solid var(--color-line); padding-bottom: var(--space-3); }
@media (max-width: 1080px) { .m-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .m-stats-grid { grid-template-columns: minmax(0, 1fr); } }
/* Carte sans marge (tableau bord à bord) : son titre, son message vide et sa pagination gardent la leur. */
.m-card-flush > .m-card-head, .m-card-flush > .empty, .m-card-flush > .m-pager { padding: var(--space-5) var(--space-5) var(--space-3); margin: 0; }
.m-card-flush > .m-pager { padding-top: var(--space-3); }
/* Liens d'une fiche vers les fiches liées (compte, client, rôles). */
.m-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-3) 0 0; }
.m-links:empty { display: none; }
/* Détail dépliable d'une ligne (commande, course) : sous sa ligne, sans JavaScript. */
.m-expand-row > td { padding-top: 0; border-top: 0; }
.m-row-details > summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--color-accent-deep, var(--color-ink-muted)); padding: var(--space-1) 0; }
.m-row-details[open] { padding-bottom: var(--space-3); }
.m-row-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-3) 0; }
@media (max-width: 800px) { .m-row-details-grid { grid-template-columns: minmax(0, 1fr); } }
.m-detail-title { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 600; color: var(--color-ink-muted); }
.m-detail-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.m-detail-lines li { display: flex; justify-content: space-between; gap: var(--space-3); }
.m-detail-total { border-top: 1px solid var(--color-line); padding-top: var(--space-1); font-weight: 600; }
.m-detail-list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.m-detail-list > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-2); }
.m-detail-list dt { color: var(--color-ink-muted); font-size: 13px; }
.m-detail-list dd { margin: 0; }
.m-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }