:root
{
	--bandeauHeaderColor: #00718B; /*#d12b2b; */
	--coconut: #936037;
	--rougeheaderORIG:#f70909;
	--rougeheader:#d12b2b;
	--blocrougeborder:#eee7dd;
	--grisday:#eee7dd;
	--grisdayhover:#00718B;
	--daynumber:#000d;
	--openeddayback:transparent; /* #fff9; */
	--dayshadowcolor:#fff;
	--sectionDetail:#dedede;
	--liens:#30bad7;
	--lienshover:#b0b0b0;
	--marginpopupr:80px;
	--marginpopupl:70px;
}



* { box-sizing: border-box; }

*:focus { outline:1px solid #000; }
.mouseFocusNoOutline { outline:none; }

a, a:visited { color:var(--liens); text-decoration:none; }
a:hover, a:active { text-decoration:underline; color:var(--lienshover); }

body { font-family: Arial, sans-serif; font-size: 18px;background:#f3fffb; color:#000 }
#stickyhead { position:sticky; top:0; background:var(--bandeauHeaderColor ); z-index:999; }
#titlecenter { position:absolute; top:0; left:25%; width:50%; }
#titlecenter #blocrouge { border-style:solid; border-top:none; border-left-width:6px; border-bottom-width:6px; border-right-width:6px; border-color:var(--blocrougeborder); background-color:var(--rougeheader);border-radius:0 0 20px 20px; width:100%; margin:0 auto; font-size:27px; text-align:center; }
#titlecenter #blocrouge #blocrougeflex { display:flex; flex-flow:column; justify-content:center; min-height:150px }
#titlecenter #blocrouge #blocrougeflex div.siteTitre { font-size:46px; font-weight:bold; font-family:PermMarker; }
#titlecenter #blocrouge #blocrougeflex div.siteSousTitre { margin-top:0px; margin-bottom:10px; color:#fff}

#titlecenter #blocrouge #blocrougeflex div.siteTitre div.titresvg svg { max-width:75%; margin-top:5px }

#header { display: flex; justify-content: space-between; align-items: center;  margin:0; padding:21px 0 }
#header #logo { margin-left:45px; }
#header #logo a, #logo img {display:block; }
#header #logo img { width:67px; height:67px; }
#header #menu { margin-right:56px; }
#header #menu a { display:block; text-align:right; color:#fff; font-size:18px; text-decoration:none; line-height:1.3em }
#header #menu a:hover { border-color:var(--lienshover);color:var(--lienshover); }
#header #menu .menuToggle { display:none } 
#header #menu .menuToggle svg { fill:#fff; }
#header #menu .menuToggle svg:hover { fill:var(--lienshover); }
#header #menu .menuclose { display:none; text-align:right; }
#header #menu .menuclose a { display:inline-block; border:2px solid #fff; color:#fff; text-decoration:none;padding:6px 9px; margin:0; font-weight:bold}
#header #menu .menuclose a:hover { border-color:var(--lienshover);color:var(--lienshover); }
#header #menu #menuOverlay #menuentries a.activepage { color:#444; }



#content {  background-position: center 45%;  background-size: 100% auto; background-image : url(bg.jpg); background-repeat:no-repeat; padding:80px 0 110px 0 }
#content {  _background-position: center 96px; background-attachment:fixed;}
/* #content #daywindows { display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } */
#content #daywindows { display:grid; justify-items:center;margin:0 auto; }

#content .daywindow { border-style:solid; border-color: var(--grisday); display:flex; align-items:center; justify-content:space-around; background-color:rgba(238,231,221,0.7); }
#content .daywindow a { display:block; font-size:58px; color:var(--daynumber);text-shadow:-3px -3px 3px var(--dayshadowcolor), 3px -3px 3px var(--dayshadowcolor),-3px 3px 3px var(--dayshadowcolor), 3px 3px 3px var(--dayshadowcolor); text-decoration:none; font-weight:bold; text-align:center; width:100%}

#content .daywindow:hover { border-color: var(--grisdayhover );  background-color:rgba(238,231,221,0.9);}
#content .daywindow:hover a,#content .daywindow.opened:hover a { color: var(--grisdayhover ); }

#content .daywindow.opened { background-color:var(--openeddayback); }
#content .daywindow.opened a { color:var(--grisday); }

/* taille de la grille : desktop */
/* 6 colonnes * 178px + 5 gaps * 60px = */
#content #daywindows { width:1368px;  row-gap: 50px; column-gap: 60px; grid-template-columns: repeat(6, 1fr); }
#content .daywindow { width:178px; height:178px; border-width:6px; }
#content .daywindow a {padding:0.8em 0; }

.don_mobile { display:none; background-color:var(--bandeauHeaderColor) }

.popupContainer
{
	position: absolute;
	top:0;
	left:0;
	box-sizing: border-box;
	padding-top: 210px;
/*	padding-bottom:100px;*/
	width:100%;
/*	height:100%;
	overflow:auto;*/
}
.popup
{
	border-radius:14px; 
	background-color: #fff;
	color:#000;
	box-shadow:0 5px 14px 8px #00000099;
	padding-bottom:50px;
	width: 1380px;
	max-width:calc(75%);
	/*transform: translate(-50%, 0);*/
	margin:0 auto;
	font-size:23px;
}
.popup.otherpages { font-size:20px; }
.popup img { max-width:100%; }
.popupclose { text-align:right; }
.popupclose a { display:inline-block; border:2px solid #000; color:#000; text-decoration:none;padding:6px 9px; margin:12px 12px 6px 0; font-weight:bold}
.popupclose a:hover { border-color:var(--bandeauHeaderColor );color:var(--bandeauHeaderColor ); }

.popup .date { margin:0 var(--marginpopupr) 0 var(--marginpopupl); font-family:Arial Black, Arial Bold, Gadget, sans-serif; font-weight:bold;padding-bottom:31px /* padding, car j'ai un float après, c'est plus sûr comme ca */ }
.popup .aboNotifPopup,
.popup .histoire { margin:0 var(--marginpopupr) 0 var(--marginpopupl); text-align:justify}
.popup .histoire .illustration { float:left; width:56%; margin-right:38px; margin-bottom: 10px; }
.popup .histoire .ecouterContainer { padding:18px 0 40px 0; }
.popup .histoire .ecouter { background-color:var(--sectionDetail); margin:0; padding:14px 0;  border-radius:0 14px 14px 0; color:#777;}
.popup .histoire .ecouter .green-audio-player { justify-content: flex-start; width:auto; min-width:unset; height:auto; flex-flow:row wrap; }
.popup .histoire .ecouter .green-audio-player .labelEcoute { margin-left:1em; }
.popup .histoire .ecouter .green-audio-player .hideAtStart { display:none; padding:10px 6px 6px 0; width:100%; }
.popup .histoire .ecouter .green-audio-player .hideAtStart .controls__current-time,
.popup .histoire .ecouter .green-audio-player .hideAtStart .controls__total-time { color:#777; }
.popup .histoire .ecouter .green-audio-player .hideAtStart .slider { background-color:var(--bandeauHeaderColor ); }
/* hideAtStart */
/*.popup .histoire .ecouter .green-audio-player .controls { display:none;} */
.popup .histoire .texte {  }
.popup .histoire .laSuite { text-align:right; color:#777; margin:42px 0 20px 0 }

.popup .histoire .shareTheStory { display:flex; flex-flow: row nowrap; justify-content:center; margin-bottom:1em; }
.popup .histoire .shareTheStory div { display:inline-block; border:2px solid #000; border-radius:10px; padding:0.8em 1em; text-align:left; }
.popup .histoire .shareTheStory div b,
.popup .histoire .shareTheStory div p { display:block; margin:0 0 0.5em 0; }

.popup .pourAllerPlusLoin img.AHNN,
.popup .pourAllerPlusLoin .pourAllerPlusLoinTitreContainer { height: 134px; }
.popup .pourAllerPlusLoin img.AHNN { position: absolute; transform: translate(32px, 0); }
.popup .pourAllerPlusLoin .pourAllerPlusLoinTitreContainer { display:flex; flex-direction: column; justify-content: center; }
.popup .pourAllerPlusLoinSection { background-color:var(--sectionDetail);  padding:12px 0 12px 320px }
.popup .pourAllerPlusLoinSection b { display:block; font-family:Arial Black, Arial Bold, Gadget, sans-serif;font-weight:bold;  }

.popup .pourAllerPlusLoin .titre { margin:0 var(--marginpopupr) 0 var(--marginpopupl);  font-weight:bold; padding:1em 0 1.5em 0  /* padding, car j'ai un float après, c'est plus sûr comme ca */  }
.popup .pourAllerPlusLoin .texte { margin:0 var(--marginpopupr) 0 var(--marginpopupl); text-align:justify }
.popup .pourAllerPlusLoin .texte iframe,.popup .pourAllerPlusLoin .texte .likeaiframe { float:left; max-width:55%; margin-right:38px; margin-bottom: 10px; }
a.likeaiframe.withborder img { border: 1px solid var(--grisday)}
.forcevideowidth iframe.notlikeaiframe,
.popup .pourAllerPlusLoin .texte iframe.notlikeaiframe { float:none; max-width:100%; margin-right:0 }
.popup .pourAllerPlusLoin .texte ul { margin-left:14%; }
.popup .pourAllerPlusLoin .texte div.clear { clear:both; }
.popup .pourAllerPlusLoin .texte .vignettequi { float:left; max-width:12%; margin-right:1%; margin-bottom: 10px; text-align:center; font-size:0.8em; font-weight:bold; }
.popup .pourAllerPlusLoin .texte .vignettedialogue { width:3em; height:3em; }
.popup .pourAllerPlusLoin .texte .dialogue { display:flex; flex-flow:row wrap;justify-content: space-between; }
.popup .pourAllerPlusLoin .texte .dialogue p { width:calc(98% - 3em);  }
.popup .pourAllerPlusLoin .titre .texte { margin:2em 0 0 0; }
.popup .pourAllerPlusLoin .texte:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.popup .pourAllerPlusLoin .texte .spacer { display:none;  }


.popup .pagestdsection { background-color:var(--sectionDetail);  padding:12px 0 12px 70px; font-family:Arial Black, Arial Bold, Gadget, sans-serif; font-weight:bold; }
.popup .pagestdtexte { margin:0 var(--marginpopupr) 0 var(--marginpopupl); text-align:justify }
.popup .pagestdtexte .illustration { float:right; width:64%; margin-left:38px; margin-bottom: 10px; }
.popup .pagestdtexte .illustration.personnage { width:22%; margin:0 5% 20px 8%; border-radius:14px;}
.popup .pagestdtexte ul { margin:0; }
.popup .pagestdtexte ul li { margin:0.2em 0; }


/*.zoomable-image {  width:50vw; }*/
.popup .histoire .illustration.image-open,
.popup .pourAllerPlusLoin .texte .image-open {position:absolute;  left:0; z-index:1000; width:100vw; max-width:100% !important; }
.zoomable-image:hover{ cursor: pointer; }
#zoomOverlay { display:none; }
#zoomOverlay.image-open { display:block; cursor: pointer;  position:fixed; top:0; left:0; width:100vw; height:100%; background:rgba(0,0,0,0.8); z-index:999; }


input[type=text] { width:100%; border:none;margin-bottom:1em;padding: calc(1em - 2px) 0.5em calc(1em - 2px) 0.5em }

.formCheckBloc { margin-bottom:1em; }
input[type=checkbox] { float:left; margin-right:0.5em;}

.formWinSpace {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.formWinSpace input, .formWinSpace div { width:48%; }

.formsuccess,
.formerror { margin-top:1em 0 0.6em 0; padding:22px; font-size: 17px; line-height:1.5em; font-family:Assistant; letter-spacing: -0.2px; } 
.formsuccess { background: #fff; color: #1E1E1E  ; }
.formerror  {  background: #565656; color: #FFFFFF  ; }

#nouscontacter { padding-right:5% }
#nouscontacter a { display:block; background:rgba(255,255,255,0.9); border: 2px solid #565656; border-radius: 3px; text-align:center; font-size:20px; letter-spacing: -0.32px; color: #1E1E1E; padding:4px 6px 3px 6px; padding:0.4em 0.8em; line-height:1em;  text-decoration:none;  }
#nouscontacter a:hover { background-color:#565656; border-color:#1E1E1E;  color:#fff; }
.pagecontact #nouscontacter,.pagecontact #nouscontacter a { display:none; }

/* histoire 11 */
img.appstore { max-width:17% }

/* histoire 22 */
.mashcontainer { min-height:550px; font-size:0 !important}
.mashcontainer div { font-size:0 !important}
#mashiframe .sharebtns { display:none; }


/*					
	form contact			
					*/
#donsteps form.contact {  }
#donsteps form.contact input,
#donsteps form.contact textarea { width:100%; font-style:italic; font-size:17px; line-height:1em; margin-top: 16px; }
#donsteps form.contact input {  padding:0.6em 0.9em; background-color:#f7f5f5; border:none; }
#donsteps form.contact textarea {  padding:0.8em 0.6em; border:5px solid #eae8e8; min-height:145px}
#donsteps form.contact input[type=submit] { width:unset; display:block; margin: 16px 0 0 auto; padding:0.6em 3em; background:#e32211; color:#fff; border:1px solid #e32211; border-radius:3px; text-transform:uppercase; cursor:pointer }
#donsteps form.contact input[type=submit]:hover { background:#eae8e8; color:#e32211 }
.grecaptcha-badge { visibility:hidden; opacity:0}


/*					
	form aboNotif			
					*/
#content form.aboNotif {  }
#content form.aboNotif label { display:none; }
#content form.aboNotif input[type=text],
#content form.aboNotif textarea { width:100%; font-style:italic; font-size:17px; line-height:1em; margin-top: 16px; }
#content form.aboNotif input[type=text] {  padding:0.6em 0.9em; background-color:#f7f5f5; border:none; }
#content form.aboNotif textarea {  padding:0.8em 0.6em; border:5px solid #eae8e8; min-height:145px}
#content form.aboNotif input[type=submit] { width:unset; display:block; margin: 16px 0 0 auto; padding:0.6em 3em; background:#de2e25; color:#fff; border:1px solid #de2e25; border-radius:3px; text-transform:uppercase; cursor:pointer }
#content form.aboNotif input[type=submit]:hover { background:#eae8e8; color:#de2e25 }
#content form.aboNotif .g-recaptcha>div { margin:16px 0 0 auto; }


/*										
	media query MIN OU MAX ? 						
	iphone se=320, iphone6=375, ipad normal = 768, ipad pro=1024 	
	on garde au mini 315, 768, 1024, 1280, max-width-container		
*/
@media (max-width: 1639px)
{
	#titlecenter #blocrouge #blocrougeflex div.siteTitre { font-size:calc(100vw / 42); }
	#titlecenter #blocrouge #blocrougeflex div.siteSousTitre { font-size:calc(100vw / 62);}

	.popup .histoire .illustration { width:60%; }

}

@media (max-width: 1439px)
{
	/* taille de la grille : en dessous mac 2016 */
	/* 6 colonnes * 158px + 5 gaps * 60px = */
	#content #daywindows { width:1248px; }
	#content .daywindow { width:158px; height:158px; }
	#content .daywindow a {padding:0.7em 0; }


	.popup .histoire .illustration { width:50%; }

}

@media (max-width: 1279px)
{
	#header #logo img { width:60px; height:60px; }
/*	#titlecenter #blocrouge #blocrougeflex { font-size:24px; }
	#titlecenter #blocrouge #blocrougeflex div { font-size:28px; }
*/	#header #menu #menuentries a { font-size:16px; }

	/* taille de la grille : ipad landscape & grosses tablettes */
	/* 6 colonnes * 130px + 5 gaps * 40px = */
	#content #daywindows { width:980px; row-gap: 36px; column-gap: 40px; }
	#content .daywindow { width:130px; height:130px; }
	#content .daywindow a { font-size:58px;padding:0.5em 0; }

	img.appstore { max-width:30% }
}

@media (max-width: 1023px)
{
/*	#titlecenter #blocrouge #blocrougeflex div { font-size:30px; }*/
	/* menu burger jusque 1023px */
	#titlecenter #blocrouge #blocrougeflex { min-height:80px }
	#header #logo { margin-left:15px; }
	#header #logo img { width:30px; height:30px; }
	#header #menu { margin-right:0; }
	#header #menu a.menuToggle svg { margin-right:15px; }
	#header #menu .menuToggle,
	#header #menu .menuclose { display:block; }
	#header #menu #menuOverlay { display:none; position: absolute; right: 0; top: 0; background: var(--bandeauHeaderColor ); width: 100%; height:100vh; padding: 21px 15px; }
	#header #menu #menuOverlay #menuentries { display:flex; flex-flow:column; justify-content:center; row-gap:0.5em; height:calc(100% - 2em - 24px); padding:0 15%;  }
	#header #menu #menuOverlay #menuentries a { font-size:12px; text-align:center; padding:2em 0; margin:0.25em 0; border:1px solid #fff }

	
	#content { background-position: 50% 42px; }
	/* taille de la grille : ipad standard portrait */
	/* 4 colonnes * 130px + 3 gaps * 40px = */
	#content #daywindows { width:632px; row-gap: 30px; column-gap: 40px; grid-template-columns: repeat(4, 1fr); }
	#content .daywindow { width:128px; height:128px; }
	#content .daywindow a { font-size:48px; }

	.popupContainer { padding-top:130px; }

	/* on garde l'illustration en full width jusque 1023 */
	.popup .histoire .ecouterContainer { padding-top:0; }
	.popup .histoire .ecouter { font-size:20px;padding:7px 0 7px 20px; border-radius:14px;  }
	.popup .histoire .ecouter .green-audio-player .holder .play-pause-btn svg {width:30px; height:30px; }
	.popup .histoire .illustration { float:none; margin-right:0; width:100%; }

	img.appstore { max-width:48% }

	/* si pas de menu en haut, un faire un don en bas */
	.don_mobile { display:block; text-align:center; padding: 16px 0}
	.don_mobile a { font-size: 24px; padding: 6px 10px 6px 8px; color: #fff; display: inline-block; border: 2px solid #fff;border-radius: 3px;text-align: center; letter-spacing: -0.32px; text-decoration: none; line-height: 1em; }
	.don_mobile a:hover { color:var(--lienshover); border-color:var(--lienshover)}

}
@media (max-width: 767px)
{
	#titlecenter { left:17%; width:66%; }
/*	#titlecenter { position: static; }*/
	#titlecenter #blocrouge { border-left-width: 3px; border-bottom-width: 3px; border-right-width: 3px; }

	#titlecenter #blocrouge #blocrougeflex div.siteTitre { font-size:calc(100vw / 28); }
	#titlecenter #blocrouge #blocrougeflex div.siteSousTitre { font-size:calc(100vw / 42); margin-top:10px}


	#content {  background-size: auto 100% ; }
	/* taille de la grille : smartphone landscape */
	/* 4 colonnes * 108px + 3 gaps * 40px = */
	#content #daywindows { width:552px;  }
	#content .daywindow { width:108px; height:108px; border-width:3px;  }
	#content .daywindow a { font-size:48px; }

	/* à partir de 768px, on peut reprendre le titre de section plus aller plus loin normal */
	.popup .pourAllerPlusLoin { margin-top:30px; }
	.popup .pourAllerPlusLoin img.AHNN { height:60px; transform: translate(var(--marginpopupl), -10px); }
	.popup .pourAllerPlusLoinSection { padding:32px var(--marginpopupr) 12px var(--marginpopupl); }

	.popup .pourAllerPlusLoin .titre { padding:1em 0 0.8em 0 }
	.popup .pourAllerPlusLoin .texte { display:flex; flex-flow: column; }
	.popup .pourAllerPlusLoin .texte .vignettequi { max-width:33%; margin:0 4px 4px 0}
	.popup .pourAllerPlusLoin .texte div.avantvideo { order:1; }
	.popup .pourAllerPlusLoin .texte iframe,.popup .pourAllerPlusLoin .texte .likeaiframe { float:none; width:100%; max-width:100%; margin:1em 0; order:2; }
	.popup .pourAllerPlusLoin .texte div.apresvideo { order:4; }
/*	.popup .pourAllerPlusLoin .texte .spacer { display:block; order:3 }*/
	
	.popup .pagestdtexte .illustration { float:none; margin-left:0; width:100%; }
	.popup .pagestdtexte .illustration.personnage { display:none; }
	
}
@media (max-width: 639px)
{
	:root
	{
		--marginpopupr:1em;
		--marginpopupl:1em;
	}

	/* taille de la grille : smartphone landscape */
	/* 3 colonnes * 108px + 2 gaps * 40px = */
	#content #daywindows { width:404px; grid-template-columns: repeat(3, 1fr) }

	.popup
	{
		max-width:calc(85%);
	}

}

@media (max-width: 450px)
{
	#content { background-position: 50% 42px; padding:40px 0 0 0 }
	/* taille de la grille : smartphone portrait */
	/* 3 colonnes * 74px + 2 gaps * 30px = */
	#content #daywindows { width:282px; row-gap: 24px; column-gap: 30px; padding-bottom:40px }
	#content .daywindow { width:74px; height:74px; }
	#content .daywindow a { font-size:28px; }
	
	.popupContainer { padding-top:100px; }
	.popup { font-size:20px; }
	.popup .popupclose a { font-size:14px; }
	
	.popup .histoire .ecouter .green-audio-player .labelEcoute { margin-left: 0.6em;}
	.popup .pourAllerPlusLoin .texte { text-align:left; }

	.mashcontainer { min-height:700px; font-size:0 !important}
}

@media (max-width: 299px)
{
	/* taille de la grille : très petit smartphone */
	/* 2 colonnes * 74px + 1 gap * 30px = */
	#content #daywindows { width:178px; grid-template-columns: repeat(2, 1fr) ; }
}


/*#content {  background-position: center -50px;  background-size: 100% auto;*/