@font-face {
    font-family: 'geomanistbook';
    src: url('/squelettes/css/fonts/geomanist-book-webfont.woff2') format('woff2'),
         url('/squelettes/css/fonts/geomanist-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'misobold';
    src: url('/squelettes/css/fonts/maarten_nettelbladt_-_miso-bold-webfont.woff2') format('woff2'),
         url('/squelettes/css/fonts/maarten_nettelbladt_-_miso-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistbold';
    src: url('/squelettes/css/fonts/geomanist-bold-webfont.woff2') format('woff2'),
         url('/squelettes/css/fonts/geomanist-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
HTML {
position:relative;
width: 100%;
height:100%;  
font-size: 62.5%;
margin: 0;
padding: 0;	
}
BODY{
position:relative;
overflow:hidden;
width: 100%;
height:100%;
margin: 0;
padding: 0;	
font-size: 2rem;	
color:#141414;
background: #fcc000;
line-height:2.8rem;
font-family: 'geomanistbook';
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing:subpixel-antialiased;
-moz-font-smoothing:subpixel-antialiased;
font-smoothing:subpixel-antialiased;
-webkit-font-smoothing : antialiased;
}
IMG{
max-width:100%;
height:auto;
}
.attente{
display:none;
}

header{
background: #fcc000;
height:120px;
}
.logo_site{
height:90px;
position:absolute;
left:50%;
top:10px;
margin-left:-100px;
}
nav::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}
nav{
position:absolute;
opacity:0;
top:0;
left:-400px;
max-width: 100%;
width:400px;
background:#006965;
z-index:50;
height: 100vh;
overflow: auto;
scrollbar-width: thin;
}
.headernoir{
position:fixed;
display:none;
top:0;
left:0;
width: 100vw;
height:100vh;
background:black;
z-index:49;
opacity:0.5;
content: "";
}
.lienmenu, .lienssmenu{
display:inline-block;
position:relative;
color: #fcc000;
font-size: 4.6rem;
line-height:4.2rem;
font-family: 'misobold';
margin: 15px 0 15px 10%;
text-decoration: none;
}
.lienmenu4:after{
content:">";
position:absolute;
top: 3px;
left: 112%;
}
.lienssmenu{
font-size: 3rem;
margin: 0 0 20px 20%;
line-height:3rem;
}
.partage{
width:100%;
padding:30px 10px;
margin:30px 10px;
text-align:center;
background:#fcc000;
position: relative;
left: -10px;
}
.partage p{
display:inline-block;
 font-family: 'misobold';
 color:#006965;
 font-size:3rem;
float: left;
margin: 12px 0 0 17px;
}
.partage IMG{
vertical-align: middle;
}
.centrer{
position:relative;
width:100%;
max-width:1300px;
margin:0 auto;
}
.pcentrer{
position:relative;
width:100%;
max-width:840px;
margin:0 auto;
}
A{
cursor:pointer;
box-shadow:#006965 0px -2px inset;
text-decoration:none;
color:#006965;
transition: all 0.4s ease-out;
}
A:hover{
cursor:pointer;
box-shadow:#006965 0px -3px inset;
text-decoration:none;
}
A.sans{
box-shadow:none;
}
A.lien_article{
display:block;
color:black;
text-decoration:none;
}
A.sans
{
text-align:center;
font-size:1.5rem;
margin:0 0 30px 0;
line-height: 1.3;
}

#btmenu{
position:absolute;
margin: 30px 0 0 21px;
display: inline-block;
z-index:40;

}
#btfermer{
margin: 20px 0 0 20px;
display: inline-block;
}
#logo,#logo2{
position:absolute;
width:156px;
top:50%;
right:50%;
margin:-80px -76px 0 0;
transition: all 0.5s ease-out;
z-index:40;
}
#logo.logo_final,#logo2.logo_final{
top:20px;
right:20px;
margin:0;
width:50px;
}

#titre{
position:absolute;
width:400px;
top:50%;
left:-50%;
margin:-170px 0 0 -200px;
transition: all 0.5s ease-out;
}
#titre.titre{
left:50%;
}

#entrer{
display:none;
position:absolute;
width:90px;
height:auto;
left:50%;
bottom:130px;
margin:0 0 0 -50px;
transition: all 0.5s ease-out;
box-shadow: none;
}
#entrer:hover{
width:116px;
bottom:120px;
margin:0 0 0 -60px;
}
.logos_partenaire{
display:none;
position:absolute;
bottom:30px;
text-align:center;
width:100%;
}
.logos_partenaire img{
width:20%;
margin:0 2%;
height: auto;
max-width: 140px;
}






#conteneur{
overflow:auto;
position:relative;
left:0%;
z-index:10;
height:100%;
max-width: 1242px;
margin: 0 auto;
padding:15px;
background:#fcc000;
min-height: 100%;
}
.attente{
position:absolute;
bottom:50px;
right:50px;
width:100px;
z-index:2;
}

#scrolling{
position:absolute;
top:50%;
right:20%;
z-index:100;
cursor:pointer;
transition: all 2s ease-out;
opacity:0.4;
}
#scrollinggauche{
position:absolute;
top:60%;
right:2%;
z-index:100;
cursor:pointer;
transition: all 2s ease-out;
transform:rotate(180deg);
}
.scrollingplus{
right:2% !important;
opacity:1 !important;
}

.portrait{
border:0 none;
width:90vw;
max-width:400px;
float:left;
height:100%;
margin:0 0 30px 20px;
overflow:auto;
transition: all 1s ease-out;
scrollbar-color: #f9e299 #fcc000;
scrollbar-width: thin;
}
.portrait_none{
opacity:0.1;
}

.photo{
width:100%;
height:100%;
background:#fcc000;
overflow:hidden;
position:relative;
background-size:cover;
border-radius:25px 25px 0 0;
}

.portrait_titre{
display:inline-block;
position:absolute;
bottom: calc(100% + 12px);
left:0;
font-size:4rem;
line-height:4rem;
background: #fcc000;
color:#006965;
margin:0;
padding:3px 12px;
font-family: 'misobold';
}
.portrait_introduction{
display:block;
position:absolute;
bottom:46px;
left:20px;
padding:10px;
font-size:1.8rem;
background: white;
color:#006965;
width:88%;
line-height:1.1;
}
.slide{
display:block;
position:absolute;
bottom: 11px;
left: calc(50% + 14px);
margin: 0 0 0 -20px;
width: 23px;
}
.slide:hover{
bottom:0px;
transition: all 1s ease-out;
}
.rot90{
transform:rotate(90deg);
}

.dialogue{
padding:30px 0 0 0;
background:white;
}

.bulle_gauche, .bulle_droite{
position:relative;
background:#cce1e0;
padding: 7px 14px;
border-radius:10px;
display:inline-block;
margin:0 0 0 50px;
font-size: 1.6rem;
line-height:2.4rem;
max-width:70%;
}
.bulle_gauche:before{
position:absolute;
width:40px;
height:40px;
top:0;
left:-48px;
content:"";
background:url(/squelettes/images/logo.png) no-repeat;
background-size:cover;
}
.bulle_gauche:after{
position:absolute;
width: 10px;
height: 13px;
top: 15px;
left: -10px;
content:"";
background:url(/squelettes/images/coin.png) no-repeat;
background-size:cover;
}
.bulle_droite{
float:right;
margin:0 65px 0 0;
}
.bulle_droite:before{
position:absolute;
width:40px;
height:40px;
top:0;
right:-55px;
content:"";
background:url(/squelettes/images/logo.png) no-repeat;
background-size:cover;
}
.bulle_droite:after{
position:absolute;
width: 10px;
height: 13px;
top: 11px;
right: -10px;
content:"";
transform:rotate(180deg);
background:url(/squelettes/images/coin.png) no-repeat;
background-size:cover;
}
.bulle_droite p:first-of-type,.bulle_gauche p:first-of-type{
margin-top:0;
}
.bulle_droite p:last-of-type,.bulle_gauche p:last-of-type{
margin-bottom:0;
}
.nettoyeur{
clear:both;
}
H1{
display:inline-block;
color:#006965;
background:#fcc000;
font-size:6rem;
line-height:5rem;
padding:0 10px;
margin:10px 0 15px 0;
font-family: 'misobold';
}
H1.titre{
position:absolute;
display:inline-block;
left:15%;
top:100px;
color:#006965;
background:#fcc000;
font-size:6rem;
padding:0 10px;
z-index:500;
}
H2{
color:black;
font-size:3rem;
line-height:3.5rem;
}
H2:first-of-type{
margin-top:0;
}
H3{
color:#006965;
font-size:2rem;
position:relative;
}
.sousligne:after{
content: " ";
position: absolute;
bottom: 1px;
margin: 0 auto;
width: 30%;
height: 1px;
background: #006965;
left: 35%;
}
.petitemarge{
padding: 0 0 10px 0;
margin: 0 0 5px 0;
}
/* ================= CARTE ================================================== */
.leaflet-control-attribution{
display:none;
}
.leaflet-top {
top: 80%;
}
.leaflet-popup,.leaflet-popup-content-wrapper {
color:white;
background:#006965;
width:350px;
text-align:center;
}
.leaflet-popup-content{
width:86% !important;
}
.logoportrait{
width:90px;
height:auto;
}
.petit_titre{
display:inline-block;
text-transform:uppercase;
font-size:1.2rem;
margin:5px 0;
padding:0 10px 10px 10px;
border-bottom:1px solid white;
}
.tableaucarte{
width:100%;
color: #fcc000;
}
.tableaucarte TD{
width:50%;
}
.tableaucarte TD span{
display:inline-block;
background: #fcc000;
color:#006965;
padding:2px;
}
.carte{
border:2px solid white;
border-radius:5px;
overflow:hidden;
width:80%;
}
A.lien_decouverte{
display:block;
background:url(/squelettes/images/rond.png) no-repeat top center;
padding:80px 0 0 0;
margin:5px;
color:white;
font-size:1.5rem;
}

/* ================= ODD ================================================== */

.odd{
width:100%;
position:relative;
overflow:visible;
margin:15px 0 0 0;
}
.odd div{
width:100%;
position:relative;
}
.odd div img{
width:130px;
height:auto;
border:10px solid white;
transition: all 0.5s ease-out;
}
.odd div img:hover{
width:130px;
border:0px solid white;

}
.voir_odd{
margin-top:20px;
border:1px solid gray;
padding:20px;
}
.logo_odd{
float:left;
margin:6px 25px 5px 0;
}


.bloc:nth-child(even){
background:#fff6d9;
padding: 4% 6%;
}
.bloc:nth-child(odd){
background:white;
padding: 4% 6%;
}



@media (max-width: 768px) {
	#titre{
	position:absolute;
	width:250px;
	top:50%;
	left:-50%;
	margin:-100px 0 0 -125px;
	transition: all 0.5s ease-out;
	}
	.odd{
	width:100%;
	position:relative;
	overflow-x:auto;
	overflow-y:hidden;
	}
	.odd div{
	width:1800px;
	position:relative;
	}
	.logo_site{
	display:none;
	}
	header{
	height:60px;
	background:white;
	}
	.portrait {
	margin:0 0 30px 10px;
	}
	#btmenu{
	margin: 10px 0 0 10px;
	}
	#btfermer{
	margin: 10px 0 0 10px;
	}
	#logo.logo_final,#logo2.logo_final{
	top:4px;
	right:10px;
	}
}	

@media (max-width:450px) {
	.photo{
	border-radius:0;
	height: 100vh;
	}
	.portrait {
		border: 0 none;
		width: 100vw;
		max-width: 400px;
		float: left;
		height: 100%;
		margin: 0 10px 0 0;
		border-radius: 0;
	}
	#logo.logo_final,#logo2.logo_final{
	right:5px;
	top:10px;
	}	
	H1.titre{
	left:10px;
	top:80px;
	font-size:4rem;
	}
	H1{
	font-size:5rem;
	}	
div.bloc:nth-child(n){
padding:3% 2%;
}	
}


.grid {
  overflow: hidden;
}
/* global styles for direct child ex. .grid3 */
.grid > * {
  display: block;
  padding: 0;
  /* gutter value */
  margin-left: -20px;
  text-align: left;
}
/* global styles for each "cell" */
.grid > * > * {
  display: inline-block;
  /* gutter value */
  padding-left: 20px;
  margin-left: 0;
  vertical-align: top;
}
/* whitespace fixing for modern browsers including IE9+ */
:root .grid {
  font-size: 0;
  /* fallback for IE9+ */
  text-justify: distribute-all-lines;
}
:root .grid > * > * {
  /* fallback for Opera Mini */
  font-size: 14px;
  font-size: 1.4rem;
}
/* Opera hack */
.opera:-o-prefocus,
.grid > * {
  word-spacing: -0.43em;
}
.grid2 > * {
  width: 50%;
}
.grid3 > * {
  width: 33.333%;
}
.grid4 > * {
  width: 25%;
}
.grid5 > * {
  width: 20%;
}
.grid6 > * {
  width: 16.667%;
}
.grid8 > * {
  width: 12.5%;
}
.grid10 > * {
  width: 10%;
}
.grid12 > * {
  width: 8.333%;
}
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
.grid2-1 > *:first-child,
.grid1-2 > * + * {
  width: 66.666%;
}
.grid1-2 > *:first-child,
.grid2-1 > * + * {
  width: 33.333%;
}
.grid1-3 > *:first-child,
.grid3-1 > * + * {
  width: 25%;
}
.grid3-1 > *:first-child,
.grid1-3 > * + * {
  width: 75%;
}

@media (min-width: 481px) and (max-width: 768px) {
/* grid rwd for small screens */
  .grid3 > *,
  .grid4 > *,
  .grid5 > *,
  .grid6 > *,
  .grid8 > *,
  .grid10 > *,
  .grid12 > * {
    width: 50%;
  }
}
  
 @media (max-width: 480px) {
  /* grid rwd for tiny screens */
  .grid > * > * {
    width: 100% !important;
  }
}