.card-glance i{
    font-size: 36px;
    color: #777777;
}

.card-glance .col-md-4{
    text-align: center;
}
.table-comments img{
    max-width: 60px;
}
.table-comments .footer a,
.card-posts .stats a{
    color: #777777;
    padding: 0 5px;
}

.card img{
    max-width: 100%;
    border-radius: 4px 4px 0 0;
}
.card-theme{
    position: relative;
}
.card-theme .alert{
    border-radius: 0;
    position: absolute;
    width: 100%;
    top: 18px;
}
.card-theme .footer{
    padding: 10px;
    margin-top: 1px;
    border-top: 1px solid #dddddd;
}
.card-theme .footer .btn{
    margin-left: 4px;
}

.card-posts .stats{
    padding-top: 15px;
}
.card-posts img{
    max-width: 140px;
}
.card-posts .td-actions{
    min-width: 110px;
}

#table_programmation_mois {
    width : 100%;
    text-align: center;
    border-collapse: collapse;
}

#table_programmation_mois td {
	border: 1px solid #ddd;
	padding: 40px;
}

/*
Site Header
----------------------------------------------------------------------------- */

.site-header {
    background: #a9c81d;
    border-bottom: 1px solid #e0e0e0;
    color: #474e57;
    padding: 1rem;
}

.site-header-annualisation {
    background: #a9c81d;
    border-bottom: 1px solid #e0e0e0;
    color: #474e57;
    padding: 1rem;
    position: fixed;
    width: 100%;
}

/* STYLE POUR LOADER*/

.loader {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f1f2f1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader > img {
    width: 500px;
}

.loader.hidden {
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.thumb {
    height: 100px;
    border: 1px solid black;
    margin: 10px;
}

/* SWITCH BTN*/

.onoffswitch {
    position: relative; width: 169px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #D6D6D5; border-radius: 30px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "BPU";
    padding-left: 23px;
    background-color: #4091E2; color: #E9E9E7;
}
.onoffswitch-inner:after {
    content: "FORFAITAIRE";
    padding-right: 23px;
    background-color: #f5f5f5; color: #757575;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 40px; margin: -2px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 129px;
    border: 2px solid #D6D6D5; border-radius: 30px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

/* SWITCH BTN*/

.onoffswitchGROUP {
    position: relative; width: 169px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitchGROUP-checkbox {
    display: none;
}
.onoffswitchGROUP-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #D6D6D5; border-radius: 30px;
}
.onoffswitchGROUP-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitchGROUP-inner:before, .onoffswitchGROUP-inner:after {
    display: block; float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitchGROUP-inner:before {
    content: "Dissocier";
    padding-left: 23px;
    background-color: #4091E2; color: #E9E9E7;
}
.onoffswitchGROUP-inner:after {
    content: "Grouper";
    padding-right: 23px;
    background-color: #f5f5f5; color: #757575;
    text-align: right;
}
.onoffswitchGROUP-switch {
    display: block; width: 40px; margin: -2px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 129px;
    border: 2px solid #D6D6D5; border-radius: 30px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitchGROUP-checkbox:checked + .onoffswitchGROUP-label .onoffswitchGROUP-inner {
    margin-left: 0;
}
.onoffswitchGROUP-checkbox:checked + .onoffswitchGROUP-label .onoffswitchGROUP-switch {
    right: 0px; 
}

/* SWITCH BTN*/

.onoffswitchUNI {
    position: relative; width: 169px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitchUNI-checkbox {
    display: none;
}
.onoffswitchUNI-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #D6D6D5; border-radius: 30px;
}
.onoffswitchUNI-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitchUNI-inner:before, .onoffswitchUNI-inner:after {
    display: block; float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitchUNI-inner:before {
    content: "Delta";
    padding-left: 23px;
    background-color: #4091E2; color: #E9E9E7;
}
.onoffswitchUNI-inner:after {
    content: "Réalisé";
    padding-right: 23px;
    background-color: #f5f5f5; color: #757575;
    text-align: right;
}
.onoffswitchUNI-switch {
    display: block; width: 40px; margin: -2px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 129px;
    border: 2px solid #D6D6D5; border-radius: 30px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitchUNI-checkbox:checked + .onoffswitchUNI-label .onoffswitchUNI-inner {
    margin-left: 0;
}
.onoffswitchUNI-checkbox:checked + .onoffswitchUNI-label .onoffswitchUNI-switch {
    right: 0px; 
}
/* SWITCH BTN*/

.onoffswitchB {
    position: relative; width: 169px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitchB-checkbox {
    display: none;
}
.onoffswitchB-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #D6D6D5; border-radius: 30px;
}
.onoffswitchB-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitchB-inner:before, .onoffswitchB-inner:after {
    display: block; float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitchB-inner:before {
    content: "Tout décocher";
    padding-left: 23px;
    background-color: #4091E2; color: #E9E9E7;
}
.onoffswitchB-inner:after {
    content: "Tout cocher";
    padding-right: 23px;
    background-color: #f5f5f5; color: #757575;
    text-align: right;
}
.onoffswitchB-switch {
    display: block; width: 40px; margin: -2px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 129px;
    border: 2px solid #D6D6D5; border-radius: 30px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitchB-checkbox:checked + .onoffswitchB-label .onoffswitchB-inner {
    margin-left: 0;
}
.onoffswitchB-checkbox:checked + .onoffswitchB-label .onoffswitchB-switch {
    right: 0px; 
}

/* SWITCH BTN*/

.onoffswitchC {
    position: relative; width: 169px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitchC-checkbox {
    display: none;
}
.onoffswitchC-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #D6D6D5; border-radius: 30px;
}
.onoffswitchC-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitchC-inner:before, .onoffswitchC-inner:after {
    display: block; float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitchC-inner:before {
    content: "PROPRE";
    padding-left: 40px;
    background-color: #4091E2; color: #E9E9E7;
}
.onoffswitchC-inner:after {
    content: "SALE";
    padding-right: 55px;
    background-color: #f5f5f5; color: #757575;
    text-align: right;
}
.onoffswitchC-switch {
    display: block; width: 40px; margin: -2px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 129px;
    border: 2px solid #D6D6D5; border-radius: 30px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitchC-checkbox:checked + .onoffswitchC-label .onoffswitchC-inner {
    margin-left: 0;
}
.onoffswitchC-checkbox:checked + .onoffswitchC-label .onoffswitchC-switch {
    right: 0px; 
}

/* SWITCH BTN*/

.onoffswitchD {
    position: relative; width: 169px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitchD-checkbox {
    display: none;
}
.onoffswitchD-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #D6D6D5; border-radius: 30px;
}
.onoffswitchD-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitchD-inner:before, .onoffswitchD-inner:after {
    display: block; float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitchD-inner:before {
    content: "OUI";
    padding-left: 40px;
    background-color: #4091E2; color: #E9E9E7;
}
.onoffswitchD-inner:after {
    content: "NON";
    padding-right: 55px;
    background-color: #f5f5f5; color: #757575;
    text-align: right;
}
.onoffswitchD-switch {
    display: block; width: 40px; margin: -2px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 129px;
    border: 2px solid #D6D6D5; border-radius: 30px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitchD-checkbox:checked + .onoffswitchD-label .onoffswitchD-inner {
    margin-left: 0;
}
.onoffswitchD-checkbox:checked + .onoffswitchD-label .onoffswitchD-switch {
    right: 0px; 
}

/* SWITCH BTN*/

.onoffswitchE {
    position: relative; width: 169px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitchE-checkbox {
    display: none;
}
.onoffswitchE-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #D6D6D5; border-radius: 30px;
}
.onoffswitchE-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitchE-inner:before, .onoffswitchE-inner:after {
    display: block; float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitchE-inner:before {
    content: "OUI";
    padding-left: 40px;
    background-color: #4091E2; color: #E9E9E7;
}
.onoffswitchE-inner:after {
    content: "NON";
    padding-right: 55px;
    background-color: #f5f5f5; color: #757575;
    text-align: right;
}
.onoffswitchE-switch {
    display: block; width: 40px; margin: -2px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 129px;
    border: 2px solid #D6D6D5; border-radius: 30px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitchE-checkbox:checked + .onoffswitchE-label .onoffswitchE-inner {
    margin-left: 0;
}
.onoffswitchE-checkbox:checked + .onoffswitchE-label .onoffswitchE-switch {
    right: 0px; 
}

/* SWITCH BTN*/

.onoffswitchF {
    position: relative; width: 100px;
    padding-top: 5px;
    padding-left: 20px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitchF-checkbox {
    display: none;
}
.onoffswitchF-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #D6D6D5; border-radius: 30px;
}
.onoffswitchF-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitchF-inner:before, .onoffswitchF-inner:after {
    display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 25px;
    font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitchF-inner:before {
    content: "OUI";
    padding-left: 20px;
    background-color: #4091E2; color: #E9E9E7;
}
.onoffswitchF-inner:after {
    content: "NON";
    padding-right: 20px;
    background-color: #f5f5f5; color: #757575;
    text-align: right;
}
.onoffswitchF-switch {
    display: block; width: 35px; height: 35px; margin: -12px;
    background: #FFFFFF;
    margin-top: 2px;
    position: absolute; top: 0; bottom: 0;
    right: 70px;
    border: 2px solid #D6D6D5; border-radius: 30px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitchF-checkbox:checked + .onoffswitchF-label .onoffswitchF-inner {
    margin-left: 0;
}
.onoffswitchF-checkbox:checked + .onoffswitchF-label .onoffswitchF-switch {
    right: 0px; 
}

/* SWITCH BTN*/

.onoffswitchG {
    position: relative; width: 100px;
    padding-top: 5px;
    padding-left: 20px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitchG-checkbox {
    display: none;
}
.onoffswitchG-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #D6D6D5; border-radius: 30px;
}
.onoffswitchG-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitchG-inner:before, .onoffswitchG-inner:after {
    display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 25px;
    font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitchG-inner:before {
    content: "OUI";
    padding-left: 20px;
    background-color: #4091E2; color: #E9E9E7;
}
.onoffswitchG-inner:after {
    content: "NON";
    padding-right: 20px;
    background-color: #f5f5f5; color: #757575;
    text-align: right;
}
.onoffswitchG-switch {
    display: block; width: 35px; height: 35px; margin: -12px;
    background: #FFFFFF;
    margin-top: 2px;
    position: absolute; top: 0; bottom: 0;
    right: 70px;
    border: 2px solid #D6D6D5; border-radius: 30px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitchG-checkbox:checked + .onoffswitchG-label .onoffswitchG-inner {
    margin-left: 0;
}
.onoffswitchG-checkbox:checked + .onoffswitchG-label .onoffswitchG-switch {
    right: 0px; 
}


.input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -80%);
  top: 80%;
  pointer-events: none;
  width: 25px;
  text-align: center;
    font-style: normal;
}

.input-icon > input {
  padding-left: 25px;
    padding-right: 0;
}

.input-icon-right > i {
  right: 0;
}

.input-icon-right > input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}

.bouttonnombreprimary {
  position: relative;
  color: #007bff;
  border: 2px solid #007bff;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  transition: all .2s;
}

.bouttonnombreprimary:hover {
  background-color: #007bff;
  color: #ffffff;
}

.nombreprimary {
  position: absolute;
  top: -1rem;
  right: -3.5rem;
  background: #007bff;
  color: #ffffff;
  width: 55px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  border-radius: 50%;
}

.bouttonnombresecondary {
  position: relative;
  color: #6a737c;
  border: 2px solid #6a737c;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  transition: all .2s;
}

.bouttonnombresecondary:hover {
  background-color: #6a737c;
  color: #ffffff;
}

.nombresecondary {
  position: absolute;
  top: -1rem;
  right: -3.5rem;
  background: #6a737c;
  color: #ffffff;
  width: 55px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  border-radius: 50%;
}

.bouttonnombresuccess {
  position: relative;
  color: #26a342;
  border: 2px solid #26a342;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  transition: all .2s;
}

.bouttonnombresuccess:hover {
  background-color: #26a342;
  color: #ffffff;
}

.nombresuccess {
  position: absolute;
  top: -1rem;
  right: -3.5rem;
  background: #26a342;
  color: #ffffff;
  width: 55px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  border-radius: 50%;
}

.bouttonnombredanger {
  position: relative;
  color: #d73446;
  border: 2px solid #d73446;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  transition: all .2s;
}

.bouttonnombredanger:hover {
  background-color: #d73446;
  color: #ffffff;
}

.nombredanger {
  position: absolute;
  top: -1rem;
  right: -3.5rem;
  background: #d73446;
  color: #ffffff;
  width: 55px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  border-radius: 50%;
}

.bouttonnombrewarning {
  position: relative;
  color: #411e00;
  border: 2px solid #fabe08;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  transition: all .2s;
}

.bouttonnombrewarning:hover {
  background-color: #fabe08;
  color: #411e00;
}

.nombrewarning {
  position: absolute;
  top: -1rem;
  right: -3.5rem;
  background: #fabe08;
  color: #411e00;
  width: 55px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  border-radius: 50%;
}

.bouttonnombreinfo {
  position: relative;
  color: #189eb7;
  border: 2px solid #189eb7;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  transition: all .2s;
}

.bouttonnombreinfo:hover {
  background-color: #189eb7;
  color: #ffffff;
}

.nombreinfo {
  position: absolute;
  top: -1rem;
  right: -3.5rem;
  background: #189eb7;
  color: #ffffff;
  width: 55px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  border-radius: 50%;
}


.bouttonnombredark {
  position: relative;
  color: #353a40;
  border: 2px solid #353a40;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  transition: all .2s;
}

.bouttonnombredark:hover {
  background-color: #353a40;
  color: #ffffff;
}

.nombredark {
  position: absolute;
  top: -1rem;
  right: -3.5rem;
  background: #353a40;
  color: #ffffff;
  width: 55px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  border-radius: 50%;
}

.rotated0 {
    transform: rotate(0deg);
}

.rotated90 {
    transform: rotate(90deg);
}

.rotated180 {
    transform: rotate(180deg);
}

.rotated270 {
    transform: rotate(270deg);
}

#loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tooltip-container {
  position: relative;
}

.tooltip {
  visibility: hidden;
  width: 150px; /* Augmentation de la largeur pour accommoder le contenu */
  background-color: #444; /* Couleur de fond légèrement plus claire */
  color: #fff;
  text-align: center;
  border-radius: 8px; /* Bords légèrement plus arrondis */
  padding: 8px; /* Augmentation du padding pour une meilleure esthétique */
  position: absolute;
  z-index: 1;
  bottom: 150%; /* Ajustement de la position par rapport au conteneur */
  left: 50%;
  margin-left: -75px; /* Ajustement pour centrer la boîte d'infobulle */
  opacity: 0;
  transition: opacity 0.5s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ajout d'une légère ombre portée */
}

.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.less.active .button-read-more, .button-read-less {
display: none;
border-color: #2d6db7;
color: #FFFFFF;
background-color: #2d6db7;
opacity: 0.6;
border-radius: 5px;
font-size: 16px;
margin-bottom: 15px;
text-decoration: underline;
padding-left: 10px;
}
.less.active .button-read-less {
display: block;
border-color: #87cb15;
color: #FFFFFF;
background-color: #87cb15;
opacity: 0.7;
border-radius: 5px;
font-size: 16px;
margin-bottom: 15px;
text-decoration: underline;
padding-left: 10px;
}

.less .button-read-more {
display: block;
border-color: #2d6db7;
color: #FFFFFF;
background-color: #2d6db7;
opacity: 0.6;
border-radius: 5px;
font-size: 16px;
margin-bottom: 15px;
text-decoration: underline;
padding-left: 10px;
}

/* Cible toutes les scrollbars sur l'ensemble du site */
/* Style global pour toutes les scrollbars */
::-webkit-scrollbar {
    width: 8px; /* Largeur de la scrollbar */
}

::-webkit-scrollbar-track {
    background: transparent; /* Fond de la scrollbar */
}

::-webkit-scrollbar-thumb {
    background-color: #81a7d4; /* Couleur du pouce de la scrollbar */
    border-radius: 10px; /* Arrondir les coins du pouce */
    border: 2px solid transparent; /* Ajoute un espace autour du pouce */
    background-clip: content-box; /* Assure que la couleur reste visible */
}

::-webkit-scrollbar-thumb:vertical {
    border-radius: 10px; /* Arrondir le haut du pouce vertical */
}

::-webkit-scrollbar-thumb:horizontal {
    border-radius: 10px; /* Arrondir le côté gauche du pouce horizontal */
}

/* Pour Firefox */
* {
    scrollbar-width: thin; /* Minceur de la scrollbar */
    scrollbar-color: #81a7d4 transparent; /* Couleur du pouce et du fond */
}

/* Pour IE et anciens Edge (fonctionne partiellement) */
::-ms-scrollbar {
    width: 8px;
}

::-ms-scrollbar-track {
    background: transparent;
}

::-ms-scrollbar-thumb {
    background-color: #81a7d4;
    border-radius: 10px; /* Cela peut ne pas fonctionner dans IE */
}

/* Style des boutons custom-switch */
.custom-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    background-color: #ccc;
    border-radius: 15px;
}

.custom-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fd9400;
    border-radius: 15px;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #7cba14;
}

input:checked + .slider:before {
    transform: translateX(30px);
}

.info.legend {
    background: white;
    padding: 6px 8px;
    font-size: 14px;
    color: #555;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    line-height: 18px;
}
.info.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
    border-radius: 3px;
}

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Conteneur de la ligne de timeline */
.timeline-line {
    position: absolute;
    width: 6px;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Pointillés au début de la ligne */
.timeline-line::before {
    content: '';
    position: absolute;
    top: 0;
    width: 6px;
    height: 40px; /* Hauteur fixe pour les pointillés au début */
    left: 50%;
    transform: translateX(-50%);
    background: repeating-linear-gradient(to bottom,
                #3498db,
                #3498db 10px,
                transparent 10px,
                transparent 20px);
    background-size: 6px 20px; /* Ajuste la taille du motif des pointillés */
}

/* Ligne pleine entre les pointillés */
.timeline-line-middle {
    position: absolute;
    width: 6px;
    top: 40px; /* Commence juste après la partie pointillée du début */
    bottom: 40px; /* Se termine juste avant la partie pointillée de la fin */
    left: 50%;
    transform: translateX(-50%);
    background-color: #3498db;
}

/* Pointillés à la fin de la ligne */
.timeline-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 6px;
    height: 40px; /* Hauteur fixe pour les pointillés à la fin */
    left: 50%;
    transform: translateX(-50%);
    background: repeating-linear-gradient(to bottom,
                #3498db,
                #3498db 10px,
                transparent 10px,
                transparent 20px);
    background-size: 6px 20px; /* Ajuste la taille du motif des pointillés */
}

.timeline-item {
    padding: 10px 30px;
    position: relative;
    width: 50%;
}

.timeline-item.left {
    left: 0;
}

.timeline-item.right {
    left: 50%;
}

.timeline-content {
    padding: 5px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    margin-bottom: 5px;
}

.timeline-item.left .timeline-content {
    margin-left: auto;
}

.timeline-item.right: .timeline-content {
    margin-right: auto;
}

/* Style des points bleus plus gros */
.timeline-item::before {
    content: '';
    position: absolute;
    width: 30px; /* Augmente la taille du point */
    height: 30px; /* Augmente la taille du point */
    border-radius: 50%;
    background-color: #3498db;
    border: 4px solid white;
    top: 20px; /* Ajuste en fonction de la taille des points */
    left: calc(50% - 15px); /* Centre le point par rapport à la ligne */
}

.timeline-item.right::before {
    left: calc(-10px - 5px);
}

.timeline-item.left::before {
    left: calc(100% - 15px);
}

.timeline-item-titre::before {
    left: calc(100% - 15px);
}

/* Style des points bleus plus gros */
.timeline-item-titre::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    background-color: #3498db;
    border: 4px solid white;
    top: 20px; /* Ajuste en fonction de la taille des points */
    left: calc(50% - 15px); /* Centre le point par rapport à la ligne */
}

.timeline-item-titre {
    padding: 10px 10px;
    position: relative;
    width: 30%;
    text-align: center;
    left: 35%;
    z-index: 9000;
}

/*Annimation timeline*/
.timeline-item {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-item.show {
    opacity: 1;
    transform: translateY(0);
}

.timeline-content-titredebut {
    padding: 0px;
    background-color: #84c815;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    margin-bottom: 0px;
}

.timeline-content-titremillieu {
    padding: 0px;
    background-color: #3498db;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    margin-bottom: 0px;
}

.timeline-content-titrefin {
    padding: 0px;
    background-color: #f69000;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    margin-bottom: 0px;
}

#frise {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    box-sizing: border-box;
    z-index: 10;
    width: 100%;
}

/* CSS pour les actions dans le menu Leaflet.Geoman */
.leaflet-pm-action {
    font-size: 14px !important; /* Ajustez la taille selon vos besoins */
    line-height: 1.5 !important; /* Ajustez l'interligne pour plus de lisibilité */
}

/* CSS pour les liens dans les menus */
.leaflet-pm-action a {
    font-size: 14px !important; /* Ajustez la taille selon vos besoins */
}

/* CSS pour le contrôle des couches */
.leaflet-control-layers label {
    font-size: 14px !important; /* Ajustez la taille selon vos besoins */
}

/* CSS pour les boutons du contrôle */
.leaflet-control-layers-selector {
    font-size: 14px !important; /* Ajustez la taille selon vos besoins */
}

/* CSS pour les pop-ups Leaflet.Geoman */
.leaflet-popup-content {
    font-size: 14px !important; /* Ajustez la taille selon vos besoins */
    line-height: 1.5 !important; /* Ajustez l'interligne pour plus de lisibilité */
}

/* CSS pour les liens dans les pop-ups */
.leaflet-popup-content a {
    font-size: 14px !important; /* Ajustez la taille selon vos besoins */
}

/* CSS pour les tooltips Leaflet */
.leaflet-tooltip {
    font-size: 14px !important; /* Ajustez la taille selon vos besoins */
    line-height: 1.5 !important; /* Ajustez l'interligne pour plus de lisibilité */
}

/* Cibler les liens dans les tooltips */
.leaflet-tooltip a {
    font-size: 14px !important; /* Ajustez la taille selon vos besoins */
}

/* CSS pour les tooltips Leaflet */
.leaflet-control-scale-line {
    font-size: 14px !important; /* Ajustez la taille selon vos besoins */
    line-height: 1.5 !important; /* Ajustez l'interligne pour plus de lisibilité */
}

.selected-row {
    background-color: #b3d9ff !important;  /* Bleu clair */
}

/* Style général pour la boîte Select2 des <select class="select2"> */
.select2.select2-container .select2-selection--single {
    height: 40px; /* Hauteur de la boîte */
    border-radius: 5px; /* Coins arrondis */
    border: 1px solid #ddd; /* Bordure grise */
    background-color: #fff; /* Fond blanc */
    display: flex;
    align-items: center; /* Centre le texte verticalement */
}

/* Style du texte dans Select2 */
.select2.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 10px; /* Espace à gauche pour respirer */
    color: #444; /* Couleur du texte */
    font-size: 14px; /* Taille de police agréable */
    line-height: 1.5; /* Espacement vertical du texte */
}

/* Icône de la flèche (dropdown) */
.select2.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%; /* Remplit toute la hauteur */
    right: 10px; /* Espace depuis le bord droit */
    display: flex;
    align-items: center; /* Centre l'icône verticalement */
}

/* Styles lors du survol de la boîte */
.select2.select2-container--default .select2-selection--single:hover {
    border-color: #aaa; /* Bordure un peu plus sombre au survol */
}

/* Styles pour les options dans le menu déroulant */
.select2.select2-container--default .select2-results__option {
    padding: 10px; /* Espace pour chaque option */
    font-size: 14px; /* Taille de police pour les options */
    color: #333; /* Couleur du texte */
}

/* Changement de couleur au survol des options */
.select2.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f0f0f0; /* Fond gris clair */
    color: #000; /* Texte noir */
}

/* Ajustement pour les options désactivées */
.select2.select2-container--default .select2-results__option[aria-disabled='true'] {
    color: #bbb; /* Texte désactivé (gris clair) */
}

.underline-text {
    text-decoration: underline;
}

.main-panel {
  background: #f5f6fa; /* gris clair dashboard */
  min-height: 100vh;
  position: relative;
}

.btn-icon-navbar-top i {
  font-size: 18px;
  line-height: 1;
  display: block;              /* évite les décalages inline */
}

.fade-in-out-navbar {
    animation: fade 2s linear infinite; /* Réglez la durée et le type d'animation selon vos préférences */
}

.logomenu {
  font-size: 18px !important;
}

.navbar-top {
  display: flex;
  align-items: center;     /* ✅ centrage vertical */
  gap: 10px;               /* espace entre bouton et titre */
}

.btn-icon-navbar-top {
  width: 28px;
  height: 28px;

  padding: 0 !important;
  min-width: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;             /* empêche l’icône d’agrandir le bouton */
}

/* Conteneur navbar */
.navbar-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bouton de base */
.badge-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;

  padding: 6px 10px !important;
  border-radius: 4px;
  font-weight: 500;
  font-size: 13px;

  text-decoration: none !important;
  background: #fff;
  line-height: 1;

  border: 1px solid transparent;
}

/* ============================= */
/* CONTENEUR NAVBAR              */
/* ============================= */

.navbar-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================= */
/* BOUTON BASE                   */
/* ============================= */

.badge-btn {
  position: relative;

  display: inline-flex !important;
  align-items: center;
  gap: 6px;

  padding: 6px 12px !important;
  min-height: 28px;

  border-radius: 4px;
  border: 1px solid transparent;

  background-color: #ffffff;

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  text-decoration: none !important;
  cursor: pointer;

  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

/* Empêche Bootstrap de casser le style */
.navbar-nav > li > a.badge-btn {
  padding: 6px 12px !important;
  line-height: 1;
  background: #ffffff;
}

/* ============================= */
/* BADGE NOMBRE                  */
/* ============================= */

.badge-count {
  position: absolute;
  top: -14px;
  right: -8px;

  min-width: 26px;
  height: 20px;
  padding: 0 6px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  font-size: 11px;
  font-weight: 700;
  color: #ffffff;

  pointer-events: none;
}

/* ============================= */
/* COULEURS – REPOS              */
/* ============================= */

/* VERT – ACTIF */
.badge-success {
  color: #28a745 !important;
  border-color: #28a745;
}
.badge-success .badge-count {
  background-color: #28a745;
}

/* ROUGE – ACTION */
.badge-danger {
  color: #dc3545 !important;
  border-color: #dc3545;
}
.badge-danger .badge-count {
  background-color: #dc3545;
}

/* GRIS – ARCHIVE */
.badge-secondary {
  color: #6c757d !important;
  border-color: #6c757d;
}
.badge-secondary .badge-count {
  background-color: #6c757d;
}

/* ============================= */
/* HOVER – BOUTON PLEIN          */
/* ============================= */

.badge-success:hover {
  background-color: #28a745 !important;
  color: #ffffff !important;
  border-color: #28a745;
}

.badge-danger:hover {
  background-color: #dc3545 !important;
  color: #ffffff !important;
  border-color: #dc3545;
}

.badge-secondary:hover {
  background-color: #6c757d !important;
  color: #ffffff !important;
  border-color: #6c757d;
}

/* ============================= */
/* SÉCURITÉ BOOTSTRAP            */
/* ============================= */

.badge-btn:hover,
.badge-btn:focus {
  text-decoration: none !important;
  outline: none;
}

.navbar-badges {
  padding-top: 10px;
}

/* ===============================
   VARIABLES UI
================================ */
:root {
  --ui-radius: 14px;
  --ui-height: 48px;
  --ui-radius-pill: 999px;

  --ui-bg: #ffffff;
  --ui-text-main: #0f172a;
  --ui-text-muted: #64748b;

  --ui-shadow: 0 15px 40px rgba(0,0,0,.15);
  --ui-shadow-hover: 0 10px 26px rgba(15, 23, 42, 0.12);

  --ui-transition: 0.2s ease;
}

/* ===============================
   NAVBAR FIX BOOTSTRAP
================================ */
.navbar-nav {
  display: flex;
  align-items: center;
}

/* Désactive hover Bootstrap */
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
  background: transparent !important;
}

/* ===============================
   CAPSULE COMMUNE
================================ */
.notif-link,
.user-capsule > a {
  display: flex !important;
  align-items: center;

  background: #ffffff;
  border-radius: var(--ui-radius);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);

  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform;

  line-height: normal !important;
}

/* ===============================
   ESPACE ENTRE NOTIF & USER
================================ */
.notif-capsule {
  margin-right: 14px; /* ✅ ajuste : 10–20px selon ton goût */
}

/* ===============================
   HOVER PRO (LÉGER)
================================ */
.notif-capsule:hover .notif-link,
.user-capsule:hover > a,
.user-capsule.open > a {
  transform: scale(1.03);
  box-shadow: var(--ui-shadow);
}

/* ===============================
   NOTIFICATIONS
================================ */
.notif-link {
  width: var(--ui-height);
  height: var(--ui-height);
  justify-content: center;
  margin-right: 10px;
  position: relative;
}

.notif-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  background: #e74c3c;
  border-radius: 50%;
}

/* ===============================
   USER CAPSULE
================================ */
.user-capsule > a {
  gap: 10px;
  min-width: 230px;
  height: var(--ui-height);
  padding: 6px 14px 6px 8px !important;
}

/* ===============================
   AVATAR
================================ */
.user-capsule img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ===============================
   TEXTE USER
================================ */
.user-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  white-space: nowrap;
}

.user-namenav {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.user-mailnav {
  font-size: 11px;
  color: #64748b;
}

/* ===============================
   CARET
================================ */
.user-capsule .caret {
  margin-left: auto;
  color: #64748b;
}

/* ===============================
   DROPDOWN
================================ */
.user-capsule .dropdown-menu {
  border-radius: 12px;
  box-shadow: var(--ui-shadow);
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
  .user-capsule > a {
    min-width: 140px;
  }

  .user-mailnav {
    display: none;
  }
}

.card {
  position: relative;
  display: block;
  background: var(--ui-bg);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  padding: 2px 2px;
  transition: box-shadow var(--ui-transition),
              transform var(--ui-transition);
}

.card:hover {
  box-shadow: var(--ui-shadow-hover);
  transform: translateY(-0px);
}