.articl1 {
    z-index: 20;
    overflow: hidden;
        }

    .contart1 {
        padding: 6px;
        background-color: rgba(255, 255, 255, 0.5);
        }


    .art1tit {
            display: block;
            font-family: 'Mali', cursive;
            font-weight: 300;
            font-style:normal;
            font-size: 24px;
            line-height: 24px;
            color: #0a0203;
            width: 50%;
            padding: 24px 0 0 0;
            }

    .art1sti {    
            display: block;
            font-family: 'Quicksand', sans-serif;
            font-size: 20px;
            line-height: 24px;
            color: #f47300;
            width: 50%;
            text-align: left;
            padding: 12px 0 0 0;
            }

        @media screen and (max-width: 760px) {
            .art1tit {
                padding: 24px 0 0 0;
                font-size: 32px;
                    }

            .art1sti {
                padding: 0 0 12px 0;
                font-size: 27px;
                    }
            }

        .art1sti img {
            margin: 0 0 0 8px;
                }

    .art1txt {        
        font-family: 'Quicksand', sans-serif;
        font-size: 18px;
        color: #232323;
                padding: 6px 0 0 0;
            }

        .art1txt img {
                position: relative;
                float: right;
                max-height: 210px;
                top: -24px;
                padding-left: 24px;
                }

.illust2 {
        clear: both;
        position:relative;
        z-index: 1;
        height: 12em;
        padding: 0;
        overflow: hidden;
                    }

.illust2 .contenu {
        height: 100%;
        background: url('../images/illus/sureau_noir.jpg') no-repeat center center;
        border-radius: 0.25em;
        background-size: cover;
        }