/* body{
    background-color: aqua;
} */
.header{
display: flex;

background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 10px;

width: 100%;
height: 40px;
justify-content: space-between;
}

#aide{
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

#aide:hover {
  color: #fff;
}

.mdiv {
    display: flex;
    margin :20px;
    background-color: aliceblue;


}

 .mselct{   
    border: 1px thin;
    border-color: navy;
    margin: 20px;
    justify-content: center; 
    align-items: center;
} 

#inputCommune{
    width: 20%;
}
#dcarte{
    margin: 10px;
    background-color: white;
    border: 1px solid;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#zoneCarte {
    display: block;
    width: 50%;
    
}
#map{
    width: 100%;
    height: 400px;
    border-radius: 10px;
    margin: auto;
}

#divButtonVal1{
    /* //background-color: darkgray; */
    justify-content: center; 
    align-items: center;
    padding: 25px;

}



.divtabls2{
    
    margin-left: 10px;
    

}
.divtabls{
    display: flex;
    margin :20px;
    background-color: aliceblue;
    
    justify-content: space-around; 
    padding: 10px;
    /*align-items: center;*/
   
}

.divtabls3{
    display: flex;
    margin: auto;
    justify-content: space-evenly;
    align-items: baseline;
    

}
.divtabls3 div{

    padding: 20px;
    width: 20%;

    
  
}
/* #dsommeha{ */
    /* display: flex;
} */ 
#isommeha{

    background-color: lightgray;
    
    
    
}

/* #dscherche2{
    width: 70%;
} */
#divListPar{
     width: 40%;
    


}
 

#Actions{
   /* display: block;*/

   width: 10%;
   margin: 10px;   
  
   
}
#divAjouterPar{
    margin-top: 9%;
} 
    
#divListParRet{
    width: 50%;
    
}
.divbutton {
    padding: 20px;
}

#zonesBouttonsCartes{
    display: flex;
    /* margin: 15px;
    padding: 15px; */
}

.zBtnCartes{
    margin:5px;
}

/* srce chatgpt */
footer {
  background-color: #222;
  color: #ccc;
  padding: 20px 0;
  font-size: 14px;
}

.footer-flex {
  display: flex;
  flex-direction: column; /* vertical par défaut */
  align-items: center;
  text-align: center;
  gap: 5px; /* espace entre les p */
}

.footer-flex p {
  margin: 0;
  display: flex;
  gap: 8px; /* espace entre les éléments dans un p */
  justify-content: center;
}

.footer-flex a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-flex a:hover {
  color: #fff;
}

/* Version écran large : alignement horizontal */
@media (min-width: 768px) {
  .footer-flex {
    flex-direction: row;
    justify-content: space-around;
  }
}


.table-responsive {
    
  max-height: 800px; /* Définir une hauteur maximale */
  max-width: 100%;
  overflow-y: auto; /* Activer le défilement vertical */
  overflow-x: auto; /* Active le défilement horizontal */
}

/* Pour le style du survol des th */
th {
    cursor: pointer;  /* Change le curseur pour indiquer que l'on peut cliquer */
    transition: all 0.3s ease;
}

/* Survol avec bordure */
th:hover {
    border: 2px solid navy;
    border-radius: 30%;
    color: navy;
}

/* Optionnel : change la couleur ou l'ombre des th au survol */
th:hover {
    background-color: #494848;
    color: blue;
}


th {
        cursor: pointer;
        position: relative;
        user-select: none;
     }
th.sort-asc::after {
        content: " ▲";
        position: absolute;
        right: 8px;
}
th.sort-desc::after {
        content: " ▼";
        position: absolute;
        right: 8px;
}