/*font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;*/
/*font-family: "Bradley Hand", "Segoe script","Segoe Print", "Lucida Handwriting", cursive;*/
/*font-family: arial, helvetica, sans-serif;*/
/*font-family: "Arial Black", Impact, arial, sans-serif;*/
@font-face {
    font-family: 'handleeregular';
    src: url('handlee-regular-webfont.woff2') format('woff2'),
         url('handlee-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
/* passer body (et tous les éléments de largeur fixe) en largeur automatique */   
/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
iframe,
object,
embed,
video
 {
  max-width: 100%;
}  
/* conserver le ratio des images */
img {
  height: auto;
}  
/* gestion des mots longs */
textarea,
table,
td,
th,
code,
pre,
samp,
a
 {
  -webkit-hyphens: auto; /* césure propre */
  -ms-hyphens: auto;
      hyphens: auto;
  word-wrap: break-word; /* passage à la ligne forcé */
}  
code,
pre,
samp {
  white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
}   
/* masquer les éléments superflus */
.hide_mobile {
  display: none !important;
} 
html {
    font-size: 62.5%;
    /*font-family: arial, helvetica, sans-serif;*/
    font-family: "Segoe Print", "Lucida Handwriting", serif;
} 
body {
    margin: auto;
    padding: 0;
    font-size: 1.8rem;
    max-width: 1920px;
    /*background-image: url('images/summer_fond_gauche.jpg');*/ 
   
}
h1 {
    font-family: "Bradley Hand", "Segoe script","Segoe Print", "Lucida Handwriting", cursive;    
    text-align: center;     
    background-size: contain; 
    background-position: center;
    color: #ccc;
    background-color: #369;
    /*border-top: solid 1px #953;
    border-bottom: solid 1px #953;*/
    margin: 0;
    padding: 1.2rem 1rem .7rem 1rem;
    font-size: 3rem;
    line-height: 3rem;
    font-weight: normal;      
}
h1 em {
    font-family: arial, helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;        
}
h1 strong{
    font-size: 2rem;
    font-family: arial, helvetica, sans-serif;        
}
h2 {    
    font-weight: normal;
    font-size: 3rem;
    color: #039;
    font-family: "Bradley Hand", "Segoe script","Segoe Print", "Lucida Handwriting", cursive;    
}
h3 { 
    color: #039;                   
}
h4, h5, h6 {
    font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
    font-weight: normal;    
}
h4 {
    text-decoration: underline;
    font-style: italic;
}
h5 {
    margin:0;    
    text-align: right;    
    font-style: italic;
}
/*p, li{
    font-size: 2rem;
}*/


img {
    margin: 0;
    padding: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
ul {    
    list-style:url(images/puce.png);
    padding-left: 2rem;
}
ul li{
    margin:6px 30px;
}
ul>li{
    padding: .5rem 0;
}
a {
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
/*Toplinks================================================================================*/
.toplinks {
    display: -ms-grid;
    display: grid;     
    justify-items: right;
    background-color: #369;    
}
.toplinks a {         
    text-decoration: none;
    font-size: 2rem;
    color:#ccc;
    
    margin: 1rem;
}
.toplinks a:hover {
    color: #09f;
}
.toplinks ul{
    list-style: none;    
}
.toplinks ul li{
    display: inline;
    margin: 0;
}
/*Base_nav================================================================================*/
#navigation {
    width: 100%;  
}
.nav-inner{
    background-color: #369;
    padding: 1rem 0;  
}
nav a {
    color: #fff;
    display: block;
    padding: 1.4rem 1rem;    
    text-decoration: none;    
}
#navigation a:hover, .indexlinks a:hover {
    background-color: #09f;
}
nav > input,
.nav-button {
    display: none; /* hidden on large screens */
}
/*nav_mobiles*/
.nav-inner {
    position: absolute;
    width: 100%;  
    -webkit-transform: translateX(-100%) translateZ(0);  
            transform: translateX(-100%) translateZ(0);
    -webkit-transition: -webkit-transform .2s;
            transition: -webkit-transform .2s;
            -o-transition: transform .2s;
            transition: transform .2s;
            transition: transform .2s, -webkit-transform .2s;
    will-change: transform;
}
/* here's goes the slide effect */
input:checked ~ .nav-inner {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}
/* Button deco */
.nav-button {
    display: block;
    position: absolute;
    top: 1.2rem; left: 1rem;
    z-index: 1;
    height: 3.5rem; width: 3.5rem;
    background-color: transparent;
    background-image: -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff);
    background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)),
    -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)),
    -webkit-gradient(linear, left top, right top, from(#fff), to(#fff));
    background-image: -webkit-linear-gradient(left, #fff, #fff),
    -webkit-linear-gradient(left, #fff, #fff),
    -webkit-linear-gradient(left, #fff, #fff);
    background-image: -o-linear-gradient(left, #fff, #fff),
    -o-linear-gradient(left, #fff, #fff),
    -o-linear-gradient(left, #fff, #fff);
    background-image: linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff);
    background-position: center top, center, center bottom;
    background-repeat: no-repeat;
    background-size: 3.5rem .7rem;
    padding: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.nav-button h2{
    color: #fff;
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
    margin: 0 1rem 0 5rem;    
}
.nav-button:hover{
    background-image: -webkit-linear-gradient(left, #09f, #09f), -webkit-linear-gradient(left, #09f, #09f), -webkit-linear-gradient(left, #09f, #09f);
    background-image: -webkit-gradient(linear, left top, right top, from(#09f), to(#09f)),
    -webkit-gradient(linear, left top, right top, from(#09f), to(#09f)),
    -webkit-gradient(linear, left top, right top, from(#09f), to(#09f));
    background-image: -webkit-linear-gradient(left, #09f, #09f),
    -webkit-linear-gradient(left, #09f, #09f),
    -webkit-linear-gradient(left, #09f, #09f);
    background-image: -o-linear-gradient(left, #09f, #09f),
    -o-linear-gradient(left, #09f, #09f),
    -o-linear-gradient(left, #09f, #09f);
    background-image: linear-gradient(to right, #09f, #09f),
    linear-gradient(to right, #09f, #09f),
    linear-gradient(to right, #09f, #09f);
    
}
.nav-button:hover h2, .nav-button h2:hover{
    color: #09f;      
}  
/*Base_nav=fin============================================================================*/

/*wrapper=footer==========================================================================*/


header, .wrapper, .section, .aside, footer {
    display: -ms-grid;
    display: grid;
} 
.wrapper{
    padding: 0 1rem;
}
header{
    background-color: #69c;
}
header p{
    color: #ccc;
    background-color: #369;
    padding: .5rem 1rem;
    font-family: "Bradley Hand", "Segoe script","Segoe Print", "Lucida Handwriting", cursive;
}
header li {
    color: #fff;
}
.banner img{
    vertical-align: bottom;
}
.logo{        
        padding: 1rem 1rem .5rem 1rem;        
        align-self: center;
        justify-self: center;
}
.section a{
    font-style: italic;
}
aside{   
    font-family: "Bradley Hand", "Segoe script","Segoe Print", "Lucida Handwriting", cursive; 
    font-weight: bold;     
    padding-top: 2rem;      
}
figure{
    margin: 1rem 0;
}
figcaption{
    color: #039;
    padding-top: .5rem;
    font-family: "Bradley Hand", "Segoe script","Segoe Print", "Lucida Handwriting", cursive; 
    font-weight: bold;
}
footer{
    background-color: #258;
    color: #ccc;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
}
footer a, footer a H2{
    color: #ccc;
    margin: .5rem 1rem 0 1rem;
} 
 

/*Base_header=fin=========================================================================*/
/*wrapper=footer=fin======================================================================*/

/*Media Queries+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/   
@media all and (min-width: 640px){
    .wrapper{
        padding: 0 3rem;        
    }
    header {
        -ms-grid-columns: 1fr 2fr;
            grid-template-columns: 1fr 2fr;
        -ms-grid-rows: auto auto auto auto;
            grid-template-rows: auto auto auto auto;
    }
    .toplinks{
        -ms-grid-row: 1;
        grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        grid-column: 1 / span 3;
    }
    #navigation{
        -ms-grid-row: 2;
        grid-row: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        grid-column: 1 / span 3;
    }
    .logo{
        -ms-grid-row: 3;
        grid-row: 3;
        -ms-grid-column: 1;
        grid-column: 1;
        padding: 1rem;        
    }
    .banner{
        -ms-grid-row: 3;
        grid-row: 3;
        -ms-grid-column: 2 / span2;
        grid-column: 2 / span2;
    }
    header p{
        -ms-grid-row: 3;
        grid-row: 3;
        -ms-grid-column: 2;
        grid-column: 2;
        z-index: 5;
        align-self: end;
        justify-self: end;
    }
    h1{
        -ms-grid-row: 4;
        grid-row: 4;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        grid-column: 1 / span 3;
    }        
    .aside{
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;        
    }          
    /*nav*/
    nav a {    
    padding: 1.4rem 1rem 1.4rem 3rem;
    }   
}
@media all and (min-width: 884px){
    .logo{        
        padding: 1rem 2rem;
        background-color: #ccc;
        border: solid 3px #555;
        border-radius: 1.5rem;
    }
    h1{
        font-size: 4rem;
        line-height: 4rem;
    }    
}
@media all and (min-width: 1024px) {
    .nav-inner {    
        width: 50%;    
    }
    nav a {        
        padding: .6rem 1rem .6rem 8rem;                
    }
    .logo{
        padding: 1rem 6rem;
    }
    .wrapper{
        padding:0 6rem;       
        -ms-grid-columns: 5fr 2fr;       
        grid-template-columns: 5fr 2fr;
        background-image: url('images/aside_hiver_s.jpg');
        background-repeat: no-repeat;
        background-position: 100% 0;          
    }        
    .section{
        -ms-grid-row: 1;
        grid-row: 1;
        -ms-grid-column: 1;
        grid-column: 1;
        padding-left: 3rem;
        padding-bottom: 2rem;                     
    }                    
    .aside{
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr; 
        -ms-grid-row: 1; 
        grid-row: 1;
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-flex-line-pack: start;
        align-content: start;
        padding: 2rem 3rem 1rem 3rem;       
    }  
}