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


body {background-color: hsl(0, 0%, 14%);
      font-family: Montserrat, Helvetica, sans-serif;
     }

#bgtaxi {width: 100%;
          height: 200px; 
          margin-top: 5px;
          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;
     
     }

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: normal; text-align: center; }



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


        .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: black; /* 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 */
          }


#carte i:nth-child(5) {margin-top: 20px; display: block; background: #0000006a; 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(2, 10, 26, 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;
        }

#lesinfostaxi {width: 100%;}

}