/* ════════════════════════════════════════════════════════════════
   ACURGYM — Shell XAF : SIDEBAR (navigation gauche)
   Cible les classes dxbl-accordion + xaf-nav de la navigation XAF.
   Palette : bleu #0071BC / or #F2C32F. Police : Geist.
   ════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  TOKENS                                                       ║
   ╚══════════════════════════════════════════════════════════════╝ */

.xaf-sidebar {
    /* Rappel (valeurs réelles dans design-tokens.css) :
       --brand: #0071BC;
    --brand-2: #00558D;
    --brand-soft: #E3F1FB;
    --accent: #4DA8DE;
    --surface-1: #FFFFFF;
    --surface-2: #F9FAFC;
    --surface-3: #F1F3F7;
    --ink-0: #0F1115;
    --ink-1: #1F2330;
    --ink-2: #4B5160;
    --ink-3: #858B99;
    --ink-4: #B5BBC7;
    --line: #ECEDF1;
    --line-2: #E3E5EA;*/
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  CONTENEUR                                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

.xaf-sidebar {
    background: var(--surface-1) !important;
    border-right: 1px solid var(--line) !important;
    font-family: "Geist", "Public Sans", system-ui, -apple-system, sans-serif !important;
    /*display: flex !important;*/
    flex-direction: column !important;
    border-top: 0 !important;
}

    .xaf-sidebar::before,
    .xaf-sidebar::after {
        display: none !important;
    }

    .xaf-sidebar * {
        font-family: "Geist", "Public Sans", system-ui, -apple-system, sans-serif !important;
    }


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  FILTRE (champ "Filter...")                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .xaf-sidebar .dxbl-navigation-filter {
        border: 1px solid var(--line) !important;
        border-radius: 8px !important;
        background: var(--surface-2) !important;
        margin: 8px !important;
    }

        .xaf-sidebar .dxbl-navigation-filter:focus-within {
            border-color: var(--brand) !important;
            box-shadow: 0 0 0 3px var(--brand-soft) !important;
            background: var(--surface-1) !important;
        }

        .xaf-sidebar .dxbl-navigation-filter .dxbl-text-edit-input {
            font-size: 12.5px !important;
            color: var(--ink-1) !important;
        }


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  TITRE "ESPACE DE TRAVAIL"                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .xaf-sidebar .dxbl-accordion-filter::after {
        content: "ESPACE DE TRAVAIL";
        display: block;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.09em;
        color: var(--ink-4);
        padding: 14px 14px 4px;
        text-transform: uppercase;
    }


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  GROUPES DE 1er NIVEAU (Stock, Vente, Achat...)               ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .xaf-sidebar .dxbl-accordion-group-header {
        border-radius: 8px !important;
        margin: 1px 6px !important;
        min-height: 32px !important;
        transition: background 120ms !important;
    }

        .xaf-sidebar .dxbl-accordion-group-header:hover {
            background: var(--surface-2) !important;
        }

    .xaf-sidebar .dxbl-accordion-group.expanded > .dxbl-accordion-group-header {
        background: var(--surface-2) !important;
    }


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  TEXTE & ICÔNES DES ITEMS                                     ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .xaf-sidebar .xaf-nav-link span {
        font-size: 12.5px !important;
        font-weight: 500 !important;
        color: var(--ink-1) !important;
        letter-spacing: -.005em !important;
    }

    /* Icônes (SVG inline recolorés par module, posés par sidebar-icons.js) */
    .xaf-sidebar .educated-nav-ico {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }

        .xaf-sidebar .educated-nav-ico svg {
            width: 13px;
            height: 13px;
        }

        /* ── Teintes AcurGym ─────────────────────────────────────────
           Toutes branchées sur les tokens --tint-*, --brand-* et
           --gold-* : en clair ce sont des pastels pleins, en sombre
           des fonds TRANSLUCIDES avec une encre éclaircie. Aucune
           valeur en dur ici, sinon les chips restent clairs sur le
           thème sombre — c'était le cas avant cette correction. */

        .xaf-sidebar .educated-nav-ico.tint-brand {
            background: var(--brand-soft);
            color: var(--brand);
        }

        .xaf-sidebar .educated-nav-ico.tint-gold {
            background: var(--gold-soft);
            color: var(--gold-ink);
        }

        .xaf-sidebar .educated-nav-ico.tint-sky {
            background: var(--tint-blue-bg);
            color: var(--tint-blue-fg);
        }

        .xaf-sidebar .educated-nav-ico.tint-emerald {
            background: var(--tint-emerald-bg);
            color: var(--tint-emerald-fg);
        }

        .xaf-sidebar .educated-nav-ico.tint-rose {
            background: var(--tint-rose-bg);
            color: var(--tint-rose-fg);
        }

        .xaf-sidebar .educated-nav-ico.tint-amber {
            background: var(--tint-amber-bg);
            color: var(--tint-amber-fg);
        }

        .xaf-sidebar .educated-nav-ico.tint-teal {
            background: var(--tint-teal-bg);
            color: var(--tint-teal-fg);
        }

        /* ── Alias hérités d'Educated — repointés sur le bleu de marque,
           pour qu'aucun écran partagé ne ressorte violet/indigo. */
        .xaf-sidebar .educated-nav-ico.tint-violet,
        .xaf-sidebar .educated-nav-ico.tint-blue,
        .xaf-sidebar .educated-nav-ico.tint-indigo,
        .dxbl-accordion-item-content .educated-nav-ico.tint-indigo {
            background: var(--brand-soft) !important;
            color: var(--brand) !important;
        }

.xaf-sidebar .educated-nav-ico.tint-slate {
    background: var(--tint-slate-bg);
    color: var(--tint-slate-fg);
}


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  MODE COMPACT (natif XAF/DX : classe .dxbl-sm)                 ║
   ║  Confirmé sur DOM réel — DX ajoute "dxbl-sm" en cascade sur     ║
   ║  .xaf-navmenu/.dxbl-accordion + tous les boutons/inputs         ║
   ║  internes. Le texte des libellés reste visible (ce n'est PAS   ║
   ║  un rail icônes seules) — seuls les contrôles rétrécissent,     ║
   ║  donc on aligne juste nos badges sur le même ratio.             ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .xaf-sidebar .xaf-navmenu.dxbl-sm .educated-nav-ico {
        width: 18px !important;
        height: 18px !important;
        border-radius: 5px !important;
    }

        .xaf-sidebar .xaf-navmenu.dxbl-sm .educated-nav-ico svg {
            width: 11px !important;
            height: 11px !important;
        }

    .xaf-sidebar .xaf-navmenu.dxbl-sm .dxbl-accordion-item-content {
        min-height: 22px !important;
        margin: 0 3px !important;
        gap: 6px !important;
    }

    .xaf-sidebar .xaf-navmenu.dxbl-sm .dxbl-accordion-group-header {
        min-height: 28px !important;
    }

    .xaf-sidebar .xaf-navmenu.dxbl-sm .xaf-nav-link span {
        font-size: 12.5px !important;
    }


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  ITEMS ENFANTS (Monitoring, Dashboards, Etats...)            ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .xaf-sidebar .dxbl-accordion-item .dxbl-accordion-item-content {
        border-radius: 6px !important;
        margin: 0 4px !important;
        min-height: 26px !important;
        gap: 8px !important;
        transition: background 120ms !important;
    }

    .xaf-sidebar .clickable-xaf-nav-item .dxbl-accordion-item-content:hover {
        background: var(--surface-2) !important;
    }


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  ITEM ACTIF / SÉLECTIONNÉ                                     ║
   ║  DOM : .dxbl-accordion-item.dxbl-active                       ║
   ║      + a.dxbl-accordion-item-content.dxbl-active              ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .xaf-sidebar .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content,
    .xaf-sidebar .dxbl-accordion-item-content.dxbl-active,
    .xaf-sidebar .dxbl-accordion-item-content[aria-selected="true"] {
        background: var(--brand-soft) !important;
        position: relative;
    }

        /* Texte de l'item actif en couleur brand */
        .xaf-sidebar .dxbl-accordion-item.dxbl-active .xaf-nav-link span,
        .xaf-sidebar .dxbl-accordion-item-content.dxbl-active .xaf-nav-link span,
        .xaf-sidebar .dxbl-accordion-item-content[aria-selected="true"] .xaf-nav-link span {
            color: var(--brand) !important;
            font-weight: 600 !important;
        }

        /* Barre latérale bleu marque à gauche de l'item actif */
        .xaf-sidebar .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content::before,
        .xaf-sidebar .dxbl-accordion-item-content.dxbl-active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 18px;
            background: linear-gradient(180deg, var(--gold, #F2C32F) 0%, var(--brand, #0071BC) 100%);
            border-radius: 0 3px 3px 0;
        }


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  CHEVRONS                                                     ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .xaf-sidebar .dxbl-group-expand-btn svg,
    .xaf-sidebar .dxbl-group-expand-btn .dxbl-image {
        color: var(--ink-3) !important;
        width: 14px !important;
        height: 14px !important;
    }

    .xaf-sidebar .xaf-navmenu.dxbl-sm .dxbl-group-expand-btn svg,
    .xaf-sidebar .xaf-navmenu.dxbl-sm .dxbl-group-expand-btn .dxbl-image {
        width: 12px !important;
        height: 12px !important;
    }


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  SCROLLBAR                                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .xaf-sidebar .dxbl-scroll-viewer-scroll-thumb {
        background: var(--line-2) !important;
        border-radius: 3px !important;
    }


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  FOOTER (AcurBusiness / Version)                              ║
   ║  Restructuré par sidebar-footer.js en .ab-name               ║
   ║  + .ab-version                                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .xaf-sidebar .about-info {
        margin-top: auto;
        padding: 14px 16px !important;
        border-top: 1px solid var(--line);
        background: var(--surface-1);
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        .xaf-sidebar .about-info .ab-name {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 600;
            color: var(--ink-1);
            letter-spacing: -.005em;
        }

            .xaf-sidebar .about-info .ab-name::before {
                content: "";
                width: 7px;
                height: 7px;
                border-radius: 2px;
                background: var(--gradient-brand);
                flex: none;
            }

        .xaf-sidebar .about-info .ab-version {
            font-size: 10.5px;
            color: var(--ink-3);
            font-weight: 400;
            padding-left: 15px;
            font-variant-numeric: tabular-nums;
        }
    /* ─── SIDEBAR : surface pleine, pas de bordure haute ───
       #FFFFFF était codé en dur : la sidebar restait blanche en
       thème sombre. var(--surface-1) vaut #FFFFFF en clair, donc
       le rendu clair est strictement identique. */
    .xaf-sidebar,
    .xaf-sidebar.sidebar,
    .xaf-flex-auto.overflow-hidden > .xaf-sidebar {
        border-top: 0 !important;
        background: var(--surface-1) !important;
    }

/* Fond du conteneur principal — était #FFFFFF en dur, d'où la zone
   blanche à droite du contenu en thème sombre. */
.dxbl-theme-fluent .main-ribbon-template.app {
    background-color: var(--surface-1) !important;
    color: var(--ink-1);
}
/* ════════════════════════════════════════════════════════════════
   ACURGYM — MENU COMPTE UTILISATEUR
   Section intégrée à shell.css
   À charger APRÈS le bundle DevExpress et après design-tokens.css

   DOM réel :
     .account-main.dropdown-menu
       .account-main-inner
         .user-info-container
           .logo-container.rounded-circle.text-white
             .xaf-image.xaf-image-cmt   ← avatar en mask-image,
                                          couleur = currentColor du parent
           .user-info-inner-container
             .user-name-container > .user-name
             button.xaf-btn.my-details > .dxbl-btn-caption
         .account-separator
         button.xaf-btn.log-off > .dxbl-btn-caption

   Cosmétique pure — aucune modification de structure.
   ════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  1. LA CARTE                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */

.account-main.dropdown-menu {
    font-family: var(--font-body, "Geist", "Public Sans", system-ui, sans-serif) !important;
    background: var(--surface-1, #fff) !important;
    border: 1px solid var(--line, #E5E7EB) !important;
    border-radius: var(--radius-lg, 12px) !important;
    box-shadow: 0 2px 6px rgba(15,23,42,.05), 0 18px 44px -12px rgba(15,23,42,.22) !important;
    padding: 0 !important;
    min-width: 268px !important;
    overflow: hidden !important;
    animation: edu-acc-in 150ms var(--ease-std, cubic-bezier(.4,0,.2,1)) both;
}

    .account-main.dropdown-menu * {
        font-family: var(--font-body, "Geist", "Public Sans", system-ui, sans-serif) !important;
    }

@keyframes edu-acc-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.account-main .account-main-inner {
    padding: 0 !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  2. BLOC IDENTITÉ — avatar + nom + lien                       ║
   ╚══════════════════════════════════════════════════════════════╝ */

.account-main .user-info-container {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    padding: 16px 16px 14px !important;
    /* Wash bleu en diagonale, cohérent avec la welcome card et le
       popover du scheduler */
    background: linear-gradient(160deg, var(--brand-soft, #E3F1FB) 0%, var(--surface-1, #fff) 72%) !important;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.account-main .logo-container.rounded-circle {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    /* L'avatar est un mask-image coloré par currentColor : on pose le
       dégradé de marque en fond et on force le pictogramme en blanc. */
    background: var(--gradient-brand, linear-gradient(135deg, #159FE0 0%, #004E82 100%)) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, var(--sh-brand, 0 4px 14px rgba(0,113,188,.35)) !important;
    overflow: hidden !important;
}

.account-main .logo-container .xaf-image.xaf-image-cmt {
    height: 26px !important;
    width: 26px !important;
    mask-size: 26px !important;
    -webkit-mask-size: 26px !important;
    background-color: #fff !important;
    flex: none !important;
}

/* ── Textes ──────────────────────────────────────────────────── */
.account-main .user-info-inner-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.account-main .user-name-container {
    min-width: 0 !important;
    width: 100% !important;
}

.account-main .user-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink-0, #0F172A) !important;
    letter-spacing: -0.015em !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── "Mes informations" ──────────────────────────────────────────
   Le libellé était tronqué en « Mes infor… » : le bouton héritait
   d'une largeur contrainte. On le libère et on retire le soulignement
   de lien, qui faisait doublon avec le rôle de bouton. */
.account-main .dxbl-btn.xaf-btn.my-details {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    color: var(--brand, #0071BC) !important;
    transition: color var(--ease-fast, 80ms ease);
}

    .account-main .dxbl-btn.xaf-btn.my-details:hover {
        background: transparent !important;
        color: var(--brand-2, #00558D) !important;
    }

        .account-main .dxbl-btn.xaf-btn.my-details:hover .dxbl-btn-caption {
            text-decoration: underline !important;
            text-underline-offset: 2px;
        }

    .account-main .dxbl-btn.xaf-btn.my-details .dxbl-btn-caption {
        font-size: 12.5px !important;
        font-weight: 500 !important;
        color: inherit !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        letter-spacing: -0.005em;
    }

    .account-main .dxbl-btn.xaf-btn.my-details:focus-visible {
        outline: 2px solid var(--brand, #0071BC) !important;
        outline-offset: 2px;
        border-radius: 4px !important;
    }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  3. SÉPARATEUR                                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

.account-main .account-separator {
    height: 1px !important;
    background: var(--line, #E5E7EB) !important;
    border: 0 !important;
    margin: 0 !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  4. "SE DÉCONNECTER"                                          ║
   ║  Ligne pleine largeur cliquable, pas un bouton flottant        ║
   ╚══════════════════════════════════════════════════════════════╝ */

.account-main .dxbl-btn.xaf-btn.log-off {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    color: var(--danger, #E11D48) !important;
    transition: background var(--ease-fast, 80ms ease);
}

    .account-main .dxbl-btn.xaf-btn.log-off:hover {
        background: var(--danger-soft, #FCDCE5) !important;
        color: var(--danger, #E11D48) !important;
    }

    .account-main .dxbl-btn.xaf-btn.log-off:active {
        background: var(--danger-soft, #FCDCE5) !important;
        filter: brightness(.98);
    }

    .account-main .dxbl-btn.xaf-btn.log-off .dxbl-btn-caption {
        font-size: 12.5px !important;
        font-weight: 500 !important;
        color: inherit !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        letter-spacing: -0.005em;
    }

    .account-main .dxbl-btn.xaf-btn.log-off:focus-visible {
        outline: none !important;
        box-shadow: inset 0 0 0 2px var(--danger-soft, #FCDCE5) !important;
    }


/* ════════════════════════════════════════════════════════════════
   FIN section MENU COMPTE
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   RÉPARATIONS THÈME SOMBRE
   Ne s'appliquent QUE sous <html data-theme="dark"> : le rendu clair
   n'est jamais touché. Elles couvrent les endroits où XAF ou
   DevExpress imposent leur propre couleur par-dessus nos tokens.
   ════════════════════════════════════════════════════════════════ */

/* ── Libellés de la navigation ─────────────────────────────────
   Les items non actifs restaient sombres sur sombre. On force la
   couleur sur TOUTE la chaîne (span, conteneur de texte, .dxbl-text
   de DevExpress) et on neutralise une éventuelle opacité héritée. */
:root[data-theme="dark"] .xaf-sidebar .xaf-nav-link span,
:root[data-theme="dark"] .xaf-sidebar .xaf-nav-link,
:root[data-theme="dark"] .xaf-sidebar .dxbl-accordion-item-text-container,
:root[data-theme="dark"] .xaf-sidebar .dxbl-accordion-item-content .dxbl-text {
    color: var(--ink-1) !important;
    opacity: 1 !important;
}

/* L'item actif garde sa couleur de marque — il passe après. */
:root[data-theme="dark"] .xaf-sidebar .dxbl-accordion-item.dxbl-active .xaf-nav-link span,
:root[data-theme="dark"] .xaf-sidebar .dxbl-accordion-item-content.dxbl-active .xaf-nav-link span,
:root[data-theme="dark"] .xaf-sidebar .dxbl-accordion-item-content[aria-selected="true"] .xaf-nav-link span {
    color: var(--brand) !important;
}

/* ── Pied de sidebar (AcurAccess / version) ────────────────────
   Le bloc ressortait en gris clair : DevExpress peint le fond du
   scroll-viewer par-dessous. On repose la surface et les encres. */
:root[data-theme="dark"] .xaf-sidebar .about-info {
    background: var(--surface-2) !important;
    border-top-color: var(--line) !important;
}

:root[data-theme="dark"] .xaf-sidebar .about-info .ab-name {
    color: var(--ink-1) !important;
}

:root[data-theme="dark"] .xaf-sidebar .about-info .ab-version {
    color: var(--ink-3) !important;
}

/* ── Surfaces que DevExpress peint en dur ──────────────────────── */
:root[data-theme="dark"] .xaf-sidebar .dxbl-scroll-viewer,
:root[data-theme="dark"] .xaf-sidebar .dxbl-scroll-viewer-content,
:root[data-theme="dark"] .xaf-sidebar .dxbl-accordion,
:root[data-theme="dark"] .xaf-sidebar .dxbl-accordion-container {
    background: transparent !important;
}

/* ── Champ "Filtrer…" ──────────────────────────────────────────── */
:root[data-theme="dark"] .xaf-sidebar .dxbl-navigation-filter {
    background: var(--surface-2) !important;
    border-color: var(--line-2) !important;
}

:root[data-theme="dark"] .xaf-sidebar .dxbl-navigation-filter .dxbl-text-edit-input {
    color: var(--ink-1) !important;
}

:root[data-theme="dark"] .xaf-sidebar .dxbl-navigation-filter .dxbl-text-edit-input::placeholder {
    color: var(--ink-3) !important;
}


/* ════════════════════════════════════════════════════════════════
   BOUTON DE BASCULE DE THÈME (posé par theme-switch.js)
   ════════════════════════════════════════════════════════════════ */

.acur-theme-btn {
    appearance: none;
    width: 34px;
    height: 34px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    border-radius: 50%;
    border: 1px solid var(--line-2, #DDE2EA);
    background: var(--surface-2, #FAFBFD);
    color: var(--ink-2, #475569);
    cursor: pointer;
    transition: background 140ms, color 140ms, border-color 140ms, transform 80ms;
}

    .acur-theme-btn:hover {
        background: var(--brand-soft);
        border-color: var(--brand-soft-2);
        color: var(--brand);
    }

    .acur-theme-btn:active {
        transform: scale(.94);
    }

    .acur-theme-btn:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
    }

/* En sombre, le bouton prend l'or : c'est l'accent de marque du thème. */
:root[data-theme="dark"] .acur-theme-btn {
    background: var(--gold-soft);
    border-color: rgba(242,195,47,.28);
    color: var(--gold-lt);
}

    :root[data-theme="dark"] .acur-theme-btn:hover {
        background: rgba(242,195,47,.22);
        border-color: rgba(242,195,47,.45);
        color: #FFF0B8;
    }


/* ════════════════════════════════════════════════════════════════
   RÉPARATIONS SOMBRES — COUCHES BOOTSTRAP & FRAMEWORK XAF
   ════════════════════════════════════════════════════════════════
   Ces surfaces ne viennent d'AUCUN de nos fichiers : elles sont
   peintes par bootstrap (.card) et par la feuille du paquet
   _content/DevExpress.ExpressApp.Blazor/styles.css, qu'on ne peut
   pas éditer. On les recouvre ici, uniquement en thème sombre.
   ════════════════════════════════════════════════════════════════ */

/* ── Cartes Bootstrap — c'est ce qui rendait le panneau "Photos"
   blanc dans les vues détail. XAF rend ses groupes en .card. ──── */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-body,
:root[data-theme="dark"] .card-footer {
    background-color: var(--surface-2) !important;
    border-color: var(--line) !important;
    color: var(--ink-1) !important;
}

/* Le login a sa propre carte : on ne la touche pas. */
:root[data-theme="dark"] #logon-template-component .card,
:root[data-theme="dark"] #logon-template-component .card-header,
:root[data-theme="dark"] #logon-template-component .card-body {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* ── Boutons de barre d'outils (Nouveau / Supprimer / Imprimer…) ──
   Les variantes "secondary" et "outline" de DevExpress tombent sur
   un fond blanc quand la feuille XAF du paquet les repeint. ───── */
:root[data-theme="dark"] .dxbl-btn-secondary,
:root[data-theme="dark"] .dxbl-btn-outline-secondary,
:root[data-theme="dark"] .dxbl-btn-light,
:root[data-theme="dark"] .xaf-btn:not(.dxbl-btn-primary),
:root[data-theme="dark"] .dxbl-toolbar .dxbl-btn:not(.dxbl-btn-primary) {
    background-color: var(--surface-3) !important;
    border-color: var(--line-2) !important;
    color: var(--ink-1) !important;
}

    :root[data-theme="dark"] .dxbl-btn-secondary:hover,
    :root[data-theme="dark"] .dxbl-btn-outline-secondary:hover,
    :root[data-theme="dark"] .dxbl-toolbar .dxbl-btn:not(.dxbl-btn-primary):hover {
        background-color: var(--brand-soft) !important;
        border-color: var(--brand-soft-2) !important;
        color: var(--ink-0) !important;
    }

/* ── Champs de saisie hors form-layout (recherche de grille…) ──── */
:root[data-theme="dark"] .dxbl-text-edit:not(.dxbl-navigation-filter),
:root[data-theme="dark"] .dxbl-spin-edit,
:root[data-theme="dark"] .dxbl-date-edit,
:root[data-theme="dark"] .dxbl-combo-box,
:root[data-theme="dark"] .dxbl-memo {
    background-color: var(--surface-2) !important;
    border-color: var(--line-2) !important;
}

:root[data-theme="dark"] .dxbl-text-edit-input,
:root[data-theme="dark"] .dxbl-text-edit-input::placeholder {
    color: var(--ink-1) !important;
}

:root[data-theme="dark"] .dxbl-text-edit-input::placeholder {
    color: var(--ink-3) !important;
}

/* ── Grilles imbriquées : en-tête et barre d'outils ─────────────── */
:root[data-theme="dark"] .dxbl-grid-header-content,
:root[data-theme="dark"] .dxbl-grid-header,
:root[data-theme="dark"] .dxbl-grid-toolbar,
:root[data-theme="dark"] .dxbl-grid-footer,
:root[data-theme="dark"] .dxbl-grid-pager {
    background-color: var(--surface-2) !important;
    border-color: var(--line) !important;
    color: var(--ink-2) !important;
}

/* ── Popups, menus et infobulles ───────────────────────────────── */
:root[data-theme="dark"] .dxbl-popup,
:root[data-theme="dark"] .dxbl-popup-content,
:root[data-theme="dark"] .dxbl-dropdown,
:root[data-theme="dark"] .dxbl-itemlist-dropdown,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .dxbl-listbox {
    background-color: var(--surface-1) !important;
    border-color: var(--line-2) !important;
    color: var(--ink-1) !important;
}

/* ── Zones neutres du shell XAF ────────────────────────────────── */
:root[data-theme="dark"] .xaf-view-container,
:root[data-theme="dark"] .dxbl-tabs-content-panel,
:root[data-theme="dark"] .dxbl-tabs-content {
    background-color: transparent !important;
}


/* ════════════════════════════════════════════════════════════════
   GRILLES DEVEXPRESS — VARIABLES INTERNES

   core.min.css peint les cellules de la grille avec ses PROPRES
   variables (--dxbl-grid-bg, --dxbl-grid-color…), pas avec nos
   tokens. En mode sombre elles restent claires : c'est ce qui
   produisait la bande blanche à gauche des lignes groupées, via
   td.dxbl-grid-indent-cell.

   On les redéfinit sur .dxbl-grid : notre sélecteur est plus
   spécifique que celui du paquet, donc il gagne sans !important.
   ════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .dxbl-grid {
    --dxbl-grid-bg: var(--surface-1);
    --dxbl-grid-color: var(--ink-1);
    --dxbl-grid-header-bg: var(--surface-2);
    --dxbl-grid-header-color: var(--ink-2);
    --dxbl-grid-footer-bg: var(--surface-2);
    --dxbl-grid-group-row-bg: var(--surface-2);
    --dxbl-grid-alt-row-bg: var(--surface-2);
    --dxbl-grid-hover-bg: var(--surface-3);
    --dxbl-grid-selected-bg: var(--brand-soft);
    --dxbl-grid-selected-color: var(--ink-0);
    --dxbl-grid-border-color: var(--line);
    --dxbl-grid-separator-color: var(--line);
}

/* Filet de sécurité : les cellules techniques nommées explicitement
   dans core.min.css (indentation, détail, édition, zones vides). */
:root[data-theme="dark"] .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-indent-cell,
:root[data-theme="dark"] .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-detail-cell,
:root[data-theme="dark"] .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-edit-form,
:root[data-theme="dark"] .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-empty-cell,
:root[data-theme="dark"] .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-empty-data-area {
    background-color: var(--surface-1) !important;
    color: var(--ink-1) !important;
}


/* ════════════════════════════════════════════════════════════════
   POPUPS & FENÊTRES MODALES

   Même mécanique que les grilles : la coquille du popup n'est pas
   peinte par nos tokens mais par les variables internes de
   DevExpress (--dxbl-popup-*, --dxbl-window-*) et par les classes
   .modal-* de Bootstrap. D'où un popup clair contenant des champs
   sombres — la coquille et le contenu ne suivaient pas la même
   source de couleur.
   ════════════════════════════════════════════════════════════════ */

/* Noms relevés dans core.min.css v26.1.4 via l'inspecteur :
   .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content
   > .dxbl-modal-body  →  background-color: var(--dxbl-popup-body-bg)
   Ce sont donc les variables --dxbl-popup-BODY-* qu'il faut viser,
   pas --dxbl-window-* ni --dxbl-popup-bg. */
:root[data-theme="dark"] .dxbl-modal,
:root[data-theme="dark"] .dxbl-popup,
:root[data-theme="dark"] .dxbl-modal-root,
:root[data-theme="dark"] .dxbl-modal-content {
    --dxbl-popup-body-bg: var(--surface-1);
    --dxbl-popup-body-color: var(--ink-1);
    --dxbl-popup-header-bg: var(--surface-2);
    --dxbl-popup-header-color: var(--ink-0);
    --dxbl-popup-footer-bg: var(--surface-2);
    --dxbl-popup-footer-color: var(--ink-1);
    --dxbl-popup-bg: var(--surface-1);
    --dxbl-popup-color: var(--ink-1);
    --dxbl-popup-border-color: var(--line-2);
}

/* Coquilles modales nommées */
:root[data-theme="dark"] .dxbl-modal-content,
:root[data-theme="dark"] .dxbl-modal-body,
:root[data-theme="dark"] .dxbl-modal-header,
:root[data-theme="dark"] .dxbl-modal-footer {
    background-color: var(--surface-1) !important;
    color: var(--ink-1) !important;
    border-color: var(--line) !important;
}

:root[data-theme="dark"] .dxbl-modal-header,
:root[data-theme="dark"] .dxbl-modal-footer {
    background-color: var(--surface-2) !important;
}

/* ── Groupes de form-layout (les pavés "Abonnement", "Paiements") ──
   .dxbl-fl .dxbl-fl-group > .dxbl-group  →  --dxbl-group-bg
   .dxbl-group > .dxbl-group-header       →  --dxbl-group-header-bg
   C'est ce couple qui rendait l'intérieur du popup clair. */
:root[data-theme="dark"] .dxbl-fl,
:root[data-theme="dark"] .dxbl-fl-group,
:root[data-theme="dark"] .dxbl-group {
    --dxbl-fl-group-bg: transparent;
    --dxbl-fl-group-border-color: var(--line);
    --dxbl-group-bg: transparent;
    --dxbl-group-color: var(--ink-1);
    --dxbl-group-border-color: var(--line);
    --dxbl-group-header-bg: var(--surface-2);
    --dxbl-group-header-color: var(--ink-0);
}

/* Coquilles nommées — DevExpress, XAF et Bootstrap */
:root[data-theme="dark"] .dxbl-window-content,
:root[data-theme="dark"] .dxbl-window-body,
:root[data-theme="dark"] .dxbl-window-header,
:root[data-theme="dark"] .dxbl-window-footer,
:root[data-theme="dark"] .dxbl-popup-content,
:root[data-theme="dark"] .dxbl-popup-body,
:root[data-theme="dark"] .dxbl-popup-header,
:root[data-theme="dark"] .dxbl-popup-footer,
:root[data-theme="dark"] .xaf-popup,
:root[data-theme="dark"] .xaf-popup-content,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-body,
:root[data-theme="dark"] .modal-footer {
    background-color: var(--surface-1) !important;
    border-color: var(--line) !important;
    color: var(--ink-1) !important;
}

/* En-tête et pied légèrement creusés, pour détacher la zone d'action */
:root[data-theme="dark"] .dxbl-window-header,
:root[data-theme="dark"] .dxbl-popup-header,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .dxbl-window-footer,
:root[data-theme="dark"] .dxbl-popup-footer,
:root[data-theme="dark"] .modal-footer {
    background-color: var(--surface-2) !important;
}

/* Le form-layout à l'intérieur d'un popup n'est pas dans
   .detail-view-content : il ne recevait donc pas notre surface. */
:root[data-theme="dark"] .dxbl-window .dxbl-fl,
:root[data-theme="dark"] .dxbl-popup .dxbl-fl,
:root[data-theme="dark"] .modal-content .dxbl-fl {
    background: transparent !important;
}

/* Titres de groupe à l'intérieur du popup (Abonnement, Paiements…) */
:root[data-theme="dark"] .dxbl-window .dxbl-fl-group-header,
:root[data-theme="dark"] .dxbl-popup .dxbl-fl-group-header,
:root[data-theme="dark"] .dxbl-window .dxbl-fl-cpt,
:root[data-theme="dark"] .dxbl-popup .dxbl-fl-cpt {
    background: transparent !important;
    color: var(--ink-2) !important;
}

/* Voile derrière le popup — plus dense en sombre, sinon la page
   reste trop présente derrière la fenêtre. */
:root[data-theme="dark"] .dxbl-popup-overlay,
:root[data-theme="dark"] .dxbl-window-overlay,
:root[data-theme="dark"] .modal-backdrop {
    background-color: rgba(3, 6, 14, .72) !important;
}


/* ════════════════════════════════════════════════════════════════
   REPORT VIEWER (préfixe dxbrv-)

   Le visualiseur de rapports est un composant à part, avec son
   propre jeu de classes. On assombrit sa COQUILLE — barre d'outils,
   panneau latéral des paramètres, onglets, fonds.

   ⚠️ LA PAGE DU RAPPORT RESTE BLANCHE, volontairement. Un rapport
   est un document destiné à l'impression : son contenu est du noir
   sur blanc, avec des bordures et des filets pensés pour le papier.
   L'assombrir rendrait le texte illisible et donnerait un aperçu
   qui ne correspond pas à ce qui sortira de l'imprimante. Le blanc
   de la page sur le fond sombre du visualiseur est le comportement
   attendu — c'est ce que font Acrobat et les viewers natifs.
   ════════════════════════════════════════════════════════════════ */

/* ── Coquille, panneaux et conteneurs ──────────────────────────── */
:root[data-theme="dark"] .dxbrv-wrapper,
:root[data-theme="dark"] .dxbrv-viewbox,
:root[data-theme="dark"] .dxbrv-surface-container,
:root[data-theme="dark"] .dxbrv-surface-wrapper,
:root[data-theme="dark"] .dxbrv-gridlayout-content,
:root[data-theme="dark"] .dxbrv-gridlayout-item,
:root[data-theme="dark"] .dxbrv-tabs,
:root[data-theme="dark"] .dxbrv-tab-panel,
:root[data-theme="dark"] .dxbrv-gridlayout-side-bar,
:root[data-theme="dark"] .dxbrv-gridlayout-side-bar-content,
:root[data-theme="dark"] .dxbrv-gridlayout-side-bar-content-display {
    background-color: var(--surface-1) !important;
    color: var(--ink-1) !important;
    border-color: var(--line) !important;
}

/* ── Barre d'outils ────────────────────────────────────────────── */
:root[data-theme="dark"] .dxbrv-toolbar,
:root[data-theme="dark"] .dxbrv-toolbar-container,
:root[data-theme="dark"] .dxbrv-gridlayout-side-bar-content-title-row {
    background-color: var(--surface-2) !important;
    border-color: var(--line) !important;
}

/* Icônes de la barre : masques colorés par currentColor */
:root[data-theme="dark"] .dxbrv-toolbar .dxbl-image,
:root[data-theme="dark"] .dxbrv-toolbar .dxbl-btn,
:root[data-theme="dark"] .dxbrv-tab-icon {
    color: var(--ink-2) !important;
}

:root[data-theme="dark"] .dxbrv-toolbar .dxbl-btn:hover {
    background-color: var(--surface-3) !important;
    color: var(--ink-0) !important;
}

:root[data-theme="dark"] .dxbrv-toolbar .dxbl-disabled,
:root[data-theme="dark"] .dxbrv-toolbar .dxbl-disabled .dxbl-image {
    color: var(--ink-4) !important;
    opacity: .6 !important;
}

/* Onglet latéral actif (Parameters) */
:root[data-theme="dark"] .dxbrv-tab-icon.dxbrv-active-tab {
    background-color: var(--brand-soft) !important;
    color: var(--brand) !important;
}

/* ── Titres et libellés du panneau ─────────────────────────────── */
:root[data-theme="dark"] .dxbrv-tab-panel-header {
    color: var(--ink-0) !important;
}

:root[data-theme="dark"] .dxbrv-params-caption,
:root[data-theme="dark"] .dxbrv-document-placeholder {
    color: var(--ink-2) !important;
}

/* ── Poignée de redimensionnement ──────────────────────────────── */
:root[data-theme="dark"] .dxbrv-grid-resize,
:root[data-theme="dark"] .dxbrv-rightpanel-resize-anchor {
    background-color: var(--line) !important;
}

/* ── Barre de progression ──────────────────────────────────────── */
:root[data-theme="dark"] .dxbrv-progress-pane {
    background-color: var(--surface-3) !important;
}

:root[data-theme="dark"] .dxbrv-progress-bar {
    background-color: var(--brand) !important;
}

/* ── Le plan de travail autour des pages : gris foncé, pas noir,
   pour que le blanc de la page ne soit pas agressif. ──────────── */
:root[data-theme="dark"] .dxbrv-document-surface {
    background-color: var(--bg-2) !important;
}

/* ── Bande d'onglets latérale du Report Viewer ──────────────────
   Le bleu saturé ne venait pas de l'onglet actif mais de son
   CONTENEUR (.dxbl-tabs-item), que DevExpress peint avec sa
   couleur d'accent. On neutralise le conteneur et on ne garde la
   teinte que sur l'onglet réellement actif. */
:root[data-theme="dark"] .dxbrv-tabs .dxbl-tabs-item,
:root[data-theme="dark"] .dxbrv-tabs [role="tablist"] {
    background-color: var(--surface-2) !important;
    border-color: var(--line) !important;
}

:root[data-theme="dark"] .dxbrv-tab-icon {
    background-color: transparent !important;
    color: var(--ink-2) !important;
}

    :root[data-theme="dark"] .dxbrv-tab-icon:hover {
        background-color: var(--surface-3) !important;
        color: var(--ink-0) !important;
    }

    :root[data-theme="dark"] .dxbrv-tab-icon.dxbrv-active-tab {
        background-color: var(--brand-soft) !important;
        color: var(--brand) !important;
    }

/* ── Barres d'outils du viewer — portée élargie ─────────────────
   Première tentative : j'exigeais l'ancêtre .dxbrv-toolbar. Or les
   groupes de boutons vivent aussi dans la barre VIRTUELLE que
   DevExpress rend pour mesurer l'adaptatif, et dans le menu
   « Autres éléments… », tous deux hors de .dxbrv-toolbar. D'où des
   pavés restés blancs. On scope désormais sur .dxbrv-wrapper, qui
   englobe tout le visualiseur, plus .dxbrv-toolbar-item en absolu. */

:root[data-theme="dark"] .dxbrv-toolbar-item,
:root[data-theme="dark"] .dxbrv-wrapper dxbl-toolbar,
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-toolbar,
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-btn-toolbar,
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-virtual-toolbar,
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-btn-group,
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-toolbar-group,
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-toolbar-layout-block-group,
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-adaptive-group {
    background-color: var(--surface-2) !important;
    border-color: var(--line-2) !important;
    color: var(--ink-1) !important;
}

/* Les boutons ne portent plus de fond propre */
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-btn,
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-btn-text-secondary,
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-toolbar-btn,
:root[data-theme="dark"] .dxbrv-toolbar-item .dxbl-btn {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--ink-2) !important;
}

    :root[data-theme="dark"] .dxbrv-wrapper .dxbl-btn:hover:not(.dxbl-disabled) {
        background-color: var(--surface-3) !important;
        color: var(--ink-0) !important;
    }

    :root[data-theme="dark"] .dxbrv-wrapper .dxbl-btn.dxbl-disabled,
    :root[data-theme="dark"] .dxbrv-wrapper .dxbl-btn.dxbl-disabled .dxbl-image {
        color: var(--ink-4) !important;
        opacity: .55 !important;
    }

/* Séparateurs entre groupes */
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-toolbar-group-separator {
    background-color: var(--line-2) !important;
}

/* Combos "1 of 1" et "Whole Page" */
:root[data-theme="dark"] .dxbrv-toolbar-combobox .dxbl-text-edit,
:root[data-theme="dark"] .dxbrv-wrapper .dxbl-combo-box {
    background-color: var(--surface-1) !important;
    border-color: var(--line-2) !important;
}

:root[data-theme="dark"] .dxbl-toolbar-group-separator {
    background-color: var(--line) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD DESIGNER / VIEWER — thème sombre
   ───────────────────────────────────────────────────────────────────
   Le gros du travail est fait par la bascule de feuille de style :
   theme-switch.js remplace dx-dashboard.light.min.css par son jumeau
   dark.min.css, livré dans le paquet DevExpress.Blazor.Dashboard.

   Le designer charge cette feuille au moment où on ouvre la vue, pas
   au chargement de la page : c'est pour ça qu'il fallait un
   MutationObserver sur le <head> (cf. syncLinks()).

   Ce qui suit n'est qu'une harmonisation : le sombre DevExpress est
   un gris neutre, le nôtre est marine. On repasse les surfaces sur
   nos tokens pour que le designer ne jure pas avec le reste.
   ══════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .dx-dashboard,
:root[data-theme="dark"] .dx-dashboard-content,
:root[data-theme="dark"] .dx-dashboard-surface,
:root[data-theme="dark"] .dx-dashboard-viewer,
:root[data-theme="dark"] .dx-dashboard-designer {
    background-color: var(--bg) !important;
    color: var(--ink-1);
}

/* Boîte à outils et panneaux latéraux — une surface en léger relief */
:root[data-theme="dark"] .dx-dashboard-toolbox,
:root[data-theme="dark"] .dx-dashboard-toolbox-panel,
:root[data-theme="dark"] .dx-dashboard-right-panel,
:root[data-theme="dark"] .dx-dashboard-panel,
:root[data-theme="dark"] .dx-dashboard-data-source-browser {
    background-color: var(--surface-1) !important;
    border-color: var(--line) !important;
    color: var(--ink-1) !important;
}

:root[data-theme="dark"] .dx-dashboard-toolbox-group-caption,
:root[data-theme="dark"] .dx-dashboard-panel-caption,
:root[data-theme="dark"] .dx-dashboard-section-caption {
    color: var(--ink-3) !important;
    letter-spacing: .04em;
}

/* Barres d'outils (titre, menu, W/H AUTO-FIXED) */
:root[data-theme="dark"] .dx-dashboard-title-toolbar,
:root[data-theme="dark"] .dx-dashboard-menu-toolbar,
:root[data-theme="dark"] .dx-dashboard-toolbar,
:root[data-theme="dark"] .dx-dashboard-item-toolbar {
    background-color: var(--surface-2) !important;
    border-color: var(--line) !important;
    color: var(--ink-1) !important;
}

/* Tuiles d'éléments posées sur la grille du designer */
:root[data-theme="dark"] .dx-dashboard-item,
:root[data-theme="dark"] .dx-dashboard-item-container,
:root[data-theme="dark"] .dx-dashboard-item-content {
    background-color: var(--surface-1) !important;
    border-color: var(--line) !important;
}

:root[data-theme="dark"] .dx-dashboard-item-caption,
:root[data-theme="dark"] .dx-dashboard-item-caption-text {
    color: var(--ink-0) !important;
}

/* Élément sélectionné / survolé — on reprend le bleu de marque plutôt
   que le bleu générique DevExtreme. */
:root[data-theme="dark"] .dx-dashboard-item.dx-dashboard-item-selected,
:root[data-theme="dark"] .dx-dashboard-item-container.dx-state-focused {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 1px var(--brand-soft) !important;
}

/* Icônes de la boîte à outils : elles sont livrées en SVG monochromes
   pensés pour un fond clair. On les éclaircit au lieu de les remplacer. */
:root[data-theme="dark"] .dx-dashboard-toolbox .dx-dashboard-image,
:root[data-theme="dark"] .dx-dashboard-toolbox .dx-icon,
:root[data-theme="dark"] .dx-dashboard-toolbox svg {
    filter: brightness(1.35) saturate(1.1);
}

/* ═══════════════════════════════════════════════════════════════════
   ONGLETS MDI — survol en thème sombre
   ───────────────────────────────────────────────────────────────────
   Le gris au survol vient de DevExpress, pas de nous : aucune règle
   de notre côté ne touchait l'onglet, seulement le panneau qui le
   suit (.dxbl-tabs-content-panel).

   Deux niveaux, volontairement :
   1. les variables --dxbl-tabs-* — c'est le bon levier quand DX les
      expose, ça respecte ses transitions et ses états ;
   2. une règle directe accrochée à [role="tab"], au cas où la version
      26.1 nomme ses variables autrement. Un rôle ARIA est un point
      d'accroche plus stable qu'un nom de classe DevExpress, qui
      change d'une version à l'autre.
   ══════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
    --dxbl-tabs-item-bg: transparent;
    --dxbl-tabs-item-color: var(--ink-2);
    --dxbl-tabs-item-hover-bg: var(--surface-3);
    --dxbl-tabs-item-hover-color: var(--ink-0);
    --dxbl-tabs-item-active-bg: var(--brand-soft);
    --dxbl-tabs-item-active-color: var(--ink-0);
    --dxbl-tabs-item-border-color: var(--line);
    --dxbl-tabs-nav-item-hover-bg: var(--surface-3);
    --dxbl-tabs-nav-item-hover-color: var(--ink-0);
    --dxbl-tabs-bg: transparent;
}

/* ── Le vrai point d'accroche ──────────────────────────────────────
   Le DOM de l'onglet MDI :

     <div class="xaf-tab-header-template xaf dxbl-btn-standalone">
       <span class="dxbl-tabs-text-overflow">…</span>
       <button class="dxbl-btn dxbl-btn-text-secondary dxbl-btn-tool
                      dxbl-tabs-close-button xaf-close-tab-button">

   Deux enseignements. Il n'y a PAS de role="tab" sur cet élément —
   ma première version visait à côté. Et le gris ne vient pas des
   onglets du tout : c'est `dxbl-btn-standalone` qui fait porter à ce
   div le survol des BOUTONS DevExpress. On corrige donc le bouton,
   pas l'onglet. */

:root[data-theme="dark"] .xaf-tab-header-template:hover,
:root[data-theme="dark"] .xaf-tab-header-template.dxbl-btn-standalone:hover,
:root[data-theme="dark"] .xaf-tab-header-template:focus-visible {
    background-color: var(--surface-3) !important;
    color: var(--ink-0) !important;
    border-radius: 8px !important;
}

:root[data-theme="dark"] .xaf-tab-header-template .dxbl-tabs-text-overflow {
    color: inherit !important;
}

/* Onglet courant — bleu de marque plutôt que gris neutre. L'état
   actif est porté par le conteneur, d'où les trois écritures. */
:root[data-theme="dark"] .dxbl-tabs-item.dxbl-active .xaf-tab-header-template,
:root[data-theme="dark"] .dxbl-active > .xaf-tab-header-template,
:root[data-theme="dark"] [aria-selected="true"] .xaf-tab-header-template {
    background-color: var(--brand-soft) !important;
    color: var(--ink-0) !important;
    border-radius: 8px !important;
}

/* ── Croix de fermeture ────────────────────────────────────────────
   L'icône est un <use href="…#dx-close"> : pas de fill en attribut,
   elle suit donc `color` par currentColor. On force quand même fill
   au cas où la feuille DevExpress le pose ailleurs. */
:root[data-theme="dark"] .xaf-close-tab-button {
    color: var(--ink-3) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

:root[data-theme="dark"] .xaf-close-tab-button .dxbl-image {
    fill: currentColor !important;
}

:root[data-theme="dark"] .xaf-tab-header-template:hover .xaf-close-tab-button {
    color: var(--ink-1) !important;
}

:root[data-theme="dark"] .xaf-close-tab-button:hover,
:root[data-theme="dark"] .xaf-close-tab-button.dxbl-btn-text-secondary:hover {
    color: var(--tint-rose-fg) !important;
    background-color: rgba(251,113,133,.14) !important;
}

/* Repli générique : si une autre vue rend ses onglets avec un rôle
   ARIA plutôt qu'avec le gabarit XAF. */
:root[data-theme="dark"] [role="tablist"] > [role="tab"]:not(.dxbrv-tab-icon):hover {
    background-color: var(--surface-3) !important;
    color: var(--ink-0) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ÉDITEUR DE CRITÈRES (Filter Editor) — thème sombre
   ───────────────────────────────────────────────────────────────────
   Le DOM livre le coupable : les surfaces portent des classes
   `dxd-back-primary`, `dxd-back-primary2`, `dxd-text-primary`,
   `dxd-border-secondary`. Ce sont les classes du design system
   Analytics de DevExpress — elles viennent de dx-analytics.light.css,
   la feuille que j'avais VOLONTAIREMENT laissée hors de la bascule
   pour ne pas toucher à la visionneuse de rapports (page d'état
   blanche, fidèle à l'impression).

   Deux options existaient. Basculer dx-analytics vers son jumeau
   sombre — une ligne, mais ça repeint aussi la visionneuse, donc ça
   rouvre un réglage validé. Ou habiller l'éditeur à la main, scopé
   sous .dx-filtereditor. J'ai pris la seconde : l'éditeur de critères
   et la visionneuse partagent les mêmes classes, seul le scope les
   sépare proprement.

   Bonne nouvelle sur l'éditeur de code : il porte déjà
   `ace-ambiance ace_dark`, c'est-à-dire un thème Ace SOMBRE. Seul
   `dxd-back-primary2` lui plaquait un fond blanc par-dessus. Il
   suffit donc de reprendre les fonds — la coloration syntaxique
   redevient juste toute seule.
   ══════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .filter-wrapper,
:root[data-theme="dark"] .filter-wrapper .filter-editor,
:root[data-theme="dark"] .filter-wrapper .dx-designer,
:root[data-theme="dark"] .dx-filtereditor,
:root[data-theme="dark"] .dx-filtereditor-plain {
    background-color: var(--surface-1) !important;
    color: var(--ink-1) !important;
}

/* ── Zone de l'arbre, et son écran de verrouillage ─────────────── */
:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-tree,
:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-tree-container,
:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-tree-lockscreen,
:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-tree-lockscreen-content {
    background-color: var(--surface-2) !important;
    border-color: var(--line) !important;
}

:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-tree-lockscreen-content-text {
    color: var(--ink-3) !important;
}

:root[data-theme="dark"] .dx-filtereditor .dx-scrollview-content,
:root[data-theme="dark"] .dx-filtereditor .dx-scrollable-content {
    color: var(--ink-1) !important;
}

/* ── Barre « Advanced Mode » ───────────────────────────────────── */
:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-plain-advanced {
    background-color: var(--surface-2) !important;
    border-top: 1px solid var(--line) !important;
}

:root[data-theme="dark"] .dx-filtereditor .dx-checkbox-text {
    color: var(--ink-2) !important;
}

:root[data-theme="dark"] .dx-filtereditor .dx-checkbox .dx-checkbox-icon {
    background-color: var(--surface-3) !important;
    border-color: var(--line-2) !important;
}

:root[data-theme="dark"] .dx-filtereditor .dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #FFFFFF !important;
}

/* ── Éditeur de texte / Ace ────────────────────────────────────── */
:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-text-container,
:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-text,
:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-ace,
:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-ace .ace_scroller,
:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-ace .ace_content,
:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-ace .ace_gutter {
    background-color: var(--surface-2) !important;
}

:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-text {
    border-color: var(--line) !important;
}

:root[data-theme="dark"] .dx-filtereditor .dx-filtereditor-text.dx-state-focused {
    border-color: var(--brand) !important;
}

:root[data-theme="dark"] .dx-filtereditor .ace_gutter {
    color: var(--ink-4) !important;
    border-right: 1px solid var(--line) !important;
}

:root[data-theme="dark"] .dx-filtereditor .ace_gutter-active-line {
    background-color: rgba(255,255,255,.05) !important;
    color: var(--ink-2) !important;
}

:root[data-theme="dark"] .dx-filtereditor .ace_marker-layer .ace_active-line {
    background-color: rgba(255,255,255,.04) !important;
}

:root[data-theme="dark"] .dx-filtereditor .ace_marker-layer .ace_bracket {
    border-color: rgba(30,155,224,.55) !important;
}

:root[data-theme="dark"] .dx-filtereditor .ace_cursor {
    color: var(--ink-0) !important;
    border-left-color: var(--ink-0) !important;
}

:root[data-theme="dark"] .dx-filtereditor .ace_print-margin {
    background-color: var(--line) !important;
}

/* ── Menus déroulants de l'éditeur (opérateurs, champs) ────────── */
:root[data-theme="dark"] .dx-filtereditor-criteriaoperator-popup .dx-overlay-content,
:root[data-theme="dark"] .dx-filtereditor-criteriaoperator-popup .dx-popup-content,
:root[data-theme="dark"] .dx-filtereditor .dx-overlay-content {
    background-color: var(--surface-3) !important;
    color: var(--ink-1) !important;
    border: 1px solid var(--line-2) !important;
    box-shadow: 0 18px 44px -18px rgba(0,0,0,.85) !important;
}

:root[data-theme="dark"] .dx-filtereditor-criteriaoperator-popup .dx-list-item:hover,
:root[data-theme="dark"] .dx-filtereditor-criteriaoperator-popup .dx-item:hover {
    background-color: var(--brand-soft) !important;
    color: var(--ink-0) !important;
}

/* ── Ascenseurs de la zone ─────────────────────────────────────── */
:root[data-theme="dark"] .dx-filtereditor .dx-scrollable-scroll-content {
    background-color: var(--line-2) !important;
    border-radius: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ÉDITEUR DE CRITÈRES — l'arbre et ses puces
   ───────────────────────────────────────────────────────────────────
   Valeurs relevées dans dx-analytics.light.css et .dark.css livrés
   avec le paquet (26.1.4), pas devinées.

   La feuille CLAIRE, celle que l'application charge, dit :
       .dxd-filter-editor-group-back-color    rgba(217, 83, 79, .3)
       .dxd-filter-editor-field-back-color    rgba(51,122,183, .3)
       .dxd-filter-editor-operator-back-color rgba(92,184, 92, .3)
       .dxd-filter-editor-value-back-color    rgba(221,221,221,.5)
       .dxd-filter-editor-text-color          #333

   Tout est à 30 % d'opacité, pensé pour poser une teinte pâle sur du
   blanc. Sur marine, ces 30 % donnent des aplats sourds — le bloc
   bordeaux en haut à gauche, c'est le groupe « And » — et surtout le
   texte reste en #333, quasi noir sur fond sombre. D'où les puces
   illisibles.

   DevExpress résout ça dans sa feuille sombre en montant les fonds
   à 80 % et en passant le texte en noir : des puces franches, du
   texte sombre dessus. On reprend ce principe, avec nos teintes —
   bleu de marque pour les champs, rose et émeraude de la palette
   des graphiques pour le groupe et l'opérateur.
   ══════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-group-back-color {
    background-color: rgba(225, 90, 114, .88) !important;
}
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-group-back-color:hover:not(.dxd-state-no-hover) {
    background-color: rgba(225, 90, 114, 1) !important;
}
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-group-back-color.dxd-state-selected {
    background-color: #E15A72 !important;
}

:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-field-back-color {
    background-color: rgba(30, 155, 224, .88) !important;
}
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-field-back-color:hover:not(.dxd-state-no-hover) {
    background-color: rgba(30, 155, 224, 1) !important;
}
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-field-back-color.dxd-state-selected {
    background-color: #1E9BE0 !important;
}

:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-parameter-back-color {
    background-color: rgba(242, 195, 47, .90) !important;
}
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-parameter-back-color:hover:not(.dxd-state-no-hover) {
    background-color: rgba(242, 195, 47, 1) !important;
}
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-parameter-back-color.dxd-state-selected {
    background-color: #F2C32F !important;
}

:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-operator-back-color {
    background-color: rgba(23, 167, 123, .88) !important;
}
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-operator-back-color:hover:not(.dxd-state-no-hover) {
    background-color: rgba(23, 167, 123, 1) !important;
}
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-operator-back-color.dxd-state-selected {
    background-color: #17A77B !important;
}

/* La valeur n'est pas une catégorie : elle reste neutre, mais assez
   claire pour porter le même texte sombre que les autres puces. */
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-value-back-color {
    background-color: rgba(203, 213, 225, .88) !important;
}
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-value-back-color:hover:not(.dxd-state-no-hover) {
    background-color: rgba(203, 213, 225, 1) !important;
}

/* Texte et pictogrammes portés PAR les puces : sombres, comme le
   fait DevExpress en sombre. La classe est unique pour toutes les
   puces, d'où une seule règle. */
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-text-color,
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-text-color.dxd-state-selected,
:root[data-theme="dark"] .dx-filtereditor .dxd-state-selected .dxd-filter-editor-text-color {
    color: #0A1220 !important;
    fill: #0A1220 !important;
}

/* Le « <enter a value> » est un texte de remplacement, pas une
   valeur : on le garde en retrait sans le rendre illisible. */
:root[data-theme="dark"] .dx-filtereditor .criteria-operator-text.default {
    color: rgba(10, 18, 32, .62) !important;
}

/* Les icônes + et ✕ ne sont PAS sur une puce : elles se détachent du
   fond de l'éditeur, il leur faut donc des teintes claires, pas
   sombres. */
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-add-icon-fill-color {
    fill: #34D399 !important;
}
:root[data-theme="dark"] .dx-filtereditor .dxd-filter-editor-remove-icon-fill-color {
    fill: #FB7185 !important;
}

/* Éditeur en ligne (liste déroulante d'une valeur booléenne, dates…) */
:root[data-theme="dark"] .dx-filtereditor .criteria-operator-item-editor.dx-texteditor {
    background-color: var(--surface-3) !important;
    border-color: var(--line-2) !important;
}
:root[data-theme="dark"] .dx-filtereditor .criteria-operator-item-editor .dx-texteditor-input {
    color: var(--ink-0) !important;
}
:root[data-theme="dark"] .dx-filtereditor .criteria-operator-item-editor .dx-placeholder {
    color: var(--ink-4) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ÉDITEUR DE CRITÈRES — pictogrammes de l'arbre de champs
   ───────────────────────────────────────────────────────────────────
   Les petits « ab », « 12 », les calendriers et les icônes de table
   sont des SVG dont le remplissage passe par UNE seule classe,
   `dxd-icon-fill`, portée par le viewport du designer :

       clair  .dx-designer-viewport .dxd-icon-fill { fill: #606060 }
       sombre .dx-designer-viewport .dxd-icon-fill { fill: #C8C8C8 }

   L'application chargeant la feuille claire, ils restaient en gris
   foncé — presque invisibles sur le fond marine du menu. Une classe
   à reprendre, pas une par type de champ.
   ══════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .dx-designer-viewport .dxd-icon-fill,
:root[data-theme="dark"] .filter-wrapper .dxd-icon-fill,
:root[data-theme="dark"] .dx-filtereditor-criteriaoperator-popup .dxd-icon-fill {
    fill: var(--ink-2) !important;
}

/* Icône accentuée, et survol d'une ligne du menu */
:root[data-theme="dark"] .dx-designer-viewport .dxd-icon-accented .dxd-icon-fill,
:root[data-theme="dark"] .dx-designer-viewport .dxd-icon-highlighted:hover .dxd-icon-fill,
:root[data-theme="dark"] .dx-filtereditor-criteriaoperator-popup .dx-item:hover .dxd-icon-fill {
    fill: var(--brand) !important;
    opacity: 1 !important;
}

/* Icône posée sur un aplat clair (ligne sélectionnée, onglet actif) :
   elle doit alors redevenir SOMBRE, sinon elle disparaît dans son
   propre fond. C'est exactement ce que fait la feuille sombre de
   DevExpress avec #343434. */
:root[data-theme="dark"] .dx-designer-viewport .dxd-back-contrast .dxd-icon-fill,
:root[data-theme="dark"] .dx-designer-viewport .dxd-state-active .dxd-icon-fill,
:root[data-theme="dark"] .dx-designer-viewport .dx-menu-item:not(.dx-menu-item-expanded).dx-state-focused .dxd-icon-fill {
    fill: var(--surface-2) !important;
}

/* Pictogramme d'aide contextuelle */
:root[data-theme="dark"] .dx-designer-viewport .dxd-description_info-icon-fill,
:root[data-theme="dark"] .dx-designer-viewport .dxd-description_info-icon-path-fill {
    fill: var(--ink-3) !important;
}

/* Chevrons de repli de l'arbre et cases à cocher du menu */
:root[data-theme="dark"] .dx-filtereditor-criteriaoperator-popup .dx-treeview-toggle-item-visibility,
:root[data-theme="dark"] .dx-filtereditor-criteriaoperator-popup .dx-icon {
    color: var(--ink-2) !important;
}

/* Pictogrammes des barres d'outils du designer (même classe) */
:root[data-theme="dark"] .dx-designer-viewport .dxrd-navigation-panel-wrapper .dx-icon {
    color: var(--ink-2) !important;
}