/*================================*/
/*          CLEMMAPS STYLE        */
/*================================*/


*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{

font-family:"Roboto",sans-serif;

background:#202124;

color:white;

overflow:hidden;

}



/*================================*/
/*              CARTE             */
/*================================*/

#notificationsContainer{

position:absolute;
right:20px;
bottom:20px;

display:flex;
flex-direction:column-reverse;
gap:10px;

z-index:999999;

max-width:350px;

pointer-events:none;

}


.notification{

background:#303134;
color:white;

padding:15px;

border-radius:25px;

font-family:Roboto,sans-serif;

box-shadow:
0 0 20px rgba(0,0,0,.4);

animation:
notificationAnimation .4s;

}


@keyframes notificationAnimation{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0px);

}

}

#map{

position:absolute;

top:0;
left:0;

width:100vw;

height:100vh;

z-index:1;

}



/*================================*/
/*          MENU HAUT             */
/*================================*/


.searchBox{


position:absolute;

top:20px;

left:20px;

right:20px;


background:#303134;


padding:25px;


border-radius:28px;


z-index:9999;


box-shadow:

0 0 30px

rgba(0,0,0,.35);


}



.topBar{


display:flex;

justify-content:space-between;

align-items:center;


margin-bottom:20px;


}



.logoContainer{


display:flex;

align-items:center;

gap:15px;


}



#logo{


width:45px;

height:45px;

border-radius:50%;


}



.logoContainer h1{


font-size:32px;

font-weight:500;


}



/* bouton plein écran */


#fullscreenButton{


width:55px;

height:55px;


border:none;

border-radius:50%;


background:#202124;


color:white;


font-size:25px;


cursor:pointer;


}



/*================================*/
/*          RECHERCHE             */
/*================================*/


#destination{


width:100%;


padding:18px;


border:none;


outline:none;


border-radius:20px;


background:#202124;


color:white;


font-size:18px;


}



#destination::placeholder{


color:#BDC1C6;


}




#searchButton{


width:100%;


margin-top:15px;


padding:18px;


border:none;


border-radius:20px;


background:#8AB4F8;


color:#202124;


font-size:18px;


font-weight:bold;


cursor:pointer;


}



/*================================*/
/*       BOUTONS DROITE           */
/*================================*/


.rightButtons{


position:absolute;


right:20px;


top:250px;


display:flex;

flex-direction:column;

gap:15px;


z-index:9999;


}




.rightButtons button{


width:60px;

height:60px;


border:none;


border-radius:50%;


background:#303134;


color:white;


font-size:26px;


cursor:pointer;


box-shadow:

0 0 20px

rgba(0,0,0,.35);


}





.rightButtons button:hover{


background:#3c4043;


}





/*================================*/
/*          MENU BAS              */
/*================================*/


.bottomMenu{


position:absolute;


bottom:0;


left:0;

right:0;


background:#303134;


padding:25px;


border-radius:

35px 35px 0 0;


z-index:9999;


box-shadow:

0 -5px 30px

rgba(0,0,0,.4);


}



.bottomMenu h2{


font-size:26px;

font-weight:500;

margin-bottom:20px;


}





.cardsContainer{


display:flex;


gap:15px;


overflow-x:auto;


}




.cardsContainer::-webkit-scrollbar{


display:none;


}




.cardsContainer button{


min-width:200px;


padding:18px;


border:none;


border-radius:20px;


background:#202124;


color:white;


font-size:17px;


cursor:pointer;


text-align:left;


}





.cardsContainer button:hover{


background:#3c4043;


}





/*================================*/
/*          ROUTE MENU             */
/*================================*/


#routeMenu{


display:none;


position:absolute;


bottom:0;


left:0;

right:0;


background:#303134;


padding:25px;


border-radius:

35px 35px 0 0;


z-index:99999;


box-shadow:

0 -5px 30px

rgba(0,0,0,.4);


}




#routeMenu h2{


font-size:30px;

font-weight:500;


}





#routeMenu p{


margin-top:12px;


font-size:18px;


color:#BDC1C6;


}





#routeMenu button{


margin-top:25px;


width:100%;


padding:18px;


border:none;


border-radius:20px;


background:#EA4335;


color:white;


font-size:18px;


font-weight:bold;


}





/*================================*/
/*           GPS                  */
/*================================*/


.speedContainer{


position:absolute;


right:20px;


bottom:350px;


background:#303134;


padding:20px;


border-radius:25px;


z-index:9999;


display:none;


box-shadow:

0 0 25px

rgba(0,0,0,.4);


}




.speedContainer h2{


font-size:30px;


}




.speedLimit{


margin-top:10px;


width:60px;

height:60px;


border-radius:50%;


background:white;


color:black;


display:flex;


justify-content:center;


align-items:center;


font-size:25px;


font-weight:bold;


}





/*================================*/
/*          ANIMATIONS             */
/*================================*/


button{


transition:.25s;


}



button:active{


transform:scale(.95);


}



.searchBox{


animation:open .4s;


}



.bottomMenu{


animation:up .4s;


}



@keyframes open{


from{


opacity:0;

transform:translateY(-30px);


}


to{


opacity:1;

transform:translateY(0);


}


}



@keyframes up{


from{


opacity:0;

transform:translateY(50px);


}


to{


opacity:1;

transform:translateY(0);


}


}





/*================================*/
/*          MOBILE                */
/*================================*/


@media(max-width:700px){



.logoContainer h1{


font-size:25px;


}



.searchBox{


top:15px;

left:15px;

right:15px;


}



.bottomMenu{


padding:20px;


}



}