/* ============================================================
   Style.css - CSS COMPLET HARMONISÉ
   Version finale - Toutes les sections unifiées
   ============================================================ */

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

/* Body styles */
body {
  font-family: sans-serif;
  line-height: 1.5;
  background-color: #f4f4f4;
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

/* Table styles */
table {
  border-collapse: collapse; 
  border: 0px solid #ddd;
  vertical-align: middle;
  text-align: center;
}

th {
  padding: 0.2rem;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
}

td {
  padding: 0.2rem;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ddd;
}

.td_recherche {
  padding: 0.2rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ddd;
  background-color: #bde6f8;
}

.button-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

/* Form styles */
form {
  margin-bottom: 0.5rem;
}

input, select, textarea {
  padding: 0.2rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

button {
  padding: 0.2rem 1rem;
  border: none;
  border-radius: 3px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

.button_submit {
  padding: 0.2rem 1rem;
  border: none;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  background-color: #79baff;
}

.tab {
  width: 100%;
  overflow: hidden;
  border: none;
  background-color: #f1f1f1;
}

.tab a {
  text-align: center; 
  text-decoration: none; 
  font-size: 12px; 
  margin: 1px 1px; 
  padding: 5px 5px;
  color: black;
  background-color:  #ababab;
  display: inline-block;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
}

.tab a:hover {
  background-color: #868585;
}

.tab a.active {
  background-color: #868585;
}

.thumbnail {
  width: 300px;
  height: 225px; /* Hauteur déterminée en fonction du ratio souhaité (4:3) */
  display: inline-block;
  margin: 10px;
  position: relative;
  overflow: hidden;
}
.thumbnail_print_kelfoncier {
  /*width: 800px;
  height: 1200px;  Hauteur déterminée en fonction du ratio souhaité (4:3) */
  max-width: 95vw; /* Pas plus large que la largeur de la fenêtre */
  max-height: 95vh; /* Pas plus haute que la hauteur de la fenêtre */
  object-fit: contain; /* Adapte l'image tout en conservant ses proportions */
  page-break-inside: avoid !important;
  display: inline-block;
  margin: 10px;
  position: relative;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  page-break-inside: avoid !important;
  transform: translate(-50%, -50%);
  max-width: 100%;
  height: auto;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#image-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999; /* Au-dessus de TOUT (maps, modals, etc.) */
    
    /* Centrage avec flexbox (plus fiable) */
    display: none;
    justify-content: center;
    align-items: center;
}

#image-container img {
    max-width: 80%;
    max-height: 85%;
    object-fit: contain;
    /* Plus besoin de position absolute ni de transform pour centrer */
}
.image-label {/* texte au dessus de l'image */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(0, 0, 0);
  color: white;
  padding: 2px 5px;
  font-size: 12px;
  border-radius: 3px;
  z-index: 0;
}

.delete-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgb(255, 40, 40);
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 5px
}

#misc_gallery {
  margin-top: 20px;
}

.thumbnail-misc {
  width: 85px;
  height: 120px;
  display: flex;
  flex-wrap: wrap;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
}

.thumbnail-misc img {
  width: 60px;
  height: 60px;
  margin-bottom: 5px;
}

.filename {
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.delete-button-misc {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  background-color: #ff0000;
  padding: 2px 4px;
  border-radius: 50%;
}
/* ouvre image dans nouvelle fenetre */
.open-button {
  position: absolute;
  top: 5px;
  left: 5px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 5px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.6);  /* arrière-plan semi-transparent */
  border-radius: 3px;  /* coins arrondis */
}

/* --- Gallery: image par défaut --- */
.default-button{
  position:absolute;
  top: 5px;
  left: 45px;              /* à côté du bouton "open" */
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align:center;
  font-weight:bold;
  cursor:pointer;
  user-select:none;
  z-index: 6;
  background-color: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 50%;
}

/* Contour vert si c'est l'image par défaut */
.thumbnail.default-selected{
  outline: 3px solid #2ecc71;
  outline-offset: 2px;
}

/* Ajout d'un curseur pointeur pour indiquer que l'image est cliquable */
 .icone-impression {
  cursor: pointer;
}

#spinner { /* image d'attente de chargement */
  width: 100px;  /* Largeur de l'image */
  height: 100px; /* Hauteur de l'image */
}

.overlay { /* text d'attente à côté de l'image de chargement */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em; /* Taille du texte */
  color: white; /* Couleur du texte */
}

.phone-container {
  position: relative;
}

.tooltip {
  display: none;
  position: absolute;
  bottom: 120%; /* se positionne au-dessus de la cellule */
  left: 50%; /* centre le tooltip par rapport à la cellule */
  transform: translateX(-50%); /* ajuste le centrage */
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: larger;
  z-index: 1;
  width: 8cm; 
  white-space: nowrap; /* empêche le texte de passer à la ligne */
}

.phone-container:hover .tooltip {
  display: block;
}

.icon-container {
  position: relative;
  display: inline-block;
}
.tooltip_icone {
  display: none;
  position: fixed;  /* Position fixée par rapport à la fenêtre du navigateur */
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000;  /* Haute valeur pour s'assurer qu'il est au-dessus des autres éléments */
  white-space: normal;
  max-width: calc(100vw - 20px);
}

.legende {
  position: relative;
  display: inline-block;
}

.legende .tooltiptext {
  visibility: hidden;
  width: 1400px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 5px;

  /* Positionnement */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  line-height:2; /* Augmente l'espacement entre les lignes */
}

.legende:hover .tooltiptext {
  visibility: visible;
  
}
/* Style pour les images dans l'infobulle */
.legende .tooltiptext #icon {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

  /* Style pour les images dans l'infobulle */
.legende .tooltiptext #bouton {
  vertical-align: middle;
  height: 25px;
}
  
.legende .tooltiptext br {
  margin-bottom: 5px; /* Ajoute un espace en dessous de chaque  */
}

@media print {
  .do_not_cut {
    page-break-inside: avoid;
  }
}
@media print {
  .next_page {
    page-break-before: always;
  }
}
@media print {
  .no_print {
    display: none;
  }
}
@media print {
  img {
    max-width: 95vw; /* Pas plus large que la largeur de la fenêtre */
    max-height: 90vh; /* Pas plus haute que la hauteur de la fenêtre */
    page-break-inside: avoid !important; /* Évite de couper l'image entre deux pages */
  }
}
/* supprime les bords des tableaux  */
table.no-border, .no-border td, .no-border th {
  border: none;
}

/* suggestion d'adresse  */
/* Positionnez votre champ d'entrée et le conteneur de suggestions dans un conteneur relatif pour un alignement facile */
.form-container {
  position: relative;
  width: fit-content; /* Ajuste la largeur du conteneur à son contenu (le champ d'entrée) */
}

/* Style du champ d'entrée */
#adresseInput {
  width: 300px; /* Ou toute autre largeur désirée */
  /* Autres styles pour le champ d'entrée si nécessaire */
}

/* Style du conteneur de suggestions */
.suggestions-dropdown {
  display: none; /* Masqué par défaut */
  position: absolute; /* Positionnement relatif au conteneur */
  top: 100%; /* Positionné juste en dessous du champ d'entrée */
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1000; /* S'assure que le dropdown est au-dessus des autres éléments */
  max-height: 200px;
  overflow-y: auto; /* Permet le défilement si trop d'options */
  box-sizing: border-box;
}

.suggestions-dropdown div {
  padding: 10px;
  cursor: pointer;
  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  text-align: left;
  color: #333; /* Couleur du texte */
  background-color: #fff; /* Couleur de fond des suggestions */
}

.suggestions-dropdown div:hover {
  background-color: #f2f2f2; /* Couleur de fond au survol */
}

/* TOGGLE BUTTON */
/* Style de base du switch - le boîtier */
.switch {
  position: relative;
  display: inline-block;
  width: 20px; /* Largeur réduite */
  height: 10px; /* Hauteur ajustée pour maintenir la proportion */
}

/* Cache l'input */
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style du slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 10px; /* Ajouté pour les coins arrondis */
}

.slider:before {
  position: absolute;
  content: "";
  height: 8px; /* Hauteur réduite pour le curseur */
  width: 8px; /* Largeur réduite pour le curseur */
  left: 1px; /* Position ajustée pour le curseur */
  bottom: 1px; /* Position ajustée pour le curseur */
  background-color: white;
  transition: .4s;
  border-radius: 50%; /* Pour que le curseur soit circulaire */
}

input:checked + .slider {
  background-color: #8BC34A;
}

input:checked + .slider:before {
  transform: translateX(10px); /* Déplacement ajusté pour la largeur réduite */
}

/* Sidebar */
#triggerSidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 5px; /* Largeur sensible pour déclencher la sidebar */
  height: 100%;
  z-index: 1001; /* S'assure que le déclencheur est accessible */
}

#sidebarContent {
  position: fixed;
  left: -300px; /* Démarre hors de l'écran */
  top: 0;
  width: 300px;
  background-color: #f1f1f1;
  height: 100%;
  transition: left 0.5s; /* Animation douce */
  padding: 20px;
  box-sizing: border-box;
  z-index: 1000;
  overflow-y: auto; /* Ajout pour rendre la partie verticale scrollable */
}

/* Modifiez cette partie pour garder la sidebar ouverte lors du survol de la sidebar elle-même */
#triggerSidebar:hover + #sidebarContent,
#sidebarContent:hover {
  left: 0; /* Affiche la sidebar au survol */
}

#listeProprietaires li, #listeAdresses li {
  list-style-type: none; /* Supprime les puces */
  margin-bottom: 2px; /* Espacement entre les éléments */
}

#sidebarContent h2 {
  margin-bottom: 3px;
  font-size: 14px; /* Taille de la police pour les titres */
}

#sidebarContent ul li {
  font-size: 14px; /* Taille de la police pour les éléments de liste */
}
#sidebarContent ul li::before {
  content: "- "; /* Ajoute un tiret et un espace avant le texte de l'élément de liste */
}

#logViewer {
  width: 800px; /* Largeur correspondant approximativement à 100 cols */
  height: 300px; /* Hauteur correspondant approximativement à 30 rows */
  overflow: auto; /* Active le défilement si le contenu déborde */
  font-family: monospace; /* Pour simuler l'apparence d'un textarea */
  white-space: pre-wrap; /* Conserve le formatage du texte brut, y compris les espaces et les retours à la ligne */
  word-wrap: break-word; /* Assure que les longs mots ne débordent pas */
  border: 1px solid #ccc; /* Bordure similaire à celle d'un textarea */
  padding: 5px; /* Un peu de padding pour le contenu */
  background-color: #f8f8f8; /* Couleur de fond similaire à celle d'un textarea */
  line-height: 80%; /* supprime l'interligne supplémentaire */
  text-align: left;
}

#div_etapes {
  text-align: left;
  width: auto; /* Ou toute autre largeur */
  height: 360px; /* Ou toute autre hauteur */
  overflow: auto; /* Active le défilement si le contenu dépasse */
  white-space: pre-wrap; /* Conserve les espaces et les retours à la ligne, casse les lignes longues */
  font-family: sans-serif; /* Style de police */
  font-size: 14px; /* Taille de police */
  padding: 8px; /* Espacement intérieur pour le texte */
  border: 0px solid #ccc; /* Bordure du div */
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre optionnelle pour un effet de profondeur */
  background-color: #f9f9f9; /* Couleur de fond */
}

/* FULL SCREEN POUR carte leaflet + carte 3d */
.fullscreen-icon {
	background-image: url('immo_img/fullscreen.png');
	background-size: 26px 26px;
}

.fullscreen-icon.leaflet-fullscreen-on {
  background-image: url('immo_img/exit-fullscreen.png');
  background-size: 15px 15px;
	background-position: 0 -26px;
}

.fullscreen-icon.google-fullscreen-on {
  background-image: url('immo_img/exit-fullscreen.png');
  background-size: 26px 26px;
  background-color: #ffffff; /* Couleur de fond */
}

.leaflet-touch .fullscreen-icon {
	background-position: 2px 2px;
}

.leaflet-touch .fullscreen-icon.leaflet-fullscreen-on {
	background-position: 7px 7px;
}

/* GEOLOCALISATION carte leaflet */
.leaflet-control-locate a{cursor:pointer}
.leaflet-control-locate a .leaflet-control-locate-location-arrow{display:inline-block;width:16px;height:16px;margin:7px;background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>')}
.leaflet-control-locate a .leaflet-control-locate-spinner{display:inline-block;width:16px;height:16px;margin:7px;background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M304 48a48 48 0 1 1-96 0 48 48 0 0 1 96 0zm-48 368a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm208-208a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM96 256a48 48 0 1 0-96 0 48 48 0 0 0 96 0zm13 99a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm294 0a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM109 61a48 48 0 1 0 0 96 48 48 0 0 0 0-96z"/></svg>');animation:leaflet-control-locate-spin 2s linear infinite}
.leaflet-control-locate.active a .leaflet-control-locate-location-arrow{background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgb(32, 116, 182)" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>')}
.leaflet-control-locate.following a .leaflet-control-locate-location-arrow{background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgb(252, 132, 40)" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>')}
.leaflet-touch .leaflet-bar .leaflet-locate-text-active{width:100%;max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 10px}
.leaflet-touch .leaflet-bar .leaflet-locate-text-active .leaflet-locate-icon{padding:0 5px 0 0}
.leaflet-control-locate-location circle{animation:leaflet-control-locate-throb 4s ease infinite}
@keyframes leaflet-control-locate-throb{0%{stroke-width:1}50%{stroke-width:3;transform:scale(0.8, 0.8)}100%{stroke-width:1}}@keyframes leaflet-control-locate-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
/*# sourceMappingURL=L.Control.Locate.min.css.map */

/* boutton mutation sur la carte leaflet*/
.leaflet-control-mutation {
  background-image: url('immo_img/mutation_leaflet.png'); /* Chemin vers votre icône de mutation */
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  width: 34px;
  height: 34px;
  display: block;
}

.leaflet-control-zoning {
  background-image: url('immo_img/zonage.png'); 
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
  width: 34px;
  height: 34px;
  display: block;
  
}

#statusIndicator {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red; /* Par défaut, rouge (non connecté) */
  cursor: pointer;
  margin-left: 10px;
}

/* Vert si connecté */
.connected {
  background-color: green !important;
}

#connectionIcon {
  display: inline-block;
  margin-left: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

/* Tableau Fixes + variable*/
.table-wrapper {
  display: flex;
  width: 100%;
  overflow: hidden; /* Empêche les débordements externes */
}

.table-fixed-part {
  display: table;
  table-layout: fixed; /* Garde les cellules dans une largeur fixe */
  width: auto; /* Ajusté à la largeur de son contenu */
  white-space: nowrap; /* Empêche le retour à la ligne */
  border-collapse: collapse;
}

.table-scrollable-part {
  display: block; /* Permet le défilement */
  width: 100%;
  overflow-x: auto; /* Active le défilement horizontal */
  border-collapse: collapse;
}

.table-scrollable-part-inner {
  display: table;
  width: 100%;
  table-layout: fixed; /* Les colonnes du tableau scrollable restent alignées */
  white-space: nowrap; /* Empêche le retour à la ligne */
  border-collapse: collapse;
}

.table-fixed-part thead th,
.table-scrollable-part thead th {
  text-align: center;
  height: 120px;
  white-space: nowrap; /* Empêche les en-têtes de retourner à la ligne */
}

.table-fixed-part tbody td,
.table-scrollable-part tbody td {
  /* height: 80px;  // SUPPRIME ou COMENTE */
  min-height: 80px; /* si tu veux une hauteur minimale (optionnel) */
  white-space: nowrap; /* Empêche les cellules de retourner à la ligne */
  vertical-align: middle; /* Aligne verticalement */
}

.table-scrollable-part {
  cursor: grab; /* Pointeur par défaut pour indiquer que l'on peut glisser */
}

.table-scrollable-part:active {
  cursor: grabbing; /* Pointeur lorsque vous cliquez et maintenez */
}

/* Pour toutes les lignes paires : fond gris clair */
#Tabulation_1 tbody tr:nth-child(even),
#Tabulation_2 tbody tr:nth-child(even) {
  background: #f7f7f7;
}

/* Pour les lignes impaires : fond blanc (optionnel mais pour la lisibilité) */
#Tabulation_1 tbody tr:nth-child(odd),
#Tabulation_2 tbody tr:nth-child(odd) {
  background: #fff;
}

#Tabulation_1 tbody tr:hover,
#Tabulation_2 tbody tr:hover {
  background: #e0e0e0;
}

/* Fin de Tableau Fixes + variable*/

/* bouton du haut */
.toolbar-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.toolbar-container form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.toolbar-container button,
.toolbar-container .btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  margin: 0;
  padding: 4px 8px;
  height: 24px;
  line-height: 16px;
  font-size: 12px;
  cursor: pointer;
  box-sizing: border-box;
  vertical-align: middle;
}
.toolbar-container img,
.toolbar-container input[type="image"] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  margin: 0;
  padding: 0;
}
.toolbar-container a {
  display: inline-flex;
  align-items: center;
  height: 24px;
}
.toolbar-container .separator {
  margin: 0 6px;
  color: #666;
  font-weight: bold;
  font-size: 12px;
}
.toolbar-container .map-multi-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Style spécifique pour les boutons map-multi-toolbar */
.toolbar-container .map-multi-toolbar button {
  background: transparent;
  color: black;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  height: 24px;
  width: 24px;
}