.main-section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.nav-bar a.active {
    border-bottom:  solid 2px rgb(205, 124, 43);
    position: relative;
}
.nav-bar a.active::after{
    border-color: transparent transparent rgb(205, 124, 43) transparent; /* Couleur du triangle */
} 

/* html inspi: https://www.lalibrairie.com/ */

.clicable-box {
    width: 100%;
    height: 200px;
    /* https://getcssscan.com/css-box-shadow-examples */
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: flex;
}

.clicable-box:hover {
    cursor: pointer;
}

.image-container {
    width: 20%;
    height: 200px;
    padding: 20px; 

}

.image-container img {
    object-fit: contain;
    width: auto;
    height: 100%;
}

.text-container {
    padding: 20px;
}

.text-container h2 {
    font-size: 2em;
}

/* % et em Ces 2 unités sont des unités relatives qui permettent de définir la taille de la police par rapport à la taille du parent. */

.text-container p {
    font-size: 1em;
}

@media screen and (max-width: 700px) { 
    .contain {
        margin-right: 10px;
        margin-left: 10px;
    }

    .image-container {
        width:  30%;
    }
}