/* public/discographie.css */

.police_titre
{
    color: #c9a068;
}

aside
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 80%;
    font-family: 'Monospace';
    /*margin-right: 10px;*/
    /*position: absolute;*/
    position: relative;
    bottom: 30px;
}

aside div
{
    position: absolute;
}

#bouton_chronologie
{
    width: 200px;
    text-align: center;
    font-size: large;
    font-weight: bold;
    /*text-decoration: underline;*/
    /*border: 1px red solid;*/
    margin: 0px;
    /*position: relative;
    bottom: 45px;*/
}

#chronologie
{
    width: 200px;
    font-weight: bold;
    /*padding: 5px;*/
    display: none;
    z-index: 1; /* placer le menu déroulant au dessus */
    /*background-color: #9fa8d0;*/
    background-color: #a4afd4;
    border: 2px #3d4c9d solid;
}

#chronologie p
{
    margin: 8px;
}

#chronologie p a:visited
{
    color: blue;
}
#chronologie p a:hover
{
    color: black;
}

.linkChrono
{
    text-decoration: none;
}
.linkChrono:hover
{
    text-decoration: underline;
}
.noLinkChrono
{
    text-decoration: none;
    color: black;
}

/* PC uniquement, pour les smartphones prévoir un clic
=> :checked et une checkbox
=> ou la balise select qui crée un menu déroulant */
aside:hover #chronologie
{
    display: block;
}

section
{
    /*border: 1px red solid;*/
}
.flexArticles
{
    /*display: flex;*/
}

h3
{
    /*margin-top: 45px;*/
}

form p
{
    margin: 0px;
}

input
{
    margin: 2px 0;
}

.boutonAlbum
{
    margin-top: 45px;
    padding-bottom: 20px;
    border-bottom: 1px black solid;
}
.boutonAlbum a
{
    padding: 2px;
    border: 4px black groove;
}

#articles
{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: flex-end;
}

article
{
	margin: 5px 0px;
    width: 32%;
    /*min-width: 300px;*/
}
.articleAvecEditeur
{
    width: 100%;
}

.vignette
{
    width: 100%;
}

figure
{
	margin: 0px;
	/*display: inline-block;*/
}

figcaption
{
	margin: 2px;
	color: #666;
	font-size: small;
	font-weight: bold;
	text-align: center;
}

a
{
	display: inline-block;
    /*border: 2px white solid;*/
}

.articleSansEditeur a
{
    border: 2px white solid;
}
.articleSansEditeur a:hover
{
	border: 2px blue solid;
}

a:hover figure figcaption
{
	text-decoration: underline;
}

.articleSansEditeur p
{
    /*border: 1px black solid;*/
    text-align: center;
    margin-top: 0px;
}

.articleSansEditeur img
{
    vertical-align: middle;
}

/* image dans le formulaire */
.imageFormulaire
{
    float: right;
    max-width: 25%;
}

/* page dédiée à un album */
#albumHTML
{
    width: 100%;
}
.linkAlbumHTML
{
    color: blue;
}


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

    #contenu
    {
    	/*position: relative;*/
        /*bottom: 35px;*/
    }

    #albumHTML
    {
        /* annuler le positionnement du contenu */
        margin-top: 55px;
    }
}

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

    #contenu
    {
    	/*position: relative;
        bottom: 24px;*/
    }

    #albumHTML
    {
        /* annuler le positionnement du contenu */
        margin-top: 42px;
    }
    article
    {
        width: 40%;
    }
}

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

    #multicolonnes
    {
        flex-direction: column;
    }

    aside
    {
        width: 320px;
    }

    #bouton_chronologie
    {
        width: 130px;
        font-size: initial; /* 150% est plus petit que "normal" */
        padding-top: 5px;
    }

    #chronologie
    {
        /*display: flex;*/
    }

    #chronologie p
    {
        /*max-width: 80px;*/
        margin: 5px;
    }

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

    #albumHTML
    {
        /* annuler le positionnement du contenu */
        margin-top: 32px;
    }
    article
    {
        width: 48%;
    }
}