@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;700&family=Maven+Pro:wght@400;600;700&display=swap');


* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

:root {
	--jura: 'Jura', sans-serif;
	--maven: 'Maven Pro', sans-serif;
	--gris : #999;
	--vert: #a4cda4; /* rgba(164, 205, 164, 1) */
	--bleu: #a5cce5; /* rgba(165, 204, 229, 1) */
}

body {
	width: 100%;
	margin: auto;
	margin-top: 0;
	font-family: var(--maven);
	font-size: 12pt;
	color: var(--gris);
}

/* GLOBAL */
.content {
	width: 1200px;
	margin: auto;
}

main .content, footer .content {
	padding-top: 40px;
	padding-bottom: 40px;
}

main {
	position: relative;
	z-index: 0;
}

section {
	width: 100%;
	position: relative;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--jura);
	margin-bottom: 40px;
	margin-top: 0;
}

h1, h2.h1 {
	font-size: 24pt;
}

main h1, main h2 {
	color: var(--bleu);
}

.wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
	position: relative;
}

p {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 22pt;
}

p strong {
	font-weight: 700;
}

main a {
	color: var(--bleu);
}

main a:hover, main a:focus {
	color: #333;
}

a.cta {
	display: inline-block;
	height: 50px;
	min-width: 200px;
	max-width: 300px;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 50px;
	font-family: var(--jura);
	border-radius: 25px;
	transition: all .4s ease;
	text-decoration: none;
}

/* TOP BAR */
#topBar {
	width: 100%;
	height: 90px;
	background: #FFF;
	box-shadow: 0 0 15px 3px rgba(127, 127, 127, .25);
	position: fixed;
	z-index: 1000;
}

#topBar .content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

#logo {
	width: 250px;
	height: 90px;
	background: url("images/logo_header.webp") left no-repeat;
	background-size: 80px 80px;
	font-family: var(--jura);
	line-height: 20pt;
	color: var(--gris);
	font-size: 10pt;
	letter-spacing: 1px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

#logo p {
	display: block;
}

#logo strong {
	font-weight: 700;
	font-size: 22pt;
	display: block;
	letter-spacing: normal;
}

#boutonMenu, #close {
	display: none;
}

/* MENU */
nav {
	height: 40px;
}

nav ul {
	list-style: none;
	margin-top: 0;
	padding-left: 0;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
}

nav ul li a {
	display: block;
	height: 40px;
	text-decoration: none;
	color: var(--gris);
	line-height: 40px;
	padding-left: 16px;
	padding-right: 16px;
	border-radius: 20px;
	transition: all .4s ease;
}

nav ul li a:hover, nav ul li a:focus, nav ul li a.actif {
	background: var(--bleu);
	color: #FFF;
}

/* VIDÉO */
/*#video {
	width: 100%;
	height: auto;
	min-height: calc(100vh - 90px);
	position: relative;display: none;
}

#video iframe {
	width: 100% !important;
	height: 56.25vw !important;
	margin-top: -5px;
	z-index: -1;
}*/

#picture {
	width: 100%;
	height: 600px;
	background: url("images/pole.webp") center no-repeat;
	background-size: cover;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	position: relative;
	padding-top: 90px;
}

#picture::before {
	content: '';
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, rgba(0, 0, 0, .5) 35%, rgba(0, 0, 0, 0));
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
}

#picture.titleOnly {
	height: 400px;
}

#picture.titleOnly h1 {
	margin-bottom: 0 !important;
}

#picture.contact {
	background: url("images/accueil_pole.webp") top no-repeat;
	background-size: cover;
}

#picture.actus {
	background: url("images/actus.webp") center no-repeat;
	background-size: cover;
}

/*#picture .content {
	z-index: 100;
	color: #FFF;
}*/

@keyframes slideX {
	0% {left: -100vw;}
	100% {left: 0;}
}

/*@keyframes rotation {
	0% {transform: rotateZ(0deg);}
	100% {transform: rotateZ(360deg);}
}*/

#encart {
	width: 550px;
	text-shadow: 0 0 7px rgba(0, 0, 0, .75);
	font-size: 12pt;
	color: #FFF;
	position: relative;
	z-index: 5000 !important;
	left: 0;
	/*padding: 20px;
	border-radius: 10px;
	background: rgba(0, 0, 0, .5);*/
	animation-name: slideX;
	animation-delay: .5s;
	animation-duration: 1s;
	/*animation-fill-mode: both;*/
	/*transition: all 1s ease;*/
}

#encart a.cta {
	position: relative;
	font-weight: 700;
	color: #FFF;
	/*border: 2px solid #FFF;*/
	background: rgba(255, 255, 255, .4);
	/*text-shadow: none;*/
	margin-top: 20px;
}

#encart a.cta:hover, #encart a.cta:focus {
	background: rgba(255, 255, 255, 1);
	color: var(--gris);
	text-shadow: none;
}

#picture h1 {
	color: #FFF;
	font-size: 30pt;
}

/*#picture div.test {
	height: 460px !important;
	width: 818px;
	display: block;
	position: relative;
	z-index: 0;
}

div.test iframe {
	max-width: 818px;
	max-height: 460px;
	bottom: 0;
}*/

/*.pictos {
	background: var(--bleu);
}*/

.pictos .content {
	padding-bottom: 0;
}

.wrapper.pictos {
	flex-direction: row;
	justify-content: center;
	margin-top: -80px;
}

.picto {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 360px;
	max-width: 360px;
	gap: 20px;
	z-index: 0;
	position: relative;
}

.picto i {
	background: var(--vert);
	color: #FFF;
	font-size: 24pt;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/*border: 1px solid var(--vert);*/
	box-shadow: 0 -10px 15px -10px rgba(0, 0, 0, 1);
	border: 10px solid #FFF;
	z-index: -1;
	/*animation-name: rotation;
	animation-delay: .25s;
	animation-duration: 1s;*/
	transition: all .4s ease;
}

.picto i + strong {
	font-size: 16pt;
	color: var(--vert);
	font-weight: 600;
	font-family: var(--jura);
}

.picto:hover i, .picto:focus i {
	transform: translateY(-10px);
}

/* PRÉSENTATION */
.wrapper.introduce {
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

#left {
	display: flex;
	gap: 40px;
	width: 560px;
	flex-direction: column;
	justify-content: flex-start;
	flex-wrap: wrap;
}

#video {
	width: 560px;
	height: 323px;
	background: #FFF;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 200;
	padding: 10px;
	box-shadow: 0 0 15px 5px rgba(127, 127, 127, .15);
}

#video iframe {
	position: static;
	display: block;
	top: auto;
	left: auto;
	width: 100%;
	height: 100%;
}

#associes {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0;
	gap: 40px;
	flex-wrap: wrap;
}

figure, figure img {
	width: 160px;
}

figure {
	margin: 0;
}

figcaption {
	text-align: center;
	margin-top: 10px;
}

.presentation {
	width: 600px;
	border-left: 5px solid var(--bleu);
	padding: 20px;
	padding-left: 40px;
	/*padding-right: 0;*/
	background: rgba(127, 127, 127, 0);
}

/*.wrapper.introduce div:not(#associes):nth-of-type(2) {
	margin-top: 200px;
}*/

/* SECTION DISCIPLINES/MÉTIERS */
#metiers {
	background: linear-gradient(45deg, var(--vert) 50%, rgba(164, 205, 164, .5));
	color: #FFF;
	text-align: center;
}

#metiers h2 {
	color: #FFF;
}

.wrapper.metiers {
	justify-content: center;
	margin-top: 40px;
}

.wrapper.metiers a {
	width: 200px;
	text-decoration: none;
	color: #FFF;
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.wrapper.metiers a i {
	color: #FFF;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .4);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24pt;
	transition: all .4s ease;
}

.wrapper.metiers a:hover i, .wrapper.metiers a:focus i {
	background: #FFF;
	color: var(--vert);
	transform: translateY(-10px); /* transform: rotateZ(360deg); */
}

/* ACTUALITÉS (LISTE) */
a.back {
	width: 40px;
	height: 40px;
	border: 1px solid #CCC;
	color: #CCC;
	line-height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	margin-bottom: 20px;
	transition: all .4s ease;
}

a.back:hover, a.back:focus {
	background: var(--bleu);
	color: #FFF;
	border-color: var(--bleu);
}

section#actus {
	background: rgba(127, 127, 127, .1);
	text-align: center;
}

#actus h2 {
	color: var(--bleu);
}

.wrapper.actus {
	justify-content: center;
}

.actu {
	width: 360px;
	background: #FFF;
	padding-bottom: 20px;
	box-shadow: 0 0 15px 5px rgba(127, 127, 127, .15);
	transition: all .4s ease;
}

.actu:hover, .actu:focus {
	transform: translateY(-10px);
}

.actu a:first-of-type {
	width: 100%;
	height: 200px;
	border: 0;
	display: block;
	margin-bottom: 20px;
}

.actu .illustration {
	width: 100%;
	height: 200px;
}

.actu h3 {
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	line-height: 22pt;
	text-align: center;
	color: var(--bleu);
	margin-bottom: 20px;
}

.actu p {
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}

.actu a:last-of-type {
	display: block;
	text-decoration: none;
	width: 140px;
	height: 40px;
	text-align: center;
	line-height: 38px;
	border: 1px solid var(--bleu);
	color: var(--bleu);
	border-radius: 20px;
	/*text-transform: uppercase;*/
	margin-left: auto;
	margin-right: 20px;
	margin-top: 20px;
	transition: all .4s ease;
}

.actu a:last-of-type:hover, .actu a:last-of-type:focus {
	background: var(--bleu);
	color: #FFF;
}

/* ACTUALITÉ UNIQUE */
.wrapper.actualite {
	justify-content: center;
}

.wrapper.actualite img {
	max-width: 450px;
}

.wrapper.actualite p {
	width: calc(100% - 490px); /* 450 + 40 de marge */
}

span.dateActu {
	display: block;
	margin-bottom: 20px;
	padding-left: 10px;
	border-left: 4px solid var(--bleu);color: var(--bleu);
}

/* GALERIE */

.wrapper.gallery {
	justify-content: center;
}

.photoGallery {
	width: 360px;
	height: 200px;
	display: block;
	transition: all .4s ease;
}

.photoGallery:hover, .photoGallery:focus {
	box-shadow: 0 0 15px 5px rgba(127, 127, 127, .25);
}

/* PROFESSIONNELS - LISTE */
.wrapper.listeProfessionnels {
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	border-top: 5px solid #EEE;
	padding-top: 40px;
	gap: 40px;
}

main h3.show {
	color: var(--bleu);
	cursor: pointer;
}

h3.show > span.material-icons {
	vertical-align: middle;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--bleu);
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	margin-left: 10px;
	transition: all .4s ease;
}

h3:hover span.material-icons, h3:focus span.material-icons, h3 span.material-icons:hover, h3 span.material-icons:focus {
	background: var(--bleu);
	color: #FFF;
	border-color: 1px solid var(--bleu);
}

ul.filtres {
	list-style: none;
	margin-top: 0;
	padding-left: 0;
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 20px;
	align-items: flex-start;
	flex-wrap: wrap;
}

ul.filtres li {
	visibility: hidden;
}

ul.filtres li a {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 10px;
	width: 160px;
	height: 160px;
	gap: 20px;
	text-decoration: none;
	color: var(--gris);
	transition: all .4s ease;
}

ul.filtres li a i {
	font-size: 20pt;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	color: #CCC;
	/*transition: color .4s ease;*/
}

ul.filtres li a.activated i {
	color: #FFF;
	background: var(--vert);
}

ul.filtres li a.activated p {
	color: var(--vert);
	font-weight: 600;
}

ul.filtres a:hover i, ul.filtres a:focus i {
	color: #FFF;
	background: var(--bleu);
}

ul.filtres a:hover p, ul.filtres a:focus p {
	color: var(--bleu);
}

.getPro {
	width: 240px;
	/*height: 240px;*/
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: var(--gris);
	border-radius: 10px;
	/*border: 1px solid #FFF;*/
	transition: all .4s ease;
}

.getPro .photoPro {
	width: 185px;
	height: 185px;
	border-radius: 50%;
	/*border: 5px solid #FFF;*/
	transition: all .4s ease;
}

.getPro strong {
	font-weight: normal;
	transition: color .4s ease;
}

.getPro:hover .photoPro, .getPro:focus .photoPro {
	/*border-color: var(--bleu);*/
	box-shadow: 0 0 15px 5px rgba(127, 127, 127, .15);
	transform: translateY(-10px);
}

.getPro:hover strong, .getPro:focus strong {
	color: var(--gris);
}

/* PROFESSIONNELS - FICHE DE PRÉSENTATION */
h1.namePro {
	text-align: center;
	margin-bottom: 10px !important;
}

h1.namePro + p {
	width: 100%;
	text-align: center;
	font-size: 12pt;
	margin-bottom: 20px;
	color: var(--bleu);
}

#photoProfil {
	width: 240px;
	height: 240px;
	margin: auto;
	margin-top: -220px; /* 120 (moitié) + 40 (padding) + 40 (hauteur du bouton retour) + 20 (margin-bottom du bouton retour) = 220 */
	border-radius: 50%;
	border: 10px solid #FFF;
	box-shadow: 0 -10px 15px -10px rgba(0, 0, 0, 1);
	transition: all .4s ease;
}

#photoProfil:hover, #photoProfil:focus {
	transform: translateY(-10px);
}

.wrapper.infos {
	justify-content: center;
	gap: 40px;
	margin-bottom: 40px;
}

.info i {
	background: var(--vert);
	color: #FFF;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin-right: 5px;
	text-align: center;
	line-height: 30px;
	vertical-align: middle;
}

.info a {
	color: var(--gris);
}

/* CONTACT */
form {
	width: 625px !important;
	gap: 25px !important;
	justify-content: center !important;
	margin: auto;
	margin-top: 40px;
}

input[type="text"], input[type="email"], textarea, input[type="password"] {
	width: 300px;
	height: 50px;
	border: 1px solid #EEE;
	font-family: var(--maven);
	outline: 0;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 12pt;
	color: #333;
	transition: all .4s ease;
}

textarea {
	width: 100%;
	height: 120px;
	padding: 15px;
}

label[for="politique"] {
	width: 100%;
}

input[type="checkbox"] {
	outline: 0;
}

#boutonForm {
	width: 100%;
	text-align: center;
}

input[type="submit"] {
	margin: auto;
	outline: 0;
	width: 200px;
	height: 50px;
	cursor: pointer;
	font-family: var(--maven);
	font-size: 12pt;
	color: #FFF;
	background: var(--bleu);
	border-radius: 25px;
	border: 0;
	font-weight: 600;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: all .4s ease;
}

input:not([type="checkbox"]):hover, input:not([type="checkbox"]):focus, textarea:hover, textarea:focus {
	border-color: var(--bleu);
}

input[type="submit"]:hover, input[type="submit"]:focus {
	background: var(--vert);
}

/* MENTIONS LÉGALES ET POLITIQUE */
main .content ul:not(.filtres) li {
	line-height: 22pt;
}
/* FOOTER */
footer {
	background: linear-gradient(45deg, var(--bleu), var(--vert));
	color: #FFF;
}

footer .wrapper {
	justify-content: space-between;
	align-items: flex-start;
}

.bloc {
	width: 360px;
	text-align: left;
}

.bloc:first-of-type {
	text-align: center;
	font-family: var(--jura);
}

.bloc:first-of-type strong {
	font-size: 24pt;
	display: block;
	margin-top: 10px;
}

.bloc:first-of-type strong + p {
	font-weight: 400;
	letter-spacing: 1px;
	font-size: 11pt;
}

#social {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
}

#social a {
	display: block;
	width: 30px;
	height: 30px;
	border: 0;
}

.bloc h3 {
	padding-left: 10px;
	border-left: 1px solid rgba(255, 255, 255, .5);
}

footer a {
	color: #FFF;
	text-decoration: none;
}

footer a:hover, footer a:focus {
	text-decoration: underline;
	color: #333;
}

footer .wrapper + p {
	width: 100%;
	margin-top: 40px;
	text-align: center;
	font-size: 10pt;
}

@media only screen and (max-width: 1200px) {
	.content {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
	
	#boutonMenu {
		display: block;
		width: 60px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 26pt;
		color: var(--gris);
		cursor: pointer;
	}
	
	nav {
		position: fixed;
		z-index: 5000;
		right: 0;
		top: 0;
		height: 100vh;
		width: 75%;
		max-width: 300px;
		background: rgba(165, 204, 229, 1);
		box-shadow: 0 0 15px 3px rgba(127, 127, 127, .25);
		display: none;
	}
	
	#close {
		width: 46px;
		height: 46px;
		padding-top: 4px;
		color: #FFF;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, .4);
		text-align: center;
		font-size: 20pt;
		position: absolute;
		top: 20px;
		right: 20px;
		cursor: pointer;
		display: block;
		transition: all .4s ease;
	}
	
	#close:hover, #close:focus {
		background: #FFF;
		color: var(--bleu);
	}
	
	nav ul {
		width: 100%;
		height: auto;
		flex-direction: column;
		align-items: center;
		margin-top: 100px;
		display: none;
	}
	
	nav ul li a {
		color: #FFF;
	}
	
	nav ul li a:hover, nav ul li a:focus, nav ul li a.actif {
		background: #FFF;
		color: var(--gris);
	}
	
	#video {
		height: 100%;
	}
	
	#video iframe {
		width: 100% !important;
		min-width: 100vw;
		min-height: 282px;
		max-height: calc(100vh - 90px);
	}
	
	#picture {
		height: auto;
		min-height: 600px;
		padding-top: 90px;
		padding-bottom: 20px;
	}
	
	#picture.titleOnly {
		height: 300px !important;
		min-height: auto;
	}
	
	#encart {
		width: 100%;
		max-width: 550px;
	}
	
	#encart h1 {
		font-size: 20pt;
	}
	
	.picto {
		width: 100%;
		max-width: 300px;
	}
	
	.picto:nth-of-type(2) i, .picto:nth-of-type(3) i  {
		box-shadow: none;
	}
	
	#video {
		--wScreen: 100vw;
		--w: calc(var(--wScreen) - 40px); /* 20px de padding de chaque côté */
		--ratio: 0.5769;
		--h: calc(var(--w) * 0.5769);
		width: var(--w);
		height: var(--h);
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		padding-left: 0;
		margin-left: 0;
		max-width: 560px;
		max-height: 323px;
		padding: 0;
	}
	
	#video iframe {
		--wScreen: 100vw;
		--wi: calc(var(--wScreen) - 60px);
		--ratio: 0.5769;
		--hi: calc(var(--wi) * 0.5769);
		width: var(--wi) !important;
		height: var(--hi) !important;
		max-width: 540px;
		max-height: 311px;
	}
	
	.presentation {
		width: 100%;
		/*padding-right: 0;*/
	}
	
	.wrapper.introduce div:not(#associes):nth-of-type(2) {
		margin-top: 0;
	}
	
	figure, figure img {
		--w: 100vw;
		--rest: calc(var(--w) - 80px); /* 20px de padding à gauche, idem à droite + 40px de gap */
		width: calc(var(--rest) / 2);
		max-width: 160px;
	}
	
	.wrapper.metiers a {
		/*width: 160px;*/
		--w: 100vw;
		--rest: calc(var(--w) - 80px);
		width: calc(var(--rest) / 2);
		max-width: 160px;
	}
	
	.photoGallery {
		/*width: 160px;*/
		--w: 100vw;
		--rest: calc(var(--w) - 80px);
		--largeur: calc(var(--rest) / 2);
		width: var(--largeur);
		height: calc(var(--largeur) / 1.6);
		max-width: 160px;
		max-height: 100px;
	}
	
	.actu {
		width: 300px;
	}
	
	.wrapper.actualite img {
		width: 100%;
		max-width: 450px;
	}

	.wrapper.actualite p {
		width: 100%;
	}
	
	.wrapper.listeProfessionnels {
		text-align: center;
		line-height: 22pt;
	}
	
	.getPro {
		/*width: 160px;
		height: 160px;*/
		--w: 100vw;
		--rest: calc(var(--w) - 80px);
		width: calc(var(--rest) / 2);
		/*height: calc(var(--rest) / 2);*/
		max-width: 160px;
		/*max-height: 160px;*/
		gap: 10px;
	}

	.getPro .photoPro {
		width: 110px;
		height: 110px;
		border-radius: 50%;
	}
	
	#photoProfil {
		width: 180px;
		height: 180px;
		margin-top: -190px;
	}
	
	.infos {
		gap: 20px !important;
		flex-direction: column;
	}
	
	.info {
		/*width: 100%;
		max-width: 300px;*/
		text-align: center;
	}
	
	.info i {
		display: block;
		margin: auto;
		margin-bottom: 5px;
	}
	
	form {
		width: 100% !important;
	}
	
	form input:not([type="checkbox"]), form textarea {
		width: 100%;
	}
	
	form input[type="submit"] {
		max-width: 200px;
	}
	
	footer .wrapper {
		justify-content: space-evenly;
	}
	
	footer .bloc {
		width: 100%;
		max-width: 360px;
	}
	
	footer .wrapper + p {
		font-size: 12pt;
	}
}

@media only screen and (min-width: 720px) and (max-width: 1080px) {
	.picto:nth-of-type(2) i {
		box-shadow: 0 -10px 15px -10px rgba(0, 0, 0, 1) !important;
	}
	
}

@media only screen and (min-width: 1080px) {
	.picto i {
		box-shadow: 0 -10px 15px -10px rgba(0, 0, 0, 1) !important;
	}
}