.acceuiltexte {
    position: relative;
    z-index: 3;
}

#acceuil h1.colorPhink {
    margin-bottom: 1%;
}

.acceuiltexte img#logo {
    width: 295px;
    margin-top: -163px;
    margin-bottom: 97px;
    height: 77px;
    background-color: #37363b;
}

.acceuiltexte h1 {
    font-size: 4vw;
    margin-bottom: 5%;
}
.acceuiltexte p.espace {
    color: white;
    margin-bottom: 4%;
    font-size: large;
    font-weight: bold;
}

#acceuil .acceuiltexte .logo {
    width: 200px;
    padding: 0.4%;
    margin-bottom: 4%;
}

#acceuil .acceuiltexte .logo h3 {
    color: var(--colorViolet);
    font-weight: bold;
}

#acceuil .acceuiltexte .logo p {
    color: white;
    margin: 0px;
}

#acceuiltexte h4 {
    font-size: 1.5vw;
    color: white;
}

.bgBtnSaumon,
.bgBtnblack,
.bgLancer {
    font-size: 1.4vw;
    padding: 1%;
}

a.bgLancer {
    text-decoration: none;
}

.bgBtnSaumon {
    background-color: var(--colorSaumon);
}

.bgBtnSaumon:hover,
img#imgFleche:hover {
    color: #dfc4c4;
    background-color: black;
    border: 1px solid var(--colorSaumon);
}

.bgBtnblack {
    background-color: black;
    border: 1px solid var(--colorSaumon);
    color: var(--colorSaumon);
    margin-left: 1%;
}

.bgBtnblack:hover {
    background-color: var(--colorSaumon);
    border: 3px solid black;
    color: black;
    margin-left: 1%;
}

.bgLancer {
    color: var(--colorSaumon);
}

#flecheAcceuil {
    width: 19px;
}

.d-flex .mt-4 {
    z-index: 9000;
}

.modal-backdrop.show {
    opacity: 0;
    z-index: inherit;
}

.modal-backdrop .fade .show {
    z-index: inherit;
}

video {
    width: 100%;
}

@media only screen and (max-width: 1024px) {
    .acceuiltexte {
        position: relative;
        z-index: 3;
    }

    #acceuil .acceuiltexte .logo h3 {
        color: var(--colorViolet);
        font-size: 7vw;
    }

    #acceuil .acceuiltexte .logo p {
        color: white;
        margin: 0px;
        font-size: 3vw;
    }

    #acceuil h4 {
        font-size: 3vw;
    }
    #acceuil .acceuiltexte .logo p {
        color: white;
        margin: 0px;
        font-size: 3vw;
    }
    #acceuil :where( .bgBtnSaumon , .bgBtnblack, .bgLancer )  {
        font-size: 3vw;
    }
}
@media only screen and (max-width: 768px) {

    .acceuiltexte {
        padding-top: 0%;
    }
    #acceuil h4 {
        font-size: 4vw;
    }
}

@media only screen and (max-width: 425px) {
    .acceuiltexte {
        position: relative;
        top: 0px;
        z-index: 3;
    }

    .bgBtnSaumon,
    .bgBtnblack,
    .bgLancer {
        font-size: 4vw;
        padding: 1%;
    }

    .acceuiltexte img#logo {
        width: 268px;
        margin-top: -13px;
        margin-bottom: 97px;
        height: 77px;
        background-color: #37363b;
    }

}



@media only screen and (max-width: 425px) {
    #acceuil {
        width: 100%;
        padding: 0px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        height: 100vh;
    }

    .acceuiltexte {
        padding-top: 19%;
    }
    #acceuil .acceuiltexte .logo p {
        color: white;
        margin: 0px;
        font-size: auto;
    }
    #acceuil h4 {
        font-size: auto;
        font-weight: normal;
    }

    .acceuiltexte .logo {
        width: 268px;
        margin-top: -13px;
        margin-bottom: 97px;
        height: 77px;
        background-color: #37363b;
    }

    #acceuil .acceuiltexte .logo h3 {
        color: var(--colorViolet);
        font-size: auto;
    }

    #acceuil .acceuiltexte .logo {
        border: solid 1px white;
        width: fit-content;
        padding: 0.4%;
    }

    .acceuiltexte h1 {
        padding-top: 28%;
        font-size: xx-large;
    }

    #acceuil h4 {
        font-size: auto;
    }

    #acceuil .d-flex {
        flex-direction: column;
    }

    #acceuil a.btn, #acceuil a.bgLancer {
        width: 100%;
        font-size: medium;
    }
    #acceuil a.btn.bgBtnblack {
        margin-top: 5%;
        margin-bottom: 5%;
    }
}


@media only screen and (max-width: 320px) {
    .acceuiltexte {
        position: relative;
        top: 0px;
        z-index: 3;
    }

    .bgBtnSaumon,
    .bgBtnblack,
    .bgLancer {
        font-size: 3vw;
        padding: 1%;
    }

    .acceuiltexte img#logo {
        width: 268px;
        margin-top: -13px;
        margin-bottom: 97px;
        height: 77px;
        background-color: #37363b;
    }

}