/* 
    Document   : sortirenvalois
    Created on : 28 août 2014, 11:12:12
    Author     : mblanquet
    Description:
        Purpose of the stylesheet follows.
*/



/***** DECLARATION DES FONTS *****/
/*----------------------------------------------------------------------------------------------------------------*/
@font-face {
    font-family: 'Square';
    src: url('../fonts/square.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

root {display: block;}

/***** PAGE EN CONSTRUCTION *****/
/*----------------------------------------------------------------------------------------------------------------*/
#construction{
    font : normal 3.0rem Varela Round, Sans-serif;
    color : white;
    margin-top : 50px;
    padding : 25px;
    width : 50%;
    background : url('../images/noir_opaque.png');
    min-height : 100px;
}


/***** GESTION DU TITRE ET LOGO *****/
/*----------------------------------------------------------------------------------------------------------------*/

#zone_logo {
    
}

/* ANNONCE AGENDA */
#container_annonce_agenda {position : absolute; left: 0px; top : 70%; width : 100%; height : 5rem; line-height : 5rem; text-align : center;}
#annonce_agenda {display : inline-block; background : rgba(68, 68, 68, 0.8); width : 30%; border: 1px solid rgb(68, 68, 68); min-height : 2rem;line-height : 1.2; border-radius : 0.5rem; vertical-align : middle; padding : 10px;}
#annonce_agenda p {color : white; font-weight: bold; padding : 0; margin : 0;}
#annonce_agenda p a{display : block; color : inherit;}
#annonce_agenda p a:hover, .vcentre a:active{text-decoration : none;}
/*
#titre_sev h1{color : #EC70A8; font : bold 2.5rem Varela Round, Serif;}
#titre_sev img {margin-top : 60px;}
*/


/***** GESTION DE L'ENCART "AGENDA" *****/
/*----------------------------------------------------------------------------------------------------------------*/
#agenda h1 {margin-top : 2rem; margin-bottom : 2rem;}
#agenda h2{font : normal 5.0rem Sans-serif; color : #FFFFFF; text-shadow : 3px 3px 5px #222222;}
#agenda h3 {font-family : "Square", "Segoe UI", Sans-serif; font-size : 2.2rem; margin : 0px;}
#vignettes {
	margin : auto;
}

.vignette {
    width : 30rem;
    height : 15rem;
	margin : 0.5rem;
    padding : 0px;
}

.cadre_titre {
    display : inline-block;
    width : 15rem;
    height : 15rem;
    line-height : 15rem;
    margin : 0px;
    padding : 0px;
    text-align : left;
    color : #ffffff;
    overflow : hidden;
}

.cadre_titre h3 {font-family: serif; vertical-align: middle; display : inline-block; padding : 0px; margin : 0px; line-height : 0.9; z-index : -1;}

.cadre_lieu_date{
    display : inline-block;
    width : 15rem;
    height : 15rem;
    line-height : 15rem;
    margin : 0px;
    padding : 0px;
    text-align : center;
    background-color : #e0e0e0;
    vertical-align : top;
}

.contenu_cadre_lieu_date{
    display : inline-block;
    vertical-align: middle;
    line-height : 1.2;
}

.illu_vignette{
    max-width : 10rem;
    max-height : 10rem;
    margin-right : 10px
}

.lieu_date{
    margin-top : 1.2rem;
    font-size : 1rem;
}

/* GESTION DES COULEURS DES PASTILLES */
.color1{color : #006EB9;}
.bg_color1{background-color : #006EB9;}
.color2{color : #fdc300;}
.bg_color2{background-color : #fdc300;}
.color3{color : #EC70A8;}
.bg_color3{background-color : #EC70A8;}
.color4{color : #CD1013;}
.bg_color4{background-color : #CD1013;}
.color5{color : #7DA516;}
.bg_color5{background-color : #7DA516;}
.color6{color : #db5061;}
.bg_color6{background-color : #db5061;}
.color7{color : #702283;}
.bg_color7{background-color : #702283;}
.color8{color : #ea5901;}
.bg_color8{background-color : #ea5901;}
.color9{color : #CDB79B;}
.bg_color9{background-color : #CDB79B;}

/* Liens des vignettes */
.vignette a{display : block; color : inherit;}
.vignette a:hover, .vcentre a:active{text-decoration : none;}

/* POPIN */
.popin  {max-width : 500px; display : none;}
.popin h3{clear : both; padding-top : 20px;}


/***** GESTION DE L'ENCART ACTUALITES *****/
/*----------------------------------------------------------------------------------------------------------------*/
#actus{background : url('../images/noir_opaque.png'); color : white;}



/***** GESTION DE L'ENCART "APPLICATIONS" *****/
/*----------------------------------------------------------------------------------------------------------------*/

#appstore{width : 180px;}
#playstore{width : 180px;}


/***** GESTION DE L'ENCART PLAQUETTES *****/
/*----------------------------------------------------------------------------------------------------------------*/
#plaquettes h1 {font-family : "Segoe UI", sans-serif;}

.plaquette_dl{margin-top : 1rem;}
.plaquette_dl span{margin-top : 1rem;}
.plaquette_dl {display : block; color : inherit;}
.plaquette_dl a, .plaquette_dl a:visited {color : #212529;}
.plaquette_dl a:hover, .plaquette_dl a:active{ text-decoration : none;}



/***** GESTION DE L'ENCART DE LA LEGENDE *****/
/*----------------------------------------------------------------------------------------------------------------*/
#legende {
    position: -webkit-sticky;
    position : sticky;
    top: 0;
    background : #f0f0f0;
    padding-top : 10px;
    padding-bottom : 3px;
    z-index : 2;
}

#legende span{
    display : inline-block;
    margin-left : 10px;
    margin-right : 10px;
}


/***** GESTION DES MENTIONS LEGALES*****/
/*----------------------------------------------------------------------------------------------------------------*/
.mentions_legales{
    text-align : center;
    margin : auto;
    margin-top : 5rem;
    margin-bottom : 2rem;
}
.mentions_legales a{color : #000000;}
.mentions_legales a:hover, .vcentre a:active{text-decoration : none;}



/***** GESTION DES MEDIA QUERIES *****/
/*----------------------------------------------------------------------------------------------------------------*/
/*
* RESOLUTION INFERIEURE A 576PX
*/

@media screen and (max-width: 576px) {
    /*#container_annonce_agenda {top : 70%; width : 100%; height : 5rem; line-height : 5rem; text-align : center;}*/
    #container_annonce_agenda{top : 65%;}
    #annonce_agenda {width : 85%; padding : 5px;}
    #annonce_agenda p {font-size : 0.7rem;}
    #agenda h3 {font-size : 1.5rem;}
    
    #apps {margin-top : 1rem;}
    
    .vignette {
        width : 20rem;
        height : 10rem;
    }
    
    .cadre_titre{
        width : 10rem;
        height : 10rem;
        line-height : 10rem; 
    }
    
    .cadre_lieu_date{
        width : 10rem;
        height : 10rem;
        line-height : 10rem;
    }
    
    .illu_vignette{
        max-width : 7rem;
        max-height : 7rem;
    }
    
    .lieu_date{
        margin-top : 0.5rem;
        font-size : 0.8rem;
    }
    
    .popin  {max-width : 350px;}
    
    #legende{font-size : 0.6rem;}
    #legende img{width : 12px; height : 12px;}    
    #legende span{margin-left : 5px;    margin-right : 5px;}
}


/*
* RESOLUTION SUPERIEURE A 576px
*/
@media screen and (min-width : 576px) and (max-width: 768px){
    #container_annonce_agenda{top : 70%;}
    #annonce_agenda {width : 70%;}
    #annonce_agenda {padding : 5px;}
    #legende{font-size : 0.8rem;}
    #legende img{width : 14px; height : 14px;}    
    #legende span{margin-left : 7px;    margin-right : 7px;}
}


/*
* RESOLUTION SUPERIEURE A 768px
*/
@media screen and (min-width : 768px) and (max-width: 992px){
    #container_annonce_agenda{top : 70%;}
    #annonce_agenda {width : 50%;}
    #legende{font-size : 0.8rem;}
    #legende img{width : 14px; height : 14px;}    
    #legende span{margin-left : 7px;    margin-right : 7px;}
}


/*
* RESOLUTION SUPERIEURE A 992px & inférieure à 1200px
*/
@media screen and (min-width : 992px) and (max-width: 1200px){
    #container_annonce_agenda{top : 70%;}
    #annonce_agenda {width : 30%;}
    #legende{font-size : 0.8rem;}
}