/*Ceci est le fichier CSS servant pour toutes les pages du site de mon CV*/
/*La balise "body" est la partie principale du document, ici j'ai choisi le fond ainsi que ses différentes propriétés, je voulais que l'image soit fixe et sans répétition,
il fallait donc qu'elle s'adapte à l'image. J'ai aussi par exemple choisi la police principale ainsi que l'alignement du texte.*/
body {
	background-image: url(mesimages/gogh4.jpg);
	background-attachment: fixed;
	background-size: cover;
	opacity: 9;
	font-family: 'Oswald', sans-serif;
	text-align: center;
}
/*Ici j'ai déterminé la police, sa couleur et la taille pour les différentes échelles de titres
Pour le h4, la précision display permettait de ne pas sauter de ligne.*/
h1 {
	font-family: "Oswald", sans-serif;
	color: black;
	font-size: 80px;
}
h2 {
	font-family: "Oswald", sans-serif;
	font-size: 30px;
	color: #71ADAD;
}
h3 {
	font-family: "Oswald", sans-serif;
	font-size: 20px;
	color: #3C5B9E;
}
h4{
	display: inline;
	line-height: 1,5;
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	color: #3C5B9E;
}
/*Idem que pour les titres, cette partie formate les paragraphes.*/
p {
	line-height: 1,5;
	font-family: "Roboto", sans-serif;
	display: inline;
}
/*Idem, mais pour les listes à puces*/
ul {
	line-height: 1,5;
	font-family: "Roboto", sans-serif;
}
/*Ici je chosis mon style de puces, des cercles vides*/
li {
	list-style-type: circle;
}
/*J'ai trouvé ce code en faisant des recherches pour mon menu, avec le site 
"freefontend", cela permet de gérer les effets de transition et en particulier leur timing.*/
* {
	-webkit-transition-property: all;
	-webkit-transition-duration: .2s;
	-moz-transition-timing-function: cubic-bezier(100,50,21,6);
	-moz-transition-property: all;
	-moz-transition-timing-function: cubic-bezier(100,50,21,6);
}
/* Nous passons maintenant aux différents menus*/
/*Les sections suivantes permettent de formater mon menu principal.
Il y a, dans l'ordre, des précisions pour la disposition à droite, la couleur de fond, celle de la police, l'espacement à l'intérieur des cases, la taille de la police, le cadre, si le texte a une
décoration, l'espacement entre les lettres, une transformation en capitales, la disposition...
Ensuite ce bouton est développé pour les personnes malvoyantes avec un contraste accentué entre le fond et la couleur de la police. Puis il y a les précisions concernant 
la partie déroulée contenue dans ce menu, son emplacement, des détails concernant la police, les changements de couleur lorsque la souris passe dessus etc.*/
#menuprincipal {
	float: right;
	position: relative;
	margin-right: 50px;
}
.btn{
  color: white;
  background: #1b1b2b;
  padding:10px 20px;
  margin-top:20px;
  margin-bottom: 20px;
  margin-left: 10px;
  font-size:16px;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
}
.btn:hover{
  border:none;
  background:rgba(0, 0, 0, 0.4);
  background:#fff;
  padding:10px 20px;
  color:#1b1b1b;
}
/*Les sections suivantes permettent de formater le menu gérant les deux langues ainsi que la partie pour les personnes malvoyantes.
Il permet de gérer les choses similaires au menu principal, la disposition, les choix esthétiques, il y a des sections "low" qui correspondent à celles pour les 
personnes malvoyantes avec un renfort des contrastes.*/
.francais{
  color:white;
  background:rgba(0, 0, 0, 0.5);
  padding:10px 20px;
  font-size:16px;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
  float:left;
  position: relative;
  min-width:40px;
  border-radius: 5px;
  margin-right: 5px;
  margin-top: 20px;
  margin-left: 50px;
  text-decoration: none;
}
.francaislow{
  color:white;
  background:rgba(0, 0, 0);
  padding:10px 20px;
  font-size:16px;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
  float:left;
  position: relative;
  min-width:40px;
  border-radius: 5px;
  margin-right: 5px;
  margin-top: 20px;
  margin-left: 50px;
  text-decoration: none;
}
.francais:hover{
  border:none;
  background:rgba(0, 0, 0, 0.4);
  background:#fff;
  padding:10px 20px; 
  color:#1b1b1b;
  text-decoration: none;
}
.francaislow:hover{
  border:none;
  background:#CAD1BE;
  padding:10px 20px; 
  color:black;
  text-decoration: none;
}
.anglais{
  color:white;
  background:rgba(0, 0, 0, 0.5);
  padding:10px 20px;
  font-size:16px;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
  float:left;
  position: relative;
  min-width:40px;
  border-radius: 5px;
  margin-right: 5px;
  margin-top: 20px;
  text-decoration: none;
}
.anglaislow{
  color:white;
  background:rgba(0, 0, 0);
  padding:10px 20px;
  font-size:16px;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
  float:left;
  position: relative;
  min-width:40px;
  border-radius: 5px;
  margin-right: 5px;
  margin-top: 20px;
  text-decoration: none;
}
.anglais:hover{
  border:none;
  background:rgba(0, 0, 0, 0.4);
  background:#fff;
  padding:10px 20px;
  color:#1b1b1b;
  text-decoration: none;
}
.anglaislow:hover{
  border:none;
  background:#CAD1BE;
  padding:10px 20px; 
  color:black;
  text-decoration: none;
}
/*Les sections suivantes permettent de formater mon menu burger qui est visible seulement sur les petits écrans. Comme pour le menu principal cela précise la disposition, le style etc.
Il y a, dans l'ordre, des précisions pour la couleur de fond, celle de la police, l'espacement à l'intérieur des cases, la taille de la police, le cadre, si le texte a une
décoration, l'espacement entre les lettres, une transformation en capitales, le minimum de sa taille, la forme de la case (angles arrondis) ainsi que son alignement à gauche.
Ensuite ce bouton est développé pour les personnes malvoyantes avec un contraste accentué entre le fond et la couleur de la police. Puis il y a les précisions concernant 
la partie déroulée contenue dans ce menu, son emplacement, des détails concernant la police, les changements de couleur lorsque la souris passe dessus etc.*/
.dropbtn {
  background:rgba(0, 0, 0, 0.5);
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
  min-width:40px;
  border-radius: 5px;
  margin-left: 15px;
}
.dropbtnlow {
  background:black;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
  min-width:40px;
  border-radius: 5px;
  margin-left: 15px;
}
.dropdown {
   display: none;
   float: left;
   margin-top: 20px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius:5px;
  margin-left: 15px;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  letter-spacing:2px;
  text-transform:uppercase;
  text-align: left;
}
.dropdown-content a:hover {
	background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background:rgba(0, 0, 0, 0.5);
}
/*Ce menu apparaît sur les petits écrans, lorsque la section contact présente sur toutes les pages disparaît pour des raisons d'organisations des containers, c'est
un simple bouton permettant un accès rapides aux contacts*/
#menucontact {
   float: right;
   margin-top: 10px;
   margin-right: 15px;
   display: none;
}
/*Les sections suivantes vont gérer les différents blocs ou containers présents sur le site, en particulier leur disposition, mais aussi des aspects de style comme pour
mes différents menus.*/
#profil {
	width: auto;
	max-width: 180px;
	float:left;
	margin-top: 10px;
}
#litterature {
	width: 250px;
	float: left;
	margin-right: 10px;
	margin-top: 10px;
}
#mythologie {
	width: 250px;
	float: right;
	margin-left: 10px;
	margin-top: 30px;
}
#patisserie  {
	width: 250px;
	float: left;
	margin-right: 10px;
	margin-top: 25px;
}
#titre {
	display: flex;
	justify-content: space-around;
	max-width: 100%;
	border-radius: 5px;
	margin: 0 auto;
	margin-top: 20px;
	padding-right: 0px;
	background-color: rgb(248, 248, 255, .5);
	font-size: 80px;
	text-align: right;
	color: #1b1b2b;
}
#titrelow {
	display: flex;
	justify-content: space-around;
	max-width: 100%;
	border-radius: 5px;
	margin: 0 auto;
	margin-top: 20px;
	padding-right: 0px;
	background-color: rgb(248, 248, 255);
	font-size: 80px;
	text-align: right;
	color: #1b1b2b;
}
#containerbis {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
#apropos {
	font-size: 18px;
	font-family: "Roboto", sans-serif;
	text-align: left;
	border-radius: 5px;
	margin: 0 auto;
	margin-top: 20px;
	padding: 20px;
	background-color: white;
}
#qualites {
	font-size: 18px;
	font-family: "Roboto", sans-serif;
	text-align: left;
	border-radius: 5px;
	margin: 0 auto;
	margin-top: 20px;
	padding: 20px;
	background-color: white;
}
#contact {
	font-size: 18px;
	font-family: "Roboto", sans-serif;
	text-align: left;
	border-radius: 5px;
	margin: 0 auto;
	margin-top: 20px;
	padding: 20px;
	background-color: white;
}
#contact2 {
	font-size: 18px;
	font-family: "Roboto", sans-serif;
	text-align: left;
	border-radius: 5px;
	margin: 0 auto;
	margin-top: 20px;
	padding: 20px;
	background-color: white;
}
#infos {
	border: 1px solid black;
	margin-left: 20px;
	margin-right:20px;
	margin-bottom: 20px;
	padding: 20px;
	background-color: #EAEAEA;
}
#formations {
	border: 1px solid black;
	margin-left: 20px;
	margin-right: 20px;
	padding: 30px;
	background-color: white;
}
.droits {
	color: black;
	background-color : #CAD1BE;
	font-size: 12px !important;
	font-family: "Roboto", sans-serif;
}
/*Les quatres sections suivantes ont un impact sur les logos présentés dans les contacts, ici ce sont les couleurs qui sont précisées.*/
.fa-instagram {
	color:#71ADAD;
}
.fa-instagram:hover {
	color:black !important;
}
.fa-linkedin-in {
	color:#71ADAD;
}
.fa-linkedin-in:hover {
	color:black !important;
}
/*La fin du css concerne l'adaptation des contenus aux écrans plus petits, cela a donc surtout un impact sur la taille et la disposition des éléments, afin d'aider le responsive.*/
@media screen and (max-width: 1000px) {
	#titre {
		font-size: 10vw !important;
	}
	#titrelow {
		font-size: 10vw !important;
	}
	h2 {
		font-size: 6vw !important;
	}
	#profil {
		width: 25vw !important; 
		margin-top: auto !important;
	}
	#titrelow #titre {
		font-size: 10vw !important;
	}

	#litterature{
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30px; 
		float: none;
	}
	#mythologie{
		display: block;
		margin-left: auto;
		margin-right: auto; 
		float: none;
	}
	#patisserie{
		display: block;
		margin-left: auto;
		margin-right: auto; 
		float: none;
	}
	#menuprincipal {
		display: none;
	}
	#langue {
		display: none;
	}
	#languelow {
		display: none;
	}
	.dropdown{
		display:block !important;
	}
	#menucontact{
		display:block !important;
	}
	.row{
		display: flex;
		flex-flow: column-reverse;
	}
	#contact {
		display: none;
	}
}