/* ======================== */
/* BOOTSTRAP customizations */
/* ======================== */
#loginBackdropRight {
    background-color:var(--bkg-color1);
}

@font-face {
  font-family: 'Twemoji Country Flags';
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url('../webfonts/TwemojiCountryFlags.woff2') format('woff2');
}

@font-face {
  font-family: 'Brush Script MT';
  src: url('../webfonts/BrushScriptMT/BrushScriptMT.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

trad {
  font-weight:inherit !important;
}
.custom-text-color{
  color:var(--txt-color14);
}
@media (min-width: 1400px) {

  .col-xxl-3, .col-xxl-9{
    position: relative;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  .col-xxl-9{
    flex: 0 0 75%;
    max-width: 75%;
    -ms-flex: 0 0 75%;
  }
  .col-xxl-3{
    flex: 0 0 25%;
    max-width: 25%;
    -ms-flex: 0 0 25%;
  }
  .justify-content-xxl-end{
    -ms-flex-pack: end !important;
    justify-content: flex-end !important ;
  }
}
@media (min-width:765px){
  div.row.widget{
    width: 133%;
    margin-right: 0%;
    margin-left: 0%;
  }
  .navbar-expand-lg{
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .nav-border {
    display: none;
  }
  .nav-border2 {
    display: none;
  }
  .nav-right{
    display: flex !important;
  }
}
.option-class{
  padding-left: 70px;
    
  
}
.navbar {
    padding: 0rem;
    padding-top: 0.1rem;
}

.navbar-brand {
  margin-right: 0;
  padding: 5px 8px;
  margin-top: -2px;
}

td#headlignesfactType{
  width: 40px;
}
td#headlignesfactDescription{
  width: 480px;
}
td#headlignesfactQte{
  width: 40px;
}
td#headlignesfactPu,
td#headlignesfactRemise,
td#headlignesfactTotalLigne{
  width: 80px;
}
td#headlignesfactVide{
  width: 12px;
}
@media (max-width: 1140px){
  input.evenementFacturation{
    padding-left: 0%;
    padding-right: 0%;
  }
  thead#headlignesfact{
    width: 50% !important;
  }
  td#headlignesfactDescription{
    width: 5px !important;
  }
  td#headlignesfactQte{
    width: 4px !important;
  }
  td#headlignesfactPu,
  td#headlignesfactRemise,
  td#headlignesfactTotalLigne{
    width: 80px;
  }
  td#headlignesfactVide{
    width: 12px;
  }
}
form label.labelEvenementFacturation{
  float: left;
  clear: left;
  text-align: left;
  padding-right: 1em;
  /* #10421 — G3 : eviter la coupure mid-mot des libelles (ex. "Nu-méro",
     "Com-men-taire") causee par hyphens:auto + overflow-wrap:break-word
     herites. Les libelles restent entiers sur une ligne. */
  hyphens: none;
  overflow-wrap: normal;
}
form label.labelEvenementFacturation:not(label.switch){
}
#frmaction{
  clear:both;
  width:100%;
  border-top:1px solid var(--bor-color5);
}
#frmaction input{
  margin:auto;
}
div#resultat{
  text-align:left;
}
#factNumero{
  font-weight:bold;
}
#devisNumero{
  font-weight:bold;
}
#infoNum{
  clear:both;
  color: var(--txt-color7);
  font-weight:bold;
  text-align:end;
}

.iEvenementFacturation {
  cursor: pointer
}
#labelDevisAcompte, #labelFactureAcompte {
  width: max-content;
  margin: 0;
  font-size: 0.875rem;
}
#devisAcompte, #factAcompte {
  width: 80px;
  font-size: 0.875rem !important;
}
@media (max-width: 992px) {
  .image-mobile-badge{
    width:200px !important;
    height:250px !important;
  }
  .max-width-mobile{
    max-width:100% !important;
  }
  .flex_mobile_wrap{
    display:flex;
    flex-wrap:wrap;
  }
  .navbar-nav .dropdown-menu {
    position: fixed;
    top: 50px;
    left: auto;
    right: auto;
    float: none;
  }
  .table-responsive nav {
    margin-left:0 !important;
    left: 0 !important;
    padding-left: 10px;
  }
  .table-responsive nav ol {
    padding-left: 0;
  }
  .buttons-container {
    margin-left: auto;
  }
  .search-input {
      width: 177px !important;
  }
  .table-responsive.table-nav {
      padding: 2px !important;
  }

  .table-responsive.table-nav .buttons-container {
      padding-top: .25rem !important;
  }
  #Chat{
    flex-direction: column-reverse;
  }
  .chat-search-wrapper, .chat-wrapper{
    width: 100%!important;
    margin: 0!important;
    max-height: 500px;
    overflow-y: scroll;
  }
  .chat-search-wrapper{
    margin-top: 20px!important;
  }
  .color-button-mobile{
    background-color: var(--bkg-color108) !important;
  }
  .under-button-mobile{
    width: 33%;
    margin-bottom:5px;
  }
  .label-button-mobile{
    width: 80px;  margin-bottom:0rem !important;
    position:relative;
    top: -2px;
    left: -2px;
  }
  .text-button-mobile{
    font-size:0.875em !important;
  }
  .switch-down{
    top:3px !important;
    bottom:-3px !important;
  }

}
.navbar-ebrigade {  
  background-color: var(--bkg-color1);
  color: var(--txt-color1);
  height: 50px;
  border-bottom: 1px solid var(--bor-color4);
}

.fixed-top{
  z-index:1050 !important;
}

#myTab {
  margin: 0 5px;
}

.nav.nav-tabs.nav-tabs-line .nav-link.active, .nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled), .nav.nav-tabs.nav-tabs-line .show>.nav-link {
    background-color: var(--bkg-color1);
    border: 0;
    border-bottom:1px solid var(--bor-color6);
}
.nav.nav-tabs.nav-tabs-line .nav-item:first-child .nav-link {
    margin-left: 0;
}
.nav.nav-tabs.nav-tabs-line .nav-link {
  background-color: var(--bkg-color1);
    border: 0;
    -webkit-transition: color .15s ease,background-color .15s ease,border-color .15s ease,-webkit-box-shadow .15s ease;
    transition: color .15s ease,background-color .15s ease,border-color .15s ease,-webkit-box-shadow .15s ease;
    transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
    transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease,-webkit-box-shadow .15s ease;
    padding: .85rem 0;
    margin: 0 0;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  background-color:var(--bkg-color1);
  color: var(--txt-color11);
}
.nav-link:focus{
  color: var(--txt-color11);
}
/* .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {

} */
.nav-tabs .nav .nav-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .75rem 1.5rem;
    color: var(--txt-color9);
}
.nav-tabs .nav-link {
    border-top: none;
    border-left: none;
    border-right: none;
    transition-duration: .2s;
    color: var(--txt-color10);    
    /* padding: 0.4rem 1rem 0.5rem 1rem; */
    padding: 0.2rem 1rem;
}
.nav-tabs .nav-item {    
    margin-left: 10px;
    
}
.nav-tabs{
  padding-top: 12px;
  padding-bottom: 8px;
}
.nav-tabs .nav-item:first-child {
    margin-left: 0;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    font-weight: normal;
    border: none !important;
    background-color: var(--bkg-color8);
    color: var(--txt-color1);
    border-radius: 0.42rem; 
}

.nav-tabs {
    background-color: var(--bkg-color9);
    align-items: center;
    align-self: auto;
    justify-content: flex-start;
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    border: none !important;
}

.nav-tabs .nav-link.active {
    border-radius: 0.42rem;    
    background-color: var(--bkg-color8);
    color: var(--txt-color1);
    font-weight: normal;
    /* margin-bottom: 5px; */
}


.form-group {
  display: inline-block; 
}
  
form {
    display: inline;
}

.custom-toggler {
    border-color: var(--bor-color2);
    margin-bottom: 0;
    margin-top: 0;
}

.card {
    background-color: var(--bkg-color1);
    border-radius: 14px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cardCustomFields {
  overflow: visible !important;
}

.card-header {
    padding-top: 8px;
    padding-right: 12px;
    padding-bottom: 3px;
    padding-left: 20px;
    text-align: left;
    display:inline;
    font-size: 1.175rem;
    font-weight: 600;
}

.card-footer {
    padding-top: 4px;
    padding-right: 12px;
    padding-bottom: 3px;
    padding-left: 10px;
}

.nodowntoggle::after {
  display: none;
}

.card-button {
   padding: 5px !important;
}

.card-link {
   padding: 5px !important;
   margin-right:5px;
   margin-left:5px;
}
.card-link.active>span {
  color: white;
}

/* ============================== */
/* menu lat�ral                   */
/* ============================== */

@media (min-width: 1200px) {
  .td-min-width {
    min-width:180px;
  }

}

@media (max-width: 1200px) {
  .reporting-bg {
    background-size: 35%!important;
  }
}

@media (max-width: 920px) {

  .navbar-lateral {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .nav-logo {
    /*padding-top: 20px;*/
    padding-top: 0px;
  }
  .no-col-padding {
    padding-right:0px !important;
    padding-left:0px !important;
  }

  .col-lateral {
    left: -100px;
  }
  .navbar-lateral {
    width: 285px;
    left: -270px;
  }
  .col-lateral .nav-lateral {
    margin-left: 100px;
  }
  .nav-right {
    display: none;
  }
  .nav-chat {
    width: 50px;
    height: 25px;
    margin-right: 0;
  }
  .nav-top-item{
    padding-right: 10px;
    padding-left: 10px;
  }
  .nav-icon {
    margin-top:4px;
  }
  .nav-text {
    font-size: 0.875rem;
  }
  .button-left {
    padding-left: 11px;
    padding-right: 11px;
    padding-bottom: 0;
    padding-top: 1px;
  }
  .button-right {
    padding-left: 2px;
    padding-right: 4px;
    padding-bottom: 0;
    padding-top: 1px;
  }
  .button-open {
    position: absolute;
    left: 45px;
    top: 16%;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0;
    padding-top: 0;
  }
  .button-close {
    position: absolute;
    left: 45px;
    top: 16%;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0;
    padding-top: 0;
  }
  .nav-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -51%);
  }
  .nav-text {
    padding-top: 5px;
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 5px;
  }
  .nav-text.nav-btn {
    padding-top:5px;
  }
  .logo-small {
    overflow: hidden;
    width: 41.5px;
  }
  .nav-badge {
    position: relative;
    width: 50px;
    height: 28px;
    background-color: var(--bkg-color1) !important;
    border: 1px solid var(--bor-color7);
    color: var(--txt-color10) !important;
  }
  .collapse-menu {
    display: none;
  }
  .link-doc {
    display: none;
    left: 0;
    width: 185px!important;
  }
}

@media (min-width: 921px) {
  .sous_niveau_button{
    margin-right:3px !important;
  }
  .dropdown_improved{
    width:320px !important;
  }
  .col-lateral {
    left: -100px;
  }
  .col-lateral .navbar-lateral {
    margin-left: 100px;
  }
  .item-lateral {
    background-color: var(--bkg-color1);
  }
  .item-lateral:hover span,.item-lateral:hover  i {
    color: var(--txt-color11);
  }
  .item-lateral:hover  .chevron,.item-lateral [aria-expanded='true']  .chevron  {
    transition-duration: 0.5s;
    transform: rotate(90deg);
  }
  .chevron{
    color: var(--txt-color5);
    font-size: 9px;
    transition: transform 0.25s ease, color 0.15s ease;
  }
  .item-lateral:hover .chevron {
    color: var(--txt-color11);
  }
  .nav-center {
    position: absolute;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -52%);
  }
  
  .nav-text {
    padding-right: 15px;
    padding-top: 3px;
    padding-left: 15px;
    padding-bottom: 4px;
  }
  .nav-text.nav-btn {
    padding-top:9px;
  }
  .nav-badge {
    position: relative;
    width: 50px;
    height: 28px;
    background-color: var(--bkg-color1) !important;
    border: 1px solid var(--bor-color7);
    color: var(--txt-color10) !important;
  }
  
  .space-left {
    margin-left: 215px;
    margin-right: -5px;
  }
  
  .space-left.collapsed {
    margin-left: 44px;
  }
  
  .row:not(.accueil) {
     width:100%;
  }
  
  .no-col-padding {
    padding-right:6px !important;
    padding-left:6px !important;
  }
}
.placement_btn{
    width: auto !important;
}
.placement_btn2{
    padding-top: 0.1rem !important;
}
.placement_btn3{
    margin-left: 0.1rem !important;
    margin-right: 0.2rem !important;
}
.placement_btn4{
    margin-top: 0.1rem !important;
}
.placement_btn5{
    margin-top: -0.1rem !important;
}
.placement_btn6{
    margin-bottom: -1.5rem !important;
}
.ombre_btn{
    box-shadow: 0px 1px 3px rgb(0 0 0 / 15%) !important;
}
.w_dropdown{
    width: fit-content !important;
}
.back_white{
background-color: var(--bkg-color110);
border-radius: 10px;
padding: 8px;
}
@media (max-width: 991px) {
    .space-left {
        margin-left: -5px;
        margin-right: -5px;
    }
    .nav-top {
      display: flex;
      flex-direction: row;
    }

    /* Audit marge mobile — wrappers .container-fluid.col-12 utilisés par
       BootstrapTable->setClassDiv() (notes_frais_choice, evenement_choice,
       upd_personnel_tabs, accesclient, etc.) — 15px*2 de padding gaspillé
       sur viewport étroit. On compacte à 4px sur mobile uniquement.

       NOTE : sur upd_personnel_tabs (mon compte → notes de frais) il y a
       un EMPILEMENT de 3 couches de padding : .container-fluid (12px) >
       .col-sm-12 (15px) > .container-fluid.col-12 (15px) = 42px de marge
       gauche. On les réduit toutes pour libérer l'espace tableau. */
    .container-fluid.col-12,
    .container-fluid.px-4,
    .container-fluid.pl-3.pr-4 {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    /* Empilements internes de #upd_personnel_tabs_content (mon compte) :
       on neutralise les paddings hérités des cols Bootstrap pour que le
       tableau prenne toute la largeur. */
    #upd_personnel_tabs_content .container-fluid,
    #upd_personnel_tabs_content .col-sm-12,
    #upd_personnel_tabs_content [class*="col-"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    /* Tables BootstrapTable elles-mêmes n'ont pas de marges, mais leurs
       toolbars peuvent en avoir — on rétrécit le wrapper directement. */
    .bootstrap-table .fixed-table-toolbar {
        padding-left: 4px;
        padding-right: 4px;
    }
}

.profil-picture {
  /* 56px : matche le plancher réel de ebNormalizeAvatarSize() — la branche
     sans photo (renderPersonnelAvatar(..., 20)) rend en réalité 56px via son
     style inline, donc cette classe doit suivre pour ne pas changer de
     diamètre selon qu'il y a une photo ou non. */
  height: 56px;
  width: auto;
  overflow: hidden;
  border-radius: 15px;
  border: 2px var(--bor-color2) solid;
}

.col-lateral {
  text-align: left;
  background-color: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  padding-top: 44px;
  padding-left: 0;
  padding-right: 0;
  z-index: 1040;
}

.col-lateral.collapsed {
    width: 50px;
}

.navbar-lateral {
  height: 100%;
  box-shadow: 1px 0 8px rgba(0,0,0,0.06);
  border-right: 1px solid rgba(0,0,0,0.06);
}

.dropdown-menu {
  min-width: 100px !important;
  max-width: 100vw;
  border: none;
  box-shadow: 2px 1px 3px var(--sha-color5) !important;
}

.div-scroll {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 20px;
  background-color: #fff;
  padding-top: 6px;
}
.div-scroll::-webkit-scrollbar{
	width: 4px;
	height: 4px;
	background-color: transparent;
}

.div-scroll::-webkit-scrollbar-thumb
{
	background-color: var(--bkg-color18);
	border-radius: 4px;
}
.div-scroll::-webkit-scrollbar-thumb:hover {
	background-color: #e55b00;
}

/* Scrollbar du contenu principal - même style que le menu latéral.
   width = vertical, height = horizontal — on harmonise les deux à 4px
   pour ne pas avoir des scrollbars horizontales épaisses qui jurent. */
::-webkit-scrollbar{
	width: 4px;
	height: 4px;
	background-color: transparent;
}
::-webkit-scrollbar-thumb{
	background-color: var(--bkg-color18);
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #e55b00;
}


.div-help {
  width: 220px;
}

.nav-text {
  /* color: rgb(188, 188, 207); */
  color: var(--txt-color13);
}

.text-violet {
  /* color: rgb(188, 188, 207); */
  color: var(--txt-color13);
}

.nav-text:hover {
  text-decoration: none;
  color: var(--txt-color11);
}

.nav-left {
  display: flex;
  flex-direction: row;

}

.nav-center {
  display: flex;
  justify-self: center;
  justify-content: center;
  align-items: center;
  height: 45px;
  padding-top: 1.600px;
}

.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
}

.nav-lateral {
  width: 100%;
  background-color: #fff;
  padding-top: 4px;
  padding-left: 0px !important;
  z-index: 50;
  padding-bottom: 30px;
}

.nav-icon {
  justify-content: center;
  display: flex;
  height: 24px;
  align-items: center;
}

.nav-logo {
  position: relative;
  left: 10px;
  align-self: flex-start;
}

.nav-logo-text {
  margin-left: 10px;
}

.logo-lateral {
  color: var(--txt-color14);
  font-size: 0.87rem;
  font-weight: bold;
  left: -5px;
  width: 225px;
}

.logo-lateral:hover {
  color: var(--txt-color14);
}

.logo-small {
  left: -5px;
  padding: 3px 8px;
}

.logo-small:hover {
  background-color: var(--bkg-color10);
  border-radius: 5px;
}

.margin-li {
  margin-bottom: 2px;
  font-size: 12px;
}

.no-padding-tb {
  padding-top: 0;
  padding-bottom: 0;
}

.hover-white:hover {
  color: var(--txt-color1);
}
.hover-black:hover{
  color: var(--txt-color27);
}

.hover-user:hover {
  color: var(--txt-color11);
}

.navtop-hover:hover  {
  background-color: var(--bkg-color11);
  border-radius: 5px;
  /* color: var(--txt-color1); */
}

.item-lateral {
  width: 100%;
  flex-direction: row;
  line-height: 24px;
  margin-bottom: 1px;
}

.item-lateral .show {
  background-color: #fff;
}

.link-lateral {
  color: var(--txt-color15);
  font-size: 0.84rem;
  line-height: 1.2rem;
  padding: 7px 12px 7px 42px;
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  border-radius: 0;
}

.sub-link-lateral  {
  font-size: 0.875rem !important;
  line-height: 1.3rem;
  color: var(--txt-color14) !important;
}
.nav-link .sub-link-lateral  {
  font-size: 0.875rem !important;
}

.link-lateral:hover {
  background-color: rgba(0,0,0,0.03);
  color: var(--txt-color11);
  box-shadow: inset 3px 0 0 var(--txt-color11);
}

.sub-link-lateral:hover {
  background-color: var(--bkg-color5);
  color: var(--txt-color14);
}

.div-lateral {
  box-shadow: none;
  padding-top: 0;
  background: #f9f9fb;
}

.sub-menu {
  background-color: #fff;
  position: fixed;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 6px 0;
}
/* Bridge between menu item and floating sub-menu to prevent mouseleave */
.sub-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 100%;
}

.logo-lateral:hover {
  background-color: var(--bkg-color5);
}

.item-lateral [aria-expanded=true] {
  background-color: rgba(0,0,0,0.025);
  box-shadow: inset 3px 0 0 var(--txt-color11);
  font-weight: 600;
}

.dropdown-lateral {
  color: var(--txt-color3);
  font-size: 0.88rem;
  font-weight: 500;
  font-family: "Twemoji Country Flags", 'Poppins', Helvetica, sans-serif;
  padding: 10px 14px 10px 16px !important;
  transition: color 0.15s ease, background-color 0.15s ease;
  letter-spacing: -0.01em;
}

.dropdown-lateral:hover {
  text-decoration: none;
  background-color: rgba(0,0,0,0.025);
}

.icon-lateral  {
  height: 20px;
  width: 20px;
  font-size: 16px;
  margin-right: 12px;
  color: var(--txt-color5);
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}
.item-lateral:hover .icon-lateral,
.item-lateral [aria-expanded=true] .icon-lateral {
  color: var(--txt-color11);
}

.menu-actif, .menu-actif i {
  color: var(--txt-color11);
  font-weight: 600;
}

.menu-actif:hover {
  color: var(--txt-color11);
  background-color: rgba(0,0,0,0.03);
}

.button-lateral{
  background-color: transparent;
  color: var(--txt-color15);
  width: 200px;
  margin-left: 0;
  padding-left: 0;
  border: none;
  font-size: 0.84rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.nav-border,.nav-border2 {
  border-left: 1px var(--txt-color13) solid;
  position: absolute;
  right: 4%;
  margin-right: 0;
  width: 30px;
  height: 27px;
  top: 23%;
}

.button-left {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.button-right {
  border: none;
}

.button-close {
  display: none;
}

.background-opacity {
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--bkg-color52);
  z-index: 10;
}
.toggle-lateral {
  background-color: #fff;
  border-right: 1px solid rgba(0,0,0,0.06);
  width: 220px;
}

.collapse-menu {
  position: fixed;
  bottom: 0px;
  background: #fff;
  width: 220px;
  height: 44px;
  line-height: 44px;
  text-align: left;
  color: var(--txt-color5);
  cursor: pointer;
  border-right: 1px solid rgba(0,0,0,0.06);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-left: 16px;
  font-size: 0.85rem;
  transition: color 0.15s ease, background 0.15s ease;
}
.collapse-menu:hover {
  color: var(--txt-color11);
  background: rgba(0,0,0,0.02);
}

.decollapse-menu {
  position: fixed;
  bottom: 0px;
  left: 0;
  background: #fff;
  width: 49px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: var(--txt-color5);
  cursor: pointer;
  display: none;
  border-right: 1px solid rgba(0,0,0,0.06);
  border-top: 1px solid rgba(0,0,0,0.06);
  transition: color 0.15s ease;
}
.decollapse-menu:hover {
  color: var(--txt-color11);
}

.icon-collapse {
  position: absolute;
  left: 32%;
  top: 28%;
  color: var(--txt-color10);
}

.collapse-menu:hover{
  background: var(--bkg-color5);
}

.decollapse-menu:hover{
  background: var(--bkg-color5);
}

.link-doc {
  color: var(--txt-color10);
  width: 220px;
  position: fixed;
  bottom: 0;
  background: var(--bkg-color13);
  text-align: center;
  height: 24px;
  border-right: 1px var(--bor-color17) solid;
  padding-top: 0px;
}

/* ============================== */
/* badges                         */
/* ============================== */

.badge {
  background-color: var(--bkg-color14);
  color: var(--txt-color1);
  border-radius: 5px;
  font-size: 100%;
}
#myTab.nav .badge{
  vertical-align: top;
  font-size: 10px;
}
.counter-badge{
  border-radius: 60px !important;
  background-color: var(--bkg-color8) !important;
}
/* #9819 — système de notification unifié :
   badge-circle rouge (iOS-style) pour count > 0, masqué pour count = 0,
   indépendant de l'état actif/inactif de l'onglet parent.
   Les classes active-badge et inactive-badge sont conservées en alias
   pour compat avec les 70+ appelants existants de generate_counter_badge. */
.active-badge,
.inactive-badge,
.notification-badge {
  background-color: #EF4444 !important;
  color: #fff;
}
/* Badge vide (count = 0) : masqué. Spécificité > la règle .badge-circle
   principale (qui utilise html body.eb-has-topbar-v2 .badge-circle). */
.badge-circle.is-zero,
html body .badge-circle.is-zero,
html body.eb-has-topbar-v2 .badge-circle.is-zero {
  display: none !important;
}

.badge:hover {
  text-decoration: none !important;
}

.red-badge {
  background-color: var(--bkg-color20) !important;
  color: var(--txt-color1);
  padding: 3px;
  border-radius: 5px;
  -moz-border-radius: 5px; 
}

.orange-badge {
  color: var(--txt-color1);
  background-color: var(--bkg-color18) !important;
}

.yellow-badge {
  color: var(--txt-color1);
  background-color: var(--txt-color96);
}

.green-badge {
  color: var(--txt-color1);
  background-color: var(--txt-color17) !important;
}

.blue-badge {
  color: var(--txt-color1);
  background-color: var(--txt-color21) !important;
}

.red-info-badge {
  color: var(--txt-color6); 
  background-color: var(--bkg-color60)
}

.simple-badge {
  font-weight: normal;
  color: var(--txt-color10);
  margin-top: 4px;
  font-size: 12px;
  border-radius: 5px;
  -moz-border-radius: 5px; 
}

.simple-badge:hover .red-badge:hover{
  background-color: var(--bkg-color19) !important;
  text-decoration: none !important;}

.badge0 {
  background-color: var(--bkg-color21); }

.badge1, .badgeA {
  background-color: var(--bkg-color22); }

.badge2, .badgeB {
  background-color: var(--bkg-color20); }

.badge3, .badgeC {
  background-color: var(--bkg-color8); }

.badge4, .badgeD {
  background-color: var(--bkg-color24); }
  
.badge5, .badgeE {
  background-color: var(--bkg-color25); }

/* #9819 — Badge notification style iPhone : exposant, coin haut-droit,
   en dehors du flux du texte parent. Le parent immédiat (le tab/span
   qui wrap le label) doit être position:relative pour ancrer le badge.
   Les !important neutralisent l'héritage Bootstrap .badge (padding 0.65em,
   display inline-block) qu'on trouve sur les appelants legacy qui passent
   'badge active-badge' comme $badgeClass à generate_counter_badge. */
/* Spécificité > `body.eb-has-topbar-v2 .badge` (dashboard-modern.css) grâce à
   `html body` (1,2,1 > 0,2,1) pour neutraliser padding 4px 10px / font-size 11px /
   border-radius 999px qui s'appliquent via .badge sur les appelants legacy. */
.badge-circle,
html body .badge-circle,
html body.eb-has-topbar-v2 .badge-circle {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  /* #10283 — pill plus net : hauteur 16, padding latéral 6 pour que
     le chiffre ne touche jamais le bord, bord blanc fin, pas d'ombre
     diffuse qui rendait l'aspect "baveux". */
  width: auto !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  color: #fff !important;
  line-height: 1 !important;
  padding: 0 6px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  letter-spacing: 0 !important;
  border: 1.5px solid #fff !important;
  box-shadow: none !important;
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  margin: 0 !important;
  vertical-align: top;
  box-sizing: border-box !important;
  pointer-events: none;
  z-index: 2;
}
/* Le wrapper direct qui contient un badge-circle doit être en position:relative
   pour que le positionnement absolu s'ancre dessus, et ne pas cropper le badge
   qui déborde des coins (pas d'overflow:hidden). */
.eb-htab,
.eb-tab-scroll-item,
.eb-tab-scroll-item > a,
.nav-link,
a:has(> .badge-circle),
span:has(> .badge-circle) {
  position: relative;
  overflow: visible !important;
  z-index: 1;
}
/* Au survol d'un onglet voisin, son fond hover ne doit pas recouvrir le
   badge "qui déborde" (right: -6px) de l'onglet précédent. On baisse le
   z-index de l'onglet survolé pour que les autres (et leurs badges
   z-index:2) restent au-dessus. */
.nav-tabs .nav-link:hover,
.sub-tabs .nav-link:hover,
.eb-tab-scroll-item:hover,
.eb-tab-scroll-item > a:hover {
  z-index: 0 !important;
}

/* Menu horizontal niveau 1 (eb-tab-scroll) : badge notification EN EXPOSANT,
   positionné en absolute en superscript sur le coin top-right du label,
   alignement identique aux sous-menus. Le parent .int-marge est relatif
   (règle .nav-link / a:has(.badge-circle) plus haut) et overflow visible.
   On garde le badge DANS la bounding-box de l'item (right:-2px) pour ne
   pas être coupé par overflow-x:auto du .eb-tab-scroll-track. */
.eb-tab-scroll-track .badge-circle,
.eb-tab-scroll-menu .badge-circle,
#menu .badge-circle,
.int-marge > .badge-circle {
  position: absolute !important;
  top: -2px !important;
  /* right: 0 (au lieu de négatif) : le badge reste DANS la bounding-box
     de l'onglet → ne déborde pas sur l'onglet suivant même à 2-3 chiffres. */
  right: 0 !important;
  margin: 0 !important;
  vertical-align: top !important;
  box-shadow: none !important;
  border: 1.5px solid #fff !important;
  line-height: 1 !important;
}
/* .int-marge : on réserve plus de padding-right (20px) pour que le badge
   absolu (qui peut faire jusqu'à ~24px pour "99+") reste dans l'onglet
   sans toucher le label ni déborder sur le suivant. */
.int-marge:has(> .badge-circle) {
  padding-right: 20px !important;
  position: relative !important;
  overflow: visible !important;
}
/* Le track scrollable crop verticalement (overflow-y:auto implicite).
   On réserve un peu de hauteur pour que le sup/badge (vertical-align:super)
   ne soit pas rogné en haut ni en bas. */
.eb-tab-scroll-track {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Valeurs ≥ 100 → forme pill un peu plus large (même hauteur 16px) */
.badge-circle.high-value,
html body .badge-circle.high-value,
html body.eb-has-topbar-v2 .badge-circle.high-value {
  width: auto !important;
  min-width: 22px !important;
  height: 16px !important;
  border-radius: 999px !important;
  padding: 0 6px !important;
  font-size: 9.5px !important;
  top: -6px !important;
  right: -10px !important;
}

/* ============================== */
/* dd                             */
/* ============================== */

.dd-select {
    border-radius: 5px !important;
}

.dd-select * {
  color: var(--txt-color3) ;
  font-weight: normal;
}

.dd-option-image, .dd-selected-image {
  max-height: 30px !important;
}

.dd-selected-text, .dd-option-text {
  line-height: 20px !important;
  font-size: 11px;
  vertical-align: middle; }

.dd-option-text {
  font-size: 11px; }

/* ------------------------------------------------------------------ */
/*  ddSlick — dropdown-initial escape-hatch (issue #6975)             */
/* ------------------------------------------------------------------ */
/*
 * ddSlick renders its option list as a position:absolute panel that
 * inherits visibility from the nearest ancestor with overflow:hidden.
 * Bootstrap .card uses overflow:hidden for rounded corners, so the
 * options popover gets clipped and the user only sees the first row
 * or two.
 *
 * Add the opt-in class `.dropdown-initial` to the outermost container
 * that could clip the popover (typically the card or the form). The
 * descendant selector then neutralizes overflow on the whole subtree
 * so the popover can escape every intermediate wrapper.
 *
 * Scoped to the explicit opt-in class → cannot regress layouts that
 * do not use ddslick. No current file uses this class: it is safe
 * additive CSS until explicitly applied.
 */
.dropdown-initial,
.dropdown-initial .card,
.dropdown-initial .card-body,
.dropdown-initial .card-header,
.dropdown-initial .card-footer,
.dropdown-initial form,
.dropdown-initial .modal-body,
.dropdown-initial .modal-content,
.dropdown-initial .tab-content,
.dropdown-initial .tab-pane,
.dropdown-initial .row,
.dropdown-initial [class^="col-"],
.dropdown-initial .dd-container {
    overflow: visible !important;
}
/* Lift the options list above sticky headers / modals. */
.dropdown-initial .dd-options {
    z-index: 1060;
}

.dropdown-menu  {
    background-color: var(--bkg-color107);
    color: var(--txt-color3) !important;
    font-family: "Twemoji Country Flags", 'Poppins', Helvetica, sans-serif;
}

.dropdown-menu  > a, .dropdown-menu  > .dropdown-item {
    color: var(--txt-color14);
    font-size: 14px;
}

.dropdown-menu > .dropdown-item-profil:hover, .dropdown-menu li a:hover:not(.selected) {
  background: var(--bkg-color109);
}

.card-header, .card-footer {
  background-color: var(--bkg-color26) !important;
  color: var(--txt-color16) !important; 
}
.card-title {
  font-size: 1.175rem;
  font-family: "Twemoji Country Flags", 'Poppins', Helvetica, sans-serif;
  margin-bottom: 0.25rem;
}

.card-title strong a {
  color: var(--txt-color88) !important; 
}

.card-footer > a:not(.btn) {
  color: var(--txt-color1) !important; }

.card-default {
  border-style: none;
  padding: 0;
  margin-bottom: 16px;
  background-color: var(--bkg-color1) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  border-radius: 14px;
}

.input-group-addon {
  color: var(--txt-color14); 
}

.input-group-grey {
  background-color: var(--bkg-color6);
}

.input-group{
  border-radius: 5px 5px 5px 5px;
  
}
.input-group2{
  height: auto;
}
.input-group .form-control,.input-group-text,.input-group-text-end{
  height: 36px !important;
}
.input-group .input-group-text,.input-group .input-group-text-end{
  background-color: var(--bkg-color12);
  border-color: var(--bor-color9);
}
.input-group-text {
  background-color: var(--bkg-color1);
  color: var(--txt-color3);
}
 .input-group .input-group-text{
  border-radius: 5px 5px 5px 5px !important;
  border: none;
  border-right: 1px solid var(--bor-color9) ;
}
.input-group .input-group-text-end{
  border-radius: 5px 5px 5px 0px !important;
} 
.input-group-text + .form-control{
  border-radius: 5px 5px 5px 0px !important;
  border-left: none;
}
.input-group .form-control:first-child{
  border-radius: 5px 5px 0px 5px !important;
  /* border-right: 1px solid #e4e6ef ; */
}
.input-group-text-end{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
}

.form-control:active, .form-control:focus {
  background-color: var(--bkg-color12);
  color: var(--txt-color92);
}
.form-control:disabled:not(.nogray), .form-control[readonly]:not(.nogray) {
    background-color: var(--bkg-color109);
    opacity: 1;
}
.dropdown-menu .no-results {
  background-color: var(--bkg-color45) !important;
}

ul.token-input-list-facebook, ul.token-input-list-facebook li input{
  background: var(--bkg-color12) !important;
  border: none !important;
  border-radius: 5px;
}

.barOverFlow{  
  position: relative;
  top: 40px;
  overflow: hidden; 
  width: 220px; 
  height: 110px; 
}
.bar-circle{  
  width: 220px;
  height: 220px; 
  border-radius: 50%;
  border: 10px solid var(--bor-color10);     
  border-bottom-color: var(--bor-color11);  
  border-right-color: var(--bor-color11);
  transform: rotate(45deg);
}
.infos-half-progress{
  position: relative;
  top: -70px;
  padding-top: 50px;
  font-size: 23px;
}



@media print {
  .fixed-table-toolbar, .fixed-table-pagination{
    display: none;
  }
  a[href]:after {
    content: none !important; }
  img.no-resize {
    min-height: 110px; } }

.img-max-18 {
  max-height: 18px;
  height: 18px; }

.img-max-20 {
  max-height: 20px;
  height: 20px; }

.img-max-22 {
  max-height: 22px;
  height: 22px; }

.img-max-30 {
  max-height: 30px;
  height: 30px; }
  
.img-max-35 {
  max-height: 35px;
  height: 35px; }

.img-max-40 {
  max-height: 40px;
  height: 40px; }

/* Icône d'activité dans les listes — alignée sur la taille des vignettes
   personnel (40px, cf. ebNormalizeAvatarSize / renderActiviteIcon). */
.eb-activity-icon {
  width: 40px;
  height: 40px;
  max-height: 40px;
  object-fit: contain;
  vertical-align: middle; }
  
.img-max-45 {
  max-height: 45px;
  height: 45px; }

.img-max-50 {
  max-height: 50px;
  height: 50px; }

.img-max-60 {
  max-height: 60px;
  height: 60px; }
  
.img-max-90 {
  max-height: 90px;
  height: 90px; }

.img-max-120 {
  max-height: 120px;
  height: 120px; }
  
.img-max-160 {
  max-height: 160px;
  height: 160px; }

.img-zoom {
  max-height: 100%;
  height: 50%;
  max-width: 100%;
  width: 50%; }

/* ============================== */
/* modal                          */
/* ============================== */
.modal {
  top: 20% !important;
  outline: none; 
  z-index: 1200;
}
.modal-backdrop{
  z-index:1055 !important;
}
.modal-content {
  background-color: var(--bkg-color59);
}
.modal-header {
  border-color: var(--bor-color32);
}
.modal .close {
  color: var(--txt-color27);
}

.dispo-closed {
  background-color: var(--bkg-color60) !important;
  color: var(--txt-color28);
}

div[id="modal_ajout_absence"] {
    top: 5% !important;
    z-index:1200 !important;
}

div[id="modal_mail_modify"] {
    top: 5% !important;
    z-index:1200 !important;
}

div[id="modal_modif_vehicules"] {
    top: 5% !important;
    z-index:1200 !important;
}

div[id="modal_modif_materiel"] {
    top: 5% !important;
    z-index:1200 !important;
}

div[id="modal_modif_responsables"] {
    top: 5% !important;
    z-index:1200 !important;
}

div[id="modal_detail_absence"] {
    top: 5% !important;
    z-index:1056 !important;
}

div[id^="modal_equipe"] {
    position: fixed;
    top: 5% !important;
}
  
div[id^="modal_modif_competences"] {
    position: fixed;
    top: 5% !important;
  }

div[id^="modal_insert_option"] {
    position: fixed;
    top: 5% !important;
    z-index:1056 !important;
}

/* Modal d'inscription à une activité */
div[id^="openModalInscription"]{
    position: fixed;
    top: 0% !important;
}
@media (max-width: 992px) {
    div[id^="openModalInscription"]{
        top: 0 !important;
    }
    div[id^="openModalInscription"] .modal-dialog{
        max-height: 80%;
        margin-top: 10%;
    }
}
@media (max-width: 680px) {
    div[id^="openModalInscription"] .modal-dialog{
        max-height: 80%;
        margin-top: 25%;
    }
}
  
/* ============================== */
/* counter on font awesome icons  */
/* ============================== */
.fa-stack[data-count]:after {
  position: absolute;
  right: 0%;
  top: 15%;
  content: attr(data-count);
  font-size: 30%;
  padding: .6em;
  border-radius: 999px;
  line-height: .75em;
  color: var(--txt-color1);
  background: var(--bkg-color27);
  text-align: center;
  min-width: 2em;
  font-weight: bold; }
  
  
.fa-green{
  color: var(--txt-color17)
}
.fa-green:hover{
  color: var(--txt-color18);
}

/* =================== */
/* eBrigade CSS        */
/* =================== */

/*a[id=carte_waze] {
    padding-left: 0.3em;
    padding-right: 0.3em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    border-radius: 5px;
}
/*a[id=discussion_whatsapp] {
    padding-left: 0.3em;
    padding-right: 0.3em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    border-radius: 5px;
    background-color: #00cc00;
}*/

.lightgray {
  /* background-color: #F1F1F1; */
  background-color: var(--bkg-color28);

}

/* Test label */
.test {
  border-bottom: 2px solid #fd7e14 !important;
}
.test-label-container {
  position: relative;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: transparent;
}
.test-label-container > span {
  position: fixed;
  z-index: 10;
  margin-top: 15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fd7e14;
  padding: 0 5px;
  color: var(--txt-color1);
  font-size: 10px;
  text-transform: uppercase;
  border-radius: 0 0 5px 5px;
  pointer-events: none;
}
.production {
  background-color: var(--bkg-color1) !important;
}


BODY {
  /* background-color: white; */
  background-color: var(--bkg-color28) !important;  
  color: var(--txt-color14) !important;
  font-family: "Twemoji Country Flags", 'Poppins', Helvetica, sans-serif;
  margin: 0px;
  padding: 5px;
  padding-top: 50px; }

BODY.top15 {
  padding-top: 15px; }

BODY.top50 {
  padding-top: 50px; }

.GREENBODY {
  color: var(--txt-color19); }

.BLACKBODY {
  color: var(--txt-color20); }

p {
  padding-top: 7px; }

#kt_body {
  margin: 0;
  padding: 0;
}

.h-100vh {
  height: 100vh;
}

.h-100p {
  height: 100%;
}

TR {
  font-size: 13px; }

TR.bigFont {
  font-size: 15px; }

TR.pad1 {
  padding: 1px; }

TR.pad0 {
  padding: 0px; }

/* LIENS */
A {
  color: var(--txt-color21); }
A.btn {
  color: var(--bs-btn-color); }
A.btn i, A.btn span,
.btn i, .btn span {
  color: inherit; }

a:hover {
  text-decoration: underline;
  color: var(--txt-color22); }

a.s {
  text-decoration: none; }

a.z {
  text-decoration: none; }

a:hover.s {
  text-decoration: underline;
  color: var(--txt-color23); }

a:hover.z {
  text-decoration: underline;
  color: var(--txt-color23); }

.flex-grow {
  flex-grow: 1;
}

.h-100vh {  
  height: 100vh;
}

/*ROUNDED BORDERS */
table {
  border-collapse: separate;
  border: solid var(--bor-color12) 2px;
  border-radius: 5px;
  -moz-border-radius: 5px; }

.noBorder {
  border: 0px !important;
  border-collapse: collapse !important;
}

.noBorder.fullWidth {
  width: 100% !important;
}

.widget-table {
  width: 100%;
}

/* .column-size{
  width: 50%;
} */
  
.table-condensed {
  border: 0px;
}

TR.white {
    background-color: var(--bkg-color1) ;
}

html input[type="button"], input[type="reset"], input[type="reset"], input[type="submit"], button:not(.btn-group button):not(.gmnoprint button),  optgroup, option {
  -moz-border-radius: 5px !important;
  border-radius: 5px !important;
}


html input, select, textarea, optgroup, option, password, file {
  color: var(--txt-color3);
  padding-left: 2px;
  border-radius: 5px !important;
  font-size: 14px;
  border: 0px;
  background: var(--bkg-color12);
  /* box-shadow: 1px 1px 1px lightgrey; */
  line-height: 24px;
}

option {
    background: var(--bkg-color30)!important;
}
.normal {
  color: var(--txt-color14) !important;
}
.categorie {
  color: var(--txt-color14) !important;
  background-color: var(--bkg-color66);
  font-size:10pt;
}
.categorie.type {
  background-color: var(--bkg-color1);
}
input[type="radio"], input[type="checkbox"]{
  box-shadow: none !important;
}

.banner {
  max-height:200px;
  max-width:100%;
  border-radius: 5px;
  -moz-border-radius: 5px;
}

.banner2 {
  max-height:250px;
  max-width:100%;
  border-radius: 5px;
  -moz-border-radius: 5px;
}

input:not([type="button"]):focus, textarea:focus, select:focus{
  background-color: var(--bkg-color31);
  outline: none !important;
  box-shadow: 0 0 10px var(--sha-color8);
  border: 1px solid var(--bor-color6);
}

/* 
input[type='text'], select, textarea{
  width: 100%;
}

input[name="prenom2"], select[name="habilitation"], select[name="habilitation2"], input[name="city"] {
  width:90%;
  float: left;
}
*/
.text-dark {
  color: var(--txt-color91) !important;
}
.border {
  border-color: var(--bor-color1);
}
.btn, button, input[type="submit"] {
  border: 0px;
  box-shadow: 0 1px 3px 0 var(--sha-color9);
}

.btn.btn-dark {
  color: var(--txt-color1);
  background-color: var(--bkg-color32);
  border-color: var(--bor-color13);
}

.btn-danger {
  color: var(--txt-color1) !important;
}
.btn-danger.disabled {
  opacity: 0.65;
}

.btn-default {
  color: var(--txt-color14) !important;
  background-color: var(--bkg-color1);
}

.btn-default:hover {
  background-color: var(--bkg-color15) ;
  fill: var(--fil-color1);
}

.btn-light-primary {
 color: var(--txt-color24);
 background-color: var(--bkg-color33);
 border-color: var(--bor-color3)
}

.btn.btn-light {
    color: var(--txt-color92) !important;
    background-color: var(--bkg-color12);
    border-color: var(--bor-color14);
    box-shadow: none !important;
    font-weight: 500;
}

.btn.btn-active {
  background-color: var(--bkg-color34);
  color: var(--txt-color1);
  cursor: pointer;
}

.cadre-action {
  background-color: var(--bkg-color35);
  color: var(--txt-color1);
  padding: 0.55rem 0.75rem;
  border-radius: 0.42rem;
  font-weight: 600 !important;
  font-size: 0.925rem;
}

.item-block {
  padding: 10px 0px;
  display: flex;
  justify-content: center;
  text-align: center;
}

.item-block .icon-action {
  color: var(--txt-color26);
  font-size: 2rem;
  padding-bottom: 5px;
}

.item-block:hover {
  background-color: var(--bkg-color36) ;
  color: var(--txt-color1);
}

.item-block .item-action {
  text-decoration: none;
  color: var(--txt-color27);
}
.item-block:hover .item-action {
  color: var(--txt-color1);
}

.btn.btn-text-success, .btn-text-success{
    color: var(--txt-color28);
}

.btn.btn-text-primary {
    color: var(--txt-color24);
}

.btn.btn-text-dark {
    color: var(--txt-color4);
}

.btn.btn-text-danger {
    color: var(--txt-color6);
}

.btn.btn-text-warning {
    color: var(--txt-color29);
}

.btn.btn-warning, .swal2-actions .btn-warning {
    color: var(--txt-color1);
    background: var(--bkg-color37);
}

.btn.btn-warning:hover, .btn.btn-warning:active, .swal2-actions .btn-warning:hover, .swal2-actions .btn-warning:active {
    color: var(--txt-color1) !important;
    background: var(--bkg-color38);
}

.btn-disabled {
  background-color:var(--txt-color94) !important;
  color:var(--txt-color98) !important;
  border-color:var(--txt-color94) !important;
}

.plain {
  padding-left: 3px !important; }

select:disabled {
  background: var(--bkg-color4);
}

.no-round-left {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
  
.no-round-right {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.no-round {
  border-radius: 0 !important; }


.section-toggle{
  color: var(--txt-color3);
}
button.label {
  background: none;
  border: none;
  text-decoration: underline;
  color: var(--txt-color14); }

select {
  height: 24px; }

input:disabled {
  background: var(--bkg-color4); }

.TabHeader {
  color: var(--txt-color1);
  font-weight: bold;
  background-color: var(--bkg-color26); }

.newTabHeader{
  color: var(--txt-color30);
  font-weight: bold;
  background-color: var(--bkg-color1) !important;
  border-bottom: solid 1px var(--bor-color4);
  font-size: 1rem;
  }

.newTable{
  border: none;
  width: 100%;
  border-collapse: collapse;
  border-radius: 0.5em;
  overflow: hidden;
}

/* .newTable tr.newTable-tr:nth-child(even) {
   background-color: #f5f4f6; 
} */

.newTable tr.newTable-tr {
  background-color: var(--bkg-color1);
}

.newTable tr.newTable-tr:hover{
    /* background-color: var(--bkg-color16) !important; */
    background-color: var(--bkg-color28);
}

.newTable-tr td {
  padding: 7px 5px;
}

.newTable-tr td:first-child, .newTabHeader th:first-child {
  padding-left: 10px;
}

.newTable-tr td:last-child, .newTabHeader th:last-child {
  padding-right: 10px;
}

.newTabHeader th {
  padding: 12px 5px;
}

/*SEPARATIONS*/
.charte {
  background-color: var(--bkg-color5); }

.dark {
  background-color: var(--bkg-color21); }

.bright {
  background-color: var(--bkg-color39); }

/*MENUS VERTICAUX*/
.FondMenu {
  background-color: var(--bkg-color26);
  border: 1px solid var(--bor-color12); }

.MenuRub {
  background-color: var(--bkg-color40);
  font-weight: bold;
  letter-spacing: 1px;
  padding-left: 4px;
  color: var(--txt-color31); }

.Menu {
  padding: 0px 0px 0px 4px;
  line-height: 15px;
  text-decoration: none; }

.Bottom {
  background-color: var(--bkg-color26);
  padding-left: 4px;
  color: var(--txt-color31); }

.SousTotal {
  color: var(--txt-color32);
  font-weight: bold;
  background-color: var(--bkg-color26); }

.TabTotal {
  color: var(--txt-color33);
  font-weight: bold;
  background-color: var(--bkg-color41); }

@media (max-width: 769px) {
    .smalldropdown {
        max-width: 245px;
        font-size: 14px;
    }
}

@media (min-width: 769px) {
    .mediumdropdown {
        max-width: 550px;
    }
    
    .smalldropdown {
        max-width: 260px;
        font-size: 14px;
    }
  .search-menu{
    width: 220px;
    background-color: var(--bkg-color42);
    color: var(--txt-color27);
    box-shadow: none
  }

  .search-menu:hover{
    width: 220px;
    opacity: 1;
    color: var(--txt-color27);
    box-shadow: none;
  }

  .search-menu:focus{
    background-color: var(--bkg-color42);
    /* color: #403f3f; */
    border: none;
  }

  .inputWithIcon  {
    position: relative;
  }

  .inputWithIcon:hover {
    position: relative;
    border: none;
  }

  .inputWithIcon #divIconSearch  {
    position: absolute;
    right: 15px;
    color: var(--txt-color34);
    top: 5px;
    transition: 0.3s;
  }

  .inputWithIcon:hover #divIconSearch  {
    color: var(--txt-color13);   
  }

}
.smalldropdown4{
  max-width: 125px;
  font-size: 14px; 
}
.smalldropdown2 {
  max-width: 220px;
  font-size: 14px; 
}
  
.smallerdropdown2 {
  max-width: 150px;
  font-size: 14px; }
 
.smalldropdown3 {
  max-width: 80px;
  font-size: 14px; }
  
.smalldropdown3-nofont {
  max-width: 80px; }

.smallcontrol {
  max-width: 200px;
  font-size: 14px; }

.smallcontrol2 {
  max-width: 280px;
  font-size: 14px; }
  
.smallcontrol3 {
  max-width: 320px;
  font-size: 14px; }

.small {
  font-size: 10px;
  font-style: italic; }

.small2 {
  font-size: 10px;
  text-align: center; }

/* Badge Commun : style Opérationnel avec couleur bleue */
.badge-commun {
  color: #1565C0;
  background-color: #E3F2FD;
  font-weight: bold;
  border-radius: 1rem;
  padding: 0.2em 0.5em;
  font-size: 10px;
  margin-left: 0.3em;
}

.smallgrey {
  font-size: 10px;
  color: var(--txt-color15); }

.smallblue {
  font-size: 10px;
  color: var(--txt-color14); }

.smallorange {
  font-size: 10px;
  font-weight: bold;
  color: var(--txt-color35); }

.smallblack {
  font-size: 10px;
  color: var(--txt-color27); }

.smallred {
  font-size: 10px;
  font-weight: bold;
  color: var(--txt-color7); }

.smallgreen {
  font-size: 10px;
  color: var(--txt-color36); }

.blue12 {
  font-size: 14px;
  color: var(--txt-color14); }

.purple12 {
  font-size: 14px;
  color: var(--txt-color23); }

.green12 {
  font-size: 14px;
  color: var(--txt-color36); }
  
.green16 {
  font-size: 16px;
  font-weight: bold;
  color: var(--txt-color36); }

.darkcyan12 {
  font-size: 12px;
  font-weight: bold;
  color: var(--txt-color37); }

.orange12 {
  font-size: 12px;
  font-weight: bold;
  color: var(--txt-color38); }

.red12 {
  font-size: 12px;
  font-weight: bold;
  color: var(--txt-color7); }
  
.red16 {
  font-size: 16px;
  font-weight: bold;
  color: var(--txt-color7); }

.black12 {
  font-size: 12px;
  font-weight: bold;
  color: var(--txt-color27); }

.mediumgrey {
  font-size: 12px;
  color: var(--txt-color10)699; }

.SPP {
  color: var(--txt-color7) !important;
  font-size: 10pt; }

.SPV {
  color: var(--txt-color40) !important;
  font-size: 10pt; }

.SPPV {
  color: var(--txt-color23) !important;
  font-size: 10pt; }

.engaged {
  background-color: var(--bkg-color43);
  font-size: 10pt; }

.TITLE {
  color: var(--txt-color27);
  font-weight: bold;
  font-size: 10pt; }

.underline {
  text-decoration: underline; }

a.BigButton {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 30px;
  color: var(--txt-color14);
  text-decoration: none;
  vertical-align: top; }

a.BigButton:hover {
  color: var(--txt-color41);
  font-weight: bold; }

.inputText50 {
  width: 50px; 
  margin: 1px; }
  
.thinlabel {
  margin-bottom: 0;
}
.primaryColor {
  color: var(--txt-color21);
}

#users {
  margin-top: 2px;
  margin-left: 2px;
  margin-right: 2px;
  width: 250px;
  text-align: left;
  font-size: 12px;
  padding: 2px;
  height: 400px;
  height: 100%;}

/* Pagination */
.paginate {
  font-size: 11px;
  margin-bottom: 3px;
}
.margin-card-body{
  margin-bottom:5px;
}
.page-link {
  color: var(--txt-color14);
  background: var(--bkg-color30);
  border-color: var(--bor-color32);
  box-shadow: none;
}
.page-link:hover {
    color: var(--txt-color93);
    background-color: var(--bkg-color109);
    border-color: var(--bor-color32);
}
.page-item.disabled .page-link {
    color: var(--txt-color94);
    background-color: var(--bkg-color108);
    border-color: var(--bor-color32);
}
.noboxshadow, #token-input-input-facebook-theme {
  box-shadow: none !important;
}

ul.token-input-list-facebook{
  width: 100% !important;
}
div.token-input-dropdown-facebook{
  width: 100% !important;
  max-width: 300px !important;
}
a.paginate {
  border: 1px solid var(--bor-color15);
  padding: 1px 6px 1px 6px;
  text-decoration: none;
  color: var(--txt-color42);
}

ul.pagination {
  margin-bottom: 0px;
  margin-top: 14px;
}

.tooltip-inner {
  background-color: var(--bkg-color21);

}

a.paginate:hover {
  background-color: var(--bkg-color44);
  color: var(--txt-color1);
  text-decoration: underline; }

a.current {
  border: 1px solid var(--bor-color5);
  padding: 1px 6px 1px 6px;
  cursor: default;
  background: var(--bkg-color44);
  color: var(--txt-color1);
  text-decoration: none; }

span.inactive {
  border: 1px solid var(--bor-color16);
  font-size: 11px;
  padding: 1px 6px 1px 6px;
  color: var(--txt-color43);
  cursor: default; }

.top_menu_item {
    padding-top:0.8rem;
}

.progressbox {
    background: var(--bkg-color45);
    font: 12px Consolas, monospace, serif;
    color: var(--txt-color44);
    max-width:800px;
    max-height:750px;
    border-radius: 8px;
    padding: 6px;
    overflow:auto;
}

.hide_always {
    display: none !important;
}
.display_none {
  display: none;
}

.boldy {
    font-weight: 600;
    color: var(--txt-color3);
    font-size: 14px;
}

.fixed-table-pagination .float-right.pagination {
    margin-right: 5px;
}

@media (max-width: 992px) {
    .hide_mobile {
        display: none !important;
    }

    /* #9684 — alias hideOnMobile utilisé sur les colonnes bootstrap-table
       (personnel_stats, vehicule_tabs, victimes, etc.). La classe existait sans
       règle CSS → les colonnes marquées hideOnMobile restaient visibles en mobile. */
    .hideOnMobile {
        display: none !important;
    }

    .bootstrap-table {
       margin:3px;
    }

    select:not(.page-link) {
    height: 30px;
    }

    select {
        max-width: 260px;
    }

    select#subsection-select{
      max-width: none !important;
    }
    
    select[id=new_type_vehicule] {
        height: 37px;
        max-width: 100%;
    }
    select[id=new_type_materiel] {
        height: 37px;
        max-width: 100%;
    }
    select[id=newchef] {
        height: 37px;
        max-width: 100%;
    }
    select[id=select-competence] {
        height: 37px;
        max-width: 100%;
    }
    
    .small_iphone{
        font-size: 10px;
        text-align: center;
    }
    .img-max-200 {
        max-height:150px;
        height:150px;
    }
    .top_menu_item {
        padding-left:0rem;
        padding-bottom:0.5rem;
    }
    
    .navbar-ebrigade{
        overflow-y:auto;
        height: 50px;
    }
    
    .option-ebrigade {
        font-size:14px;
    }

    button.btn.dropdown-toggle.btn-default{
      float: none;
    }

    .dropdown.bootstrap-select.col-md-4{
      margin: 0 auto!important;
    }

    .search-element{
      text-align: center!important;
    }
    
    .gps{
        position:absolute;
        z-index:1;
        top:120px;
        left:0px;
        margin-bottom:10px;
    }
    
    /* bug fix - no overlay */
    .modal-backdrop {
        display: none;
    }
    .modal {
    background: var(--bkg-color46);
    }
    
}
@media (max-width: 992px) {
    .modal {
        top: 0vh !important;
    }
  
    .modal-dialog.modal-dialog-scrollable{
      margin-top: 20%;
     
    }
  
    #modal_ajout_absence{
      top: 0% !important;
    }
    #modal-prelev.modal.fade.show{
        top: 0vh !important;
    }
  
}


@media (max-width: 560px) {
    span.hide_mobile{
        display: none !important;
    }
    .hide_mobile2 {
        display: none !important;
    }

    /* #9684 — alias hideOnMobile2 (même motif que hideOnMobile : appliqué aux
       colonnes bootstrap-table mais aucune règle CSS ne l'implémentait). */
    .hideOnMobile2 {
        display: none !important;
    }
    .dropdown-right-mobile{
        padding-right: 5px;
    }
    .turn-phone-info {
      display: flex !important;
    }
    
}

@media(min-width: 561px){
  .only_mobile2{
    display: none !important;
  }
  .row-mobile2{
    overflow: visible !important;
  }
}
@media (min-width: 769px) {
    .hide_desktop2 {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .navbar-lateral {
      width: 220px;
    }
    .only_mobile {
        display: none !important;
    }
    .top_menu_item {
        padding-left:1rem;
    }
    .option-ebrigade {
        font-size:15px;
    }
    
    .bootstrap-table {
       margin:25px;
    }
    
    .subtext-tr{
        padding-left:38px; 
        margin-top:-10px; 
        padding-bottom:4px;
    }
    
    .gps{
        position:absolute;
        z-index:1;
        top:102px; 
        left:200px;
    }
    
    .gps2{
        top:58px !important;
    }
}

.option-ebrigade.level-0 {
    padding-left: 14px;
}

.option-ebrigade.level-1 {
    padding-left: 24px;
}

.option-ebrigade.level-2 {
    padding-left: 34px;
}

.option-ebrigade.level-3 {
    padding-left: 44px;
}

.option-ebrigade.level-4 {
    padding-left: 54px;
}
/*
.option-ebrigade *:first-child::before {
    content: '';
    display: block;
    border: 1px solid #919191;
    border-top: none;
    border-right: none;
    width: 8px;
    position: absolute;
    top: 0;
    margin-left: -10px;
    height: 20px;
}

.option-ebrigade.level-0::before {
    content: '';
    display: none;
}*/

.level-1-alone,.level-1-first,.level-1-last,.level-1-middle,.level-2-alone,.level-2-first,.level-2-last,.level-2-middle,.level-3-alone,.level-3-first,.level-3-last,.level-3-middle,.level-4-alone,.level-4-first,.level-4-last,.level-4-middle{
  padding: 0 1.5rem;
}

.level-1-first span::before, .level-2-first span::before, .level-3-first span::before, .level-4-first span::before, .level-1-middle span::before, .level-2-middle span::before, .level-3-middle span::before, .level-4-middle span::before{
  content: url(../images/tree_split_transparent.png);
  display: inline;
  position:relative;
  margin-right: 5px;
}

.level-2-alone::before, .level-3-alone::before, .level-4-alone::before,.level-2-middle::before, .level-3-middle::before, .level-4-middle::before,.level-2-first::before, .level-3-first::before, .level-4-first::before,.level-2-last::before, .level-3-last::before, .level-4-last::before{
  content: url(../images/tree_vertline_transparent.png);
  display: inline;
  position:relative;
}

.level-1-alone span::before, .level-2-alone span::before, .level-3-alone span::before, .level-4-alone span::before, .level-1-last span::before, .level-2-last span::before, .level-3-last span::before, .level-4-last span::before{
  content: url(../images/tree_corner_transparent.png);
  display: inline;
  position:relative;
  margin-right: 5px;
}

.level-2-alone span::before, .level-2-last span::before, .level-2-first span::before, .level-2-middle span::before{
  padding-left: 14px;
}
.level-3-alone span::before, .level-3-last span::before, .level-3-first span::before, .level-3-middle span::before{
  padding-left: 28px;
}
.level-4-alone span::before, .level-4-last span::before, .level-4-first span::before, .level-4-middle span::before{
  padding-left: 46px;
}

table.cards tr {
  display: inline-block;
  width: 20%;
  background: var(--bkg-color1) !important;
  padding: 1% 1.5%;
}

table.cards tr td {
  width: 50% !important;
}

table.cards .card-views .nocards {
  display: none;
}

table.cards .card-views .card-view-title {
  display: none !important;
}

/* =================== */
/* footer              */
/* =================== */

.container {
  width: auto;
  padding: 0 15px;
}

.container-fluid{
  background-color: var(--bkg-color28);
  margin-top: 0px !important;
}

.footer {
    display: block !important;
    background-color: var(--bkg-color1);
}

/* =================== */
/* redefine frameworks  */
/* =================== */
.datepicker table tr td span:hover, .datepicker table tr td span.focused {
  background-color: var(--bkg-color72);
}

.datepicker3 {
  color: var(--txt-color3) ;
}

input.datepicker {
  border-radius: 0;
  height:36px !important;
}
.datepicker td, .datepicker th {
  background-color:var(--bkg-color1);
}
.datepicker td:hover, .datepicker th:hover {
  background-color:var(--bkg-color1) !important;
}

/* doit être au-dessus de tout */
.datepicker-dropdown {
  z-index: 9999 !important; 
}

.biginput {
  font-size: 16px;
  text-align:center;
  margin-left:8px;
}

.big-left-input {
  font-size: 20px;
  text-align:left;
  margin:6px;
  padding-left:8px;
  background-color: var(--bkg-color1);
}

.medium-input {
  font-size: 16px;
  text-align:left;
  margin:6px;
  padding-left:8px;
  width:260px;
  background-color: var(--bkg-color1);
}

.small-input {
  font-size: 16px;
  text-align:left;
  margin:6px;
  padding-left:6px;
  width:140px;
}

.datepicker2 {
  border-radius: 5px !important;
  font-size: 0.875rem;
  box-shadow: 0px 1px 3px var(--sha-color10) !important;
}

.label2 {
  margin-bottom:0;
  margin:2px;
}

.labeled-message{
  height: 36px;
  border: solid 1px var(--bkg-color8);
  background-color:var(--bkg-color33);
  border-radius: 0.42rem;
}

.dropdown.bootstrap-select.show{
  z-index: 1700;
}

.bootstrap-select {
  width: 320px;
  margin-right: 5px;
}
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: 320px;
}

@media (min-width: 1500px) {
  .bootstrap-select-large {
    width: 360px !important;
  }
}

.bootstrap-select-small {
  width: 100px !important;
}
.bootstrap-select-small:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: 100px;
}

.bootstrap-select-xs {
  width: 60px !important;
}
.bootstrap-select-xs:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: 60px;
}

.bootstrap-select-medium {
  width: 155px !important;
}
.bootstrap-select-medium:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: 155px;
}
.fs_select .btn{
  font-size: 0.875rem ;
}

.dropdown-item {
  color: var(--txt-color90);
}

.dropdown-item:hover {
  color: var(--txt-color90);
  background: var(--bkg-color109);
}

.dropdown-item.active, .dropdown-item:active {
  color: var(--txt-color27);
  font-weight: bold;
  background-color: var(--bkg-color1);
}

.dropdown-item.materiel {
  color: var(--txt-color14);
  background-color: var(--bkg-color1);
}

table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  font-size: 11pt !important;
  padding: 8px !important;
}


.span-date {
    width:50px;
    display:inline-block;
    margin-left:10px;
}

.ebrigade-h4 {
    font-size: 1.5rem;
    font-weight: 500;
}

.ebrigade-h6 {
    font-size: 1rem;
    font-weight: 500;
}
/*css of the piquet drag drop page*/
div[class^="listed"]:hover{
  /* box-shadow: 0 0 15px -5px #007bff; */
  background-color: var(--bkg-color134) !important;
}

.move-cursor{
cursor: move;
}
.ui-hover{
color: var(--txt-color21);
}
.ui-active{
border: 1px var(--bor-color25);
color: var(--txt-color21);
}

ul.dropzone, div[id^='poste']{
  background-color: var(--bkg-color9) ;
  border: dashed 2px var(--bor-color17);
}

ul.dropzone {
  flex-shrink : unset;
}

.dropzone.dropzone-default.dropzone-primary {
    border-color: var(--bor-color18);
}
.dropzone.dropzone-default {
    padding: 20px;
    text-align: center;
    cursor: pointer;
    border: 2px dashed var(--bor-color4);
        border-top-color: var(--bor-color4);
        border-right-color: var(--bor-color4);
        border-bottom-color: var(--bor-color4);
        border-left-color: var(--bor-color4);
    border-radius: 0.42rem;
}
.dropzone.dz-clickable {
    cursor: pointer;
}
.dropzone {
    min-height: auto;
}
.dropzone {
    min-height: 150px;
    background: var(--bkg-color1) !important;
    padding: 20px 20px;
}
.dropzone, .dropzone * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
    cursor: pointer;
}
.dropzone .dz-message {
    text-align: center;
    margin: 2em 0;
}
.dropzone.dz-clickable * {
    cursor: default;
}

#divPersonnel, #divVehicule {
  background-color: var(--bkg-color1);
}

a[id^="vehicule_"], a[id^="equipe_"]  {
  color: var(--txt-color7) !important;
}
a[id^="vehicule_"]:hover, a[id^="equipe_"]:hover  {
  cursor: pointer;
  text-decoration: underline var(--txt-color7) !important;
}

a[id^="section_"]:hover,a[id^="section_"]:hover * {
  color: var(--txt-color21) !important;
  text-decoration: none !important;
}

.form-group label {
    font-size: 1rem;
    font-weight: 400;
    color: var(--txt-color3);
}
.text-lg-right {
    text-align: right !important;
}
.col-form-label {
    padding-top: calc(0.65rem + 1px);
    padding-bottom: calc(0.65rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

.dropzone.dropzone-default .dropzone-msg-desc {
    color: var(--txt-color5);
    font-weight: 400;
    font-size: 1rem;
}
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
    cursor: pointer;
}

.table-container {
  margin: 20px 200px;
  padding: 20px;
  background: var(--bkg-color1);
  border-radius: .45rem;
}

.table-responsive {
  /* float: right; */
  padding: 0;
  margin-top: 0;
  overflow-x: visible;
}

.toolbar.table-responsive {
  padding: 0 1.6em .3em;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.toolbar.table-responsive .left {
  align-content: flex-start;
}

.toolbar.table-responsive .right {
  margin-bottom: 4px;
}

.toolbar.table-responsive .toggle-switch {
  position:relative;
  top:0;
  width: inherit !important;
}


.table thead th {
  border-color:var(--bor-color32);
}

.table {
 color: var(--txt-color90);
}

 .table-striped tbody tr:nth-child(odd) *:not(span,input,b,a,label,i,button,.modal,>.nohover):not(trad) {
  background-color: var(--bkg-color31);
} 

.table-striped-2 tbody tr:nth-child(even) *:not(span,label,button,a,b,.nohover,div,img,font,small,form,center):not(trad,input,i) {
  background-color: var(--bkg-color31);
}

.table-striped-no-modal tbody tr:nth-child(odd) *:not(span,label,button,a,i,input,.modal,.modal-dialog,.modal-content,.modal-body):not(trad) {
  background-color: var(--bkg-color31);
}

.table-striped-no-modal-2 tbody tr:nth-child(odd) *:not(span,button,a,i,b,label,input,.d-flex,.nohover,.modal,.modal-dialog,.modal-body,.filter-option,.dropdown,#security,.filter-option-inner,.filter-option-inner-inner, .warning-container):not(trad) {
  background-color: var(--bkg-color31);
}

.table-striped-upd_activity tbody tr:nth-child(odd) *:not(a,i,button, label,img,.d-flex,.no-striped,.ml-3):not(trad) {
  background-color: var(--bkg-color31);
  
}

.table-striped-in-modal tbody tr:nth-child(odd) * {
  background-color: var(--bkg-color31)!important;
  
  
}

.table-responsive.tab-buttons-container {
  padding: 0 1.0em !important;
}

.table-responsive.table-tabs {
  margin-bottom: 8px !important;
  /* border-bottom: solid 1px #ebedf3; */
  border: none;
  padding-bottom: none;
  line-height: 30px;
}


.table-responsive.table-tabs .sub-tabs.nav-tabs .nav-link:focus, .table-responsive.table-tabs .sub-tabs.nav-tabs .nav-link:hover {
    border-top: none;
    border-left: none;
    border-right: none;
    /* border-bottom: 1px solid #A6A6A6 !important; */
    color: var(--txt-color1);
    background-color: var(--bkg-color8);
    font-weight: normal;
}

.table-responsive.table-tabs .sub-tabs.nav-tabs .nav-item.show .nav-link, .table-responsive.table-tabs .sub-tabs.nav-tabs .nav-link.active {
    background-color: var(--bkg-color8);
    color: var(--txt-color1);
    /* color: #5A5A5A; */
    /* background-color: var(--bkg-color1); */
    /* font-weight: bold; */
    font-size: 12px;
    /* border-bottom: 1px solid #5A5A5A !important; */
    /* margin-top: 8px; */
}

/* .table-responsive.table-tabs .sub-tabs{
  margin-top: -10px !important;
} */

.table-responsive.table-tabs .sub-tabs.nav-link {
    display: block;
    padding: 0.2rem 1rem 0.5rem 1rem;
}

.table-responsive.table-tabs .sub-tabs.nav.nav-tabs .nav-item {
    font-size: 12px !important;
    /* margin-top: 5px; */
}
.bootstrap-table td, .bootstrap-table th {
  color:var(--txt-color3) !important;
  text-align: center;
}

@media (max-width : 990px) {
  .bootstrap-table td, .bootstrap-table td * {
    font-size: 12px !important;
    word-wrap : break-word;
  }
}
.fixed-table-container, .fixed-table-pagination{
  border-radius: 10px;
}
.fixed-table-pagination {
  background-color: var(--bkg-color1);
}
.fixed-table-container{
  background-color: transparent;
  border-radius: 10px 10px 0px 0px;
  padding-left: 0;
  margin-top: 8px;
}
.fixed-table-pagination{
  background-color: var(--bkg-color1);
  border-radius: 0px 10px;
}
/* Note: la visibilité de la pagination est gérée par bootstrap-table */
/* Masquer/réduire les conteneurs bootstrap-table vides */
.fixed-table-container:empty { display: none !important; }
.fixed-table-body:empty { display: none !important; }
.bootstrap-table.eb-no-data .fixed-table-pagination { display: none !important; }
.fixed-table-footer:not(:has(tr)) { display: none !important; }
.fixed-table-container:has(tbody tr:not(.no-records-found)) { background-color: var(--bkg-color1); }

.bootstrap-table.bootstrap4 {
  margin: 0;
}

.bootstrap-table.bootstrap5 {
  margin: 0;
}

.fixed-table-footer {
  display: none;
}
/* Nomalement remplac� par .breadcrumb-responsive nav */
.table-responsive nav {
  background: var(--bkg-color13);
  position: relative;
  margin-bottom: 0px;
  line-height: 26px;
  padding: 0;
}

.action-buttons {
  float: left;
  padding-left: 24px;
}

.action-buttons::before {
  content: '';
  display: block;
  position: absolute;
  height: 105px;
  width: 10px;
  margin: -83px 0 0 -12px;
  border-left: 1px solid var(--bor-color19);
  border-bottom: 1px solid var(--bor-color19);
}

.btn-generalites:hover{
  background-color: var(--bkg-color47) !important;}

.btn-activites:hover{
  background-color: var(--bkg-color48) !important;}

.btn-formation:hover{
  background-color: var(--bkg-color49) !important;}

@media (min-width: 992px) {
  .action-buttons::before {
      height: 125px;
      width: 30px;
      margin: -100px 0 0 -33px;
      z-index:-1;
  }
  .action-buttons {
     padding-left: 53px;
  }
}

.bootstrap-table .search-input, .bootstrap-table select {
  box-shadow: 0px 1px 3px var(--sha-color10) !important;  
  background-color: var(--bkg-color1);
  color: var(--txt-color3);
}

.buttons-container {
  margin: auto 0px;
}

.buttons-container a:not(.btn) > i {
  color: var(--txt-color85);
}
.buttons-container .btn i,
.buttons-container .btn span {
  color: inherit !important;
}

/* .buttons-container a i:before { */
  /* margin-left: -2px; */
/* } */

.buttons-container a:hover > i {
  color: var(--txt-color1);
}

/* .buttons-container a:hover i.excel-hover {
  color: var(--txt-color17);
}

.buttons-container a:hover i.pdf-hover {
  color: var(--txt-color7);
} */

.btn {
  box-shadow: 0px 1px 3px var(--sha-color10) !important;
}

.btn-white {
  background-color: var(--bkg-color1) !important;
  color: var(--txt-color3);
}

.btn-white:hover {
  color: var(--txt-color95);
}

.bg-white {
 background-color: var(--bkg-color1) !important;
}

.buttons-container .btn {
  height: 35px;
  margin: 0px 1.5px !important;
}

.fixed-table-pagination {
  padding-left: 40px !important;
  border-radius: 0px 0px 10px 10px !important;
}

.responsive-padding {
  padding: 0;
}

@media (max-width: 769px) {
  .reporting-text{
    width: 80%;
  }
  .reporting-bg{
    background-size: 52%!important;
  }
  #toolbar .toggle-switch {
      top: 2px !important;
  }
  #toolbar .toggle-switch {
      width: 194px !important;
      position: relative;
      display: inline-block;
  }
  .responsive-padding {
    padding-top: 30px;
  }
  .flex-column-mobile{
    flex-direction: column;
  }
  .btn-telecharger-mobile{
    position: relative!important;
    top: 0px;
  }
  .card-mobile{
    padding: 25px!important;
  }
}

.search-input {
  width: 300px;
}

.swal2-popup.swal2-toast {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
  padding: 0.625em;
  overflow-y: hidden;
  background: var(--bkg-color1);
  -webkit-box-shadow: 0 0 0.625em var(--sha-color11);
  box-shadow: 0 0 0.625em var(--sha-color11); }

.swal2-popup.swal2-toast .swal2-header {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 0; }

.swal2-popup.swal2-toast .swal2-title {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 0 0.6em;
  font-size: 1em; }

.swal2-popup.swal2-toast .swal2-footer {
  margin: 0.5em 0 0;
  padding: 0.5em 0 0;
  font-size: 0.8em; }

.swal2-popup.swal2-toast .swal2-close {
  position: static;
  width: 0.8em;
  height: 0.8em;
  line-height: 0.8; }

.swal2-popup.swal2-toast .swal2-content {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 0;
  font-size: 1em; }

.swal2-popup.swal2-toast .swal2-icon {
  width: 2em;
  min-width: 2em;
  height: 2em;
  margin: 0; }

.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.8em;
  font-weight: bold; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
    font-size: 0.25em; } }

.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em; }

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  top: 0.875em;
  width: 1.375em; }

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: 0.3125em; }

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: 0.3125em; }

.swal2-popup.swal2-toast .swal2-actions {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: auto;
  height: auto;
  margin: 0 0.3125em; }

.swal2-popup.swal2-toast .swal2-styled {
  margin: 0 0.3125em;
  padding: 0.3125em 0.625em;
  font-size: 1em; }

.swal2-popup.swal2-toast .swal2-styled:focus {
  -webkit-box-shadow: 0 0 0 1px var(--sha-color12), 0 0 0 3px var(--sha-color13);
  box-shadow: 0 0 0 1px var(--sha-color12), 0 0 0 3px var(--sha-color13); }

.swal2-popup.swal2-toast .swal2-success {
  border-color: var(--bor-color20); }

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 1.6em;
  height: 3em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 50%; }

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -0.8em;
  left: -0.5em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 2em 2em;
  transform-origin: 2em 2em;
  border-radius: 4em 0 0 4em; }

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -0.25em;
  left: 0.9375em;
  -webkit-transform-origin: 0 1.5em;
  transform-origin: 0 1.5em;
  border-radius: 0 4em 4em 0; }

.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em; }

.swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
  top: 0;
  left: 0.4375em;
  width: 0.4375em;
  height: 2.6875em; }

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
  height: 0.3125em; }

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
  top: 1.125em;
  left: 0.1875em;
  width: 0.75em; }

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
  top: 0.9375em;
  right: 0.1875em;
  width: 1.375em; }

.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
  -webkit-animation: swal2-toast-animate-success-line-tip 0.75s;
  animation: swal2-toast-animate-success-line-tip 0.75s; }

.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
  -webkit-animation: swal2-toast-animate-success-line-long 0.75s;
  animation: swal2-toast-animate-success-line-long 0.75s; }

.swal2-popup.swal2-toast.swal2-show {
  -webkit-animation: swal2-toast-show 0.5s;
  animation: swal2-toast-show 0.5s; }

.swal2-popup.swal2-toast.swal2-hide {
  -webkit-animation: swal2-toast-hide 0.1s forwards;
  animation: swal2-toast-hide 0.1s forwards; }

.swal2-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  z-index: 1060;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.625em;
  overflow-x: hidden;
  -webkit-transition: background-color 0.1s;
  transition: background-color 0.1s;
  -webkit-overflow-scrolling: touch;
}

.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
  background: var(--bkg-color50); }

.swal2-container.swal2-backdrop-hide {
  background: var(--bkg-color2) !important; }

.swal2-container.swal2-top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.swal2-container.swal2-top-start, .swal2-container.swal2-top-left {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start; }

.swal2-container.swal2-top-end, .swal2-container.swal2-top-right {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end; }

.swal2-container.swal2-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.swal2-container.swal2-center-start, .swal2-container.swal2-center-left {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start; }

.swal2-container.swal2-center-end, .swal2-container.swal2-center-right {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end; }

.swal2-container.swal2-bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }

.swal2-container.swal2-bottom-start, .swal2-container.swal2-bottom-left {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start; }

.swal2-container.swal2-bottom-end, .swal2-container.swal2-bottom-right {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end; }

.swal2-container.swal2-bottom > :first-child, .swal2-container.swal2-bottom-start > :first-child, .swal2-container.swal2-bottom-left > :first-child, .swal2-container.swal2-bottom-end > :first-child, .swal2-container.swal2-bottom-right > :first-child {
  margin-top: auto; }

.swal2-container.swal2-grow-fullscreen > .swal2-modal {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.swal2-container.swal2-grow-row > .swal2-modal {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.swal2-container.swal2-grow-column {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

.swal2-container.swal2-grow-column.swal2-top, .swal2-container.swal2-grow-column.swal2-center, .swal2-container.swal2-grow-column.swal2-bottom {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.swal2-container.swal2-grow-column.swal2-top-start, .swal2-container.swal2-grow-column.swal2-center-start, .swal2-container.swal2-grow-column.swal2-bottom-start, .swal2-container.swal2-grow-column.swal2-top-left, .swal2-container.swal2-grow-column.swal2-center-left, .swal2-container.swal2-grow-column.swal2-bottom-left {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.swal2-container.swal2-grow-column.swal2-top-end, .swal2-container.swal2-grow-column.swal2-center-end, .swal2-container.swal2-grow-column.swal2-bottom-end, .swal2-container.swal2-grow-column.swal2-top-right, .swal2-container.swal2-grow-column.swal2-center-right, .swal2-container.swal2-grow-column.swal2-bottom-right {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }

.swal2-container.swal2-grow-column > .swal2-modal {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.swal2-container.swal2-no-transition {
  -webkit-transition: none !important;
  transition: none !important; }

.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal {
  margin: auto; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-container .swal2-modal {
    margin: 0 !important; } }

.swal2-popup {
  display: none;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 32em;
  max-width: 100%;
  padding: 1.25em;
  border: none;
  border-radius: 0.3125em;
  background: var(--bkg-color1);
  font-family: inherit;
  font-size: .9rem; }

/* Filet de sécurité mobile : aucune swal ne doit déborder du viewport.
   Forces sur le container : padding 0 (pour neutraliser le 0.625em qui
   décalait le popup) + width:100vw + left:0. Sur le popup : width:100vw
   et margin:0 pour qu'il colle aux bords. overflow-x:hidden contient
   tout contenu interne (TinyMCE toolbar, tableaux, QR codes…). */
@media (max-width: 767px) {
    .swal2-container {
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
    }
    .swal2-container .swal2-popup {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden !important;
    }
}

/* #10552 — Modales swal2 contenant un formulaire avec table.noBorder
   (Dossier, Document, etc.) : sur mobile, les selectpicker et inputs
   débordaient horizontalement. On contraint la table interne à 100%
   de la largeur disponible et on plafonne tous les champs. Règle générique
   placée ici (main.css) pour couvrir toutes les pages, y compris celles
   qui ne chargent pas documents_browser.css. */
@media (max-width: 576px) {
    .swal2-content form table.noBorder {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
    }
    .swal2-content form table.noBorder td {
        max-width: 100%;
        word-wrap: break-word;
    }
    .swal2-content form table.noBorder td input,
    .swal2-content form table.noBorder td select,
    .swal2-content form table.noBorder td .bootstrap-select,
    .swal2-content form table.noBorder td .bootstrap-select > .dropdown-toggle {
        max-width: 100%;
        min-width: 0;
    }
}

/* Garde-fou global anti-debordement des champs hors de leur carte.
   Constate sur l'app mobile (card « Client » du CRM d'une activite) : les
   tables de formulaire (.noBorder / .table-fixe) etaient en table-layout
   auto et leurs inputs portent souvent size=35 → la largeur intrinseque des
   colonnes poussait la table au-dela de la carte une fois le col-xl-* empile,
   et les champs sortaient sur la droite.
   Generalise ici le correctif #10552 (jusque-la limite aux modales swal2) a
   TOUTES les cartes du produit. Scope mobile uniquement → zero regression
   desktop. .table-fixe est rendu reellement « fixe » (la classe ne portait
   aucune regle), et tout champ est plafonne a la largeur de sa cellule. */
@media (max-width: 767.98px) {
    .card table.table-fixe {
        table-layout: fixed;
    }
    .card table.noBorder,
    .card table.table-fixe {
        width: 100% !important;
        max-width: 100% !important;
    }
    .card table.noBorder td,
    .card table.table-fixe td {
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    .card .form-control,
    .card select,
    .card textarea,
    .card input:not([type=checkbox]):not([type=radio]):not([type=range]),
    .card .bootstrap-select,
    .card .bootstrap-select > .dropdown-toggle {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
}

.swal2-popup:focus {
  outline: none; }

.swal2-popup.swal2-loading {
  overflow-y: hidden; }

.swal2-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 1.8em; }

.swal2-title {
  position: relative;
  max-width: 100%;
  margin: 0 0 0.4em;
  padding: 0;
  color: var(--txt-color46);
  font-size: 1.875em;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  word-wrap: break-word; }

.swal2-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 1;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  gap: 0.25rem !important;
  margin: 1.25em auto 0; }


.swal2-actions:empty {
  display: none !important;
}

.swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
  opacity: 0.4; }

.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from( var(--bkg-color51) ), to( var(--bkg-color51) ));
  background-image: linear-gradient( var(--bkg-color51), var(--bkg-color51) ); }

.swal2-actions:not(.swal2-loading) .swal2-styled:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from( var(--bkg-color52) ), to( var(--bkg-color52) ));
  background-image: linear-gradient( var(--bkg-color52),  var(--bkg-color52 )); }

.swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 2.5em;
  height: 2.5em;
  margin: 0.46875em;
  padding: 0;
  -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  border: 0.25em solid var(--bor-color3);
  border-radius: 100%;
  border-color: var(--bor-color3);
  background-color: var(--bkg-color2) !important;
  color: var(--txt-color2) !important;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.swal2-actions.swal2-loading .swal2-styled.swal2-cancel {
  margin-right: 30px;
  margin-left: 30px; }

.swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  border: 3px solid var(--sha-color29);
  border-radius: 50%;
  border-right-color: var(--bor-color3);
  -webkit-box-shadow: 1px 1px 1px var(--sha-color12);
  box-shadow: 1px 1px 1px var(--sha-color12); }

.swal2-styled {
  margin: 0.3125em;
  padding: 0.625em 2em;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: 500; }

.swal2-styled:not([disabled]) {
  cursor: pointer; }

.swal2-styled.swal2-confirm {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: var(--bkg-color53);
  color: var(--txt-color1);
  font-size: 1.0625em; }

.swal2-styled.swal2-cancel {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: var(--bkg-color54);
  color: var(--txt-color1);
  font-size: 1.0625em; }

.swal2-styled:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 1px var(--sha-color12), 0 0 0 3px var(--sha-color13);
  box-shadow: 0 0 0 1px var(--sha-color12), 0 0 0 3px var(--sha-color13); }

.swal2-styled::-moz-focus-inner {
  border: 0; }

.swal2-footer {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 1.25em 0 0;
  padding: 1em 0 0;
  border-top: 1px solid var(--bor-color16);
  color: var(--txt-color47);
  font-size: 1em; }

.swal2-timer-progress-bar-container {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.25em;
  overflow: hidden;
  border-bottom-right-radius: 0.3125em;
  border-bottom-left-radius: 0.3125em; }

.swal2-timer-progress-bar {
  width: 100%;
  height: 0.25em;
  background: var(--bkg-color52); }

.swal2-image {
  max-width: 100%;
  margin: 1.25em auto; }

.swal2-close {
  position: absolute;
  /* z-index: 2; */
  top: 0;
  right: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  padding: 0;
  overflow: hidden;
  -webkit-transition: color 0.1s ease-out;
  transition: color 0.1s ease-out;
  border: none;
  border-radius: 0;
  background: var(--bkg-color2);
  color: var(--txt-color48);
  font-family: serif;
  font-size: 2.5em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
 }

.swal2-close:hover {
  -webkit-transform: none;
  transform: none;
  background: var(--bkg-color2);
  color: var(--txt-color49); }

.swal2-close::-moz-focus-inner {
  border: 0; }

.swal2-content {
  z-index: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--txt-color47);
  font-size: 1.125em;
  font-weight: normal;
  line-height: normal;
  text-align: center;
  word-wrap: break-word; }

.swal2-content.swal2-scrollable {
  max-height: 75vh;
  overflow-y: auto; 
}

.swal2-popup.eb-swal-scrollable:not(.swal2-toast) {
  max-height: 90vh;
  overflow: hidden;
}

.swal2-popup.eb-swal-scrollable:not(.swal2-toast) .swal2-content.swal2-scrollable {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.swal2-popup.eb-swal-scrollable:not(.swal2-toast) .swal2-actions {
  flex: 0 0 auto;
}

.swal2-input,
.swal2-file,
.swal2-textarea,
.swal2-select,
.swal2-radio,
.swal2-checkbox {
  margin: 1em auto; }

.swal2-input,
.swal2-file,
.swal2-textarea {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
  border: 1px solid var(--bor-color21);
  border-radius: 0.1875em;
  background: inherit;
  -webkit-box-shadow: inset 0 1px 1px var(--sha-color14);
  box-shadow: inset 0 1px 1px var(--sha-color14);
  color: inherit;
  font-size: 1.125em; }

.swal2-input.swal2-inputerror,
.swal2-file.swal2-inputerror,
.swal2-textarea.swal2-inputerror {
  border-color: var(--bor-color22) !important;
  -webkit-box-shadow: 0 0 2px var(--sha-color6) !important;
  box-shadow: 0 0 2px var(--sha-color6) !important; }

.swal2-input:focus,
.swal2-file:focus,
.swal2-textarea:focus {
  border: 1px solid var(--bor-color23);
  outline: none;
  -webkit-box-shadow: 0 0 3px var(--sha-color16);
  box-shadow: 0 0 3px var(--sha-color16); }

.swal2-input::-moz-placeholder, .swal2-file::-moz-placeholder, .swal2-textarea::-moz-placeholder {
  color: var(--txt-color48); }

.swal2-input:-ms-input-placeholder, .swal2-file:-ms-input-placeholder, .swal2-textarea:-ms-input-placeholder {
  color: var(--txt-color48); }

.swal2-input::-ms-input-placeholder, .swal2-file::-ms-input-placeholder, .swal2-textarea::-ms-input-placeholder {
  color: var(--txt-color48); }

.swal2-input::-webkit-input-placeholder, .swal2-file::-webkit-input-placeholder, .swal2-textarea::-webkit-input-placeholder {
  color: var(--txt-color48); }

.swal2-input::placeholder,
.swal2-file::placeholder,
.swal2-textarea::placeholder {
  color: var(--txt-color48); }

.swal2-range {
  margin: 1em auto;
  background: var(--bkg-color1); }

.swal2-range input {
  width: 80%; }

.swal2-range output {
  width: 20%;
  color: inherit;
  font-weight: 600;
  text-align: center; }

.swal2-range input,
.swal2-range output {
  height: 2.625em;
  padding: 0;
  font-size: 1.125em;
  line-height: 2.625em; }

.swal2-input {
  height: 2.625em;
  padding: 0 0.75em; }

.swal2-input[type=number] {
  max-width: 10em; }

.swal2-file {
  background: inherit;
  font-size: 1.125em; }

.swal2-textarea {
  height: 6.75em;
  padding: 0.75em; }

.swal2-select {
  min-width: 50%;
  max-width: 100%;
  padding: 0.375em 0.625em;
  background: inherit;
  color: inherit;
  font-size: 1.125em; }

.swal2-radio,
.swal2-checkbox {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: var(--bkg-color1);
  color: inherit; }

.swal2-radio label,
.swal2-checkbox label {
  margin: 0 0.6em;
  font-size: 1.125em; }

.swal2-radio input,
.swal2-checkbox input {
  margin: 0 0.4em; }

.swal2-validation-message {
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.625em;
  overflow: hidden;
  background: var(--bkg-color55);
  color: var(--txt-color10);
  font-size: 1em;
  font-weight: 300; }

.swal2-validation-message::before {
  content: "!";
  display: inline-block;
  width: 1.5em;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 0.625em;
  border-radius: 50%;
  background-color: var(--bkg-color56);
  color: var(--txt-color1);
  font-weight: 600;
  line-height: 1.5em;
  text-align: center; }

.swal2-icon {
  position: relative;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  border: 0.25em solid var(--bor-color3);
  border-radius: 50%;
  font-family: inherit;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.swal2-icon .swal2-icon-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 3.75em; }

.swal2-icon.swal2-error {
  border-color: var(--bor-color22);
  color: var(--txt-color49); }

.swal2-icon.swal2-error .swal2-x-mark {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1; }

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  display: block;
  position: absolute;
  top: 2.3125em;
  width: 2.9375em;
  height: 0.3125em;
  border-radius: 0.125em;
  background-color: var(--bkg-color56); }

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: 1.0625em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: 1em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.swal2-icon.swal2-error.swal2-icon-show {
  -webkit-animation: swal2-animate-error-icon 0.5s;
  animation: swal2-animate-error-icon 0.5s; }

.swal2-icon.swal2-error.swal2-icon-show .swal2-x-mark {
  -webkit-animation: swal2-animate-error-x-mark 0.5s;
  animation: swal2-animate-error-x-mark 0.5s; }

.swal2-icon.swal2-warning {
  border-color: var(--bor-color24);
  color: var(--txt-color50); }

.swal2-icon-content.swal2-info-line {
  margin-top: -5px;
}

.swal2-icon.swal2-info {
  border-color: var(--bor-color25);
  color: var(--txt-color21);
  transform: rotate(180deg);
}

.swal2-icon.swal2-question {
  border-color: var(--bor-color26);
  color: var(--txt-color51); }

.swal2-icon.swal2-success {
  border-color: var(--bor-color20);
  color: var(--txt-color52); }

.swal2-icon.swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 3.75em;
  height: 7.5em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 50%; }

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -0.4375em;
  left: -2.0635em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 3.75em 3.75em;
  transform-origin: 3.75em 3.75em;
  border-radius: 7.5em 0 0 7.5em; }

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -0.6875em;
  left: 1.875em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 3.75em;
  transform-origin: 0 3.75em;
  border-radius: 0 7.5em 7.5em 0; }

.swal2-icon.swal2-success .swal2-success-ring {
  position: absolute;
  z-index: 2;
  top: -0.25em;
  left: -0.25em;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  border: 0.25em solid var(--bor-color27);
  border-radius: 50%; }

.swal2-icon.swal2-success .swal2-success-fix {
  position: absolute;
  z-index: 1;
  top: 0.5em;
  left: 1.625em;
  width: 0.4375em;
  height: 5.625em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.swal2-icon.swal2-success [class^=swal2-success-line] {
  display: block;
  position: absolute;
  z-index: 2;
  height: 0.3125em;
  border-radius: 0.125em;
  background-color: var(--bkg-color57); }

.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
  top: 2.875em;
  left: 0.8125em;
  width: 1.5625em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
  top: 2.375em;
  right: 0.5em;
  width: 2.9375em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-tip {
  -webkit-animation: swal2-animate-success-line-tip 0.75s;
  animation: swal2-animate-success-line-tip 0.75s; }

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long {
  -webkit-animation: swal2-animate-success-line-long 0.75s;
  animation: swal2-animate-success-line-long 0.75s; }

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right {
  -webkit-animation: swal2-rotate-success-circular-line 4.25s ease-in;
  animation: swal2-rotate-success-circular-line 4.25s ease-in; }

.swal2-progress-steps {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 0 1.25em;
  padding: 0;
  background: inherit;
  font-weight: 600; }

.swal2-progress-steps li {
  display: inline-block;
  position: relative; }

.swal2-progress-steps .swal2-progress-step {
  z-index: 20;
  width: 2em;
  height: 2em;
  border-radius: 2em;
  background: var(--bkg-color53);
  color: var(--txt-color1);
  line-height: 2em;
  text-align: center; }

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
  background: var(--bkg-color53); }

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step {
  background: var(--bkg-color58);
  color: var(--txt-color1); }

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
  background: var(--bkg-color58); }

.swal2-progress-steps .swal2-progress-step-line {
  z-index: 10;
  width: 2.5em;
  height: 0.4em;
  margin: 0 -1px;
  background: var(--bkg-color53); }

[class^=swal2] {
  -webkit-tap-highlight-color: transparent; }

.swal2-show {
  -webkit-animation: swal2-show 0.3s;
  animation: swal2-show 0.3s; }

.swal2-hide {
  -webkit-animation: swal2-hide 0.15s forwards;
  animation: swal2-hide 0.15s forwards; }

.swal2-noanimation {
  -webkit-transition: none;
  transition: none; }

.swal2-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll; }

.swal2-rtl .swal2-close {
  right: auto;
  left: 0; }

.swal2-rtl .swal2-timer-progress-bar {
  right: 0;
  left: auto; }

@supports (-ms-accelerator: true) {
  .swal2-range input {
    width: 100% !important; }
  .swal2-range output {
    display: none; } }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-range input {
    width: 100% !important; }
  .swal2-range output {
    display: none; } }

@-moz-document url-prefix() {
  .swal2-close:focus {
    outline: 2px solid var(--bor-color28); } }

@-webkit-keyframes swal2-toast-show {
  0% {
    -webkit-transform: translateY(-0.625em) rotateZ(2deg);
    transform: translateY(-0.625em) rotateZ(2deg); }
  33% {
    -webkit-transform: translateY(0) rotateZ(-2deg);
    transform: translateY(0) rotateZ(-2deg); }
  66% {
    -webkit-transform: translateY(0.3125em) rotateZ(2deg);
    transform: translateY(0.3125em) rotateZ(2deg); }
  100% {
    -webkit-transform: translateY(0) rotateZ(0deg);
    transform: translateY(0) rotateZ(0deg); } }

@keyframes swal2-toast-show {
  0% {
    -webkit-transform: translateY(-0.625em) rotateZ(2deg);
    transform: translateY(-0.625em) rotateZ(2deg); }
  33% {
    -webkit-transform: translateY(0) rotateZ(-2deg);
    transform: translateY(0) rotateZ(-2deg); }
  66% {
    -webkit-transform: translateY(0.3125em) rotateZ(2deg);
    transform: translateY(0.3125em) rotateZ(2deg); }
  100% {
    -webkit-transform: translateY(0) rotateZ(0deg);
    transform: translateY(0) rotateZ(0deg); } }

@-webkit-keyframes swal2-toast-hide {
  100% {
    -webkit-transform: rotateZ(1deg);
    transform: rotateZ(1deg);
    opacity: 0; } }

@keyframes swal2-toast-hide {
  100% {
    -webkit-transform: rotateZ(1deg);
    transform: rotateZ(1deg);
    opacity: 0; } }

@-webkit-keyframes swal2-toast-animate-success-line-tip {
  0% {
    top: 0.5625em;
    left: 0.0625em;
    width: 0; }
  54% {
    top: 0.125em;
    left: 0.125em;
    width: 0; }
  70% {
    top: 0.625em;
    left: -0.25em;
    width: 1.625em; }
  84% {
    top: 1.0625em;
    left: 0.75em;
    width: 0.5em; }
  100% {
    top: 1.125em;
    left: 0.1875em;
    width: 0.75em; } }

@keyframes swal2-toast-animate-success-line-tip {
  0% {
    top: 0.5625em;
    left: 0.0625em;
    width: 0; }
  54% {
    top: 0.125em;
    left: 0.125em;
    width: 0; }
  70% {
    top: 0.625em;
    left: -0.25em;
    width: 1.625em; }
  84% {
    top: 1.0625em;
    left: 0.75em;
    width: 0.5em; }
  100% {
    top: 1.125em;
    left: 0.1875em;
    width: 0.75em; } }

@-webkit-keyframes swal2-toast-animate-success-line-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0; }
  65% {
    top: 1.25em;
    right: 0.9375em;
    width: 0; }
  84% {
    top: 0.9375em;
    right: 0;
    width: 1.125em; }
  100% {
    top: 0.9375em;
    right: 0.1875em;
    width: 1.375em; } }

@keyframes swal2-toast-animate-success-line-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0; }
  65% {
    top: 1.25em;
    right: 0.9375em;
    width: 0; }
  84% {
    top: 0.9375em;
    right: 0;
    width: 1.125em; }
  100% {
    top: 0.9375em;
    right: 0.1875em;
    width: 1.375em; } }

@-webkit-keyframes swal2-show {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7); }
  45% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  80% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes swal2-show {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7); }
  45% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  80% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes swal2-hide {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0; } }

@keyframes swal2-hide {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0; } }

@-webkit-keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: 0.0625em;
    width: 0; }
  54% {
    top: 1.0625em;
    left: 0.125em;
    width: 0; }
  70% {
    top: 2.1875em;
    left: -0.375em;
    width: 3.125em; }
  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em; }
  100% {
    top: 2.8125em;
    left: 0.8125em;
    width: 1.5625em; } }

@keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: 0.0625em;
    width: 0; }
  54% {
    top: 1.0625em;
    left: 0.125em;
    width: 0; }
  70% {
    top: 2.1875em;
    left: -0.375em;
    width: 3.125em; }
  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em; }
  100% {
    top: 2.8125em;
    left: 0.8125em;
    width: 1.5625em; } }

@-webkit-keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0; }
  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0; }
  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em; }
  100% {
    top: 2.375em;
    right: 0.5em;
    width: 2.9375em; } }

@keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0; }
  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0; }
  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em; }
  100% {
    top: 2.375em;
    right: 0.5em;
    width: 2.9375em; } }

@-webkit-keyframes swal2-rotate-success-circular-line {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  5% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  12% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg); }
  100% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg); } }

@keyframes swal2-rotate-success-circular-line {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  5% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  12% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg); }
  100% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg); } }

@-webkit-keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    opacity: 0; }
  50% {
    margin-top: 1.625em;
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    opacity: 0; }
  80% {
    margin-top: -0.375em;
    -webkit-transform: scale(1.15);
    transform: scale(1.15); }
  100% {
    margin-top: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }

@keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    opacity: 0; }
  50% {
    margin-top: 1.625em;
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    opacity: 0; }
  80% {
    margin-top: -0.375em;
    -webkit-transform: scale(1.15);
    transform: scale(1.15); }
  100% {
    margin-top: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }

@-webkit-keyframes swal2-animate-error-icon {
  0% {
    -webkit-transform: rotateX(100deg);
    transform: rotateX(100deg);
    opacity: 0; }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1; } }

@keyframes swal2-animate-error-icon {
  0% {
    -webkit-transform: rotateX(100deg);
    transform: rotateX(100deg);
    opacity: 0; }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1; } }

@-webkit-keyframes swal2-rotate-loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes swal2-rotate-loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  overflow: hidden; }

/*body.swal2-height-auto {
  height: auto !important; }*/

body.swal2-no-backdrop .swal2-container {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  max-width: calc(100% - 0.625em * 2);
  background-color: var(--bkg-color2) !important; }

body.swal2-no-backdrop .swal2-container > .swal2-modal {
  -webkit-box-shadow: 0 0 10px var(--sha-color17);
  box-shadow: 0 0 10px var(--sha-color17); }

body.swal2-no-backdrop .swal2-container.swal2-top {
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

body.swal2-no-backdrop .swal2-container.swal2-top-start, body.swal2-no-backdrop .swal2-container.swal2-top-left {
  top: 0;
  left: 0; }

body.swal2-no-backdrop .swal2-container.swal2-top-end, body.swal2-no-backdrop .swal2-container.swal2-top-right {
  top: 0;
  right: 0; }

body.swal2-no-backdrop .swal2-container.swal2-center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

body.swal2-no-backdrop .swal2-container.swal2-center-start, body.swal2-no-backdrop .swal2-container.swal2-center-left {
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

body.swal2-no-backdrop .swal2-container.swal2-center-end, body.swal2-no-backdrop .swal2-container.swal2-center-right {
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

body.swal2-no-backdrop .swal2-container.swal2-bottom {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

body.swal2-no-backdrop .swal2-container.swal2-bottom-start, body.swal2-no-backdrop .swal2-container.swal2-bottom-left {
  bottom: 0;
  left: 0; }

body.swal2-no-backdrop .swal2-container.swal2-bottom-end, body.swal2-no-backdrop .swal2-container.swal2-bottom-right {
  right: 0;
  bottom: 0; }

@media print {
  canvas#myChart{
    max-height: 100vh!important;
  }
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow-y: scroll !important; }
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) > [aria-hidden=true] {
    display: none; }
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
    position: static !important; } }

body.swal2-toast-shown .swal2-container {
  background-color: var(--bkg-color2); }

body.swal2-toast-shown .swal2-container.swal2-top {
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto; }

body.swal2-toast-shown .swal2-container.swal2-top-start, body.swal2-toast-shown .swal2-container.swal2-top-left {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0; }

body.swal2-toast-shown .swal2-container.swal2-center-start, body.swal2-toast-shown .swal2-container.swal2-center-left {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

body.swal2-toast-shown .swal2-container.swal2-center {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

body.swal2-toast-shown .swal2-container.swal2-center-end, body.swal2-toast-shown .swal2-container.swal2-center-right {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

body.swal2-toast-shown .swal2-container.swal2-bottom-start, body.swal2-toast-shown .swal2-container.swal2-bottom-left {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0; }

body.swal2-toast-shown .swal2-container.swal2-bottom {
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

body.swal2-toast-shown .swal2-container.swal2-bottom-end, body.swal2-toast-shown .swal2-container.swal2-bottom-right {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto; }

body.swal2-toast-column .swal2-toast {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch; }

body.swal2-toast-column .swal2-toast .swal2-actions {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  height: 2.2em;
  margin-top: 0.3125em; }

body.swal2-toast-column .swal2-toast .swal2-loading {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

body.swal2-toast-column .swal2-toast .swal2-input {
  height: 2em;
  margin: 0.3125em auto;
  font-size: 1em; }

body.swal2-toast-column .swal2-toast .swal2-validation-message {
  font-size: 1em; }

.btn-swal {
  padding: .6em 1em !important;
  font-size: 14px !important;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
  white-space: nowrap;
}

.breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 0.7rem 0 !important;
    margin-bottom: 0 !important;
    list-style: none;
    border-radius: 0.25rem;
    flex-grow: 1;
}
.breadcrumb-responsive{
  width: 100%;
}
.breadcrumb-responsive + p{
  background-color: var(--bkg-color1);
  margin: 0px;
  padding-bottom: 15px;
}
.breadcrumb-responsive.table-nav{
  display: flex;
  justify-content: space-between;
  background: var(--bkg-color1);
  /* margin-bottom: 5px; */
  padding: 0 1.5em;
  flex-wrap: wrap;
}

.breadcrumb-responsive nav{
  background: var(--bkg-color1);
  position: relative;
  margin-bottom: 0px;
  line-height: 26px;
  padding: 0;
  margin-left:0 !important;
  left: 0 !important;
  padding-left: 10px;
}

.breadcrumb-item, .breadcrumb-item-a {
  display: -ms-flexbox;
  display: flex;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}

@media (min-width: 560px) {
  .breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: var(--txt-color10);
    font-size: 0.87rem;
    font-weight: bold;
    content: ">";
  }
  .breadcrumb-item-a + .breadcrumb-item {
    padding-left: 0.5rem;
  }
}
@media (max-width: 560px) {
  .breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: var(--txt-color10);
    font-size: 0.87rem;
    font-weight: bold;
    content: ">";
  } 
  
}
.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--txt-color11) !important;
  font-weight: normal !important;
}

.sticky {
  position: sticky;
  top: 50px;
  /* z-index: 3; */
}

.sticky-margin {
  position: sticky;
  top:4rem;
}

.card.hide .card-header {
    border-style: none;
    background: #fff !important;
    color: var(--txt-color27) !important;
    border-radius: 14px 14px 0 0;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
}
.card.hide .card-header .card-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.card.hide{
  border-radius: 14px;
  border-style: none;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, transform 0.25s ease;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}
.card.hide:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
/* #10251 — fix bouton "Reinitialiser le filtre" qui sautait quand la
   souris survolait la card vide. Cause : la card.hide contient
   `no_result_card()` -> qui contient `#band-container` (position:fixed).
   Quand `.card.hide:hover` applique `transform: translateY(-2px)`, la
   card devient containing block du fixed -> le band-container est
   repositionne relativement a la card au lieu du viewport -> jump.
   Fix : disable la transform de la card quand elle contient un
   band-container fixed-positioned. La transition box-shadow reste pour
   conserver l'effet visuel d'hover. */
.card.hide:has(#band-container):hover {
  transform: none;
}
.card.hide .card-body {
  background: #fff !important;
  font-family: "Twemoji Country Flags", 'Poppins', Helvetica, sans-serif;
  border-radius: 0 0 14px 14px;
  padding: 16px 20px;
  overflow: hidden;
}

.overflow-initial {
  overflow:initial !important;
}

.card.hide .font {
  font-weight: 600;
  font-family: "Twemoji Country Flags", 'Poppins', Helvetica, sans-serif;
}
.card.hide td{
  color: var(--txt-color27);
}

.card.hide td span.square {
  height: 50px;
}

.square {
  border-radius: 12px;
  padding: 10px;
  height: 50px;
  width: 50px;
  background-color: var(--bkg-color33);
}

.pulse-effect {
  position: relative;
  border: none;
  border-radius: 100%;
  background-color: var(--bkg-color1);
  background-size:cover;
  background-repeat: no-repeat;
  -webkit-animation: pulse 1.75s infinite cubic-bezier(0.56, 0, 0, 1);
  -moz-animation: pulse 1.75s infinite cubic-bezier(0.56, 0, 0, 1);
  -ms-animation: pulse 1.75s infinite cubic-bezier(0.56, 0, 0, 1);
  animation: pulse 1.75s infinite cubic-bezier(0.56, 0, 0, 1);
}

.square-warning {
  background-color: var(--bkg-color60);
}

.pulse-info {
  /* box-shadow: 0 0 0 0 #3699ff; */
  box-shadow: 0 0 0 0 var(--sha-color18);

}
.pulse-warning {
  box-shadow: 0 0 0 0 var(--sha-color19);
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 7px var(--sha-color20);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 7px var(--sha-color20);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 7px var(--sha-color20);}}
@keyframes pulse {to {box-shadow: 0 0 0 7px var(--sha-color20);}}

/* Tooltip */
.tooltip {
  opacity: 1 !important;
}

.tooltip > .tooltip-inner {
  background: var(--bkg-color1); 
  color: var(--txt-color53); 
  border: 1px solid var(--bor-color2);
  padding: 1em;
  font-size: 14px;
  box-shadow: 0 0 20px var(--sha-color10);
  opacity: 1;
}
/* Tooltip on top */
.tooltip .tooltip-arrow {
  border-top: 5px solid var(--bor-color2);
}

.bs-tooltip-top .arrow::before {
  border-top-color: var(--bor-color2);
   /*box-shadow: 0 0 2px rgba(0, 0, 0, .5);*/
}

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--bor-color2);
}

*[disabled] {
  cursor: not-allowed;
}
.label.label-inline {
    width: auto;
    padding: .15rem .75rem;
    border-radius: .42rem;
    white-space: nowrap;
}
/* Quand le label est aussi un .badge (cas liste personnel : pill statut avec
   libellé long type "Sapeur Jeune Pompier Volontaire") on autorise le wrap
   pour qu'il reste dans sa cellule au lieu de déborder la colonne. Cf.
   personnel_load.php / modal_equipe_ajax.php : c'est la combinaison
   .badge.label.label-inline qui est rendue par pastelStatutStyle. */
.badge.label.label-inline {
    white-space: normal;
    max-width: 100%;
    word-break: break-word;
}
/* #9970 — Badges modernisés (palette pastel alignée sur dashboard-modern).
   Tokens --eb-* définis dans dashboard-modern.css, chargé globalement via
   fonctions_menu.php — variantes light/dark déjà gérées par les tokens. */
.label.label-actif {
    color: var(--eb-success-hover, #047857) !important;
    background-color: var(--eb-success-light, #ECFDF5) !important;
    font-weight: 600 !important;
}
.label.label-archive {
    color: var(--eb-text-secondary, #64748B) !important;
    background-color: var(--eb-bg, #F1F5F9) !important;
    font-weight: 600 !important;
}
.label.label-bloqued {
    color: var(--eb-danger-hover, #B91C1C) !important;
    background-color: var(--eb-danger-bg, #FEE2E2) !important;
    font-weight: 600 !important;
}
.label.label-wait {
    color: var(--eb-warning-hover, #C2410C) !important;
    background-color: var(--eb-warning-light, #FFF7ED) !important;
    font-weight: 600 !important;
}

.label.label-ben, .label.label-adh, .label.label-res {
    color: var(--eb-primary-hover, #1D4ED8) !important;
    background-color: var(--eb-primary-dim, #DBEAFE) !important;
    font-weight: 600 !important;
}

.label.label-sal {
    color: var(--eb-purple, #6D28D9) !important;
    background-color: var(--eb-purple-light, #EDE9FE) !important;
    font-weight: 600 !important;
}

.label.label-ext, .label.label-pres, .label.label-fonc {
    color: #92400E !important;
    background-color: #FEF3C7 !important;
    font-weight: 600 !important;
}

.label.label-spv {
    color: #3730A3 !important;
    background-color: #E0E7FF !important;
    font-weight: 600 !important;
}

.label.label-pats {
    color: #0F766E !important;
    background-color: #CCFBF1 !important;
    font-weight: 600 !important;
}

.label.label-spp, .label.label-act {
    color: #991B1B !important;
    background-color: #FECACA !important;
    font-weight: 600 !important;
}

.label.label-jsp {
    color: #C2410C !important;
    background-color: #FFEDD5 !important;
    font-weight: 600 !important;
}

.label.label-key {
    color: #0E7490 !important;
    background-color: #CFFAFE !important;
    font-weight: 600 !important;
}

/* Dark mode — inversion fond/texte pour les badges sans token --eb-* dédié. */
:root.dark .label.label-ext,
:root.dark .label.label-pres,
:root.dark .label.label-fonc {
    color: #FCD34D !important;
    background-color: #451A03 !important;
}
:root.dark .label.label-spv {
    color: #C7D2FE !important;
    background-color: #1E1B4B !important;
}
:root.dark .label.label-pats {
    color: #99F6E4 !important;
    background-color: #042F2E !important;
}
:root.dark .label.label-spp,
:root.dark .label.label-act {
    color: #FCA5A5 !important;
    background-color: #450A0A !important;
}
:root.dark .label.label-jsp {
    color: #FDBA74 !important;
    background-color: #431407 !important;
}
:root.dark .label.label-key {
    color: #67E8F9 !important;
    background-color: #083344 !important;
}

.table-bordered th, .table-bordered td {
  border: none;
}

.table.cards tbody {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
}

.table.cards tr {
    width: 200px !important;
    flex: 0 1 240px;
    box-shadow: 2px 3px 2px 0px var(--sha-color10);
    margin: 4px auto;
    border-radius: 3px;
}


.table.cards tr .card-views .card-view {
  margin: 3px 0;
  display: flex;
  justify-content: center;
}


.table.cards tr .label.label-inline {
  width: 100% !important;
    padding: .15rem .75rem;
    border-radius: .42rem;
    margin: 3px 0;
}

.table tr .profile-picture {
  border-radius: 15px;
}

.card-view img.profile-picture {
  border-style: none;
  margin-top: -5px;
  width: 115px !important;
  max-height: 140px !important;
  height: 140px;
}
#no-staff{
  height:36px;
}
.mx-10{
  margin-right: 5px;
}
table.new-table.table-bordered {
  border: none !important;
}

table.new-table tr, table.new-table th {
  border-bottom: 1px solid var(--bor-color29);
}

table.new-table tr:last-child {
  border-bottom: none;
}

table.new-table thead tr {
  height: 30px;
}

table.new-table tbody tr:hover {
  background: var(--bkg-color72);
}

table.new-table tr td {
  padding-right: 1em;
}

table.new-table.table-bordered thead th, table.new-table.table-bordered thead td {
    border-bottom-width: 1px !important;
}

table.new-table.eb-has-button-col td.eb-col-button,
table.new-table.eb-has-button-col td[data-field="bouton"],
table.new-table.eb-has-button-col td[data-field="boutons"],
table.new-table.eb-has-button-col td[data-field="action"],
table.new-table.eb-has-button-col td[data-field="actions"],
table.new-table.eb-has-button-col td[data-field="btn"],
table.new-table.eb-has-button-col td[data-field="button"],
table.new-table.eb-has-button-col td[data-field="buttons"],
table.new-table.eb-has-button-col td[data-field="modifier"],
table.new-table.eb-has-button-col td[data-field="modif"],
table.new-table.eb-has-button-col td[data-field="edit"],
table.new-table.eb-has-button-col td[data-field="ACTION"],
table.new-table.eb-has-button-col td[data-field="Bouton"],
table.new-table.eb-has-button-col td[data-field="display"] {
    width: var(--eb-bt-button-col-width);
    white-space: nowrap;
}

.checkbox-menu li label {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: var(--txt-color84);
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;
}
.checkbox-menu li input {
    margin: 0px 5px;
    top: 2px;
    position: relative;
}

.checkbox-menu li.active label {
    background-color: var(--bkg-color73);
    font-weight:bold;
}

.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
    background-color: var(--bkg-color45);
}

.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
    background-color: var(--bkg-color74);
}

.table-responsive.table-nav {
    display: flex;
    justify-content: space-between;
    background: var(--bkg-color9) !important;
    overflow: hidden;
    margin-top: -6px;
    margin-bottom: 5px;
    padding: 0px 1.5em;
    flex-wrap: wrap;
}
.table-responsive.table-nav .table-responsive.table-nav {
    padding: 0 0;
}

.btn-secondary {
  color: var(--txt-color3);
    background-color: var(--bkg-color1);
    border-color: var(--bor-color2);
}

.fixed-table-toolbar .btn.btn-secondary {
  background: var(--bkg-color1) !important;
  color: var(--txt-color65) !important;
}

.fixed-table-pagination .btn.btn-secondary {
  background: var(--bkg-color1) !important;
  color: var(--txt-color53) !important;
}

.table-bordered.cards {
    border: 1px solid var(--bor-color2);
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bkg-color16);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  bottom: 4px;
  background-color: var(--bkg-color1);
  -webkit-transition: .4s;
  transition: .4s;
}

.switch input:checked + .slider {
  background-color: var(--bkg-color75);
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px var(--sha-color21);
}

.switch input:disabled + .slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.switch input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.field-parameter-switch-row > td {
  vertical-align: middle;
}

.field-parameter-switch-row .field-parameter-switch-label {
  line-height: 20px;
}

.field-parameter-switch-row .field-parameter-switch-control {
  line-height: 0;
}

.field-parameter-switch-row .switch {
  margin: 0;
}

.toggle-switch {
  position: absolute;
  top: -25px;
  text-align: left;
  width: 230px !important;
  padding-left: 5px;
}

.user-div {
  padding-top: 0.3rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  padding-bottom: 0.3rem;
}

.user-infos {
  display: inline-block;
  margin-right: 10px;
}
.user-infos p {
  display: block;
  margin: 0;
  text-align: right;
  line-height: 1.3em;
}

.user-infos p.name {
  font-weight: bold;
  font-size: 1.1em;
  padding-top:0;
  line-height: unset;
}

.user-infos p.dispo {
  font-size: 1em;
  padding-top:0;
  line-height: unset;
}

.user-picture {
  display: inline-block;
  float: right;
}

.dropdown-divider2 {
  height: 0;
  margin: 4px 0;
  overflow: hidden;
  border-top: 1px solid var(--bor-color30);
}
/*Message information*/
@keyframes bounce {
  from, 
  20%, 
  50%, 
  to {
    transform: translate(0,0);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  40%, 
  45% {
    transform: translate(0, -30px);
    animation-timing-function: cubic-bezier(0.7, 0.05, 0.8, 0.05);
  }
  70% {
    transform: translate(0, -15px);
    animation-timing-function: cubic-bezier(0.7, 0.05, 0.8, 0.05);
  }
  80% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  90% {
    transform: translate(0, -10px);
  }
}

.alert {
  display: inline-block;
  margin-top:0px;
  margin-bottom:20px;
  margin-left:6px;
  margin-right:6px;
  box-sizing: content-box;
  max-width: 850px !important;
  top : 10px;
}

#fadediv, #alert-container, #alert-stay {
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
}

#fadediv, #alert-stay {
  position: absolute;
  pointer-events: none;
}

#fadediv .alert {
  animation-duration: 1.5s;
  animation-name: bounce;
}
#notif_save {
  position: absolute;
  top:17px;
  right: 70px;
}

.alert-message {
  color: var(--txt-color3);
  background-color: var(--bkg-color76);
  border-color: var(--bor-color31);
  padding: 10px;
  margin-right: 15px;
  border-radius: 7px;
}

.alert-container{
  margin: 0 0 15px 15px;
}

.dropdown-right {
  padding-right: 5px;
}

.table-responsive.table-nav.table-tabs.sub-tabs {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
}


/**
* WIDGETS PAGE D'ACCUEIL
**/
.three-points{
  color: var(--txt-color5);
}
.three-points-icon {
  position: absolute;
  margin: 25px;
  top: -10px;
  right: 5px;
  color: var(--txt-color5);
  cursor: pointer;
}

.widget-title a, .widget-title {
  color: var(--txt-color3)!important;
  max-width : 300px !important;
  text-decoration: none;
}

.widget-title > a{
  font-size: 1.175rem;
}

.widget-title a:hover, .widget-title:hover {
  color: var(--txt-color9)!important;
}

.widget-title.widget-title-planning-number{
  font-size: 14px;
  width: 32px !important;
  text-align: center;
}

.widget-title.widget-title-planning-image{
  font-size: 14px;
  width: 50px;
}

.widget-title.widget-title-planning-name{
  font-size: 14px;
  width: 100px;
}

.widget-principal-subtitle{
  text-align: left;
  padding-left: 0;
  position: absolute;
  top:35px;
  left:20px;
  font-size: 11px;
  color: var(--txt-color9);
  font-weight: 600;
}

.widget-subtitle, .widget-subtitle a{
  color: var(--txt-color9)!important;
  font-weight: bolder;
  font-size: 11px;
}

.div_dispo{
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-label{
  text-align:center;
  padding:5px;
  border-radius: .42rem;
  font-weight:bolder;
  float: right;
}

.alert-orange{
  background-color: var(--bkg-color77) !important;
  color: var(--txt-color29)!important;
}

.alert-blue2:before{
  content: "\0024D8  ";
  font-size: xx-large;
  color: var(--txt-color66);
  
}
.alert-blue2{
  background-color: var(--bkg-color78);
  color: var(--txt-color3)!important;
}
.alert-blue{
  /* background-color: var(--bkg-color78); */
  /* color: var(--txt-color3)!important; */
  background-color: var(--bkg-color79);
  color: var(--txt-color67) !important;
}

.alert-red {
  background-color: var(--bkg-color60)!important ;
  color: var(--txt-color6)!important;
}
.required-field-label::after {
  content: " *";
  color: var(--eb-danger, #dc2626);
  font-weight: 700;
  margin-left: 2px;
}

/* #9691 — Classe d'erreur "champ obligatoire".
   Avant : background rose pâle #ffe2e5 quasi invisible, pas de bordure.
   Après : bordure rouge épaisse + background rose plus franc + box-shadow de focus
   pour que l'erreur saute aux yeux (alignement avec le style swal2-inputerror). */
.alert-red-fade:not(.alert-red-fade:focus) {
  background-color: #fee2e2 !important;
  border: 1.5px solid #dc2626 !important;
  box-shadow: 0 0 0 1px rgba(220,38,38,.15) !important;
}
.alert-red-fade:focus {
  background-color: #fff5f5 !important;
  border: 1.5px solid #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.25) !important;
  outline: none !important;
  animation: red-fade 1s ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes red-fade {
  0%   { background-color: #fecaca; }
  50%  { background-color: #fee2e2; }
  100% { background-color: #fff5f5; }
}

/* #9691 — Alias sémantique : .eb-field-error remplace progressivement alert-red-fade
   dans les nouveaux fichiers. Même style, nom plus clair. */
.eb-field-error {
  background-color: #fee2e2 !important;
  border: 1.5px solid #dc2626 !important;
  box-shadow: 0 0 0 1px rgba(220,38,38,.15) !important;
}
.eb-field-error:focus {
  background-color: #fff5f5 !important;
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.25) !important;
  outline: none !important;
}

/* Dark-mode override pour les champs en erreur. Le rose pâle hard-codé ci-dessus
   est illisible sur popup sombre — on garde la bordure/glow rouge mais on passe
   sur un tint rouge translucide avec texte clair. */
:root.dark .alert-red-fade:not(.alert-red-fade:focus),
:root.dark .swal2-popup .alert-red-fade:not(.alert-red-fade:focus),
:root.dark .eb-field-error:not(.eb-field-error:focus),
:root.dark .swal2-popup .eb-field-error:not(.eb-field-error:focus) {
  background-color: rgba(220, 38, 38, 0.12) !important;
  color: var(--eb-text, #e2e8f0) !important;
  border: 1.5px solid #dc2626 !important;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.25) !important;
}
:root.dark .alert-red-fade:focus,
:root.dark .swal2-popup .alert-red-fade:focus {
  background-color: rgba(220, 38, 38, 0.18) !important;
  color: var(--eb-text, #e2e8f0) !important;
  border: 1.5px solid #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35) !important;
  outline: none !important;
  animation: red-fade-dark 1s ease-in-out forwards;
}
:root.dark .eb-field-error:focus,
:root.dark .swal2-popup .eb-field-error:focus {
  background-color: rgba(220, 38, 38, 0.18) !important;
  color: var(--eb-text, #e2e8f0) !important;
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35) !important;
  outline: none !important;
}
:root.dark .alert-red-fade::placeholder,
:root.dark .eb-field-error::placeholder {
  color: rgba(248, 113, 113, 0.7) !important;
}
:root.dark .alert-red-fade::-webkit-input-placeholder,
:root.dark .eb-field-error::-webkit-input-placeholder {
  color: rgba(248, 113, 113, 0.7) !important;
}
/* Variante dark du keyframe red-fade : sinon l'animation de focus repasse
   par les couleurs claires (#fecaca → #fff5f5) et écrase notre background. */
@keyframes red-fade-dark {
  0%   { background-color: rgba(220, 38, 38, 0.32); }
  50%  { background-color: rgba(220, 38, 38, 0.24); }
  100% { background-color: rgba(220, 38, 38, 0.18); }
}

/* #9691 — Animation "shake" sur les champs obligatoires non renseignés au clic Save.
   Appliquée par checkForm()/checkInputsPersonnel() via la classe .eb-field-shake,
   auto-retirée en fin d'animation (animationend) pour permettre de rejouer sur
   les clics Save suivants. Pour les <select> cachés par selectpicker, la classe
   est posée sur le .dropdown-toggle visible. */
@keyframes eb-field-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80%      { transform: translateX(4px); }
}
.eb-field-shake {
  animation: eb-field-shake 0.55s cubic-bezier(.36,.07,.19,.97) both;
}

/* #9691 — Message d'erreur inline (texte sous le champ) */
.eb-field-error-msg {
  display: block;
  color: #dc2626;
  font-size: 0.78rem;
  font-weight: 500;
  margin-top: 0.25rem;
  line-height: 1.2;
}
/* Label en rouge quand le champ associé est invalide */
.eb-label-error {
  color: #dc2626 !important;
  font-weight: 600;
}
.alert-green{
  background-color: var(--bkg-color61)!important;
  color: var(--txt-color28)!important;
}

.alert-green-apple{
  background-color: var(--bkg-color80)!important;
  color: var(--txt-color68)!important;
}

.alert-violet{
  background-color: var(--bkg-color81) !important;
  color: var(--txt-color69)!important;
}

.alert-blue3{
  background-color: var(--bkg-color81);
  color: var(--txt-color71)!important;
}
.alert-grey{
  background-color: var(--bkg-color82);
  color: var(--txt-color9)!important
}
.alert-grey2{
  background-color: var(--bkg-color118);
  color: var(--txt-color81)!important
}
.alert-grey3{
  background-color:var(--bkg-color73);
  color:var(--txt-color69) !important
}

.alert-pink{
  background-color: var(--bkg-color83);
  color: var(--txt-color70)!important;
}

.red-hover:hover{
  background-color: var(--bkg-color60)!important ;
  color: var(--txt-color6)!important;
}

.blue-hover:hover{
  background-color: var(--bkg-color79)!important;
  color: var(--txt-color67) !important;
}

.green-hover:hover{
  background-color: var(--bkg-color80)!important;
  color: var(--txt-color68)!important;
}

.ebrigade-hover:hover{
  background-color: var(--bkg-color60)!important;
  color: var(--bkg-color15)!important;
}

.purple-hover:hover{
  background-color: var(--bkg-color83)!important;
  color: var(--txt-color70)!important;
}

.blue2-hover:hover{
  background-color: var(--bkg-color100)!important;
  color: var(--txt-color1)!important;
}

.blue3-hover:hover{
  background-color: var(--bkg-color81)!important;
  color: var(--txt-color69)!important;
}
/*** Widget Profil ***/
.profile-alerts {
  align-items: center;
  margin-top: 15px;
}

.alert-icon {
  padding: 10px;
  border-radius: .42rem;
}

.msg-icon {
  padding: 10px;
  border-radius: .42rem;
}

.warning-infos-perso-title{
  color: var(--txt-color3);

}

.warning-infos-perso-subtitle{
  color: var(--txt-color9);
  font-size: 11px;
}

/*** Widget Activit�s ***/

.activity-date {
  text-align: left;
  padding: 10px;
  width: 230px;
}

.widget-text, .widget-text a {

  color: var(--txt-color3) !important;
  font-size: 14px;
}

.grey-button-arrow {
  width: 40px;
  height: 40px;
  color: var(--txt-color3);
  background-color: var(--bkg-color12);
  text-align: center;
  padding-top: 12px;
  border-radius: .42rem;
  float: right;
}

.grey-button-arrow:hover {
  background-color: var(--bkg-color41);
}

.reporting-text{
  font-size: 16px;}

.reporting-bg{
  background-color: var(--bkg-color1) ;
  border: solid 1px var(--bor-color32);
  text-align: left;
  min-height:300px;
  background-image: url("../images/generalites.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 22%;}

#searchMenuBar{
  margin-left: 10px;
}

@media (max-width: 1112px) {
  #searchMenuBar{
    display: none;
  }
}

@media (min-width: 770px) {
    .div-decal-left{
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .div-decal-right{
      padding-right: 10px;
  }
  .div-decal{
    padding-left: 10px;
    padding-right: 10px;
}
}

/*** Widget Calendrier ***/
.event-duration{
  font-size: 11px;
  color: var(--txt-color9);
  font-weight: 500;
}

.event-arrow {
  width: 40px;
  height: 40px;
  text-align: center;
  padding-top: 14px;
  border-radius: .42rem;
  color: var(--txt-color1);
}
.widgetInscrClosed {
  width: 40px;
  height: 40px;
  color: var(--txt-color3);
  background-color: var(--bkg-color12);
  text-align: center;
  padding-top: 14px;
  border-radius: .42rem;
}
.widgetInscrClosed:hover {
  background-color: var(--bkg-color84);
}
.widgetInscrOpen {
  width: 40px;
  height: 40px;
  color: var(--txt-color3);
  background-color: var(--bkg-color12);
  text-align: center;
  padding-top: 14px;
  border-radius: .42rem;
  background-color: var(--bkg-color23);
  color: var(--txt-color1);

}
.widgetInscrOpen:hover {
  background-color: var(--bkg-color85);
}
.event-arrow-closed {
  background-color: var(--bkg-color23);
  color: var(--txt-color1);
}

.event-arrow-closed:hover {
  background-color: var(--bkg-color84);
}

.event-arrow-opened {
  background-color: var(--bkg-color23);
  color: var(--txt-color1);
}

.event-arrow-opened:hover {
  background-color: var(--bkg-color85);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
  background-color: var(--bkg-color8);}

/*** Widget informations ***/
.timeline{
  margin-top: 40px;
  margin-bottom: 25px;
  position: absolute;
  left: 100px;
  width: 3px;
  top: 0;
  bottom: 0;
  background-color: var(--bkg-color87);
}

.infos-principal-title{
  text-align: left;
  display: block;
  width: 100%;
  padding: 0 20px 20px 20px;
  background-color: var(--bkg-color107);
  z-index: 1;
  border-bottom: 0.5px solid var(--bor-color41);
}

.infos-principal-title a{
  color: var(--txt-color27);
  font-size: 14px;
  font-weight: bolder;
}

.infos-content {
  color: var(--txt-color9)!important;
  padding: 15px 15px 0 20px;
  text-align: justify;
  line-height : 20px;
}

@media (max-width: 770px) {
    .infos-content {
      max-width:250px;
    }
}

.infos-title{
  margin: 0;
  color: var(--txt-color3);
  font-weight: 600;
  height:72px;
}

.infos-date{
  font-size: 12px;
  color: var(--txt-color9)!important;
  font-weight: 600;
  width: 85px;
  vertical-align:text-top;
  padding: 20px 0 0 15px;
}

/*** Widget Gestion des produits consommables ***/
.alert-justify{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subtitle-small{
  color: var(--txt-color9)!important;
  font-weight: 400;
  font-size: 11px;
}

.subtitle, .subtitle > a, a.no-href {
  color: var(--txt-color27) !important;
  font-weight: initial;
  font-size: 13px;
}

.subtitle > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 3px 0;
}

.subtitle a:hover {
  color: var(--txt-color9)!important;
}

.table-widget{
  table-layout: fixed;
  width: 100%;
}

.table-widget img{
  max-width: 100%;
  height: auto;
}

.title{
  color: var(--txt-color9)!important;
  font-weight: initial;
  font-size: 13px;
}

.alert-element{
  padding: 15px;
  border-radius: .42rem;
}
.alert-element2{
  padding: 5px 15px 5px 5px;
  border-radius: .42rem;
}

.text-warning-alert{
  font-weight: 600;
  font-size: 1.1rem !important;
  float: right;
}

.no-content{
  font-weight: 600;
  color: var(--txt-color3);
  padding-left: 15px;
  font-size: 14px;
}
.no-content2{
  color: var(--txt-color3);
  font-size: 14px;
  max-height: 140px;
  height: 140px;
  border-radius: 10px;
}
.no-content3{
  color: var(--txt-color3);
  font-size: 14px;
  max-height: 400px;
  height: 400px;
  border-radius: 10px;
}

.infos-icon{
  position: relative;
  background-color: var(--bkg-color1);
  border-top: 6px solid var(--bor-color2);
  border-bottom: 6px solid var(--bor-color2);
}

/*** Widget Stats ***/
.widget-stats{
  background: transparent;
  margin: 8px 10px 4px;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.vehicule-widget {
  width: 100%;
  border-radius: 5px;
}

.vehicule-widget .titre {
  left: 20px;
  top: 10px;
  position: relative;
}

.vehicule-widget ul{
  width: 100% !important;
}



.stats-container-diviser {
  display:flex;
  flex-direction:row;
  margin-top: 4px;
  margin-bottom: 2px;
}

/* Quand plusieurs <ul.stats-container-new> sont siblings dans un wrapper flex,
   ils doivent partager la largeur dispo au lieu de s'empiler.
   Pattern utilisé par .stats-container-diviser (indispo_choice, personnel,
   cotisations, section, evenement_choice…) et #planningStatContainer
   (dispo.php?tab=5). Avant : chaque <ul> width:100% → wrap sur 2+ lignes. */
.stats-container-diviser > ul,
#planningStatContainer > .stats-container-new {
  flex: 1 1 0 !important;
  min-width: 0;
  width: auto;
}

.stats-container-diviser ul:first-child {
  margin-right:8px !important;
}
.stats-container-diviser ul:last-child {
  margin-left:8px !important;
}
.stats-container-new.lastStats,
.stats-container-new{
  position: relative;
}
.toggle-container {
  padding-top: 10px;
  padding-right: 4px;
  cursor: pointer;
}
/* #10249 — Toggle chevron expand/collapse stats : position GLOBALE.
   Probleme : `write_stats_containers_group()` (fonctions.php:12596) genere
   `.toggle-container` avec les utilitaires Bootstrap `position-absolute top-0
   end-0` -> chevron colle au coin superieur droit du wrapper stats. Sur les
   pages avec un `.btn::before` colore en bord superieur des tuiles
   (dashboard-modern.css:1019-1033 -> 3px de hauteur), le chevron paraissait
   ecrase contre la bande coloree (gap visuel de seulement ~7px).
   Fix : aligner le chevron verticalement avec les `.sc-icon-slot` des tuiles
   (top:12 par defaut dashboard-modern.css:1049). On annule le padding-top
   global de 10px pour eviter un double offset.
   Couvre les 2 wrappers stats utilises dans l'app :
   - `.stats-container-diviser` (notes-frais, personnel, qualifications,
     astreintes, cotisations, evenement, etc. - 17 callers de
     write_stats_containers_group)
   - `.eb-supervisor-view` (vehicule_tabs, tenue, materiel_tabs, lieu_stockage,
     consommable_tabs - module logistique) */
.stats-container-diviser .toggle-container,
.eb-supervisor-view .toggle-container {
    top: 14px !important;
    right: 10px !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
}
/* #10249 — Decalage GLOBAL de l'icone-badge de la DERNIERE tuile stats vers
   la gauche pour liberer le coin top-right au toggle chevron.
   Sans ce decalage, l'icone par defaut (top:12 right:12, dashboard-modern.css:
   1047-1053) et le toggle (top:14 right:10) se retrouvent tous les deux dans
   le meme coin top-right de la derniere tuile -> chevauchement visuel
   (observe sur personnel.php : 2 icones colles).
   right:48 donne un gap visuel confortable de ~14px entre le bord gauche du
   toggle et le bord droit de l'icone (toggle ~26px de large + 10 padding).
   IMPORTANT : on scope avec `:has(> .toggle-container)` pour n'appliquer le
   shift QUE quand la UL contient effectivement un toggle. Cas observe sur
   qualifications.php : 2 groupes stats dans la meme `.stats-container-diviser`,
   le 1er groupe (Principale/Secondaire) est rendu avec `lastStats:false`
   (fonctions.php:12590 -> pas de toggle) tandis que le 2eme groupe a le
   toggle. Sans `:has()`, le shift s'appliquerait aussi a Secondaire (icone
   decalee inutilement) -> regression visuelle. */
.stats-container-diviser .stats-container-new:has(> .toggle-container) > .nav-item:last-of-type .sc-icon-slot,
.stats-container-diviser .stats-container-new:has(> .toggle-container) > li:last-of-type .sc-icon-slot,
.stats-container-diviser .stats-container-new:has(> .toggle-container) > *:last-child:not(.toggle-container) .sc-icon-slot,
.eb-supervisor-view .stats-container-new:has(> .toggle-container) > .nav-item:last-of-type .sc-icon-slot,
.eb-supervisor-view .stats-container-new:has(> .toggle-container) > li:last-of-type .sc-icon-slot {
    right: 48px !important;
}

.toggle-icon {
  font-size: 1rem;
  color: gray;
  transition: transform 0.3s ease;
}

.toggle-icon:hover {
  color: gray;
  transform: scale(1.2);
}

.stats-container-diviser a.active .rm-filter {
  font-size:11px !important;
  margin:5px;
  text-decoration:underline;
}

.widget-stats .stats-container{
  padding: 8px;
}
.stats-container{
  padding: 12px;
  background-color: var(--bkg-color1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stats-header{
  display: flex;
  align-items: center;
  gap: 6px;
}

.stats-numbers{
  color: var(--txt-color3);
  display: flex;
  justify-content: flex-end;
  font-weight: 700;
  font-size: 1rem;
  gap: 8px;
}

.stats-numbers span{
  font-size: 1.4rem;
  font-weight: 800;
}

.stats-number{
  margin-right: 20px;
}

.stats-icon{
  font-size: 2rem;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.35);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-participations{
  background: linear-gradient(135deg, var(--bkg-color61), #a8e0dd) !important;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(125,196,193,0.2);
}

.stats-participations:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(125,196,193,0.3);
}

.stats-participations-icon{
  color: var(--txt-color28);
}

.stats-title, .period-title{
  color: var(--txt-color3)!important;
  font-weight: 700;
  font-size: 0.95rem;
  padding-left: 10px;
  margin-top: 8px;
  text-align: center;
  letter-spacing: 0.01em;
}

.stats-title{
  color: var(--txt-color3)!important;
}

.period-title{
  color: var(--txt-color1)!important;
}

.stats-subtitle{
  color: var(--txt-color5);
}

.stats-activities{
  background: linear-gradient(135deg, var(--bkg-color77), #f0d89e) !important;
  border-radius: 14px;
  padding: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(216,187,127,0.2);
}

.stats-activities:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(216,187,127,0.3);
}

.stats-activities-icon{
  color: var(--txt-color29);
}

.stats-members{
  background: linear-gradient(135deg, var(--bkg-color81), #d4bff5) !important;
  border-radius: 14px;
  padding: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(190,167,233,0.2);
}

.stats-taches{
  background: linear-gradient(135deg, var(--bkg-color81), #d4bff5) !important;
  border-radius: 14px;
  padding: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(190,167,233,0.2);
}

.stats-members:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(190,167,233,0.3);
}

.stats-members-icon{
  color: var(--txt-color71);
}

.stats-section, .stats-main, .stats-secondary, .stats-soon-expired, .stats-expired{
  background-color: var(--bkg-color88) !important;
  border-radius: 14px;
  padding: 18px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stats-section {
  background-color: var(--bkg-color75)!important;
}

.stats-taches-icon{
  color: var(--txt-color72);
}

.stats-dispos{
  background: linear-gradient(135deg, var(--bkg-color89), #b5cff7) !important;
  border-radius: 14px;
  padding: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(156,183,243,0.2);
}

.stats-dispos:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(156,183,243,0.3);
  cursor: pointer;
}

.stats-dispos-icon{
  color: var(--txt-color73);
}

.stats-link{
  cursor: pointer;
  text-decoration: none!important;
}

.stats-disabled{
  background-color: var(--bkg-color1) !important;
  border-radius: 14px;
  padding: 18px;
  border: solid 1px var(--bor-color33);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stats-disabled *{
  color: var(--txt-color5) !important;
  transition: color 0.2s ease;
}
.stats-disabled:hover *{
  color: var(--txt-color29) !important;
}

/* ============================== */
/* Dashboard Drag & Drop          */
/* ============================== */
.widget-drag-handle {
  display: none;
}
@media (min-width: 992px) {
  .widget-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--txt-color5, #bbb);
    cursor: grab;
    margin-left: auto;
    padding: 2px;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
    font-size: 0.85rem;
    flex-shrink: 0;
  }
  /* Handle toujours visible (opacity de base) pour indiquer clairement que le widget est draggable */
  .col-sm-12[data-widget-id] .widget-drag-handle,
  .col-sm-12[data-widget-group] .widget-drag-handle {
    opacity: 0.5;
  }
  .col-sm-12[data-widget-id]:hover .widget-drag-handle,
  .col-sm-12[data-widget-group]:hover .widget-drag-handle {
    opacity: 0.85;
  }
  .col-sm-12[data-widget-id] .widget-drag-handle:hover,
  .col-sm-12[data-widget-group] .widget-drag-handle:hover {
    opacity: 1;
    color: var(--txt-color27, #333);
    background: rgba(0,0,0,0.07);
  }
  .widget-drag-handle:active {
    cursor: grabbing;
  }
  /* Floating variant for full-bleed widgets (e.g. météo) whose card-header is hidden */
  .widget-drag-handle--float {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    margin-left: 0;
    background: rgba(255,255,255,0.25);
    color: #fff !important;
  }
  .widget-drag-handle--float:hover {
    background: rgba(255,255,255,0.5) !important;
    color: #fff !important;
  }
  /* Ensure header is flex so handle goes to the right */
  .col-sm-12[data-widget-id] .card-header,
  .col-sm-12[data-widget-group] .card-header {
    display: flex !important;
    align-items: center;
    cursor: grab;
  }
  .col-sm-12[data-widget-id] .card-header:active,
  .col-sm-12[data-widget-group] .card-header:active {
    cursor: grabbing;
  }
  /* Links/buttons in headers keep pointer cursor */
  .col-sm-12[data-widget-id] .card-header a,
  .col-sm-12[data-widget-id] .card-header .btn,
  .col-sm-12[data-widget-group] .card-header a,
  .col-sm-12[data-widget-group] .card-header .btn {
    cursor: pointer;
  }
  .col-sm-12[data-widget-id] .card-header .card-title,
  .col-sm-12[data-widget-group] .card-header .card-title {
    flex: 1;
  }
}
.widget-dragging {
  transform: rotate(1.5deg) scale(1.03);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
  z-index: 1000 !important;
  opacity: 0.92;
}
.ui-sortable-placeholder {
  visibility: visible !important;
  border: 2px dashed var(--bkg-color26, #4a90d9) !important;
  border-radius: 14px;
  background: rgba(74,144,217,0.06) !important;
  margin-bottom: 6px;
  min-height: 80px;
}

/* Dashboard widget cards animation */
.row.accueil .col-sm-12[data-widget-id] .card {
  animation: dashboardFadeIn 0.4s ease both;
}
@keyframes dashboardFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dashboard layout spacing - uniform gaps */
#index_widgets .widget-column > .col-sm-12 {
  padding-left: 4px;
  padding-right: 4px;
}

/* Blue link icons in widget headers */
.card-header .fas.fa-arrow-alt-circle-right,
.card-header .fa-arrow-alt-circle-right {
  font-size: 0.9rem;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.card-header:hover .fas.fa-arrow-alt-circle-right,
.card-header:hover .fa-arrow-alt-circle-right {
  opacity: 1;
}

/* Widget Horaires */
.widget-link{
  cursor: pointer;
  text-decoration: none!important;
}

table.separate{
  border-collapse: separate;
}

/** Three points icon dropdown **/
.three-point-dd{
  position: absolute;
  top: 10px;
  right: 10px;
}

.three-point-dd-icon{
  color: var(--txt-color5);
  text-decoration: none!important;
  padding: 10px;
}

.dropdown-toggle {
  position: relative;
  display: inline-block;
  margin: 1px 0;
}

#dropdownBulletin::after {
  content: none;
 }

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--bkg-color90);
  box-shadow: 0px 8px 16px 0px var(--sha-color22);
  z-index: 1;
  left: auto !important;
  right: 0 !important;
}

.dropdown:hover .dropdown-content {
  display: block;
}

a#dropdownMenuLink {
  display: none;
}

.navi-link {
  text-align: center;
  color: var(--txt-color3);
  text-decoration: none;
  padding: 12px 16px;
}

.navi-link:hover {
  cursor: pointer;
  color: var(--txt-color6);
  background-color: var(--bkg-color60);
}

/** Actualit�s et Consignes **/
.act-message-title{
  color: var(--txt-color3);
  font-weight: bolder;
  padding-bottom: 10px;
  margin-right:6px;
  font-weight: 800;
}

.act-message-author, .act-message-date, .act-message-perim{
  color: var(--txt-color5);
  margin-right:6px;
}

.act-message-perim {
  margin: 4px 6px 4px 0px;
}

.act-message-text{
  text-align: justify;
  margin-bottom: 20px;
}

.act-message-content-mobile img{
  max-width: 100% !important;
}

.act-message-content, .act-message-content-mobile{
  background-color: var(--bkg-color1);
  padding: 6px;
  margin-left: 50px;
  margin-right:15px;
  margin-bottom: 10px;
  border-radius: .85rem;
  position: relative;
}

.act-message-content:before, .act-message-content-mobile:before{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 10px;
  left: -25px;
  border-right: solid 10px var(--bor-color14);
  border-bottom: solid 17px var(--bor-color3);
  border-left: solid 17px var(--bor-color3);
  border-top: solid 17px var(--bor-color3);
}

.act-message-icon{
  width: 50px;
  border-radius:30%;
  border: 2px solid var(--bor-color4);
  position: absolute;
  left: -80px;
}

.act-message-type{
  padding: .15rem .75rem;
  border-radius: .42rem;
  color: var(--txt-color1);
  margin-right: 6px;
}

.act-message-left{
  border-right: 2px solid var(--bor-color4);
  width: 50px;
  padding: 0!important;
}

/* ── Commentaires actualiés ────────────────────────────── */
.comment-item { padding: 6px 0; }
.comment-item + .comment-item { border-top: 1px solid var(--bor-color4, #eee); }
.comment-avatar {
  /* 56px = plancher réel de ebNormalizeAvatarSize() : renderPersonnelAvatar()
     pose un style inline width/height qui gagne toujours sur ce conteneur
     (cf. .eb-chat-user-avatar), donc ce dernier doit matcher exactement. */
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--bor-color4, #e0e0e0); background-color: var(--bkg-color1, #fff);
  object-fit: cover;
}
.comment-bubble {
  background-color: var(--bkg-color1, #f0f2f5); border-radius: 12px;
  padding: 8px 12px; margin-left: 8px; flex: 1; min-width: 0;
}
.comment-author { font-weight: 600; font-size: 14px; color: var(--txt-color3); }
.comment-date { font-weight: normal; font-size: 12px; color: var(--txt-color9, #999); margin-left: 6px; }
.comment-text { font-size: 14px; color: var(--txt-color3); margin-top: 2px; word-break: break-word; }
.comment-delete { color: var(--txt-color9, #aaa); font-size: 12px; cursor: pointer; margin-left: 8px; transition: color .2s; }
.comment-delete:hover { color: var(--bs-danger, #dc3545); }
.comment-input-wrap { display: flex; gap: 8px; align-items: center; padding: 8px 0; }
.comment-input-wrap .form-control { border-radius: 20px; padding: 6px 16px; font-size: 14px; }
.comment-input-wrap .btn { border-radius: 50%; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; }
.comment-load-more { display: block; text-align: center; padding: 6px 0; font-size: 13px; color: var(--txt-color11, #0087ff); text-decoration: none; cursor: pointer; }
.comment-load-more:hover { text-decoration: underline; }

.switchconfig {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Hide default HTML checkbox */
.switchconfig input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider.config {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  border-radius: 999px;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}

.slider.config:before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.08);
  -webkit-transition: transform 0.25s ease, background-color 0.25s ease;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.slider.config.pref:before {
  line-height: 100%;
}

.switchconfig input:checked + .slider {
  background-color: var(--eb-primary, #2563EB);
}

.switchconfig input:focus + .slider {
  box-shadow: 0 0 1px var(--bor-color4);
}

.switchconfig input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  background-color: #fff;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  line-height:122.5%;
  text-align:center;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
   /* font-smoothing: antialiased; */
  content: "";
  font-family:"system-ui";
  color:var(--txt-color21);
  align-content:center;
  align-items: center;
}

.switchconfig.nocheck input:checked+.slider:before {
  content: "";
}

.switchconfig.nocheck input+.slider:before {
  content: "";
}




.switchconfig input:checked + .slider.pref:before {
  line-height:100%;
}

.switchconfig input:checked~span:after {
    opacity: 1;
    color: var(--txt-color1);
    background-color: var(--bkg-color87);
}
.switchconfig input:checked + .slider:after {
    -webkit-transform: translateX(24px);
    -ms-transform: translateX(24px);
    transform: translateX(24px);
    background-color: var(--eb-primary, #2563EB);
}
.switchconfig input[disabled] + * {
    cursor: not-allowed !important;
}
.switchconfig input[disabled] + .slider:after, .switchconfig input[disabled] + .slider:before {
    background-color: var(--bkg-color92) !important;
    color: var(--txt-color75);
}
.switchconfig input[disabled] + .slider {
    background-color: var(--bkg-color93) !important;
}
/* Rounded sliders */
.sliderconfig.round {
  border-radius: 34px;
}

.sliderconfig.round:before {
  border-radius: 34px;
}

.slider.config.round.disabled {
  border-radius: 34px;

}

.toggle-switch {
  position: absolute;
  top: -25px;
  text-align: left;
  width: 230px !important;
  padding-left: 5px;
}

.btn-group {
  gap: 0.25em;
}

button.fc-today-button.fc-button.fc-state-default.fc-corner-left.fc-corner-right.fc-state-disabled{
  border: 1px solid var(--bor-color34);
}

/** Pages general style **/
.page-header-options{
  display: flex;
  justify-content:space-around;
  padding: 0 8px 0 8px;
  margin: 30px 0 30px 0;
}

button.btn.dropdown-toggle.btn-default{
  float: left;
  color: var(--txt-color3) !important;
}
button.btn.dropdown-toggle.btn-default .filter-option {
  display: flex;
  align-items: center;
  height: 100%;
}

.search-element{
  text-align: right;
}

.nav-pills .nav-link {
    border-radius: .42rem;
}

/* background pagination en blanc! */
ul.pagination.pagination-sm.justify-content-center { 
    background-color: var(--bkg-color2);
}

.graycard {
    border-style: none;
    /* background-color: #f1F1F1F1 !important; */
    background-color: var(--bkg-color108) !important;
    color: var(--txt-color3) !important;
    border-radius: 7px 7px;
    padding-top: 8px;
    padding-bottom: 3px;
    text-align: left;
    display: inline;
}
/* graycard est aussi utilise sur des <thead> (ex: archivage.php "Top 5 tables").
   display:inline casse le layout de table : on restaure le rendu d'en-tete pour
   que les colonnes restent alignees au-dessus des valeurs. */
thead.graycard {
    display: table-header-group;
}

/* ============================== */
/* Dashboard Widget Cards         */
/* ============================== */
.card.hide .card-header.graycard,
.card .card-header.graycard {
    border-style: none;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
    color: var(--txt-color27) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    min-height: 52px;
}
.card .card-header.graycard .card-title {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--txt-color27) !important;
    line-height: 1.25;
}
.card .card-header.graycard .card-title a:not(.btn) {
    color: var(--txt-color27) !important;
    transition: color 0.2s ease;
}
.card .card-header.graycard .card-title a:not(.btn):hover {
    color: var(--bkg-color26, #4a7fd9) !important;
}
.card .card-header.graycard .btn,
.eb-buttons-container .btn,
.card-header.graycard .btn {
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
    line-height: 1.5;
}
.card-body.graycard {
    border-radius: 0 0 16px 16px !important;
    background: #ffffff !important;
    padding: 18px 20px !important;
}

.card-default.graycarddefault {
    border-style: none;
    padding: 0;
    margin-bottom: 16px;
    background: #ffffff !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.04),
        0 16px 40px rgba(15, 23, 42, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.card-default.graycarddefault:hover {
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.05),
        0 8px 20px rgba(15, 23, 42, 0.07),
        0 24px 48px rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.08);
}
/* Un menu deroulant ouvert dans une card (ex: bouton Action de la card Debogage)
   etait clippe par overflow:hidden et passait sous la card suivante.
   Tant qu'un menu est ouvert, on libere l'overflow et on remonte la card. */
.card-default.graycarddefault:has(.dropdown-menu.show) {
    overflow: visible;
    position: relative;
    z-index: 1030;
}
.eb-activity-card {
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
    border-radius: 10px !important;
}
.card.eb-activity-card .card-header.graycard {
    background: #ffffff !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
}
.card.eb-activity-card .card-body.graycard {
    border-radius: 0 0 10px 10px !important;
}



/* Sticky bottom bars (#9813) — empêche le contenu de se voir derrière et
   garantit une séparation visuelle avec une ombre douce vers le haut. */
body.eb-has-topbar-v2 .sticky-bottom,
body.eb-has-topbar-v2 .tab-buttons-container.sticky-bottom {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.06);
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 16px;
}

.card.hide.graycarddefault td {
    color: var(--txt-color3);
}

/* #9818 — En mode vue (premier col info legacy caché), la card inscription
   prend toute la largeur disponible. En mode édition le premier col réapparaît
   et les deux cols se repositionnent en flex normalement. */
#activite-infos-container .row #eb-legacy-info-col.d-none ~ div[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.search-wen{
    margin-bottom: 6px;
    margin-left: 10px;
}

.flexTable {
  table-layout:fixed;
  width:100%;
}

/* #10433 — Ligne « Affectation » : avatar + select sur une seule ligne pour que
   la hauteur de ligne reste identique aux autres champs (sinon le select full-width
   passait sous l'avatar → ligne plus haute → colonnes Général/Stockage désalignées). */
.eb-affect-field {
  display:flex;
  align-items:center;
  gap:6px;
}
.eb-affect-field > .eb-affect-avatar {
  flex:0 0 auto;
  line-height:0;
}
.eb-affect-field > .bootstrap-select {
  flex:1 1 0;
  min-width:0;
  width:auto !important;
}

.flexTableNoMobile {
  @media (min-width: 1221px) {
    table-layout:fixed;
    width:100%;
  }
}

.row.rownoflex {
  display:inline-block;
  float:left;  
}

.noshadowinput {
  box-shadow: 0px 1px 3px var(--sha-color10) !important;
  height:42px;
  position:relative;
  /* top:2px; */
}

.fa-eraser{
    color: var(--txt-color3) !important;
}

.TabHeader.nocolor{
  background-color:inherit;
} 

.dropdown-item-profil{
    color: var(--txt-color10) !important;
}

.low-opacity {
    background: var(--bkg-color94);
    padding: .35em .5em;
    border-radius: 3px;
}


.newTableAll{
  border: none;
  width: 100%;
  border-collapse: collapse;
  border-radius: 0.5em ;
  overflow: hidden;
  background-color: var(--bkg-color1);
}
.newTableAll2{
  width: 98%;
}
.newTableAll3{
  width: 98%;
  margin-bottom: 0.75em;
}
.newTableAll .selectpicker *{
  /* background: var(--bkg-color12) !important; */
  background-color: var(--bkg-color20) !important;
  border: solid 5px var(--bor-color35);
  height: 36px !important;
  margin-right: 20px !important;
  
}

.table-with-hover tr:hover > td:not(.no-hover td) {
    background-color:var(--bkg-color142) !important;
    color: var(--txt-color91) !important;
}

tr:hover > td:not(.no-hover td) .boldy {
  color: var(--txt-color91) !important;
}

tr.clickable td {
  cursor: pointer;
}

td[onclick], th[onclick] {
  cursor: pointer;
}

.accordion-toggle {
  cursor: pointer;
}

.configDropdown *{
  display: flex;
  height: 37px;
  align-items: center;
}

.configDropdown:hover{
  background-color: var(--bkg-color12) !important;
}

/* .newTableAll tr:first-child {
    background-color: var(--bkg-color41) !important;
} */

.newTableAll tr:first-child th, .newTableAll tr:first-child td,.newTableAll tr:first-child a {
    color: var(--txt-color3)!important;
    font-weight: 600;
    text-decoration: none;
}

.newTableAll td a {
    color: var(--txt-color3);
    text-decoration: none;
}

.newTableAll tr:nth-child(even) {
    background-color: var(--bkg-color1);
}

.newTableAll tr {
  background-color: var(--bkg-color1);
}

.newTableAll tr:not(:first-child):hover{
    /* background-color: var(--bkg-color16); */
    /* background-color: var(--bkg-color28); */

}

.newTableAll tr:not(:first-child) td {
    padding: 7px 5px;
    font-weight: 500;
    color: var(--txt-color3) !important;
}

.newTableAll td {
    font-weight: unset !important;
}

.newTableAllFeatures tr:not(:first-child) td {
  padding: 1px 4px !important;
}

/*Selectionner un élément avec la classe newTableAll et la classe nodefaultPaddingFirst*/
.newTableAll.nodefaultPaddingFirst tr:first-child td {
  padding: 1px 4px !important;
}

.newTableAll td:first-child, .newTabHeader th:first-child {
  padding: 12px 5px ;
}

.newTableAll td:last-child, .newTabHeader th:last-child {
  padding: 12px 5px ;
}
/* .tabToggle  {
  text-align: start;
} */

/* Compact dispo calendar cells */
.dispoWeeks td, .dispoWeeks .dispoDayTd {
  padding: 1px 1px !important;
}
.dispoDayTd .newTableAll td {
  padding: 1px 2px !important;
}
.dispoDayTd .newTableAll tr {
  line-height: 1.1;
}
.dispoDayTd .newTableAll {
  border-spacing: 0;
  border-collapse: collapse;
}
.dispoDayTd .dispoDayNumber {
  font-size: 0.85em;
}
.dispoEmptyTdBegin, .dispoEmptyTdEnd {
  padding: 0px 1px !important;
  height: 0;
}

.week, .newTableAll .dispoWeeks, .newTableAll .dispoWeeksToggle > td:first-child, .newTableAll .dispoEmptyTdBegin, .newTableAll .dispoEmptyTdEnd {
  background-color: var(--bkg-color111) !important;
}
.week_end {
  background-color: var(--bkg-color112) !important;
}
.widget_bggreen {
  background-color: var(--bkg-color113);
}
.widget_bgblue {
  background-color: var(--bkg-color114);
}
.widget_bgorange {
  background-color: var(--bkg-color115);
}
.widget_bggrey {
  background-color: var(--bkg-color118);
}
/* #ebr-dispo-activite — jour de dispo où la personne est déjà inscrite à une
   activité. Déclaré APRÈS .week_end pour gagner sur celui-ci (même spécificité,
   !important) quand une cellule porte les deux classes. var(--bkg-color60) =
   fond rouge sémantique qui s'adapte au thème clair/sombre. */
.dispoHasActivity {
  background-color: var(--bkg-color60) !important;
}

/* #ebr-dispo-mobile — vue mobile dispo (dispo_tabs.php) : transformer la grille
   semaine 7 colonnes (Lun-Dim) en liste verticale avec le jour en première
   colonne. Évite le scroll horizontal sur petit écran. Sélecteurs basés sur
   les classes uniques au calendrier de saisie (.dispoWeeks, .dispoDayTd, #dispoTHeader). */
@media (max-width: 992px) {
  /* masquer la barre Lun..Dim et les cases vides de début/fin de mois */
  #dispoTHeader,
  .dispoEmptyTdBegin,
  .dispoEmptyTdEnd {
    display: none !important;
  }
  /* table externe contenant les .dispoWeeks → vue bloc */
  table.newTableAll:has(> tbody > tr.dispoWeeks),
  table.newTableAll:has(> tbody > tr.dispoWeeks) > tbody,
  tr.dispoWeeks {
    display: block !important;
    width: 100% !important;
  }
  /* chaque jour devient une ligne pleine largeur */
  tr.dispoWeeks > td.dispoDayTd {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid var(--bor-color4, #ddd);
    padding: 2px 0 !important;
  }
  /* table interne : jour à gauche (colonne fixe), périodes à droite */
  td.dispoDayTd > table.newTableAll {
    display: grid !important;
    grid-template-columns: 64px 1fr;
    align-items: center;
    width: 100% !important;
  }
  td.dispoDayTd > table.newTableAll > tbody {
    display: contents !important;
  }
  /* ligne 1 = numéro de jour → 1ère colonne */
  td.dispoDayTd > table.newTableAll > tbody > tr:first-child {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-bottom: 0 !important;
  }
  td.dispoDayTd > table.newTableAll > tbody > tr:first-child > td {
    display: block !important;
    width: 100%;
    text-align: center;
    padding: 8px 4px !important;
  }
  td.dispoDayTd .dispoDayNumber {
    font-size: 1.1em !important;
    font-weight: bold;
  }
  /* ligne 2 = périodes → 2ème colonne, en flex pour éviter scroll */
  td.dispoDayTd > table.newTableAll > tbody > tr:nth-child(2) {
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    padding: 4px;
  }
  td.dispoDayTd > table.newTableAll > tbody > tr:nth-child(2) > td {
    flex: 1 1 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 2px !important;
  }
  td.dispoDayTd > table.newTableAll > tbody > tr:nth-child(2) > td > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8em;
  }
  td.dispoDayTd > table.newTableAll > tbody > tr:nth-child(2) input[type=checkbox] {
    margin-top: 2px;
    transform: scale(1.15);
  }

  /* #ebr-dispo-mobile — jours à venir (modifiables) : fond clair net.
     Jours passés (non modifiables) : fond grisé + atténué pour les distinguer. */
  td.dispoDayTd.dispo-future {
    background-color: var(--bkg-color1) !important;
  }
  td.dispoDayTd.dispo-past {
    background-color: var(--bkg-color118, #f1f1f4) !important;
    opacity: .55;
  }
  /* Repli des jours passés : masqués par défaut sur le mois courant, le bouton
     « Afficher les jours passés » bascule la classe eb-hide-past sur #save_dispo. */
  #save_dispo.eb-hide-past td.dispoDayTd.dispo-past {
    display: none !important;
  }

  /* Bouton Justificatif déplacé dans la barre Affiner : poussé à droite, compact. */
  .eb-filter-mobile-wrap { gap: 8px; }
  .eb-filter-mobile-wrap > .eb-filter-mobile-label { margin-left: 4px !important; }
  /* Justificatif à gauche du bouton « Affiner », picto seul (sans libellé).
     #10587 : cible tactile mini 44x44 pour respecter l'accessibilité mobile. */
  .eb-filter-mobile-wrap > #btn-justificatif.eb-justif-btn {
    margin: 0 !important;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: .35rem .55rem;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .eb-filter-mobile-wrap > #btn-justificatif.eb-justif-btn .eb-justif-label { display: none; }
  .eb-filter-mobile-wrap > #btn-justificatif.eb-justif-btn .fa { margin: 0 !important; }
}

/* #ebr-dispo-mobile — bouton de repli des jours passés (mobile only). */
.eb-toggle-past {
  border: 1px solid var(--bor-color4, #ddd);
  background-color: var(--bkg-color1);
  color: var(--txt-color3);
  border-radius: 6px;
  padding: 6px 12px;
  margin: 6px 0;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.eb-toggle-past .eb-toggle-past-caret { transition: transform .2s ease; }
.eb-toggle-past.is-open .eb-toggle-past-caret { transform: rotate(180deg); }
.eb-toggle-past .eb-toggle-past-hide { display: none; }
.eb-toggle-past.is-open .eb-toggle-past-show { display: none; }
.eb-toggle-past.is-open .eb-toggle-past-hide { display: inline; }

/* #ebr-dispo-mobile — pastille « aujourd'hui » : vrai cercle centré autour du
   numéro du jour (porté par .dispoDayNumber et non par la ligne). */
.dispoDayNumber.blue_bubble {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.2em !important;
  height: 2.2em !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: var(--txt-color21) !important;
  color: #fff !important;
}

/* #ebr-dispo-desktop — en mode desktop, la légende (chips Absence/Weekend/Forcée)
   passe sur la MÊME ligne que les dropdowns (mois/année/section) pour gagner en
   hauteur. Le formulaire des filtres devient une rangée flex ; le toolbar garde sa
   largeur naturelle et la légende se cale à sa droite. Mobile (≤992px) inchangé. */
@media (min-width: 993px) {
  form.eb-dispo-filterform {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;        /* force toolbar + légende sur UNE seule ligne */
    gap: 6px 14px;
  }
  form.eb-dispo-filterform > #toolbar {
    flex: 0 0 auto !important; /* le toolbar garde sa largeur naturelle, ne s'étire pas */
    width: auto !important;
    margin: 0 !important;
  }
  form.eb-dispo-filterform > .eb-dispo-legend {
    margin-top: 0 !important;
    flex: 0 1 auto;            /* la légende se cale à droite, peut rétrécir (chips wrap interne) */
  }

  /* #ebr-dispo-desktop — la grille 7 jours déborde à droite (Dimanche hors écran)
     car le tableau en table-layout:auto grandit au-delà de 100% selon le contenu.
     On force des colonnes égales (1/7) bornées à la largeur du conteneur : plus
     de débordement horizontal, Dimanche redevient visible. Le conteneur reste un
     filet de sécurité avec overflow-x. Mobile (≤992px) : vue liste, non concerné. */
  #save_dispo table.newTableAll:has(> tbody > tr.dispoWeeks) {
    table-layout: fixed;
    width: 100% !important;
    max-width: 100%;
  }
  #save_dispo {
    max-width: 100%;
    overflow-x: auto;
  }
}

.fc-view-harness {
    background-color: var(--bkg-color1) !important;
}
.table-bordered, .table-bordered td {
    background-color: var(--bkg-color107); /* white / none */
  border-color: var(--bor-color32) !important;
}
.table-bordered thead th, .table-bordered tfoot th, .fixed-table-loading {
  background-color: var(--bkg-color1) !important;
}
input[type=file]::file-selector-button{
  box-shadow: none;
  color: var(--txt-color3) !important;
  background-color: var(--bkg-color12) !important;
}
.fc .fc-cell-shaded, .fc .fc-day-disabled {
  background-color: var(--bkg-color111); /*var(--fc-neutral-bg-color,rgba(208,208,208,.3));*/
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number, .blue_bubble{
  padding:5px 12px;
  color:white !important;
  border-radius: 50% !important;
  width: 2.5em !important;
  height: 2.5em !important;
  background-color: var(--txt-color21) !important;
}

/* CHAT PAGE */
#message-wrapper{
  border-radius: .42rem;
  font-size: 14px;
  padding: .6rem;
  max-width: 600px;
  color: var(--txt-color3);
  font-weight:600;}

#searchChatUser{
  background-color: var(--bkg-color12);}

.btn-action{
    font-size: 1em;
    height: 25px;
    width: 25px;
    padding: 3px;
    color: var(--txt-color21) !important;
    box-shadow: unset !important;
}

.btn-action.eb-contact-favorite-active {
    color: var(--txt-color33) !important;
}

.btn-action.eb-contact-favorite-inactive {
    color: var(--txt-color43) !important;
}

.cardtab table:first-child{
    font-weight: bold;
}

.fa-trash:not(.picto-only){
    color: var(--txt-color103);
}

#datepicker_dtdb, #datepicker_dtdb_meet, #datepicker_dtfn, #datepicker_dtfn_meet{
    background-color: var(--bkg-color1);
}

.form-control {
    /* border:none; */
    border-color: var(--bor-color14);
    background-color: var(--bkg-color12);
    margin-top: 1px;
    margin-bottom: 1px;
    height: auto;
    color: var(--txt-color92);
}

.nav-tabs:not(.sub-tabs) a.nav-link i.fa, .nav-tabs:not(.sub-tabs) a.nav-link i.fas, .nav-tabs:not(.sub-tabs) a.nav-link i.fab {
    display: none;
}

@media (max-width: 992px) {
    .reporting-bg{
    background-size: 35%;
    }
    .nav-tabs:not(.sub-tabs) li.nav-item {
        margin: 0 !important;
    }
    .nav-tabs:not(.sub-tabs) a.nav-link, a.nav-link.active {
        border: 1px solid var(--bor-color32) !important;
    }
    .nav-tabs:not(.sub-tabs) a.nav-link i.fa,
    .nav-tabs:not(.sub-tabs) a.nav-link i.fas,
    .nav-tabs:not(.sub-tabs) a.nav-link i.fab,
    .nav-tabs:not(.sub-tabs) a.nav-link.selected span {
        display: inline-block;
    }
    .nav-tabs:not(.sub-tabs) a.nav-link:not(.active) span {
        display: none;
    }

    .sub-tabs .nav-item {
        padding-top: 5px;
        margin: 0;
    }
    .sub-tabs .nav-item a.nav-link {
        border-left: none !important;
        border-right: none !important;
    }    
}

#module_page {
    /* #10433 — suit le thème (clair #F1F5F9 / sombre #0F0F0F) au lieu d'un gris
       clair codé en dur, qui rendait le fond blanc en thème sombre. */
    background: var(--eb-bg, #f0f2f8);
    border-radius: 0 0 8px 8px;
    padding-bottom: 24px;
}

#module_page #addons-row.addons-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: visible;
    align-items: stretch;
}

#module_page #addons-row.addons-module-grid > .addon-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

#module_page .addon-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    margin-bottom: 0;
    min-width: 0;
    background: var(--bkg-color1);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#module_page .addon-card:hover {
    transform: translateY(-2px);
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

#module_page .addon-card-media {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bkg-color108), var(--bkg-color2));
    border-radius: 0;
}

#module_page .addon-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Icône FA centrée avec dégradé coloré — remplace la thumbnail */
#module_page .addon-card-media-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
#module_page .addon-card-media-icon::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    transition: transform 0.4s ease;
}
#module_page .addon-card-media-icon i {
    position: relative;
    font-size: 60px;
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}
#module_page .addon-card:hover .addon-card-media-icon i {
    transform: scale(1.15);
}
#module_page .addon-card:hover .addon-card-media-icon::before {
    transform: scale(1.25);
}

/* Palettes sémantiques */
#module_page .addon-card-media-icon.palette-blue   { background: linear-gradient(135deg, #3b82f6, #1e40af); }
#module_page .addon-card-media-icon.palette-green  { background: linear-gradient(135deg, #22c55e, #15803d); }
#module_page .addon-card-media-icon.palette-purple { background: linear-gradient(135deg, #a855f7, #6b21a8); }
#module_page .addon-card-media-icon.palette-orange { background: linear-gradient(135deg, #f97316, #c2410c); }
#module_page .addon-card-media-icon.palette-pink   { background: linear-gradient(135deg, #ec4899, #9d174d); }
#module_page .addon-card-media-icon.palette-cyan   { background: linear-gradient(135deg, #06b6d4, #155e75); }
#module_page .addon-card-media-icon.palette-red    { background: linear-gradient(135deg, #ef4444, #991b1b); }
#module_page .addon-card-media-icon.palette-gray   { background: linear-gradient(135deg, #64748b, #334155); }

#module_page .addon-card .buttons-container {
    position: static;
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 14px 0;
    opacity: 1;
    z-index: auto;
}

#module_page .addon-card .description {
    position: static;
    right: auto;
    bottom: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    text-align: left;
    background: var(--bkg-color1);
    padding: 16px 16px 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}

#module_page .addon-card .description h1 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--txt-color3);
    order: 2;
}

#module_page .addon-card .description p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 16px;
}

/* Texte descriptif visible (mockup) — entre le titre et le footer */
#module_page .addon-card .description p.module-desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--txt-color43, #64748b);
    margin: 2px 0 4px;
    order: 3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card-top ne contient plus que .addon-card-badges (extraite via position absolute).
   display:contents pour qu'elle ne prenne pas de place visuellement. */
#module_page .addon-card-top {
    display: contents;
}

/* Badges overlay top-right of the card (anchored to .addon-card which is position:relative) */
#module_page .addon-card .addon-card-badges {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}

#module_page .addon-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#module_page .addon-badge--installed {
    background: rgba(59, 130, 246, 0.9);
    color: #fff;
}

#module_page .addon-badge--free {
    background: rgba(34, 197, 94, 0.9);
    color: #fff;
}

#module_page .addon-badge--neutral {
    background: rgba(100, 116, 139, 0.85);
    color: #fff;
}

#module_page .addon-badge--alert {
    background: var(--bkg-color14);
    color: #fff;
}

#module_page .addon-badge--danger {
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
}

#module_page .addon-badge--trial {
    background: rgba(37, 99, 235, 0.9);
    color: #fff;
}

#module_page .addon-badge--price {
    background: rgba(139, 92, 246, 0.9);
    color: #fff;
    text-transform: none;
    letter-spacing: 0.2px;
}

#module_page .addon-badge--price-ttc {
    background: rgba(139, 92, 246, 0.55);
    color: #fff;
    text-transform: none;
    letter-spacing: 0.2px;
    font-weight: 500;
    font-size: 9px;
}

#module_page .addon-badge--subscribed {
    background: rgba(34, 197, 94, 0.9);
    color: #fff;
    font-size: 11px;
    padding: 5px 14px;
}

#module_page .addon-badge--locked {
    background: rgba(100, 116, 139, 0.85);
    color: #fff;
}

/* Note expliquant aux organisations filles pourquoi un module est verrouillé :
   il doit d'abord être activé par l'organisation principale (instance/racine). */
#module_page .addon-locked-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11px;
    line-height: 1.4;
    color: #64748b;
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid rgba(100, 116, 139, 0.18);
    border-radius: 8px;
    padding: 7px 10px;
    margin: 8px 0 2px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

#module_page .addon-locked-note i {
    margin-top: 2px;
    color: #94a3b8;
    flex: 0 0 auto;
}

#module_page .addon-card .version-module {
    position: static;
    font-size: 11px;
    font-weight: 600;
    color: #b0b8cc;
    flex-shrink: 0;
    align-self: center;
}

/* Footer unifié : toggle (à gauche) + icônes + version (à droite), séparé par une border-top */
#module_page .addon-card-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    order: 100;
    flex-wrap: wrap;
    margin: 10px -16px 0;
    padding: 12px 16px 14px;
    border-top: 1px solid #e2e8f0;
}

/* Toggle en tête du footer (avant les icônes) */
#module_page .addon-card-actions-row > .switchconfig {
    margin-right: auto;
}

#module_page .addon-card-actions-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

#module_page .addon-card-actions-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    order: 101;
    width: 100%;
    margin: 0 -16px;
    padding: 0 16px 14px;
}

#module_page .addon-card .addon-card-actions-icons .btn:not(.btn-success):not(.d-none),
#module_page .addon-card .addon-card-actions-icons a.btn:not(.btn-success):not(.d-none) {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: var(--bkg-color1);
    color: #64748b;
    margin: 0 !important;
    box-shadow: none;
}

#module_page .addon-card .addon-card-actions-icons .btn:not(.btn-success) i,
#module_page .addon-card .addon-card-actions-icons a.btn:not(.btn-success) i {
    line-height: 1;
    margin: 0;
    vertical-align: 0;
}

#module_page .addon-card .addon-card-actions-icons a.btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

#module_page .addon-card .addon-card-actions-icons .btn:not(.btn-success):hover,
#module_page .addon-card .addon-card-actions-icons a.btn:not(.btn-success):hover {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #3b82f6;
}

/* Catalogue / org not-installed: info (small) + Installer / Activer (full green) */
#module_page .addon-card .addon-card-actions-icons.addon-card-actions-install {
    align-items: center;
    gap: 10px;
}

#module_page .addon-card .addon-card-actions-icons.addon-card-actions-install .btn-success,
#module_page .addon-card .addon-card-actions-icons.addon-card-actions-install .install-form .btn {
    width: auto !important;
    min-width: auto !important;
    height: auto !important;
    min-height: 34px;
    padding: 0.45rem 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    line-height: 1.25 !important;
    border-radius: 8px;
    white-space: nowrap;
    color: var(--bs-btn-color, #fff) !important;
    background-color: var(--bs-btn-bg, #198754) !important;
    border: 1px solid var(--bs-btn-border-color, #198754) !important;
    box-shadow: none;
}

#module_page .addon-card .addon-card-actions-icons.addon-card-actions-install .btn-success:hover,
#module_page .addon-card .addon-card-actions-icons.addon-card-actions-install .install-form .btn:hover {
    color: var(--bs-btn-hover-color, #fff) !important;
    background-color: var(--bs-btn-hover-bg, #157347) !important;
    border-color: var(--bs-btn-hover-border-color, #146c43) !important;
}

#module_page .addon-card .addon-card-actions-icons.addon-card-actions-install .btn-success i,
#module_page .addon-card .addon-card-actions-icons.addon-card-actions-install .install-form .btn i {
    flex-shrink: 0;
    margin: 0 !important;
}

#module_page .addon-card .addon-card-actions-icons.addon-card-actions-install .install-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

#module_page .addon-card .addon-card-actions-primary .btn {
    margin-top: 0;
    margin-left: 0;
}

/* #module_page .addon-card .switchconfig : styles factorisés dans la règle
   de base `.switchconfig` / `.slider.config` plus haut dans ce fichier.
   On laisse juste margin/align-self spécifiques à la carte. */
#module_page .addon-card .switchconfig {
    margin: 0;
    align-self: center;
}

/* Module payant activé en essai gratuit : bordure ambrée */
/* !important requis : dashboard-modern.css pose border !important sur body.eb-has-topbar-v2 .addon-card */
#module_page .addon-card.addon-card--in-trial {
    border: 2px solid rgba(251, 146, 60, 0.75) !important;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.12), 0 4px 24px rgba(251, 146, 60, 0.08) !important;
}
/* #10433 — pas d'override du fond .addon-card-media pour les cartes en essai :
   on conserve le dégradé de palette plein (comme les autres modules, ex. Agrément
   palette-orange). La distinction « en essai » reste portée par le bord + halo
   orange ci-dessus, pas par un bandeau délavé non conforme à la charte. */

/* Module dont l'essai est terminé : apparence grisée */
#module_page .addon-card.addon-card--trial-expired {
    opacity: 0.7;
    border: 2px solid rgba(239, 68, 68, 0.35) !important;
}
:root.dark #module_page .addon-card.addon-card--in-trial {
    border-color: rgba(251, 146, 60, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.1), 0 4px 24px rgba(251, 146, 60, 0.06) !important;
}

#module_page .row-module-search {
    text-align: end;
}

#module_page .row-module-search .module-search-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding-right: 16px;
    box-sizing: border-box;
}

#module_page .row-module-search .module-search-wrap {
    margin-left: auto;
    max-width: 280px;
    width: auto;
}

#module_page .moduleSearchBar-pill {
    border: 1.5px solid #dde2f0;
    border-radius: 10px;
    padding: 8px 18px;
    font-size: 14px;
    width: 220px !important;
    max-width: min(280px, 100%) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block;
    outline: none;
    transition: border-color 0.2s;
    box-shadow: none !important;
    text-align: left;
}

#module_page .moduleSearchBar-pill:focus {
    border-color: #4f8ef7;
}

.isValid-after {
    position: absolute;
    top: 6px;
    right: 6px;
    border-radius: 20px;
    font-size: 12px;
}
.isValid-after.valid {
    background: var(--bkg-color96);
    color: var(--txt-color76);
    padding: 3px 6px;
}
.isValid-after.valid i:before {
    content: "\f00c";
}

.isValid-after.error {
    background-color: var(--bkg-color97);
    color: var(--txt-color77);
    padding: 3px 7.875px;
}.isValid-after.error i:before {
    content: "\f00d";
}

div.dropdown.bootstrap-select.form-control.form-control-sm:not(.noDefaultWidth){
  width: 60%!important;
    background-color: var(--bkg-color2);
}

/*Pareil qu'au dessus mais avec la classe noDefaultWidth*/
div.dropdown.bootstrap-select.form-control.form-control-sm.noDefaultWidth{
    background-color: var(--bkg-color2);
}

.flex{
    display:inline-flex;
}

.eightcent{
    width:85%;
}

.form-control[readonly]:not(.nogray) {
    background-color: var(--bkg-color109);
}
.flatpickr-input[readonly]:not([disabled]):not(.alert-red-fade) {
  background-color: var(--bkg-color1) !important;
}

.datesize{
    width:130px;
    text-align: center; 
}

.maxsize{
    width:100% !important;
}

@media (max-width: 769px) {
    #subsection-dropdown .dropdown.bootstrap-select{
      max-width:none !important;
  }
    #navbreadcrumb{
        padding-left:5px;
    }
}

.select-control{
    padding-left:5px;
    font-size: 0.875rem;
}

tr.newTable-tr.opacity td {
    opacity: 0.3;
}

.debug-icon {
    position: fixed;
    z-index: 2147483003;
    bottom: 20px;
    right: 46%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bkg-color1);
    cursor: pointer;
    box-shadow: 0 1px 6px 0 var(--sha-color25), 0 2px 32px 0 var(--sha-color26);
}

.turn-phone-info p {
  display: block;
  width: 60%;
  text-align: left;
  margin: 0;
  padding: 0;
}

.turn-phone-info span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 35%;
}

.turn-phone-info i {
  font-size: 2.25em;
  animation: turn-phone-info-rotate 1.7s infinite ease-in-out;
  transform-origin: center center;
}

.turn-phone-info.fade {
  pointer-events: none;
  animation: turn-phone-info-fade .3s ease-in-out;
}

@keyframes turn-phone-info-rotate {
  from {
    opacity: 0;
    transform: rotate(0);
  }
  10% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(90deg);
  }
  90% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: rotate(90deg);
  }
}

@keyframes turn-phone-info-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Tab garde */
  .tab-garde-colum{
    color: var(--txt-color14);
    
  }
  .tab-garde-items{
    color: var(--txt-color14);
  }

  table > tbody > .tab-garde-items > th,
  .tableau-create-garde tr {
    font-weight:normal !important;
  }

  /* #10620 — champs "Nom" de tranche du type de garde : largeur min pour
     améliorer la lisibilité ("Aprè" -> "Après-mi" dans ~76px). La carte
     "Paramétrage" est plafonnée (~367px) : au-delà de ~78px par champ les
     4 colonnes se chevauchent, donc le title= natif (cf. upd_type_garde.php)
     donne le nom complet au survol. */
  tr[name='nom_tranche'] input[type='text'] {
    min-width: 78px;
  }


  .miniature-garde {
    overflow : hidden;
    height : 48px;
    width : 43px;
    border-radius : 12px;
    margin-right : 7px;
  }

  .nom-garde {
    font-weight: bolder;
  }

  .partie-garde {
    margin-bottom : 15px;
  }

  .consigne {
    position : fixed;
  }

  .consigne .card-body {
    height: calc(100vh - 285px);
    overflow-y: auto;
  }

  #select_date{
    text-align:center;
    margin-top:-42px;
    display: flex;
    justify-content: flex-end;
  }

  @media (max-width: 1199px) {
    .consigne {
      position : unset !important;
    }
    .consigne .card-body {
      height: 100%;
    }
    
    #select_date {
      text-align:left;
      margin-top:0px;
    }
  }

  @media (max-width: 600px) {
    .miniature-garde {
      display : none;
    }
    .nom-garde {
      bottom : 0px;
      left : 0px;
    }
    .prenom-garde {
      bottom : 0px;
      left : 0px;
      margin-bottom : 0px;
    }

    .partie-garde {
      width : 100%;
      text-align : center;
      padding-bottom : 11px;
    }

    .noBorder.piquet {
      width : 100% !important;
    }

    .tableau-garde td {
      padding : 0.7em 0em !important;
    } 
  }
/* ============================================================ */
/* Vue Équipe period-aware (display_postes réutilisé)           */
/* La grille des postes est dimensionnée pour la largeur de     */
/* l'onglet Affectation. Dans la carte d'équipe (plus étroite)  */
/* les noms wrappaient et débordaient de la cellule 40px (texte */
/* qui sort, bordures barrant les noms). On élargit les colonnes */
/* à 50% et on donne de la hauteur aux cellules. Positionnement  */
/* absolu des cartes conservé => drag-and-drop intact.           */
/* Scopé à .eb-equipe-postes-periodes : n'affecte pas l'Affectation. */
.eb-equipe-postes-periodes table.piquet { width: 100% !important; table-layout: fixed !important; }
.eb-equipe-postes-periodes .piquet td { width: 50% !important; padding: 5px 6px !important; vertical-align: top !important; }
.eb-equipe-postes-periodes .poste { height: 48px !important; }
.eb-equipe-postes-periodes .affected.pompier { font-size: 12.5px !important; }

/* ======================== */
/* wizard d'installation */
/* ======================== */
/*Mise en page*/
.body-wizard {
  padding: 0;
  margin: 0;
}
.body-wizard footer {
  display: none;
}
.wizard {
  margin: 0;
  min-height: 100vh;
}
.wizard-right {
  background-color: var(--bkg-color12);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.wizard-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wizard-right .wizard-title{
  color: var(--txt-color4);
}
.wizard-title {
  display: flex;
}
.wizard-title h1 {
  margin-left: 10px;
}
.wizard-subtitle {
  color: var(--txt-color5);
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 2rem;
}
/*Formulaire*/
.wizard-right-content {
  width: 50%;
  margin-top: 3rem;
}
.wizard .one-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}
.wizard .one-field .input-group {
  flex-wrap: nowrap;
}
.wizard label{
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--txt-color4);
}
.wizard .fa-lg {
  font-size:1.2rem;
  margin-left: 5px;
}
.wizard .one-field input, .wizard .one-field select {
  width: 100%;
  background-color: var(--bkg-color1);
  font-weight: 400;
  line-height: 1.5;
  font-size: 1rem;
  height: auto;
  padding: 10px;
  box-shadow: none;
}
.wizard .one-field input:focus, .wizard .one-field select:focus{
  border: none;
}
.wizard .one-field input::placeholder {
  color: var(--txt-color55);
}
.wizard-button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 3rem;
  gap: 0.25em;
}
/*Etapes*/
.wizard-number {
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 1.5px;
}
.wizard-one-step[wizard-state=done] .wizard-number{
  display: none;
}
.wizard-one-step[wizard-state=current] .wizard-number{
  color: var(--txt-color28);
}
.wizard-one-step[wizard-state=pending] .wizard-number{
  color: var(--txt-color3);
}
.wizard-round {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
  background-color: var(--bkg-color61);
}
.wizard-one-step[wizard-state=pending] .wizard-round{
  background-color: var(--bkg-color12);
}
.step-title {
  color: var(--txt-color4);
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0;
}
.wizard-one-step[wizard-state=done] .step-title{
  color: var(--txt-color5);
}
.step-sub-title {
  color: var(--txt-color5);
  font-weight: 500;
}
.wizard-one-step[wizard-state=done] .step-sub-title{
  color: var(--txt-color79);
}
.wizard-one-step {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
.wizard-check {
  display: none;
}
.wizard-one-step[wizard-state=done] .wizard-check{
  display: block;
  color: var(--txt-color28);
}
.wizard-img {
  display: block;
  width: 100%;
  height: 25rem;
  background-image: url(../images/index.png);
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}
/*Responsive*/
@media (max-width: 992px) {
  .wizard-right-content {
    width: 100%;
  }
  .wizard {
    height: auto;
  }
  .wizard-left {
    margin-top: 2rem;
  }
  .wizard-img {
    margin-top: -6rem;
  }
  .wizard-button {
    margin-bottom: 2rem;
  }
}

.filter-area{
  height: 0;
  overflow: hidden;
  transition-duration: 0.2s;
  position: relative;
  pointer-events: none;
}

.filter-area.active {
  height: auto;
}

.filter-area > * {
  pointer-events: auto;
}

.btn-wrapper{
  margin-left:auto;
}

.btn-wrapper button{
  display: inline-block;
  height: 36px;
  margin-right: 5px;
  overflow: hidden;
}

.btn-wrapper button i{
  margin: auto;
}

@media (min-width: 992px) {
  .filter-area {
    height: auto;
    overflow: visible;
  }
  .show_mobile {
    display:none;
  }
}
@media (max-width: 992px) {
  .filter-mobile-icon{
    padding-right:0.1px;
    color: var(--txt-color65);
  }
}
@media (min-width: 1048px) {
  .champ_date2{
    display: none;
  }
}
@media (max-width: 1047px) {
  .champ_date{
    display: none;
  }
}
.test2{
    background-color:var(--bkg-color1);
    text-align:left;
}
.filter-mobile-caret{
    padding-left:1.5px;
    color: var(--txt-color65);
  }
  .bs-bars {
    display:flex;
  }
  .columns-left{
      padding-left:9px;
  }

  #toolbar{
    margin:auto;
  }

  #toolbar .bootstrap-select{
    width: 155px;
  }
  .columns-left{
    margin-left:0px !important;
    margin-right:0px !important;
    padding-right:0px !important;
    padding-left:0px !important;
    
  }

@media (max-width: 560px) {
  .search-input{
    max-width: 128px;
  }
}
ul.config-infos {
  font-size: 12px;
  text-align: justify;
  margin: 20px 15px 0;
  padding: 0;
}

ul.config-infos li {
  margin: 10px 20px;
}

.text-en-gris {
    background-color: var(--bkg-color28);
    border-style: solid;
    border-color: var(--bor-color42);
    border-radius: 5px;
    padding: 6px !important;
}

.badge-requis {
  display: inline-block;
  padding: 0.25em 0.5em;
  border-right: 0.1em solid;
  border-bottom: 0.1em solid;
  border-color: var(--bor-color2);
  font-size: 100%;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  color: var(--txt-color1);
}

.badge-option {
    background-color: var(--bkg-color100);
    color: var(--txt-color21);
    padding: 0.3em;
    border-radius: 50%;
    padding-right: 10px;
    padding-left: 10px;
}

/* ============================== */
/* Activ Documents customizations */
/* ============================== */
#activDocumentTable .fixed-table-container {
  background-color: var(--bkg-color1);
  padding-left: unset !important;
}
#activDocumentTable th {
  line-height: 3em;
  background-color: var(--bkg-color1);
  font-weight: 500;
}
#activDocumentTable tbody *{
  border: none !important;
}
#activDocumentTable tbody tr:nth-child(odd){
  background-color: var(--bkg-color1) !important;
}
#activDocumentTable tbody tr td:nth-child(odd){
  text-align: left;
}
#activDocumentTable .fixed-table-body{
  border-radius : 5px;
}
.fixed-table-body:has(#table_remplacement){
  overflow: unset !important;
}

/* ============================== */
/* Type Activite                  */
/* ============================== */
table#ongletMenu tbody tr td.subTitle{
  font-weight : 600;
  font-size: 14px;
  padding-bottom: 0;
  padding-top: 15px;
}
table#ongletMenu tbody tr td.subTitle + td{
  padding-bottom: 0;
  padding-top: 15px;
}

table#ongletMenu tbody tr td.noSubTitle{
  padding-top :2px;
  padding-bottom :2px;
}
/* ============================== */
/* Modal cat�gorie activite       */
/* ============================== */

#modalcategorie button.close{
  box-shadow: unset;
}

#tableCategorie span.badge{
  background-color: unset;
  color : unset;

}

.swal2-popup.eb-category-manager-modal .swal2-content,
.swal2-popup.eb-category-manager-modal .swal2-html-container {
  background: var(--bkg-color1);
}

.swal2-popup.eb-category-manager-modal .eb-category-manager-table-shell,
.swal2-popup.eb-category-manager-modal .eb-category-manager-table-wrap {
  width: 100%;
  max-width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.swal2-popup.eb-category-manager-modal .fixed-table-container,
.swal2-popup.eb-category-manager-modal .fixed-table-body {
  background: var(--bkg-color1) !important;
}

.swal2-popup.eb-category-manager-modal .fixed-table-toolbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#ongletMenu.newTableAll tr:not(:first-child):hover,
#optionsActivite.newTableAll tr:not(:first-child):hover{
  background-color: var(--bkg-color1);
}
.noHover{
  pointer-events: none;
}
.aDisabled{
  pointer-events: none;
  opacity:70%;
}
/* ============================== */
/* SubTitle fonctionnalit�        */
/* ============================== */

.subTitleFonctionnalite{
  font-weight:600 !important; 
  font-size:1.10rem !important;
  text-align : center;
  width : 50%;
}
.subTitleFonctionnalite:hover{
  background-color: var(--bkg-color1);
}

/* ============================== */
/* Loader                         */
/* ============================== */

.page-loader {
  background: var(--bkg-color1);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99999999;
}

.page-loader .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.page-loader svg {
  display: none;
}

/* Loader inline des contenus chargés en AJAX (#evenement_choice_stats,
   et tous les conteneurs *_stats / *_tabs). Le blob `.loader` n'avait de
   positionnement que sous `.page-loader` : injecté seul dans son conteneur, il
   s'affichait collé en haut à gauche et surdimensionné (blobs 300x300) → rendu
   « moche » pendant le chargement de la liste des activités (surtout mobile).
   On cible ici tout `.loader` dont le parent n'est PAS `.page-loader` : centrage,
   taille raisonnable et fondu d'apparition, sans toucher au loader plein écran. */
:not(.page-loader) > .loader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  min-height: 220px;
  -webkit-animation: eb-inline-loader-in 0.2s ease both;
          animation: eb-inline-loader-in 0.2s ease both;
}

/* Le <svg> (filtre « goo ») n'est qu'un bloc de défs : masqué sous `.page-loader
   svg`, mais en inline il occupait une boîte vide ~300x150 qui décentrait le blob. */
:not(.page-loader) > .loader svg {
  display: none;
}

:not(.page-loader) > .loader .blobs {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
}

@media (max-width: 991px) {
  :not(.page-loader) > .loader {
    min-height: 180px;
  }
  :not(.page-loader) > .loader .blobs {
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
  }
}

@-webkit-keyframes eb-inline-loader-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes eb-inline-loader-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.blobs {
  -webkit-filter: url(#goo);
          filter: url(#goo);
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 70px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.blobs .blob-center {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  background: var(--bkg-color129);
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(0.9) translate(-50%, -50%);
      -ms-transform: scale(0.9) translate(-50%, -50%);
          transform: scale(0.9) translate(-50%, -50%);
  -webkit-animation: blob-grow linear 3.4s infinite;
          animation: blob-grow linear 3.4s infinite;
  border-radius: 50%;
  -webkit-box-shadow: 0 -10px 40px -5px var(--sha-color6);
          box-shadow: 0 -10px 40px -5px var(--sha-color6);
}

.blob {
  position: absolute;
  background: var(--bkg-color129);
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  -webkit-animation: blobs ease-out 3.4s infinite;
          animation: blobs ease-out 3.4s infinite;
  -webkit-transform: scale(0.9) translate(-50%, -50%);
      -ms-transform: scale(0.9) translate(-50%, -50%);
          transform: scale(0.9) translate(-50%, -50%);
  -webkit-transform-origin: center top;
      -ms-transform-origin: center top;
          transform-origin: center top;
  opacity: 0;
}

.blob:nth-child(1) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.blob:nth-child(2) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.blob:nth-child(3) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.blob:nth-child(4) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.blob:nth-child(5) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes blobs {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(-330px - 50%), -50%);
            transform: scale(0) translate(calc(-330px - 50%), -50%);
  }
  1% {
    opacity: 1;
  }
  35%,
  65% {
    opacity: 1;
    -webkit-transform: scale(0.9) translate(-50%, -50%);
            transform: scale(0.9) translate(-50%, -50%);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(330px - 50%), -50%);
            transform: scale(0) translate(calc(330px - 50%), -50%);
  }
}

@keyframes blobs {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(-330px - 50%), -50%);
            transform: scale(0) translate(calc(-330px - 50%), -50%);
  }
  1% {
    opacity: 1;
  }
  35%,
  65% {
    opacity: 1;
    -webkit-transform: scale(0.9) translate(-50%, -50%);
            transform: scale(0.9) translate(-50%, -50%);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(330px - 50%), -50%);
            transform: scale(0) translate(calc(330px - 50%), -50%);
  }
}

@-webkit-keyframes blob-grow {
  0%,
  39% {
    -webkit-transform: scale(0) translate(-50%, -50%);
            transform: scale(0) translate(-50%, -50%);
  }
  40%,
  42% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
            transform: scale(1, 0.9) translate(-50%, -50%);
  }
  43%,
  44% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
            transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  45%,
  46% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
            transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  47%,
  48% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
            transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  52% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
            transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  54% {
    -webkit-transform: scale(1.7, 1.6) translate(-50%, -50%);
            transform: scale(1.7, 1.6) translate(-50%, -50%);
  }
  58% {
    -webkit-transform: scale(1.8, 1.7) translate(-50%, -50%);
            transform: scale(1.8, 1.7) translate(-50%, -50%);
  }
  68%,
  70% {
    -webkit-transform: scale(1.7, 1.5) translate(-50%, -50%);
            transform: scale(1.7, 1.5) translate(-50%, -50%);
  }
  78% {
    -webkit-transform: scale(1.6, 1.4) translate(-50%, -50%);
            transform: scale(1.6, 1.4) translate(-50%, -50%);
  }
  80%,
  81% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
            transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  82%,
  83% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
            transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  84%,
  85% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
            transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  86%,
  87% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
            transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  90%,
  91% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
            transform: scale(1, 0.9) translate(-50%, -50%);
  }
  92%,
  100% {
    -webkit-transform: scale(0) translate(-50%, -50%);
            transform: scale(0) translate(-50%, -50%);
  }
}

@keyframes blob-grow {
  0%,
  39% {
    -webkit-transform: scale(0) translate(-50%, -50%);
            transform: scale(0) translate(-50%, -50%);
  }
  40%,
  42% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
            transform: scale(1, 0.9) translate(-50%, -50%);
  }
  43%,
  44% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
            transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  45%,
  46% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
            transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  47%,
  48% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
            transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  52% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
            transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  54% {
    -webkit-transform: scale(1.7, 1.6) translate(-50%, -50%);
            transform: scale(1.7, 1.6) translate(-50%, -50%);
  }
  58% {
    -webkit-transform: scale(1.8, 1.7) translate(-50%, -50%);
            transform: scale(1.8, 1.7) translate(-50%, -50%);
  }
  68%,
  70% {
    -webkit-transform: scale(1.7, 1.5) translate(-50%, -50%);
            transform: scale(1.7, 1.5) translate(-50%, -50%);
  }
  78% {
    -webkit-transform: scale(1.6, 1.4) translate(-50%, -50%);
            transform: scale(1.6, 1.4) translate(-50%, -50%);
  }
  80%,
  81% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
            transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  82%,
  83% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
            transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  84%,
  85% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
            transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  86%,
  87% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
            transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  90%,
  91% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
            transform: scale(1, 0.9) translate(-50%, -50%);
  }
  92%,
  100% {
    -webkit-transform: scale(0) translate(-50%, -50%);
            transform: scale(0) translate(-50%, -50%);
  }
}
/* ============================== */
/* Label validit� Comp�tences     */
/* ============================== */

.labelValidite {
  color: var(--txt-color1);
  border-radius: 5px;
  text-align: center;

}

.titleCompetence{
  background-color: var(--bkg-color1);
  float: left;
  font-size:18px;
  padding:1% 2%;
  min-width:100px;
  border-radius: 0.5em 0.5em 0 0;
  text-align:left;
}
/* ================================================ */
/* Correction z-index button boostratp table        */
/* ================================================ */
.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu{
  z-index: 1041 !important;
}

/* ================================================ */
/* Modal inscription Activit�                        */
/* ================================================ */

#ModalInscription {
  min-width: 30%;
}
#msgModalInscription{
  padding: 0 1.6em;
  color : var(--txt-color86);
  font-weight : normal;
  line-height : normal;
  word-wrap : break-word;
  font-size:16px !important;
}


/* ================================================ */
/* Modal inscription Options                        */
/* ================================================ */
#optionsInscription:hover{
  cursor :pointer;
  text-decoration: none;

}
#optionsInscription{
  color : var(--txt-color87);
  font-weight : bolder;
}
.swalDesinscription{
  margin-left : auto !important;
  margin-right : auto !important;
}

@media (max-width:1500px){
  .lowerCss{
    display: none;
  }
}
@media (max-width:1212px){
  .lowerCss2{
    padding-top: 16px;
  }
}
@media (max-width:1090px){
  .hide_mobile3{
    display: none;
  }
}
@media (max-width:1600px){
  .hide_mobile4{
    display: none;
  }
}

/* ================================================ */
/* Bouton clignotant                                */
/* ================================================ */
@keyframes glowing {
0% {
  background-color: var(--bkg-color101);
  box-shadow: 0 0 5px var(--sha-color27);
}
50% {
  background-color: var(--bkg-color102);
  box-shadow: 0 0 20px var(--sha-color28);
}
100% {
  background-color: var(--bkg-color101);
  box-shadow: 0 0 5px var(--sha-color27);
}

}
.green-glowing-button {
animation: glowing 1300ms infinite;
}

.alert-custom {
  background-color: var(--bkg-color8);

  border: 1px solid var(--bor-color3);
  border-color: var(--bor-color18);
  border-radius: 0.42rem;

  color: var(--txt-color1);
  max-width: 90%;
  padding: 15px;

  margin-top: 60px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1200px) {
  .alert-custom {
    max-width: 40% !important;
  }
}

.alert-custom-content {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.btn-custom {
  border-radius: 12px;
}

.btn-custom:hover {
  background-color: var(--bkg-color14);
}

.btn-custom:hover i {
  color: var(--txt-color1);
}

div#dropdown{
  position:absolute;
  z-index:1;
  left:30px;
  top: 7px;
}

/* ================================================ */
/* Dropdown on icon Section infos                             */
/* ================================================ */
.section-info-dropdown{
  position:relative !important;
  transform: initial !important;
  -webkit-transform: initial !important;
  -moz-transform: initial !important;
  -ms-transform: initial !important;
  -o-transform: initial !important;
}
#subsection-dropdown .dropdown-select{
  width: 100% !important;
}

.addonsAd {
    background-color: var(--bkg-color77);
    background-position: left bottom;
    background-size: auto 100%;
    width: 100%;
    height: 233px;
    background-repeat: no-repeat;
    border-radius: 0.42em;
}

.addonsAdText {
  display:flex;
  align-items:center; 
  justify-content:center; 
  text-align:left;
  font-family: Poppins, Helvetica, "sans-serif";
}

/* ================================================ */
/* Dropdown in modal Personnel > Fiche > Dotation   */
/* ================================================ */
#dotation .bootstrap-select{
  width: auto !important;
  max-width: 300px;
}

.dureeBtnGroup{
  width: 400px;
}
.dureeBtnGroup button{
  width: 150px;
}

.typePaiementCotisation,.raisonRejet {
  padding: 2px;
  border-radius: 5px;
}

/* ================================================ */
/* Stepper Synchronisation agenda                   */
/* ================================================ */
.stepper.stepper-pills .stepper-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stepper.stepper-pills .stepper-item {
  display: flex;
  align-items: stretch;
  position: relative;
}
.stepper.stepper-pills .stepper-item .stepper-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: .475rem;
  background-color: var(--bkg-color14);
  margin-right: 1.5rem;
}
.stepper.stepper-pills .stepper-item .stepper-icon .stepper-number {
  font-weight: 600;
  color: var(--txt-color1);
  font-size: 1.25rem;
}
.stepper.stepper-pills .stepper-item .stepper-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stepper.stepper-pills .stepper-item .stepper-label .stepper-title {
  color: var(--txt-color27);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: .3rem;
}
.stepper.stepper-pills .stepper-item .stepper-label .stepper-desc {
  color: var(--txt-color82);
}
.stepper.stepper-pills.stepper-column .stepper-nav {
  flex-direction: column;
}
.stepper.stepper-pills.stepper-column .stepper-item {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: .5rem;
}
.stepper.stepper-pills.stepper-column .stepper-icon {
  z-index: 1;
  height: 100%;
}
.stepper.stepper-pills.stepper-column .stepper-line {
  display: block;
  content: " ";
  justify-content: center;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  transform: translate(50%);
  border-left-width: 1px;
  border-left-style: dashed;
  border-left-color: var(--bor-color18);
}
.stepper.stepper-pills.stepper-column .stepper-item:first-child .stepper-line {
  top: 50%
}
.stepper.stepper-pills.stepper-column .stepper-item:last-child .stepper-line {
  bottom: 50%
}
.img-btn{
  height:32px;
  width:32px;
  border: 0px;
  border-radius: 15%;
  -webkit-border-radius: 15%;
  -moz-border-radius: 15%;
  -ms-border-radius: 15%;
  -o-border-radius: 15%;
  padding:0;
  cursor: pointer;
}
@media (min-width: 992px) { 
    .stepper-item.activity{
    height:250px;
    align-items:start !important;
  }
  .steper-item.activity-swal{
   
    align-items:start !important;
  }
  .stepper-item.activity .stepper-line{
    top: 0 !important;
  }
  #info-btn-wrapper > div{
    margin-top: 100px;
  }
}

/* ================================================ */
/* status mail configuration                        */
/* ================================================ */
.statutInProgress, .statutValide, .statutNotValide, .statutUnknown{
  padding: 5px 20px;
}
.statutUnknown{
  color: var(--txt-color83);
  background-color: var(--bkg-color4) ;
}
.statutInProgress, .statutValide, .statutNotValide{
  color: var(--txt-color1);
}
.statutValide{
  background-color: var(--bkg-color104) ;
}
.statutInProgress{
  background-color: var(--bkg-color105) ;
}
.statutNotValide{
  background-color: var(--bkg-color106) ;
}

.btn-xs {
  height: 20px;
  width: 20px;
  padding: 0px;
}

.unpayed-banner {
  background-color: #dc3545;
  color: white;
  max-width: inherit;
  width: inherit;
  position: fixed;
  margin-left: inherit;
  margin-right: 37px;
  left: 37px;
  right: 0;
  top: 51px;
  text-align: center;
  z-index: 500000;
  padding-top: 100px;
  padding-bottom: 100px;
  font-size: 40px;
  border-radius: 10px;
  opacity: 0.9;
}
.unpayed-banner-cross {
  color: white;
  font-size: 50px;
}

.innerBanner {
  display: flex;
  flex-direction: column;
}

.innerBannerBtn {
  max-width: 75px;
  align-self: center;
  position: absolute;
  bottom: 20px;
}

input.plus-minus-input:not([disabled]){
  width: 50px;
  height: 25px;
}
a.plus-minus-btn#moins, a.plus-minus-btn#plus{
  color: var(--txt-color1) !important;
}


/* ================================================ */
/* QR code modal                                    */
/* ================================================ */
table.qrModal tr{
  background-color: var(--bkg-color1);
  font-size: 14px;
  border: none;
}
table.qrModal td{
  width:50%;
}

table.qrModal tr:hover{
  background-color: var(--bkg-color1);
}

.qrcode-title-pic{
  margin-right: 5px;
  margin-top: -3px;
}

.qr-person-container {
  max-width: 500px;
}

.qr-person-card {
  border-radius: 10px;
}

.qr-person-header {
  background: var(--bkg-color108);
}

.qr-person-avatar {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.qr-person-grade {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  min-width: 38px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: var(--bkg-color1);
  border: 1px solid var(--bkg-color10);
  border-radius: 999px;
  box-shadow: 0 4px 12px var(--sha-color10);
  line-height: 1;
}

.qr-person-grade-img {
  display: block;
  object-fit: contain;
}

.qr-person-grade-fallback {
  max-width: 190px;
  color: var(--txt-color1);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qr-person-title {
  color: var(--txt-color1);
}

.qr-info-table {
  border-collapse: separate;
  border-spacing: 0 6px;
  table-layout: auto;
}

.qr-info-table > tbody > tr > td {
  padding: 7px 8px;
  vertical-align: top;
  border-bottom: 1px solid var(--bkg-color10);
}

.qr-info-table > tbody > tr > td:first-child {
  width: 36%;
  color: var(--txt-color3);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.qr-info-table > tbody > tr > td:last-child {
  color: var(--txt-color14);
  font-size: 13px;
  text-align: right;
  overflow-wrap: anywhere;
}

.qr-info-table > tbody > tr > td:last-child span {
  color: var(--txt-color14) !important;
}

.qr-info-roles-row > td {
  padding: 10px 0 4px !important;
  border-bottom: 0 !important;
}

.qr-info-section {
  border: 1px solid var(--bkg-color10);
  border-radius: 8px;
  background: var(--bkg-color1);
  overflow: hidden;
}

.qr-info-section-title {
  padding: 8px 10px;
  color: var(--txt-color3);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  background: var(--bkg-color108);
}

.qr-info-role-list {
  display: flex;
  flex-direction: column;
}

.qr-info-role-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border-top: 1px solid var(--bkg-color10);
}

.qr-info-role-item:first-child {
  border-top: 0;
}

.qr-info-role-name {
  min-width: 0;
  color: var(--txt-color14);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
}

.qr-info-role-entity {
  max-width: 42%;
  color: var(--txt-color3);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .qr-info-role-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .qr-info-role-entity {
    max-width: 100%;
    text-align: left;
  }
}

@media print {
  .qr-person-container {
    max-width: 500px !important;
    margin: 0 auto !important;
  }

  .qr-person-card,
  .qr-info-section,
  .qr-person-grade {
    box-shadow: none !important;
  }

  .qr-info-role-item {
    break-inside: avoid;
  }
}

/* ================================================ */
/* Filtres comp�tences                              */
/* ================================================ */
.stats-main{
  background-color:var(--bkg-color35) !important;
}
.stats-secondary{
  background-color:var(--bkg-color120) !important;
}
.stats-soon-expired{
  background-color:var(--bkg-color37) !important;
} 
.stats-expired{
  background-color:var(--bkg-color121) !important;
}

/* ================================================ */
/* Parametre SMTP info                             */
/* ================================================ */
.listSmtp > li{
  font-weight: 600;
}
.listParamSmtp {
  border: solid 1px black;
  /* border-color: var(--bor-color42) !important; */
}
.helpPwdSmtp {
  color: red;
}

/* ================================================ */
/* Tabs mobile                                      */
/* ================================================ */

.inactive-color {
  color:var(--txt-color3) !important;
}

.active-color {
  background-color:var(--bkg-color8)!important;
  color:var(--txt-color1) !important;
}

.bkg-color-menu-mobile {
  background-color:var(--bkg-color9) !important;
}

@media (max-width:371px) {
  .fa-sm2 {
    font-size: 0.825em !important;
    white-space: nowrap;
  }
  .menu-mobile {
    display : flex !important;
    justify-content : space-between !important;
    margin-inline-start : 0rem !important;
    margin-inline-end : 0rem !important;
    margin-bottom : 15px !important;
    margin-top : 15px !important;
    padding-left: 20px;
    padding-right: 20px;
  }
  .div-mobile {
    display : flex !important;
    justify-content : space-between !important;
    margin-inline-start : 2rem !important;
    width: 80px;
  }
}

@media (min-width:371px) and (max-width:408px) {
  .fa-sm2 {
    font-size: 0.875em !important;
    white-space: nowrap;
  }
  .div-mobile {
    display : flex !important;
    justify-content : space-between !important;
    margin-inline-start : 2rem !important;
    width: 80px;
  }
  .menu-mobile {
    display : flex !important;
    justify-content : space-between !important;
    margin-inline-start : 0rem !important;
    margin-inline-end : 0rem !important;
    margin-bottom : 15px !important;
    margin-top : 15px !important;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width:408px) and (max-width:523px) {
  .fa-sm2 {
    white-space: nowrap;
  }
  .div-mobile {
    display : flex !important;
    justify-content : space-between !important;
    margin-inline-start : 2rem !important;
    width: 80px;
  }
  .menu-mobile {
    display : flex !important;
    justify-content : space-between !important;
    margin-inline-start : 0rem !important;
    margin-inline-end : 0rem !important;
    margin-bottom : 15px !important;
    margin-top : 15px !important;
    padding-left: 25px;
    padding-right: 25px;
  }
}

@media (min-width:523px) {
  .fa-sm2 {
    white-space: nowrap;
  }
  .div-mobile {
    display : flex !important;
    justify-content : space-between !important;
    margin-inline-start : 2rem !important;
    width: 90px;
  }
  .menu-mobile {
    display : flex !important;
    justify-content : space-between !important;
    margin-inline-start : 3rem !important;
    margin-inline-end : 3rem !important;
    margin-bottom : 15px !important;
    margin-top : 15px !important;
    gap: 1rem;
    /* padding-left: 15px;
    padding-right: 15px; */
  }
}

.marge-active {
  padding-left : 10px !important;
  padding-right: 10px !important;
  padding-bottom: 8px !important;
  padding-top: 8px !important;
}

.int-marge {
  padding:10px !important;
}

.marge-top {
  margin-top: 20px !important;
}

.bord {
  border-radius: 0.42em !important;
}

.carousel a {
text-decoration: none;
}

a .carousel-control-prev-icon:active, a .carousel-control-next-icon:active,
a .carousel-control-prev-icon:hover, a .carousel-control-next-icon:hover {
  color:var(--txt-color3) !important;
}

.hide_desktop .fa-sm2:hover, .hide_laptop .fa-sm2:hover, .hide_tablette .fa-sm2:hover,
.hide_desktop_2 .fa-sm2:hover, .hide_desktop3 .fa-sm2:hover, .hide_desktop4 .fa-sm2:hover  {
  border-radius: 0.42em !important;
  background-color:var(--bkg-color8)!important;
  color:var(--txt-color1) !important;
  padding-left : 10px !important;
  padding-right: 10px !important;
  padding-bottom: 8px !important;
  padding-top: 8px !important;
}

.fs-sup{
  font-size:10px !important;
}

.fs-sup-warn{
  font-size:14px !important;
}

.carousel-control-prev,
.carousel-control-next {
  width: 14px !important;
}

a.carousel-control-prev:active, a.carousel-control-next:active,
a.carousel-control-prev:hover, a.carousel-control-next:hover {
  color:var(--txt-color3) !important;
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 14px !important;
  width: 14px !important;
}

.switch {
  margin: 8px 0;
}

input[type='radio'] {
  margin:11.5px 3px;
}

/* #9723 — Carousel menu arrows: use primary color SVG, no absolute positioning (handled by parent) */
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23007bff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23007bff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
}
.carousel-control-prev, .carousel-control-next {
  width: 32px !important;
  opacity: 0.8;
}
.carousel-control-prev:hover, .carousel-control-next:hover {
  opacity: 1;
}

@media (min-width: 659px) {
  .only_phone {
      display: none !important;
  }
}

@media (max-width: 658px) {
  .hide_phone {
      display: none !important;
  }
}

@media (min-width: 1221px) {
  .only_tablette {
      display: none !important;
  }
}

@media (max-width: 1219px) {
  .hide_tablette {
      display: none !important;
  }
}

@media (min-width: 1472px) {
  .only_laptop {
      display: none !important;
  }
}

@media (max-width: 1471px) {
  .hide_laptop {
      display: none !important;
  }
}

@media (min-width: 1760px) {
  .only_desktop {
      display: none !important;
  }
}

@media (max-width: 1759px) {
  .hide_desktop {
      display: none !important;
  }
}

@media (min-width: 2160px) {
  .only_desktop_2 {
      display: none !important;
  }
}

@media (max-width: 2159px) {
  .hide_desktop_2 {
      display: none !important;
  }
}

@media (min-width: 2560px) {
  .only_desktop3 {
      display: none !important;
  }
}

@media (max-width: 2559px) {
  .hide_desktop3 {
      display: none !important;
  }
}

/* ================================================ */
/* Modif graphique des datepicker                   */
/* ================================================ */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
  color: var(--bkg-color8);
  background-color:transparent;
  background-image:none;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  color: var(--bkg-color1) !important;
  border-radius: 60% !important;
  background-color: var(--bkg-color8) !important;
  background-image: -moz-linear-gradient(to bottom, #08c, var(--bkg-color8));
  background-image: -ms-linear-gradient(to bottom, #08c, var(--bkg-color8));
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(var(--bkg-color8)));
  background-image: -webkit-linear-gradient(to bottom, #08c, var(--bkg-color8));
  background-image: -o-linear-gradient(to bottom, #08c, var(--bkg-color8));
  background-image: linear-gradient(to bottom, #08c, var(--bkg-color8));
}
.datepicker-dropdown {
  padding-right: 40px;
  padding-left: 40px;
  padding-bottom: 40px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
.datepicker {
  text-align: left !important;
}

.dateselector {
  width: 125px;
}
/* @media (max-width: 990px) {
  .dateselector {
    width: 40%;
  }
} */
/* ================================================ */
/* Bouton widget                           */
/* ================================================ */
.togglewidget{
  font-size : 0.8rem !important;
}

/* ================================================ */
/* period gratuite cloud                            */
/* ================================================ */
.txt-subscribe {
  font-weight: 600;
  color: #fff !important;
}
.freePeriodBad{
  background-color: var(--txt-color11) ;
}
.no-item-hover:hover *{
  color: #fff !important;
  text-decoration: none;
}
.text-time-abo{
  color: var(--txt-color3);
  font-size: 14px;
  font-weight: 600;
}

/* ================================================ */
/* Progression circulaire cloud temps restant       */
/* ================================================ */
.ring-container{
  height: 40px;
  width: 40px;
  position: relative;
}
.ring-outer{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.ring-inner{
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ring-number {
  font-weight: 700;
  color: #555;
}
#cloudProgressRing{
  fill: none;
  stroke-width: 5px;
}
#svgCloudProgressRing{
  position: absolute;
  top: 0;
  transform: rotate(-90deg);
}
.pr-bg-free{
  stroke: var(--txt-color13);
}
.pr-bg-limite{
  stroke: var(--txt-color6);
}
.pr-bg-restricted{
  stroke: var(--txt-color7);
}

/* ================================================ */
/* Duree de travail      */
/* ================================================ */
.timelineDT {
  border-bottom: solid 1px var(--bor-color5);
}
.timedayDT {
  border-right: solid 1px var(--bor-color5);
}

.btn-outline-gold {
  color: #f0cc00;
  border-color: #f0cc00;
}
.filter-btn{
  padding-top: 0;
}
.scrollable-menu {
  margin-top: 10px;
  height: auto;
  max-height: 300px;
  overflow-y: scroll;
  overflow-x: none;
}
.input-phone .scrollable-menu{
  max-height: 150px;
}
.dropdown-phonecode{
  padding: 5px 10px;
  /* #9959 — Topbar V2 est z-index:1040 et sidebar modern 1050
     (cf. dashboard-modern.css). Sans override, Bootstrap défaut = 1000
     → dropdown sous la barre de navigation. */
  z-index: 1060 !important;
}
/* #9959 — Liste des pays : max 6 lignes visibles, scroll pour le reste.
   Chaque <li> ≈ 32px → 6 × 32 + padding = ~210px. */
.dropdown-phonecode .scrollable-menu {
  max-height: 210px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-width:650px){
  .dropdown-ind-flag .dropdown-menu.show{
    left: -10vw !important;
    max-width: 70vw;
  }
}

/* #10283 — Drapeau du picker téléphone : 18px (taille HTML
   d'origine), protégé du flex-shrink. */
[id^="phone-flags"] img {
  flex-shrink: 0 !important;
  vertical-align: middle;
}
[id^="phone-flags"]::after {
  flex-shrink: 0 !important;
}
/* Picker drapeau + indicatif (FR +33, BR +55, …) : on tasse le
   padding du wrapper et on réduit la police pour que drapeau +
   indicatif + flèche dropdown tiennent dans la colonne disponible
   (le wrapper fait ~53px en modern UI, le contenu en 0.85em + gap
   4px débordait à ~74px et rognait la flèche ::after). */
.dropdown-ind-flag.input-group-text {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.dropdown-ind-flag .dropdown,
.dropdown-ind-flag .dropdown-toggle {
  width: auto !important;
  min-width: 0 !important;
}
.dropdown-ind-flag .dropdown-toggle,
[id^="phone-flags"] {
  font-size: 10px !important;
  gap: 2px !important;
  white-space: nowrap !important;
}

/* ================================================ */
/* Adresses      */
/* ================================================ */

.inputComplementAddresseCRM {
  text-align:right;
  padding-right:1em;
  place-content:flex-end;

}

.addresses-dropdown #addresses a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: black;
}

.address-visible-label{
  margin-bottom: 0;
}
/* ================================================ */
/* CDS pdf      */
/* ================================================ */
.text-container {
  background-color: #EEF0F8;
  padding: 10px 15px;
  width: 100%;
  height: 600px; 
  overflow: auto;
  text-align: justify;
}

div.datepicker-days table.table-condensed td.day{
  padding: 3px !important;
  height:29px !important;
  width:29px !important;
}
div.datepicker-days table.table-condensed{
  border-collapse: collapse;
}
.rotate{
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  to{ transform: rotate(360deg);}
}
div.modal-content table tr td{
  background-color:var(--bkg-color108) !important;
}

.modalAgrementBody  .dropdown.bootstrap-select {
  max-width: 100% !important;
}

/* #11088 — Edition d'un agrement dans une swal : le formulaire racine
   pouvait se contracter a sa largeur minimale, ce qui cassait les libelles
   une lettre par ligne. Scope limite a cette modale. */
.swal2-popup form#edit_agrement,
.swal2-popup form#edit_agrement .modalAgrementBody {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* #11088 (suite) — La vraie cause : .modalAgrementBody est en `d-flex`
   (flex-direction:row), or l'imbrication HTML du formulaire aplatit ses
   sections en 6 enfants flex-row concurrents. La carte du formulaire
   (.eb-addon-card.w-100) se faisait alors ecraser a ~120px -> libelles
   une lettre par ligne. On force l'empilement vertical pleine largeur
   (comportement attendu d'un corps de formulaire), scope a cette modale. */
.swal2-popup form#edit_agrement .modalAgrementBody {
  flex-direction: column;
  align-items: stretch;
}
.swal2-popup form#edit_agrement .modalAgrementBody > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* #11134 / #11135 — Modale "Statut" de l'Intervention (ajout et edition) :
   meme symptome que #11088 / #11136 : le formulaire pouvait se contracter a sa
   largeur minimale, et la table flexTable en layout fixe pouvait laisser 0px a
   la colonne libelle ("Nom" / "Couleur"). Scope limite a cette modale. */
.swal2-popup #swal-statut,
.swal2-popup form#save_status_intervention,
.swal2-popup form#save_status_intervention .table-responsive,
.swal2-popup form#save_status_intervention table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.swal2-popup form#save_status_intervention table {
  table-layout: auto;
}
.swal2-popup form#save_status_intervention table td:first-child {
  white-space: nowrap;
  width: 1%;
}

/* #11136 / #11138 — Modale "Type" de l'Intervention (ajout et edition) :
   meme symptome que #11088 / #11134, le formulaire pouvait se contracter a sa
   largeur minimale, cassant les libelles "Nom" / "Categorie" une lettre par
   ligne. La table porte la classe flexTable (table-layout:fixed) combinee a
   un colspan=2 + w-100 sur la seconde cellule, ce qui laissait 0px a la
   colonne du libelle. On force table-layout:auto sur cette modale pour que
   la colonne du libelle se dimensionne au contenu. Scope limite a cette
   modale. */
.swal2-popup #swal-type_intervention,
.swal2-popup form#id_save_intervention2,
.swal2-popup form#id_save_intervention2 .table-responsive,
.swal2-popup form#id_save_intervention2 table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.swal2-popup form#id_save_intervention2 table {
  table-layout: auto;
}
.swal2-popup form#id_save_intervention2 table td:first-child {
  white-space: nowrap;
  width: 1%;
}

/* #11139 / #11141 — Modale "Categorie" de l'Intervention (ajout et edition) :
   meme symptome que #11136 / #11138 sur la modale Type. Le wrapper
   #swal-category_intervention contient une .table-responsive + table
   .flexTable (table-layout:fixed) avec colspan=2 + w-100 sur la cellule
   droite, ce qui laissait 0px de largeur a la colonne du libelle "Nom" /
   "Validation". On etend les largeurs au wrapper et on force
   table-layout:auto pour que la colonne libelle se dimensionne au contenu.
   Scope limite a cette modale. */
.swal2-popup #swal-category_intervention,
.swal2-popup #swal-category_intervention form,
.swal2-popup #swal-category_intervention .table-responsive,
.swal2-popup #swal-category_intervention table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.swal2-popup #swal-category_intervention table {
  table-layout: auto;
}
.swal2-popup #swal-category_intervention table td:first-child {
  white-space: nowrap;
  width: 1%;
}
/* ================================================ */
/* FIX FOR BOOTSTRAP 5.6   */
/* ================================================ */

.table-bordered thead {
  border-top-style: hidden;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none!important;
}

.form-inline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-ebrigade .nav-left .nav-center .navbar-toggler-icon {
  background-image : none;
}

.navbar-ebrigade .navbar-toggler-icon {
  background-image : none;
}

.navbar-toggle .navbar-toggler-icon {
  background-image : none;
}

.table-responsive {
  width: 100%;
}

.float-left {
  float: left!important;
}

.float-right {
  float: right!important;
}

.float-center {
  float: center!important;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-right: 15px;
    padding-left: 15px;
}

.col-lateral {
  padding-left: 0;
  padding-right: 0;
}

.table > :not(caption) > * > * {
    box-shadow: none;
    padding: .1rem;
}

.ml-3, .mx-3 {
    margin-left: 1rem !important;
}

.row.accueil > span {
  width: unset!important;
}

.row.filter-area > .dropdown {
  margin: 0 !important;
  padding: 0 !important;
}

.row.accueil > .timeline {
  padding: 0px!important;
}

.row.accueil > .card-header {
  width: unset!important;
}

.row > button {
  width: unset!important ;
}

.row > a {
  width: unset!important ;
}

.row > select {
  width: unset!important ;
}

.row > .btn-group {
  width: unset!important ;
}

.row > span.mx-1 {
  width: unset!important ;
}

.row > span.noprint {
  width: unset!important ;
}

.nav-left .navbar-toggler {
  border: none!important;
}

/* btn-close : on remplace l'icône SVG background-image de Bootstrap (peu
   visible sur certains thèmes, fond blanc → blanc invisible) par une croix
   Font Awesome via ::before, toujours contrastée. */
.btn-close {
  float: right;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  background-image: none !important;
  color: #333;
  border: 0;
  border-radius: 50%;
  opacity: 1;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.btn-close::before {
  content: "\f00d"; /* fa-times */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
}
.btn-close:hover,
.btn-close:focus {
  background: rgba(0,0,0,0.06) !important;
  color: #d33;
  outline: none;
}
@media (max-width: 768px) {
  .btn-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .btn-close::before {
    font-size: 1.25rem;
  }
}

/* .swal2-actions .btn-* : géré exhaustivement dans dashboard-modern.css avec !important */
.swal2-actions .disabled, .swal2-actions button:disabled {
    color: #fff;
    opacity: 0.65;
}
.swal2-actions button {
  font-weight: 400;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}
.mrp-3 {
  margin-right: 3px;
}
.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5:not(.compteur),
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.mr-5p {
  margin-right:5px;
}
.compteur-margin {
  margin-right: 7px;
}
.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}
.w-120 {
  width: 120px;
}
.bootstrap-select.bs-container .dropdown-menu {
    /* Menus greffes au body : ils doivent passer au-dessus des modales Bootstrap
       (z-index 1200) et des conteneurs modernes qui creent leur propre pile. */
    z-index: 1300!important;
}

.row > .badge {
  width: unset!important;
}

.row > strong {
  width: unset!important;
}

/* si un attribut rows a été utilisé, on ignore la taille fixe*/
textarea.form-control[rows] {
  height: unset;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: inline-block;
  /* margin-bottom: 0.5rem; */
}

.table > :not(caption) > * > * {
    border-bottom-width: 0px!important;
}

.alert-green-apple.alert-element2:hover{
    background-color:var(--bkg-color80);
}
.alert-orange.alert-element2:hover{
    background-color:var(--bkg-color77);
}
.alert-red.alert-element2:hover{
    background-color:var(--bkg-color60);
}

.modal-body .table-responsive {
  overflow: visible;
}

/* .modal-body {
  overflow: visible!important;
} */

.modal-content {
  overflow: visible!important;
}

.input-group-text {
  font-size: 0.875rem;
}

.col-lateral {
  background-color: unset;
}

.labeled-message-orange {
    background-color: var(--bkg-color77);
    color: var(--txt-color29)!important;
    border: solid 1px var(--txt-color29);
    border-radius: 0.42rem;
}

.row > input[type='submit'] {
  width: unset!important;
}

p.fs-14 {
  font-size: 14px;
}

ul.pagination.pagination-sm.justify-content-center li.page-item, ul.pagination.pagination-sm.justify-content-center li.page-item a, ul.pagination.pagination-sm.justify-content-center li.page-item a span {
  padding-top :0px;
  padding-bottom: 0px;
}

.pac-container{
  z-index: 2000;
  font-size: 15px;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15,23,42,.16);
  margin-top: 4px;
  /* #DISPATCH — le dropdown héritait de la largeur (étroite) du champ et tronquait les
     adresses. On garantit une largeur minimale et on laisse les longues adresses passer
     à la ligne plutôt que d'être coupées. */
  min-width: min(360px, 92vw);
}
.pac-item{
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
  border-top: 1px solid rgba(148,163,184,.18);
  white-space: normal;
}
.pac-item:first-child{ border-top: 0; }
.pac-item:hover,
.pac-item-selected{ background: rgba(53,99,233,.08); }
.pac-item-query{
  font-size: 15px;
  font-weight: 600;
  padding-right: 4px;
}
.pac-item .pac-icon{
  margin-top: 4px;
  margin-right: 8px;
}
.fa-filter::before {
  content: "\f1de";
}

.pt-15 {
  padding-top: 3.75rem !important;
}

@media (min-width: 800px) {
  .d-flex-responsive {
    display: flex !important;
  }
}

@media (max-width: 800px) {
  .d-flex-responsive {
    display: flex !important;
    flex-direction: column;
  }
}


/* CSS pour Aucun Resultat */
.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-root {
  -webkit-box-flex: 1;
  flex: 1;
  -ms-flex: 1 0 0px;
}

.flex-row-fluid {
  -webkit-box-flex: 1;
  flex: 1 auto;
  -ms-flex: 1 0 0px;
  min-width: 0;
}

.bgi-size-cover {
  background-size: cover;
}

.bgi-position-center {
  background-position: center;
}

.no-result-img {
  margin: 15px;
  border-radius: 10px;
  overflow: hidden;
}

@media (min-width: 700px) {
  .no-result-img{
  min-height: 600px;
}
.bgi-position-center {
  background-position: 40% 65%;
}
}

@media (max-width: 700px) {
  .no-result-img{
    margin: 0px;
    min-height: 400px;
  }
  .no-result-img > .error-3{
    background-position-y: 50% !important;
  }
}

.error-title {
  color: var(--txt-color14);
  width: 100%;
  font-family: Poppins, Helvetica, sans-serif;
}

.error-content {
  text-align: justify;
  font-family: Poppins, Helvetica, sans-serif;
}

/*Vehicule affichage rapide*/
.info_rapide_vehicule {

}

.titre_info_rapide {
  margin-top: 10px;
}

.ligne_info_rapide {
  display:flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: space-between;
  margin: 10px 5px 10px 5px;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}

@media (max-width: 700px) {
  .ligne_info_rapide {
    flex-direction: column;
    align-items: flex-start;
  }
  .ligne_info_rapide .image_info_rapide {
    align-self: center;
  }
  .header-info-rapide {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-info-rapide .hide_mobile2 {
    display: none;
  }
  .unique_element {
    margin-right: 0px !important;
  }
}

.element_info_rapide {
  display: flex; 
  flex-direction: row;
  align-items: center;
}

.container_infos {
  display:flex; 
  flex-direction: column; 
  margin-left: 10px;
  align-items: flex-start;
}

.container_infos_horizontal {
  flex-direction: row;
  align-items: center;
}

.container_infos_horizontal .titre_info {
  margin-left: 5px;
}

.container_infos .badge {
  padding: 0.2em;
}

.container_infos :nth-child(2){
  font-size: 14px;
}

.titre_info {
  font-family: "Twemoji Country Flags", 'Poppins', Helvetica, sans-serif;
  font-weight: bold !important;
  font-size: 15px;
}

.vehicule-picture {
  height: auto;
  max-height: 130px;
  width: auto;
  overflow: hidden;
  border-radius: 50%;
  border: 8px solid transparent;
}

.header-info-rapide {
  display: flex;
  justify-content: space-between;
}

.element-header-rapide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.element-header-rapide p {
  padding-top: 0px;
  margin-bottom: 0px;
  font-family: Poppins, Helvetica, sans-serif;
}

.element-header-rapide .element_info_rapide {
  font-weight: normal;
}

.element-header-rapide .image_acti {
  max-width: 35px;
}

.image_info_rapide {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  align-items: center;
}

.element_logistique {
  margin-top: 30px !important;
}

.card_logistique {
  margin-bottom: 0px !important;
}

.unique_element {
  margin-right: 40%;
}

.ensemble_propriete_vehicule {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* Chaque cellule agrège jusqu'à 6 indicateurs (Assurance, Contrôle technique,
     Révision, Accès, Révision / Km, Affectation). Sans wrap, les derniers
     étaient clippés à droite (Activité > Logistique > Véhicule) ou compressés
     par flex-shrink jusqu'à devenir illisibles. On autorise le retour à la
     ligne pour garder tous les indicateurs visibles quelle que soit la largeur
     de la colonne. */
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 6px;
}



.propriete_vehicule {
  display: flex;
  flex-direction: column;
}

.propriete_vehicule .contenu_propriete_vehicule {
  font-size: 10px;
}

.propriete_vehicule:nth-child(n) {
  margin-left: 10px;
}

.bootstrap-table .fixed-table-container .fixed-table-body table.eb-event-vehicle-table > tbody > tr > td[data-field="propriete"] {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.bootstrap-table .fixed-table-container .fixed-table-body table.eb-event-vehicle-table > tbody > tr > td[data-field="propriete"] .ensemble_propriete_vehicule {
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.bootstrap-table .fixed-table-container .fixed-table-body table.eb-event-vehicle-table > tbody > tr > td[data-field="propriete"] .propriete_vehicule {
  margin-left: 0;
}

/* Dark mode — les badges "Assurance / Titre d'accès / Contrôle technique"
   reçoivent leurs couleurs en inline-style depuis $widget_bgred (#ffe2e5 hardcoded
   dans config.php) et $widget_fgred (var(--txt-color6)). On override la variante
   rouge (bg #ffe2e5) en ciblant l'inline-style — !important nécessaire pour
   battre les style="" du PHP. La variante orange utilise déjà var(--bkg-color115)
   qui bascule correctement en dark, pas besoin d'override. */
:root.dark .propriete_vehicule .badge.small2[style*="ffe2e5"] {
  background-color: #561b1b !important;
  color: #fca5a5 !important;
}
:root.dark .propriete_vehicule .contenu_propriete_vehicule[style*="txt-color6"] {
  color: #fca5a5 !important;
}

.ensemble_kilometrage_vehicule {
  display: flex;
  align-items: center;
}

.ensemble_fonction_vehicule {
  display: flex;
  align-items: center;
}

/* Propriétés pour la partie 'Ajout d'une signature*/

#conteneurTabSignature {
  background-color: var(--bkg-color135); /*  #f2f5f7; */
}

#conteneurTypeSignature {
  background-color: var(--bkg-color136); /* white; */
}

a[data-sign-type].active {
  background-color: var(--bkg-color136); /* white; */
  border-left: 5px solid var(--bor-color50);/* #3996ed; */
  border-radius: initial;
  color: var(--txt-color100); /*  #3996ed; */
}

a[data-sign-type]:not(.active) {
  background-color:  var(--bkg-color135); /* #f2f5f7; */
  border:1px solid var(--bor-color49); /* #e3e5e7; */
  color: var(--txt-color100);
}

#conteneurBoutonSignature {
  background-color: var(--bkg-color135); /* #f2f5f7; */
}

#conteneurTabSignature > div {
  background-color: var(--bkg-color136);  /* white; */
}

/* Fin propriété */
/* inscriptions */
.dispo, .dispo:hover{
  color: var(--txt-color68);
}
.indispo, .indispo:hover{
  color: var(--txt-color99)
}

/* Correction affichage des checkmarks*/
.bs-ok-default.check-mark:before {
  content: none;
}
/* Header onglet Activité/Organisation > Informations */
#infos-header{
  background-color:#FA7070;
  background-image:linear-gradient(100deg, #fa7070 0%, #fa9770 100%);
  height:200px;
  position: relative;
}
#infos-header form{
  position:absolute;
  right:10px;
}
#infos-header #uploadcover{
  top:10px;
}
#infos-header #deletecover{
  bottom:10px;
}
#infos-pic{
  display: flex;
  flex-wrap:wrap;
  justify-content: flex-start;
  padding: 0px 29px;
  position: relative;
  align-items:center;
  margin-left:0 !important;
}
#infos-pic .infos-header-titre, #infos-pic .organisation-infos{
  font-family: "Poppins", "Helvetica", sans-serif;
}
#infos-pic .infos-header-titre{
  font-size:21px;
  margin-left: 20px;
  flex-grow: 3;
  text-align: left;
  display:flex;
  flex-direction:column;
}
#infos-pic > div:first-child{
  margin: -60px 0 0 0;
  background-color: white;
  position: relative;
}
#infos-pic label{
  position:absolute;
  top:-4px;
  right:-11px;
}
#infos-pic .modal-body label{
  position:relative;
  top:0;
  right:0;
}
#infos-pic #buttonsuppr{
  bottom:-7px;
  top:inherit;
}
.organisation-infos{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.organisation-infos > div{
  display:flex;
  margin:0px 2px;
  flex-direction:column;
  font-size:14px;
}
.warning-cartographie {
  position:absolute;
  z-index:1000;
  padding:3px;
  top:0;
  right:0;
  background-color:#ffffffb0;
}
#map {
  z-index:0;
}

@keyframes glow {
    0% {
      background-color: #198754;
      box-shadow: 0 0 5px var(--sha-color27);
    }
    50% {
      background-color: var(--bkg-color102);
      box-shadow: 0 0 20px var(--sha-color28);
    }
    100% {
      background-color: #198754;
      box-shadow: 0 0 5px var(--sha-color27);
    }
}
.pulseRemplacement{
  -webkit-animation: glow 1500ms infinite;
  -moz-animation: glow 1500ms infinite;
  -o-animation: glow 1500ms infinite;
  animation: glow 1500ms infinite;
}

@keyframes glowNotEnoughPersonnelWithSkill {
  50% {
    color:var(--txt-color6); 
    background-color:var(--bkg-color141)
  }
}

.pulseNotEnoughPersonnelWithSkill{
  -webkit-animation: glowNotEnoughPersonnelWithSkill 2000ms infinite;
  -moz-animation: glowNotEnoughPersonnelWithSkill 2000ms infinite;
  -o-animation: glglowNotEnoughPersonnelWithSkillow 2000ms infinite;
  animation: glowNotEnoughPersonnelWithSkill 2000ms infinite;
}

/* Statut de compétence sur les places des véhicules (équipe / affectation) :
   vert = la personne possède la compétence attendue, rouge = elle ne l'a pas,
   neutre = place vide en attente d'affectation. La couleur de la compétence
   (poste) est conservée en liseré pour garder l'identité visuelle. */
.badge-competence-ok{
  background-color: var(--eb-success);
  color: #fff;
  border: 1px solid var(--eb-success);
  border-left-width: 3px;
}
.badge-competence-missing{
  background-color: var(--eb-danger);
  color: #fff;
  border: 1px solid var(--eb-danger);
  border-left-width: 3px;
}
.badge-competence-pending{
  background-color: transparent;
  color: var(--txt-color3);
  border: 1px dashed var(--bor-color17);
}

@keyframes glowEnoughPersonnelWithSkill {
  50% {
    color:var(--txt-color28);
    background-color:var(--bkg-color113); 
  }
}

.pulseEnoughPersonnelWithSkill{
  -webkit-animation: glowEnoughPersonnelWithSkill 2000ms infinite;
  -moz-animation: glowEnoughPersonnelWithSkill 2000ms infinite;
  -o-animation: glglowEnoughPersonnelWithSkillow 2000ms infinite;
  animation: glowEnoughPersonnelWithSkill 2000ms infinite;
}

.questionToastButton{
  color: var(--bkg-color53) !important;
}

@keyframes blinker {
  50% {
      opacity: 0;
  }
}

.pulseDirect {
  animation: blinker 1.5s linear infinite;
  color: var(--bkg-color15);
}

.btn-blink-warning {
  background-color: #dc3545 !important;
  color: white !important;
  animation: blinker 1s linear infinite;
}


.divWidth25Crm {
  width: 25%;
  text-align: center;
}

.crmPrestationInput {
  width: 110px !important;
}

.badge.ml-2{
  margin-left:0 !important;
}

.pageqr_activite{
  background-color: var(--bkg-color61)!important;
  border-radius: .42rem;
  padding: 6px;
  display: flex;
  height: 100%;
  justify-content: flex-start;
  overflow: auto;
}

.pageqr_box{
  padding: 7px;
  width: 50%;
  max-width: 50%;
}

.pageqr_box:hover{
  cursor: pointer;
}

/* Tableau personnel */
.titreLigneTableauPersonnel{
  width: 30%;
  text-align: right;
  margin-right: 2px;
  white-space: normal; /* #10098 — évite la troncature des libellés longs (ex. "Décomposée") */
  word-break: break-word;
}

.contenuLigneTableauPersonnel{
  width: 70%;
  text-align: left !important;
}

.contenuLigneTableauPersonnel>.input-group:has(.input-group-text-end)>.input-group-text-end{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10%;
}

.contenuLigneTableauPersonnel>.input-group:has(.input-group-text-end){
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.contenuLigneTableauPersonnel>.input-group{
  align-items: center;
}

.contenuLigneTableauPersonnel>.input-group>textarea{
  /* height: 100% !important; */
}

.ligneTableauPersonnel{
  align-items: center;
  display: flex;
  justify-content: space-between;
}

/* #11629 — scopé à td : la bordure de regroupement n'a de sens que dans le
   layout table legacy. La fiche V7 (upd_personnel_modern.js) conserve les
   classes legacy comme marqueurs sur des div .mc-field-control : sans le
   scope td, un trait vertical sombre parasite apparaît à gauche des champs
   (adresse, organisation, droit d'accès...). */
.lineWithBorderTableauPersonnel>td.contenuLigneTableauPersonnel{
  padding-left: 1px;
  border-left: 1px solid #495057;
}

.ligneTableauPersonnel:not(.lineWithBorderTableauPersonnel){
  margin-top: 7px;
}

.ligneTableauPersonnel:has(.firstElementLine){
  margin-top: 7px;
}

.cardHiddenPersonnel{
  display: none !important;
}

.lienCardPersonnel{
  cursor: pointer;
  width: 100%;
  text-align: center;
  margin-bottom: 5px;
  color: var(--txt-color3);
}

.lienCardPersonnel:hover{
  background-color: var(--bkg-color33);
  color: var(--txt-color24);
}

.lienCardPersonnel.lienCardPersonnelActive{
  background-color: var(--bkg-color33);
  color: var(--txt-color24);
}

@media (max-width: 992px) {
  #listeCategorie.personnel-category-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  #listeCategorie.personnel-category-nav .personnel-category-select {
    display: none !important;
  }

  #listeCategorie.personnel-category-nav .lienCardPersonnel.personnel-category-link {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto !important;
    white-space: nowrap;
    padding: 8px 12px !important;
  }
}

.lienCardPersonnelAlert{
  background-color:var(--bkg-color60);
}
a.lienCardPersonnel.lienCardPersonnelAlert {
  background-color: var(--bkg-color60) !important;
  color: var(--txt-color103, #c0392b) !important;

}

.containerPresentationPersonnel{
  display:flex;
}

.elementPresentationPersonnel{
 
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: "Twemoji Country Flags", 'Poppins', Helvetica, sans-serif;
  width: 100%;
  color: var(--txt-color3);
}

@media (max-width: 992px) {
  .elementPresentationPersonnel{
    
    margin-top: 3px;
    margin-bottom: 3px;
    font-family: "Twemoji Country Flags", 'Poppins', Helvetica, sans-serif;
    width: 75%;
  }
}

.progressCustom{
  --bs-progress-bar-bg: var(--bkg-color8);
}

span:not(.always_visible).spanBouclierHidden{
  display: none !important;
}

/* Ajout d'une classe pour les champs incrémentables (avec les 2 boutons + et - ainsi que le texte) */
.champIncrementable{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.champIncrementableMoins{
  text-align: center;
  cursor: pointer;
}

.champIncrementableMoins>a{
  color: var(--txt-color1) !important;
}

.champIncrementablePlus{
  text-align: center;
  cursor: pointer;
}

.champIncrementablePlus>a{
  color: var(--txt-color1) !important;
}

.champIncrementableTexte{
  width: 20%;
  text-align: center;
}

.swal2-icon.swal2-info {
  transform: none;
}

.bg-transparent-border-none{
  background-color: transparent !important;
  border: none !important;
}

.progress-crm.progress-bar {
  min-width: 0;
}

.link {
  color: var(--txt-color21) !important;

}

.link:hover {
  color: var(--txt-color11) !important;
}

/* #9738 — scroll horizontal sur mobile pour tous les Bootstrap Tables (pages sans topbar-v2).
   Les pages avec body.eb-has-topbar-v2 héritent des règles !important de dashboard-modern.css
   qui ont priorité sur celles-ci grâce à leur sélecteur plus spécifique. */
/* ── Tables bootstrap-table : conteneur + scrollbar vertical fin ─────────── */
/* overflow-x:hidden + table-layout:fixed sont définis dans bootstrap-table-overrides.css
   (chargé après bootstrap-table.min.css, spécificité suffisante pour gagner). */
.fixed-table-body {
  border-radius: 7px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

/* Largeurs fixes pour colonnes utilitaires compactes (fallback — les règles
   bootstrap-table-overrides.css gèrent overflow ; ici on fixe juste width). */
.fixed-table-body th[data-field="checkbox"],
.fixed-table-header th[data-field="checkbox"] { width: 38px; }
.fixed-table-body th[data-field="photo"],
.fixed-table-header th[data-field="photo"]    { width: 70px; }
.fixed-table-body th[data-field="grade"],
.fixed-table-header th[data-field="grade"]    { width: 50px; }
.fixed-table-body th[data-field="distinction"],
.fixed-table-header th[data-field="distinction"] { width: 70px; }
.fixed-table-body th.bs-checkbox,
.fixed-table-body td.bs-checkbox,
.fixed-table-header th.bs-checkbox { width: 44px; }


#devisCivilite + button {
  font-size:14px;
  margin:0px;
}

table.table-hover tbody tr:hover .modal-content td,
  table.table-hover tbody tr .modal-content td,
  table.table-with-hover tbody tr:hover .modal-content td,
  table.table-with-hover tbody tr .modal-content td {
  background-color:inherit !important;
}
.border_red{
  border: 1px solid red !important;
}

#banner-redirect {
  animation: clignotement 1s infinite;
}

@keyframes clignotement {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

*[data-title] {
  position: relative;


}

*[data-title]:hover::after {
  content: attr(data-title);
  background-color: #333;
  color: #fff;
  padding: 5px;
  position: absolute;
  right: 95%;
  bottom: 20%;
  border-radius: 5px;
  pointer-events: none;
  font-size: small;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 0;
  max-width: 300px;
  min-width: 150px;
  min-height: 50px;
  animation: fade-in 0.3s ease-in-out forwards;
}


@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.small-label-checkbox{
  display: flex;
  width: 100%;

}

.small-label-checkbox span {
  display: inline-block;
  width: 100%;
  text-align: right;
  word-wrap: break-word;
  margin-right: 5px;
  font-size: xx-small;
}
.optiongroup{
    display: block;
    padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--bs-dropdown-header-color);
    white-space: nowrap;
    border-top: 1px solid var(--bs-dropdown-divider-bg);
}
.smallItem {
  font-size: 10px;
}


/* Spécifique pour la librarie vis.js
On supprime toutes les propriétés définis par défaut */
.visContainer {
  all:initial;
  font-family: "Twemoji Country Flags", 'Poppins', Helvetica, sans-serif;
}

.vis-panel.vis-center {
  cursor:none;
}

.visualization2 .vis-panel.vis-center {
  cursor:pointer;
}

.vis-timeline {
    border: 1px solid #bfbfbf;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.vis-timeline.vis-bottom.vis-ltr {
  border:none;
  border-radius: 5px;
}

/* #9732 — Planning : visualisation en card + filter-bar moderne */
#visualization {
    background: var(--bkg-color1);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
    overflow: hidden;
}

.filter-bar {
    padding: 10px 14px;
    gap: 6px;
    background: var(--bkg-color1);
    border-bottom: 1px solid var(--bkg-color3);
    flex-wrap: wrap;
    align-items: center;
}

.filter-bar .btn.btn-white {
    border: 1px solid var(--bkg-color3);
    border-radius: 8px;
}

.filter-bar .bootstrap-select .btn.btn-default {
    border-radius: 8px;
}

.filter-bar #timelineSearch.form-control {
    border-radius: 8px !important;
    max-width: 200px;
}

.vis-item-overflow, .vis-delete, .zoomInActivity {
  cursor: pointer;
}

.vis-item {
  border:transparent !important;
  border-radius: 0px !important;
}

.vis-itemset > .vis-background > .vis-group:nth-child(odd), .vis-label.vis-group-level-0:nth-child(even) {
  background-color:#f8f9fa9c;
}
.vis-time-axis .vis-grid.vis-saturday::before,
.vis-time-axis .vis-grid.vis-sunday::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--bkg-color112);
    opacity: 0.3;
}

.dispo_c{
  /*bkg-color35*/
  background: repeating-linear-gradient( 45deg, #1bc5bd, #18a69f 6px, #127c76 6px, #1ee3d9 6px );
}

.dispo_cn{
  /*bkg-color37*/
  background: repeating-linear-gradient( 45deg, #e39803, #d68f01 6px, #b97c01 6px, #ffaa00 6px );
}

.dispo_c span {
  color:white !important;
}

.visualization2 .vis-item-content {
  display:flex !important;
  justify-content: space-between;
  width:100%;
}

.visualization2 .vis-item-content div, .visualization2 .vis-inner, .visualization2 .vis-text {
  font-size:13px;
}

.visualization2 .vis-item-content div {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size:11px;
}

.visualization2 .vis-item-content span {
  font-size:9px;
  margin-top:-4px;
}

.visualization2 .vis-item-content span:nth-child(3) {
  align-self:end;
  margin-top:0;
  margin-bottom:-4px;
  margin-left:-14px;
}

.period-flex {
  display:flex;
  justify-content:center;
}

.period-flex div {
  display: flex;
  flex-direction:column;
}

.period-flex div div {
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
}

/* JAUGES */
.gauge {
  height: 17.5px;
  border:1.5px solid var(--bkg-color17);
  transition: all 150ms ease-in-out;
}
.gauge:hover {
  height:20px;
}
.gauge div:not(.fill){
  background-color: var(--bkg-color60) !important;
}
.gauge .fill{
  background-color: var(--bkg-color61) !important;
  box-sizing: border-box;
}
.gauge .fill:hover{
  border: 0.1px solid black !important;
}
.cursor-pointer{
    cursor: pointer;
}

.btn-group.btn-group-sm{
  width: 100%;
}

.defaultBootstrapTable{
  border-collapse: collapse !important;
}
.container-align{
    display: flex;
    align-items: center;
}
.bs-actionsbox > .btn-group {
  width:100%
}

#row-field-type-activite>td:nth-child(2) {
  max-width: 150px;
}


#row-field-all-activite>td:nth-child(2) {
  text-align: left;
  padding: 5px 0;
}

.vis-timeline-active {
  background-color: var(--bkg-color8) !important;
  color:white !important;
}

/* .vis-text.vis-minor {
  cursor:pointer !important;
  position:relative;
} */

.vis-day-indicator {
  position: absolute;
  right:10px;
  top:3px;
}

.striped-div div:nth-child(odd) {
  background-color: var(--bkg-color135);
}


.striped-div div:nth-child(even) {
  background-color: var(--bkg-color136);
}
.widget-text{
  width:110px !important;
}

.swal2-accept[disabled] {
  opacity: 0.65;
}

.spandatepicker {
  background-color:var(--bkg-color12);
  border-color: var(--bor-color14);
  padding:4px;
  border-radius: 2px;
}

.dispoforced {
  border: 1px solid var(--txt-color99);
  cursor:not-allowed;
}

.dispoforced > * {
  cursor:not-allowed;
}

.color-inherit {
  color: inherit !important;
}

/** #5134 Selectpicker swal mobile : texte long qui wrap pour éviter crop/overflow (uniquement mobile) */
@media (max-width: 767px) {
  .swal2-content .bootstrap-select .dropdown-toggle .filter-option {
    white-space: normal;
    text-overflow: ellipsis;
  }
}

/* WIDGET Accueil > Absence */
.widget-row-abs {
  display: flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

.row-abs-diviser-column {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.row-abs-diviser-column .badge {
  width:auto;
}

.widget-vertical-line {
  width:5px;
  border-radius:6px;
  margin-right:10px;
}

.liste_sous_section{
  list-style-type: none;
  padding: 0;
}

.liste_sous_section > li{
  margin-top: 5px;
  margin-bottom: 5px;
}

@media (max-width: 1424px) { 
  .colonne2tableperso > div{
    display: grid !important;
  }
  .colonne2tableperso > div > .bloc2 > div{
    display: block !important;
  }
  .colonne2tableperso > div > .bloc2 > div > div{
    display: block !important;
  }
}

#mainCardEditNoteFrais{
  padding-left: 20px;
}

@media only screen and (max-width: 600px) {
  /* Pour les écrans de moins de 600px de large (généralement les smartphones) */
  #mainCardEditNoteFrais {
      padding-left: 0;
      padding: 5px; /* Ajout du padding sur tous les côtés */
  }
}

.alert-number .en-plus{
  font-size: 10px;
  position: absolute;
  top: 15px;
}
.alert-bottom .en-plus{
  font-size: 10px;
  position: relative;
  bottom: 10px;
}
.table-section {
  position: relative;
  width: 100%;
}

.alert-btn-see {
  position: absolute;
  bottom: 0;
  left: 50%; 
  transform: translateX(-50%);
}
.alert-and-table {
  display: flex;
}
.alert-top-card {
  width: 110px;
  max-width: 110px;
  height: 140px;
  max-height: 140px;
  background: var(--bkg-color77);
  border-radius: 15px 15px 0 0;
  font-size: 16px;
  margin-right: 20px
}

.alert-top {
  padding: 7px;
  text-align: left;
  color: var(--txt-color107);
}

.alert-logo {
  font-size: 16px;
}

.alert-main {
  display: flex;
  align-items: center; 
  padding-left: 7px;
}

.alert-number {
  position: relative;
  font-size: 50px;
  font-weight: bold;
  color: var(--txt-color107);
  margin-right: 3px; 
  margin-bottom: 10px; 
  text-align: left;
}

.alert-comment {
  font-size: 12px;
  color: var(--txt-color107);
  margin-top: 5px;
  text-align: right;
}

.alert-bottom {
  width: 110px;
  max-width: 110px;
  height: 50px;
  max-height: 50px;
  background: var(--bkg-color143);
  border-radius: 0 0 15px 15px;
  font-size: 16px;
  margin-bottom : 10px;
}

.alert-subtitle {
  font-size: 10px;
  color: var(--txt-color107);
  padding-right: 7px;
  text-align: right;
}

.alert-number-2 {
  text-align: right;
  padding-right: 5px;
  font-size: 15px;
  color: var(--txt-color107);
}

.ruby {
  display: flex;
  align-items: center;
  width: 100%;
}

.alert-top-card-2 {
  width: 110px;
  max-width: 110px;
  background: var(--bkg-color115);
  font-size: 16px;
  margin-right: 20px;
  height: 190px;
  max-height: 190px;
  border-radius: 15px 15px 15px 15px;
  margin-bottom: 10px;
}

.alert-main-2 {
  height: 158px;
  display: flex;
  align-items: center; 
  padding-left: 7px;
}

.bulleAlert{
  margin-left:10px;
  font:5px;
  background-color:var(--bkg-color115);
}

.gardeAlert{
  max-width: 90% !important;
}

.nav-item.item-lateral.mouseMenu:hover a.sub-link-lateral .bulleAlert{
  margin-top: 3px;

}

.small-stat-text{
  font-size: 12px;
}


.small-toast-text{
  font-size: 12px;
}

.no-before::before, .no-before *::before {
  display: none !important;
}
.no-after::after, .no-after *::before {
  display: none !important;
}

@media only screen and (max-width: 990px) {
  .bandResponsive{
    padding-left:0px;
  }
}

@media only screen and (min-width: 990px) {
  .bandResponsive{
    padding-left: 230px;
  }
}

.text-pre-wrap {
  white-space: pre-wrap !important;
}
.gm-ui-hover-effect {
  box-shadow: none  !important;
}

#collapseEvent::-webkit-scrollbar{
  width: 3px;
  background-color: #F5F5F5;
}

#collapseEvent::-webkit-scrollbar-thumb
{
  background-color: var(--txt-color11);
}

.card.card-disabled {
  transition: all ease-in-out;
  filter: blur(2px)
}
.card.card-disabled .card-disabled-hover {
  transition: all ease-in-out;
  position: absolute;
  border-radius: 7px 7px;
  background: grey;
  opacity: 20%;
  z-index: 1000;
}
.card:not(.card-disabled) .card-disabled-hover {
  transition: all ease-in-out;
  display: none;
}

#menu {
  position: sticky;
  top: 99px;
  z-index: 2;
  background-color: var(--bg-color, #fff); /* #10091 — fond opaque pour éviter le chevauchement transparent au scroll */
}
/* Smooth reload overlay for lateral menu */
.eb-menu-reload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}
.eb-menu-reload-spinner {
  font-size: 22px;
  color: var(--txt-color11, #3B82F6);
}
#breadcrumb {
  z-index: 3 !important;
}

/* astuce fournie par chatgpt, peut couvrir certains cas */
[autocomplete='off']::-webkit-autofill,
[autocomplete='off']::-webkit-autofill:hover,
[autocomplete='off']::-webkit-autofill:focus {
    box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: black !important;
}

.str-cropped:focus::after, 
.str-cropped:active::after {
  content: attr(data-full-text);
}
.str-cropped:focus .points, 
.str-cropped:active .points {
  display: none
}

.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    z-index: 100;
    display: flex;
    padding-top: 30px;
    justify-content: center;
}
.loader-overlay .fa-spinner {
    animation: spin 1s linear infinite;
    /* sans line-height fixe, l'icône hérite d'un line-height:1px : sa boîte
       fait 1px de haut et le glyphe déborde puis se fait rogner en haut */
    line-height: 1;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.fa-asterisk.svg{
  margin-top:6px;
}

.border-dispo-1 {
  border: 1px solid;
}
.border-dispo0 {
  border: 1px solid var(--bkg-color133);
}
.border-dispo1 {
  border: 1px solid var(--txt-color33);
}
.border-dispo2 {
  border: 1px solid var(--bkg-color131);
}

/* ═══ Abonnement page ═══ */
.abo-row {
  display: flex; align-items: stretch; gap: 12px; margin: 16px 0;
}
.abo-card.abo-card-info {
  flex: 1 1 0; /* takes remaining space */
  border-radius: 14px; color: #fff !important; padding: 22px 24px;
  background: var(--txt-color98, #fa7070) !important;
  display: flex; flex-direction: column; justify-content: center;
}
.abo-card img.abo-logo { height: 32px; width: auto; object-fit: contain; filter: brightness(10); margin-bottom: 10px; }
.abo-card .abo-info { font-size: 13px; line-height: 2; }
.abo-card .abo-info i { opacity: .7; margin-right: 6px; }
.abo-card .abo-next { text-align: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.25); }
.abo-card .abo-next-label { font-size: 11px; opacity: .7; display: block; }
.abo-card .abo-next-date { font-size: 18px; font-weight: 700; }
.abo-card .abo-btn-subscribe {
  background: #fff; color: var(--txt-color98, #fa7070); font-weight: 700;
  border-radius: 8px; font-size: 13px; border: none; padding: 9px 20px;
  cursor: pointer; transition: transform .15s, box-shadow .15s; align-self: center; margin-top: 10px;
}
.abo-card .abo-btn-subscribe:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.abo-price-card {
  flex: 0 0 130px;
  border-radius: 12px; padding: 18px 12px; text-align: center;
  background: var(--bkg-color5, #f9fafb); border: 1px solid var(--bkg-color33, #e5e7eb);
  transition: transform .2s; display: flex; flex-direction: column; justify-content: center;
}
.abo-price-card:hover { transform: translateY(-2px); }
.abo-price-card .abo-price-users { font-size: 15px; font-weight: 600; color: var(--txt-color27, #1e293b); margin: 0 0 2px; }
.abo-price-card .abo-price-unit { font-size: 11px; color: var(--txt-color3, #6b7280); margin: 0 0 8px; }
.abo-price-card .abo-price-amount { font-size: 20px; font-weight: 700; color: #fa7070; margin: 0; }
.abo-price-card .abo-price-period { font-size: 11px; color: var(--txt-color3, #6b7280); margin: 4px 0 0; }

.abo-price-card.abo-price-current {
  background: var(--txt-color98, #fa7070) !important;
  border: none; color: #fff !important; box-shadow: 0 4px 16px rgba(250,112,112,0.2);
}
.abo-price-card.abo-price-current .abo-price-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; margin: 0 0 4px; }
.abo-price-card.abo-price-current .abo-price-users { font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.abo-price-card.abo-price-current .abo-price-amount { font-size: 24px; font-weight: 800; color: #fff; }
.abo-price-card.abo-price-current .abo-price-period { color: rgba(255,255,255,.8); }

@media (max-width: 768px) {
  .abo-row { flex-wrap: wrap; }
  .abo-card.abo-card-info { flex: 1 1 100%; }
  .abo-price-card { flex: 1 1 30%; }
}

/* ═══ Abonnement service cards row ═══ */
.abo-services { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.abo-service-card {
  flex: 1 1 220px; min-width: 220px;
  background: var(--bkg-color5, #fff);
  border: 1px solid var(--bkg-color33, #e9ecef);
  border-radius: 14px; padding: 24px 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .2s, box-shadow .2s;
}
.abo-service-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.abo-service-card .abo-svc-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 14px; flex-shrink: 0;
}
.abo-service-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--txt-color27, #1e293b); }
.abo-service-card p { font-size: 12px; color: var(--txt-color14, #64748b); margin: 0 0 14px; line-height: 1.5; }
.abo-service-card .abo-svc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.abo-service-card .abo-svc-btn {
  font-size: 12px; padding: 7px 14px; border-radius: 8px; border: none;
  font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  transition: opacity .15s;
}
.abo-service-card .abo-svc-btn:hover { opacity: .85; }
.abo-svc-btn-primary { background: var(--txt-color98, #fa7070); color: #fff; }
.abo-svc-btn-success { background: #10b981; color: #fff; }
.abo-svc-btn-outline { background: transparent; border: 1px solid var(--bkg-color33, #d1d5db); color: var(--txt-color27, #374151); }
.abo-svc-btn-blue { background: #3b82f6; color: #fff; }


/* ======================================================== */
/* UTILITAIRES eBrigade (eb-*)                              */
/* Classes extraites du CSS inline - Ref #9668              */
/* ======================================================== */

/* -------------------------------------------------------- */
/* 1. COULEURS & TEXTE                                      */
/* -------------------------------------------------------- */
.eb-color-11 { color: var(--txt-color11); }
.eb-color-85 { color: var(--txt-color85); }
.eb-color-87 { color: var(--txt-color87); }
.eb-color-101 { color: var(--txt-color101); }
.eb-color-red { color: red; }
.eb-color-red-imp { color: red !important; }
.eb-color-green { color: green; }
.eb-color-gray { color: gray !important; }
.eb-color-darkgrey { color: darkgrey; }
.eb-color-brown { color: saddlebrown; }
.eb-color-primary { color: #007bff; }
.eb-color-white { color: white; }
.eb-color-white-imp { color: white !important; }
.eb-color-inherit { color: inherit; }
.eb-text-white { color: white; }
.eb-icon-success { color: var(--txt-color28); }
.eb-icon-danger { color: var(--txt-color6); }
.eb-link-primary { color: var(--txt-color21); }
.eb-link-primary-imp { color: var(--txt-color21) !important; }
.eb-warning-icon { color: orange; }
.eb-pdf-icon { color: red; }
/* #10219 BUG-2 — swal de confirmation chevauchement astreintes */
.eb-overlap-conflicts { margin-top: 8px; margin-bottom: 8px; font-size: 13px; }
.eb-overlap-conflicts th { background: #fff3cd; }
/* #10219 swal astreinte_edit — cellules input du form (remplace style inline). */
.eb-astreinte-form-input { text-align: left; width: 70%; padding-left: 1px; }
.eb-text-underline { text-decoration: underline; }
.eb-uppercase { text-transform: capitalize; }
.eb-capitalize { text-transform: capitalize; }
.eb-text-start { text-align: start !important; }
.eb-text-right { text-align: right; }
.eb-text-left-imp { text-align: left !important; }
.eb-overflow-wrap { overflow-wrap: anywhere; }
.eb-word-break-all { word-break: break-all; }
.eb-ws-normal { white-space: normal; }
.eb-ws-nowrap { white-space: nowrap; }

/* -------------------------------------------------------- */
/* 2. ARRIERE-PLANS                                         */
/* -------------------------------------------------------- */
.eb-bg-108 { background: var(--bkg-color108); }
.eb-bg-color-108 { background-color: var(--bkg-color108); }
.eb-bg-108-imp { background-color: var(--bkg-color108) !important; }
.eb-bg-12-imp { background-color: var(--bkg-color12) !important; }
.eb-bg-initial { background-color: initial !important; }
.eb-bg-inherit { background-color: inherit; }
.eb-bg-contain { background-size: contain; background-repeat: no-repeat; max-height: 120px; }
.eb-no-result-bg {
  background-image: var(--no-result-img);
  background-size: 100px;
  background-repeat: no-repeat;
  background-position: center;
}
.eb-optgroup-bg { background-color: #e6e6e6; }
.eb-option-bg { background-color: var(--bkg-color108); }

/* ============================================================
   Dropdown « types de produits » (write_select_type_form)
   Le thème moderne (dashboard-modern, body.eb-has-topbar-v2)
   stylise déjà le menu / la recherche / le hover / la sélection
   de tous les selectpicker. Ce dropdown paraissait incohérent à
   cause des fonds plats eb-optgroup-bg / eb-option-bg : on les
   neutralise pour qu'il hérite du style standard, et on soigne
   l'en-tête de groupe. Scopé à .bootstrap-select.type.
   ============================================================ */
/* Neutralise les fonds plats sur les items → hérite du hover/sélection du thème */
.bootstrap-select.type .dropdown-menu .dropdown-item.eb-option-bg,
.bootstrap-select.type .dropdown-menu .dropdown-item.eb-optgroup-bg {
  background-color: transparent !important;
}
/* En-tête de groupe (ex. « Divers ») : libellé discret, plus de barre grise pleine */
.bootstrap-select.type .dropdown-menu .dropdown-header,
.bootstrap-select.type .dropdown-menu .dropdown-header.eb-optgroup-bg {
  background: transparent !important;
  color: var(--eb-text-secondary, #94a3b8) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 12px 4px !important;
}
/* Largeur confortable : les noms de produits s'affichent en entier
   (on lève le plafond smalldropdown ~260px sur ce dropdown). */
.bootstrap-select.type .dropdown-menu:not(.inner) {
  min-width: min(340px, 90vw) !important;
}
.bootstrap-select.type .dropdown-menu .smalldropdown {
  max-width: none !important;
}

/* -------------------------------------------------------- */
/* 3. DIMENSIONS (width / height / max-*)                   */
/* -------------------------------------------------------- */
.eb-w-15pct { width: 15%; }
.eb-w-20pct { width: 20%; }
.eb-w-20px { width: 20px; }
.eb-w-30 { width: 30px; }
.eb-w-50px { width: 50px; }
.eb-w-80 { width: 80px; }
.eb-w-85-center { width: 85%; margin-left: auto; margin-right: auto; }
.eb-w-95pct { width: 95%; }
.eb-w-100px { width: 100px; }
.eb-w-100-imp { width: 100% !important; }
.eb-w-150 { width: 150px; }
.eb-w-200 { width: 200px; }
.eb-w-300-imp { width: 300px !important; }
.eb-w-400 { width: 400px; }
.eb-w-800-imp { width: 800px !important; }
.eb-w-40-nowrap { width: 40%; white-space: nowrap; }
.eb-w50-h50 { width: 50%; height: 50%; }
.eb-wh-100 { width: 100%; height: 100%; }
.eb-mw-25 { max-width: 25px; }
.eb-mw-55 { max-width: 56px; max-height: 56px; } /* 56px = plancher réel ebNormalizeAvatarSize() */
.eb-mw-60 { max-width: 60px; }
.eb-mw-80 { max-width: 80px; }
.eb-mw-80-lh1 { max-width: 80px; line-height: 1; }
.eb-mw-68-lh1 { max-width: 68px; line-height: 1; }
.eb-mw-100 { max-width: 100px; }
.eb-mw-100-imp { max-width: 100px !important; }
.eb-mw-140 { max-width: 140px; }
.eb-mw-150 { max-width: 150px; }
.eb-mw-200 { max-width: 200px; }
.eb-mw-250 { max-width: 250px; }
.eb-mw-80pct { max-width: 80%; }
.eb-minw-100 { min-width: 100px; }
.eb-h-26 { max-height: 26px; height: 26px; }
.eb-h-37 { height: 37px; }
.eb-h-45 { max-height: 45px; height: 45px; }
.eb-h-450 { min-height: 450px; max-height: 450px; }
.eb-h-revert { height: revert; }
/* Color inputs with Bootstrap form-control need explicit dimensions and a full-size swatch. */
input[type=color].form-control {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--eb-color-input-value, transparent);
    cursor: pointer;
    height: 38px;
    min-width: 56px;
    padding: 3px 4px;
}
input[type=color].form-control-sm {
    height: 31px;
    min-width: 56px;
    padding: 2px 4px;
}
input[type=color].form-control.eb-h-revert {
    height: 38px;
}
input[type=color].form-control-sm.eb-h-revert {
    height: 31px;
}
/* #10209 — color picker compact 50px (largeur swatch standard).
   Remplace les inline styles `width:50px;display:inline;float:right`
   utilises sur modules/don/module.class.php colorButton/textColorButton. */
input[type=color].eb-color-swatch {
    width: 50px !important;
    min-width: 50px !important;
    display: inline !important;
    float: right !important;
    height: revert !important;
}
/* #10251 — swal `+ Absence` (upd_type_absence.php) : reorganisation visuelle
   du form, sections Identification + Options en grid 2 colonnes. */
.eb-absence-form .eb-absence-color {
    width: 60px;
    min-width: 60px;
    height: 32px;
}
.eb-absence-form .eb-absence-label {
    min-width: 90px;
    margin-right: 12px;
    flex-shrink: 0;
}
.eb-absence-options {
    border: 1px solid var(--eb-border, #e2e8f0);
    border-radius: 8px;
    background: var(--eb-surface-subtle, #f8fafc);
    padding: 6px;
    margin: 0;
}
.eb-absence-options > div {
    background: var(--eb-surface, #ffffff);
    border-radius: 6px;
    border: 1px solid transparent;
    transition: border-color 0.12s;
}
.eb-absence-options > div:hover {
    border-color: var(--eb-border, #e2e8f0);
}
.eb-absence-options > div span.trad {
    font-size: 13px;
    color: var(--eb-text, #1e293b);
    flex: 1;
    margin-right: 8px;
}
.eb-absence-options-title {
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
input[type=color].form-control::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type=color].form-control::-webkit-color-swatch {
    background-color: var(--eb-color-input-value, transparent);
    border: 0;
    border-radius: 4px;
}
input[type=color].form-control::-moz-color-swatch {
    background-color: var(--eb-color-input-value, transparent);
    border: 0;
    border-radius: 4px;
}
.eb-h20 { height: 20px !important; }
.eb-minh-100 { min-height: 100px; }
.eb-btn-icon-sm { max-height: 30px; height: 36px; }
.eb-btn-icon-sm2 { max-height: 30px; height: 30px; }
.eb-icon-circle { height: 33px; width: 33px; cursor: pointer; }
.eb-stats-full { height: 100%; }

/* -------------------------------------------------------- */
/* 4. ESPACEMENT (margin / padding)                         */
/* -------------------------------------------------------- */
.eb-p-0 { padding: 0; }
.eb-p-1px { padding: 1px; }
.eb-p-010 { padding: 0 10px !important; }
.eb-p-7-5 { padding: 7px 5px; }
.eb-p-8-12 { padding: 8px 12px; }
.eb-p-30 { padding: 30px; }
.eb-p0-fw0 { padding: 0; font-weight: 0; }
.eb-p8-fw500 { padding: 8px; font-weight: 500; }
.eb-pt-0 { padding-top: 0; }
.eb-pl-10 { padding-left: 10px; }
.eb-pl-20 { padding-left: 20px; }
.eb-pl-1em { padding-left: 1em; }
.eb-pr-1em { padding-right: 1em; }
.eb-px-2pct { padding-left: 2%; padding-right: 2%; }
.eb-pb-6-pt-0 { padding-bottom: 6px !important; padding-top: 0 !important; }
.eb-pb-6-pt-0-pl-1 { padding-left: 1px !important; padding-bottom: 6px !important; padding-top: 0 !important; }
.eb-mr-5 { margin-right: 5px; }
.eb-mx-5 { margin-left: 5px; margin-right: 5px; }
.eb-mx-5-imp { margin: 0 5px !important; }
.eb-mt-5px { margin-top: 5px; }
.eb-mt-0-imp { margin-top: 0 !important; }
.eb-mb-05em { margin-bottom: 0.5em; }
.eb-m-auto { margin: auto; }
.eb-buttons-container { margin-top: 0.15rem; }
.eb-alert-btn-center { margin-left: 15%; }
.eb-dropdown-right { margin-right: 23px; }

/* -------------------------------------------------------- */
/* 5. LAYOUT & AFFICHAGE                                    */
/* -------------------------------------------------------- */
.eb-ruby { display: ruby !important; }
.eb-block-left-50 { display: block; float: left; width: 50%; }
.eb-float-inline-end { float: inline-end; }
.eb-overflow-auto { overflow: auto; }
.eb-overflow-unset { overflow: unset !important; }
.eb-overflow-y-hidden { overflow-y: hidden; }
.eb-overflow-x-hidden { overflow-x: hidden; }
.eb-overflow-x-inherit { overflow-x: inherit; }
.eb-nowrap-fit { flex-wrap: nowrap; width: fit-content !important; }
.eb-z-0 { z-index: 0; }
.eb-table-full { max-width: 100%; overflow-x: auto; }
.eb-table-fixed { table-layout: fixed; }
.eb-table-w100 { width: 100%; }
.eb-carousel-full { width: 100%; }
.eb-pos-rel-b2 { position: relative; bottom: 2px; }
.eb-pos-top-3vh { position: relative; top: 3vh; }
.eb-top-10pct { top: 10% !important; }
.eb-sticky-header { position: sticky; top: -17px; background-color: white; }
.eb-scroll-container {
  overflow: scroll;
  overflow-x: hidden;
  padding-right: 15px !important;
  margin-right: 30px !important;
  overflow-y: hidden !important;
}

/* -------------------------------------------------------- */
/* 6. TYPOGRAPHIE                                           */
/* -------------------------------------------------------- */
.eb-fs10 { font-size: 10px; }
.eb-fs11 { font-size: 11px; }
.eb-fs11-imp { font-size: 11px !important; }
.eb-fs12 { font-size: 12px; }
.eb-fs12pt { font-size: 12pt; }
.eb-fs13 { font-size: 13px; }
.eb-fs14 { font-size: 14px; }
.eb-fs16 { font-size: 16px; }
.eb-fs10pt-arial { font-size: 10pt; font-family: Arial; }
.eb-fs-small { font-size: small; }
.eb-fs-initial { font-size: initial; }
.eb-fs08rem { font-size: 0.8rem; }
.eb-fw-400 { font-weight: 400; }
.eb-fw-500 { font-weight: 500; }
.eb-fw-normal { font-weight: normal !important; }

/* #9955 — histo_sms.php : colonne Message large + texte réduit pour
   afficher le contexte complet du SMS sans déborder. */
.eb-sms-message-cell {
    font-size: 0.78rem;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.3;
}

/* -------------------------------------------------------- */
/* 7. BORDURES & FORMES                                     */
/* -------------------------------------------------------- */
.eb-rounded-10 { border-radius: 10px; }
.eb-rounded-10pct { border-radius: 10%; }
.eb-avatar-round { border-radius: 20%; }

/* Profile pictures (extrait de upd_section_tabs.php — issue #9964) */
.profile-picture {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  -moz-transition: opacity 0.9s;
  -webkit-transition: opacity 0.9s;
  -o-transition: opacity 0.9s;
}
@media (min-width: 992px) {
  .profile-picture:hover {
    opacity: 0.7;
    -moz-transition: opacity 0.7s;
    -webkit-transition: opacity 0.7s;
    -o-transition: opacity 0.7s;
  }
  .profile-picture-back {
    background: var(--bkg-color59);
    border-radius: 15px;
  }
  .profile-picture-back:hover {
    background: var(--bkg-color126);
    border-radius: 15px;
  }
}
.eb-border-collapse { border-collapse: collapse !important; }
.eb-table-spaced { border-collapse: separate; border-spacing: 5px; }
.eb-separator { border-bottom: solid 1px #DDDDDD; margin: 0 0 15px 0; }
.eb-border-bottom-white { border-bottom: 0.5px solid white; font-weight: 400 !important; }
.eb-border-bottom-white-thin { border-bottom: 0.5px solid white; }

/* -------------------------------------------------------- */
/* 8. EFFETS                                                */
/* -------------------------------------------------------- */
.eb-clickable { cursor: pointer !important; }
.eb-drag-handle { cursor: move; color: #6c757d; }
.eb-no-pointer { pointer-events: none; }
.eb-pointer-all { pointer-events: all; }
.eb-opacity-07 { opacity: 0.7; }
.eb-opacity-09 { opacity: 0.9; }
.eb-disabled-look { opacity: 0.5; cursor: not-allowed; }
.eb-grayscale { filter: grayscale(100%); }
.eb-no-shadow-bg108 { box-shadow: none !important; background-color: var(--bkg-color108); }

/* -------------------------------------------------------- */
/* 9. COMPOSANTS                                            */
/* -------------------------------------------------------- */

/* Swal / Messages */
.eb-swal-table { display: inline-block; border-style: none; }
.eb-swal-td { padding-right: 3em; }

/* Debug */
.eb-debug-icon { color: var(--txt-color11); margin-top: 13px; }

/* =============================================
   Filtres & Toolbar — mobile redesign (v7.0)
   S'applique partout via display_toolbar()
   ============================================= */

.eb-filter-mobile-wrap { width: 100%; display: flex; align-items: center; justify-content: flex-start; }
.eb-filter-mobile-label {
    font-weight: 600;
    color: var(--txt-color3, #1f2937);
    font-size: 1rem;
    white-space: nowrap;
}
.eb-filter-area-gap { margin-left: 0; margin-right: 0; }
.eb-filter-area-div { padding-left: 0; padding-right: 0; }
.eb-filter-area-div-mobile { padding-top: 5px; }

/* Buttons container: no min-width — la largeur de la colonne bouton est
   pilotée par data-width (numberButton × BUTTON_WIDTH_PX) injecté par BootstrapTablePerso. */
.eb-buttons-container { min-width: 0; }

/* Toolbar flex layout — toutes tailles (pas seulement mobile) */
body .fixed-table-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}
/* #10615 — max-width:100% : sans cap, .bs-bars (flex:0 0 auto) prend la largeur
   de son contenu (ex. tableau de garde : 6+2 filtres ≈ 1340px) et déborde à
   droite sur les écrans étroits/intermédiaires (992–1366px, ou desktop réduit) —
   « Horaire »/« Partie » sortaient hors écran + scroll horizontal de page. Avec
   le cap, .filter-area (déjà flex-wrap:wrap) passe les filtres à la ligne. Sur
   grand écran le contenu tient sous 100% → aucun changement. */
body .fixed-table-toolbar .bs-bars { float: none !important; flex: 0 0 auto !important; max-width: 100% !important; margin: 0 !important; }
/* #10615 — espace vertical quand les filtres passent à la ligne (cf. cap ci-dessus). */
body .fixed-table-toolbar .filter-area { row-gap: 8px; }
/* #10162 — sur DESKTOP la search reste compacte (largeur naturelle ~240px) et
   est poussee a droite via margin-left:auto. Mobile ≤991px : la search prend
   toute la largeur (flex:1 1 auto) pour heberger le bouton Affiner deplace
   par js/filter_area.js (cf. .search > .eb-filter-mobile-wrap).
   Sans cet override, .search aurait flex:1 1 auto y compris desktop ->
   elle grandit pour remplir, le margin-left:auto devient ineffectif ->
   search au milieu de la toolbar au lieu d'etre alignee a droite du tableau. */
body .fixed-table-toolbar .search  { float: none !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; }
body .fixed-table-toolbar > .columns { float: none !important; flex: 0 0 auto !important; margin: 0 !important; }

/* #10162 — Desktop (>=992px) : search a DROITE de la toolbar (= bord droit
   du tableau). bs-bars + columns a gauche, espace flexible, search a droite. */
@media (min-width: 992px) {
    body .fixed-table-toolbar > .search,
    body.eb-has-topbar-v2 .fixed-table-toolbar > .search {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin-left: auto !important;
        width: 240px;
        max-width: min(320px, 100%);
        box-sizing: border-box;
    }
    body .fixed-table-toolbar > .search .search-input,
    body .fixed-table-toolbar > .search .form-control,
    body.eb-has-topbar-v2 .fixed-table-toolbar > .search .search-input,
    body.eb-has-topbar-v2 .fixed-table-toolbar > .search .form-control {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* #10162 — Sur desktop le padding-left:16px du toolbar pousse le 1er
       filtre 16px a droite du bord gauche du tableau / des stats cards
       (qui sont sans padding interne au meme niveau). On retire ce padding
       cote gauche pour que le 1er filtre s'aligne pixel-perfect avec le
       1er stat card et la 1ere colonne du tableau (tous a x = container-left).
       Specificite augmentee via `.bootstrap-table >` pour battre la regle
       de dashboard-modern.css:4935 (`padding: 4px 16px !important`) qui a
       la meme specificite mais charge plus tard dans le pipeline. */
    body .bootstrap-table > .fixed-table-toolbar,
    body.eb-has-topbar-v2 .bootstrap-table > .fixed-table-toolbar {
        padding-left: 0 !important;
    }
    /* #10162 — Quand le toolbar contient un .search ET un .eb-buttons-container,
       le JS de display_buttons_container (fonctions.php L1041) injecte
       `margin-left: auto` inline sur les boutons. Combine avec le margin-left:auto
       du .search ci-dessus, les 2 auto-margins se partagent l'espace flexible et
       la search bar se retrouve au centre du toolbar au lieu d'etre collee
       a gauche des boutons. Override : 8px de gap au lieu de auto. */
    body .fixed-table-toolbar:has(> .search) > .eb-buttons-container,
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(> .search) > .eb-buttons-container {
        margin-left: 8px !important;
    }
}

/* Bouton Affiner — pill style (icone seule sur mobile via @media plus bas) */
.affiner-btn {
    border-radius: 24px !important;
    border: 1.5px solid var(--bkg-color109, #dee2e6) !important;
    background: var(--bkg-color1, #fff) !important;
    color: var(--txt-color1, #374151) !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    transition: border-color .15s, background .15s !important;
}
.filter-button { gap: 6px; }
.filter-mobile-icon { font-size: 13px; }
.filter-mobile-caret { font-size: 11px; transition: transform 0.25s ease; }

/* #10167 — Espace constant 5px entre bouton filtre et search bar (tous viewports).
   Couvre le cas custom .eb-message-search (message.php). Le cas Bootstrap Table
   (.fixed-table-toolbar .search) est géré dans le bloc @media ≤991px. */
.eb-message-search:has(> .eb-filter-mobile-wrap) {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.eb-message-search:has(> .eb-filter-mobile-wrap) > .eb-filter-mobile-wrap {
    margin: 0 !important;
}

/* Animation fluide — remplace height:0→auto (non animable) par max-height */
@media (max-width: 991px) {
    .filter-area {
        height: auto !important;
        max-height: 0;
        overflow: hidden !important;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .filter-area.active { max-height: 700px; }

    /* Panel card — uniquement visible quand actif (.active) pour éviter
       la bande blanche résiduelle (padding+border) quand collapsed */
    .fixed-table-toolbar .filter-area {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .fixed-table-toolbar .filter-area.active {
        background: var(--bkg-color1, #fff);
        border: 1px solid var(--bkg-color109, #e2e8f0);
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,.08);
        padding: 4px 8px;
    }
    /* #ebr-filter-clean — Rythme vertical uniforme entre TOUS les filtres.
       display_toolbar répartit les champs en lignes de 1-2 → l'ancien
       border-top entre groupes tombait à des endroits incohérents (séparateur
       sous certains champs, pas d'autres). En mobile tout est empilé pleine
       largeur : on remplace les séparateurs par un espacement régulier. */
    .fixed-table-toolbar .filter-area .filterAreaDiv,
    .eb-filter-standalone-toolbar .filter-area .filterAreaDiv { padding: 0; }
    .fixed-table-toolbar .filter-area .filterAreaDiv + .filterAreaDiv,
    .eb-filter-standalone-toolbar .filter-area .filterAreaDiv + .filterAreaDiv {
        border-top: 0;
        margin-top: 10px;
    }

    /* #10598 — Sur mobile, les lignes de filtres rendues par display_toolbar()
       peuvent contenir plusieurs groupes de selectpicker. Si ces groupes restent
       côte à côte, certains filtres partent hors écran et le parent les masque.
       On empile donc les groupes et on donne toute la largeur à chaque contrôle. */
    .fixed-table-toolbar #toolbar .filter-position {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
    }
    .fixed-table-toolbar #toolbar .filter-position > .filterAreaDiv {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }
    .fixed-table-toolbar #toolbar .filter-position > .filterAreaDiv > .bootstrap-select,
    .fixed-table-toolbar #toolbar .filter-position > .filterAreaDiv > .dropdown.bootstrap-select,
    .fixed-table-toolbar #toolbar .filter-position > .filterAreaDiv > .bootstrap-select[data-width],
    .fixed-table-toolbar #toolbar .filter-position > .filterAreaDiv > select,
    .fixed-table-toolbar #toolbar .filter-position > .filterAreaDiv > input,
    .fixed-table-toolbar #toolbar .filter-position > .filterAreaDiv > .form-control,
    .fixed-table-toolbar #toolbar .filter-position > .filterAreaDiv > .input-group {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .fixed-table-toolbar #toolbar .filter-position > .filterAreaDiv .bootstrap-select > .dropdown-toggle,
    .fixed-table-toolbar #toolbar .filter-position > .filterAreaDiv .bootstrap-select > .btn {
        width: 100% !important;
    }

    /* Date range full width on mobile */
    /* BUG-7 — sans min-width raisonnable, le contenu "DD-MM-YYYY au DD-MM-YYYY"
       est tronqué visuellement (notamment quand on arrive sur astreintes.php
       depuis le widget du dashboard). On garde l'input élastique mais on lui
       garantit assez de place pour afficher une plage de dates complète, et on
       ajoute text-overflow:ellipsis comme filet de sécurité. */
    .eb-filter-area-div-mobile .eb-daterange { width: 100%; }
    .eb-filter-area-div-mobile .eb-daterange-input {
        flex: 1 1 220px;
        width: auto !important;
        min-width: 220px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    /* #ebr-filter-clean — Panneau de filtres propre (générique, toutes pages
       sans override dédié). Hauteur & arrondi cohérents pour selects + inputs,
       et plage de dates rendue solidaire de sa loupe (plus de bouton orphelin). */
    .fixed-table-toolbar .filter-area .bootstrap-select > .dropdown-toggle,
    .fixed-table-toolbar .filter-area .form-control,
    .eb-filter-standalone-toolbar .filter-area .bootstrap-select > .dropdown-toggle,
    .eb-filter-standalone-toolbar .filter-area .form-control {
        min-height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
    }
    .fixed-table-toolbar .filter-area .eb-daterange,
    .eb-filter-standalone-toolbar .filter-area .eb-daterange {
        display: flex !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .fixed-table-toolbar .filter-area .eb-daterange .eb-daterange-input,
    .eb-filter-standalone-toolbar .filter-area .eb-daterange .eb-daterange-input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-right: 0 !important;
    }
    .fixed-table-toolbar .filter-area .eb-daterange .eb-daterange-btn,
    .eb-filter-standalone-toolbar .filter-area .eb-daterange .eb-daterange-btn {
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 44px !important;
        margin: 0 !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    /* Toolbar compact — Affiner icône + toggles vue + recherche sur 1 ligne */
    body .fixed-table-toolbar,
    body.eb-has-topbar-v2 .fixed-table-toolbar {
        display: flex !important;
        align-items: center;
        gap: 6px !important;
        position: relative;
        flex-wrap: nowrap !important;
    }
    body .fixed-table-toolbar .bs-bars,
    body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars {
        float: none !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        margin: 0 !important;
    }
    /* #10167 — Pages avec .filter-area : layout en lignes
       Ligne 1 = .search (avec bouton filtre dedans, déplacé via filter_area.js)
       Ligne 2 = .bs-bars (contient #toolbar > .filter-area, déployable)
       Padding horizontal 8px pour s'aligner avec les cards en dessous. */
    body .fixed-table-toolbar:has(.bs-bars .filter-area),
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area) {
        flex-wrap: wrap !important;
    }
    body .fixed-table-toolbar:has(.bs-bars .filter-area) > .search,
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area) > .search {
        order: 1 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }
    body .fixed-table-toolbar:has(.bs-bars .filter-area) .bs-bars,
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area) .bs-bars {
        order: 2 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }
    body .fixed-table-toolbar:has(.bs-bars .filter-area) #toolbar,
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area) #toolbar {
        width: 100% !important;
    }
    /* #10167 / #10162 — Espace constant 5px entre bouton filtre et search input
       (fallback sans :has() pour compatibilité navigateurs anciens).
       #10162 : le bouton est positionné à DROITE de l'input (after) via JS
       filter_area.js → margin-LEFT pour creer l'espace avec l'input. */
    body .fixed-table-toolbar .search > .eb-filter-mobile-wrap,
    body.eb-has-topbar-v2 .fixed-table-toolbar .search > .eb-filter-mobile-wrap,
    body .fixed-table-toolbar:has(.bs-bars .filter-area) .search > .eb-filter-mobile-wrap,
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area) .search > .eb-filter-mobile-wrap {
        margin: 0 0 0 5px !important;
        margin-inline-start: 5px !important;
        flex-shrink: 0 !important;
    }
    /* Force .search en flex container — gap: 0 pour ne pas s'additionner au margin-right du bouton */
    body .fixed-table-toolbar .search,
    body.eb-has-topbar-v2 .fixed-table-toolbar .search {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }
    /* Search input ne doit pas déborder — input/label grandit pour remplir le reste */
    body .fixed-table-toolbar:has(.bs-bars .filter-area) .search > *:not(.eb-filter-mobile-wrap),
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area) .search > *:not(.eb-filter-mobile-wrap) {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    body .fixed-table-toolbar:has(.bs-bars .filter-area) .search input,
    body .fixed-table-toolbar:has(.bs-bars .filter-area) .search .form-control,
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area) .search input,
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area) .search .form-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    body .fixed-table-toolbar #toolbar,
    body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars #toolbar { width: 40px; margin: 0; }
    /* #10167 — Sélecteur de colonnes Bootstrap Table : inutile en mobile, on le masque */
    body .fixed-table-toolbar .columns,
    body .fixed-table-toolbar .columns-left,
    body .fixed-table-toolbar .columns-right,
    body.eb-has-topbar-v2 .fixed-table-toolbar > .columns,
    body.eb-has-topbar-v2 .fixed-table-toolbar .columns-left,
    body.eb-has-topbar-v2 .fixed-table-toolbar .columns-right {
        display: none !important;
    }
    .fixed-table-toolbar .columns-left .viewFilter .btn { margin-left: 0 !important; margin-right: 0 !important; }
    body .fixed-table-toolbar .search,
    body.eb-has-topbar-v2 .fixed-table-toolbar > .search {
        float: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        /* Layout inline : input grandit, boutons d'action restent collés à
           droite sur la même ligne. Évite la 2e ligne dédiée aux boutons.
           gap: 0 — l'espacement est fait par margin-right sur le bouton filtre (5px) */
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0 !important;
    }
    .fixed-table-toolbar .search .form-control {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
    /* Boutons d'action : inline à droite de la recherche, taille naturelle. */
    body .fixed-table-toolbar .search #buttons_container,
    body.eb-has-topbar-v2 .fixed-table-toolbar > .search #buttons_container {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* Bouton Affiner réduit à l'icône — 40x40 */
    .eb-filter-mobile-wrap { width: 40px !important; }
    .affiner-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 10px !important;
    }
    .affiner-btn .mx-2 { display: none !important; }
    .affiner-btn .dropdown-filter { display: none !important; }
    .filter-button { gap: 0 !important; }

    /* #ebr-filter-bar — Tableaux de bord (personnel_stats, company_dashboard,
       *_stats…) : le bouton Affiner n'est pas déplacé dans une search bar et
       restait une icône 40×40 muette centrée. filter_area.js le tague
       `.eb-filter-bar` → on le rend en barre pleine largeur libellée, alignée
       à gauche, avec le libellé « Affiner » et le caret visibles. */
    .eb-filter-bar.eb-filter-mobile-wrap {
        width: 100% !important;
        margin: 0 !important;
    }
    .eb-filter-bar .affiner-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 42px;
        padding: 9px 14px !important;
        border-radius: 10px !important;
        justify-content: flex-start !important;
    }
    .eb-filter-bar .affiner-btn .filter-button {
        width: 100%;
        justify-content: flex-start !important;
        gap: 8px !important;
        align-items: center;
    }
    .eb-filter-bar .affiner-btn .mx-2 {
        display: block !important;
        margin: 0 !important;
        font-weight: 500;
    }
    .eb-filter-bar .affiner-btn .filter-mobile-icon { font-size: 14px; }
    .eb-filter-bar .affiner-btn .dropdown-filter {
        display: block !important;
        margin-left: auto !important;
    }

    /* Panneau déployé sur les dashboards autonomes : même carte que le mode
       bootstrap-table (fond blanc, bord, ombre) pour un rendu cohérent. */
    .eb-filter-standalone-toolbar .filter-area.active {
        background: var(--bkg-color1, #fff);
        border: 1px solid var(--bkg-color109, #e2e8f0);
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,.08);
        padding: 4px 8px;
        margin-top: 6px;
    }

    /* #ebr-filter-count — Badge du nombre de filtres actifs. En mode icône
       (pages liste) : pastille en coin haut-droit. En mode barre (dashboards) :
       pastille inline avant le caret. */
    .affiner-btn { position: relative; }
    .eb-filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 17px;
        height: 17px;
        padding: 0 5px;
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        color: #fff;
        background: var(--eb-primary, #2563eb);
        border-radius: 999px;
    }
    .eb-filter-count[hidden] { display: none !important; }
    /* Mode icône : la pastille flotte sur le coin du bouton 40×40 */
    .search .eb-filter-count,
    .eb-message-search .eb-filter-count {
        position: absolute;
        top: -4px;
        right: -4px;
        box-shadow: 0 0 0 2px var(--bkg-color1, #fff);
    }
    /* Mode barre : pastille inline collée au libellé */
    .eb-filter-bar .eb-filter-count {
        position: static;
        margin-left: 2px;
    }

    /* Button column: width handled by --eb-bt-button-col-width from BootstrapTablePerso */
    .eb-buttons-container { min-width: 50px; }

    /* #10167 — Panel filtres en flux (sur ligne 2 du toolbar wrapped),
       toggle via .active (max-height transition déjà définie ci-dessus) */
    .fixed-table-toolbar .filter-area {
        position: static !important;
        width: 100% !important;
    }
    .fixed-table-toolbar .filter-area .eb-filter-area-div-mobile {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    .fixed-table-toolbar .filter-area .eb-filter-area-div-mobile > *,
    .fixed-table-toolbar .filter-area .eb-filter-area-div-mobile > .bootstrap-select,
    .fixed-table-toolbar .filter-area .eb-filter-area-div-mobile > .dropdown.bootstrap-select {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .fixed-table-toolbar .filter-area .eb-filter-area-div-mobile > .bootstrap-select > .dropdown-toggle,
    .fixed-table-toolbar .filter-area .eb-filter-area-div-mobile > .dropdown.bootstrap-select > .dropdown-toggle {
        width: 100% !important;
    }

    /* Toolbar SANS bouton Affiner (display_toolbar avec $affiner=false) :
       le #toolbar contient des filtres directs (select "Toutes les catégories",
       etc.). La règle générique force .bs-bars/#toolbar à 40px → le select
       est tronqué ("Toutes les caté...") et la barre devient illisible.
       Détecté via :has(.filter-area-2) (marker du mode sans-Affiner).
       Layout : filtres + columns sur ligne 1, recherche pleine largeur sur
       ligne 2, boutons d'action sur ligne 3. */
    body .fixed-table-toolbar:has(.bs-bars .filter-area-2),
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area-2) {
        flex-wrap: wrap !important;
        row-gap: 6px !important;
    }
    body .fixed-table-toolbar:has(.bs-bars .filter-area-2) .bs-bars,
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area-2) .bs-bars {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
    body .fixed-table-toolbar:has(.bs-bars .filter-area-2) #toolbar,
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area-2) .bs-bars #toolbar {
        width: 100% !important;
    }
    /* Filtres internes (select "Toutes les catégories") : prennent toute la
       place disponible dans le bs-bars au lieu de hugger leur contenu. */
    .fixed-table-toolbar:has(.bs-bars .filter-area-2) #toolbar .filter-area-2 {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    .fixed-table-toolbar:has(.bs-bars .filter-area-2) #toolbar .filterAreaDiv {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    .fixed-table-toolbar:has(.bs-bars .filter-area-2) #toolbar .filterAreaDiv > .bootstrap-select {
        width: 100% !important;
    }
    .fixed-table-toolbar:has(.bs-bars .filter-area-2) #toolbar .filterAreaDiv > .bootstrap-select > .dropdown-toggle {
        width: 100% !important;
    }
    /* Search prend toute la largeur sur ligne 2 dans le mode sans-Affiner */
    body .fixed-table-toolbar:has(.bs-bars .filter-area-2) > .search,
    body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area-2) > .search {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    /* Pages SANS display_toolbar du tout (ex. Mission > Type, type_evenement.php)
       : .bs-bars est rendu vide par bootstrap-table mais conserve sa réservation
       de 40px → bande blanche inutile à gauche de la barre de recherche.
       On masque la .bs-bars vide pour que columns-left + search prennent
       toute la largeur. */
    body .fixed-table-toolbar .bs-bars:not(:has(*)),
    body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:not(:has(*)) {
        display: none !important;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    body .fixed-table-toolbar.eb-filter-open,
    body.eb-has-topbar-v2 .fixed-table-toolbar.eb-filter-open {
        margin-bottom: var(--eb-filter-area-height, 0px) !important;
    }
}

/* Boutons de vue (liste / calendrier / carte) */
.eb-view-btn { font-size: 16px; }
.eb-view-btn-active { background: #3699FF !important; color: #FFFFFF !important; }
.eb-view-btn-inactive { background-color: var(--bkg-color1) !important; color: gray !important; }
.eb-view-filter { margin-top: 1px; }
.eb-btn-group-right { float: right; position: inherit; margin-left: 8px; }

.eb-view-filter--duo {
  gap: 4px !important;
  padding: 4px;
  width: fit-content;
  border-radius: 14px;
  background: rgba(53, 99, 233, 0.08);
  border: 1px solid rgba(53, 99, 233, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.eb-view-filter--duo .eb-view-btn {
  min-height: 36px;
  min-width: 36px;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.eb-view-filter--duo .eb-view-btn-active {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  color: #3563e9 !important;
  box-shadow: 0 8px 18px rgba(53, 99, 233, 0.16) !important;
  transform: translateY(-1px);
}

.eb-view-filter--duo .eb-view-btn-inactive {
  background: transparent !important;
  color: #5b6478 !important;
}

.eb-view-filter--duo .eb-view-btn:hover,
.eb-view-filter--duo .eb-view-btn:focus {
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--txt-color1) !important;
}

.eb-view-btn-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

.eb-view-bookmark {
  position: fixed !important;
  right: 0;
  top: 228px;
  z-index: 10000;
  flex-direction: column;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 5px 0 5px 5px;
  border-right: 0;
  border-radius: 11px 0 0 11px;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
  opacity: .82;
  transition: opacity .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.eb-view-bookmark:hover,
.eb-view-bookmark:focus-within {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  opacity: 1;
}

.eb-view-bookmark .eb-view-btn {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 40px;
  width: auto;
  min-height: 40px;
  justify-content: flex-start !important;
  padding: 0 9px !important;
  border-radius: 8px 0 0 8px !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.eb-view-bookmark .eb-view-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  text-align: center;
  line-height: 1;
}

.eb-view-bookmark .eb-view-btn-active {
  background: rgba(53, 99, 233, 0.1) !important;
  color: #3159d5 !important;
  box-shadow: inset 3px 0 0 rgba(53, 99, 233, 0.82) !important;
  transform: none !important;
}

.eb-view-bookmark .eb-view-btn-inactive {
  background: transparent !important;
  color: #64748b !important;
}

.eb-view-bookmark .eb-view-btn:hover,
.eb-view-bookmark .eb-view-btn:focus {
  background: rgba(255, 255, 255, 0.78) !important;
  color: #1f2937 !important;
}

.eb-view-bookmark .eb-view-btn-label {
  display: inline-block;
  width: 0;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: .8rem;
  line-height: 1;
  transition: width .16s ease, max-width .16s ease, margin-left .16s ease, opacity .16s ease;
}

.eb-view-bookmark:hover .eb-view-btn-label,
.eb-view-bookmark:focus-within .eb-view-btn-label {
  width: auto;
  /* 140px pour que le libellé le plus long du parc ("Organigramme", 12 c.)
     ne soit pas tronqué au survol du bouquin flottant. #11620 */
  max-width: 140px;
  margin-left: 8px;
  opacity: 1;
}

@media (max-width: 768px) {
  .eb-view-bookmark {
    top: auto;
    right: 0;
    bottom: 88px;
  }

  .eb-view-bookmark .eb-view-btn {
    width: 40px;
    min-width: 40px;
    padding: 0 !important;
    justify-content: center !important;
  }
}

/* Date Range — flatpickr range picker */
.eb-daterange { text-align: left; display: inline-flex; align-items: center; gap: 4px; }
.eb-daterange-input { font-size: 15px !important; font-weight: var(--bs-btn-font-weight); padding: 6px 12px; min-width: 250px; cursor: pointer; background-color: #fff; }
.eb-daterange-btn { height: 36px; flex-shrink: 0; }
/* Fix flatpickr year/month display — année tronquée */
.flatpickr-months { height: 50px !important; }
.flatpickr-months .flatpickr-month { height: 50px !important; overflow: visible !important; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { height: 50px !important; }
.flatpickr-current-month { width: 85% !important; left: 7.5% !important; height: 50px !important; overflow: visible !important; padding: 10px 0 0 !important; }
.flatpickr-current-month span.cur-month { margin-right: 8px !important; }
.flatpickr-current-month .numInputWrapper { min-width: 5em !important; width: auto !important; display: inline-block !important; padding-right: 14px !important; }
.flatpickr-current-month input.cur-year { width: auto !important; min-width: 4ch !important; padding: 0 4px !important; }
/* Mobile (1 seul mois affiché) : entête compact, mois + année sur UNE ligne centrée.
   Les hauteurs 50px + l'année élargie ci-dessus sont pensées pour le desktop (2 mois) ;
   sur mobile elles faisaient passer l'année sur une 2e ligne, débordant sur les jours (#11591).
   Prérequis : l'input année est exclu du style form-control global (dashboard-modern.css:6133,
   :not(.numInput)) sinon il conserve bordure + padding 9px + min-height 38px et reste trop haut. */
@media (max-width: 640px) {
  .flatpickr-months,
  .flatpickr-months .flatpickr-month,
  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month { height: 36px !important; }
  .flatpickr-current-month {
    height: 36px !important; padding: 7px 0 0 !important; width: 80% !important; left: 10% !important;
    display: block !important; text-align: center !important;
  }
  .flatpickr-current-month .flatpickr-monthDropdown-months { width: auto !important; margin: 0 !important; }
  .flatpickr-current-month .numInputWrapper { min-width: 0 !important; width: 3.6em !important; display: inline-block !important; padding-right: 12px !important; }
}
/* Fix flatpickr: jours mal alignés sur la dernière ligne (space-around → flex-start) */
.dayContainer { justify-content: flex-start !important; }
/* Debug badge (temps d'exécution) */
.eb-debug-badge { position: fixed; bottom: 8px; right: 12px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 6px; z-index: 9999; pointer-events: none; opacity: 0.8; }

/* Coins arrondis du calendrier flatpickr */
/* box-sizing: content-box pour que le padding decoratif n'entame pas la largeur
   calculee par flatpickr (w.days.offsetWidth * showMonths) — sans quoi la colonne
   du dimanche du 2e mois est tronquee en mode range. */
.flatpickr-calendar { border-radius: 12px !important; overflow: hidden; padding: 0 8px 8px !important; box-sizing: content-box !important; }

/* Navigation & Menu */
.eb-nav-logo { margin-right: 5px; }
.eb-nav-logo-pos { position: relative; bottom: 2px; }
.eb-nav-brand-compact { overflow: hidden; width: 41.5px; margin-top: 1px; }
.eb-nav-btn-noborder { border: none !important; box-shadow: none !important; background-color: transparent !important; }
.eb-nav-ml-10 { margin-left: 10px; position: relative; }
/* ── Recherche topbar — dropdown (redesign UI/UX) ─────────────────────── */
.eb-search-dropdown {
  overflow: auto; max-height: 62vh; min-width: 384px; max-width: 460px; padding: 6px;
  border-radius: 14px; border: 1px solid var(--eb-border, #e9eaee);
  box-shadow: 0 14px 38px -10px rgba(17, 24, 39, .24), 0 4px 12px -6px rgba(17, 24, 39, .12);
}
.eb-search-dropdown::-webkit-scrollbar { width: 8px; }
.eb-search-dropdown::-webkit-scrollbar-thumb { background: rgba(120, 124, 138, .28); border-radius: 8px; }
.eb-search-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(120, 124, 138, .46); }
.eb-search-list { list-style: none; padding: 0; margin: 0; }

.eb-search-group-header {
  padding: 10px 12px 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--eb-text-secondary, #8a8f9a); display: flex; align-items: center; gap: 6px;
}
.eb-search-group-header i { font-size: 10px; opacity: .8; }

.eb-search-item {
  display: flex !important; align-items: center; gap: 11px;
  padding: 8px 10px !important; border-radius: 10px;
  transition: background .14s ease; position: relative;
}
.eb-search-item:hover, .eb-search-item.eb-search-active {
  background: var(--eb-surface-hover, #f4f5f8) !important;
}
.eb-search-item.eb-search-active { box-shadow: inset 3px 0 0 0 var(--eb-primary, #6366f1); }

/* pastille d'icône colorée par type d'entité */
.eb-search-item-icon {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 14px; background: #eef0f4; color: #6b7280;
}

/* Avatar personnel = rendu par renderPersonnelAvatar() (photo trombi ronde ou
   initiales en dégradé, identique à la liste). On adoucit juste l'ombre portée
   du helper (pensée pour un listing aéré) dans le contexte compact du dropdown. */
.eb-search-item .eb-avatar-photo,
.eb-search-item .eb-avatar-initials {
  width: 36px !important; height: 36px !important; flex: 0 0 36px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, .14) !important;
}

.eb-lieu-image-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eb-lieu-image-preview {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eb-lieu-image-preview img {
  width: 64px !important;
  height: 64px !important;
}
.eb-lieu-image-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.eb-lieu-avatar-photo,
.eb-lieu-avatar-initials {
  display: inline-block;
  vertical-align: middle;
}
/* Vignette de type (véhicule/matériel) à l'intérieur de la pastille colorée. */
.eb-search-typeicon {
  width: 22px; height: 22px; object-fit: contain; display: block;
}
.eb-search-item[data-type="personnel"] .eb-search-item-icon { background: rgba(99, 102, 241, .12);  color: #6366f1; }
.eb-search-item[data-type="evenement"] .eb-search-item-icon { background: rgba(59, 130, 246, .12);  color: #3b82f6; }
.eb-search-item[data-type="vehicule"]  .eb-search-item-icon { background: rgba(20, 184, 166, .13);  color: #14b8a6; }
.eb-search-item[data-type="materiel"]  .eb-search-item-icon { background: rgba(245, 158, 11, .14);  color: #d97706; }
.eb-search-item[data-type="feature"]   .eb-search-item-icon { background: rgba(107, 114, 128, .13); color: #6b7280; }

.eb-search-item-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.eb-search-item-label {
  font-size: 13.5px; font-weight: 500; color: var(--eb-text, #1f2433);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25;
}
.eb-search-sub {
  font-size: 11.5px; color: var(--eb-text-secondary, #9aa0ac);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}

/* surlignage discret — n'altère pas la hauteur de ligne ni le wrap */
.eb-search-mark {
  background: var(--eb-mark-bg, rgba(99, 102, 241, .16)); color: inherit;
  border-radius: 3px; padding: 0 1px; font-weight: 600;
}

.eb-search-empty {
  padding: 22px 16px; text-align: center; color: var(--eb-text-secondary, #9aa0ac); font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.eb-search-empty i { font-size: 18px; opacity: .55; margin: 0; }
.eb-search-error { color: var(--eb-danger, #e0566b); }

.eb-search-divider { border-top: 1px solid var(--eb-border, #eceef2); margin: 6px 4px; }
.eb-search-advanced {
  font-size: 12px !important; color: var(--eb-primary, #6366f1) !important; font-weight: 500;
  display: flex !important; align-items: center; gap: 8px;
  border-radius: 8px; padding: 7px 10px !important;
}
.eb-search-advanced:hover { background: var(--eb-surface-hover, #f4f5f8) !important; }
.eb-search-advanced i { width: 18px; text-align: center; }

/* skeleton loader (remplace le spinner) */
.eb-search-skel { display: flex; align-items: center; gap: 11px; padding: 8px 10px; }
.eb-search-skel-icon { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px; }
.eb-search-skel-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.eb-search-skel-line { height: 9px; border-radius: 5px; width: 72%; }
.eb-search-skel-line.short { width: 42%; height: 8px; }
.eb-search-skel-icon, .eb-search-skel-line {
  background: linear-gradient(90deg, #eceef2 25%, #f6f7f9 37%, #eceef2 63%);
  background-size: 400% 100%; animation: ebSkel 1.2s ease infinite;
}
@keyframes ebSkel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (max-width: 600px) {
  .eb-search-dropdown { min-width: 0; max-width: none; width: calc(100vw - 16px); }
}
.eb-profil-name { cursor: pointer; }
.eb-spinner-live { width: 8px; height: 8px; }

/* Quick Add */
.eb-quickadd-title { font-weight: 800; font-size: 25px; }
.eb-quickadd-bg {
  background-image: url(../images/quick_add_bg.jpg);
  color: #fff;
  height: 100px;
  background-size: 500px;
}
.eb-item-action-ptr { cursor: pointer; }

/* ============================================================
   eb-hscroll — composant réutilisable de scroll horizontal
   avec indicateurs de gradient fondu sur les bords.
   Utilisation :
     <div class="eb-hscroll">        ← wrapper
       <div class="eb-hscroll-inner"> ← contenu scrollable
         ...tabs/items...
       </div>
     </div>
   Le JS (js/eb_hscroll.js) ajoute/retire .eb-hscroll-left et
   .eb-hscroll-right pour afficher/masquer les gradients.
   ============================================================ */
.eb-hscroll {
  position: relative;
  overflow: hidden;
}
.eb-hscroll::before,
.eb-hscroll::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 32px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.eb-hscroll::before {
  left: 0;
  background: linear-gradient(to right, var(--eb-hscroll-bg, var(--eb-surface, #fff)), transparent);
}
.eb-hscroll::after {
  right: 0;
  background: linear-gradient(to left, var(--eb-hscroll-bg, var(--eb-surface, #fff)), transparent);
}
.eb-hscroll.eb-hscroll-left::before  { opacity: 1; }
.eb-hscroll.eb-hscroll-right::after  { opacity: 1; }
.eb-hscroll-inner {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;          /* Firefox */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.eb-hscroll-inner::-webkit-scrollbar { display: none; }

/* #11626 — Fallback horizontal critique pour eb-tab-scroll. Les règles
   complètes vivent dans css/tab-scroll.css, préchargé par writehead()
   ET auto-injecté par js/carousel_menu.js. En cas de course de chargement
   (SPA qui remplace le head avant que le lien tab-scroll.css ne soit
   réappliqué, ou hard-refresh avant l'application du dernier stylesheet),
   le wrapper .eb-tab-scroll retombait à display:block → arrow-left, track
   et arrow-right s'empilaient verticalement, et les .eb-tab-scroll-item du
   track (divs par défaut block) se retrouvaient en colonne. Résultat client :
   onglets Matériel/Tenue/Consommable les uns sous les autres, flèches ‹/›
   visibles en haut/bas (les boutons non stylés). Ces règles critiques sont
   maintenues dans main.css (toujours chargé) pour garantir la ligne
   horizontale peu importe le timing d'application de tab-scroll.css. */
.eb-tab-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  width: 100%;
  min-width: 0;
}
.eb-tab-scroll-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
}
.eb-tab-scroll-track::-webkit-scrollbar { display: none; }
.eb-tab-scroll-track > .eb-tab-scroll-item,
.eb-tab-scroll-track > a,
.eb-tab-scroll-track > .nav-item,
.eb-tab-scroll-track > li {
  flex: 0 0 auto;
}
/* Flèches masquées par défaut : ne s'affichent qu'en cas de débordement
   réel (classe .eb-tab-scroll--overflows posée par tab-scroll.js).
   Sans ça, les <button> arrière-plan visibles côté client dès que
   tab-scroll.css n'était pas appliqué. */
.eb-tab-scroll-arrow { display: none; }
.eb-tab-scroll--overflows > .eb-tab-scroll-arrow { display: flex; }

/* Disponibilité */
.eb-dispo-dropdown { width: 400px; right: 0; }
.eb-dispo-saisieDuree { background-color: var(--bkg-color136); left: 0; top: 45px; height: 85px; }
.eb-dispo-label { font-size: 24px; }

/* Badges */
.eb-badge-new { background-color: #ffffff; color: var(--bkg-color140); max-height: 20px; display: inline-block; font-size: 10px !important; border: 1px solid var(--bkg-color140); }
.eb-badge-auto { color: #FFFFFF; background-color: var(--bkg-color140); }
.eb-badge-green { color: #198754 !important; }
.eb-badge-complet { background-color: var(--bkg-color138); color: var(--txt-color29); }
.eb-badge-relance { background-color: var(--bkg-color114); color: var(--txt-color71); }
.eb-badge-a-relancer { background-color: var(--bkg-color115); color: var(--txt-color29); }
.eb-badge-a-facturer { background-color: #ffe2e5; color: var(--txt-color6); }
.eb-badge-success-alt { color: var(--txt-color28); background-color: var(--bkg-color113); }
.eb-badge-danger-alt { color: var(--txt-color6); background-color: var(--bkg-color141); }
.eb-badge-danger-bg { background-color: var(--bkg-color60); color: var(--txt-color6) !important; }
.eb-inline-chip { display: inline-block; background-color: #F3F6F9; border: 1px solid #F3F6F9; border-radius: 5px; padding: 5px; }

/* Événements */
.eb-evt-icon { margin-right: 2px; margin-top: -4px; }
.eb-evt-header { position: relative; top: -12px; height: 1px; text-align: left; display: contents; }
.eb-evt-date-row { bottom: 15px; }
.eb-evt-date-table { margin-top: -5px; }
.eb-evt-highlight { background-color: yellow; }
.eb-evt-table-noborder { border: unset !important; width: 100%; }
.eb-evt-map { width: 100%; height: 100%; }
/* #8246 — Color band banner */
.eb-evt-banner-color {
  width: 100%; height: 100%; min-height: 180px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--eb-radius, 0.42rem);
}
.eb-evt-banner-logo {
  max-height: 80px; max-width: 160px;
  filter: brightness(0) invert(1); opacity: 0.85;
}
/* #8246 — Uploaded image banner */
.eb-evt-banner-img {
  width: 100%; height: 100%; min-height: 180px;
  background-size: cover; background-position: center;
  border-radius: var(--eb-radius, 0.42rem);
}
.eb-evt-pic-frame {
  border: 3px solid #fff;
  border-radius: 0.42rem;
  box-shadow: 0 .5rem 1.5rem .5rem rgba(0, 0, 0, .075);
  width: 120px;
  height: 120px;
}
.eb-evt-pic-img { height: 100%; max-width: 100%; margin-right: 4px; }
.eb-evt-logo-max60 { max-width: 60px; }
.eb-evt-card-body-compact { padding-left: 1em; padding-right: 3px; }
.eb-evt-table-mb05 { margin-bottom: 0.5em; }
.eb-evt-td-pb0 { padding-bottom: 0; }
.eb-evt-btn-edit { margin-top: 23px; }
.eb-evt-btn-edit-10 { margin-top: 10px; }
.eb-evt-sun { color: yellow; }
.eb-evt-moon { color: black; }
.eb-evt-float-badge { float: right; display: inline-block; padding: 5px; border-radius: 5px; margin-top: -5px; }
.eb-evt-center-badge { text-align: center; width: 100%; display: inline-block; padding: 5px; border-radius: 5px; margin-top: -5px; }
.eb-evt-hidden-input { background: var(--bkg-color108); }
.eb-evt-link-action { color: var(--txt-color21); cursor: pointer; }
.eb-evt-category-header { font-size: 0.87rem; font-weight: bold; height: 0; }
.eb-evt-category-header-alt { color: var(--txt-color89); font-size: 0.87rem; font-weight: bold; height: 0; }
.eb-evt-text-left { text-align: left; }

/* Widgets Dashboard */
.eb-card-title-link { color: var(--txt-color27); display: inline-flex; align-items: center; min-height: 40px; padding: 3px 0; }
.eb-widget-row { display: flex; justify-content: space-between; width: 100%; }
.eb-widget-row-items { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.eb-widget-self-center { align-self: center; margin-right: 10px; }
.eb-widget-subtitle-ellipsis { width: 50%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.eb-infos-date { position: relative; left: -18px; top: -7px; }
.eb-timeline-left { left: 103px; }
.eb-overlay-label { background-color: white; opacity: 65%; position: relative; bottom: 20px; }

/* Sections */
.eb-section-label { background-color: var(--bkg-color108); vertical-align: middle; font-size: 15px; font-weight: normal; }
.eb-section-desc { font-size: 11px; font-style: normal; }
.eb-section-blue-btn { background-color: #2c8eff; font-size: 15px; }

/* Personnel (formulaires) */
.eb-input-rounded { border-radius: 5px !important; font-size: 14px; }
.eb-input-rounded-minh { border-radius: 5px !important; font-size: 14px; min-height: 34px; }
.eb-input-rounded-left { border-radius: 5px 0 0 5px !important; }
.eb-input-rounded-left-noborder { border-radius: 5px 0 0 5px !important; border-right: none !important; color: #b5b5c3 !important; }
.eb-input-rounded-right { border-radius: 0 5px 5px 0 !important; border-left: none !important; }
.eb-input-rounded-right-simple { border-radius: 0 5px 5px 0 !important; }
.eb-input-flat { border-radius: 0 !important; font-size: 14px !important; }
/* #9691 — Astérisque champ obligatoire.
   Avant : position:relative; top:-8px créait un overlap vertical sur le label et le
   champ suivant, surtout dans les cellules de tableau serrées.
   Après : vertical-align:super (alignement natif CSS, pas de décalage manuel),
   taille plus lisible (0.6em au lieu de 0.4em), couleur d'erreur unifiée. */
.eb-required-star {
  color: var(--eb-error, #dc2626);
  vertical-align: super;
  font-size: 0.6em;
  margin-left: 0.25rem;
  line-height: 1;
  position: static;
  top: auto;
}

/* Factures */
.eb-facture-grey { color: grey; }
.eb-facture-green { color: green; }
.eb-facture-orange { color: orange; }
.eb-facture-red { color: red; }

/* Configuration */
.eb-cfg-h40 { height: 40px; }
.eb-cfg-h22 { height: 22px; }
.eb-cfg-pl30 { padding-left: 30px; }
.eb-cfg-pb5-pt0 { padding-bottom: 5px; padding-top: 0; }
.eb-cfg-mb20 { margin-bottom: 20px; }
.eb-cfg-section-title { border-bottom: solid 1px #ebedf3; font-size: 1.175rem; }
.eb-cfg-pt30 { padding-top: 30px; }

/* Statuts */
.eb-statut-label { margin-top: 6px; float: right; clear: both; font-size: 10px; line-height: 12px; }
.eb-statut-pl30 { padding: 0 0 0 30px; }
.eb-statut-pl50 { padding: 0 0 0 50px; }
.eb-statut-mt30 { margin-top: 30px !important; }
.eb-statut-mt10 { margin-top: 10px !important; }
.eb-statut-subtitle {
  color: var(--txt-color90);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.eb-statut-transfer-table {
  max-width: 100%;
}
.eb-statut-transfer-table td {
  vertical-align: middle;
}
.eb-statut-transfer-select,
.eb-statut-transfer-table .bootstrap-select,
.eb-statut-transfer-table .bootstrap-select > .dropdown-toggle {
  max-width: 260px !important;
}
.eb-statut-transfer-table .filter-option-inner-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gardes */
.eb-garde-label { margin-top: 6px; float: right; clear: both; font-size: 13px; line-height: 12px; margin-left: 10px; }
.eb-garde-label-sm { margin-top: 6px; float: right; clear: both; font-size: 13px; line-height: 12px; }
.eb-garde-label-left { margin-top: 6px; float: left; clear: both; font-size: 13px; line-height: 12px; }
.eb-horaire-cell { padding: 8px; height: 36px; }

/* Addons / Modules */
.eb-addon-label { font-size: 10px; width: 110px; align-self: center; }
.eb-addon-card { margin-top: 10px; border: none; text-align: left; padding-left: 1rem; margin: 10px auto; }
.eb-addon-toggle { height: 36px; line-height: 30px; color: #333; margin-right: 1.6em; float: right; }

/* Divers */
.eb-no-link-style { text-decoration: none; cursor: default; color: unset; }
.eb-minw-90-noshadow { min-width: 90px; box-shadow: unset !important; }
.eb-ws-nowrap-200 { white-space: nowrap; width: 200px; }
.eb-w-auto-center { width: auto; text-align: center; }
.eb-min-h60 { min-height: 60px; }

/* Aliases (backward compat with earlier batch names) */
.eb-evt-fs12 { font-size: 12px; }
.eb-evt-fs13 { font-size: 13px; }
.eb-evt-fs15 { font-size: 15px; }
.eb-fs13-2 { font-size: 13px; }
.eb-fs10pt { font-size: 10pt; }

/* ============================= */
/* Export template chips (#9712) */
/* ============================= */
.et-modal-columns { max-height: 400px; overflow-y: auto; gap: 4px; padding: 8px 0; }
.et-col-item { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid var(--bor-color4, #dee2e6); border-radius: 16px; font-size: 13px; cursor: pointer; transition: all .15s ease; user-select: none; }
.et-col-item:hover { border-color: var(--bkg-color140, #0d6efd); background-color: rgba(13,110,253,.06); }
.et-col-item.selected { background-color: var(--bkg-color140, #0d6efd); color: #fff; border-color: var(--bkg-color140, #0d6efd); }
.et-col-item input[type="checkbox"] { display: none; }

/* ======================== */
/* Password Strength #8885  */
/* ======================== */
.eb-pwd-meter {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-top: .5rem;
}
.eb-pwd-meter-bar {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width .3s ease, background-color .3s ease;
}
.eb-pwd-meter-bar.eb-meter-weak   { background-color: #dc3545; }
.eb-pwd-meter-bar.eb-meter-fair   { background-color: #fd7e14; }
.eb-pwd-meter-bar.eb-meter-good   { background-color: #28a745; }
.eb-pwd-meter-bar.eb-meter-strong { background-color: #155724; }

.eb-pwd-meter-label {
    font-size: .78rem;
    font-weight: 600;
    margin-top: .2rem;
    min-height: 1.1em;
    text-align: right;
}

.eb-pwd-checklist {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
    font-size: .82rem;
    color: #64748b;
}
.eb-pwd-checklist li {
    padding: .15rem 0;
    display: flex;
    align-items: center;
    gap: .35rem;
    transition: color .2s;
}
.eb-pwd-checklist li.eb-chk-pass {
    color: #28a745;
}
.eb-pwd-checklist li.eb-chk-pass i {
    color: #28a745;
}
.eb-pwd-checklist li.eb-chk-fail {
    color: #dc3545;
}
.eb-pwd-checklist li.eb-chk-fail i {
    color: #dc3545;
}

/* ============================================================
   #9680 — QA Global: SweetAlert, buttons & progress bar fixes
   ============================================================ */

/* --- Issue 3: Content overflows outside SweetAlert modals --- */
.swal2-html-container {
  overflow: auto !important;
  max-height: 70vh !important;
}
.swal2-popup.swal2-show,
.swal2-popup[style*="display: flex"] {
  max-height: 90vh;
  flex-direction: column;
}
.swal2-popup .swal2-content {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.swal2-popup.eb-apr-manage-swal .swal2-html-container {
  overflow-x: auto !important;
}

.swal2-popup.eb-apr-manage-swal .apr-manage-table-wrap {
  max-height: 320px;
  overflow: auto;
  margin-bottom: 12px;
}

.swal2-popup.eb-apr-manage-swal .apr-manage-table {
  min-width: 100%;
  font-size: 12px;
  white-space: nowrap;
}

.swal2-popup.eb-apr-manage-swal .apr-nom-input {
  min-width: 180px;
}

/* --- Issue 5: SweetAlert button positioning (actions bar) ---
     Ensure consistent row layout with gap and centered alignment. */
.swal2-actions {
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 1em 0.5em !important;
}

/* --- Issue 9 & 11: Swal Save & Close buttons product standards ---
     Save = green (btn-success), Close = secondary. Proper sizing. */
.btn-swal.btn-success {
  background-color: var(--bkg-color42, #198754) !important;
  color: var(--txt-color1, #fff) !important;
}
.btn-swal.btn-success:hover {
  background-color: var(--bkg-color43, #157347) !important;
}
.btn-swal.btn-secondary {
  background-color: var(--bkg-color44, #6c757d) !important;
  color: var(--txt-color1, #fff) !important;
}
.btn-swal.btn-secondary:hover {
  background-color: var(--bkg-color100, #5c636a) !important;
}
.btn-swal.btn-primary {
  background-color: var(--bkg-color140, #0d6efd) !important;
  color: var(--txt-color1, #fff) !important;
}
.btn-swal.btn-primary:hover {
  background-color: var(--bkg-color141, #0b5ed7) !important;
}
/* #10270 — ne pas utiliser --bkg-color102/103 ici : ces variables servent
   à une animation verte (pulse) et ramenaient le bouton Supprimer en vert. */
.btn-swal.btn-danger {
  background-color: #dc3545 !important;
  color: var(--txt-color1, #fff) !important;
}
.btn-swal.btn-danger:hover {
  background-color: #bb2d3b !important;
}

/* --- Issue 1: Buttons dancing between cards and toolbar ---
     Anchor the buttons container to a stable position. */
.eb-buttons-container {
  margin-top: 0.15rem;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
#buttons_container {
  position: relative;
  z-index: 1;
}

/* --- Issue 4: Progress bar styling consistency --- */
.progress {
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: var(--bkg-color4, #e9ecef);
}
.progress-bar {
  transition: width 0.4s ease;
  min-width: 0;
}
.progressCustom .progress-bar,
.progressCustom.progress-bar {
  --bs-progress-bar-bg: var(--bkg-color8);
}

/* --- Issue 7 & 8: Tarif and Preview button text not visible ---
     Ensure button text is never hidden unless on mobile class. */
.btn .trad,
.btn > span.trad,
.btn-swal .trad,
.btn-swal > trad {
  display: inline !important;
}
@media (max-width: 767px) {
  .btn .hide_mobile,
  .btn > span.hide_mobile,
  .btn-swal .hide_mobile {
    display: none !important;
  }
}

/* --- Issue 6: Save button color standardized to green ---
     Swal.fire() default confirm button was blue (#3085d6),
     but save buttons everywhere else use btn-success (green).
     Override the Swal2 native confirm to green for consistency.
     Pages that need a different color (e.g. delete=red) already
     set confirmButtonColor explicitly in their Swal.fire() call. */
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm {
  background-color: var(--bkg-color42, #198754) !important;
}
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm:hover {
  background-color: var(--bkg-color43, #157347) !important;
}
/* Bouton Annuler/Fermer : gris produit (sinon SweetAlert applique son bleu
   par défaut en inline-style, qui écrase var(--bkg-color54) sans !important). */
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel {
  background-color: var(--bkg-color54, #aaa) !important;
}
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel:hover {
  background-color: #949494 !important;
}

/* --- Issue 12: Total TTC display alignment --- */
.evenement-facturation-total,
label[for='sum'] {
  font-weight: 600;
  white-space: nowrap;
}

.eb-total-ttc-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

/* ================================================================
   #9575 — utility classes pour remplacer les inline styles courants
   ================================================================ */
/* Animation smooth de changement de page sur toutes les bootstrap-tables.
   Déclenchée depuis bootstrap-table-ebrigade.js au post-body après un
   page-change. Fade + léger glissement vertical. */
@keyframes ebBsSwap {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
tbody.eb-bs-swap {
  animation: ebBsSwap .28s cubic-bezier(.2, .8, .2, 1);
}
/* Cache le tbody pendant le swap (entre page-change et le 2e rAF post-body)
   pour éviter le flicker où l'ancien layout reste visible pendant la
   réorganisation par groupActivites(). */
tbody.eb-bs-swap-hide {
  opacity: 0 !important;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  tbody.eb-bs-swap { animation: none; }
  tbody.eb-bs-swap-hide { opacity: 1 !important; }
}

.eb-hidden { display: none !important; }
.eb-visible { display: block !important; }
.eb-flex { display: flex !important; }
.eb-iflex { display: inline-flex !important; }
.eb-iblock { display: inline-block !important; }
.eb-w-fit { width: fit-content; }
.eb-w-100 { width: 100% !important; }
.eb-mw-100 { max-width: 100%; }
.eb-mxauto { margin-left: auto; margin-right: auto; }
.eb-pos-rel { position: relative; }
.eb-pos-abs { position: absolute; }
.eb-fs-12 { font-size: 12px !important; }
.eb-fs-13 { font-size: 13px !important; }
.eb-fs-14 { font-size: 14px !important; }
.eb-fs-15 { font-size: 15px !important; }
.eb-fs-16 { font-size: 16px !important; }
.eb-fw-600 { font-weight: 600; }
.eb-fw-700 { font-weight: 700; }
.eb-mt-2 { margin-top: 0.5rem; }
.eb-mb-2 { margin-bottom: 0.5rem; }
.eb-no-shadow { box-shadow: none !important; }
.eb-overflow-hidden { overflow: hidden; }
.eb-overflow-auto { overflow: auto; }
.eb-text-secondary { color: var(--txt-color3); }
.eb-text-muted { color: var(--eb-text-muted, #94A3B8); }

/* ================================================================
   #9965 — Chips compétences : palette unifiée fiche / liste / modals.
   Source de vérité unique (avant : duplication evenement_choice.css +
   evenement_display_info_summary.php avec teintes différentes).
   ================================================================ */
.eb-comp-ico { margin-right: 3px; font-size: 9px; }
.eb-comp-empty {
    color: #991b1b !important;
    background: #fee2e2 !important;
    border: 1px solid rgba(220, 38, 38, .35) !important;
    font-weight: 700;
}
.eb-comp-partial {
    color: #92400e !important;
    background: #fef3c7 !important;
    border: 1px solid rgba(245, 158, 11, .35) !important;
    font-weight: 700;
}
.eb-comp-full {
    color: #065f46 !important;
    background: #d1fae5 !important;
    border: 1px solid rgba(16, 185, 129, .35) !important;
    font-weight: 700;
}
.eb-comp-warning {
    color: #9a3412 !important;
    background: #ffedd5 !important;
    border: 1px solid rgba(249, 115, 22, .35) !important;
    font-weight: 700;
}
/* Cellule du tableau choice qui contient les chips compétences : autorise
   l'enroulement (sinon overflow:hidden + ellipsis hérité de
   .fixed-table-body td et de body.eb-has-topbar-v2 .fixed-table-body td
   tronque les chips et affiche "..."). Spécificité haussée pour battre
   dashboard-modern.css. */
body.eb-has-topbar-v2 .fixed-table-body td:has(.eb-comp-list),
body.eb-has-topbar-v2 .fixed-table-body td:has(> .competence-badge),
body.eb-has-topbar-v2 .fixed-table-body td:has(> .eb-comp-empty),
body.eb-has-topbar-v2 .fixed-table-body td:has(> .eb-comp-partial),
body.eb-has-topbar-v2 .fixed-table-body td:has(> .eb-comp-full),
body.eb-has-topbar-v2 .fixed-table-body td:has(> .eb-comp-none),
body .fixed-table-body td:has(.eb-comp-list),
body .fixed-table-body td:has(> .competence-badge),
body .fixed-table-body td:has(> .eb-comp-empty),
body .fixed-table-body td:has(> .eb-comp-partial),
body .fixed-table-body td:has(> .eb-comp-full),
body .fixed-table-body td:has(> .eb-comp-none) {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}
/* Conteneur flex pour faire wrap les chips proprement dans la cellule. */
.eb-comp-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
}
.eb-comp-none {
    display: inline-flex;
    align-items: center;
    color: #64748b !important;
    font-style: italic;
    font-size: 12px !important;
    font-weight: 500;
    padding: 3px 0;
}
.eb-comp-none i { color: #94a3b8; font-size: 11px; }

/* ================================================================
   #9575 — fallback @media (prefers-color-scheme) pour les utilisateurs
   qui n'ont pas configuré de préférence localStorage. Si :root n'a
   ni .light ni .dark explicite (cas auto), suit la préférence OS.
   ================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    color-scheme: dark;
  }
}
@media (prefers-color-scheme: light) {
  :root:not(.light):not(.dark) {
    color-scheme: light;
  }
}

/* #9994 — Cards "Durée de travail" et "Option d'affichage" (edit_sirh.php) :
   les libellés longs (« Majoration des heures de nuit », « Ratio heure à
   récupérer », « Jours ouvrés par semaine ») gonflaient la 1re colonne à
   ~86% de la card, ce qui poussait la colonne des champs hors du card-body
   (overflow:hidden sur .newTableAll → inputs visuellement coupés).
   Fix : table-layout fixed + ratio 50/50, libellés autorisés à wrapper sur
   2 lignes. Scopé à .eb-sirh-config-table pour ne pas perturber les ~20
   autres pages qui partagent .newTableAll.
   NB : il faut écraser la règle globale `.card .newTableAll {table-layout:
   auto; td:first-child {width:1%; white-space:nowrap}}` de
   dashboard-modern.css:7440 — d'où les sélecteurs très spécifiques + !important. */
body.eb-has-topbar-v2 .card .newTableAll.eb-sirh-config-table,
.eb-sirh-config-table {
    table-layout: fixed !important;
    width: 100% !important;
}
body.eb-has-topbar-v2 .card .newTableAll.eb-sirh-config-table > tbody > tr > td:first-child,
.eb-sirh-config-table > tbody > tr > td:first-child {
    width: 50% !important;
    white-space: normal !important;
    word-break: break-word;
}
body.eb-has-topbar-v2 .card .newTableAll.eb-sirh-config-table > tbody > tr > td:nth-child(2),
.eb-sirh-config-table > tbody > tr > td:nth-child(2) {
    width: 50% !important;
}
/* Sur écran étroit, repasser en layout vertical : label au-dessus du champ. */
@media (max-width: 768px) {
    body.eb-has-topbar-v2 .card .newTableAll.eb-sirh-config-table,
    body.eb-has-topbar-v2 .card .newTableAll.eb-sirh-config-table > tbody,
    body.eb-has-topbar-v2 .card .newTableAll.eb-sirh-config-table > tbody > tr,
    body.eb-has-topbar-v2 .card .newTableAll.eb-sirh-config-table > tbody > tr > td,
    .eb-sirh-config-table,
    .eb-sirh-config-table > tbody,
    .eb-sirh-config-table > tbody > tr,
    .eb-sirh-config-table > tbody > tr > td {
        display: block;
        width: 100% !important;
        text-align: left !important;
    }
}

/* ============================================================
   Notes de frais — refonte UI mobile
   Cible : iPhone 12-15 (390x844). Cohérent avec le breakpoint
   global de l'app (992px). Pas d'impact desktop.
   ============================================================ */
@media (max-width: 991.98px) {
    body.nf-edit-mobile { padding-bottom: 80px; }

    /* FAB IA : poussé au-dessus de la sticky bar pour ne plus masquer
       les boutons. Très narrow scope — uniquement #iaWidgetBtn / #iaWidget
       quand body a la classe nf-edit-mobile. Aucun impact ailleurs. */
    body.nf-edit-mobile #iaWidgetBtn {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.nf-edit-mobile #iaWidget {
        bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Bande de boutons native (write_buttons_band → #band-container) :
       en mobile, on retire le mx-3 qui décale les boutons et on fait
       prendre toute la largeur à chaque bouton. Le FAB IA reste positionné
       au-dessus, ne touche pas aux boutons. */
    body.nf-edit-mobile #band-container > .container-fluid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        padding: 6px 8px !important;
        gap: 4px !important;
        max-width: 100% !important;
    }
    body.nf-edit-mobile #band-container .btn {
        flex: 1 1 0 !important;
        min-height: 44px;
        padding-left: 6px !important;
        padding-right: 6px !important;
        white-space: nowrap;
    }

    /* === Formulaire principal #NoteFraisTable : un champ par ligne ===
       Évite que "Date de création" wrap (cellule 1/3 width) et que les
       dropdowns Activité/Motif/Statut/Section aient des largeurs incohérentes. */
    body.nf-edit-mobile #NoteFraisTable {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    body.nf-edit-mobile #NoteFraisTable > tbody > tr {
        display: block !important;
        margin-bottom: 6px;
    }
    body.nf-edit-mobile #NoteFraisTable > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        padding: 4px 0 !important;
        border: 0 !important;
    }
    body.nf-edit-mobile #NoteFraisTable label {
        display: block;
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 4px;
        font-weight: 500;
        white-space: nowrap;
    }
    /* Inputs / dropdowns à largeur uniforme dans le form */
    body.nf-edit-mobile #NoteFraisTable .bootstrap-select,
    body.nf-edit-mobile #NoteFraisTable input.form-control,
    body.nf-edit-mobile #NoteFraisTable select.form-control {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.nf-edit-mobile #NoteFraisTable .bootstrap-select > .dropdown-toggle {
        width: 100% !important;
        text-align: left;
    }

    /* Inputs confortables au pouce, sans zoom auto iOS */
    #NoteFraisTableDetail input.form-control,
    #NoteFraisTableDetail select.form-control,
    #NoteFraisTableDetail .bootstrap-select > .dropdown-toggle {
        min-height: 44px !important;
        font-size: 16px !important;
    }
    #NoteFraisTableDetail .input-group-text {
        font-size: 14px;
        padding: 0 .65rem;
    }

    /* Lignes de frais — refonte en card verticale propre.
       On annule le display:flex / float:left inline du HTML existant
       et on force une mise en page bloc 100% largeur, lisible au pouce. */
    #NoteFraisTableDetail tr.spaceUnder {
        display: block !important;
        background: var(--bkg-color108, #fff);
        border: 1px solid var(--bkg-color12, #e5e7eb);
        border-radius: 10px;
        padding: 14px 12px 8px;
        margin: 0 8px 14px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    #NoteFraisTableDetail tr.spaceUnder > td {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 0 10px !important;
        margin: 0 !important;
    }
    /* Labels mobiles : ajoutés en pseudo-element via data-mobile-label */
    #NoteFraisTableDetail tr.spaceUnder > td[data-mobile-label]::before {
        content: attr(data-mobile-label);
        display: block;
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 4px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    /* Force tous les inputs/selects à occuper toute la largeur ; annule
       les max-width en pixels inline (ex: max-width:139px, 150px, 160px). */
    #NoteFraisTableDetail tr.spaceUnder > td input,
    #NoteFraisTableDetail tr.spaceUnder > td select,
    #NoteFraisTableDetail tr.spaceUnder > td .bootstrap-select,
    #NoteFraisTableDetail tr.spaceUnder > td .input-group {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    /* Ligne commentaire : input + corbeille sur la même ligne, en flex */
    #NoteFraisTableDetail tr.spaceUnder > td[data-mobile-label="Commentaire"] {
        display: flex !important;
        flex-direction: column;
    }
    #NoteFraisTableDetail tr.spaceUnder > td .btn.delete {
        margin-top: 6px;
        align-self: flex-end;
    }

    /* Dropzone : grande cible tactile + cohérent avec le reste */
    #myDropzoneNDF { min-height: 120px; padding: 14px !important; }
    #myDropzoneNDF .dz-message h3 { font-size: 1rem; }

    /* Bouton scanner ticket — visuellement primaire sur mobile */
    .nf-scan-btn {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .nf-scan-btn i { margin-right: 6px; }

    /* Sticky action bar bas d'écran.
       - right: 56px réserve une gutter pour les FAB injectés par le
         navigateur (Galaxy AI, Chrome bubble, etc.) qui sinon recouvrent
         le dernier bouton.
       - border-top-left-radius adoucit le décrochage visuel à droite. */
    .nf-sticky-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 56px;
        z-index: 1030;
        background: var(--bkg-color108, #fff);
        border-top: 1px solid var(--bkg-color12, #e5e7eb);
        border-right: 1px solid var(--bkg-color12, #e5e7eb);
        border-top-right-radius: 12px;
        padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
        display: flex;
        gap: 6px;
        box-shadow: 0 -2px 8px rgba(0,0,0,.08);
    }
    .nf-sticky-actions .btn {
        flex: 1 1 0;
        min-height: 44px;
        font-size: 13px;
        font-weight: 600;
        padding: 0 10px;
        white-space: nowrap;
    }
    .nf-sticky-actions .btn i { margin-right: 4px; }

    /* Historique : éviter la troncature à 320px */
    .nf-history-wrapper {
        max-width: 100% !important;
        overflow-x: auto;
    }
}

/* Sur très petits écrans : icônes seules dans la sticky bar
   (3 boutons + gutter de 56px ne tiennent plus avec leurs labels). */
@media (max-width: 480px) {
    .nf-sticky-actions .btn .nf-sticky-label { display: none; }
    .nf-sticky-actions .btn i { margin: 0; font-size: 18px; }
    .nf-sticky-actions .btn { padding: 0; }
}

/* Le bouton scanner et la sticky bar doivent être cachés en desktop */
@media (min-width: 992px) {
    .nf-scan-btn-mobile-only,
    .nf-sticky-actions { display: none !important; }
}

/* ======================================================
   Flash vert autosave — utilisé par ebFlashSaved() partout
   ====================================================== */
@keyframes ebFieldSavedFlash {
    0%   { outline: 3px solid color-mix(in srgb, var(--eb-success, #10B981) 75%, transparent); outline-offset: 1px; background-color: color-mix(in srgb, var(--eb-success, #10B981) 18%, transparent); }
    30%  { outline: 3px solid color-mix(in srgb, var(--eb-success, #10B981) 60%, transparent); outline-offset: 1px; background-color: color-mix(in srgb, var(--eb-success, #10B981) 14%, transparent); }
    70%  { outline: 2px solid color-mix(in srgb, var(--eb-success, #10B981) 35%, transparent); outline-offset: 0px;  background-color: color-mix(in srgb, var(--eb-success, #10B981) 6%, transparent); }
    100% { outline: 0px solid transparent;                                                      outline-offset: 0px;  background-color: transparent; }
}
/* #10283 — un seul liséré, sur le wrapper extérieur (.mc-field /
   td / .form-group). Avant on flashait aussi les inputs internes
   → double bordure verte concentrique. */
.eb-field-saved {
    animation: ebFieldSavedFlash 2s ease-out;
    border-radius: 4px;
}

/* ======================================================
   WhatsApp — issue #5924
   Bouton .eb-whatsapp-btn : toujours visible, icône
   verte, padding réduit sur mobile pour ne pas déborder.
   ====================================================== */
.eb-whatsapp-btn { color: #25D366 !important; }
.eb-whatsapp-btn i { color: #25D366; }
.eb-whatsapp-btn:hover { opacity: 0.8; }

@media (max-width: 480px) {
    .eb-whatsapp-btn {
        display: inline-flex !important;
        align-items: center;
        padding: 4px 6px !important;
        font-size: 1.15rem;
    }
    .eb-whatsapp-btn .hide_mobile { display: none; }
}

/* ============================================================
   #avatarEditorModal — bouton Fermer custom
   Bouton tactile (44x44 min) très visible, fond blanc + croix
   rouge entourée d'un cercle, contraste fort sur tous les thèmes.
   ============================================================ */
#avatarEditorModal .avatar-close-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    color: #d33 !important;
    border: 2px solid #d33 !important;
    border-radius: 50% !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin-left: auto !important; /* pousse le bouton à droite du header */
}
#avatarEditorModal .avatar-close-btn:hover,
#avatarEditorModal .avatar-close-btn:active,
#avatarEditorModal .avatar-close-btn:focus {
    background: #d33 !important;
    color: #fff !important;
    outline: none !important;
}
@media (max-width: 768px) {
    #avatarEditorModal .avatar-close-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.25rem !important;
    }
}

/* ============================================================
   Chip autosave générique — eb-autosave.js
   Injecté dans .card-header.graycard par ebSetupAutosave().
   ============================================================ */
.eb-autosave-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 10px;
    background: color-mix(in srgb, var(--eb-success, #10B981) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--eb-success, #10B981) 28%, transparent);
    color: var(--eb-success, #10B981);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.4s;
    flex-shrink: 0;
    pointer-events: none;
}
.eb-autosave-chip.saving,
.eb-autosave-chip.just-saved,
.eb-autosave-chip.error { opacity: 1; }
.eb-autosave-chip i { font-size: 0.68rem; }

.eb-autosave-chip.saving {
    background: color-mix(in srgb, var(--eb-warning, #FB923C) 12%, transparent);
    border-color: color-mix(in srgb, var(--eb-warning, #FB923C) 30%, transparent);
    color: var(--eb-warning, #FB923C);
}
.eb-autosave-chip.error {
    background: color-mix(in srgb, var(--eb-danger, #EF4444) 12%, transparent);
    border-color: color-mix(in srgb, var(--eb-danger, #EF4444) 30%, transparent);
    color: var(--eb-danger, #EF4444);
}
.eb-autosave-chip.just-saved {
    animation: ebChipSavedPulse 1.4s ease-out;
    background: color-mix(in srgb, var(--eb-success, #10B981) 28%, transparent);
    border-color: color-mix(in srgb, var(--eb-success, #10B981) 60%, transparent);
}
@keyframes ebChipSavedPulse {
    0%   { transform: scale(1.15); box-shadow: 0 0 0 6px color-mix(in srgb, var(--eb-success, #10B981) 35%, transparent); }
    50%  { transform: scale(1.06); box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-success, #10B981) 18%, transparent); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
}
.card.no-autosave-chip .eb-autosave-chip { display: none !important; }

/* Masque le bouton Sauver quand l'autosave est actif sur la page */
body.eb-autosave-active #band-container #sauver,
body.eb-autosave-active #band-container.bandResponsive #sauver {
    display: none !important;
}

/* #10493 — Bande de boutons flottante (#band-container, position:fixed) :
   masquée tant qu'une SwAL modale est ouverte, sinon le bouton Sauver
   de la page reste cliquable derrière l'overlay (deux boutons Sauver
   visibles en même temps). On exclut les toasts (non modaux). */
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) #band-container {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* #10162 — Alignement supervisor view module pour tous les modules
   logistique/operationnel (vehicule, materiel, consommable, ...).
   Pattern derive de .recrutement-supervisor-view (issue #10253) generalise
   pour eviter de dupliquer les regles CSS par module.

   Pour appliquer ce style a une nouvelle page :
   1. Wrapper outer du contenu avec class="eb-supervisor-view"
   2. BootstrapTablePerso::setClassDiv('eb-supervisor-table')
*/
.eb-supervisor-view {
    /* Margin 16px pour matcher le margin-x de #menu.mc-tabs-bar au-dessus. */
    margin: 0 16px;
    /* #div_principale + #space-left propagent text-align:-webkit-center qui
       re-centre les enfants display:flex (UL stats) meme avec flex:1 1 auto.
       On neutralise pour que la stats UL prenne la pleine largeur. */
    text-align: left;
}
.eb-supervisor-view .stats-container-new {
    /* write_stats_containers_group impose `m-3` (1rem) sur tous les cotes;
       on retire le cote horizontal pour que l'UL soit flush avec le parent. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Le parent est display:block donc flex:1 1 auto n'a pas d'effet pour
       l'extension. width:100% force l'UL a la pleine largeur du parent et
       les tuiles (flex:1 1 0) se repartissent. !important pour battre les
       regles utilitaires hardcodees en m-3 + .nav. */
    width: 100% !important;
}
.eb-supervisor-table .fixed-table-toolbar .search {
    /* La toolbar bootstrap-table est display:flex avec .search en dernier
       enfant; justify-content:flex-end aligne l'input sur le bord droit. */
    justify-content: flex-end;
}
/* #10249 — Aligner le block cards Note de frais (`.eb-nf-config-row`) avec
   le block tabs `#menu.mc-tabs-bar` au-dessus.
   Probleme : `#parametrage-content` a `padding: 12px 16px 16px !important`
   (dashboard-modern.css:10608) -> contenu inset de 16px. Mais le `.row` de
   Bootstrap applique un negative margin horizontal (`--bs-gutter-x/-2` =
   -12px chaque cote) qui depasse cet inset -> cards visuellement a 4px du
   viewport au lieu de 16px (decalage avec le tabs bar).
   Fix : annule le negative margin horizontal du .row sans toucher au gutter
   inter-colonnes (les enfants `.col-xl-6` gardent leur padding intern).
   Resultat : bords cards a 16px du viewport, alignes avec #menu.mc-tabs-bar. */
.eb-nf-config-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* #10249 — Card Plafond Note de frais : layout input + unite (€ / km).
   On remplace le `.input-group` Bootstrap (CSS global cassee main.css:1461-1475
   pour le pattern "input + addon-end" -> rendu visuel decousu : addon = pill
   isolee, input avec coins arrondis a droite, gap visuel entre les 2) par un
   flex container `.eb-plafond-field` propre, sans dependance au CSS legacy.
   Resultat : input neutre + symbole en texte gras a sa droite, alignes
   verticalement, espace propre. */
.eb-plafond-field {
    display: flex;
    align-items: center;
    gap: 8px;
}
.eb-plafond-field .form-control {
    /* Largeur naturelle pour ne pas etirer le champ sur toute la cellule. */
    max-width: 160px;
}
.eb-plafond-field .eb-plafond-unit {
    /* Couleur secondaire pour bien distinguer l'unite de la valeur saisie. */
    color: var(--txt-color3);
    font-size: 0.95rem;
    white-space: nowrap;
}
body.eb-has-topbar-v2 .eb-supervisor-table .fixed-table-toolbar {
    /* Global eBrigade applique `body.eb-has-topbar-v2 .fixed-table-toolbar
       { padding: 4px 16px !important }`. Le padding-left de 16px decale le
       1er filtre (`Centre de Fessenheim` etc.) de 16px a droite du bord
       gauche de la table/stats UL au-dessus. On annule le padding-left
       pour aligner le 1er select avec la table.
       Specificity 0,3,1 + !important pour battre la regle globale. */
    padding-left: 0 !important;
}
.eb-supervisor-table .fixed-table-toolbar .columns > .btn,
.eb-supervisor-table .fixed-table-toolbar .bs-bars .selectpicker + .dropdown-toggle,
.eb-supervisor-table .fixed-table-toolbar .filterAreaDiv > .bootstrap-select > .dropdown-toggle {
    /* Le bootstrap-table rend les boutons de toolbar (.columns.btn-group:
       toggle vue cards/colonnes, etc.) avec un padding par defaut qui les rend
       plus courts que le selectpicker adjacent (.dropdown-toggle.btn-default
       ~38px). NB: la structure DOM est `<div class="columns btn-group">` (les
       classes sont sur le meme element, PAS imbriquees), donc on cible
       `.columns > .btn` directement. On force min-height + flex-center pour
       aligner les hauteurs. Scope strict a `.eb-supervisor-table`. */
    min-height: 38px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* #10249 — Ancien decalage right:28 sur la derniere icone-badge supplante par
   la regle globale `.stats-container-diviser, .eb-supervisor-view` plus haut
   (main.css l.6300+, right:48). On garde le selector pour reference + la regle
   est devenue no-op (toutes les proprietes deplacees vers la regle globale).
   Conserve un commentaire explicatif historique. */
.eb-supervisor-view .stats-container-new > li:last-of-type .sc-icon-slot {
    /* No-op : decalage et toggle alignment geres globalement par la regle a
       `.stats-container-diviser .toggle-container,
       .eb-supervisor-view .toggle-container` plus haut dans ce fichier. */
}
.eb-supervisor-view .container-fluid.eb-inv {
    /* Materiel/Consommable/Tenue wrappent leur _stats dans `.container-fluid
       .col-12 .eb-inv` qui ajoute 15px de padding-x. On le retire dans
       le contexte supervisor-view qui gere deja le margin via .eb-supervisor-view. */
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================================
   #10251 — Cleanup visuel cards "Duree de travail" + "Option d'affichage"
   sur addons_additionnel.php?tab=5&child=28 (page parametrage SIRH).
   Anciennement dans un <style> inline de edit_sirh.php — deplace ici suite
   au review MR !10281 (no inline CSS in PHP).

   Scope : `.eb-sirh-config-table` est ajoute sur les `<table>` des cards
   form du `edit_sirh.php`.
   ============================================================================ */

/* Aligne les bords gauche/droite des cards avec le block tabs au-dessus.
   Sans override, le `row g-3` Bootstrap ajoute 8px de padding sur chaque col
   -> cards inset de 15px. On retire le padding outer (left du 1er col, right
   du dernier) pour que les cards s'etendent jusqu'aux bords du row. */
#container > .row > .col-xl-6:first-child {
    padding-left: 0 !important;
}
#container > .row > .col-xl-6:last-child {
    padding-right: 0 !important;
}

/* Cleanup card "Duree de travail" config (et "Option d'affichage" au format
   form). Probleme observe : les inputs s'etalent sur toute la largeur de la
   cellule (input "8" ~350px pour un seul chiffre, idem "0" et "05:00") ->
   rendu desordonne et incoherent. Solution : largeurs max + alignement
   consistant. */
.eb-sirh-config-table {
    width: 100%;
}
.eb-sirh-config-table > tbody > tr,
.eb-sirh-config-table > tr {
    border-bottom: 1px solid var(--eb-border, #e2e8f0);
}
.eb-sirh-config-table > tbody > tr:last-child,
.eb-sirh-config-table > tr:last-child {
    border-bottom: none;
}
.eb-sirh-config-table td {
    padding: 12px 10px !important;
    vertical-align: middle;
}
/* 1ere colonne (labels) - 45% largeur, contenu LEFT-aligned pour que tous
   les labels commencent au meme x. */
.eb-sirh-config-table > tbody > tr > td:first-child,
.eb-sirh-config-table > tr > td:first-child {
    width: 45%;
    color: var(--eb-text-secondary, #64748b);
    font-size: 0.92rem;
    text-align: left;
}
/* Override le flex `justify-content-end` du markup PHP pour mettre a start.
   Tous les labels commenceront a gauche au meme x au lieu d'etre right-aligned
   avec leurs ends alignes (mais leurs starts varies selon longueur du texte). */
.eb-sirh-config-table > tbody > tr > td:first-child > div.d-flex.justify-content-end,
.eb-sirh-config-table > tr > td:first-child > div.d-flex.justify-content-end {
    justify-content: flex-start !important;
}
/* 2eme colonne (valeurs/inputs) - reste de largeur, LEFT-aligned. */
.eb-sirh-config-table > tbody > tr > td:nth-child(2),
.eb-sirh-config-table > tr > td:nth-child(2) {
    width: 55%;
    text-align: left !important;
}
/* Inputs : largeur contrainte + LEFT-aligned (margin: 0, pas margin: 0 auto) */
.eb-sirh-config-table input[type='text']:not(.sirh-timepicker),
.eb-sirh-config-table input[type='number'] {
    max-width: 140px !important;
    display: block;
    margin: 0 !important;
}
.eb-sirh-config-table .sirh-timepicker {
    max-width: 80px !important;
    text-align: center;
    display: block !important;
    margin: 0 !important;
}
/* Selectpicker (dropdown) : largeur raisonnable */
.eb-sirh-config-table .bootstrap-select.selectpicker,
.eb-sirh-config-table select.selectpicker {
    max-width: 240px !important;
}
/* Nested table pour Debut/Fin time pickers : layout left-aligned.
   Probleme observe : table-layout auto donnait des largeurs cells differentes
   (Debut=79px, Fin=243px) -> input Debut "22:00" cropy a 39px de large car
   parent trop etroit. Fix : `min-width: 100px` sur le td enfant pour garantir
   au moins 100px pour le contenu Debut + input ou Fin + input.
   Specificite bumped via `body.eb-has-topbar-v2` pour battre la regle globale
   `body.eb-has-topbar-v2 .newTableAll tr td { padding: 10px 20px !important }`
   (dashboard-modern.css) qui ecrasait le padding-left a 20px. */
.eb-sirh-config-table table.border-0 {
    margin: 0;
    border: 0;
    width: auto;
    table-layout: auto;
}
body.eb-has-topbar-v2 .eb-sirh-config-table table.border-0 td,
.eb-sirh-config-table table.border-0 td {
    padding: 0 24px 0 0 !important;
    text-align: left !important;
    vertical-align: middle;
    min-width: 100px;
}
body.eb-has-topbar-v2 .eb-sirh-config-table table.border-0 td:last-child,
.eb-sirh-config-table table.border-0 td:last-child {
    padding-right: 0 !important;
}
/* Helper text sous les inputs (ex: "1H supplementaire = 0H a recuperer") */
.eb-sirh-config-table .form-control + div {
    font-size: 0.78rem;
    color: var(--eb-text-secondary, #64748b);
    margin-top: 4px;
}

/* ============================================================================
   #10162 — Page Import (module_page.php?module=import) : neutralise le
   text-align:-webkit-center herite de #div_principale qui centrait les
   stepper-title + le contenu de chaque etape.
   Pour le contexte : #div_principale + #space-left propagent
   text-align:-webkit-center qui centre les enfants block (h3) ET les
   conteneurs display:flex (.stepper-desc). Les pages modernes utilisent
   `.eb-supervisor-view { text-align:left }` pour neutraliser. Ici on
   cible directement le form import + son stepper pour restaurer le
   layout d'origine (titres a gauche du numero, contenu sous le titre).
   ========================================================================== */
#load_excel_form,
#load_excel_form .stepper-label,
#load_excel_form .stepper-title,
#load_excel_form .stepper-desc {
    text-align: left;
}

/* ============================================================================
   #10162 — Page personnel_dispo.php?tab=15 ("Disponibles maintenant")
   Redesign UI/UX : header unifie sur 1 ligne avec hierarchie visuelle claire.
   4 groupes :
     - Groupe 1 : statut Live discret (pulse + clock OU date passe)
     - Groupe 2 : selecteur de date (input pill + bouton Voir)
     - Groupe 3 : compteur "N disponibles" + legende Planning/Live en dots
     - Groupe 4 : actions "Contacter tous" + recherche (pousse a droite)
   Toutes les valeurs CSS sont externes (zero inline style dans le PHP).
   ========================================================================== */
/* #10162 — Container parent du tab=15 : aligne le badge + grille des cards
   avec le bord gauche des tabs `.mc-tabs-bar { margin-left: 16px }`.
   Par defaut `.container-fluid` a padding-x: 12px (Bootstrap), on bump a 16px
   pour matcher. Specificite via la double classe pour battre Bootstrap. */
.container-fluid.fc15-tab-container,
.fc15-tab-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.fc15-header-row {
    /* #10162 — Gap uniforme 16px entre les 3 blocs (badge / date / actions)
       pour un espacement coherent. row-gap pareil pour le wrap mobile. */
    gap: 16px;
    row-gap: 16px;
    padding: 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.fc15-header-row,
.fc15-header-group {
    text-align: left;
}

.fc15-header-group { gap: 10px; }

/* ───────── Summary badge unifie (statut + stats) ───────── */
.fc15-summary-badge {
    /* Pill blanche avec ombre subtile et border-radius prononce pour
       evoquer un "stat card" propre. Background blanc casse pour distinguer
       du fond gris clair de la page. */
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 6px 18px;
    gap: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fc15-badge-section {
    gap: 8px;
}

/* Separateur vertical entre les sections du badge — 1px solid border
   gauche sur la 2e section (gap horizontal de 18px du parent + 18px de
   marge interieure visuelle). */
.fc15-badge-section + .fc15-badge-section {
    border-left: 1px solid #e2e8f0;
    padding-left: 18px;
}

/* ───────── Section 1 : Statut Live ───────── */
.fc15-status-section {
    color: #475569;
    font-size: 0.875rem;
    font-weight: 500;
}
.fc15-status-label { letter-spacing: 0.03em; }
.fc15-status-clock {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    color: #1e293b;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: transparent;
    padding: 0;
}
.fc15-status-icon { color: #0d6efd; font-size: 1rem; }

/* ───────── Groupe 2 : Date selector ───────── */
.fc15-date-form { gap: 6px; margin: 0; }
.fc15-date-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.fc15-date-input-icon {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    pointer-events: none;
    font-size: 0.875rem;
    z-index: 1;
}
/* Specificite via ID selector pour battre la regle
   `body.eb-has-topbar-v2 .form-control:not(.bootstrap-select):not(.alert-red-fade):not(.eb-field-error){padding-left:12px !important}`
   de dashboard-modern.css (specificite 0,5,1). On utilise input#fc15_date
   (1,1,1) qui beat la specificite via ID column = 1. Sans ca, l'icone
   calendrier touchait le texte de l'input. */
/* #10162 — Hauteur 40px uniforme sur tous les blocs du header pour aligner
   visuellement avec le summary badge (qui fait aussi 40px avec son padding). */
input#fc15_date.fc15-date-input,
.fc15-date-input {
    width: 160px;
    height: 40px;
    border-radius: 999px;
    padding-left: 34px !important;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.875rem;
    color: #1e293b;
}
.fc15-time-input {
    width: 100px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    font-size: 0.875rem;
}
.fc15-btn-now {
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-weight: 500;
}

/* ───────── Section 2 : Stats ───────── */
.fc15-stats-section { gap: 12px; }
.fc15-stats-count-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.fc15-stats-count {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #16a34a;
}
.fc15-stats-label {
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 500;
}
.fc15-stats-legend {
    display: flex;
    gap: 10px;
    font-size: 0.75rem;
    color: #64748b;
}
.fc15-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.fc15-legend-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.fc15-legend-dot-planning { background: #16a34a; }
.fc15-legend-dot-live { background: #ea580c; }

/* ───────── Groupe 4 : Actions ───────── */
.fc15-header-actions {
    gap: 10px;
    margin-left: auto;
}
.fc15-contact-all-btn {
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fc15-search-wrap { width: 240px; max-width: 100%; }
.fc15-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 0.875rem;
}
/* Specificite via ID selector pour battre dashboard-modern.css
   (cf. commentaire au-dessus pour .fc15-date-input). */
input#fc_now_search.fc15-search-input,
.fc15-search-input {
    width: 100%;
    /* !important pour battre `.form-control-sm { min-height: ... }` de Bootstrap
       qui ramenait la hauteur a 38px au lieu des 40px attendus. */
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 999px;
    padding: 0 14px 0 36px !important;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.875rem;
    box-shadow: none;
}

/* Idem pour le date input — assurer 40px meme avec form-control-sm. */
input#fc15_date.fc15-date-input {
    height: 40px !important;
    min-height: 40px !important;
}
.fc15-search-input:focus {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(13,110,253,.15);
}

/* Cards layout — neutralise le text-align:-webkit-center herite + alignement
   vertical du body et bouton contact 36x36. */
#fc_now_grid,
#fc_now_grid .fc-now-col,
.fc-now-card,
.fc-now-card .card-body,
.fc-now-card .flex-grow-1,
.fc-now-card .text-truncate {
    text-align: left;
}

/* #10162 — Aligne le bord gauche des cards avec le badge + tabs (x=261).
   Sans ces overrides, le `.row` Bootstrap a un negative margin-left:-12px
   et les `.col-*` ont padding-left:15px qui decalent la 1ere card de 15px
   a droite du bord du grid. On passe en CSS Grid avec breakpoints
   responsifs equivalents a col-12 col-sm-6 col-md-4 col-lg-3 : 1/2/3/4
   colonnes selon viewport. */
#fc_now_grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}
#fc_now_grid > .fc-now-col {
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
}
@media (min-width: 576px) {
    #fc_now_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    #fc_now_grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
    #fc_now_grid { grid-template-columns: repeat(4, 1fr); }
}
.fc-now-card .card-body { align-items: center; }
.fc-now-card .flex-grow-1 { min-width: 0; flex: 1 1 auto; }
.fc-now-card .font-weight-bold a {
    color: var(--eb-text, #1e293b);
    text-decoration: none;
}
.fc-now-card .font-weight-bold a:hover { color: var(--eb-primary, #0d6efd); }
.fc-now-card-actions {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
}
.fc-now-card .fc-now-action-btn {
    min-width: 92px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
}

/* Mobile (<992px) : permet le wrap propre et restaure full-width pour les
   groupes individuels. */
@media (max-width: 991px) {
    .fc15-header-actions {
        margin-left: 0;
        width: 100%;
    }
    .fc15-search-wrap { flex: 1 1 auto; }
}

/* #10162 — Page Organisations (section.php) : aligne le bandeau de stats
   (3 cards : Organisations / Actives / Désactivées) avec le panneau
   `.eb-section-layout` en-dessous (qui contient l'arbre Structure + Détail).

   Bug : `.stats-container-diviser` herite `margin-left/right: 16px !important`
   de `dashboard-modern.css`. Combine avec le `padding-x: 16px` deja present
   sur `.eb-section-page`, le bandeau stats est decale de +16px par rapport
   au layout (stats x=277/right=1888 vs layout x=261/right=1904).

   Fix scope a `.eb-section-stats` (la classe specifique du wrapper sur
   section.php) -> aucune regression sur les autres pages qui utilisent
   `.stats-container-diviser` (dispo, audit, recrutement...). */
.stats-container-diviser.eb-section-stats {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================================
   #10162 — Page Devis & Facture (devis_facture.php)
   ========================================================================== */
/* Aligne le bandeau de stats (5 cards : En attente / Accepte / Avec facture
   / Sans facture / Acompte a regler) avec le toolbar de filtres et la table
   en-dessous. Sans wrapper, le UL `.stats-container-new` etait centre dans
   son parent (x=272/right=1889) alors que la table est a x=260/right=1901
   (12px de decalage de chaque cote). Cause : `#div_principale` propage
   `text-align: -webkit-center` heritte par les descendants. Combine avec
   `stats-container.css { width: calc(100% - 54px) !important }`, le UL
   est centre dans un parent de 1671px -> 27px d'offset gauche/droite. */
.devis-facture-stats-wrap {
    text-align: left !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.devis-facture-stats-wrap .stats-container-new {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;  /* annule `width: calc(100% - 54px) !important` */
    max-width: 100% !important;
}

/* #10485 — Dans les onglets Devis/Facture de la fiche organisation, le bouton
   d'ajout est deplace dans la zone de recherche. Cette zone etait forcee a
   240px sur desktop, donc le bouton debordait a droite du tableau. */
.eb-crm-doc-table .fixed-table-toolbar > .search,
body.eb-has-topbar-v2 .eb-crm-doc-table .fixed-table-toolbar > .search {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.eb-crm-doc-table .fixed-table-toolbar > .search .search-input,
body.eb-has-topbar-v2 .eb-crm-doc-table .fixed-table-toolbar > .search .search-input {
    flex: 0 1 240px;
    width: 240px;
    max-width: 100%;
}

.eb-crm-doc-table .eb-crm-doc-actions,
body.eb-has-topbar-v2 .eb-crm-doc-table .eb-crm-doc-actions {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    max-width: 100%;
    white-space: nowrap;
}

/* ============================================================================
   #10162 — Page Export (export.php)
   ========================================================================== */
/* Aligne le bloc cards (`.eb-export-home`) avec le toolbar de filtres
   au-dessus. Le `<div class='eb-export-home'>` avait un style inline
   `max-width:1100px; margin:0 auto;` qui constrengnait le bloc et le
   centrait -> cards a x=531 alors que le toolbar etait a x=257. */
.eb-export-page .eb-export-home {
    padding: 20px 12px;
}

/* UI/UX refresh de la page Export : tous les styles inline migres dans
   des classes scope a `.eb-export-page`. Respecte la regle "no inline CSS". */

/* CTA Card "Creer un export personnalise" */
body.eb-has-topbar-v2 .eb-export-page .eb-export-cta {
    border: 2px solid var(--eb-primary, #fa7070) !important;
    background: linear-gradient(135deg, rgba(250, 112, 112, 0.12), rgba(250, 112, 112, 0.03)) !important;
    border-radius: 14px !important;
}
/* La regle Bootstrap `.flex-md-row` (media >= 768px) est battue par
   `.flex-column` (declare 2x en source order plus tard dans main.css).
   On force le layout row+center sur desktop directement sur le card-body
   de la CTA pour eviter le stack vertical avec espace mort de 1146px. */
@media (min-width: 768px) {
    .eb-export-page .eb-export-cta .card-body {
        flex-direction: row !important;
        align-items: center !important;
    }
}
.eb-export-page .eb-export-cta-icon {
    color: var(--eb-primary, #fa7070);
}
.eb-export-page .eb-export-cta-text {
    flex: 1;
    min-width: 0;
}
body.eb-has-topbar-v2 .eb-export-page .eb-export-cta-btn {
    border-radius: 999px !important;
    padding: 8px 22px;
    font-weight: 500;
    white-space: nowrap;
    min-height: 40px;
}

/* Titre de section (Mes exports personnalises / Exports standards) */
.eb-export-page .eb-export-section-title {
    letter-spacing: 0.5px;
    font-size: 0.8rem;
}

/* Empty state "Aucun export personnalise pour le moment" */
.eb-export-page .eb-export-empty {
    background: var(--eb-bg-subtle, #f8f9fa);
    border: 1px dashed var(--eb-border, #e2e8f0);
    border-radius: 12px;
    padding: 28px 20px;
}
.eb-export-page .eb-export-empty-icon {
    opacity: 0.45;
    display: block;
    margin: 0 auto 8px;
}
.eb-export-page .eb-export-empty-title {
    font-weight: 500;
    margin-bottom: 4px;
}

/* Cards categorie (Exports standards) : layout masonry via CSS multi-column.
   Bug avant : Bootstrap row+col en row-flow + `align-self: flex-start` ->
   les cards courtes (Adhesion 1 lien, CRM 3, Habilitation 2, Recrutement 1)
   laissaient de gros espaces vides sous elles. Fix : passage en
   `display: block + column-count: 4` (multi-column CSS) -> packing
   vertical sans gap. Responsive : 4 cols @ xl, 3 @ lg, 2 @ md, 1 @ sm. */
.eb-export-page .eb-export-categories-row {
    display: block !important;
    column-count: 4;
    column-gap: 16px;
    margin: 0 !important;
}
.eb-export-page .eb-export-categories-row > [class*='col-'] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}
@media (max-width: 1199.98px) {
    .eb-export-page .eb-export-categories-row { column-count: 3; }
}
@media (max-width: 991.98px) {
    .eb-export-page .eb-export-categories-row { column-count: 2; }
}
@media (max-width: 767.98px) {
    .eb-export-page .eb-export-categories-row { column-count: 1; }
}

body.eb-has-topbar-v2 .eb-export-page .eb-export-category-card {
    border: 1px solid var(--eb-border, #e5e7eb) !important;
    border-radius: 12px !important;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
body.eb-has-topbar-v2 .eb-export-page .eb-export-category-card:hover {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}
.eb-export-page .eb-export-category-title {
    letter-spacing: 0.3px;
    font-weight: 600;
}

/* ============================================================================
   #10162 — Page Parametrage (parametrage.php?tab=1)
   ========================================================================== */
/* Aligne le bootstrap-table (toolbar + table) avec les tabs nav
   `#menu.mc-tabs-bar` au-dessus (x=261). Bug : le contenu (toolbar et table
   a x=293) etait decale de +32px a droite des tabs. Cumul de paddings :
   `#parametrage-content { padding: 16px }` (+16px) + col-12 (+15px) +
   ~1px de rounding. Fix : negative margin -16px + width extended + neutralise
   le col-12 padding. Scope strict via `:has(.eb-bootstrap-table-wrap)` -> ne
   s'applique QUE quand le container-fluid contient un bootstrap-table
   (aucun impact sur les autres tabs avec card-based layouts, cf. #10249). */
#parametrage-content > .container-fluid.pl-0:has(.eb-bootstrap-table-wrap) {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
}
/* Page Information (edit_fields.php) : son wrapper `.container-fluid.pl-0.pt-5`
   s'aligne déjà naturellement avec les tabs (x=261). Le breakout -16px ci-dessus
   l'over-corrige et le fait déborder à droite (bouton « + Information » coupé,
   scroll horizontal). On neutralise le breakout pour cette variante `.pt-5`
   uniquement (classe propre à cette page). */
#parametrage-content > .container-fluid.pl-0.pt-5:has(.eb-bootstrap-table-wrap) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
#parametrage-content .container-fluid.eb-bootstrap-table-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Positionne la search bar a cote des boutons d'action a droite +
   harmonise la taille des btns avec la search bar (40px).
   #10285 — scope etendu a `#parametrage_tabs_content` pour couvrir aussi
   les sub-tabs (ex: tab=2&child=5) dont le toolbar est plus profond dans
   la DOM (sous .eb-bootstrap-table-wrap, pas direct child de
   #parametrage-content). */
#parametrage_tabs_content .fixed-table-toolbar > .eb-buttons-container {
    margin-left: 6px !important;
}
#parametrage_tabs_content .fixed-table-toolbar > .eb-buttons-container .btn {
    min-height: 40px;
    padding: 9px 16px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;  /* espace entre icone et texte (collapse par inline-flex) */
    line-height: 1.2;
}

/* ============================================================================
   #10162 — Page Disponibilite calendrier (personnel_dispo.php?tab=14)
   ========================================================================== */
/* Neutralise margin de `.stats-container-diviser` dans `.fc15-tab-container`
   pour aligner les stats cards avec le container (qui a deja 16px de
   padding via la classe partagee avec tab=15). */
.fc15-tab-container .stats-container-diviser {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.fc15-tab-container .dispo-stats-context {
    margin: -6px 3px 10px;
    color: #64748b;
    font-size: 0.8125rem;
    text-align: left;
}

/* Calendrier dispo : la 1ere colonne (Lundi) avait padding-left:20px via
   .newTableAll td, decalage de 20px a droite vs stats cards et filtre.
   On retire padding-left du 1er TD + padding-right du dernier TD pour
   alignement pixel-perfect avec les bords du container. */
.fc15-tab-container #save_dispo > .newTableAll > tbody > tr > td:first-child,
.fc15-tab-container #save_dispo > .newTableAll > tr > td:first-child {
    padding-left: 0 !important;
}
.fc15-tab-container #save_dispo > .newTableAll > tbody > tr > td:last-child,
.fc15-tab-container #save_dispo > .newTableAll > tr > td:last-child {
    padding-right: 0 !important;
}

/* Table layout fixed + width 100% : la table prenait sa largeur "naturelle"
   via les paddings 10px 20px sur chaque TD -> debordait a droite. */
.fc15-tab-container #save_dispo > .newTableAll {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}
.fc15-tab-container #save_dispo > .newTableAll > tbody > tr > td,
.fc15-tab-container #save_dispo > .newTableAll > tr > td {
    padding-left: 8px !important;
    padding-right: 8px !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.fc15-tab-container #save_dispo > .newTableAll > tbody > tr > td:first-child,
.fc15-tab-container #save_dispo > .newTableAll > tr > td:first-child {
    padding-left: 0 !important;
}
.fc15-tab-container #save_dispo > .newTableAll > tbody > tr > td:last-child,
.fc15-tab-container #save_dispo > .newTableAll > tr > td:last-child {
    padding-right: 0 !important;
}

/* Legende du calendrier dispo : agrandir les badges Absence / Weekend /
   Organisation jour-nuit. Etaient font 11px / hauteur 19px (defaut Bootstrap
   .badge font-size:.75em) -> illisibles. Pill style 13px coherent avec le
   reste du header dispo. */
.fc15-tab-container form > .mt-1 {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 0 !important;
    min-height: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.fc15-tab-container form > .mt-1 > .badge {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

/* ============================================================================
   #10285 — Page Personnel > Contrat de travail (upd_personnel.php?tab=22)
   ========================================================================== */
/* Card Horaire : les `.input-hour` (H/M inputs + label) wrappaient en
   vertical sur petits ecrans (14" / 1366px) parce que `.input-group` a
   `flex-wrap: wrap` par defaut Bootstrap + `.w-50` qui constraint a 50%
   du TD parent (deja etroit) -> label H/M se retrouvait sous l'input.

   Fix : flex-wrap: nowrap pour garder l'input + label sur la meme ligne,
   input prend la place dispo, label garde sa taille minimale. */
.input-hour {
    flex-wrap: nowrap !important;
    min-width: 60px;
}
.input-hour > .form-control {
    min-width: 0;        /* permet shrink sans depasser flex parent */
    flex: 1 1 auto;
}
.input-hour > .input-group-text-end {
    flex: 0 0 auto;      /* le label H/M ne grow/shrink pas */
    min-width: 28px;
    padding-left: 6px;
    padding-right: 6px;
}

/* Inputs trop petits sur 14" : on bump padding-y + font-size pour les
   form-control-sm dans les cards Contrat (tab=22). Scope au form
   `#personnelForm` pour ne pas affecter les autres pages. */
#personnelForm .input-hour > .form-control-sm {
    height: 36px !important;
    font-size: 14px !important;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ============================================================================
   #10285 — Page Parametrage > tab=2 (Information / Activite)
   ========================================================================== */
/* Aligne le bootstrap-table avec les tabs nav (x=261). Structure differente
   de tab=1 : ici `.eb-bootstrap-table-wrap` est direct child de
   `#parametrage-content` (pas de wrapper `.pl-0` intermediaire).

   Bug : table a x=278/right=1883 alors que tabs a x=261/right=1900
   -> decalage +17px a droite. Cause : `#parametrage-content { padding: 16px }`
   pousse le contenu de 16px (+ ~1px rounding).

   Fix : negative margin -16px + width extended sur le wrapper direct
   `.eb-bootstrap-table-wrap` (qui n'a pas la regle .pl-0 du tab=1).
   Scope strict via le selector `> .container-fluid.eb-bootstrap-table-wrap`
   en direct child uniquement -> ne s'applique QU'AU cas tab=2. */
#parametrage-content > .container-fluid.eb-bootstrap-table-wrap {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
}

/* tab=2 : `#buttons_container` est aussi direct child de
   `#parametrage-content` (pas bouge dans le toolbar comme tab=1).
   Aligne-le visuellement avec la table en-dessous (x=261, full width). */
#parametrage-content > #buttons_container {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
    justify-content: flex-end;  /* btn "Information" a droite */
    padding-right: 0;
}

/* #10285 — Cas tab=2&child=5 (et autres sub-tabs) : le wrapper
   `.eb-bootstrap-table-wrap` est SOUS `#parametrage_tabs_content`
   directement (pas dans `#parametrage-content`). L'ancienne regle
   `#parametrage-content .container-fluid.eb-bootstrap-table-wrap`
   ne matche pas -> le col-12 padding 15px du wrap pousse la table
   interne a x=277 au lieu de x=262.

   Fix : etend le scope a `#parametrage_tabs_content` pour neutraliser
   le col-12 padding sur tous les wrappers bootstrap-table sous le
   parametrage (parent commun a toutes les sous-pages). */
#parametrage_tabs_content .container-fluid.eb-bootstrap-table-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* #10285 — Cas tab=2&child=6 (et autres pages avec wrapper
   `.table-responsive` intermediaire entre #parametrage-content et le
   bootstrap-table-wrap). La table-responsive de Bootstrap n'a pas de
   margin par defaut mais herite du padding 16px de #parametrage-content
   -> contenu decale de +16px par rapport aux tabs (x=261).

   Fix : negative margin -16px + width:calc(100% + 32px) sur le wrapper
   .table-responsive DIRECT child de #parametrage-content pour compenser
   le padding parent et aligner le contenu avec les tabs. */
#parametrage-content > .table-responsive {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
}

/* #10285 — Cas tab=3 (Logistique > Vehicule) : structure avec wrapper
   `.col-sm-12` (ou autres col-*) intermediaire entre .table-responsive
   et .eb-bootstrap-table-wrap. Le col-* Bootstrap a padding-x:15px qui
   re-decale le contenu de 15px (apres compensation table-responsive).

   Fix : neutralise le padding du col-* direct child de .table-responsive
   pour que la wrap soit alignee a x=262 (= tabs). */
#parametrage-content > .table-responsive > [class*='col-'] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* #10285 — Cas tab=8&child=38 (et autres pages card-based dans
   parametrage). Structure :
   #parametrage-content (padding 16)
     └── #div_main.container-fluid (x=278)
         └── .row > .card.graycarddefault
             └── .card-body (padding 18 intentionnel pour visuel card)
                 └── ... bootstrap-table

   Le `.card` veut garder son padding interne (visuel graycard) mais le
   BORD de la card doit s'aligner avec les tabs (x=261). On pull #div_main
   left de 16px pour compenser le padding parent. Le card-body padding 18
   reste, c'est intentionnel pour l'identite visuelle de la card. */
#parametrage-content > #div_main {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
}

/* #10285 — Cas tab=8&child=38&doc_tab=stockage (et autres pages avec
   wrapper col-* a l'interieur de #div_main > .row). Le col-* Bootstrap
   a padding-x: 15px qui re-decale la card de 15px apres compensation
   #div_main.

   Fix : neutralise le padding du col-* direct child de .row, qui est
   elle-meme direct child de #div_main. Scope strict pour ne pas casser
   d'autres pages avec gutters intentionnels. */
#parametrage-content > #div_main > .row > [class*='col-'] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* #10285 — Cas tab=6 (Config organisation) : structure form-based avec
   .table-responsive.eb-config-organisation wrapper. Les cards (col-sm-6)
   sont decalees de +32px (parametrage-content padding 16 + col-sm-6
   padding 15 + 1 rounding).

   Fix : pull `.eb-config-organisation` left 16px pour aligner le wrapper
   avec les tabs (le col-sm-6 padding 15 reste pour les gutters
   intentionnels entre cards). */
#parametrage-content .form_submit > .table-responsive.eb-config-organisation {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
}

/* #10285 — Cas tab=6&child=25 (et autres pages avec col-* DIRECT child de
   #parametrage-content, sans .table-responsive ni #div_main intermediaire).
   Structure :
   #parametrage-content (padding 16)
     └── .col-sm-12 (padding 15) ← direct child
         └── .eb-bootstrap-table-wrap

   Cumul +32px decalage (16 padding parent + 15 padding col + ~1 rounding).

   Fix : pull le col-* direct child left de 16px (compenser parent padding)
   + neutralise sa propre padding 15px. */
#parametrage-content > [class*='col-'] {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* #10285 — Cas tab=9&child=34 (et autres pages SANS #parametrage-content,
   avec `.container-fluid.pl-3` direct child de #parametrage_tabs_content).
   Le `.pl-3` Bootstrap pousse le contenu de 16px (1rem).

   Fix : neutralise le padding-x sur `.container-fluid.pl-3` (et `.pr-3`)
   direct child de #parametrage_tabs_content. */
#parametrage_tabs_content > .container-fluid.pl-3,
#parametrage_tabs_content > .container-fluid.pr-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* #10285 — Cas tab=4&child=20 (Note de frais > Categories ?) : la
   `.col-sm-10` constraint la card a 10/12 cols (~83% width) avec centrage
   automatique -> card a x=398, vide de 136px de chaque cote, decale +136px
   vs tabs (x=261).

   Fix : etend la col-sm-10 a full width pour aligner la card avec les
   tabs (coherent avec les autres pages parametrage). Le parent
   `.table-responsive` est display:block (pas flex), donc flex props ne
   suffisent pas -> on force aussi `width: 100%` direct.

   Couvre les 2 cas : col-sm-10 direct child de .table-responsive OU
   indirect via une FORM (ex: cards dans un form de config). */
#parametrage-content > .table-responsive > .col-sm-10,
#parametrage-content > .table-responsive > form > .col-sm-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* #10285 — Cas history.php (et autres pages utilisant `#content >
   .table-responsive.pr-0`). Structure :

   #content (x=245)
     └── .table-responsive.pr-0
         └── .container-fluid (padding 12 default Bootstrap)
             └── .container-fluid.col-12.eb-bootstrap-table-wrap (padding 15)
                 └── .bootstrap-table > ... > table (x=272)

   Tabs sont a x=261, table a x=272 (+11px decalage). Cumul de 27px de
   paddings (12+15) du contenu vs offset des tabs (16).

   Fix : aligne le contenu sur les tabs via padding-x 16px sur l'outer
   container-fluid (= offset des tabs) + neutralisation du col-12 padding
   de l'inner wrap. Scope strict via `.table-responsive.pr-0`. */
#content > .table-responsive.pr-0 > .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
#content > .table-responsive.pr-0 .container-fluid.eb-bootstrap-table-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* #10285 — Stats container sur history.php (et autres pages avec
   `write_stats_containers_group()` dans #content) : le UL
   `.stats-container-new` herite `m-3` (margin 16px) + `width: calc(100% - 54px)`
   de stats-container.css + `text-align: -webkit-center` du #div_principale,
   qui le centrent au lieu de l'aligner a x=261 (= tabs).

   Fix : neutralise margin + width:calc + propage text-align:left depuis
   le parent container-fluid pour aligner le UL stats avec les tabs/table. */
#content > .table-responsive.pr-0 > .container-fluid {
    text-align: left !important;
}
#content > .table-responsive.pr-0 > .container-fluid > .stats-container-new {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* #10285 — Cas history.php avec `notwritehead=1` (vues embedded :
   `#content_histo_sms`, `#content_histo_mail`, etc.). Le contenu est
   direct child de #content sans wrapper `.table-responsive.pr-0` ni
   padding -> toolbar/table a x=245 (full content width) au lieu de x=261.

   Fix : add padding-x 16px au wrapper `#content_histo_*` pour aligner
   son contenu avec les tabs. */
#content > [id^='content_histo_'] {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* #10285 — Cas history.php?lccode=EM (et autres pages similaires) :
   `.eb-bootstrap-table-wrap` est DIRECT child de `.table-responsive.pr-0`
   (pas de .container-fluid outer comme sur lccode=C). Resultat : table
   a x=245 (toolbar et table direct sous wrap sans padding).

   Fix : add padding-x 16 au wrap pour aligner avec tabs. Override le
   rule precedent (padding 0) qui s'applique en descendant non-direct. */
#content > .table-responsive.pr-0 > .container-fluid.eb-bootstrap-table-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* #10285 — Cas history.php?lccode=BLOCK (et similaires) : sans
   `.table-responsive.pr-0` wrapper -- `.container-fluid` est DIRECT
   child de #content. Structure :

   #content (x=245)
     └── .container-fluid (x=245, padding 12)
         └── .container-fluid.col-12.eb-bootstrap-table-wrap (padding 15)
             └── ... table (x=272)

   Fix : padding-x 16 sur l'outer container-fluid + neutralise inner
   eb-bootstrap-table-wrap padding pour aligner avec les tabs. */
#content > .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
#content > .container-fluid > .container-fluid.eb-bootstrap-table-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* #10285 — Cas history.php?lccode=BLOCK&child=2 : card narrow centree
   (col-sm-8 = 8/12 cols = 67% width, ~272px de vide de chaque cote).
   Coherent avec le fix tab=4&child=20 : on etend la card a full width
   pour aligner avec les tabs.

   Scope `#content > .container-fluid > .card[class*='col-']` : ne match
   QUE les cards avec col-* class direct child de la container-fluid
   sous #content. */
#content > .container-fluid > .card[class*='col-'] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* #10285 — Cas documents.php (page Google Drive) : pas de tabs nav,
   structure direct sous #space-left :
     #space-left > #toolbar (x=245, no padding)
                  > .gdrive-container (x=245, padding 15 -> contenu x=260)

   Le toolbar (Affiner btn) est a x=245 mais les sections gdrive
   (Dossiers, Fichiers) sont a x=260. Decalage visuel 15px.

   Fix : add padding-x 15 au toolbar pour matcher gdrive-container.
   Scope strict via `body:has(.gdrive-container)` -> impacte UNIQUEMENT
   les pages avec gdrive (documents.php). */
body:has(.gdrive-container) #space-left > #toolbar {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* #10285 — documents.php : place la search bar (gdrive-search) a droite
   du toolbar. AVANT : `.filter-area` etait narrow (~634px, left-aligned)
   et la search etait a x=644 (milieu, juste apres les dropdowns).
   APRES : filter-area + filterAreaDiv etendues a full width + search
   pushed a droite via margin-left:auto.

   Scope strict via `body:has(.gdrive-container)`. */
body:has(.gdrive-container) #toolbar > .filter-area {
    width: 100% !important;
    flex: 1 1 100% !important;
}
body:has(.gdrive-container) #toolbar > .filter-area > .filterAreaDiv {
    width: 100% !important;
}
body:has(.gdrive-container) .filterAreaDiv > .gdrive-search-wrap {
    margin-left: auto !important;
}

/* #10285 — Page Modèles de messages (parametrage.php?tab=2&child=57)
   Le btn `Modèle` (dans `#toolbar_msg_template` -> `.bs-bars`) etait a
   gauche du toolbar alors que la search bar etait a droite (1292px de
   vide entre les 2). Cause : `.bs-bars.float-right` mais `.fixed-table-
   toolbar` est `display: flex` -> float ignore, ordre DOM utilise.

   Fix : flex order + margin-left:auto pour grouper search + btn a droite.
   Plus harmonisation taille btn = search input (40px).
   Scope via `:has(#message_template_table)` -> n'impacte QUE cette page. */
body:has(#message_template_table) .fixed-table-toolbar > .bs-bars {
    order: 99;
    float: none !important;
    margin-left: 6px !important;
}
body:has(#message_template_table) .fixed-table-toolbar > .search {
    order: 98;
    float: none !important;
    margin-left: auto !important;
}
body:has(#message_template_table) #toolbar_msg_template .btn {
    min-height: 40px;
    padding: 9px 16px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}

/* #10162 — Module Inventaire : col Stock a `.input-group.w-50` qui force
   le wrapper a 50% width de la cellule (~36px sur col Stock 95px). Combine
   avec `flex-wrap: wrap` Bootstrap default, les boutons `-` / `+` (rendus
   par PHP avec style='display:flex' quand user a permission 8891) se
   retrouvent empiles VERTICALEMENT au-dessus/dessous de l'input au lieu
   d'etre alignes horizontalement [-] [input] [+].

   Fix : `flex-wrap: nowrap` + width auto pour permettre les 3 elements
   sur la meme ligne. Hauteur uniforme 32px sur les 3 elements (input +
   2 boutons) pour visuel coherent. Scope strict via `#tableData`.

   `gap: 6px` + `margin: 0 !important` sur les btns pour neutraliser le
   `margin-left: -1px` que Bootstrap applique sur `.input-group > * + *`
   (overlap des bordures) qui rendait le gap asymetrique entre -/input
   et input/+ (2px vs -1px). */
#tableData .input-group:has(.champIncrementableTexte) {
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 90px;
    align-items: center;
    gap: 6px;
}
#tableData .input-group .champIncrementableTexte {
    min-width: 0;
    flex: 1 1 40px;
    text-align: center;
    height: 32px !important;
    min-height: 32px !important;  /* override `.form-control:not()... { min-height:38px }` */
    padding: 4px 6px !important;
    font-size: 13px;
    margin: 0 !important;  /* annule margin: 1px 0 1px -1px qui asymetrise le gap */
}
#tableData .input-group .champIncrementableMoins,
#tableData .input-group .champIncrementablePlus {
    flex: 0 0 auto;
    height: 32px;
    display: flex;
    align-items: center;
    margin: 0 !important;  /* annule margin 0 3px et margin-left:-1px de Bootstrap pour gap symetrique */
}
#tableData .input-group .champIncrementableMoins .btn,
#tableData .input-group .champIncrementablePlus .btn {
    height: 32px !important;
    width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Elargit aussi la col Stock pour qu'elle accueille input + 2 boutons
   sans overflow (95px → 130px min). */
#tableData th:nth-child(7),
#tableData td:nth-child(7) {
    min-width: 130px;
}

/* #10162 — Inventaire : toolbar (filtres + search bar) HORS du card.
   La regle globale `body.eb-has-topbar-v2 #div_tab` (dashboard-modern.css:8266)
   met tout le contenu dans un card. Pour Inventaire on veut juste la table
   dans le card, et le toolbar transparent au-dessus. Scope strict via :has(). */
body.eb-has-topbar-v2 #div_tab:has(#tableData) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
/* Toolbar (filtres + search) : transparent, hors card */
#div_tab:has(#tableData) .fixed-table-toolbar {
    background: transparent;
    padding: 8px 0 12px 0;
}
/* Card autour de la table seule */
#div_tab:has(#tableData) .fixed-table-container {
    background: var(--eb-surface, #ffffff);
    border: 1px solid var(--eb-border, #e2e8f0);
    border-radius: var(--eb-radius-lg, 16px) var(--eb-radius-lg, 16px) 0 0;
    box-shadow: var(--eb-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
    overflow: hidden;
}
/* Pagination collee au bas du card de la table */
#div_tab:has(#tableData) .fixed-table-pagination {
    background: var(--eb-surface, #ffffff);
    border: 1px solid var(--eb-border, #e2e8f0);
    border-top: none;
    border-radius: 0 0 16px 16px !important;
    box-shadow: var(--eb-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
    padding: 6px 10px;
    margin-top: 0;
}

/* #10162 — addons_monitoring.php : aligne stats-container-new avec la
   table en dessous. Tous les elements (#menu, stats, table-wrap) sont
   centres dans #space-left (qui a `text-align: -webkit-center`), mais
   .stats-container-new a `width: calc(100% - 54px)` (stats-container.css)
   tandis que la table-wrap utilise `padding: 0 15px`. Resultat : stats
   plus etroit que la table (1617 vs 1641 px) avec ~12px de decalage
   visible des deux cotes. Fix : forcer la meme largeur que la table-wrap.
   Scope strict via :has(> #addons_monitoring_stats) — id unique a cette page. */
#space-left:has(> #addons_monitoring_stats) > .stats-container-new {
    width: calc(100% - 30px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* #10162 — addons_additionnel.php?tab=5 (Type d'intervention) :
   les cards (Type d'activite, Statut, Categorie, Type) doivent matcher
   la largeur du tabs bar #menu en haut. #parametrage-content a
   `padding: 12px 16px 16px` qui retrecit le contenu de 16px gauche/droite.
   Plus les paddings/gutters des .container-fluid > .row > .col-12.
   Fix : zerouter paddings L/R sur #parametrage-content + chaine descendante.
   Scope strict via :has(#type_intervention_table) — table unique a la page. */
#parametrage-content:has(#type_intervention_table) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(#type_intervention_table) > .container-fluid#container,
#parametrage-content:has(#type_intervention_table) > .container-fluid#container > .row,
#parametrage-content:has(#type_intervention_table) > .container-fluid#container > .row > .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}
/* Le .col-12 imbrique (parent direct de la card "Type d'activite") aussi */
#parametrage-content:has(#type_intervention_table) .col-12 > .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Les col-xl-5/7/4 dans la row Statut/Type/Categorie : padding 0 pour
   aligner avec les bords gauche/droite de la row */
#parametrage-content:has(#type_intervention_table) .row > .col-xl-5,
#parametrage-content:has(#type_intervention_table) .row > .col-xl-7,
#parametrage-content:has(#type_intervention_table) .row > .col-xl-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* La nested .row (Statut/Type) — annule sa margin et padding L/R */
#parametrage-content:has(#type_intervention_table) .row > .row,
#parametrage-content:has(#type_intervention_table) .row .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* #10162 — Ordre visuel des 3 cards : Statut | Type | Categorie
   PHP genere : Statut (1) | Categorie (2) | Type (3) — on swap 2 et 3
   via flexbox order. */
#parametrage-content:has(#type_intervention_table) .row > .col-xl-4:nth-child(1) {
    order: 1;
}
#parametrage-content:has(#type_intervention_table) .row > .col-xl-4:nth-child(2) {
    order: 3; /* Categorie -> 3eme position */
}
#parametrage-content:has(#type_intervention_table) .row > .col-xl-4:nth-child(3) {
    order: 2; /* Type -> 2eme position */
}
/* Gap visible entre les 3 cards (Statut | Type | Categorie) */
#parametrage-content:has(#type_intervention_table) .row:has(> .col-xl-4) {
    gap: 12px;
}
/* Compense la largeur perdue par le gap pour rester aligne avec tabs */
#parametrage-content:has(#type_intervention_table) .row > .col-xl-4 {
    flex: 0 0 calc(33.3333% - 8px) !important;
    max-width: calc(33.3333% - 8px) !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=37 (API doc) :
   les cards de droite (Parametre, Utilisation API, etc.) doivent matcher
   la largeur du tabs bar a droite. Structure complexe avec multiples
   nested containers + col-xl-2 (menu absolute) + col-xl-10 (content).
   Fix : zerouter paddings/margins sur toute la chaine en scope.
   Scope strict via :has(#api-menu) - id unique a cette page. */
#parametrage-content:has(#api-menu) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(#api-menu) .container-fluid,
#parametrage-content:has(#api-menu) .row,
#parametrage-content:has(#api-menu) .row.justify-content-start > div:not(.col-xl-2):not(.mx-auto) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}
/* Le menu .col-xl-2 (REST API V2 + Parametre/Authentification/...) reste
   en bloc separe a gauche (position:absolute). Les cards de droite sont
   poussees vers la droite du menu (margin-left:295px) pour ne pas se
   chevaucher visuellement avec le menu. Cards alignees a droite avec tabs. */
#parametrage-content:has(#api-menu) .col-md-12.mx-auto.centre,
#parametrage-content:has(#api-menu) .col-md-12.col-lg-9.col-xl-10 {
    max-width: calc(100% - 295px) !important;
    flex: 0 0 calc(100% - 295px) !important;
    width: calc(100% - 295px) !important;
    margin-left: 295px !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* La filter (eb-tab-search-input) doit s'aligner avec le debut du tabs
   bar (L=262). Le tabs bar .mc-tabs-bar a padding:12px 6px 6px qui decale
   son contenu de 6px a gauche. On retire le padding-left pour aligner. */
#parametrage_tabs_content:has(#api-menu) .mc-tabs-bar {
    padding-left: 0 !important;
    border-left: 0 !important;
}
#parametrage_tabs_content:has(#api-menu) .mc-tabs-bar .eb-tab-search-container {
    padding-left: 0 !important;
    margin-left: 0 !important;
}
/* La filter doit avoir la meme largeur ET la meme apparence (card avec
   bg blanc + border + radius) que le card du menu (.col-xl-2 = 278px).
   L'icone search est dans un span transparent qui prenait 30px de visuel
   "vide" a gauche - on met le bg blanc sur le container entier. */
#parametrage_tabs_content:has(#api-menu) .mc-tabs-bar .eb-tab-search,
#parametrage_tabs_content:has(#api-menu) .mc-tabs-bar .eb-tab-search.input-group {
    width: 278px !important;
    max-width: 278px !important;
    flex: 0 0 278px !important;
    background: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    overflow: hidden;
}
/* L'input a l'interieur perd sa border pour ne pas doubler le visuel */
#parametrage_tabs_content:has(#api-menu) .mc-tabs-bar .eb-tab-search .eb-tab-search-input {
    border: 0 !important;
    background: transparent !important;
}
/* L'icone span devient transparent pour laisser le bg blanc du container */
#parametrage_tabs_content:has(#api-menu) .mc-tabs-bar .eb-tab-search .input-group-text {
    background: transparent !important;
    border: 0 !important;
}
/* Le menu block (col-xl-2) a padding:0 15px de Bootstrap qui indente
   le #api-menu (REST API V2 + items) de 15px vs le tabs bar. On retire
   le padding pour aligner #api-menu a L=262 (debut tabs). */
#parametrage-content:has(#api-menu) .col-md-12.col-lg-3.col-xl-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* L'api-menu lui-meme a mx-auto qui le centrerait. On force margin:0 a gauche. */
#parametrage-content #api-menu {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=30 (Cotisation) :
   Card Configuration alignee tabs bar. Scope :has(#cotisations). */
#parametrage-content:has(#cotisations) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(#cotisations) > #cotisations,
#parametrage-content:has(#cotisations) #cotisations .row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(#cotisations) #cotisations .row > .col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}
#parametrage-content:has(#cotisations) #cotisations .row {
    gap: 12px;
}

/* #10162 — parametrage.php?module=aide&tab=5&child=aide :
   2 cards (Rendez-vous en visio gauche + Habilitations du module droite)
   alignees pleine largeur tabs bar + gap visible.
   Scope strict via :has(.aide-module-wrapper). */
#parametrage-content:has(.aide-module-wrapper) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(.aide-module-wrapper) .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(.aide-module-wrapper) .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px;
}
#parametrage-content:has(.aide-module-wrapper) .row > .col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}

/* #10162 — edit_sirh : la cell BOUTON de la table Option d'affichage
   etait W=84 mais contient 3 boutons (visibility, edit, delete) qui ont
   besoin de ~120px. Le 3e bouton (trash) etait clippe par overflow:hidden
   du .fixed-table-container -> impossible de supprimer.
   Bootstrap-table utilise `table-layout: fixed` + inline `width: 84px` sur
   le th -> min-width ignore. Force width 130px en !important. */
#parametrage-content:has(.sirh-config-row) #table th:last-child,
#parametrage-content:has(.sirh-config-row) #table td:last-child {
    width: 130px !important;
    min-width: 130px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: nowrap !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=29 (edit_qrcode) :
   Cards (Personnel + Logistique) col-xl-6 alignees tabs.
   Scope strict via :has(.qrcode-config-row). */
#parametrage-content:has(.qrcode-config-row) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(.qrcode-config-row) > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(.qrcode-config-row) .qrcode-config-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px;
}
#parametrage-content:has(.qrcode-config-row) .qrcode-config-row > .col-xl-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=27 (Note de frais) :
   Cards (Validation/Motif a gauche + Type/Categorie/Plafond a droite)
   alignees tabs bar. Scope strict via :has(.eb-nf-config-row). */
#parametrage-content:has(.eb-nf-config-row) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(.eb-nf-config-row) > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(.eb-nf-config-row) .eb-nf-config-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px;
}
#parametrage-content:has(.eb-nf-config-row) .eb-nf-config-row > .col-xl-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=11 (Formation hub) :
   la carte (Diplome / Formation) etait decalee de 43px du tabs bar
   (gutters accumules : parametrage-content padding-x 16 +
   container-fluid padding-x 12 + col-12 padding-x 15 = 43px).
   On neutralise ces 3 paddings pour aligner la carte sur la barre
   d'onglets. Depuis a7cafe513c (hub fsub), Diplomes/FC/FI sont des
   sous-onglets mutuellement exclusifs : la carte est seule sur sa
   ligne et doit prendre toute la largeur (#11056), donc on ne
   contraint plus le col-12 a 50%. Scope strict via :has(.formation-hub). */
#parametrage-content:has(.formation-hub) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(.formation-hub) > .formation-hub > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(.formation-hub) .container-fluid > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#parametrage-content:has(.formation-hub) .container-fluid > .row > .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Override le margin-top:-16px du sub-tabs Diplomes/Formation qui faisait
   chevaucher la sub-tabs avec le tabs bar principal (overlap de 4px). */
#parametrage_tabs_content .formation-hub > .table-responsive.table-nav.table-tabs.sub-tabs:first-of-type {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
}
/* Aligner aussi le sub-tabs Diplomes + le card Stockage des diplomes
   sur la largeur des tabs (262-1899) - actuellement L=278 W=1605. */
#parametrage_tabs_content .formation-hub > .table-responsive.table-nav.table-tabs.sub-tabs:first-of-type,
#parametrage_tabs_content .formation-hub > .d-flex.flex-row.m-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* La carte interne .eb-diplome-storage-card avait margin: 0 16px 16px
   qui creait un offset de 16px du bord gauche. Aligner avec tabs (L=262). */
#parametrage_tabs_content .formation-hub .eb-diplome-storage-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Le canvas du certificat a width="841.89px" (A4 landscape) hardcoded.
   Quand le card fait 813px, ca overflow. Force max-width: 100% +
   height: auto pour scaler le canvas visuellement (les coords internes
   du canvas restent les memes, seul l'affichage est resize). On contraint
   aussi le wrapper #canvas_div qui sinon prend la taille du canvas. */
#parametrage-content:has(.formation-hub) #canvas_div {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
#parametrage-content:has(.formation-hub) canvas.border {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* #10162 — entraide module : le btn +Type/+Question est dans
   .card-title.w-100 (flex), puis .eb-autosave-chip vient APRES dans le
   card-header. Resultat : btn coince au milieu, chip "Enregistre" a
   droite. On reverse l'ordre visuel via flex order pour mettre le btn
   au bout, et on pousse l'autosave-chip a gauche du btn. */
#parametrage-content:has(.entraide-module-wrapper) .card-header {
    align-items: center;
}
#parametrage-content:has(.entraide-module-wrapper) .card-header .card-title {
    order: 1;
    flex: 1 1 auto;
}
#parametrage-content:has(.entraide-module-wrapper) .card-header .eb-autosave-chip {
    order: 2;
    margin-right: 8px;
}
#parametrage-content:has(.entraide-module-wrapper) .card-header .card-title .btn,
#parametrage-content:has(.entraide-module-wrapper) .card-header .card-title .btn-success,
#parametrage-content:has(.entraide-module-wrapper) .card-header .card-title .float-right {
    float: none !important;
    margin-left: auto !important;
    order: 3;
    position: relative;
}
/* Sortir le btn de card-title et le mettre en absolute a droite du card-header */
#parametrage-content:has(.entraide-module-wrapper) .card-header {
    position: relative;
}
#parametrage-content:has(.entraide-module-wrapper) .card-header .card-title > .btn,
#parametrage-content:has(.entraide-module-wrapper) .card-header .card-title > .btn-success {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* #10162 — parametrage.php?module=entraide&tab=5&child=entraide :
   Cards (Types de tickets + FAQ + Habilitations) col-md-6 alignees tabs.
   Scope strict via :has(.entraide-module-wrapper). */
#parametrage-content:has(.entraide-module-wrapper) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(.entraide-module-wrapper) .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(.entraide-module-wrapper) .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px;
}
#parametrage-content:has(.entraide-module-wrapper) .row > .col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=28 (edit_sirh) :
   2 cards (Duree de travail + Option d'affichage) col-xl-6 alignees tabs.
   Scope strict via :has(.sirh-config-row). */
#parametrage-content:has(.sirh-config-row) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(.sirh-config-row) > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(.sirh-config-row) .sirh-config-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px;
}
#parametrage-content:has(.sirh-config-row) .sirh-config-row > .col-xl-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}

/* #10162 — parametrage.php?module=showhoraire&tab=5&child=showhoraire :
   2 cards (Horaire + Affichage) col-md-6 alignees tabs.
   Structure : .row.showhoraire-row (sans .container-fluid).
   Scope strict via :has(.showhoraire-row). */
#parametrage-content:has(.showhoraire-row) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(.showhoraire-row) .showhoraire-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px;
}
#parametrage-content:has(.showhoraire-row) .showhoraire-row > .col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=12 (CRM/element_facturable) :
   2 colonnes (col-xl-6) avec multiples cards stackees, alignees tabs bar.
   Structure : .container-fluid > .row.g-3 > 2 col-xl-6.
   Scope strict via :has(#table_client). */
#parametrage-content:has(#table_client) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(#table_client) > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(#table_client) > .container-fluid > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px;
}
#parametrage-content:has(#table_client) > .container-fluid > .row > .col-xl-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=47 (Astreinte role) :
   Card unique "Role d'astreinte" doit s'aligner pleine largeur avec
   le tabs bar. La chaine .container-fluid > .row.justify-content-center
   > div.'' accumule des paddings/margins qui retrecissent la card.
   Scope strict via :has(#astreinte_role_table) - id unique a cette page. */
#parametrage-content:has(#astreinte_role_table) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(#astreinte_role_table) > .container-fluid,
#parametrage-content:has(#astreinte_role_table) .row.justify-content-center {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(#astreinte_role_table) .row.justify-content-center > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* #10162 — parametrage.php?module=appmobile&tab=5&child=appmobile :
   2 cards (Utilisateur a gauche + Configuration/Activite/Plateforme a droite
   stackees) doivent etre alignees avec la tabs bar et de meme largeur.
   Structure : .container-fluid.p-2 > .row > col-lg-6 (chacun).
   Scope strict via :has(#table_util_app_mobile) - id unique a cette page. */
#parametrage-content:has(#table_util_app_mobile) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(#table_util_app_mobile) > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(#table_util_app_mobile) > .container-fluid > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px;
}
#parametrage-content:has(#table_util_app_mobile) > .container-fluid > .row > .col-lg-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=39 (Agrement) :
   2 cards (Categorie + Agrement) meme taille col-xl-6 + gap + alignees
   avec tabs bar. Structure : container-fluid#container > 2 col-xl-6
   (PAS de nested row comme type_intervention).
   Scope strict via :has(#table_agrement) - id unique a cette page. */
#parametrage-content:has(#table_agrement) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(#table_agrement) > .container-fluid#container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    gap: 12px;
}
#parametrage-content:has(#table_agrement) > .container-fluid#container > .col-xl-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}

/* #10162 — parametrage.php?tab=1&child=18 : 2 cards (Statut + Raison
   d'inactivite) cote a cote sur la meme ligne au lieu de stackees.
   Scope strict via :has() — n'affecte que cette page precise. */
#parametrage-content:has(> #statut-card):has(> #raison-card) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}
#parametrage-content:has(> #statut-card):has(> #raison-card) > #statut-card,
#parametrage-content:has(> #statut-card):has(> #raison-card) > #raison-card {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
    min-width: 0;
    margin-top: 16px !important;
}

/* #10162 — parametrage.php?module=satisfaction_survey&tab=5 :
   Cards (Modeles + Selectionnez un modele) alignees au tabs bar.
   Avant : .satsv-settings.p-3 padding -> L=278 W=1609 (decale 16px)
   et la row + col-lg-4/col-lg-8 ajoutaient des gutters. Scope strict
   via .satsv-settings (classe unique au module). */
#parametrage-content:has(> .satsv-settings) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(> .satsv-settings) > .satsv-settings {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(> .satsv-settings) > .satsv-settings > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px;
}
#parametrage-content:has(> .satsv-settings) > .satsv-settings > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* col-lg-4 (Modeles) -> 1/3, col-lg-8 (preview) -> 2/3, gap 12 = 6+6 */
#parametrage-content:has(> .satsv-settings) > .satsv-settings > .row > .col-lg-4 {
    flex: 0 0 calc(33.3333% - 8px) !important;
    max-width: calc(33.3333% - 8px) !important;
}
#parametrage-content:has(> .satsv-settings) > .satsv-settings > .row > .col-lg-8 {
    flex: 0 0 calc(66.6667% - 4px) !important;
    max-width: calc(66.6667% - 4px) !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=53 (Renfort) :
   Card Renfort col-6 alignee tabs bar.
   Scope strict via :has(.renfort-config-row). */
#parametrage-content:has(.renfort-config-row) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(.renfort-config-row) > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(.renfort-config-row) .renfort-config-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#parametrage-content:has(.renfort-config-row) .renfort-config-row > .col-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=51 (edit_sms) :
   Cards (SMS + Historique sms) col-12 alignees tabs bar.
   Scope strict via :has(.sms-config-wrapper). */
#parametrage-content:has(.sms-config-wrapper) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(.sms-config-wrapper) > .sms-config-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
#parametrage-content:has(.sms-config-wrapper) > .sms-config-wrapper > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#parametrage-content:has(.sms-config-wrapper) > .sms-config-wrapper > .row > .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* #10162 — addons_additionnel.php?tab=5&child=40 (status_victime) :
   PHP restructure pour wrapper les 2 col-sm-6 dans une seule row.
   Scope strict via :has(.victime-config-row). */
#parametrage-content:has(.victime-config-row) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#parametrage-content:has(.victime-config-row) > .victime-config-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px;
}
#parametrage-content:has(.victime-config-row) > .victime-config-row > .container-fluid.col-sm-6 {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}
#parametrage-content:has(.victime-config-row) > .victime-config-row > .container-fluid.col-sm-6 > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* #10162 — evenement_display.php tabs : stats cards (Tous/Non regule/En cours
   sur Victime, equivalents sur autres tabs) inset de 39px L/R via m-3 + px-3
   sur le <ul.stats-container-new> (genere par write_stats_containers_group,
   fonctions.php L12710). Resultat : cards plus etroites que le toolbar
   bootstrap-table en dessous (L=299 R=1862 vs toolbar L=260 R=1901).
   Scope strict #evenement_display_tabs_content pour aligner stats UL avec
   le toolbar (L=260 R=1901) sans toucher aux autres pages qui utilisent
   stats-container-new (ex: dashboard, devis-facture, recrutement). */
#evenement_display_tabs_content .container-fluid.noprint:has(> .stats-container-new) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#evenement_display_tabs_content .stats-container-new {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* #10162 — qualifications.php : le wrapper `.stats-container-diviser w-100`
   a `margin: 16px` chaque cote (dashboard-modern.css), ce qui le fait
   deborder de 32px par rapport a son parent `.space-left` (sans padding).
   Resultat : cards stats au L=261 R=1936 -> overflow viewport (1920).

   Fix : remove margin sur le diviser ET ajout padding asymetrique pour
   aligner cards avec le toolbar de la table en dessous (L=267 R=1908) :
   - padding-left:22px (compense .div-decal-left 10px + .container-fluid 12px)
   - padding-right:12px (compense .container-fluid 12px du toolbar)
   box-sizing: border-box pour que padding reste interne sans deborder.

   Scope strict `body:has(#qualifications_stats)` -> ne touche pas aux
   autres pages utilisant `.stats-container-diviser`. */
body:has(#qualifications_stats) .stats-container-diviser {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 22px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}
body:has(#qualifications_stats) .stats-container-diviser .stats-container-new {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* #10162 — gmaps_evenement.php (et autres pages avec #map_canvas) : le wrapper
   .gps.gps2 etait position:absolute top:58 left:200 (main.css L2718+L2725),
   ce qui faisait flotter les filtres au milieu (L=445-895) au-dessus de la
   carte, entre les controls Google natifs (Map/Satellite a gauche L=255-428)
   et les controls custom (Fond/Google/IGN/J1/Sat a droite L=1721-1900).
   Espace gaspille (~826px) entre filtres et controls droite + superposition
   visuelle confuse.

   Fix : sortir .gps.gps2 de position:absolute, en faire une top bar
   horizontale au-dessus de la carte. Le map_canvas descend de ~50px mais
   le layout est nettement plus clair (filtres separes des controls map).
   #eventDiv reste en position:fixed (defini ailleurs) donc le panel
   evenements ne bouge pas. Scope `body:has(#map_canvas)` desktop only. */
@media (min-width: 992px) {
    /* position:relative + z-index 10 cree un stacking context plus eleve
       que le z-index:1 du #eventDiv (position:fixed). Sans ca, le panel
       evenements (position:fixed) passait par-dessus la 1ere dropdown
       filtre car position:fixed cree son propre stacking context. */
    body:has(#map_canvas) .gps.gps2 {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        background: var(--bkg-color1, #fff) !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        z-index: 10 !important;
        flex-wrap: wrap !important;
        border-bottom: 1px solid var(--bkg-color20, #ddd) !important;
        box-sizing: border-box !important;
    }
    body:has(#map_canvas) .gps.gps2 .gmaps-filter-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    /* #10162 — eventDiv (panel evenements) `position:fixed margin-top:60px`
       (defini dans le <style> inline de gmaps_evenement.php). Avec la nouvelle
       top bar le panel demarrait au-dessus des filtres.
       Fix : top:140px pour ancrer eventDiv en-dessous du breadcrumb (~60px)
       + top bar filtres (~60px) avec un peu de marge. Plus robuste que
       margin-top car position:fixed avec top: est relatif au viewport
       independamment du flow naturel. */
    /* gmaps_evenement.php : top bar `.gps.gps2` ~T=65-124, eventDiv a top:140 */
    body:has(#map_canvas):has(.gmaps-filter-row) #eventDiv {
        top: 140px !important;
        margin-top: 0 !important;
    }
    /* gmaps_personnel.php : top bar `#myGps1` ~T=143-202 (filtres apparaissent
       plus bas a cause de .eb-quickadd-title "Adresse 716" + breadcrumb).
       eventDiv pousse a top:210 pour passer sous le top bar. */
    body:has(#map_canvas):has(#myGps1) #eventDiv {
        top: 210px !important;
        margin-top: 0 !important;
    }

    /* #10162 — gmaps_personnel.php : le wrapper `.myGps` etait
       position:absolute margin-left:190 top:50 left:206 width:70%
       (defini dans <style> inline gmaps_personnel.php L118+L127), ce qui
       le faisait flotter en travers du panel personnel #eventDiv
       (L=230-530). Resultat : 1ere dropdown filtre "Centre Francais"
       hidden behind le panel.
       Fix : sortir .myGps d'absolute, en faire une top bar comme .gps.gps2. */
    body:has(#map_canvas) .myGps {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        background: var(--bkg-color1, #fff) !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        z-index: 10 !important;
        flex-wrap: wrap !important;
        border-bottom: 1px solid var(--bkg-color20, #ddd) !important;
        box-sizing: border-box !important;
    }
    body:has(#map_canvas) #myGps1 {
        top: auto !important;
        left: auto !important;
        margin-top: 0 !important;
    }

    /* #10162 — interventions.php?tab=2 (sitacSupervisor.php) : les filtres
       etaient centres (L=836-1319) au lieu d'etre alignes a gauche. Cause :
       `#toolbar { margin: auto }` (main.css L8431) centre via auto margins
       (576px chaque cote). Scope strict via `.eb-interventions-filter-panel`
       (unique a cette page) -> override margin pour aligner a gauche. */
    .eb-interventions-filter-panel #toolbar {
        margin: 0 !important;
    }

    /* #10162 — upd_section.php : alignement vertical des 3 sections
       (Tabs / Stats / Toolbar+Table) sur la meme L/R.
       Mesures avant fix :
       - Toolbar + Table : L=257 R=1916 (reference)
       - Tabs `.mc-tabs-bar#menu` : L=261 R=1900 (margin 16px chaque cote)
       - Stats `.stats-container-new` : L=284 R=1889 (m-3 + px-3 = 32px insets)
       Scope strict via `body:has(#upd_section_tabs)`. */
    /* Alignement symetrique : tous a L=257 R=1904 (~17px de chaque cote du
       sidebar/viewport edge). Avant le fix, R variait entre 1889 et 1916
       selon la section -> asymetrique. */
    body:has(#upd_section_tabs) #menu.mc-tabs-bar {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
    body:has(#upd_section_tabs) #export > .container-fluid > .stats-container-new {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    body:has(#upd_section_tabs) #secHero {
        width: auto !important;
    }
    /* Container-fluid parent du toolbar/table avait pr-0 (padding-right:0)
       ce qui poussait le table jusqu'au bord. Restore 12px pour symetrie. */
    body:has(#upd_section_tabs) .container-fluid.pr-0 {
        padding-right: 12px !important;
    }
    /* Sur les sous-tabs sans stats (Habilitation, Activite, etc.), le
       toolbar/table est dans `.container-fluid.col-12.eb-bootstrap-table-wrap`
       avec padding 0 15px qui le decale a L=272 R=1889 (au lieu de
       L=257 R=1904 du target). Override pour aligner avec tabs/header. */
    body:has(#upd_section_tabs) .container-fluid.col-12.eb-bootstrap-table-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Sur tab=21 (Historique), le toolbar/table est dans une structure
       differente avec `.container-fluid.px-0` + `.div-decal-left.px-0` qui
       supprime tout padding -> toolbar deborde a L=245 R=1920 (full width).
       Restore 12px chaque cote sur le container outer-most uniquement
       (.div-decal-left) pour aligner avec header/tabs L=257 R=1908.
       Ne pas appliquer a .container-fluid.px-0 enfant car cumulerait. */
    body:has(#upd_section_tabs) .div-decal-left.px-0 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* #10162 — upd_personnel.php?tab=4 (Activite) : 2 icones (calendar +
       file-excel) etaient empilees verticalement dans `.search > .pt-1`
       au lieu d'etre horizontalement a cote du search input.
       Cause : `.pt-1` div parent etait `display: block` -> ses 2 boutons
       stack vertical. Le `.search` etait flex mais pas son enfant.
       Fix : forcer `.pt-1` en flex row + agrandir `.search` pour fit. */
    .fixed-table-toolbar > .search:has(> .pt-1 > a.btn) {
        width: 340px !important;
        max-width: 340px !important;
    }
    .fixed-table-toolbar > .search > .pt-1 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    .fixed-table-toolbar > .search > .pt-1 > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 6px 10px !important;
    }

    /* #10162 — upd_personnel.php : meme alignement que upd_section.php
       (tabs margin 12px chaque cote au lieu de 16px). Specificite augmentee
       via `html body.eb-has-topbar-v2` pour battre la regle existante. */
    html body.eb-has-topbar-v2:has([id^="upd_personnel_tab_"]) #menu.mc-tabs-bar {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    /* #10251 — upd_personnel.php?tab=12 (Duree de travail) : le contenu de
       l'embed (.eb-horaires-embed) sortait flush a L=#space-left edge alors
       que les tabs au-dessus avaient margin 12px chaque cote -> alignement
       casse :
       - Week/year selectors a L=245 (5px a gauche des tabs)
       - Stats container a L=272 (15px a droite des tabs : m-3 + col padding)
       - Card Pointage a L=260 (3px a droite des tabs)
       Fix : padding 12px chaque cote sur le wrapper `.eb-horaires-embed` +
       kill margins/paddings parasites des containers internes (stats m-3,
       row/col Bootstrap padding) pour que tout s'aligne au strip tabs
       (L=257 R=1904). */
    body.eb-has-topbar-v2:has([id^="upd_personnel_tab_"]) .eb-horaires-embed {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    body.eb-has-topbar-v2:has([id^="upd_personnel_tab_"]) .eb-horaires-embed .stats-container-new {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    body.eb-has-topbar-v2:has([id^="upd_personnel_tab_"]) .eb-horaires-pointage-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.eb-has-topbar-v2:has([id^="upd_personnel_tab_"]) .eb-horaires-pointage-shell > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.eb-has-topbar-v2:has([id^="upd_personnel_tab_"]) .eb-horaires-pointage-shell > .row > .col-sm-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* #10162 — upd_personnel.php?tab=18 (Absence) et autres tables avec boutons
       additionnels dans `.search.btn-group` : le container avait `width: 240px`
       (default bootstrap-table) mais contenait input + boutons (Parametrage,
       Absence/Ajouter) qui depassaient le viewport. Les 2 boutons etaient
       coupes/invisibles a droite.
       Fix : auto-width + supprimer max-width pour que le container suive son
       contenu. Scope strict via `:has(> button.btn)` pour ne pas affecter les
       autres tables qui n'ont qu'un input. */
    .fixed-table-toolbar > .float-right.search.btn-group:has(> button.btn) {
        width: auto !important;
        max-width: none !important;
        min-width: 240px !important;
    }

    /* #10162 — upd_personnel.php?tab=6 (Document) : la card "Aucun document"
       (`.gdrive-empty` de fonctions_documents_browser.php) etait un simple
       texte centre + icone pliee a 30% opacity, design pauvre comparativement
       aux autres empty states modernes (.no-content2, .no-content3) qui ont
       card blanche + cercle bleu autour de l'icone + titre 22px.
       Fix : restyler `.gdrive-empty` sur le pattern modern empty state
       (V2 topbar seulement). */
    /* #10407 — Ne plus forcer display:flex !important : si on a au moins
       1 fichier (doc auto comme Bilan activite), le JS met le inline
       style="display:none" mais le !important precedent l ecrasait, ce qui
       affichait le gros bloc "Aucun document" en dessous d un fichier
       deja present. On scope la regle aux elements visibles uniquement.
       Quand le JS l'affiche via $.show(), il met style="" donc le selecteur
       :not([style*="display: none"]) le matche. */
    body.eb-has-topbar-v2 .gdrive-empty:not([style*="display: none"]):not([style*="display:none"]) {
        margin: 32px auto !important;
        padding: 48px 24px !important;
        max-width: 520px !important;
        background: var(--eb-surface, #ffffff) !important;
        border: 1px solid var(--eb-border, #e2e8f0) !important;
        border-radius: var(--eb-radius, 12px) !important;
        box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(15,23,42,0.04)) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        color: var(--eb-text, #0f172a) !important;
    }
    body.eb-has-topbar-v2 .gdrive-empty > i.fa-folder-open,
    body.eb-has-topbar-v2 .gdrive-empty > i[class*="folder"] {
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto 20px !important;
        background-color: rgba(59, 130, 246, 0.10) !important;
        border-radius: 50% !important;
        color: #3b82f6 !important;
        font-size: 48px !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    body.eb-has-topbar-v2 .gdrive-empty > div {
        font-size: 22px !important;
        font-weight: 600 !important;
        color: var(--eb-text, #0f172a) !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        width: auto !important;
    }
    /* Secondary text injecte via ::after pour matcher le pattern
       .no-content2 (titre + sous-titre gris). Le HTML legacy n'a que
       le titre, donc on ajoute le sous-titre purement en CSS. */
    body.eb-has-topbar-v2 .gdrive-empty > div::after {
        content: 'Nous n\'avons pas trouvé de document';
        display: block;
        font-size: 14px;
        font-weight: 400;
        color: var(--eb-text-secondary, #64748b);
        margin-top: 8px;
        line-height: 1.5;
    }

    /* #10209 — addons_additionnel.php / parametrage.php : les 2 cards
       (Formulaire + Integration) etaient inset de 31px par rapport au strip
       tabs au-dessus (tabs L=262 R=1899, cards L=293 R=1868). Cause :
       `#parametrage-content` avait `padding:16px` + `.col-sm-6` avait
       `padding:15px` externes.
       Fix : kill paddings externes du container et des cols pour aligner
       les bords des cards avec les bords des tabs, tout en gardant le
       gap 30px (15px chaque cote) entre les 2 cards. */
    #parametrage-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #parametrage-content > .container-fluid > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #parametrage-content > .container-fluid > .row > .col-sm-6:nth-of-type(1) {
        padding-left: 0 !important;
        padding-right: 15px !important;
    }
    #parametrage-content > .container-fluid > .row > .col-sm-6:nth-of-type(2) {
        padding-left: 15px !important;
        padding-right: 0 !important;
    }

    /* #10251 — child=35 (Badge) : meme probleme d'alignement mais structure
       differente : `.d-flex.container-fluid` direct child `.col-sm-6`
       (pas de `.row` intermediaire). Tabs L=262 R=1899, cards L=293 R=1868
       (31px gap chaque cote). Fix : kill paddings externes du
       `#parametrage-content` (override dashboard-modern.css ligne 10716 qui
       remet `padding:12px 16px 16px !important` -> specificite augmentee
       via `body.eb-has-topbar-v2`), du `.d-flex.container-fluid` ET des
       cols (nth-of-type) sur cette variante de structure tout en gardant
       le 30px gap inter-cards. */
    body.eb-has-topbar-v2 #parametrage-content:has(> .d-flex.container-fluid > .col-sm-6) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.eb-has-topbar-v2 #parametrage-content > .d-flex.container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Note : selecteur `.col-sm-6 ~ .col-sm-6` plutot que `:nth-of-type(2)`
       car certaines d-flex.container-fluid ont une `.modal.noprint`
       intercalee entre les 2 cols, ce qui decale les nth-of-type DIV. */
    body.eb-has-topbar-v2 #parametrage-content > .d-flex.container-fluid > .col-sm-6:first-of-type {
        padding-left: 0 !important;
        padding-right: 15px !important;
    }
    body.eb-has-topbar-v2 #parametrage-content > .d-flex.container-fluid > .col-sm-6 ~ .col-sm-6 {
        padding-left: 15px !important;
        padding-right: 0 !important;
    }

    /* #10251 — child=14 (Grade) : stats cards + bootstrap-table etaient
       inset par rapport aux tabs. Tabs L=262 R=1899 ; #parametrage-content
       a `padding:16px` (dashboard-modern.css:10716) -> contenu L=278
       R=1883 ; en plus `.stats-container-new.m-3` ajoute margin 16px
       -> stats L=305 R=1856 (43px d'inset chaque cote).
       Fix : kill paddings/margins externes pour aligner le `bootstrap-table`
       wrap + stats avec les bords des tabs. Scope strict via
       `:has(> .container-fluid .eb-bootstrap-table-wrap)` qui matche
       les pages parametrage avec bootstrap-table direct enfant (pas
       les variantes 2-cols comme child=27). */
    body.eb-has-topbar-v2 #parametrage-content:has(> .container-fluid .eb-bootstrap-table-wrap) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.eb-has-topbar-v2 #parametrage-content:has(> .container-fluid .eb-bootstrap-table-wrap) > .container-fluid > .stats-container-new {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;  /* annule `stats-container.css:230 { width: calc(100% - 54px) !important }` qui centrait le UL avec 27px de jeu chaque cote */
        max-width: 100% !important;
    }

    /* #10225 — edit_cotisation.php (child=30) : la card Graphique est dans
       un `.col-sm-12` avec padding Bootstrap default (15px chaque cote)
       -> card a L=277 R=1884 au lieu de L=262 R=1899 (tabs). Les 2 cards
       en dessous (Configuration / Tarif) sont dans des `.col-md-6` sans
       padding et sont bien alignees.
       Structure DOM observee :
         #parametrage-content > #cotisations.container-fluid > #formCoti FORM
            > .row.px-0 > .col-sm-12 (padding 15px) > .card.graycarddefault (Graphique)
       Selecteur : tout .col-sm-12 dans #parametrage-content (cible le pattern
       Bootstrap col par defaut, scope strict via parametrage-content). */
    body.eb-has-topbar-v2 #parametrage-content .col-sm-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* #10225 — edit_cotisation.php boutons Période (Mensuel/Annuel) :
       le `style="border-radius: ..." !important` etait inline (interdit par
       convention "pas de CSS inline"). Externalise ici avec le selecteur
       `.eb-period-toggle` ajoute au btn-group. Les 2 boutons internes
       gerent leurs radius gauche/droite via :first-child / :last-child. */
    .eb-period-toggle .btn:first-child {
        border-radius: 5px 0 0 5px !important;
    }
    .eb-period-toggle .btn:last-child {
        border-radius: 0 5px 5px 0 !important;
    }

    /* #10225 — upd_personnel.php tab=8 (Cotisation perso) : remplace 4 inline
       styles + 1 bloc <style> par des classes scope `.eb-coti-tab*` :
       - `.eb-coti-tab` : portee des regles cotisation (selector parent)
       - `.eb-coti-tab td` : remplace `<style>td{font-weight:unset!important}</style>`
       - `.eb-coti-tab-actions` : top toolbar (padding-right + margin-bottom)
       - `.eb-coti-yearpicker` : year picker wrapper (float + margin + bg + radius)
       - `.eb-coti-multipay-menu` : dropdown menu Reglement (margin-top) */
    .eb-coti-tab td {
        font-weight: unset !important;
    }
    /* Carte « Cotisation » (tab=8) : le formulaire (Tarif/Montant/Type paiement/
       Observation) debordait de la carte sur la droite et etait rogne par
       `.card-body{overflow-x:hidden}`. Cause : `.card .newTableAll` impose
       `table-layout:auto !important`, donc les boutons selectpicker (texte en
       nowrap, ex. « Tarif normal - 0,42 € / mois ») etiraient le tableau au-dela
       de 100%. On force ici un layout fixe + des controles bornes a la cellule. */
    body.eb-has-topbar-v2 .eb-coti-tab .eb-coti-form-table.newTableAll {
        table-layout: fixed !important;
        width: 100% !important;
    }
    body.eb-has-topbar-v2 .eb-coti-tab .eb-coti-form-table.newTableAll td:first-child {
        width: 130px;
    }
    body.eb-has-topbar-v2 .eb-coti-tab .eb-coti-form-table.newTableAll td {
        overflow: hidden;
    }
    body.eb-has-topbar-v2 .eb-coti-tab .eb-coti-form-table.newTableAll .bootstrap-select,
    body.eb-has-topbar-v2 .eb-coti-tab .eb-coti-form-table.newTableAll .dropdown-toggle,
    body.eb-has-topbar-v2 .eb-coti-tab .eb-coti-form-table.newTableAll select,
    body.eb-has-topbar-v2 .eb-coti-tab .eb-coti-form-table.newTableAll textarea {
        max-width: 100% !important;
    }
    /* Le libelle du selectpicker est tronque proprement (…) au lieu de pousser
       la largeur du bouton. */
    body.eb-has-topbar-v2 .eb-coti-tab .eb-coti-form-table.newTableAll .filter-option-inner-inner {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .eb-coti-tab-actions {
        padding-right: 25px !important;
        margin-bottom: 5px;
    }
    .eb-coti-yearpicker {
        /* .eb-coti-tab-actions est un conteneur flex => `float` est ignore et le
           picker retombait au milieu (entre « Paiement unique » et « Reglement »).
           `order:-1` le place en premier (a gauche) et `margin-right:auto` repousse
           les boutons de paiement a droite. */
        order: -1;
        margin-right: auto;
        margin-left: 0;
        background-color: #fff;
        border-radius: 5px;
    }
    .eb-coti-yearpicker .form-control {
        background-color: #fff;
        border-radius: 5px;
    }
    .eb-coti-multipay-menu {
        margin-top: 35px !important;
    }
    /* #10225 — alignement cards dans tab=8 (Mon solde + Comptabilité) avec
       les tabs du dessus. Les cards etaient inset 15px chaque cote a cause
       du padding Bootstrap default sur `.col-xl-4` / `.col-xl-8` qui ne sont
       pas necessaire dans ce contexte. Scope strict via `:has(> .row > .col-xl-4#filtrePlafond)`
       qui matche uniquement la row de tab=8 cotisation. */
    body.eb-has-topbar-v2 .container-fluid:has(> .row > #filtrePlafond) > .row > .col-xl-4,
    body.eb-has-topbar-v2 .container-fluid:has(> .row > #filtrePlafond) > .row > .col-xl-8 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Gap 30px (15+15) entre les 2 cards (Mon solde a gauche / Compta a droite) */
    body.eb-has-topbar-v2 .container-fluid:has(> .row > #filtrePlafond) > .row > #filtrePlafond {
        padding-right: 15px !important;
    }
    body.eb-has-topbar-v2 .container-fluid:has(> .row > #filtrePlafond) > .row > .col-xl-8 {
        padding-left: 15px !important;
    }

    /* #10209 — module_page.php (toutes pages module) : la table + toolbar
       extensaient L=245 R=1920 (px-0 sur .div-decal-left) alors que les
       tabs au-dessus etaient inset a L=261 R=1904 (16px de chaque cote).
       Fix : padding 16px sur le .div-decal-left.px-0 pour aligner le
       contenu du table avec les tabs. Scope strict via body.eb-module-page
       (classe ajoutee par module_page.php). */
    body.eb-module-page .div-decal-left.px-0 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* #10209 — module_page.php pages dashboard (sans .div-decal-left wrapper) :
       le contenu (`.eb-kpi-row`, charts row, etc.) sortait directement dans
       `#space-left` sans padding -> cards touchaient L=245 R=1920 (viewport
       edges). Fix : padding 16px sur `#space-left` quand pas de
       `.div-decal-left` (pour ne pas double-padder les pages tables qui ont
       deja leur fix). Topbar `position:fixed` n'est pas affecte. */
    body.eb-module-page #space-left:not(:has(.div-decal-left)) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* #10209 — sur les pages module sans `.div-decal-left` (ex: showRelanceList
       qui a tabs + stats + table directement dans #space-left), `#menu.mc-tabs-bar`
       a un margin 16px chaque cote qui se cumule avec le padding 16px du fix
       precedent sur #space-left -> tabs L=277 alors que le toolbar/table juste
       en dessous etait L=261. Fix : kill le margin du mc-tabs-bar quand c'est
       un enfant direct de #space-left (donc deja padde par le fix precedent). */
    body.eb-module-page #space-left > #menu.mc-tabs-bar {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* #10209 — sur les pages module_page.php sans .div-decal-left (ex:
       showRelanceList), aligner tabs/stats/toolbar/table au meme L/R que les
       tabs (L=261 R=1904, = 16px chaque cote de #space-left padde par le fix
       precedent).
       Probleme : plusieurs containers entre #space-left et le contenu ajoutent
       paddings/margins parasites :
       - `.fixed-table-toolbar` : pL=16 (default), pR=0 (override
         dashboard-modern.css ligne 7579 pour alignement avec cards)
       - `.fixed-table-toolbar > .container-fluid` : pL=12 pR=12
       - `.container-fluid.col-12.eb-bootstrap-table-wrap` : pL=15 pR=15
       - `.stats-container-new` : mL=16 mR=16 (m-3 Bootstrap)
       -> resultat : stats/table decales ~38-43px par rapport aux tabs.
       Fix : kill ces paddings/margins parasites sur les pages module pour que
       tout s'aligne avec tabs (L=261 R=1904). Specificite augmentee via
       `html body.eb-has-topbar-v2.eb-module-page` pour battre les rules de
       dashboard-modern.css (charge apres main.css). Stats LI : flex 1 1 0
       pour qu'ils stretchent et remplissent la largeur dispo. */
    html body.eb-has-topbar-v2.eb-module-page .fixed-table-toolbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html body.eb-has-topbar-v2.eb-module-page .fixed-table-toolbar > .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html body.eb-has-topbar-v2.eb-module-page .container-fluid.col-12.eb-bootstrap-table-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html body.eb-has-topbar-v2.eb-module-page .stats-container-new {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    html body.eb-has-topbar-v2.eb-module-page .stats-container-new > .nav-item {
        flex: 1 1 0 !important;
    }
}

/* ============================================================
   Paramétrage mail — la card "Paramétrage" prend la pleine largeur
   (alignée sur le strip d'onglets Mail/Chat/SMS au-dessus). En
   dessous, l'éditeur + le panneau Variable gardent leur split
   col-md-8 + col-md-4.
   ============================================================ */
.mail-config-row {
    margin-bottom: 20px;
}

/* ============================================================
   Paramétrage mail — body de la card en 2 colonnes :
   colonne principale (Activation / Serveur / Auth) à gauche,
   colonne aside (Couleur principale) à droite. En dessous de
   768 px on repasse en pile verticale.
   ============================================================ */
.mail-config-body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}
.mail-config-body > .mcfg-col-main {
    flex: 1 1 0;
    min-width: 0;
}
.mail-config-body > .mcfg-col-aside {
    flex: 0 0 340px;
    border-left: 1px solid var(--bkg-color6, #ebedf3);
}
.mail-config-body > .mcfg-col-aside .mcfg-section {
    border-bottom: none;
}
/* Inputs des champs texte du paramétrage mail : caper la largeur pour éviter
   des champs sur toute la colonne quand la card est en pleine largeur. */
.mail-config-body > .mcfg-col-main .mcfg-control input.form-control,
.mail-config-body > .mcfg-col-main .mcfg-control select.form-control {
    max-width: 360px;
}
/* Label de Couleur principale plus court — l'aside est étroit. */
.mail-config-body > .mcfg-col-aside .mcfg-row {
    grid-template-columns: 130px 1fr;
}

/* Picker couleur du paramétrage mail : un seul swatch montrant le dégradé
   réel du header mail (primaire → secondaire 20% plus sombre). Le picker
   natif <input type=color> est superposé transparent — clic = ouverture. */
.mail-color-picker-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mail-color-swatch {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--bor-color1, #E4E6EF);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mail-color-swatch:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.10);
}
.mail-color-swatch input[type='color'] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: transparent;
}
.mail-color-hex {
    font-family: monospace;
    font-size: 13px;
    color: var(--txt-color4, #3F4254);
    white-space: nowrap;
}
@media (max-width: 991px) {
    .mail-config-body { flex-direction: column; }
    .mail-config-body > .mcfg-col-aside {
        flex: 1 1 auto;
        border-left: none;
        border-top: 1px solid var(--bkg-color6, #ebedf3);
    }
}

/* ============================================================
   Boutons "i" info accolés aux dropdowns du paramétrage mail :
   alignent leur hauteur sur le dropdown bootstrap-select voisin
   et collent visuellement (radius gauches à 0, margin négative).
   ============================================================ */
.mail-template-info-btn,
.mail-lang-info-btn {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: -6px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.mail-template-info-btn i,
.mail-lang-info-btn i {
    color: #fff;
}

/* ============================================================
   Badge de statut des heures (horaires.php — Pointage)
   Pill épuré avec pastille colorée, sémantique par statut :
   Saisie en cours/Brouillon · En attente · Validé · Refusé · Modifiable
   ============================================================ */
.eb-hstatus {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    letter-spacing: 0.01em;
    vertical-align: middle;
}
.eb-hstatus .eb-hstatus-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
/* Saisie en cours / Brouillon — indigo doux */
.eb-hstatus--draft   { color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }
/* En attente de validation — orange */
.eb-hstatus--pending { color: #b45309; background: #fff7ed; border-color: #fed7aa; }
/* Validé — vert */
.eb-hstatus--valid   { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
/* Refusé — rouge */
.eb-hstatus--reject  { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
/* Modifiable — bleu */
.eb-hstatus--mod     { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }

/* Compteurs Semaine / Année — pills cohérents avec le badge statut */
.eb-horaires-pointage-meta .badge#total,
.eb-horaires-pointage-meta .badge#total2,
.eb-horaires-pointage-meta span[id^="total"].badge {
    background: #eef2f7;
    color: #1e293b;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Mode sombre */
[data-theme="dark"] .eb-hstatus--draft   { color: #c4b5fd; background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.35); }
[data-theme="dark"] .eb-hstatus--pending { color: #fdba74; background: rgba(249,115,22,0.15); border-color: rgba(249,115,22,0.35); }
[data-theme="dark"] .eb-hstatus--valid   { color: #6ee7b7; background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.35); }
[data-theme="dark"] .eb-hstatus--reject  { color: #fca5a5; background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.35); }
[data-theme="dark"] .eb-hstatus--mod     { color: #93c5fd; background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.35); }
[data-theme="dark"] .eb-horaires-pointage-meta .badge#total,
[data-theme="dark"] .eb-horaires-pointage-meta .badge#total2,
[data-theme="dark"] .eb-horaires-pointage-meta span[id^="total"].badge { background: #252525; color: #e2e8f0; }

/* =====================================================================
   Cartes de formulaire client/fournisseur — upd_company_tabs.php.
   Labels lisibles : pas de césure, colonne dimensionnée au contenu sur
   une seule ligne, lignes aérées. Empilement label/champ en mobile.
   ===================================================================== */
.eb-company-main-table,
.eb-coord-table { table-layout: auto !important; }
.eb-company-main-table > tbody > tr > td,
.eb-coord-table > tbody > tr > td {
    vertical-align: middle;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow-wrap: normal;
    word-break: keep-all;
    -webkit-hyphens: none;
    hyphens: none;
}
.eb-company-main-table > tbody > tr > td:first-child,
.eb-coord-table > tbody > tr > td:first-child {
    white-space: nowrap;
    width: 1%;
    padding-right: 18px;
    color: #475569;
    font-weight: 500;
    line-height: 1.25;
}
.eb-company-main-table > tbody > tr > td:first-child label,
.eb-coord-table > tbody > tr > td:first-child label {
    margin-bottom: 0;
    white-space: nowrap;
}
/* En-tête Adresse / Décomposée : garder l'alignement sur une ligne */
.eb-coord-table .myAddrese { white-space: nowrap; }

[data-theme="dark"] .eb-company-main-table > tbody > tr > td:first-child,
[data-theme="dark"] .eb-coord-table > tbody > tr > td:first-child { color: #94a3b8; }

/* #11482 — Contraindre inputs/selects à la largeur de la carte sur TOUS les
   écrans. Les inputs portent size='40' (intrinsic width ≈ 340px) et, avec
   table-layout:auto, la cellule sans contrainte laissait la table déborder du
   .card étroit (col-xl-4). min-width:0 casse le verrou de min-content dans la
   cellule, box-sizing:border-box neutralise padding/border, et les groupes
   input-group (téléphone, adresse autocomplete) sont couverts pour éviter le
   même débordement. */
.eb-company-main-table .form-control,
.eb-company-main-table .bootstrap-select,
.eb-company-main-table .bootstrap-select > .dropdown-toggle,
.eb-company-main-table .input-group,
.eb-coord-table .form-control,
.eb-coord-table .bootstrap-select,
.eb-coord-table .bootstrap-select > .dropdown-toggle,
.eb-coord-table .input-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* #11500 — Le width:100% ci-dessus donne à flex-wrap:wrap (défaut Bootstrap
   sur .input-group) la place de casser la ligne : le sélecteur drapeau du
   téléphone passait au-dessus du champ au lieu de rester à gauche (cf.
   upd_personnel_tabs.php, qui n'a pas cette contrainte de largeur et ne casse
   jamais). On repasse en nowrap uniquement pour le widget téléphone. */
.eb-company-main-table .input-group:has(.dropdown-ind-flag),
.eb-coord-table .input-group:has(.dropdown-ind-flag) {
    flex-wrap: nowrap !important;
}

/* Mobile/tablette : label au-dessus du champ, jamais comprimé */
@media (max-width: 768px), (pointer: coarse) {
    /* :not(.display_none) : sans ça, cette règle (spécificité 0,1,3) écrase
       .display_none (0,1,0) et fait réapparaître en mobile les lignes
       masquées du widget adresse (create_input_address, affichage simple vs
       décomposée). */
    .eb-company-main-table > tbody > tr:not(.display_none),
    .eb-coord-table > tbody > tr:not(.display_none) { display: block; margin-bottom: 12px; }
    .eb-company-main-table > tbody > tr > td,
    .eb-coord-table > tbody > tr > td {
        display: block;
        width: 100% !important;
        padding: 2px 0 !important;
        white-space: normal !important;
    }
    .eb-company-main-table > tbody > tr > td:first-child,
    .eb-coord-table > tbody > tr > td:first-child { padding-bottom: 2px !important; }
    .eb-company-main-table > tbody > tr > td > .float-right {
        float: none !important;
        justify-content: flex-start !important;
    }
}

/* Desktop : forcer la 2e colonne (celle du champ) à ne pas grossir au-delà
   de l'espace restant. Le trick max-width:0 avec table-layout:auto pousse le
   navigateur à distribuer la largeur : première colonne au contenu (width:1%),
   deuxième colonne prend le reste et contient les form-control en width:100%.
   Non appliqué en mobile où la ligne bascule en display:block. */
@media (min-width: 769px) and (pointer: fine) {
    .eb-company-main-table > tbody > tr > td:not(:first-child),
    .eb-coord-table > tbody > tr > td:not(:first-child) {
        max-width: 0;
    }
}

/* #11504 — Fiche personnel > Durée de travail en vue mobile : parité info
   avec la vue bureau (compteurs + colonnes complètes du pointage). La table
   déborde et défile horizontalement dans le wrapper .eb-horaires-sheet-scroll,
   les <th>/<td> jusque-là masqués par .hide_mobile / .hide_mobile2 sont
   rétablis dans le périmètre de la seule .eb-horaires-sheet. */
.eb-horaires-sheet-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 992px) {
    .eb-horaires-sheet .hide_mobile { display: table-cell !important; }
}
@media (max-width: 560px) {
    .eb-horaires-sheet .hide_mobile2 { display: table-cell !important; }
}

/* Fenetre de partage des documents (document_modal.php). */
.swal2-popup .eb-doc-share-separator hr,
.swal3-popup .eb-doc-share-separator hr {
    margin: 14px 0 16px;
    border-top: 1px solid #e2e8f0;
}
.swal2-popup .ebrigade-doc-share,
.swal3-popup .ebrigade-doc-share,
.swal2-popup .ebrigade-doc-share-empty,
.swal3-popup .ebrigade-doc-share-empty {
    width: 100%;
    box-sizing: border-box;
    text-align: left !important;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #f8fbff;
}
.swal2-popup .ebrigade-doc-share,
.swal3-popup .ebrigade-doc-share {
    display: grid;
    gap: 14px;
    padding: 16px;
}
.swal2-popup .ebrigade-doc-share.is-expired,
.swal3-popup .ebrigade-doc-share.is-expired {
    border-color: #fed7aa;
    background: #fff7ed;
}
.swal2-popup .ebrigade-doc-share-head,
.swal3-popup .ebrigade-doc-share-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}
.swal2-popup .ebrigade-doc-share-heading,
.swal3-popup .ebrigade-doc-share-heading,
.swal2-popup .ebrigade-doc-share-empty,
.swal3-popup .ebrigade-doc-share-empty {
    display: flex;
    align-items: center;
    gap: 12px;
}
.swal2-popup .ebrigade-doc-share-copy,
.swal3-popup .ebrigade-doc-share-copy {
    min-width: 0;
}
.swal2-popup .ebrigade-doc-share-empty,
.swal3-popup .ebrigade-doc-share-empty {
    padding: 16px;
}
.swal2-popup .ebrigade-doc-share-icon,
.swal3-popup .ebrigade-doc-share-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #2563eb;
    background: #dbeafe;
}
.swal2-popup .ebrigade-doc-share-title,
.swal3-popup .ebrigade-doc-share-title {
    color: #0f172a;
    font-weight: 700;
    line-height: 1.2;
}
.swal2-popup .ebrigade-doc-share-subtitle,
.swal3-popup .ebrigade-doc-share-subtitle,
.swal2-popup .ebrigade-doc-share-empty p,
.swal3-popup .ebrigade-doc-share-empty p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.35;
}
.swal2-popup .ebrigade-doc-share-empty-body,
.swal3-popup .ebrigade-doc-share-empty-body {
    flex: 1 1 auto;
    min-width: 0;
}
.swal2-popup .ebrigade-doc-share-meta,
.swal3-popup .ebrigade-doc-share-meta {
    display: grid;
    gap: 2px;
    min-width: 150px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #334155;
    background: #eaf2ff;
    font-size: 12px;
    text-align: right;
}
.swal2-popup .ebrigade-doc-share-meta span,
.swal3-popup .ebrigade-doc-share-meta span {
    text-transform: uppercase;
    font-weight: 700;
}
.swal2-popup .ebrigade-doc-share-meta strong,
.swal3-popup .ebrigade-doc-share-meta strong {
    color: #1d4ed8;
    font-weight: 700;
}
.swal2-popup .ebrigade-doc-share-body,
.swal3-popup .ebrigade-doc-share-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.42fr);
    gap: 12px;
    align-items: end;
}
.swal2-popup .ebrigade-doc-share-link-row,
.swal3-popup .ebrigade-doc-share-link-row,
.swal2-popup .ebrigade-doc-share-expiry,
.swal3-popup .ebrigade-doc-share-expiry {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.swal2-popup .ebrigade-doc-share-label,
.swal3-popup .ebrigade-doc-share-label,
.swal2-popup .ebrigade-doc-share-expiry label,
.swal3-popup .ebrigade-doc-share-expiry label {
    margin: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.swal2-popup .ebrigade-doc-share-link-group,
.swal3-popup .ebrigade-doc-share-link-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.swal2-popup .ebrigade-doc-share-link,
.swal3-popup .ebrigade-doc-share-link,
.swal2-popup .ebrigade-doc-share-expiry .ebrigade-share-expires-input,
.swal3-popup .ebrigade-doc-share-expiry .ebrigade-share-expires-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.swal2-popup .ebrigade-doc-share-link,
.swal3-popup .ebrigade-doc-share-link {
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.swal2-popup .ebrigade-doc-share-actions,
.swal3-popup .ebrigade-doc-share-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.swal2-popup .ebrigade-doc-share-actions .btn,
.swal3-popup .ebrigade-doc-share-actions .btn,
.swal2-popup .ebrigade-doc-share-empty .btn,
.swal3-popup .ebrigade-doc-share-empty .btn,
.swal2-popup .ebrigade-doc-share-link-group .btn,
.swal3-popup .ebrigade-doc-share-link-group .btn {
    margin: 0 !important;
    white-space: nowrap;
}
@media (max-width: 576px) {
    .swal2-popup .ebrigade-doc-share-head,
    .swal3-popup .ebrigade-doc-share-head,
    .swal2-popup .ebrigade-doc-share-body,
    .swal3-popup .ebrigade-doc-share-body,
    .swal2-popup .ebrigade-doc-share-link-group,
    .swal3-popup .ebrigade-doc-share-link-group {
        grid-template-columns: 1fr;
    }
    .swal2-popup .ebrigade-doc-share-meta,
    .swal3-popup .ebrigade-doc-share-meta {
        min-width: 0;
        text-align: left;
    }
    .swal2-popup .ebrigade-doc-share-empty,
    .swal3-popup .ebrigade-doc-share-empty {
        align-items: flex-start;
        flex-direction: column;
    }
    .swal2-popup .ebrigade-doc-share-actions,
    .swal3-popup .ebrigade-doc-share-actions {
        justify-content: stretch;
    }
    .swal2-popup .ebrigade-doc-share-empty .btn,
    .swal3-popup .ebrigade-doc-share-empty .btn,
    .swal2-popup .ebrigade-doc-share-actions .btn,
    .swal3-popup .ebrigade-doc-share-actions .btn,
    .swal2-popup .ebrigade-doc-share-link-group .btn,
    .swal3-popup .ebrigade-doc-share-link-group .btn {
        width: 100%;
    }
}