@import url('/plugin/site/variables.css');

body, document, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font: var(--font-os-regular-14);
	color: var(--color-main-text);
}
body {
	height: auto;
	min-height: 100%;
	position: relative;
	background-color: var(--color-background);
	font: var(--font-os-regular-14);
	color: var(--color-main-text);
}

a {
	text-decoration: underline;
	color: var(--color-anchor);

	-webkit-transition: var(--transition-color);
	-moz-transition: var(--transition-color);
	-o-transition: var(--transition-color);
	transition: var(--transition-color);
}
a:hover, a:focus {
	color: var(--color-anchor);
	text-decoration: none;
}
.btn {
	-webkit-transition: var(--transition-bg-color), var(--transition-color);
	-moz-transition: var(--transition-bg-color), var(--transition-color);
	-o-transition: var(--transition-bg-color), var(--transition-color);
	transition: var(--transition-bg-color), var(--transition-color);
}
img {
	border: none;
}

@media (min-width: 990px) {
	.container{
		max-width: 970px;
	}
}

body > .container {
	min-height: 700px;
    padding-top: 15px;
	padding-bottom: 30px;
}

header .titre-page {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 700;
	text-shadow: 3px 3px 7px #000000;
	font-size: 50px;
	text-decoration: none;
	color: #FFF;
	display: block;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	line-height: 40px;
	margin: 0px;
	padding: 0px;
}


body {
	--current-color: var(--color-gris);
}
body.couleur-marron {
	--current-color: var(--color-marron);
}
body.couleur-rouge {
	--current-color: var(--color-rouge);
}
body.couleur-violet {
	--current-color: var(--color-violet);
}
body.couleur-vert {
	--current-color: var(--color-vert);
}

.bloc-gauche {
	border-radius: 20px;
	background-color: var(--current-color);
	color: #fff;
}
.bloc-gauche-titre {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.1;
	color: #fff;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, .35);
	margin-bottom: .5rem;
}
.bloc-gauche-desc {
	font-weight: bold;
	font-size: 13px;
	line-height: 1.4;
	color: #fff;
}
.bloc-gauche-desc a {
	color: #fff !important; /* bat la regle globale a{color:var(--color-X)!important} */
	text-decoration: underline;
}


/* générique */

header a {
	text-decoration: none;
}

header .item-menu-haut {
	position: absolute;

	display: flex !important;
	flex-direction: column;
	justify-content: center !important;

	text-align: center;
}
header .item-menu-haut span {
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 700;
	text-shadow: 3px 3px 7px #000000;
	font-size:18px;
	text-decoration:none;
	color:#FFF;
	display:block;
}
header .item-menu-haut span:hover,
header .item-menu-haut.selected span {
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 700;
	text-shadow: 0px 0px 8px #FFFFFF;
	font-size:18px;
	text-decoration:none;
}



header .item-menu-haut.marron {
	left:310px;
	top:45px;
	width: 130px;
	height: 104px;
	z-index: 3;
	background: url('/images/galet_marron.png') no-repeat;
}
header .item-menu-haut.marron span {
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
}
header .item-menu-haut.marron span:hover,
header .item-menu-haut.marron.selected span {
	color: var(--color-marron-titre-hover);
}



header .item-menu-haut.rouge {
	left: 470px;
	top: 65px;
	width: 108px;
	height: 113px;
	z-index: 4;
	background: url('/images/galet_rouge.png') no-repeat;
}
header .item-menu-haut.rouge span {
	/* ppas de rotation */
}
header .item-menu-haut.rouge span:hover,
header .item-menu-haut.rouge.selected span {
	color: var(--color-rouge-titre-hover);
}


header .item-menu-haut.violet {
	left: 608px;
	top: 75px;
	width: 113px;
	height: 105px;
	z-index: 5;
	background: url('/images/galet_violet.png') no-repeat;
}
header .item-menu-haut.violet span {
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
}
header .item-menu-haut.violet span:hover,
header .item-menu-haut.violet.selected span {
	color: var(--color-violet-titre-hover);
}


header .item-menu-haut.vert {
	left: 751px;
	top: 80px;
	width: 123px;
	height: 102px;
	z-index: 6;
	background: url('/images/galet_vert.png') no-repeat;
}
header .item-menu-haut.vert span {
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
}
header .item-menu-haut.vert span:hover,
header .item-menu-haut.vert.selected span {
	color: var(--color-vert-titre-hover);
}


.form-label.required:after {
	content: '*';
	color: var(--color-rouge);
}

.form-label {
	color: var(--color-violet);
	font-weight: bold;
	margin-bottom: .25rem;
}


.liste-album { }

.liste-album .titre-bloc-album {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	color: #FFF;
	line-height: 16px;
	margin: 0px;
	padding: 5px 10px;
	float: left;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	background-color: #000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

.liste-album .album {
	text-align: center;
	cursor: pointer;
}
.liste-album .album img {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}
.liste-album .album p {
	padding-top: 0px;
	margin-top: 0px;

	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 11px;

	color: var(--color-rouge);
}

.mfp-container figure {
	margin: 0;
}
.mfp-container .mfp-title {
	font-weight: bold;
}





ul.menu-bas li:not(:last-child) {
	position: relative;
	padding-right: 15px;
}
ul.menu-bas li:not(:last-child):after {
	position: absolute;
	top: 0;
	right: 0;
	font-family: var(--font-family-fontawesome);
	font-weight: 900;
	color: #FFFFFF !important;
	font-size: 6px;
	content: "\f111";
}
ul.menu-bas li a {
	color: #FFFFFF !important;
	font-size: 12px;
}


footer a {
	text-decoration: none;
}


@media print {
	a[href]:after {
		content: none
	}
	.boite-a-outils {
		display: none !important;
	}
	.breadcrumb {
		display: none !important;
	}
	footer {
		display: none !important;
	}
}