/*
cyan :
    Code hexa : #80FEED
    RGB : 128, 254, 237
    CMJN : 45, 0, 20, 0

rouge bordeaux :
    Code hexa : #770000
    RGB : 119, 0, 0
    CMJN : 31, 100, 100, 45
*/

.bloc{
    display: flex;
    justify-content: center;
    align-items: center;
}

.rouge{
    color: #770000;
}

.illu-left, .illu-right{
    height: 400px;
}

.illu-right{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.illu-left{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.explication{
    display: flex;
    flex-direction: row;
    margin-bottom: 100px;
    box-shadow: 0px 2px 5px black;
    background-color: white;
}

#qui{
    margin-left: 50px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-right: 50px;
}

#pourquoi{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-right: 50px;
    padding-left: 50px;
}

.bloc-text{
    font-family: "greycliff-cf", "arial", "sans-serif";
    margin-inline: 2%;
}

.sous-titre{
    font-size: 2em;
    text-align: center;
    margin-block: 50px;
    color: #770000;
}

@media (max-width: 1300px){

    #pourquoi{
        margin-right: 0px;
    }

    #qui{
        margin-left: 0px;
    }

    .sous-titre{
        font-size: 1.5em;
        text-align: center;
        margin-block: 50px;
        color: #770000;
    }

    .text{
        font-size: 1.1em !important;
    }

}

@media (max-width: 800px){

    .bloc-text{
        background-color: white;
        box-shadow: 0px 2px 5px black;
        border-radius: 5px;
        padding-inline: 50px;
        padding-bottom: 40px;
        margin-inline: 20px;
        z-index: 1;

    }

    .sous-titre{
        font-size: 1.2em;
        text-align: center;
        margin-bottom: 20px;
        color: #770000;
    }

    #qui, #pourquoi{
        margin-inline: 0px;
        padding-inline: 0px;
    }

    #pourquoi{
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 50px;
    }

}