/* Prevent scrollbar oscillation: reserve gutter space so viewport width
   stays stable regardless of whether a vertical scrollbar is shown */
html {
    scrollbar-gutter: stable;
}

/* SIDE MENU
   ----------------------------- */

/* override background color only with light theme */
[data-bs-theme="light"] {
    --bs-app-bg-color: #f1f1f1;
}

/* Production width issue */
@media (min-width: 992px) {
    [data-kt-app-header-fixed=true][data-kt-app-sidebar-fixed=true][data-kt-app-sidebar-push-header=true] .app-header, [data-kt-app-header-fixed=true][data-kt-app-sidebar-sticky=on][data-kt-app-sidebar-push-header=true] .app-header {
        left: calc(var(--bs-app-sidebar-width));
    }
    [data-kt-app-sidebar-fixed=true] .app-wrapper {
        margin-left: calc(var(--bs-app-sidebar-width));
    }
}

/* Fix mobile page-header */
@media (max-width: 991.98px) {
    .app-header .page-title {
        display: block !important;
    }
}

/** Collapsed menu adjustment */
[data-kt-app-sidebar-minimize=on][data-kt-app-sidebar-hoverable=true] .app-sidebar:not(:hover) .app-sidebar-footer
{
    display: none !important;
}

/** Quick search **/
.aside-toolbar .aside-search {
    border-top: 1px dashed #2d2d43;
    border-bottom: 1px dashed #2d2d43;
}
.aside-toolbar .aside-search .search-input {
    background-color: #474764;
    border-color: #1e1e2d;
    color: white !important;
    border-left: none;
    border-right: none;
    font-size: 12px;
}
.aside-toolbar .aside-search .svg-icon {
    color: white !important;
}
.aside-toolbar .aside-search .input-group-text {
    background-color: #474764;
    border-color: #1e1e2d;
    color: white !important;
    border-right: none;
    border-left: none;
}
.aside-toolbar .aside-search .btn {
    background-color: #474764;
    color: white !important;
    border:none;
}


/** Increase font-size on main menu */
.menu-item {
    font-size: 1.1rem;
}
.menu-icon [class^="fa"], .menu-icon [class*=" fa-"] {
    font-size: 15px;
}

/** Fix color menu item **/
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link .menu-icon * {
    color: #e8e8e8 !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link:hover .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link:hover .menu-icon * {
    color: white !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link.active .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link.active .menu-icon * {
    color: white !important;
    font-weight:bold;
}

/** Reset colors for dropdowns inside sidebar (they have white background) **/
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link .menu-icon * {
    color: var(--bs-gray-700) !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link:hover .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link:hover .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link:hover .menu-icon * {
    color: var(--bs-primary) !important;
}

/** Fix footer menu active color **/
[data-kt-app-layout=dark-sidebar] .app-sidebar-footer .menu-item a:hover {
    color: var(--bs-primary) !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-footer .menu-item a:not(.active) {
    color: var(--bs-gray-700) !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-footer .menu-item a.active:hover {
    color: white !important;
}

/** Override active menu background color **/
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link.active {
    background-color: var(--bs-primary-active);
}

/** Reduce sub menu height **/
.menu-sub-indention .menu-item .menu-item .menu-link {
    padding: 0.35rem 1rem;
}
/** Remove submenu right indention **/
.menu-sub-indention .menu-item .menu-item .menu-link.active {
    margin-right: 0;
}
/** Increase submenu left indention **/
.menu-sub-indention .menu-sub:not([data-popper-placement]) {
    margin-left: 20px;
}

/** Show app logo on mobile **/
@media (max-width: 991.98px) {
    .app-sidebar-logo {
         display: block;
    }
}

/* PAGE HEADER
   ----------------------------- */

/** Increase icon in page header **/
.metronic-toolbar-icon > span {
    font-size: 33px;
    margin-right: 13px;
    color: var(--bs-primary);
}

#kt_app_header {
    border-bottom: 1px solid #e5e5e5 !important;
}


/* MISC
   ----------------------------- */
.separator.separator-bold {
    border-bottom-width: 3px;
    /*margin-left: -22px;*/
    /*margin-right: -22px;*/
}

.busy-load-container {
    z-index: 90 !important;
}

body > .busy-load-container  {
    z-index: 2000 !important;
}

/** Fix list-group dark mode **/
[data-bs-theme-mode=dark] .list-group-item {
    background-color: transparent !important;
}

/** Permit <a> to be disabled **/
a[disabled] {
    pointer-events: none;
    cursor: default;
}

/** Fix .sticky-top issue with lateral navigation */
#kt_app_content .sticky-top {
    z-index: 104;
}

/** Enable thin scrollbar even under 992px */
main,
span,
ol,
ul,
pre,
div {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-scrollbar-color) transparent;
}
main::-webkit-scrollbar,
span::-webkit-scrollbar,
ol::-webkit-scrollbar,
ul::-webkit-scrollbar,
pre::-webkit-scrollbar,
div::-webkit-scrollbar {
    width: var(--bs-scrollbar-size);
    height: var(--bs-scrollbar-size);
}

/** Ombre portée à droite du sidebar */
#kt_app_sidebar {
    box-shadow: 10px 0 30px 0 rgba(82, 63, 105, 0.05);
}

/** Remove kt_app_sidebar_toggle under 992px */

@media (max-width: 993px) {
    #kt_app_sidebar_toggle {
        display: none;
    }
}


/** Stamina light theme **/
[data-bs-theme-mode=light][data-bs-theme-color=purple] {
    --bs-stamina-primary: #9966FF;
    --bs-stamina-primary-rgb: 97, 36, 221;

    --bs-stamina-ultra-light: #f4efff;
    --bs-stamina-light: #DFD4F9;
    --bs-stamina-light-rgb: 223, 212, 249;

    --bs-stamina-dark: #5838A8;
    --bs-stamina-dark-rgb: 88, 56, 168;

    --bs-stamina-ultra-dark: #1d1531;
    --bs-stamina-ultra-dark-rgb: 29, 21, 49;

    --bs-app-sidebar-bg-color: #1d1531;
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;

    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-ultra-light);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-primary-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-link-color-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-hover-color: var(--bs-stamina-dark);
    --bs-link-hover-color-rgb: var(--bs-stamina-dark-rgb);
    --bs-menu-link-color-hover: var(--bs-stamina-dark);
    --bs-menu-link-color-active: var(--bs-stamina-dark);
    --bs-menu-link-color-show: var(--bs-stamina-primary);
    --bs-nav-link-color: var(--bs-stamina-primary);
    --bs-component-hover-color: var(--bs-stamina-primary);
    --bs-nav-pills-link-active-color: var(--bs-stamina-primary);
}

[data-bs-theme-mode=light][data-bs-theme-color=blue] {
    --bs-stamina-primary: #0095e8;
    --bs-stamina-primary-rgb: 0, 158, 247;

    --bs-stamina-light: #f1faff;
    --bs-stamina-light-rgb: 144, 216, 245;

    --bs-stamina-dark: #0b5b7a;
    --bs-stamina-dark-rgb: 11, 91, 122;

    --bs-stamina-ultra-dark: #073244;
    --bs-stamina-ultra-dark-rgb: 7, 50, 68;

    --bs-app-sidebar-bg-color: #1d1531;
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;

    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-light);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-primary-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-link-color-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-hover-color: var(--bs-stamina-dark);
    --bs-link-hover-color-rgb: var(--bs-stamina-dark-rgb);
    --bs-menu-link-color-hover: var(--bs-stamina-dark);
    --bs-menu-link-color-active: var(--bs-stamina-dark);
    --bs-menu-link-color-show: var(--bs-stamina-primary);
    --bs-nav-link-color: var(--bs-stamina-primary);
    --bs-component-hover-color: var(--bs-stamina-primary);
}

[data-bs-theme-mode=light][data-bs-theme-color=red] {
    --bs-stamina-primary: #ef514a;
    --bs-stamina-primary-rgb: 239, 81, 74;

    --bs-stamina-light: #f59590;
    --bs-stamina-light-rgb: 245, 149, 144;

    --bs-stamina-dark: #8f120d;
    --bs-stamina-dark-rgb: 143, 18, 13;

    --bs-stamina-ultra-dark: #590b08;
    --bs-stamina-ultra-dark-rgb: 89, 11, 8;

    --bs-app-sidebar-bg-color: #1d1531;
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;

    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-light);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-primary-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-link-color-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-hover-color: var(--bs-stamina-dark);
    --bs-link-hover-color-rgb: var(--bs-stamina-dark-rgb);
    --bs-menu-link-color-hover: var(--bs-stamina-dark);
    --bs-menu-link-color-active: var(--bs-stamina-dark);
    --bs-menu-link-color-show: var(--bs-stamina-primary);
    --bs-nav-link-color: var(--bs-stamina-primary);
    --bs-component-hover-color: var(--bs-stamina-primary);
}

/**
    DARK MODE

 */
[data-bs-theme-mode=dark][data-bs-theme-color=purple] {
    --bs-stamina-primary: #9966FF;
    --bs-stamina-light: #172331;
    --bs-stamina-dark: #5838A8;
    --bs-stamina-ultra-dark: #1d1531;
    --bs-app-sidebar-bg-color: #1d1531;
    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;
    --bs-link-color-rgb: var(--bs-stamina-primary);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-ultra-dark);
}

[data-bs-theme-mode=dark][data-bs-theme-color=blue] {
    --bs-stamina-primary: #9966FF;
    --bs-stamina-light: #DFD4F9;
    --bs-stamina-dark: #5838A8;
    --bs-stamina-ultra-dark: #1d1531;
    --bs-app-sidebar-bg-color: #1d1531;
    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;
    --bs-link-color-rgb: var(--bs-stamina-primary);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-ultra-dark);
}

[data-bs-theme-mode=dark][data-bs-theme-color=red] {
    --bs-stamina-primary: #9966FF;
    --bs-stamina-light: #DFD4F9;
    --bs-stamina-dark: #5838A8;
    --bs-stamina-ultra-dark: #1d1531;
    --bs-app-sidebar-bg-color: #1d1531;
    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;
    --bs-link-color-rgb: var(--bs-stamina-primary);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-ultra-dark);
}

.bg-auto {
    background-color: white;
}
[data-bs-theme-mode=dark] .bg-auto {
    background-color: var(--bs-body-bg); !important;
}


.nav-pills {
    --bs-nav-pills-link-active-color: #ffffff;
    --bs-nav-pills-link-active-bg: var(--bs-stamina-primary);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background-color: var(--bs-app-sidebar-bg-color);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link.active {
    background-color: var(--bs-primary);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom: none;
}

.bg-stamina-primary {
    background-color: var(--bs-stamina-primary);
}
.bg-stamina-light {
    background-color: var(--bs-stamina-light);
}
.bg-stamina-dark {
    background-color: var(--bs-stamina-dark);
}
.text-stamina-primary {
    color: var(--bs-stamina-primary);
}
.text-stamina-light {
    color: var(--bs-stamina-light);
}
.text-stamina-dark {
    color: var(--bs-stamina-dark);
}
.btn.btn-info {
    color: var(--bs-info-inverse);
    border-color: var(--bs-info);
    background-color: var(--bs-info);
}

.text-stamina-blue {
    color: #48BFEE;
}

.text-stamina-red {
    color: #F37E79;
}

.text-stamina-purple {
    color: #9966FF;
}

.btn-stamina {
    color: white;
    background-color: #9966FF;
}

.btn-stamina:hover {
    color: white;
    background-color: #5838A8;
}

.form-check-input:checked {
    background-color: var(--bs-stamina-primary);
    border-color: var(--bs-stamina-primary);
}


/* Fix form-floating */
.form-floating .form-label {
    font-weight: normal;
    color: var(--bs-gray-600);
    opacity: 1 !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Fix form-floating issue with metronic-algolia-autocomplete, drifting to the right if an icon exists */
.form-floating:has([data-controller="metronic-algolia-autocomplete"]):has(.input-group-text) label {
  left: 42px;
}

/* Fix form-floating issue with z-index, sometimes the label is hidden behind the input */
.form-floating .form-label {
    z-index: 10;
}

.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
    background-color: var(--bs-body-bg);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--bs-stamina-primary);
    color: white;
}

/** Bordure sur les checkboxes solid non cochées — alignée sur les cards */
.form-check.form-check-solid .form-check-input:not(:checked) {
    border: 1px solid #e5e5e5;
}

/** Card box shadow — matching Metronic 8 demo1 (call-center) **/
.card {
    --bs-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    --bs-card-border-color: #e5e5e5;
    border: 1px solid var(--bs-card-border-color) !important;
}

/** Pas d'ombre : le conteneur est transparent (design « onglet dossier »),
    la lecture vient du contraste des pièces sur le backdrop sombre. **/
.offcanvas {
    box-shadow: none !important;
}

/* ===========================================
   Custom Offcanvas Styles - Floating Effect
   =========================================== */

/* Largeur par défaut optimisée */
.offcanvas {
    --bs-offcanvas-width: 550px;
}

/* Modale à DEUX VARIANTES de chrome (classe posée par la coquille Twig via
   {% set offcanvas_variant = 'violet'|'gray' %}, défaut violet) :
   entête = bande pleine largeur soudée au panneau corps+pied. */
.offcanvas {
    top: 20px !important;
    bottom: 20px !important;
    height: auto !important;                 /* étirée entre top et bottom */
    border-radius: 14px !important;
    overflow: visible !important;
    background-color: transparent !important;
    container-type: inline-size;
    container-name: offcanvas;
}

/* Panneau corps+pied : porte le gris et les coins bas arrondis (l'entête,
   soudée au-dessus, porte les coins hauts). */
.offcanvas .offcanvas-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background-color: #f0f0f0;
    border-radius: 0 0 14px 14px;
}

/* Le body reste transparent (c'est le panneau qui porte le fond) : la classe
   `bg-auto` de Metronic posait un blanc qui masquait le gris. */
.offcanvas > turbo-frame > .card .offcanvas-panel > .card-body {
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Rythme vertical des formulaires horizontaux dans les offcanvas : les marges
   mb-lg-8 du theme sont calées sur le viewport (media query), pas sur la largeur
   du panneau — un offcanvas de 550px hérite donc du rythme « pleine page ».
   On resserre, et la dernière row d'une carte ne pousse pas le padding bas. */
.offcanvas .metronic-horizontal-row-content {
    margin-bottom: 1rem !important;
}
.offcanvas .card-body > .metronic-horizontal-row:last-child .metronic-horizontal-row-content,
.offcanvas .card-body > .row:last-child .metronic-horizontal-row-content {
    margin-bottom: 0 !important;
}

/* Widget fichier (file-bundle) : le wrapper .vich-file dans un input-group doit
   pouvoir se compresser (min-width:0) au lieu de forcer un retour à la ligne —
   l'input natif « Choisir un fichier » s'ellipse proprement en espace étroit. */
.input-group > .vich-file {
    min-width: 0;
}
.input-group > .vich-file .form-control {
    width: 100%;
}

/* Pas de liseré : modale blanc pur, la séparation entête/body est assurée
   uniquement par l'ombre douce permanente de l'entête (plus bas). */

/* Le contenu (turbo-frame .vh-100) remplit la hauteur de la modale flottante */
.offcanvas .vh-100 {
    height: 100% !important;
}

/* Overflow hidden sur le turbo-frame (le contenu remplit le drawer, coins francs) */
.offcanvas > turbo-frame,
.offcanvas > turbo-frame > .card {
    overflow: hidden !important;
    border-radius: 0 !important;
}

/* Drawer de gauche : détaché du bord gauche (marge 20px) */
.offcanvas-start {
    left: 20px !important;
    width: var(--bs-offcanvas-width) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease !important;
}

/* Drawer de droite : détaché du bord droit (marge 20px) */
.offcanvas-end {
    right: 20px !important;
    width: var(--bs-offcanvas-width) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease !important;
}

/* Mobile: offcanvas plein écran sans marges */
@media (max-width: 576px) {
    .offcanvas {
        border-radius: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;          /* fallback navigateurs anciens */
        height: 100dvh !important;         /* viewport dynamique (iOS Safari, Chrome Android) */
        --bs-offcanvas-width: 100vw;
    }
    /* Empêche le turbo-frame .vh-100 de déborder : il hérite du parent dvh */
    .offcanvas .vh-100 {
        height: 100% !important;
    }
    .offcanvas-start {
        left: 0 !important;
        width: 100vw !important;
    }
    .offcanvas-end {
        right: 0 !important;
        width: 100vw !important;
    }
    .offcanvas > turbo-frame,
    .offcanvas > turbo-frame > .card {
        border-radius: 0 !important;
    }
}

/* Backdrop : fondu synchronisé avec la glissade de la modale (même durée,
   même courbe) pour éviter l'effet de double tempo. */
.offcanvas-backdrop {
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.offcanvas-backdrop.show {
    opacity: 0.75 !important;
}

/* ===========================================
   Empilement d'offcanvas : une seule visible
   =========================================== */

/* L'offcanvas du dessous : masquée (mais restée montée → rien n'est perdu). */
.offcanvas.offcanvas-covered {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Backdrops du dessous : neutralisés → un seul fond, pas de cumul. */
.offcanvas-backdrop.offcanvas-backdrop-under {
    opacity: 0 !important;
}

/* Carte-COQUILLE uniquement (enfant direct du turbo-frame) : coins francs, pas de
   bordure — elle remplit le drawer et sert juste de squelette entête/body/pied.
   Scopé en enfant direct pour NE PAS toucher les vraies cartes du contenu. */
.offcanvas > turbo-frame > .card {
    border-radius: 0 !important;
    border: none !important;
}

/* Cartes du CONTENU (imbriquées dans la coquille) : sans bordure. Le contraste
   blanc-sur-gris (plus foncé) + l'ombre douce suffisent à les détacher. */
.offcanvas > turbo-frame > .card .card {
    border: none !important;
}

/* Entête : BANDE pleine largeur soudée au panneau (coins hauts arrondis,
   coins bas francs). La couleur vient de la variante. */
.offcanvas > turbo-frame > .card > .card-header {
    min-height: 0;
    align-items: center;
    position: relative;
    z-index: 2;
    border-bottom: 0 !important;
    padding: 0.5rem 1rem 0.5rem 0 !important;
    margin: 0;
    border-radius: 14px 14px 0 0 !important;
}

/* Type card : la carte de contenu chevauche la bande de 14px — l'entête
   compense en padding bas pour garder ses proportions visibles. */
.offcanvas > turbo-frame > .card:has(.offcanvas-content-card) > .card-header {
    padding-bottom: calc(0.5rem + 14px) !important;
}
.offcanvas > turbo-frame > .card > .card-header .card-title {
    background-color: transparent;
    border-radius: 0;
    padding: 0.9rem 1rem 0.9rem 1.5rem;
    margin: 0;
}

/* Variante VIOLETTE : bande primary, textes blancs, badge translucide. */
.offcanvas > turbo-frame > .card.offcanvas-violet > .card-header {
    background-color: var(--bs-primary) !important;
}
.offcanvas > turbo-frame > .card.offcanvas-violet > .card-header .card-title .text-gray-900 {
    color: #fff !important;
}
.offcanvas > turbo-frame > .card.offcanvas-violet > .card-header .card-title .text-gray-500 {
    color: rgba(255, 255, 255, 0.75) !important;
}
.offcanvas > turbo-frame > .card.offcanvas-violet > .card-header .card-title .symbol-label {
    background-color: rgba(255, 255, 255, 0.20) !important;
}

/* Variante VIOLETTE : panneau corps+pied BLANC (essai) au lieu du gris. */
.offcanvas > turbo-frame > .card.offcanvas-violet .offcanvas-panel {
    background-color: #fff !important;
}
.offcanvas > turbo-frame > .card.offcanvas-violet .offcanvas-panel > .card-footer {
    background-color: #fff !important;
    border-radius: 0 0 14px 14px !important;
}

/* Variante GRISE : bande du même gris que le panneau (chrome fondu une pièce),
   textes sombres et badge d'icône accentué d'origine. */
.offcanvas > turbo-frame > .card.offcanvas-gray > .card-header {
    background-color: #f0f0f0 !important;
}

/* Pas de croix : la fermeture passe par le backdrop / Échap. On ne masque que
   le bouton de dismiss — les toolbars custom de certaines modales restent. */
.offcanvas > turbo-frame > .card > .card-header .card-toolbar .btn[data-bs-dismiss="offcanvas"] {
    display: none !important;
}

/* …sauf en mobile : l'offcanvas couvre tout l'écran (pas de backdrop cliquable)
   et Échap n'existe pas au tactile — la croix redevient le seul moyen de fermer. */
@media (max-width: 575.98px) {
    .offcanvas > turbo-frame > .card > .card-header .card-toolbar .btn[data-bs-dismiss="offcanvas"] {
        display: inline-flex !important;
        margin-right: 0.5rem;
    }
    .offcanvas > turbo-frame > .card.offcanvas-violet > .card-header .card-toolbar .btn[data-bs-dismiss="offcanvas"] {
        color: #fff;
    }
}

/* Pied FONDU dans le panneau : même fond, aucun trait — la barre d'action
   flotte sur le gris (ou le blanc en flush). */
.offcanvas > turbo-frame > .card .offcanvas-panel > .card-footer {
    position: relative;
    z-index: 2;
    border-top: 0 !important;
    background-color: transparent !important;
}

/* Type CARD ({% set offcanvas_type = 'card' %}) : la carte blanche de contenu
   est gérée par la coquille. Elle colle aux bords (le scroll est interne, donc
   la scrollbar vit DANS la carte), porte une ombre haute qui la détache de la
   bande d'entête ; son arrondi bas se lit contre le gris du pied, sans
   chevauchement (le scroll interne garantit qu'elle s'arrête pile au pied). */
.offcanvas .offcanvas-content-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 3;               /* au-dessus de la bande d'entête et du pied */
    /* Chevauche la bande d'entête : les coins arrondis de la carte se découpent
       dans sa couleur (l'entête a un padding bas compensé, voir plus haut). */
    margin-top: -14px;
    border-radius: 14px !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.06) !important;
}
.offcanvas .offcanvas-content-card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    /* Écarte la zone de scroll des bords : la barre est décalée vers l'intérieur
       et ne chevauche plus les coins arrondis de la carte. */
    margin: 10px 6px 10px 0;
}

/* ===========================================
   Offcanvas Parking Feature
   =========================================== */

/* État "parked" pour les offcanvas à gauche */
.offcanvas-start.parked {
    transform: translateX(calc(-100% + 60px)) !important; /* Laisse 60px visible */
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3) !important; /* Ombre pour indication visuelle */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Effet hover sur offcanvas parked */
.offcanvas-start.parked:hover {
    transform: translateX(calc(-100% + 80px)) !important; /* Petit aperçu au survol */
}

/* État "parked" pour les offcanvas à droite (au cas où) */
.offcanvas-end.parked {
    transform: translateX(calc(100% - 60px)) !important;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.offcanvas-end.parked:hover {
    transform: translateX(calc(100% - 80px)) !important;
}

/* Poignée cliquable pour rouvrir l'offcanvas parked */
.offcanvas-park-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 80px;
    background: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.offcanvas-start .offcanvas-park-handle {
    right: 0;
    border-radius: 8px 0 0 8px;
}

.offcanvas-end .offcanvas-park-handle {
    left: 0;
    border-radius: 0 8px 8px 0;
}

.offcanvas-park-handle:hover {
    background: var(--bs-primary-active);
    width: 70px;
}

.offcanvas-park-handle i {
    color: white;
    font-size: 20px;
    transition: transform 0.2s ease;
}

.offcanvas-park-handle:hover i {
    transform: translateX(3px);
}
/* Curseurs (input range) : le pouce suit l'accent posé localement via --range-accent
   (ex. le type de pièce dans la création d'acompte/partielle), repli sur primary —
   sans cela il reste sur le bleu Bootstrap par défaut, hors thème. */
.form-range::-webkit-slider-thumb {
    background-color: var(--range-accent, var(--bs-primary));
}
.form-range::-moz-range-thumb {
    background-color: var(--range-accent, var(--bs-primary));
}
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}