/* CE FICHIER CSS EST EXCLUSIVEMENT POUR LA PAGE DES GAMMES
Il n'est pas nécéssaire de remettre le contenu présent dans le fichier base.css
 */

header {
    margin-bottom: 3em;
}

div > h1 {
    text-align: center;
    margin-bottom: 0.7em;
}

div > h1 {
}

div > h2 {
    position: relative;
    text-align: center;
    margin-bottom: 1em;
}

div > h2:before {
    content: "";
    position: absolute;
    left: -2em;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 4px;
    width: 3em;
    background-color: black;
    border-radius: 4px;
    display: block;
}

div > h2:after {
    content: "";
    position: absolute;
    right: -2em;
    top: 50%;
    transform: translateX(50%) translateY(-50%);
    height: 4px;
    width: 3em;
    background-color: black;
    border-radius: 4px;
    display: block;
}

section > section {
    margin-bottom: -1em;
}

section > section > article {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4em;
}

section > section > article:hover {
    transition-duration: 100ms;
    transform: scale(1.10);
}

section > section > article > figure > figcaption {
    text-align: center;
    margin-top: -1.2em;
    font-size: 1.3em;
}

section > section > article > figure > img {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    height: 10em;
    margin: 0 3em;
    margin-bottom: 2em;
}

.carousel > div > article {
    align-items: center;
}

.carousel-item > article {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.carousel-control-prev:hover {
    background: none;
    border: none;
}

.carousel-control-next:hover {
    background: none;
    border: none;
}

figure > img {
    height: 14em;
    border-radius: 20px;
}

figure > figcaption {
    text-align: center;
}

footer {
    margin-top: 5em;
}

* {
    /*border: 1px dotted red;*/
}

@media screen and (max-width: 576px) {

    .hmobile {
        margin-bottom: 1.7em;
    }

    div > h1 {
        font-size: 3em;
        margin-bottom: 0.7em;
    }


    div > h2 {
        font-size: 2.5em;
        text-align: center;
    }

    div > h2:before {
        display: none;
    }

    div > h2:after {
        display: none;
    }

    section > section > article > button {
        /*align-self: center;*/
    }

    .separateur {
        position: relative;
        margin-bottom: 2em;
    }

    .separateur:after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        background-color: black;
        width: 40%;
        height: 4px;
        border-radius: 20px;
    }

    figure {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    figure > figcaption {
        margin-top: 0.5em;
        font-size: 1.3em;
    }
}