/**
* Auteur 			: David Dieperink
* Date 				: 22.09.2020
* Description : Style CSS pour le site web
**/

html, body {
  margin: 0;
  padding: 0;
}
/** Titre centré + police arial **/
header {
  width: 100%;
}
/** Taille de la navbar **/
.navbar {
  width: 100%;
  height: 111px;
  background-color:  rgba(0, 0, 0, 0.8);
}
.navbarLeft {
  height: 111px;
  width: 60%;
  float: left;
}
.navbarRight {
  float: left;
  width: 40%;
  height: 111px;
}
/** Texte aligné + police arial + padding + couleur de fond **/
ul {
  margin-top: 0px;
  height: 111px;
  text-align: center;
  font-family: arial, sans-serif;
  font-size: 20px;
  list-style-type: none;
  padding: 0px;
  overflow: auto;
}
/** Logo de la barre de navigation **/
.logoNavBar {
  float: left;
  width: 75px;
  height: 111px;
}
/** Largeur des cases + flotement + séparation des cases **/
li {
  box-sizing: border-box;
  float: left;
  padding-top: 44px;
  margin-right: 2%;
}
li:first-child {
  margin-left: 2%;
}
/** Display + couleur du texte + alignement centré + padding **/
li a {
  text-transform: uppercase;
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-family: arial, sans-serif;
}
/** Couleur qui change sur la barre de navigation en passant sur une page **/
li a:hover {
  color: orange;
}
/** Couleur qui change sur la barre de navigation en fonction de la page **/
.active {
  color: orange;
}
/** Emplacement du footer **/
footer {
  margin: 0;
  display: block;
  height:50px;
  font-family: arial, sans-serif;
  background-color: rgba(0, 0, 0, 0.8);
  font-size: 20px;
}
/** Mise en place du texte du footer **/
.pFooter {
  width: 50%;
  float: left;
  font-family: arial, sans-serif;
  text-align: center;
  color: white;
  margin-top: 13.5px;
  margin-bottom: 13.5px;
}
/** Alignement du logo copyright **/
.copyRight {
  float: left;
  width: 50%;
  text-align: center;
  color: white;
  margin-top: 13.5px;
  margin-bottom: 13.5px;
}
/** Position de l'image de fond **/
.bodyIndex {
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("../../resources/images/fondR6_2.jpg");
  background-repeat: no-repeat;
  height: 95vh;
}

/** --------------------------- Page d'accueil --------------------------- **/
/** Mise en place du paragraphe de la page d'accueil**/
#pAccueil {
  margin-left: 300px;
  margin-right: 300px;
  margin-top: 80px;
  color: white;
  font-family: arial, sans-serif;
  font-size: 18px;
  text-align: center;
}
/** Titre h2 pour la vido de bande annonce du jeux **/
#bandeAnnonceH2 {
  text-align: center;
  box-sizing: border-box;
  font-family: arial, sans-serif;
  margin-top: 65px;
  margin-left: auto;
  margin-right: auto;
  font-size: 30px;
  text-shadow: 1px 0 0 #FFF, 1px 1px 0 #FFF,
              0 1px 0 #FFF, -1px 1px 0 #FFF,
            -1px 0 0 #FFF, -1px -1px 0 #FFF,
            0 -1px 0 #FFF,  1px -1px 0 #FFF;
  text-decoration:underline;
}
/** Emplacement de la vidéo **/
.videoBandeAnnonce {
  max-width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}
video {
  max-width: 50%;
}
/** ------------------------ Page de présentation ------------------------ **/
/** Taille de la page de présentation **/
.pagePresentation {
  display: block;
  background-color: rgba(255, 255, 255, 0.7);
  margin-top: 3%;
  margin-left: 200px;
  margin-right: 200px;
  padding-left: 15px;
  padding-right: 15px;
  font-family: arial, sans-serif;
  border-radius: 10px;
}
/** Mise en place du texte de présentation partie 1 **/
.presentationP1 {
  padding-top: 15px;
  padding-bottom: 11px;
  color: black;
  font-family: arial, sans-serif;
  font-size: 18px;
  text-align: left;
}
/** Emplacement du texte de la photo de profil **/
.pPhotoProfil {
  margin-bottom: 0.5%;
}
/** Emplacement de la photo de profil **/
.photoProfil {
  text-align: center;
}
/** Mise en place du texte de présentation partie 2 **/
.presentationP2 {
  padding-top: 11px;
  padding-bottom: 15px;
  color: black;
  font-family: arial, sans-serif;
  font-size: 18px;
  text-align: left;
}

/** ----------------------- Page Rainbow Six Siege ----------------------- **/
/** Emplacement du texte pour la bombe **/
.pBombeR6 {
  margin-top: 0;
  margin-bottom: 5px;
}
/** Taille des blocks de la page  **/
.block {
  display: block;
  background-color: rgba(255, 255, 255, 0.7);
  margin-top: 3%;
  margin-left: 200px;
  margin-right: 200px;
  padding-left: 15px;
  padding-right: 15px;
  font-family: arial, sans-serif;
  font-size: 18px;
  border-radius: 10px;
}
/** Position des images de la page **/
.imagesR6 {
  float: left;
  margin-top: 15px;
}
.imagesR6second {
  float: left;
  margin-top: 10px;
}
.imagesR6mid {
  float: left;
}
/** Mise en place du texte de présentation du jeux **/
.pR6debut {
  padding-top: 15px;
  margin-left: 135px;
  text-align: left;
  font-family: arial, sans-serif;
}
.pR6fin {
  padding-bottom: 15px;
  margin-left: 135px;
  text-align: left;
  font-family: arial, sans-serif;
}
/** Dispotion des titres de la page **/
.titreH1pR6 {
  padding-top: 15px;
  font-family: arial, sans-serif;
  font-size: 26px;
  text-align: left;
  margin-left: 135px;
  margin-top: 20px;
  text-decoration: underline;
}
.titreH2pR6 {
  font-family: arial, sans-serif;
  font-size: 20px;
  text-align: left;
  margin-left: 135px;
  margin-top: 20px;
  text-decoration: underline;
}
.titreH3pR6 {
  font-family: arial, sans-serif;
  font-size: 18px;
  text-align: left;
  margin-left: 135px;
  margin-top: 20px;
  text-decoration: underline;
}
/** Disposition des autres paragraphes **/
.pR6 {
  margin-left: 135px;
  text-align: left;
  font-family: arial, sans-serif;
}
/** Décoration pour les nom des personnages **/
.nomPerso {
  text-decoration: underline;
}

/** -------------------------- Page d'analyse --------------------------- **/
/** Dimension et caractéristique de la page **/
.analyseQuestion {
  margin-left: 200px;
  margin-right: 200px;
  color: white;
  font-family: arial, sans-serif;
  font-size: 18px;
  overflow: auto;
}
/** Dimension du texte et des images **/
.questionsAnalyse {
  width: 611px;
  margin-left: 5px;
}
/** Dimension du bloc numéro 1 **/
.quest1 {
  height: 288px;
  float: left;
}
/** Dimension du bloc numéro 2 **/
.quest2 {
  height: 288px;
  margin-left: 271px;
  margin-bottom: 25px;
  float: left;
}
/** Dimension du bloc numéro 3 **/
.quest3 {
  margin-top: 64px;
  margin-bottom: 25px;
  float: left;
}
/** Dimension du bloc numéro 4 **/
.quest4 {
  height: 348.5px;
  margin-left: 271px;
  float: left;
}
/** Dimension du bloc numéro 5 **/
.quest5 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 10px;
}

/** -------------------------- Page de contact -------------------------- **/
/** Mise en place du titre **/
.titreInfosPersonnelles {
  text-decoration: underline;
  margin-top: 2%;
  color: white;
  text-align: center;
  font-family: arial, sans-serif;
}
/** Disposition des informations personnelles **/
.infoPerso {
  display: block;
  background-color: rgba(255, 255, 255, 0.7);
  margin-top: 1%;
  margin-left: 300px;
  margin-right: 300px;
  font-family: arial, sans-serif;
  font-size: 18px;
  border-radius: 10px;
  text-align: center;
}
/** Disposition des paragraphes **/
.pContact {
  text-align: center;
  font-family: arial, sans-serif;
}
.pContactDebut {
  text-align: center;
  padding-top: 15px;
}
.pContactFin {
  text-align: center;
  padding-bottom: 15px;
}
/** Disposition du tire du formulaire **/
.titreFormulaireContact {
  text-decoration: underline;
  margin-top: 2%;
  color: white;
  text-align: center;
  font-family: arial, sans-serif;
}

div.formulaireContact-group {
  /** Mise en place du style du formulaire **/
  color: white;
  font-family: arial, sans-serif;
  /** Disposition du formulaire **/
  margin-left: auto;
  margin-right: auto;
  text-align:left;
}

#formulaireContact-form{
  margin-left: auto;
  margin-right: auto;
  width: 246px;
}

.form-group {
width: 50px;
}

/** Champs du formulaire **/
input {
  margin-top: 5px;
	margin-bottom: 15px;
}
textarea {
	margin-bottom: 10px;
  width: 250px;
  height: 50px;
}

/** Mise en place du titre pour les informations de contact**/
.titreInfosContact {
  text-decoration: underline;
  margin-top: 2%;
  color: white;
  text-align: center;
  font-family: arial, sans-serif;
}
/** Disposition des informations de contact **/
.infosContact {
  display: block;
  background-color: rgba(255, 255, 255, 0.7);
  margin-top: 1%;
  margin-left: 300px;
  margin-right: 300px;
  font-family: arial, sans-serif;
  font-size: 18px;
  border-radius: 10px;
  text-align: center;
}



h2.titreInfosContact {
  margin-right: auto;
  margin-left: auto;
}

/** -------------------------- Responsive Design -------------------------- **/
@media only screen and (max-width: 1920px) {
 
}

/** Réduction des tailles lorsque l'écran fait moins de 1800px en largeur **/
@media only screen and (max-width: 1800px) {
  /** Barre de navigation **/
  .navbarLeft {
    width: 50%
  }
}

/** Réduction des tailles lorsque l'écran fait moins de 1600px en largeur **/
@media only screen and (max-width: 1600px) {
  /** Barre de navigation **/
  .navbarLeft {
    width: 40%
  }
  ul {
    font-size: 20px;
  }

  /** Footer **/
  .pFooter {
    font-size: 20px;
  }
  .copyRight {
    font-size: 20px;
  }
}

/** Réduction des tailles lorsque l'écran fait moins de 1400px en largeur **/
@media only screen and (max-width: 1400px) {
  /** Barre de navigation **/
  .navbarLeft {
    width: 20%
  }

  /** Page d'Accueil **/
  #pAccueil {
    margin-left: 250px;
    margin-right: 250px;
  }

  /** Page Contact **/
  .infoPerso {
    margin-left: 250px;
    margin-right: 250px;
  }
  .infosContact {
    margin-left: 250px;
    margin-right: 250px;
  }
}

/** Réduction des tailles lorsque l'écran fait moins de 1200px en largeur **/
@media only screen and (max-width: 1200px) {
  /** Barre de navigation **/
  .navbarLeft {
    width: 20%
  }

  /** Page d'Accueil **/
  #pAccueil {
    margin-left: 150px;
    margin-right: 150px;
  }
  #bandeAnnonceH2 {
    font-size: 28px;
  }
  .videoBandeAnnonce {
    width: 512px;
    height: 344px;
  }

  /** Page Présentation **/
  .pagePresentation {
    margin-left: 100px;
    margin-right: 100px;
  }

  /** Page Rainbow Six Siege **/
  .block {
    margin-left: 100px;
    margin-right: 100px;
  }
  .imagesR6 {
      display: none;
  }
  .imagesR6second {
      display: none;
  }
  .imagesR6mid {
      display: none;
  }
  .pPhotoBombe {
    display: none;
  }
  .pR6debut {
      margin-left: 0;
  }
  .pR6 {
    margin-left: 0;
  }
  .pR6fin {
    margin-left: 0;
  }
  .titreH1pR6 {
    margin-left: 0;
  }
  .titreH2pR6 {
    margin-left: 0;
  }
  .titreH3pR6 {
    margin-left: 0;
  }
  /** Page Analyse **/
  .analyseQuestion {
    margin-left: 100px;
    margin-right: 100px;
  }
  .quest1, .quest2, .quest3, .quest4 {
    float: none;
    margin-left: 0;
  }
  .quest3 {
    margin-top: 0;
  }

  /** Page Contact **/
  .infoPerso {
    margin-left: 100px;
    margin-right: 100px;
  }
  .infosContact {
    margin-left: 100px;
    margin-right: 100px;
  }
  .formulaireContact {
    height: 460px;
  }
  form {
    margin-right: 330px;
  }
}

/** Réduction des tailles lorsque l'écran fait moins de 900px en largeur **/
@media only screen and (max-width: 900px) {
  /** Barre de navigation **/
  ul {
    font-size: 17px;
  }

  /** Footer **/
  .pFooter {
    font-size: 17px;
  }
  .copyRight {
    font-size: 17px;
  }

  /** Page d'Accueil **/
  #pAccueil {
    margin-left: 100px;
    margin-right: 100px;
  }
  .videoBandeAnnonce {
    width: 384px;
    height: 344px;
    margin-bottom: 130px;
  }

  /** Page Présentation **/
  .pagePresentation {
    margin-left: 50px;
    margin-right: 50px;
  }

  /** Page Rainbow Six Siege **/
  .block {
    margin-left: 50px;
    margin-right: 50px;
  }

  /** Page Analyse **/
  .analyseQuestion {
    margin-left: 50px;
    margin-right: 50px;
  }

  /** Page Contact **/
  .infoPerso {
    margin-left: 50px;
    margin-right: 50px;
  }
  .infosContact {
    margin-left: 50px;
    margin-right: 50px;
  }
  .formulaireContact {
    height: 470px;
  }
  form {
    margin-right: 225px;
  }
}

/** Réduction des tailles lorsque l'écran fait moins de 500px en largeur **/
@media only screen and (max-width: 500px) {
  /** Barre de navigation **/
  ul {
    height: 111px;
    font-size: 16px;
  }
  li {
    float: none;
    padding-top: 0;
  }
  li:first-child {
    margin-top: 1%;
  }
  li a {
    margin-top: 3px;
    text-align: right;
    margin-right: 2%;
  }

  /** Footer **/
  .pFooter {
    width: 70%;
  }
  .copyRight {
    width: 30%;
  }

  /** Page d'Accueil **/
  #pAccueil {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
    font-size: 18px;
  }
  #bandeAnnonceH2 {
    font-size: 20px;
    margin-top: 50px;
  }
  .videoBandeAnnonce {
    width: auto;
    height: auto;
    margin-bottom: 87px;
  }

  /** Page Présentation **/
  .pagePresentation {
    margin-left: 20px;
    margin-right: 20px;
  }

  /** Page Rainbow Six Siege **/
  .block {
    margin-left: 20px;
    margin-right: 20px;
  }

  /** Page Analyse **/
  .analyseQuestion {
    margin-left: 20px;
    margin-right: 20px;
  }
  .questionsAnalyse {
    width: 335px;
    margin-left: 0;
  }
  .quest1, .quest2 {
    height: 230px;
  }
  .quest3 {
    margin-top: 0;
  }
  
  /** Page Contact **/
  .infoPerso {
    margin-left: 20px;
    margin-right: 20px;
  }
  .infosContact {
    margin-left: 20px;
    margin-right: 20px;
  }

  .formulaireContact {
    height: 300px;
  }
  textarea {
    width: 245px;
    height: 50px;
  }
  form {
    margin-left: 64px;
    margin-right: 31px;
  }
}