@media (max-width: 768px) {
    /* Header */
    header {
        flex-direction: column;
        height: auto;
        padding: 1rem;
    }

    header a{
        height: 19vh;
    }


    .logo {
        width: 250px;
        margin-top: -5.5em;
        margin-right: 1rem;
    }

    nav ul {
        flex-direction: row;
        padding-left: 0;
        gap: 30px;
        text-align: center;
    }

    nav ul li {
        margin: 0.5rem 0;
    }

    /* Hero */
    .hero {
        height: 50vh;
    }

    .model-3d {
        width: 100%;
    }

    .text-hero {
        width: 100%;
        padding: 2rem;
        text-align: left;
    }

    .text-hero h1 {
        font-size: 3rem;
    }

    /* Sections "alldivs" */

    .alldivs {
        padding-top: 3rem;
    }


    .titre-descript{
        gap: 0.8rem;
    }


    #canvas3d{
        border-radius: 0px;
    }

    .alldivs h2 {
        font-size: 1.4rem;
        width: 100%;
        padding: 1rem;
        text-align: left;
        margin-bottom: 0;
    }

    .single-bat {
        flex-direction: column;
        border-radius: 0px;
    }

    .left, .right {
        width: 100%;
    }

    .left {
        min-height: 50vh;
    }

    .right {
        padding: 2rem;
    }

    .right h1 {
        font-size: 5rem;
        margin: 0%;
        margin-top: 2rem;
        width: 100%;
    }

    .right div{
        display: flex;
        flex-direction: column;
    }

    .right div p, .right p {
        font-size: 1rem;
        padding-bottom: 1rem;
        width: 100%;
        text-align: left;
        margin-top: 0;
        margin-left: 0;
    }

    .p-1{
        color: red;
    }

    /* Carousel */
    .carroussel {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .single-carousel {
        width: 100%;
        height: auto;
    }

    .single-carousel .photo {
        width: 30%;
        margin: 0 auto;
    }

    .info {
        width: 100%;
        text-align: center;
        padding: 1rem;
    }

    /* Footer */
    footer {
        flex-direction: row;
        text-align: center;
    }

    footer ul {
        padding-left: 1rem;
        text-align: center;
        gap: 18px;
    }


    footer a{
        font-size: 0.9rem;
    }

    .logo-heff {
        width: 124px;
        margin-left: 1.4rem;
    }

    /* Maps */

    .maps{
        min-height: 18vh;
        width: 100%;
        margin-top: 3rem;
    }

    .maps img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .maps a{
        width: 2.2rem;
    }

    .maps .maritime {
        top: -6%;
        left: 12%;
    }

    .maps .tour-taxis {
        top: 2%;
        left: 17%;
    }

    .maps .resto {
        top: 35%;
        left: 65%;
    }

    .maps .gare-nord {
        top: 32%;
        left: 88%;
    }

    .maps .bar {
        top: 42%;
        left: 17%;
    }

    .maps .heff {
        top: 12%;
        left: 31%;
    }
    
    
}