/* ========================================================================== 
   Sysimple Brand Refresh
   Couche visuelle non destructive pour AdminLTE 2 / Bootstrap 3.
   Aucun sélecteur fonctionnel, aucun changement de structure ou de JavaScript.
   Retrait rapide : supprimer le <link> vers ce fichier.
   ========================================================================== */

:root {
    --sys-blue: #3c8dbc;
    --sys-blue-dark: #2f739b;
    --sys-blue-deep: #245873;
    --sys-ink: #212e32;
    --sys-ink-soft: #34464d;
    --sys-gray: #6e6f72;
    --sys-bg: #f3f6f8;
    --sys-surface: #ffffff;
    --sys-surface-soft: #f8fafb;
    --sys-border: #dfe7eb;
    --sys-border-strong: #cad7dd;
    --sys-text: #263238;
    --sys-muted: #6f7f86;
    --sys-success: #2e9d69;
    --sys-warning: #d88b2e;
    --sys-danger: #c94c58;
    --sys-radius-sm: 4px;
    --sys-radius: 8px;
    --sys-shadow-sm: 0 1px 2px rgba(33, 46, 50, .05), 0 4px 12px rgba(33, 46, 50, .06);
    --sys-shadow: 0 10px 28px rgba(33, 46, 50, .09);
}

/* Le branding par défaut ne doit pas écraser les thèmes nommés Midnight, VS, Corporate ou Soft. */
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) {
    background: var(--sys-bg) !important;
    color: var(--sys-text);
    font-family: "Outfit", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) ::selection {
    background: rgba(60, 141, 188, .24);
    color: var(--sys-ink);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) a {
    color: var(--sys-blue-dark);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) a:hover,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) a:focus {
    color: var(--sys-blue-deep);
}

/* --------------------------------------------------------------------------
   En-tête AdminLTE
   -------------------------------------------------------------------------- */
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header {
    background: linear-gradient(100deg, var(--sys-ink) 0%, var(--sys-ink-soft) 56%, var(--sys-blue) 100%) !important;
    border: 0 !important;
    box-shadow: 0 4px 16px rgba(33, 46, 50, .16) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .logo {
    background: var(--sys-ink) !important;
    color: #fff !important;
    border-right: 1px solid rgba(255, 255, 255, .09) !important;
    letter-spacing: .02em;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .logo:hover {
    background: #192529 !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .navbar {
    background: transparent !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .navbar .sidebar-toggle,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .navbar .nav > li > a {
    color: rgba(255, 255, 255, .94) !important;
    border-left-color: rgba(255, 255, 255, .08) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .navbar .sidebar-toggle:hover,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .navbar .nav > li > a:hover,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .navbar .nav > li > a:focus,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .navbar .nav .open > a {
    background: rgba(255, 255, 255, .11) !important;
    color: #fff !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .navbar .nav > li > a:focus-visible,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .navbar .sidebar-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: -3px;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn:focus-visible,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .form-control:focus-visible {
    outline: 2px solid rgba(60, 141, 188, .48);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Navigation latérale
   -------------------------------------------------------------------------- */
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-sidebar,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .left-side {
    background: var(--sys-ink) !important;
    box-shadow: 5px 0 18px rgba(33, 46, 50, .10);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar {
    color: rgba(255, 255, 255, .86);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar .user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .025);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar .user-panel > .info,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar .user-panel > .info > p,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar .user-panel label {
    color: rgba(255, 255, 255, .88) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar-form {
    border: 1px solid rgba(255, 255, 255, .11) !important;
    background: rgba(255, 255, 255, .06) !important;
    border-radius: var(--sys-radius-sm) !important;
    overflow: hidden;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar-form input[type="text"],
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar-form .btn {
    background: transparent !important;
    color: rgba(255, 255, 255, .86) !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar-form input[type="text"]::placeholder {
    color: rgba(255, 255, 255, .48);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar-menu > li > a,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar-menu .treeview-menu > li > a {
    color: rgba(255, 255, 255, .72) !important;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar-menu > li:hover > a,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar-menu > li.active > a,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar-menu .treeview-menu > li.active > a,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar-menu .treeview-menu > li > a:hover {
    background: rgba(60, 141, 188, .17) !important;
    color: #fff !important;
    border-left-color: var(--sys-blue) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sidebar-menu .treeview-menu {
    background: rgba(0, 0, 0, .11) !important;
}

/* --------------------------------------------------------------------------
   Zone de travail et conteneurs
   -------------------------------------------------------------------------- */
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .content-wrapper,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .right-side {
    background: var(--sys-bg) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) #ViewContainer {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .content-header > h1,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .page-header {
    color: var(--sys-ink);
    font-weight: 650;
    letter-spacing: -.015em;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .breadcrumb {
    background: transparent;
    color: var(--sys-muted);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .box,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .panel-default,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .well,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .nav-tabs-custom,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .info-box,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .sys-html-container {
    background: var(--sys-surface) !important;
    border: 1px solid var(--sys-border) !important;
    border-radius: var(--sys-radius) !important;
    box-shadow: var(--sys-shadow-sm) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .small-box,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .panel {
    border-radius: var(--sys-radius) !important;
    box-shadow: var(--sys-shadow-sm) !important;
    overflow: hidden;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .box.box-primary {
    border-top-color: var(--sys-blue) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .box-header,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .panel-default > .panel-heading {
    background: linear-gradient(180deg, #fff 0%, var(--sys-surface-soft) 100%) !important;
    color: var(--sys-ink) !important;
    border-bottom: 1px solid var(--sys-border) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .box-header .box-title,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .panel-title {
    color: var(--sys-ink) !important;
    font-weight: 650;
    letter-spacing: -.01em;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .box-footer,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .panel-footer {
    background: var(--sys-surface-soft) !important;
    border-top: 1px solid var(--sys-border) !important;
}

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) label,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .control-label {
    color: var(--sys-ink-soft);
    font-weight: 600;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .form-control,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .bootstrap-select > .dropdown-toggle,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .input-group-addon {
    background: #fff !important;
    color: var(--sys-text) !important;
    border: 1px solid var(--sys-border-strong) !important;
    border-radius: var(--sys-radius-sm) !important;
    box-shadow: inset 0 1px 1px rgba(33, 46, 50, .025) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .form-control:hover,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .bootstrap-select > .dropdown-toggle:hover {
    border-color: #adc1cb !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .form-control:focus,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .bootstrap-select.open > .dropdown-toggle,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--sys-blue) !important;
    box-shadow: 0 0 0 3px rgba(60, 141, 188, .16) !important;
    outline: 0 !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .form-control[disabled],
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .form-control[readonly],
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) fieldset[disabled] .form-control {
    background: #eef2f4 !important;
    color: #829097 !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .help-block,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .text-muted {
    color: var(--sys-muted) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .has-error .form-control,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .has-error .bootstrap-select > .dropdown-toggle {
    border-color: var(--sys-danger) !important;
    box-shadow: 0 0 0 3px rgba(201, 76, 88, .12) !important;
}

/* --------------------------------------------------------------------------
   Boutons et actions
   -------------------------------------------------------------------------- */
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn {
    border-radius: var(--sys-radius-sm) !important;
    font-weight: 600;
    letter-spacing: .005em;
    border-width: 1px;
    box-shadow: 0 1px 2px rgba(33, 46, 50, .05);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn-primary {
    background: var(--sys-blue) !important;
    border-color: var(--sys-blue) !important;
    color: #fff !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn-primary:hover,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn-primary:focus {
    background: var(--sys-blue-dark) !important;
    border-color: var(--sys-blue-dark) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn-default {
    background: #fff !important;
    border-color: var(--sys-border-strong) !important;
    color: var(--sys-ink-soft) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn-default:hover,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn-default:focus {
    background: var(--sys-surface-soft) !important;
    border-color: #aebfc7 !important;
    color: var(--sys-ink) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn-success {
    background: var(--sys-success) !important;
    border-color: var(--sys-success) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn-warning {
    background: var(--sys-warning) !important;
    border-color: var(--sys-warning) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .btn-danger {
    background: var(--sys-danger) !important;
    border-color: var(--sys-danger) !important;
}

/* --------------------------------------------------------------------------
   Tableaux, listes et pagination
   -------------------------------------------------------------------------- */
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .table {
    background: #fff;
    color: var(--sys-text);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .table > thead > tr > th {
    background: #edf4f8 !important;
    color: var(--sys-ink) !important;
    border-bottom: 2px solid #c9dbe4 !important;
    font-weight: 650;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .table > tbody > tr > td,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .table > tbody > tr > th,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .table > tfoot > tr > td {
    border-top-color: var(--sys-border) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .table-striped > tbody > tr:nth-of-type(odd) {
    background: #fafcfd !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .table-hover > tbody > tr:hover {
    background: #eef6fa !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .dataTables_wrapper .dataTables_filter input,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--sys-border-strong) !important;
    border-radius: var(--sys-radius-sm) !important;
    background: #fff !important;
    color: var(--sys-text) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .pagination > li > a,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .pagination > li > span,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--sys-blue-dark) !important;
    background: #fff !important;
    border-color: var(--sys-border) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .pagination > .active > a,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .pagination > .active > span,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--sys-blue) !important;
    border-color: var(--sys-blue) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Onglets, menus, modales, notifications
   -------------------------------------------------------------------------- */
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .nav-tabs {
    border-bottom-color: var(--sys-border) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .nav-tabs > li > a {
    color: var(--sys-muted);
    border-radius: var(--sys-radius-sm) var(--sys-radius-sm) 0 0 !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .nav-tabs > li.active > a,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .nav-tabs > li.active > a:hover,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .nav-tabs > li.active > a:focus {
    color: var(--sys-ink) !important;
    border-color: var(--sys-border) var(--sys-border) #fff !important;
    box-shadow: inset 0 3px 0 var(--sys-blue);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .dropdown-menu {
    background: #fff;
    border: 1px solid var(--sys-border) !important;
    border-radius: var(--sys-radius-sm) !important;
    box-shadow: var(--sys-shadow) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .dropdown-menu > li > a {
    color: var(--sys-text);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .dropdown-menu > li > a:hover,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .dropdown-menu > li > a:focus {
    background: #edf5f9 !important;
    color: var(--sys-ink) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .modal-content {
    border: 1px solid var(--sys-border) !important;
    border-radius: var(--sys-radius) !important;
    box-shadow: 0 24px 70px rgba(33, 46, 50, .24) !important;
    overflow: hidden;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .modal-header {
    background: linear-gradient(180deg, #fff 0%, var(--sys-surface-soft) 100%);
    color: var(--sys-ink);
    border-bottom: 1px solid var(--sys-border) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .modal-footer {
    background: var(--sys-surface-soft);
    border-top: 1px solid var(--sys-border) !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .alert {
    border-radius: var(--sys-radius-sm) !important;
    border-width: 1px !important;
    box-shadow: 0 4px 14px rgba(33, 46, 50, .06);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .alert-info {
    background: #eaf5fb !important;
    border-color: #b9dbea !important;
    color: #275c76 !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .alert-success {
    background: #eaf6f0 !important;
    border-color: #b9dfcd !important;
    color: #286a4b !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .alert-warning {
    background: #fff7e9 !important;
    border-color: #efd7a8 !important;
    color: #7f5723 !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .alert-danger {
    background: #fbecef !important;
    border-color: #e7bcc3 !important;
    color: #873640 !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .label-primary,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .badge.bg-blue,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .bg-blue {
    background-color: var(--sys-blue) !important;
}

/* --------------------------------------------------------------------------
   Composants tiers fréquents
   -------------------------------------------------------------------------- */
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .CodeMirror {
    border: 1px solid var(--sys-border) !important;
    border-radius: var(--sys-radius-sm);
    box-shadow: inset 0 1px 2px rgba(33, 46, 50, .04);
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .fc-toolbar h2 {
    color: var(--sys-ink);
    font-weight: 650;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .fc-state-default {
    background: #fff !important;
    border-color: var(--sys-border-strong) !important;
    color: var(--sys-ink-soft) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .fc-state-active,
body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .fc-state-down {
    background: var(--sys-blue) !important;
    border-color: var(--sys-blue) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Connexion / authentification
   -------------------------------------------------------------------------- */
body.login-page:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not([style*="background-image"]),
body#bodyLogin:not(.skin-sysimple-midnight):not(.skin-sysimple-vs)[style*="rgb(41, 41, 41)"]:not([style*="background-image"]) {
    background-color: var(--sys-ink) !important;
    background-image:
        radial-gradient(circle at 82% 18%, rgba(60, 141, 188, .42), transparent 34%),
        radial-gradient(circle at 12% 82%, rgba(60, 141, 188, .18), transparent 30%),
        linear-gradient(135deg, #172327 0%, var(--sys-ink) 48%, #294a59 100%) !important;
}

body.login-page:not(.skin-sysimple-midnight):not(.skin-sysimple-vs) .login-box,
body#bodyLogin:not(.skin-sysimple-midnight):not(.skin-sysimple-vs) .login-box {
    filter: drop-shadow(0 28px 60px rgba(0, 0, 0, .28));
}

body.login-page:not(.skin-sysimple-midnight):not(.skin-sysimple-vs) .login-box-body,
body#bodyLogin:not(.skin-sysimple-midnight):not(.skin-sysimple-vs) .login-box-body {
    background: rgba(255, 255, 255, .975) !important;
    border: 1px solid rgba(255, 255, 255, .54);
    border-radius: 12px !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .24);
    color: var(--sys-text);
}

body.login-page:not(.skin-sysimple-midnight):not(.skin-sysimple-vs) .login-logo,
body#bodyLogin:not(.skin-sysimple-midnight):not(.skin-sysimple-vs) .login-logo {
    color: var(--sys-ink);
}

body.login-page:not(.skin-sysimple-midnight):not(.skin-sysimple-vs) .login-box-msg,
body#bodyLogin:not(.skin-sysimple-midnight):not(.skin-sysimple-vs) .login-box-msg {
    color: var(--sys-muted);
}

body.login-page:not(.skin-sysimple-midnight):not(.skin-sysimple-vs) .login-box footer,
body#bodyLogin:not(.skin-sysimple-midnight):not(.skin-sysimple-vs) .login-box footer {
    padding: 12px 18px 2px;
}

/* --------------------------------------------------------------------------
   Accessibilité et mouvements
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) *,
    body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) *::before,
    body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 767px) {
    body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .logo,
    body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .main-header .navbar {
        background: var(--sys-ink) !important;
    }

    body:not(.skin-sysimple-midnight):not(.skin-sysimple-vs):not(.skin-sysimple-corporate):not(.skin-sysimple-soft) .content {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* --------------------------------------------------------------------------
   Sysimple Défaut (skin-blue-light) : menu gauche à contraste renforcé
   AdminLTE rend normalement ce menu presque blanc. Ces règles sont explicites
   afin que le texte, les icônes et les sous-menus demeurent lisibles.
   -------------------------------------------------------------------------- */
body.skin-blue-light .wrapper,
body.skin-blue-light .main-sidebar,
body.skin-blue-light .left-side,
body.skin-blue-light .sidebar {
    background: #212e32 !important;
}

body.skin-blue-light .sidebar .user-panel {
    background: #26383f !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}

body.skin-blue-light .sidebar .user-panel > .info,
body.skin-blue-light .sidebar .user-panel > .info > a,
body.skin-blue-light .sidebar .user-panel > .info > p,
body.skin-blue-light .sidebar .user-panel label {
    color: #ffffff !important;
}

body.skin-blue-light .sidebar-menu > li.header {
    background: #192529 !important;
    color: #c4d4da !important;
    font-weight: 600;
    letter-spacing: .03em;
}

body.skin-blue-light .sidebar-menu > li > a,
body.skin-blue-light .sidebar-menu > li > a span,
body.skin-blue-light .sidebar-menu > li > a small,
body.skin-blue-light .sidebar-menu .treeview-menu > li > a,
body.skin-blue-light .sidebar-menu .treeview-menu > li > a span,
body.skin-blue-light .sidebar a {
    color: #edf4f6 !important;
}

body.skin-blue-light .sidebar-menu > li > a .fa,
body.skin-blue-light .sidebar-menu > li > a .fas,
body.skin-blue-light .sidebar-menu > li > a .far,
body.skin-blue-light .sidebar-menu > li > a .glyphicon,
body.skin-blue-light .sidebar-menu > li > a .ion,
body.skin-blue-light .sidebar-menu > li > a .pull-right-container {
    color: #afd1df !important;
}

body.skin-blue-light .sidebar-menu > li:hover > a,
body.skin-blue-light .sidebar-menu > li.active > a,
body.skin-blue-light .sidebar-menu > li.menu-open > a {
    background: #2c4752 !important;
    color: #ffffff !important;
    border-left-color: #3c8dbc !important;
}

body.skin-blue-light .sidebar-menu > li:hover > a .fa,
body.skin-blue-light .sidebar-menu > li.active > a .fa,
body.skin-blue-light .sidebar-menu > li.menu-open > a .fa,
body.skin-blue-light .sidebar-menu > li:hover > a .glyphicon,
body.skin-blue-light .sidebar-menu > li.active > a .glyphicon,
body.skin-blue-light .sidebar-menu > li.menu-open > a .glyphicon,
body.skin-blue-light .sidebar-menu > li:hover > a .ion,
body.skin-blue-light .sidebar-menu > li.active > a .ion,
body.skin-blue-light .sidebar-menu > li.menu-open > a .ion {
    color: #ffffff !important;
}

body.skin-blue-light .sidebar-menu > li > .treeview-menu,
body.skin-blue-light .sidebar-menu .treeview-menu {
    background: #172428 !important;
}

body.skin-blue-light .sidebar-menu .treeview-menu > li > a {
    color: #d5e3e8 !important;
    border-left: 3px solid transparent;
}

body.skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
body.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover,
body.skin-blue-light .sidebar-menu .treeview-menu > li > a:focus {
    background: rgba(60, 141, 188, .22) !important;
    color: #ffffff !important;
    border-left-color: #3c8dbc !important;
}

body.skin-blue-light .sidebar-menu > li > a:focus-visible,
body.skin-blue-light .sidebar-menu .treeview-menu > li > a:focus-visible {
    outline: 2px solid rgba(175, 209, 223, .95);
    outline-offset: -3px;
}

/* ========================================================================== 
   Cohérence visuelle des thèmes Sysimple — Public et Admin
   Référence de structure : Sysimple VS.
   ========================================================================== */
:root {
    --sys-sidebar-width: 230px;
    --sys-scroll-size: 8px;
    --sys-scroll-track: rgba(33, 46, 50, .08);
    --sys-scroll-thumb: rgba(52, 70, 77, .46);
    --sys-scroll-thumb-hover: #3c8dbc;

    --sys-alert-success-bg: #e7f6ef;
    --sys-alert-success-border: #2e9d69;
    --sys-alert-success-text: #17633f;
    --sys-alert-info-bg: #e6f3fa;
    --sys-alert-info-border: #3c8dbc;
    --sys-alert-info-text: #245873;
    --sys-alert-warning-bg: #fff3df;
    --sys-alert-warning-border: #d88b2e;
    --sys-alert-warning-text: #7a4a12;
    --sys-alert-danger-bg: #fbeaec;
    --sys-alert-danger-border: #c94c58;
    --sys-alert-danger-text: #802d37;
}

body.skin-sysimple-vs {
    --sys-scroll-track: rgba(255, 255, 255, .055);
    --sys-scroll-thumb: rgba(212, 212, 212, .30);
    --sys-scroll-thumb-hover: #569cd6;
    --sys-alert-success-bg: rgba(46, 157, 105, .22);
    --sys-alert-success-border: #4ec98b;
    --sys-alert-success-text: #d8f5e6;
    --sys-alert-info-bg: rgba(86, 156, 214, .22);
    --sys-alert-info-border: #569cd6;
    --sys-alert-info-text: #e0f0ff;
    --sys-alert-warning-bg: rgba(216, 139, 46, .22);
    --sys-alert-warning-border: #e5a64f;
    --sys-alert-warning-text: #fff0ce;
    --sys-alert-danger-bg: rgba(201, 76, 88, .24);
    --sys-alert-danger-border: #e06c75;
    --sys-alert-danger-text: #ffe4e7;
}

body.skin-sysimple-midnight {
    --sys-scroll-track: rgba(255, 255, 255, .045);
    --sys-scroll-thumb: rgba(137, 166, 196, .34);
    --sys-scroll-thumb-hover: #00b3ff;
    --sys-alert-success-bg: rgba(46, 157, 105, .20);
    --sys-alert-success-border: #41bd7c;
    --sys-alert-success-text: #dcf8e9;
    --sys-alert-info-bg: rgba(26, 163, 255, .20);
    --sys-alert-info-border: #1aa3ff;
    --sys-alert-info-text: #dff2ff;
    --sys-alert-warning-bg: rgba(216, 139, 46, .22);
    --sys-alert-warning-border: #e3a04c;
    --sys-alert-warning-text: #fff0cc;
    --sys-alert-danger-bg: rgba(201, 76, 88, .23);
    --sys-alert-danger-border: #df6671;
    --sys-alert-danger-text: #ffe3e6;
}

body.skin-sysimple-corporate {
    --sys-scroll-track: rgba(20, 47, 70, .08);
    --sys-scroll-thumb: rgba(54, 91, 117, .45);
    --sys-scroll-thumb-hover: #1a7fba;
}

body.skin-sysimple-soft {
    --sys-scroll-track: rgba(47, 95, 150, .08);
    --sys-scroll-thumb: rgba(83, 119, 150, .42);
    --sys-scroll-thumb-hover: #2f5f96;
}

body.skin-blue-light {
    --sys-scroll-track: rgba(33, 46, 50, .08);
    --sys-scroll-thumb: rgba(52, 70, 77, .46);
    --sys-scroll-thumb-hover: #3c8dbc;
}

/* Même largeur et même alignement que Sysimple VS pour tous les thèmes. */
@media (min-width: 768px) {
    body:not(.sidebar-collapse) .main-header > .logo {
        width: var(--sys-sidebar-width) !important;
        box-sizing: border-box;
    }

    body:not(.sidebar-collapse) .main-header > .navbar {
        margin-left: var(--sys-sidebar-width) !important;
    }

    body:not(.sidebar-collapse) .main-sidebar,
    body:not(.sidebar-collapse) .left-side,
    body:not(.sidebar-collapse) .main-sidebar > .sidebar,
    body:not(.sidebar-collapse) .left-side > .sidebar {
        width: var(--sys-sidebar-width) !important;
        box-sizing: border-box;
    }

    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .right-side,
    body:not(.sidebar-collapse) .main-footer {
        margin-left: var(--sys-sidebar-width) !important;
    }

    /* Le menu réduit doit passer devant la page lors du survol. */
    body.sidebar-mini.sidebar-collapse .content-wrapper,
    body.sidebar-mini.sidebar-collapse .right-side,
    body.sidebar-mini.sidebar-collapse .main-footer {
        position: relative;
        z-index: 1 !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar,
    body.sidebar-mini.sidebar-collapse .left-side {
        overflow: visible !important;
        z-index: 1020 !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar > .sidebar,
    body.sidebar-mini.sidebar-collapse .left-side > .sidebar,
    body.sidebar-mini.sidebar-collapse .main-sidebar .slimScrollDiv,
    body.sidebar-mini.sidebar-collapse .left-side .slimScrollDiv,
    body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu,
    body.sidebar-mini.sidebar-collapse .left-side .sidebar-menu {
        overflow: visible !important;
    }

    body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover {
        z-index: 1024 !important;
    }

    body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
    body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        z-index: 1025 !important;
        pointer-events: auto;
        box-shadow: 8px 10px 24px rgba(0, 0, 0, .22);
    }
}

/* Scrollbars natives, petites et adaptées à chaque thème. */
body,
body * {
    scrollbar-width: thin;
    scrollbar-color: var(--sys-scroll-thumb) var(--sys-scroll-track);
}

body::-webkit-scrollbar,
body *::-webkit-scrollbar {
    width: var(--sys-scroll-size);
    height: var(--sys-scroll-size);
}

body::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track {
    background: var(--sys-scroll-track);
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb {
    background: var(--sys-scroll-thumb);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover,
body *::-webkit-scrollbar-thumb:hover {
    background: var(--sys-scroll-thumb-hover);
    background-clip: padding-box;
}

body::-webkit-scrollbar-corner,
body *::-webkit-scrollbar-corner {
    background: var(--sys-scroll-track);
}

/* La barre créée par jQuery slimScroll suit aussi le thème. */
body .slimScrollBar {
    width: 6px !important;
    right: 2px !important;
    border-radius: 8px !important;
    background: var(--sys-scroll-thumb) !important;
    opacity: .78 !important;
}

body .slimScrollRail {
    width: 6px !important;
    right: 2px !important;
    border-radius: 8px !important;
    background: var(--sys-scroll-track) !important;
    opacity: 1 !important;
}

/* Les messages conservent toujours la couleur sémantique de leur état. */
body .alert.alert-success,
body .callout.callout-success,
body .jq-toast-single.jq-icon-success,
body .toast-success {
    background-color: var(--sys-alert-success-bg) !important;
    border-color: var(--sys-alert-success-border) !important;
    color: var(--sys-alert-success-text) !important;
}

body .alert.alert-info,
body .callout.callout-info,
body .jq-toast-single.jq-icon-info,
body .toast-info {
    background-color: var(--sys-alert-info-bg) !important;
    border-color: var(--sys-alert-info-border) !important;
    color: var(--sys-alert-info-text) !important;
}

body .alert.alert-warning,
body .callout.callout-warning,
body .jq-toast-single.jq-icon-warning,
body .toast-warning {
    background-color: var(--sys-alert-warning-bg) !important;
    border-color: var(--sys-alert-warning-border) !important;
    color: var(--sys-alert-warning-text) !important;
}

body .alert.alert-danger,
body .callout.callout-danger,
body .jq-toast-single.jq-icon-error,
body .toast-error {
    background-color: var(--sys-alert-danger-bg) !important;
    border-color: var(--sys-alert-danger-border) !important;
    color: var(--sys-alert-danger-text) !important;
}

body .alert.alert-success,
body .alert.alert-info,
body .alert.alert-warning,
body .alert.alert-danger {
    border-width: 1px !important;
    border-style: solid !important;
}

body .callout.callout-success,
body .callout.callout-info,
body .callout.callout-warning,
body .callout.callout-danger {
    border-width: 1px 1px 1px 5px !important;
    border-style: solid !important;
}

body .alert.alert-success a,
body .alert.alert-info a,
body .alert.alert-warning a,
body .alert.alert-danger a,
body .callout.callout-success a,
body .callout.callout-info a,
body .callout.callout-warning a,
body .callout.callout-danger a {
    color: inherit !important;
    font-weight: 600;
}

body .alert .close {
    color: inherit !important;
    opacity: .72;
}

/* ========================================================================== 
   Menu latéral réduit : flyout fixe au-dessus de la page
   Le calcul vertical est fourni par js/sysimple-sidebar-flyout.js.
   ========================================================================== */
@media (min-width: 768px) {
    /* Le transform d'AdminLTE créait un contexte qui emprisonnait les menus. */
    body.sidebar-mini.sidebar-collapse .main-sidebar,
    body.sidebar-mini.sidebar-collapse .left-side {
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        overflow: visible !important;
        z-index: 12000 !important;
    }

    /* Conserver le défilement normal/slimScroll du rail d'icônes. */
    body.sidebar-mini.sidebar-collapse .main-sidebar > .sidebar,
    body.sidebar-mini.sidebar-collapse .left-side > .sidebar,
    body.sidebar-mini.sidebar-collapse .main-sidebar .slimScrollDiv,
    body.sidebar-mini.sidebar-collapse .left-side .slimScrollDiv {
        z-index: auto !important;
    }

    body.sidebar-mini.sidebar-collapse .sidebar-menu > li.sysimple-flyout-open {
        z-index: 12010 !important;
    }

    body.sidebar-mini.sidebar-collapse .sidebar-menu > li.sysimple-flyout-open > a > span:not(.pull-right) {
        display: block !important;
        position: fixed !important;
        top: var(--sys-flyout-top, 50px) !important;
        left: var(--sys-flyout-left, 50px) !important;
        width: var(--sys-sidebar-width) !important;
        min-height: var(--sys-flyout-title-height, 44px) !important;
        margin: 0 !important;
        padding: 12px 38px 12px 18px !important;
        box-sizing: border-box !important;
        border-radius: 0 5px 0 0 !important;
        background-color: inherit !important;
        box-shadow: 9px 4px 22px rgba(0, 0, 0, .24) !important;
        z-index: 12030 !important;
        pointer-events: auto !important;
        white-space: normal !important;
    }

    body.sidebar-mini.sidebar-collapse .sidebar-menu > li.sysimple-flyout-open:not(.treeview) > a > span:not(.pull-right),
    body.sidebar-mini.sidebar-collapse .sidebar-menu > li.sysimple-flyout-open:not(:has(> .treeview-menu)) > a > span:not(.pull-right) {
        border-radius: 0 5px 5px 0 !important;
    }

    body.sidebar-mini.sidebar-collapse .sidebar-menu > li.sysimple-flyout-open > a > .pull-right-container {
        display: block !important;
        position: fixed !important;
        top: calc(var(--sys-flyout-top, 50px) + 11px) !important;
        left: calc(var(--sys-flyout-left, 50px) + var(--sys-sidebar-width) - 34px) !important;
        width: 24px !important;
        margin: 0 !important;
        z-index: 12031 !important;
        pointer-events: none !important;
    }

    body.sidebar-mini.sidebar-collapse .sidebar-menu > li.sysimple-flyout-open > .treeview-menu {
        display: block !important;
        position: fixed !important;
        top: calc(var(--sys-flyout-top, 50px) + var(--sys-flyout-title-height, 44px)) !important;
        left: var(--sys-flyout-left, 50px) !important;
        width: var(--sys-sidebar-width) !important;
        max-height: var(--sys-flyout-max-height, calc(100vh - 105px)) !important;
        margin: 0 !important;
        padding: 6px 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        border-radius: 0 0 5px 0 !important;
        box-shadow: 9px 12px 24px rgba(0, 0, 0, .28) !important;
        z-index: 12029 !important;
        pointer-events: auto !important;
    }

    body.sidebar-mini.sidebar-collapse .sidebar-menu > li.sysimple-flyout-open > .treeview-menu > li > a {
        min-height: 34px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        white-space: normal;
    }

    /* L'ancien rendu absolu ne doit jamais reprendre le dessus. */
    body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
    body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        clip: auto !important;
    }
}


/* ========================================================================== 
   Correctif flyout v2 : portail rattaché au body
   Le vrai sous-menu est déplacé temporairement dans ce portail. Il ne peut
   donc plus être coupé par le scroll ou le contexte d'empilement du sidebar.
   ========================================================================== */
@media (min-width: 768px) {
    body.sysimple-sidebar-flyout-ready.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li:hover > a > span:not(.pull-right),
    body.sysimple-sidebar-flyout-ready.sidebar-mini.sidebar-collapse .left-side .sidebar-menu > li:hover > a > span:not(.pull-right),
    body.sysimple-sidebar-flyout-ready.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li:hover > .treeview-menu,
    body.sysimple-sidebar-flyout-ready.sidebar-mini.sidebar-collapse .left-side .sidebar-menu > li:hover > .treeview-menu {
        display: none !important;
    }

    body .sysimple-sidebar-flyout-portal {
        position: fixed !important;
        display: none;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        max-height: calc(100vh - 16px) !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        z-index: 2147483000 !important;
        pointer-events: auto !important;
        isolation: isolate;
    }

    body .sysimple-sidebar-flyout-portal,
    body .sysimple-sidebar-flyout-portal * {
        box-sizing: border-box;
    }

    body .sysimple-sidebar-flyout-portal .sysimple-sidebar-flyout-shell {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        list-style: none !important;
        background: transparent !important;
    }

    body .sysimple-sidebar-flyout-portal .sysimple-sidebar-flyout-host {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    body .sysimple-sidebar-flyout-portal .sysimple-sidebar-flyout-title {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px;
        width: 100% !important;
        min-height: var(--sys-flyout-title-height, 44px) !important;
        margin: 0 !important;
        padding: 11px 16px !important;
        overflow: hidden !important;
        color: var(--sys-flyout-title-color, inherit) !important;
        background: var(--sys-flyout-title-bg, #222d32) !important;
        border-left: 3px solid var(--sys-flyout-title-border, transparent) !important;
        border-radius: 0 5px 0 0 !important;
        box-shadow: 8px 4px 20px rgba(0, 0, 0, .24) !important;
        text-decoration: none !important;
        white-space: normal !important;
        pointer-events: auto !important;
    }

    body .sysimple-sidebar-flyout-portal .sysimple-sidebar-flyout-title > span,
    body .sysimple-sidebar-flyout-portal .sysimple-sidebar-flyout-title > i,
    body .sysimple-sidebar-flyout-portal .sysimple-sidebar-flyout-title > svg,
    body .sysimple-sidebar-flyout-portal .sysimple-sidebar-flyout-title > img {
        position: static !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        clip: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    body .sysimple-sidebar-flyout-portal .sysimple-sidebar-flyout-title > span {
        flex: 1 1 auto;
        min-width: 0;
    }

    body .sysimple-sidebar-flyout-portal .sysimple-sidebar-flyout-host > .treeview-menu {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: var(--sys-flyout-body-height, calc(100vh - 70px)) !important;
        margin: 0 !important;
        padding: 6px 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        color: var(--sys-flyout-menu-color, inherit) !important;
        background: var(--sys-flyout-menu-bg, #2c3b41) !important;
        border-radius: 0 0 5px 0 !important;
        box-shadow: 8px 12px 24px rgba(0, 0, 0, .28) !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    body .sysimple-sidebar-flyout-portal .treeview-menu > li {
        position: relative !important;
        display: block;
        width: 100%;
        margin: 0;
        overflow: visible !important;
    }

    body .sysimple-sidebar-flyout-portal .treeview-menu > li > a {
        position: relative !important;
        display: flex !important;
        align-items: center;
        width: 100% !important;
        min-height: 34px;
        margin: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        overflow: visible !important;
        white-space: normal !important;
        clip: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    body .sysimple-sidebar-flyout-portal .treeview-menu > li > a > span,
    body .sysimple-sidebar-flyout-portal .treeview-menu > li > a > i {
        position: static !important;
        display: inline-block !important;
        clip: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body .sysimple-sidebar-flyout-portal .treeview-menu .treeview-menu {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 10px !important;
        overflow: visible !important;
        box-shadow: none !important;
    }

    body .sysimple-sidebar-flyout-portal .treeview-menu::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
}

/* Compact workspace density for all Sysimple themes. */
body .content-wrapper > .content,
body .content-wrapper section.content,
body .content-wrapper > section {
    padding: 8px 10px !important;
}

body .content-header {
    padding: 8px 10px 0 !important;
}

body .content-header > h1,
body .page-header,
body #div-main-form h1:first-child,
body .dynamicform h1:first-child {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

body #div-main-form,
body .div-main-form,
body .div-main-form-page {
    margin: 20px 0 6px !important;
}

body [id="ViewContainer.Dynamic"],
body .dynamicform {
    margin: 10px !important;
    padding-bottom: 24px !important;
}

body .page-shadow {
    padding: 10px !important;
    border-radius: 8px !important;
}

body .box,
body .panel,
body .well,
body .nav-tabs-custom,
body .sys-html-container {
    margin-bottom: 10px !important;
}

body .box-header,
body .panel-heading {
    padding: 8px 10px !important;
}

body .box-body,
body .panel-body,
body .well,
body .nav-tabs-custom > .tab-content,
body .sys-html-container .box-body {
    padding: 10px !important;
}

body .form-group {
    margin-bottom: 8px !important;
}

body hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

body #div-main-form .row,
body .dynamicform .row,
body .page-shadow .row {
    margin-left: -8px;
    margin-right: -8px;
}

body #div-main-form [class^="col-"],
body #div-main-form [class*=" col-"],
body .dynamicform [class^="col-"],
body .dynamicform [class*=" col-"],
body .page-shadow [class^="col-"],
body .page-shadow [class*=" col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

@media (max-width: 767px) {
    body .content-wrapper > .content,
    body .content-wrapper section.content,
    body .content-wrapper > section {
        padding: 6px !important;
    }

    body #div-main-form,
    body .div-main-form,
    body .div-main-form-page,
    body [id="ViewContainer.Dynamic"],
    body .dynamicform {
        margin: 6px !important;
    }
}

/* Validation des sélections polymorphes : radios, cases et listes, tous thèmes. */
body .sys-polymorph-field.has-error {
    --sys-selection-error: #b42332;
    --sys-selection-error-bg: rgba(180, 35, 50, .06);
}
body.skin-sysimple-midnight .sys-polymorph-field.has-error,
body.skin-sysimple-vs .sys-polymorph-field.has-error,
body.sys-theme-form-dark .sys-polymorph-field.has-error,
body.sys-theme-form-vs .sys-polymorph-field.has-error {
    --sys-selection-error: #ff8996;
    --sys-selection-error-bg: rgba(255, 137, 150, .10);
}
body .sys-polymorph-field.has-error > .sys-polymorph-options {
    outline: 1px solid var(--sys-selection-error);
    outline-offset: 3px;
    border-radius: 3px;
    background-color: var(--sys-selection-error-bg);
}
body .sys-polymorph-field.has-error > .help-block,
body .sys-polymorph-field.has-error > label,
body .sys-polymorph-field.has-error > .sys-polymorph-options label {
    color: var(--sys-selection-error) !important;
}
body .sys-polymorph-field.has-error input[type="radio"],
body .sys-polymorph-field.has-error input[type="checkbox"] {
    accent-color: var(--sys-selection-error);
}
body .sys-polymorph-field.has-error .bootstrap-select > .dropdown-toggle,
body .sys-polymorph-field.has-error select {
    border-color: var(--sys-selection-error) !important;
}

/* Legacy dark controls: native selects, bootstrap-select and neutral grid actions. */
body:is(.skin-sysimple-midnight, .sys-theme-form-dark) {
    --sys-legacy-control-bg: #202b3c;
    --sys-legacy-control-hover: #2b3b50;
    --sys-legacy-control-text: #e6eef7;
    --sys-legacy-control-muted: #b0bfd0;
    --sys-legacy-control-border: #526176;
}
body:is(.skin-sysimple-vs, .sys-theme-form-vs) {
    --sys-legacy-control-bg: #2d2d30;
    --sys-legacy-control-hover: #3e3e42;
    --sys-legacy-control-text: #f0f0f0;
    --sys-legacy-control-muted: #bdbdbd;
    --sys-legacy-control-border: #626269;
}
body:is(.skin-sysimple-midnight, .sys-theme-form-dark, .skin-sysimple-vs, .sys-theme-form-vs) :is(select, .bootstrap-select > .dropdown-toggle, .btn-default, .btn-light, .input-group-addon, .dataTables_filter input, .dataTables_length select) {
    background-color: var(--sys-legacy-control-bg) !important;
    background-image: none !important;
    color: var(--sys-legacy-control-text) !important;
    border-color: var(--sys-legacy-control-border) !important;
    text-shadow: none !important;
    color-scheme: dark;
}
body:is(.skin-sysimple-midnight, .sys-theme-form-dark, .skin-sysimple-vs, .sys-theme-form-vs) :is(.btn-default, .btn-light, .bootstrap-select > .dropdown-toggle):hover {
    background-color: var(--sys-legacy-control-hover) !important;
}
body:is(.skin-sysimple-midnight, .sys-theme-form-dark, .skin-sysimple-vs, .sys-theme-form-vs) :is(select, .btn, .bootstrap-select > .dropdown-toggle):focus-visible {
    outline: 2px solid #75c8ff !important;
    outline-offset: 2px;
}
body:is(.skin-sysimple-midnight, .sys-theme-form-dark, .skin-sysimple-vs, .sys-theme-form-vs) .bootstrap-select .dropdown-menu,
body:is(.skin-sysimple-midnight, .sys-theme-form-dark, .skin-sysimple-vs, .sys-theme-form-vs) select option {
    background-color: var(--sys-legacy-control-bg) !important;
    color: var(--sys-legacy-control-text) !important;
    border-color: var(--sys-legacy-control-border) !important;
}
body:is(.skin-sysimple-midnight, .sys-theme-form-dark, .skin-sysimple-vs, .sys-theme-form-vs) .bootstrap-select .dropdown-menu li a {
    color: var(--sys-legacy-control-text) !important;
}
body:is(.skin-sysimple-midnight, .sys-theme-form-dark, .skin-sysimple-vs, .sys-theme-form-vs) .bootstrap-select .dropdown-menu li:is(.selected, .active) a,
body:is(.skin-sysimple-midnight, .sys-theme-form-dark, .skin-sysimple-vs, .sys-theme-form-vs) .bootstrap-select .dropdown-menu li a:hover {
    background-color: var(--sys-legacy-control-hover) !important;
}
body:is(.skin-sysimple-midnight, .sys-theme-form-dark, .skin-sysimple-vs, .sys-theme-form-vs) :is(input, textarea)::placeholder {
    color: var(--sys-legacy-control-muted) !important;
    opacity: 1;
}
body:is(.skin-sysimple-midnight, .sys-theme-form-dark, .skin-sysimple-vs, .sys-theme-form-vs) :is(.btn-default, .btn-light, select):disabled {
    opacity: .55;
    cursor: not-allowed;
}
/* Keep validation above neutral control borders. */
body:is(.skin-sysimple-midnight, .sys-theme-form-dark, .skin-sysimple-vs, .sys-theme-form-vs) .has-error :is(select, .bootstrap-select > .dropdown-toggle) {
    border-color: #ff8996 !important;
}