/* public/menu.css */

.police_titre
{
    color: #e8c5c0;
}

.boutonArticle
{
    border-bottom: 3px black double;
}
.boutonNouvelArticle
{
    font-size: 90%;
}
/*.boutonArticle span
{
    padding: 2px;
    border: 4px black groove;
}*/

.sectionActu
{
    /*float: left;*/
    display: flex;
    /*justify-content: space-between;*/
}

header h3
{
    text-align: center;
}

/*.articleActu > *:not(.boutonArticle)*/
.articleActu
{
    max-width: 80%;
    margin: auto;
}

#contenu
{
    display: flex;
    justify-content: space-between;
}

#colonne1
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}

#colonne2
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    flex-direction: column;
}

#pommes
{
    position: relative;
    left: 3px;
}

#mon_blog
{
    margin: 0px 35px;
}


@media screen and (min-width: 700px)
{
    #titre
    {
        width: 630px;
        height: 171px;
        background-image: url("../mouette.png");
    }

    /*.articleActu
    {
        max-width: 80%;
    }*/

    #contenu
    {
        position: relative;
        bottom: 15px;
    }

    #colonne1, #colonne2
    {
        height: 588px;
    }

    /* pour IE, indique la bonne taille du bloc
    pour que la colonne 2 se place correctement */
    #colonne1
    {
        min-width: 310px; 
    }

    #pochette
    {
        background-image: url("../menu/pochette.png");
        width: 308px;
        height: 271px;
    }

    #fille_qui_tombe
    {
        background-image: url("../menu/fille_qui_tombe.jpg");
        width: 208px;
        height: 163px;
        margin: 5px 0px;
    }

    #canoe
    {
        background-image: url("../menu/canoe.png");
        width: 207px;
        height: 144px;
    }

    #cavalier
    {
        background-image: url("../menu/cavalier.jpg");
        width: 159px;
        height: 312px;
        position: relative;
        right: 97px;
    }

    #pommes
    {
        background-image: url("../menu/pommes.jpg");
        width: 59px;
        height: 97px;
        position: relative;
        bottom: 3px;
    }

    #sirene
    {
        background-image: url("../menu/sirene.jpg");
        width: 320px;
        height: 174px;
    }

    #mouette_ocean
    {
        background-image: url("../menu/mouette_ocean.jpg");
        width: 257px;
        height: 171px;
        margin: 5px 0px;
    }

    #blonde
    {
        background-image: url("../menu/blonde.jpg");
        width: 257px;
        height: 233px;
    }

    #hey_ho
    {
        width: 69px;
        height: 154px;
        position: relative;
        right: 401px;
        top: 107px;
    }
}

@media screen and (max-width: 699px)
{
    #titre
    {
        width: 480px;
        height: 131px;
        background-image: url("../mouette_petit.png");
        margin: auto;
    }

    .articleActu
    {
        max-width: 85%;
    }
    .sectionActu
    {
        padding-top: 20px;
    }

    #contenu
    {
        position: relative;
        bottom: 12px;
    }

    #colonne1, #colonne2
    {
        height: 447px;
    }

    /* pour IE, indique la bonne taille du bloc
    pour que la colonne 2 se place correctement */
    #colonne1
    {
        min-width: 237px;
    }

    #pochette
    {
        background-image: url("../menu/pochette_petit.png");
        width: 234px;
        height: 206px;
    }

    #fille_qui_tombe
    {
        background-image: url("../menu/fille_qui_tombe_petit.jpg");
        width: 158px;
        height: 124px;
        margin: 4px 0px;
    }

    #canoe
    {
        background-image: url("../menu/canoe_petit.png");
        width: 157px;
        height: 109px;
    }

    #cavalier
    {
        background-image: url("../menu/cavalier_petit.jpg");
        width: 121px;
        height: 237px;
        position: relative;
        right: 73px;
    }

    #pommes
    {
        background-image: url("../menu/pommes_petit.jpg");
        width: 45px;
        height: 74px;
        position: relative;
        bottom: 2px;
    }

    #sirene
    {
        background-image: url("../menu/sirene_petit.jpg");
        width: 243px;
        height: 132px;
    }

    #mouette_ocean
    {
        background-image: url("../menu/mouette_ocean_petit.jpg");
        width: 195px;
        height: 130px;
        margin: 4px 0px;
    }

    #blonde
    {
        background-image: url("../menu/blonde_petit.jpg");
        width: 195px;
        height: 177px;
    }

    #hey_ho
    {
        width: 53px;
        height: 117px;
        position: relative;
        right: 306px;
        top: 82px;
    }
}

@media screen and (max-width: 479px)
{
    #titre
    {
        width: 320px;
        height: 88px;
        background-image: url("../mouette_mini.png");
        margin: auto;
    }

    .articleActu
    {
        max-width: 90%;
    }

    #contenu
    {
        position: relative;
        bottom: 8px;
    }

    #colonne1, #colonne2
    {
        height: 298px;
    }

    /* pour IE, indique la bonne taille du bloc
    pour que la colonne 2 se place correctement */
    #colonne1
    {
        min-width: 158px;
    }

    #pochette
    {
        background-image: url("../menu/pochette_mini.png");
        width: 156px;
        height: 137px;
    }

    #fille_qui_tombe
    {
        background-image: url("../menu/fille_qui_tombe_mini.jpg");
        width: 105px;
        height: 82px;
        margin: 3px 0px;
    }

    #canoe
    {
        background-image: url("../menu/canoe_mini.png");
        width: 105px;
        height: 73px;
    }

    #cavalier
    {
        background-image: url("../menu/cavalier_mini.jpg");
        width: 80px;
        height: 158px;
        position: relative;
        right: 48px;
    }

    #pommes
    {
        background-image: url("../menu/pommes_mini.jpg");
        width: 30px;
        height: 49px;
        position: relative;
        bottom: 2px;
        left: 2px;
    }

    #sirene
    {
        background-image: url("../menu/sirene_mini.jpg");
        width: 162px;
        height: 88px;
    }

    #mouette_ocean
    {
        background-image: url("../menu/mouette_ocean_mini.jpg");
        width: 130px;
        height: 86px;
        margin: 3px 0px;
    }

    #blonde
    {
        background-image: url("../menu/blonde_mini.jpg");
        width: 130px;
        height: 118px;
    }

    #hey_ho
    {
        width: 36px;
        height: 77px;
        position: relative;
        right: 204px;
        top: 56px;
    }
}