@font-face {
    font-family: 'PicNic';
    src: url('/site/templates/styles/fonts/picnic/PicNic-Regular.eot');
    src: url('/site/templates/styles/fonts/picnic/PicNic-Regular.woff2') format('woff2'),
         url('/site/templates/styles/fonts/picnic/PicNic-Regular.woff') format('woff');

    font-weight: normal;
    font-style: normal;

}


/*********************** BALISES : HTML & BODY *****************************/
@import "compass/css3";

html, body {
/* width: 100%;
    height: 100%; */
  scroll-behavior: smooth;
}

body{
    display: block;
    background: #FFFDFA; 
    font-family: monospace;
    text-align: left;
    color: black;
    padding: 10px;
    overflow: visible;
}


/**************************************************************/
/*************  CONTENEUR *************************************/

#conteneurtexte{
    display: block;
    position: relative;
    padding: 50px;
}

#conteneur {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 50px;
    overflow: visible;
}

.boiteimage{
    height: auto; 
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    position: relative;
    float: left;
    width:auto;
    overflow:visible;
    z-index: 2;
}


.sommaire{
    z-index: 2;
    position: relative;
    background: transparent;
    overflow: visible;
}

.sommaire p {
    z-index: -200;
    background: transparent;
}

/*
.sommaire p:hover, a:hover{
    color:#bd8dff;
    z-index: -200;
    overflow: visible;
}
*/

.sommaire a:hover{
    color:#bd8dff;
    z-index: -200;
    overflow: visible;
}

.sommaire p:hover{
    color:#bd8dff;
    z-index: -200;
    overflow: visible;
}

.1{
    font-size: 33px;
}


img.image:hover{
    position: relative;
    z-index: 2;
    overflow:visible;
    -webkit-transform: translateZ(0);
}

.image{
    position: relative;
    z-index: 2;
    overflow:visible;
    -webkit-transform: translateZ(0);
}

/************ TEXTE ************/
p{
    overflow-wrap: break-word;
    font-size: 2em ;
    color: brown;
    line-height: 1.2em;
    font-family: 'PicNic', monospace;
    text-align: left;
    margin: 50px;
    overflow:hidden;
    position: relative;
}

a, a:checked, a:active{   
    color: #ff7d23;
    overflow: visible;
}

a:hover{
    color: #bd8dff;
    filter: drop-shadow(0 0 10px yellowgreen);
    overflow: visible;
}

/* Par défaut, utilisé dans l'entête et le pied */
h2{}

/* Utilisé dans about pour crédits image*/
h5{
    overflow-wrap: break-word;
    font-size: 1em ;
    color: brown;    
    line-height: 0.8em;
    font-family: monospace;
    text-align: left;
    padding: 10px;
}

/**************************************************************/
/************* ENTETE *************************************/

#entete{
    position: relative;
    display: block;
    top: 0;
    padding: 10px 50px;
    width: auto;
}


h1{
    font-size: 2em;
}


/**************************************************************/
/************* PIED *************************************/

#pied{
    position: relative;
    display: block;
    bottom: 0;
    padding: 10px 50px;
    width: auto;
    text-align: center;
}

h3{
    
}

/************* MOBILE VERSION *************************************/



@media screen and (max-width: 1200px) {
  p {
    font-size: 5em;
  }
    
    #conteneurtexte p{
        font-size: 4.5em;
        line-height: 1.15em;
    }
    
    h1{
        font-size: 5em;
    }
    
    h2{
        font-size: 3.5em;
        padding-top: 2%;
    } 
    
    h3{
        font-size: 2em;
        
    }
    
    h5{
        font-size: 2em;
        line-height: 1.2em;
    }

    .boiteimage{
        width: auto;
        padding: 180px 50px !important;
    }
    
    
    
}