/* public/discographie.css */

.police_titre
{
    color: #c9a068;
}

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

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

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: 13px 0 0 0;
}

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

#chronologie p
{
    margin: 8px;
}

/* 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;*/
}

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;
}

article
{
	margin: 5px 0px;
}

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

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

a
{
	
	display: inline-block;
}

article a:hover
{
	border: 2px blue solid;
}


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

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

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

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

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

@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;
    }

    #chronologie
    {
        display: flex;

    }

    #chronologie p
    {
        max-width: 80px;
        margin: 2px;
    }

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