*,a,
::before,
::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          text-decoration: none; color: inherit;
         }


         .tooltip {
          position: relative; /* Permet de positionner l'info-bulle par rapport à cet élément */
          display: inline-block;
          cursor: pointer; /* Ajoute un curseur pointer pour indiquer que c'est cliquable */
        }
        
        .tooltip .tooltiptext {
          visibility: hidden; /* L'info-bulle est cachée par défaut */
          width: 200px; /* Taille de l'info-bulle */
          background-color: rgb(242, 248, 43); /* Couleur de fond de l'info-bulle */
          color: rgb(24, 24, 35); /* Couleur du texte */
          text-align: center; /* Centrer le texte */
          padding: 5px; /* Un peu de padding pour espacer le texte des bords */
          position: absolute; /* Permet de positionner l'info-bulle par rapport au parent */
          bottom: 125%; /* Positionner l'info-bulle au-dessus de l'élément */
          left: 50%; /* Centrer l'info-bulle horizontalement */
          margin-left: -60px; /* Décalage pour centrer parfaitement (largeur de 120px / 2) */
          opacity: 0; /* Rendre l'info-bulle invisible */
          transition: opacity 0.3s; /* Ajouter une transition douce */
        }
        
        .tooltip:hover .tooltiptext {
          visibility: visible; /* Afficher l'info-bulle lorsque l'élément est survolé */
          opacity: 1; /* Rendre l'info-bulle opaque au survol */
        }
        





body {background: rgb(3, 33, 3);
     
      font-family: Montserrat, Helvetica, sans-serif;
     }

#bgtaxi {width: 100%;
          height: 200px; 
          background-image: url(images/IMG_2942.jpeg);
          background-position: center;
          background-size: cover;         
          background-repeat: no-repeat;
         }

#logotaxiMiguel {min-width: 260px; 
                 width: 500px;
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);                
                 color: #c4cad3;
                }

#logotaxiMiguel > img {margin-bottom: 10px;
                       padding-bottom: 15px;
                       border-bottom: 1px solid #fafafa55;
                      }

.nowrap {white-space: nowrap;}

p {padding-bottom: 5px;
   font-weight: lighter; color: white;}

#contact {display: flex;
          flex-direction: column;}

#contact > a {background-color: #DDD06A;
                   padding: 5px;
                   color: #142635;
                  font-weight: lighter; text-align: center; }



#carte {text-align: center;
        margin-top: 20px;}

#carte i:nth-child(5) {margin-top: 20px; display: block; background: #0854136a; border-radius: 5px;} 

#carte i:nth-child(5):hover {background-color: #DDD06A;}

#carte > a {margin-top: 20px; 
            display: block;
           } 

.cb {display: flex; 
     align-items: center; 
     font-style: normal;
     font-weight: lighter;
     color: white;
     justify-content: flex-start;
     margin-top: 10px;
    }

.cb img {margin-right: 10px;}

/* -----mention legales -------*/

#lesinfostaxi {width: 500px;
     height: auto;
     margin-inline: auto;
     background-color: rgba(29, 96, 19, 0.937);
     text-align: center;
     line-height: 25px;
    }
#lesinfostaxi > img {width: 100%;}
#lesinfostaxi img {padding: 20px;}


@media (max-width: 600px) {
  
#logotaxiMiguel {width: 100%;
                 position: inherit;
                 transform: none;
                 text-align: center;
                 margin-top: 20px;
               }


#carte i {font-size: clamp(15px, 2vw,24px); padding-left: 15px;;}
#contact {text-align: center;}

#bgtaxi {width: 100%;
         height: 200px; 
         background-image: url(images/IMG_2942.jpeg);
         background-position: center;
         background-size: cover;         
         background-repeat: no-repeat;
        }

/* -----mention legales -------*/

#lesinfostaxi {width: 100%;}

}