/* *********************************************
* @filename  : home.css
* @description  : Permet de styler tous les elements de la home page
* @author  : Tresor ILOYI
* @date  : 20 Septembre 2013
 * *********************************************/
 
/* ------------------------------------------- *
* =BALISES HTML5		  	   
* -------------------------------------------- */
/* tags HTML5 qui se comportent comme des blocs */
article, aside, audio, canvas, datagrid, datalist, details, dialog, figure, footer, header, menu, nav, section, video { display: block; }
/* tags de type en ligne */
abbr, eventsource, mark, meter, time, progress, output, bb { display:inline; }

/* ------------------------------------------- *
* =GLOBAL STYLES		  	   
* -------------------------------------------- */
.home #wrapper {
    padding:38px 20px;
    width:auto;
}
.home #containerMain {
    overflow:hidden;
}
.home #containerMain > .wrapper {
    /*background:#dedede;*/
    overflow:hidden;
}
/*.home #containerMain > .wrapper + .wrapper {
    background:#444;
}*/

/* ------------------------------------------- *
* =HEADER		  	   
* -------------------------------------------- */
    /**** GENERICS ****/
.home #header .content {
    /*overflow:hidden;*/
    padding:0 20px;
    width:auto;
}
.home #header .wrapContentHeader {
    /*overflow:hidden;*/
    float:right;
    text-align:right;
}

    /**** MENU ****/
.home #header .menu {
    display:inline-block;
    /*float:left;*/
    float:none;
    margin:45px 0 0;
}

    /**** FORMULAIRE ****/
.home #header .yks-mailchimpFormContainer {
    display:inline-block;
    margin:45px 0 0 16px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .home #header .yks-mailchimpFormContainer {
        display:inline-block;
        margin:48px 0 0 16px;
        vertical-align:top;
    }
}

.home #header .yks-mailchimpFormContainer .yks-mailchimpFormDiv { 
    overflow:hidden;
}
.home #header .yks-mailchimpFormDiv .yks-mailchimpFormDivRow > *,
.home #header .yks-mailchimpFormContainer .yks-mailchimpFormDiv > div {
    display:inline-block;
    vertical-align:top;
    width:auto;
}
.home #header .yks-mailchimpFormDiv .yks-mailchimpFormDivRow label {
    color:#949494;
    font-size:1.25em; /* =15px */
    padding:2px 6px 0 0;
}
.home #header .yks-mailchimpFormDiv .yks-mailchimpFormDivRow input[type="text"] {
    background:#fff;
    border:1px solid #d4d4d4;
    font-family:Arial;
    font-size:1em;
    height:auto;
    padding:5px 10px;
    width:265px;
    
}
.home #header .yks-mailchimpFormContainer .yks-mailchimpFormDivRow ~ .yks-mailchimpFormDivRow { display:none; }

/* ------------------------------------------- *
* =BLOC PUBLICITES		  	   
* -------------------------------------------- */
#containerAds {
    /*background:#D36E70;*/
    float:left;
    margin:0 40px 0 0;
    min-height:410px;
    width:95px;
}
#containerAds > * {
    display:block;
    float:none;
    margin:10px 0 0;
    position:static;
}
#containerAds > *:first-child { margin:0; }

/* ------------------------------------------- *
* =LISTE DES ARTICLES		  	   
* -------------------------------------------- */
/* =LISTE DES ARTICLES ----------------------- */
    /**** GENERICS ****/
.home .listArticles {
    overflow:hidden;
    margin:0;
    padding:0;
}
.home .listArticles > li {
    background:none;
    float:left;
    padding:0;
    overflow:hidden;
}
.home .listArticles figure { margin:0; }
.home .listArticles h2 {
    margin:0;
    padding:0;
}
.home .listArticles img,
.home .lastArticle figure img {
    display:block;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;   
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.home .listArticles img {
    max-width:100%;   
}
.home .listArticles .itemArticle {
    border:1px solid #dbdbdb;
    margin:0 0 20px;
    position:relative;
}
.home .listArticles figcaption {
    position:absolute;
    left:-999em;
}

/* =LIEN ARTICLE ET BOUTONS DE PARTAGE ------- */
    /** Lien "Decouvrir" **/
.home .lastArticle .linkShowArticle,
.home .listArticles .linkShowArticle {
    background:rgba(255, 255, 255,0.90);
    color:#95989c;
    display:none;
    font-size:1.5em; /* =18px */
    height:100%;
    left:0;
    line-height:180px;
    position:absolute;
    text-align:center;
    text-transform:uppercase;
    top:0;
    width:100%;
    z-index:1;
}
    /** Boutons de partage **/
.home .lastArticle .listShareLinking,
.home .listArticles .listShareLinking {
    bottom:-30px;
    left:50%;
    margin-left:-65px;
    padding:0;
    position:absolute;
    z-index:2;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;   
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.home .listArticles .listShareLinking li,
.home .lastArticle .listShareLinking li {
    background:none;
    display:inline-block;
    height:30px;
    margin:0 0 0 16px;
    padding:0;
    text-indent:-999em;
    width:30px
}
.home .listArticles .listShareLinking li:first-child,
.home .lastArticle .listShareLinking li:first-child { margin:0; }
.home .listArticles .listShareLinking a,
.home .lastArticle .listShareLinking a {
    background:url("../../images/decor/pic-links-socialshare.png") no-repeat left top;
    display:block;
    height:30px;
    width:30px;
}
.home .listArticles .listShareLinking .twitter a,
.home .lastArticle .listShareLinking .twitter a { background-position:left -40px; }
.home .listArticles .listShareLinking .gplus a,
.home .lastArticle .listShareLinking .gplus a { background-position:left -80px; }

    /** Hover **/
.home .listArticles > li:hover,
.home .lastArticle:hover { cursor:pointer; }
.home .listArticles > li:hover img { max-width:120%; }
.home .listArticles > li:hover .linkShowArticle,
.home .lastArticle:hover .linkShowArticle { display:block; }
.home .listArticles > li:hover .listShareLinking,
.home .lastArticle:hover .listShareLinking { bottom:20px; }

/* ------------------------------------------- *
* =DERNIER ARTICLE PUBLIE	  	   
* -------------------------------------------- */
.home .lastArticle {
    background:#fff;
    border:1px solid #f3f3f3;
    color:#999;
    float:left;
    margin:0 0 20px;
    width:415px;
}
.home .lastArticle .title {
    font-size:2em; /* =24px */
    line-height:normal;
    margin:0;
    overflow: hidden;
    padding:0 14px 5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home .lastArticle a { color:#999; }
.home .lastArticle .title a:hover { text-decoration:underline; }
.home .lastArticle .wrap {
    padding:10px 14px;
}
.home .lastArticle .wrapFigure {
    margin:0 auto 10px;
}
.home .lastArticle .wrapFigure,
.home .lastArticle figure {
    overflow:hidden;
    position:relative;
}
.home .lastArticle figure {
    border:1px solid #f1f1f1;
    height:250px;
    margin:0 auto;
    padding:2px;
}
.home .lastArticle figure span {
    display:block;
    height:250px;
    overflow:hidden;
}
.home .lastArticle figure img {
    display:block;
    max-height:100%;
}
.home .lastArticle .wrap > p {
    font-size:0.833em; /* =10px */
    line-height:1.4em;
    margin:0;
    padding:0;
}
    /** Hover **/
.home .lastArticle:hover img { max-height:120%; }


/* ------------------------------------------- *
* =SURCHARGE POUR IE
* -------------------------------------------- */
.ie8 .home #wrapper,
.ie7 .home #wrapper,
.ie8 .home #header .content,
.ie7 .home #header .content {
    /*padding: 20px 0 30px;
    text-align: left;*/
    margin:0 auto;
    width: 960px;
}
    /**** HEADER ****/
.ie8 .home #header .wrapContentHeader,
.ie7 .home #header .wrapContentHeader { float:none;  }
.ie8 .home #header .menu,
.ie7 .home #header .menu { margin:22px 0 7px; }
.ie8 .home #header .yks-mailchimpFormContainer,
.ie7 .home #header .yks-mailchimpFormContainer { margin:0; }

    /**** LISTE DES ARTICLES ****/
.ie8 .home .listArticles,
.ie7 .home .listArticles {
    overflow:hidden
}
.ie8 .home .listArticles .itemArticle,
.ie7 .home .listArticles .itemArticle {
    float:left;
    margin:0 12px 20px 12px;
    width:30%;
}

    /**** DERNIER ARTICLE ****/
.ie8 .home .lastArticle,
.ie7 .home .lastArticle {
    margin-right:10px;
    width:396px;
}

    /**** LIENS DE PARTAGE ****/
.ie8 .home .lastArticle .linkShowArticle,
.ie8 .home .listArticles .linkShowArticle,
.ie7 .home .lastArticle .linkShowArticle,
.ie7 .home .listArticles .linkShowArticle {
    background:url("../../images/decor/voile-ie.png") repeat-x left top;
}

/* ------------------------------------------- *
* =RESPONSIVE	  	   
* -------------------------------------------- */
    /**** MOBILE PAYSAGE : 480x320 ***/
@media screen and (min-width: 320px) and (max-width: 638px) { 
    /*.home #wrapper { background:grey !important; }*/
    
    /**** PUBLICITE ****/
    #containerAds {
        display:none;
    }
    
    /**** GENERICS ****/
    .home .lastArticle,
    .home .listArticles .itemArticle {
        float:none;
        margin:0 0 20px; 
        max-width:100%;
    }

    /**** DERNIER ARTICLE *****/
    .home .lastArticle,
    .home .lastArticle figure,
    .home .lastArticle figure span { height:auto; }
    .home .lastArticle { 
        width:auto
    }
    .home .lastArticle figure img {
        max-height:auto;
        max-width:100%;
    }
}
@media screen and (min-width: 639px) and (max-width: 673px) {
    /*.home #wrapper { background:#FFA420 !important; }*/

    /**** LISTE DES ARTICLES ****/
    .home .listArticles .itemArticle { width:48%; }
    .home .listArticles .itemArticle:nth-child(odd) { margin-right:3%; }
    .home .wrapper:first-child .listArticles .itemArticle:nth-child(odd) {
        margin-left:135px;
        margin-right:1.5%;
    }
    
    /**** DERNIER ARTICLE *****/
    .home .lastArticle,
    .home .lastArticle figure,
    .home .lastArticle figure span { height:auto; }
    .home .lastArticle { 
        width:auto
    }
    .home .wrapper .lastArticle {
        float:none;
        margin:0 0 20px; 
    }
    .home .lastArticle figure img {
        max-height:auto;
        max-width:100%;
    }    
}
@media screen and (max-width:995px) {

    /**** HEADER ****/
    .home #header .content {
        overflow:visible;
    }
    .home #header .wrapContentHeader { 
        float:none;
        overflow: visible;
        position:relative;
        text-align: left;
    }
    .home #header .menu { 
        background:#fff;
        cursor:pointer;
        margin:0;
        min-width:128px;
        position:absolute;
        right:0;
        top:40px;
        text-align:center;
        text-transform:uppercase;
        z-index:999;
    }
    .home #header .menu:before {
        background:#444;
        color:#d1d1d1;
        content:"Menu";
        display:block;
        font-size:1.167em; /* =14px */
        padding:8px 6px;
    }
    .home #header .menu li {
        display:none;
        float:none;
        padding:0;
    }
    #header .menu li:hover ul, #header .menu li.sfHover ul {
        background:none;
        left:-85%;
        margin-top:0;
        top:-11px;
    }
    .home #header .menu:hover li { display:block; }
    .home #header .yks-mailchimpFormContainer { display:none } 
}

@media screen and (min-width: 674px) and (max-width: 994px) {
    /*.home #wrapper { background:#E55137 !important; }*/
    
    
    /**** ARTICLES DANS LE WRAPPER 1 ****/
    .home .listArticles .itemArticle { margin-left:2%; }
    
    /**** ARTICLES DANS LE WRAPPER 2 ****/    
    .home .wrapper + .wrapper .listArticles .itemArticle { width:calc(95%/3); }
    
    /**** DERNIER ARTICLE ****/
    .home .lastArticle { margin:0 0 20px 0;  }
    
}

@media screen and (min-width: 995px) and (max-width: 1280px) {
    /*.home #wrapper { background:#E5BE01 !important; }*/

    /**** HEADER ****/
    .home #header .wrapContentHeader { float:none;  }
    .home #header .menu { margin:22px 0 7px; }
    .home #header .yks-mailchimpFormContainer { margin:0; }  
    
    /**** ARTICLES DANS LE WRAPPER 1 ****/
    .home .listArticles .itemArticle { margin-left:1.5%;  }
    
    /**** ARTICLES DANS LE WRAPPER 2 ****/
    .home .wrapper + .wrapper .listArticles .itemArticle { width:calc(93%/4); }
    .home .wrapper + .wrapper .listArticles .itemArticle:nth-child(4n+1) { margin-left:0; }
}
@media screen and (min-width: 1280px) and (max-width: 1400px) {

    /**** HEADER ****/
    .home #header .wrapContentHeader { float:none;  }
    .home #header .menu { margin:22px 0 7px; }
    .home #header .yks-mailchimpFormContainer { margin:0; }  
}

@media screen and (min-width: 1280px) and (max-width:1589px){
    /*.home #wrapper { background:#6A5D4D !important; }*/

    /**** ARTICLES DANS LE WRAPPER 1 ****/
    .home .wrapper:first-child .listArticles .itemArticle { margin-left:1%; }
    
    /**** ARTICLES DANS LE WRAPPER 2 ****/
    .home .wrapper + .wrapper .listArticles .itemArticle { 
        margin-left:2%; 
        width:calc(91%/5);
    }
    .home .wrapper + .wrapper .listArticles .itemArticle:nth-child(5n+1) { margin-left:0; }
}

@media screen and (min-width:1590px){    
    /**** ARTICLES DANS LE WRAPPER 1 ****/
    .home .wrapper:first-child .listArticles .itemArticle { margin-left:1%; }
    .home .wrapper:first-child .listArticles .itemArticle:nth-child( 4n+1) { margin-left:0; }

    /**** LISTE DES ARTICLES DANS LE WRAPPER 2 ****/
    .home .wrapper + .wrapper .listArticles .itemArticle {
        margin-left:1%; 
        width:calc(95%/5);
    }
    .home .wrapper + .wrapper .listArticles .itemArticle:nth-child(5n+1) { margin-left:0; }
}



/* ------------------------------------------- *
* =MISC
* -------------------------------------------- */
#screendim {
    background:black;
    color:white;
    padding:5px 10px;
}