/*____________________________________________________Initialisation____________________________________________________*/

/*Cette partie est composée des modifications qui touchent toute la page*/


/*__________________________Variables__________________________*/

/*Déclaration des variables*/
:root {
  --bleu:  #2d304f;
  --blanc: #f3fbfe;
  color : var(--bleu);
}

/*__________________________Scrollbar__________________________*/

/*Met l’épaisseur des scrollbar à 10px*/
::-webkit-scrollbar {
	/*Scrollbar Vertical*/
	width: 10px;
	/*Scrollbar Horizontal*/
	height: 10px;
  }

/*Personnalise les scrollbar*/
::-webkit-scrollbar-thumb {
	/*Les met en bleu*/
	background-color: var(--bleu);
	/*Arrondit leur bord*/
	border-radius: 10px;
  }
  

/*__________________________Séléction__________________________*/

/*Empêche l'utilisateur de sélectionner les images*/
img{
	-webkit-user-select: none;
}

/*Sélectionne en bleu sur blanc tous les éléments du Bandeau*/
#Bandeau *::selection{
 color: var(--bleu);
 background: var(--blanc);
}

/*Sélectionne en blanc sur bleu tous les éléments du Contenu*/
#Contenu *::selection {
 color: var(--blanc);
 background: var(--bleu);
 }

/*__________________________Séparation__________________________*/

/*Reset de la séparation horizontal et centre le texte qu'il contient*/
hr{
  border: 0;
  position: relative;
  text-align: center;
}

/*Création d'une barre horizontale*/
hr:before {
    content: '';
    background: linear-gradient(to right, transparent, var(--blanc), transparent);
    position: absolute;	
    height: 3px;

    /*Fait que la barre prend 90% de la page*/
    left: 5%;
    width: 90%;

    /*Remonte la barre pour passer derrière le texte*/
    top: 40%;
  }

/*Insertion du contenu de la séparation*/
hr:after {

	/*Indique que le contenu du pseudo élément sera la valeur 'data-content' de la balise hr dans l'HTML */
    content: attr(data-content);

    position: relative;
    padding: 0 .5em;
    color: var(--blanc);
    background-color: var(--bleu);

    /*Met en gras le texte*/
    font-weight: 555;
}

/*Modifie la couleur du gradient pour qu'il soit visible dans la partie contenue*/
#Contenu hr:before {
	background: linear-gradient(to right, transparent, var(--bleu), transparent);
}

/*Modifie la couleur du texte pour qu'il soit lisible dans la partie contenue*/
#Contenu hr:after{

	/*Espace les lettres de 5px*/
	letter-spacing: 5px;

	color: var(--bleu);
    background-color: var(--blanc);
}


/*__________________________Corp__________________________*/

/*Reset et configuration du body*/
body {
	margin: 0;
	padding: 0;

	background-color: var(--blanc);
	font-family: Helvetica;

	font-size: 1.07em;

	/*Création d'une grille fixant la bandeau à droite et le contenu à gauche*/
	display: grid;
	grid-template-areas: "Bandeau Contenu";

	/*Définition de la taille du bandeau à 20% de la page mais avec un minimum à 300px*/
	grid-template-columns: max(20vw,300px) 1fr;

	/* Place les Scrollbar en overlay */
	overflow-x: overlay;
	overflow-y: overlay;

	/* Paramétrage du fondu de chargement */
	animation-name: Fondu;
	animation-duration: 0.5s;

	/*Fait que l’animation ne se fera qu'une seule fois*/
	animation-iteration-count: 1; 
}

/*Configure l'animation de fondu*/
@keyframes Fondu { 
	/*Commence l’animation, invisible*/
	from {opacity: 0}

	/*Termine l’animation, visible*/
	to {opacity: 1}
} 

/*____________________________________________________Configuration____________________________________________________*/

/*Cette partie est composée de toutes les modifications du CV*/

/*__________________________Bandeau__________________________*/

/*Configuration du bandeau avec flex*/
#Bandeau{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;

	position: relative;

	background-color: var(--bleu);
	color: var(--blanc);

	/*Arrondi le bord inférieur droit*/
	border-bottom-right-radius: 50px;

	/*Indique que le bandeau doit prendre la plus grande valeur entre 100% du contenu et 100% de la page*/
	height: max(100vh, 100%);

	/* Paramétrage de la translation de demarage */
	animation-name: translation;
	animation-duration: 1.5s;

	/*Fait que l’animation ne se fera qu'une seule fois*/
	animation-iteration-count: 1; 
}

/*Configure l'animation de fondu*/
@keyframes translation { 
	/*Commence l’animation, decalé vers la gauche*/
	from {transform: translate(-5vw)}
} 

/*Configure un pseudo élément pour 'compléter' la vague du bandeau*/
#Bandeau::before{
	content : '';

	/*Fixe cet élément en haut à droite du bandeau*/
	position:absolute;
	top: 0;
	left: 100%;

	/*Le positionne en arrière plan*/
	z-index:-1 ;

	/*Arrondit le bord supérieur gauche*/
	border-top-left-radius: 50%;
	width:100px;
	height:100px;
	background:transparent;

	/*Complète la partie arrondie en projetant du bleu hors de l'élément*/
	box-shadow: -25px -25px 0px 0px var(--bleu);
}

/*Arrondit les bords de la photo et lui rajoute un contour blanc*/
#Bandeau .Portrait img{
	width: 10em;
	border-radius: 50%;
	border: 5px solid var(--blanc);
}

/*Centre le Nom/Prénom et grossit le texte*/
#Bandeau .Portrait h1{
	width: 100%;
	text-align: center;
	font-size: 1.4em;
}

/*Met à la ligne le Nom et espace ses lettres*/
#Bandeau .Portrait h1 span{
	display: block;
	letter-spacing: 9px;
}

/*Limite la largeur à 80% et reset le style d'écriture*/
#Bandeau .Contact{
	width: 80%;
	font-style: normal;
}

/*Reset les liens*/
#Bandeau .Contact a{
	/*Désactive le soulignement*/
	text-decoration: none;
	color: inherit;
}

/*Met un espace de 10px entre l’icône et le texte*/
#Bandeau .Contact i{
	padding-right: 10px;
}

/*Limite la largeur à 80% et aligne le texte*/
#Bandeau .Profil{
	width: 80%;
	text-align: center;
}

/*__________________________Contenu__________________________*/

/*Configure le contenu en grille*/
#Contenu{
	display: grid;
	grid-template-areas: 
		"Experience Formation" 
		"Experience Competences"
		"Experience Langues";

	grid-template-columns: 4fr 5fr;
	margin: 20px 50px 0 50px;
	grid-row-gap: 10px;
}

/*Fixe les conteneurs à leur zone*/
#Contenu .Experience{grid-area: Experience}
#Contenu .Formation{grid-area: Formation}
#Contenu .Competences{grid-area: Competences}
#Contenu .Langues{grid-area: Langues}

/*Reset du titre 2*/
#Contenu h2 {
	margin-block-start: 0;
	margin-block-end: 0;
	font-size: inherit;
}

/*Reset de la balise paragraphe des articles*/
#Contenu article p{
	margin-block-start: 0;
}

/*Mise en page des articles*/
#Contenu article{
	border-left: 3px solid var(--bleu);
	border-radius: 4px;
	padding-left: 10px;
	margin: 3%;
}

/*Change la couleur de la bordure d'un article quand on passe la souris dessus*/
#Contenu article:hover{
	border-color: #03A9F4;
}

/*Mise en ligne des puces d'une liste dans la catégorie formation*/
#Contenu .Formation ul li{
	display: inline;
	padding: 5px;
}

/*Mise en place d'une bordure gauche pour toutes les puces sauf la 1ère*/
#Contenu .Formation ul li+li{
	border-left: 2px solid grey;
}

/*__________________________Progression__________________________*/

/*Mise en forme des espaces horizontaux pour les conteneurs Étude et Progression*/
#Contenu .Progression,
#Contenu .Etudes{
	display: flex;
	height: calc(90% - 20px);
	flex-direction: column;
	justify-content: center;
}

/*Aligne au centre le texte et les jauges de progressions*/
#Contenu .Progression{
	align-items: center;
}

/*Création d'une grille fixant le nom et la jauge de progression associée à droite*/
#Contenu .Progression div{
	display: grid;
	grid-template-areas: "nom niveau";
	grid-template-columns: 1fr 1fr;
	transition: .3s;
}
/*Fixe les objets à leur zone*/
#Contenu .Progression span{grid-area: nom}

/*Espace de 15px toutes les compétences impaires*/
#Contenu .Progression div:nth-child(odd){
	margin-top: 15px;
} 

/*__________________________Jauges__________________________*/

/*Reset du conteneur de liste*/
#Contenu .Progression .Jauge{
	margin:0;
	padding:0;

	/*Fixe le conteneur à sa zone*/
	grid-area: niveau;
}

/*Création des cercles de progression*/
#Contenu .Jauge li{
	/*Met la liste en ligne*/
	display: inline-block;

	/*Forme un carré de 0.7em de côté*/
	width: .7em;
	height: .7em;

	/*Arrondit et colorie ses bords*/
	border-radius:50%;
	border : 3px solid var(--bleu);

	/*Met une marge de 3px autour*/
	margin : 3px;
}

/*Classe complétant le cercle de progression*/
#Contenu .Complet{
	background:var(--bleu);
}

/*Classe complétant à moitié le cercle de progression*/
#Contenu .Moitier{
	background:linear-gradient(to right, var(--bleu) 50%, var(--blanc) 50%);
}

/*Met à 110% la taille des jauges de progression quand on passe la souris dessus*/
#Contenu .Progression div:hover{
	transform: scale(1.1);
}


/*____________________________________________________Media Queries____________________________________________________*/

/*Cette partie est composée de toutes les requêtes média*/


/*__________________________Dark Mode__________________________*/

/* Changement des couleurs en cas de dark mode */
@media (prefers-color-scheme: dark){
	:root{
		/*Le bleu devient du gris bleu*/
	  --bleu:  #d9e1fa;

	  	/*Le blanc devient du bleu foncé*/
	  --blanc: #061A26;
	}
}

/*__________________________Portrait__________________________*/

/* Changement de disposition en cas d'orientation portrait */
@media (orientation : portrait) {
	body{
		/*Adapte la taille du texte pour être plus lisible sur un téléphone*/
		font-size: 1.5vh;

		/* Modifie la disposition des zones*/
		grid-template-areas: "Bandeau" 
						     "Contenu";

		/*Désactive les template de colonnes */
		grid-template-columns: none;
	}

	#Contenu{
		/* Modifie la disposition des zones*/
		grid-template-areas: 
			"Experience" 
			"Formation" 
			"Competences"
			"Langues";

		/*Reconfigure la grille*/
		margin: 0;
		grid-row-gap: 10px;
		grid-template-columns: none;
	}

	#Bandeau{
		/*Remet en page le bandeau*/
		height: auto;
		padding: 50px 0;
		width: 100%;
		border-bottom-left-radius: 50px;
		border-bottom-right-radius: 50px;
	}

	/*Reset le pseudo élément*/
	#Bandeau::before{
		height: 0;
		width: 0;
	}

	/*Reconfigure l'animation de translation*/
	@keyframes translation { 
		/*Commence l’animation, decalé vers le haut*/
		from {transform: translate(0,-5vh)}
	} 

}