@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,600italic,700");

/*
	Miniport by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		padding-top: 3.5em;
	}


	body, input, textarea, select {
		font-family: 'Open Sans', sans-serif;
		line-height: 1.85em;
		color: #888;
		font-weight: 300;
		font-size: 13pt;
	}

	a {
		-moz-transition: color .2s ease-in-out;
		-webkit-transition: color .2s ease-in-out;
		-ms-transition: color .2s ease-in-out;
		transition: color .2s ease-in-out;
		color: #43B3E0;
		text-decoration: underline;
	}

		a:hover {
			color: #43bff0 !important;
		}

		a img {
			border: 0;
		}

	b, strong {
		font-weight: 600;
		color: #3e3e3e;
	}

	i, em {
		font-style: italic;
	}



	h1, h2, h3, h4, h5, h6 {
		color: #3e3e3e;
		margin: 0 0 0.75em 0;
	}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		text-decoration: none;
		color: inherit;
	}

	h2, h3, h4, h5, h6 {
		font-weight: 700;
	}

	h1 {
		font-size: 3.25em;
		letter-spacing: -0.025em;
		font-weight: 300;
		margin-bottom: 40px;

	}

		h1 strong {
			font-weight: 700;
		}

	h2 {
		font-size: 2em;
		letter-spacing: -0.015em;
	}

	h3 {
		font-size: 1.5em;
		letter-spacing: -0.015em;
	}

	em, i {
		font-style: italic;
	}

	br.clear {
		clear: both;
	}

	p, ul, ol, dl, table {
		margin-bottom: 2em;
	}

	header {
		margin: 0 0 1em 0;
	}

		header > p {
			font-size: 1.25em;
			margin: 0;
		}

	footer {
		margin: 3em 0 0 0;
	}

		footer > p {
			font-size: 1.25em;
		}

/* Container */

	.container {
		margin: 0 auto;
		max-width: calc(100% - 50px);
		width: 1200px;
	}





/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}




/* Image */

	.image {
		display: inline-block;
		position: relative;
	}

		.image img {
			display: block;
			width: 66%;
		}

/* Nav */
#nav {
    background-color: #282828;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10000;
    height: 3.5em;
    line-height: 3.5em;
}

#nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 1em;
}

#nav .main-nav, #nav .language-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

#nav .main-nav {
    flex: 1;
    justify-content: center;
}

#nav li {
    display: inline-block;
}

#nav a {
    transition: background-color .2s ease-in-out;
    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    height: 2.5em;
    line-height: 2.5em;
    padding: 0 1.25em;
}

#nav a.active {
	background: #a1a1a1;
	pointer-events: none;
}

#nav a:hover {
    color: #fff !important;
    background: #383838;
}



/* Articles */

	body > article {
		margin-bottom: 0;
	}

	#top {
		padding: 5em 0 0em 0;
		text-align: left;
	}

		#top .image {
			border-radius: 100%;
			width: 20em;
			height: 15em;
			margin: 0;
		}

		#top .image img {
			border-radius: 100%;
		}

		#top h1 {
			margin-top: 0.35em;
			line-height: 1em;
		}

		#top p {
			font-size: 1.5em;
			line-height: 1.75em;
		}

		  /* Styles pour le pied de page */
		  footer {
			background-color: #333;
			color: #fff;
			text-align: center;
			padding: 20px 0;
		  }
		  
		  footer a {
			color: #fff;
		  }

		  footer h2 {
			color: #fff;
		  }
		  
		  footer a:hover {
			text-decoration: underline;
		  }

		  /* // El gros carré jaune qui contient du bon texte */
	.quiSuisJe{
		text-align: center;
		background-color: #FFFACD;
		padding: 16px;
		margin-left: 5em;
		margin-right: 5em;
		margin-bottom: 1em;
	}

	.sousQui{
		text-align: center;
		padding: 16px;
		margin-left: 5em;
		margin-right: 5em;
		font-style: italic;
	}

	.mesProjets{
		text-align: center;
		padding: 16px;
		margin-left: 5em;
		margin-right: 5em;
		margin-bottom: 1em;
	}

	.box{
		display: flex;
		align-items: center;
		margin-left: 5em;
		margin-right: 5em;
	}

	.item {
		flex-grow: 1;
		list-style: none;
	  }
	  
	.item + .item {
		margin-left: 2%;
	}

	.item:hover {
		opacity: 0.5;
	}

	.listeJeux{
		width: 10em;
		height: 8em;
		border-radius: 1em;
		object-fit:cover;
	}

	.projet{
		text-align: center;
		padding: 16px;
		margin-left: 5em;
		margin-right: 5em;
		margin-bottom: 1em;
	}

	.projet i{
		font-weight: bold;

	}

	.projet {
		display: flex;
		align-items: center;
		/* margin-bottom: 30px; */
		border-top: #282828 solid 2px;
	  }
	  
	  .projet h3,
	  .projet p,
	  .projet i {
		flex: 1;
		width: 100%;
	  }
	  
	  .projet p:last-child {
		margin-bottom: 0;
	  }
	  
	  .projet img {
		width: auto;
		height: auto;
		max-width: 30em; /* Ajustez la largeur selon vos préférences */
		max-height: 20em;;
		margin-left: 20px;
		border-radius: 1em;
		object-fit:cover;

	  }

	  .commentaire{
		font-size: 0.8em;
		line-height: 1.2em;
	  }

	  .image{
		align-items: center;
		width: 30em;
	  }

	  .aPropos{
		padding: 3em;
		border-top:#282828 solid 2px;
		text-align: center;
		list-style: none;
	  }

	  .aPropos li{
		display: inline-block;
		padding-left: 0;
		margin-left: 0;
		list-type: none;
	}

	.button {
		background-color: #282828;
		color: #fff;
		padding: 0.5em;
		border-radius: 0.5em;
		text-decoration: none;
	  }
	  
	  .button:hover {
		background-color: #383838;
		color: #fff; /* Couleur du texte au survol */
		text-decoration: none; /* Décoration du texte au survol */
	  }
	  
	  .button:active {
		background-color: #383838;
		color: #fff; /* Couleur du texte au clic */
		text-decoration: none; /* Décoration du texte au clic */
	  }

	  .contact{
		padding: 3em;
		border-top:#282828 solid 2px;
		text-align: center;
		list-style: none;
	  }

	.footer{
		text-align: center;
		list-style: none;
	  }

	  .footer li{
		display: inline-block;
		padding-left: 0;
		margin-left: 0;
		list-type: none;
	  }

	  .footer a{
		padding: 0.5em;
	}

	.button-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px; /* Espacement horizontal entre les boutons */
		justify-content: center;
	  }
	  
	  .button {
		background-color: #282828;
		color: #fff;
		padding: 0.5em;
		border-radius: 0.5em;
		text-decoration: none;
		margin-bottom: 10px;
	  }

	.buttonCV{
		background-color: #dadada;
		color: #282828;
		padding: 0.2em;
		border-radius: 0.5em;
		text-decoration: none;
	}

	.telecharger{
		padding: 0;
		margin: 0;
	}