.stats-container-new{
    background-color: var(--bkg-color59);
    border-radius: 10px;
    font-family: Poppins, Helvetica, "sans-serif";
}
.stats-container-new li a{
    transition: all 0.15s ease-in-out;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    transition-property: color;

    border: 1px solid var(--bkg-color41);
    border-radius: 5px;
    box-shadow: unset !important;

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

.stats-container-new li a:hover{   
    color: var(--txt-color11);
    border: 1px solid var(--txt-color11);
}
.stats-container-new li a.stat-container-disabled,
.stats-container-new li a.stat-container-disabled:hover{
    cursor: default;
    pointer-events: none;
    transform: none !important;
}
.stats-container-new li a.active{  
    transition: all 0.15s ease-in-out;
    background-color: var(--bkg-color15);
    color: var(--txt-color98);
}
.stats-container-new li a:not(.active) i{
  opacity: 0.35;
}

.widget li {
  height: 100px;
}
.pulse .red a {
  animation: statsRedPulse 3s infinite;
}
@keyframes statsRedPulse {
  0% {
    transform: scale(1);
  }
  50% {
      transform: scale(1.05);
  }
  100% {
      transform: scale(1);
  }
}

.widget .red a{
  color : var(--txt-color6) ;
  background-color: #ffe2e5;
}

.widget .yellow a{
  color : var(--txt-color29) ;
  background-color: var(--bkg-color115);
}

/* .widget{
  height: 50px ;
} */


/* Factorisé: .stats-container-new.no-hover utilise le même chrome que
   .stats-container-new (mêmes règles ci-dessus) et ajoute juste un
   cursor: initial sur les cellules pour signaler qu'elles ne sont
   pas cliquables. */
.stats-container-new.no-hover li a{
  cursor: initial !important;
}


/* autres */
#filtres .counter {
  display: none;
}


.stats-container:not(.widget-stats .stats-container){
  width:200px;
  min-width:130px;
  }
  .stats-container .text-left{
  height:unset;
  width:unset;
  }
  .stats-container .counter{
  font-size:20px;
  line-height:1;
  }
  .stats-wrapper .stats-container:only-child { 
  border-radius:10px 10px 10px 10px !important;
  -webkit-border-radius:10px 10px 10px 10px !important;
  -moz-border-radius:10px 10px 10px 10px !important;
  -ms-border-radius:10px 10px 10px 10px !important;
  -o-border-radius:10px 10px 10px 10px !important;
  } 
  .stats-wrapper .stats-container:first-child{
  border-radius:10px 0px 0px 10px;
  -webkit-border-radius:10px 0px 0px 10px;
  -moz-border-radius:10px 0px 0px 10px;
  -ms-border-radius:10px 0px 0px 10px;
  -o-border-radius:10px 0px 0px 10px;
  }
  .stats-wrapper .stats-container:last-child{
  border-radius:0px 10px 10px 0px;
  -webkit-border-radius:0px 10px 10px 0px;
  -moz-border-radius:0px 10px 10px 0px;
  -ms-border-radius:0px 10px 10px 0px;
  -o-border-radius:0px 10px 10px 0px;
  }
  .stats-wrapper .stats-container:nth-child(odd), .stats-container:nth-child(even) {
  height: 80%;
  }
  .stats-red, .stats-orange, .stats-green, .stats-gray, .stats-turquoise, .stats-purple, .stats-main, .stats-secondary, .stats-soon-expired, .stats-expired{
  border-radius: .42rem;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .stats-red{
  background-color: var(--bkg-color60);
  }
  .stats-red .counter, .stats-red i.fa, .stats-red .stats-title{
  color: var(--txt-color6) !important;
  }
  .stats-orange{
  background-color: var(--bkg-color77);
  }
  .stats-orange .counter, .stats-orange i.fa, .stats-orange .stats-title{
  color: var(--txt-color29) !important;
  }
  .stats-green{
  background-color: var(--bkg-color80);
  color: var(--txt-color68) !important;
  }
  .stats-green .counter, .stats-green i.fa, .stats-green .stats-title{
  color: var(--txt-color68) !important;
  }
  .stats-gray{
  background-color: var(--bkg-color87);
  color: var(--txt-color9) !important;
  }
  .stats-gray .counter, .stats-gray i.fa, .stats-gray .stats-title{
  color: var(--txt-color9) !important;
  }
  .stats-turquoise{
  background-color: var(--bkg-color61);
  color: var(--txt-color28) !important;
  }
  .stats-turquoise .counter, .stats-turquoise i.fa, .stats-turquoise .stats-title{
  color: var(--txt-color28) !important;
  }
  .stats-purple{
  background-color: #eee5ff;
  color: #a377fd !important;
  }
  .stats-purple .counter, .stats-purple i.fa, .stats-purple .stats-title{
  color: #a377fd !important;
  }

  .stats-main{
  background-color:var(--bkg-color112) !important;        
  }
  .stats-main .counter, .stats-main .stats-title, i.fa.fa-circle.f1{
  color: var(--txt-color28)!important;
  }
  .stats-secondary{
  background-color:var(--bkg-color68) !important;
  }
  .stats-secondary .counter, .stats-secondary .stats-title, i.fa.fa-circle.f5{
  color: var(--txt-color71)!important;
  }
  .stats-soon-expired{
  background-color:var(--bkg-color77) !important;
  } 
  .stats-soon-expired .counter, .stats-soon-expired .stats-title, i.fa.fa-circle.f3{
  color: var(--txt-color29)!important;
  }
  .stats-expired{
  background-color:var(--bkg-color60) !important;
  }
  .stats-expired .counter, .stats-expired .stats-title, i.fa.fa-circle.f4{
  color: var(--txt-color6)!important;
  }

  .stats-disabled *{
  color: var(--txt-color5) !important;
  transition: 0.7s;
  }
  .stats-disabled:hover *{
  color: var(--txt-color11) !important;
  }

  .stats-red:hover, .stats-orange:hover, .stats-green:hover, .stats-gray:hover, .stats-turquoise:hover, .stats-purple:hover, .stats-disabled:hover, .d-block:hover {
      cursor: pointer;
  }

  .stats-disabled{
  /* background-color: #b5b5c3!important; */
  background-color: var(--bkg-color1) !important;
  border-radius: .42rem;
  padding-right: 12px !important; 
  padding-left: 12px !important;
  border: solid var(--bor-color9) ;    
  border-width: 1px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  }

  .stats-container i.fa.fa-circle.f1, .stats-container i.fa.fa-circle.f5, .stats-container i.fa.fa-circle.f3, .stats-container i.fa.fa-circle.f4, .stats-container i.fa.fa-circle-xmark.inac{
    margin-left: 60px !important;
  }
  .stats-container-new{
    width : calc(100% - 54px) !important;
  }
  .stats-container-new-nohover{
    width : calc(100% - 54px) !important;
  }

/* ============================================================ */
/* Responsive: legacy .stats-container / .stats-container-diviser
   Ref #8806                                                     */
/* ============================================================ */

/* --- Tablet / small desktop (max-width: 768px) -------------- */
@media (max-width: 768px) {

  /* The outer flex row that holds two <ul> side-by-side */
  .stats-container-diviser {
    flex-wrap: wrap;
    gap: 8px;
  }
  .stats-container-diviser ul:first-child {
    margin-right: 0 !important;
  }
  .stats-container-diviser ul:last-child {
    margin-left: 0 !important;
  }

  /* Each individual stats card */
  .stats-container:not(.widget-stats .stats-container) {
    width: calc(50% - 8px);
    min-width: 0;
  }

  /* Stats wrapper: allow wrapping, 2 cards per row */
  .stats-wrapper {
    flex-wrap: wrap;
    gap: 8px;
  }
  .stats-wrapper .stats-container {
    flex: 1 1 calc(50% - 8px);
    min-width: 120px;
  }
  .stats-wrapper .stats-container:first-child {
    border-radius: 10px !important;
  }
  .stats-wrapper .stats-container:last-child {
    border-radius: 10px !important;
  }

  /* Numbers block */
  .stats-numbers {
    font-size: 0.9rem;
    gap: 6px;
  }
  .stats-numbers span {
    font-size: 1.2rem;
  }

  /* Participation / activities / members gradient cards */
  .stats-participations,
  .stats-activities,
  .stats-members,
  .stats-taches,
  .stats-dispos {
    padding: 14px;
    border-radius: 12px;
  }

  /* Icon sizing */
  .stats-icon {
    font-size: 1.6rem;
    width: 42px;
    height: 42px;
    padding: 8px;
  }

  /* Title / subtitle text */
  .stats-title, .period-title {
    font-size: 0.85rem;
    padding-left: 6px;
  }

  .stats-container {
    padding: 12px;
  }

  .stats-container .counter {
    font-size: 18px;
  }

  /* Color-coded cards inside stats-container.css */
  .stats-red, .stats-orange, .stats-green, .stats-gray,
  .stats-turquoise, .stats-purple, .stats-main, .stats-secondary,
  .stats-soon-expired, .stats-expired {
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
  }

  /* Circle indicators: reduce hard left margin */
  .stats-container i.fa.fa-circle.f1,
  .stats-container i.fa.fa-circle.f5,
  .stats-container i.fa.fa-circle.f3,
  .stats-container i.fa.fa-circle.f4,
  .stats-container i.fa.fa-circle-xmark.inac {
    margin-left: 20px !important;
  }
}

/* --- Small mobile (max-width: 480px) ------------------------ */
@media (max-width: 480px) {

  /* Single-column: full-width cards */
  .stats-container-diviser {
    flex-direction: column;
  }

  .stats-container:not(.widget-stats .stats-container) {
    width: 100%;
  }

  .stats-wrapper {
    flex-direction: column;
  }
  .stats-wrapper .stats-container {
    flex: 1 1 100%;
  }
  .stats-wrapper .stats-container:first-child,
  .stats-wrapper .stats-container:last-child,
  .stats-wrapper .stats-container {
    border-radius: 10px !important;
  }

  /* Further reduce sizes */
  .stats-numbers {
    font-size: 0.85rem;
    gap: 4px;
  }
  .stats-numbers span {
    font-size: 1.1rem;
  }

  .stats-participations,
  .stats-activities,
  .stats-members,
  .stats-taches,
  .stats-dispos {
    padding: 12px;
    border-radius: 10px;
  }

  .stats-icon {
    font-size: 1.4rem;
    width: 38px;
    height: 38px;
    padding: 6px;
    border-radius: 10px;
  }

  .stats-title, .period-title {
    font-size: 0.8rem;
    padding-left: 4px;
    margin-top: 4px;
  }

  .stats-container {
    padding: 10px;
  }

  .stats-container .counter {
    font-size: 16px;
  }

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

  .stats-red, .stats-orange, .stats-green, .stats-gray,
  .stats-turquoise, .stats-purple, .stats-main, .stats-secondary,
  .stats-soon-expired, .stats-expired {
    padding-right: 8px;
    padding-left: 8px;
    padding-bottom: 8px;
  }

  /* Circle indicators: no extra margin on very small screens */
  .stats-container i.fa.fa-circle.f1,
  .stats-container i.fa.fa-circle.f5,
  .stats-container i.fa.fa-circle.f3,
  .stats-container i.fa.fa-circle.f4,
  .stats-container i.fa.fa-circle-xmark.inac {
    margin-left: 0 !important;
  }
}