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

#Octofocus{
    font-size: 4em;
    color: black;
    font-weight:500;
    margin: 20px;
}

#debut{
    flex-direction: column  !important;
    height: auto !important;
}

#slogan{
    font-size: 2.5em;
    font-weight: 100;
    color: black;
    margin: 20px;
}

#logo-comp{
    height: 200px;
    margin-top: 10px;
}

.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;
    align-items: center;
    margin-bottom: 100px;
    box-shadow: 0px 2px 5px black;
    background-color: white;
}

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

#que{
    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: 50px;
}

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

.text{
    font-size: 1.5em;
    text-align: start;
}

.rouge{
    color: #770000;
}

@media (max-width: 1300px){

    #debut{
        padding: 10px !important;
    }

    #que{
        margin-right: 0px;
        border-radius: 0px;
    }

    #qui, #comment{
        margin-left: 0px;
        border-radius: 0px;
    }

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

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

    #Octofocus{
        transition: 0.5s;
        font-size: 2em !important;
        margin: 10px;
    }

    #slogan{
        transition: 0.5s;
        font-size: 1.5em !important;
        margin: 10px;
    }

    #logo-comp{
        transition: 0.5s;
        height: 100px;
        margin-top: 5px;
    }

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

@media (max-width: 1060px){
    .illu-left, .illu-right{
        height: 250px;
    }
    
    .sous-titre{
        font-size: 1.3em;
        margin-bottom: 25px;
    }

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

@media (max-width: 940px){
    .illu-left, .illu-right{
        height: 200px;
    }
    
    .sous-titre{
        font-size: 1.2em;
        margin-block: 25px;
    }

    #qui, #comment{
        padding-right: 0px;
    }
    
    #que{
        padding-left: 0px;
    }

    .text{
        font-size: 0.9em !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;
        margin-top: 50px;
        color: #770000;
    }

    .explication{
        background: none;
        margin-inline: 0px;
        padding-inline: 0px;
    }

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

    #comment{
        margin-top: -80px;
        margin-bottom: 50px;
    }

    #qui, #que, #comment{
        padding-inline: 0px;

    }

}