/*Règles qui vont etre attribuées a toutes les pages*/
/*Regle qui va s'appliquer au body de chque page*/
body{
  margin: 0;/*J'enleve le padding et margin de base afin de le re ajuster plus tard en effet si je ne fais pas ca il y ara du padding et margin a des endroit non souhaite*/
  padding: 0;
  font-weight: 700  ;/*J'augmente l'epaisseur du text je trouve que ca rend le site plus agreable et lisibe*/
  font-family: "Wix Madefor Text", Arial, Helvetica, sans-serif;/*J'ajoute un regle qui dit d'utiliser la police importe avec google font*/
  background-color: #f4f2f2;/*Je met une couleur de fond plus gris afin de faire ressortir le site en effet car je vais mettre un fond plus blanc sur le main*/
}


/*Regle du header cela corespond à la partie de mon site avec le menu*/
header{
  background: linear-gradient(to left, #147ef8, #2c9df4);/*Permet de faire un degrader plus beau visuelment que une couleur uni je trouve*/
  box-shadow: 0 15px 20px #bbb9b9;
}
/*Menu du site */
header nav ul{
  list-style: none;/*J'enleve le list syle afin qu'il n'y ait pas les .*/
  margin: 0;
  display: flex;/*Permet de mettre les boutons de la liste les uns a côtés des autres et non les uns en dessous des autres comme par defaut*/
  align-items: center;
}

header nav li{
  margin: 25px; /*espacement entre les bouttons */
}
/*Les liens dans le menu (ce qui corspond aux bouttons) */
header nav a{
  text-decoration: none;/*Pas de style de base sur les liens*/
  color: white;/*Text ecrit en blanc dans les boutons*/
  border-radius: 20px;/*Permet d'avoir des boutons arrondis*/
  padding: 20px;
  transition: 0.5s;/*Met un temps sur la transition avec le :hover*/
}

header nav ul li a:hover{/*Permet de faire un effet avec les boutons qui s'agrandissent et deviennent blanc quand la souris passe par dessus*/
  background-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1.2px) scale(1.1);
}

header nav ul li a.home:hover{/*Je ne veux pas que le bouton menu avec mon logo fasse l'agrandissement et l'effet blanc je lui ait donc mis la classe home*/
  background-color: transparent;/*Donc je met une couleur de fond transpart quand on passe par dessus*/
  transform: translateY(0) scale(1); /*Et j'enleve l'effet dagrandissment et de bouton qui bouge*/
}

header nav ul li a.pageUtilise{/*Permet de visualiser sur quelle page on est en rendant plus blanc le contours du bouton du menu J'ai mis la*/
  background-color: rgba(255, 255, 255, 0.2);
}

main{/*Regles pour le main */
  margin: 50px;
  margin-bottom: 90px;/*Pour que le footer soit bien representé*/
  padding: 20px;
  background-color: white;/*Blanc ce qui le fait re sortir du body*/
  border-radius: 10px;/*Arondi pour un style plus agreable*/
}

main h1{
  text-align: center;/*Je centre touts les premiers titre*/
}





header a img.bouton-np{/*Redimentionne et rend le bouton logo de la page rond j'ai cree une classe sur l'image NP*/
  width: 50px;
  height: 50px;/*Re dimentionne*/
  border-radius: 50%;/*Rendre rond l'image*/
  padding: 0;
}


.nodeco{/*Dans booksFilms je met des liens vers Book et film mais je ne veux pas qe ca soit le lien avec le style de base */
  text-decoration: none;
  color: #2c9df4;/*Je met donc les couleur du site*/
  transition: 0.5s;
}

.nodeco:hover, figure a:hover{/*Et je change avec l'autre bleu du site afin que le site garde une coherence vsisuelle*/
  color: #147ef8;
}

table{/*Regle pour le tableau que j'ai ajoute dans cities*/
  margin: 0;
  padding: 0;
}

main th{
  border: solid 2px #2c9df4;/*regle pour le contour des titre (premieres lignes) du tableau*/
}

main td{
  margin: 0;
  padding: 0;

  border: solid 2px #147ef8;/*Un autre bleu pour les cases du tableau*/
  border-radius: 3px;


}



.booksfilms{/*Je veux aligner au centre les titre h2 mais que dans la page book film donc je leur aient mis une classe booksfilms*/
  text-align: center;
}

img.menu-map{/*Image de la page Index qe je centre et arrondi les bords*/
  border-radius: 10px;
  margin-left: 650px;
}

/*Pour la page de books films afin de mettre les image a droite et le text a gauche je fais */
.paragraph{
  display: grid;/*display grid*/
  grid-template-columns: 1.5fr 0.5fr; /* texte / image */
  gap: 50px;
}

main.cv{/*Je fais de meme pour la page du cv afin de separer avec un barr plus fine a gauche avec ma photo et quelques informations sur moi pour differencier le main du cv des autre je lui ait donc mis la classe CV*/
  display: grid;
  grid-template-columns: 0.4fr 1.7fr; 
  gap: 50px;
}

.Presentation{/*Classe de la section place a gauche je lui ait mis une couleur de fond differente du reste du main afin de faire ressortir cette partie */

  border-radius: 15px;/*Et arrondi les bords*/
  background: linear-gradient(to bottom, #147ef8, #2c9df4)
}


.photoCV{/*Classe aplique uniquement a ma photo sur mon cv sur laquelle j'arondis les bords et la place au centre de la section presnetation*/
  margin: 25px;
  border-radius: 7px;
  margin-left: 25%;

  border: solid #f4f2f2;
}

dl{/*Je met le le text des liste de definitions en blanc etant donne que je ne les utilises qe sur fond bleu je peux applique cette  regle sur tout le site */
  color: #f4f2f2;
  padding: 20px;
  padding-bottom  : 40px;
}

main.cv p, li{/*J'ai ajuster la margin sur la page du cv compare aux autres et sur les listes*/
  margin-bottom :50px;
}

.BoutonFooter1{/*Bouton du footer qui est en haut (la fleche qui permet de retourner au top)*/
  position: fixed;/*tuoujours au meme endroit, ne bouge pas*/
  bottom: 70px;
  right: 20px;
}


.BoutonFooter2{/*Deuxieme bouton du footer je le place aligne avec le premier mais plus bas */
  position: fixed;
  bottom: 150px;
  right: 20px;
}

footer{/*Je veux qu'on puisse toujour voir le footer et qu'il s'affiche toujours en bas de la page*/
  position: fixed;
  width: 100%;
  bottom: 0;
  margin: 0;
}
footer a img:hover{/*Permet de changer la couleur de fond des deux boutons en bas du site lorque qu'on passe la souris dessus*/
  border-radius: 10px;
  transform: scale(1.2);/*Grossir le bouton*/
  background-color: rgba(0, 0, 200, 0.4)/*Changer la couleur de fond*/ 



}

footer p{/*Text du footer sur fond gris et ecrit en blanc je ne prend que la balise p d footer afin que les bouton ne soient pas sur le fond gris*/
  background: grey;
  color: #ffffff;
  text-align: center;
  font-size: 10px;
  margin: 0;
  padding: 5px;
}