/* ============================= */
/* Table principale */
.table-surveillance {
    border-collapse: collapse;
    width: auto;             /* s'adapte au contenu */
    table-layout: auto;      /* largeur des colonnes automatique */
}

.table-surveillance td {
    border: 1px solid #ccc;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;     /* garde ton effet nowrap */
    padding: 0.3rem 0.6rem;
}

.table-surveillance button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.table-surveillance img {
    display: block;
    object-fit: contain;     /* images non déformées */
    padding: 0;
    margin: 0;
}

/* ============================= */
/* Conteneur de la table */
#LesAdressesListe {
    display: inline-block;   /* largeur s'adapte à la table */
    width: auto;
    overflow-x: auto;        /* scroll horizontal si nécessaire */
    box-sizing: border-box;
}

/* ============================= */
/* Table dans le conteneur */
#LesAdressesListe table {
    width: auto;             /* s'adapte au contenu */
    max-width: 100%;
    border-collapse: collapse;
    table-layout: auto;      /* colonnes automatiques */
}

/* ============================= */
/* TD pour gérer texte/images */
#LesAdressesListe td {
    white-space: nowrap;     /* conserve ton effet nowrap */
    text-overflow: clip;     /* pas de "..." */
    overflow: visible;       /* rien ne tronque */
}


button.demo { padding:.6rem 1rem; border-radius:8px; border:none; background:#0b69ff; color:white; font-weight:600; cursor:pointer; }
#mire {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 10002;   /* Mire au-dessus */
  display: none;
}

#validerV {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 10001;   /* Valider en dessous */
  display: none;
}

#logmobile {
    display: none;
    white-space: pre-wrap;
    font-family: monospace;
    background: #111;
    color: #0f0;
    padding: 10px;
    max-height: 200px;
    width: 300px;
    overflow-y: auto;   /* auto = scroll seulement si nécessaire */
    overflow-x: hidden; /* évite la barre horizontale */
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 99999;
    border: 1px solid #0f0;
}




#AlerteBis {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    /* on empile les enfants verticalement */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* espace entre les éléments */
}


/* texte au-dessus */
#bistxt {
    color: white;
    font-size: 18px;
    font-weight: bold;
    background: transparent;
    white-space: nowrap;
    pointer-events: none;
}

/* bloc de saisie */
#bissai {
    display: block; /* affiché par défaut */
    width: 160px;
}

#bissai input {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: white;
    color: black;
    font-size: 14px;
}

label { display:block; margin-top:.5rem; font-size:.9rem; }
input, select { width:100%; padding:.3rem; box-sizing:border-box; }
button { margin-top:.7rem; padding:.4rem .8rem; cursor:pointer; width:100%; }
button:disabled { opacity:0.6; cursor:not-allowed; }
#zoom { font-size:1.2rem; text-align:center; border-radius:50%; width:40px; height:40px; padding:0; display:flex; align-items:center; justify-content:center; }
.alerte-btn {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: red;
color: white;
width: 120px;
height: 120px;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
text-transform: uppercase; 
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}


  #waitOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6); /* léger voile */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8888; /* toujours au-dessus */
  }
  #waitOverlay img {
    width: 64px; /* taille du gif */
    height: 64px;
  }
  #formulaireSurveillance {
    position: fixed;        /* fixé par rapport à la fenêtre */
    top: 50%;               /* 50% depuis le haut */
    left: 50%;              /* 50% depuis la gauche */
    transform: translate(-50%, -50%); /* centrage parfait */
    background: white;      /* fond blanc */
    padding: 20px;          /* un peu d’espace */
    border-radius: 10px;    /* angles arrondis */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* ombre légère */
    display: none;          /* masqué par défaut */
    z-index: 1000;          /* au-dessus de tout */
    max-height: 80vh;       /* limite hauteur */
    overflow-y: auto;       /* scroll si trop d’éléments */
}
#listeSurveillances div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 4px;
}

#listeSurveillances span {
    flex: 1;
    word-break: break-word; /* pour éviter que l'adresse déborde */
}

#listeSurveillances button {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
}
#formIdent {
  display: none;           /* caché par défaut */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 2rem;
  z-index: 2000;
  width: 300px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  pointer-events: auto;    /* capte les clics */
}
#map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* pas besoin de z-index ici si tu as déjà un autre 0 */
}
#exportMsg {
    margin-top:0.5rem;
    font-size:0.65rem;
    color:green;
}.fondBtn {
    cursor: pointer;
    outline: none;
    transition: border 0.2s;
}
.fondBtn.active {
    border: 2px solid #0078D4;
}
#formulaire .box .buttons-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* empêche toute ligne blanche / scroll indésirable */
}


#formulaire { position:absolute; top:10px; left:10px; z-index:1000; }
#formulaire .box { width:260px; padding:1rem; border:1px solid #999; border-radius:8px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.2); font-family: system-ui, sans-serif; }
#formIdent {
  display: none;           /* caché par défaut */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 2rem;
  z-index: 2000;
  width: 300px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  pointer-events: auto;    /* capte les clics */
}

/* Quand le modal est ouvert, on bloque la carte */
#exportMsg {
    margin-top:0.5rem;
    font-size:0.65rem;
    color:green;
}.fondBtn {
    cursor: pointer;
    outline: none;
    transition: border 0.2s;
}
.fondBtn.active {
    border: 2px solid #0078D4;
}
#formulaire .box .buttons-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
#formulaire { position:absolute; top:10px; left:10px; z-index:1000; }
#formulaire .box { width:260px; padding:1rem; border:1px solid #999; border-radius:8px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.2); font-family: system-ui, sans-serif; }
label { display:block; margin-top:.5rem; font-size:.9rem; }
input, select { width:100%; padding:.3rem; box-sizing:border-box; }
button { margin-top:.7rem; padding:.4rem .8rem; cursor:pointer; width:100%; }
button:disabled { opacity:0.6; cursor:not-allowed; }
#zoom { font-size:1.2rem; text-align:center; border-radius:50%; width:40px; height:40px; padding:0; display:flex; align-items:center; justify-content:center; }