/* ---------- */
/* page About */
/* ---------- */
.description {
    background-color: rgba(123, 123, 123, 0.774);
    width: 21cm;
    height: auto;
    margin: 15% auto 10%;
    border-radius: 1%;
    text-align: center;
    padding: 1% 0%;
}

.qui {
    font-size: 3em;
    color: white;
}

.maDescription {
    text-align: justify;
    display: none;
    font-family: 'Akaya Telivigala', cursive;
    font-size: 1.5em;
}

.btnTog1, .btnTog2, .btnTog3, .btnTog4, .btnTog5, .btnTog6, .btnTog7, .btnTog8 {
    background-color: rgba(85, 85, 85, 0.778);
    color: white;
    outline: none;
    cursor: pointer;
    padding: 1% 3%;
    margin: 0;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.69);
    text-decoration: none;
    font-size: 1.5em;
}

.btnTog1:hover, .btnTog2:hover, .btnTog3:hover, .btnTog4:hover, .btnTog5:hover, .btnTog6:hover, .btnTog7:hover, .btnTog8:hover {
    background-color: #777;
    color: rgb(163, 247, 255);
}

.tog1, .tog2, .tog3, .tog4, .tog5, .tog6, .tog7, .tog8 {
    background-color: #d3ffe261;
    margin-top: 0%;
    margin-bottom: 0%;
    padding: 3%;
}

.moins {
    display: none;
}

.plus,
.moins {
    float: right;
}

/* ----------------------------------------------------partie Media Screen----------------------------------------------------------------- */


@media (max-width: 1024px) {
    .description {
        width: 70%;
        margin: 25% auto 10%;
    }
    .qui{
        font-size: 2.5em;
    }
    .btnTog1, .btnTog2, .btnTog3, .btnTog4, .btnTog5, .btnTog6, .btnTog7, .btnTog8 {
        font-size: 1.2em;
    }
    .maDescription{
        font-size: 1.2em;
    }
    
}
@media (max-width: 1024px) {
    .description{
        margin: 57% auto 10%;
    }
    .qui{
        font-size: 1.5em;
    }
    .btnTog1, .btnTog2, .btnTog3, .btnTog4, .btnTog5, .btnTog6, .btnTog7, .btnTog8 {
        font-size: 0.8em;
    }
    .maDescription{
        font-size: 0.8em;
    }
}