@charset "UTF-8";

/* Déclaration des variables utiles dans le code */
:root {
	--bleu-fonce: #0f056B;
	--blanc: #ffffff;
	--gris: #9E9E9E;
	--gris-fonce: #495057;
	--noir: #000000;
	--police-sans-serif: sans-serif;

}

/* Style corps de page */

body {
	margin: 0;
	line-height: 1.5rem;
	color: var(--gris-fonce);
	background-color: var(--blanc);
	font-family: var(--police-sans-serif);
}

.titre{
	color: var(--blanc);
}

h2{

	margin-bottom: 0.5rem;
	line-height: 1.2rem;
}


ul{
	list-style-type: none;
}


a{
	text-decoration: none;
	color: var(--blanc);
}

.resume p a{
	color: var(--gris-fonce);
}


.description{
	margin-bottom: 2.5rem;
}


.description, .resume{
	text-align: center;	
}

.suffixe{
	color: var(--bleu-fonce)
}


.icone-sociale{
	width: 100%;
	margin-top:1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 4rem;
	width: 4rem;
	background-color: var(--gris-fonce);
	color: var(--blanc);
	border-radius: 100%;
	font-size: 1.5rem;
	margin-right: 1.5rem;
}

.caractere{
	margin-top: 2rem;
}

.discipline{
	margin-top: 2rem;
}

.competition{
	margin-top: 2rem;
}

.photo_profil{
	border-radius: 100%;
}


/* Responsive aprés 1400px */

@media (min-width: 1300px) {
	
	.nav{
		background-color: var(--bleu-fonce);
		padding-left: 0;
		padding-right: 0;
		text-align: center;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: 17rem;
		height: 100%;
	}
	
	.nav a{
		float: left;
		display: block;
		color: var(--blanc);
		text-align: center;
		padding: 14px 16px;
		font-size: 17px;
	}
	
	.photo_profil{
		width: 20%;
	}
}
  
/* Responsive avant 1400px */
@media (max-width: 1299px) {
	
	.titre{
		margin-left: 1em;
	}
	
	.line {
		width: 30px;
		height: 3px;
		background: white;
		margin: 5px;
	}
	
	.nav {
		background-color: var(--bleu-fonce);
		width: 100%;
		padding: 3px;
	}

	nav {
		position: relative;
	}

	.hamburger {
		position: absolute;
		right: 5%;
		top: 50%;
		transform: translate(-5%, -50%);
	}

	.menu {
		position: fixed;
		text-align: center;
		background: var(--bleu-fonce);
		height: 300vh;
		width: 100%;
		flex-direction: column;
		clip-path: circle(0px at 90% -2%);
		transition: 2s;
	}
  
	.menu.open {
		clip-path: circle(900px at 90% -10%);
	}
  
	.menu li {
		margin-top: 1em;
	}
  
	.menu li a {
		font-size: 25px;
	}
  
	li.fade {
		opacity: 1;
	}
	
	.photo_profil{
		margin-top: 1.5em;
		width: 50%;		
	}
	
}