@font-face {
	font-family: "PublicaPlayMedium";
	src: url("fonts/PublicaPlay-Medium.woff2") format("woff2"),
		url("fonts/PublicaPlay-Medium.woff") format("woff");
}

@font-face {
	font-family: "PublicaPlayLight";
	src: url("fonts/PublicaPlay-Light.woff2") format("woff2"),
		url("fonts/PublicaPlay-Light.woff") format("woff");
}

@font-face {
	font-family: "PublicaPlayBold";
	src: url("fonts/PublicaPlay-Bold.woff2") format("woff2"),
		url("fonts/PublicaPlay-Bold.woff") format("woff");
}
:root {
    --black: #000;
    --darkgrey: #2B2828;
    --nightblue: #002E50;
    --blue: #093F66;
    --purple: #A17EC4;
    --skyblue: #00DEFF;
    --turquoise: #00DABE;
    --teal: #04857F;
    --lime: #AFF52D;
    --yellow: #FFDA26;
    --lightblue: #E5EAED;
    --grey: #C2C2C2;
    --lightgrey: #FAFAFA;
    --white: #FFF;
    --beige: #C9AC7A;
    --brown: #977653;
    --apricot: #FF9742;
    --orange: #F37547;
    --red: #F00;
    --green: #0F0;
    --darkgreen: #1EBB50;
}

html,
body,
div,
span,
applet,
object,
iframe,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 110%;
	font-family: "PublicaPlayLight";
	text-align: left;
	color:var(--nightblue);
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}




img {
	image-rendering: auto;
}




.floatleft {
	float: left;
}

.floatright {
	float: right;
}



#footer {
	margin-top: -250px;
	min-height: 258px;
	padding: 175px 0 0 !important;
}

#footer .container-fluid {
	background: var(--white);
	padding: 0px 0 70px 0;
	margin-top: 90px;
	padding-top: 20px;
}

#footer .container-fluid div,
#footer .container-fluid ul,
#footer .container-fluid divli {
	background: transparent;
}

#footer img {
	margin-top: -15px;
}

#footer a {
	color: var(--nightblue);
	line-height: 120%;
    text-decoration: none;
}
#footer a:hover {
    text-decoration:underline
}
/*   MENU */
#menu li {
	display: inline-block;
	color: #000;
	background: transparent;
}

#menu .active {
	background: #002e50;
	color: #fff;
	border-bottom: solid 5px #fff;
}

#menu li a {
	text-decoration: none;
	color: #fff;
}

#menu li.active a:hover {
	color: #00ade7;
}

#menu li a,
#menu li.active a {
	padding: 24px 14px 14px;
	display: block;
	font-size: 16px;
	font-weight: normal;
	/*text-transform: uppercase;*/
	color: #002e50;
}

#menu li.active a,
#menu li.active a:hover {
	color: #fff;
	background: #00ade7 url(imgs/menubg.png ) top left repeat-x;

}

#infoMenu {
	height: 20px;
	color: #f2f2f2;
	position: fixed;
	z-index: 70;
	bottom: 0;
	width: 100%;
	text-align: right;
	font-size: 0.9em;
	padding: 8px 0 8px 0;
}

#infoMenu ul {
	padding: 0 40px;
}

#infoMenu li a {
	display: block;
	margin: 0 22px 0 0;
	color: #333;
}

#infoMenu li a:hover {
	text-decoration: underline;
}

#infoMenu li {
	display: inline-block;
	position: relative;
}

a, a:active{
	color: var(--nightblue);
	text-decoration: underline;
}
a:hover{
	color: var(--skyblue);
}
.btn{
	text-align: center;
	text-decoration: none;
	padding:20px 30px;
	border-radius:30px;
	font-size:1.8rem;
	font-weight:bold;
}
#carte{
	position:relative;
	text-align: center;
	width:100%;
	height: auto;
	border-radius: 50%;
}
#carte img{
	border-radius: 50%;
	z-index:0;
	max-height:300px;
	max-width:300px;
}
.btn-primary{
	background-color: var(--orange);
	color: var(--nightblue);
	border:1px dotted var(--nightblue);
	margin:50px auto;
	z-index:10;
}
.btn-secondary{
	background-color: var(--nightblue);
	color:#fff;
}

/* Style for our header texts
	* --------------------------------------- */
h1 {
	font-size: 45px;
	color: var(--nightblue);
	font-family: "PublicaPlayBold";
	margin: 0;
	padding: 0;
	padding-bottom: 20px;
	margin-top:100px;
	line-height: 140%;
}
h1 span{background-color: var(--yellow);}

h2 {
	font-size: 45px;
	color: var(--nightblue);
	font-family: "PublicaPlayBold";
	font-style: normal;
	text-align: center;
}


/* Backgrounds will cover all the section
	* --------------------------------------- */
.container {
	width: 1180px;
	max-width: 100%;
}

#section0,
#section1,
#section2,
#section3,
#section4,
#section5,
#section6 {
	text-align: left;
	width: 100%;
}
#section0{
	padding-top:160px;
}
.transition{
	height:100px;
}
section H2{
	padding-top:60px;
	padding-bottom: 20px;
}
#section1 h3.blue-title {
	margin-bottom: 70px;
}

.container {
	z-index: 2;
}

section{
	position: relative;
}

#section2 .container.fleche {
	position: relative;
}

/* Defining each sectino background and styles
	* --------------------------------------- */
#section0 {
	background-color:var(--turquoise);
	padding-bottom: 60px;
}
#section1 .transition{background-color:var(--turquoise);}
#section1 h2{padding-top:60px;}

#section1 {
	/*background-color:#F3F8F7;
	padding-top:-124px; si bdd*/
	background-color:var(--lightblue);
}
#section2 .transition{background-color:var(--lightblue);}

#section2,#section3 .transition {
	background-color:var(--yellow);
}

#section3, #section4 .transition {
	background-color:var(--turquoise);
}

#section4,#section5 .transition  {
	background-color:var(--lightblue);
}

#section5,#section6 .transition  {
	background-color:var(--turquoise);
}

#section6 {
	background-color:var(--yellow);
	padding-bottom:30px;
}

.gomap {
	display: none;
}

#section2 a.closedetail {
	height: 53px;
	width: 53px;
	background: url(imgs/closedetail.png ) center center no-repeat;
	position: absolute;
	right: 0px;
	top: -25px;
}


.detailjouets {
	height: 267px;
	background: url(imgs/detail.png ) top left repeat-x;
	margin-top: 20px;
}
.bigjouets{
	padding-top:40px;
}
.listejouets{
	margin-top: 20px;
}
.listejouets li p:first-child{
	min-height:218px;
	height:218px;
	display: flex;
	align-items: center;
}
#section5 ul{
	margin-bottom:50px;
}
#section5 li{
	padding:5px 0;
}
#section5 li.ligne1{width:30%;float:left;}
#section5 li.ligne2{clear:left;}
/* Bottom menu
	* --------------------------------------- */
#infoMenu li a {
	color: #fff;
}

.mainmenu {
	background-color: var(--white);
	display: block;
	height: 160px;
	left: 0;
	margin: 0;
	position: fixed !important;
	top: 0;
	width: 100% !important;
	z-index: 999;
}
header nav{background-color: var(--yellow);}

a.bloc-anchor {
	display: none !important;
	width: 100%;
	height: 223px;
	float: left;
}

.nopd {
	padding: 0px;
}

.logo {
	height: 98px;
}

.slide {
	text-align: center;
}

.bloc-info {
	max-width: 100%;
	margin: 60px auto 0 auto;
	text-align: center;
	color: #0F695F;
	font-size: 18px;
	line-height: 125%;
	background-color: #fff;
	padding:20px 30px;
	border-radius: 30px;
}
.bloc-info a.btn{
	margin-top:20px;
}
.bloc-info a.btn:hover{
	background-color: #0F695F!important;
}
.bloc-info h3{
	font-weight:bold;
	margin-bottom:20px;
}
.link-to-map {
	bottom: 50%;
	display: block;
	height: 196px;
	margin-bottom: -166px;
	position: fixed;
	right: -15px;
	width: 178px;
}

.link-to-map-smartphone {
	display: none;
}

.link-to-map a {
	display: block;
}

.link-to-map a img {
	width: 100%;
	height: auto;
	outline-style: none;
}

.fp-viewing-firstPage .link-to-map,
.fp-viewing-secondPage .link-to-map {
	display: none;
}

.map-content {
	-webkit-box-shadow: 0 0 10px 0 #A1A1A1;
	box-shadow: 0 0 20px 0 #202020;
	width: 100%;
	min-height: 550px;
	position: relative;
}

h3.blue-title {
	font-size: 36px;
	color: var(--skyblue);
	font-style: italic;
	font-weight: normal;
	margin: 0 0 25px 0;
}

.bold {
	font-weight: bold;
}

.green {
	color: #647320;
}
h4{font-size:16px;}
h4.relative span {
	display: block;
	padding: 43px 20px;
	position: relative;
	text-transform: uppercase;
	z-index: 3;
}

h4.relative img {
	position: absolute;
	z-index: 1;
	width: 100%;
	left: 0px;
	top: 0px;
}

#footer img {
	width: 100%;
	vertical-align: middle;
}

.no-padding {
	padding: 0;
}

.col-lg-2.col-xs-2 a img {
	vertical-align: middle;
}

.col-lg-2.col-xs-2 a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.col-lg-2.col-xs-2 a span {
	display: inline-block;
	width: 100%;
	height: 25px;
	text-align: center;
	color: #074d64;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: 0 1px 1px #FFFFFF;
}

.relative {
	position: relative;
}

.paragraphe h4 {
	margin: -65px 0 17px 0;
	text-align: left;
	overflow:hidden;
}


.paragraphe-2 h4.relative span {
	padding-top: 33px;
}
 .paragraphe-6 h4.relative span{
	padding-top: 50px;
}
 .paragraphe-5 h4.relative span, 
 .paragraphe-7 h4.relative span {
	padding-top: 70px;
}

.paragraphe {
	float: left;
	margin: 80px 0 0 0;
	padding: 0 10px 34px 10px;
	height: auto;
	background-size: 100% auto;
	text-align: left;
	font-size: 1.5rem;
}
.paragraphe-1,.paragraphe-2,.paragraphe-3 {
	background: rgba(255, 255, 255, 0.7);
	float: left;
	height: 580px;
	margin-top: -15px;
	padding: 0 20px;
}
.paragraphe .paragraphe-1 {
	width: 290px;
	margin-bottom: 6px;
}

.paragraphe .paragraphe-2 {
	width: 265px;
	margin-bottom: 1px;
}
.paragraphe .paragraphe-3 {
	width: 276px;
	margin-bottom: -2px;
}
.paragraphe-5, .paragraphe-6, .paragraphe-7{
	background: rgba(102, 153, 204, 0.3);
	float: left;
	height: 550px;
	margin-top: -15px;
	margin-left: 0;
	padding: 0 20px;
}


.small.logos {
	height: 80px;
	margin-top: 10px;
}
.pan-info {
	float: right;
	padding: 38px 35px 15px 35px;
	width: 691px;
	height: 120px;
	background: url(imgs/pan.png ) top right no-repeat;
	text-align: center;
	color: #FFFFFF;
	font-size: 18px;
	font-weight: normal;
}

#section3.bg_jouets .container {
	background: url(imgs/section1.png ) bottom right no-repeat;
	padding-right: -100px;
	;
	/*position:relative;*/
	/* right: 2px;*/
}

.front-toy {
	position: absolute;
	bottom: 180px;
	right: 99px;
	width: 210px;

	/*position: absolute; bottom: 150px; right: 70px; */
}

.last-block span {
	color: #aecb29;
}

.enseignes {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
	background: #FFFFFF;
	padding: 25px 0;
	margin-top: 35px;
}

strong {
	font-weight: bold;
}

.logos {
	height: 80px;
	margin: 21px 0 0 -15px;
}

.small.logos {
	height: 80px;
	margin-top: 10px;
}

.img-trouve {
	margin-left: -25px;
	margin-top: 0;
	width: 100%;
	max-width: 418px;
}

#smallmenu,
#mobile-menu {
	display: none;
}

#section2  a {
	color: #002e50;
	text-decoration: underline;
}

#section2 a img {
	vertical-align: middle;
	max-width: 100%;
}

#section2 a span {
	height: 20px;
	left: 0;
	position: absolute;
	top: 100px;
	width: 100%;
}


@media screen and (max-width:1450px) {
	body {
		overflow-y: auto;
	}

	.mainmenu {
		height: 160px;
	}

	.gomap {
		display: none;
	}

	.img-trouve-smart {
		display: none;
	}

}


.detailjouets h3.green {
	color: #aecb29;
	padding: 0 0 20px 0;
}


/****** ACCORDEON *****/

.accordion {
	background-color:#F3F4F6;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 16px;
	transition: 0.7s;
	font-weight: 900;
	color: #002e50;
}

.accordion:after {

	content: '\002B';
	color: #00dabe;
	font-weight: bold;
	margin-left: 5px;
}

button {
	font-size: 1.8rem;
	color: #002E50;
}

.accordion .active:after {
	content: "\2212";
}

.panneau {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

.nbre {
	background-color: #ffda26;
	border-radius: 30px;
	padding: 5px 12px;
	color: #002E50;
	margin-right: 10px;
}

ul {
	list-style: none;
	padding-left: 2.5rem;

}

.panneau ul li::before {
	list-style-type: disc;
	margin-left: -20px;
	margin-right: 10px;
	content: "\2022";
	color: #00dabe;
	font-weight: bold;
	display: inline-block;
	font-size: 32px;
}


.panneau ul li {
	position: relative;
	line-height: 26px;
	font-size: 1rem;
	margin-left: 20px;
}


.ancre {
	padding-top: 200px;
	margin-top: -200px;
	display: inline-block;
}

.ancre_big {
	padding-top: 300px;
	margin-top: -300px;
	display: inline-block;
}




/*********************** MOINS QUE 1200 px    *****************************************************/
@media screen and (max-width:1199px) {

	body{
		max-width: 100%;
	}
	#carte .btn{
		max-width: 90%;
		text-wrap: wrap;
	}
	.small.logos {
		height: 80px;
		margin-top: -55px;
	}

	.texte-section0 {
		top: 0px;
		width: 100%;
	}
.map-content {
		box-shadow: 0 0 10px 0 #202020;
		max-width: 700px;
		min-height: 550px;
		margin: auto;
	}

	.img-trouve-smart {
		display: none;
	}

	.paragraphe {
		padding: 0 10px 28px;
	}

	a.bloc-anchor {
		display: none !important;
		height: 180px;
	}


	#smallmenu,
	#mobile-menu {
		display: none;
	}

	#menu li a,
	#menu li.active a {
		display: block;
		font-size: 14px;
		font-weight: normal;
		padding: 24px 12px 14px;
		text-transform: uppercase;
	}

	#menu.center-mobile,
	.center-mobile {
		text-align: center;
		width: 100%;
	}
	h1{
		font-size:40px;
		margin-top:0;
		line-height: 140%;
		padding-bottom:20px;
		text-align: left;
	}
	h2{
		font-size: 36px;
		text-align: center;
		display: block;
		width: 100%;
	}
	h3 {
		font-size: 28px;
		text-align: center;
		display: block;
		width: 100%;
	}
h4 {
	font-size: 24px;
		text-align: center;
		display: block;
		width: 100%;
	}
	img{
		max-width: 100%;
		height: auto;
	}
	.bigjouets{
		padding-top:0;
	}

	.bloc-info {
		font-size: 15px;
		background: white;
		margin: 30px auto;
		padding: 20px 30px;
		width: 100%;
		color: var(--nightblue);
	}

	.col-lg-2.col-xs-2 a img {
		max-width: 100%;
	}
	

	.link-to-map {
		bottom: 50%;
		display: block;
		height: 135px;
		margin-bottom: -110px;
		position: fixed;
		right: -20px;
		width: 140px;
	}

	.logos.hidden-lg {
		position: relative;
	}

	#footer img {
		width: 100%;
		vertical-align: middle;
	}

	.gomap {
		display: block;
		width: 30%;
		margin: 0 auto;
		text-align: center;
		background: #acc929;
		color: #fff;
		text-transform: uppercase;
		padding: 20px 0px;
		border-radius: 5px;
	}
	p.top1 {
		margin-top: 0px;
	}

	p.top2 {
		margin-top: 0px;
	}

	p.top3 {
		margin-top: -5px;
	}

	p.top4 {
		margin-top: 10px;
	}

	p.top5 {
		margin-top: 16px;
	}

	.map-content {
		display: none;
	}

	a.bloc-anchor {
		display: none !important;
		float: left;
		height: 140px;
		width: 100%;
	}

	#menu {
		display: none;
	}

	.logo {
		height: 50px;
	}

	.logos {
		height: 35px;
		margin: 10px 0 0;
	}

	.logo,
	.logos {
		float: left;
	}

	.logos.floatright {
		float: right;
	}

	.floatleft.logos,
	.floatleft.logos,
	.logos.hidden-lg {
		height: 50px;
	}

	.mainmenu {
		height: 100px;
	}
	.mainmenu nav{
		box-shadow: 0px 15px 10px -15px rgba(0, 43, 80, 0.3);
	}
	.mainmenu #smallmenu,#mobile-menu  {
		position: relative;
		display: block;
		width: 100%;
		float: left;
		height: auto;
	}

	#mobile-menu{
		padding-bottom:20px;
	}

	#mobile-menu li a,
	#mobile-menu li.active a,
	a#smallmenu {
		display: block;
		font-size: 18px;
		font-weight: bold;
		padding: 13px 12px 11px;
		cursor: pointer;
		padding-left: 27px;
		color: var(--nightblue);
		text-decoration: none;
	}

	a#smallmenu {
		padding: 16px 12px 16px;
		color: var(--nightblue);
		font-weight: bold;
	}


	#mobile-menu a:hover,
	#mobile-menu li.active a:hover {
		text-decoration: none;
	}

	h2.nopd {
		padding: 0 30px;
	}

	#section2 .fleche a {
		display: inline-block;
		height: auto;
		padding: 5px 0 0 0;
	}
	#section2 a img {
		width: auto;
		max-height: 160px;
		vertical-align: middle;
	}

	#section2 .fleche a {
		font-size: 14px;
		text-transform: none;
		color: #002e50;
		text-shadow: none;
		text-align: center;
		display: inline-block;
		font-weight: bold;
		padding: 2px 0 0 0;
		text-decoration: underline;
		height: 220px;
		line-height: 220px;
	}

	#section2 a span {
		height: 20px;
		left: 0;
		position: absolute;
		top: 200px;
		width: 100%;
	}
	#section2 li{
		min-height:300px;
	}

	.paragraphe {
		float: left;
		height: auto;
		margin: 10px 40px;
		text-align: left;
	}
	#section4 .paragraphe {
   	 margin: 40px 0 0 0;
	}
	.paragraphe .paragraphe-1,
	.paragraphe .paragraphe-2,
	.paragraphe .paragraphe-3,
	.paragraphe .paragraphe-4,
	.paragraphe .paragraphe-5,
	.paragraphe .paragraphe-6,
	.paragraphe .paragraphe-7 {
		width: 100%;
		height: auto;
		padding: 25px;
	}


	.paragraphe h4.relative span {
		color: #002e50;
		margin-bottom: 20px;
		display: block;
		padding: 20px;
	}


	h4.relative span {
		padding: 0;
		position: relative;
		z-index: 3;
		text-transform: uppercase;
		background-color: var(--yellow);
	}

#section3 .paragraphe h4,
	#section4 .paragraphe h4 {
    margin: 0 0 -50px;
    top: -50px;
	margin-top:20px;
	text-align: center;
		font-size:18px;
}

	h4.relative img {
		display: none;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;
		height:110px;
	}


	.link-to-map {
		height: 74px;
		position: fixed;
		right: -5px;
		top: 45px;
		width: 80px;
		z-index: 999;
		display: none;
	}

	.link-to-map-smartphone {
		display: block;
		height: 39px;
		position: fixed;
		right: 0px;
		top: 62px;
		width: 47px;
		z-index: 999;
	}


	.pan-info {
		background: white;
		float: right;
		font-size: 16px;
		font-weight: normal;
		height: auto;
		padding: 15px;
		text-align: center;
		width: 100%;
		color: #002e50;
	}


	.map-content {
		height: 300px;
	}


	.hidden-sm {
		display: none;
	}

	.img-trouve {
		display: none;
		margin-left: 0;
		margin-top: 0;
		width: 100%;
		max-width: 573px;
	}

	iframe,
	.map-content {
		min-height: 250px;
		height: 550px;
	}

	#footer img {
		margin-top: 15px;
	}


	.img-trouve {

		display: none;

	}

	.img-trouve-smart {
		display: block;
		margin: 0 auto;
		max-width: 430px;
		width: 100%;
		padding-top: 20px;
		padding-bottom: 20px;
	}



	#footer img {
		width: 150%;
		vertical-align: middle;
	}

	#floating-panel {
		left: 10px;
	}
}