/*
    But :    Css du projet
    Auteur : Théo Angéloz
    Date :   31.05.2021 / V1.0
*/
/*====================================================================================================*/
/*PARAMETRAGES GENERAUX*/
/*====================================================================================================*/
/*Paramètre du body*/ 
body {
  background-color: lightblue;
}

h1{
	text-align: center;
  font-size: 3.5em;
}

/*====================================================================================================*/
/*Paramétrage de la barre de scroll*/
::-webkit-scrollbar{ 
  width: 12px; 
} 
::-webkit-scrollbar-track{ 
  -webkit-border-radius: 10px; 
  border-radius: 10px; 
} 
::-webkit-scrollbar-thumb { 
  -webkit-border-radius: 10px; 
  border-radius: 10px; 
  background: rgb(102, 99, 99); 
} 


/*====================================================================================================*/
/*PARAMETRAGES DE LA PAGE DU LOGIN*/
/*====================================================================================================*/
/*Paramétre de la page de login*/ 
#container .user-form{
  background-color: lightblue;
  width: 90%;
  padding: 1em;
  margin: auto;
  font-family: Verdana, Arial, serif;
  width:400px;
}

/*====================================================================================================*/
/*Configuration du formulaire de la page de login*/ 
.user-form {
  padding: 0em;
  width:100%;
  padding: 30px;
  border: 1px solid #f1f1f1;
  background: linear-gradient(pink, 20%, lightblue);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

/*====================================================================================================*/
/*Paramétrage du div se trouvant dans le formulaire du login*/ 
.user-form .field {
  padding: 0.5em;
}

/*====================================================================================================*/
/*Paramétrage des labels du div se trouvant dans le formulaire du login*/ 
.user-form .field label {
  display: inline-block;
  width: 10em;
}

/*====================================================================================================*/
/*Paramétrage des champs permettant d'entrer les informations d'identification*/ 
#username, input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/*====================================================================================================*/
/*Paramétrage des domaines sur la page de login*/ 
#domaine{
  margin-right: 9em;
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
}

/*====================================================================================================*/
/*Paramétrage du bouton valider de la page login qui permet d'accèder sur la page suivante*/ 
.but-valider {
    font-size: 1em;
    width: 7em;
    border-radius: 1em;
    background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
    margin-top: 15px;
}

/*====================================================================================================*/
/*Bouton créer le compte sur la page du login*/ 
#creer {
  font-size: 1em;
  border-radius: 1em;
  background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
  margin-top: 15px;
  text-decoration: none;
  color: black
}

/*====================================================================================================*/
/*Paramétrage du recaptcha*/ 
.g-recaptcha{
  margin-top: 3em;
}

/*====================================================================================================*/
/*PARAMETRAGES DE LA PAGE POUR CREER UN COMPTE*/
/*====================================================================================================*/
/*Paramétrage de la langue lors de la création du compte*/ 
#langue {
  display: inline-block;
}

/*====================================================================================================*/
/*Bouton du retour au login dans la page de la création du compte*/ 
.but-invalider {
  font-size: 1em;
  width: 7em;
  border-radius: 1em;
  background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
  margin-top: 15px;
  color: black;
}

/*====================================================================================================*/
/*Paramétrage des champs permettant d'entrer l'adresse email lors de la création d'un compte*/ 
#mail{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/*====================================================================================================*/
/*PARAMETRAGES DE LA PAGE ACCUILLANT LE TABLEAU DES MARQUES*/
/*====================================================================================================*/
/*Paramétrage de toutes les tables présentes*/
table{
	margin: auto
}
/*====================================================================================================*/
/*Paramétrage de toutes les cellules présentes*/
td{
  border: 1px solid black;
  text-align: center;
  font-size: 25px;
}
/*====================================================================================================*/
/*Paramétrage de l'entête du tableau du tableau comportant toutes les marques*/
th{
  border: 1px solid black;
  column-span: all;
  font-size: 32px;
  background-color: black;
  color: white;
}

/*====================================================================================================*/
/*Paramétrage de la première ligne ainsi que de la troisième ligne du tableau contenant toutes les marques*/
.tdLigne1Et3{
  background-color: #EAFFFD;
}

/*====================================================================================================*/
/*Paramétrage de la seconde ligne ainsi que de la dernière ligne du tableau contenant toutes les marques*/
.tdLigne2Et4{
  background-color: #C9F0FF;
}

/*====================================================================================================*/
/*Paramétrage des images du tableau*/
#harleyDavidson{
	height: 211px;
}
#honda{
	height: 211px;
}
#bmw{
	height: 211px;
}
#ducati{
	height: 211px;
}
#kawasaki{
	height: 211px;
}
#suzuki{
	height: 211px;
}
#triumph{
	height: 211px;
}

/*====================================================================================================*/
/*PARAMETRAGE DE LA PAGE DES MODELES DE LA MARQUE*/
/*====================================================================================================*/
/*Paramétrage de l'entête de la page qui comporte tous les modèles de motos*/
.headerModele{
  background-color: #353535;
  font-size: 32px;
  font-weight: bolder;
  color: whitesmoke; 
}

/*Paramétrage des cellules de la numérotation dans la page des modèles de moto de la marque*/
.num{
  background-color: #353535;
  color: whitesmoke;
}

/*====================================================================================================*/
/*Paramétrage des cellules des modeèles dans la page des modèles de moto de la marque*/
.mod{
  background-color: #D2D7DF;
}

/*====================================================================================================*/
/*Paramétrage du bouton qui permet d'aller vers le haut de la page*/
#myBtn {
  position: fixed;
  bottom: 20px; 
  right: 30px; 
  z-index: 99; 
  border: solid black 2;
  outline: none; 
  background-color: rgb(44, 218, 218);
  color: white; 
  cursor: pointer; 
  padding: 15px; 
  border-radius: 10px; 
  font-size: 18px; 
}
#myBtn:hover {
  background-color: rgb(36, 221, 166); /* Mettre le fond du bouton lorsque le curseur passe dessus */
}

/*====================================================================================================*/
/*Paramétrage de l'input qui permet de rechercher le modèle que l'on souhaite*/
#searchInput{
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align: center;
}

/*====================================================================================================*/
/*Paramétrage du div qui permet de centrer l'input*/
#divInput{
  text-align: center;
}

/*====================================================================================================*/
/*Paramétrage du bouton qui permet d'aller sur la page précédente*/
.btnRetour{
  background-color: #353535;
  color: white;
  cursor: pointer;
  border-radius: 10px;
  font-size: 18px;
  border-color: white;
  box-shadow: 1px 2px 5px white;
}
.btnRetour:hover{
  background-color: rgb(36, 221, 166); /* Mettre le fond du bouton lorsque le curseur passe dessus */
}