/*  CSS  perso --------------------------------- */

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}
img, video {
	vertical-align: bottom;
}
body {
	font-family: 'Open Sans', sans-serif;
	background-color: #fcfaeb;
	margin: 0;
}
a {
	color:#b9911f;
	text-decoration: none;
	cursor: pointer;
}
button {
	cursor: pointer;
}
a:hover {
	color: #9c0202;
}
.container {
	width: 100%;
	margin: 0 auto;
}
.clearfix {
	clear: both;
}
header {
	background-color: #f3ddc5; 
}

header h1 {
	color:#9c0202; font-size: 1rem; margin: 0;
	font-family: 'Open Sans', sans-serif;
	width: auto;
	padding: 20px;
	font-weight: 700;
}
.nav {
	width: 50%;
	line-height: 52px;
	padding-top: 40px;
}
nav a:hover {
	border-left: 3px solid #8e0000;
}
nav ul li {
	display: inline-flex; 
	padding-right: 15px;
	padding-left: 5px;
	text-transform: uppercase;
	flex-direction: row;
	font-weight: 700;
}
nav ul {
	text-align: right;
	margin: 0;
	padding: 0;
}

#content {
    padding: 20px;
}

#content section {
	width: 75%;
    padding: 40px;
	margin: auto;
}



/*-----------page accueil-----------*/
.visuel-gauche {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 10;
	width: 20%;
}
.visuel-droite {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 10;
	width: 20%;
}
.visuel-animaux {
	width: 35%;
	opacity:0.6;
}
.accueil{
	background: url(../images/fond.jpg) no-repeat center;
	background-size: cover;
	background-attachment: fixed;
	color: #fff;
	height: 85vh;
	width: 100%;
}
.accueil h2 {
	text-shadow: 3px 5px 10px #000;
	padding-bottom: 30px;
	font-size: 1.6rem;
}
.accueil h3 {
	text-shadow: 3px 5px 10px #000;
	padding: 20px;
	width: 50%;
	margin: 0 auto;
}
.element-central {
	text-align: center;
	padding-top: 50px;
}
.element-central a {
	font-size: 1.5rem;
}


/*------Barre de recherches------*/
.recherche-globale {
	width: 50%;
}
.rechercher {
	padding: 2%;
}
.rechercher button:hover{
	background-color: #b9911f;
	color: #fff;
}
#formRecherche input {
	padding: 10px 20px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border: none;
	width: 40%;
}
.rechercher button {
	background-color: #8e0000;
	color: #fff;
	padding: 10px 20px;
	border: none;
	font-weight: 700;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	width: auto;
}
.recherches {
	text-align: center;
	justify-content: center;
	display: flex;
}
.cases {
	text-align: center;
}
.cocher {
	padding: 2%;
}
/*----------Page resultat----------*/
.slider img {
	background: fixed no-repeat;
	width: 100%;
}
.resultat {
	background-color: #f3ddc5;
}
.filtre {
    width: 100%;
}
.flexcolonne {
    width: 25%;
    min-width: 250px;
	flex-grow: 1;
}
.colonne {
	background-color: #8e0000;
	padding: 20px;
	margin: 7px !important;
	border-radius: 10px;
	color: #fff;
	display: block;
}
.colonne:hover {
	background-color: #fff;
	padding: 20px;
	margin: 7px !important;
	border-radius: 10px;
	color: #8e0000;
	display: block;
	box-shadow: 0px 0px 10px #333;
	transition: 350ms;
}
.colonne h3 {
	font-size: 1.2rem;
} 
.colonnes-fables {
	width: 75%;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.colonnes-fables img {
	width: 35%;
	opacity: 0.5;
}

.illustration img {
	width: 50%;
	opacity: 0.5;
}
.illustration {
	text-align: center;
}


/*-----------Page fable----------*/
.fable {
	padding: 20px 10px;
	width: 600px;
	margin: 0 auto;
	text-align: center;
}
.fable p {
	color: #888;
}

.blocFableDetail {

    background-color: #fcf1de;

	background-color: #fff8d9;
	background: #f4eac7;
	/*background: -moz-linear-gradient(left, #f4eac7 0%, #fefcea 17%, #fefcea 83%, #f4eac7 100%);
	background: -webkit-linear-gradient(left, #f4eac7 0%,#fefcea 17%,#fefcea 83%,#f4eac7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4eac7', endColorstr='#f4eac7',GradientType=1 );
	*/
	background: linear-gradient(to right, #ffe8b9 0%,#fff6e2 10%,#fff6e2 90%,#ffe8b9 100%);

    border: 2px solid #815a1e;
    padding: 40px;
    max-width: 700px;
    margin: auto;
    color: #000 !important;
}

.blocFableDetail p {	
color: #533f29 !important;
font-family: 'Open Sans', cursive;
font-size: 1.2rem;
margin-top: 0;
margin-bottom: 12px;
}

.PiedFable p {
	color: #533f29 !important;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8rem;
	margin-top: 0;
	margin-bottom: 12px;
}
.cacher {
	opacity: 0;
	transition: 200ms;
}
.cach {
	opacity: 1;
}


/*--------Page biographie-------**/
.clearfix {
	clear: both;
}
.background {
	background-color: #f3ddc5;
	height: 10px;
}
.bio {
	width: 50%;
	float: left;
}
.text-biographie {
	padding-right: 10%;
	padding-bottom: 10%;
	padding-left: 10%;
	padding-top: 0;
}
.signature img {
	margin-top: 5%;
}
span {
	font-weight: 700;
}
.line {
	width: 31%;
	height: 3px;
	background-color: #8e0000;
	margin-bottom: 20px;
}


/*---Page Mentions legales---*/

#mentions section {
	width: 50%;
	margin: 0 auto;
}
.text-mentions {
	padding: 50px;
}
.text-mentions h2 {
	color: #8e0000;
}
.text-mentions h3 {
	color: #8e0000;
}

/*--------Page contact-------*/
#contact {
	padding: 20px;
}
#contact section {
	width: 50%;
    padding: 40px;
	margin: auto;
}
#formulaire h2 {
	color: #8e0000;
}
#formulaire .form-group {
	padding: 10px;
}
#formulaire textarea {
	height: 22vh;
}
#formulaire label {
	line-height: 30px;
    color: #8e0000;
}
#formulaire button {
	background-color: #8e0000;
	border: none;
	padding: 10px 20px;
	color: #fff;
	border-radius: 5px;
	margin-top: 20px;
	transition: 350ms;
}
#formulaire button:hover {
	background-color: #b9911f;
	border: none;
	padding: 10px 20px;
	color: #fff;
	border-radius: 5px;
	margin-top: 20px;
}
.saisie {
	padding: 17px 20px;
	border: none;
	width: 100%;
}

/*-----------Plan Du Site----------*/
.text-plandusite h2 {
	color: #8e0000;
}
.text-plandusite h3 {
	color: #8e0000;
}

/*-----------recherche avancées----------*/
#filtres-avancees section{
	width: 60%;
	margin: auto;
	padding: 40px;
	margin-bottom: 5%;
}
}
#filtres-avancees h2 {
	color: #8e0000;
   	font-size: 30px;
}
#filtres-avancees h4 {
	color: #8e0000;
   	font-size: 30px;
}
.filtrage {
	background-color: #f3ddc5;
	margin: 5%;
	border-radius: 10px;
	padding: 20px;
}
.filtrage button {
    background-color: #8e0000;
    color: #fff;
    padding: 17px 20px;
    border: none;
    font-weight: 700;
    border-radius: 5px;
    width: auto;
	margin-top: 20px;
}
.filtrage button:hover {
	background-color: #b9911f;
}
#filtres-avancees h2, #filtres-avancees h3 {
	color: #8e0000;
}
.btn {
	text-align: right;
}
label.optionsRadio  {
    border: 1px solid #fff;
    padding: 5px 10px;
    margin: 5px;
    background-color: rgba(255,255,255, 0.3);
    border-radius: 4px;
}
label.labelMotsSaisie {

    width: 200px !important;
    display: inline-block;
    margin-right: 10px;
}
select.labelMotsSaisie {

    width: 200px !important;
    display: inline-block;
    margin-right: 10px;
}
.groupedesaisie select {
	background-color: #fff;
	padding: 5px 10 px;
	border: none;
}
.groupedesaisie select {
	padding: 5px;
	margin-bottom: 15px;
}
.groupedesaisie input {

    width: 60% !important;
    display: inline-block;
	border: none;
	padding: 10px;
	border-bottom: #ccc 1px solid;
}
.grouperadio {
    text-align: right;
    padding-top: 20px;
	width: 80%;
}



/*-----------FLECHE HAUT DE PAGE----------*/
.hautdepage a {
    font-size: 2.4rem;
}
.hautdepage {
    border-radius: 80%;
    padding: 10px;
    z-index: 9999;
    text-decoration: none; 
}

	.hautdepage {
	animation-name: fleche;	
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-direction: normal;
}	
	@keyframes fleche {
		0% {
			opacity: 0;
			transform: translateY(100px);
		}  
		50% {
			opacity: 0.5;
			transform: translateY(50px);
			transform: scale(2);
		} 
		100% {
			opacity: 1;
			transform: translateY(0px);
		} 
	}
	
.visible {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
}
.invisible {
	display: none;
	/*opacity: 0;*/
}	

/*-----------Footer----------*/
footer{
	background-color: #8e0000;
	width: 100%;
	padding: 16px;
	text-align: center;
	font-size: 0.8rem;
	color: rgba(255,255,255, 0.75);
} 
footer a {
	color: #fff;
}

/*---------CONTACTOK---------*/
.envoiOK {
    background-color: #f3ddc5;
    font-size: 1.2rem;
    font-family: 'Open Sans', sans-serif;
    padding: 18px 20px;
    width: 30%;
    margin: 0 auto;
    color: #078430;
    border-radius: 10px;
}


/*-------MEDIAQUERIES-------*/
/*-------PORTABLE-------*/
@media only screen and (max-width: 767px) {
	/*HEADER*/
	header {
	text-align: center;
	}
	header .logo {
	float: none !important;
	}
	.nav {
	float: none !important;
	width: 100%;
	padding-top: 0;
	}
	nav ul {
	text-align: center !important;
	width: 100% !important;
	}
	nav ul li {
    display: inline-flex;
    padding: 0;
    text-transform: uppercase;
    flex-direction: row;
	width: 100%;
	padding-left: 20px;
	}
	nav ul li:hover {
	background-color: #fcfaeb;
	}
	nav a:hover {
    border-left: 0px solid #8e0000;
	}
	/*PAGE RESULTAT*/
	.slider {
    display: none;
	}
	.recherche-globale {
    width: 100%;
	}
	.illustration {
    display: none;
	}
	#formRecherche input {
    width: 70%;
	}
	/*PAGE RECHERCHE AVANCEES*/
	#filtres-avancees section {
    width: 100%;
	margin: 0 auto;
	}
	#filtres-avancees {
	padding: 20px;
	}
	.filtrage {
	padding: 7px !important;
	margin-top: 10% !important;
	}
	.groupedesaisie input {
    width: 100% !important;
	}
	.btn {
	text-align: center;
	}
	.grouperadio {
    width: 100%;
	text-align: center;
	line-height: 65px;
	}
	label.optionsRadio {
    border: 1px solid #fff;
    background-color: rgba(255,255,255, 0.3);
    border-radius: 4px;
	display: block;display: 
	}
	/*PAGE BIOGRAPHIE*/
	#content {
	padding: 20px;
	}
	#content section {
	width: 100%;
	padding: 0;
	margin: auto;
	}
	.bio {
    width: 100%;
    float: none;
	}
	.text-biographie {
    padding: 0;
	}
	.text-biographie h2 {
    color: #8e0000;
	font-size: 26px !important;
	}
	
	/*PAGE MENTIONS LEGALES*/
	#mentions section {
    width: 100%;
    margin: 0 auto;
	}
	.text-mentions {
    padding: 20px;
	}
	
	/*PAGE CONTACT*/
	#contact section {
    width: 100%;
    padding: 0;
    margin: auto;
	}
	
	/*PAGE FABLES*/
	.blocFableDetail a {
		display: none;
	}
	
	/*FOOTER*/
	footer{
	background-color: #8e0000;
	width: 100%;
	padding: 16px;
	text-align: center;
	font-size: 0.8rem;
	color: rgba(255,255,255, 0.75);
	}
	.envoiOK {
    background-color: #f3ddc5;
    font-size: 0.8rem;
    font-family: 'Open Sans', sans-serif;
    padding: 18px 20px;
    width: 100%;
    margin: 0 auto;
    color: #078430;
    border-radius: 10px;
	}
}


/*-------TABLETTE-------*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
	/*PAGE RECHERCHE AVANCEES*/
	#filtres-avancees section {
    width: 90%;
    margin: auto;
    padding: 40px;
    margin-bottom: 5%;
	}
	.grouperadio {
    text-align: center;
    padding-top: 20px;
    width: 96%;
	}
	
	/*PAGE RESULTATS*/
	.recherche-globale {
    width: 100%;
	}
	#content section {
    max-width: 100%;
    padding: 40px;
    margin: auto;
	}
	
	/*PAGE CONTACT*/
	#contact section {
    width: 100%;
    padding: 40px;
    margin: auto;
	}
	
	/*PAGE MENTIONS LEGALES*/
	#mentions section {
    width: 100%;
    margin: 0 auto;
	}
	
	/*PAGE BIOGRAPHIE*/
	#content section {
    width: 100%;
    padding: 40px;
    margin: auto;
	}
	.bio {
    width: 35%;
    float: left;
	}
	.droite {
    width: 65%;
	}
	
	/*PAGE ACCUEIL*/
	.accueil {
    overflow: static;
	}
	.visuel-droite {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 20%;
	}
	.visuel-gauche {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 20%;
	}
	.element-central {
    text-align: center;
    padding-top: 1%;
	}
	
	/*PAGE FABLES*/
	.blocFableDetail a {
		display: none;
	}
	
	/*FOOTER*/
	footer{
	background-color: #8e0000;
	width: 100%;
	padding: 16px;
	text-align: center;
	font-size: 0.8rem;
	color: rgba(255,255,255, 0.75);
	}
}

/*-------ECRAN-------*/
@media screen and (min-width: 1024px) {
	
}