/* ============================================================
   MonGalop — refonte.css
   À charger APRÈS common.css sur chaque page :
       <link rel="stylesheet" href="common.css">
       <link rel="stylesheet" href="refonte.css">
   Le préfixe `body` donne à ces règles la priorité sur les blocs
   <style> internes aux pages, sans avoir à les réécrire.
   ============================================================ */

/* ------------------------------------------------------------
   1. Neutralisation de l'ancien vocabulaire
   ------------------------------------------------------------ */

/* Plus de verre dépoli nulle part */
body *, body *::before, body *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Plus de halos ni d'ombres colorées : une seule ombre de carte */
body [class*="glow"] { display: none !important; }

body [class*="-card"]:not(.billing-kpis):not(.today-kpis):not(.health-stats):not(.stats-section):not(.race-stats):not(.race-stats-multi):not(.health-grid):not(.health-list):not(.health-actions):not(.compare-charts):not(.rule-chips):not(.race-conflicts):not(.attention-list):not(.horse-mini-list):not(.picker-list):not(.horse-list-section):not(.billing-kpi-grid):not([class*="-title"]):not([class*="-label"]):not([class*="-name"]):not([class*="-sub"]):not([class*="-head"]):not([class*="-value"]):not([class*="-text"]),
body [class*="-panel"]:not(.billing-kpis):not(.today-kpis):not(.health-stats):not(.stats-section):not(.race-stats):not(.race-stats-multi):not(.health-grid):not(.health-list):not(.health-actions):not(.compare-charts):not(.rule-chips):not(.race-conflicts):not(.attention-list):not(.horse-mini-list):not(.picker-list):not(.horse-list-section):not(.billing-kpi-grid):not([class*="-title"]):not([class*="-label"]):not([class*="-name"]):not([class*="-sub"]):not([class*="-head"]):not([class*="-value"]):not([class*="-text"]),
body [class*="-kpi"]:not(.billing-kpis):not(.today-kpis):not(.health-stats):not(.stats-section):not(.race-stats):not(.race-stats-multi):not(.health-grid):not(.health-list):not(.health-actions):not(.compare-charts):not(.rule-chips):not(.race-conflicts):not(.attention-list):not(.horse-mini-list):not(.picker-list):not(.horse-list-section):not(.billing-kpi-grid):not([class*="-title"]):not([class*="-label"]):not([class*="-name"]):not([class*="-sub"]):not([class*="-head"]):not([class*="-value"]):not([class*="-text"]),
body [class*="-stat"]:not(.billing-kpis):not(.today-kpis):not(.health-stats):not(.stats-section):not(.race-stats):not(.race-stats-multi):not(.health-grid):not(.health-list):not(.health-actions):not(.compare-charts):not(.rule-chips):not(.race-conflicts):not(.attention-list):not(.horse-mini-list):not(.picker-list):not(.horse-list-section):not(.billing-kpi-grid):not([class*="-title"]):not([class*="-label"]):not([class*="-name"]):not([class*="-sub"]):not([class*="-head"]):not([class*="-value"]):not([class*="-text"]),
body .card,
body .panel {
    box-shadow: var(--shadow-card) !important;
    background-image: none !important;
}

/* Les conteneurs de grille restent des dispositions : ni fond, ni bordure */
body .billing-kpis, body .today-kpis, body .health-stats, body .stats-section,
body .race-stats, body .race-stats-multi, body .health-grid, body .health-list,
body .health-actions, body .compare-charts, body .rule-chips, body .race-conflicts,
body .attention-list, body .horse-mini-list, body .picker-list, body .horse-list-section {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

body [class*="-icon"],
body [class*="-star"],
body [class*="-dot"] {
    filter: none !important;
}

/* Les dégradés décoratifs disparaissent, la couleur de fond reste */
body [style*="gradient"],
body [class*="hero"] {
    background-image: none !important;
}

/* ------------------------------------------------------------
   2. Typographie : la graisse redescend, les chiffres passent en mono
   ------------------------------------------------------------ */
body h1 { font-size: 23px; font-weight: 600; letter-spacing: -0.03em; }
body h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
body h3 { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }

body [style*="font-weight:8"],
body [style*="font-weight: 8"],
body [style*="font-weight:9"],
body [style*="font-weight: 9"] { font-weight: 600 !important; }
body [style*="font-weight:7"],
body [style*="font-weight: 7"] { font-weight: 600 !important; }

/* Toute valeur chiffrée est tabulaire : c'est un outil de gestion */
body [class*="-value"],
body [class*="-gains"],
body [class*="-amount"],
body [class*="-chrono"],
body [class*="-time"],
body [class*="-count"],
body [class*="-hcp"],
body [class*="-solde"],
body [class*="-total"],
body .v, body .num, body .value,
body td.num, body th.num,
body .health-stat strong,
body .billing-kpi .value,
body .today-kpi-value,
body .stats-card .stats-value,
body .race-stat .v {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 500 !important;
    letter-spacing: -0.02em;
}

/* Le nom d'un cheval est toujours en mono */
body .horse-name-owner h2,
body .picker-name,
body [class*="horse-name"],
body [class*="-horse"] a,
body #topbar-horse-name {
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

/* ------------------------------------------------------------
   3. Surfaces : rayons resserrés, bordures fines
   ------------------------------------------------------------ */
body [class*="-card"]:not(.billing-kpis):not(.today-kpis):not(.health-stats):not(.stats-section):not(.race-stats):not(.race-stats-multi):not(.health-grid):not(.health-list):not(.health-actions):not(.compare-charts):not(.rule-chips):not(.race-conflicts):not(.attention-list):not(.horse-mini-list):not(.picker-list):not(.horse-list-section):not(.billing-kpi-grid):not([class*="-title"]):not([class*="-label"]):not([class*="-name"]):not([class*="-sub"]):not([class*="-head"]):not([class*="-value"]):not([class*="-text"]),
body [class*="-panel"]:not(.billing-kpis):not(.today-kpis):not(.health-stats):not(.stats-section):not(.race-stats):not(.race-stats-multi):not(.health-grid):not(.health-list):not(.health-actions):not(.compare-charts):not(.rule-chips):not(.race-conflicts):not(.attention-list):not(.horse-mini-list):not(.picker-list):not(.horse-list-section):not(.billing-kpi-grid):not([class*="-title"]):not([class*="-label"]):not([class*="-name"]):not([class*="-sub"]):not([class*="-head"]):not([class*="-value"]):not([class*="-text"]),
body [class*="-section"]:not(.billing-kpis):not(.today-kpis):not(.health-stats):not(.stats-section):not(.race-stats):not(.race-stats-multi):not(.health-grid):not(.health-list):not(.health-actions):not(.compare-charts):not(.rule-chips):not(.race-conflicts):not(.attention-list):not(.horse-mini-list):not(.picker-list):not(.horse-list-section):not(.billing-kpi-grid):not([class*="-title"]):not([class*="-label"]):not([class*="-name"]):not([class*="-sub"]):not([class*="-head"]):not([class*="-value"]):not([class*="-text"]),
body .card,
body .panel,
body .settings-card,
body .health-card,
body .health-stat,
body .billing-kpi,
body .today-kpi,
body .today-panel,
body .picker-card,
body .stats-card,
body .login-card {
    border-radius: 11px !important;
    border: 1px solid var(--card-glass-border) !important;
    background: var(--surface) !important;
}

body [class*="-row"],
body [class*="-item"],
body .rule-chip,
body .health-row,
body .attention-item,
body .picker-row,
body .horse-row {
    border-radius: 9px !important;
}

/* Les cartes cliquables se soulèvent, elles ne changent pas de couleur */
body .horse-row:hover,
body .picker-row:hover,
body [class*="-card"]:not(.billing-kpis):not(.today-kpis):not(.health-stats):not(.stats-section):not(.race-stats):not(.race-stats-multi):not(.health-grid):not(.health-list):not(.health-actions):not(.compare-charts):not(.rule-chips):not(.race-conflicts):not(.attention-list):not(.horse-mini-list):not(.picker-list):not(.horse-list-section):not(.billing-kpi-grid):not([class*="-title"]):not([class*="-label"]):not([class*="-name"]):not([class*="-sub"]):not([class*="-head"]):not([class*="-value"]):not([class*="-text"]):hover {
    border-color: var(--brand-copper) !important;
    box-shadow: var(--shadow-raised) !important;
    background: var(--surface) !important;
}

/* En-têtes de carte */
body [class*="-card-head"],
body [class*="-panel-head"],
body .panel-head,
body .health-card-head,
body .race-head,
body .picker-header {
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 12px;
    margin-bottom: 13px;
}

body .panel-title,
body .card-title,
body [class*="-card-title"] {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    text-transform: none !important;
}

body .panel-sub,
body [class*="-card-sub"],
body [class*="-sub"] {
    font-size: 11px !important;
    color: var(--text-secondary) !important;
}

/* Libellés en petites capitales : une seule échelle partout */
body .section-title,
body [class*="-label"],
body .health-stat span,
body .billing-kpi .label,
body .today-kpi-label,
body .stats-card .stats-title,
body .race-stat .l,
body .chart-label,
body .timeline-date {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--text-secondary) !important;
}

/* ------------------------------------------------------------
   4. Pastilles de statut — jamais la couleur d'un bouton d'action
   ------------------------------------------------------------ */
body [class*="badge"],
body [class*="-pill"],
body [class*="-chip"]:not([class*="-chips"]),
body [class*="-tag"]:not([class*="-tags"]):not([class*="-tagline"]),
body .statut,
body .rang-badge,
body .compliance-badge,
body .section-count,
body .count-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px !important;
    border-radius: 20px !important;
    border: 1px solid var(--card-glass-border);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none !important;
}

/* Les cinq statuts santé de votre modèle */
body .status-fit,
body .status-badge.active-neon-green,
body [class*="badge"].ok {
    background: var(--neon-green-glow) !important;
    border-color: var(--neon-green) !important;
    color: var(--neon-green) !important;
}
body .status-monitoring,
body .status-badge.active-neon-amber,
body [class*="badge"].warn {
    background: var(--neon-amber-glow) !important;
    border-color: var(--neon-amber) !important;
    color: var(--neon-amber) !important;
}
body .status-care,
body [class*="badge"].danger,
body .race-conflict {
    background: var(--neon-red-glow) !important;
    border-color: var(--neon-red) !important;
    color: var(--neon-red) !important;
}
body .status-rest,
body [class*="badge"].info {
    background: var(--neon-blue-glow) !important;
    border-color: var(--neon-blue) !important;
    color: var(--neon-blue) !important;
}
body .status-unavailable {
    background: var(--surface-sunken) !important;
    border-color: var(--card-glass-border) !important;
    color: var(--text-secondary) !important;
}

/* Black Type : une pastille lisible, pas seulement une étoile */
body .bt-star { color: var(--brand-copper) !important; }
body .horse-row.is-black-type {
    background: var(--surface) !important;
    border-color: #d8d0c6 !important;
}
:root[data-theme="light"] body .horse-row.is-black-type .horse-name-owner h2 {
    color: var(--text-primary) !important;
}
:root[data-theme="light"] body .horse-row.is-black-type .horse-name-owner p {
    color: var(--text-secondary) !important;
}
:root[data-theme="light"] body .horse-row.is-black-type .bt-star {
    color: var(--brand-copper) !important;
    filter: none !important;
}

/* La fiche cheval utilisait aussi un texte blanc hérité de l'ancien
   fond vert, alors que la refonte remplace ce fond par une surface claire. */
:root[data-theme="light"] body .black-type-card.is-black-type {
    background: var(--surface) !important;
    border-color: #d8d0c6 !important;
}
:root[data-theme="light"] body .black-type-card.is-black-type .bt-icon,
:root[data-theme="light"] body .black-type-card.is-black-type .status-toggle-title {
    color: var(--brand-copper) !important;
    filter: none !important;
}
:root[data-theme="light"] body .black-type-card.is-black-type .status-toggle-sub {
    color: var(--text-secondary) !important;
}

/* ------------------------------------------------------------
   5. Onglets et segments
   ------------------------------------------------------------ */
body [class*="-tabs"] {
    display: flex;
    gap: 2px;
    padding: 3px !important;
    border: 1px solid var(--card-glass-border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    width: fit-content;
}

body [class*="-tab"]:not([class*="-tabs"]):not([class*="-table"]) {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px !important;
    padding: 0 12px !important;
    min-height: 26px;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

body [class*="-tab"]:not([class*="-table"]).active,
body [class*="-tab"]:not([class*="-table"])[aria-selected="true"] {
    background: var(--brand-navy) !important;
    color: var(--bg-body) !important;
    box-shadow: none !important;
}

/* Puces de filtre */
body .filter-chip {
    border-radius: 20px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    background: var(--surface) !important;
    color: var(--text-secondary) !important;
}
body .filter-chip:hover,
body .filter-chip.active {
    border-color: var(--brand-copper) !important;
    color: var(--brand-copper) !important;
    background: var(--surface) !important;
}

/* ------------------------------------------------------------
   6. Champs de saisie et barres d'outils
   ------------------------------------------------------------ */
body .search-bar,
body .picker-search,
body .month-input,
body .sort-select,
body .field input,
body .field select,
body .field textarea {
    border-radius: 7px !important;
    border: 1px solid var(--card-glass-border) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    min-height: 32px;
    font-size: 12.5px !important;
}

body .search-bar { padding: 0 10px !important; }
body .search-bar input {
    border: 0 !important;
    background: transparent !important;
    min-height: 30px;
    font-size: 12.5px !important;
}
body .search-bar:focus-within,
body .field input:focus,
body .field select:focus,
body .field textarea:focus,
body .month-input:focus {
    border-color: var(--brand-copper) !important;
    box-shadow: none !important;
}

body [class*="-toolbar"] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* ------------------------------------------------------------
   7. Boutons d'action des pages
   ------------------------------------------------------------ */
body .action-btn,
body .primary-action,
body .btn-health-primary,
body .empty-action a {
    background: var(--brand-copper) !important;
    border: 1px solid var(--brand-copper) !important;
    color: #ffffff !important;
    border-radius: 7px !important;
    min-height: 32px;
    padding: 0 13px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}
body .action-btn:hover,
body .primary-action:hover,
body .btn-health-primary:hover { background: var(--brand-copper-hover) !important; }

body .btn-health-secondary,
body .small-action,
body .panel-link {
    color: var(--brand-copper) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ------------------------------------------------------------
   8. Casaques : toujours en médaillon rond, à gauche du nom
   ------------------------------------------------------------ */
body .casaque,
body .casaque-fallback,
body .horse-avatar-container,
body .picker-avatar,
body img[src*="casques"],
body img[src*="casaques"] {
    border-radius: 50% !important;
    object-fit: contain;
    background: var(--surface-sunken) !important;
    border: 1px solid var(--card-glass-border) !important;
    overflow: hidden;
}

/* ------------------------------------------------------------
   9. Tableaux
   ------------------------------------------------------------ */
body .sec-table th,
body table th {
    background: var(--surface-sunken) !important;
    border-bottom: 1px solid var(--card-glass-border) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--text-secondary) !important;
    padding: 10px 16px !important;
}

body .sec-table td,
body table td {
    border-bottom: 1px solid var(--hairline) !important;
    font-size: 12.5px !important;
    padding: 12px 16px !important;
}

body table tbody tr:hover { background: var(--surface-muted) !important; }

/* ------------------------------------------------------------
   10. Chronologie (santé)
   ------------------------------------------------------------ */
body .timeline:before { background: var(--hairline) !important; width: 1px !important; }
body .timeline-item:before {
    background: var(--brand-copper) !important;
    box-shadow: 0 0 0 3px var(--surface) !important;
    width: 8px !important; height: 8px !important;
}
body .timeline-title { font-size: 13px !important; font-weight: 600 !important; }
body .treatment-card { border-left: 2px solid var(--brand-copper) !important; }
body .compliance-card { border-top: 2px solid var(--brand-copper) !important; }
body .compliance-row { border-left: 2px solid var(--neon-amber) !important; }

/* ------------------------------------------------------------
   11. Modales
   ------------------------------------------------------------ */
body .health-modal,
body dialog::backdrop { background: rgba(24, 24, 27, 0.32) !important; }
:root[data-theme="dark"] body .health-modal,
:root[data-theme="dark"] body dialog::backdrop { background: rgba(4, 4, 5, 0.72) !important; }

body .health-modal-panel,
body dialog {
    border-radius: 11px !important;
    border: 1px solid var(--card-glass-border) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-overlay) !important;
    padding: 0 !important;
}
body .health-modal-head {
    padding: 16px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--hairline);
}
body .health-modal-head h2 { font-size: 14px !important; }
body .health-modal-panel > form,
body .health-modal-panel > div:not(.health-modal-head) { padding: 18px; }
body .modal-actions {
    padding: 14px 18px !important;
    margin: 0 !important;
    border-top: 1px solid var(--hairline);
    background: var(--surface-muted);
}

/* ------------------------------------------------------------
   12. États vides et bannières
   ------------------------------------------------------------ */
body .empty-msg,
body .empty-health,
body .readonly-note,
body .legal-caveat {
    color: var(--text-secondary) !important;
    font-size: 12.5px !important;
}

body .empty-action,
body .regulation-banner,
body .preview-banner {
    border: 1px solid var(--card-glass-border) !important;
    border-left: 2px solid var(--neon-amber) !important;
    border-radius: 9px !important;
    background: var(--surface) !important;
    text-align: left !important;
}
body .empty-action-icon { display: none !important; }

/* ------------------------------------------------------------
   13. Page jockey (mobile) : cibles tactiles 48px minimum
   ------------------------------------------------------------ */
body .j-head {
    background: var(--bg-body) !important;
    border-bottom: 1px solid var(--chassis-border) !important;
}
body .j-app [class*="-card"] { border-radius: 10px !important; }
body .j-app button,
body .j-app input[type="checkbox"] { min-height: 48px; min-width: 48px; }

/* ------------------------------------------------------------
   14. Connexion
   ------------------------------------------------------------ */
body.login-page,
body:has(.login-card) { background: var(--bg-body) !important; }
body .login-card {
    border-radius: 11px !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-overlay) !important;
    padding: 28px !important;
}

/* ------------------------------------------------------------
   15. Ajustements responsive d'intégration
   ------------------------------------------------------------ */
body .login-card button[type="submit"] {
    background: var(--brand-copper) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    min-height: 40px;
}
body .login-card button[type="submit"]:hover {
    background: var(--brand-copper-hover) !important;
}

/* Correctifs de l'audit visuel */
body .planning-action.publish {
    background: var(--brand-copper) !important;
    border-color: var(--brand-copper) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}
body .planning-action.publish:hover {
    background: var(--brand-copper-hover) !important;
}
body .planning-action.publish.is-published,
body .planning-action.publish.published {
    background: transparent !important;
    border-color: var(--neon-green) !important;
    color: var(--neon-green) !important;
}

body .profile-header {
    background: var(--surface-sunken) !important;
    border: 1px solid var(--card-glass-border);
    border-radius: 14px !important;
    min-height: 300px;
}
body .profile-header:not(.has-photo) .header-overlay {
    background: none !important;
}
body .profile-header:not(.has-photo) .horse-main-info-text h1,
body .profile-header:not(.has-photo) .horse-main-info-text p {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}
body .profile-header.has-photo .header-overlay {
    background: linear-gradient(to top,
        rgba(16,16,18,.88) 0%, rgba(16,16,18,.55) 34%,
        rgba(16,16,18,.10) 62%, rgba(16,16,18,0) 100%) !important;
}
body .casaque-profile { border-radius: 50% !important; }

body button,
body .action-btn,
body .primary-action,
body [class*="-action"],
body [class*="-tab"]:not([class*="-tabs"]):not([class*="-table"]),
body .board-actions a {
    white-space: nowrap !important;
}

body [class*="-title"],
body [class*="-name"],
body [class*="-value"],
body [class*="-label"],
body [class*="-heading"],
body [class*="-badge"],
body [class*="-pill"],
body [class*="-count"],
body h1, body h2, body h3,
body strong, body b, body button,
body .status,
body .compliance-pill,
body .mini-ready,
body .mini-missing,
body .hstat-val,
body .scout-v,
body .hl-v,
body .hl-t,
body .workflow-arrow,
body .regulation-banner a,
body .j-date,
body .j-lot,
body .j-time,
body .j-horse,
body .jockey-avatar,
body .health-mini,
body .pill-avatar,
body .pc-date .d,
body .poids-final-row .val {
    font-weight: 600 !important;
}

body a,
body label,
body h4, body h5, body h6,
body .list-header,
body .filters-toggle,
body .count,
body .workflow-step,
body .new-lot-trigger,
body .j-welcome p,
body .picker-header,
body .label,
body .brand-tagline,
body.performance-page .report-bar .brand .t,
body.performance-page .ident .badge,
body.performance-page .ident .badge .n,
body.performance-page .ident .badge .l,
body.performance-page .ident .place .p,
body.performance-page .kpi .v,
body.performance-page .fd .tag {
    font-weight: 600 !important;
}

body.analyse-page {
    --accent: var(--brand-copper);
    --violet: var(--brand-copper);
    --p0-hex: var(--brand-copper);
    --p0-rgb: 163,87,44;
    --bg-deep: var(--bg-body);
    --bg-panel: var(--surface);
    --bg-row: var(--surface-muted);
    --border: var(--card-glass-border);
    --border-md: var(--chassis-border);
    --txt: var(--text-primary);
    --txt-sub: var(--text-secondary);
    --txt-dim: var(--text-tertiary);
    --bg-solid: var(--surface);
    --bg-solid-total: var(--surface-sunken);
    --bg-solid-hover: var(--surface-muted);
}
body.analyse-page .step-badge,
body.analyse-page .dist-chip.active,
body.analyse-page .mode-btn.active,
body.analyse-page .combo-option:hover,
body.analyse-page .combo-option.active {
    background: color-mix(in srgb, var(--brand-copper) 12%, transparent) !important;
    border-color: var(--brand-copper) !important;
    color: var(--brand-copper) !important;
}
body.analyse-page .field-select:focus {
    border-color: var(--brand-copper) !important;
    box-shadow: none !important;
}
body.analyse-page .btn-add {
    background: color-mix(in srgb, var(--brand-copper) 10%, transparent) !important;
    border-color: var(--brand-copper) !important;
    color: var(--brand-copper) !important;
}
body.analyse-page .btn-primary {
    background: var(--brand-copper) !important;
    box-shadow: none !important;
}
body.analyse-page .spinner { border-top-color: var(--brand-copper) !important; }

body.deux-ans-page {
    --red: var(--neon-red);
    --card: var(--surface);
    --border: var(--card-glass-border);
}
body.deux-ans-page .kpi-card.red,
body.deux-ans-page .arg-chip.unfav,
body.deux-ans-page .scout-card {
    background: var(--neon-red-glow) !important;
    border-color: var(--neon-red) !important;
}
body.deux-ans-page .kpi-card.red .kpi-badge,
body.deux-ans-page .scout-rank,
body.deux-ans-page #scout-count {
    background: var(--neon-red-glow) !important;
    color: var(--neon-red) !important;
}

body.etiquettes-page { background: var(--bg-body) !important; }
body .sticky,
body .sticky:nth-child(even),
body .sticky:nth-child(3n) {
    background: #ffffff !important;
    transform: none !important;
    border: 1px solid var(--card-glass-border);
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(24,24,27,.07) !important;
}
body .sticky::before { display: none !important; }
body .lot-column {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body .board-head {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--chassis-border);
    box-shadow: none !important;
}
body .board-actions button,
body .board-actions a {
    background: var(--surface) !important;
    border-color: var(--card-glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: 7px !important;
}
body .board-actions .print-btn {
    background: var(--brand-copper) !important;
    border-color: var(--brand-copper) !important;
    color: #ffffff !important;
}

body .j-head {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
}
body .j-horse {
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
}

body .billing-hero,
body .surface,
body .step-panel,
body .chart-panel,
body .dt-panel,
body .empty-state,
body .j-card,
body .j-empty,
body .workflow-card,
body .reunion-card,
body .new-lot-card,
body .kpi-row .stat {
    border-radius: 11px !important;
}
body .login-card .brand img { border-radius: 9px !important; }

@media (max-width: 720px) {
    /* Le rail latéral laisse 328 px sur un téléphone de 390 px. Les
       composants ci-dessous doivent donc pouvoir rétrécir sans propager
       leur largeur desktop à tout le document. */
    body .app-main,
    body .content,
    body .page-content,
    body .wrap,
    body .card,
    body .panel,
    body .surface,
    body .step-panel {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    body .horse-list-section {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body .horse-row,
    body .horse-row-info,
    body .horse-name-owner {
        min-width: 0;
    }

    /* Programme des engagements */
    body .kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body .day-reunions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body .reunion-card,
    body .reunion-header,
    body .engagement-row,
    body .engagement-meta {
        min-width: 0;
        max-width: 100%;
    }
    body .engagement-meta {
        overflow-wrap: anywhere;
    }
    body .status-badge,
    body .next-action {
        white-space: normal !important;
    }

    /* Planning */
    body .planning-layout,
    body .planning-side,
    body .planning-main,
    body .side-panel {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
    }
    body .planning-side {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body .lots-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Santé, courses, fiche cheval et tracking */
    body .health-grid,
    body .health-column,
    body .health-card,
    body .health-list,
    body .health-row,
    body .rule-chips,
    body .rule-chip,
    body .races-layout,
    body .races-side,
    body .races-main,
    body .horse-card,
    body .race-card,
    body .profile-grid,
    body .profile-main,
    body .profile-side,
    body .tracking-grid {
        min-width: 0 !important;
        max-width: 100%;
    }
    body .rule-chip {
        display: block;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    body .rule-chips { display: flex; }
    body .profile-main > .card,
    body .tracking-grid > .card {
        overflow-x: auto;
    }
    body .tracking-grid .race-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    /* Facturation : les onglets défilent dans leur propre zone. */
    body .billing-tabs {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    body .billing-tabs::-webkit-scrollbar { display: none; }
    body .billing-tab { flex: 0 0 auto; }

    /* Analyse de course */
    body .horse-row-fields,
    body .horse-row-selects,
    body .mode-toggle,
    body .combo {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    body .horse-row-fields .field-group,
    body .horse-row-selects .field-group,
    body .horse-row-selects .field-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    body .mode-btn { flex: 1 1 0; }

    /* Biomécanique 2 ans */
    body #ch-race,
    body .sty-sel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    body .sel-row { align-items: stretch; }
    body .page-content > div,
    body .tracking-grid > *,
    body .chart-box,
    body #scout-grid {
        min-width: 0;
        max-width: 100%;
    }
    body .chart-box { overflow: hidden; }
    body .page-content .panel,
    body .page-content .c-wrap {
        overflow-x: hidden;
    }
    body .page-content canvas {
        max-width: 100% !important;
    }
    body .run-tags {
        display: flex;
        width: 100%;
        max-width: 100%;
        white-space: normal;
    }
    body .run-tags > * {
        min-width: 0;
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    body .scout-card {
        display: flex;
        flex-wrap: wrap;
        gap: 8px !important;
    }
    body .scout-card > div:first-child {
        flex: 1 1 100% !important;
        min-width: 0;
    }
    body .scout-name,
    body .scout-meta {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Dossier de performance : les tableaux restent consultables par
       défilement horizontal sans élargir la page entière. */
    body .wrap .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body .wrap .g2,
    body .wrap .g21,
    body .wrap .sec,
    body .wrap .card {
        min-width: 0;
        max-width: 100%;
    }
    body .wrap .card,
    body .wrap .stab {
        overflow-x: auto;
    }
    body .wrap .tabs {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    body .wrap .tabs::-webkit-scrollbar { display: none; }
    body .wrap .tab { flex: 0 0 52px; }
    body .wrap .prow {
        grid-template-columns: minmax(72px, 110px) minmax(0, 1fr) minmax(62px, 76px) !important;
        gap: 8px;
    }
}