/*

LABORATOIRE CHRONO-ENVIRONNEMENT

TYPE DE FICHIER : nouveau

*/

/* bandeau du sommaire */
div#bandeau-sommaire{
    position:relative;
    background-repeat:no-repeat;
    background-attachment:scroll;
    background-position:center;
    background-size:cover;
}
div#bandeau-sommaire > div#texte-sommaire{
    position:absolute;
    right:15px;
    bottom:15px;
    padding:10px;
    text-align:center;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
    font-weight:normal;
    font-size:1em;
    line-height:1.2;
    font-style:italic;
    background:rgba(0,0,0,0.5) no-repeat scroll 0 0;
    cursor:default;
}
/* les liens actualités et diaporama */
div#bandeau-sommaire > div#sommaire-liens{
    position:absolute;
    top:0;
    left:0;
    margin:5px;
}
div#bandeau-sommaire > div#sommaire-liens > a.sommaire-lien{
    background:rgba(255,255,255,0.4) no-repeat scroll 0 0;
    color:#000;
    padding:1px 5px;
    border-radius:20px;
    opacity:1;
}
div#bandeau-sommaire > div#sommaire-liens > a.sommaire-lien:hover{
    background:rgba(255,255,255,0.7) no-repeat scroll 0 0;
}
/* liens facebook */
div#bandeau-sommaire > div#reseaux-sociaux{
    position:absolute;
    bottom:15px;
    left:15px;
    display:flex;
}
div#bandeau-sommaire > div#reseaux-sociaux a{
    display:block;
    margin:0 10px 0 0;
}
div#bandeau-sommaire > div#reseaux-sociaux img{
    height:35px;
    width:auto;
}

/* bloc sommaire */
div#sommaire{
    position:relative;
    height:calc(432px + 200px);
    overflow:hidden;
}

/* bloc diapos */
div#sommaire > div#diapo{
    position:absolute;
    top:0;
    left:0;
    width:768px;
    height:432px;
    background:transparent url("../img/sommaire/defaut.jpg") no-repeat scroll center center / cover;
}
div#sommaire > div#diapo > div#diapos{
    position:relative;
    width:100%;
    height:100%;
}
div#sommaire > div#diapo > div#diapos > div.diapo{
    opacity:0;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
}
div#sommaire > div#diapo > div#diapos > div.diapo.active{
    opacity:1;
    z-index:20;
}
div#sommaire > div#diapo > div#diapos > div.diapo p{
    line-height:1.3;
    color:#fff;
}
div#sommaire > div#diapo > div#diapos > div.diapo > p.aujourdhui{
    display:block;
    margin:0;
    padding:10px;
    background:rgba(0,0,0,0.5) none no-repeat scroll 0 0;
    font-size:150%;
    font-weight:bold;
    position:absolute;
    top:15px;
    right:15px;
    color:#ff0;
    cursor:default;
}
div#sommaire > div#diapo > div#diapos > div.diapo > div.div_a{
    display:block;
    background:rgba(0,0,0,0.5) none no-repeat scroll 0 0;
    position:absolute;
    bottom:15px;
    right:15px;
    width:70%;
}
div#sommaire > div#diapo > div#diapos > div.diapo > div.div_a > a.diapo{
    display:block;
    padding:15px;
    color:#fff;
    text-decoration:none;
}
div#sommaire > div#diapo > div#diapos > div.diapo > div.div_a > a.diapo > h2.rubrique{
    font-size:100%;
    font-weight:bold;
    margin:0 0 0.5em 0;
    line-height:1.2;
}
div#sommaire > div#diapo > div#diapos > div.diapo > div.div_a > a.diapo > h3.titre{
    font-size:150%;
    font-weight:bold;
    margin:0;
    line-height:1.2;
}
div#sommaire > div#diapo > div#diapos > div.diapo > div.div_a > a.diapo > p.horaire{
    color:#ff0;
    font-size:100%;
    font-weight:bold;
    margin:0.5em 0 0;
    line-height:1.2;
}
div#sommaire > div#diapo > div#diapos > div.diapo > div.div_a > a.diapo > p.descriptif{
    font-size:100%;
    font-weight:bold;
    margin:0.5em 0 0;
    line-height:1.3;
}
/* les boutons */
div#sommaire > div#diapo > div#bouton-sommaire{
    position:absolute;
    z-index:100;
    cursor:pointer;
    background-image:url("../img/boutons/fleches_bouton.png");
    background-size:100px auto;
    opacity:0.4;
    height:50px;
    width:50px;
    top:calc(50% - 50px);
}
div#sommaire > div#diapo > div#bouton-sommaire:hover{
    opacity:0.7;
}
div#sommaire > div#diapo > div#bouton-sommaire.prev{
    background-position:0 0;
    left:15px;
}
div#sommaire > div#diapo > div#bouton-sommaire.next{
    background-position:-50px 0;
    right:15px;
}
/* le compteur */
div#sommaire > div#diapo > div#compteur{
    position:absolute;
    bottom:15px;
    left:15px;
    padding:5px;
    font-size:100%;
    font-weight:bold;
    color:#fff;
    background:rgba(0,0,0,0.5) none no-repeat scroll 0 0;
    z-index:100;
    cursor:default;
    display:none;
}

/* bloc à noter */
div#sommaire > div#a-noter{
    position:absolute;
    top:0;
    right:0;
    width:182px;
    height:calc(432px + 200px - 30px);
    padding:15px;
    overflow:hidden;
}
div#sommaire > div#a-noter > div.a-noter.bloc > h2{
    color:#fff;
    background:#333 no-repeat scroll 0 0;
    margin:0;
    padding:6px;
    font-family:"OpenSansSemiBold",Arial,Helvetica,sans-serif;
    font-size:14px;
}
div#sommaire > div#a-noter > div.a-noter.bloc > h2 > a{
    color:#fff;
    font-weight:bold;
}
div#sommaire > div#a-noter > div.a-noter.bloc div.content.article{
    border-bottom:1px solid #000;
    padding:10px 3px;
}
div#sommaire > div#a-noter > div.a-noter.bloc div.content.article.last{
    border-bottom:0;
}
div#sommaire > div#a-noter > div.a-noter.bloc div.content.article a h3{
    font-size:12.8px;
    font-weight:bold;
}
div#sommaire > div#a-noter > div.a-noter.bloc div.content.article a div.intro{
    padding:3px 0 0;
    font-size:12px;
    line-height:1.2em;
}
div#sommaire > div#a-noter > div.a-noter.bloc div.content.article a div.intro p{
    margin:0;
    font-size:12px;
    line-height:1.2em;
}

/* bloc à découvrir */
div#sommaire > div#a-decouvrir{
    position:absolute;
    bottom:0;
    left:0;
    width:768px;
    height:200px;
}
div#sommaire > div#a-decouvrir > div#a-decouvrir-titre{
    position:absolute;
    top:1px;
    left:0;
    transform:translate(-198px) rotate(-90deg);
    transform-origin:right top 0;
    width:186px;
    height:14px;
    color:#fff;
    background-color:#333;
    font-family:"OpenSansSemiBold",Arial,Helvetica,sans-serif;
    font-size:14px;
    margin:0;
    padding:6px;
    font-weight:bold;
    cursor:default;
}
div#sommaire > div#a-decouvrir > div#a-decouvrir-items{
    position:absolute;
    top:0;
    left:26px;
    width:742px;
    display:flex;
}
div#sommaire > div#a-decouvrir > div#a-decouvrir-items > a.a-decouvrir-item{
    position:relative;
    display:block;
    margin:1px 0 1px 1px;
    width:184px;
}
div#sommaire > div#a-decouvrir > div#a-decouvrir-items > a.a-decouvrir-item:first-child,
div#sommaire > div#a-decouvrir > div#a-decouvrir-items > a.a-decouvrir-item:last-child{
    width:185px;
}
div#sommaire > div#a-decouvrir > div#a-decouvrir-items > a.a-decouvrir-item > div.a-decouvrir-img{
    height:139px;
    background-repeat:no-repeat;
    background-attachment:scroll;
    background-position:center;
    background-size:cover;
}
div#sommaire > div#a-decouvrir > div#a-decouvrir-items > a.a-decouvrir-item > div.a-decouvrir-date{
    position:absolute;
    top:10px;
    right:10px;
    background:rgba(0,0,0,0.5) none no-repeat scroll 0 0;
    color:#ff0;
    padding:3px;
    font-size:12px;
    font-weight:bold;
    line-height:1.2;
    text-align:right;
}
div#sommaire > div#a-decouvrir > div#a-decouvrir-items > a.a-decouvrir-item > div.a-decouvrir-titre{
    height:53px;
    background:linear-gradient(to bottom, #dce6ff 0%, #fff 85%, #fff 100%) no-repeat scroll 0 0;
    padding:3px;
    font-size:12.8px;
    font-weight:bold;
    line-height:1.3;
}