@import url('/css/normalize.css');

@import url('/css/layout.css');
@import url('/css/data-menu.css');


body {
    padding-top: 70px;
    font-weight: 400;
    overflow: initial;
    background: #f6f6f6;
    transition:padding 0.2s ease-in-out;
    min-height:100%;
    font-family:roboto;
}

.menu {
    position: fixed;
    z-index:2000;
}
    .menu ul li.langue a strong {
        display:block;
        line-height:40px;
        font-size:12px;
        font-weight:400;
        text-align:center;
        color:#FFF;
    }
    .menu ul li.icon-reset a span {
        background-position: -200px -0px;
    }


    .bande{
        background:url(/images/degrade-blanc.png) bottom left repeat-x;
        min-height:150px;
        padding:30px 0 0px;
    }
    .bande:after{
        background:url(/images/wave.svg) repeat;
        content:"";
        display:block;
        width:100%;
        height:40px;
        margin-top:30px;
    }
    
    h2{
        font-family:"Baloo 2", sans-serif;
        font-size:24px;
        line-height:24px;
        color:#572977;
        display:block;
        padding:25px 30px 15px;
    }
    @media screen and (min-width: 768px) {
        h2{
            font-size:36px;
            line-height:36px;
            padding:45px 30px 15px;
        }
            
    }
    @media screen and (min-width: 1024px) {
        h2{
            font-size:48px;
            line-height:48px;
            padding:45px 30px 15px;
        }
        
    }
    .max-width{
        max-width:400px;
        margin:0 auto;
    }
    .bande ul{
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;    
    }
    .bande li{
        padding:10px;
        width:100%;
        max-width:400px
    }
    
    @media screen and (min-width: 768px) {
        .bande li{
            padding:10px;
            max-width:400px;
            width:50%;
        }
        .max-width{
            max-width:730px;
            margin:0 auto;
        }
            
    }
    @media screen and (min-width: 1024px) {
        .bande li{
            padding:10px;
            max-width:400px;
            width:33%;
        }
        .max-width{
            max-width:980px;
            margin:0 auto;
        }
    }
    @media screen and (min-width: 1400px) {
        .bande li{
            padding:10px;
            max-width:400px;
            width:25%;
        }
        .max-width{
            max-width:1600px;
            margin:0 auto;
        }
    }
    .bande li a{
        display:block;
        padding:20px 20px 70px;
        text-decoration:none;
        color:#333;
        background:#FFF;
        border-radius:5px;
        border:1px solid #DDD;
        position:relative;
        height:100%;
    }
    ul.videos li a{
        padding:20px 20px 20px;
    }
    .bande li span{
        width: 100%;
        display:block;
        padding-top:55%;
        background-size: cover;
        background-position:center;
        border-radius:4px;
        position:relative;
    }
    .bande li span i{
        display:block;
        position:absolute;
        bottom:10px;
        right:10px;
        color:#FFF;
        font-size:18px;
        background:#572977;
        padding:5px 5px 5px 28px;
        border-radius:3px;
    }
    .bande li span i:before{
        content:"";
        display:block;
        background:url(/images/sprite-fll-2024.svg) no-repeat;
        width:20px;
        height:20px;
        position:absolute;
        background-size:150px 100px;
        background-position:0px 0;
        top:4px;
        left:4px;
    }
    .bande li b{
        font-family:"Baloo 2", "sans-serif";
        font-size:30px;
        line-height:30px;
        color:#333;
        display:block;
        margin:15px 0;
    }
    ul.videos li b{
        font-size:21px;
        line-height:24px;
        margin-bottom:0px;
    }
    ul.videos li span:before{
        content:"";
        display:block;
        background:url(/images/sprite-fll-2024.svg) no-repeat;
        top:50%;
        left:50%;
        width:80px;
        height:60px;
        margin-left:-40px;
        margin-top:-30px;
        position:absolute;
        background-size:150px 100px;
        background-position:-20px 0;
    }
    
    .bande li p{
        font-size:18px;
        line-height:24px;
        display:block;
        margin:15px 0;
    }
    .bande li strong{
        position:absolute;
        bottom:20px;
        width:100%;
        padding:0 20px;
        left:0px;
    }
    .bande li strong em{
        background-color:#572977;
        color:#FFF;
        font-size:18px;
        line-height:30px;
        font-weight: bold;
        display:block;
        text-align:center;
        padding:10px;
        border-radius:4px;
    }