.shouldLarge {
  width: 150px !important;
}

.shouldShort {
  width: 80px !important;
}

.shouldBd {
  width: 112px !important;
}

.shouldRest {
  width: 100px !important;
}

.shouldAvg {
  width: 90px !important;
}

.wiI7pdAv {
  line-height: 1.5;
  overflow-wrap: break-word;
  color: #1f1f1f;
}

.video-js {
  object-fit: contain !important;
  border-radius: 12px;
  overflow: hidden;
  max-width: 640px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.video-wrapper {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  width: 75%;
  max-width: 640px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.video-duration-badge {
  position: absolute;
  top: 0;
  right: 8px;
  /* background: rgba(0, 0, 0, 0.75); */
  color: grey;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
}

/* Aperçu vidéo façon YouTube dans la liste des avis
   (markup généré par MapCMZ/avis_rubrique.js -> createShowAvisAreas) */
.avis-video-facade {
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
}

.avis-video-facade .avis-video-facade__poster,
.avis-video-facade .avis-video-facade__player {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.avis-video-facade.is-playing .avis-video-facade__player {
  object-fit: contain;
  background: #000;
}

/* Léger dégradé haut/bas, comme sur une vignette YouTube */
.avis-video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0) 28%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, 0.28)
  );
  transition: opacity 0.2s ease;
}

.avis-video-facade.is-playing::after {
  opacity: 0;
}

.avis-video-facade__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.avis-video-facade__play svg {
  width: 68px;
  height: 48px;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}

.avis-video-facade__play-bg {
  fill: #212121;
  fill-opacity: 0.8;
  transition:
    fill 0.15s ease,
    fill-opacity 0.15s ease;
}

.avis-video-facade:hover .avis-video-facade__play-bg,
.avis-video-facade:focus-visible .avis-video-facade__play-bg {
  fill: #f00;
  fill-opacity: 1;
}

.avis-video-facade:hover .avis-video-facade__play {
  transform: translate(-50%, -50%) scale(1.06);
}

.avis-video-facade.is-playing .avis-video-facade__play {
  display: none;
}

.avis-video-facade:focus-visible {
  outline: 2px solid #1f7ae0;
  outline-offset: 2px;
}

.video-js .vjs-tech {
  object-fit: cover !important;
}

.swal-overlay {
  z-index: 99999 !important;
}

.swal-btn-fermer {
  background-color: #dc3545 !important;
  /* Rouge */
  color: white !important;
  font-weight: bold;
}

.swal-btn-import {
  background-color: #28a745 !important;
  /* Vert */
  color: white !important;
  font-weight: bold;
}

.swal-btn-prendre {
  background-color: #007bff !important;
  /* Bleu */
  color: white !important;
  font-weight: bold;
}

.rating-box {
  display: inline-flex;
  align-items: center;
  /*background-color: #4CAF50;  vert similaire */
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 18px;
}

.rating-star {
  color: gold;
  margin-left: 4px;
}

.bgnote-red {
  background-color: red;
}

.bgnote-orange {
  background-color: orange;
}

.bgnote-green {
  background-color: #4caf50;
}

#listTribusTTable td {
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
}

#listTribusTTable .tribu-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

#listTribusTTable {
  width: 100% !important;
  table-layout: fixed;
}

table.dataTable thead th.only-arrow {
  color: #6c757d !important;
  font-weight: normal;
}

#tribuGMemberTable_processing {
	z-index: 9999;
}

#tribuGMemberTable_length {
  margin-left: 10px;
}

#tribuGMemberTable_info {
  margin-left: 10px;
  font-size: 0.875em;
}

#tribuGMemberTable_filter {
  margin-right: 10px;
}

#tribuGMemberTable_paginate {
  margin-right: 10px;
  font-size: 0.875em;
}

#detailsBody .ck-editor__main img[alt="Profile Photo"],
#contentDetailAutre img[alt="Profile Photo"] {
  width: 50px;
  clip-path: circle(40%);
}

#emailListTable_length,
#emailListTable_info {
  margin-left: 10px;
}

/* Appliquer seulement aux colonnes Date et Date Relance */
th.sorting_desc[data-column="date"]:before,
th.sorting_desc[data-column="dateRelance"]:before {
  color: #7a7c7f !important;
  opacity: 1 !important;
}

th.sorting_desc[data-column="date"]:after,
th.sorting_desc[data-column="dateRelance"]:after {
  color: #eaebeb !important;
  opacity: 1 !important;
}

th.sorting_asc[data-column="date"]:after,
th.sorting_asc[data-column="dateRelance"]:after {
  color: #7a7c7f !important;
  opacity: 1 !important;
}

th.sorting_asc[data-column="date"]:before,
th.sorting_asc[data-column="dateRelance"]:before {
  color: #eaebeb !important;
  opacity: 1 !important;
}

#containerDataTableStory td {
  white-space: nowrap;
  /* Empêche le retour à la ligne */
}

#paginationMail li,
#updateP li,
#storyTId ul li {
  color: inherit;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.apropos-tribu-g {
  overflow-y: scroll;
  /* height: 100%; */
  height: 80vh;
}

:root {
  --success: #3fbd63c4;
  --success-md: #3fbd637c;
  --success-l: #3fbd632d;
  --info: #0069dec4;
  --info-md: #0069de7c;
  --info-l: #0069de2d;
  --warning: #ef9400c4;
  --warning-md: #ef94007c;
  --warning-l: #ef94002d;
  --danger: #ea4e2cc4;
  --danger-md: #ea4e2c7c;
  --danger-l: #ea4e2c2d;
}

body {
  /*	background-color: #f7f7f7 !important;*/
  overflow-x: hidden;
}

.ul-connected {
  padding-left: 0rem !important;
}

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

#Scrollbar::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

#Scrollbar::-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));
}

.padding_header {
  padding-left: 3.2rem;
}

/* **********navLeft************* */

.navleft {
  background-color: #fff;
  width: 28vw;
  border-radius: 5px;
  height: 100vh;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) !important;
  position: fixed;
  top: 5rem;
  right: 0;
  left: 0.5rem;
  z-index: 1030;
}

.content_alert_message {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .ep-nav .nav-item{
  width: 146px;
} */

.navbar-light-left {
  /* background-color: #fff !important; */
  width: 28vw;
}

.connexion-setting-logo img {
  /*margin-left: 2rem !important;*/
  transform: translateY(20px);
  width: 6rem !important;
}

.navbar-light-left .logo img {
  width: 8vw;
  /* margin-top: -600px; */
}

.navbar-light-left svg {
  fill: #1111fe;
}

.navbar-light-left svg:hover {
  fill: #28be21;
}

.navleft .list-depart {
  /* margin-top: 100px; */
  margin-top: 160px;
  font-size: 10pt;
}

.navleft .list-depart span {
  font-size: 10pt;
  /*font-weight: 700;*/
}

.navleft .list-depart-all {
  height: 82vh;
  overflow-y: scroll;
}

.link_nav_rubrique {
  font-size: 0.75em !important;
}

.navleft .list-depart-all ul li {
  list-style: none;
  background-color: #ffffff;
  width: 18vw;
  height: 10vh;
  margin-left: 0;
  margin-bottom: 20px;
  margin-top: 15px;
  border-radius: 30px;
  box-shadow: 0px 10px 15px rgba(49, 49, 49, 0.3);
  font-size: 11pt;
}

.navleft .list-depart-all ul li:hover {
  transform: scale(1.009);
}

.navleft .list-depart-all ul li h5 {
  font-size: 12pt;
}

.navleft .list-depart-all ul li .container-depart {
  margin: auto auto auto auto;
}

.navleft .list-depart-all ul li .container-depart svg {
  fill: #28be21;
  width: 5vw;
  height: 5vh;
}

.navleft .list-depart-all ul li .container-depart svg:active {
  fill: #000;
  transform: scale(0.8);
}

.navleft .list-depart-all ul li .container-depart svg:hover {
  fill: #000;
  transform: scale(1.2);
}

.mobile_box_shadow {
  box-shadow: -5px 10px 15px rgba(49, 49, 49, 0.3);
}

/* ***********specific_resto_navleft************** */
.navleft .list-depart-all-specific {
  height: 67vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.navleft .list-depart-all-specific ul .card-list {
  list-style: none;
  background-color: #ffffff;
  width: 24vw;
  height: auto;
  padding: 15px;
  /* margin-left: -40px; */
  margin-left: -10px;
  margin-bottom: 20px;
  border-radius: 40px;
  box-shadow: 0px 10px 15px rgba(49, 49, 49, 0.3);
  font-size: 11pt;
  overflow: hidden;
}

.navleft .list-depart-all-specific ul .card-list:hover {
  transform: scale(1.009);
}

/* .navleft .list-depart-all-specific-station ul .card-list {
  height: 40vh !important;
} */

.navleft .list-depart-all-specific ul li h5 {
  font-size: 12pt;
}

.navleft .list-depart-all-specific ul li .container-depart {
  margin: auto auto auto auto;
}

.navleft .list-depart-all-specific ul li .container-depart svg {
  fill: #28be21;
  width: 5vw;
  height: 5vh;
  margin-left: -15px;
  margin-top: 15px;
}

.navleft .list-depart-all-specific ul li .container-depart svg:hover {
  fill: #000;
  width: 5.5vw;
  height: 5.5vh;
  margin-left: -15px;
  margin-top: 15px;
}

/* *************detail_reto_navleft***************** */

.navleft-detail {
  width: 25vw;
  /* height: 100vh; */
  /* box-shadow: -5px -5px 15px #4d4d4d !important; */
  z-index: 99999 !important;
  transform: translate(72vw, 15vh);
  opacity: 1;
  /* transition: all 1.5s ease-out; */
  border-radius: 15px;
}

.list-depart-all-detail {
  width: 50vw;
  height: 75vh;
  /* overflow-y: scroll; */
  overflow-x: hidden;
  background-color: #fff;
  border-radius: 15px;
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.hidden {
  display: none;
}

#close-detail {
  position: absolute;
  left: 40vh;
  top: 10px;
  fill: #1111fe;
  cursor: pointer;
}

#close-detail:hover {
  fill: #000;
}

#close-detail-tous-resto {
  position: fixed;
  right: 0px;
  top: 3px;
  fill: #1111fe;
  z-index: 10;
  cursor: pointer;
}

#close-detail-tous-resto:hover {
  fill: #000;
}

#close-detail-resto {
  position: absolute;
  right: 23px;
  z-index: 1000;
  top: 10px;
  font-size: 1.1rem;
  cursor: pointer;
}

#close-detail-resto:hover {
  transform: scale(1.1);
}

#close-detail-ferme {
  position: absolute;
  right: 20px;
  top: 10px;
  fill: #1111fe;
  z-index: 10;
  cursor: pointer;
}

.dock-detail-rubrique {
  position: absolute;
  right: 50px;
  top: 10px;
  fill: #1111fe;
  z-index: 10;
  cursor: pointer;
}

.icon_golf_navbar {
  width: 21px;
  height: 21px;
  border: 2px solid green !important;
  border-radius: 5px;
}

.icon_golf_navbar:hover {
  width: 20px;
  height: 20px;
}

.close_details {
  position: absolute;
  right: 20px;
  top: 10px;
  fill: #1111fe;
  z-index: 10;
  cursor: pointer;
}

.close_details i {
  z-index: 1000000;
}

#close-detail-ferme:hover {
  fill: #000;
}

#close-detail-home,
#close-detail-station {
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 10;
  font-weight: bolder;
  font-size: 1.2rem;
  cursor: pointer;
}

#close-detail-home:hover,
  #close-detail-station:hover {
  font-size: 1.5rem;
}

/* ************NavBar************ */

.navbar-light-bar {
  /* background-color: #fff !important; */
  width: 28vw;
  height: 10vh;
  /* box-shadow: -5px -5px 25px #4d4d4d !important; */
}

.navbar-light-bar .open-navleft {
  fill: #28be21;
}

.nav-menu {
  margin-left: 720px !important;
  width: 30vw;
}

.nav-menu-connexion {
  margin-left: 1320px !important;
  width: 0vw;
}

.navbar-light-bar .open-navleft:hover {
  fill: #1111fe;
}

.navbar-light-bar .navbar-nav {
  height: 40px;
  margin-top: -10px;
}

.list-nav-bar:is(:link, :active, :visited).active {
  background-color: #1111fe;
  /* width: 9rem; */
  height: 2rem;
  border-radius: 10px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
  color: #fff;
  fill: #fff !important;
  transform: scale(1.2);
}

.list-nav-bar:is(:link, :active, :visited).active svg {
  fill: #fff !important;
  border: 2px solid #fff !important;
}

.list-nav-bar {
  background-color: #f7f8f8;
  height: 2rem;
  border-radius: 10px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  color: #fff;
  fill: #fff !important;
  padding: 10px !important;
}

.icon-tous {
  color: #df01d7;
}

.site_web {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-tous .list-nav-bar:hover {
  background-color: #df01d7;
  color: #fff;
}

.icon-tous a svg {
  width: 25px;
  height: 25px;
  border: 2px solid #df01d7 !important;
  border-radius: 15px;
  fill: #df01d7;
}

.icon-tous a:hover svg {
  width: 25px;
  height: 25px;
  border: 2px solid #fff !important;
  border-radius: 15px;
  fill: #fff;
}

.nav-item {
  padding-top: 0.2rem;
  padding-left: 0.3rem;
}

.ep-nav {
  gap: 0rem !important;
}

.icon-ferme {
  color: #fe1111;
}

.icon-ferme .list-nav-bar:hover {
  background-color: #fe1111;
  color: #fff;
}

.icon-ferme .list-nav-bar:hover {
  background-color: #fe1111;
  color: #fff;
}

.wo\/4\/1 {
  width: 60% !important;
}

.icon-ferme a svg {
  width: 25px;
  height: 25px;
  border: 2px solid #fe1111;
  border-radius: 8px;
  fill: #fe1111;
}

.icon-ferme a:hover svg {
  width: 25px;
  height: 25px;
  border: 2px solid #fff !important;
  border-radius: 8px;
  fill: #fff;
}

.icon-resto {
  color: #000;
}

.icon-resto .list-nav-bar:hover {
  background-color: #000;
  color: #fff;
}

.icon-resto a svg {
  width: 25px;
  height: 25px;
  border: 2px solid #000;
  border-radius: 8px;
  fill: #000;
}

.icon-resto a:hover svg {
  width: 25px;
  height: 25px;
  border: 2px solid #fff !important;
  border-radius: 8px;
  fill: #fff;
}

.icon-station {
  color: #0d6efd;
}

.icon-station .list-nav-bar:hover {
  background-color: #0d6efd;
  color: #fff;
}

.icon-station a svg {
  width: 25px;
  height: 25px;
  border: 2px solid #0d6efd;
  border-radius: 8px;
  fill: #0d6efd;
}

.icon-station a:hover svg {
  width: 25px;
  height: 25px;
  border: 2px solid #fff !important;
  border-radius: 8px;
  fill: #fff;
}

.icon-recherche a svg {
  width: 25px;
  height: 25px;
  border: 2px solid #b40404 !important;
  border-radius: 8px;
  fill: #b40404;
}

.icon-golf a:hover svg {
  width: 25px;
  height: 25px;
  border: 2px solid #fff !important;
  border-radius: 8px;
  fill: #66a65a;
}

.icon-golf a svg {
  width: 25px;
  height: 25px;
  border: 2px solid #66a65a;
  border-radius: 8px;
  fill: #66a65a;
}

.icon-golf .list-nav-bar:hover {
  background-color: #66a65a;
  color: #fff;
}

.icon-golf .list-nav-bar:hover {
  background-color: #66a65a;
  color: #fff;
}

.icon-recherche a svg:hover {
  width: 25px;
  height: 25px;
  border: 2px solid #b40404 !important;
  border-radius: 8px;
  background-color: #b40404;
  fill: #fff;
  /* transform: scale(1.3); */
}

.icon-tabac a:hover svg {
  width: 25px;
  height: 25px;
  border: 2px solid #fff !important;
  border-radius: 8px;
  fill: #da341e;
}

.icon-tabac a svg {
  width: 25px;
  height: 25px;
  border: 2px solid #da341e;
  border-radius: 8px;
  fill: #da341e;
}

.icon-tabac .list-nav-bar:hover {
  background-color: #da341e;
  color: #fff;
}

.icon-tabac .list-nav-bar:hover {
  background-color: #da341e;
  color: #fff;
}

.navbar-light-bar .icon-connexion .svg-1 {
  fill: #000;
}

.navbar-light-bar .icon-connexion .svg-2 {
  fill: #09ff00;
}

.navbar-light-bar .icon-connexion .svg-2 g .gadena {
  fill: #1111fe;
}

.navbar-light-bar .icon-connexion svg:hover {
  fill: #1111fe;
  transform: scale(1.3);
}

.recherche-modale .modal-content {
  width: 100%;
  height: 10vh;
  border-radius: 50px;
}

.recherche-modale .modal-content .bar-de-recherche {
  display: flex;
  width: 90%;
  font-weight: bolder;
  margin: auto auto;
}

.my-controller,
.retoure {
  border: none !important;
}

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

.recherche-modale .modal-content .bar-de-recherche {
  display: flex;
  width: 90%;
  margin: auto auto;
}

.recherche-modale .modal-content .bar-de-recherche .input-recherche-navbar {
  border-radius: 15px;
}

.recherche-modale .modal-content .bar-de-recherche button {
  background: none;
  border: none;
}

.recherche-modale .modal-content .bar-de-recherche button svg {
  fill: #b40404;
}

.recherche-modale .modal-content .bar-de-recherche button svg:hover {
  fill: #000;
}

.btn_retours svg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  fill: #fff;
  background-color: #28be21;
}

/* ***************Map**************** */
.user_select_none,
body.resizing,
body.resizing * {
  user-select: none !important;
}

#map {
  width: 100vw;
  height: 100vh;
  position: static !important;
}

.content_cart_map {
  height: 100%;
  overflow: hidden;
}

.cart_map {
  display: block;
  width: 100%;
  height: 100%;
}

.content_header_right_side {
  display: block;
  height: 55px;
  margin-top: 100px;
}

.table_info_marker {
  display: block;
  max-height: 65vh;
  overflow: scroll;
  overflow-x: hidden;
}

.header_right_side {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close_right_side {
  font-size: 1.3rem;
}

.content_legende {
  display: block;
  width: 0%;
  background-color: white;
  z-index: 10000;
}

/* Notifications socket temps réel (toast SweetAlert2, voir
   socketNotificationManager.js) : le conteneur est bien créé et rendu (visible
   dans les devtools, position/computed corrects) mais avec le z-index par
   défaut de SweetAlert2 (~1060) il se retrouvait recouvert visuellement par
   .content_legende (z-index 10000, 10401 en mobile — voir responsif_main.css)
   dès que le panneau de filtres/avis était ouvert à droite — panneau qui est
   justement affiché exactement quand .container_home_iframe_jheo_js passe en
   display:none (voir RightSideManager.openRightSide/closeRightSide), d'où
   l'impression que le toast "ne s'affiche pas" dans ce cas précis. Même
   logique d'élévation que .poi-tooltip-elevated / .tooltip / #modalCameraAvis
   (voir map_cmz.css) pour que le toast reste visible en toutes circonstances. */
.swal2-container.swal2-top-end {
  z-index: 100001 !important;
}

.content_legende_bottom {
  width: 100vw;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0px;
  height: 0%;
  background-color: white;
  z-index: 1000;
}

.content_header_bottom_side {
  display: block;
  margin-top: 10px;
  margin-left: 10px;
}

.content_bottom_side_body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  margin-left: 2%;
}

.card_type_layer {
  max-width: 350px;
  min-height: 70px;
  max-height: 70px;
  overflow: hidden !important;
  cursor: pointer;
  border: 1px solid rgb(158, 158, 158) !important;
  color: black !important;
}

.card_type_layer:hover {
  background-color: rgb(177, 177, 177) !important;
  color: white !important;
}

.card_type_layer_selected {
  background-color: rgb(177, 177, 177) !important;
  color: white !important;
}

.leaflet-right {
  margin-top: 110px;
}

.btn_group_vertical {
  /* margin-top: 45px !important; */
}

/* NAV account  */

li.nav-item.avatar-account-pdp > a > img {
  width: 45px;
  height: 45px;
}

.nav-item a {
  display: flex;
}

.link_type_menu {
  display: block;
  margin-left: 15px;
}

.content_left_menu {
  display: block;
  width: 16%;
  height: 100vh;
  width: 160px;
}

.navbar {
  /* box-shadow: 5px 5px 5px rgb(107 107 107 / 5%);
  background-color: white; */
  /* padding-top: 0 !important; */
  z-index: 10;
}

.nav-bar {
  margin-left: 15px;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content_entete_for_mobile {
  display: none;
}

.content_menu_open {
  display: none;
}

.content_left_menu {
  border-right: 1px solid gray;
  background-color: white;
}

.content_global {
  height: 100%;
}

.content_cart_map {
  display: flex;
  width: 100%;
  margin: 0 auto;
  border-radius: 5px;
}

.right_content {
  display: block;
  width: 89%;
  position: relative;
  height: 100%;
  float: right;
}

.b-example-divider {
  display: flex;
  justify-content: center;
  padding-left: 10px;
}

.b-example-divider .fa-solid {
  cursor: pointer;
  font-size: 18pt;
  font-weight: bolder;
  margin-left: -56px;
  margin-top: 28px;
  margin-bottom: -57px;
}

/* .nav li{
  margin : 10px 0;
} */

li a .station {
  /* width: 30px; */
  height: 23px;
}

/* .active{
  background-color : lightgray;
} */
.non_active {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/*
* a supprimer en temps voulu
*/
.fc-bg {
  /* cursor: not-allowed !important; */
}

.cursor_active {
  cursor: pointer !important;
}

.vertical-line {
  border-left: 1px solid #ccc;
  display: inline-block;
  height: 1080px;
  margin: 0 180px;
}

/* jheo: special for filter: checkbox and slider bar. DON'T CHANGE THIS. */
.bar-de-recherche {
  display: flex;
  width: 100%;
  font-weight: bolder;
}

/* .content_filter_global{
  width: 86%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10px;
  padding: 0 0 10px 0;
  margin-right: 15px;
} */

.content_description {
  display: block;
  width: 95%;
  margin: 5px auto;
  /* padding: 25px; */
  height: 98%;
  background: white;
  box-shadow: 0px 2px 7px 0px black;
  overflow-y: auto;
  overflow-x: hidden;
  
  border-radius: 10px;
  
  /* Hide scrollbar for IE, Edge and Firefox */
  /* -ms-overflow-style: none;   IE and Edge
  scrollbar-width: none;  Firefox */
}

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

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

.content_description::-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));
}

/* Hide scrollbar for Chrome, Safari and Opera */
/* .content_description::-webkit-scrollbar {
  display: none;
} */

/* Hide scrollbar for Chrome, Safari and Opera */
.list-depart-all-detail::-webkit-scrollbar {
  display: none;
}

.content_checkbox_filter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content_input_pass {
  position: relative;
}

.content_input_pass input {
  z-index: 5;
}

.content_input_pass i {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.content_left_menu_account {
  z-index: 0 !important;
}

/* WORK TOMM */
.list-depart-all-detail-tous {
  position: absolute;
  width: 26vw !important;
  height: 71vh;
  z-index: 407;
}

.list-depart-all-detail-tous h4 {
  font-size: 14pt;
}

.input-grey-rounded {
  font-size: 16px;
  line-height: 1.5;
  background: linear-gradient(to right, #45f58d, #3bfbe4) 1;
  border: 1px solid #d5d9db;
  background-image: url("data:image/svg + xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27><path fill=%27%238C92A0%27 d=%27M11.44 10.73l4.41 4.42a.5.5 0 1 1-.7.7l-4.42-4.41a6.5 6.5 0 1 1 .7-.7v-.01zM6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11z%27></path></svg>");
  background-repeat: no-repeat;
  background-position: 15px 10px;
  background-size: 20px 20px;
  border-radius: 100px;
  width: 250px;
  padding: 0.5em 1em 0.5em 2.5em;
  /* margin-bottom: 10px; */
}

.input-grey-rounded::placeholder {
  color: #838d99;
}

.input-grey-rounded:focus {
  outline: none;
  background-color: #fff;
  border: 1px solid #84a2fa;
}

.mycluster {
  min-width: 60px;
  height: 40px !important;
  /* background-color: greenyellow; */
  background-color: white !important;
  /* border-radius: 50%; */
  text-align: center;
  font-size: 15pt !important;
  border-radius: 0 0 6px 6px;
}

.mycluster_com, .mycluster_quartier {
  overflow: visible; /* ne touche que les marqueurs _com */
  height: 35px !important;
}

.mycluster_com .header_bound_count_com, .mycluster_quartier .header_bound_count_quartier {
  width: 100%; /* colle exactement à la largeur calculée en JS (iconSize) */
  box-sizing: border-box;
  padding: 2px; /* DOIT correspondre au padding=20 utilisé dans getComMarkerWidth() */
  margin: 0;
  text-align: center;
  font-weight: bold;
  /* font-size: 10px; */
  color: #fff;
  background-color: rgb(46, 139, 122);
  border-radius: 6px 6px 0 0;
  white-space: nowrap;
  position: absolute;
  top: -10px;
  /* left: 0; */
}

.spec_cluster {
  background-color: red !important;
  width: 35px !important;
  height: 35px !important;
  opacity: 1;
  outline: none;
  border-radius: 50%;
}

.markers-spec {
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 10%;
  font-size: 1.2rem;
}

.nav-tous {
  /* margin: 50px auto -15px -42px; */
  margin-top: 15px;
  margin-left: 5px;
  color: #df01d7;
  margin-top: 0;
  margin-bottom: 0rem !important;
}

.nav-ferme {
  /* margin:50px auto -15px -47px; */
  margin-left: 5px;
  color: #1111fe;
  margin-top: 0;
  margin-bottom: 0rem !important;
}

.nav-resto {
  /* margin: 50px 5px -15px -60px; */
  margin-left: 5px;
  color: #000;
  margin-top: 0;
  margin-bottom: 0rem !important;
}

.nav-station {
  /* margin: 50px 5px -15px -75px; */
  margin-top: 15px;
  margin-left: 5px;
  color: #19911d;
  margin-top: 0;
  margin-bottom: 0rem !important;
}

.nav-recherche {
  /* margin: 50px auto -15px -60px; */
  margin-top: 15px;
  margin-left: 5px;
  color: #b40404;
  margin-top: 0;
}

.avatar-account-fondateur {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px rgb(206, 15, 253) solid;
  box-shadow: 0px 0px 22px rgba(206, 15, 253, 0.8);
}

.avatar-account-fondateur img {
  width: 40px;
  border-radius: 50%;
  margin-top: 1px;
  margin-left: -8px;
}

.avatar-account {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px rgb(8, 238, 27) solid;
  box-shadow: 0px 0px 22px rgba(4, 253, 20, 0.8);
}

/* .avatar-account img {
  width: 40px;
  border-radius: 50%;
  margin-top: 1px;
  margin-left: -8px;
} */

.avatar-account img {
  width: 45px !important;
  border-radius: 50%;
  /* margin-top: 1px !important;
  margin-left: 2px; */
}

.labelC-rond-account {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(8, 238, 27);
  color: #fff;
  transform: translate(35px, -6px);
}

.labelC-rond-account-nav {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(8, 238, 27);
  color: #fff;
  transform: translate(159px, -31px);
}

.avatar-account-square-labelC-fondateur {
  width: 50px;
  height: 50px;
  margin-top: -25px;
  /* border-radius: 50%; */
  border: 3px rgb(206, 15, 253) solid;
  box-shadow: 0px 0px 22px rgba(206, 15, 253, 0.8);
}

.avatar-account-square-labelC-fondateur img {
  width: 40px;
  /* border-radius: 50%; */
  margin-top: 1px;
  margin-left: -6px;
}

.avatar-account-square-labelC {
  width: 50px;
  height: 50px;
  margin-top: -25px;
  /* border-radius: 50%; */
  border: 3px rgb(8, 238, 27) solid;
  box-shadow: 0px 0px 22px rgba(4, 253, 20, 0.8);
}

.avatar-account-square-labelC img {
  width: 40px;
  /* border-radius: 50%; */
  margin-top: 1px;
  margin-left: -6px;
}

.labelC-rond-account {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(8, 238, 27);
  color: #fff;
  transform: translate(35px, -6px);
}

.labelC-rond-account-nav {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(8, 238, 27);
  color: #fff;
  transform: translate(159px, -31px);
}

.avatar-account-square {
  width: 50px;
  height: 50px;
  /* border-radius: 50%; */
  border: 3px rgb(136, 136, 136) solid;
  box-shadow: 0px 0px 22px rgba(136, 136, 136, 0.8);
}

.avatar-account-square img {
  width: 40px;
  /* border-radius: 50%; */
  margin-top: 1px;
  margin-left: -8px;
}

.table-responsive {
  width: 100%;
}

.gallery-container {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  height: 100%;
  background-color: #fff;
  padding: 25px;
}

#gallery {
  padding: 15px;
  /* display: grid;
  width: auto;
  grid-template-columns: repeat(auto-fill, 10rem);
  grid-auto-rows: 10rem;
  grid-auto-flow: dense;
  gap: 10px; */
}

#gallery img {
  cursor: pointer;
  width: 100%;
  object-fit: cover;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  height: 150px;
}

.left_menu {
  background-color: white;
  padding-left: 20px;
  height: 100vh;
}

/* edit by marc*/
/*.content-logo-shearch {
  background-color: #f7f8f8;
  width: 400px;
  height: 60px;
  margin-left: 3px !important;
  border-radius: 10px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}*/

.navbar-brand img {
  max-width: fit-content;
  width: 6rem !important;
  height: auto;
  margin-top: 0.5rem;
  margin-left: -1.5rem;
}

.connexion-logo img {
  margin-left: -3.5rem !important;
}

.btn-recher-nav {
  border: none;
  background: none;
  margin-right: -40px;
}

/* .spec-dep {
  margin-top: 35px;
} */

.bg-blanc {
  z-index: 1;
  background-color: #fff;
  width: 100vw;
  height: 90px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.border_red {
  border-color: red !important;
}

.content_titre_details {
  position: sticky;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: white;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  padding: 10px;
  padding-bottom: 5px;
}

/* hr{
  opacity: 1 !important;
} */
.navbar-light-left .fa-x {
  /* margin-left: 140px;
  margin-top: 15px; */
  margin-left: 25px;
}

input::-ms-reveal,
  input::-ms-clear {
  display: none;
}

.card-couverture-pub-tribu-t nav {
  border-radius: 0 15px 0 0;
}

.toaster_custom {
  margin-left: auto;
  margin-right: auto;
  width: 250px;
  height: 150px;
  border-radius: 5px;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
}

.notification-toster {
  background-color: #fff;
  padding: 15px;
  width: 450px;
  border-radius: 20px;
  box-shadow: 0 2px 5px #00000033;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  overflow: hidden;
}

.notification-toster span {
  font-size: 18px;
  color: #5d6672 !important;
  line-height: 1.6;
  white-space: nowrap;
}

.notification-toster.success {
  border: 1px solid var(--success-md);
  background-color: var(--success-l);
}

/*******/
.notification-toster.info {
  border: 1px solid var(--info-md);
  background-color: var(--info-l);
}

/*******/
.notification-toster.warning {
  border: 1px solid var(--warning-md);
  background-color: var(--warning-l);
}

/********/
.notification-toster.danger {
  border: 1px solid var(--danger-md);
  background-color: var(--danger-l);
}

.container_error_page {
  background: rgba(0, 54, 246, 0);
  background: linear-gradient(189deg, rgba(0, 54, 246, 0) 10%, rgba(0, 111, 255, 0.64) 80%);
  background: -webkit-linear-gradient(189deg, rgba(0, 54, 246, 0) 10%, rgba(0, 111, 255, 0.64) 80%);
  background: -moz-linear-gradient(189deg, rgba(0, 54, 246, 0) 10%, rgba(0, 111, 255, 0.64) 80%);
  width: 100%;
  z-index: 1;
  height: 100vh;
}

.error_page {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  height: 30vh;
  background: white;
  border-radius: 15px;
  text-align: center;
  padding: 25px;
  
  border: 1px solid red;
}

.ma_position {
  font-size: 1.2rem;
}

.ma_position:hover {
  transform: scale(1.2);
  color: blue;
}

.alert_details_marker_position {
  margin: 10px;
  margin-top: 70%;
  text-align: center;
}

.chargement_right_side {
  height: unset !important;
  width: unset !important;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 13%;
  top: 35%;
}

.opacity04 {
  opacity: 0.4;
}

.mini_chargement_content {
  position: absolute;
  top: 48%;
  left: 42%;
}

.mini_chargement_content .word {
  display: inline-block;
  padding: 5px;
  color: white;
  font-size: 15px;
}

.hiddenPage {
  display: none !important;
}

.user_select_None {
  user-select: none;
}

.ir {
  padding-top: 0 !important;
}

.to\/4\/2 {
  width: 43% !important;
  margin-left: -3rem;
  /* margin-top: -1rem; */
}

.vd-head {
  height: 5rem;
}

.hj-resto {
  height: 100vh;
  margin-left: -1.5rem;
}

/* ******************Input image all******************** */

.image-upload {
  background-color: #ffffff;
  /* width: 600px; */
  margin: 0 auto;
  padding: 20px;
}

.image-upload-btn {
  width: 100%;
  margin: 0;
  color: #fff;
  background: #1fb264 !important;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #15824b;
  transition: all 0.2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.image-upload-btn:hover {
  background: #1aa059 !important;
  color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}

.image-upload-btn:active {
  border: 0;
  transition: all 0.2s ease;
}

.image-upload-content {
  display: none;
  text-align: center;
}

.image-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
  /* margin-top: 20px; */
  border: 2px dashed #878787;
  position: relative;
  border-radius: 5px;
}

.image-dropping,
.image-upload-wrap:hover {
  background-color: #696969;
  border: 2px dashed #ffffff;
  color: #1aa059;
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #222;
}

.drag-text {
  text-align: center;
}

.drag-text h3 {
  font-weight: 100;
  /* text-transform: uppercase; */
  font-size: 14pt;
  color: #a4a4a4;
}

.drag-text img {
  /* width: 150px; */
  width: 80px;
  margin-left: auto;
  margin-right: auto;
}

.image-upload-image {
  max-height: 200px;
  max-width: 200px;
  margin: auto;
  padding: 20px;
}

.remove-image-uplaod {
  width: 200px;
  margin: 0;
  color: #fff;
  background: #cd4535 !important;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #b02818;
  transition: all 0.2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 10pt;
}

.remove-image-uplaod:hover {
  background: #c13b2a;
  color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}

.remove-image-uplaod:active {
  border: 0;
  transition: all 0.2s ease;
}

/* ******************fin Input image all******************** */
.rubrique-item {
  padding-bottom: 25px !important;
}

.image_profil_navbar_msg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.center_flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.listNavBarTribu > .active {
  background-color: #0d6efd !important;
  color: white !important;
}

/* .card-pub-actu > img{
  width: 300px !important;
  height: 300px !important;
} */

#contentUpdateOrDelete {
  /* margin-left: 250px; */
}

#editPictureLabel > button {
  padding: 5px 10px 5px 10px;
  background-color: #198754;
  color: white;
  border-radius: 15px;
}

.user-profy {
  float: left;
  width: 100%;
  background-color: #fff;
  text-align: center;
  border-left: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  border-right: 1px solid #ececec;
  -webkit-box-shadow: 0px 0.5px 0.2px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0px 0.5px 0.2px rgba(0, 0, 0, 0.24);
  -ms-box-shadow: 0px 0.5px 0.2px rgba(0, 0, 0, 0.24);
  -o-box-shadow: 0px 0.5px 0.2px rgba(0, 0, 0, 0.24);
  box-shadow: 0px 0.5px 0.2px rgba(0, 0, 0, 0.24);
  padding: 20px 0 0 0;
}

.followw {
  background-color: #53d690;
}

i.fa-eye-slash,
i.fa-eye {
  display: flex;
  align-items: center;
  position: absolute;
  /* height: 790px; */
  /* right: 75px; */
  /* padding-right: 1px; */
  /* margin-top: -35px; */
  cursor: pointer;
  right: 0px;
  padding-right: 1px;
  margin-top: 6px;
}

.content_input_pass i.fa-eye-slash {
  right: 0px !important;
  margin-top: 7px !important;
}

.userProfil {
  clip-path: circle(40%) !important;
}

#succesMessage {
  -webkit-animation: cssAnimation 5s forwards;
  animation: cssAnimation 5s forwards;
}

.cta_connexion_navbar {
  background-color: white;
  border-radius: 50%;
}

.cta_connexion_navbar_no_connected {
  background-color: white;
  clip-path: circle(33%);
}

.cta_connexion_navbar img {
  width: 50px;
  height: 50px;
}

@keyframes cssAnimation {
  0% {
    display: block;
  }
  
  90% {
    display: block;
  }
  
  100% {
    display: none;
  }
}

@-webkit-keyframes cssAnimation {
  0% {
    display: block;
  }
  
  90% {
    display: block;
  }
  
  100% {
    display: none;
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

.starNote {
  display: inline-block;
  font-size: 1rem;
  color: #a09896;
  margin-right: 0.4rem;
}

.avisRestoTribu {
  text-decoration: none;
  /*color:#19a8d8;*/
  cursor: none;
  /* pointer-events: none; */
}

.profil_image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.icon_resto_legend {
  display: block;
  width: 30px;
  height: 40px;
}

.icon_golf_legend {
  display: block;
  width: 30px;
  height: 40px;
}

.containerPastilleResto {
  font-size: 13px;
}

.nomTribuTPastilleResto {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lioTe > b {
  font-size: 1.1rem;
}

.logo_pastille_golf {
  overflow: hidden;
}

.img_nantenaina {
  float: left;
  /* height: 50px; */
  /* margin-left: -10px; */
  cursor: pointer;
}

.super_container_js_nantenaina {
  /* width: 40.3%; */
  /* height: 50px; */
  overflow: hidden;
}

.mainContainerLogoTribu {
  height: 35px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mainContainerLogoTribu:after {
  content: "";
  clear: both;
  
  display: table;
}

.restoNameWithLogoTribu .img_nantenaina img {
  height: 43px;
  width: 35px;
  /* margin-top: -7px; */
  clip-path: circle();
}

.restoNameWithLogoTribu {
  display: flex;
  justify-content: center;
}

#modalAvisRestaurant,
#staticBackdrop_ {
  margin-top: 70px;
}

.kidje3 {
  width: 130px !important;
}

/* #gallery {
  display: flex;
  
} */

#gallery_profil img {
  width: 150px !important;
  margin-right: 85px;
}

.bg-pdp-profil {
  background-color: #02042a !important;
  color: #fff !important;
}

#bottom {
  top: 50px;
  left: -90%;
}

.toltip-hover-text:hover .tooltip-text {
  visibility: visible;
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  width: 320px;
  color: white;
  font-size: 12px;
  background-color: #192733;
  border-radius: 10px;
  padding: 10px 15px 10px 15px;
}

.see-avis {
  color: #fff !important;
  /* width: 150px; */
  margin-left: auto;
  margin-right: auto;
}

.content_titre_details {
  z-index: 1 !important;
}

#confirmPartageAgenda .modal-content {
  height: 150px;
}

.partage_agenda {
  background-color: #fff;
  /* height: 115vh; */
}

.partage_agenda h3 svg {
  display: inline !important;
}

.partage_agenda .dataTables_wrapper {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.partage_agenda .btn-partage-agenda {
  width: 250px;
  margin-left: 50vw !important;
}

.pdp-agenda-tribu-g {
  width: 50px;
  clip-path: circle(40%);
}

.pdp-agenda-tribu-t {
  width: 50px;
  clip-path: circle(40%);
}

.btn-second-primary {
  background-color: #7eb8ee !important;
  border: #7eb8ee 1px solid !important;
  pointer-events: none;
}

/*input upload file style*/
.drop_zone_Nantenaina_css_js {
  max-width: 500px;
  height: 200px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 4px dashed #009578;
  border-radius: 10px;
}

.drop-zone--over {
  border-style: solid;
}

.drop_zone__input_Nantenaina_css_js {
  display: none;
}

.drop-zone__thumb {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #cccccc;
  background-size: cover;
  position: relative;
}

.drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  text-align: center;
}

/* FOR TEXT EDITOR */
/* * {
  font-family: sans-serif;
} */

textarea {
  padding: 2rem;
}

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  display: block;
  padding: 4rem 0;
}

#editor {
  min-height: 180px;
}

.golf_status {
  /* font-size: 0.6rem !important; */
  position: absolute;
  left: 12px;
  top: 12px;
}

.btn_golf_did {
  cursor: pointer;
}

.gray400 {
  background-color: #ced4da;
}

.fontSize07 {
  font-size: 0.7rem;
}

.fontSize06 {
  font-size: 0.6rem;
}

.to-say-it-new {
  position: absolute;
  top: -6px;
  right: 0%;
  background-color: #ffca08;
  font-size: xx-small;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 100px;
}

.what-means-partenaire-Nantenaina_css {
  padding: 15px;
}

.linkOndetail:hover {
  color: #0d6efd;
}

.iconePlus_nanta_js > a > i {
  font-size: 35px;
  color: blue;
  font-weight: bolder;
}

.divContainerImgOnModal {
  display: flex;
  vertical-align: middle;
}

.divContainerImgOnModal img {
  clip-path: circle();
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.divContainerImgOnModal > .tribuTName {
  margin-left: 4%;
  margin-top: 3%;
  color: #0d6efd;
  font-weight: bolder;
  cursor: pointer;
}

.annimation_badge {
  animation: 0.3s infinite alternate bounding_poping;
}

@keyframes bounding_poping {
  0% {
    transform: scale(0.8);
  }
  
  50% {
    transform: scale(0.95);
  }
  
  55% {
    transform: scale(0.952);
  }
  
  75% {
    transform: scale(0.954);
  }
  
  80% {
    transform: scale(0.956);
  }
  
  85% {
    transform: scale(0.958);
  }
  
  90% {
    transform: scale(0.959);
  }
  
  95% {
    transform: scale(1);
  }
  
  100% {
    transform: scale(1.1);
  }
}

.pictureOnBoth {
  font-size: 20px;
  cursor: pointer;
}

#containerCamera video {
  height: 400px;
  width: 400px;
  margin: auto;
}

#pictureOnLocal,
#getPictureOnDevice,
.labelFileRepertory,
.labelPrisePhoto {
  cursor: pointer;
}

#pictureOnLocal:hover,
  #getPictureOnDevice:hover {
  color: #0d6efd;
}

#capture-button {
  display: block;
  position: absolute;
  top: 80%;
  width: 50px;
  height: 50px;
  bottom: 20px;
  left: 50%;
  margin-left: -25px;
  border-radius: 50%;
  background-color: #ff0000;
  border: 2px solid #fff;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  opacity: 0.5;
  outline: none;
  
  &:hover {
    transform: scale(1.1);
  }
  
  &:active {
    background-color: #00ff00;
  }
}

#player {
  height: 300px !important;
  width: 400px !important;
}

#modal-dialog-camera {
  width: 430px !important;
}

.repertoryDir ul li:hover,
  .repertoryDir ul li a:hover {
  color: #0d6efd;
}

.fa-search-elie {
  padding: 5px;
  width: 35px;
  min-width: 35px;
  height: 35px;
  min-height: 35px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #0d6efd;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  clip-path: circle(50%);
  transition: 0.25s;
}

.fa-search-elie:hover {
  border: 1px solid #09ff00;
  color: #fff;
  scale: 1.2;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.btn-minimize-elie :hover {
  color: #f70b0b;
}

.btn-minimize-elie,
.btn-expand-elie {
  height: auto !important;
  background: none !important;
  opacity: 1 !important;
  font-size: 20px;
}

.btn-expand-elie {
  left: 5px !important;
  top: 5px !important;
  position: absolute;
  color: white !important;
}

.btn-expand-elie:hover {
  scale: 1.2;
  color: #0d6efd !important;
}

.visioMinimize {
  width: 280px;
  height: 176px;
  left: auto !important;
  background-color: transparent;
}

.tooltiptext {
  font-size: 12px;
  visibility: hidden;
  width: 60px;
  background-color: #000;
  opacity: 0.5;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 1px 0;
  margin-left: -62px;
  transition: opacity 0.3s;
  position: absolute;
  z-index: 1;
}

.btn-minimize-elie:hover .tooltiptext {
  visibility: visible;
}

.btn-expand-elie:hover .tooltiptext {
  visibility: visible;
}

.btn-expand-elie-v2:hover .tooltiptext {
  visibility: visible;
}

.tooltiptextAgrandir {
  margin-left: -40px !important;
  margin-top: -30px !important;
}

.mt-50px {
  margin-top: -50px !important;
  color: #000;
}

.modal_visio {
  /* display: none; */
  position: fixed;
  width: 80%;
  height: 80%;
  background-color: #fff;
  z-index: 9999;
  left: 10%;
  right: 10%;
  top: 10%;
  border-radius: 10px;
  padding: 10px 10px;
  border: 1px solid red;
  animation-duration: 1s;
  /* transition: 1s ease-in-out; */
  transition: all 0.7s;
}

.modal_visio_to_min {
  transform: translate(25px, 25px);
}

#bodyVisioMessageElie {
  height: 72vh;
  padding: 2px 0;
}

/**modal gallerie*/
/*The Modal (background)*/
.modalZoom {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

/*Modal Content (Image)*/
.modalZoom-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 900px;
  border-radius: 5px;
}

/*Add Animation - Zoom in the Modal*/
.modalZoom-content,
#captionZoom {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  
  to {
    transform: scale(1);
  }
}

/**The Close Button*/
.closeZoom {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.closeZoom:hover,
  .closeZoom:focus {
  color: #ff0000;
  text-decoration: none;
  cursor: pointer;
}

.minRightModal {
  display: block !important;
  width: 300px;
  height: 220px;
  right: 0;
  margin: auto;
  bottom: 0;
  left: auto;
  padding: 0 !important;
  border-radius: 0px !important;
  top: 66% !important;
}

.minRightVisioBody {
  /* height: 100%!important; */
  height: 194px !important;
  padding: 0 !important;
}

.btn-expand-elie-v2 {
  margin-right: 2px;
  color: #000;
}

/*100% Image Width on Smaller Screens*/
@media only screen and (max-width:700px) {
  .modalZoom-content {
    width: 100%;
  }
}

.pictureOnLocal {
  text-align: center;
  padding: 3px 3px;
  border: 1px dashed gray;
  border-radius: 10px;
  cursor: pointer;
}

.pictureOnDevice {
  text-align: center;
  background: lavender;
  border-radius: 5px;
  padding: 6px;
}

.labelPrisePhoto {
  /* border: 1px solid; */
  border-radius: 8px;
  padding: 5px;
  cursor: pointer;
  background: lavender;
  /* color: #0d6efd; */
}

.labelPrisePhoto:hover {
  color: #0d6efd;
}

.toast-close {
  color: black !important;
  font-size: 1.2rem !important;
  font-weight: bolder !important;
  opacity: 1 !important;
  position: absolute;
  top: 5px;
  right: 5px;
}

.content_message_tooltip {
  position: relative;
}

.message_tooltip {
  display: block;
  position: absolute;
  top: 6px;
  right: 58px;
  width: 250px;
  background-color: lightgreen;
  color: black;
  padding: 6px;
  border-radius: 5px;
}

.message_tooltip_bottom_right {
  display: block;
  position: absolute;
  top: -36px;
  left: 15px;
  width: 251px;
  background-color: lightgreen;
  color: black;
  padding: 6px;
  border-radius: 5px;
}

.message_tooltip_bottom_right:after {
  position: absolute;
  content: "";
  bottom: -63%;
  left: 3px;
  border-top: 15px solid lightgreen;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
}

.message_tooltip:after {
  position: absolute;
  content: "";
  top: 18%;
  right: -15px;
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid lightgreen;
}

.bg_orange {
  background-color: #ff7900 !important;
  border-color: #ff7900 !important;
  color: white !important;
}

.bg_vert {
  background-color: green !important;
  border-color: green !important;
  color: white !important;
}

.drop_down_map {
  font-size: 1.2rem;
  color: black;
  margin-left: 10px;
}

.dropdown-toggle::after {
  display: none !important;
}

.text_black {
  color: black;
}

.pointeur-event-none-tomm-js {
  pointer-events: none;
}

.flash-msg-ERREUR {
  color: red;
  font-size: 8pt;
}

.hover-deconnexion {
  color: #6c757d;
}

.hover-deconnexion:hover {
  color: #0d6efd;
}

.iti__flag {
  background-image: url(/build/images/flags.1952df89.png);
}

@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {
  .iti__flag {
    background-image: url(/build/images/flags@2x.276410ff.png);
  }
}

.content_input_piece_joint {
  position: relative;
  /* width: 350px; */
}

.message_tooltip_piece_joint {
  display: block;
  position: absolute;
  background-color: lightgreen;
  color: black;
  padding: 6px;
  border-radius: 5px;
  /* top: 5px; */
  /* left: 40px; */
  
  top: -60px;
  left: -66px;
  width: 200px;
  text-align: center;
}

.message_tooltip_piece_joint:after {
  position: absolute;
  content: "";
  /*
  top: 25%;
  left: -15px;
  border-top: 5px solid transparent;
  border-right: 10px solid lightgreen;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  */
  
  bottom: -15px;
  left: 69px;
  border-top: 5px solid lightgreen;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
}

.pointer_cursor {
  cursor: pointer !important;
}

.content-modal-pastille-golf {
  position: absolute;
  top: 0;
  z-index: 1031;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}

.modal-pastille-golf {
  width: 40%;
  height: auto;
  background: #fff;
  border-radius: 6px;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.3);
  margin-right: auto;
  margin-left: auto;
  margin-top: 175px;
  padding: 20px;
}

.pwd-eye {
  margin-right: 80px;
  margin-top: -35px !important;
}

.logo_path_pastille {
  width: 35px;
}

.logo_path_pastille_details {
  float: left;
  height: 35px;
  margin-left: -10px;
  cursor: pointer;
  clip-path: circle();
}

.length-pastille-plus {
  color: #000;
  cursor: pointer;
}

/* css modal carousel*/
.modal-body-pastille-golf {
  overflow-y: scroll;
  height: 270px;
}

.swal-modal {
  z-index: 1;
}

.logo_path_pastille {
  width: 50px;
  height: 50px;
  clip-path: circle();
}

.info_multiple_mail {
  font-size: 0.8rem;
  color: #00acff;
}

.add-photo-detail {
  padding: 0 10px;
  border-radius: 5px;
  border: 1px #7eb8ee solid;
  /* margin-bottom: 5px; */
}

.content_images {
  position: relative;
  width: 100%;
  height: 250px;
}

.add-photo-detail:hover {
  color: #00ff00;
  border: 1px #00ff00 solid;
}

.preview-photo-detail {
  max-height: 200px;
  /* height: 200px; */
  /* width: 100%; */
  background-position: 50%;
  background-size: cover;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 5px;
}

.all-photos-detail {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  height: 80%;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 5px;
}

.all-photos-detail:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.image-miniature {
  width: 130px;
  height: 130px;
  min-width: 130px;
  min-height: 130px;
  cursor: pointer;
}

/* .modal_footer_tribu{
  justify-content: flex-start !important;
  height: 160px;
  overflow-x: auto;
} */
.footer-gallery {
  justify-content: flex-start !important;
  height: 160px;
  overflow-x: auto;
}

.body-gallery {
  padding: 0 !important;
}

.btn-next-photo,
.btn-previous-photo {
  padding: 5px;
  margin: 0 0.5rem;
  font-size: xx-large;
  top: 45%;
  appearance: none;
  background-color: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 2px 2px #1a1a1a);
  outline: none;
  position: absolute;
  transition: all 0.2s ease-out;
  border-radius: 5px;
}

.btn-close-custom-elie {
  padding: 5px;
  margin: 0 0.25rem;
  z-index: 5;
  font-size: larger;
  float: right;
  right: 0;
  appearance: none;
  background-color: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 2px 2px #1a1a1a);
  outline: none;
  position: absolute;
  transition: all 0.2s ease-out;
  border-radius: 5px;
}

.btn-close-custom-elie:hover {
  color: red;
}

.btn-next-photo:hover,
  .btn-previous-photo:hover {
  background: white;
  color: aqua;
}

.btn-previous-photo {
  left: 0;
  float: left;
}

.btn-next-photo {
  float: right;
  right: 0;
}

.modal-content-gallery {
  border-radius: 0 !important;
}

.body-gallery img {
  width: 100%;
}

.current-gallery-photo {
  border: 2px #00ff00 solid;
  scale: 1.2;
}

.h-40 {
  height: 40px !important;
}

.photo-not-valid {
  width: 150px;
  height: 150px;
}

.bi-heart-fill {
  color: red;
}

/*end*/

.user-pdp-reaction {
  width: 40px;
  height: 40px;
  clip-path: circle();
}

.nbr_reaction_elie_js {
  cursor: pointer;
}

.content_icon_draggable {
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 10;
  font-weight: bolder;
  font-size: 1.2rem;
  cursor: move;
}

/*100% Image Width on Smaller Screens*/
@media only screen and (max-width:991px) {
  .content_icon_draggable {
    display: none;
  }
}

.message_tooltip_drag {
  display: block;
  position: absolute;
  top: -45px;
  right: -217px;
  width: 250px;
  background-color: lightgreen;
  color: black;
  padding: 6px;
  border-radius: 5px;
  font-size: 0.6rem;
}

.message_tooltip_drag:after {
  position: absolute;
  content: "";
  top: 35px;
  left: 19px;
  border-top: 10px solid lightgreen;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
}

#remove-detail-marche,
#remove-detail-resto,
#remove-detail-ferme,
#remove-detail-ferme,
#remove-detail-station,
#remove-detail-golf,
#remove-detail-tabac,
#remove-detail-home {
  position: absolute;
  top: 0px;
  /* z-index: 999999; */
  /* transform: translate(70vw, 15vh) !important; */
}

#btn_to_drag {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196f3;
  color: #fff;
}

.translate_left {
  margin-left: -10px !important;
}

.flex_content_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex_content_start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex_content_end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.length-pastille-plus > i {
  font-size: 35px;
  color: blue;
  font-weight: bolder;
}

.content_logo_tribu_pastille {
  width: 30px;
  height: 80%;
  border-radius: 50%;
}

.logo_tribu_pastille {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.text_bold_pastille_golf {
  text-align: start;
  font-size: 0.9rem;
  font-weight: 600;
}

.cta_mongolf {
  font-size: 0.8rem;
  font-weight: bolder;
}

/* Elie
* Style pour publication card actualité et tribu T actu
*/

.card-actualite {
  border: none !important;
  border-radius: 0% !important;
}

.image-actualite {
  /* border-radius: 0% !important; */
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
}

.pub_decription_mobile {
  display: none;
}

/**
Responsive card publication
*/
@media screen and (max-width:992px) {
  .image-actualite {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
  }
  
  .pub_decription_mobile {
    display: block !important;
  }
  
  .pub_decription_normal {
    display: none !important;
  }
  
  .status-content {
    height: 28px;
  }
  
  .user_actualite {
    overflow-y: unset !important;
    /* width: 93vw !important; */
  }
  
  .boucle-for-pub {
    margin-right: 12px;
  }
}

.badge-type {
  padding-top: 0.4rem !important;
  height: 22px;
}

.image-detail-publication {
  max-width: 100%;
  height: auto;
  min-width: 100%;
  object-fit: contain;
}

.voir-plus-publication {
  color: #0d6efd;
  cursor: pointer;
}

.voir-plus-publication:hover {
  text-decoration: underline;
}

.tooltip-elie .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #6f42c1;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  margin-left: 10px;
  margin-top: 10px;
}

.tooltip-elie .tooltiptext::after {
  content: "";
  top: 100%;
  left: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: #6f42c1 transparent transparent transparent;
}

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

.head-pub-actualite {
  padding: 0 15px !important;
}

.container-desc {
  height: 60px !important;
}

.profil_publication_actualite {
  width: 20px;
  height: 20px;
  clip-path: circle();
}

.carbonads {
  position: static;
  display: block;
  /* min-width: 45.75rem; */
  width: 100%;
  max-width: 45.75rem;
  padding: 10px 15px 10px 160px;
  /* margin: 2rem 0; */
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  background-color: white;
  border-radius: 0.5rem;
}

.carbonads_no_image {
  position: static;
  display: block;
  /* max-width: 80%; */
  width: 100%;
  max-width: 45.75rem;
  padding: 10px 15px 10px 15px;
  /* margin: 2rem 0; */
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  background-color: white;
  border-radius: 0.5rem;
}

.carbon-img {
  float: left;
  margin-left: -145px;
}

.carbon-poweredby {
  display: block;
  /* margin-top: 0.75rem; */
  color: #212529 !important;
}

.carbonads a {
  color: #212529;
  text-decoration: none;
}

.user-publication-actualite {
  font-weight: bold;
  color: #00acff;
}

.tribu-publication-actualite {
  font-weight: bold;
  color: #000;
}

.clock-publication-actualite {
  font-size: xx-small;
  font-style: italic;
}

.detail-publication-actualite {
  margin-left: -30px;
}

.confid-publication-actualite a,
.param-publication-actualite li {
  font-size: small;
}

.reaction-icon-actualite {
  padding: 5px 15px !important;
}

/* End card publication actalite by Elie*/

.create-album {
  width: 8vw !important;
  height: 10vh !important;
}

.create-album i {
  font-size: 24pt;
  color: #8b8b8b;
}

/* .create-album-img {
  color: #0d6efd !important;
  font-weight: 700 !important;
} */

.create-album-img i {
  font-size: 14pt;
  /* color: #8b8b8b; */
}

.input-album {
  border: 1px solid #ccc;
  outline: none;
  width: 270px;
  height: 50px;
  border-radius: 33px;
  margin: 0 auto;
  display: block;
  color: #151515;
  font-family: "open sans", sans-serif;
  font-size: 19px;
  padding-left: 30px;
  position: relative;
  top: 0;
  left: 0;
}

.content-gal-all {
  position: relative;
}

.select-album {
  position: absolute;
  top: 0;
  right: 0;
}

.doc-album i {
  font-size: 78pt;
  color: #ffbf00a1;
}

/* Style for message iframe acceuil by Elie*/

.message-iframe {
  width: 100%;
  height: 100%;
}

@media screen and (min-width:1137px) and (max-width:1259px) {
  .nav-item a.blabla {
    font-size: medium !important;
  }
}

#messageIframe,
#visioIframe {
  z-index: 99999;
}

/* End style iframe accueil*/

.dockableDetail button {
  border-radius: 8px;
  font-size: 1.1rem;
  width: 40px;
  height: 40px;
  text-align: center;
  background-color: #0dcaf0;
  color: white;
}

.dockableDetail button:hover {
  background-color: #fff;
  color: #0dcaf0;
}

.number-of-icon {
  color: black;
  position: absolute;
  top: 10%;
  right: 30%;
  font-size: 13px;
}

.liste-icones button {
  border-radius: 8px;
  font-size: 1.1rem;
  width: 40px;
  height: 40px;
  text-align: center;
  background-color: #0dcaf0;
  color: white;
}

.content_chargment_tribut {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

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

  /* Add by Elie**/
  border: 1px solid #2e8b7a;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.text_number_per_dep {
  margin-top: 5px;
  font-size: 0.75rem;
  font-weight: bolder;
  text-align: center;
  color: black;
}

.liste-icones-dock {
  border-radius: 8px;
  font-size: 1.1rem;
  width: 40px;
  height: 40px;
  text-align: center;
  background-color: #0dcaf0;
  color: white;
}

/* Avis audio*/

.note_avis_jheo_js {
  padding-right: 25px !important;
}

.start_audio_avis_elie_js,
stop_audio_avis_elie_js {
  /* position: absolute;
  font-size: larger;
  color: blue;
  bottom: 42px;
  float: right;
  right: 40px; */
  cursor: pointer;
}

.audio-record {
  position: absolute;
  /* width: 35px; */
  width: 43px;
  /* bottom: 25px; */
  top: 74%;
  float: right;
  right: 15px;
  font-size: larger;
  color: blue;
}

.tooltip-audio {
  position: absolute;
  width: 100%;
}

.start_audio_avis_elie_js .audio_tooltip_start,
.stop_audio_avis_elie_js .audio_tooltip_stop {
  visibility: hidden;
  width: 150px;
  background-color: #6f42c1;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  float: right;
  margin-right: 40px;
  font-family: sans-serif;
  font-size: small;
}

.start_audio_avis_elie_js:hover .audio_tooltip_start {
  visibility: visible;
  opacity: 1;
}

.stop_audio_avis_elie_js:hover .audio_tooltip_stop {
  visibility: visible;
  opacity: 1;
}

.red {
  color: red !important;
}

.disabled i {
  color: gray;
  pointer-events: none;
}

/*End avis audio*/

/* Avis vidéo*/

.camera-record {
  /* position: absolute; */
  /* width: 35px; */
  /* bottom: 25px; */
  /* top: 74%; */
  /* float: right; */
  /* right: 5px; */
  width: 20px;
  font-size: larger;
  color: blue;
}

.record {
  position: absolute;
  width: 35px;
  /* top: 74%; */
  top: 75%;
  float: right;
  right: 12px;
}

.btn_capture_avis,
.btn_video_avis,
.btn_video_stop_avis,
.btn_change_micro_avis,
.btn_change_cam_avis {
  display: block;
  position: absolute;
  top: 80%;
  width: 50px;
  height: 50px;
  bottom: 20px;
  margin-left: -25px;
  border-radius: 50%;
  
  /* border: 2px solid #fff; */
  border: 2px solid #00ff00;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  /* opacity: 0.5; */
  outline: none;
  background-color: white;
}

.btn_capture_avis {
  left: 20%;
  /* background-color: #ff0000; */
}

.btn_video_avis {
  /* right: 38%; */
  left: 40%;
  /* background-color: #0D6EFD; */
}

.btn_video_stop_avis {
  left: 40%;
  /* right: 38%; */
}

.btn_change_micro_avis {
  left: 60%;
  /* background-color: #00ff00; */
}

.btn_change_cam_avis {
  left: 80%;
  /* background-color: #00ff00; */
}

.body-cam {
  padding: 0 !important;
}

.image-capture-cam,
.video-cam-avis {
  width: 200px;
  height: 150px;
}

.show-avis-media {
  width: 100%;
  height: 100px !important;
}

.img-update {
  width: 100px;
  height: 100px;
}

#playerCam {
  width: 100%;
}

.chevron-options {
  position: absolute;
  top: -5px;
  border: 3px #00ff00 solid;
  border-radius: 50%;
  color: #fff;
  background-color: #000;
}

.chevron-options:hover {
  background-color: #fff;
  color: #000;
  border: 2px #fff 00ff00;
}

#optionMedia {
  width: 97%;
  position: absolute;
  bottom: 27%;
  z-index: 1;
  margin-bottom: 0.75rem !important;
}

.chrono_avis {
  position: absolute;
  background-color: #000;
  opacity: 0.6;
  top: 20px;
  margin: auto;
}

#bars {
  height: 14px;
  width: 180px;
  margin: auto;
  transform: scale(2) translateX(0%);
}

.bar {
  position: absolute;
  bottom: 0px;
  height: 3px;
  width: 1px;
  background: #000;
  animation: sound 0ms -800ms linear infinite alternate;
  transform: translateY(50%);
}

@keyframes sound {
  0% {
    opacity: 0.35;
    height: 3px;
  }
  
  100% {
    opacity: 1;
    height: 28px;
  }
}

/*End avis video*/

/**start onglet msg**/
.onglet-msg-all {
  height: 63vh;
  position: fixed;
  bottom: 10px;
  right: 7%;
  z-index: 100;
  display: flex;
}

.onglet-msg {
  background-color: #fff;
  box-shadow: 5px 0px 10px 5px rgba(0, 0, 0, 0.1);
  width: 25vw;
  height: 100%;
  margin-left: 15px;
}

.head-msg-onglet {
  background-color: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 10px;
  z-index: 1;
}

.name-msg-onglet {
  font-size: 12pt;
  width: 160px;
}

.content-entete-msg-onglet {
  margin-left: 0 !important;
}

.footer-msg-onglet {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.content-discussion-msg {
  background-color: #fff;
}

.btn-send-onglet-msg {
  height: 35px;
  width: 70px;
}

.input-onglet-msg {
  height: 65px;
  font-size: 12pt !important;
}

.pdp-onglet-msg {
  max-width: 35px;
  max-height: 35px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.content-close {
  display: flex;
}

.content-bulle-all {
  width: 120px;
  position: fixed;
  bottom: 3%;
  right: 0;
  z-index: 2;
}

.content-bulle {
  background: #000;
  width: 50px;
  height: 50px;
  margin-top: -115px;
  border-radius: 50%;
}

.content-bulle-list {
  background: #1f88ff;
  width: 50px;
  height: 50px;
  position: relative;
  border-radius: 50%;
}

.content-bulle-list i {
  color: #fff;
  position: absolute;
  top: 25%;
  left: 25%;
  font-size: 20pt;
}

.navleft .list-depart-all-specific-arrond {
  height: 80vh;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: 60px;
}

.navleft .list-depart-all-specific-arrond ul li .container-depart {
  margin: auto auto auto auto;
}

.navleft .list-depart-all-specific-arrond ul li .container-depart svg {
  fill: #28be21;
  width: 5vw;
  height: 5vh;
  margin-left: -15px;
  margin-top: 15px;
}

.navleft .list-depart-all-specific-arrond ul li .container-depart svg:hover {
  fill: #000;
  width: 5.5vw;
  height: 5.5vh;
  margin-left: -15px;
  margin-top: 15px;
}

.loading_list_favory {
  margin: auto;
  height: 20px !important;
  width: 20px !important;
}

.icon_favory_rubrique {
  display: block;
  width: 37px;
  height: 37px;
  padding: 4px;
  border-radius: 25px;
  box-shadow: 0px 0px 7px 1px #0d3f3c;
}

.list-group-item_favory{
  padding: 5px 0px 5px 20px;
}

.list_favory{
  color: black;
}

.border_buttom_custom{
  border-bottom: 1px solid gray;
}

.font_size_09 {
  font-size: 0.9rem;
}

.content_list_folder {
  display: block;
  max-height: 250px;
  overflow-x: hidden;
  overflow-y: auto;
}

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

.content_list_folder::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

.content_list_folder::-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));
}

.error_folder_name {
  width: 100%;
  margin-top: rem;
  font-size: 0.8em;
  color: #dc3545;
  font-weight: 400;
}

.border_input_danger {
  border: 1px solid #dc3545 !important;
}

.custom_alert_danger {
  text-align: center !important;
  --bs-alert-padding-y: 5px !important;
  font-size: 0.8rem !important;
}

.content_list_favory {
  max-height: 66vh;
  overflow-x: hidden;
  overflow-y: auto;
}

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

.content_list_favory::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

.content_list_favory::-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));
}

.favory_folder_collapse {
  font-size: 0.85rem;
}

.favory_etablisment {
  cursor: pointer;
  font-size: 0.9rem;
}

@media screen and (min-width:360px) {
  html {
    height: 100% !important;
  }
  
  body {
    height: 100% !important;
  }
  
  .body-onglet-msg {
    background-color: #fff;
  }
}

@media screen and (min-width:480px) {
  html {
    height: 100% !important;
  }
  
  body {
    height: 100% !important;
  }
  
  .body-onglet-msg {
    background-color: #fff;
  }
  
  .name-msg-onglet {
    width: 300px !important;
  }
  
  .footer-msg-onglet {
    width: 100% !important;
  }
}

/*list téléchargement*/
/**download list*/
.list-dw {
  list-style-type: none !important;
  margin-bottom: 70px;
}

li.list-dw > a {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-decoration: none;
  padding: 35px 20px 13px 60px;
  margin-right: 40px;
  color: #444;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/41294/download.png") 2px 0 no-repeat;
}

li.list-dw > a:hover {
  border-color: #444;
  box-shadow: 0 0 10px #444;
}

li.list-dw > a:active {
  border-color: #ccc;
  box-shadow: none;
}

li.list-dw > a.pdf:before {
  position: absolute;
  width: 62px;
  height: 72px;
  top: 2px;
  left: 2px;
  transition: all 0.4s;
}

li.list-dw > a[href$=".ppt"]:before {
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/41294/ppt.png");
}

li.list-dw > a.pdf:before {
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/41294/pdf.png");
}

li.list-dw > a[href$=".doc"]:before {
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/41294/doc.png");
}

li.list-dw > a[href$=".xls"]:before {
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/41294/xls.png");
}

li.list-dw > a[href$=".zip"]:before {
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/41294/zip.png");
}

li.list-dw > a[href$=".ppt"]:hover:before,
  li.list-dw > a.pdf:hover:before,
  li.list-dw > a[href$=".doc"]:hover:before,
  li.list-dw > a[href$=".xls"]:hover:before,
  li.list-dw > a[href$=".zip"]:hover:before {
  opacity: 0;
}

li.list-dw > a[href$=".ppt"]:after,
li.list-dw > a.pdf:after,
  li.list-dw > a[href$=".doc"]:after,
  li.list-dw > a[href$=".xls"]:after,
  li.list-dw > a[href$=".zip"]:after {
  content: "Consulter.";
  position: absolute;
  top: 10px;
  left: 60px;
  color: #aaa;
}

/*liste partisan dans rubrique message*/
.name_tribu_faniry_js:after {
  background: none repeat scroll 0 0 transparent;
  /* bottom: 0; */
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  /* position: absolute; */
  background: #227bc9;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.name_tribu_faniry_js:hover:after {
  width: 100%;
  left: 0;
}

.name_tribu_faniry_js.active:after {
  width: 100%;
  left: 0;
}

/*end*/

.multiselect {
  width: 28em;
  height: 15em;
  border: solid 1px #c0c0c0;
  -moz-box-shadow: inset 0 0 10px #c0c0c0;
  -webkit-box-shadow: inset 0 0 10px #c0c0c0;
  box-shadow: inset 0 0 10px #c0c0c0;
  overflow: auto;
  margin-left: auto;
  margin-right: auto;
}

.multiselect label {
  display: block;
  text-indent: -1.2em;
  padding: 0.2em 0 0.2em 1.2em;
}

.multiselect-on {
  color: #ffffff;
  background-color: #0e8eff;
}

.multiselect-blurred {
  background: lightgray;
}

/**** drop & input csv news letter *****/
.drop_zone {
  position: relative;
  margin-left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 20px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  font-size: 14pt;
  cursor: pointer;
  color: #cccccc;
  border: 2px dashed #009578;
  border-radius: 10px;
}

.drop-zone-input {
  display: none;
}

.drop-zone__thumb_letter {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: #cccccc;
  background-size: cover;
  position: relative;
}

.icon-close-csv {
  position: absolute;
  right: -20px;
  top: -10px;
  z-index: 1;
}

.drop-zone__thumb_letter::after {
  content: attr(data-label);
  position: absolute;
  top: -17px;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  text-align: center;
}

.head-content img {
  height: 125px;
  margin: 10px;
  border-radius: 15px;
}

.photo-nom-tribu-g {
  background-color: #8888;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important;
}

.new-letter-select {
  position: relative;
}

.new-letter-select .tooltip-new-letter {
  position: absolute;
  z-index: 9999;
  bottom: 110%; /* au-dessus de l'icône */
  right: 0;
  top: -30px;
  left: 50%;
  width: 290px;
  transform: translateX(-50%);
  background-color: #6e6e6e;
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 9pt;
  font-family: sans-serif;
  transition: all 0.3s ease;
}

.new-letter-select:hover .tooltip-new-letter, .new-letter-select:hover .tooltip-new-brouillon {
  opacity: 1;
  visibility: visible;
  top: 20px;
}

.content-csv-letter {
  position: relative;
}

.qestion-csv-letter {
  position: absolute;
  right: 20px;
  top: 5px;
  color: #0d6efd;
  animation: heartbeat 1s infinite alternate;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(1.1);
  }
  
  100% {
    transform: scale(1);
  }
}

/** Debut Pastille sur la carte*/
.td_pastille .other_nb_tribu {
  position: absolute;
  margin-left: 20px;
  color: red;
  margin-bottom: 20px;
  width: 25px;
  text-align: center;
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
}

.other_nb_tribu:hover,
  .icon_resto_legend:hover {
  transform: scale(1.2);
}

/** End Pastille sur la carte*/

/**new tribu G*/
.head-content img {
  height: 125px;
  margin: 10px;
  border-radius: 15px;
}

.photo-nom-tribu-g {
  background-color: #8888;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important;
}

/**end new tribu g*/

.img50_50 {
  width: 50px;
  height: 50px;
}

.chargememt_modal_fullscreen {
  height: 76vh;
  width: 90vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fa_solid_edit_marche {
  font-size: 1.2rem;
  color: blue;
}

.head-list-onglet {
  background-color: #fff;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 10px;
  z-index: 3;
}

.head-list-onglet .fa-people-line {
  font-size: 15pt;
}

.position-msg-onglet {
  right: 33% !important;
}

.content-entete-list-onglet {
  margin-left: 0 !important;
  width: 90%;
}

.search-message {
  margin-top: 60px !important;
  position: relative;
  z-index: 2;
}

.lookup_fan_result_bulle {
  margin-top: 100px !important;
}

.list-group-flush-bulle {
  margin-top: 100px;
}

.content-confid-tribu {
  background-color: #fff;
  box-shadow: 3px 2px 6px 2px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 15px;
}

/** Reponse avis by Elie*/

.profil_image_v2 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

ul {
  margin-left: 20px;
}

.wtree {
  margin-top: 10px;
  margin-left: 10px;
}

.wtree {
  li {
    list-style-type: none;
    margin: 10px 0 10px 10px;
    border-radius: 5px;
    position: relative;
    
    &:before {
      content: "";
      position: absolute;
      top: -10px;
      left: -20px;
      border-left: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      width: 20px;
      height: 15px;
    }
    
    &:after {
      position: absolute;
      content: "";
      top: 5px;
      left: -20px;
      border-left: 1px solid #ddd;
      border-top: 1px solid #ddd;
      width: 20px;
      height: 100%;
    }
    
    &:last-child:after {
      display: none;
    }
    
    span {
      /* display:block;
      border: 1px solid #ddd;
      padding:10px;
      color:#888;
      text-decoration:none; */
    }
  }
}

.wtree {
  li {
    span {
      &:hover,
      &:focus {
        background: #eee;
        color: #000;
        border: 1px solid #aaa;
        
        & + ul {
          li {
            span {
              background: #eee;
              color: #000;
              border: 1px solid #aaa;
            }
          }
        }
      }
      
      &:hover + ul,
      &:focus + ul {
        li {
          &:after,
          &:before {
            border-color: #aaa;
          }
        }
      }
    }
  }
}

span.btn_event:hover {
  background: #eee;
  color: #000;
  border: 1px solid #aaa !important;
}

/** End Reponse avis*/

.content_global_super_admin .dataTables_wrapper {
  overflow-x: auto;
}

.dataTables_wrapper {
  overflow-x: auto;
}

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

.nav-super-admin {
  background-color: #ffffff;
  color: rgb(0, 0, 0);
}

.content-modal-body-marche {
  height: 430px;
  overflow-y: auto;
}

.content-bulle-nb {
  position: relative;
}

.bulle-nb-msg {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
}

.content-modal-body-marche {
  height: 430px;
  overflow-y: auto;
}

.content-bulle-nb {
  position: relative;
}

.bulle-nb-msg {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
}

.content-list-partison {
  width: 200px;
  max-height: 300px;
  background: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 11px;
  position: absolute;
  bottom: 290px;
  right: 85px;
  z-index: 1;
  overflow-y: auto;
}

.hiddenInput {
  position: absolute;
  top: -9999px;
}

.input-div-mesg {
  padding: 13px;
}

[contenteditable="true"]:empty:before {
  content: attr(data-placeholder);
  display: block;
  color: grey;
  pointer-events: none;
}

.bi-camera-fill-tribut {
  font-size: 20px;
  margin-top: 5px;
  margin-left: 15px;
  cursor: pointer;
  background-position: 0px -130px;
  background-size: auto;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  display: inline-block;
}

.label-bi-cam-t {
  margin-left: 50%;
  margin-top: 50%;
}

.collapse_list_child_tribu {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  padding-left: 10px;
}

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

/** SOndage */

.content-img-sondage {
  display: flex;
  max-width: 150px;
  overflow: hidden;
}

.pdp-sondage {
  width: 25px;
  height: 25px;
  clip-path: circle(40%);
  margin-right: -8px;
}

.count-sondage {
  width: 25px;
  height: 25px;
  /* clip-path: circle(40%); */
  margin-right: -8px;
  /* background-color: #e6e6e6; */
  
  position: absolute;
  left: 30px;
}

.span-sondage {
  font-size: 8pt;
  margin: auto auto;
  color: #0d6efd;
  position: absolute;
  top: 0px;
  margin-left: 5px;
}

.count-vos-sondage {
  width: 20px;
  height: 20px;
  clip-path: circle(40%);
  margin-right: -8px;
  background-color: #e6e6e6;
  position: absolute;
  left: 70px;
}

.legende {
  display: block;
  width: 20px;
  height: 20px;
  clip-path: circle(40%);
}

.legende-bleu {
  background-color: #0d6efd;
}

.legende-vert {
  background-color: #198754;
}

.content-modal-body-marche {
  height: 430px;
  overflow-y: auto;
}

.content-bulle-nb {
  position: relative;
  width: 50px;
}

.contet-input {
  position: relative;
}

.content-list-partison {
  width: 200px;
  max-height: 300px;
  background: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 11px;
  position: absolute;
  bottom: 75px;
  right: 85px;
  z-index: 1;
  overflow-y: auto;
  border: #858585 1px solid;
}

.hiddenInput {
  position: absolute;
  top: -9999px;
}

.input-div-mesg {
  padding: 13px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

[contenteditable="true"]:empty:before {
  content: attr(data-placeholder);
  display: block;
  color: grey;
  pointer-events: none;
}

.bi-camera-fill-tribut {
  font-size: 20px;
  margin-top: 5px;
  margin-left: 15px;
  cursor: pointer;
  background-position: 0px -130px;
  background-size: auto;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  display: inline-block;
}

.label-bi-cam-t {
  margin-left: 50%;
  margin-top: 50%;
}

.repondre-message {
  width: 14pt;
  height: 14pt;
}

.repondre-message:hover {
  width: 15pt;
  height: 15pt;
}

.repondre-message g {
  fill: #ccc;
}

.repondre-message g:hover {
  fill: #969696;
}

.p-title-reponse {
  font-size: 10pt;
}

.msg-title-reponse {
  font-size: 9pt;
}

.is-reponse-message {
  background: rgba(223, 223, 223, 0.5);
}

/** End Sondage */

/** BEGIN MARKETPLACE dans tribu T*/

.user-select-none {
  user-select: none;
}

a {
  text-decoration: none !important;
  color: unset;
}

.review-star {
  color: #fdcc0d;
  font-size: 13px;
}

/* ===========
Product Single Card - Start
============= */
.product-single-card {
  padding: 20px;
  border-radius: 5px;
  /* box-shadow: 1px 1px 15px #cccccc40; */
  transition: 0.5s ease-in;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* background-color: red; */
}

.product-single-card:hover {
  -webkit-box-shadow: 1px 1px 28.5px -7px #d6d6d6;
  -moz-box-shadow: 1px 1px 28.5px -7px #d6d6d6;
  box-shadow: 1px 1px 28.5px -7px #d6d6d6;
}

.product-single-card .product-info {
  padding: 15px 0 0 0;
}

.product-single-card .product-top-area {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 5px;
}

.product-single-card .product-top-area .product-discount {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  border-radius: 50rem;
  padding: 0px 5px;
  box-shadow: 1px 1px 28.5px -7px #dddddd;
  user-select: none;
  z-index: 999;
  background-color: #dc3545;
  font-size: 11px;
}

.product-single-card .product-top-area .product-img {
  /* aspect-ratio: 1/1; */
  overflow: hidden;
}

.product-single-card .product-top-area .product-img .first-view {
  transition: 0.5s ease-in;
}

.product-single-card .product-top-area .product-img .hover-view {
  opacity: 0;
  transition: 0.5s ease-in;
}

.product-single-card .product-top-area:hover .product-img .first-view {
  /* opacity: 0; */
  /* width: 0;
  height: 0; */
  scale: 1.2;
}

.product-single-card .product-top-area:hover .product-img .hover-view {
  opacity: 100%;
  scale: 1.2;
}

.product-single-card .product-top-area .sideicons {
  position: absolute;
  right: 15px;
  display: grid;
  gap: 10px;
}

.product-single-card .product-top-area .sideicons .sideicons-btn {
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  border: none;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(60px);
  transition: 0.3s ease-in;
  -webkit-box-shadow: 1px 1px 28.5px -7px #dddddd;
  -moz-box-shadow: 1px 1px 28.5px -7px #dddddd;
  box-shadow: 1px 1px 28.5px -7px #dddddd;
}

.product-single-card .product-top-area .sideicons .sideicons-btn:hover {
  color: #fff;
  background-color: #000;
}

.product-single-card .product-top-area .sideicons .sideicons-btn:nth-child(1) {
  transition-delay: 100ms;
}

.product-single-card .product-top-area .sideicons .sideicons-btn:nth-child(2) {
  transition-delay: 200ms;
}

.product-single-card .product-top-area .sideicons .sideicons-btn:nth-child(3) {
  transition-delay: 300ms;
}

.product-single-card .product-top-area .sideicons .sideicons-btn:nth-child(4) {
  transition-delay: 400ms;
}

.product-single-card .product-top-area:hover .sideicons .sideicons-btn {
  opacity: 100%;
  visibility: visible;
  transform: translateX(0);
}

.product-single-card .product-info .product-category {
  font-weight: 600;
  opacity: 60%;
}

.product-single-card .product-info .product-title {
  font-size: 16px;
  font-weight: 600;
}

.product-single-card .product-info .old-price,
.product-single-card .product-info .new-price {
  padding-right: 15px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
}

.product-single-card .product-info .old-price {
  text-decoration: line-through;
  opacity: 70%;
}

.img-fluid-cust {
  min-height: 150px !important;
  max-height: 150px !important;
  /* max-width: 100%; */
  object-fit: cover;
}

.review-count {
  font-weight: 400;
  margin-bottom: 2px;
  font-size: 12px !important;
  color: #000;
  opacity: 0.5;
}

.small-ratings i {
  color: #cecece;
}

.dropdown.dropdown-lg.market .dropdown-menu {
  margin-top: -1px;
  padding: 6px 20px;
  margin: 5px;
}

.dropdown.dropdown-lg.market {
  position: static !important;
}

.dropdown.dropdown-lg.market .dropdown-menu {
  min-width: 350px;
  border: 1px solid #1b5692;
}

.form-control.market {
  border: 1px solid #1b5692;
}

.input-group-btn .btn-group {
  display: flex !important;
}

.btn-group.market .btn {
  border-radius: 0;
  margin-left: -1px;
}

.btn-group.market .btn:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.btn-group.market .form-horizontal .btn[type="button"] {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.form-horizontal.market .form-group {
  margin-left: 0;
  margin-right: 0;
}

.form-group .form-control:last-child {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  border: 1px solid #1b5692;
}

/** End MARKETPLACE*/

.card-couverture-pub-tribu-t-admin {
  background-color: #fff;
  border-radius: 5px;
}

.card-couverture-pub-tribu-t-admin .content-couverture {
  padding: 15px;
  background-color: #888;
  border-radius: 5px 5px 0 0;
}

/* Tooltip container */
.tooltipReponse {
  position: relative;
  display: inline-block;
  /* If you want dots under the hoverable text */
}

.tooltipReponse svg {
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltipReponse .tooltiptextReponse {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltipReponse .tooltiptextReponse::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipReponse:hover .tooltiptextReponse {
  visibility: visible;
  opacity: 1;
}

.card-couverture-pub-tribu-t-admin {
  background-color: #fff;
  border-radius: 5px;
}

.card-couverture-pub-tribu-t-admin .content-couverture {
  padding: 15px;
  background-color: #888;
  border-radius: 5px 5px 0 0;
}

/* .card-couverture-pub-tribu-t-admin .titre-tribu-t{
  color: #000;
} */

.arrow-anime {
  color: #0d6efd;
  animation: scale 2s ease-in infinite alternate;
}

@keyframes scale {
  0% {
    font-size: 8pt;
  }
  
  100% {
    font-size: 12pt;
  }
}

/** EMAIL CLIENT*/

/***mail envoié***/
.inbox {
  margin: auto;
}

.inbox-list {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.message-item {
  width: 100%;
  /* padding: 0.5rem 1rem; */
  margin-bottom: 0.5rem;
  cursor: pointer;
  position: relative;
  opacity: 1;
}

.message-item.unread {
  background: #ebf5fb;
  opacity: 1;
}

.message-item.unread:hover {
  opacity: 1;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.message-item:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.message-item.unread .subject,
.message-item.unread .sender-name {
  color: #000;
  font-weight: bold;
}

.message-item.unread .subject,
.message-item.unread .sender-name {
  font-weight: 600;
}

.message-item:last-child {
  margin-bottom: 0;
}

.message-item .checkbox {
  position: absolute;
  top: 1.2rem;
}

.message-item header,
.message-item main {
  /* margin-left: 2rem; */
}

.message-item header {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  color: #001e33;
}

.message-item .sender-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.message-item .from {
  font-size: 0.8rem;
}

.message-item .time {
  font-weight: normal;
  font-size: 0.8rem;
}

.message-item .content-message p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  color: #7e93a4;
  margin-bottom: 0;
}

.message-item .content-message .icons i {
  margin-left: 10px;
}

.message-item .content-message .icons i:hover,
  .all-action:hover {
  color: #ff0000;
  cursor: pointer;
}

.pagination li {
  color: #3056d3;
  float: left;
  margin: 0 5px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color 0.5s;
  border: 1px solid #3056d3;
}

.pagination li.active {
  color: #fff;
  background-color: #3056d3;
  border: 1px solid #3056d3;
}

.pagination li:hover:not(.active) {
  background-color: #ebf5fb;
}

.container-search {
  margin-top: 20px;
  margin-bottom: 20px;
}

#submitsearch {
  border: 1px solid rgb(138, 134, 134);
  margin-left: -82px;
  padding: 5px;
  border-radius: 19px;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 8px;
  padding-top: 4px;
  
  display: none;
  box-shadow: 0 0 1px black;
  margin-right: 110px;
}

.container-search > div > .search {
  width: 50%;
  
  /* border: 1px solid #000; */
  /* border-radius: 15px; */
  font-size: 16px;
  background-color: white;
  
  background-position: 10px 7px;
  background-repeat: no-repeat;
  padding: 8px 20px 8px 20px;
  -webkit-transition: width 0.8s ease-in-out;
  transition: width 0.8s ease-in-out;
  outline: none;
  opacity: 0.9;
}

.read-detail-mail-tomm-js {
  padding: 0.5rem 1rem;
}

.email-selected {
  color: #055160 !important;
  background-color: #cff4fc !important;
  border-left: 0.25rem solid #9eeaf9;
}

#faked {
  visibility: hidden;
}

/** END EMAIL CLIENT*/

.agenda-loading {
  position: absolute;
  top: 50%;
  left: 50%;
}

.end_of_list_publication {
  width: 100%;
  font-size: 0.8125rem;
  line-height: 1.4;
  background-color: white;
  border-radius: 0.5rem;
}

.content_chargement_pub_pagination {
  display: flex;
  height: 60px;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.chargement_pub_pagination {
  display: flex;
  gap: 0px;
}

.chargement_pub_pagination .word {
  display: inline-block;
  padding: 10px;
  color: white;
  font-size: 11px;
  padding: 2px 9px;
}

.loading-delete-avis {
  position: absolute;
  top: 30px;
  left: 40%;
}

.dropdown-menu-admin {
  left: -290px !important;
}

.avatar-soustribu {
  width: 40px;
  height: 40px;
  clip-path: circle(50%);
}

.tribu_list_active {
  /* border-radius: 20px; */
  /* border: 1px solid mediumspringgreen; */
  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
  /* box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; */
  /* box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.tribu_list_active:hover {
  color: white;
  background: cornflowerblue;
  font-weight: 500;
  scale: 1.02;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.tribu_list_active a {
  /* border-bottom-right-radius: 20px;
  border-top-right-radius: 20px; */
}

.badge-sous-tribu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.clusterSearch {
  background-color: red !important;
}

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

.mycluster::after {
  content: "";
  position: absolute;
  /* bottom: -90%;
  left: 35%; */
  left: 50%;
  transform: translateX(-50%); /* centrage constant, jamais écrasé */
  margin-left: 1px;
  /* border-width: 18px; */
  border-style: solid;
  /* border-color: #5050fc transparent transparent transparent; */
  /** Add by Elie*/
  /* haut / droite / bas / gauche */
  border-width: 12px 8px 0 8px;
  border-color: #1f6053 transparent transparent transparent;
  /* Couleurs de la flèche */
}

.custom-tooltip {
  background-color: white;
  border: none;
  padding: 10px;
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  /* Assure que le tooltip est bien interactif */
}

.popup-header {
  text-align: center;
}

.popup-content {
  /* padding: 10px; */
}

.popup-title {
  font-size: 16px;
  margin: 0;
}

.popup-subtitle {
  font-size: 13px;
  color: #6d6868;
  font-weight: bold;
}

.popup-rating {
  font-size: 18px;
  color: #333;
  font-weight: bold;
  margin: 5px 0;
}

.popup-row {
  display: flex;
  justify-content: space-between;
  /* Espacement entre les éléments */
  gap: 15px;
  /* Optionnel : espacement horizontal entre les colonnes */
}

.popup-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Espacement vertical entre les rangées */
}

.leaflet-tooltip {
  padding: 10px;
  opacity: 1 !important;
  /* Force l'opacité à 1 pour éviter l'effet de transparence */
}

.leaflet-tooltip:hover {
  background-color: white;
  /* Empêche tout changement en hover */
}

.maksim-off {
  color: gray;
  /* Icône grisée quand OFF */
}

.maksim-custom {
  color: black;
  /* Icône normale quand ON */
}

.maksim-on-label {
  display: block;
  font-size: 10px;
  color: white;
  /* Couleur du texte ON */
  text-align: center;
  margin-top: 2px;
}

.leaflet-control-zoom-in.disabled,
.leaflet-control-zoom-out.disabled {
  color: grey;
  pointer-events: none;
  opacity: 0.5;
}

/** BEGIN DESIGN TRIBU T*/

.card-tribu {
  /* width: 400px; */
  border: 1px dashed cadetblue;
  border-radius: 10px;
  
  background-color: #fff;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: none !important;
}

.stats {
  background: #f2f5f8 !important;
  
  color: #000 !important;
}

.articles {
  font-size: 10px;
  color: #a1aab9;
}

.number1 {
  font-weight: 500;
}

.followers {
  font-size: 10px;
  color: #a1aab9;
}

.number2 {
  font-weight: 500;
}

.rating {
  font-size: 10px;
  color: #a1aab9;
}

.number3 {
  font-weight: 500;
}

.content_right_actualite .card-couverture-pub-tribu-t {
  height: inherit !important;
}

.photo-tribu {
  border-radius: 0.25rem !important;
  height: 100%;
  max-width: 150px;
  max-height: 100px;
  min-height: 100px;
}

.profile-card {
  min-width: 85px;
  border-radius: 10px;
  overflow: hidden;
  /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); */
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  position: relative;
}

.edit-icon {
  top: 5px;
  right: 5px;
  color: #7a7a7a;
  background-color: white;
  border-radius: 50%;
  padding: 2px 5px;
  cursor: pointer;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
}

.edit-icon:hover {
  background-color: #eaeaea;
}

.file-input-tribu-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.fw-500 {
  font-weight: 500;
}

/** END DESIGN TRIBU T*/
.hidden-btn {
  visibility: hidden;
}

@media screen and (max-height:650px) {
  .leaflet-right {
    margin-top: 60px !important;
  }
}

.onglet-visio-elie-js {
  min-width: 300px;
  width: 25%;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.toastify-visio {
  /* width: 250px;
  position: absolute;
  z-index: 9999;
  background: white;
  padding: 0px 15px;
  left: 20px;
  bottom: 10px; */
  
  background: linear-gradient(to right, rgb(0, 176, 155), rgb(150, 201, 61));
  font-size: 0.9rem;
  width: 350px;
  max-width: 93vw;
  transform: translate(0px, 0px);
  bottom: 15px;
}

.count-sondages > button.btn-outline-danger {
  cursor: default !important;
}

.count-sondages > button.btn-outline-danger:hover {
  background-color: transparent !important;
  color: #dc3545 !important;
}

.dataTables_processing > div:nth-child(2) {
  display: none;
}

/* Spinner au-dessus de tout */
.dts-wrapper .dataTables_processing {
	z-index: 9999;
}

/* thead en dessous du spinner */
.dts-wrapper .dataTable thead {
  position: relative;
  z-index: 1;
}

/** START NEW DESIGN POI*/

.marker-container {
  position: relative;
  display: inline-block;
}

/* Styles généraux */
.marker {
  position: relative;
  display: flex;
  justify-content: baseline;
  align-items: center;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  width: 200px;
  font-family: Arial, sans-serif;
  z-index: 1000 !important;
}

/* Icône */
.icon {
  /* font-size: 20px; */
  /* margin-right: 10px; */
  height: 25px;
}

/* Note */
.rating {
  font-size: 12px;
  color: #333;
  margin-right: auto;
  /* font-style: italic; */
  margin-left: 10px;
  margin-right: 10px;
}

.star {
  color: #ffc107;
}

/* Statut */
.status {
  display: flex;
  align-items: center;
  margin-top: -25px;
}

/* Pastilles de couleur */
.dots {
  display: flex;
  justify-content: start;
  align-items: center;
  /* gap: 5px; */
  margin-right: 8px;
  padding: 0;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #888;
  padding-top: 0;
  padding-bottom: 0;
}

.dot.red {
  background-color: red;
}

.dot.green {
  background-color: #2ecc71;
}

.dot.blue {
  background-color: #3498db;
}

.dot.orange {
  background-color: #ff7f00;
}

/* Texte de statut */
.text {
  font-size: 12px;
  color: #555;
}

.marker::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 90px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ffffff;
}

.marker::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 90px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid rgba(0, 0, 0, 0.2);
  /* Couleur de l'ombre */
  filter: blur(4px);
  /* Flou pour imiter l'ombre */
  z-index: 0;
  /* Place l'ombre derrière la flèche */
}

/* .marker-arrow {
  content: "";
  position: absolute;
  bottom: -30px; /* Positionnement en bas de la bulle
  left: 9px;    /* Ajuste la position horizontale de la flèche
  width: 30px;
  height: 30px;
  background-color: #ffffff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  
  /* Border radius pour créer un coin courbé
  border-radius: 53% 0% 0% 100% / 0% 10% 81% 100%;
  /* transform: rotate(45deg); Ajuste l’angle si nécessaire pour orienter la flèche
  z-index: 0 !important;
} */

.leaflet-popup-content {
  text-align: center;
  padding: 11px;
  font-size: 14px;
  margin: 10px !important;
}

/* .leaflet-popup{
  opacity: 1;
  transform: translate3d(742px, 121px, 0px);
  bottom: 32px !important;
  left: -58px !important;
} */

.image_path_rubrique {
  max-width: 25px;
  height: 25px;
  clip-path: circle(50%);
}

.action-marker {
  /* position: absolute;
  top: 0px;
  left: 22px; */
  position: relative;
  margin-top: -32px;
  margin-left: 14px;
  padding-right: 5px;
}

.leaflet-marker-icon.mycluster {
  opacity: 1;
}

/*
 * Marqueurs resto/marché/golf/ferme : AUCUNE transition ni animation, pour
 * rester parfaitement fixés à la carte pendant zoom/dézoom (comme les
 * marqueurs banque, qui n'en ont jamais eu). Une transition/animation sur
 * `transform` ou `opacity` ici — même indirecte, via une classe ajoutée en
 * JS après coup (voir RenderService.initDrawerMarker) — s'appliquerait au
 * MÊME élément que Leaflet utilise pour repositionner le marqueur
 * (`transform: translate3d(...)` en style inline à chaque pan/zoom), et le
 * ferait flotter/dériver au lieu de suivre la carte instantanément.
 */
.leaflet-marker-icon.content_single_marker_poi_custom {
  opacity: 1;
}

/*
 * Rendu façon Google Maps (ombre portée) pour les icônes de marqueur POI.
 * .poi-marker-anim est un wrapper INTERNE au HTML de l'icône (voir
 * MarkerPOIManager.setDivIconMarker et SideBanqueManager.poiIcon) — jamais
 * .leaflet-marker-icon lui-même (voir note plus haut : Leaflet y pose son
 * propre `transform` de positionnement, qu'une animation viendrait perturber).
 *
 * L'ombre s'applique à TOUTES les rubriques. Le fondu d'apparition, lui, est
 * réservé à la banque (sélecteur descendant `.poi-marker .poi-marker-anim`) :
 * resto/marché/golf/ferme ne doivent avoir aucune transition ni animation,
 * pour rester parfaitement fixés pendant zoom/dézoom.
 */
.poi-marker-anim {
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
}

@keyframes poiMarkerFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.poi-marker .poi-marker-anim.poi-marker-drop-in,
.poi-marker .poi-marker-anim.poi-marker-select-bounce {
  animation: poiMarkerFadeIn 0.4s ease;
}

#modalPartageMessage {
  z-index: 1000000 !important;
}

.cursor_pointer {
  cursor: pointer;
}

#id_div_input_message {
  overflow-y: auto;
  /* Active le scroll vertical */
  word-wrap: break-word;
  /* Permet de couper les longs mots */
  white-space: pre-wrap;
  /* Garde les sauts de ligne */
  border: 1px solid #ccc;
  /* Ajoute une bordure */
  padding: 10px;
  border-radius: 5px;
  /* Coins arrondis pour un beau design */
}

.content_table_user_mention {
  position: absolute;
  bottom: 6vh;
}

.x_mark_image_inpload {
  background-color: black;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.content_state_edit_action {
  padding: 10px 0;
  position: absolute;
  bottom: 6vh;
  width: 100%;
}

.position_loading_message_edit {
  position: absolute;
  bottom: -20px;
  right: 0px;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  box-shadow: 0 0px 1px 1px rgba(0, 0, 0, 0.4) !important;
}

.spiderfy-polyline {
  stroke-dasharray: 10, 3;
  animation: dash 1s linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

.pulse-marker {
  animation: pulse 1.5s infinite;
  filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.5));
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(1.2);
  }
  
  100% {
    transform: scale(1);
  }
}

/* Add this CSS for the cluster icon */
.cluster-icon {
  background: #1978c8;
  border: 2px solid #fff;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.cluster-icon.pulsing {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(1.1);
  }
  
  100% {
    transform: scale(1);
  }
}

/** END NEW DESIGN POI*/

/** BEGIN PUBLICATION ANIMATIONS */

@keyframes borderPulseGreen {
  0% {
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
  }
  
  50% {
    box-shadow: 0 0 15px rgba(0, 255, 0, 1);
  }
  
  100% {
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
  }
}

.border-pulse-success {
  animation: borderPulseGreen 1s infinite alternate;
}

/** END PUB ANIMATION*/

.content_table_user_mention {
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
}

/**faniry modele email css */

/* Classe personnalisée pour le popover */
.beautifier-popover-faniry {
  max-width: 900px !important;
  /* Largeur maximale */
  min-width: 400px;
  /* Largeur minimale */
  min-height: 300px;
  /* Hauteur minimale */
  overflow-y: auto;
  /* Ajout d'une barre de défilement verticale si nécessaire */
}

/* Style pour agrandir le dropdown */
.custom-dropdown-faniry {
  min-width: 250px;
  /* Largeur minimale */
  max-width: 400px;
  /* Largeur maximale pour éviter qu'il soit trop large */
  padding: 1rem;
  /* Espacement intérieur pour l'aération */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Ombre douce */
}

/* Ajuster les boutons à la largeur du dropdown */
.custom-dropdown-faniry .btn {
  width: 100%;
  /* Étendre les boutons pour utiliser toute la largeur */
  text-align: left;
  /* Aligner le texte à gauche */
}

.save-modele-faniry {
  border: 1px solid #6c757d;
  /* Couleur grise pour le contour */
  border-radius: 5px;
  /* Coins arrondis */
  padding: 0.5rem;
  /* Espacement intérieur */
  background-color: #f8f9fa;
  /* Couleur d'arrière-plan légère */
  text-align: center;
  /* Centrer le texte */
  transition: box-shadow 0.3s ease;
  color: #000 !important;
}

.save-modele-faniry:hover {
  color: #fff !important;
  background-color: #6c757d;
  /* Arrière-plan gris clair */
  cursor: pointer;
}

cropper-canvas {
  width: 100% !important;
  height: 500px !important;
  max-width: 100%;
  max-height: 100%;
}

cropper-image {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

cropper-selection {
  width: 100% !important;
  height: 100% !important;
}

.heigth_right_iframe {
  min-height: calc(100vh - 65px);
  height: calc(100vh - 65px);
}

main {
  height: 100%;
  width: 100%;
}

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

#modele_container {
  height: 500px !important;
  overflow-y: scroll;
}

/**end faniry modele email css*/

/**Mise à jour de l'interface utilisateur (UI) :navBar TribuT @author antonius 18/02/2025 */
.anthonius-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  margin: auto;
}

/* Ajuster la taille du slider */
.slider-wrapper {
  flex-grow: 1;
  max-width: 80%;
}

/* Bouton "Voir tous" bien positionné */
.btn-voir-tous {
  /* padding: 5px;
  border-radius: 5px;
  text-decoration: none; */
  white-space: nowrap;
}

.nbr_comment_jheo_js,
.comment,
.like {
  cursor: pointer;
}

/* dot to alert the user of news in suivi des invitations  @author antonius 21/02/2025*/
/* .notif-badge {
  position: absolute;
  top: -3px;
  right: 0%;
  background-color: #f94449;
  font-size: xx-small;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 100px;
  width: 14px;
  height: 14px;
  display: inline-block;
} */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  background-color: #ff3333;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0;
  white-space: nowrap;
  padding: 0;
}

.notif-container:hover .notif-badge {
  width: auto;
  height: auto;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 10px;
  content: none;
}

#email-dot {
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#email-dot::before {
  content: "\26A0";
  /* Unicode pour le symbole de warning ⚠ */
  font-size: 20px;
  color: #ff3333;
}

.notif-container:hover #email-dot {
  width: auto;
  height: auto;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  background-color: #ff3333;
  color: white;
}

.notif-container:hover #email-dot::before {
  content: "Email non envoyé";
  font-size: 10px;
  color: white;
}

.custom-search-container {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px 10px;
  width: 39vw;
}

.custom-search-container .search-icon {
  position: absolute;
  left: 10px;
  font-size: 18px;
  color: purple;
}

.custom-search-input {
  width: 100% !important;
  border: none !important;
  padding: 10px 10px 10px 30px !important;
  outline: none !important;
  font-size: 16px !important;
  color: #333;
}

@media screen and (max-width:1000px) {
  .custom-search-container {
    width: 85vw;
  }
}

.search-bar {
  display: flex;
  align-items: center;
  border: 1px solid gray;
  border-radius: 30px;
  overflow: hidden;
  width: 95%;
  margin: auto;
}

.search-bar .search-icon {
  padding: 10px;
  color: black;
}

.search-bar input {
  border: none;
  outline: none;
  flex: 1;
  padding: 10px;
}

.search-bar input:focus {
  outline: none;
  /* Removes the blue outline */
  box-shadow: none;
  /* Removes the blue glow effect */
  border: none;
  /* Optional: Ensures no border change */
}

.form-control:focus {
  /* box-shadow: none !important;
  border-color: transparent !important;
  outline: none !important; */
}

.search-bar .search-btn {
  background: #f8f9fa;
  border: none;
  padding: 10px 75px;
  border-left: 1px solid gray;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.search-btn::hover {
  background: rgb(110, 116, 121);
}

@media (min-width:768px) {
  /* md = 768px */
  .w-md-75 {
    width: 75% !important;
  }
}

input.disabled {
  pointer-events: none;
}

.ts-control > input {
  font-size: 15px !important;
  padding: 5px 0px !important;
}

.toast-custom {
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: 0.75rem;
  --bs-toast-padding-y: 0.5rem;
  --bs-toast-spacing: 1.5rem;
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: ;
  --bs-toast-bg: rgba(255, 255, 255, 0.85);
  --bs-toast-border-width: 1px;
  --bs-toast-border-color: var(--bs-border-color-translucent);
  --bs-toast-border-radius: 0.375rem;
  --bs-toast-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-toast-header-color: #6c757d;
  --bs-toast-header-bg: rgba(255, 255, 255, 0.85);
  --bs-toast-header-border-color: rgba(0, 0, 0, 0.05);
  width: var(--bs-toast-max-width);
  max-width: 100%;
  font-size: var(--bs-toast-font-size);
  color: var(--bs-toast-color);
  pointer-events: auto;
  background-color: var(--bs-toast-bg);
  background-clip: padding-box;
  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
  box-shadow: var(--bs-toast-box-shadow);
  border-radius: var(--bs-toast-border-radius);
}

/* @media (min-width:1024px) {
  .auto-scroll {
    overflow-y: scroll;
  }
} */
.appel_choose {
  cursor: pointer;
  text-align: center;
}

.appel_choose:hover {
  scale: 1.2;
}

.appel_choose:nth-child(1):hover {
  color: #47cc00;
}

.appel_choose:nth-child(2):hover {
  color: #f00000;
}

.auto-scroll {
  max-height: 82vh;
  overflow-y: scroll !important;
  /* Toujours afficher la scrollbar verticale */
  scrollbar-width: thin;
  /* Affine la scrollbar pour un design plus léger */
  scrollbar-color: #888 #f1f1f1;
  /* Personnalisation des couleurs */
}

@media screen and (max-width:1199px) {
  .auto-scroll {
    max-height: none !important;
    /* Supprime la hauteur maximale */
    overflow-y: visible !important;
    /* Désactive le défilement vertical */
    scrollbar-width: auto;
    /* Rétablit la largeur par défaut de la scrollbar */
    scrollbar-color: auto;
    /* Rétablit les couleurs par défaut de la scrollbar */
  }
}

/* Style pour Webkit (Chrome, Edge, Safari) */
.auto-scroll::-webkit-scrollbar {
  width: 8px;
}

.auto-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.auto-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-modal-visio {
  background: linear-gradient(to right, rgb(0, 176, 155), rgb(150, 201, 61));
}

/* Dropdown positioning by Antonius */
/*.dropdown {
  position: relative !important;
}

.dropdown-toggle {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.dropdown-menu {
  top: 100% !important;
  margin-top: 0 !important;
  bottom: auto !important;
  transform: translateY(0) !important;
  left: auto !important;
  right: 0 !important;
  z-index: 1000 !important;
  border-radius: 8px !important;
}
*/
/* Stripe button styling */
.custom-stripe-button {
  background-color: white !important;
  /* Light gray */
  color: #333 !important;
  /* Dark text for contrast */
  padding: 8px 16px !important;
  border: none !important;
  margin-bottom: 0 !important;
  border-radius: 8px !important;
  /* Match the button’s border radius */
}

/** END GALLERIE By ELIE*/
.img-gallerie-elie {
  width: 100%;
  max-height: 400px !important;
}

.current-gallery-elie {
  border: 2px solid #00ff00 !important;
  scale: 1.2;
}

#modal-image {
  max-height: 400px !important;
  width: 100%;
  scale: 1.04;
}

/** END GALLERIE by ELIE*/
.bg-gratuit {
  background-color: #66bb6a !important;
  color: #ffffff !important;
}

.bg-payant {
  background-color: #f9a825 !important;
  color: #ffffff !important;
}

.bg-duedate {
  background-color: #ffffff !important;
  color: #ff0000 !important;
}

.trial-box {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #fdf8f3;
  border-radius: 12px;
  padding: 8px 14px;
  font-family: system-ui, sans-serif;
}

.payant-box {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #f2faf0;
  border-radius: 12px;
  padding: 8px 14px;
  font-family: system-ui, sans-serif;
}

.duedate-box {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #ff0505;
  /* background-color: #ffcccc; */
  border-radius: 12px;
  padding: 8px 14px;
  font-family: system-ui, sans-serif;
  color: white;
}

.icon {
  color: #f4a300;
  /* orange */
  font-size: 1.2rem;
}

.icon-duedate {
  color: #ffcccc;
  /* orange */
  font-size: 1.2rem;
}

.icon-payant {
  color: #31f400;
  /* vert */
  font-size: 1.2rem;
}

.text {
  font-weight: 600;
  color: #2c2c2c;
  font-size: 0.95rem;
}

.text-duedate {
  font-weight: 600;
  color: #f7f5f5;
  font-size: 0.95rem;
}

.div-area {
  /* border-top: 1px solid gray !important; */
  position: relative;
  /* margin-bottom: 20px; */
  font-style: italic;
  font-size: smaller;
}

.label-area {
  font-size: x-small;
  font-weight: bold;
  margin-bottom: 0;
}

.wiI7pd {
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: #1f1f1f;
}

/* rubriqueCMZ adapté svg a ma taille de son div container antonius */
.single_marker_poi svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/** create by@marc*/
.no-hover-annuler:hover {
  background-color: #bd1e2d !important;
  /* Rouge initial */
  border-color: #dc3545 !important;
  /* Bordure rouge initiale */
  color: white !important;
  /* Texte blanc initial */
}

.no-hover-voir:hover {
  background-color: #0e54bb !important;
  /* Bleu initial */
  border-color: #0d6efd !important;
  /* Bordure bleue initiale */
  color: white !important;
  /* Texte blanc initial */
}

@media (min-width:768px) {
  .modal-content-avis {
    max-height: 100% !important;
  }
}

@media (max-width:768px) {
  #staticBackdrop,
  #modalAvis {
    z-index: 10001 !important;
  }
}

/*marc model mail .css*/
.custom-dropdown-faniry {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  width: 280px;
}

.template-list-container {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.btn-load-more {
  width: 100%;
  padding: 0.5rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #6c757d;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn-load-more:hover {
  background: #e9ecef;
  color: #495057;
}

.model-fa {
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
  --bs-btn-hover-color: #000;
}

.model-fa:hover {
  background: #f8f9fa;
  border-color: #dee2e6;
}

.h6.text-uppercase {
  color: #6c757d;
  font-size: 0.9rem;
}

.popover-faniry {
  min-width: 10px;
  min-height: 20px;
}

.button-model {
  width: 100% !important;
  transform: translateX(15px);
}

.custom-dropdown-faniry .btn {
  margin-left: 10px;
}

.delete-model {
  margin-bottom: 0.5rem !important;
}

@media screen and (max-height:768px) {
  .template-list-container {
    max-height: 200px !important;
  }
}

@media screen and (max-width:768px) {
  .envoie-mail-agenda {
    padding: 5px !important;
  }
}

@media screen and (min-width:2000px) and (max-width:3839px) {
  .partage-event {
    display: flex;
    justify-content: center;
    /* horizontal */
    align-items: center;
  }
  
  .partage-event-tabl-ma {
    width: 65vw;
  }
  
  .agenda-non-inscrit {
    transform: translateX(10vw);
  }
  
  .navbar-partage-event {
    margin-top: 20px;
  }
}

.content_chat_map {
  display: block;
  width: 150px;
  z-index: 1111;
  position: sticky;
  top: 93vh;
  left: 90vw;
}

.chat_map {
  background-color: transparent;
}

/*marc*/
.bouton-grille-tarifaire-ma,
.bouton-connexion-ma {
  color: #ffff;
  padding: 9px 16px !important;
  /*margin-right: 11.5rem !important;*/
  background-color: #dc3545 !important;
  /* Nouvelle couleur verte */
  border-color: white;
  border-radius: 10px !important;
}

.bouton-grille-tarifaire-ma,
.bouton-connexion-ma:hover {
  background-color: #e5081d !important;
  /* Couleur au survol */
  border-color: white;
}

.bouton-deconnexion-ma {
  color: #ffff;
  padding: 9px 16px !important;
  /*margin-right: 11.5rem !important;*/
  background-color: #4caf50 !important;
  /* Nouvelle couleur verte */
  border-color: #bbf31c !important;
  border-radius: 10px !important;
}

.bouton-deconnexion-ma:hover {
  background-color: #549d3a !important;
  /* Couleur au survol */
  border-color: #bbf31c !important;
}

/* Le bouton "Intelligence Artificielle" porte désormais les mêmes classes
   Bootstrap (btn-sm, shadow-sm, rounded-3, w-100) que "Site officiel" et
   que tous les autres boutons de la fiche POI (0 avis, Donner votre avis,
   Partager, Modifier...) : même taille, même arrondi, même largeur, sans
   règle CSS custom à maintenir en double. Seule la couleur (dégradé) reste
   spécifique, via .cmzux-ia button.generate-IA plus bas. Pas d'animation
   au survol (pas de transform/box-shadow), juste un dégradé légèrement
   plus foncé comme les autres boutons Bootstrap au hover. */
.cmzux-ia button.generate-IA:hover {
  background: linear-gradient(135deg, #3f7dc9, #7a3a95);
}

@media screen and (min-width:280px) and (max-width:988px) {
  .Date {
    display: none !important;
  }
}

@media (max-width:11680px) {
  .text-1636px {
    font-size: 0.8522rem !important;
  }
}

@media (max-width:11680px) {
  .bouton-deconnexion-ma,
  .bouton-connexion-ma {
    padding: 0.25rem 0.5rem !important;
  }
}

/**map controll uniformed btns antonius */
.btn_controll_on_map {
  width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border-radius: 50% !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.btn_controll_on_map:hover {
  background-color: #e2e6ea;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* padding:0 + flex centrage : sans ca, ce bouton reste un .btn Bootstrap
   inline-block (padding .375rem .75rem, pas de centrage flex) alors que sa
   largeur/hauteur sont forcees a 2.5rem par !important ci-dessus — l'icone
   SVG (.right_control_icon_jheo_js) se retrouvait decalee du centre du
   rond au lieu d'y etre parfaitement centree, contrairement aux autres
   pastilles de la colonne (.btn_controll_on_map, .cta_show_list_nav_left_jheo_js,
   .toggle_map_toolbar_jheo_js) deja en flex. */
.right_control_jheo_js {
  width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Bouton "afficher/masquer la liste" (cta_show_list_nav_left_jheo_js,
   UiMapControl.js) : alignee sur le meme langage rond que le reste de la
   colonne #rubrique-controls au lieu de rester une pilule 80% de large —
   seule la forme change ici, l'icone fa-list et sa logique d'affichage/
   masquage (ListPoiManager.js/UiListPOi.js) restent intactes. */
.cta_show_list_nav_left_jheo_js {
  width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.cta_show_list_nav_left_jheo_js:hover {
  transform: translateY(-1px);
}

/* Fond blanc + icone grise pleine (.btn-success/.btn-outline-success, voir
   ListPoiManager.js qui bascule ces classes selon liste ouverte/fermee),
   comme les autres pastilles neutres de la colonne, plutot qu'une couleur
   rose propre qui detonnait a cote de la palette Material (data-color) du
   reste des boutons. L'etat "liste ouverte" (.btn-success) rejoint le
   groupe .active_control_jheo_js/.btn_control_on_map_active (anneau blanc +
   pastille bleue de coin) pour signaler la selection de la meme facon que
   partout ailleurs dans la colonne, au lieu d'un remplissage de couleur a
   part. */
.cta_show_list_nav_left_jheo_js.btn-success,
.cta_show_list_nav_left_jheo_js.btn-outline-success {
  background-color: #fff !important;
  border-color: transparent !important;
  color: #495057 !important;
}
.cta_show_list_nav_left_jheo_js.btn-success:hover,
.cta_show_list_nav_left_jheo_js.btn-outline-success:hover {
  background-color: #e9ecef !important;
}

/* Icone (SVG unifie style Lucide, voir UiMapControl.js/UILinkConnected.js) :
   pointer-events:none pour que tout clic a l'interieur du glyphe (meme sur
   un <path> imbrique) remonte toujours au <button> parent, qui seul porte
   le data-type lu par la delegation de clic (MapControl.bindOtherControles). */
.right_control_icon_jheo_js {
  pointer-events: none;
  width: 1.15rem;
  height: 1.15rem;
}

/* ============================================================
   Palette Material vive par fonction, sur tous les boutons ronds de la
   colonne carte : ceux du haut (filtre/favoris/info/reset/..., bootstrap
   historique) et ceux du bas (tribu/agenda/cloud/..., deja en SVG). Le
   data-color identifie la fonction, pour une reconnaissance immediate au
   survol de l'oeil (demande initiale : "facile a deviner, ergonomie qui
   attire la vue").
   ============================================================ */
.right_control_jheo_js[data-color],
.btn_controll_on_map[data-color] {
  border: none !important;
  color: #fff !important;
  transition:
    background-color 0.2s,
    box-shadow 0.2s,
    transform 0.15s;
}

.right_control_jheo_js[data-color]:hover,
.btn_controll_on_map[data-color]:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.2);
}

.right_control_jheo_js[data-color="green"],
.btn_controll_on_map[data-color="green"] {
  background-color: #43a047 !important;
}
.right_control_jheo_js[data-color="green"]:hover,
.btn_controll_on_map[data-color="green"]:hover {
  background-color: #388e3c !important;
}

.right_control_jheo_js[data-color="indigo"],
.btn_controll_on_map[data-color="indigo"] {
  background-color: #3949ab !important;
}
.right_control_jheo_js[data-color="indigo"]:hover,
.btn_controll_on_map[data-color="indigo"]:hover {
  background-color: #303f9f !important;
}

.right_control_jheo_js[data-color="teal"],
.btn_controll_on_map[data-color="teal"] {
  background-color: #00897b !important;
}
.right_control_jheo_js[data-color="teal"]:hover,
.btn_controll_on_map[data-color="teal"]:hover {
  background-color: #00695c !important;
}

.right_control_jheo_js[data-color="blue"],
.btn_controll_on_map[data-color="blue"] {
  background-color: #1e88e5 !important;
}
.right_control_jheo_js[data-color="blue"]:hover,
.btn_controll_on_map[data-color="blue"]:hover {
  background-color: #1565c0 !important;
}

.right_control_jheo_js[data-color="orange"],
.btn_controll_on_map[data-color="orange"] {
  background-color: #0d3f3c !important;
}
.right_control_jheo_js[data-color="orange"]:hover,
.btn_controll_on_map[data-color="orange"]:hover {
  background-color: #000 !important;
}

.right_control_jheo_js[data-color="purple"],
.btn_controll_on_map[data-color="purple"] {
  background-color: #8e24aa !important;
}
.right_control_jheo_js[data-color="purple"]:hover,
.btn_controll_on_map[data-color="purple"]:hover {
  background-color: #6a1b9a !important;
}

.right_control_jheo_js[data-color="red"],
.btn_controll_on_map[data-color="red"] {
  background-color: #e53935 !important;
}
.right_control_jheo_js[data-color="red"]:hover,
.btn_controll_on_map[data-color="red"]:hover {
  background-color: #c62828 !important;
}

.right_control_jheo_js[data-color="amber"],
.btn_controll_on_map[data-color="amber"] {
  background-color: #fb8c3a !important;
}
.right_control_jheo_js[data-color="amber"]:hover,
.btn_controll_on_map[data-color="amber"]:hover {
  background-color: #ef6c00 !important;
}

.right_control_jheo_js[data-color="gold"],
.btn_controll_on_map[data-color="gold"] {
  background-color: #fbc02d !important;
}
.right_control_jheo_js[data-color="gold"]:hover,
.btn_controll_on_map[data-color="gold"]:hover {
  background-color: #f57f17 !important;
}

.right_control_jheo_js[data-color="lightblue"],
.btn_controll_on_map[data-color="lightblue"] {
  background-color: #039be5 !important;
}
.right_control_jheo_js[data-color="lightblue"]:hover,
.btn_controll_on_map[data-color="lightblue"]:hover {
  background-color: #0277bd !important;
}

.right_control_jheo_js[data-color="bluegrey"],
.btn_controll_on_map[data-color="bluegrey"] {
  background-color: #546e7a !important;
}
.right_control_jheo_js[data-color="bluegrey"]:hover,
.btn_controll_on_map[data-color="bluegrey"]:hover {
  background-color: #37474f !important;
}

.right_control_jheo_js[data-color="deeporange"],
.btn_controll_on_map[data-color="deeporange"] {
  background-color: #f4511e !important;
}
.right_control_jheo_js[data-color="deeporange"]:hover,
.btn_controll_on_map[data-color="deeporange"]:hover {
  background-color: #d84315 !important;
}

/* Bouton desactive (ex: Boutique CMZ, ou lien tant que non connecte) :
   toujours gris, quelle que soit sa data-color, pour ne pas laisser croire
   qu'une fonctionnalite bloquee est disponible. */
.btn_controll_on_map.disabled[data-color],
.btn_controll_on_map.disabled[data-color]:hover {
  background-color: #cfd8dc !important;
  color: #90a4ae !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}

/* Etat "actif/selectionne" : meme langage visuel partout sur les pastilles
   rondes de la colonne carte, qu'il s'agisse des boutons du haut
   (#rubrique-controls : filtre/favoris/favoris partages/legende — voir
   MapControl._setActiveMapControlButton), des liens du bas (#external-links :
   tribu/agenda/cloud/... — voir UiCtaLinkConnected/btn_control_on_map_active)
   ou du bouton liste (.cta_show_list_nav_left_jheo_js.btn-success quand la
   liste est ouverte — voir ListPoiManager.js). Avant, chacun avait son
   propre style de "selectionne" (remplissage bleu plein + halo pour le bas,
   remplissage rose vif pour la liste) different de l'anneau blanc + pastille
   de coin du haut. On unifie sur l'anneau + pastille de coin, volontairement
   independant de la couleur propre au bouton (vert/indigo/bleu/...) pour
   rester lisible quelle que soit celle-ci — on cherchait justement "on ne
   trouve pas bien le bouton qu'on a selectionne". */
.active_control_jheo_js,
.btn_control_on_map_active,
.cta_show_list_nav_left_jheo_js.btn-success {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #0d6efd,
    0 4px 12px rgba(0, 0, 0, 0.35) !important;
  transform: scale(1.1);
  z-index: 2;
}

.active_control_jheo_js::after,
.btn_control_on_map_active::after,
.cta_show_list_nav_left_jheo_js.btn-success::after {
  content: "";
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 11px;
  height: 11px;
  background-color: #0d6efd;
  border: 2px solid #fff;
  border-radius: 50%;
}

/* ============================================================
   Bouton flottant "replier/deplier" (voir UIManager.createCollapseToggleButton
   / bindCollapseToggle) : reste toujours visible en tete de colonne, meme
   quand le reste du menu est replie.
   ============================================================ */
/* Wrapper interne (contient #rubrique-controls + #external-links) ajoute
   pour que le bouton replier/deplier reste toujours visible en tete de
   colonne. flex:1 + min-height:0 : dans les viewports bas/etroits,
   #controll_and_menu_on_map a une hauteur contrainte (voir map_cmz.css,
   blocs "Antonius"/max-height:765px) — sans ca, ce wrapper prendrait sa
   hauteur de contenu naturelle au lieu de se contraindre a l'espace
   restant, et le scroll interne de #rubrique-controls/#external-links ne
   se declencherait jamais (piege flexbox classique : un flex-item ne
   peut pas etre plus petit que son contenu sans min-height:0 explicite). */
.controll_and_menu_body_jheo_js {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Separation visuelle entre les deux familles de boutons de la colonne :
   controles carte (#rubrique-controls : filtre/favoris/favoris partages/
   legende/reset/...) et liens du compte connecte (#external-links :
   tribu/agenda/cloud/...). Avant, un simple mt-2 (8px) les separait, sans
   reperage visuel entre ces deux groupes de fonctions pourtant bien
   distinctes. Trait horizontal ici (empilement par defaut, ecrans larges
   et hauts) ; voir map_cmz.css pour l'equivalent vertical dans les
   breakpoints ou .controll_and_menu_body_jheo_js passe en row-reverse
   (#rubrique-controls et #external-links cote a cote). */
#external-links {
  margin-top: 1.85rem !important;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.toggle_map_toolbar_jheo_js {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem;
  min-height: 2.5rem;
  /* flex:0 0 auto — sans ca, dans les viewports bas/etroits ou
     #controll_and_menu_on_map a une hauteur contrainte (50vh, 550px...),
     le comportement par defaut (flex-shrink:1) laisse le navigateur
     compresser la HAUTEUR de ce bouton pour faire de la place, alors que
     sa largeur reste fixe : le cercle s'ovalise. C'etait le "bouton
     replier pas vraiment rond" en petit ecran. */
  flex: 0 0 auto;
  align-self: center;
  margin-bottom: 0.6rem;
  border: none;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #1e88e5, #8e24aa);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.25),
    0 0 0 2px rgba(255, 255, 255, 0.55) inset;
  cursor: pointer;
  /* Seul top:0 sert au collage vertical (bouton toujours visible en tete de
     colonne au scroll) — left:0 ici entrait en conflit avec align-self:center
     ci-dessus : un position:sticky avec une contrainte left force ce bord a
     ne jamais depasser 0px par rapport au conteneur scrollable, ce qui
     "aimantait" le bouton contre le bord gauche de la colonne (donc contre
     la carte/l'iframe voisine) au lieu de le laisser centre, et le faisait
     apparaitre a moitie coupe/colle contre cette bordure. */
  position: sticky;
  top: 0;
  z-index: 5;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.toggle_map_toolbar_jheo_js:hover {
  transform: scale(1.1);
  box-shadow:
    0 5px 16px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.7) inset;
}

.toggle_map_toolbar_icon_jheo_js {
  pointer-events: none;
  transition: transform 0.25s ease;
}

#controll_and_menu_on_map.is-collapsed .toggle_map_toolbar_icon_jheo_js {
  transform: rotate(180deg);
}

/* !important obligatoire : sur petit ecran/viewport bas, map_cmz.css force
   .controll_and_menu_body_jheo_js en `display:flex !important` (mise en 2
   colonnes cote a cote, blocs "Antonius"/max-width:1439px) — en CSS,
   !important bat toujours une regle plus specifique mais non-important. Sans
   ce !important ici, le repli restait invisible (l'icone pivotait mais le
   contenu ne se cachait pas) des qu'on etait sous l'un de ces breakpoints :
   c'etait le "bouton plier ne marche pas en petit ecran". */
#controll_and_menu_on_map.is-collapsed .controll_and_menu_body_jheo_js {
  display: none !important;
}

/* ============================================================
   Palier "laptop" : des 1440px de fenetre, .controll_and_menu_body_jheo_js
   passe deja en row-reverse (#rubrique-controls et #external-links cote
   a cote, voir map_cmz.css @media max-width:1439px) — meme seuil ici,
   viewport et pas @container leftpanel : ce palier doit s'appliquer que
   le panneau iframe soit ouvert ou ferme (donc que #leftPanel fasse 50%
   ou 100% de la fenetre), la ou les paliers @container plus bas ne
   couvrent que le cas iframe ouverte. Reduction moderee (juste "un peu
   petit") des pastilles ET des espacements entre elles (mb-2/mt-2/gap-2
   Bootstrap, 0.5rem) pour regagner de la place sans aller jusqu'aux
   tailles mobile ci-dessous. Place AVANT les paliers plus agressifs qui
   suivent afin que ces derniers, sur ecran encore plus etroit, gardent
   la main (dernier declare gagne a specificite egale). */
@media (max-width: 1439.98px) {
  .btn_controll_on_map,
  .right_control_jheo_js,
  .cta_show_list_nav_left_jheo_js,
  .toggle_map_toolbar_jheo_js {
    width: 2.3rem !important;
    height: 2.3rem !important;
    min-width: 2.3rem;
    min-height: 2.3rem;
  }

  .right_control_icon_jheo_js {
    width: 1.05rem;
    height: 1.05rem;
  }

  #rubrique-controls .mb-2 {
    margin-bottom: 0.35rem !important;
  }

  #external-links .gap-2 {
    gap: 0.35rem !important;
    margin-bottom: 6px !important;
  }
}

/* ============================================================
   Responsive : pastilles de la colonne carte (.btn_controll_on_map,
   .right_control_jheo_js, .cta_show_list_nav_left_jheo_js,
   .toggle_map_toolbar_jheo_js) figees a 2.5rem (40px) quel que soit
   l'ecran — sur tablette/mobile, la colonne (une dizaine de pastilles
   empilees) prend une part disproportionnee de la largeur/hauteur
   disponible et parait "trop grande". Meme famille de regles que
   .btn_controll_on_map[data-color] plus haut, juste appliquee par
   paliers, en conservant width/height/icone toujours en proportion
   (le rond ne s'ovalise jamais).

   @container et pas @media : cette colonne vit dans #leftPanel, dont
   la largeur REELLE depend du partage 50/50 avec #rightPanel (voir
   .leftPanel_width/.rightPanel_width, map_cmz.css) — pas seulement de
   la fenetre. Sur un ecran de ~1080px avec le panneau iframe ouvert,
   #leftPanel ne fait plus que ~540px alors que la fenetre entiere reste
   au-dessus de tous les seuils @media habituels : les boutons restaient
   a 40px, disproportionnes par rapport a cette carte retrecie (signale :
   "sur cette taille le responsif de ces boutons n'est pas bien"). Le
   nom de container actif est "leftpanel" (minuscule, sans prefixe,
   voir #leftPanel dans style.css, container-name:leftpanel !important —
   la variante "container_leftPanel" posee par responsive_map_cmz.css
   est ecrasee par cet !important et ne s'applique donc jamais), meme
   convention que navbar_compact.css/navbar_rubrique_groups.css. */
@container leftpanel (max-width: 900px) {
  .btn_controll_on_map,
  .right_control_jheo_js,
  .cta_show_list_nav_left_jheo_js,
  .toggle_map_toolbar_jheo_js {
    width: 2.2rem !important;
    height: 2.2rem !important;
    min-width: 2.2rem;
    min-height: 2.2rem;
  }

  .right_control_icon_jheo_js {
    width: 1.05rem;
    height: 1.05rem;
  }
}

@container leftpanel (max-width: 620px) {
  .btn_controll_on_map,
  .right_control_jheo_js,
  .cta_show_list_nav_left_jheo_js,
  .toggle_map_toolbar_jheo_js {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem;
    min-height: 2rem;
  }

  .right_control_icon_jheo_js {
    width: 0.95rem;
    height: 0.95rem;
  }

  /* L'anneau de selection (2px blanc + 4px bleu, voir
     .active_control_jheo_js plus haut) reste calibre pour la pastille
     40px d'origine : sur une pastille 32px il devient proportionnellement
     trop epais et mange une bonne partie du rond. On le reduit d'autant. */
  .active_control_jheo_js,
  .btn_control_on_map_active,
  .cta_show_list_nav_left_jheo_js.btn-success {
    box-shadow:
      0 0 0 1.5px #fff,
      0 0 0 3px #0d6efd,
      0 4px 12px rgba(0, 0, 0, 0.35) !important;
  }
}

@container leftpanel (max-width: 400px) {
  .btn_controll_on_map,
  .right_control_jheo_js,
  .cta_show_list_nav_left_jheo_js,
  .toggle_map_toolbar_jheo_js {
    width: 1.8rem !important;
    height: 1.8rem !important;
    min-width: 1.8rem;
    min-height: 1.8rem;
  }

  .right_control_icon_jheo_js {
    width: 0.85rem;
    height: 0.85rem;
  }
}

/* @container leftpanel ne reagit qu'a la largeur (container-type:
   inline-size, voir style.css) — sur une fenetre large mais BASSE
   (ex: 1086x812, un format courant de petit laptop/DevTools ouvert),
   la largeur de #leftPanel reste confortable et aucun des paliers
   ci-dessus ne se declenche, alors que la colonne de pastilles (une
   dizaine empilees) reste calibree pour un ecran haut et prend une
   part disproportionnee de la hauteur disponible ("boutons trop
   grands en hauteur, independamment de l'iframe/de la largeur",
   signale). Paliers independants sur la hauteur de la FENETRE (comme
   les paliers de hauteur deja existants sur #controll_and_menu_on_map,
   voir map_cmz.css @media max-height:852px/765px, qui ne portent que
   sur la hauteur du conteneur, pas sur la taille des pastilles). */
@media (max-height: 850px) {
  .btn_controll_on_map,
  .right_control_jheo_js,
  .cta_show_list_nav_left_jheo_js,
  .toggle_map_toolbar_jheo_js {
    width: 2.2rem !important;
    height: 2.2rem !important;
    min-width: 2.2rem;
    min-height: 2.2rem;
  }

  .right_control_icon_jheo_js {
    width: 1.05rem;
    height: 1.05rem;
  }
}

@media (max-height: 700px) {
  .btn_controll_on_map,
  .right_control_jheo_js,
  .cta_show_list_nav_left_jheo_js,
  .toggle_map_toolbar_jheo_js {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem;
    min-height: 2rem;
  }

  .right_control_icon_jheo_js {
    width: 0.95rem;
    height: 0.95rem;
  }

  .active_control_jheo_js,
  .btn_control_on_map_active,
  .cta_show_list_nav_left_jheo_js.btn-success {
    box-shadow:
      0 0 0 1.5px #fff,
      0 0 0 3px #0d6efd,
      0 4px 12px rgba(0, 0, 0, 0.35) !important;
  }
}

@media (max-height: 560px) {
  .btn_controll_on_map,
  .right_control_jheo_js,
  .cta_show_list_nav_left_jheo_js,
  .toggle_map_toolbar_jheo_js {
    width: 1.8rem !important;
    height: 1.8rem !important;
    min-width: 1.8rem;
    min-height: 1.8rem;
  }

  .right_control_icon_jheo_js {
    width: 0.85rem;
    height: 0.85rem;
  }
}

/* Mise à jour Note By Elie*/

.note_avis_jheo_js {
  width: 100%;
  min-height: 80px;
  max-height: 300px;
  /* limite raisonnable */
  overflow: hidden;
  resize: none;
  /* line-height: 1.4; */
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  /* font-size: 14px; */
  box-sizing: border-box;
}

.audio_recorder_faniry_js,
.video_recorder_nanta_js {
  border: 1px solid #ccc !important;
}

.ifPIob {
  color: #1f1f1f;
  /* font-size: 1.375rem !important; */
  font-weight: 400;
  letter-spacing: 0rem;
  line-height: 1.75rem;
}

.fontBodyMedium {
  /* font-size: 0.875rem !important; */
  font-weight: 400;
  letter-spacing: 0.00625rem;
  line-height: 1.25rem;
}

.content_detail_resp_nanta {
  z-index: 9999 !important;
}

/* End Note */

.leaflet-control-attribution .leaflet-control {
  position: fixed !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;
}

.text-gradient-ma {
  background: linear-gradient(45deg, #00c9ff, #92fe9d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-success-ma {
  background: linear-gradient(60deg, #28a745, #218838);
}

.bg-gradient-primary-ma {
  background: linear-gradient(60deg, #007bff, #0056b3);
}

.my-custom-pagination .pagination li {
  padding: 1px 1px;
  border: 0 !important;
}

.search-input-custom::placeholder {
  color: #6c757d !important;
}

.search-input-custom {
  background-image: url("data:image/svg + xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-search-icon%20lucide-search%22%3E%3Cpath%20d%3D%22m21%2021-4.34-4.34%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat;
  background-position: 8px center;
  padding-left: 35px;
  background-size: 24px 24px;
}

.bg-viticulteur {
  background-color: #42f56f !important;
  color: #fff !important;
}

.bg-caviste {
  background-color: #f029cf !important;
  color: #fff !important;
}

.custom-pagination-product li.active {
  background-color: #0d6efd;
  border: none !important;
}

.custom-pagination-product li {
  border: none !important;
}

.modal {
  z-index: 10000 !important;
}

.green_color_fa_solid {
  color: green;
  font-size: x-large;
}

.red_color_fa_solid {
  color: red !important;
  font-size: xx-large;
}

@container container_rightPanel (max-width:760px) {
  .abonnement_ma {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    /* optionnel : aligner à gauche */
    gap: 5px;
    /* optionnel : espacement entre les enfants */
  }
}

.disabled-link {
  pointer-events: none;
}

/**INTERFACE POI*/
/* ====== CMZ Detail – Light UI ====== */
.cmzux-surface {
  /* background: #f9f9fb; */
  color: #222;
}

.cmzux-card {
  border: 1px solid #e2e6ea;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  margin-bottom: 1.5rem;
}

.cmzux-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border-color: #d0d7de;
}

.cmzux-card .cmzux-card-header {
  border-bottom: 1px solid #eee;
  padding: 0.75rem 1rem 1rem;
}

.cmzux-title {
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  /* cqi (largeur de .content_details_rubrique, container-name:
     container_detailPoi) et non vw (largeur de la fenêtre) : le nom peut
     tenir sur 1-2 lignes quelle que soit la largeur réellement dispo dans
     la fiche — avec vw, une fiche resserrée (redimensionnement du panneau
     droit, #resizer glissé...) sur une fenêtre restée large gardait un
     texte proche du max (2rem) et empilait un mot par ligne. */
  font-size: clamp(1.25rem, 1.1rem + 3cqi, 2rem);
  color: #111;
}

.cmzux-meta {
  font-size: 0.9rem;
  color: #555;
}

.cmzux-address {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
}

.cmzux-address a {
  color: #0077cc;
  text-decoration: none;
}

.cmzux-address a:hover {
  text-decoration: underline;
}

.cmzux-stars .fa-star {
  font-size: 1.05rem;
  margin: 0 0.08rem;
  color: #bbb;
  transition: transform 0.15s ease;
}

.cmzux-stars .fa-star.checked {
  color: #f5d165;
  text-shadow: 0 0 4px rgba(245, 209, 101, 0.35);
}

.cmzux-stars .fa-star:hover {
  transform: scale(1.06);
}

.cmzux-badges .badge {
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.cmzux-chip {
  background: #f0f2f6;
  color: #333;
}

.cmzux-actions {
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cmzux-actions .btn {
  border-radius: 8px !important;
  padding: 0.4rem 0.75rem;
  line-height: 1.1;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cmzux-actions .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.cmzux-actions .btn-primary {
  background: #4a90e2;
  border: none;
}

.cmzux-actions .btn-success {
  background: #28a745;
  border: none;
}

.cmzux-tribu .logo_tribu_pastille {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #e2e6ea;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cmzux-tribu .logo_tribu_pastille:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.cmzux-icons {
  /* Le conteneur (content_img_resto_resp) n'a de flex-wrap qu'en @media
     (max-width:768px) — basé sur la fenêtre. La rangée d'icônes (Google,
     Maps, Bing, + TripAdvisor/Michelin/TheFork pour les restos) débordait
     donc silencieusement dès que la fiche elle-même devenait étroite sans
     que la fenêtre ne le soit. flex-wrap ici est sans risque à n'importe
     quelle largeur : il ne fait quelque chose que quand la place manque
     vraiment. */
  flex-wrap: wrap;
}

.cmzux-icons .fa-search-elie {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 6px;
  background: #fff;
  border: 1px solid #0d6efd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cmzux-icons .fa-search-elie:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #09ff00;
}

.cmzux-gallery {
  border-radius: 12px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.cmzux-gallery .preview-photo-detail {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cmzux-gallery:hover .preview-photo-detail {
  transform: scale(1.02);
}

.cmzux-gallery .all-photos-detail {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cmzux-gallery:hover .all-photos-detail {
  opacity: 1;
}

.cmzux-gallery .nombre-photo-detail {
  font-weight: 700;
  background: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.cmzux-section-title {
  font-weight: 600;
  color: #222;
}

.cmzux-divider {
  border-top: 1px solid #cacad1;
  margin: 0.9rem 0;
}

.cmzux-input label {
  color: #333;
}

.cmzux-input .input_black {
  background: #fff;
  border: 1px solid #ccc;
  color: #222;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.cmzux-input .input_black:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.2);
}

.cmzux-ia button.generate-IA {
  background: linear-gradient(135deg, #4a90e2, #8e44ad);
  border: none;
  color: #fff;
}

/* ===== Avis (formulaire + liste dans le panneau latéral droit) ===== */
.avis-panel {
  padding-top: 0.25rem;
}

.avis-panel-stars i {
  color: #bbb;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.avis-panel-stars i:hover {
  transform: scale(1.08);
}

.avis-panel-stars i.fa-solid {
  color: #f5d165;
  text-shadow: 0 0 6px rgba(245, 209, 101, 0.35);
}

.avis-panel-textarea textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  color: #222;
  resize: vertical;
  min-height: 90px;
}

.avis-panel-textarea textarea:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.2);
}

.avis-panel-record-row {
  gap: 0.5rem;
}

.avis-panel-record-btn {
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  color: #4a90e2;
  font-weight: 600;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.avis-panel-record-btn:hover:not(:disabled) {
  border-color: #4a90e2;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.18);
  transform: translateY(-1px);
}

.avis-panel-record-btn:disabled {
  color: #aaa;
  border-color: #eee;
}

.avis-panel-actions .btn {
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.avis-panel-list {
  display: flex;
  flex-direction: column;
}

.avis-panel-list .card_avis_resto_jheo_js {
  border: 1px solid #e2e6ea !important;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.avis-panel-list .card_avis_resto_jheo_js:hover {
  border-color: #d0d7de !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.avis-panel-list .card_avis_resto_jheo_js .profil_image,
.avis-panel-list .card_avis_resto_jheo_js .profil_image_v2 {
  border-radius: 50%;
  object-fit: cover;
}

.avis-panel-list .card_avis_resto_jheo_js hr {
  border-top: 1px solid #eee;
}

/* Styles Horaires */
.hours-card {
  --bg: #ffffff;
  --fg: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #0ea5e9;
  max-width: 520px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.hours-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
}

.hours-row:not(.header):hover {
  background: #f9fafb;
}

.header {
  background: linear-gradient(180deg, #f5f9ff, #eef6ff);
  border: 1px solid #e6efff;
  font-weight: 600;
}

.col-day {
  font-weight: 600;
}

.col-time {
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

.closed {
  color: var(--muted);
  background: #f3f4f6;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  justify-self: start;
}

@media (max-width:420px) {
  .hours-row {
    grid-template-columns: 72px 1fr;
    gap: 8px;
  }
  
  .col-time {
    justify-self: start;
  }
}

.hours-row[data-today="true"] {
  background: #e5ffe8;
  outline: 2px solid #82f59b;
  font-weight: 600;
}

.feature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0.25rem 0 0;
  list-style: none;
}

.feature-badge {
  --bg: #f3f4f6;
  /* fond par défaut */
  --fg: #111827;
  /* texte par défaut */
  --bd: #e5e7eb;
  /* bordure par défaut */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: 999px;
  font: 600 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  white-space: nowrap;
}

.feature-ico {
  font-size: 14px;
  line-height: 1;
}

/* Effet hover léger */
.feature-badge:hover {
  filter: brightness(0.98);
}

/* Exemples de thèmes par fonctionnalité (via data-attribute) */
.feature-badge[data-feature="Reservations"] {
  --bg: #eef2ff;
  --fg: #3730a3;
  --bd: #c7d2fe;
}

.feature-badge[data-feature="Acces personnes handicapees"] {
  --bg: #ecfeff;
  --fg: #155e75;
  --bd: #a5f3fc;
}

.feature-badge[data-feature="Sert de l'alcool"] {
  --bg: #fff7ed;
  --fg: #9a3412;
  --bd: #fed7aa;
}

.feature-badge[data-feature="Service de table"] {
  --bg: #f0fdf4;
  --fg: #166534;
  --bd: #bbf7d0;
}

.link-card {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.9rem;
  border-radius: 8px;
  background: #10b981;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: 0.2s;
}

.link-card:hover {
  background: #059669;
  text-decoration: none;
}

.icon {
  font-size: 1.2rem;
}

.info-box {
  position: relative;
  border: 1px solid #0077cc;
  /* bleu */
  border-radius: 10px;
  padding: 22px 22px 18px;
  background: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow-x: unset !important;
  overflow-y: unset !important;
}

.info-header {
  position: absolute;
  top: -12px;
  /* “posé” sur la bordure */
  left: 14px;
  background: #fff;
  /* masque la bordure derrière le titre */
  padding: 0 10px;
  color: #0077cc;
  font-weight: 600;
  font-size: large;
}

.info-header::before {
  left: 0;
}

.info-header::after {
  right: 0;
}

.info-body {
  padding: 1rem;
}

.info-body p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
}

.info-body a {
  color: white;
  font-weight: 600;
  text-decoration: none;
}

.info-body a:hover {
  text-decoration: underline;
}

/**END INTERFACE POI**/

.maintenance-alert {
  background-color: #fff1c7;
  color: #b0831f;
  border: 2px solid #b0831f;
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  padding: 10px 20px;
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000000;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 7%;
}

.btn-large-bold {
  font-size: 18px !important;
  /* Taille du texte */
  font-weight: bold !important;
  /* Met en gras */
  padding: 12px 24px !important;
  /* Agrandir bouton */
  border-radius: 8px !important;
  /* Optionnel : coins arrondis */
  color: rgba(0,0,0,.65);
}


/* Slider avec couleur success */
#skipstep {
  /* height: 8px; */
  border: none;
  background: #e9ecef;
  border-radius: 10px;
}

/* Barre de connexion en vert success */
#skipstep .noUi-connect {
  background: linear-gradient(90deg, #3FB8AF 0%, #146c43 100%);
  box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
}

/* Handles avec bordure verte */
#skipstep .noUi-handle {
  height: 28px;
  width: 28px;
  top: -10px;
  right: -14px;
  /* border-radius: 50%; */
  border: 2px solid white;
  background: linear-gradient(135deg, #198754 0%, #146c43 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: grab;
  transition: all 0.2s ease;
}

#skipstep .noUi-handle::before {
  left: 5px !important;
  width: 2px;
}

#skipstep .noUi-handle::after {
  left: 10px !important;
  backface-visibility: hidden;
}

#skipstep .noUi-handle::before,
  #skipstep .noUi-handle::after {
  top: 50%;
  margin-top: -7px;
}

#skipstep .noUi-handle:before,
  #skipstep .noUi-handle:after {
  /* display: none; */
}

#skipstep .noUi-handle:hover {
  /* transform: scale(1.15); */
  box-shadow: 0 6px 16px rgba(25, 135, 84, 0.4);
}

#skipstep .noUi-handle:active {
  /* cursor: grabbing; */
  /* transform: scale(1.25); */
}

/* Valeur affichée sous le handle */
.slider-value-display {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #198754;
  color: white;
  padding: 0px 5px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 10;
}

/* Petite flèche vers le haut */
.slider-value-display::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #198754;
}

/* Animation lors du drag */
#skipstep .noUi-active .slider-value-display {
  transform: translateX(-50%) scale(1.1);
  transition: transform 0.2s ease;
}

/* Tooltips NoUI (optionnel, si vous voulez les garder au-dessus) */
#skipstep .noUi-tooltip {
  display: none;
  /* Caché car on utilise notre propre affichage en bas */
}

/* Style des badges min/max (fixes) */
.value-badge .badge {
  min-width: 70px;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ajuster l'espace pour les valeurs en bas */

/* Valeur affichée sous le handle - version animée */
.slider-value-display {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #198754 0%, #20c997 100%);
  color: white;
  padding: 0px 5px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(25, 135, 84, 0.3);
  pointer-events: none;
  z-index: 10;
  transition: all 0.2s ease;
}

.slider-value-display::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #198754;
}

.slider-value-display::after {
  content: '⭐';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  animation: sparkle 1s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-50%) scale(1.2);
  }
}

#skipstep .noUi-active .slider-value-display {
  transform: translateX(-50%) scale(1.15);
  box-shadow: 0 4px 15px rgba(25, 135, 84, 0.5);
}

.noUi-horizontal .noUi-handle
{
  width: 18px !important;
  height: 28px !important;
  right: -12px !important;
  top: -8px !important;
  border-radius: 5px;
}
.form-check-input:checked {
  background-color: #198754 !important;
  border-color: #198754 !important;
}
.slider-area .noUi-target .noUi-connects{
  border: 1px solid darkgrey;
}

/* Overlay pour slider désactivé */
.slider-disabled-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(108, 117, 125, 0.1);
  border-radius: 8px;
  cursor: not-allowed;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Message qui apparaît au hover */
/* Message avec rouge léger */
.disabled-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #ffe5e5 0%, #ffcccc 100%);
  color: #dc3545;
  border: 2px solid #dc3545;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  max-width: 360px; /* Largeur maximale */
  text-align: center; /* Centrer le texte */
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4; /* Espacement entre les lignes */
  width: 100%;
}

.disabled-message span {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.slider-disabled-overlay {
  background: rgba(220, 53, 69, 0.03);
}

.disabled-message i {
  font-size: 1.1rem;
}

/* Afficher le message au hover */
.slider-disabled-overlay:hover .disabled-message {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

/* Style du slider désactivé */
#skipstep[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

#skipstep[disabled] .noUi-handle {
  cursor: not-allowed;
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
  border-color: #adb5bd !important;
}

#skipstep[disabled] .noUi-connect {
  background: #adb5bd !important;
  box-shadow: none !important;
}

#skipstep[disabled] .slider-value-display {
  background: #6c757d !important;
  opacity: 0.7;
}

#skipstep[disabled] .slider-value-display::before {
  border-bottom-color: #6c757d !important;
}

/* S'assurer que le wrapper a position relative */
.slider-wrapper,
.slider-track-wrapper {
  position: relative;
}

.cta_to_filter_jheo_js.btn-primary {
  background: #12a088 !important;
}

/* Notice dans le tooltip */
.slider-notice {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.7rem;
  white-space: nowrap;
  z-index: 1001;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: #856404;
  font-weight: 500;
  pointer-events: none;
  animation: slideDown 0.2s ease-out;
}

.slider-notice i {
  margin-right: 4px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
  }
  
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* S'assurer que le tooltip peut contenir la notice */
.noUi-tooltip {
  overflow: visible !important;
}

.ck-editor__main p{
  margin: 20px 0 !important;
}
.signature_mail p{
  margin: 0 !important;
}
.image_signature img{
  width: 60px;height: 60px;border-radius: 50%;margin-right: 15px;object-fit: cover;
}

/* Ou cibler le wrapper complet */
#table_partisan_elie_js_wrapper {
  overflow-x: hidden !important;
  margin-bottom: 2.2rem;
  padding: 1rem;
  border : 1px solid lightgrey;
  border-radius: .5rem;
}

#table_partisan_elie_js{
  border-bottom: none !important;
}
/* Supprimer toutes les bordures du tableau */
#table_partisan_elie_js,
#table_partisan_elie_js thead,
#table_partisan_elie_js tbody,
#table_partisan_elie_js tr,
#table_partisan_elie_js th,
#table_partisan_elie_js td {
  border-top: none !important;
}

/* Si vous voulez garder juste une ligne de séparation subtile entre les lignes */
#table_partisan_elie_js tbody tr {
  border-bottom: 1px solid #e1dcdc !important;
}

.no-sort::after,
  .no-sort::before {
  display: none !important;
}

/* ============================================================
card-poi.css — Style card liste POI (style Google Maps)
============================================================ */

.item_list_rubrique_nav_left_jheo_js {
  display: block;
  margin-bottom: 8px;
}

.item_list_rubrique_nav_left_jheo_js td {
  display: block;
  width: 100%;
  padding: 0 10px;
  margin-bottom: 10px;
}

/* Card principale */
.card-poi {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.10);
  border: 1px solid #e8eaed;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.card-poi:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}

.card-poi.is-featured-search {
  border-color: #12a088;
  box-shadow: 0 0 0 2px rgba(18, 160, 136, 0.22);
  background: #f4fbf9;
}

.search-list-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #3c4043;
  padding: 12px 8px 6px;
  margin: 0;
}

.search-list-section-row td {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.search-list-section-row .search-list-section-title {
  padding-top: 8px;
}

.search-list-section-row:first-child .search-list-section-title {
  padding-top: 0;
}

/* Infos à gauche */
.card-poi-info {
  flex: 1;
  min-width: 0;
}

/* Badge type */
.badge-type-poi {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

/* Titre */
.card-poi-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px 0;
  /* 2 lignes plutôt qu'une seule tronquée dès quelques caractères ("BANQ...")
     dès que le panneau liste devient étroit (voir .card-poi-image ci-dessous,
     rétréci sur les mêmes largeurs via @container container_listPoi). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Emplacement du badge de vérification (voir UiListPOi.badgeValidation) :
   largeur fixe et toujours réservée, présente ou non, pour que le titre
   ci-dessus dispose de la même largeur disponible (donc de la même
   troncature) sur toutes les cartes de la liste, que le POI soit vérifié ou
   non. */
.card-poi-validation-slot {
  flex: 0 0 24px;
  width: 24px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Note */
.card-poi-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}

.note-value {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
}

.no-note {
  font-size: 0.78rem;
  color: #70757a;
}

/* Étoiles */
.stars-poi {
  display: flex;
  gap: 2px;
}

.star-poi {
  width: 20px;
  height: 20px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star-poi.full  { background: #fbbc04; }
.star-poi.half  { background: linear-gradient(90deg, #fbbc04 50%, #e0e0e0 50%); }
.star-poi.empty { background: #c7c7c7; }

/* Adresse */

.card-poi-address {
  font-size: 1rem;
  color: #70757a;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
  line-height: 1.4;
}

.card-poi-address svg {
  margin-top: 2px;
  flex-shrink: 0;
}


/* Image à droite */
.card-poi-image {
  width: 82px;
  height: 82px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8eaed;
}

.card-poi-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image-poi {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: linear-gradient(135deg, #e8f0fe, #d2e3fc);
}

/* Panneau liste étroit (voir .content_list_nav_left, 40% de #leftPanel) :
   l'image fixe de 82px + le gap laissaient trop peu de place au texte, d'où
   des titres tronqués après quelques lettres ("BANQ...", "CREDI..."). On
   réduit l'image et les marges pour rendre le texte prioritaire. */
@container container_listPoi (max-width: 560px) {
  .card-poi {
    gap: 10px;
    padding: 12px;
  }

  .card-poi-image {
    width: 56px;
    height: 56px;
  }

  .card-poi-title {
    font-size: 1.05rem;
  }

  .card-poi-address {
    font-size: 0.85rem;
  }
}
/* Étoiles vides noires */
.star-poi.empty { background: #1a1a1a; }

/* Étoiles vides grises (défaut) */
.star-poi.empty { background: #e0e0e0; }

/* Étoiles vides contour blanc */
.star-poi.empty { background: #e0e0e0; border: 1px solid #ccc; }

/* ── Golf Status Badge ── */
.golf_status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .5px;
  border-radius: 999px;
  padding: 6px 10px;
  position: absolute;
  left: 12px;
  top: 10px;
  font-style: normal;
  text-transform: uppercase;
}
.golf_status--a_faire {
  background: #e8f3ff;
  color: #0b5ed7;
  border: 1px solid #b6d4fe;
}

.golf_status--fait {
  background: #e6f9ec;
  color: #198754;
  border: 1px solid #a3e6b8;
}

.golf_status--mon_golf {
  background: #ede7ff;
  color: #5b3cc4;
  border: 1px solid #cbb9ff;
}

.golf_status--refaire {
  background: #fff3cd;
  color: #b45309;
  border: 1px solid #f7d070;
}
/* ── Golf Cancel Zone ── */
.golf-cancel-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fffbf2;
  border: 1.5px solid #fde68a;
  border-radius: 14px;
  padding: 14px 16px;
  transition: background .2s, border-color .2s;
}

.golf-cancel-zone:hover {
  background: #fff8e6;
  border-color: #f59e0b;
}

.golf-cancel-zone__icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.golf-cancel-zone__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.golf-cancel-zone__title {
  font-size: 13px;
  font-weight: 700;
  color: #92400e;
}

.golf-cancel-zone__sub {
  font-size: 11px;
  color: #b45309;
  opacity: .8;
}

.golf-cancel-zone__btn {
  display: inline-flex;
  align-items: center;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(239,68,68,.28);
}

.golf-cancel-zone__btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239,68,68,.38);
}

.golf-cancel-zone__btn:active {
  transform: scale(.95);
  box-shadow: none;
}
.golf-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  /* top: -1px; */
}

.golf_status--none {
  background: #f3f4f6;
  color: #6b7280;
}

.add-text{
  cursor: default;
}




/* ★ Bouton Communication ★ */
    .btn-communication {
      background-color: #e8a020 !important;
      color: white !important;
      border-radius: 20px !important;
      font-weight: 800 !important;
      padding: 6px 16px !important;
      box-shadow: 0 2px 10px rgba(232,160,32,0.5);
      animation: pulse-glow 2.5s ease-in-out infinite;
      position: relative;
    }
    .btn-communication:hover {
      background-color: #d4900a !important;
      transform: translateY(-1px);
    }
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 2px 10px rgba(232,160,32,0.4); }
      50%       { box-shadow: 0 2px 22px rgba(232,160,32,0.8); }
    }
	.badge-notif {
      position: absolute;
      top: -4px;
      right: -4px;
      background: #e53935;
      color: white;
      font-size: 9px;
      font-weight: 900;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #2d5a27;
    }
.ck-content .image-inline img{
	height: 100%;
}


/* ═══════════════════════════════════════════════════════════════
   DATATABLE STORY — Thème bleu moderne
   Préfixe : dts- (DataTable Story) pour éviter tout conflit
   ═══════════════════════════════════════════════════════════════ */

:root {
  --dts-blue:       #2563eb;
  --dts-blue-dark:  #1d4ed8;
  --dts-blue-soft:  #eff6ff;
  --dts-blue-ring:  rgba(37, 99, 235, .18);
  --dts-border:     #e5e7eb;
  --dts-muted:      #9ca3af;
  --dts-text:       #111827;
  --dts-radius:     12px;
  --dts-font:       'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Wrapper carte ──────────────────────────────────────────────── */
.dts-wrapper {
  position: relative !important;
  font-family: var(--dts-font);
  background: #fff;
  border-radius: var(--dts-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 6px 20px rgba(0,0,0,.06);
  overflow: hidden;
  padding: 1.25rem 1.5rem;
}

/* ── Barre length + search ──────────────────────────────────────── */
.dts-wrapper .dataTables_length label,
.dts-wrapper .dataTables_filter label {
  font-size: 1rem;
  color: #6b7280;
  font-weight: 500;
}
.dts-wrapper .dataTables_filter input {
  border: 1.5px solid var(--dts-border);
  border-radius: 8px;
  padding: .38rem .8rem;
  font-size: 1rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.dts-wrapper .dataTables_filter input:focus {
  border-color: var(--dts-blue);
  box-shadow: 0 0 0 3px var(--dts-blue-ring);
}

/* ── Table ──────────────────────────────────────────────────────── */
.dts-wrapper .dataTable {
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100% !important;
}

/* ── En-têtes ───────────────────────────────────────────────────── */
.dts-wrapper .dataTable thead th {
  background: #f8fafc;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--dts-muted);
  border-bottom: 2px solid var(--dts-border);
  padding: .9rem 1rem;
  white-space: nowrap;
}
.dts-wrapper .dataTable thead th.sorting_asc,
.dts-wrapper .dataTable thead th.sorting_desc {
  color: var(--dts-blue);
  background: var(--dts-blue-soft);
}

/* ── Cellules ───────────────────────────────────────────────────── */
.dts-wrapper .dataTable tbody td {
  /* padding: .8rem 1rem; */
  font-size: 1rem;
  color: var(--dts-text);
  border-bottom: 1px solid var(--dts-border);
  vertical-align: middle;
}
.dts-wrapper .dataTable tbody tr:last-child td {
  border-bottom: none;
}

/* ── Hover ligne ────────────────────────────────────────────────── */
.dts-wrapper .dataTable tbody tr {
  transition: background .15s ease;
}
.dts-wrapper .dataTable tbody tr:hover td {
  background-color: var(--dts-blue-soft) !important;
}

/* ── Avatar ─────────────────────────────────────────────────────── */
.dts-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.dts-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.dts-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f3f4f6;
  border: 1.5px dashed #d1d5db;
  color: #9ca3af;
  flex-shrink: 0;
}

/* ── Lien profil ────────────────────────────────────────────────── */
.dts-profile-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
}
.dts-profile-link:hover .dts-username {
  color: var(--dts-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dts-username {
  font-weight: 500;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .15s;
}

/* ══════════════════════════════════════════════════════════════════
   BADGES STATUT avec dot animé
   ══════════════════════════════════════════════════════════════════ */
.dts-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .73rem;
  font-weight: 600;
  padding: .1em .8em;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .01em;
}

/* Dot générique */
.dts-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Validé ── */
.dts-badge-success {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.dts-badge-success .dts-dot {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.5);
}

/* ── Annulé ── */
.dts-badge-secondary {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
}
.dts-badge-secondary .dts-dot { background: #9ca3af; }


/* ── Refusé ── */
.dts-badge-danger {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.dts-badge-danger .dts-dot { background: #ef4444; }

/* ── En attente : dot pulsant ── */
.dts-badge-waiting {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.dts-badge-waiting .dts-dot {
  background: var(--dts-blue);
  animation: dts-pulse 1.6s ease-in-out infinite;
}
@keyframes dts-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
  50%       { box-shadow: 0 0 0 5px rgba(37,99,235,.0); }
}

/* Compteur relances (inline dans le badge) */
.dts-relance-count {
  background: rgba(37,99,235,.12);
  color: var(--dts-blue-dark);
  font-size: .67rem;
  font-weight: 700;
  padding: .1em .5em;
  border-radius: 999px;
}

/* ── Fondateur ── */
.dts-badge-founder {
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}
.dts-badge-founder .dts-dot { background: #8b5cf6; }

/* ── Compte non trouvé ── */
.dts-badge-unknown {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.dts-badge-unknown .dts-dot { background: #f97316; }

/* ── Bouton action ──────────────────────────────────────────────── */
.dts-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 500;
  padding: .38rem .85rem;
  border-radius: 8px;
  border: 1.5px solid var(--dts-blue);
  background: transparent;
  color: var(--dts-blue);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s, transform .1s;
  white-space: nowrap;
  font-family: var(--dts-font);
}
.dts-btn:hover {
  background: var(--dts-blue);
  color: #fff;
  box-shadow: 0 3px 10px rgba(37,99,235,.3);
  transform: translateY(-1px);
}
.dts-btn:active { transform: translateY(0); box-shadow: none; }

/* ── Spinner ────────────────────────────────────────────────────── */
.dts-spinner {
  display: flex;
  justify-content: center;
  padding: 1rem;
  z-index: 500;
}

/* ── Pagination ─────────────────────────────────────────────────── */
.dts-wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
  font-size: .8rem !important;
  padding: .3rem .65rem !important;
  margin: 0 2px !important;
  transition: background .15s, color .15s !important;
}
.dts-wrapper .dataTables_paginate .paginate_button.current,
.dts-wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--dts-blue) !important;
  border-color: var(--dts-blue) !important;
  color: #fff !important;
}
.dts-wrapper .dataTables_paginate .paginate_button:not(.current):hover {
  background: var(--dts-blue-soft) !important;
  border-color: var(--dts-border) !important;
  color: var(--dts-blue) !important;
}

/* ── Info bas ───────────────────────────────────────────────────── */
.dts-wrapper .dataTables_info {
  font-size: .78rem;
  color: var(--dts-muted);
  padding-top: .75rem !important;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE ≤ 576px
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .dts-wrapper {
    padding: .75rem;
    border-radius: 0;
  }
  /* Masquer colonnes secondaires */
  .dts-wrapper .dataTable thead th:nth-child(3),
  .dts-wrapper .dataTable tbody td:nth-child(3),
  .dts-wrapper .dataTable thead th:nth-child(4),
  .dts-wrapper .dataTable tbody td:nth-child(4) {
    display: none;
  }
  .dts-wrapper .dataTable tbody td { padding: .6rem .5rem; font-size: .8rem; }
  .dts-username    { max-width: 75px; }
  .dts-btn         { padding: .3rem .5rem; font-size: .72rem; }
  .dts-avatar,
  .dts-avatar-fallback { width: 26px; height: 26px; }
  .dts-wrapper .dataTables_length,
  .dts-wrapper .dataTables_filter { float: none; text-align: left; }
  .dts-wrapper .dataTables_filter { margin-top: .5rem; }
}


/* ── Input search natif DataTables (type="search") ──────────────── */
.dts-wrapper input[type="search"] {
  border: 1.5px solid var(--dts-border) !important;
  border-radius: 12px !important;
  font-size: 1rem;
  margin: 0.85rem 0.25rem;
  color: var(--dts-text);
  background: #fff;
  outline: none;
  min-width: 250px;
  transition: border-color .2s, box-shadow .2s, min-width .25s;
  font-family: var(--dts-font);
  /* Supprime le style natif du navigateur sur input[type=search] */
  -webkit-appearance: none;
  appearance: none;
}
.dts-wrapper input[type="search"]:focus {
  border-color: var(--dts-blue);
  /* box-shadow: 0 0 0 3px var(--dts-blue-ring); */
  min-width: 300px;
}
.dts-wrapper input[type="search"]::placeholder { color: #c4c9d4; }
/* Masque la croix "clear" native sur Chrome/Safari */
.dts-wrapper input[type="search"]::-webkit-search-cancel-button,
.dts-wrapper input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.dts-wrapper .dataTables_length label select{
	border-radius: 12px;
	margin: 0.85rem 0.25rem;
	padding: 0.25rem 0.5rem;
	padding: 0.5rem;
	cursor: pointer;
	border: 1.5px solid var(--dts-border) !important;
}

.dts-wrapper .dataTables_length label select:focus {
  border-color: var(--dts-blue);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    color: white !important;
}

#containerDataTableStory{
    border: 1px solid lightgrey;
    padding: 1rem;
}

.notification-item[data-status="disable"] {
    opacity: 0.7;
    pointer-events: none;
}

#update_description {
  resize: none;
  overflow: hidden;
  min-height: 44px; /* hauteur minimale */
  height: auto;
}
#updateTribuInfo{
  min-width: 200px !important;
}

.description-tribu-t, .destription-tribu-t {
  font-style: italic;
}

/* Email non lu */
#emailListTable tbody tr.email-unread {
  background-color: #eef4ff; /* ou la couleur de votre choix */
  font-weight: 700;
}

/* S'assurer que les cellules héritent du font-weight */
#emailListTable tbody tr.email-unread td {
  font-weight: 700;
}


/* Compteur relances (inline dans le badge) */
.dts-relance-count {
  background: rgba(37,99,235,.12);
  color: var(--dts-blue-dark);
  font-size: .67rem;
  font-weight: 700;
  padding: .1em .5em;
  border-radius: 999px;
}


/* ── Fondateur ── */
.dts-badge-founder {
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}
.dts-badge-founder .dts-dot { background: #8b5cf6; }

/* ── Compte non trouvé ── */
.dts-badge-unknown {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.dts-badge-unknown .dts-dot { background: #f97316; }

/* ── Bouton action ──────────────────────────────────────────────── */
.dts-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 500;
  padding: .38rem .85rem;
  border-radius: 8px;
  border: 1.5px solid var(--dts-blue);
  background: transparent;
  color: var(--dts-blue);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s, transform .1s;
  white-space: nowrap;
  font-family: var(--dts-font);
}
.dts-btn:hover {
  background: var(--dts-blue);
  color: #fff;
  box-shadow: 0 3px 10px rgba(37,99,235,.3);
  transform: translateY(-1px);
}
.dts-btn:active { transform: translateY(0); box-shadow: none; }

/* ── Spinner ────────────────────────────────────────────────────── */
.dts-spinner {
  display: flex;
  justify-content: center;
  padding: 1rem;
  z-index: 500;
}

/* ── Pagination ─────────────────────────────────────────────────── */
.dts-wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
  font-size: .8rem !important;
  padding: .3rem .65rem !important;
  margin: 0 2px !important;
  transition: background .15s, color .15s !important;
}
.dts-wrapper .dataTables_paginate .paginate_button.current,
.dts-wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--dts-blue) !important;
  border-color: var(--dts-blue) !important;
  color: #fff !important;
}
.dts-wrapper .dataTables_paginate .paginate_button:not(.current):hover {
  background: var(--dts-blue-soft) !important;
  border-color: var(--dts-border) !important;
  color: var(--dts-blue) !important;
}

/* ── Info bas ───────────────────────────────────────────────────── */
.dts-wrapper .dataTables_info {
  font-size: .78rem;
  color: var(--dts-muted);
  padding-top: .75rem !important;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE ≤ 576px
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .dts-wrapper {
    padding: .75rem;
    border-radius: 0;
  }
  /* Masquer colonnes secondaires */
  .dts-wrapper .dataTable thead th:nth-child(3),
  .dts-wrapper .dataTable tbody td:nth-child(3),
  .dts-wrapper .dataTable thead th:nth-child(4),
  .dts-wrapper .dataTable tbody td:nth-child(4) {
    display: none;
  }
  .dts-wrapper .dataTable tbody td { padding: .6rem .5rem; font-size: .8rem; }
  .dts-username    { max-width: 75px; }
  .dts-btn         { padding: .3rem .5rem; font-size: .72rem; }
  .dts-avatar,
  .dts-avatar-fallback { width: 26px; height: 26px; }
  .dts-wrapper .dataTables_length,
  .dts-wrapper .dataTables_filter { float: none; text-align: left; }
  .dts-wrapper .dataTables_filter { margin-top: .5rem; }
}


/* ── Input search natif DataTables (type="search") ──────────────── */
.dts-wrapper input[type="search"] {
  border: 1.5px solid var(--dts-border) !important;
  border-radius: 12px !important;
  font-size: 1rem;
  margin: 0.85rem 0.25rem;
  color: var(--dts-text);
  background: #fff;
  outline: none;
  min-width: 250px;
  transition: border-color .2s, box-shadow .2s, min-width .25s;
  font-family: var(--dts-font);
  /* Supprime le style natif du navigateur sur input[type=search] */
  -webkit-appearance: none;
  appearance: none;
}
.dts-wrapper input[type="search"]:focus {
  border-color: var(--dts-blue);
  /* box-shadow: 0 0 0 3px var(--dts-blue-ring); */
  min-width: 300px;
}
.dts-wrapper input[type="search"]::placeholder { color: #c4c9d4; }
/* Masque la croix "clear" native sur Chrome/Safari */
.dts-wrapper input[type="search"]::-webkit-search-cancel-button,
.dts-wrapper input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.dts-wrapper .dataTables_length label select{
	border-radius: 12px;
	margin: 0.85rem 0.25rem;
	padding: 0.25rem 0.5rem;
	padding: 0.5rem;
	cursor: pointer;
	border: 1.5px solid var(--dts-border) !important;
}

.dts-wrapper .dataTables_length label select:focus {
  border-color: var(--dts-blue);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    color: white !important;
}

#containerDataTableStory{
    border: 1px solid lightgrey;
    padding: 1rem;
}

.notification-item[data-status="disable"] {
    opacity: 0.7;
    pointer-events: none;
}

#update_description {
  resize: none;
  overflow: hidden;
  min-height: 44px; /* hauteur minimale */
  height: auto;
}
#updateTribuInfo{
  min-width: 200px !important;
}

.destription-tribu-t {
  font-style: italic;
}

/* Repositionner le processing en haut de la table */
.dataTables_processing {
  top: 60 !important;
  margin-top: 0 !important;
  margin-left: auto !important;
  
  /* Garder le centrage horizontal */
  left: 50% !important;
  transform: translateX(-50%) !important; /* seulement X, pas Y */
}


#email-ck-editor{
  max-width: 100% !important;
}

.compose-wrap {
    background: #fff;
    max-width: 100%;
    margin: 1rem auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    overflow: hidden;
    padding: 20px;
}
.compose-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 0.5px solid #e5e7eb;
    background: #f9fafb;
}
.compose-field {
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 0.5px solid #f3f4f6;
    gap: 12px;
    min-height: 48px;
}
.compose-field label {
    font-size: 13px;
    color: #6b7280;
    min-width: 90px;
    flex-shrink: 0;
    margin: 0;
}
.compose-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px;
    padding: 10px 0;
    box-shadow: none !important;
}
.compose-body {
    padding: 16px 20px;
    min-height: 180px;
}
.compose-label {
    font-size: 13px;
    color: #6b7280;
    display: block;
    margin-bottom: 8px;
}
.compose-attachments {
    padding: 0 20px 12px;
}
.compose-footer {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-top: 0.5px solid #e5e7eb;
    background: #f9fafb;
}
.compose-footer-left {
    display: flex;
    align-items: center;
    gap: 4px;
}
.compose-divider {
    width: 0.5px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 6px;
}
.btn-send {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1d4ed8;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.btn-send:hover { background: #1e40af; }
.btn-compose-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0.5px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
}

.btn-compose-back:hover { background: #f3f4f6; color: #111827; }
.compose-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.12s;
}
.compose-icon-btn:hover { background: #f3f4f6; color: #111827; }

.tooltip-new-brouillon{
  height: 40px;
  top: 40px !important;
  position: absolute;
  z-index: 9999;
  bottom: 110%;
  right: 0;
  /* left: -17%; */
  width: 300px;
  transform: translateX(0%);
  background-color: #6e6e6e;
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 9pt;
  font-family: sans-serif;
  transition: all 0.3s ease;
}

#contentDetail {
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  overflow:hidden;
  padding: 20px;
}

.table.dataTable tbody tr.selected > *{
  box-shadow: inset 0 0 0 9999px rgb(220 223 227 / 90%) !important;
  color: rgb(47 45 45) !important;
}