:root {
  --probatio: #ad9571;
}


/* Allocation */

.available{
  background-color: #97ca31;
}

.reserved{
  background-color: #3a5237;
}

.retired{
  background-color: #9a7e58;
}


.dropzone {
  width: 100%;
  height: 300px;
  border: 2px dashed #6c757d;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  color: #6c757d;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dropzone:hover {
  background-color: #e9ecef;
}

.carousel-control-next, .carousel-control-prev {
  opacity: 1;
}

/* registre buton */

.registre-btn-group {
  background: #e8e3dc;
  border: 1px solid color(srgb 0.8 0.7584 0.696);
  padding: 40px;
  padding-top: 18px;
  padding-bottom: 18px;
  color: #b1a38f;
}
.registre-btn-group.active, .registre-btn-group:hover {
  color: #1a2142;
  background: #ffffff;
  border: 1px solid color(srgb 0.8 0.7584 0.696);
  border-bottom-width: 0px !important;
}


.table-co2  {
font-size: 14px;
}

/* <!-- status project --> */

.dot {
  display: inline-block;
  width: 8px; /* Taille du point */
  height: 8px; /* Taille du point */
  background-color: #0ac10a; /* Couleur verte */
  border-radius: 50%; /* Rend le point circulaire */
  margin-right: 8px; /* Espacement entre le point et le texte */
  vertical-align: middle; /* Aligne verticalement avec le texte */
}

/* <!-- Bouton 5 : Effet de bordure animée --> */

.btn-outline-probatio {
  --bs-btn-color: #ad9571;
  --bs-btn-border-color: #ad9571;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ad9571;
  --bs-btn-hover-border-color: #ad9571;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ad9571;
  --bs-btn-active-border-color: #ad9571;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ad9571;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ad9571;
  --bs-gradient:none
}



.border-button {
  background-color: #e9f3e5;
  color: #62851c;
  border: 2px solid #97ca31 !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.border-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #97ca31;
  transition: all 0.3s ease;
  z-index: -1;
}



.border-button:hover {
  color: white;
}

.border-button:hover::before {
  width: 100%;
}

/* <!-- Transfert bouton --> */

.transfer-button:hover {
  color: white;
}

.transfer-button {
  background-color: rgba(242, 153, 74, 0.1);
  color: #ce7525;
  border: 2px solid #f2994a !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.transfer-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #f2994a;
  transition: all 0.3s ease;
  z-index: -1;
}

.transfer-button:hover {
  color: white;
}

.transfer-button:hover::before {
  width: 100%;
}

/* <!-- retired bouton --> */

.retired-button:hover {
  color: white;
}

.retired-button {
  background-color: rgba(33, 150, 83, 0.1);
  color: #16703c;
  border: 2px solid #219653 !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.retired-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #219653;
  transition: all 0.3s ease;
  z-index: -1;
}

.retired-button:hover {
  color: white;
}

.retired-button:hover::before {
  width: 100%;
}

/* <!-- retired bouton --> */

.buyer-button:hover {
  color: white;
}

.buyer-button {
  background-color: rgba(54, 92, 245, 0.1);
  color: #365CF5;
  border: 2px solid #365CF5 !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.buyer-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #365CF5;
  transition: all 0.3s ease;
  z-index: -1;
}

.buyer-button:hover {
  color: white;
}

.buyer-button:hover::before {
  width: 100%;
}

/* <!-- Export bouton : Effet de bordure animée --> */

.next-button {
  background-color: rgba(173, 149, 113, 0.1);
  color: #ad9571;
  border: 2px solid #ad9571 !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.next-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #ad9571;
  transition: all 0.3s ease;
  z-index: -1;
}

.next-button:hover {
  color: white;
}

.next-button:hover::before {
  width: 100%;
}

.buy-button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.canvas-container {
  margin-left: 10px;
}
.legend-container {
  max-width: 300px;
}


/* table width col 80/20 */

.table-64-width {
  table-layout: fixed;
}

.table-64-width th {
  padding-left: 20px;
  width: 40%;
}

.table-64-width td {
  padding-left: 20px;
  width: 60%;
}

/* table width col 50/50 */

.table-equal-width {
  table-layout: fixed;
}
.table-equal-width th,
.table-equal-width td {
  width: 50%;
}

/* White txt */

text-white {
  color: white;
}

/* Back bouton */

.back-button {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ad9571;
  background-color: transparent;
  transition: all 0.3s ease;
  overflow: hidden;
}
.back-button:hover {
  width: 120px;
  border-radius: 20px;
}
.back-button i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.back-button:hover i {
  left: -50%;
  opacity: 0;
}
.back-button span {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s ease;
}
.back-button:hover span {
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}


/* radius-32 */

.radius-32 {
  border-radius: 32px;
}


/* Style 4: Ligne avec gradient */
.separator {
  margin: 40px 0;
  text-align: center;
  position: relative;
  color: #ad9571 !important;
}

.separator span {
  position: relative;
  z-index: 1;
  padding: 0 15px;
  font-weight: bold;
  color: #ad9571 !important;
  background-color: #f0f0f0 !important;
}

.separator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #ad9571, transparent);
}
/* ========== Colonnes de hauteur égale avec Bootstrap ==========  */

.equal-height {
  display: flex;
  flex-wrap: wrap;
}
.equal-height > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
.equal-height > [class*='col-'] > * {
  flex-grow: 1;
}

/* ========== Type Users==========  */



/* Badge pour les catégories d'users */
.client-btn {
  color: white;
  background: rgba(116, 112, 184, 0.8);
}

.benef-btn {
  color: white;
  background: rgba(79, 118, 119, 0.8);
}

.dev-btn {
  color: white;
  background: rgba(211, 118, 104, 0.8);
}

.dev-mas {
  color: white;
  background: #FFD700;
}


/* ========== Secteurs CEE ==========  */


:root {
  --color-residential: #3F7149;
  --color-industrial: #551b2a;
  --color-tertiary: #2874A6;
  --color-networks: #DA974C;
  --color-agriculture: #3b2819;
  --color-transport: #6a5d7b;
  --color-stock: #365CF5;
  --color-transfert: #f2994a;
  --color-retired: #219653;
}

/* Badge pour la catégorie Industrial */
.industrial-badge-light {
  background: rgba(85, 27, 42, 0.6); /* Couleur de fond avec transparence */
  color: white; /* Couleur de texte */
}

/* Badge pour la catégorie Residential */
.residential-badge-light {
  background: rgba(63, 113, 73, 0.6);
  color: white;
}

/* Badge pour la catégorie Tertiary */
.tertiary-badge-light {
  background: rgba(40, 116, 166, 0.6);
  color: white;
}

/* Badge pour la catégorie Networks */
.networks-badge-light {
  background: rgba(218, 151, 76, 0.6);
  color: white;
}

/* Badge pour la catégorie Agriculture */
.agriculture-badge-light {
  background: rgba(59, 40, 25, 0.6);
  color: white;
}

/* Badge pour la catégorie Transport */
.transport-badge-light {
  background: rgba(191, 209, 229, 0.6);
  color: white;
}



/* Card catégorie */
.card-residential {
  background-color: var(--color-residential);
  color: white;
  border-radius: 32px;
}

.overlay-gradient-residential {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 10%, var(--color-residential));
  pointer-events: none;
}

.card-industrial {
  background-color: var(--color-industrial);
  color: white;
  border-radius: 32px;
}

.overlay-gradient-industrial {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 10%, var(--color-industrial));
  pointer-events: none;
}

.card-tertiary {
  background-color: var(--color-tertiary);
  color: white;
  border-radius: 32px;
}

.overlay-gradient-tertiary {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 10%, var(--color-tertiary));
  pointer-events: none;
}

.card-networks {
  background-color: var(--color-networks);
  color: white;
  border-radius: 32px;
}

.overlay-gradient-networks {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 10%, var(--color-networks));
  pointer-events: none;
}

.card-agriculture {
  background-color: var(--color-agriculture);
  color: white;
  border-radius: 32px;
}

.overlay-gradient-agriculture {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 10%, var(--color-agriculture));
  pointer-events: none;
}

.card-transport {
  background-color: var(--color-transport);
  color: white;
  border-radius: 32px;
}

.overlay-gradient-transport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 10%, var(--color-transport));
  pointer-events: none;
}


/* ========== Xs badge ==========  */

.btn-xxs {
  padding: 0px 10px;
  font-size: 12px;
}
.btn-xs {
  padding: 7px 15px;
}


/* ========== Logo sidebar ==========  */

.logo-w {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.logo-w:hover {
  opacity: 1 !important;
}

/* ========== Dropddown Years Head ==========  */

.dropdown-menu {
  box-shadow: 0 0 18px rgba(36, 25, 22, 0.38); /* Ajout de l'ombre */
  z-index: 33;
  text-align: right;
}

.dropdown-item:focus, .dropdown-item:hover {
  color: var(--bs-dropdown-link-hover-color);
  background-color: color(srgb 0.4153 0.4497 0.4815);
  color: white;
}

.dropdown-menu {
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 103px;
}

/* ========== cta dashboard ==========  */

.icon-card .icon.dashboard-cta {
  background: rgba(142, 186, 154, 1);
  color: #219653;
}




/* ========== progress bar ==========  */

.progress, .progress-stacked {
  --bs-progress-height: 3rem !important;
  --bs-progress-font-size: 1rem;
  background-color: var(--bs-progress-bg);
  border-radius: var(--bs-progress-border-radius);
}


/* ========== formulaire d'achat ==========  */

.form-col {
  border-radius: 30px;
  background: color(srgb 0.94 0.9306 0.9165 / 0.73);
}

.custom-radio {
  display: none;
}

.custom-radio + label {
  cursor: pointer;
  padding: 5px 10px;
  border: 2px solid rgba(179, 145, 105, 0.45);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.24);
  color: rgba(126, 103, 76, 0.62);
  transition: all 0.3s ease;
}

.custom-radio:checked + label {
  border-color: #b3926a;
  background-color: #b3926a;
  color: white;
}

.custom-radio:hover + label {
  border-color: #b3926a;
  background-color: #b3926a;
  color: white;
}


.custom-radio + label i {
  margin-right: 8px;
}

.project-type-container, .geographic-zone-container {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* Range pour le montant */

 .amount-display {
   font-size: 3rem;
   font-weight: bold;
   color: #b3926a;
   text-align: center;
   margin-bottom: 1rem;
 }

.range-container {
  position: relative;
  padding-bottom: 0rem;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  color: #1487fd;

}

.range-labels span {
  font-size: 0.875rem;
  color: #9b9892;

}

input[type="range"] {
  width: 100%;
}

.range-labels span {
  font-size: 0.875rem;
  color: #6c757d;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 9px;
  outline: none;
  border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #b3926a;
  cursor: pointer;
  border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #b3926a;
  cursor: pointer;
  border-radius: 50%;
}





    /* ========== Pack projects ==========  */




.pack-projet {
  border-width: 10px !important;
  border-style: solid !important;
  border-color: #dddad6;
}

.pack-projet:hover {
  border-width: 10px !important;
  border-style: solid !important;
  border-color: #b6d96c;
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.pack-div {
  padding: 20px;
  background-color: #f8f9fa;
  border: 2px solid #dee2e6;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.2s ease;
}
.pack-div:hover {
  background-color: rgb(250, 250, 250);
  border: 6px solid #b6d96c;
  background-color: #eef3ea;
}
.title {
  font-weight: bold;
  font-size: 20px;
  transition: all 0.2s ease;
}

.title:hover {

  font-weight: bold;
}

.description {
  color: #6c757d;
}

.active-project {
  border: #97ca31 solid 10px;
  border-radius: 5px
}

.inactive-project {
  border: transparent solid 0px;
  border-radius: 5px;
  transition: border-color 0.2s ease, border-width 0.2s ease;opacity 0.2s ease;

}

.inactive-project:hover {
  border-color: #97ca31;
  border-width: 5px;
}


/* ========== underline table ==========  */

.table-id-underline {
  position: relative;
  display: inline-block;
}

.table-id-underline::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: currentColor; /* Utilise la couleur actuelle du texte */
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.table-id-underline:hover::after {
  visibility: visible;
  width: 100%;
}

.am5-layer-30{
  display: none;
}

.btn-carbone-table {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 11px 30px 11px 22px;
  height: 46px;
}

.text-white {
  color: white;
}

/* ========== icon card colored ==========  */

.icon-card-colored {
  display: flex;
  align-items: center;
  padding: 30px 20px;
 border-radius: 7px;
}

.icon-card-colored .icon {
  max-width: 46px;
  width: 100%;
  height: 70px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  margin-right: 20px;
  font-weight: 700;
}

.icon-card-colored .icon.success {
  background: rgba(33, 150, 83, 1);
  color: #ffffff;
}
.icon-card-colored .icon.primary {
  background: rgba(54, 92, 245, 1);
  color: #ffffff;

}
.icon-card-colored .icon.orange {
  background: rgba(242, 153, 74, 1);
  color: #ffffff;
}

/* ========== admin ==========  */


.bg-admin {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #d4cbc3;
  border-image: none;
  padding: 20px !important;
  border-radius: 20px;
  background-color: color(srgb 0.94 0.9306 0.9165 / 0.73);

}

.card-style-admin {
  background: #fff;
  border-radius: 0 15px 15px 15px !important;
  padding: 25px 25px;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

/* admin buton */

/* Style par défaut pour les liens nav-admin */
.nav-admin {
  background-color: rgba(128, 103, 74, 0.08) !important; /* Couleur de fond par défaut */
  padding: 10px 22px;
  border-radius: 10px 10px 0 0 !important;
  text-decoration: none;
  margin-right: 3px;
  border: none !important;
  color: var(--probatio) !important;
}

/* Style spécifique lorsque le lien a la classe "active" */
.nav-admin.active {
  background-color: #ffffff !important; /* Couleur de fond pour l'élément actif */
color: #1a2142 !important;
  font-weight: 800;
  /* Couleur de texte pour l'élément actif */   /* Texte en gras pour indiquer l'état actif */
  border: none !important;
}

/* Optionnel : Effet au survol pour tous les liens */
.nav-admin:hover {
  background-color: rgba(255, 255, 255, 0.74) !important; /* Légère surbrillance au survol */
  color: var(--probatio) !important;
  border: none !important;
}

.btn-admin {
  font-size: 15px;
  padding: 1px 7px 1px 7px;
}