/* ============================================================
   CLASSMIRROR TOP BANNER V2 PREMIUM
   ============================================================ */

#cm-top-banner-v2{
    position:relative;
    z-index:9998;

    display:flex;
    align-items:center;
    justify-content:center;

    min-height:52px;

    padding:
        7px 56px
        7px 18px;

    color:#fff;

    background:
        radial-gradient(
            circle at 18% 50%,
            rgba(71,191,255,.23),
            transparent 28%
        ),
        radial-gradient(
            circle at 78% 10%,
            rgba(168,98,255,.26),
            transparent 30%
        ),
        linear-gradient(
            105deg,
            #102b72 0%,
            #3126a8 42%,
            #6838e8 72%,
            #1b77f2 100%
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

    box-shadow:
        0 8px 25px
        rgba(29,38,112,.14);

    overflow:hidden;
}


/* lumière glissante */

#cm-top-banner-v2::before{
    content:"";

    position:absolute;

    top:-80px;
    bottom:-80px;
    left:-190px;

    width:110px;

    transform:
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.15),
            transparent
        );

    animation:
        cmTopBannerV2Shine
        8s
        ease-in-out
        infinite;

    pointer-events:none;
}


@keyframes cmTopBannerV2Shine{

    0%,70%{
        left:-190px;
    }

    100%{
        left:115%;
    }
}


.cm-top-v2-inner{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:9px;

    width:100%;
    max-width:1450px;

    margin:auto;
}


/* ============================================================
   NOUVEAU
   ============================================================ */

.cm-top-v2-new{
    display:inline-flex;
    align-items:center;
    gap:6px;

    min-height:28px;

    padding:
        4px 9px;

    color:#fff;

    font-size:10px;
    font-weight:950;

    letter-spacing:.08em;

    text-transform:uppercase;

    background:
        rgba(255,255,255,.13);

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius:999px;

    backdrop-filter:
        blur(8px);
}


.cm-top-v2-dot{
    width:7px;
    height:7px;

    background:#66f0b5;

    border-radius:50%;

    box-shadow:
        0 0 0 4px
        rgba(102,240,181,.13);

    animation:
        cmTopBannerPulse
        2s
        ease-in-out
        infinite;
}


@keyframes cmTopBannerPulse{

    0%,100%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:.65;
        transform:scale(.82);
    }
}


/* ============================================================
   TEXTE
   ============================================================ */

.cm-top-v2-title{
    font-size:13px;
    font-weight:900;

    white-space:nowrap;
}


.cm-top-v2-title strong{
    color:#fff;
    font-weight:950;
}


/* ============================================================
   OFFRES
   ============================================================ */

.cm-top-v2-plans{
    display:flex;
    align-items:center;

    gap:6px;
}


.cm-top-v2-plan{
    display:inline-flex;
    align-items:center;

    gap:5px;

    min-height:29px;

    padding:
        4px 10px;

    color:#fff;

    font-size:10px;
    font-weight:850;

    background:
        rgba(255,255,255,.09);

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius:999px;
}


.cm-top-v2-plan strong{
    font-size:11px;
    font-weight:950;
}


.cm-top-v2-family{
    background:
        rgba(255,255,255,.14);

    border-color:
        rgba(255,255,255,.24);
}


/* ============================================================
   CTA
   ============================================================ */

.cm-top-v2-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:33px;

    padding:
        5px 14px;

    color:#263377!important;

    font-size:11px;
    font-weight:950;

    text-decoration:none!important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f3f6ff
        );

    border:
        1px solid
        rgba(255,255,255,.95);

    border-radius:999px;

    box-shadow:
        0 7px 20px
        rgba(7,20,75,.20);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.cm-top-v2-cta:hover{
    transform:
        translateY(-1px);

    background:#fff;

    box-shadow:
        0 10px 26px
        rgba(7,20,75,.27);
}


/* ============================================================
   CLOSE
   ============================================================ */

.cm-top-v2-close{
    position:absolute;

    z-index:3;

    top:50%;
    right:14px;

    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    padding:0;

    color:#fff;

    font:inherit;
    font-size:19px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:50%;

    cursor:pointer;

    transform:
        translateY(-50%);

    transition:
        background .18s ease,
        transform .18s ease;
}


.cm-top-v2-close:hover{
    background:
        rgba(255,255,255,.18);

    transform:
        translateY(-50%)
        rotate(5deg);
}


html[dir="rtl"]
.cm-top-v2-close{
    right:auto;
    left:14px;
}


/* ============================================================
   TABLETTE
   ============================================================ */

@media(max-width:1050px){

    .cm-top-v2-title{
        font-size:12px;
    }

    .cm-top-v2-plan{
        padding:
            4px 8px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:820px){

    #cm-top-banner-v2{
        min-height:50px;

        padding:
            7px 48px
            7px 10px;
    }

    .cm-top-v2-inner{
        justify-content:flex-start;

        gap:7px;
    }

    .cm-top-v2-plans{
        display:none;
    }

    .cm-top-v2-title{
        white-space:normal;

        font-size:11px;
    }

    .cm-top-v2-new{
        min-height:25px;

        padding:
            3px 7px;

        font-size:8px;
    }

    .cm-top-v2-cta{
        min-height:29px;

        padding:
            4px 10px;

        margin-inline-start:auto;

        font-size:10px;
    }
}


@media(max-width:520px){

    .cm-top-v2-new{
        display:none;
    }

    .cm-top-v2-title{
        max-width:
            calc(100% - 115px);

        line-height:1.25;
    }
}


@media(prefers-reduced-motion:reduce){

    #cm-top-banner-v2::before,
    .cm-top-v2-dot{
        animation:none;
    }
}

/* ============================================================
   CLASSMIRROR TOP BANNER V2.1 — STABILITY
   ============================================================ */

#cm-top-banner-v21-slot{
    position:relative!important;

    display:block!important;

    width:100%!important;

    visibility:visible!important;
    opacity:1!important;

    z-index:9998!important;
}


#cm-top-banner-v21-slot
#cm-top-banner-v2{

    display:flex!important;

    width:100%!important;

    visibility:visible!important;
    opacity:1!important;
}


/*
 * Le haut du site ne doit jamais passer par-dessus.
 */

#cm-top-banner-v21-slot + header,
#cm-top-banner-v21-slot + nav{
    position:relative;
}


/* ============================================================
   CLASSMIRROR TOP BANNER V2.1 — STABILITY END
   ============================================================ */


/* CLASSMIRROR_TOP_BANNER_V231_STABLE_BEGIN */


/* ==========================================================
   MEME HAUTEUR POUR LES DEUX ETATS
   ========================================================== */

#cm-top-banner-v21-slot{
    width:100% !important;

    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;

    overflow:hidden !important;

    box-sizing:border-box !important;
}


#cm-top-banner-v2{
    width:100% !important;

    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;

    overflow:hidden !important;

    box-sizing:border-box !important;

    contain:layout paint;
}


/* ==========================================================
   UNE SEULE LIGNE
   ========================================================== */

#cm-top-banner-v2 .cm-top-v2-inner{

    width:100% !important;
    height:44px !important;

    min-width:0 !important;

    display:flex !important;

    flex-wrap:nowrap !important;

    align-items:center !important;

    box-sizing:border-box !important;

    overflow:hidden !important;
}


/* ==========================================================
   BADGE
   ========================================================== */

#cm-top-banner-v2 .cm-top-v2-new{

    flex:0 0 auto !important;

    white-space:nowrap !important;
}


/* ==========================================================
   TITRE
   Prend l'espace restant sans agrandir la page
   ========================================================== */

#cm-top-banner-v2 .cm-top-v2-title{

    flex:1 1 auto !important;

    min-width:0 !important;

    overflow:hidden !important;

    white-space:nowrap !important;
}


#cm-top-banner-v2
.cm-top-v2-title
[data-cm-banner-title]{

    display:block !important;

    width:100% !important;

    min-width:0 !important;

    overflow:hidden !important;

    white-space:nowrap !important;

    text-overflow:ellipsis !important;
}


/* ==========================================================
   BLOCS CENTRAUX
   Même géométrie quel que soit le message
   ========================================================== */

#cm-top-banner-v2 .cm-top-v2-plans{

    flex:0 0 auto !important;

    display:flex !important;

    align-items:center !important;

    flex-wrap:nowrap !important;

    white-space:nowrap !important;

    min-width:0 !important;
}


#cm-top-banner-v2 .cm-top-v2-plan{

    flex:0 0 auto !important;

    white-space:nowrap !important;

    overflow:hidden !important;
}


/* Zone Solo / 3 questions */

#cm-top-banner-v2
.cm-top-v2-plan:first-child{

    width:150px !important;
    max-width:150px !important;

    box-sizing:border-box !important;
}


/* Zone Family / Suivi */

#cm-top-banner-v2
.cm-top-v2-family{

    width:235px !important;
    max-width:235px !important;

    box-sizing:border-box !important;
}


#cm-top-banner-v2
[data-cm-banner-solo-price],

#cm-top-banner-v2
[data-cm-banner-family-price]{

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
}


/* ==========================================================
   CTA
   ========================================================== */

#cm-top-banner-v2 .cm-top-v2-cta{

    flex:0 0 auto !important;

    white-space:nowrap !important;
}


/* ==========================================================
   CROIX
   ========================================================== */

#cm-top-banner-v2 .cm-top-v2-close{

    flex:0 0 38px !important;

    width:38px !important;
    height:44px !important;

    min-width:38px !important;
}


/* ==========================================================
   EMPÊCHER TOUT DEBORDEMENT HORIZONTAL
   ========================================================== */

html,
body{

    max-width:100%;

    overflow-x:hidden;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media(max-width:1050px){

    #cm-top-banner-v2
    .cm-top-v2-plan:first-child{

        width:120px !important;
        max-width:120px !important;
    }


    #cm-top-banner-v2
    .cm-top-v2-family{

        width:175px !important;
        max-width:175px !important;
    }

}


/* ==========================================================
   PETIT ECRAN
   On garde TOUJOURS la même hauteur.
   ========================================================== */

@media(max-width:760px){

    #cm-top-banner-v21-slot,
    #cm-top-banner-v2,
    #cm-top-banner-v2 .cm-top-v2-inner{

        height:48px !important;
        min-height:48px !important;
        max-height:48px !important;
    }


    #cm-top-banner-v2 .cm-top-v2-plans{

        display:none !important;
    }


    #cm-top-banner-v2 .cm-top-v2-title{

        flex:1 1 auto !important;
    }


    #cm-top-banner-v2 .cm-top-v2-close{

        height:48px !important;
    }

}


/* CLASSMIRROR_TOP_BANNER_V231_STABLE_END */