@charset "UTF-8";

/* ---------------------------------------
/*                Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}

/* ---------------------------------------
 *               Custom CSS
 * --------------------------------------- */
 


/*
||=============================================================================||
||========================= Polices utilisées  ================================||
||=============================================================================||
*/


 
 @font-face {
    font-family: 'kg_skinny_latteregular';
    src: url('../fonts/kgskinnylatte-webfont.eot');
    src: url('../fonts/kgskinnylatte-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/kgskinnylatte-webfont.woff2') format('woff2'),
         url('../fonts/kgskinnylatte-webfont.woff') format('woff'),
         url('../fonts/kgskinnylatte-webfont.ttf') format('truetype'),
         url('../fonts/kgskinnylatte-webfont.svg#kg_skinny_latteregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_prolight_italic';
    src: url('../fonts/sourcesanspro-lightit-webfont.eot');
    src: url('../fonts/sourcesanspro-lightit-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcesanspro-lightit-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro-lightit-webfont.woff') format('woff'),
         url('../fonts/sourcesanspro-lightit-webfont.ttf') format('truetype'),
         url('../fonts/sourcesanspro-lightit-webfont.svg#source_sans_prolight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'source_sans_prolight';
    src: url('../fonts/sourcesanspro-light-webfont.eot');
    src: url('../fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcesanspro-light-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro-light-webfont.woff') format('woff'),
         url('../fonts/sourcesanspro-light-webfont.ttf') format('truetype'),
         url('../fonts/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'source_sans_proregular';
    src: url('../fonts/sourcesanspro-regular-webfont.eot');
    src: url('../fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro-regular-webfont.woff') format('woff'),
         url('../fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('../fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*
||=============================================================================||
||========================= CSS pour html et body =============================||
||=============================================================================||
*/


html{
	background-image: url(../images/arriere-plan.png);
	background-repeat: repeat;
	position: relative;
}

body{
	position: relative;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: 16px;
}


/*
||=============================================================================||
||========================= CSS pour la navigation ============================||
||=============================================================================||
*/


#slide1,#slide2, #slide3{
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: auto;
}

.nav-droite-1, .nav-gauche-1, .nav-droite-2, .nav-gauche-2, .nav-droite-3, .nav-gauche-3{
	position: absolute;
	z-index: 999;
	top: 35vh;
}

.nav-droite-1, .nav-droite-2, .nav-droite-3{
	right: 1vw;
}

.nav-gauche-1, .nav-gauche-2, .nav-gauche-3{
	left: 1vw;
}

.nav-droite-1, .nav-gauche-1{
	width: 9.6354vw;
	min-width: 120px;
	height: 2.7604vw;
	min-height: 34px;
}

.nav-droite-1{
	background-image: url(../images/bouton_nav_droite_noir.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

.nav-droite-1:active{
	background-image: url(../images/bouton_nav_droite_rouge.svg);
}

.nav-gauche-1{
	background-image: url(../images/bouton_nav_gauche_noir.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

.nav-gauche-1:active{
	background-image: url(../images/bouton_nav_gauche_rouge.svg);
}

.nav-droite-2, .nav-gauche-2, .nav-droite-3, .nav-gauche-3{
	width: 2.0833vw;
	min-width: 30px;
	height: 2.1875vw;
	min-height: 30px;
}

.nav-droite-2, .nav-droite-3{
	background-image: url(../images/bouton_droite_cercle.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

.nav-droite-2:active, .nav-droite-3:active{
	background-image: url(../images/bouton_droite_cercle_rouge.svg);
}

.nav-gauche-2, .nav-gauche-3{
	background-image: url(../images/bouton_gauche_cercle.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

.nav-gauche-2:active, .nav-gauche-3:active{
	background-image: url(../images/bouton_gauche_cercle_rouge.svg);
}

.nav-droite-3{
	display: none;
}

.nav-gauche-3{
	display: none;
}


/*
||=============================================================================||
||========================= CSS pour le header ================================||
||=============================================================================||
*/


header{
	position: fixed;
	top: 0;
	left: 0;
	height: 75px;
	width: 100vw;
	z-index: 999;
}

#menu{
	float: left;
	width: 30vw;
	margin-left: 2vw;
	margin-top: 10px;
}

#menu a{
	display: inline-block;
	margin-left: 10px;
	margin-top: 5px;
	margin-right: 10px;
	text-decoration: none;
}

#menu > a > img{
	width: 8vw;
	max-width: 120px;
	min-width: 70px;
	height: 2vw;
	min-height: 21px;
	max-height: 40px;
}

#reseaux-sociaux{
	float: right;
	width: 15vw;
	min-width: 180px;
	margin-right: 2vw;
	margin-top: 5px;
	z-index: 999;
}

#reseaux-sociaux > a{
	display: inline-block;
	margin-left: 10px;
	margin-top: 5px;
	margin-right: 10px;
	text-decoration: none;
}

#reseaux-sociaux > a > img{
	width: 2.0833vw;
	min-width: 30px;
	height: 2.0833vw;
	min-height: 30px;
}

@-webkit-keyframes animation-reseaux-sociaux{
	25%{
		-webkit-transform: rotate(45deg);
	}
	75%{
		-webkit-transform: rotate(-45deg);
	}
}

@keyframes animation-reseaux-sociaux{
	25%{
		transform: rotate(45deg);
	}
	75%{
		transform: rotate(-45deg);
	}
}

#reseaux-sociaux > a:hover > img{
	-webkit-animation: animation-reseaux-sociaux 1500ms ease-in-out 1 alternate;
	animation: animation-reseaux-sociaux 1500ms ease-in-out 1 alternate;
}



/*
||=============================================================================||
||========================= CSS pour la page home =============================||
||=============================================================================||
*/

	
#slide2{
	background-image: url(../images/image_bas_droite.png) , url(../images/image_bas_gauche.png);
	background-size: 12.5% auto;
	background-repeat: no-repeat;
	background-position: right bottom, left bottom;
}

#zone-logo{
	position: relative;
	width: 17.6562vw;
	height: auto;
	min-width: 190px;
	max-width: 340px;
	margin: auto;
}

#logo{
	margin-top: 49.5%;
}

#logo img{
	width: 100%;
	height: auto;
}

#baseline{
	position: absolute;
	top: -71.0227%;
	left: -41.2979%;
	width: 58.1121%;
}

#baseline img{
	width: 100%;
	height: auto;
}

#player-btn{
	float: right;
	width: 10vw;
	margin-right: 10vw;
	margin-top: 0;
}

#player-btn img{
	display:inline-block;
	width: 100%;							/*Nouvelle valeur*/
	height: auto;
}

#player-btn h1{
	font-family: 'source_sans_proregular' , 'sans-serif';
	color: #EA555C;
	text-align: center;
	text-transform: uppercase;
	font-size: 1em;
	letter-spacing: 0.0625em;
	
	width: 100%;							/*Modif*/

	margin-top:-10px;
	line-height: 1.6875em;
	font-weight: 400;
}

#player-btn img:hover{
	cursor: pointer;
}

#contenu-home{
	width: 70vw;
	margin: auto;
}

#contenu-home h1{
	font-family: 'source_sans_proregular' , 'sans-serif';
	color: #EA555C;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.25em;
	letter-spacing: 0.0625em;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 5px;
	line-height: 1.6875em;
	font-weight: 400;
}

#contenu-home p{
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #545454;
	text-align: center;
	font-size: 1.125em;
	letter-spacing: 0.0625em;
	line-height: 1.375em;
	width: 100%;
}

#contenu-home p strong{
	font-weight: normal;
}

#bloc-schema-fonctionnement{
	display: block;
	width: 70%;
	margin: auto;
	margin-top: 30px;
}

#schema-partie-1{
	width: 480px;
	text-align: center;
	margin: auto;
}

#schema-partie-1:hover{
	cursor: pointer;
}

#schema-partie-1 img{
	width: 90px;
	height: auto;
}

#schema-partie-1 img:hover{
	cursor: pointer;
}

#btn-schema{
	width: 10%;
	min-width: 75px;
	max-width: 110px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 100px;
}

#btn-schema img:hover{
	cursor: pointer;
}

#schema-fonctionnement{
	width: 800px;
	height: 500px;
	margin: auto;
}
/*Ajout*/
#player{
	width: 500px;
	height: 500px;
	margin: auto;
	margin-top: 70px;
}
/*-----*/

#schema-fonctionnement h2{
	font-family: 'kg_skinny_latteregular';
	color: #EA555C;
	font-size: 1.125em;
	letter-spacing: 2px;
	line-height: 1.575em;
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;
}

div[id^="infographie-"]{
	width: 90%;
	margin-left: 5%;
	margin-top: 20px;
	text-align: center;
}

.explication-infographie{
	display: inline-block;
	width: 40%;
	vertical-align: text-top;
}

.explication-infographie h4{
	font-family: 'kg_skinny_latteregular';
	color: #EA555C;
	font-size: 1em;
	letter-spacing: 2px;
	line-height: 1.375em;
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

.explication-infographie p{
	font-family: 'kg_skinny_latteregular';
	color: #545454;
	font-size: 0.8em;
	letter-spacing: 2px;
	line-height: 1.375em;
	width: 100%;
	text-align: center;
}

#infographie-2 .explication-infographie{
	width: 100%;
}


div[id^="infographie-"] img{
	width: 70%;
	height: auto;
}

/*
||=============================================================================||
||======================== CSS pour la page des producteurs ===================||
||=============================================================================||
*/


#haut-page-producteurs{
	height: 0;
	line-height: 0;
	font-size: 0;
	border: 0;
	border-width: 0;
}


#bloc-carte-producteurs{
	width: 30%;
	margin: auto;
	min-width: 200px;
	max-width: 550px;
	margin-top: 10px;
	margin-right: 10%;
	float: right;
	position: relative;
}

#slide1 > h2{
	font-family: 'kg_skinny_latteregular';
	color: #EA555C;
	font-size: 1.25em;
	letter-spacing: 2px;
	line-height: 1.875em;
	width: 100%;
	text-align: center;
	margin: auto;
	margin-top: 50px;
}

#carte-producteurs{
	position: relative;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	z-index: 3;
}

/*AJOUT*/
#carte-producteurterres{
	position: relative;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	z-index: 3;
	display: none;
}

#carte-producteurmers{
	position: relative;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	z-index: 3;
	display: none;
}
/*******/

#carte-producteurs > img{
	width: 100%;
	height: auto;
}

/*AJOUT*/
#carte-producteurterres > img{
	width: 100%;
	height: auto;
}

#carte-producteurmers> img{
	width: 100%;
	height: auto;
}
/*******/

#baseline-carte-producteurs{
	position: absolute;
	top: 50%;
	left: 70%;
	width: 50%;
}

#baseline-carte-producteurs img{
	width: 100%;
	height: auto;
}


/*
  --------------------------------------------------------------------
	Début du positionnement des pictos sur la carte des producteurs 
*/

span[id^="picto-producteur-"]{
	position: absolute;
	width: 1.5625vw;
	min-width: 17px;
	max-width: 30px;
	height: 2.8646vw;
	min-height: 30px;
	max-height: 55px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
}

span[id^="picto-producteurterre-"]{
	position: absolute;
	width: 1.5625vw;
	min-width: 17px;
	max-width: 30px;
	height: 2.8646vw;
	min-height: 30px;
	max-height: 55px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
}

span[id^="picto-producteurmer-"]{
	position: absolute;
	width: 1.5625vw;
	min-width: 17px;
	max-width: 30px;
	height: 2.8646vw;
	min-height: 30px;
	max-height: 55px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
}

span[id^="picto-producteur-"] em[class^="titre-picto-producteur-"]{
	width: 180px;
	position: relative;
	left: 30px;
	top: 0px;
	font-size: 1em;
	font-family: 'kg_skinny_latteregular';
/*	text-align: center;
	background-color: rgba(255,255,255,1);
*/
	text-align: left;
	z-index: 4;
}

span[id^="picto-producteurterre-"] em[class^="titre-picto-producteurterre-"]{
	width: 180px;
	position: relative;
	left: 30px;
	top: 0px;
	font-size: 1em;
	font-family: 'kg_skinny_latteregular';
/*	text-align: center;
	background-color: rgba(255,255,255,1);
*/
	text-align: left;
	z-index: 4;
}

span[id^="picto-producteurmer-"] em[class^="titre-picto-producteurmer-"]{
	width: 180px;
	position: relative;
	left: 30px;
	top: 0px;
	font-size: 1em;
	font-family: 'kg_skinny_latteregular';
/*	text-align: center;
	background-color: rgba(255,255,255,1);
*/
	text-align: left;
	z-index: 4;
}

.titre-picto-producteur-cache{
	display: none;
}

.titre-picto-producteurterre-cache{
	display: none;
}

.titre-picto-producteurmer-cache{
	display: none;
}

span[id^="picto-producteur-"]:hover .titre-picto-producteur-cache{
	display: block;
	color: #EA555C;
}

span[id^="picto-producteurterre-"]:hover .titre-picto-producteurterre-cache{
	display: block;
	color: #EA555C;
}

span[id^="picto-producteurmer-"]:hover .titre-picto-producteurmer-cache{
	display: block;
	color: #EA555C;
}

/*Modif*/
.titre-picto-producteur-montre{
	display: block;
	color: #800000;
}

.titre-picto-producteurterre-montre{
	display: block;
	color: #800000;
}

.titre-picto-producteurmer-montre{
	display: block;
	color: #800000;
}
/*-----*/

.picto-producteurs-rouge{
	background-image: url(../images/picto_producteur_rouge.svg);
}

.picto-producteurterres-rouge{
	background-image: url(../images/picto_producteur_rouge.svg);
}

.picto-producteurmers-rouge{
	background-image: url(../images/picto_producteur_rouge.svg);
}

/*Ajout*/
.picto-producteurs-grenat{
	background-image: url(../images/picto_producteur_grenat.svg);
}

.picto-producteurterres-grenat{
	background-image: url(../images/picto_producteur_grenat.svg);
}

.picto-producteurmers-grenat{
	background-image: url(../images/picto_producteur_grenat.svg);
}
/*-----*/

.picto-producteurs-bleu{
	background-image: url(../images/picto_producteur_bleu.svg);
}

.picto-producteurterres-bleu{
	background-image: url(../images/picto_producteur_bleu.svg);
}

.picto-producteurmers-bleu{
	background-image: url(../images/picto_producteur_bleu.svg);
}

/*
	Fin du positionnement des pictos sur la carte des producteurs
  --------------------------------------------------------------------
*/

#bloc-liste-producteurs{
	width: 40%;
	margin-left: 10%;
	margin-bottom: 80px;
	float: left;
}

#liste-producteurs{
	width: 100%;
	margin-top: 10px;
	height: 540px;
	overflow: hidden;
}

#liste-producteurterres{
	width: 100%;
	margin-top: 10px;
	height: 540px;
	overflow: hidden;
	display: none;
}

#liste-producteurmers{
	width: 100%;
	margin-top: 10px;
	height: 540px;
	overflow: hidden;
	display: none;
}

#nav-producteurs{
	width: 80px;
	margin: auto;
	text-align: center;
	margin-top: 25px;
}

#nav-producteurterres{
	width: 80px;
	margin: auto;
	text-align: center;
	margin-top: 25px;
}

#nav-producteurmers{
	width: 80px;
	margin: auto;
	text-align: center;
	margin-top: 25px;
}

#liste-producteurs-bas, #liste-producteurs-haut, #liste-producteurterres-haut, #liste-producteurterres-bas, #liste-producteurmers-haut, #liste-producteurmers-bas {
	display: block;
	margin-left: 5px;
	margin-right: 5px;
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: contain;
}

#liste-producteurs-haut{
	float: left;
}

#liste-producteurterres-haut{
	float: left;
}

#liste-producteurmers-haut{
	float: left;
}

#liste-producteurs-bas{
	background-image: url(../images/bouton_portraits_bas.svg);
	float: right;
}

#liste-producteurterres-bas{
	background-image: url(../images/bouton_portraits_bas.svg);
	float: right;
}

#liste-producteurmers-bas{
	background-image: url(../images/bouton_portraits_bas.svg);
	float: right;
}

#liste-producteurs-bas:hover{
	background-image: url(../images/bouton_portraits_bas_rouge.svg);
	cursor: pointer;
}

#liste-producteurmers-bas:hover{
	background-image: url(../images/bouton_portraits_bas_rouge.svg);
	cursor: pointer;
}

#liste-producteurterres-bas:hover{
	background-image: url(../images/bouton_portraits_bas_rouge.svg);
	cursor: pointer;
}

#liste-producteurs-haut{
	background-image: url(../images/bouton_portraits_haut.svg);
}

#liste-producteurterres-haut{
	background-image: url(../images/bouton_portraits_haut.svg);
}

#liste-producteurmers-haut{
	background-image: url(../images/bouton_portraits_haut.svg);
}

#liste-producteurs-haut:hover{
	background-image: url(../images/bouton_portraits_haut_rouge.svg);
	cursor: pointer;
}

#liste-producteurterres-haut:hover{
	background-image: url(../images/bouton_portraits_haut_rouge.svg);
	cursor: pointer;
}

#liste-producteurmers-haut:hover{
	background-image: url(../images/bouton_portraits_haut_rouge.svg);
	cursor: pointer;
}

#autres-producteurs{
	text-align: center;
}

#liste-autres-producteurs{
	text-align: center;
}

#btn-autres-producteurs{
	display: inline-block;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 100px;
	text-decoration: none;
}

#btn-autres-producteurs img{
	width: 8vw;
	max-width: 120px;
	min-width: 70px;
	height: 2vw;
	min-height: 21px;
	max-height: 27px;
}
#btn-autres-producteurs img:hover{
	cursor: pointer;
}

#liste-autres-producteurs h2{
	font-family: 'kg_skinny_latteregular';
	color: #EA555C;
	font-size: 1.25em;
	letter-spacing: 2px;
	line-height: 1.875em;
	width: 100%;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 80px;
}

#liste-autres-producteurs h3{
	width: auto;
	text-align: center;
	font-family: 'source_sans_proregular' , 'sans-serif';
	color: #545454;
	font-size: 1em;
	letter-spacing: 0.125em;
	line-height: 1.25em;
	margin-top: 10px;
}

#liste-autres-producteurs a{
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #4CC0E2;
	font-size: 1.125em;
	letter-spacing: 0px;
	line-height: 1.875em;
	text-decoration: underline;
}

div[id^="producteur"]{
	width: 90%;
	height: 135px;
	margin: auto;
	box-sizing: border-box;
	position: relative;
}

div[id^="producteurterre"]{
	width: 90%;
	height: 135px;
	margin: auto;
	box-sizing: border-box;
	position: relative;
}

div[id^="producteurmer"]{
	width: 90%;
	height: 135px;
	margin: auto;
	box-sizing: border-box;
	position: relative;
}

/*
  --------------------------------------------------------------------
	Début du CSS des accordéons des producteurs
*/
div[id^="accordeon-producteur-"]{
	float: left;
	height: 1.875em;
	margin-right: 45px;
	overflow: hidden;
}

div[id^="accordeon-producteurterre-"]{
	float: left;
	height: 1.875em;
	margin-right: 45px;
	overflow: hidden;
}

div[id^="accordeon-producteurmer-"]{
	float: left;
	height: 1.875em;
	margin-right: 45px;
	overflow: hidden;
}

input[id^="deplier-producteur-"]{
	display: none;
}

input[id^="deplier-producteurterre-"]{
	display: none;
}

input[id^="deplier-producteurmer-"]{
	display: none;
}

div[id^="producteur"] label{
	position: absolute;
	top: 91px;
	right: 2px;
	width: 28px;
	height: 28px;
	background-image: url(../images/bouton_plus.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

div[id^="producteurterre"] label{
	position: absolute;
	top: 91px;
	right: 2px;
	width: 28px;
	height: 28px;
	background-image: url(../images/bouton_plus.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

div[id^="producteurmer"] label{
	position: absolute;
	top: 91px;
	right: 2px;
	width: 28px;
	height: 28px;
	background-image: url(../images/bouton_plus.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

div[id^="producteur"] label:hover{
	cursor: pointer;
}

div[id^="producteurterre"] label:hover{
	cursor: pointer;
}

div[id^="producteurmer"] label:hover{
	cursor: pointer;
}

/*div[id^="producteur"] label:after{
	content: "...";
	margin-left: -20px;
}*/

input[id^="deplier-producteur-"]:checked ~ label{
	background-image: url(../images/bouton_moins.svg);
}

input[id^="deplier-producteurterre-"]:checked ~ label{
	background-image: url(../images/bouton_moins.svg);
}

input[id^="deplier-producteurmer-"]:checked ~ label{
	background-image: url(../images/bouton_moins.svg);
}

input[id^="deplier-producteur-"]:checked ~ label:hover{
	cursor: pointer;
}

input[id^="deplier-producteurterre-"]:checked ~ label:hover{
	cursor: pointer;
}

input[id^="deplier-producteurmer-"]:checked ~ label:hover{
	cursor: pointer;
}

input[id^="deplier-producteur-"]:checked ~ div[id^="accordeon-producteur-"]{
	height: auto;
	margin-right: 0;
	margin-bottom: 80px;
	overflow: visible;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurterre-"]:checked ~ div[id^="accordeon-producteurterre-"]{
	height: auto;
	margin-right: 0;
	margin-bottom: 80px;
	overflow: visible;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurmer-"]:checked ~ div[id^="accordeon-producteurmer-"]{
	height: auto;
	margin-right: 0;
	margin-bottom: 80px;
	overflow: visible;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteur-"]:checked ~ .photo-producteur{
	float: none;
	width: 135px;
}

input[id^="deplier-producteurterre-"]:checked ~ .photo-producteurterre{
	float: none;
	width: 135px;
}

input[id^="deplier-producteurmer-"]:checked ~ .photo-producteurmer{
	float: none;
	width: 135px;
}

input[id^="deplier-producteur-"]:checked ~ .photo-producteur img{
	display: block;
	width: 135px;
	margin-top: 30px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurterre-"]:checked ~ .photo-producteurterre img{
	display: block;
	width: 135px;
	margin-top: 30px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurmer-"]:checked ~ .photo-producteurmer img{
	display: block;
	width: 135px;
	margin-top: 30px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteur-"]:checked ~ .titre-producteur{
	float: none;
	margin-left: 0;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurterre-"]:checked ~ .titre-producteurterre{
	float: none;
	margin-left: 0;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurmer-"]:checked ~ .titre-producteurmer{
	float: none;
	margin-left: 0;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteur-"]:checked ~ .titre-producteur .entreprise-producteur{
	margin-top: 20px;
	margin-bottom: 20px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurterre-"]:checked ~ .titre-producteurterre .entreprise-producteurterre{
	margin-top: 20px;
	margin-bottom: 20px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurmer-"]:checked ~ .titre-producteurmer .entreprise-producteurmer{
	margin-top: 20px;
	margin-bottom: 20px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteur-"]:checked ~ .titre-producteur .entreprise-producteur h3{
	font-size: 1.325em;
	line-height: 1.875em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurterre-"]:checked ~ .titre-producteurterre .entreprise-producteurterre h3{
	font-size: 1.325em;
	line-height: 1.875em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurmer-"]:checked ~ .titre-producteurmer .entreprise-producteurmer h3{
	font-size: 1.325em;
	line-height: 1.875em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteur-"]:checked ~ .titre-producteur .zone-produits-producteur img{
	width: 40px;
	height: auto;
}

input[id^="deplier-producteurterre-"]:checked ~ .titre-producteurterre .zone-produits-producteurterre img{
	width: 40px;
	height: auto;
}

input[id^="deplier-producteurmer-"]:checked ~ .titre-producteurmer .zone-produits-producteurmer img{
	width: 40px;
	height: auto;
}

input[id^="deplier-producteur-"]:checked ~ .titre-producteur .nom-producteur{
	margin-bottom: 20px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurterre-"]:checked ~ .titre-producteurterre .nom-producteurterre{
	margin-bottom: 20px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurmer-"]:checked ~ .titre-producteurmer .nom-producteurmer{
	margin-bottom: 20px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteur-"]:checked ~ .titre-producteur .nom-producteur h2{
	font-size: 1.125em;
	line-height: 1.375em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurterre-"]:checked ~ .titre-producteurterre .nom-producteurterre h2{
	font-size: 1.125em;
	line-height: 1.375em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurmer-"]:checked ~ .titre-producteurmer .nom-producteurmer h2{
	font-size: 1.125em;
	line-height: 1.375em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteur-"]:checked ~ div[id^="accordeon-producteur-"] .description-producteur{
	margin-bottom: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurterre-"]:checked ~ div[id^="accordeon-producteurterre-"] .description-producteurterre{
	margin-bottom: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurmer-"]:checked ~ div[id^="accordeon-producteurmer-"] .description-producteurmer{
	margin-bottom: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteur-"]:checked ~ div[id^="accordeon-producteur-"] .description-producteur p{
	font-size: 1.125em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurterre-"]:checked ~ div[id^="accordeon-producteurterre-"] .description-producteurterre p{
	font-size: 1.125em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteurmer-"]:checked ~ div[id^="accordeon-producteurmer-"] .description-producteurmer p{
	font-size: 1.125em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-producteur-"]:checked ~ div[id^="producteur"]{
	display: none;
}

input[id^="deplier-producteurterre-"]:checked ~ div[id^="producteurterre"]{
	display: none;
}

input[id^="deplier-producteurmer-"]:checked ~ div[id^="producteurmer"]{
	display: none;
}

/*
	Fin du CSS des accordéons des producteurs
  --------------------------------------------------------------------
*/

.photo-producteur{
	float: left;
	width: 25%;
	max-width: 70px;
	margin: 0;
	padding: 0;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.photo-producteurterre{
	float: left;
	width: 25%;
	max-width: 70px;
	margin: 0;
	padding: 0;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.photo-producteurmer{
	float: left;
	width: 25%;
	max-width: 70px;
	margin: 0;
	padding: 0;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.photo-producteur img{
	width: 100%;
	border-radius: 50%;
	margin-top: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.photo-producteurterre img{
	width: 100%;
	border-radius: 50%;
	margin-top: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.photo-producteurmer img{
	width: 100%;
	border-radius: 50%;
	margin-top: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.titre-producteur{
	float: left;
	width: 70%;
	margin-left: 5%;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.titre-producteurterre{
	float: left;
	width: 70%;
	margin-left: 5%;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.titre-producteurmer{
	float: left;
	width: 70%;
	margin-left: 5%;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.entreprise-producteur{
	width: auto;
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.entreprise-producteurterre{
	width: auto;
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.entreprise-producteurmer{
	width: auto;
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.entreprise-producteur h3{
	font-family: 'kg_skinny_latteregular';
	color: #7195A2;
	font-size: 1em;
	letter-spacing: 1px;
	line-height: 1em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.entreprise-producteurterre h3{
	font-family: 'kg_skinny_latteregular';
	color: #7195A2;
	font-size: 1em;
	letter-spacing: 1px;
	line-height: 1em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.entreprise-producteurmer h3{
	font-family: 'kg_skinny_latteregular';
	color: #7195A2;
	font-size: 1em;
	letter-spacing: 1px;
	line-height: 1em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.zone-produits-producteur{
	width: auto;
	display: inline-block;
}

.zone-produits-producteurterre{
	width: auto;
	display: inline-block;
}

.zone-produits-producteurmer{
	width: auto;
	display: inline-block;
}

.zone-produits-producteur img{
	margin-left: 10px;
	width: 30px;
	height: 2.0833vw;
	min-height: 30px;;
}

.zone-produits-producteurterre img{
	margin-left: 10px;
	width: 30px;
	height: 2.0833vw;
	min-height: 30px;;
}

.zone-produits-producteurmer img{
	margin-left: 10px;
	width: 30px;
	height: 2.0833vw;
	min-height: 30px;;
}

.nom-producteur{
	width: auto;
	margin-bottom: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.nom-producteurterre{
	width: auto;
	margin-bottom: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.nom-producteurmer{
	width: auto;
	margin-bottom: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.nom-producteur h2{
	width: auto;
	font-family: 'source_sans_proregular' , 'sans-serif';
	color: #EA545C;
	font-size: 0.8em;
	letter-spacing: 0px;
	line-height: 1em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.nom-producteurterre h2{
	width: auto;
	font-family: 'source_sans_proregular' , 'sans-serif';
	color: #EA545C;
	font-size: 0.8em;
	letter-spacing: 0px;
	line-height: 1em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.nom-producteurmer h2{
	width: auto;
	font-family: 'source_sans_proregular' , 'sans-serif';
	color: #EA545C;
	font-size: 0.8em;
	letter-spacing: 0px;
	line-height: 1em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.description-producteur{
	width: 100%;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.description-producteurterre{
	width: 100%;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.description-producteurmer{
	width: 100%;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.description-producteur p{
	text-align: left;
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #545454;
	font-size: 0.8em;
	letter-spacing: 0.0625em;
	line-height: 1.875em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.description-producteurterre p{
	text-align: left;
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #545454;
	font-size: 0.8em;
	letter-spacing: 0.0625em;
	line-height: 1.875em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.description-producteurmer p{
	text-align: left;
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #545454;
	font-size: 0.8em;
	letter-spacing: 0.0625em;
	line-height: 1.875em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.web-producteur a{
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #4CC0E2;
	font-size: 1.125em;
	letter-spacing: 0px;
	line-height: 1.875em;
	text-decoration: underline;
}

.web-producteurterre a{
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #4CC0E2;
	font-size: 1.125em;
	letter-spacing: 0px;
	line-height: 1.875em;
	text-decoration: underline;
}

.web-producteurmer a{
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #4CC0E2;
	font-size: 1.125em;
	letter-spacing: 0px;
	line-height: 1.875em;
	text-decoration: underline;
}


/*
||=============================================================================||
||========================== CSS pour la page restaurateurs ===================||
||=============================================================================||
*/

#haut-page-restaurateurs{
	height: 0;
	line-height: 0;
	font-size: 0;
	border: 0;
	border-width: 0;
}

#bloc-carte-restaurateurs{
	width: 40%;
	margin: auto;
	min-width: 300px;
	max-width: 650px;
	margin-top: 10px;
	margin-left: 10%;
	float: left;
	position: relative;
}

#slide3 > h2{
	font-family: 'kg_skinny_latteregular';
	color: #EA555C;
	font-size: 1.25em;
	letter-spacing: 2px;
	line-height: 1.875em;
	width: 100%;
	text-align: center;
	margin: auto;
	margin-top: 30px;
}

#carte-restaurateurs{
	position: relative;
	width: 100%;
	margin-top: 10vh;
	text-align: center;
	vertical-align: middle;
	z-index: 3;
}

#carte-restaurateurs > img{
	width: 100%;
	height: auto;
}


/*
  --------------------------------------------------------------------
	Début du positionnement des pictos sur la carte des restaurateurs 
*/

span[id^="picto-restaurateur-"]{
	position: absolute;
	width: 1.5625vw;
	min-width: 17px;
	max-width: 30px;
	height: 2.8646vw;
	min-height: 30px;
	max-height: 55px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
}

span[id^="picto-restaurateur-"]:hover{
	cursor: pointer;
}

span[id^="picto-restaurateur-"] em[class^="titre-picto-restaurateur-"]{
	width: 200px;
	position: relative;
	left: 30px;
	top: 0px;
	font-size: 1em;
	font-family: 'kg_skinny_latteregular';
	letter-spacing: 1px;
/*	text-align: center;
	background-color: rgba(255,255,255,1);
*/
	text-align: left;
	z-index: 4;
}

.titre-picto-restaurateur-cache{
	display: none;
}

span[id^="picto-restaurateur-"]:hover .titre-picto-restaurateur-cache{
	display: block;
	color: #EA555C;
}

/*Modif*/
.titre-picto-restaurateur-montre{
	display: block;
	color: #800000;
}
/*-----*/

.picto-restaurateurs-rouge{
	background-image: url(../images/picto_restaurateur_rouge.svg);
}

/*Ajout*/
.picto-restaurateurs-grenat{
	background-image: url(../images/picto_restaurateur_grenat.svg);
}
/*-----*/

.picto-restaurateurs-bleu{
	background-image: url(../images/picto_restaurateur_bleu.svg);
}

/*
	Fin du positionnement des pictos sur la carte des restaurateurs
  --------------------------------------------------------------------
*/

#bloc-liste-restaurateurs{
	width: 30%;
	margin-right: 10%;
	margin-bottom: 80px;
	float: right;
}

#liste-restaurateurs{
	width: 100%;
	margin-top: 10px;
	height: 540px;
	overflow: hidden;
}

#nav-restaurateurs{
	width: 80px;
	margin: auto;
	text-align: center;
	margin-top: 25px;
}

#liste-restaurateurs-bas, #liste-restaurateurs-haut{
	display: block;
	margin-left: 5px;
	margin-right: 5px;
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: contain;
}

#liste-restaurateurs-haut{
	float: left;
}

#liste-restaurateurs-bas{
	background-image: url(../images/bouton_portraits_bas.svg);
	float: right;
}

#liste-restaurateurs-bas:hover{
	background-image: url(../images/bouton_portraits_bas_rouge.svg);
	cursor: pointer;
}

#liste-restaurateurs-haut{
	background-image: url(../images/bouton_portraits_haut.svg);
}

#liste-restaurateurs-haut:hover{
	background-image: url(../images/bouton_portraits_haut_rouge.svg);
	cursor: pointer;
}

div[id^="restaurateur"]{
	width: 90%;
	height: 135px;
	margin: auto;
	box-sizing: border-box;
	position: relative;
}

/*
  --------------------------------------------------------------------
	Début du CSS des accordéons des restaurateurs
*/
div[id^="accordeon-restaurateur-"]{
	float: left;
	height: 0;
	margin-right: 45px;
	overflow: hidden;
}

input[id^="deplier-restaurateur-"]{
	display: none;
}

div[id^="restaurateur"] label{
	position: absolute;
	top: 41px;
	right: 2px;
	width: 28px;
	height: 28px;
	background-image: url(../images/bouton_plus.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

div[id^="restaurateur"] label:hover{
	cursor: pointer;
}

input[id^="deplier-restaurateur-"]:checked ~ label{
	background-image: url(../images/bouton_moins.svg);
}

input[id^="deplier-restaurateur-"]:checked ~ label:hover{
	cursor: pointer;
}

input[id^="deplier-restaurateur-"]:checked ~ #nav-restaurateurs{
	display: none;
}

input[id^="deplier-restaurateur-"]:checked ~ div[id^="accordeon-restaurateur-"]{
	height: auto;
	margin-right: 0;
	margin-bottom: 80px;
	overflow: visible;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-restaurateur-"]:checked ~ .photo-restaurateur{
	float: none;
	width: 135px;
}

input[id^="deplier-restaurateur-"]:checked ~ .photo-restaurateur img{
	display: block;
	width: 135px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-restaurateur-"]:checked ~ .titre-restaurateur{
	float: none;
	margin-left: 0;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-restaurateur-"]:checked ~ .titre-restaurateur .entreprise-restaurateur{
	margin-top: 20px;
	margin-bottom: 20px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-restaurateur-"]:checked ~ .titre-restaurateur .entreprise-restaurateur h3{
	font-size: 1.125em;
	line-height: 1.375em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-restaurateur-"]:checked ~ .titre-restaurateur .zone-produits-restaurateur img{
	width: 40px;
	height: auto;
}

input[id^="deplier-restaurateur-"]:checked ~ .titre-restaurateur .nom-restaurateur{
	margin-bottom: 20px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-restaurateur-"]:checked ~ .titre-restaurateur .nom-restaurateur h2{
	font-size: 1.125em;
	line-height: 1.375em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-restaurateur-"]:checked ~ div[id^="accordeon-restaurateur-"] .description-restaurateur{
	margin-bottom: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-restaurateur-"]:checked ~ div[id^="accordeon-restaurateur-"] .description-restaurateur p{
	font-size: 1.125em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

input[id^="deplier-restaurateur-"]:checked ~ div[id^="restaurateur"]{
	display: none;
}

/*
	Fin du CSS des accordéons des restaurateurs
  --------------------------------------------------------------------
*/

.photo-restaurateur{
	float: left;
	width: 25%;
	max-width: 70px;
	margin: 0;
	padding: 0;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.photo-restaurateur img{
	width: 100%;
	border-radius: 50%;
	margin-top: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.titre-restaurateur{
	float: left;
	width: 70%;
	margin-left: 5%;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.nom-restaurateur{
	width: auto;
	margin-bottom: 10px;
	margin-top: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.nom-restaurateur h2{
	width: auto;
	font-family: 'source_sans_proregular' , 'sans-serif';
	color: #EA545C;
	font-size: 0.8em;
	letter-spacing: 0px;
	line-height: 1em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.citation-restaurateur{
	width: auto;
	display: inline-block;
	margin-bottom: 10px;
	margin-right: 10px;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.citation-restaurateur h3{
    font-family: 'source_sans_prolight_italic';
	color: #7195A2;
	font-size: 0.8em;
	letter-spacing: 0px;
	line-height: 1em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.description-restaurateur{
	width: 100%;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.description-restaurateur p{
	text-align: left;
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #545454;
	font-size: 1em;
	letter-spacing: 0.0625em;
	line-height: 1.875em;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
}

.web-restaurateur a{
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #4CC0E2;
	font-size: 1.125em;
	letter-spacing: 0px;
	line-height: 1.875em;
	text-decoration: underline;
}


/*
||=============================================================================||
||========================== CSS pour le footer ===============================||
||=============================================================================||
*/


footer{
	position: fixed;
	height: 0;
	width: 9.44vw;
	min-width: 95px;
	left: 45vw;
	bottom: 20px;;
	z-index: 999;
	background-image: url(../images/arriere-plan.png);
	background-repeat: repeat;
}



/*
||==========================================================================================================================||
||===================== CSS pour les blocs contact, autres-producteurs, schema-fonctionnement, player ======================||
||==========================================================================================================================||
*/


#contact-btn{
	width: 100%;
	text-align: center;
	margin-top: -10vh;
}


#contact-btn img{
	width: 100%;
	height: auto;
}

#mentions{
	text-align: center;
}

#mentions a{
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #545454;
	font-size: 0.8em;
	letter-spacing: 0px;
	line-height: 1em;
	text-decoration: underline;

}

#contact-btn img:hover{
	cursor: pointer;
}

#bloc-transparent-contact, #bloc-transparent-autres-producteurs, #bloc-transparent-schema-fonctionnement{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.4;
	z-index: 1000;
	cursor: pointer;
}
/*Ajout*/
#bloc-transparent-player{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.4;
	z-index: 1000;
	cursor: pointer;
}
/*-----*/


#formulaire-contact, #liste-autres-producteurs, #contenu-schema-fonctionnement{
	position: fixed;
	top: 200vh;
	left: 15vw;
	background-image: url(../images/arriere-plan.png);
	background-repeat: repeat;
	width: 70vw;
	height: 70vh;
	margin: auto;
	border: 2px solid #EA555C;
	overflow: auto;
	z-index: 2000;
	-moz-transition: top 1s ease-in-out;
	-webkit-transition: top 1s ease-in;
	-ms-transition: top 1s ease-in;
	-o-transition: top 1s ease-in;
	transition: top 1s ease-in;
}
/*Ajout*/
#contenu-player{
	position: fixed;
	top: 200vh;
	left: 15vw;
	background-image: url(../images/arriere-plan.png);
	background-repeat: repeat;
	width: 70vw;
	height: 70vh;
	margin: auto;
	border: 2px solid #EA555C;
	overflow: auto;
	z-index: 2000;
	-moz-transition: top 1s ease-in-out;
	-webkit-transition: top 1s ease-in;
	-ms-transition: top 1s ease-in;
	-o-transition: top 1s ease-in;
	transition: top 1s ease-in;
}
/*-----*/


#liste-autres-producteurs{
	background-image: url(../images/background_reseau.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}


input[id=vers-contact], input[id=vers-autres-producteurs], input[id=vers-schema-fonctionnement]{
	display: none;
}
/*Ajout*/
input[id=vers-player]{
	display: none;
}
/*-----*/


input[id=vers-contact]:checked ~ #bloc-transparent-contact, input[id=vers-autres-producteurs]:checked ~ #bloc-transparent-autres-producteurs, input[id=vers-schema-fonctionnement]:checked ~ #bloc-transparent-schema-fonctionnement{
	display: block;
}
/*Ajout*/
input[id=vers-player]:checked ~ #bloc-transparent-player{
	display: none;
}
/*-----*/


input[id=vers-contact]:checked ~ #formulaire-contact, input[id=vers-autres-producteurs]:checked ~ #liste-autres-producteurs, input[id=vers-schema-fonctionnement]:checked ~ #contenu-schema-fonctionnement{
	top: 15vh;
	-moz-transition: top 1s ease-out;
	-webkit-transition: top 1s ease-out;
	-o-transition: top 1s ease-out;
	-ms-transition: top 1s ease-out;
	transition: top 1s ease-out;
}
/*Ajout*/
input[id=vers-player]:checked ~ #contenu-player{
	top: 15vh;
	-moz-transition: top 1s ease-out;
	-webkit-transition: top 1s ease-out;
	-o-transition: top 1s ease-out;
	-ms-transition: top 1s ease-out;
	transition: top 1s ease-out;
}
/*-----*/


input[id=vers-contact]:checked ~ #formulaire-contact, input[id=vers-autres-producteurs]:checked ~ #liste-autres-producteurs, input[id=vers-schema-fonctionnement]:checked ~ #contenu-schema-fonctionnement{
	top: 15vh;
	-moz-transition: top 1s ease-out;
	-webkit-transition: top 1s ease-out;
	-o-transition: top 1s ease-out;
	-ms-transition: top 1s ease-out;
	transition: top 1s ease-out;
}
/*Ajout*/
input[id=vers-player]:checked ~ #contenu-player{
	top: 15vh;
	-moz-transition: top 1s ease-out;
	-webkit-transition: top 1s ease-out;
	-o-transition: top 1s ease-out;
	-ms-transition: top 1s ease-out;
	transition: top 1s ease-out;
}
/*-----*/


#formulaire-contact > form{
	width: 90%;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}

#formulaire-contact label{
	display: block;
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #545454;
	text-transform: uppercase;
	font-size: 1em;
	letter-spacing: 0.125em;
	line-height: 1.25em;
}

#formulaire-contact > form label span{
	color: #EA555C;
	padding-left: 10px;
}

#formulaire-contact > form > div{
	width: 100%;
}

#formulaire-contact > form > div > div{
	display: inline-block;
	width: 48%;
}

#formulaire-contact > form > div > div:last-child{
	float: right;
}

#formulaire-contact > form > div > div:first-child{
	float: left;
}

#formulaire-contact > form > div > div > input{
	height: 30px;
}

/*Ajout*/
#formulaire-contact > form > div > div.adresse{
	width: 100%
}
/*-----*/


#formulaire-contact > form > div > div > input, #formulaire-contact > form > textarea{
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 20px;
	padding: 5px;
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #BBB;
	font-size: 0.875em;
	letter-spacing: 0.0625em;
	line-height: 1em;
	border: 2px solid #EEE;
}

#formulaire-contact > form > textarea{
	height: 200px;
	resize: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/*Modif*/
#formulaire-contact > form > input[id=btn-envoyer]{
	display: block;
	width: 120px;
	height: 30px;
	margin: auto;
	border: none;
	
	margin-top: 160px;						/*margin-top modifié*/

	z-index: 2002;
	background-color: transparent;
	background-image: url(../images/bouton_envoyer.svg);
	background-repeat: no-repeat;
	background-size: contain;	
	background-position: center;
	padding: 0 0 0 10px;
	cursor: pointer;
	border:0;
}
/*-----*/

/*Ajout*/

#formulaire-contact  > form > div.g_recaptcha {
	width: 100%;
	margin-top: 20px;
}
/*-----*/

.verif{
}

.error{
	background-color: #EB8186;
}

#obligatoire{
	width: 100%;
	text-align: right;
	margin-top: 0;
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #888;
	font-size: 0.875em;
	letter-spacing: 0.0625em;
	line-height: 1em;
	font-style: italic;
}

#obligatoire span{
	color: #EA555C;
}

#contact-tom{
	display: block;
	float: left;
	width: auto;
	text-align: left;
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #545454;
	font-size: 1em;
	letter-spacing: 0.125em;
	line-height: 1.25em;
	margin-top: -50px;
	height: 50px;
}

#contact-tom > h2{
	font-family: 'source_sans_proregular' , 'sans-serif';
}

#contact-tom > p{
	font-family: 'source_sans_prolight' , 'sans-serif';
	color: #545454;
	font-size: 1em;
	letter-spacing: 0.0625em;
	line-height: 1.25em;
}

#fermer-contact-bouton, #fermer-autres-producteurs-bouton, #fermer-schema-fonctionnement-bouton{
	float: right;
	margin: 5px;
}
/* Ajout */
#fermer-player-bouton{
	float: right;
	margin: 5px;
}
/*-----*/


#fermer-contact-bouton:hover, #fermer-autres-producteurs-bouton:hover, #fermer-schema-fonctionnement-bouton:hover{
	cursor: pointer;
}
/* Ajout */
#fermer-player-bouton:hover{
	cursor: pointer;
}
/*-----*/


/*=== Divers ===*/

.stopfloat{
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	border: 0;
	border-width: 0;
}

.complement-listes{
	display: block;
}

/*
||=============================================================================||
||========================== CSS pour le responsive ===========================||
||=============================================================================||
*/


@media screen and (max-height: 615px){	
	#slide2{
		background-image: none;
	}
	
	.nav-droite-1, .nav-gauche-1, .nav-droite-2, .nav-gauche-2{
		top: 180px;
	}
}

@media screen and (max-width: 1000px){
	#slide2{
		background-image: none;
	}
		
}

@media screen and (max-width: 825px){	
	
	#slide2{
		background-image: none;
	}

	#contenu-home h1{
		font-size: 1em;
		letter-spacing: 0.0625em;
		line-height: 1.375em;
	}
	
	#contenu-home p{
		font-size: 1em;
		letter-spacing: 0.0625em;
		line-height: 1.125em;
	}

	div[id^="infographie-"] {
		margin-left: 0;
	}

	.nav-droite-1, .nav-gauche-1{
		display: none;
	}
	
	.nav-droite-2, .nav-gauche-2, .nav-droite-3, .nav-gauche-3{
		top: 180px;
	}
	
	.nav-droite-3, .nav-gauche-3{
		display: block;
	}

	#menu{
		margin-top: 5px;
	}

	#menu a{
	display: block;
	}

	#slide1 > h2{
		margin-top: 100px;
	}

	#bloc-carte-producteurs{
		float: none;
		margin-right: 0;
		margin: auto;
		margin-top: 2vh;
	}

	#bloc-carte-producteurs > h2{
		font-size: 1em;
		letter-spacing: 2px;
		line-height: 1.375em;
		margin-top: 120px;
	}

	#bloc-liste-producteurs{
		width: 80%;
		height: auto;
		margin: auto;
		float: none;
	}
	
	#liste-producteurs{
		height: auto;
		overflow: visible;
		margin-top: 20px;
	}

	#liste-producteurterres{
		height: auto;
		overflow: visible;
		margin-top: 20px;
	}

	#liste-producteurmers{
		height: auto;
		overflow: visible;
		margin-top: 20px;
	}
		
	#nav-producteurs{
		display: none;
	}

	#nav-producteurterres{
		display: none;
	}

	#nav-producteurmers{
		display: none;
	}

	#liste-autres-producteurs h2{
		font-family: 'kg_skinny_latteregular';
		color: #EA555C;
		font-size: 1em;
		letter-spacing: 2px;
		line-height: 1.375em;
		width: 100%;
		text-align: center;
		margin-top: 50px;
		margin-bottom: 80px;
	}
	
	#liste-autres-producteurs h3{
		width: auto;
		text-align: center;
		font-family: 'source_sans_proregular' , 'sans-serif';
		color: #545454;
		font-size: 0.7em;
		letter-spacing: 0.125em;
		line-height: 1em;
		margin-top: 10px;
	}
	
	#liste-autres-producteurs a{
		font-family: 'source_sans_prolight' , 'sans-serif';
		color: #4CC0E2;
		font-size: 0.9em;
		letter-spacing: 0px;
		line-height: 1.375em;
		text-decoration: underline;
	}

	#slide3 > h2{
		margin-top: 100px;
	}

	#bloc-carte-restaurateurs{
		float: none;
		margin-right: 0;
		margin: auto;
		margin-top: 2vh;
	}

	#bloc-carte-restaurateurs > h2{
		font-size: 1em;
		letter-spacing: 2px;
		line-height: 1.375em;
		margin-top: 120px;
	}

	#bloc-liste-restaurateurs{
		width: 80%;
		height: auto;
		margin: auto;
		float: none;
	}
	
	#liste-restaurateurs{
		height: auto;
		overflow: visible;
		margin-top: 20px;
	}
		
	#nav-restaurateurs{
		display: none;
	}
	
		
	footer{
		width: 95px;
		left: calc(50vw - 47px);
		top: 0;
	}

	#contact-btn{
		text-align: center;
		margin-top: 10px;
	}
	
	#mentions a{
		font-size: 0.6em;
	}
	
	#formulaire-contact, #liste-autres-producteurs, #contenu-schema-fonctionnement{
		left: 5vw;
		width: 90vw;
		height: 90vh;
	}
	/* Ajout */
	#contenu-player{
		left: 5vw;
		width: 90vw;
		height: 90vh;
	}
	/*-----*/

	
	input[id=vers-contact]:checked ~ #formulaire-contact, input[id=vers-autres-producteurs]:checked ~ #liste-autres-producteurs, input[id=vers-schema-fonctionnement]:checked ~ #contenu-schema-fonctionnement{
		top: 5vh;
	}
	/* Ajout */
	input[id=vers-player]:checked ~ #contenu-player{
		top: 5vh;
	}
	/*-----*/
	
	#formulaire-contact > form > div > div{
		display: block;
		width: 100%;
	}
	
	#contact-tom{
		float: none;
		text-align: center;
		margin: auto;
		margin-top: 10px;
	}
	
	#formulaire-contact > form > input[id=btn-envoyer]{
	margin: auto;
	margin-top: 20px;
	}
	
	.complement-listes{
		display: none;
	}
}

@media screen and (max-width: 480px){

	#bloc-schema-fonctionnement{
		width: 100%;
	}
	#schema-partie-1{
		width: 90%;
		text-align: center;
		margin: auto;
	}

	#schema-partie-1:hover{
		cursor: pointer;
	}

	#schema-partie-1 img{
		width: 18.75%;
		height: auto;
	}
	
	/*Modif*/
	#reseaux-sociaux{
		min-width: 50px;

		margin-right: 20px;			/*margin-right modifié*/
		
		margin-top: 100px;			/*ajout*/
	}
	/*-----*/

	#player-btn{
		margin-right: 0;
		width: 0;
	}

	#baseline{
		display: none;
	}
}