/* Index */
.titre {
    background-color: white;
    border-radius: 10px;
    border-style: ridge;
    border-color:#492929;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
}

h2 a {
    color:#492929;
}
h2 a:visited {
    color:#492929;
}

.liste {
    background-color: white;
    border-radius: 10px;
    border-style: ridge;
    border-color:#492929;
    padding-right: 1em;
    padding-left: 1em;
}

.fiches {
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    border-style: ridge;
    border-color:#492929;
    padding: 0.5em;
}

.fiches ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}

.fiches ul article {
    max-width: 100%;
    position: relative;
    padding-top: 1em;
    padding-bottom: 1em;
}

.fiches ul article img {
    width: 100%;
    scale: 100%;
    transition: 0.2s all ease-out;
}

.fiches ul article h3 {
    position: absolute;
    bottom: 10px;
    text-align: left;
    max-width: 70%;
    opacity: 0;
    background-color: white;
    color: #492929;
    padding: 0.25em;
}

.fiches ul article button {
    position: absolute;
    z-index: 2;
    bottom: px;
    left: 100px;
    right: 0px;
    font-family: Cambria;
    background-color: white;
    text-align: right;
    color: #492929;
    border-color:#492929;
}

.fiches ul article:hover img {
    box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);
    scale: 105%;
    transition: 0.2s all ease-out;
}

.fiches ul article:hover h3 {
    transition: 0.2s all ease-out;
    scale: 100%;
    opacity: 1;
    color: #492929;
}

.navportfolio {
    background-color: white;
    border-radius: 10px;
    border-style: ridge;
    border-color:#492929;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
    justify-content: center;
    grid-area: filtres;
    width: fit-content;
    padding: 0.25em;
}


.formulaire {
    background-color: white;
    border-radius: 10px;
    border-style: ridge;
    border-color:#492929;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em 1em 0.5em 1em;
    width: 70%;
}

.menu-portfolio {
    background-color: white;
    border-radius: 10px;
    border-style: ridge;
    border-color:#492929;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em 1em 0.5em 1em;
    width: 70%;
}

.menu-portfolio ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    list-style-type: none;
}

.menu-portfolio ul a {
    color:#492929;
}

.menu-portfolio ul a:visited {
    color:#492929;
}

.filtres button {
    display: inline-block;
} 

.oeuvres .fiches {
    column-count: 2;
}

.oeuvres {
    grid-area : oeuvres;
}



.filtres {
    grid-area: filtres;
    margin-bottom: 1em;
}

.grid-container {
    display: grid;
    grid-template-areas: 'filtres'
    'oeuvres';
}


/* .show {
    display: none;
    flex-wrap: wrap;
    background-color: white;
    border-radius: 10px;
    border-color:#492929;
    border-style: double;
}
.show button{
    display: inline-flex;
    flex: 1
}

.show h2{
    display: block;
    font-size: 2em;
    flex: 5;
    text-justify: right;
    align-self: right;
}

.show article p {
    display: block;
    margin-left: 1em;
    margin-right: 1em;
}


.showImage {
    max-width: 45%;
} */

/* Fiche individuelle */

.showpage {
    background-color: white;
    border-radius: 10px;
    border-style: ridge;
    border-color:#492929;
    padding-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
}

.gauche {
    max-width: 100%;
    margin-left: 0.25em;
    margin-right: 0.25em;
    margin-top: 2em;
    }

.gauche img {
    max-width: 90%;
    }

.droite {
    max-width: 90%;
    justify-content: center;
    text-align: center;
    padding-left: 1em;
    padding-top: 1em;
}

.droite button {
    margin-top: 0.75em;
}

#tags a {
    color:#492929;
}

#tags a:visited {
    color: #492929;
}

.btn-insta {
    border-radius: 3px;
    border: none;
    margin-top: 0.75em;
    font-size: medium;
    font-weight: bold;
    background-color: orange;
}

.btn-yt {
    border-radius: 6px;
    border: none;
    background-color: red;
    margin-top: 0.75em;
    font-size: medium;
    font-weight: bold;
    
}

.bottom .fiches {
    border: none;
}

.cardcontainer {
    columns : 1;
    margin-top: 1em;
}

.imagecard img {
    max-width: 75%;
}

/* Responsive design */

@media screen and (max-width: 500px) {
    
    .fiches ul article button {
        left: 1em;
    }

    .fiches ul article h3 {
        font-size: smaller;
        opacity: 1;
        bottom: -30px;
    }

}

@media screen and (min-width: 700px) {

    .grid-container {
        display: flex;
        justify-content: space-between;
    }

    .oeuvres {
        width: 75%;
    }

    .oeuvres .fiches {
        column-count: 3;
        margin-bottom: 0;
    }

    .fiches ul article button {
        left: 2em;

    }

    .showpage {
        display: flex;
        flex-wrap: wrap;
    }

    .gauche {
    max-width: 45%;
    margin-left: 1em;
    margin-top: 2em;
    }

    .gauche img {
        max-width: 100%;
    }

    .droite {
        max-width: 45%;
        justify-content: left;
        text-align: left;
        padding-left: 1em;
    }

    .droite p {
        margin-bottom: 1em;
    }

    .bottom .fiches {
        column-count: 3;
        
    }

    .cardcontainer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin-top: 1em;
    }

    .imagecard {
        display: inline-flex;
        width: 45%;
        padding: 1em;
    }

    .imagecard p {
        text-align: left;
        padding-left: 0.25em;
    }

    .formulaire {
        position: sticky;
        top: 1em;
    }

}

@media screen and (min-width: 1200px) {
    .oeuvres {
        width: 89%;
    }
  
    .oeuvres .fiches {
        column-count: 4;
    }

    .imagecard {
        min-width: 20%;
        max-width: 50%;
    }

  .fiches ul article button {
        left: 5em;

    }

}