@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700;900&display=swap');


:root{
	--color: #343434;
	--background: #efefef;
	--bg_menu: #1b566c;
	--primary: #db674a;
	--hover: #1e4351;
}

*{
	box-sizing: border-box;
}

html, body{
	margin: 0;
	padding: 0;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	color: var(--color);
	background: var(--background);
	box-sizing: border-box;
	-webkit-font-feature-settings: "lnum";
	-moz-font-feature-settings: "lnum";
	font-feature-settings: "lnum";
}

.background_icon{
	position: fixed;
	top: 0;
	z-index: 1;
}

a{
	color: #000;
	transition: all .2s ease-in-out;
}

small{
	font-size: 12px;
	vertical-align: top;
}

#principal{
	z-index: 2;
	position: relative;
	text-align: center;
	margin-top: 16px;
}


header{
	display: inline-flex;
	align-items: center;
	gap: 64px;
}

.header__logo svg{
	height: 120px;
}

nav{
	margin-top: 8px;
	background: var(--bg_menu);
	color: #FFF;
}

nav h1{
	margin-top: 60px;
	margin-bottom: 0;
	color: var(--bg_menu);
}

nav h2{
	margin: 0;
	font-size: 16px;
}


.slideshow{
	position: relative;
	/*background: url(https://pcsi.magnin.ovh/images/fond-accueil.jpg);*/
	background-size: cover;
}

.slideshow:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background-color: rgba(0,0,0,.55);*/
	content: "";
}





section h1{
	color: var(--filiere, var(--bg_menu));;
	font-size: 32px;
	font-weight: 900;
	margin-bottom: 0;
}

section h2{
	color: #FFF;
	font-size: 22px;
	margin: 8px 0;
	font-weight: 400;
	background: var(--filiere, var(--bg_menu));;
	display: inline-block;
	padding: 8px 64px;
}

section h3{
	margin: 8px;
	font-size: 20px;
	color: var(--filiere);
	text-transform: uppercase;
}





.breadcrumb{
	display: flex;
	justify-content: center;
}

.breadcrumb div{
	color: var(--filiere);
	border: 1px solid var(--filiere);
	border-radius: 16px;
	padding: 8px 16px;
	margin: 8px 24px;
	position: relative;
}

.breadcrumb div:not(:last-child):after{
	content: ">>>";
	color: var(--filiere);
	font-weight: 700;
	display: block;
	position: absolute;
	top: 8px;
	right: -40px;
}

.breadcrumb .active{
	color: #FFF;
	background: var(--filiere);
}





.menu{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.menu ul{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.menu ul a{
	display: block;
	margin: 0px 0px;
	padding: 8px 24px;
	line-height: 40px;
	position: relative;
	transition: .3s;
	color: #FFF;
	text-decoration: none;
	white-space: nowrap;
	text-transform: uppercase;
	font-weight: 700;
}

.menu ul a:before{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	transition: .3s;
	border-bottom: 4px solid;
}

.menu ul li:hover > a{
	background: var(--hover);
}

.menu ul a:hover:before{
	width: 100%;
}

.menu ul{
	position: relative;
}


.menu ul .menu_item{
	display: grid;
	display: none;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 16px;
	position: absolute;
	top: 56px;
	left: 0;
	z-index: 1000;
	background: var(--hover);
	width: 100%;
	text-align: left;
	padding: 24px;
}

.menu ul .menu_item a{
	display: inline-flex;
	align-items: center;
	padding: 4px 16px;
	line-height: 20px;
	text-transform: initial;
	font-weight: 400;
}

.menu_item a:hover{
	background: var(--bg_menu);;
}

.menu ul .menu_item a svg{
	margin-right: 8px;
}

.menu ul .menu_item .menu__title{
	font-weight: 700;
	font-size: 17px;
	margin-left: 16px;
	margin-bottom: 4px;
	text-decoration: underline;
}

.menu ul li:hover .menu_item{
	display: grid;
}

.menu_item hr{
	grid-column-end: span 2;
	width: 100%;
	border: 2px solid;
}

.menu .btn{
	background: var(--color);
	padding: 16px 32px!important;
}

.menu .btn:hover{
	background: var(--bg_menu);
}

.menu .btn:hover:before{
	width: 0%;
}





.container{
	padding: 16px 0;
}

.container, .container img{
	max-width: 1100px;
	width: 100%;
	margin: auto;
	text-align: center;
}

.container a:hover, .postbac a:hover{
	color: var(--hover);
	font-weight: bold;
	transform: scale(1.1);
}



.grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-gap: 25px;
}

.grid-tiers{
	display: grid;
	grid-template-columns: 75fr 25fr;
	grid-gap: 25px;
}



.card{
	border: 1px solid;
	border-radius: 4px;
	padding: 16px;
	color: var(--color);
	background: #FFF;
	box-shadow: 9px 16px 15px rgba(0,0,0,.1), 3px 3px 0 rgba(0,0,0,.1);
}

.card-full{
	grid-column-end: span 2;
}

.card li, .actucard li{
	list-style-type: square;
	text-align: left;
}

.card hr{
	width: 90%;
	border-color: var(--color);
}

a.card{
	text-decoration: none;
}

.images{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 10px;
}

.images img{
	width: auto;
	height: var(--grid_img);
	margin: 4px;
}

.card-click{
	border: 5px solid;
}

.card-inversed{
	display: inline-flex;
	text-align: left;
	border: 4px solid var(--background);
	padding: 10px;
	margin-bottom: 30px;
}




.container ul{
	margin: 0;
}

.container li{
	list-style: none;
	display: grid;
	grid-template-columns: 24px 1fr;
	text-align: left;
}

.list__arrow li::before{
	content: '';
	display: flex;
	align-items: center;
	width: 20px;
	height: 15px;
	background-color: var(--filiere);
	mask-image: url("images/arrow-right.svg");
	-webkit-mask-image: url("images/arrow-right.svg");
}

.puces li::before{
	content: '';
	background-color: var(--filiere);
	mask-image: url("images/puces.svg");
	-webkit-mask-image: url("images/puces.svg");
	display: flex;
	align-items: center;
	width: 16px;
	height: 16px;
}





.citation{
	width: 500px;
	margin: 16px auto;
	position: relative;
}

.citation::before{
	content: '';
	background-color: var(--filiere);
	mask-image: url("images/guillemet.svg");
	-webkit-mask-image: url("images/guillemet.svg");
	display: flex;
	width: 48px;
	height: 49px;
	position: absolute;
	top: -8px;
	left: -48px;
}






.page_filiere{
	position: fixed;
	/*-webkit-mask-image: url(images/demi_cercle.svg) no-repeat;
	mask-image: url(images/demi_cercle.svg) no-repeat;*/
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 164px;
	height: 150px;
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	stroke: #FFF;
	fill: none;
}

.page_filiere__bg{
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	color: var(--filiere, #1e4351);
	stroke: none;
}




.postbac{
	display: inline-flex;
	flex-direction: column;
	margin-top: 16px;
	margin-bottom: 32px;
}

.postbac__container{
	height: 100%;
	margin: 8px;
}

.postbac__container:not(:last-child):after{
	content: '';
	background-color: var(--filiere);
	mask: url("images/arrow-down.svg") no-repeat center;
	-webkit-mask: url("images/arrow-down.svg") no-repeat center;
	display: block;
	height: 60px;
	margin-top: 16px;
}

.postbac__body{
	display: flex;
	gap: 32px;
	justify-content: center;
}

.postbac__body h2{
	display: block;
}

.postbac__container .card{
	width: 320px;
	flex-basis: 100%;
	padding: 8px;
}

.postbac__container .separator{
	align-self: center;
	font-size: 24px;
}






.home__filieres_logo{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
	text-decoration: none;
	transition: all .2s ease-in-out;
}

.home__filieres_logo:hover{
	transform: scale(1.3)!important;
	gap: 0;
	color: inherit!important;
}





.card table{
	border-collapse: collapse;
	display: flex;
	justify-content: center;
}

.card th, .card td{
	border: 1px solid var(--filiere);
	padding: 2px 8px;
}

.card th{
	background: var(--filiere);
	color: #FFF;
	font-weight: 400;
	padding: 4px;
}

.card th:first-child{
	font-weight: 700;
}

.card td:first-child{
	text-align: left;
}




.line{
	border-left: 12px solid var(--bg_menu);
	padding-left: 16px;
	margin-bottom: 32px;
}



.circle{
	/*grid-template-columns: repeat(4, 250px);*/
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	justify-content: center;
}

.circle .card{
	border-radius: 50%;
}






.agenda{
	display: grid;
	grid-template-columns: 64px 1fr;
	align-items: center;
	margin: 16px;
	gap: 16px;
}

.agenda__date{
	background: var(--bg_menu);
	padding: 4px 16px;
	box-sizing: border-box;
	color: #FFF;
	font-size: 14px;
}

.agenda__jour{
	color: #FFF;
	font-size: 28px;
}

.agenda__body{
	text-align: left;
}






.imgfirst img{
	object-fit: contain;
	max-height: 250px;
	width: auto;
	margin: 10px;
}

.imgfirst__right{
	flex-direction: row-reverse;
}

.imgfirst{
	display: flex;
	align-items: center;
	justify-content: center;
}

.inline{
	display: inline-block;
}

.flex{
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex.center{
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
}

.center{
	text-align: center;
}

.left{
	text-align: left;
}

.justify{
	text-align: justify;
}

.margin{
	margin: 30px;
}

.mb{
	margin-bottom: 10px!important;
}

.nomargin{
	margin: 5px;
}

.padding{
	padding: 20px;
}

.hidden{
	display: none;
}

.border{
	border: 2px solid var(--bg_menu);
	margin-bottom: 24px;
	height: 100%;
}

label.checkbox{
	display: block;
}






input[type=submit], .btn{
	background: var(--bg_menu);
	color: #FFF;
	text-decoration: none;
	min-width: 125px;
	padding: 10px;
	border: 0;
	transition: 0.3s;
	font: inherit;
	cursor: pointer;
}

input[type=submit]:hover, .btn:hover{
	background: var(--hover);
}

.btn__round{
	border-radius: 24px;
}

form.contact{
	display: flex;
	justify-content: center;
	text-align: left;
}

.btn-big{
	text-decoration: none;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 2px solid var(--color);
	border-radius: 30px;
	padding: 10px 80px;
	margin-bottom: 20px;
	color: var(--color);
	background: #FFF;
	transition: .3s;
	box-shadow: 9px 16px 15px rgba(0,0,0,.1), 3px 3px 0 rgba(0,0,0,.1);
}

.btn-big .title{
	font-size: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn-big svg{
	width: 80px;
	height: 80px;
}

.btn-big:hover{
	background: var(--color);
	color: #FFF!important;
}

.contact__body label{
	display: block;
	margin-top: 10px;
}

.contact__body input[type=text], .contact__body select, .contact__body textarea{
	display: block;
	text-align: left;
	width: 500px;
	border-radius: 4px;
	font-size: 18px;
	border: 1px solid #ccc;
	padding: 6px 12px;
	margin-top: 4px;
}

select{
	padding: 2px 4px;
	width: 100%;
}

.youtube iframe{
	width: 100%;
	height: 300px;
}




footer{
	margin-top: 100px;
	background: var(--bg_menu);
	color: #FFF;
	min-height: 100px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.footer, .footer a{
	display: inline-flex;
	align-items: start;
	justify-content: center;
	color: #FFF;
	text-decoration: none;
	text-align: left;
}

.footer:nth-child(2){
	text-align: center;
	flex-direction: column;
	align-items: center;
	align-self: start;
}

.footer__icons{
	display: flex;
	flex-direction: column;
}

.footer svg, .footer img{
	width: 24px;
	margin: 0 24px;
	transition: .3s;
}

.footer svg{
	margin: 8px;
}

.footer svg:hover{
	transform: scale(1.2);
}

.footer__phone{
	display: inline-block;
	width: 112px;
	text-align: center;
}

.footer .btn{
	display: flex;
	align-items: center;
	background: #FFF;
	border-radius: 16px;
	padding: 0 16px;
	color: var(--bg_menu);
	margin-top: 4px;
}

.footer .btn svg{
	margin: 0;
	margin-right: 8px;
	width: 32px;
}




.youtube{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	height: 300px;
}

.youtube img{
	position: absolute;
}

.youtube .icon{
	width: 80px;
	z-index: 3;
}

.disciplines{
	display: flex;
	justify-content: center;
	border-collapse: collapse;
	padding-bottom: 10px;
}

.disciplines th, .disciplines td{
	border: 1px solid;
	padding: 6px;
}

.disciplines tr:nth-child(2n+1){
	background: #e0e0e0;
}



.resultats{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}





.filieres_accueil2{
	margin-bottom: 32px;
}

.filieres_accueil2 img{
	width: 500px;
	margin-bottom: -50px;
	margin-left: 0;
	transition: .3s;
}

.filieres_accueil2 img:hover{
	margin-left: 48px;
}

@keyframes slide_filieres {
	from {
		margin-left: 40%;
		opacity: 0;
	}

	to {
		margin-left: 0%;
		opacity: 1;
	}
}

.filieres_accueil2 a{
	animation-duration: 1s;
	animation-name: slide_filieres;
}

.filieres_accueil2 a:nth-child(2){
	animation-duration: 1.2s!important;
}

.filieres_accueil2 a:nth-child(3){
	animation-duration: 1.4s!important;
}

.filieres_accueil2 a:nth-child(4){
	animation-duration: 1.6s!important;
}





@keyframes progress {
	0% {
		stroke-dasharray: 0 100;
	}
}

.circle-svg {
	display: block;
	margin: 10px auto;
	max-height: 100px;
}

.circle-svg text {
	text-align:center;
	color:black;
	font-size:10px
}

.circle-svg path.percent {
	stroke: #6f6fff;
	fill: none;
	stroke-width: 2.8;
	// stroke-linecap: round;
	animation: progress 1s ease-out forwards;
}

.circle-svg path.around {
	stroke: #c4c4c4;
	fill: none;
	stroke-width: 2.8;
}




.menu-mobile{
	display: none!important;
}

@media only screen and (max-width: 1150px){
	
	section{
		padding: 15px;
	}
	
	.actucard{
		height: auto;
	}
	
	.actucard__body{
		display: none;
	}
	
	.footer{
		margin: 0 100px!important;
	}

}

@media only screen and (max-width: 890px){
	
	header{
		display: none;
	}
	
	.card-full{
		grid-column-end: auto;
	}
	
	.youtube{
		max-width: 500px;
		width: 100%;
		margin: auto;
	}
	
	.footer{
		margin: 0 50px!important;
	}
	
	.immersions{
		display: block;
	}

}

@media only screen and (max-width: 700px){
	
	.hidden-mobile, .imgfirst img{
		display: none;
	}
	
	.break{
		display: block;
	}
	
	nav{
		text-align: center;
	}
	
	nav h1{
		margin-top: 0;
	}
	
	.menu{
		border: 2px solid;
		margin-top: 20px;
		padding: 2px 20px;
	}
	
	.menu ul{
		display: none;
	}
	
	.menu li{
		float: none;
		display: block;
	}
	
	.menu-mobile{
		display: flex!important;
		justify-content: center;
		-ms-align-items: center;
		align-items: center;
		color: #FFF;
		cursor: pointer;
		padding: 2px 20px;
	}
	
	.menu-mobile span{
		margin-left: 10px;
	}
	
	.grid{
		display: flex;
		flex-direction: column;
		grid-gap: 0!important;
	}
	
	.card{
		margin-bottom: 25px;
	}
	
	.images img{
		max-width: 100%;
	}
	
	footer{
		text-align: center;
		display: flex;
		flex-direction: column;
	}
	
	.footer{
		margin: 4px!important;
	}
	
	.contact__body input[type=text], .contact__body textarea{
		width: 100%;
	}

}


@media screen and (-webkit-min-device-pixel-ratio:0) {

	.background_icon{
		animation: none!important;
	}
	
}