@charset "utf-8";
/* CSS Document */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.wait-title {
             font-family: "Roboto", sans-serif;
             font-optical-sizing: auto;
    color: #FFFFFF;
    font-weight: 300;
    font-size: 36px;
             font-style: normal;
             font-variation-settings:
                     "wdth" 100;
         }





.cms-video-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

.cms-video-page video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    min-width: 100vw;
    min-height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: cover;
}
.wait-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    position: relative;
    height: 100vh;
    z-index: 1;
}

/* Bande horizontale centrée verticalement */
.middle-band{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 300px; /* hauteur bande */
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    z-index: 1;
}
.band-content{
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 2;
}
/* Zone gauche countdown */
.left-zone{
    position: absolute;
    top: 50%;
    left: 0;
    width: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
    font-size: 22px;
    z-index: 2;
}

/* On garde EXACTEMENT ton placement du logo */
.logo-wrapper {
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.logo-wait {
    width: 300px;
}

/* MOBILE */
@media (max-width: 768px) {

    /* la bande devient "auto" et entoure TOUT */
    .middle-band{
        height: auto;
        padding: 22px 0;
    }


    .band-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 14px;
        text-align: center;
        padding: 0 16px;
    }

    .left-zone{
        position: static;
        transform: none;
        width: 100%;
        font-size: 16px;
    }

    .logo-wrapper{
        position: static;
        transform: none;
        left: auto;
        top: auto;
    }

    .logo-wait{ width: 150px; }

}


/** @section Countdown */
.countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -5px;
    margin-right: -5px;
    line-height: 1.2;
    text-align: center;
}

.countdown-block {
    position: relative;
    flex: 0 1 auto;
    padding: 0 5px;
}

.countdown-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.countdown-circle {
    fill: transparent;
}

html:not(.ie-11):not(.ie-10) .countdown-circle {
    width: 100%;
    height: auto;
}

.countdown-circle-bg {
    stroke: #000;
    stroke-width: 4px;
    opacity: .075;
}

.countdown-circle-fg {
    stroke: #FFFFFF;
    stroke-width: 4px;
}

.countdown-counter {
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 0;
    color: #000;
}

@media (min-width: 768px) {
    .countdown-counter {
        font-size: 40px;
    }
}

.countdown-title {
    font-size: 12px;
    font-style: italic;
}

@media (min-width: 768px) {
    .countdown-title {
        font-size: 14px;
    }
}

* + .countdown {
    margin-top: 35px;
}

.countdown + * {
    margin-top: 35px;
}



@media (min-width: 768px) {
    .countdown-block-seconds {
        display: block;
    }
}

.context-dark .countdown-counter, .bg-accent .countdown-counter, .bg-secondary-7 .countdown-counter, .bg-gray-dark .countdown-counter, .bg-black .countdown-counter, .bg-gray-darker .countdown-counter, .bg-image-4 .countdown-counter, .bg-image-6 .countdown-counter {
    color: #fff;
}

.context-dark .countdown-circle-bg, .bg-accent .countdown-circle-bg, .bg-secondary-7 .countdown-circle-bg, .bg-gray-dark .countdown-circle-bg, .bg-black .countdown-circle-bg, .bg-gray-darker .countdown-circle-bg, .bg-image-4 .countdown-circle-bg, .bg-image-6 .countdown-circle-bg,
.context-dark .countdown-circle-fg,
.bg-accent .countdown-circle-fg,
.bg-secondary-7 .countdown-circle-fg,
.bg-gray-dark .countdown-circle-fg,
.bg-black .countdown-circle-fg,
.bg-gray-darker .countdown-circle-fg,
.bg-image-4 .countdown-circle-fg,
.bg-image-6 .countdown-circle-fg {
    stroke: #000;
}

.context-dark .countdown-circle-bg, .bg-accent .countdown-circle-bg, .bg-secondary-7 .countdown-circle-bg, .bg-gray-dark .countdown-circle-bg, .bg-black .countdown-circle-bg, .bg-gray-darker .countdown-circle-bg, .bg-image-4 .countdown-circle-bg, .bg-image-6 .countdown-circle-bg {
    opacity: .25;
}

.countdown-primary .countdown-counter,
.countdown-primary .countdown-title {
    color: #fff;
}

.countdown-primary .countdown-circle {
    fill: #e0be6a;
}

.countdown-primary .countdown-circle-bg {
    stroke: #e0be6a;
    opacity: 1;
}

.countdown{
    transform: scale(0.80);
    transform-origin: center;
    margin-top: -10px;
}

@media (max-width: 992px){ /* <-- au lieu de 768, comme ça t'es sûr que ça passe */
    .middle-band{
        height: auto !important;
        padding: 22px 0 !important;
        overflow: hidden;
    }

    .band-content{
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: center !important;
        padding: 0 16px !important;
    }

    .left-zone{
        position: static !important;
        transform: none !important;
        width: 100% !important;
        font-size: 18px !important;
    }

    .logo-wrapper{
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
    }

    .logo-wait{
        width: 160px !important;
    }


}
@media (max-width: 992px){

    /* on réduit les énormes marges du countdown */
    * + .countdown { margin-top: 12px !important; }
    .countdown + * { margin-top: 12px !important; }

    /* on évite que la ligne "Notre site revient..." prenne trop de place */
    .wait-title{
        font-size: 22px !important;
        line-height: 1.15 !important;
        margin-bottom: 10px !important;
        padding: 0 10px;
    }

    /* sécurise la bande : elle englobe toujours tout */
    .middle-band{
        height: auto !important;
        padding: 18px 0 !important;
    }
    .countdown{
        transform: scale(0.75);
        transform-origin: center;
        margin-top: -10px;
    }
    .countdown-block-Seconds {
        display: none; !important;
    }
}