h1 {
    display: flex;
    justify-content: center;
}

#header {
    z-index: 50;
}
body {
    background-color: white;
}

main{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: black;
}

#tout {
    display: flex;

}
#d {
    width: 35%;
    display: flex;
    flex-direction: column;
}

#te {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#aligne img {
    height: auto;   /* L’image prend 50% de la hauteur du texte */
    width: 100%;
    object-fit: contain;

}

#aligne {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}


p {
    text-align: center;
}
#g {
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

#g p1 {
    width: 75%;

}

#g #p11 {
    height: 21%;
}

#g img {
    border-top-left-radius: 10%;
    height: auto;
    width: 100%;
}

#deux {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

#sta {
    width: 80%;
    padding: 1.2rem 0;
    border-radius: 25%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
}

#ill {
    width: auto;
    height: 100%;
}
#sta p {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bor {
    height: 5vh;
    width: 100%;
}

.disp {
    display: flex;
    min-height: 40vh;
}

.desc {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.p2 h2 {
    padding-bottom: 2px;
}


.annim {
    width: 60%;
    height: 100%;
}

.annim model-viewer {
    width: 100%;
    height: 100%;
}


#p3 {
    display:flex;

}

#ti3 {
    width:25%;
    padding-top: 2vh;
    color: white;
    display: flex;
    justify-content: center;
}


#av {
    width: 75%;

    

}

#av h3 {

    padding-bottom: 2vh;

}

#p4 {
    display: flex;
    flex-direction: column;
}

#li {
    height: 5vw;
    background-color: transparent;
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border-radius: 20%;
    position: absolute;
    top: 10%;
    z-index: 2;

}
#li p{
    text-align: center;
    width: 80%;
    font-size: 1.3rem;

}
#ba {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 60vw;
    min-height: 5vw;
    background-image: url(fleur.webp);
    background-size: cover;
    background-position: center;
    z-index: 1;
}

#suiv {
    display: flex;
    justify-content: space-between;
}

#suiv a {
  color: rgb(0, 0, 0);
  text-decoration: underline;
  text-decoration-color: rgb(0, 0, 0);
  font-size: 1.7rem;


}

/* Le bandeau est dans l’image, à 15% du bas */
#ban {
    height: auto;
    width: 100%;
    background-color: white;
    overflow: hidden;

}

#ban .row {
    
    white-space: nowrap;
    animation: slide 12s linear infinite;
}

#ban .row:nth-child(2) {
    animation-delay: -3s;
}

@keyframes slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 768px) {

    #deux {
        margin-top: 11vh;
    }

    h1 {
        text-align: center;
    }

    #tout {
        flex-direction: column;
        align-items: center;
        width: 100%;
        
    }

    #d, #g {
        width: 100%;
    }

#suiv {
    flex-direction: column;
}

    #aligne {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 3vw;
        width: 100%;
        justify-content: center;
    }

    #aligne img {
        width: 35%;
        height: auto;
    }

    #te {
        width: 55%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #sta {
        width: 90%;
        height: auto;
        top: -10%;
        border-radius: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        gap: 2vw;
        flex-wrap: nowrap;
    }

    #deux {
        height: auto;
        flex-direction: column;
        align-items: center;
    }

    #ill {
        width: 90%;
    }

    .disp {
        flex-direction: column;
        height: auto;
        gap: 3vh;
    }

    .desc, .annim {
        width: 100%;
        text-align: center;
    }

    .annim model-viewer {
        height: 50vh;
    }

    #p3 {
        flex-direction: column;
    }

    #ti3 {
        width: 100%;
        text-align: center;
    }

    #av {
        width: 100%;
    }


    #ba {
        height: 120vw;
    }

    #li {
        width: 90%;
        height: auto;
        top: 5%;
        border-radius: 20px;
    }

}