/*

    Auteur : Noam Bourqui
    Description :
    Date : 11.01.2023
    
*/

* {
  /* Pour que les tailles soient correctes */
  box-sizing: border-box;
}
/*Font body*/
body {
  font-family: Arial, Helvetica, sans-serif;
}
/* Pour coller le menu au bord, sans espace */
body > div {
  margin: 0%;
}
/*Menu reste en place + ne soit pas sur le texte*/
.menu {
  position: fixed;
  width: 0px;
  margin-left: 90%;
}
/* Pour que la checkbox ne s'affiche pas */
#hamburger {
  display: none;
}
/* Pour que le curseur soit un pointeur,que le menu hamburger sois afficher et ranger */
#hamburger-logo {
  cursor: pointer;
  width: 300px;
  display: block;
  color: black;
  text-align: left;
  transform: translateX(100px);
  padding: 10px;
}
/*Navigation accueil*/
nav {
  display: flex;
  flex-direction: column;
  background-color: gainsboro;
  overflow: hidden;
  width: 900px;
  border-radius: 30px;
  transform: translateX(+5000px);
}
/*Animation menu*/
#hamburger-logo,
nav {
  transition: 0.3s;
}

/* Changement de la position pour afficher les menus */
#hamburger:checked ~ nav {
  transform: translate(0);
}
/*Couleur navigation texte accueil*/
nav a {
  color: black;
  text-decoration: none;
  padding: 10px;
}
/*Navigation couleur hover accueil*/
nav a:hover {
  background: ghostwhite;
}
/* Pour que le curseur soit un pointeur,que le menu hamburger sois afficher et ranger (Roadster)*/
#hamburger-logo-Roadster {
  cursor: pointer;
  width: 300px;
  display: block;
  color: white;
  text-align: left;
  transform: translateX(+100px);
  padding: 10px;
}
/*Navigation Roadster*/
#nav-Roadster {
  display: flex;
  flex-direction: column;
  background-color: rgb(59, 59, 59);
  overflow: hidden;
  width: 900px;
  border-radius: 30px;
  /* Pour que les liens soient "rangés" par défaut */
  transform: translateX(+900px);
}
/*Couleur navigation texte Roadster*/
#nav-Roadster > a {
  color: white;
}
/*Navigation couleur hover Roadster*/
#nav-Roadster > a:hover {
  background: rgb(109, 109, 109);
}

/* Pour que le curseur soit un pointeur,que le menu hamburger sois afficher et ranger (Motocross)*/
#hamburger-logo-Motocross {
  cursor: pointer;
  width: 300px;
  display: block;
  color: black;
  text-align: left;
  transform: translateX(+100px);
  padding: 10px;
}
/*Navigation Motocross*/
#nav-Motocross {
  display: flex;
  flex-direction: column;
  background-color: rgb(199, 106, 0);
  overflow: hidden;
  width: 900px;
  border-radius: 30px;
  transform: translateX(+900px);
}
/*Couleur navigation texte Motocross*/
#nav-Motocross > a {
  color: black;
}
/*Navigation couleur hover Motocross*/
#nav-Motocross a:hover {
  background: rgb(240, 128, 0);
}

/* Pour que le curseur soit un pointeur,que le menu hamburger sois afficher et ranger (Sportive)*/
#hamburger-logo-Sportive {
  cursor: pointer;
  width: 300px;
  display: block;
  color: black;
  text-align: left;
  transform: translateX(+100px);
  padding: 10px;
}
/*Navigation Sportive*/
#nav-Sportive {
  display: flex;
  flex-direction: column;
  background-color: #00b9b6;
  overflow: hidden;
  width: 900px;
  border-radius: 30px;
  transform: translateX(+900px);
}
/*Couleur navigation texte Sportive*/
#nav-Sportive > a {
  color: black;
}
/*Navigation couleur hover Sportive*/
#nav-Sportive a:hover {
  background: #00f5f1;
}

/* Pour que le curseur soit un pointeur,que le menu hamburger sois afficher et ranger (Constructeur)*/
#hamburger-logo-Constructeur {
  cursor: pointer;
  width: 300px;
  display: block;
  color: black;
  text-align: left;
  transform: translateX(+100px);
  padding: 10px;
}
/*Navigation Constructeur*/
#nav-Constructeur {
  display: flex;
  flex-direction: column;
  background-color: gainsboro;
  overflow: hidden;
  width: 900px;
  border-radius: 30px;
  transform: translateX(+900px);
}

/* Pour que le curseur soit un pointeur,que le menu hamburger sois afficher et ranger (Journal)*/
#hamburger-logo-Journal {
  cursor: pointer;
  width: 300px;
  display: block;
  color: black;
  text-align: left;
  transform: translateX(+100px);
  padding: 10px;
}
/*Navigation Journal*/
#nav-Journal {
  display: flex;
  flex-direction: column;
  background-color: rgb(252, 244, 200);
  overflow: hidden;
  width: 900px;
  border-radius: 30px;
  transform: translateX(+900px);
}
/*Titre*/
h1 {
  text-align: center;
  font-size: 40pt;
}
/*Image accueil*/
#redmoto {
  width: 100%;
}
/*video Motocross*/
video {
  width: 30%;
}
/*Paragraphe*/
p {
  font-size: 20pt;
  text-align: justify;
}
/*Image accueil 2*/
#MotoHonda {
  width: 20%;
  margin-left: 20px;
}
/*Flex texte img*/
.flex {
  display: flex;
}
/*Flex texte hr*/
.flexColonne {
  display: flex;
  flex-direction: column;
}
/*Img Roadster 1*/
#imgKawasaki {
  width: 30%;
  margin-left: 30px;
  margin-right: 30px;
}
/*Img Roadster 2*/
#phondaMT07 {
  margin-right: 30px;
  margin-left: 30px;
  width: 30%;
  text-align: justify;
}
/*Banière Roadster*/
#roadsterMT09 {
  width: 100%;
}
/*Titre Roadster*/
#hRoadster {
  font-size: 40pt;
  margin-top: 150px;
  margin-bottom: 100px;
  color: white;
}
/*Background Roadster*/
#background {
  background: url("../images/lune-ciel-arbres.jpg");
}
/*Titre h2*/
#h2Roadster {
  color: white;
}
/*Paragraphe Roadster*/
.pRoadster {
  color: white;
  margin-left: 30px;
  margin-right: 30px;
}
/*Background Roadster*/
#backgroundBody {
  background-color: black;
}

/*Heure dynamique index*/
.heure {
  width: 200px;
  padding: 4px;
  border-radius: 10px;
  font-size: 11pt;
  text-align: center;
  font-weight: bolder;
  margin-left: 100px;
}
/*Centrer l'heure*/
#heureCente {
  text-align: center;
  display: flex;
  justify-content: center;
}

/*Sépération*/
hr {
  width: 100%;
  padding-bottom: 20px;
  background: #000;
}

/*Background Motocross*/
.lineaire-simple {
  background: linear-gradient(#935116, #7d6608);
}
/*Image Motocross alignement*/
#imgMotocross {
  text-align: center;
}
/*Image Constructeur alignement*/
#imgConstructeur {
  text-align: center;
}
/*Ligne séparatrice Motocross*/
.hrMotocross {
  background: #522b01;
  height: 30px;
  border-width: 0px;
}
/*Pied de page (Constructeur)*/
#footerConstructeur {
  margin-top: 50px;
}
/*Pied de page roadster*/
#footerRoadster {
  color: white;
  margin-top: 50px;
}

/*Background sportive*/
.lineaire-simple2 {
  background: linear-gradient(#00504e, #2d9a97);
}
/*Image marge*/
.imgMargin {
  margin-right: 30px;
  margin-left: 30px;
}
/*Paragraphe marge gauche*/
.pMargin {
  margin-left: 30px;
}
/*Video Motocross*/
video {
  margin-right: 30px;
  width: 50%;
}
/*Ligne séparatrice Sportive*/
.hrSportive {
  background-color: #00504e;
  border-width: 0px;
}

/*Titre paragraphe*/
h2 {
  margin-left: 30px;
}

/*Paragraphe marge Droite*/
.pMarginDroite {
  margin-right: 30px;
}
/*Marge paragraphe journal*/
.journalMargin {
  margin-left: 30%;
  margin-right: 30%;
}
/*Background journal*/
#backgroundJournal {
  background-color: #f9f8e5;
}

/*Bouton Journal*/
button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
/*Taille texte bouton*/
button.learn-more {
  width: 12rem;
  height: auto;
}
/*Animation bouton*/
button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #282936;
  border-radius: 1.625rem;
}
/*Animation  bouton*/
button.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
/*Animation flèche bouton*/
button.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
/*Position de base bouton*/
button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.29rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
/*Position après bouton*/
button.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
/*Agrandisement longeur bouton*/
button:hover .circle {
  width: 100%;
}
/*Couleur flèche bouton*/
button:hover .circle .icon.arrow {
  background: #f9f8e5;
  transform: translate(1rem, 0);
}
/*Couleur texte bouton*/
button:hover .button-text {
  color: #f9f8e5;
}
/*Centrer le bouton*/
#centerButton {
  text-align: center;
  margin-top: 70px;
}

/*Image Logo Yamaha*/
.imgMarginYamaha {
  margin-right: 30px;
  margin-left: 30px;
  border: 5px;
  border-color: red;
  border-style: solid;
  width: 30%;
}
/*Image Logo Kawasaki*/
.imgMarginKawasaki {
  margin-right: 30px;
  margin-left: 30px;
  border: 5px;
  border-color: #000;
  border-style: solid;
  width: 30%;
}
/*Image Logo BMW*/
.imgMarginBMW {
  margin-right: 30px;
  margin-left: 30px;
  border: 5px;
  border-color: rgb(0, 140, 255);
  border-style: solid;
  width: 90%;
}
/*Image Logo Honda*/
.imgMarginHonda {
  margin-right: 30px;
  margin-left: 30px;
  border: 5px;
  border-color: rgb(204, 1, 1);
  border-style: solid;
  width: 30%;
}
/*Ligne Yamaha*/
.hrYamaha {
  background-color: red;
  border-width: 0px;
}
/*Ligne Kawasaki*/
.hrKawasaki {
  background-color: black;
  border-width: 0px;
}
/*Ligne BMW*/
.hrBMW {
  background-color: rgb(0, 140, 255);
  border-width: 0px;
}
/*Ligne Honda*/
.hrHonda {
  background-color: rgb(204, 1, 1);
  border-width: 0px;
}
/*Image r1*/
#imgR1{
  width: 85%;
}

/*Image moto sportive*/
.imgMarginMoto {
  margin-right: 30px;
  margin-left: 30px;
  width: 40%;
}

/*Image marge*/
.yzf-r125 {
  margin-right: 30px;
  margin-left: 30px;
  width: 40%;
}
/*Image banière constructeur*/
#imgBaniere{
  width: 60%;
}

/*L'affichage en dessous de 600px*/
@media screen and (max-width: 600px) {
  /*Menu de navgiation Accueil*/
  #hamburger-logo {
    cursor: pointer;
    width: 300px;
    display: block;
    color: black;
    text-align: left;
    transform: translateX(-340px);
    padding: 10px;
  }
  /*Menu de navgiation Acceuil*/
  nav {
    display: flex;
    flex-direction: column;
    background-color: gainsboro;
    width: 300px;
    border-radius: 30px;
    /* Pour que les liens soient "rangés" par défaut */
    transform: translateX(-5000px);
    text-align: right;
  }

  /* Lorsque #hamburger est coché, le #hamburger-logo et le nav qui sont dans le même parent changent de propriété */
  #hamburger:checked ~ nav {
    transform: translate(-500px);
  }
  /*Menu de navgiation Roadster*/
  #hamburger-logo-Roadster {
    cursor: pointer;
    width: 300px;
    display: block;
    color: white;
    text-align: left;
    transform: translateX(-340px);
    padding: 10px;
  }
  /*Menu de navgiation Roadster*/
  #nav-Roadster {
    display: flex;
    flex-direction: column;
    background-color: rgb(59, 59, 59);
    overflow: hidden;
    width: 300px;
    border-radius: 30px;
    transform: translateX(-5000px);
  }

  /*Menu de navigation Motocross*/
  #hamburger-logo-Motocross {
    cursor: pointer;
    width: 300px;
    display: block;
    color: black;
    text-align: left;
    transform: translateX(-340px);
    padding: 10px;
  }
  /*Menu de navigation Motocross*/
  #nav-Motocross {
    display: flex;
    flex-direction: column;
    background-color: rgb(199, 106, 0);
    overflow: hidden;
    width: 300px;
    border-radius: 30px;
    transform: translateX(-5000px);
  }

  /*Menu de navigation Sportive*/
  #hamburger-logo-Sportive {
    cursor: pointer;
    width: 300px;
    display: block;
    color: black;
    text-align: left;
    transform: translateX(-340px);
    padding: 10px;
  }
  /*Menu de navigation Sportive*/
  #nav-Sportive {
    display: flex;
    flex-direction: column;
    background-color: #00b9b6;
    overflow: hidden;
    width: 300px;
    border-radius: 30px;
    transform: translateX(-5000px);
  }
  /*Menu de navigation Constructeur*/
  #hamburger-logo-Constructeur {
    cursor: pointer;
    margin-top: 40px;
    width: 300px;
    display: block;
    color: black;
    text-align: left;
    transform: translateX(-340px);
    padding: 10px;
  }
  /*Menu de navigation Constructeur*/
  #nav-Constructeur {
    display: flex;
    flex-direction: column;
    background-color: gainsboro;
    overflow: hidden;
    width: 300px;
    border-radius: 30px;
    transform: translateX(-5000px);
  }

  /*Menu de navigation Journal*/
  #hamburger-logo-Journal {
    cursor: pointer;
    margin-top: 45px;
    width: 300px;
    display: block;
    color: black;
    text-align: left;
    transform: translateX(-340px);
    padding: 10px;
  }
  /*Menu de navgiation Journal*/
  #nav-Journal {
    display: flex;
    flex-direction: column;
    background-color: rgb(252, 244, 200);
    overflow: hidden;
    width: 300px;
    border-radius: 30px;
    transform: translateX(-5000px);
  }
  /*Page Accueil*/
  .pMargin {
    text-align: justify;
    margin-left: 30px;
    margin-right: 30px;
  }
  #MotoHonda {
    display: none;
  }
  /*Page Roadster*/
  #imgKawasaki {
    display: none;
  }

  #phondaMT07 {
    display: none;
  }

  #imgMotocross {
    display: none;
  }
  .imgMargin {
    display: none;
  }
  /*Page constructeur*/
  .imgMarginYamaha {
    display: none;
  }

  .imgMarginKawasaki {
    display: none;
  }

  .imgMarginBMW {
    display: none;
  }

  .imgMarginHonda {
    display: none;
  }
  #imgBaniere{
display: none;
  }

  /*Page sportive*/
  .pMarginDroite {
    text-align: justify;
    margin-left: 30px;
  }
  .imgMarginMoto{
    display: none;
  }
  .yzf-r125{
    display: none;
  }
  /*Page Journal*/
  .journalMargin {
    margin-left: 19%;
    margin-right: 19%;
  }
}