/*	ma fiche de style pour le CV en ligne */



/*	Début code bandeau d'entête */
	#bandeau{
		background-image: url(images/blur-1283865_1920-Pexels_PIXABAY.jpg);
		background-size: cover;
		height: 270px;
		background-position-y: 50%;
	}
	#photoprofil{
	/*
		background-image: url(images/IMG_20210309_145925-FB.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position-x: center;
	*/
		float: right;
		width: 200px;
		margin-top: 40px;
		margin-right: 10px;
	}
/*	Fin code bandeau d'entête */


/*	Début code navbar */
	.topnav {
		overflow: hidden;
		background-color: #E9967A;
		position: sticky;
		top: 0;
		z-index: 2;
	}
	.topnav a {
		float: left;
		display: block;
		color: white;
		text-align: center;
		font-weight: bold;
		padding: 12px 16px;
		text-decoration: none;
		border-right: 1px solid #eecfbf;
	}
	.topnav a:hover {
		background-color: #eabca5;
		color: rgb(51, 51, 51);
	}
	.topnav a.active {
		background-color: #EDA78F;
	}
	.topnav .icon {
	  display: none;
	}

	@media screen and (max-width: 688px) {
		.topnav {
			position: sticky;
			top: 0;
			z-index: 2;
		}
		.topnav a:not(:first-child) {
			display: none;
		}
		.topnav a.icon {
			float: right;
			display: block;
		}
	}

	@media screen and (max-width: 688px) {
		.topnav.responsive {
			position: sticky;
			top: 0;
			z-index: 2;
		}
		.topnav.responsive .icon {
			position: absolute;
			right: 0;
			top: 0;
		}
		.topnav.responsive a {
			float: none;
			display: block;
			text-align: left;
		}
	}
/*	Fin code navbar */


/*	Début code mise en forme du texte */
	body{
		background-color: #F4E1D7;
	}
	h1{
		font-family: 'Clicker Script';
		text-align: center;
		margin-top: 40px;
		margin-bottom: 40px;
		font-size: 80px;
		color: #E68362;
	}
	h2{
		font-family: 'Clicker Script';
		font-style: italic;
		text-decoration: underline;
		text-align: center;
		margin-bottom: 30px;
		margin-top: 10px;
		font-size: 35px;
		color: #E68362;
	}
	h3{
		font-family: 'Clicker Script';
		text-align: center;
		font-size: 25px;
		font-weight: bold;
	}
	p{
		padding-left: 20px;
		padding-right: 20px;
	}
	hr {
		border: 0;
		height: 1px;
		background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
		/*border-top: 3px double black;*/
	}
	.presentation{
		text-align: center;
		font-size: 16px;
		padding: 0% 10%;
	}
	.notecontact{
		text-align: center;
		font-size: 14px;
		font-style: italic;
		margin-top: 20px;
		padding: 0% 10%;
	}
	.legendecredit{
		margin-top: -10px;
		padding-bottom: 15px;
		text-align: center;
		font-size: 11px;
	}
	.detailformation{
		margin-top: 7px;
		padding-bottom: 7px;
		font-size: 12px;
	}
	.titrecomp {
		color: white;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		padding: 7px 0px;
		background-color: #E9967A;
	}
	.detailcomp{
		padding: 13px 20px 13px 20px;
		font-size: 12px;
		line-height: 150%;
	}
/*	Fin code mise en forme du texte */


/*	Début code pied-de-page */
	#piedpage{
		background-color: #E9967A;
	}
	#piedpage a {
		display: inline-block;
		color: white;
		text-align: center;
		padding: 5px;
		text-decoration: none;
	}
	.active {
		background-color: #EDA78F;
	}
/*	Fin code pied-de-page */


/*	Début code mise en forme page "présentation & loisirs" */
	.btn-outline-secondary {
		border-width: 2px;
		border-style: solid;
		padding-top: 8px;
		padding-bottom: 8px;
		color: #E9967A;
		border-color: #E9967A;
		background-color: transparent;
		background-image: none;
		cursor: pointer;
	}
	.btn-outline-secondary:hover {
		background-color: white;
		color: rgb(51, 51, 51);
	}
	/*.btn-outline-secondary a: hover{
		color: white;
		background-color: #E9967A;
	}*/
	/*#loisirs{
		display: flex;
		justify-content: space-around;
	}*/
	.blocsloisirs{
		z-index: 1;
		background-color: #eabca5;
		text-align: center;
		line-height: 100%;
		padding-bottom: 1px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		margin-bottom: 20px;
	}	
	.iconesloisirs{
		background-color: #E9967A;
		/*padding: 7px 100px 7px 100px;*/
		padding: 7px;
		margin-bottom: 10px;
	}
/*	Fin code mise en forme page "présentation & loisirs" */


/*	Début code mise en forme pages "expérience" & "formations" */
	.collapsible {
		background-color: #E9967A;
		color: white;
		cursor: pointer;
		padding: 5px 15px;
		margin-left: 10%;
		width: 80%;
		border: none;
		outline: none;
	}
	.alignleft {
		float: left;
		font-size: 16px;
	}
	.alignright {
		float: right;
		font-size: 14px;
	}
	.collapsible:hover {
		background-color: #EDA78F;
		color: rgb(51, 51, 51);
	}
	.content {
		padding: 0px 18px;
		margin-left: 10%;
		width: 80%;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
		background-color: #eabca5;
	}
	.forma{
		display: flex;
		flex-flow : row wrap;
		justify-content: space-around;
	}
	.colonnes {
		flex: 50%;
	}

	@media screen and (max-width: 780px){
		.forma{
			flex-flow: column wrap;
		}
	}
	.htags{
		border-top: 1px rgb(51, 51, 51, 0.7) solid;
		overflow: hidden;
	}
	.bulleinfo{
		font-size: 12px;
		color: rgb(51, 51, 51);
		padding: 3px 4px;
		border: 1px rgb(51, 51, 51, 0.8) solid;
		border-radius: 4px;
		background-color: #eecfbf;
		float: right;
		display: inline;
		margin-left: 5px;
		margin-bottom: 10px;
	}
/*	Fin code mise en forme pages "expérience" & "formations" */


/*	Début code mise en forme page "Travaux" */
	/*(pourquoi pas ajouter un effet de transition fondue pour changer de slide)*/
	.container {
		position: relative;
		max-width: 70%;
	}
	.cursor {
		cursor: pointer;
	}
	.mySlides {
		display: none;
	}
	.prev,
	.next {
		position: absolute;
		top: 40%;
		width: auto;

		padding: 16px;
		margin-top: 0%;
		background-color: #E9967A;

		color: white;
		font-weight: bold;
		font-size: 20px;

		user-select: none;
		-webkit-user-select: none;
	}
	.prev {
		left: -19px;
		border-radius: 5px 0px 0px 5px;
	}
	.next {
		right: -19px;
		border-radius: 0px 5px 5px 0px;
	}
	.prev:hover {
		color: white;
		background-color: #E9967A;
		opacity: 0.7;

		left: -28px;
		transition: .3s ease;
	}
	.next:hover{
		color: white;
		background-color: #E9967A;
		opacity: 0.7;

		right: -28px;
		transition: .3s ease;
	}

	.numbertext {
		color: #f2f2f2;
		font-size: 16px;
		font-weight: bold;
		background-color: #E9967A;
		border-radius: 5px;
		padding: 6px 10px;
		margin: 8px 10px;
		position: absolute;
		text-align: center;
		margin-bottom: 13%;
	}
	.caption-container {
		text-align: center;
		background-color: #E9967A;
		padding: 12px 16px 12px 16px;
		color: white;
	}
	.row{
		margin-left: 0%;
		width: 100%;
	}
	.column {
		float: left;
		max-width: 14.28%; /*pour 7 slides*/
	}
	.demo {
		opacity: 0.5;
		border-top: 6px solid #E9967A;
	}
	.active,
	.demo:hover {
		opacity: 1;
	}
	.row:after {
		content: "";
		display: table;
		clear: both;
	}
/*	Fin code mise en forme page "Travaux" */


/*	Début code mise en forme page "crédits" */
	.responsive {
		padding: 0 6px;
		float: left;
		width: 24.99999%;
	}
	.gallery {
		background-color: white;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	.desc {
		padding-top: 10px;
		margin-bottom: -10px;
		text-align: center;
	}
	* {
		box-sizing: border-box;
	}
	.gallery img {
		width: 100%;
		height: auto;
	}
	@media only screen and (max-width: 700px) {
		.responsive {
			width: 49.99999%;
			margin: 6px 0;
		}
	}
	@media only screen and (max-width: 500px) {
		.responsive {
			width: 100%;
		}
	}
	.clearfix:after {
		content: "";
		display: table;
		clear: both;
	}
/*	Fin code mise en forme page "crédits" */