/* CSS Document */

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

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

html, body {
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #000;
    background-color: #EBEEE4;
	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;
}

ul.spip li {
	list-style: disc;
	margin-left: 2em;
}

hr {
	display: block;
	clear: both;
	height: 1px;
	width: 80%;
	margin: 1.5em 10%;
	padding: 0;
	color: #597720;
	background-color: #597720;
	border: none;
}

#top {
	position: fixed;
	bottom: 200px;
	right: 0;
    width: 50px;
    height: 50px;
	font-size: 40px;
	background-color: #597720;
    color: #fff;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
	display: none;
	line-height: 50px;
	cursor: pointer;
	z-index: 1000;
}
#top:hover{
	background-color: #000;
}

/* cache-cache ************************/
header h2, .home-resp, .anim-resp, .resp-perm, .home-smart, #menu-wrapper #hamburger-menu, .social-base, .carct-resp, footer.resp {
	display: none;
	visibility: hidden;
	opacity: 0;
}

/* généralités terminées *************/

.animation {
	position: absolute;
	top: 90px;
	left: 0;
	width: 100%;
	z-index: 1;
}

.anim {
	display: inline-block;
	width: 100%;
}
.cycle-slideshow {
	position: relative;
	z-index: 1;
}
.cycle-slideshow img {
	width: 100%!important;
}
.anim .cycle-overlay {
	position: absolute;
	bottom: 70px;
	left: 5%;
	font: 600 2.5em 'Roboto';
	color: #fff;
	width: 90%;
	text-align: center;
	text-shadow: 1px 1px 2px #000;
	z-index: 2;
}

header {
	position: fixed;
	width: 100%;
    height: 90px;
	top: 0;
	left: 0;
    background-color: #597720;
    color: #fff;
    z-index: 200;
}

.social {
	position: fixed;
	top: 20px;
	right: 30px;
	font-size: 2.5em;
	z-index: 50;
}
.social a {
	color: #fff;
	transition: .25s ease;
}
.social a:hover {
	color: #EBEEE4;
}
a .logo {
	float: left;
	display: inline-block;
	width: auto;
	height: 110px;
	margin: 15px 30px;
}
a .logo img {
	width: auto;
	height: 110px;
}

h1 {
	float: left;
	display: inline-block;
	font-size: 1em;
	font-weight: 400;
	margin: 15px 0 0;
}
h1 strong {
	font-weight: 600;
}

nav {
	position: fixed;
	top: 40px;
	left: 130px;
	width: 80%;
	display: block;
	text-align: center;
	font-family: 'Barlow Condensed';
	font-size: 2em;
	font-weight: 400;
}
.cbp-tm-menu,
.cbp-tm-menu ul {
	list-style: none;
}
.cbp-tm-menu {
	display: block;
	position: absolute;
	z-index: 1000;
	top: 0;
	width: 100%;
	margin: 0;
}
.cbp-tm-menu > li {
	display: inline-block;
	margin: 0 1em 0 0;
	position: relative;
	z-index: 1100;
}
.cbp-tm-menu > li > a {
	line-height: 1;
	padding: 0 0.3em 20px;
	display: block;
	color: #fff;
}
.no-touch .cbp-tm-menu > li > a:hover,
.no-touch .cbp-tm-menu > li > a:active,
.no-touch .cbp-tm-menu > li > a.on {
	color: #e0eac9;
}

.cbp-tm-submenu {
	position: absolute;
	display: inline-block;
	visibility: hidden;
	top: 40px;
	left: -20px;
	opacity: 0;
	padding: 15px;
	background-color: #597720;
	color: #fff;
	font-size: 20px;
	text-align: left;
	pointer-events: none;
	-webkit-transition: visibility 0s, opacity 0s;
	-moz-transition: visibility 0s, opacity 0s;
	transition: visibility 0s, opacity 0s;
	z-index: 800;
}
.cbp-tm-submenu a {
	color: #fff;
	transition: .2s ease;
	line-height: 1.1;
	font-family: 'Barlow Condensed';
}
.cbp-tm-submenu a:hover, .cbp-tm-submenu a.on {
	color: #EBEEE4;
}
.cbp-tm-submenu span.sep-menu {
	width: 100%;
	display: inline-block;
	background-color: #EBEEE4;
	height: 1px;
	margin: -10px 0 5px;
}

.cbp-tm-show .cbp-tm-submenu {
	width: 12em;
	left: 0;
	/*margin: 0 0 0 -8em;*/
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	-webkit-transition: visibility 0s, opacity 0.3s;
	-moz-transition: visibility 0s, opacity 0.3s;
	transition: visibility 0s, opacity 0.3s;
}

.cbp-tm-nospace-right .cbp-tm-submenu {
	right: 0;
	left: auto;
}

.cbp-tm-nospace-left .cbp-tm-submenu {
	left: 0;
}

/* last menu item has to fit on the screen */
.cbp-tm-menu > li:last-child .cbp-tm-submenu {
	right: 0;
}

main {
	display: inline-block;
	margin-top: 110px;
	width: 100%;
	flex: 1;
}

.home {
    display: block;
    width: 80%;
	margin: 0 10% 40px 10%;
}
.home h2 {
	margin: 1em 0;
	font: 500 2em 'Barlow Condensed'!important;
	color: #597720!important;
}

.item-actu {
	text-align: left;
	padding: 20px 10px;
    border-top: 1px solid #EBEEE4;
	border-bottom: 1px solid #EBEEE4;
	background-color: rgba(255,255,255,0.5);
	margin: 0 20px;
	transition: .3s ease;
}
.item-actu span {
	display: inline-block;
	vertical-align: top;
	width: 70%;
}
.item-actu:hover {
	border-top: 1px solid #597720;
	border-bottom: 1px solid #597720;
	background-color: #fff;
}
.item-actu h4 {
	margin: 0 0 10px;
	font: 500 1.3em 'Barlow Condensed';
	color: #597720;
}
.item-actu img {
	display: inline-block;
	width: 25%;
	margin: 0 15px 0 0;
}
.item-actu small {
	font: 600 .7em Arial, Helvetica;
	text-transform: uppercase;
	color: #000;
	background-color: #EBEEE4;
	margin: 0 0 8px;
	padding: 4px 10px;
}
.item-actu p {
	font: 400 1em Arial, Helvetica;
	color: #000;
	margin: 10px 0 0;
}

footer.defaut {
	display: block;
	width: auto;
	padding: 20px 30px;
	background-color: #dcedb6;
	color: #000;
	position: relative;
	margin: auto;
}
footer.defaut .left-f {
	font-size: .85em;
	text-align: left;
}
footer.defaut .left-f strong, footer.resp .left-f strong {
	color: #597720;
	font-size: 1.1em;
}
footer.defaut .left-f a, footer.resp .left-f a {
	color: #597720;
	transition: .25s ease;
}
footer.defaut .left-f a:hover, footer.resp .left-f a:hover {
	color: #000;
}
footer.defaut .left-f p, footer.resp .left-f p {
	margin: 15px 0 0;
}
footer.defaut .rappel a, footer.resp .rappel a {
	display: inline-block;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Barlow Condensed';
	font-size: 1.2em;
	font-weight: 500;
	color: #597720;
	border-bottom: 1px dotted #597720;
	padding: 5px 0;
	transition: .25s ease;
}
footer.defaut .rappel a:hover, footer.defaut .rappel a.on, footer.resp .rappel a:hover, footer.resp .rappel a.on {
	color: #597720;
}
footer.defaut .rappel a:last-child, footer.resp .rappel a:last-child {
	border: none;
	padding-bottom: 0;
}
footer.defaut .c4 img, footer.resp .c4 img {
	text-align: right;
	width: 100px;
}

/********************************* intérieur ***************°_°********************************/
.int {
    display: block;
    width: 80%;
	margin: 40px 10%;
}
.int h2 {
	font: 400 1.3em 'Barlow Condensed';
	margin: 0 0 25px;
	text-align: left;
}
.int h2 strong {
	font-weight: 500;
	font-size: 1.5em;
	color: #597720;
}
.int h2 a, .txt a {
	color: #597720;
	transition: .25s ease;
}
.int h2 a:hover, .txt a:hover {
	color: #000;
}

.txt {
	text-align: left;
	line-height: 1.4;
}
.txt p {
	margin: 0 0 1em;
}
.txt h3 {
	margin: 1.5em 0 .5em;
	color: #597720;
}
.txt ul.spip {
	margin: 0 0 1em;
}
.txt ul.spip li {
	margin-left: 20px;
}
.txt .documents {
	margin-top: 20px;
}
.txt span.logo-article {
	float: right;
	width: 35%;
	margin: 0 0 0 20px;
}

.chapo {
	display: inline-block;
	width: 88%;
	padding: 20px 6%;
	background-color: rgba(255,255,255,0.6);
	color: #000;
	font-size: 1.1em;
	margin: 1em 0;
	border-radius: .4em;
}
.chapo p:last-child {
	margin-bottom: 0!important;
}

h6 {
	font: 600 .8em Verdana, Helvetica;
	color: #597720;
	margin: 2em 0 .25em;
}
a .pdfs {
	color: #000;
	background-color: #dcedb6;
	padding: 15px 10px;
	/*border-radius: .2em;*/
	text-align: center;
	transition: .3s ease;
}
a .pdfs i {
	font-size: 40px;
	color: #597720;
	transition: .3s ease;
}
a .imgs {
	color: #000;
	padding-bottom: 15px;
	text-align: center;
	transition: .3s ease;
}
a .pdfs h5, a .imgs h5 {
	font: 400 10px Verdana;
	color: #000;
	margin: 5px 0 0 0;
}
a:hover .pdfs, a:hover .imgs {
	background-color: #fff;
}
a:hover .pdfs i {
	color: #597720;
	transform: rotateY(-180deg);
	transform-origin: center;
}
a .pdfs h5, a .imgs h5 {
	font: 500 .9em 'Barlow Condensed';
	margin: .5em 0 0;
}

.imgs a div {
	text-align: center;
	padding: 0 0 15px 0;
	color: #000;
	font: 400 .85em Verdana;
	background-color: #fff;
	transition: .3s ease;
}
.imgs img {
	width: 100%!important;
}
.imgs a div:hover {
	background-color: #E6E2D6;
}

a .item-rub {
	background-color: #fff;
	padding: 0 0 10px 0;
	margin-bottom: 20px;
	text-align: center;
	display: block;
	height: 95%;
	color: #597720;
	font: 300 1em 'Barlow Condensed';
	transition: .3s ease;
}
a .item-rub img {
	margin-bottom: 10px;
}
a:hover .item-rub {
	background-color: #dcedb6;
	color: #597720;
}

.item-rub h4 {
        font-weight: 400;
        font-size: 1.2em;
    }

.imgs .item p {
	margin: 10px 0 0;
}

/* formulaire ************************************/
.formulaire_newsletter label {
	font: 500 1.4em 'Barlow Condensed';
	color: #000;
	margin-right: 1em;
}
.formulaire_newsletter input.email {
	border: 1px solid #00529B;
	padding: 4px 10px;
	background-color: #F1EDE3;
	color: #000;
	transition: .3s ease;
}
.formulaire_newsletter input.email:hover, .formulaire_newsletter input.email:focus {
	background-color: #fff;
}
.formulaire_newsletter input.submit {
	margin-top: 20px;
	border: 0;
	padding: 4px 10px;
	background-color: #00529B;
	font: 500 1.4em 'Barlow Condensed';
	color: #fff;
	border-radius: .1em;
	transition: .3s ease;
	cursor: pointer;
}
.formulaire_newsletter input.submit:hover {
	background-color: #555;
}

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

@media (min-width: 1281px) {
	
	span.logo-article {
		width: 20%;
	}
	
}

@media (max-width: 850px) {
	
	a .logo {
		width: 90px;
		height: 90px;
		border-radius: 60px;
	}
	
	nav {
		left: 160px;
		font-size: 1.2em;
	}
	.cbp-tm-menu > li {
		margin: 0 10px 0 0;
	}
	.cbp-tm-menu > li > a {
		padding: 0 0.3em 10px;
	}
	.cbp-tm-submenu {
		padding: 20px 10px 15px;
	}
	.cbp-tm-show .cbp-tm-submenu {
		width: 10em;
	}
	
}

@media (max-width: 780px) {
	
	.cbp-tm-submenu {
		top: 30px;
		left: 78%;
		transform: translateX(-22%);
		text-align: center;
		z-index: 2000;
	}
	
}

@media (max-width: 680px) {
	
	nav, .anim {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
	#menu-wrapper #hamburger-menu {
		display: block;
		visibility: visible;
		opacity: 1;
	}
	a .logo {
		z-index: 10000!important;
	}
	.anim-resp {
		display: block;
		visibility: visible;
		opacity: 1;
		width: 100%;
	}
	
}

@media (max-width: 600px) {
	
	#top {
		bottom: 30px;
	}
	
	.tools, span.carct {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
	.int {
		padding: 70px 0 30px;
	}
	span.carct-resp {
		display: inline-block;
		visibility: visible;
		opacity: 1;
		margin-top: 20px;
	}
	span.carct-resp img {
		width: 100px;
	}
	
}


@media (max-width: 580px) {
    
    header h1, .cycle-overlay, footer.defaut {
        display: none;
        visibility: hidden;
        opacity: 0;
    }
	
    header h2 {
        float: left;
        display: inline-block;
        visibility: visible;
        opacity: 1;
        font-size: 1.5em;
        font-weight: 400;
        margin: 15px 0 0;
    }
    header h2 strong {
        font-weight: 600;
    }
    .home {
        width: 90%;
        margin: 0 5% 40px;
    }
    .item-actu {
        margin: 0 0 20px;
    }
    
    footer.resp {
        display: block;
        visibility: visible;
        opacity: 1;
        width: auto;
        padding: 20px 30px;
        background-color: #dcedb6;
        color: #000;
        position: relative;
        margin: auto;
    }
    footer.defaut .rappel a, footer.resp .rappel a {
        font-size: 1.5em;
    }
    footer.resp .left-f {
        text-align: center!important;
        margin: 40px 0 30px;
    }
    footer.resp .c4 {
        display: inline-block;
        margin: 40px 0 0;
    }
    
    a .item-rub {
        padding: 15px;
    }
    .item-rub h4 {
        font-weight: 400;
        font-size: 1.2em;
    }
    /*a .item-rub h4 {
        font-weight: 400;
        font-size: 1.2em;
    }*/
	.txt span.logo-article {
		float: none;
		display: inline-block;
		width: 100%;
		margin: 0 0 20px 0;
	}
	
}

