/* général . */

#logo {
    height: auto;
}

#jeu_inner_container {
    padding-bottom: 80px !important;
    margin-bottom: 80px;
    background-image: url('./logo_best_by_pozeo.png');
    background-size: auto 80px;
    background-repeat: no-repeat;
    background-position: bottom center;
}

#jeu_inner_container {
    padding-top: 0 !important;
}

.btn {
    padding: 0.6em 2.2em;
}

/* page intro */

body.etape-introduction #header,
body.etape-introduction #bandeau {
    display: none !important;
}

body.etape-introduction {
    background: none;
	background: #000;
}

body.etape-introduction #jeu_inner_container {
    padding: 0 !important;
    margin: 0 !important;
    background: none;
}

body.etape-introduction #logo {
    display: none;
}
body.etape-introduction .img-jeu{
    padding-left: 2rem;
}
body.etape-introduction.has-bg #wrapper1{
	background: #000;
}
.etape-introduction .loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	height: calc(100vh - 42px);
    background: #000;	
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.etape-introduction .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

body.etape-introduction .video-background {
    position: fixed;
    width: 100%;
    height: 100%;
    height: calc(100vh - 28px);
    overflow: hidden;
}
body.etape-introduction footer
{
	z-index:9999;
}


body.etape-introduction .video-background video {
    min-width: 100%;
    min-height: 100%;
	min-height: calc(100vh - 28px);
    object-fit: cover;
}

body.etape-introduction .overlay-cotillons {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

body.etape-introduction .overlay-cotillons img {
    display: block;
    max-width: none;
    height: auto;
}


body.etape-introduction .container-form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: #fff;
    border-radius: 15px;
    padding-top: 50px;
    width: 450px;
    width: 80%;
}

body.etape-introduction .container-form img {
    max-width: 60vw;
    height: auto;
    position: relative;
    z-index: 3;
}


/* etape code_unique */
.jeu_presentation {
    margin-top: 1em;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

.jeu_presentation .autre {
    font-size: 25px;
    font-weight: 900;
}

.jeu_presentation .detail {
    font-size: 14px;
}

.etape-code_unique .partenaires {
    margin: auto;
    margin-top: 1em;
    margin-bottom: 3em;
    max-width: 450px;
}

.etape-code_unique .partenaires img {
    max-width: 100%;
    max-height: 50px;
}

/* gagnant */
.cmsbloc-infogagnant {
    border-top: 1px solid #FFC734;
    border-bottom: 1px solid #FFC734;
    max-width: auto;
    padding: 2em 0;
    margin: 5em auto;
}

.cmsbloc-infogagnant h1 {
    font-size: 35px;
    position: relative;
    display: inline-block;
}

.cmsbloc-infogagnant h1::after {
    content: "";
    position: absolute;
    top: -20px;
    right: -35px;
    width: 40px;
    height: 40px;
    /*
    background-image: url('/best2025-acgd2ntm7bwssgq/svg/petales.svg');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    */

    background-color: var(--bs-bleu);
    -webkit-mask-image: url('/best2025-acgd2ntm7bwssgq/svg/petales.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;

    mask-image: url('/best2025-acgd2ntm7bwssgq/svg/petales.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;

    pointer-events: none;
}

@media (min-width: 768px) {

    body.etape-introduction .container-form {
        width: 450px;
    }

    body.etape-introduction .container-form img {
        max-width: 90vw;
    }

    .jeu_presentation .autre {
        font-size: 30px;
    }

    .jeu_presentation .detail {
        font-size: 22px;
    }

    .cmsbloc-infogagnant {
        max-width: 382px;
        padding: 4em 0;
        margin: auto;
    }

    .cmsbloc-infogagnant h1 {
        font-size: 45px;
    }

}

@media (min-width: 992px) {

    #logo {
        height: 200px;
    }

}

@media (min-width: 1200px) {
	body.etape-introduction .video-background {
		height: calc(100vh - 42px);
	}
	
}