.content { position: relative;
}
#boutonVoirPlus {
    position: absolute; font-size: 16px; right: 20px; top: 20px; padding: 10px; padding-left: 20px; padding-right: 20px; 
    border-radius: 20px; background-color: var(--main-color); text-decoration: none; color: var(--main-black);
}
#boutonVoirPlus:hover {
    right: 18px; top: 18px; font-size: 17px; background-color: var(--secondary-color);
}
#listeProjets {
    text-decoration: none; border-top: 3px var(--light-grey) solid; border-bottom: 3px var(--light-grey) solid; width: 100%; 
    height: 240px; display: inline-flex; padding-top: 20px; overflow: hidden; scroll-behavior: smooth;
}
#listeProjets #bg {
    position: relative; width: 180px; height: 200px;
}
#listeProjets #bg img {
    width: 180px; height: 200px; object-fit: cover; opacity: 30%; border-radius: 10px;
}
#listeProjets #lg {
    position: absolute; bottom: -10px; right: -10px;
}
#listeProjets #lg img {
    width: 60px; height: 60px; border-color: var(--main-color); border-radius: 10px; transition: all 0.5s ease-in-out;
}
#listeProjets a:hover #lg img {
    width: 65px; height: 65px; transition: all 0.5s ease-in-out;
}
#listeProjets a {
    position: relative; background-color: white; border-radius: 10px; text-decoration: none; display: inline; width: 180px; height: 
    200px; transition: all 0.5s ease-in-out; margin-right: 20px;
}
#listeProjets a:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); transition: all 0.5s ease-in-out;
}
#listeProjets h1 {
    position: relative; top:-200px; font-size: 20px; color: var(--main-black); margin-left: 10px; margin-top: 10px; margin-bottom: 
    10px; width: 180px;
}
#listeProjets p {
    position: relative; top: -200px; font-size: 15px; color: var(--main-black); margin-left: 10px; margin-top: 10px; margin-bottom: 
    10px; width: 160px; height: 90px;
}
#sliderleft, sliderright {
    background-color: transparent; text-align: center; font-size: 30px; line-height: 40px; color: var(--main-black); opacity: 70%; 
    transition: all 0.5s ease-in-out; margin-right: 0px; cursor: pointer;
}
#sliderleft {
    position: absolute; left: 6%; top: 190px;
}
#sliderright {
    position: absolute; right: 6%; top: 190px;
}
#listeProjets #sliderleft:hover, listeProjets #sliderright:hover {
    opacity: 100%; box-shadow: none; transition: all 0.5s ease-in-out;
}
#alhonneur {
    padding: 2%; margin-top: 30px; width: 100%; background-color: var(--main-dark-blue); color: var(--main-white); border-radius: 
    20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#alhonneur a {
    text-decoration: none;
}
#alhonneur table {
    width: 100%;
}
#alhonneur th {
    position: relative; width: 50%; text-align: left;
}
a { text-decoration: none;
}
#alhonneur h1 {
    font-family: Georgia, 'Times New Roman', Times, serif; font-size: 4vw; padding: 20px 0px; border-bottom: 2px var(--light-grey) 
    solid;
}
#alhonneur h2 {
    font-size: 2em; margin-bottom: 5px;
}
#alhonneur h3 {
    font-size: small; margin-top: 5px;
}
#alhonneur h4 {
    font-size: large;
}
#alhonneur p {
    margin-top: 50px; overflow: hidden;
}
#alhonneur #lg {
    position: absolute; top: 40px; right: 20px;
}
#alhonneur #lg img {
    width: 6vw; height: 6vw; border-radius: 15px; border-width: 5px; background-color: white; border-color: white; border-style: 
    solid;
}
#alhonneur #affiche {
    width: 100%; padding-left: 10%; padding-right: 10%;
}
#alhonneur #affiche img {
    width: 100%; height: 600px; object-fit: cover;
}
#mobile_slider {
    display: none;
}
@media only screen and (max-width: 300px) { .content { display: none;
    }
    
    .footer-dark { display: none;
    }
    #mobile_slider {
        display: block; width: 100vw; height: 100vh; overflow: hidden;
    }
    
    #mobile_slider .card {
        position: relative; width: 100vw; height: 100vh; overflow: hidden;
    }
    #mobile_slider .fluid {
        transition: top 500ms ease-out;
    }
    #mobile_slider #overlay {
        position: absolute; width: 100vw; height: 100vh; background: radial-gradient(ellipse 60% 70% at 0% 50%, white 100%, 
        transparent 200%); z-index: -1; opacity: 100%; transition: opacity 1s linear;
    }
    #mobile_slider #bg img {
        position: absolute; width: 100vw; height: 100vh; object-fit: cover; z-index: -2;
    }
    #mobile_slider h1 {
        margin: 5vh; margin-bottom: 0; font-size: 5vh;
    }
    #mobile_slider h2 {
        font-size: 3vh; margin: 5vh;
    }
    #mobile_slider p {
        margin: 5vh; margin-top: 0; font-size: 2.5vh;
    }
    #mobile_slider #lg img {
        border-radius: 15px; position: absolute; bottom: 90px; right: 20px; width: 60px; height: 60px; object-fit: cover;
    }
    #mobile_slider .favori{
        position: absolute; bottom: 80px; left: 20px; font-size: 50px;
    }
    
    #mobile_slider .favori p {
        margin: 0;
    }
}