.disko-component-banniere-promotionnelle
{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*background: #EAEAEA;*/
}
.disko-component-banniere-promotionnelle .background-media
{
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}
.disko-component-banniere-promotionnelle .title-xl
{
    margin: 0 8vw;
}
.disko-component-banniere-promotionnelle .description
{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    text-align: center;
    margin: 0.8vw;
}
.disko-component-banniere-promotionnelle .description.above-title
{
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* indent and style of the description lines if no title contributed */
.disko-component-banniere-promotionnelle.no-title .description
{
    font-size: 40px;
    line-height: 0.75em;
}
.disko-component-banniere-promotionnelle .description > p
{
    display: inline-block;
}
.disko-component-banniere-promotionnelle .description > p + p
{
    margin-top: 20px;
}

.disko-component-banniere-promotionnelle.no-title .description > p:nth-last-child(2) { margin-right: 2ch; }
.disko-component-banniere-promotionnelle.no-title .description > p:first-child { margin-left: 2ch; }
.disko-component-banniere-promotionnelle.no-title .description > p:last-child { transform: none; }

/* if a title is contributed, cancel the indent */
.disko-component-banniere-promotionnelle.has-title > .description > p { transform: none !important; }

.disko-component-banniere-promotionnelle > .underlined-cta
{
    margin-top: 28px;
}

.disko-component-banniere-promotionnelle .wheel-container
{
    position: absolute;
    bottom: 0;
    overflow: hidden;
}
.disko-component-banniere-promotionnelle .wheel-container button
{
    transform: translateY(40%);
}
.wheel-svg-container
{
    width: 250px;
    height: 250px;
    transform: rotateZ(calc(var(--scroll-y) * -0.25deg));
    transition: transform 0.6s cubic-bezier(0.04, 0.07, 0.04, 0.93) 0s;
}
.wheel-svg
{
    animation: rotate-wheel 12s linear 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
}
@keyframes rotate-wheel
{
    0% { transform: rotateZ(0); }
    100% { transform: rotateZ(-360deg); }
}

.disko-component-banniere-promotionnelle .modal-video-container
{
    position: fixed;
    top: 96px;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 9.6mm 9.6mm;
    z-index: 10;
    
    opacity: 0;
    pointer-events: none;
}
.disko-component-banniere-promotionnelle .modal-video-container[data-state="closed"]
{
    transition: opacity 0.8s ease 0s;
    opacity: 0;
    pointer-events: none;
}
.disko-component-banniere-promotionnelle .modal-video-container[data-state="open"]
{
    transition: opacity 0.8s ease 0s;
    opacity: 1;
    pointer-events: all;
}
.disko-component-banniere-promotionnelle .modal-video-container::before
{
    content: "";
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.disko-component-banniere-promotionnelle .modal-video-wrapper video
{
    max-width: 100%;    
    max-height: calc(100vh - 96px - 9.6mm);
    
    object-fit: contain;
}
.disko-component-banniere-promotionnelle .modal-video-container[data-state="open"] video
{
    pointer-events: all;
}
.modal-video-wrapper
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-video__close-btn
{
    position: absolute;
    top: 0;
    right: 0;
    width: 14mm;
    height: 14mm;
    padding: 16px 16px 16px 16px;
}

body[data-modal-state="open"]
{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    overflow-y: scroll;
}

@media screen and (max-width: 767px)
{
    .disko-component-banniere-promotionnelle .desktop-background-video
    {
        display: none;
    }
}
@media screen and (min-width: 768px)
{
    .disko-component-banniere-promotionnelle .mobile-background-video
    {
        display: none;
    }
}

.modal-opener {
    position: relative;
}
.modal-opener::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -60%) scale(0.7);
    border-top: 1.6em solid transparent;
    border-bottom: 1.6em solid transparent;
    border-left: 3.2em solid var(--triangle-color);
}