@import url('https://fonts.googleapis.com/css2?family=Inter&family=Italiana&family=Source+Serif+4:opsz@8..60&display=swap');

header {
    background-color: #ffffff;
    color: black;
    font-family: 'Italiana', sans-serif;
    font-size: 55px;
    top: 0px;
    position: sticky;
    padding: 20px 10px;
    width: 375px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr 1fr;
}



    .logo {
        color: #000;
        font-family: Italiana;
        font-size: 32px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: lowercase;
    }

    body {
        background-color: #D7D7D7;
        color: black;
    }

    h1 {
        font-family: 'Italiana', sans-serif;
        font-size: 24px;
    }

    h2 {
        font-family: 'source Serif 4', serif;
        font-size: 20px;
        margin-top: 20px;
    }

    p {
        font-family: 'Source Serif 4', serif;
        margin-top: 20px;
        font-size: 18px;
    }

    menu {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        ;
    }

 .footer {
     background-color: black;
     color: white;
     font-family: 'inter', sans-serif;
     position: bottom;
     bottom: 0;
     width: 100vw;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
    text-decoration: none;
 }

 .billetterie--bouton {
    text-decoration: none;
     background-color: #000000;
     color: #ffffff;
     font-family: 'inter', sans-serif;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: center;
     text-decoration-line: white;
     width: 288px;
     height: 48px;
     border: 2px solid #ffffff;
     margin-top: 20px;
     margin-left: 40px;
 }
.sous-texte {
    text-align: center;
}
.frontpageh1 {
    text-align: center;
    font-family: 'Italiana', sans-serif;
    font-size: 24px;
    margin-top: 20px;
}
.carrousel_parent-ecrans {
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    text-align: center;

}

.carrousel_ecran {
    width: 100%;
    flex: 0 0 100%;
    scroll-snap-align: start;

}

.carrousel_ecran figure {
    margin: none;
}

.caroussel_liste-liens {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
    margin: 0;
}

.carrousel {
    position: relative;
}

.carrousel_btn {
    position: absolute;
    top: calc(100vw / 16 * 9 / 2 + 1rem);
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    border: none;
    display: grid;
    place-content: center;
    color: #fff;
}

.carrousel_btn-avant {
    left: 0;
}

.carrousel_btn-apres {
    right: 0;
}

.caroussel_liste-liens {
    display: flex;
    overflow-x: scroll;
    list-style: none;
    scroll-behavior: smooth;
    scroll-snap-type: mandatory;
    justify-content: center;
    text-align: center;
    padding: 0;
    margin: 0;
    gap: 1rem;
}

.caroussel_liste-liens li {
    scroll-snap-align: start;
}

.image {
    position: relative;
    width:"372px"; 
    height:"183px";
    flex-shrink: 0;
    z-index: -100;
}

.bouton {
    top: 1850px;
    left: 43px;
    position: absolute;
    width: 288px;
    color: #FFF;
    
    
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Italiana;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    z-index: 100;

}

.bouton__embassade {
    top: 2025px;
    left: 43px;
    position: absolute;
    width: 288px;
    color: #FFF;


    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Italiana;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    z-index: 100;

}
.bouton__taipei {
    top: 2235px;
    left: 43px;
    position: absolute;
    width: 288px;
    color: #FFF;


    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Italiana;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    z-index: 100;

}

.bouton__seoul {
        top: 2420px;
        left: 43px;
        position: absolute;
        width: 288px;
        color: #FFF;
        text-shadow: #000 10px 10px 10px;


        text-align: center;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-family: Italiana;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-decoration-line: underline;
        z-index: 100;
}

.bouton__casa {
    top: 2600px;
    left: 43px;
    position: absolute;
    width: 288px;
    color: #FFF;
    text-shadow: #000 10px 10px 10px;


    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Italiana;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    z-index: 100;
}
.bouton__campus {
    top: 2780px;
    left: 43px;
    position: absolute;
    width: 288px;
    color: #FFF;


    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Italiana;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    z-index: 100;
}
.bouton__qatar {
    top: 3000px;
    left: 43px;
    position: absolute;
    width: 288px;
    color: #FFF;


    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Italiana;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    z-index: 100;
}
.bouton__rotterdam {
    top: 3150px;
    left: 43px;
    position: absolute;
    width: 288px;
    color: #FFF;


    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Italiana;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    z-index: 100;
}