/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500&family=Barlow+Condensed:wght@400;500&family=Barlow:wght@300;400;500&display=swap');

/*****************************/


*:focus {
	outline: none !important
}
* {
	padding: 0;
	margin: 0;
}

html, body {
	height: 100%;
}
body {
	width: 100%;
	background-color: #CECAC1/*#ededed*/;
	display: flex;
	flex-direction: column;
    font-family: 'barlow', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
    color: #000;
	text-align: center;
}

img {
    max-width: 100%;
    height: auto;
    border: none;
	vertical-align: bottom;
}
a {
    text-decoration: none;
}

sup.typo_exposants {
	vertical-align: text-top;
	font-size: .8em;
}

hr {
	display: block;
	clear: both;
	height: 1px;
	width: 100%;
	margin: .8em 0;
	padding: 0;
	color: #8B0000;
	background-color: #8B0000;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #fff;
	border-left: none;
}

#top {
	position: fixed;
	bottom: 50px;
	right: 20px;
	display: none;
	cursor: pointer;
	z-index: 100;
}
#top img {
	transform: rotate(-90deg);
	width: 50px;
	opacity: .6;
	transition: .3s ease;
}
#top:hover img {
	opacity: 1;
}

ul.spip {
	margin: 0 0 .5em 2em;
}
ul.spip li {
	padding: .25em 0;
}

/* cache-cache ***********************************************/

h1.resp, main .pmf img.resp, .blocs-resp, section.gris-resp, section.defaut-resp, img.logo-rub-resp, .form-resp, #menu-wrapper #hamburger-menu {
	display: none;
	visibility: hidden;
	opacity: 0;
}

/* fin des généralités générales *****************************/

header {
    position: fixed;
	top: 0px;
	width: 100%;
	height: 85px;
	background-color: darkred;
	color: #fff;
	text-align: left;
	padding-left: 180px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	animation-duration: 3s;
	z-index: 10;
	transition: .4s ease;
}
header h1 {
	font: 500 1.6em 'Lora';
	margin: 0;
}
header h1 small {
	font: 400 italic .6em 'Lora';
	padding-left: 20px;
}
header.scrolled {
	height: 55px;
	padding-left: 135px;
	transition: .4s ease;
}
.f-normal {
	position: fixed;
	top: 0;
	right: 25px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 85px;
	z-index: 12;
	transition: .4s ease;
}
.formulaire_recherche input.search {
	border: none;
	background-color: rgba(255,255,255,0.8);
	padding: 5px 0 4px 10px;
	width: 100px;
	color: #000;
	font-size: 12px;
	border-radius: 3px;
	transition: .25s ease;
}
.formulaire_recherche input.search:hover {
	background-color: rgba(255,255,255,0.9);
}
.formulaire_recherche input.search:focus {
	background-color: #fff;
	width: 130px;
}
.formulaire_recherche button {
	border: none;
	font-size: 1.3em;
	color: #fff;
	cursor: pointer;
	background-color: #8B0000;
	padding: 0 0 0 10px;
}
.f-normal.scrolled {
	height: 55px;
	transition: .4s ease;
}

.logo {
	position: fixed;
	top: -10px;
	left: 30px;
	width: 80px;
	height: 80px;
	padding: 30px;
	border-radius: 70px;
	background-color: #8B0000;
	z-index: 20;
	animation-delay: .5s;
	animation-duration: 1s;
	transition: .4s ease;
}
.logo img {
	width: 100%;
}
.logo.scrolled {
	left: -10px;
	padding: 20px;
	border-radius: 60px;
	transition: .4s ease;
}

/* fin du header *****************************************/

nav {
	position: fixed;
	top: 84px;
	right: 0px;
	width: 240px;
	text-align: right;
	background-color: #8B0000;
	z-index: 10;
	animation-delay: .8s;
	animation-duration: 1.25s;
	transition: .4s ease;
}
nav a .tete_1, nav a .tete_3, nav a .tete_7, nav a .tete_2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font: 500 1.2em 'Lora';
	color: #fff;
	padding: 15px 25px 15px 15px;
	transition: .3s ease;
}
nav a .tete_1 {
	background-color: #8B0000;
}
nav a .tete_3, .nav_3 {
	background-color: #9c2626;
}
nav a .tete_7, .nav_7 {
	background-color: #a84040;
}
nav a .tete_2 {
	background-color: #b35959;
}
nav a:hover .tete_1, nav a:hover .tete_3, nav a:hover .tete_7, nav a:hover .tete_2, nav a.on .tete_1, nav a.on .tete_3, nav a.on .tete_7, nav a.on .tete_2 {
	padding: 15px 30px 15px 15px;
	border-right: 2px solid #fff;
}
.nav_3, .nav_7 {
	padding: 0 25px 12px 15px;
}
nav h4 {
	margin: 0 0 8px;
	font-family: 'Barlow Condensed';
	font-size: 1em;
	font-weight: 400;
}
nav a h4 {
	color: #fff;
	transition: .25s ease;
}
nav a:hover h4, nav a.on h4 {
	padding-right: 6px;
	border-right: 1px solid #fff;
}
nav.scrolled {
	top: 54px;
	transition: .4s ease;
}

/* fin de navigation *******************************/

main {
	display: block;
	width: auto;
	margin: 85px 240px 0 0;
	background-color: #e8e5de;
	flex: 1;
}

/* première section ********************************/

section.gris, section.gris-resp {
	background-color: #CECAC1;
}
main .left {
	text-align: justify;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: auto;
	height: 100%;
	padding: 0 90px;
	font-size: 1.3vw;
	line-height: 1.25;
	animation-delay: 1.5s;
	animation-duration: 2s;
}
main .left p {
	margin: 1em 0 0;
}
main .left p:last-of-type {
	margin: .25em 0 0;
}
main .left strong {
	font-weight: 500;
}
main .left img.spip_logo {
	float: left;
	width: 25%;
	margin: 0 20px 10px 0;
}
main .pmf {
	text-align: left;
	animation-duration: 2s;
}
main .pmf img {
	width: 100%;
}
.suite {
	display: inline-block;
	width: 100%;
	height: 30px;
	margin: 1em 0 0;
	text-align: right;
}
.suite a img {
	height: 30px !important;
	width: auto;
	opacity: .6;
	transition: .25s ease;
}
red {
	color: #8B0000;
}
.suite a:hover img {
	opacity: 1;
}

/* deuxième section ****************************/

section.defaut {
	margin-bottom: 60px;
	animation-delay: 2.5s;
	animation-duration: 2s;
}
.jean-charles {
	background-color: #fff;
	padding: 20px;
	font-size: 1em;
	color: #000;
	margin: 40px 90px;
	text-align: left;
}
.jean-charles img {
	border: 1px solid #000;
}
.jean-charles p {
	margin: .6em 0 0;
}
.actus {
	display: inline-block;
	width: 100%;
	padding-top: 40px;
	margin-bottom: 40px;
}
.actus h2 {
	font: 500 1.5em 'Lora';
	color: #8B0000;
	margin: 0 0 1em;
	text-align: center;
}
.actus h3 {
	background-color: #333;
	color: #fff;
	padding: 10px 20px 18px;
	font: 500 1.2em 'Barlow';
	margin: 0 !important;
	transition: .3s linear;
}
.actus:hover h3 {
	background-color: #000;
}
.date {
	display: block;
	background-color: #666;
	color: #fff;
	padding: 10px 20px 18px;
	font-size: 1em;
}
.actu {
	font-size: .9em;
}
.actu a .intro-actu {
	display: block;
	font-style: italic;
	font-size: .85em;
	background-color: #fff;
	color: #000 !important;
	padding: 20px;
	animation-delay: .5s;
	animation-duration: 1s;
}
.actu .intro-actu p, .actu .resa p {
	margin: 0 0 .8em;
}
.actu .resa {
	display: block;
	background-color: #666;
	color: #fff;
	padding: 10px 20px 20px;
	font-size: .8em;
	transition: .3s linear;
}
.actu:hover .resa {
	background-color: #8B0000;
}
.actu .resa a, .resa.art a {
	color: #ddd;
	font-weight: 500;
	border-bottom: 1px solid #fff;
	padding-bottom: 1px;
	transition: .25s ease;
}
.actu .resa a:hover, .resa.art a:hover {
	color: #fff;
}
.actu .suite-actu {
	display: inline-block;
	width: 100%;
	height: 30px;
	margin: .5em 0;
	text-align: right;
}
.txt-resa a img {
	float: right;
	margin: 0 0 0 1em;
	border-bottom: 0 !important;
	text-decoration: none !important;
}

/* suite des actualités ************************************/
.blocs {
	margin-top: 10px;
	width: auto;
	padding: 0 90px;
	text-align: left;
}
.breve, .news {
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: #666;
	transition: .4s ease-in-out;
}
.breve h4 {
	background-color: #333;
	color: #fff;
	padding: 20px;
	margin: 0 !important;
	font-size: .9em;
	font-weight: 500;
	transition: .4s ease-in-out;
}
.breve .resa-breve {
	display: block;
	background-color: #666;
	padding: 20px;
	color: #fff;
	font-size: .8em;
	transition: .4s ease-in-out;
}
.breve .resa-breve strong, .breve-resp .resa-breve strong {
	font-weight: 500;
	font-size: 1.1em;
}
.breve img.spip_logo, .news img.spip_logo {
	background-color: #fff;
	opacity: .7;
	transition: .4s ease-in-out;
}
.breve:hover, .breve-resp:hover, .news:hover {
	background-color: #333;
}
.breve:hover h4, .breve-resp:hover .h4, .news:hover h4 {
	background-color: #B35959;
}
.breve:hover .resa-breve, .breve-resp:hover .resa-breve, .news:hover .resa-breve {
	background-color: #333;
}
.breve:hover img.spip_logo, .breve-resp:hover .logo-breve img, .news:hover img.spip_logo {
	opacity: 1;
}


/* pied de page */
footer {
	background-color: #cecac1;
	color: #000;
	padding: 30px 240px 30px 170px;
	width: auto;
	margin: auto 0 0;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
footer .logo_ipmf {
	position: absolute;
	top: -20px;
	left: 30px;
	width: 80px;
	height: 80px;
	padding: 20px;
	border-radius: 60px;
	background-color: #fff;
	z-index: 2;
}
footer .logo_ipmf img {
	width: 100%;
}
footer .coordonnees {
	text-align: left;
	width: auto;
}
footer .coordonnees div {
	float: left;
}
footer .coordonnees strong {
	color: #8B0000;
	font-weight: 500;
	font-size: 1.1em;
}
footer .coordonnees a {
	color: #8B0000;
	transition: .3s ease;
}
footer .coordonnees a:hover {
	color: #000;
}
footer .coordonnees .signature {
	float: right;
	text-align: right;
	margin: 0 0 0 40px;
	font: 400 12px Verdana, sans-serif;
}


/* pages intérieures *************************************/
main.int {
	text-align: left;
	animation-delay: .5s;
	animation-duration: 2s;
}

.ariane {
	display: block;
	width: auto;
	margin: 40px 0 30px;
	/*padding: 0 0 0 */
	font-size: 1.2em;
}
.ariane strong {
	font-weight: 500;
	font-family: 'Lora';
}
.ariane a, .contenu .article a, .desc a {
	color: #8B0000;
	transition: .25s ease;
}
.ariane a:hover, .contenu .article a:hover, .desc a:hover {
	color: #333;
}
img.logo-rub {
	width: 30%;
	float: left;
	margin: 30px;
}
.ariane.special {
	margin: 60px 0 30px 90px !important;
	font-size: 1.2em;
}

.contenu {
	display: block;
	width: auto;
	padding: 0 90px;
}
.contenu h3 {
	background-color: #333;
	color: #fff;
	padding: 10px 20px 15px;
	font: 500 1.2em 'Barlow';
	margin: 0 !important;
}
.contenu .article {
	background-color: #fff;
	padding: 30px;
	margin-bottom: 30px;
	text-align: justify;
}
.contenu .article p {
	margin: .5em 0 0;
}
.contenu .article h2.spip {
	font: 500 1.2em 'Barlow';
	color: #333;
	margin: 1em 0 .5em;
}
.contenu .article h2.spip:first-child {
	margin: 0 0 .5em;
}
.contenu .article a .pdf {
	display: inline-block;
	width: 140px;
	margin: 1em 10px 0 0;
	text-align: center;
	background-color: #E8E5DE;
	padding: 12px;
	border-radius: 6px;
}
.contenu .article a .pdf img {
	opacity: .7;
	transition: .3s ease-in-out;
}
.contenu .article a:hover .pdf img {
	opacity: 1;
}
.contenu .article a .pdf h5 {
	font: 400 12px Verdana, sans-serif;
	color: #333;
	margin: .3em 0 0;
	transition: .3s ease-in-out;
}
.contenu .article a:hover .pdf h5 {
	color: #000;
}
.contenu.special {
	margin-bottom: 40px;
}

.desc {
	width: auto;
	margin: 0 0 30px;
}
a .ssrub_3 {
	background-color: #9c2626;
	padding: 30px;
	height: 70%;
	font-size: 1.2em;
	font-weight: 500;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	margin-bottom: 30px;
	transition: .4s ease-in-out;
}
a .ssrub_7 {
	background-color: #A84040;
	padding: 30px;
	height: 70%;
	font-size: 1.2em;
	font-weight: 500;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	margin-bottom: 30px;
	transition: .4s ease-in-out;
}
a:hover .ssrub_3, a:hover .ssrub_7 {
	background-color: #333;
}

.intro-actu.art {
	display: block;
	font-style: italic;
	font-size: 1em;
	background-color: #fff;
	padding: 20px 30px 10px 20px;
	text-align: justify;
	animation-delay: .5s;
	animation-duration: 1s;
}
.resa.art {
	display: block;
	background-color: #666;
	color: #fff;
	padding: 10px 20px 20px;
	font-size: .9em;
	margin-bottom: 30px;
}

a .galerie img {
	transition: .3s ease;
}
a:hover .galerie img {
	opacity: .7;
}

/***************************** formulaires 

.formulaire_spip { margin-bottom: 1.5em; }
.formulaire_spip label { display: block; }
.formulaire_spip input.text,
.formulaire_spip select,
.formulaire_spip textarea {
	width: 100%;
	box-sizing: border-box;
	padding:.25em;
	border:solid 1px #ccc;
	border-radius:4px;
}

.formulaire_spip img.ui-datepicker-trigger {
	position:relative;
	max-width: 1.5em;
	margin-top: -0.25em;
	margin-left: -1.75em;
}

.formulaire_spip .choix label {
	display: inline;
}

.formulaire_recherche label { display: block; }
.erreur_message { display: block; }

 fin formulaires */


@media (max-width: 1120px){
	
	header h1 {
		font: 500 1.4em 'Lora';
	}
	header h1 small {
		font: 400 italic .5em 'Lora';
		padding-left: 10px;
	}
	
	main .left, .blocs, .contenu {
		padding: 0 60px;
	}
	.ariane.special {
		margin: 80px 0 30px 60px;
	}
	
}


@media (max-width: 960px){

	.logo {
		left: -10px;
		padding: 20px;
		border-radius: 60px;
	}
	header, header.scrolled {
		padding-left: 120px;
	}
	header h1 {
		font: 500 1.2em 'Lora';
	}
	header h1 small, .txt-resa, .nav_3, .nav_7 {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
	nav {
		width: 160px;
	}
	nav a .tete_1, nav a .tete_3, nav a .tete_7, nav a .tete_2 {
		font: 500 1.1em 'Lora';
	}
	main {
		margin: 85px 160px 0 0;
	}
	main .left, .contenu {
		padding: 0 40px;
	}
	.suite a img {
		height: 24px !important;
	}
	
	.actus h3 {
		font: 500 1.5em 'Barlow';
		text-align: left;
	}
	.date {
		font-size: 1.2em;
	}
	.actus .actu {
		font-size: 1em;
	}
	.intro-actu {
		font-size: 1em;
	}
	.resa {
		padding: 10px 20px;
	}
	.suite-actu a img {
		height: 20px !important;
	}
	
	.blocs {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
	.blocs-resp {
		display: block;
		visibility: visible;
		opacity: 1;
		margin-top: 10px;
		width: auto;
		padding: 0 40px;
		text-align: left;
	}
	.breve-resp {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		width: 100%;
		margin-bottom: 20px;
		background-color: #666;
		transition: .4s ease-in-out;
	}
	.breve-resp .h4 {
		grid-area: 1 / 1 / 2 / 4;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #333;
		color: #fff;
		padding: 20px;
		font-size: .9em;
		font-weight: 500;
		transition: .4s ease-in-out;
	}
	.breve-resp .logo-breve {
		grid-area: 1 / 4 / 2 / 6;
		background-color: #fff;
		transition: .4s ease-in-out;
	}
	.breve-resp .logo-breve img {
		object-fit: cover;
		opacity: .7;
		transition: .4s ease-in-out;
	}
	.breve-resp .resa-breve {
		grid-area: 1 / 6 / 2 / 8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #666;
		padding: 20px;
		color: #fff;
		font-size: .7em;
		transition: .4s ease-in-out;
	}
	
	footer {
		padding: 20px 160px 30px 170px;
	}
	footer .coordonnees {
		font-size: 13px;
	}
	footer .coordonnees strong {
		font-size: 1.1em;
	}
	footer .coordonnees .signature {
		margin: 20px 0 0 20px;
		font: 400 10px Verdana, sans-serif;
	}
	.ariane.special {
		margin: 80px 0 30px 40px;
	}
	
}

@media (max-width: 860px){
	
	section.gris {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
	section.gris-resp {
		display: block;
		visibility: visible;
		opacity: 1;
	}
	section.gris-resp .left {
		font-size: 1.6vw;
		line-height: 1.25;
		text-align: left;
		padding-bottom: 30px;
	}
	
	.actus h2 {
		font: 500 2.4vw 'Lora';
	}
	
}

@media (max-width: 760px){
	
	section.defaut {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
	section.defaut-resp {
		display: block;
		visibility: visible;
		opacity: 1;
	}
	.news {
		display: inline-block;
		width: 100%;
		height: 100%;
		background-color: #666;
		transition: .4s ease-in-out;
	}
	.news h4 {
		background-color: #333;
		color: #fff;
		padding: 20px;
		margin: 0 !important;
		font-size: 1.1em;
		font-weight: 500;
		transition: .4s ease-in-out;
	}
	.news img.spip_logo {
		display: block;
		width: 100% !important;
	}
	.news .resa-breve {
		display: block;
		background-color: #666;
		padding: 20px;
		color: #fff;
		font-size: .9em;
		transition: .4s ease-in-out;
	}
	
}

@media (max-width: 681px){
	
	#top {
		right: 14px;
	}
	
	img.logo-rub, nav, .f-normal {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
	img.logo-rub-resp, .f-resp {
		display: block;
		width: 100%;
		visibility: visible;
		opacity: 1;
	}
	.f-resp {
		display: inline-block;
		width: 100%;
		visibility: visible;
		opacity: 1;
		margin: 10px 0 20px;
	}
	
	#menu-wrapper #hamburger-menu {
		display: block;
		visibility: visible;
		opacity: 1;
		width: 100%;
	}
	
	.form-resp {
		position: fixed;
		top: 85px;
		right: 0px;
		width: 80px;
		padding: 0 0 20px 0;
		background-color: #8B0000;
		color: #fff;
		display: block;
		visibility: visible;
		opacity: 1;
		z-index: 20;
		transition: .4s ease;
	}
	.form-resp.scrolled {
		top: 54px;
		transition: .4s ease;
	}
	.form-resp a i {
		font-size: 28px;
		color: #fff;
		transition: .3s ease;
	}
	.form-resp a:hover i {
		opacity: .8;
	}
	
	section.gris-resp .left {
		font-size: 2.2vw;
	}
	section.gris-resp .pmf {
		margin-bottom: 10px;
	}
	
	.actus h2 {
		font: 500 3vw 'Lora';
	}
	
	.news, .breve {
		margin-bottom: 20px;
	}
	.news h4 {
		font-size: 2.6vw;
		text-align: left;
	}
	.news .resa-breve {
		font-size: 2.2vw;
	}
	
	main {
		margin: 85px 80px 0 0;
	}
	footer {
		padding: 20px 80px 30px 170px;
	}
	
	.ariane {
		display: block;
		width: auto;
		margin: 40px 0 30px 40px;
		font-size: 1.2em;
	}
	.article {
		text-align: left !important;
	}
	
	.f-resp input.search {
		float: left;
		border: none;
		background-color: rgba(255,255,255,0.8);
		padding: 10px 0 10px 10px;
		width: 200px;
		color: #000;
		font-size: 16px;
		border-radius: 3px 0 0 3px;
		transition: .25s ease;
	}
	.f-resp input.search:focus {
		background-color: #fff;
		width: 230px;
	}
	.f-resp button {
		float: left;
		border: none;
		font-size: 1.5em;
		color: #fff;
		cursor: pointer;
		background-color: #8B0000;
		padding: 8px 10px;
	}
	.jean-charles {
		margin: 40px 20px;
	}
	.jean-charles img {
		margin-bottom: 20px;
	}
	
}

@media (max-width: 520px){
	
	section.gris-resp .left {
		font-size: 3vw;
	}
	.logo {
		width: 65px;
		height: 65px;
	}
	header, header.scrolled {
		padding-left: 95px;
	}
	header h1 {
		font: 500 1.1em 'Lora';
	}
	
	.actus h2 {
		font: 500 4vw 'Lora';
	}
	
	.ariane {
		margin: 40px 0 30px 30px;
		padding-right: 20px;
	}
	.ariane.special {
		margin: 40px 0 30px 0;
		padding-right: 20px;
	}
	
	main .left {
		padding: 0 30px;
	}
	.contenu {
		padding: 0 !important;
	}
	.desc {
		display: block;
		margin: 0 30px 40px;
	}
	
	.news h4 {
		font-size: 3vw;
		text-align: left;
	}
	.news .resa-breve {
		font-size: 2.8vw;
	}
	
}