*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

/*____________________________________ TEL ___________________________________*/
/*___________________________________________________________________________*/




/*============= Navbar ===============*/
header{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    position: relative;
}

nav{
    display: flex;
    align-items: center;
    width: 100%;
}

.menu{
    width: 100%;
    font-size: 0.1px;
    display: flex;
    justify-content: flex-end;
}

.logo{
    display: flex;
    justify-content: center;
}

.texte-pc{
    display: none;
}

.menu .icone-tel{
    position: relative;
    opacity: 100%;
    margin-right: 10px;
}

.icone-taille{
    height: 22px;
}

.utilisateur-taille{
    height: 36px;
    margin: 10px;
}

.bdhess-taille{
    height: 26px;
    margin-left: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.parking-taille{
    height: 52px;
}

#active{
}

#logo-taille{
    height: 42px;
}

.rubrique{
    display: flex;
    align-items: center;
}

.utilisateur{
    font-size: 0.1px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/*============= body ===============*/

body{
    width: 100%;
    height: 450px;
}

.fond1{
    width: 100%;
    height: 550px;
    object-fit: cover;
    position: absolute;
}

.espace{
    width: 100%;
    height: 550px;
}

.bloc1{
    display: flex;
    background-color: rgb(255, 255, 255);
    height: 450px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.bloc1-tel{
    display: block;
    display: none;
}

.bloc1 .presentation{
    display: flex;
    height: 205px;
    align-items: center;
    flex-direction: column;
    width: 80%;
    background-color: rgb(230, 230, 230);
    padding: 25px;
    border-radius: 10px;
    justify-content: space-around;
}

.bloc1-tel .presentation{
    display: block;
    display: none;
}

.bloc1 .presentation .titre{
    font-size: 35px;
    text-align: center;
}

.bloc1 .presentation .texte{
    font-size: 14px;
    text-align: center;
}

.bloc1-tel .presentation .titre{
    display: block;
    display: none;
}

.bloc1-tel .presentation .texte{
    display: block;
    display: none;
}

.buttons-tel{
    display: block;
    display: none;
}

.buttons-pc{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: 13px;
    margin: 15px;
    padding: 10px;
    width: 35%;
    font-size: 15px;
    border-radius: 50px;
    color: white;
    background-color: #088395;
    transition-duration: 0.2s;
}

.buttons-pc:hover{
    background-color: #076776;
}

.buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: 13px;
    margin: 15px;
    padding: 5px;
    width: 35%;
    border-radius: 50px;
    color: white;
    background-color: #088395;
    border: none;
    transition-duration: 0.2s;
}

.buttons:hover{
    background-color: #076776;
}

.bloc2 {
    display: flex;
    width: 100%;
    height: 640px;
    align-items: center;
    justify-content: center;
    background-color: rgb(230, 230, 230);
}

.bloc2 form{
    display: flex;
    width: 92%;
    height: 600px;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    align-items: center;
    justify-content: space-evenly;
    border-radius: 20px;
}

.buttons-trajet{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 15px;
    margin: 17px;
    padding: 13px;
    width: 125px;
    border-radius: 8px;
    background-color: #088395;
    border: none;
    transition-duration: 0.2s;
}

.buttons-trajet:hover{
    background-color: #076776;
}

.bloc2 form .text{
    font-size: 14px;
}

.bloc2 form .bold{
    font-weight: bold;
}

.bloc2 form input{
    width: 75%;
}

.bloc2 form select{
    width: 75%;
}

.bloc2 form div{
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.bloc2 .illustration{
    display: none;
}

.index-galerie{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    width: 85%;
}

.index-galerie .bloc{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 330px;
    height: 450px;
    padding: 20px;
    margin: 25px;
    border-radius: 20px;
    background-color: white;
}

.index-galerie .bloc img{
    height: 15%;
    margin-bottom: 25px;
}

.index-galerie .bloc h2{
    margin-bottom: 20px;
    font-size: 18px;
}

.index-galerie .bloc p{
    margin-bottom: 10px;
    font-size: 13px;
}

.espace-petit{
    height: 40px;
}

/*============= Connexion ===============*/

.page-connexion{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.page-connexion form{
    display: flex;
    flex-direction: column;
}

.connexion-page{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.forme-connexion{
    display: flex;
    height: 150px;
    width: 85%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fond-autre{
    width: 100%;
    height: 60px;
    background: rgb(0,255,202);
    background: linear-gradient(90deg, rgba(0,255,202,1) 0%, rgba(8,131,149,1) 50%, rgba(10,77,104,1) 100%);
    position: absolute;
}

.connexion-page a{
    color: black;
    padding: 2px;
    font-size: 13px;
}

.souvenir-mdp input{
    margin: 10px;
}

.souvenir-mdp{
    font-size: 13px;
}

.forme-connexion p{
    margin-bottom: 15px;
}

.centrer-page{
    justify-content: center;
}

/*============= Inscription ===============*/

.suivi-inscription{
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.suivi-inscription img{
    width: 100%;
}

.inscription-page{
    display: flex;
    width: 100%;
    height: 60%;
    justify-content: center;
    flex-direction: column;
}

.buttons2{
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.centre-button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

input{
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
}

select{
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
}

#photo_profil{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius:100%;
    margin : 10px;
}

.bouton_form{
    padding: 8px 50px 8px 50px;
    background-color: #088395;
    color: white;
    border-radius: 40%;
    cursor: pointer;
}

.inscription-page a{
    color: black;
    padding: 2px;
    font-size: 13px;
}

.souvenir-mdp{
    display: flex;
    align-items: center;
    margin: 15px;
}

.souvenir-mdp input{
    margin: 10px;
}

.souvenir-mdp{
    font-size: 13px;
}

.centrer-page{
    display: flex;
    width: 100%;
    align-items: center;
    height: 70vh;
}

/*============= NavBar Compte ===============*/

.profil-deroulant{
    display: flex;
    height: auto;
    width: 100%;
    flex-direction: column;
}

.profil-deroulant a{
    text-decoration: none;
}

.liens-profil{
    display: flex;
    width: 100%;
    height: 60px;
    background-color: rgb(255, 255, 255);
    align-items: center;
}

.liens-profil div{
    display: flex;
    color: black;
}

.liens-profil .taille-fleche{
    display: flex;
    justify-content: flex-end;
    height: 25px;
}

.liens-profil div{
    display: flex;
    justify-content: flex-start;
    width: 95%;
    align-items: center;
}

.liens-profil div .img-picto{
    height: 30px;
    padding: 10px;
}

.lignes{
    width: 100%;
    height: 1px;
    background-color: black;
}

/*============= Footer ===============*/

.footer{
    display: flex;
    width: 100%;
    height: 270px;
    flex-direction: column;
    align-items: center;
}

.footer .gris{
    display: flex;
    width: 100%;
    height: 230px;
    flex-direction: column;
    background-color: rgb(230, 230, 230);
}

.gris .gras{
    height: 75px;
    display: flex;
    align-items: center;
    margin-left: 30px;
    font-size: 25px;
    font-weight: bold;
}

.gris .medium{
    height: 135px;
    display: flex;
    margin-left: 30px;
    font-size: 15px;
    flex-direction: column;
    justify-content: space-evenly;
}

.medium a{
    text-decoration: none;
    color: black;
}

.footer .blanc{
    display: flex;
    flex-direction: column;
    height: 75px;
    width: 100%;
    justify-content: flex-start;
}

.blanc a{
    margin-left: 30px;
    margin-top: 30px;
    font-size: 15px;
    color: rgb(100, 100, 100);
    text-decoration: none;
}

.footer .bas{
    display: flex;
    height: 50px;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}

.bas img{
    height: 25px;
    margin: 10px;
}

.bas p{
    font-size: 15px;
    color: rgb(100, 100, 100);
}

/*============= Contact ===============*/

.message-page{
    display: flex;
    width: 100%;
    height: 500px;
    flex-direction: column;
    justify-content: center;
}

.page-contact{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    height: 450px;
}

.page-contact input{
    width: 75%;
}

.page-contact div input{
    width: 42%;
}

.page-contact div{
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    width: 84%;
}

textarea{
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-width: 2px;
    width: 75%;
}

/*============= Condition ===============*/

.page-condition{
    padding: 10%;
}

/*============= NavBar Compte ===============*/

.sysk{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10%;
    font-size: 20px;
    text-align: center;
}

.sysk .buttons-trajet p{
    text-align: center;
    font-size: 15px;
}

/*============= Parking ===============*/

.centrer-galerie{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(230, 230, 230);
}

.centrer-galerie h1{
    font-size: 25px;
    font-weight: bold;
    margin: 25px;
}

.page-galerie{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    width: 85%;
}

.page-galerie .bloc{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    width: 330px;
    height: 400px;
    padding: 20px;
    margin: 25px;
    border-radius: 10px;
    background-color: white;
}

.page-galerie .bloc img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 15px;
}

/*============= Ajout ===============*/

.bloc-ajout {
    display: flex;
    width: 100%;
    height: 990px;
    align-items: center;
    justify-content: center;
    background-color: rgb(230, 230, 230);
}

.bloc-ajout form{
    display: flex;
    width: 92%;
    height: 950px;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    align-items: center;
    justify-content: space-evenly;
    border-radius: 20px;
}

.buttons-trajet{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 15px;
    margin: 17px;
    padding: 13px;
    width: 125px;
    border-radius: 8px;
    background-color: #088395;
}

.bloc-ajout form .text{
    font-size: 14px;
}

.bloc-ajout form .bold{
    font-weight: bold;
    margin: 35px;
}

.bloc-ajout form input{
    width: 75%;
}

.bloc-ajout form select{
    width: 75%;
}

.bloc-ajout form div{
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

/*============= Profil ===============*/

.page-center{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: rgb(230, 230, 230);
}

.page-profil{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 90%;
    background-color: white;
    padding: 30px;
    margin: 30px;
    border-radius: 25px;
}

.page-profil .bloc{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

.retour{
    margin: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.retour img{
    height: 30px;
    rotate: 180deg;
}

.page-profil .dessus{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.page-profil .bloc .debut{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.trait-noir{
    width: 75%;
    height: 1px;
    background-color: black;
    margin: 15px;
}

.utilisateur-profil{
    height: 105px;
}

.voiture-profil{
    height: 105px;
    border-radius: 15px;
}

.buttons-supr{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: 13px;
    margin: 15px;
    padding: 10px;
    width: 80%;
    border-radius: 50px;
    color: white;
    background-color: rgb(218, 11, 11);
    border: none;
    transition-duration: 0.2s;
    text-align: center;
    font-size: 11px;
}

.buttons-supr:hover{
    background-color: rgb(170, 11, 11);
}

.buttons-profil{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: 13px;
    margin: 15px;
    padding: 10px;
    width: 80%;
    border-radius: 50px;
    color: white;
    background-color: #088395;
    border: none;
    transition-duration: 0.2s;
    text-align: center;
    font-size: 11px;
}

.buttons-profil:hover{
    background-color: #076776;
}

.bloc4 {
    display: flex;
    width: 100%;
    height: 840px;
    align-items: center;
    justify-content: center;
    background-color: rgb(230, 230, 230);
}

.bloc4 form{
    display: flex;
    width: 92%;
    height: 800px;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    align-items: center;
    justify-content: space-evenly;
    border-radius: 20px;
}

.buttons-trajet:hover{
    background-color: #076776;
}

.bloc4 form .text{
    font-size: 14px;
}

.bloc4 form .bold{
    font-weight: bold;
    margin: 20px;
}

.bloc4 form input{
    width: 75%;
}

.bloc4 form select{
    width: 75%;
}

.bloc4 form div{
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.bloc4 .illustration{
    display: none;
}

/*============= Resultat_recherche ===============*/


.resultat-page{
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.resultat-page .bloc-resultat{
    display: flex;
    height: 320px;
    width: 100%;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    padding: 25px;
    border-radius: 15px;
    justify-content: space-between;
    margin: 10px;
    align-items: center;
}

.resultat-page .bloc-resultat .trajet{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.resultat-page .bloc-resultat .trajet div{
    height: 3px;
    width: 60%;
    background-color: black;
}

.resultat-page .bloc-resultat .trajet p{
    width: 20%;
    padding: 15px;
}

.resultat-page .bloc-resultat div {
    display: flex;
}

.resultat-page .bloc-resultat div p{
    display: flex;
    padding: 7px;
}

.resultat-page .bloc-resultat div .prenom-recherche{
    display: flex;
    flex-direction: column;
    margin-left: 5px;
}


.bloc-resultat .dessus{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.reservation-page{
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.reservation-page h1{
    margin: 20px;
    text-align: center;
}

.reservation-page .bloc-resultat{
    display: flex;
    height: 390px;
    width: 100%;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    padding: 25px;
    border-radius: 15px;
    justify-content: space-between;
    margin: 10px;
    align-items: center;
}

.reservation-page .bloc-resultat .trajet{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.reservation-page .bloc-resultat .trajet div{
    height: 3px;
    width: 60%;
    background-color: black;
}

.reservation-page .bloc-resultat .trajet p{
    width: 20%;
    padding: 15px;
}

.reservation-page .bloc-resultat div {
    display: flex;
}

.reservation-page .bloc-resultat div p{
    display: flex;
    padding: 7px;
}

.reservation-page .bloc-resultat div .prenom-recherche{
    display: flex;
    flex-direction: column;
    margin-left: 5px;
}


/*____________________________________ PC ___________________________________*/
/*___________________________________________________________________________*/

@media screen and (min-width:900px) {

    /*============= Navbar ===============*/
    
        .menu{
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }
        
        .menu .texte-pc{
            display: block;
            text-decoration: none;
            color: white;
            font-size: 15px;
            margin-right: 15px;
        }
    
        .utilisateur .texte-pc{
            display: block;
            text-decoration: none;
            color: white;
            font-size: 15px;
        }

        .espace{
            display: block;
            display: none;
        }
    
    
        .bloc2 form{
            width: 30%;
        }
    
        .bloc2 {
            justify-content: space-around;
        }
    
        .illustration{
            display: flex !important;
            width: 50%;
        }
    
        .illustration img{
            width: 100%;
        }

        .fond1{
            width: 100%;
            height: 550px;
            object-fit: cover;
            position: absolute;
        }

        .bloc1-tel{
            position: relative;
            display: flex;
            height: 500px;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            color: white;
        }
        
        .bloc1-tel .presentation{
            display: flex;
            height: 250px;
            align-items: flex-start;
            flex-direction: column;
            width: 30%;
            padding: 50px;
            justify-content: space-around;
            color: white;
        }
        
        .bloc1-tel .presentation .titre{
            display: block;
            font-size: 35px;
            text-align: center;
        }
        
        .bloc1-tel .presentation .texte{
            display: block;
            font-size: 14px;
        }
        
        .buttons-tel{
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: black;
            font-size: 13px;
            margin: 15px;
            padding: 10px;
            width: 35%;
            font-size: 15px;
            border-radius: 50px;
            background-color: rgb(255, 255, 255);
            transition-duration: 0.2s;
        }

        .buttons-tel:hover{
            background-color: rgb(225, 225, 225);
        }

        .bloc1{
            display: block;
            display: none;
        }
        
        .bloc1 .presentation{
            display: block;
            display: none;
        }
        
        .bloc1 .presentation .titre{
            display: block;
            display: none;
        }
        
        .bloc1 .presentation .texte{
            display: block;
            display: none;
        }

        .buttons-pc{
            display: block;
            display: none;
        }


        .inscription-page{
            width: 45%;
        }
        
        .buttons2{
            width: 100%
        }

        .forme-connexion{
            align-items: center;
        }

        .index-galerie .bloc p{
            font-size: 16px;
        }

        .bloc-ajout form{
            width: 35%;
        }

        .profil-deroulant{
            width: 20%;
        }

        .page-profil{
            width: 50%;
        }

        .buttons-supr{
            padding: 5px;
            width: 50%;
            font-size: 14px;
        }
        
        .buttons-profil{
            padding: 5px;
            width: 50%;
            font-size: 14px;
        }

        .bloc4 form{
            width: 30%;
        }
    
        .bloc4 {
            justify-content: space-around;
        }

        .bdhess-taille{
            height: 36px;
            margin-left: 50px;
        }

    }
    
    /*____________________________________ TAB ___________________________________*/
    /*___________________________________________________________________________*/
    
    @media screen and (min-width:481px) {
    }