#checkbox {
  display: none;
}

.leaflet-control-zoom.leaflet-bar.leaflet-control {
  margin-right: 9px !important;
  margin-bottom: 12px !important;
  width: 42px !important;
  height: 80px !important;
  border: none !important;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    width: 100% !important;
    height: 48% !important;
    padding: 5px !important;
    border-radius: 5px !important;
}

.leaflet-control-zoom-in {
    margin-bottom: 4px !important;
}

.switch {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 40px;
  height: 35px;
  background-color: rgb(99, 99, 99);
  border-radius: 30%;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(126, 126, 126);
}
.switch svg {
  width: 1.2em;
}

.switch svg path {
  fill: rgb(48, 48, 48);
}

#checkbox.on:checked + .switch {
  border: 2px solid rgb(255, 255, 255);
  background-color: #198754;
}

#checkbox.on:checked + .switch svg {
  filter: drop-shadow(0px 0px 5px #198754);
}

#checkbox.off:checked + .switch {
  border: 2px solid rgb(255, 255, 255);
  background-color: #dc3545;
}

#checkbox.off:checked + .switch svg {
  filter: drop-shadow(0px 0px 5px #dc3545);
}

#checkbox:checked + .switch svg path {
  fill: rgb(255, 255, 255);
}

.close_container {
  position: absolute;
  height: auto;
  width: 98%;
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff !important;
  z-index: 10;
  margin: 2px;
  margin-top: 10px;
}

.green-it {
    background-color: red;
    border-radius: 0px 9px 0 0 ;
    font-size: 12px;
    padding: 2px 4px;
}
.content_list_nav_left_jheo_js {
  margin-top: 40px;
}
.content_list_nav_left_jheo_js .alert_nav_left_slick_active {
  position: relative;
  margin-top: 35px; /* bouton (40px) + marge (16px) = 56px, à ajuster si besoin */
  z-index: 5;
  height:13%
}


.btn_map_reset_search{
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  background-color: #d58c8c;
  border: 2px solid #ff0303;
  margin-left: 5px !important;
}

.btn_map_reset_search:hover{
  background-color: #d58c8c;
  border: 2px solid #ff0303;
}

.item_list_rubrique_nav_left{
  border-color: white !important;
  margin-bottom: 0px !important;
}

/* Responsive amélioré */
@container container_rightPanel(max-width: 768px) {
  .header-container {
    flex-direction: column-reverse;
    align-items: stretch !important;
    gap: 0.5rem;
  }

  .header-left,
  .header-right {
    width: 100% !important;
  }

  .header-left {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .header-right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
    /* flex-wrap: wrap; */
  }

  .payant-box,
  .trial-box,
  .duedate-box {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
  }

  .header-right .d-flex.align-items-center.gap-2 {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0.5rem;
  }
  .btn-tooltip-info:hover {
    background: #15a00f !important;
    box-shadow: 0 4px 12px rgba(26, 186, 18, 0.4);
    transform: scale(1.1);
  }
}

@media screen and (min-height:853px) and (max-height: 1080px) {
  /* Pour le bloc que tu veux scroller */
  #controll_and_menu_on_map {
      overflow-y: auto;
      height: 550px;
  }

  /* Scrollbar verticale */
  #controll_and_menu_on_map::-webkit-scrollbar {
      width: 8px;
  }

  /* Couleur du rail (fond de la scrollbar) */
  #controll_and_menu_on_map::-webkit-scrollbar-track {
      background: #f1f1f1;
  }

  /* Couleur du curseur (barre) */
  #controll_and_menu_on_map::-webkit-scrollbar-thumb {
      background-color: #0d6efd; /* bleu Bootstrap */
      border-radius: 4px;
  }  

  /* Au survol */ 
  #controll_and_menu_on_map::-webkit-scrollbar-thumb:hover {
      background-color: #084298;
  }

}

.nanta_css_pastille.active {
  color: blue !important;
}

.nanta_css_pastille {
  color: #495057;
}

.leaflet-popup-close-button{
    top: 10px !important;
    right: 10px !important;
}

#paginationSearch > ul,
paginationResults {
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center; 
  align-items: center;
}

.pagination li {
  color: inherit;
  float: none; 
  margin: 0;
  padding: 0;
  text-decoration: none;
  background-color: transparent;
  border: none;
}

.recherche-navbar {
  position: relative;
  padding-left: 0px;
}

.content-logo-shearch {
  background-color: #f7f8f8;
  height: 45px;
  margin-left: unset !important;
  border-radius: 25px;
  width: 400px;
}

.container_cart {
  /* width: 75%; */
  height: 100%;
  position: relative;
  display: block;
}

.containerfuild-cart_map {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.resizer {
  /* width: 5px; */
  cursor: e-resize;
  background: #000000;
  height: 100vh;
}


/* Smooth resize and opacity transitions */
.smoothTrasition {
  transition: all 0.4s ease;
}

.container_connexion {
  /* width: 25%; */
  height: 100%;
}

.container_home_iframe {
  width: 100%;
  position: relative;
  height: 100%;
}

.home_iframe {
  width: 100%;
  height: 100%;
  position: sticky;
  top: 0;
  left: 0;
}

.content {
  height: 100%;
  width: 100%;
}

.content_relative {
  position: relative;
}

.tooltip_show_rubrique_list {
  display: block;
  position: absolute;
  top: 57px;
  left: -306px;
  width: 359px;
  background-color: lightgreen;
  color: black;
  padding: 6px;
  border-radius: 5px;
  font-size: 0.9rem;
}

.tooltip_show_rubrique_list:after {
  position: absolute;
  content: "";
  top: -50%;
  right: 6%;
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 15px solid lightgreen;
  border-left: 5px solid transparent;
}

.dataTables_wrapper {
  overflow-x: auto;
}

.icon-connexion div {
  width: 70px;
}

.image_icon_rubrique {
  width: 15px;
  border: 1px solid black;
  border-radius: 10px;
  margin-right: 5px;
}

.rubrique_list_item {
  width: 145px !important;
  height: 50px !important;
  border-radius: 10px !important;
  margin-top: 15px;
}

.rubrique_list_item:hover > .image_icon_rubrique {
  border-radius: 50%;
}

.rubrique_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  /* gap: 10px; */
}
/*editedBy Faniry 19-02-2025 10:55*/
.content_list_rubrique_active {
  width: 50vw;
  /* max-width: 50%; */
  /* text-align: center; */
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-width: none;
}

.single_marker_image {
  margin-left: -12px;
}

.single_marker_poi {
  width: 62px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 15px;
  border: 1px solid black;
}

.single_marker_note {
  padding: 3px;
  font-weight: bolder;
  color: blue;
  font-size: 0.9rem;
}

.single_marker_point {
  height: 15px;
  width: 15px;
  background-color: white;
  position: absolute;
  bottom: -207%;
  transform: rotate(45deg);
  border-bottom: 1px solid black;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid black;
  border-top-left-radius: 100%;
  border-bottom-right-radius: 25%;
}

.single_marker_point_pastille {
  height: 10px;
  width: 10px;
  /* background-color: red; */
  border-radius: 50%;
  position: absolute;
  top: -30%;
  left: 400%;
}

.slick-slide {
  height: 38px !important;
}

.slick-track button {
  min-width: 100px !important;
}

.slick-track {
  padding: 10px 0px !important;
}

.content_list_nav_left {
  position: absolute;
  top: 70px;
  z-index: 9999;
  left: 0.8%;
  height: 82% !important;
  width: 40%;
  max-width: 555px !important;
  overflow: hidden;
  background-color: white;
  border-radius: 10px;
  /* Sert de référence aux @container ciblant les cartes/pagination de la
     liste (voir main.css .card-poi et simplePagination.css) : la largeur
     réelle de ce panneau (40% de #leftPanel, ou 95% sous 471px via
     responsive_map_cmz.css) est ce qui les rend étroits, pas la largeur de
     #leftPanel (container_leftPanel) lui-même. */
  container-type: inline-size;
  container-name: container_listPoi;
}

.list_nav_left {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Colonne flex plutôt que des hauteurs en % figées entre le tableau et le
     pied de pagination (voir .table_body_list_poi et .paginationSearch dans
     simplePagination.css) : avec des % fixes, le pied de pagination n'avait
     droit qu'au reliquat (~14%) quel que soit le contenu réel, et se faisait
     rogner en silence par cet overflow:hidden dès qu'il dépassait (ex: 2
     lignes avec le libellé "Affichage de X à Y sur Z résultats"). En flex,
     le tableau (flex-grow) absorbe tout l'espace restant et défile en
     interne, le pied garde toujours la hauteur que son contenu exige.
  */
  display: flex;
  flex-direction: column;
}

.table_body_list_poi{
  margin-top:35px;
  display:block;
  flex: 1 1 auto;
  min-height: 0;
  overflow:hidden;
}


.content_list_nav_left_jheo_js {
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

/* Quand d-none est enlevé */
.content_list_nav_left_jheo_js:not(.d-none) {
  transform: translateX(0);
}


.content_list_nav_left_jheo_js {
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

/* Quand d-none est enlevé */
.content_list_nav_left_jheo_js:not(.d-none) {
  transform: translateX(0);
}

.body_list_poi{
  height: 100%;
  overflow: scroll;
  display: block;
  overflow-x: hidden;
}

.body_list_poi::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.body_list_poi::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}

.body_list_poi::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4d9c41), to(#19911d), color-stop(0.6, #54de5d));
}

.content_chargement_nav_left {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dataTables_paginate,
.dataTables_info,
.dataTables_length {
  font-size: 0.8rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px;
}

.dataTables_length {
  display: none !important;
}

#list_item_rubrique_active_nav_left_filter {
  width: 100%;
  text-align: start;
  padding-left: 9px;
}

#list_item_rubrique_active_nav_left_filter label {
  width: 100%;
}

#list_item_rubrique_active_nav_left_filter label input {
  width: 72%;
  border-radius: 5px;
}

#list_item_rubrique_active_nav_left_filter label input:focus {
  outline: none;
}

.content_details_rubrique {
  position: absolute;
  top: 14%;
  z-index: 1050;
  right: 5.8%;
  height: 77% !important;
  width: 35%;
  background-color: white;
  border-radius: 5px;
  border-radius: 10px;
  box-shadow: 0px 2px 7px 0px black;
  border-radius: 10px;
  user-select: none !important;
  /* Sert de référence aux @container ciblant la fiche détail (grille
     Groupe/Réseau/Rubrique/Localisation, voir .banque-info-grid plus bas) :
     à 35% (ou 100vw/100% selon le breakpoint), sa largeur réelle est ce qui
     doit piloter le nombre de colonnes de la grille, pas la largeur de
     #leftPanel. */
  container-type: inline-size;
  container-name: container_detailPoi;
}

.details_rubrique {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.content_chargment_details {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.close_content_details_rubrique {
  position: absolute;
  right: 23px;
  z-index: 1000;
  top: 10px;
  font-size: 1.1rem;
  cursor: pointer;
}

/* .rubriqueNameDetail:hover, */
.name_rubrique_nav_left:hover {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}
.rubriqueNameDetail:hover{
  cursor: default;
}

.content_home,
.description,
.left_content_home {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.content_other_detail_rubrique {
  width: 100%;
  height: 50%;
  overflow-x: hidden;
  overflow-y: auto;
}

.content_other_detail_rubrique::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.content_other_detail_rubrique::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}

.content_other_detail_rubrique::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4d9c41), to(#19911d), color-stop(0.6, #54de5d));
}

.tooltip_rubrique_filter {
  display: block;
  position: absolute;
  top: 40px;
  left: 0;
  /* width: 250px; */
  background-color: lightgreen;
  color: black;
  padding: 6px;
  border-radius: 5px;
  z-index: 10;
}

.tooltip_rubrique_filter:after {
  position: absolute;
  content: "";
  top: -25%;
  right: 9px;
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 20px solid lightgreen;
  border-left: 5px solid transparent;
}

.cursor_pointer {
  cursor: pointer;
}

.content_body_filter {
  height: 79vh;
}

/* Panneau banque (année/légende réseaux) : contenu scrollable en interne,
   pour garder le bouton "Annuler les filtres" (qui suit ce bloc dans le
   DOM) visible sous le contenu au lieu d'être recouvert par un dépassement
   de hauteur. Scopé à la banque uniquement via .content_body_filter_banque
   (ajoutée par UIRubriqueBanque.js). */
.content_body_filter.content_body_filter_banque {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}

/* Rapproche le bouton "Annuler les filtres" du contenu pour la banque
   uniquement : .content_body_filter garde une hauteur fixe (79vh, voir
   ci-dessus) même quand le contenu banque (plus court que les autres
   rubriques) ne la remplit pas, ce qui laissait le bouton loin en dessous. */
.content_body_filter_banque + nav {
  margin-top: -40px;
}

.cancel_filter {
  /* font-size: 1rem; */
  text-decoration: underline;
  color: blue;
}

.cta_to_filter {
  border-radius: 20px !important;
}

.badge_position_filter {
  position: absolute !important;
  top: 0 !important;
  left: 12% !important;
  font-size: 0.6rem;
  font-style: italic;
}

.badge_position_filter_navbar {
  position: absolute !important;
  top: 0px !important;
  left: 19% !important;
  font-size: 0.6rem;
  font-style: italic;
}

.color_blue {
  color: blue;
}

.content_filter_checkbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  column-gap: 25px;
}

.padding_header {
  padding-left: 1.5rem;
}

.card_mini_chargement {
  width: 39px;
  margin: auto;
  position: absolute;
  left: 50%;
  top: 55px;
  transform: translate(-50%, 0%);
}

.card_mini_chargement .containt {
  height: 13%;
}

.card_mini_chargement .containt .word {
  font-size: 13px;
}

.hover_underline {
  user-select: none;
  cursor: pointer;
}

.hover_underline:hover {
  text-decoration: underline blue;
  color: blue;
}

.user_select_none {
  user-select: none;
}

.hover_underline_gray {
  color: gray;
  user-select: none;
  cursor: pointer;
}

.hover_underline_gray:hover {
  text-decoration: underline gray;
}

.folder_chargement {
  width: 15px;
  margin: auto;
}

.folder_chargement .containt {
  height: 1%;
}

.folder_chargement .containt .word {
  font-size: 13px;
  color: white;
  padding: 1px;
}

.content_list_legende_icon {
  overflow-x: hidden;
  overflow-y: auto;
}

.content_list_legende_icon::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.content_list_legende_icon::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}

.content_list_legende_icon::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4d9c41), to(#19911d), color-stop(0.6, #54de5d));
}

.content_right_side_body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 70%;
  border-bottom: 1px solid black;
  padding-bottom: 5px;
}

.btn_cancel_filter_for_all {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.table_info_marker::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.table_info_marker::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}

.table_info_marker::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4d9c41), to(#19911d), color-stop(0.6, #54de5d));
}

.alert_info_rubrique {
  transform: translateX(120%);
}

.alert_info_rubrique_show {
  -webkit-animation: anninmation_show_info_rubrique 1000ms forwards;
  animation: anninmation_show_info_rubrique 1000ms forwards;
}

.fa_solide_info_rubrique {
  position: fixed;
  top: 5px;
  right: 10px;
  font-size: 0.8rem;
  font-weight: bolder;
  cursor: pointer;
}

@keyframes anninmation_show_info_rubrique {
  0% {
    transform: translateX(120%);
  }
  
  100% {
    transform: translateX(0%);
  }
}

/* identification par couleur */

.dark_green {
  border-color: #226218 !important;
  color: white !important;
}

.bg_dark_green {
  background-color: #226218 !important;
  color: #226218 !important;
}

.ligth_green {
  border-color: #a8fcae !important;
  color: white !important;
}

.bg_ligth_green {
  background-color: #a8fcae !important;
  color: #9feca4 !important;
}

.ligth_purple {
  border-color: rgb(252, 141, 252) !important;
  color: white !important;
}

.bg_ligth_purple {
  background-color: rgb(252, 141, 252) !important;
  color: rgb(252, 141, 252) !important;
}

.dark_purple {
  border-color: rgb(99, 11, 99) !important;
  color: white !important;
}

.bg_dark_purple {
  background-color: rgb(99, 11, 99) !important;
  color: rgb(99, 11, 99) !important;
}

/* end idenfitication */

.validation_check {
  font-weight: bold;
  cursor: pointer !important;
}

.validation_tooltip {
  display: block;
  position: absolute;
  top: -17px;
  left: 20px;
  color: black;
  padding: 6px;
  border-radius: 5px;
  font-size: 0.6rem;
  cursor: pointer !important;
  user-select: none !important;
  width: 300px !important;
  font-weight: bold;
  line-height: 13px;
}

/* Clone "porté" dans <body> pendant le survol (voir showMsgTooltipValidation
   dans map_cmz_fonction.js) : échappe à l'overflow: hidden de la liste des
   rubriques (.content_list_nav_left / .list_nav_left / .table_body_list_poi)
   qui rognait sinon le tooltip et rendait une partie du texte illisible, et
   reste au premier plan devant l'en-tête / panneaux latéraux / pied de page
   (même z-index que .poi-tooltip-elevated, voir plus bas). */
.validation_tooltip.validation_tooltip_portal_jheo_js {
  position: fixed;
  top: auto;
  left: auto;
  z-index: 100000 !important;
  max-width: calc(100vw - 16px);
}

.validation_tooltip:after {
  position: absolute;
  content: "";
  top: 45%;
  left: -7px;
  border-top: 4px solid transparent;
  border-right: 5px solid #302d2d;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
}

.color {
  color: #ffa500;
}

.admin_cmz {
  border-color: #85dc14 !important;
  color: white !important;
}

.admin_cmz_bg {
  background: #85dc14 !important;
}

.validator_cmz {
  border-color: #27affe !important;
  color: white !important;
}

.validator_cmz_bg {
  background: #27affe !important;
}

.partisant_cmz {
  border-color: #3af5e2 !important;
  color: white !important;
}

.partisant_cmz_bg {
  background: #3af5e2 !important;
}

.source_info {
  border-color: #ffa500 !important;
  color: white !important;
}

.source_info_bg {
  background: #ffa500 !important;
}

.svg_badge_check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
}

.btn_light_active {
  background-color: rgb(73, 117, 213) !important;
  color: white !important;
  border-radius: 6px;
  border-top-right-radius: 0px;
}

.alert_nav_left_slick_active {
  font-size: 0.8rem;
  padding: 8px;
  margin: 2px 10px;
}

.fs_alert_nav_left_slick_active {
  position: absolute;
  left: 96%;
  right: 4%;
  top: 10%;
  cursor: pointer;
}

.cj {
  padding-top: 0.3rem !important;
}

.x_slick_active {
  font-weight: bolder;
  color: #fa0000;
  font-size: 13px;
  cursor: pointer;
  position: absolute;
  top: -5px;
  right: -3px;
}

.content_header_right_side {
  position: relative !important;
}

.content_logo_right_side {
  display: block;
  position: absolute;
  top: -150%;
  right: 0;
  left: 0;
}

.logo_right_side {
  font-size: 3rem !important;
  text-align: center !important;
}

.title_right_side {
  font-size: 1.2rem !important;
}


/***faniry map responsive ***/


.nav-bar-faniry-centrale {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  background: white;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  z-index: 1555;
}

.nav-bar-faniry-centrale button {
  background: none;
  border: none;
  /* font-size: 16px !important;  */
  cursor: pointer;
}

.poi_name_search{
  position: absolute;
  top: 11px;
  left: 30px;
  padding: 6px;
  white-space: nowrap;
  color: #fff;
  font-weight: 600;
  border-radius: 0px 8px 8px 10px;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
  background-color: white;
}

.grid-cluster-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(102,126,234,0.95);
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid white;
}

.mycluster_dép{
  width: 60px !important;
  height: 35px !important;
}

.mycluster_dép::after {
  bottom: -32%;
  /* bottom: -101%; */
  /* left: 26%; */
}

.header_bound_count_dép{
  width: 60px !important;
}


.header_bound_count{
  /* font-size: 10px; 
  width: 135px; 
  margin: 0; 
  text-align: center; 
  font-weight: bold; 
  color: #fff;  */
  /* background-color:rgb(18, 160, 136);  */
  /** Add by Elie*/
  /* background-color:rgb(46, 139, 122); 
  border-radius: 6px 6px 0 0 ; 
  position: absolute; 
  top: -10px; 
  left: 50%; 
  transform: translateX(-50%); */
}

.header_bound_count {
  font-size: 10px;
  width: fit-content;
  min-width: 60px; /* évite que ce soit trop étroit avec peu de texte */
  max-width: 135px; /* évite que ça déborde trop avec beaucoup de texte */
  padding: 2px 10px; /* remplace la largeur fixe, donne de l'air autour du texte */
  margin: 0;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background-color: rgb(46, 139, 122);
  border-radius: 6px 6px 0 0;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; /* empêche le texte de passer à la ligne et de casser la forme */
}

.header_bound_count_com, .header_bound_count_quartier{
  top: -15px; 
  padding : 2px;
}

/*ecran telephone**/
@media screen and (max-width:480px) {
  .texte-faniry {
    display: none !important;
  }
  
  .menu-item-faniry i {
    font-size: 10px !important;
  }
  
  .menu-item-faniry.login i {
    font-size: 10px !important;
    padding: 7px !important;
  }
  
  .menu-item-faniry.logout i {
    font-size: 10px !important;
    padding: 7px !important;
  }
  /* .nav-bar-faniry-centrale{
    bottom: 42px;
    
  } */
  .content_details_rubrique {
    overflow: scroll;
    position: absolute;
    top: 60vh;
    z-index: 1999;
    left: 0;
    /*bottom:0;*/
    height: 50% !important;
    width: 100vw;
    padding: 25px;
    background-color: white;
    border-radius: 5px;
    border-radius: 10px;
    box-shadow: 0px 2px 7px 0px black;
    border-radius: 10px;
    user-select: none !important;
  }
  
  .content_cart_map-respons {
    width: 100%;
  }
  
  .content-logo-shearch {
    z-index: 999;
  }
  
  .expand-me {
    display: block !important;
  }
  
  .dock-detail-rubrique {
    display: none !important;
  }
  
  .android-faniry {
    bottom: 7.3vh;
    height: 40px !important;
    padding: 10px !important;
  }
}

@media (min-width:1025px) and (max-width:1366px) {
  .android-faniry {
    bottom: 20vh;
    height: 40px !important;
    padding: 10px !important;
  }
  
  .texte-faniry {
    display: none !important;
  }
  
  .menu-item-faniry i {
    font-size: 10px !important;
  }
  
  .menu-item-faniry.login i {
    font-size: 10px !important;
    padding: 7px !important;
  }
  
  .menu-item-faniry.logout i {
    font-size: 10px !important;
    padding: 7px !important;
  }
}

@media screen and (min-width:988px) and (max-width:1399px) {
  
  .menu-item-faniry {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  
  .menu-item-faniry i {
    font-size: 20px !important;
  }
}
/*ecran tablette et smartphone**/
@media screen and (min-width:296px) and (max-width:988px) {
  .content_body .content_list_nav_left.content_list_nav_left_jheo_js {
    z-index: 10000;
  }
  
  .my-logo-nav-bar {
    width: 10rem !important;
    height: 60px !important;
  }
  
  .override-fa-search {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .texte-faniry {
    display: none !important;
  }
  
  #footercont {
    height: 100%;
    overflow: scroll;
  }
  
  .menu-item-faniry i {
    font-size: 20px !important;
  }
  
  .menu-item-faniry.login i {
    font-size: 10px !important;
    padding: 7px !important;
  }
  
  .menu-item-faniry.logout i {
    font-size: 10px !important;
    padding: 7px !important;
  }
  
  .menu-item-faniry {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  
  .expand-me {
    display: block !important;
  }
  
  .dock-detail-rubrique {
    display: none !important;
  }
  
  .android-faniry {
    bottom: 15vh;
    height: 40px !important;
    padding: 10px !important;
  }
  
  #logo_cmz_jheo_js {
    display: none !important;
  }
  
  #logo_cmz_jheo_js_mobile_faniry {
    display: block !important;
    position: relative;
    top: -1.9vh;
  }
  
  .mt-neg-125 {
    margin-top: -80px !important;
  }
  
  .rm_mt_sm {
    margin-top: -0 !important;
  }
}

/* Tablette (au-delà du plein écran téléphone géré par max-width:480px
   ci-dessus) : sorti du bloc (min-width:296px)-(max-width:988px) partagé
   avec les règles ci-dessus, où il s'appliquait AUSSI sous 480px et écrasait
   silencieusement, via l'ordre de cascade, les valeurs top/height du bloc
   téléphone (dead code) — les deux se contredisaient sans qu'aucune ne soit
   jamais vraiment appliquée en dessous de 480px. */
@media screen and (min-width:481px) and (max-width:988px) {
  .content_details_rubrique {
    overflow: scroll;
    position: absolute;
    top: 14%;
    z-index: 1999;
    left: 0%;
    height: 90vh !important;
    width: 100vw;
    background-color: white;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0px 2px 7px 0px black;
    user-select: none !important;
  }
}

.expand-me-to-all-screem {
  width: 100vw !important;
  height: 100vh !important;
  top: 0 !important;
}

.expand-me {
  position: absolute;
  right: 55px;
  top: 10px;
  fill: #1111fe;
  z-index: 10;
  cursor: pointer;
  display: none;
}

.dock-detail-rubrique {
  right: 90px !important;
}

.gear-change-width {
  width: 100vw !important;
}

.map-change-width-fa {
  width: 0 !important;
}

.menu-item-faniry:hover i,
  .menu-item-faniry:hover svg {
  color: white;
  transform: scale(1.15);
}

.menu-item-faniry:hover svg {
  background: #007bff;
}
/* Style spécifique pour l'icône de connexion */
.menu-item-faniry.login i {
  background: #ff5733;
  color: white;
  font-size: 15px;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0px 3px 6px rgba(255, 87, 51, 0.4);
}
.menu-item-faniry.logout i {
  background: #33adff;
  color: white;
  font-size: 15px;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0px 3px 6px rgba(206, 202, 201, 0.4);
}
.menu-item-faniry.login:hover i {
  background: #e64a2e;
  transform: scale(1.2);
}
#logo_cmz_jheo_js_mobile_faniry {
  display: none;
}
/**end faniry responsive*/

/**create by @marc**/
/**modal welcom **/
.welcome-modal {
  z-index: 150000;
}

#welcomeModal header img {
  display: block;
  margin: 0 auto 20px;
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#welcomeModal .modal-content {
  background: #f8f9f7;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  border: none;
}

.welcome-modal-body {
  font-family: "Montserrat", sans-serif;
  line-height: 1.6;
  color: #1d1d1b;
  margin: 0 auto;
  padding: 0;
}

.welcome-nav-buttons {
  position: fixed;
  z-index: 1000;
}

.bouton-action {
  background-color: #d61414;
  color: white;
  border-radius: 5px;
  font-size: 14px;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.bouton-action:hover {
  background-color: #fa1515;
  color: white;
}

#welcomeModal header {
  background-color: #014421;
  color: white;
  text-align: center;
  padding: 40px 40px;
}

#welcomeModal header h1 {
  font-size: 3.8em;
  margin: 0;
  font-weight: 800;
}

#welcomeModal .tagline {
  font-size: 1em;
  font-style: italic;
  margin-top: 10px;
  color: #f2c100;
}

#welcomeModal section {
  padding: 24px 20px;
  margin: auto;
}
#welcomeModal h1 {
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  unicode-bidi: isolate;
}

#welcomeModal h2 {
  font-size: 2em;
  color: #014421;
  text-align: center;
  margin-bottom: 40px;
  display: block;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  unicode-bidi: isolate;
}

.welcome-enemy-title {
  font-size: 1.2em !important;
}

.welcome-enemy-title-h1{
  text-align: center;
}

#welcomeModal h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  unicode-bidi: isolate;
}

.welcome-feature-grid,
.welcome-communities-grid,
.welcome-values-list {
  display: grid;
  gap: 30px;
}

.welcome-feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.welcome-feature-card,
.welcome-community-card,
.welcome-value-item {
  background-color: white;
  border-left: 5px solid #014421;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.welcome-value-enemy{
  background-color:#d69e97;
  border-radius: 12px;
  padding: 41px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  width: 100%;
}

.welcome-feature-title {
  color: #f2c100;
  font-weight: 600;
  margin-bottom: 10px;
}

.welcome-communities-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.welcome-benefits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.welcome-benefit-item {
  background-color: #014421;
  color: white;
  padding: 8px 15px;
  border-radius: 50px;
  font-size: 0.85em;
}

.welcome-values-list {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.welcome-enemy-section {
  color: white;
  padding: 40px 20px;
  text-align: center;
}

.welcome-modal footer {
  background-color: #014421;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 0.9em;
}

/* footer {
  margin-top: 50px;
  text-align: center;
  color: #7f8c8d;
  padding: 20px;
  border-top: 1px solid #ecf0f1;
} */
.modal-head-fa-ma {
  position: relative;
  height: 10%;
}
.close-fa-Ma {
  position: absolute;
  
  right: 2%;
}

.welcome-header-content-ma {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-grow: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.welcome-header-text-ma {
  font-size: 22px;
  color: #f00b0b;
  margin: 0;
  font-weight: bold;
}


/**marc resposif modal-welcome**/
@media screen and (max-width:1200px) {
  
  #welcomeModal header h1{
    font-size: 2.8em;
  }
  
  .welcome-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .communities-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .values-list {
    flex-direction: column;
    align-items: center;
  }
  
  .value-item {
    margin-bottom: 20px;
  }
  
  
  .benefit-item {
    width: 80%;
    text-align: center;
  }
  .close-fa-Ma {
    position: relative;
    top: 0;
    left: 97%;
  }
  
  #welcomeModal section {
    padding: 25px 20px;
    margin: auto;
  }
  
  .modal-head-fa-ma {
    position: relative;
    height: 9%;
  }
  
}
@media screen and (max-width:990px){
  #welcomeModal header h1{
    font-size: 2.2em;
  }
}

@media screen and (max-width:768px) {
  
  
  .welcome-modal-body {
    width: 100%;
  }
  
  #welcomeModal section {
    padding: 20px 20px;
    margin: auto;
  }
  
  .welcome-title {
    font-size: 2em;
  }
  
  .welcome-section-title {
    font-size: 1.5em;
  }
  
  .welcome-tagline,
  .welcome-subtagline {
    font-size: 1.2em;
  }
  
  .welcome-feature-grid {
    grid-template-columns: 1fr;
  }
  
  .welcome-feature-card {
    padding: 20px;
  }
  
  .benefits-list {
    flex-direction: column;
    align-items: center;
  }
  
  .benefit-item {
    width: 80%;
    text-align: center;
  }
  
  .modal-head-fa-ma {
    transform: translateX(-10px);
    height: 8% !important;
  }
  
  .enemy-section h2 {
    font-size: 1.2em;
  }
  
  .welcome-header {
    display: block !important;
  }
  .welcome-title {
    flex: 1;
    text-align: center;
  }
  
  .welcome-header-content-ma {
    flex-direction: column;
    gap: 10px;
  }
  
  .welcome-header-text-ma {
    display: none;
  }
}


@media screen and (max-width:480px) {
  .welcome-modal-body {
    width: 100%;
  }
  
  #welcomeModal header h1 {
    font-size: 2em;
    margin: 0;
    font-weight: 800;
  }
  
  #welcomeModal h2 {
    font-size: 1.5em;
  }
  
  .welcome-title {
    font-size: 1.8em !important;
  }
  
  .welcome-section-title {
    font-size: 1.3em;
  }
  
  .welcome-tagline,
  .welcome-subtagline {
    font-size: 1em;
  }
  
  .welcome-header {
    margin-bottom: 20px;
  }
  
  .welcome-feature-section {
    padding: 15px;
  }
  
  .community-card {
    padding: 15px;
  }
  
  .enemy-section {
    padding: 20px;
  }
  
  footer {
    font-size: 0.9em;
  }
  
  #welcomeModal header h1 {
    font-size: 1.7em;
  }
  
}


/* Animations and Interactions */
.welcome-feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.welcome-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.benefit-item {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.benefit-item:hover {
  background-color: #2980b9;
  transform: scale(1.05);
}

.value-item {
  transition: transform 0.3s ease;
}

.value-item:hover {
  transform: translateY(-5px);
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Sticky Header */
.welcome-header {
  top: 0;
  z-index: 100;
  padding: 20px 0;
}

/* Section Spacing */
section {
  scroll-margin-top: 100px;
}

/* Accessibility
:focus {
  /* outline: 2px solid #3498db;
  outline-offset: 2px; 
} */

.close-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #e74c3c;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 1000;
}

.close-btn:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.close-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.close-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

/* Style pour la case à cocher "Ne plus afficher" */
.hide-notification {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 5px;
  display: inline-block;
}

.hide-notification label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 20px;
  color: #ef0808;
}

.hide-notification input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: relative;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 2px solid #eb0a0a;
  border-radius: 4px;
  margin-right: 10px;
  transition: all 0.3s ease;
  color: #eb0a0a;
}

.hide-notification input:checked ~ .checkmark {
  background-color: #eb0a0a;
  border-color: #eb0a0a;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.hide-notification input:checked ~ .checkmark:after {
  display: block;
}

.hide-notification label:hover input ~ .checkmark {
  background-color: #f0f0f0;
}

.hide-notification label:hover input:checked ~ .checkmark {
  background-color: #eb0a0a;
}

@media screen and (min-width:2560px) {
  .welcome-modal-body {
    width: 100%;
  }
}

/**end modal welcom**/


/*** Style CGU */
/* Style général du footer */
#footer_logo_fa {
  transform: rotate(356deg); /* ou -45deg, etc. */
  transform-origin: top right;
}
/* .cgu {
  position: relative;
  top:-250px;
  bottom:0;
  z-index: 1554;
  background-color: #0D3F3C;
  /* overflow-y: scroll !important;
} */
.cgu {
  position: sticky; /* le vrai truc à changer */
  left: 0;
  width: 100%;
  height: 210px; /* hauteur par défaut déployée */
  background-color: #043a36; /* exemple */
  z-index: 999;
  transition: height 0.3s;
  top:100vh;
}
/* Styles des liens */
.nav-link.custom-link {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-link.custom-link:hover {
  color: gold;
}

/* Responsivité pour les petites tailles d'écran (mobile-first) */
@media (max-width:767px) {
  .date-ral {
    font-size: .78rem !important;
  }
  
  .cgu .d-flex {
    flex-direction: column;
    align-items: center;
  }
  
  .cgu .col-12 {
    margin-bottom: 1rem;
    /* Espacement pour les éléments */
  }
  
  .cgu .fw-bold {
    font-size: 20px;
    /* Réduire légèrement la taille du titre */
  }
  
  .cgu .nav-link.custom-link {
    font-size: 16px;
    /* Taille du texte pour les petits écrans */
  }
  
  .cgu .btn {
    font-size: 14px;
    /* Taille du bouton */
    padding: 0.5rem 1rem;
  }
}

/* Responsivité pour les écrans larges (1024px à 1336px) */
@media (min-width:768px) and (max-width:1336px) {
  .cgu .riffle {
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
  }
  
  .list-items-fa {
    flex-direction: column !important;
    justify-content: space-between;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  
  .cgu .col-12 {
    margin-bottom: 0;
  }
  
  .cgu .fw-bold {
    font-size: 24px;
  }
  
  .cgu .nav-link.custom-link {
    font-size: 18px !important;
  }
  
  .cgu .btn {
    font-size: 18px;
    padding: 0.75rem 1.25rem;
  }
}

/* Responsivité pour les écrans plus larges (au-delà de 1336px) */
@media (min-width:1336px) {
  .cgu .d-flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .cgu .col-12 {
    margin-bottom: 0;
  }
}

#footerbuttondown {
  background-color: #0D3F3C;
  color: #f5061e;
  border-color: #fff;
  font-size: 39px;
  width: 41px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  top: -20px;
  border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
}

#footerbuttonup {
  background-color: #0D3F3C;
  color: #f5061e;
  border-color: #fff;
  font-size: 39px;
  width: 41px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  top: -60px;
  border-radius: 5px;
  border-radius: 5px;
  visibility: hidden;
  cursor: pointer;
}

.nav-bar-map-fa {
  position: sticky;
  width: 100%;
  background-color: #0d3f3c;
  left: 0;
  right: 0;
  top: 0;
}

.nav-item .nav-link:not(.nanta_css_pastille) {
  color: #ffff !important;
}

.logo-container {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #0d3f3c;
  font-family: Arial, sans-serif;
}

.logo-icon {
  width: 20px;
  height: 20px;
  background-color: #74b92d;
  /* vert clair */
  transform: rotate(45deg);
  /* penché */
  margin-right: 10px;
}

.logo-text {
  font-size: 24px;
  color: white;
  font-weight: bold;
}

.logo-text .my {
  color: #74b92d;
  /* texte "my" en vert */
}

.my-logo-nav-bar {
/*  width: 12rem !important;*/
  height: 100%;
  cursor: pointer;
}

/**serach bar*/
.content-logo-shearch {
  background-color: #0d3f3c;
  display: flex;
  justify-content: center;
}

.recherche-navbar {
  width: 100%;
  max-width: 900px;
  background-color: white;
  padding: 0rem 0.5rem;
}

.input_search_key_where,
.input_search_key_what{
  border: 1px solid white;
}

.input_search_key_what{
  border-right : 1px solid #0d3f3c;
}

.input_search_key_what:focus{
  border-right : 1px solid #0d3f3c !important;
}

.btn_submit_search_navbar:hover{
  color: black
}

.text-map-secondary{
  color : #0d3f3c
}


.bar-de-recherche {
  display: flex;
  align-items: center;
  justify-content: end;
  flex-wrap: wrap;
  gap: 4px;
}

.input-recherche-navbar {
  /* min-width: 165px;
  width: 160px; */
  /* flex: 1; */
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 14px;
  transition: border-color 0.3s ease;
  width: 43%;
}

.input-recherche-navbar:focus {
  outline: none;  /* Supprime l'effet de surbrillance par défaut */
  border: none;   /* Supprime la bordure */
  box-shadow: none; /* Supprime les ombres */
}

.content_relative {
  position: relative;
}

/* .tooltip_show_rubrique_list {
  position: absolute;
  top: 110%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
} */

.fa_solid_icon_nav_left_jheo_js {
  transition: transform 0.3s ease;
}

.menu-item-faniry {
    border: 2px solid white;
  color: white;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  background-color: #0d3f3c !important;
    padding: 0.5rem;
    border-radius: 5px;
}

.menu-item-faniry:hover {
  transform: scale(1.1);
}

.menu-item-faniry i {
  font-size: 20px;
}

.menu-item-faniry.recherche i {
  color: white;
}

.menu-item-faniry.connexion i {
  color: yellow;
  /* Pour l'icône utilisateur */
}

.menu-item-faniry.menu i {
  color: white;
}

.faniry_custom_pos_rubrique {
  position: relative !important;
}
/**end*/
/**end  CGU**/

/**choose base map */
.leaflet-left,
.leaflet-right {
  bottom: 0 !important;
  left: 0 !important;
}

.leaflet-right {
  /* position: sticky !important; */
}

.leaflet-left {
  position: fixed !important;
}

.basemap-menu {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  /* overflow: hidden; */
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
  transform: scale(1);
  /* pointer-events: none; aza adala pory oa*/
}

.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}
.basemap-option {
  padding: 12px 18px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.basemap-option:last-child {
  border-bottom: none;
}

.basemap-option:hover {
  background-color: #f2f2f2;
}
.basemap-option-image {
  height: 80px !important;
}
.basemap-option.tiles-selected {
  background-color: #74b92d !important;
  color: white !important;
  border-radius: 5px !important;
  padding: 10px !important;
  font-weight: bold !important;
}
/**end */

.none_width{
  width: 0%;
}

.leftPanel_width{
  width: 50%;
}

.rightPanel_width{
  width: 50%;
}

.full_screen_width{
  width: 100%;
}

.content_entete_cta_connexion{
  display: block;
}

/* ≥ 1400px — très grands écrans */
@media (min-width:1400px) {
  /* styles pour écrans très larges */
}

@media screen and (max-width:1440px){
  
  .my-logo-nav-bar {
    width: 8rem !important;
    height: 51px !important;
  }
  
}

/** NANTENAINA */
@media screen and (max-width:768px) {
  .content_img_resto_resp {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  /* .content_btn_avis button{
    margin-top: 5px;
  } */
  
  .content_details_rubrique .fa-search-elie {
    width: 36px;
    height: 36px;
  }
  
  .content_details_rubrique .img_other_resto_icon {
    margin: 5px !important;
  }
  
  .content_details_rubrique.content_details_rubrique_jheo_js {
    padding: 0px !important;
    z-index: 10001;
  }
  
  .content_detail_resp_nanta {
    top: 7% !important;
  }
  
  .content_details_rubrique.content_details_rubrique_jheo_js > .details_rubrique {
    padding: 0px !important;
  }
  
  .content_other_detail_rubrique {
    height: 70% !important;
  }
  
  .detail_marche_responsive,
  .detail_ferme_responsive {
    margin-top: 16px !important;
    height: 70%;
    overflow-y: scroll;
  }
  
  .ferme_btns_resp {
    padding: 7px 7px !important;
  }
  
  .btn_avis_marche_resp {
    min-width: 110px;
  }
  
  .content_btn_avis {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center !important;
  }
  
  .content_btn_avis > * {
    flex: 0 0 auto;
  }
  
  /* Optionnel pour une meilleure UX */
  .content_btn_avis::-webkit-scrollbar {
    height: 6px;
  }
  
  .content_btn_avis::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }
  
  .content_btn_avis::-webkit-scrollbar-track {
    background: transparent;
  }
  
  /* .content_img_resto_resp::-webkit-scrollbar {
    height: 6px;
  }
  
  .content_img_resto_resp::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }
  
  .content_img_resto_resp::-webkit-scrollbar-track {
    background: transparent;
  } */
  
  .blockquote-footer.cmz-adresse {
    margin-bottom: opx !important;
  }
  
  .row_content_tribu_pastille_jheo_js {
    margin-bottom: opx !important;
    margin-top: 0.5rem !important;
  }
  
  /* .content_legende.content_legende_jheo_js{
    margin-top: 0px !important;
  } */
  
  .swal-footer {
    padding: 5px 5px;
  }
  
  .video-wrapper {
    width: 100%;
  }
  
}

@media screen and (max-width:294px) {
  .logo-container {
    padding: 6px 6px !important;
  }
}

@media screen and (max-width:387px) {
  .content_btn_avis {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start !important;
  }
}

@media screen and (max-width:1000px) {
  .record {
    top: 121px !important;
    right: 12px !important;
  }
  .swal-overlay{
    z-index:99999 !important;
  }
}

/** END NANTENAINA */

/** Antonius */
@media screen and (max-height:852px) {
  #controll_and_menu_on_map{
    display: flex !important;
    flex-direction: row-reverse !important;
    margin-top: 0 !important;
  }
  #external-links{
    margin-top: 0 !important;
    margin-right:5px  ;
  }
}
/** END Antonius */

/**faniry new maj encore du responsive 1310px*/
@media (min-width:768px) and (max-width:988px) {
  
  /* .cta_connexion_navbar{
    background-color: white;
    clip-path: circle(50%);
    margin-left: 10px;
    width: 30px;
  } */
  
}
@media (min-width:989px) and (max-width:1399px) and (max-height:1035px){
  /* .input-recherche-navbar {
    min-width: 150px !important;
  } */
  
}


@media  (max-height:765px){
  
  #controll_and_menu_on_map{
    height: 50vh !important;
  }
  
  #rubrique-controls{
    overflow-y: scroll !important;
    overflow: visible !important;
  }
  
  #external-links{
    overflow-y: scroll !important;
  }
}

@media (max-width:1439px){
  #controll_and_menu_on_map{
    display: flex !important;
    flex-direction: row-reverse !important;
    margin-top: 0 !important;
  }
  
}

@media (min-width:768px) and (max-width:1439px){
  .leaflet-top.leaflet-right{
    transform: translateY(16vh) !important;
  }
  
  .faniry-responsive{
    
    padding:0.5rem !important;
  }
  .faniry-rub-list-resp{
    padding:0.39rem !important;
  }
  .tv-chat {
    display: flex !important;
  }
  
  #external-links{
    margin-top: 0 !important;
    margin-right:5px  ;
  }
}

@media (min-width:1440px) and (max-width:1720px){
  .faniry-responsive{
    margin-left: 0 !important;
    padding:0.5rem !important;
  }
  
  .faniry-rub-list-resp{
    padding:0.39rem !important;
  }
  
  .leaflet-top.leaflet-right{
    transform: translateY(4vh) !important;
  }
}

@media (min-width:1720px) {
  .faniry-responsive{
    padding: 0.5rem 0.5rem !important;
  }
}

@media  (max-width:764px) {
  .tv-chat{
    right: -2vw !important;
  }
}
@media  (min-width:768px){
  .tv-chat{
    right: -20vw !important;
  }
}

/**end*/

.content_form_search_and_all_btn{
  display: block;
}

.faniry-responsive {
  width: 11%;
}

.faniry-collapse-custom{
  flex-direction: column;
} 

@container container_leftPanel (max-width:990px){
  .texte-ma
  {
    display: none !important;
  } 
}


/* Positionner la cloche */
.notif-bell {
  position: absolute;
  top: -6px;
  right: 0px;
  transform-origin: top center; /* pivot au sommet pour l’effet balancier */
  animation: ring 1.2s infinite;
}

/* Animation effet de cloche */
@keyframes ring {
  0%   { transform: rotate(0); }
  10%  { transform: rotate(15deg); }
  20%  { transform: rotate(-15deg); }
  30%  { transform: rotate(10deg); }
  40%  { transform: rotate(-10deg); }
  50%  { transform: rotate(5deg); }
  60%  { transform: rotate(-5deg); }
  70%  { transform: rotate(0); }
  100% { transform: rotate(0); }
}

.text_bg_higlight{
  background-color: yellow;
}


/*marc css  graduation de zoom */
.zoom-ruler-container-cmz {
    position: relative;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateX(0);
    bottom: 50px;
}

/* État caché (après 5 secondes) */
.zoom-ruler-container-cmz.ruler-hidden-cmz {
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}

/* État fermé (bouton X) */
.zoom-ruler-container-cmz.ruler-closed-cmz {
    display: none !important;
}

.ruler-panel-cmz {
    background: transparent;
    padding: 8px 5px;
    position: relative;
}

/* Bouton de fermeture - position originale */
.close-ruler-btn-cmz {
    position: absolute;
    top: -10px;
    right: -16px;
    background: rgba(252, 4, 4, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10002;
}

.close-ruler-btn-cmz:hover {
    background: rgba(255, 0, 0, 0.8);
    color: rgb(253, 253, 253);
    transform: scale(1.1);
}

.close-ruler-btn-cmz i {
    font-size: 14px;
}

/* Affichage du zoom - position personnalisée */
.zoom-display-cmz {
    font-size: 20px;
    font-weight: bold;
    color: #2d3748;
    text-align: center;
    min-width: 45px;
    padding: 8px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: color 0.3s ease;
    position: absolute;
    top: 56px;
    right: -41px;
}

.ruler-container-cmz {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ruler-cmz {
    position: relative;
    width: 45px;
    height: 580px;
    background: #ffffff;
    border-radius: 8px;
    padding: 15px 5px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.graduations-cmz {
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 5px;
    right: 5px;
    pointer-events: none;
}

.graduation-cmz {
    position: absolute;
    display: flex;
    align-items: center;
    width: 100%;
}

.graduation-line-cmz {
    height: 1px;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.graduation-line-cmz.major {
    width: 20px;
    background: rgba(0, 0, 0, 0.7);
    height: 1.5px;
}

.graduation-line-cmz.minor {
    width: 12px;
}

.graduation-label-cmz {
    color: rgba(0, 0, 0, 0.85);
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
}

#zoomSliderCMZ {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    width: 570px;
    height: 45px;
    left: 102%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(-90deg);
    background: transparent;
    cursor: pointer;
    z-index: 10001 !important;
}

#zoomSliderCMZ::-webkit-slider-track {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
}

#zoomSliderCMZ::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    border: 2.5px solid var(--thumb-color-cmz);
}

#zoomSliderCMZ::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

#zoomSliderCMZ::-webkit-slider-thumb:active {
    cursor: grabbing;
}

#zoomSliderCMZ::-moz-range-track {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
}

#zoomSliderCMZ::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 2.5px solid var(--thumb-color-cmz);
}

.fill-indicator-cmz {
    position: absolute;
    bottom: 15px;
    left: 5px;
    right: 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
    pointer-events: none;
    max-height: 96% !important;
}

/* Positionner la règle */
.leaflet-top.leaflet-left {
    top: 166px !important;
    left: 0px !important;
}

.leaflet-control {
    margin: 0 !important;
}

/* ========== RESPONSIVE DESIGN ========== */

/* Écrans moyens (laptops et petits desktops) */
@media (max-width: 1326px) {
    .zoom-ruler-container-cmz {
        bottom: 45px;
    }

    .ruler-panel-cmz {
        padding: 7px 4px;
    }

    .zoom-display-cmz {
        font-size: 18px;
        min-width: 42px;
        padding: 7px;
        top: 52px;
        right: -39px;
    }

    .ruler-cmz {
        width: 42px;
        height: 450px;
        max-height: 450px;
        padding: 13px 4px;
    }

    .graduations-cmz {
        top: 13px;
        bottom: 13px;
    }

    #zoomSliderCMZ {
        width: 420px;
        height: 42px;
    }

    .close-ruler-btn-cmz {
        width: 23px;
        height: 23px;
        right: -15px;
       
    }

    .close-ruler-btn-cmz i {
        font-size: 13px;
    }

    .graduation-label-cmz {
        font-size: 9px;
    }

    .graduation-line-cmz.major {
        width: 18px;
    }

    .graduation-line-cmz.minor {
        width: 11px;
    }

    .fill-indicator-cmz {
        bottom: 13px;
        left: 4px;
        right: 4px;
    }

    .leaflet-top.leaflet-left {
        /* top: 140px !important; */
    }
}

/* Tablettes (portrait) */
@media (max-width: 768px) {
    .zoom-ruler-container-cmz {
        bottom: 40px;
    }

    .ruler-panel-cmz {
        padding: 6px 4px;
    }

    .zoom-display-cmz {
        font-size: 18px;
        min-width: 40px;
        padding: 6px;
        top: 50px;
        right: -38px;
    }

    .ruler-cmz {
        width: 40px;
        height: 500px;
        padding: 12px 4px;
    }

    .graduations-cmz {
        top: 12px;
        bottom: 12px;
    }

    #zoomSliderCMZ {
        width: 470px;
        height: 40px;
    }

    .close-ruler-btn-cmz {
        width: 22px;
        height: 22px;
        right: -14px;
       
    }

    .close-ruler-btn-cmz i {
        font-size: 12px;
    }

    .graduation-label-cmz {
        font-size: 9px;
    }

    .fill-indicator-cmz {
        bottom: 12px;
    }

    .leaflet-top.leaflet-left {
        /* top: 120px !important; */
    }
}

/* Smartphones (portrait) */
@media (max-width: 480px) {
    .zoom-ruler-container-cmz {
        bottom: 30px;
    }

    .ruler-panel-cmz {
        padding: 5px 3px;
    }

    .zoom-display-cmz {
        font-size: 16px;
        min-width: 35px;
        padding: 5px;
        top: 45px;
        right: -35px;
    }

    .ruler-cmz {
        width: 35px;
        height: 400px;
        padding: 10px 3px;
    }

    .graduations-cmz {
        top: 10px;
        bottom: 10px;
    }

    #zoomSliderCMZ {
        width: 370px;
        height: 35px;
    }

    #zoomSliderCMZ::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
    }

    #zoomSliderCMZ::-moz-range-thumb {
        width: 18px;
        height: 18px;
    }

    .close-ruler-btn-cmz {
        width: 20px;
        height: 20px;
        right: -12px;
       
    }

    .close-ruler-btn-cmz i {
        font-size: 11px;
    }

    .graduation-line-cmz.major {
        width: 16px;
    }

    .graduation-line-cmz.minor {
        width: 10px;
    }

    .graduation-label-cmz {
        font-size: 8px;
        margin-left: 2px;
    }

    .fill-indicator-cmz {
        bottom: 10px;
    }

    .leaflet-top.leaflet-left {
        /* top: 100px !important; */
    }
}

/* Très petits écrans */
@media (max-width: 360px) {
    .zoom-ruler-container-cmz {
        bottom: 25px;
    }

    .ruler-cmz {
        width: 30px;
        height: 350px;
        padding: 8px 2px;
    }

    .graduations-cmz {
        top: 8px;
        bottom: 8px;
    }

    #zoomSliderCMZ {
        width: 320px;
        height: 30px;
    }

    #zoomSliderCMZ::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }

    #zoomSliderCMZ::-moz-range-thumb {
        width: 16px;
        height: 16px;
    }

    .zoom-display-cmz {
        font-size: 14px;
        min-width: 30px;
        padding: 4px;
        top: 40px;
        right: -32px;
    }

    .close-ruler-btn-cmz {
        width: 18px;
        height: 18px;
        top: 29px;
    }

    .close-ruler-btn-cmz i {
        font-size: 10px;
    }

    .graduation-label-cmz {
        font-size: 7px;
    }

    .fill-indicator-cmz {
        bottom: 8px;
    }

    .leaflet-top.leaflet-left {
        /* top: 80px !important; */
    }
}

/* Paysage sur mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .zoom-ruler-container-cmz {
        bottom: 20px;
    }

    .ruler-cmz {
        height: 350px;
        padding: 10px 3px;
    }

    .graduations-cmz {
        top: 10px;
        bottom: 10px;
    }

    #zoomSliderCMZ {
        width: 320px;
        height: 35px;
    }

    .fill-indicator-cmz {
        bottom: 10px;
    }

    .zoom-display-cmz {
        top: 42px;
    }

    .leaflet-top.leaflet-left {
        top: 80px !important;
    }
}

/* Mode paysage tablette */
@media (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
    .ruler-cmz {
        height: 400px;
    }

    #zoomSliderCMZ {
        width: 370px;
    }
}

/* Écrans avec hauteur moyenne */
@media (max-height: 720px) {
    .zoom-ruler-container-cmz {
        bottom: 30px;
    }

    .ruler-panel-cmz {
        padding: 6px 4px;
    }

    .zoom-display-cmz {
        font-size: 18px;
        min-width: 40px;
        padding: 7px;
        top: 48px;
        right: -39px;
    }

    .ruler-cmz {
        width: 40px;
        height: 420px;
        padding: 12px 4px;
    }

    .graduations-cmz {
        top: 12px;
        bottom: 12px;
    }

    #zoomSliderCMZ {
        width: 390px;
        height: 40px;
    }

    #zoomSliderCMZ::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
    }

    #zoomSliderCMZ::-moz-range-thumb {
        width: 18px;
        height: 18px;
    }

    .close-ruler-btn-cmz {
        width: 22px;
        height: 22px;
        right: -14px;
    }

    .close-ruler-btn-cmz i {
        font-size: 12px;
    }

    .graduation-line-cmz.major {
        width: 17px;
    }

    .graduation-line-cmz.minor {
        width: 10px;
    }

    .graduation-label-cmz {
        font-size: 9px;
    }

    .fill-indicator-cmz {
        bottom: 12px;
        left: 4px;
        right: 4px;
    }

    .leaflet-top.leaflet-left {
        /* top: 100px !important; */
    }
}

/* Écrans avec hauteur limitée */
@media (max-height: 520px) {
    .zoom-ruler-container-cmz {
        bottom: 10px;
    }

    .ruler-panel-cmz {
        padding: 5px 3px;
    }

    .zoom-display-cmz {
        font-size: 15px;
        min-width: 36px;
        padding: 5px;
        top: 40px;
        right: -36px;
    }

    .ruler-cmz {
        width: 36px;
        height: 300px;
        padding: 9px 3px;
    }

    .graduations-cmz {
        top: 9px;
        bottom: 9px;
    }

    #zoomSliderCMZ {
        width: 270px;
        height: 36px;
    }

    #zoomSliderCMZ::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }

    #zoomSliderCMZ::-moz-range-thumb {
        width: 16px;
        height: 16px;
    }

    .close-ruler-btn-cmz {
        width: 19px;
        height: 19px;
        right: -12px;
    }

    .close-ruler-btn-cmz i {
        font-size: 10px;
    }

    .graduation-line-cmz.major {
        width: 15px;
    }

    .graduation-line-cmz.minor {
        width: 9px;
    }

    .graduation-label-cmz {
        font-size: 7px;
    }

    .fill-indicator-cmz {
        bottom: 9px;
        left: 3px;
        right: 3px;
    }

    .leaflet-top.leaflet-left {
        top: 60px !important;
    }
}

._navbar_item{
	cursor: pointer !important;
}

.lg-object.lg-image{
  /* width: 40% !important; */
  height: auto;
}

.lg-backdrop.in{
  width: auto !important;
  z-index: 9999 !important;
}


.lg-outer{
  z-index: 99999 !important;
}

.photo-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.preview-photo-detail {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.photo-count-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 16px;
    font-weight: bolder;
    padding: 12px 15px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

/* .photo-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
} */

/* GRILLE AFTER UPLOAD */
.uploaded-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}

.uploaded-photo-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.uploaded-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uploaded-photo-item button {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 14px;
    cursor: pointer;
}


.button_x_mark_close_filter{
  background-color: #ff5e5e !important;
  padding: 5px;
  border-radius: 50%;
  color: white;
}

.results-separator td {
  padding: 20px 0;
  border: none;
}

.separator-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.separator-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #d1d5db, transparent);
}

.separator-title {
  margin: 0;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  background: #f8fafc;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


.swal2-container.swal2-center.swal2-backdrop-show{
  z-index: 10000 !important;
}


.containerFiche{
    width: 200px;
    min-height: 230px;
}

.card-custom-doc {
    border-radius: 12px;
    overflow: hidden;
}

.card-header-custom-doc {
    background-color: #0d6efd;
    color: white;
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-header-custom-doc .btn-close-fiche {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  color: red;
}

.card-title-custom-doc {
    text-transform: lowercase;
    font-size: 12px;
    font-weight: bold;
}

.container-icones{
  /* width: 40% !important; */
  margin-top: -10% !important;
}

.card-title-custom-doc::first-letter {
    text-transform: uppercase;
}

.bodyFicheDockable{
  display: flex !important;
  flex-direction: column;
}

.btnVoirDockable{
  margin-top: auto;
}

#openFlottant.WithDock{
  margin-left: -30%;
}

/* ════════════════════════════════════════════════════════════
   Solution: new_content_legend_jheo_js utilise tout l'espace
   ════════════════════════════════════════════════════════════ */

/* 1. #rightPanel en flex column */
#rightPanel {
    display: flex !important;
    flex-direction: column;
}

/* 2. new_content_legend_jheo_js prend l'espace restant */
.new_content_legend_jheo_js {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 3. content_legende_jheo_js en flex column */
.content_legende.content_legende_jheo_js {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100% !important;
}

/* 4. content_right_side_body_jheo_js prend l'espace restant */
.content_right_side_body_jheo_js {
    flex: 1;
    overflow-y: auto;
    height: auto !important;
    max-height: none;
}

/* ════════════════════════════════════════════════════════════
   Fix: #map (conteneur Leaflet) ignorait la largeur réelle du
   panneau droit. main.css force #map en `width: 100vw`, donc même
   si #leftPanel/.cart_map rétrécissent bien à l'ouverture du
   panneau (visuellement tronqués par overflow:hidden), Leaflet
   lit toujours une largeur pleine écran et recentre les POI
   au-delà de la zone visible, sous le panneau. On surcharge ici
   uniquement pour la page new_home (sélecteur #leftPanel #map,
   plus spécifique que #map seul) pour ne pas impacter les pages
   plein écran (fiches restaurant/ferme/station, etc.) qui
   dépendent du 100vw global.
   ════════════════════════════════════════════════════════════ */
#leftPanel #map {
    width: 100% !important;
}

/* ════════════════════════════════════════════════════════════
   Réduction visuelle (pas de fetch) de la fiche détail flottante
   pendant l'édition d'adresse, quand elle chevauche le marker
   recentré. Voir EditionPOIManager._collapseDetailsCardDuringEdit().
   ════════════════════════════════════════════════════════════ */
.content_details_rubrique_jheo_js.hidden-during-edit {
    display: none !important;
}

/* Ancre de positionnement pour le bouton de réouverture (scopé à
   new_home pour ne pas affecter les pages plein écran) */
#leftPanel .content_cart_map_jheo_js {
    position: relative;
}

.reopen_details_during_edit_jheo_js {
    position: absolute;
    z-index: 1000;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0b4f4a;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ── Pastilles ouverture / fermeture ── */
.banque-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.banque-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: banquePulse 2s infinite;
}
@keyframes banquePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.banque-badge--open,
.banque-badge--active {
    color: #fff;
    background: #198754;
    border: 1px solid #157347;
}
.banque-badge--closed {
    color: #fff;
    background: #dc3545;
    border: 1px solid #bb2d3b;
}

/* ── Cartes d'info ── */
.banque-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.banque-info-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 5px 12px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.banque-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.banque-info-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 2px;
}
.banque-info-value {
    font-weight: 600;
    font-size: 0.92rem;
    /* Enseignes/communes longues ("BANQUE POPULAIRE AQUITAINE CENTRE
       ATLANTIQUE"...) : la fiche (.content_details_rubrique, voir
       container_detailPoi) est souvent bien plus étroite que 140px de
       texte utile une fois les marges/padding déduits — sans ça le mot
       débordait de sa carte plutôt que de passer à la ligne. */
    overflow-wrap: anywhere;
}

/* Fiche étroite (35% d'un #leftPanel pas toujours très large, voir
   .content_details_rubrique) : minmax(140px,…) forçait déjà 1 seule
   colonne dans ce cas (comportement correct de la grille), mais les cartes
   gardaient leur padding "large écran" — on le resserre pour donner plus de
   place au texte. */
@container container_detailPoi (max-width: 380px) {
    .banque-info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .banque-info-card {
        padding: 6px 10px;
    }

    .banque-info-value {
        font-size: 0.88rem;
    }
}

/* ── Compteurs historique ── */
.banque-counter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.banque-counter {
    min-width: 90px;
    text-align: center;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 6px 8px;
}
.banque-counter-num {
    font-size: 1.1rem;
    font-weight: 700;
}
.banque-counter-label {
    font-size: 0.72rem;
    color: #6c757d;
    text-transform: uppercase;
}

/* ── Dernière modification ── */
.banque-maj-text {
    background: #fff8e6;
    border-left: 3px solid #f5c518;
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

/* ── Observation ── */
.banque-obs-text {
    background: #e6faff;
    border-left: 3px solid #18c1f5;
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}


/* ── Pastilles statut banque ── */
.banque-status-badges {
    animation: banqueFadeIn .4s ease;
}
@keyframes banqueFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.banque-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 50rem;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.banque-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.banque-badge-ico {
    font-size: 0.95rem;
    line-height: 1;
}

.banque-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: banquePulse 2s infinite;
}
@keyframes banquePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.8); }
}

/* Ouverture — vrai vert */
.banque-badge--open {
    color: #fff;
    background: linear-gradient(135deg, #22a35e 0%, #198754 100%);
    border: 1px solid #157347;
}

/* En activité — vrai vert */
.banque-badge--active {
    color: #fff;
    background: linear-gradient(135deg, #22a35e 0%, #198754 100%);
    border: 1px solid #157347;
}

/* Fermeture — vrai rouge */
.banque-badge--closed {
    color: #fff;
    background: linear-gradient(135deg, #e8515f 0%, #dc3545 100%);
    border: 1px solid #bb2d3b;
}
/* ══ Timeline banque ══ */
.banque-timeline {
    position: relative;
    padding-left: 24px;
}
.banque-timeline::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #dee2e6;
}

.banque-timeline-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 6px 0;
    animation: timelineFade .3s ease both;
}

.banque-timeline-marker {
    position: absolute;
    left: -24px;
    top: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    background: #fff;
    border: 2px solid #ced4da;
    color: #adb5bd;
    z-index: 1;
}

.banque-timeline-card {
    flex: 1;
    margin-left: 14px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 8px 12px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.banque-timeline-item:hover .banque-timeline-card {
    transform: translateX(3px);
    box-shadow: 0 3px 10px rgba(0,0,0,.07);
}

.banque-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.banque-timeline-annee {
    font-weight: 700;
    font-size: 0.95rem;
}
.banque-timeline-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 9px;
    border-radius: 50rem;
    background: #f1f3f5;
    color: #495057;
}
.banque-timeline-badge--muted { opacity: .65; }

.banque-timeline-detail {
    font-size: 0.82rem;
    color: #495057;
    margin-top: 4px;
}

/* ══ Marqueurs colorés ══ */
.timeline-item--vert    .banque-timeline-marker { border-color:#0f7a3d; color:#0f7a3d; background:#e6f7ee; }
.timeline-item--rouge   .banque-timeline-marker { border-color:#b02a37; color:#b02a37; background:#fdeaec; }
.timeline-item--bleu    .banque-timeline-marker { border-color:#0d6efd; color:#0d6efd; background:#e7f1ff; }
.timeline-item--jaune   .banque-timeline-marker { border-color:#997404; color:#997404; background:#fff8e1; }
.timeline-item--violet  .banque-timeline-marker { border-color:#6f42c1; color:#6f42c1; background:#f3ebff; }
.timeline-item--orange  .banque-timeline-marker { border-color:#fd7e14; color:#fd7e14; background:#fff3e6; }
.timeline-item--present .banque-timeline-marker { border-color:#20c997; color:#20c997; }
.timeline-item--absent  .banque-timeline-marker,
.timeline-item--absent  .banque-timeline-card   { opacity: .55; }

/* ══ Lignes de changement ══ */
.banque-chg {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.8rem;
    padding: 4px 8px;
    margin-top: 4px;
    border-radius: 6px;
    border-left: 3px solid;
}
.banque-chg-label { font-weight: 600; }
.banque-chg-diff  { display: inline-flex; align-items: center; gap: 5px; }
.banque-chg-diff s      { color: #adb5bd; }
.banque-chg-diff strong { color: inherit; }

.chg--vert   { background:#e6f7ee; border-color:#0f7a3d; color:#0f7a3d; }
.chg--rouge  { background:#fdeaec; border-color:#b02a37; color:#b02a37; }
.chg--bleu   { background:#e7f1ff; border-color:#0d6efd; color:#0d6efd; }
.chg--jaune  { background:#fff8e1; border-color:#997404; color:#997404; }
.chg--violet { background:#f3ebff; border-color:#6f42c1; color:#6f42c1; }
.chg--orange { background:#fff3e6; border-color:#fd7e14; color:#fd7e14; }
.chg--gris   { background:#f1f3f5; border-color:#adb5bd; color:#495057; }

@keyframes timelineFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pc-tag--fermee {
    background: #dc3545 !important;
    color: #fff !important;
    border: 1px solid #bb2d3b;
}

/* Mini-fiche POI au survol (voir MarkerPOIManager, toutes rubriques) : doit
   rester visible au premier plan même quand le marqueur est près de l'en-tête
   (z-index 1556, voir .nav-bar-map-fa), du panneau de filtres à droite
   (z-index ~1554, voir .content_legende_jheo_js), de la liste des rubriques
   à gauche (z-index jusqu'à 10000) ou du pied de page — ces éléments
   recouvrent la carte plutôt que de la redimensionner. */
.leaflet-tooltip.poi-tooltip-elevated {
    z-index: 100000 !important;
}

/* Tooltips Bootstrap des boutons #rubrique-controls (filtre, favoris,
   légende des icônes, liste...) : au z-index Bootstrap 4 par défaut (~1070),
   ils passaient sous le panneau de filtre ouvert (z-index 10000, 10401 en
   mobile — voir .content_legende) et devenaient invisibles au survol, quelle
   que soit la rubrique filtrée. Même logique d'élévation que
   .poi-tooltip-elevated ci-dessus. */
.tooltip {
    z-index: 20000 !important;
}