#checkbox {
  display: none;
}

/* Zoom +/- : volontairement carres (border-radius 5px), pas ronds comme le
   reste de la colonne — a ne pas "harmoniser" en pastilles rondes. */
.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;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background-color: #ffffff !important;
  z-index: 10;
  margin: 2px;
  margin-top: 10px;
}

.list_poi_header_count {
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bouton d'action du panneau liste (fermer) : pastille ronde pleine, meme
   gabarit que .close_right_side_jheo_js/.back_right_side_jheo_js
   (new_navbar.css) — le X carre avec un seul coin arrondi (ancien .green-it)
   se reperait mal dans la colonne desormais toute en cercles. */
.list_nav_left_action_btn_jheo_js {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.list_nav_left_action_btn_jheo_js:hover {
  transform: scale(1.08);
}

.list_nav_left_action_btn_jheo_js svg {
  pointer-events: none;
}

.green-it {
  background-color: #dc3545 !important;
}

.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é */
/* NB : bloc actuellement inerte sur le navbar du panneau iframe (voir
   templates/new_home/index.html.twig, .header-container/.header-right) —
   "container_rightPanel(max-width: 768px)" sans espace avant la parenthese
   n'est pas un prelude @container valide (il faut un espace entre le nom du
   conteneur et sa condition), le navigateur ignore donc tout ce bloc. En
   plus de ce point, .header-left/.payant-box/.trial-box/.duedate-box/
   .btn-tooltip-info ne correspondent a rien dans le markup actuel de ce
   header (identite horloge+badge / .header-right = notifications+agrandir+
   fermer) — cible probablement une autre version du header. Le vrai
   responsive de CE header (etroit a <=560px) vit desormais dans
   navbar_compact.css, a cote des autres regles container_rightPanel du
   meme header (#clockPill_jheo_js, .user-badge-jheo_js). On laisse ce bloc
   tel quel plutot que de le "reparer" a l'aveugle : impossible de confirmer
   sans risque a quel autre header il etait destine a l'origine. */
@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 */
  /* overflow-y:auto force aussi overflow-x a se comporter en auto (un seul
     axe "visible" n'existe pas en CSS) : le bouton actuellement selectionne
     (anneau + agrandissement scale(1.1), voir .active_control_jheo_js/
     .btn_control_on_map_active dans main.css) deborde alors legerement du
     cote droit et se faisait rogner net par ce conteneur, pile a cote de la
     scrollbar — d'ou l'aspect "en partie coupe" une fois un bouton
     selectionne. padding-right laisse la place a ce debord sans le couper. */
  #controll_and_menu_on_map {
      overflow-y: auto;
      height: 550px;
      padding-left: 10px;
  }

  /* 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;
}

/* --cin-banner-height : hauteur du bandeau de rappel CIN (voir
   templates/shard/_cin_reminder_banner.html.twig). Ce bandeau est en flux
   normal en haut du <body> et décale donc tout ce qui suppose une viewport
   pleine : sans cette soustraction, le contenu déborde de 100vh et le footer
   sticky (.cgu) se retrouve poussé hors de l'écran. Vaut 0px sans bandeau. */
.containerfuild-cart_map {
  width: 100vw;
  height: calc(100vh - var(--cin-banner-height, 0px));
  overflow: hidden;
}

.resizer {
  /* width: 5px; */
  cursor: e-resize;
  background: #000000;
  height: calc(100vh - var(--cin-banner-height, 0px));
}


/* 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;
  min-width: 300px;
  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));
}

.list_poi_scroll_loader_inner {
  text-align: center;
  padding: 12px 8px;
  font-size: 13px;
  color: #667085;
}

.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 {
  min-width: 300px;
  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;
  }
}

/* Le bouton .expand-me (agrandir la fiche) n'est visible que sur
   mobile/tablette (display:block dans les @media ≤480px et
   296px-988px ci-dessus) et rien ne retire jamais cette classe au
   resize : si la fiche est agrandie sur un petit écran puis que la
   fenêtre/iframe qui la contient s'agrandit au-delà de 988px, elle
   restait figée en 100vw/100vh par-dessus la mise en page desktop
   (35% de #leftPanel, voir .content_details_rubrique) sans qu'aucun
   bouton visible ne permette de la réduire. On borne donc l'effet à
   la même plage d'écran que le bouton qui l'active, pour que la fiche
   redevienne responsive dès qu'on dépasse cette largeur. */
@media screen and (max-width: 988px) {
  .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;
  /* position:sticky ne peut que retenir un élément vers le bas, jamais le
     remonter au-dessus de sa position naturelle : si le bandeau CIN décale le
     footer de sa hauteur, il faut la retirer ici, sinon le footer sort de
     l'écran et devient inaccessible (voir aussi shrink()/expand() dans
     MapCMZ.js qui posent le même calcul en style inline). */
  top: calc(100vh - var(--cin-banner-height, 0px));
}
/* 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;
}

/* Champs Quoi/Où enveloppés dans .search-field (voir _newNavBar.html.twig) :
   le conteneur prend dans la barre la place du champ, le champ le remplit. */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.search-field > .input-recherche-navbar {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* Coins droits côté séparateur, comme quand .input-group les posait. */
.search-field > .input_search_key_what {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.search-field > .input_search_key_where {
  border-radius: 0;
}

/* Placeholder natif masqué, remplacé par le libellé en surimpression où
   « Quoi ? » / « Où ? » sont en gras. */
.search-field > .input-recherche-navbar::placeholder {
  color: transparent;
}

.search-field-hint {
  position: absolute;
  top: 50%;
  left: 13px; /* bordure 1px + padding 12px du champ */
  right: 12px;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  color: var(--bs-secondary-color, #6c757d);
  pointer-events: none;
}

.search-field > .mx-1 + .search-field-hint {
  left: calc(0.25rem + 13px);
}

.search-field-hint strong {
  font-weight: 700;
  color: #0d3f3c;
}

.search-field > .input-recherche-navbar:not(:placeholder-shown) + .search-field-hint {
  display: none;
}

.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;
}

/* Zoom +/- et colonne de controles carte (filtre/favoris/...) : le z-index
   Leaflet par defaut herite via .leaflet-control est ~1000 (meme constat
   deja fait pour .container-icones plus bas dans ce fichier, face a
   .content_chat_map a 1111) — largement sous le navbar carte (.nav-bar-map-fa,
   z-index:1556 en style inline dans _newNavBar.html.twig). Des que ce panneau
   Leaflet remonte sous le navbar (ecrans bas/etroits, navbar qui s'enroule
   sur plusieurs lignes...), il se retrouve rendu DESSOUS et donc invisible/
   inaccessible malgre les decalages verticaux (transform:translateY) deja
   poses par breakpoint plus bas dans ce fichier. */
.leaflet-top.leaflet-right {
  z-index: 1560 !important;
}

.basemap-menu {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  min-width: 260px;
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
  transform: scale(1);
}

.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}
.basemap-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

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

.basemap-option:hover {
  background-color: #f2f2f2;
}
.basemap-option-image {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px;
  min-height: 72px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
  background: #e8eaed;
}
.basemap-option span {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.basemap-option.tiles-selected {
  background-color: #74b92d !important;
  color: white !important;
  font-weight: bold !important;
}
.basemap-option.tiles-selected span {
  color: white;
}
/**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{
    margin-top: 0 !important;
  }
  /* Le row-reverse (2 colonnes cote a cote : controles carte + liens
     compte) portait avant sur #controll_and_menu_on_map directement ; il
     vise maintenant .controll_and_menu_body_jheo_js, le wrapper interne
     ajoute pour le bouton replier/deplier (voir UiMapControl.js) — sinon
     ce wrapper (display:block par defaut) empile #rubrique-controls et
     #external-links verticalement au lieu de les mettre cote a cote. */
  .controll_and_menu_body_jheo_js{
    display: flex !important;
    flex-direction: row-reverse !important;
  }
  /* row-reverse met #rubrique-controls et #external-links cote a cote : le
     trait horizontal du mode empile (border-top, voir main.css) n'a plus de
     sens ici, on le remplace par un trait vertical entre les deux colonnes. */
  #external-links{
    margin-top: 0 !important;
    margin-right:5px  ;
    padding-top: 0 !important;
    border-top: none !important;
    padding-right: 0.50rem;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
  }

  .espacetrallink-button{
    margin-left: 10px;
    margin-top: 16px;
  }
}
/** 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:858px){
  
  #controll_and_menu_on_map{
    height: 50vh !important;
  }
  
  #rubrique-controls{
    overflow-y: scroll !important;
    overflow: visible !important;
    margin-top: 16px;
  }
  
  #external-links{
    overflow-y: scroll !important;
  }
}

@media (max-width:1439px){
  #controll_and_menu_on_map{
    margin-top: 0 !important;
  }
  /* Meme raison qu'au bloc "Antonius" ci-dessus : le row-reverse doit
     porter sur le wrapper interne, pas sur #controll_and_menu_on_map. */
  .controll_and_menu_body_jheo_js{
    display: flex !important;
    flex-direction: row-reverse !important;
  }
  /* Meme raison que le trait vertical du bloc "Antonius" ci-dessus : en
     row-reverse, le trait horizontal du mode empile (border-top, voir
     main.css) n'a plus de sens entre deux colonnes cote a cote. */
  #external-links{
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    padding-right: 0.50rem;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
  }
}

@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 {
    /* Theme Material de la navbar carte (voir navbar_compact.css : cartes/
       boutons en pastille, ombres --md-elev-*). */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--md-elev-1, 0 1px 2px rgba(9, 32, 29, .3), 0 1px 3px 1px rgba(9, 32, 29, .15));
    transition: box-shadow .15s ease, transform .15s ease;
}

.card-custom-doc:hover {
    box-shadow: var(--md-elev-3, 0 4px 8px 3px rgba(9, 32, 29, .15), 0 1px 3px rgba(9, 32, 29, .3));
    transform: translateY(-2px);
}

.card-header-custom-doc {
    /* Meme vert fonce que le header de la navbar carte (#0d3f3c, voir
       navbar_compact.css) au lieu du bleu bootstrap par defaut. */
    background-color: #0d3f3c;
    color: white;
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Pastille numerotee = rang de docking de la fiche (1re, 2e, ...). */
.fiche-dockable-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  color: #0d3f3c;
  font-size: 0.65rem;
  font-weight: bold;
}

.card-header-custom-doc .btn-close-fiche {
  /* Pastille ronde rouge pleine (meme famille que .btn_close_right_side_iframe_jheo_js
     dans navbar_compact.css) : plus visible que la simple croix texte d'avant. */
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: #dc3545;
  box-shadow: 0 2px 6px rgba(220, 53, 69, .45);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.card-header-custom-doc .btn-close-fiche:hover {
  background: #c9302c;
  transform: translateY(-50%) scale(1.12);
}

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

.container-icones{
  /* width: 40% !important; */
  margin-top: -18% !important;
  /* .content_chat_map (barre Accueil/Aide/Messages/Visio/+N) est a
     z-index:1111 (main.css) — au-dessus du z-index Leaflet par defaut
     (~1000) herite ici via .leaflet-control. Ces petites fiches
     ("Afficher tous") se retrouvaient donc rendues DESSOUS cette barre et
     partiellement masquees par elle en bas d'ecran. */
  z-index: 1200 !important;
  /* Quand il y a beaucoup de fiches dockables, elles debordaient de
     l'ecran sans moyen de voir les suivantes. On les garde sur une seule
     ligne et on ajoute un scroll horizontal pour toutes les parcourir. */
  max-width: 100%;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.container-icones .containerFiche {
  flex-shrink: 0;
}

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

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

.btnVoirDockable{
  margin-top: auto;
  /* Pastille pleine teal (meme couleur que le header de la fiche et que
     .btn_submit_search_navbar dans navbar_compact.css) plutot que le vert
     bootstrap par defaut, pour rester dans le theme Material de la carte. */
  background-color: #0d3f3c !important;
  border-color: #0d3f3c !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(13, 63, 60, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btnVoirDockable:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(13, 63, 60, .45);
}

#openFlottant.WithDock{
  margin-left: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   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;
}

/* Modales de saisie/édition d'avis (audio, vidéo, caméra — shard/modal/modal_avis.html.twig ;
   modification d'une réponse — shard/modal/list_avis.html.twig) : doivent s'afficher au-dessus
   du panneau latéral d'avis (.content_legende_jheo_js, z-index 10000/10401), qui est rendu après
   elles dans le DOM (new_home/index.html.twig). La règle générique ".modal { z-index: 10000
   !important; }" plus haut (voir main.css) les ramenait exactement au même z-index que le
   panneau — à égalité, l'élément le plus tardif dans le DOM l'emporte, donc le panneau recouvrait
   ces modales malgré leur z-index inline (99997-99999). Sélecteur par id + !important pour battre
   cette règle générique (même origine/importance : la spécificité tranche, et un id bat une
   classe). Même logique d'élévation que .poi-tooltip-elevated / .tooltip ci-dessus. */
#modalCameraAvis,
#modalMicroOption,
#recordModal,
#modifReponse {
    z-index: 100000 !important;
}

/* Loader CMZ recouvert par la carte (issue: le loader "disparaît" pendant
   le fetch initial /data/map). Le loader plein écran pré-rendu côté serveur
   (#toggle_chargement, classe chargement_content_js_jheo — voir
   new_home/index.html.twig) n'est pas positionné (position: static), et le
   mini loader top-centré (card_mini_chargement_jheo_js, injecté par
   UiLoader.addMiniOnMap à chaque appel /data/map en vue département — voir
   RenderService.fetchDataIteratorNewRender) est en position: absolute mais
   sans z-index explicite (auto). Leaflet crée #map juste après eux dans le
   DOM (UiMapHtml.createMapDomElement) et ses panes internes (tuiles,
   marqueurs, ...) sont eux en position: absolute — en CSS, un élément
   positionné se peint toujours au-dessus d'un élément non positionné, et à
   z-index égal (auto) c'est le plus tardif dans le DOM qui gagne. Résultat :
   les deux loaders restent bien présents et "visibles" au sens CSS
   (display/opacity corrects), mais entièrement recouverts par la carte dès
   qu'elle se crée — d'où l'impression d'une carte vide sans loader pendant
   le chargement des données. On leur donne donc un z-index qui bat large­
   ment tout ce que Leaflet peut poser (panes 200-700, .leaflet-top/
   .leaflet-bottom des contrôles à 1000 — voir leaflet.css), sans pour
   autant réutiliser le 100000 du loader plein écran injecté par
   UiLoader.addOnMap (voir UiLoader.js) : à 100000 le mini loader passait
   aussi au-dessus du header/navbar collé en haut de page (position: fixed,
   sans z-index élevé de son côté), créant un chevauchement visuel disgra­
   cieux au lieu de rester sagement sous la barre d'outils de la carte. */
.chargement_content_js_jheo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
}

.card_mini_chargement_jheo_js {
    z-index: 1500;
}