@font-face{
font-family:"itchy-handwriting";
src:url('images/Itchy_Handwriting.otf');
}

body{
background-color:#94C6FF;/*#9CFFD5; 8ABBFB*/
background-image:url("images/fond-bleu-fonce-bis4.jpg"); /*fond-bleu-foncef300*/
padding:0;
margin:8px;
font-family:"itchy-handwriting",verdana,sans-serif;
font-size:1.2em;
}

h1{
text-align:center;
margin:10px -10px 50px -10px;
overflow:hidden;
font-size:1el;
}

#imghaut{
overflow:hidden;
}

#phrasehaut{
text-align:center;
font-size:1.8em;
margin: -50px auto 50px auto;
color:#F90;/*#818181;*/
}

@media (max-width:716px){
#imghaut{
width:100%;
}
}

@media (max-width:520px){

#imghaut{
width:550px;
margin-left:50%;
transform: translateX(-50%);
}

}


#calendrier{
background-color:#EDFAFF;/*#F1FFFC;*/
background-image:url("images/fond-bleu-clair-bis.jpg"); /*c350*/
margin:auto;
padding:10px 10px 10px 10px;
max-width:910px;
/*border:1px black solid;*/
box-shadow:-0px 2px 12px RGBA(83, 86, 155, 0.6);
}

footer{
margin:50px 10px 0 10px;
text-align:right;
}


.case{
display:inline-block;
width:220px;
margin:10px 35px 30px 12px;
position:relative; /*pour que le positionnement absolue des images dedans marche*/
vertical-align:top;
z-index:2;
}

.case p {
text-align:center;
position:relative;
left:55px;
}

.case a, .inactive{
height:110px;
overflow:hidden;
vertical-align:bottom;
}

.case button{
width:110px;
height:110px;
overflow:hidden;
border:0;
padding:0;
vertical-align:bottom;
cursor:pointer;
}

.ferme, .inactive {
margin:0 0 0 110px;
}

.displayNone{
display:none;
}
.ferme, .ouvert{
display:inline-block;
}


.ouvert img {
position:relative;
bottom:110px;
}

a.ouvert:hover img{
position:relative;
bottom:220px;
}


#contourJour{
position:absolute;
top:-50px;
right:-42px;
pointer-events: none;
z-index:-1;
}

#cookies {
background-color: #5276BF;
margin: 8px -8px -8px -8px;
padding:5px 10px 10px 10px;
color:white;
}
#cookies p{
margin:5px 0 10px 0;
font-size:0.85em;
}
#cookies button{
margin:0 auto 5px auto;
}
#fermeCookies{
padding:0;
border:0;
height:30px;
float:right;
margin: -4px -9px 0 0;
}


#pageattente{
max-width:600px;
margin:60px auto 0 auto;
text-align:center;
font-size:1.25em;
color:#FFFBDA;
}

#pageattente p {
margin: 30px 0 30px 0;
}

#first{
font-size:1.75em;
/*color:#FFF083;
text-shadow:0 0 5px #EEEEEE;*/
}

@media (max-width: 650px)
{

body{
margin : 0;
}
#pageattente{
font-size:1em;
}
#first{
font-size:1.75em;
}

}


@media (min-width: 1400px)
{

#calendrier{
max-width : 1180px;
}


}