@charset "utf-8";
/* CSS Document */
/********************************* Général *********************************/
html, body {
	background-color: #343e40;/*#2a2929*/ /*le bon =>#343e40*/
	max-width: 100%;
	margin: 0;
	padding: 0;/*
	color: #2a2929;*/
	font-family: 'Open Sans', 'Lato', sans-serif;
	font-size: 20px;
}

.resume1, .resume2, .livredor_intro, .livredor, .biographie, .footer_contact, .footer_map, .footer_sitemap, .conception {
	padding: 20px;
}
/*
#haut {
	visibility: hidden;
	display: none;
}
#bouton_haut {
	color: #000;
	border:#000000 thin;
	background-color: red;
	float: right;
}*/

.hideme {
	opacity: 0;
}

/********************************* Mise en page grid *********************************/
.container {
	display: grid;/*
	grid-template-columns: repeat(6, 1fr);*/
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 140px repeat(7, auto);
	grid-template-areas: 	"head1 head1 head1 head2 head2 head2"
							"photo photo photo photo photo photo"
							"equip1 equip1 equip2 equip2 equip3 equip3"
							"topo1 topo1 topo1 topo2 topo2 topo2"
							"feed1 feed1 feed2 feed2 feed2 feed2"
							"bio bio bio bio bio bio"
							"footer1 footer1 footer2 footer2 footer3 footer3"
							"conception conception conception conception conception conception";
}

/********************************* Header | Logo & Menu *********************************/
.entete {
	grid-area: head1;
	background-color: #f2f1ec;
	text-align: center;/*
	height: 150px;*/
}

.entete a,.entete a:active, .entete a:hover, .entete a:focus {
	text-decoration: none;
	color: black;
}

.entete h1 a, .entete h1 a:active, .entete h1 a:focus, .entete h1 a:visited {
	color: #a68949;
	/*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
	/*text-shadow: 1px 2px 3px rgba(0,0,0, 0.5);/* ombre portée */
	/*text-shadow: 1px 2px 0 rgba(0,0,0,0.4),-1px -2px 0 rgba(255,255,255,1);/* estampage 
	text-shadow: 1px 2px 3px rgba(0,0,0, 0.5),1px 2px 0 rgba(0,0,0,0.4),-1px -2px 0 rgba(255,255,255,1);*/
}

.entete h1 a:hover {
	color: #967C42; 
	transition:background-color .2s ease;
}

.entete h2 {
	color: #a68949;
	font-size: 0.8em;
	font-style: italic;
	margin-top: -30px;
}

.menu {
	grid-area: head2;
	background-color: #f2f1ec;
	display: flex;/*
	height: 150px;*/
	color: black;
}

.menu ul {
	position:relative;
	height: 2em;
	margin: 30px 100px;
	padding: 0;
	white-space: nowrap;
}
.menu ul li {
	display:inline;
	text-align:center;
	padding: 50px 0 20px 0;
}

.menu ul li:nth-child(1) a{width:4em;}
.menu ul li:nth-child(2) a{width:4em;}
.menu ul li:nth-child(3) a{width:4em;}
.menu ul li:nth-child(4) a{width:4em;}
.menu ul li:nth-child(5) a{width:4em;}

.menu ul li a {
	display:inline-block;
	box-sizing:border-box;
	padding:.4em .2em;
	color:black;
	text-decoration:none;/*
	text-shadow:0 1px 0 white;
	background-color:transparent;*/
	transition:background-color .3s ease;
}
.menu ul li a:hover,ul li a:focus {
     color:#2a2929;/*
     background-color:rgba(255,255,255,.4);*/
     transition:background-color .3s ease .4s;
}
.menu ul li a:focus{
     border-bottom:3px solid #2a2929;
}
.menu ul li:last-child::after{
     content:"";
     position:absolute;
     left:0px;
     bottom:-3px;
     display:block;
     width:2em;
     height:3px;
     background:#ccc;
     border-bottom:1px solid rgba(255,255,255,.8);
     transition: all .5s ease;
}
.menu ul li:hover ~ li:last-child::after,
.menu ul li:last-child:hover::after{background:#a68949;}/*#2a2929*/

.menu ul li:nth-child(1):hover ~ li:last-child::after{left:0;width:4em;}
.menu ul li:nth-child(2):hover ~ li:last-child::after{left:4em;width:4em;}
.menu ul li:nth-child(3):hover ~ li:last-child::after{left:8em;width:4em;}
.menu ul li:nth-child(4):hover ~ li:last-child::after{left:12em;width:4em;}
.menu ul li:last-child:hover::after{left:16em;width:4em;}


/********************************* Photo page d'accueil *********************************/
.photo-presentation {
	grid-area: photo;/*
	background-image: url("../img/photo_accueil.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;/*
	background-attachment: fixed;*/
	overflow: hidden;/*
	margin-bottom: 10px;*/
}

img.superbg {/*
    position:fixed;*/
    top:0;
    left:0;
    z-index:-1;
}


/********************************* Équipements *********************************/
.descriptif, .equipement, .situation {
	width: auto;
	min-width: 200px;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	overflow: hidden;
	text-align: center;
	margin-top: -5px;
}

.descriptif {
	grid-area: equip1;
	background-image: url("../img/descriptif.jpg");
	min-height: 400px;
}

.equipement {
	grid-area: equip2;
	background-image: url("../img/equipements.jpg");
}

.situation {
	grid-area: equip3;
	background-image: url("../img/surfeur.jpg");
}

.icone_bg {
	background-color: rgba(52,62,64,0.7);/*#343e40;*//*#2a2929*/
	margin: 20px 40px 20px 40px;
	border-radius: 5px;
}

.icone_bg li { /* liste */
	list-style-type: none;
	list-style-position: inside;
	display: inline-block;
	width: 150px;
	min-height: 200px;
	text-align: center;
	vertical-align: top;
}

.icone_bg li img { /* image */
	width: 150px;
	margin: 0 0 -30px 0;
}

.icone_bg li span { /* texte */
	width: 150px;
	font-size: 0.7em;
	color: #F4F4F4;
}

.icone_equip {
	max-width: 150px;
	max-height: 150px;
	margin: 5px;
}

.descriptif h2, .equipement h2, .situation h2 {
	padding: 20px 0 20px 0;
	margin: 0;
	color: #fff;
	font-weight: bolder;
	font-stretch: extra-expanded;
	text-decoration: underline;
}

/********************************* Résumé *********************************/
.resume1 {
	grid-area: topo1;
	background-color: #f2f1ec;
	text-align: justify;/*
	top: 50%;*/
	min-height: 300px;
}

.resume1 strong {
	color: #a68949;
}

img.volute {
	display: block;
	margin: 0 auto;
	padding-top: 50px;
}

.resume1 h1 {
	text-align: center;
	color: #a68949;
	/*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
	/*text-shadow: 1px 2px 3px rgba(0,0,0, 0.5);/* ombre portée */
	/*text-shadow: 1px 2px 0 rgba(0,0,0,0.4),-1px -2px 0 rgba(255,255,255,1);/* estampage */
	/*text-shadow: 1px 2px 3px rgba(0,0,0, 0.5),1px 2px 0 rgba(0,0,0,0.4),-1px -2px 0 rgba(255,255,255,1);*/
}

a.lienjemontre, a.lienjecache {
	color: #fff;
	text-decoration: none;
	font-style: italic;/*
	margin: 30px 0px 30px 0px;*/
	padding: 15px 30px 15px 30px;/*3px 10px 3px 10px*/
	margin-right: 50px;
	margin-bottom: 30px;
	background-color: #a68949;/*
	outline-style: solid;
	outline-color: #2a2929;
	outline-width: 1px;*/
	border: double #f7f7f5; /*#2a2929*/
	border-radius: 0;
	float: right;
	transition:background-color .3s ease;
}

a.lienjemontre:hover, a.lienjecache:hover {
	color: #a68949;
	background-color: #f7f7f5;
	border: double #a68949; /*#2a2929*/
	transition:background-color .2s ease;
}

.jecache {
	display: none;
}

.jemontre {
	display: block;
}

.resume2 {
	grid-area: topo2;
	background-color: #f2f1ec;
	background-image: url("../img/leconquet_resume2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	overflow: hidden;
	padding: 0;
	margin: 0;
}
/*
.resume2 img {
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	width: auto;
	overflow: hidden;
}
.resume2 img {
	max-width: 100%;
	height: auto;
	min-height: 0;
	min-width: 0;
	vertical-align: middle;
	overflow: hidden;
}*/


/********************************* Biographie *********************************/
.biographie {
	grid-area: bio;
	background-color: #f2f1ec;
}

.biographie h1 {
	text-align: center;
	color: #a68949;
	/*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
	/*text-shadow: 1px 2px 3px rgba(0,0,0, 0.5);/* ombre portée */
	/*text-shadow: 1px 2px 0 rgba(0,0,0,0.4),-1px -2px 0 rgba(255,255,255,1);/* estampage */
	/*text-shadow: 1px 2px 3px rgba(0,0,0, 0.5),1px 2px 0 rgba(0,0,0,0.4),-1px -2px 0 rgba(255,255,255,1);*/
}

.biographie strong {
	color: #a68949;
}

.portrait {
	float: right;
	margin: 5px 20px 5px 40px;
	height: 50%;
	width: auto;
}

/********************************* Slider livre d'or *********************************/
.livredor_intro {
	grid-area: feed1;
	min-height: 550px;
	background-color: #343e40;/*#2a2929*/
	color: #F4F4F4;
}

.livredor {
	grid-area: feed2;
	min-height: 550px;
	background-color: #343e40;/*#2a2929*/
	font-size: 85%;
	overflow: hidden;
	color: red;
}

.livredor_guillemets_gauche {
	font-size: 4em;
	float: left;
	padding-right: 30px;
	padding-top: 30px;
}

.livredor_guillemets_droite {
	font-size: 4em;
	float: right;
	padding-bottom: 30px;
	padding-right: 30px;
}

.livredor_signature {
	font-family: "Lato", sans-serif;
	src: url("https://fonts.googleapis.com/css?family=Lato");
	font-size: 0.7em;
	font-style: italic;
	float: right;
}

.intro_guest {
	padding-top: 10px;
	padding-left: 50px;
	color: #fff;
}

#slideshow {/*
	margin: 80px auto;*/
	position: relative;
	width: auto;
	height: 240px;/*
	padding: 20px 50px 20px 20px;*/
	color: white;/*
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);*/
}

#slideshow > div {
	font-family: "Caveat", cursive;
	src: url("https://fonts.googleapis.com/css?family=Caveat");
	font-size: 2em;
	font-style: italic;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: 20px 150px 20px 20px;
}