/***************************************************************************** 
    MISE EN PAGE
    Les actus sont des listes de défintiions
******************************************************************************/

dl{
    position: relative;
    margin: 0;
    float:left;
}

dl img{
    height: auto;
    display: block;
    width: 100%;
    margin: 0;
    padding:0;
}

dd{
    font-size:1.2em;
    margin:0;
    position:absolute;
    bottom:0;
    z-index: 100;
    opacity: 0.85;
    padding:7px;
    width:100%;
    color:#5f71b4;
    font-weight:bold;
}

dd p{
    margin:0;
    line-height: 1em;
    text-transform: uppercase;
}

dd strong{
    
    font-size: 1.4em;
    line-height: 1.2em;
}

dd em{
   font-style: normal;
   font-size: 0.8em;

}

dd a{
    color:#fff;
    text-decoration: none;
}

dt, dd div{
    padding: 7px;
}

dt .spip_logos{
    margin:0;
}

/* Premier bloc de chaque ligne */

.premier{
    margin-left: 5%;
}

/* >>> Première actu, en haut sur toute la largeur */

dl.l1{
    width: 90%;
    padding:7px;
}

dl.l1 dt{
    padding:0;
    background-color: #fff;
    display: table-cell;
    width:75%;
}
dl.l1 dd{
    position: relative;
    padding: 0 1% 1% 1%;
    width: 23%;
    display: table-cell;
    vertical-align: bottom;
    background-color: #fff;
    font-size:1.4em;
    opacity: 1;
}


/* >>> 2 actus sur une même ligne */

dl.l2{
    width: 45%;
}


/* >>> 3 actus sur la même ligne */

dl.l3{
    width: 30%;
    
}
dl.l3 dd{
    opacity:0.8;
}
dl.l3 dd div{
    color:#fff;
    height:275px;   
    padding:20px 15px;
}


dl.l3 dd em{
    display:block;
   margin-top: 15px;
   font-size: 1.4em;
   line-height: 1.2em;
}

/***************************************************************************** 
    Couleurs selon secteurs spip
******************************************************************************/


/* Par défaut */

dl.l2 dd div{
    background: #fff;
}

dl.l3 dd div{
    background: #433377;
}

/* Fond de docu */

dl.l3.secteur6 dd div{
    background: #e0007c;
}

/* 7 Bis chemin de traverse */

dl.l3.secteur9 dd div{
    background: #008aba;
}

/* Actu */

dl.l3.secteur7 dd div{
    background: #fff;
}

/* Percussions de Treffort */

dl.l3.secteur2 dd div{
    background: #d37204;
}

/* Pole ressources culture et handicap */

dl.l3.secteur4 dd div{
    background: #bd006e;
}

/* Pole ressource musique contemporaine */

dl.l3.secteur5 dd div{
    background: #b0ca44;
}

/* Ensemble 6 voix soliste */ 

dl.l3.secteur3 dd div{
    background: #e64442;
}


/***************************************************************************** 
    POUR PETIS ECRANS
******************************************************************************/

@media screen and (max-width: 900px){
    
    dl, dt, dd{
        padding:0;
    }
    
    dl.l1, dl.l2, dl.l3{
       width:98% ; 
       margin:0 1% 5px 1%;
       position: relative;
    }

    dl.l1 dd, dl.l2 dd, dl.l3 dd{
        position: absolute;
    }
    
    dl.l1{
        padding:0;
    }
    
    dl.l1 dd{
        padding:7px;
        opacity:0.9;
        width: 100%;
    }
    
    dl.l1 dt{
        width: 100%;
    }
    
}