/* =========================
   SYSIMPLE HEADER THEMES - BASE
   Actif seulement si un thème est présent
   Supporte thème sur parent OU sur BOX_HEADER
   ========================= */

/* Liste des thèmes supportés */
:root {
    /* (vide) */
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) {
}

    /* 1) BOX_HEADER (thème sur le BOX_HEADER lui-même OU sur un parent) */
    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost)[id*="BOX_HEADER"],
    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] {
        margin-top: -40px !important;
        margin-right: -40px !important;
        margin-bottom: 16px !important;
        margin-left: -40px !important;
        position: relative !important;
        overflow: hidden !important;
        background: var(--hdr-bg) !important;
        color: var(--hdr-fg) !important;
        /* IMPORTANT: évite de mettre du padding ici, on le met dans Body/Container */
        padding-top: 40px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

/* Mobile */
@media (max-width:768px) {
    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost)[id*="BOX_HEADER"],
    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] {
        margin: -20px -10px 12px -10px !important;
        padding-top: 15px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* 2) Padding interne : BOX_HEADER_Body / BOX_HEADER_Container */
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost)[id*="BOX_HEADER_Body"],
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER_Body"],
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost)[id*="BOX_HEADER_Container"],
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER_Container"] {
    padding: var(--hdr-pad-y, 16px) var(--hdr-pad-x, 40px) !important;
}

@media (max-width:768px) {
    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost)[id*="BOX_HEADER_Body"],
    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER_Body"],
    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost)[id*="BOX_HEADER_Container"],
    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER_Container"] {
        padding: var(--hdr-pad-y, 12px) var(--hdr-pad-x, 14px) !important;
    }
}

/* 3) Motif (cercles) */
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost)[id*="BOX_HEADER"]::before,
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"]::before,
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost)[id*="BOX_HEADER"]::after,
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"]::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: var(--hdr-pattern-opacity, 1);
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost)[id*="BOX_HEADER"]::before,
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"]::before {
    width: 260px;
    height: 260px;
    right: -120px;
    top: -120px;
    background: var(--hdr-pattern-1);
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost)[id*="BOX_HEADER"]::after,
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"]::after {
    width: 180px;
    height: 180px;
    right: 30px;
    top: -90px;
    background: var(--hdr-pattern-2);
}

/* 4) Heading transparent */
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .panel-heading,
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .box-header {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
}

/* 5) Boutons ghost */
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn {
    background: transparent !important;
    border: 1px solid var(--hdr-btn-border) !important;
    color: inherit !important;
    box-shadow: none !important;
}

    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn:hover,
    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn:focus {
        background: var(--hdr-btn-hover) !important;
        border-color: var(--hdr-btn-border-hover) !important;
        box-shadow: 0 0 6px rgba(255,255,255,.25) !important;
    }

/* 6) Boutons Bootstrap colorés (translucides) - seulement en mode thème */
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn-primary {
    background: rgba(51,122,183,.35) !important;
    border-color: rgba(51,122,183,.65) !important;
    color: #fff !important;
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn-success {
    background: rgba(92,184,92,.35) !important;
    border-color: rgba(92,184,92,.65) !important;
    color: #fff !important;
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn-info {
    background: rgba(91,192,222,.35) !important;
    border-color: rgba(91,192,222,.65) !important;
    color: #fff !important;
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn-warning {
    background: rgba(240,173,78,.35) !important;
    border-color: rgba(240,173,78,.65) !important;
    color: #fff !important;
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn-danger {
    background: rgba(217,83,79,.35) !important;
    border-color: rgba(217,83,79,.65) !important;
    color: #fff !important;
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn-primary:hover {
    background: rgba(51,122,183,.55) !important;
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn-success:hover {
    background: rgba(92,184,92,.55) !important;
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn-info:hover {
    background: rgba(91,192,222,.55) !important;
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn-warning:hover {
    background: rgba(240,173,78,.55) !important;
}

:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .btn-danger:hover {
    background: rgba(217,83,79,.55) !important;
}

/* 7) HR */
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] hr {
    border: none !important;
    height: 1px !important;
    background: var(--hdr-hr) !important;
    margin: 12px 0 18px 0 !important;
}

/* 8) Box / panel / well ghost (dans header) */
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .box,
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .panel,
:is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .well {
    background: var(--hdr-glass-bg) !important;
    border: 1px solid var(--hdr-glass-border) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
}

    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .box:hover,
    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .panel:hover,
    :is(.sys-hdr-theme-vs-dark, .sys-hdr-theme-dark, .sys-hdr-theme-light, .sys-hdr-theme-gray, .sys-hdr-theme-teal, .sys-hdr-theme-indigo, .sys-hdr-theme-graphite, .sys-hdr-theme-frost) [id*="BOX_HEADER"] .well:hover {
        background: var(--hdr-glass-bg-hover) !important;
        border-color: var(--hdr-glass-border-hover) !important;
    }

/* 9) Spécifique VS Dark : accent top border */
.sys-hdr-theme-vs-dark[id*="BOX_HEADER"],
.sys-hdr-theme-vs-dark [id*="BOX_HEADER"] {
    border-top: 2px solid #007acc !important;
}
}