/**
 * OptiGest360° — Refonte de l'interface : FRAGMENTS HISTORIQUES (voie B)
 * =====================================================================
 * TRANSITOIRE ET DÉCROISSANTE — décision de l'Owner du 2026-09-11.
 *
 * Les écrans refondus gardent volontairement des fragments historiques : fenêtres,
 * onglets et champs pilotés par du JavaScript legacy (règle 5 du brief de
 * migration), plus les partiels partagés qu'ils incluent. Cette feuille les fait
 * vivre SANS design-system.css, dark-theme.css, ds-modal-bem-alias.css ni les
 * feuilles v2-*, dessinés aux jetons de la refonte.
 *
 * Règles de la feuille
 *   · on n'y AJOUTE rien. Chaque fragment converti en <x-ui.*> retire sa règle ;
 *     une famille qui n'a plus d'occurrence (mesure-legacy.py) perd sa section ;
 *   · la MÉCANIQUE D'ÉTAT (qui s'ouvre, qui se cache, sur quelle classe) est celle
 *     des anciennes feuilles, à l'identique ; la FORME calque les composants ui-* ;
 *   · couleurs : uniquement des variables --ui-* — clair et sombre suivent les jetons ;
 *   · spécificité : html[data-refonte] + le sélecteur historique. Tant que les
 *     anciennes feuilles sont chargées, elle l'emporte sur design-system.css et
 *     dark-theme.css par la spécificité, sur v2-*.css (même préfixe) par l'ordre :
 *     elle est chargée la dernière. :where(html[data-refonte]) là où un écran ajuste
 *     lui-même le fragment dans son <style> (.rf-page-rapports, .rf-page-projet,
 *     .pyramid-modal__header) : son ajustement doit continuer de primer ;
 *   · HYBRIDES : un élément qui porte aussi une classe ui-* (crochet JS legacy sur
 *     un composant refondu : ds-tabs__btn ui-tabs__tab, ds-input ui-input--lg…)
 *     appartient à la refonte. Les règles de FORME l'excluent par
 *     :where(:not([class*="ui-"])), sans spécificité ajoutée ; la MÉCANIQUE
 *     (ouvrir, cacher, onglet actif) et les utilitaires s'y appliquent toujours ;
 *   · §12 ne sert QUE tant que les anciennes feuilles sont chargées (réponses à
 *     leurs règles plus spécifiques ou !important) : il part avec elles.
 *
 * Sommaire : §0 jetons de repli · §1 socle · §2 visibilité · §3 fenêtres (voiles,
 * état) · §4 panneaux · §5 en-tête, corps, pied · §6 onglets · §7 formulaires ·
 * §8 boutons · §9 utilitaires · §10 composants · §11 og-dialog · §12 surclassement.
 */

/* ═══ §0 Jetons de repli ═══════════════════════════════════════════════════
   Variables --ds-* que lisent les fragments (style="", <style> d'écran, partiels,
   og-dialog.js, video-recorder.js) et que bridge.css ne définit pas. Spécificité
   nulle : tant que les anciennes feuilles sont chargées, leurs valeurs gardent
   la main. Les cinq « soft » n'étaient définies nulle part (repli en dur, clair). */
:where(html[data-refonte]) {
    --ds-white: var(--ui-surface);
    --ds-card-bg: var(--ui-surface);
    --ds-color-border: var(--ui-border);
    --ds-color-primary: var(--ui-accent-strong);
    --ds-color-bg-secondary: var(--ui-bg);
    --ds-color-bg-hover: var(--ui-surface-2);
    --ds-color-text-tertiary: var(--ui-text-3);
    --ds-color-danger: var(--ui-danger-fg);
    --ds-text-danger: var(--ui-danger-fg);
    --ds-bg-success-soft: var(--ui-success-bg);
    --ds-border-success: var(--ui-success-border);
    --ds-bg-danger-soft: var(--ui-danger-bg);
    --ds-border-danger: var(--ui-danger-border);
    --ds-radius-md: 10px;
    --ds-space-3: 0.75rem;
    --ds-text-xs: 0.75rem;
    --ds-text-sm: 0.875rem;
    --ds-font-semibold: 600;
}

/* ═══ §1 Socle ═════════════════════════════════════════════════════════════
   Comportements que les anciennes feuilles donnaient à TOUTE la page et dont les
   écrans refondus dépendent sans le dire (v2-components.css:498 et :544,
   v2-theme.css:194, design-system.css:16365). Spécificité nulle. Ne concernent
   pas que les fragments : à déplacer dans shell.css au retrait du legacy. */
:where(html[data-refonte]) { accent-color: var(--ui-accent-strong); }
:where(html[data-refonte]) a:where(:not([class])) { color: var(--ui-text-1); text-decoration: none; }
:where(html[data-refonte]) a:where(:not([class])):hover { color: var(--ui-accent-fg); }
:where(html[data-refonte]) :where(h1, h2, h3, h4, h5, h6) { font-family: var(--ui-font-display); letter-spacing: -0.01em; }
:where(html[data-refonte]) input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
:where(html[data-refonte]) input[type="number"]::-webkit-outer-spin-button,
:where(html[data-refonte]) input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ═══ §2 Visibilité — MÉCANIQUE ════════════════════════════════════════════
   Classes que les scripts posent ou retirent pour cacher (classList.add('ds-none'),
   toggle('d-none'), remove('hidden')…). display:none !important, comme avant. */
html[data-refonte] .ds-none,
html[data-refonte] .ds-hidden,
html[data-refonte] .d-none,
html[data-refonte] .hidden { display: none !important; }

/* ═══ §3 Fenêtres : voiles et MÉCANIQUE D'ÉTAT ═════════════════════════════
   Qui s'ouvre, et sur quelle classe — exactement les anciennes feuilles :
     .modal-overlay                        .active              design-system.css:7042
     .modal hors d'un .modal-overlay       .active              :7062
     .ds-modal-overlay                     .active, .is-active  :2739
     div.ds-modal[id] / div.ds-modal:has(.ds-modal__backdrop)  .is-active  :15200
     .share-modal, .pyramid-fullscreen-modal  .active           :13761
   Rien d'autre n'ouvre : un .is-active seul ne montre pas un .modal-overlay (déjà
   vrai avant). Un display posé EN LIGNE par un script (set-display, open-modal,
   style.display = 'flex' | 'none' | '') garde la main, comme avant.
   Couche 1080, celle des <x-ui.modal> : les toasts (1100) et og-dialog (10050)
   passent au-dessus d'une fenêtre historique comme au-dessus d'une ui-modal ;
   le tiroir de navigation (1070) reste dessous. Entre elles, les fenêtres
   historiques s'empilent dans l'ordre du document, comme à 9998. */
html[data-refonte] .modal-overlay,
html[data-refonte] .ds-modal-overlay,
html[data-refonte] .modal,
html[data-refonte] .share-modal,
html[data-refonte] .pyramid-fullscreen-modal {
    position: fixed; inset: 0; z-index: 1080;
    display: none; align-items: center; justify-content: center;
    margin: 0; padding: 32px; box-sizing: border-box; overflow-y: auto;
    background: var(--ui-scrim); animation: none;
}
html[data-refonte] .modal-overlay.active,
html[data-refonte] .modal.active,
html[data-refonte] .ds-modal-overlay.active,
html[data-refonte] .ds-modal-overlay.is-active,
html[data-refonte] .share-modal.active,
html[data-refonte] .pyramid-fullscreen-modal.active { display: flex; }

/* « Boîte à voile » : un div.ds-modal porteur d'un id (ou d'un __backdrop) est la
   fenêtre entière ; son voile est l'enfant .ds-modal__backdrop. */
html[data-refonte] div.ds-modal:is([id], :has(.ds-modal__backdrop)) {
    position: fixed; inset: 0; z-index: 1080;
    display: none; align-items: center; justify-content: center;
    width: auto; max-width: none; max-height: none; margin: 0; padding: 32px; box-sizing: border-box;
    overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-refonte] div.ds-modal.is-active { display: flex; }
html[data-refonte] .ds-modal__backdrop { position: absolute; inset: 0; background: var(--ui-scrim); cursor: pointer; }

/* Alias BEM (ds-modal-bem-alias.css) : voile et panneau posés à part, chacun fixe.
   Leurs 1000 / 1001 restent : dans .og-modal-shell (z-index 1000 en ligne), c'est
   leur ÉCART qui garde le panneau au-dessus de son voile. */
html[data-refonte] .ds-modal__overlay { position: fixed; inset: 0; z-index: 1000; background: var(--ui-scrim); cursor: pointer; }

@media (max-width: 640px) {
    html[data-refonte] .modal-overlay,
    html[data-refonte] .ds-modal-overlay,
    html[data-refonte] .modal:not(.modal-overlay > .modal),
    html[data-refonte] .share-modal,
    html[data-refonte] .pyramid-fullscreen-modal,
    html[data-refonte] div.ds-modal:is([id], :has(.ds-modal__backdrop)) { padding: 0; align-items: flex-end; }
}

/* ═══ §4 Fenêtres : panneaux (forme de .ui-modal__panel) ═══════════════════ */
html[data-refonte] :is(.modal-overlay > .modal, .modal > .modal-content, .modal-container,
                      .ds-modal-overlay > .ds-modal, .ds-modal__content, .ds-modal__panel, .share-modal-content) {
    box-sizing: border-box; margin: auto;
    background: var(--ui-surface); color: var(--ui-text-1);
    border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: var(--ui-shadow-overlay);
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px; text-align: left;
    animation: none;
}

/* .modal-overlay > .modal : le panneau est le .modal (design-system.css:7085). */
html[data-refonte] .modal-overlay > .modal {
    position: static; inset: auto; z-index: auto;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    width: 100%; max-width: 600px; max-height: calc(100vh - 64px); padding: 0; overflow: hidden;
}
html[data-refonte] .modal-overlay > .modal.modal-sm { max-width: 420px; }
html[data-refonte] .modal-overlay > .modal.modal-md { max-width: 640px; }
html[data-refonte] .modal-overlay > .modal.modal-lg { max-width: 800px; }
html[data-refonte] .modal-overlay > .modal.modal-xl { max-width: 1000px; }
html[data-refonte] .modal-overlay > .modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* .modal > .modal-content : fenêtre autonome, le panneau défile en entier (:7066).
   (.modal-content--md n'a jamais agi : .modal .modal-content l'emportait.) */
html[data-refonte] .modal > .modal-content {
    display: flex; flex-direction: column; width: 100%; max-width: 600px; max-height: calc(100vh - 64px);
    padding: 0; overflow-y: auto;
}
/* Formulaire posé sans .modal-body (colonnes du pipeline) : il reçoit la marge du corps. */
html[data-refonte] .modal > .modal-content > form:not(:has(> .modal-body)) { padding: 18px; }

/* .modal-overlay > .modal-container : le panneau défile en entier (:13781). */
html[data-refonte] .modal-container { width: 100%; max-width: 600px; max-height: calc(100vh - 64px); overflow-y: auto; }

/* .ds-modal-overlay > .ds-modal (:2750) */
html[data-refonte] .ds-modal-overlay > .ds-modal {
    display: flex; flex-direction: column; width: 100%; max-width: 500px; max-height: calc(100vh - 64px); overflow: hidden;
}
html[data-refonte] .ds-modal-overlay > .ds-modal--sm { max-width: 400px; }
html[data-refonte] .ds-modal-overlay > .ds-modal--lg { max-width: 700px; }
html[data-refonte] .ds-modal-overlay > .ds-modal--xl { max-width: 900px; }

/* div.ds-modal > .ds-modal__content (:15224) */
html[data-refonte] .ds-modal__content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; width: 100%; max-width: 550px; max-height: calc(100vh - 64px); overflow: hidden;
}
html[data-refonte] .ds-modal__content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* Alias BEM : panneau centré par transform (ds-modal-bem-alias.css:26) ; dans une
   .og-modal-shell, il est posé dans le flux de la coquille (dark-theme.css:353). */
html[data-refonte] .ds-modal__panel {
    position: fixed; top: 50%; left: 50%; z-index: 1001; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; width: calc(100% - 32px); max-width: 500px; max-height: 90vh; overflow: hidden;
}
html[data-refonte] .og-modal-shell .ds-modal__panel { position: relative; top: auto; left: auto; transform: none; }

/* Partage du parrainage (:13763) */
html[data-refonte] .share-modal-content { width: 100%; max-width: 600px; max-height: calc(100vh - 64px); overflow-y: auto; padding: 24px; }

html[data-refonte] :is(.modal-form, .ds-modal-form) { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 640px) {
    html[data-refonte] :is(.modal-overlay > .modal, .modal > .modal-content, .modal-container,
                          .ds-modal-overlay > .ds-modal, .ds-modal__content, .share-modal-content) {
        width: 100%; max-height: 92vh; margin: 0; border-radius: 16px 16px 0 0;
    }
}

/* ═══ §5 Fenêtres : en-tête, corps, pied (ui-modal__head / __body / __foot) ═ */
html[data-refonte] :is(.modal-header, .ds-modal-header, .ds-modal__header) {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto;
    margin: 0; padding: 14px 18px 12px; box-sizing: border-box;
    border: 0; border-bottom: 1px solid var(--ui-border); border-radius: 0; background: transparent; color: var(--ui-text-1);
}
html[data-refonte] .share-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }

html[data-refonte] :is(.modal-title, .ds-modal-title, .ds-modal__title, .share-modal-title),
html[data-refonte] :is(.modal-header, .ds-modal-header, .ds-modal__header) > :is(h1, h2, h3, h4) {
    display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0;
    font-family: var(--ui-font-display); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: normal; color: var(--ui-text-1);
}
html[data-refonte] .modal-title > i { color: var(--ui-text-3); font-size: 14px; }
html[data-refonte] .ds-modal-text--muted { margin: 0 0 24px; color: var(--ui-text-2); }

/* Fermeture : bouton-icône de .ui-drawer__close. .modal-close reste à spécificité
   historique : le parrainage ajuste le sien (.pyramid-modal__header .modal-close). */
:where(html[data-refonte]) .modal-close,
html[data-refonte] :is(.modal-close-btn, .ds-modal-close, .ds-modal__close) {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 28px; height: 28px; margin: 0; padding: 0; box-sizing: border-box;
    border: 0; border-radius: 8px; background: transparent; color: var(--ui-text-3);
    font-family: var(--ui-font-sans); font-size: 18px; font-weight: 400; line-height: 1; cursor: pointer; box-shadow: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
:where(html[data-refonte]) .modal-close:hover,
html[data-refonte] :is(.modal-close-btn, .ds-modal-close, .ds-modal__close):hover { background: var(--ui-surface-2); color: var(--ui-text-1); }
:where(html[data-refonte]) .modal-close:focus-visible,
html[data-refonte] :is(.modal-close-btn, .ds-modal-close, .ds-modal__close):focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
html[data-refonte] :is(.modal-close, .modal-close-btn, .ds-modal-close, .ds-modal__close) > i { font-size: 14px; }

html[data-refonte] :is(.modal-body, .ds-modal-body, .ds-modal__body) {
    display: block; flex: 1 1 auto; min-height: 0; margin: 0; padding: 18px; box-sizing: border-box;
    overflow-y: auto; background: transparent; color: var(--ui-text-1); border-radius: 0;
}

html[data-refonte] :is(.modal-footer, .ds-modal-footer, .ds-modal__footer) {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; flex: 0 0 auto;
    margin: 0; padding: 14px 18px; box-sizing: border-box;
    border: 0; border-top: 1px solid var(--ui-border); border-radius: 0; background: transparent;
}
html[data-refonte] .modal-actions {
    display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ui-border);
}
@media (max-width: 640px) {
    html[data-refonte] .modal-footer { flex-direction: column-reverse; align-items: stretch; }
    html[data-refonte] .modal-footer :is(button, .ds-btn) { width: 100%; }
}

/* Aides des fenêtres partagées (partiels facturation / inventaire, hors mesure). */
html[data-refonte] .modal-section-title {
    margin: 0; font-size: 11.5px; line-height: 14px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--ui-text-3);
}
html[data-refonte] .modal-divider { height: 1px; margin: 4px 0; border: 0; background: var(--ui-border); }
html[data-refonte] .form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html[data-refonte] .form-row.single { grid-template-columns: minmax(0, 1fr); }
html[data-refonte] .radio-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
html[data-refonte] :is(.radio-option, .checkbox-option) {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px; box-sizing: border-box;
    border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
html[data-refonte] :is(.radio-option, .checkbox-option):hover { border-color: var(--ui-accent-border); }
html[data-refonte] :is(.radio-option, .checkbox-option):has(input:checked) { border-color: var(--ui-accent-border); background: var(--ui-accent-subtle); }
html[data-refonte] :is(.radio-option, .checkbox-option) > input { flex-shrink: 0; width: 16px; height: 16px; margin: 1px 0 0; cursor: pointer; }
html[data-refonte] :is(.radio-option-label, .checkbox-option-label) { flex: 1; min-width: 0; }
html[data-refonte] :is(.radio-option-title, .checkbox-option-title) { margin-bottom: 2px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ui-text-1); }
html[data-refonte] :is(.radio-option-description, .checkbox-option-description) { font-size: 11.5px; line-height: 14px; color: var(--ui-text-3); }
html[data-refonte] .info-label { flex-shrink: 0; font-size: 12.5px; font-weight: 500; color: var(--ui-text-3); }
html[data-refonte] .info-value { flex-grow: 1; font-size: 13px; font-weight: 500; color: var(--ui-text-1); text-align: right; }
@media (max-width: 640px) {
    html[data-refonte] :is(.form-row, .radio-group) { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ §6 Onglets ═══════════════════════════════════════════════════════════
   MÉCANIQUE (design-system.css:3673-3688, :15414-15429) : un panneau est caché,
   il se montre avec .is-active — ou .active pour __panel et __item, jamais pour
   .ds-tab-panel. Les scripts (tabs.js, actions.js switch-tab, scripts d'écran)
   basculent ces classes ; actions.js pose aussi style.display en ligne. */
html[data-refonte] :is(.ds-tabs__panel, .ds-tab-panel, .ds-tabs__item) { display: none; }
html[data-refonte] :is(.ds-tabs__panel, .ds-tabs__item):is(.is-active, .active),
html[data-refonte] .ds-tab-panel.is-active { display: block; }

/* Géométrie, à spécificité historique : .rf-page-rapports et .rf-page-projet
   l'annulent dans leur <style> et doivent continuer de primer. Rythme resserré
   (la pilule n'a plus la ligne de fond qui justifiait 24 + 16 px) : la barre
   garde 24 px sous elle, sauf quand elle ferme son .ds-tabs, qui les porte déjà. */
:where(html[data-refonte]) .ds-tabs { width: 100%; margin-bottom: 24px; }
:where(html[data-refonte]) .ds-tabs__panel { padding-top: 0; }
:where(html[data-refonte]) .tab-content-wrapper { position: relative; }

/* Barre : forme de .ui-tabs (pilule sur surface-2). */
:where(html[data-refonte]) .ds-tabs__nav:where(:not([class*="ui-"])) {
    display: inline-flex; align-items: center; gap: 4px; margin-bottom: 24px; padding: 4px; box-sizing: border-box;
    max-width: 100%; overflow-x: auto; scrollbar-width: none;
    border: 0; border-radius: 999px; background: var(--ui-surface-2);
}
:where(html[data-refonte]) .ds-tabs__nav:where(:not([class*="ui-"]))::-webkit-scrollbar { display: none; }
:where(html[data-refonte]) .ds-tabs__nav:where(:not([class*="ui-"])):last-child { margin-bottom: 0; }

/* Onglet : forme de .ui-tabs__tab (valeurs identiques : un bouton qui porte les
   deux classes ne voit pas de différence). */
html[data-refonte] :is(.ds-tabs__btn, .ds-tab):where(:not([class*="ui-"])) {
    position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    height: 32px; margin: 0; padding: 0 14px; box-sizing: border-box;
    border: 0; border-radius: 999px; background: transparent; color: var(--ui-text-3);
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: normal;
    white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: none;
    transition: color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
html[data-refonte] :is(.ds-tabs__btn, .ds-tab):where(:not([class*="ui-"])):hover { color: var(--ui-text-1); background: transparent; }
html[data-refonte] :is(.ds-tabs__btn, .ds-tab):where(:not([class*="ui-"])):is(.is-active, .active, [aria-current="page"], [aria-selected="true"]) {
    background: var(--ui-surface); color: var(--ui-text-1); font-weight: 600; box-shadow: var(--ui-shadow-sm);
}
/* Hybride ds-tabs__btn + ui-tabs__tab dont le script pose .active (prospection/show) :
   .ui-tabs__tab ne connaît que .is-active / aria-selected — l'état doit rester visible. */
html[data-refonte] .ui-tabs__tab.ds-tabs__btn.active {
    background: var(--ui-surface); color: var(--ui-text-1); font-weight: 600; box-shadow: var(--ui-shadow-sm);
}
html[data-refonte] :is(.ds-tabs__btn, .ds-tab):where(:not([class*="ui-"])):focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
html[data-refonte] :is(.ds-tabs__btn, .ds-tab):where(:not([class*="ui-"])):disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══ §7 Formulaires ═══════════════════════════════════════════════════════
   Grilles (MÉCANIQUE de colonnes de design-system.css:6384-6420, :6966) :
   une colonne, deux avec --2-cols, retour à une sous 768 px ; span-full. */
html[data-refonte] .ds-form-grid:where(:not([class*="ui-"])) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
html[data-refonte] .ds-form-grid--2-cols:where(:not([class*="ui-"])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Trois colonnes et portée de deux : les lignes d'article du devis construites par
   quote-creation.js (ds-form-grid--3-cols, ds-form-col-span-2) tombaient sinon sur
   une seule colonne une fois les anciennes feuilles retirées. */
html[data-refonte] .ds-form-grid--3-cols:where(:not([class*="ui-"])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-refonte] .ds-form-col-span-2 { grid-column: span 2; }
html[data-refonte] .ds-form-col-span-full { grid-column: 1 / -1; }
@media (max-width: 768px) {
    html[data-refonte] :is(.ds-form-grid--2-cols, .ds-form-grid--3-cols):where(:not([class*="ui-"])) { grid-template-columns: minmax(0, 1fr); }
    html[data-refonte] .ds-form-col-span-2 { grid-column: auto; }
}

/* Champ : colonne libellé / contrôle / aide (.ui-field). Marge basse historique,
   annulée dans une grille, un groupe ou un formulaire de fenêtre (:6499-6505). */
html[data-refonte] .ds-form-field:where(:not([class*="ui-"])) { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 16px; }
html[data-refonte] .ds-form-field:last-child,
html[data-refonte] :is(.ds-form-field-group, .modal-form, .ds-form, .ds-form-grid) .ds-form-field { margin-bottom: 0; }
html[data-refonte] .ds-form-field-group { display: flex; align-items: flex-start; gap: 12px; }
html[data-refonte] .ds-form-field-group > .ds-form-field { flex: 1; }
@media (max-width: 768px) {
    html[data-refonte] .ds-form-field-group { flex-direction: column; align-items: stretch; }
}
html[data-refonte] .ds-form-section { margin: 0 0 24px; padding: 0; border: 0; background: transparent; }
html[data-refonte] .ds-form-section:last-child { margin-bottom: 0; }
html[data-refonte] .form-section-title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font-family: var(--ui-font-display); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ui-text-1);
}
html[data-refonte] .form-section-title > i { color: var(--ui-text-3); font-size: 13px; }

/* Libellé (.ui-field__label). L'astérisque historique reste : ces formulaires
   ne marquent pas leurs champs optionnels, l'information se perdrait. */
html[data-refonte] .ds-form-label {
    display: flex; align-items: center; gap: 4px; margin: 0;
    font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--ui-text-2);
}
html[data-refonte] .ds-form-label--required::after { content: "*"; margin-left: 2px; color: var(--ui-danger-fg); }
html[data-refonte] :is(.ds-form-help, .ds-form-helper, .ds-form-hint, .ds-hint, .form-hint) {
    margin: 0; font-size: 11.5px; line-height: 14px; color: var(--ui-text-3);
}

/* Contrôles (.ui-input / .ui-select / .ui-textarea) : bloc pleine largeur, 36 px. */
html[data-refonte] :is(.ds-input, .ds-select, .ds-textarea):where(:not([class*="ui-"])) {
    display: block; width: 100%; height: 36px; min-height: 0; margin: 0; padding: 0 12px; box-sizing: border-box;
    border: 1px solid var(--ui-border); border-radius: 12px; background-color: var(--ui-surface); color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px; font-weight: 400; text-align: left;
    box-shadow: none; outline: 0; transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
html[data-refonte] select:is(.ds-input, .ds-select):where(:not([class*="ui-"])) {
    -webkit-appearance: none; appearance: none; align-items: center; padding-right: 34px; cursor: pointer;
    background-image: var(--ui-glyph-chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px;
}
html[data-refonte] select:is(.ds-input, .ds-select):where(:not([class*="ui-"])):is([multiple], [size]:not([size="1"])) { height: auto; padding: 6px 8px; background-image: none; }
html[data-refonte] textarea:is(.ds-input, .ds-textarea):where(:not([class*="ui-"])) { height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; }
html[data-refonte] input[type="file"].ds-input:where(:not([class*="ui-"])) { height: auto; padding: 7px 12px; }
html[data-refonte] :is(.ds-input, .ds-select, .ds-textarea):where(:not([class*="ui-"]))::placeholder { color: var(--ui-text-3); opacity: 1; }
html[data-refonte] :is(.ds-input, .ds-select, .ds-textarea):where(:not([class*="ui-"])):focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-subtle); outline: 0; }
html[data-refonte] :is(.ds-input, .ds-textarea):where(:not([class*="ui-"])):read-only:not(select) { background-color: var(--ui-surface-2); }
html[data-refonte] :is(.ds-input, .ds-select, .ds-textarea):where(:not([class*="ui-"])):disabled { opacity: 0.5; cursor: not-allowed; }
html[data-refonte] :is(.ds-input, .ds-select, .ds-textarea):where(:not([class*="ui-"])):is(.ds-input--error, .is-invalid, [aria-invalid="true"]) { border-color: var(--ui-danger-fg); }
html[data-refonte] .ds-input:where(:not([class*="ui-"])):is([inputmode="numeric"], .ds-input--amount) { font-family: var(--ui-font-sans); font-variant-numeric: tabular-nums; text-align: right; }
html[data-refonte] .ds-input--sm:where(:not([class*="ui-"])) { height: 32px; }

/* Case (.ui-check) et libellé de case. */
html[data-refonte] .ds-checkbox {
    -webkit-appearance: none; appearance: none; display: inline-block; flex-shrink: 0; vertical-align: middle;
    width: 16px; height: 16px; margin: 0; padding: 0; box-sizing: border-box; cursor: pointer;
    border: 1px solid var(--ui-track-off); border-radius: 4px; background-color: var(--ui-surface);
    background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
}
html[data-refonte] .ds-checkbox:checked { background-color: var(--ui-accent-strong); border-color: var(--ui-accent-strong); background-image: var(--ui-glyph-check); }
html[data-refonte] .ds-checkbox:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
html[data-refonte] .ds-checkbox-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--ui-text-1); cursor: pointer; }

/* Interrupteur décoratif (<div class="ds-switch [is-active]"><div class="ds-switch__slider">),
   MÉCANIQUE : .is-active allume (design-system.css:13407-13409). Forme de .ui-switch. */
html[data-refonte] .ds-switch {
    position: relative; display: inline-block; flex-shrink: 0; vertical-align: middle;
    width: 36px; min-width: 36px; height: 20px; box-sizing: border-box;
    border-radius: 999px; background: var(--ui-track-off); cursor: pointer; transition: background-color 0.15s ease;
}
html[data-refonte] .ds-switch.is-active { background: var(--ui-accent-strong); }
html[data-refonte] .ds-switch__slider {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); transition: transform 0.15s ease;
}
html[data-refonte] .ds-switch.is-active .ds-switch__slider { transform: translateX(16px); }

html[data-refonte] .ds-toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 0; border-bottom: 1px solid var(--ui-border);
}
html[data-refonte] .ds-toggle-row:last-child { border-bottom: 0; }
html[data-refonte] .ds-toggle-row__info { flex: 1; min-width: 0; }
html[data-refonte] .ds-toggle-row__label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ui-text-1); }
html[data-refonte] .ds-toggle-row__desc { margin-top: 2px; font-size: 12.5px; line-height: 16px; color: var(--ui-text-3); }
@media (max-width: 768px) {
    html[data-refonte] .ds-toggle-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ═══ §8 Boutons (.ui-btn : 40 px, pilule, destructif BORDÉ) ══════════════ */
html[data-refonte] .ds-btn:where(:not([class*="ui-"])) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; min-height: 0; min-width: 0; margin: 0; padding: 0 12px; box-sizing: border-box;
    border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: normal;
    text-transform: none; text-decoration: none; text-align: center; white-space: nowrap; vertical-align: middle;
    cursor: pointer; -webkit-user-select: none; user-select: none; box-shadow: none; transform: none;
    -webkit-appearance: none; appearance: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
html[data-refonte] .ds-btn--primary:where(:not([class*="ui-"])) { background: var(--ui-accent-strong); border-color: var(--ui-accent-strong); color: var(--ui-on-accent); }
html[data-refonte] .ds-btn--secondary:where(:not([class*="ui-"])) { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text-1); }
html[data-refonte] .ds-btn--ghost:where(:not([class*="ui-"])) { background: transparent; border-color: transparent; color: var(--ui-text-2); }
html[data-refonte] .ds-btn--danger:where(:not([class*="ui-"])) { background: var(--ui-surface); border-color: var(--ui-danger-border); color: var(--ui-danger-fg); }
html[data-refonte] .ds-btn--sm:where(:not([class*="ui-"])) { height: 32px; padding: 0 10px; font-size: 12px; }
/* Pas de bouton « avertissement » plein dans la refonte : bordé, ton warning. */
html[data-refonte] .ds-btn--warning:where(:not([class*="ui-"])) { background: var(--ui-warning-bg); border-color: var(--ui-warning-border); color: var(--ui-warning-fg); }
html[data-refonte] .ds-btn--icon-only:where(:not([class*="ui-"])) { width: 40px; padding: 0; }
html[data-refonte] .ds-btn--icon-only.ds-btn--sm:where(:not([class*="ui-"])) { width: 32px; }

html[data-refonte] .ds-btn:where(:not([class*="ui-"])):hover:not(:disabled, [aria-disabled="true"]) { background: var(--ui-surface-2); border-color: var(--ui-border); color: var(--ui-text-1); transform: none; box-shadow: none; }
html[data-refonte] .ds-btn--primary:where(:not([class*="ui-"])):hover:not(:disabled, [aria-disabled="true"]) { background: var(--ui-accent-strong-hover); border-color: var(--ui-accent-strong-hover); color: var(--ui-on-accent); }
html[data-refonte] .ds-btn--ghost:where(:not([class*="ui-"])):hover:not(:disabled, [aria-disabled="true"]) { background: var(--ui-surface-2); border-color: transparent; color: var(--ui-text-1); }
html[data-refonte] .ds-btn--danger:where(:not([class*="ui-"])):hover:not(:disabled, [aria-disabled="true"]) { background: var(--ui-danger-bg); border-color: var(--ui-danger-border); color: var(--ui-danger-fg); }
html[data-refonte] .ds-btn--warning:where(:not([class*="ui-"])):hover:not(:disabled, [aria-disabled="true"]) { background: var(--ui-warning-bg); border-color: var(--ui-warning-fg); color: var(--ui-warning-fg); }
html[data-refonte] .ds-btn:where(:not([class*="ui-"])):active { transform: none; }
html[data-refonte] .ds-btn:where(:not([class*="ui-"])):focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
html[data-refonte] .ds-btn:where(:not([class*="ui-"])):is(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Bouton d'action flottant (video-recorder.js) */
html[data-refonte] .ds-fab {
    position: fixed; right: 32px; bottom: 32px; z-index: 40;
    display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0;
    border: 0; border-radius: 50%; background: var(--ui-accent-strong); color: var(--ui-on-accent);
    font-size: 20px; cursor: pointer; box-shadow: var(--ui-glow); transition: background-color 0.12s ease;
}
html[data-refonte] .ds-fab:hover { background: var(--ui-accent-strong-hover); }

/* ═══ §9 Utilitaires (valeurs historiques ; !important là où il y en avait) ═ */
html[data-refonte] .ds-block { display: block !important; }
html[data-refonte] .ds-flex { display: flex !important; }
html[data-refonte] .ds-inline { display: inline !important; }
html[data-refonte] .ds-grid { display: grid !important; }
html[data-refonte] .ds-flex-col { flex-direction: column !important; }
html[data-refonte] .ds-flex-wrap { display: flex; flex-wrap: wrap !important; gap: 8px; }
html[data-refonte] .ds-flex-1 { flex: 1 1 0% !important; min-width: 0; }
html[data-refonte] .ds-items-center { align-items: center !important; }
html[data-refonte] .ds-items-end { align-items: flex-end !important; }
html[data-refonte] .ds-justify-between { justify-content: space-between !important; }
html[data-refonte] .ds-justify-end { justify-content: flex-end !important; }
html[data-refonte] .ds-justify-center { justify-content: center !important; }
html[data-refonte] .items-center { align-items: center; }
html[data-refonte] .justify-center { justify-content: center; }

html[data-refonte] .ds-grid--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html[data-refonte] .ds-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html[data-refonte] .ds-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
html[data-refonte] .ds-col-span-full { grid-column: 1 / -1 !important; }
@media (max-width: 1024px) {
    html[data-refonte] .ds-grid-cols-12 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
    html[data-refonte] .ds-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    html[data-refonte] :is(.ds-grid-cols-2, .ds-grid-cols-12) { grid-template-columns: minmax(0, 1fr) !important; }
}

html[data-refonte] .ds-gap-0 { gap: 0 !important; }
html[data-refonte] .ds-gap-1 { gap: 4px !important; }
html[data-refonte] .ds-gap-2 { gap: 8px !important; }
html[data-refonte] .ds-gap-3 { gap: 12px !important; }
html[data-refonte] .ds-gap-4 { gap: 16px !important; }
html[data-refonte] .ds-m-0 { margin: 0 !important; }
html[data-refonte] .ds-mt-1 { margin-top: 4px !important; }
html[data-refonte] .ds-mt-2 { margin-top: 8px !important; }
html[data-refonte] .ds-mt-3 { margin-top: 12px !important; }
html[data-refonte] .ds-mt-4 { margin-top: 16px !important; }
html[data-refonte] .ds-mt-6 { margin-top: 24px !important; }
html[data-refonte] .ds-mb-1 { margin-bottom: 4px !important; }
html[data-refonte] .ds-mb-2 { margin-bottom: 8px !important; }
html[data-refonte] .ds-mb-3 { margin-bottom: 12px !important; }
html[data-refonte] .ds-mb-4 { margin-bottom: 16px !important; }
html[data-refonte] .ds-mb-6 { margin-bottom: 24px !important; }
html[data-refonte] .ds-p-0 { padding: 0 !important; }
html[data-refonte] .ds-p-2 { padding: 8px !important; }
html[data-refonte] .ds-p-3 { padding: 12px !important; }
html[data-refonte] .ds-p-4 { padding: 16px !important; }
html[data-refonte] .ds-pt-1 { padding-top: 4px !important; }
html[data-refonte] .ds-pt-4 { padding-top: 16px !important; }

html[data-refonte] .ds-w-full { width: 100% !important; }
html[data-refonte] .ds-w-px-60 { width: 60px !important; }
html[data-refonte] .ds-w-px-150 { width: 150px !important; }
html[data-refonte] .ds-max-w-md { max-width: 600px !important; }
html[data-refonte] .ds-max-w-xl { max-width: 800px !important; }
html[data-refonte] .ds-relative { position: relative !important; }
html[data-refonte] .ds-rounded-none { border-radius: 0 !important; }

/* Tailles : l'échelle de la refonte (12,5 / 11,5) pour sm / xs, l'historique au-delà. */
html[data-refonte] .ds-text-xs { font-size: 11.5px !important; }
html[data-refonte] .ds-text-sm { font-size: 12.5px !important; }
html[data-refonte] .ds-text-base { font-size: 16px !important; }
html[data-refonte] .ds-text-lg { font-size: 18px !important; }
html[data-refonte] .ds-text-xl { font-size: 20px !important; }
html[data-refonte] .ds-text-2xl { font-size: 24px !important; }
html[data-refonte] .ds-text-micro { font-size: 10.5px !important; }
html[data-refonte] .ds-text-tiny { font-size: 8px !important; }
html[data-refonte] .ds-font-semibold { font-weight: 600 !important; }
html[data-refonte] .ds-font-bold { font-weight: 700 !important; }
html[data-refonte] .ds-italic { font-style: italic !important; }
html[data-refonte] .ds-font-label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--ui-text-2); }
html[data-refonte] .ds-text-center { text-align: center !important; }
html[data-refonte] .ds-text-right { text-align: right !important; }

html[data-refonte] .ds-text-primary { color: var(--ui-text-1) !important; }
html[data-refonte] .ds-text-secondary { color: var(--ui-text-2) !important; }
html[data-refonte] .ds-text-tertiary { color: var(--ui-text-3) !important; }
html[data-refonte] .ds-text-muted { color: var(--ui-text-3) !important; }
html[data-refonte] .ds-text-success { color: var(--ui-success-fg) !important; }
html[data-refonte] .ds-text-warning { color: var(--ui-warning-fg) !important; }
html[data-refonte] .ds-text-danger { color: var(--ui-danger-fg) !important; }
html[data-refonte] .ds-text-info { color: var(--ui-info-fg) !important; }
html[data-refonte] .ds-text-color-danger { color: var(--ui-danger-fg); }
/* Mentions « comme sur le PDF » (8 pt). */
html[data-refonte] .ds-text-pdf { font-size: 8pt; color: var(--ui-text-2); }
html[data-refonte] .ds-text-pdf-light { margin-top: 3px; font-size: 8pt; color: var(--ui-text-3); }
html[data-refonte] .ds-section-heading {
    margin: 0 0 16px; font-family: var(--ui-font-display); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ui-text-1);
}

/* ═══ §10 Composants ═══════════════════════════════════════════════════════ */

/* Carte à sections (.ds-card + __header / __body / __footer) : surface bordée. */
html[data-refonte] .ds-card {
    overflow: hidden; box-sizing: border-box; min-width: 0;
    background: var(--ui-surface); color: var(--ui-text-1);
    border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: none; transition: none;
}
html[data-refonte] .ds-card + .ds-card { margin-top: 24px; }
html[data-refonte] .ds-card__header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 16px 20px; border-bottom: 1px solid var(--ui-border);
}
html[data-refonte] .ds-card__title:where(:not([class*="ui-"])) {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-family: var(--ui-font-display); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: normal; color: var(--ui-text-1);
}
html[data-refonte] .ds-card__body { padding: 20px; }
html[data-refonte] .ds-card__footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px; border-top: 1px solid var(--ui-border); background: var(--ui-surface-2);
}
html[data-refonte] .ds-card-grid:where(:not([class*="ui-"])) { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
@media (max-width: 640px) { html[data-refonte] .ds-card-grid:where(:not([class*="ui-"])) { grid-template-columns: minmax(0, 1fr); } }

/* Badge (.ui-badge, six tons) */
html[data-refonte] :is(.ds-badge, .ds-badge--neutral) {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; box-sizing: border-box;
    border: 1px solid var(--ui-neutral-border); border-radius: 6px; background: var(--ui-neutral-bg); color: var(--ui-neutral-fg);
    font-family: var(--ui-font-sans); font-size: 11.5px; line-height: 14px; font-weight: 500; letter-spacing: normal;
    white-space: nowrap; vertical-align: middle;
}
html[data-refonte] .ds-badge--info    { border-color: var(--ui-info-border);    background: var(--ui-info-bg);    color: var(--ui-info-fg); }
html[data-refonte] .ds-badge--success { border-color: var(--ui-success-border); background: var(--ui-success-bg); color: var(--ui-success-fg); }
html[data-refonte] .ds-badge--warning { border-color: var(--ui-warning-border); background: var(--ui-warning-bg); color: var(--ui-warning-fg); }
html[data-refonte] .ds-badge--danger  { border-color: var(--ui-danger-border);  background: var(--ui-danger-bg);  color: var(--ui-danger-fg); }
html[data-refonte] .ds-badge--sm { padding: 2px 6px; font-size: 10.5px; }

/* Alerte (.ui-alert) */
html[data-refonte] :is(.ds-alert, .ds-alert--info) {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; box-sizing: border-box;
    border: 1px solid var(--ui-info-border); border-radius: 12px; background: var(--ui-info-bg); color: var(--ui-info-fg);
    font-size: 13px; line-height: 19px;
}
html[data-refonte] .ds-alert--success { border-color: var(--ui-success-border); background: var(--ui-success-bg); color: var(--ui-success-fg); }
html[data-refonte] .ds-alert--warning { border-color: var(--ui-warning-border); background: var(--ui-warning-bg); color: var(--ui-warning-fg); }
html[data-refonte] .ds-alert--danger  { border-color: var(--ui-danger-border);  background: var(--ui-danger-bg);  color: var(--ui-danger-fg); }
html[data-refonte] .ds-alert__content { flex: 1; min-width: 0; }
html[data-refonte] .ds-alert__icon { flex-shrink: 0; margin-top: 1px; }
html[data-refonte] .ds-alert__icon-circle {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: var(--ui-surface); font-size: 14px;
}
html[data-refonte] .ds-alert__title { margin-bottom: 2px; font-size: 13px; line-height: 19px; font-weight: 600; color: var(--ui-text-1); }
html[data-refonte] :is(.ds-alert__message, .ds-alert__text) { font-size: 13px; line-height: 19px; color: var(--ui-text-2); }

/* Avatar (.ui-avatar) */
html[data-refonte] .ds-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
    width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
    background: var(--ui-accent-subtle); color: var(--ui-accent-fg);
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 1; font-weight: 600; text-transform: uppercase;
}
html[data-refonte] .ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
html[data-refonte] .ds-avatar--sm { width: 32px; height: 32px; min-width: 32px; font-size: 11px; }
html[data-refonte] .ds-avatar--xs { width: 24px; height: 24px; min-width: 24px; font-size: 9px; }

/* Mesure (.ds-stat → forme de .ui-mini). stat-fit.js réduit la valeur par --ds-stat-value-size. */
html[data-refonte] .ds-stat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1 1 220px; min-width: 0;
    margin: 0; padding: 12px 16px; box-sizing: border-box;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px;
    transform: none; transition: none; box-shadow: none;
}
html[data-refonte] .ds-stat__label { font-size: 12.5px; line-height: 16px; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--ui-text-3); }
html[data-refonte] .ds-stat__value {
    margin: 0; font-family: var(--ui-font-sans); font-size: var(--ds-stat-value-size, 16px); line-height: 22px; font-weight: 600;
    color: var(--ui-text-1); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-refonte] .ds-stat__detail { font-size: 11.5px; line-height: 14px; color: var(--ui-text-3); }

/* Tableaux (.ui-table) */
html[data-refonte] :is(.ds-data-table-container, .ds-table-container, .table-container) { width: 100%; overflow-x: auto; }
html[data-refonte] :is(.ds-table, .ds-data-table, .table-container table) {
    width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; background: transparent;
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px; color: var(--ui-text-1);
}
html[data-refonte] :is(.ds-table, .ds-data-table, .table-container table) thead { background: transparent; border: 0; }
html[data-refonte] :is(.ds-table, .ds-data-table, .table-container table) thead th {
    padding: 10px 12px; border: 0; border-bottom: 1px solid var(--ui-border); background: transparent;
    font-size: 11.5px; line-height: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ui-text-3); text-align: left; white-space: nowrap; vertical-align: middle;
}
html[data-refonte] :is(.ds-table, .ds-data-table, .table-container table) tbody td,
html[data-refonte] .ds-data-table__td {
    padding: 10px 12px; border: 0; border-top: 1px solid var(--ui-border); background: transparent;
    font-size: 13px; font-weight: 400; color: var(--ui-text-1); vertical-align: middle;
}
html[data-refonte] :is(.ds-table, .ds-data-table, .table-container table) tbody tr { border: 0; }
html[data-refonte] :is(.ds-table, .ds-data-table, .table-container table) tbody tr:first-child td { border-top: 0; }
html[data-refonte] :is(.ds-table, .ds-data-table, .table-container table) tbody tr:hover td { background: var(--ui-surface-2); }

/* Menus déroulants historiques. MÉCANIQUE : .ds-filter-dropdown.is-active ouvre son
   menu (:12449) ; .ds-export-dropdown s'ouvre par .is-open (:3210) ou .active (:15484). */
html[data-refonte] :is(.ds-filter-dropdown, .ds-export-wrapper, .export-wrapper):where(:not([class*="ui-"])) { position: relative; display: inline-block; }
html[data-refonte] :is(.ds-filter-dropdown__menu, .ds-export-dropdown, .export-dropdown) {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 1050; display: none;
    min-width: 200px; padding: 4px; box-sizing: border-box;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow);
    opacity: 1; transform: none; transition: none; text-align: left;
}
html[data-refonte] .ds-filter-dropdown.is-active .ds-filter-dropdown__menu,
html[data-refonte] .ds-export-dropdown.is-open { display: block; }
html[data-refonte] :is(.ds-export-dropdown, .export-dropdown).active { display: flex !important; flex-direction: column; gap: 2px; }
html[data-refonte] .ds-filter-dropdown__item {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; margin: 0; box-sizing: border-box;
    border: 0; border-radius: 8px; background: transparent; color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
}
html[data-refonte] .ds-filter-dropdown__item:hover { background: var(--ui-surface-2); color: var(--ui-text-1); }
html[data-refonte] .ds-filter-dropdown__item i { width: 16px; text-align: center; color: var(--ui-text-3); }
html[data-refonte] .ds-filter-dropdown__trigger {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 12px; box-sizing: border-box;
    border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
html[data-refonte] .ds-filter-dropdown__trigger:hover { background: var(--ui-surface-2); }
html[data-refonte] :is(.ds-filter-dropdown__select, .ds-filter-bar__select):where(:not([class*="ui-"])) {
    display: block; height: 36px; min-width: 150px; margin: 0; padding: 0 34px 0 12px; box-sizing: border-box;
    border: 1px solid var(--ui-border); border-radius: 12px; background-color: var(--ui-surface); color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px; cursor: pointer; -webkit-appearance: none; appearance: none;
    background-image: var(--ui-glyph-chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px;
}
html[data-refonte] :is(.ds-filter-dropdown__select, .ds-filter-bar__select):where(:not([class*="ui-"])):focus { outline: 0; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-subtle); }
html[data-refonte] .ds-filter-bar__search:where(:not([class*="ui-"])) { position: relative; flex: 1; min-width: 200px; max-width: 400px; }
html[data-refonte] .ds-filter-bar__search:where(:not([class*="ui-"])) i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ui-text-3); font-size: 13px; pointer-events: none; }
html[data-refonte] .ds-filter-bar__search:where(:not([class*="ui-"])) input {
    width: 100%; height: 36px; margin: 0; padding: 0 12px 0 34px; box-sizing: border-box;
    border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px;
}
html[data-refonte] .ds-filter-bar__search:where(:not([class*="ui-"])) input:focus { outline: 0; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-subtle); }
@media (max-width: 768px) {
    html[data-refonte] .ds-filter-bar__search:where(:not([class*="ui-"])) { min-width: 0; max-width: none; width: 100%; }
    html[data-refonte] .ds-filter-bar__select { width: 100%; min-width: 0; }
}

html[data-refonte] .ds-list { display: flex; flex-direction: column; gap: 8px; }
html[data-refonte] .ds-link {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500;
    color: var(--ui-accent-fg); text-decoration: none; cursor: pointer;
}
html[data-refonte] .ds-link:hover { color: var(--ui-accent-fg); text-decoration: underline; }
html[data-refonte] .ds-link:is([disabled], .disabled) { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Cartes prospect et vidéo (prospection) */
html[data-refonte] .ds-lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
html[data-refonte] :is(.ds-lead-card, .ds-video-card):where(:not([class*="ui-"])) {
    overflow: hidden; box-sizing: border-box; min-width: 0;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px; transition: box-shadow 0.15s ease;
}
html[data-refonte] .ds-lead-card:where(:not([class*="ui-"])) { cursor: pointer; }
html[data-refonte] :is(.ds-lead-card, .ds-video-card):where(:not([class*="ui-"])):hover { box-shadow: var(--ui-shadow); transform: none; }
html[data-refonte] .ds-lead-card__score-fill:where(:not([class*="ui-"])) { height: 100%; width: var(--progress, 0%); border-radius: 3px; background: var(--ui-accent-strong); transition: width 0.5s ease; }
html[data-refonte] .ds-lead-card__action {
    display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text-2);
    font-size: 12px; text-decoration: none; cursor: pointer;
}
html[data-refonte] .ds-lead-card__action:hover { background: var(--ui-surface-2); color: var(--ui-text-1); }
html[data-refonte] .ds-video-card__thumbnail { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ui-surface-2); }
html[data-refonte] .ds-video-card__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
html[data-refonte] .ds-video-card__play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: var(--ui-scrim); opacity: 0; transition: opacity 0.15s ease;
}
html[data-refonte] .ds-video-card:hover .ds-video-card__play { opacity: 1; }
html[data-refonte] .ds-video-card__play-icon {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
    background: var(--ui-surface); color: var(--ui-text-1); font-size: 16px;
}
html[data-refonte] .ds-video-card__duration {
    position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px;
    background: var(--ui-text-1); color: var(--ui-surface); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums;
}
html[data-refonte] .ds-video-card__body { padding: 16px; }
html[data-refonte] .ds-video-card__title { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ui-text-1); }
html[data-refonte] .ds-video-card__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--ui-text-3); }
html[data-refonte] .ds-video-card__meta-item { display: flex; align-items: center; gap: 4px; }
html[data-refonte] .ds-video-card__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ui-border); }

/* Tableau kanban (projets/show.js, pipelines) — MÉCANIQUE de glisser-déposer :
   .is-drag-over agrandit la zone de dépôt, .is-dragging estompe (:13559-13566). */
html[data-refonte] .ds-kanban {
    display: flex; gap: 16px; overflow-x: auto; padding: 8px 4px 24px; min-height: calc(100vh - 200px);
    scrollbar-width: thin; scrollbar-color: var(--ui-border) transparent;
}
html[data-refonte] .ds-kanban__column {
    display: flex; flex-direction: column; flex: 0 0 280px; min-width: 280px; max-width: 300px; max-height: calc(100vh - 200px);
    box-sizing: border-box; border-radius: 16px; background: var(--ui-surface-2);
}
html[data-refonte] .ds-kanban__column:is(.ds-kanban__column--fixed, .ds-kanban__column--movable) { cursor: default; }
html[data-refonte] .ds-kanban__column-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 10px; }
html[data-refonte] .ds-kanban__column-header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
html[data-refonte] .ds-kanban__column-title { overflow: hidden; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ui-text-1); white-space: nowrap; text-overflow: ellipsis; }
html[data-refonte] .ds-kanban__column-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
    border-radius: 999px; background: var(--ui-surface); color: var(--ui-text-3); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
html[data-refonte] .ds-kanban__column-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s ease; }
html[data-refonte] .ds-kanban__column:hover .ds-kanban__column-actions { opacity: 1; }
html[data-refonte] .ds-kanban__column-actions .ds-btn { width: 28px; height: 28px; padding: 0; font-size: 11px; }
html[data-refonte] .ds-kanban__column-body { flex: 1; overflow-y: auto; padding: 0 10px 10px; scrollbar-width: thin; }
html[data-refonte] .ds-kanban__card {
    padding: 12px; box-sizing: border-box; cursor: default;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
html[data-refonte] .ds-kanban__card:hover { box-shadow: var(--ui-shadow-sm); border-color: var(--ui-accent-border); }
html[data-refonte] .ds-kanban__card-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
html[data-refonte] .ds-kanban__grip { padding: 2px; border-radius: 4px; color: var(--ui-text-3); font-size: 11px; cursor: grab; }
html[data-refonte] .ds-kanban__card-title { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ui-text-1); }
html[data-refonte] .ds-kanban__card-body {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 8px; font-size: 12px; line-height: 17px; color: var(--ui-text-2);
}
html[data-refonte] .ds-kanban__card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--ui-border); }
html[data-refonte] .ds-kanban__card-meta { display: flex; align-items: center; gap: 4px; }
html[data-refonte] .ds-kanban__card-date { font-size: 11.5px; color: var(--ui-text-3); }
html[data-refonte] .ds-kanban__drop-zone { min-height: 4px; border-radius: 4px; transition: min-height 0.2s ease, background-color 0.2s ease; }
html[data-refonte] .ds-kanban__drop-zone.is-drag-over { min-height: 40px; margin: 4px 0; border: 2px dashed var(--ui-accent); background: var(--ui-accent-subtle); }
html[data-refonte] .ds-kanban__card.is-dragging { opacity: 0.4; transform: rotate(1deg); box-shadow: var(--ui-shadow); }
html[data-refonte] .ds-kanban__column.is-dragging { opacity: 0.5; }
html[data-refonte] .ds-kanban__empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 32px 16px; font-size: 12px; color: var(--ui-text-3); text-align: center;
}
html[data-refonte] .ds-kanban__empty p { margin: 0; }
html[data-refonte] .column-drop-zone { flex-shrink: 0; width: 4px; min-width: 4px; border-radius: 2px; transition: width 0.2s ease; }
html[data-refonte] .column-drop-zone.is-drag-over { width: 40px; min-width: 40px; border: 2px dashed var(--ui-accent); border-radius: 12px; background: var(--ui-accent-subtle); }
@media (max-width: 768px) {
    html[data-refonte] .ds-kanban__column { flex-basis: 260px; min-width: 260px; }
    html[data-refonte] .ds-kanban__column-actions { opacity: 1; }
}

/* Graphique en barres CSS (budget/suivi) : les hauteurs viennent de --bar-height
   posée en ligne. Séries : budget = violet, conforme = succès, dépassement = anomalie. */
html[data-refonte] .ds-bar-chart { display: flex; gap: 0; height: 240px; font-family: var(--ui-font-sans); }
html[data-refonte] .ds-bar-chart__y-axis {
    display: flex; flex-direction: column; justify-content: space-between; min-width: 48px;
    padding: 0 12px 28px 0; box-sizing: border-box; text-align: right;
}
html[data-refonte] .ds-bar-chart__y-tick { font-size: 11px; color: var(--ui-text-3); font-variant-numeric: tabular-nums; }
html[data-refonte] .ds-bar-chart__area { position: relative; flex: 1; display: flex; border-left: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
html[data-refonte] .ds-bar-chart__gridlines {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
    padding-bottom: 28px; pointer-events: none;
}
html[data-refonte] .ds-bar-chart__gridline { width: 100%; border-bottom: 1px dashed var(--ui-border); }
html[data-refonte] .ds-bar-chart__gridline:last-child { border-bottom: 0; }
html[data-refonte] .ds-bar-chart__group { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 8px; }
html[data-refonte] .ds-bar-chart__group--forecast { opacity: 0.45; }
html[data-refonte] .ds-bar-chart__values { display: flex; gap: 2px; margin-bottom: 4px; font-size: 10.5px; font-weight: 600; color: var(--ui-text-3); font-variant-numeric: tabular-nums; }
html[data-refonte] .ds-bar-chart__val--budget { color: var(--ui-accent-fg); }
html[data-refonte] .ds-bar-chart__val--ok { color: var(--ui-success-fg); }
html[data-refonte] .ds-bar-chart__val--over { color: var(--ui-danger-fg); }
html[data-refonte] .ds-bar-chart__bars { display: flex; align-items: flex-end; gap: 4px; width: 100%; max-width: 64px; height: calc(100% - 50px); }
html[data-refonte] .ds-bar-chart__bar { flex: 1; height: var(--bar-height, 0%); min-height: 4px; border-radius: 4px 4px 0 0; transition: height 0.3s ease; }
html[data-refonte] .ds-bar-chart__bar--primary { background: var(--ui-accent); }
html[data-refonte] .ds-bar-chart__bar--success { background: var(--ui-success-fg); }
html[data-refonte] .ds-bar-chart__bar--danger  { background: var(--ui-danger-fg); }
html[data-refonte] .ds-bar-chart__bar--warning { background: var(--ui-warning-fg); }
html[data-refonte] .ds-bar-chart__bar--forecast {
    box-sizing: border-box; border: 1px dashed var(--ui-text-3);
    background: repeating-linear-gradient(45deg, transparent 0 3px, var(--ui-success-bg) 3px 6px);
}
html[data-refonte] .ds-bar-chart__label { padding-top: 8px; font-size: 12px; font-weight: 500; color: var(--ui-text-3); }
html[data-refonte] .ds-bar-chart__label sup { font-size: 9.5px; opacity: 0.7; }
html[data-refonte] .ds-bar-chart__legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 16px; padding-top: 12px;
    border-top: 1px solid var(--ui-border);
}
html[data-refonte] .ds-bar-chart__legend-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ui-text-1); }
html[data-refonte] .ds-bar-chart__legend-item--muted { color: var(--ui-text-3); }
html[data-refonte] .ds-bar-chart__legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
html[data-refonte] .ds-bar-chart__legend-dot--primary { background: var(--ui-accent); }
html[data-refonte] .ds-bar-chart__legend-dot--success { background: var(--ui-success-fg); }
html[data-refonte] .ds-bar-chart__legend-dot--danger  { background: var(--ui-danger-fg); }
html[data-refonte] .ds-bar-chart__legend-dot--forecast { box-sizing: border-box; border: 1px dashed var(--ui-text-3); }
@media (max-width: 640px) {
    html[data-refonte] .ds-bar-chart { height: 180px; }
    html[data-refonte] .ds-bar-chart__values { display: none; }
    html[data-refonte] .ds-bar-chart__group { padding: 0 4px; }
    html[data-refonte] .ds-bar-chart__bars { max-width: 40px; }
}

/* ═══ §11 Fenêtre de confirmation og-dialog.js (forme de .ui-confirm) ══════
   og-dialog.js injecte ses propres styles (vert et or historiques, en dur) APRÈS
   les feuilles : ses règles (0,1,0) cèdent à html[data-refonte]. Les !important
   répondent à ceux de v2-components.css:501-509. Destructif BORDÉ : pas de jeton
   « texte sur rouge plein » qui tienne 4,5:1 dans les deux thèmes. */
html[data-refonte] .og-dlg-backdrop { background: var(--ui-scrim) !important; }
html[data-refonte] .og-dlg {
    background: var(--ui-surface); color: var(--ui-text-1); border: 1px solid var(--ui-border);
    border-radius: 16px !important; box-shadow: var(--ui-shadow-overlay); font-family: var(--ui-font-sans);
}
html[data-refonte] .og-dlg::before { content: none; }
html[data-refonte] .og-dlg-head { gap: 14px; padding: 20px 20px 12px; }
html[data-refonte] .og-dlg-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; box-shadow: none; }
html[data-refonte] .og-dlg-icon--info    { background: var(--ui-accent-subtle) !important; color: var(--ui-accent-fg) !important; }
html[data-refonte] .og-dlg-icon--warning { background: var(--ui-warning-bg); color: var(--ui-warning-fg); }
html[data-refonte] .og-dlg-icon--danger  { background: var(--ui-danger-bg);  color: var(--ui-danger-fg); }
html[data-refonte] .og-dlg-icon--success { background: var(--ui-success-bg); color: var(--ui-success-fg); }
html[data-refonte] .og-dlg-title { margin: 0 0 4px; font-family: var(--ui-font-display); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: normal; color: var(--ui-text-1); }
html[data-refonte] :is(.og-dlg-msg, .og-dlg-msg--intro) { font-size: 13px; line-height: 19px; color: var(--ui-text-2); }
html[data-refonte] .og-dlg-msg--intro { color: var(--ui-text-1); }
html[data-refonte] .og-dlg-input {
    height: 36px; margin-top: 14px; padding: 0 12px; box-sizing: border-box;
    border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px;
}
html[data-refonte] .og-dlg-input:focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px var(--ui-accent-subtle) !important; outline: 0; }
html[data-refonte] .og-dlg-actions { gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ui-border); }
html[data-refonte] .og-dlg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 12px; box-sizing: border-box;
    border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px; font-weight: 500; box-shadow: none; transform: none;
}
html[data-refonte] :is(.og-dlg-btn--cancel, .og-dlg-btn--gold) { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text-1); }
html[data-refonte] :is(.og-dlg-btn--cancel, .og-dlg-btn--gold):hover { background: var(--ui-surface-2); color: var(--ui-text-1); }
html[data-refonte] :is(.og-dlg-btn--primary, .og-dlg-btn--transfer) {
    background: var(--ui-accent-strong) !important; border-color: var(--ui-accent-strong) !important; color: var(--ui-on-accent); box-shadow: none !important;
}
html[data-refonte] :is(.og-dlg-btn--primary, .og-dlg-btn--transfer):hover:not(:disabled) { background: var(--ui-accent-strong-hover) !important; border-color: var(--ui-accent-strong-hover) !important; }
html[data-refonte] :is(.og-dlg-btn--danger, .og-dlg-btn--force) { background: var(--ui-surface); border-color: var(--ui-danger-border); color: var(--ui-danger-fg); box-shadow: none; }
html[data-refonte] :is(.og-dlg-btn--danger, .og-dlg-btn--force):hover { background: var(--ui-danger-bg); color: var(--ui-danger-fg); }
html[data-refonte] .og-dlg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
html[data-refonte] .og-dlg-impact-item { border: 1px solid var(--ui-neutral-border); border-radius: 10px; background: var(--ui-neutral-bg); }
html[data-refonte] .og-dlg-impact-item--danger  { border-color: var(--ui-danger-border);  background: var(--ui-danger-bg); }
html[data-refonte] .og-dlg-impact-item--warning { border-color: var(--ui-warning-border); background: var(--ui-warning-bg); }
html[data-refonte] .og-dlg-impact-icon { color: var(--ui-text-3); }
html[data-refonte] .og-dlg-impact-item--danger .og-dlg-impact-icon  { color: var(--ui-danger-fg); }
html[data-refonte] .og-dlg-impact-item--warning .og-dlg-impact-icon { color: var(--ui-warning-fg); }
html[data-refonte] :is(.og-dlg-impact-label, .og-dlg-transfer-prompt) { color: var(--ui-text-1); }
html[data-refonte] .og-dlg-impact-count { border: 1px solid var(--ui-neutral-border); background: var(--ui-neutral-bg); color: var(--ui-neutral-fg); }
html[data-refonte] .og-dlg-impact-count--danger  { border-color: var(--ui-danger-border);  background: var(--ui-danger-bg);  color: var(--ui-danger-fg); }
html[data-refonte] .og-dlg-impact-count--warning { border-color: var(--ui-warning-border); background: var(--ui-warning-bg); color: var(--ui-warning-fg); }
html[data-refonte] .og-dlg-impact-empty { background: var(--ui-surface-2); color: var(--ui-text-3); }

/* ═══ §12 Surclassement des anciennes feuilles — À SUPPRIMER AVEC ELLES ═════
   Aucune de ces règles ne sert sans design-system.css, dark-theme.css,
   ds-modal-bem-alias.css et v2-*.css : ce sont les réponses à leurs règles plus
   spécifiques (0,3,0 / 0,4,0) ou !important. */

/* dark-theme.css:140-166 repeint champs, cartes et mesures en sombre avec ses
   jetons (et un background !important sur TOUS les champs, ui-input compris). */
html[data-refonte][data-theme="dark"] {
    --ds-card-bg: var(--ui-surface);
    --ds-card-border: var(--ui-border);
    --ds-stat-bg: var(--ui-surface);
    --ds-stat-border: var(--ui-border);
    --ds-input-bg: var(--ui-surface);
    --ds-input-border: var(--ui-border);
    --ds-input-focus-border: var(--ui-accent);
    --ds-input-placeholder: var(--ui-text-3);
    --ds-table-header-bg: transparent;
    --ds-table-row-hover: var(--ui-surface-2);
}
/* …dont le raccourci `background: … !important` efface aussi le chevron des listes,
   et dont `.ds-input:read-only` (0,3,0) grise le texte : une liste est « read-only ». */
html[data-refonte][data-theme="dark"] select:is(.ds-input, .ds-select) {
    background: var(--ui-surface) var(--ui-glyph-chevron) no-repeat right 12px center / 14px 14px !important;
    color: var(--ui-text-1);
}

/* `all: unset` (design-system.css:1410, :12371) efface le centrage vertical que le
   navigateur donne au texte d'une liste : il manque aussi aux listes hybrides (ui-select). */
html[data-refonte] select[class*="ui-"]:is(.ds-input, .ds-filter-dropdown__select) { align-items: center; }

/* design-system.css:7066 `.modal > div:not(.modal-content)` fait de chaque enfant
   direct d'un .modal un panneau ; :7114-7191 le défait à (0,3,0) / (0,4,0). */
html[data-refonte] .modal > :is(.modal-header, .modal-body, .modal-footer) {
    width: auto; max-width: none; max-height: none; border-radius: 0; box-shadow: none; animation: none;
}
html[data-refonte] .modal-overlay > .modal > .modal-header { padding: 14px 18px 12px; border-bottom: 1px solid var(--ui-border); }
html[data-refonte] .modal-overlay > .modal > .modal-body { padding: 18px; }
html[data-refonte] .modal-overlay > .modal > .modal-footer { padding: 14px 18px; }
html[data-refonte] .modal-overlay > .modal > .modal-header > .modal-title { line-height: 20px; }
html[data-refonte] .modal-overlay > .modal > .modal-header > .modal-close { width: 28px; height: 28px; }
html[data-refonte] .ds-modal-overlay .ds-modal { animation: none; }

/* design-system.css:14792 : sous 768 px, .ds-modal prend une largeur !important —
   y compris la « boîte à voile » div.ds-modal[id], qui se décalerait. */
@media (max-width: 768px) {
    html[data-refonte] div.ds-modal:is([id], :has(.ds-modal__backdrop)) { width: auto !important; max-width: none !important; }
}

/* v2-components.css:155 pose une pastille ::before sur tous les badges. */
html[data-refonte] .ds-badge::before { content: none; }

/* v2-components.css:292-295 recolorent l'icône d'alerte (0,3,1). */
html[data-refonte] .ds-alert :is(.ds-alert__icon, .ds-alert__icon-circle) { color: inherit; }