/* ==================================================
   POPUP OFFRE — PREMIUM
================================================== */

.offer-popup-overlay,
.offer-popup-overlay *,
.offer-popup-overlay *::before,
.offer-popup-overlay *::after{
    box-sizing:border-box;
}

.offer-popup-overlay{
    position:fixed;
    inset:0;
    z-index:99999999;

    padding:24px;

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

    overflow-y:auto;
    overscroll-behavior:contain;

    background:rgba(0,13,32,.76);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.offer-popup-overlay::before{
    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(7,87,249,.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 84% 82%,
            rgba(37,99,235,.14),
            transparent 31%
        );
}

.offer-popup-overlay.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* ==================================================
   POPUP
================================================== */

.offer-popup{
    position:relative;
    z-index:2;

    width:min(580px,calc(100vw - 48px));
    max-height:calc(100dvh - 48px);

    margin:auto;

    overflow-x:hidden;
    overflow-y:auto;

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

    background:#ffffff;

    text-align:center;

    box-shadow:
        0 42px 110px rgba(0,0,0,.40),
        0 0 0 1px rgba(255,255,255,.08);

    opacity:0;

    transform:
        translateY(28px)
        scale(.955);

    transition:
        transform .42s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease;

    scrollbar-width:thin;
    scrollbar-color:rgba(7,87,249,.25) transparent;
}

.offer-popup::-webkit-scrollbar{
    width:6px;
}

.offer-popup::-webkit-scrollbar-track{
    background:transparent;
}

.offer-popup::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(7,87,249,.25);
}

.offer-popup-overlay.is-open .offer-popup{
    opacity:1;

    transform:
        translateY(0)
        scale(1);
}

/* ==================================================
   FERMETURE
================================================== */

.offer-popup-close{
    position:absolute;
    top:16px;
    right:16px;
    z-index:20;

    width:39px;
    height:39px;

    padding:0;

    border:1px solid rgba(255,255,255,.18);
    border-radius:11px;

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

    color:#ffffff;
    background:rgba(255,255,255,.08);

    cursor:pointer;

    backdrop-filter:blur(8px);

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.offer-popup-close svg{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
}

.offer-popup-close:hover{
    color:#000d20;
    background:#ffffff;
    border-color:#ffffff;

    transform:rotate(90deg);
}

/* ==================================================
   HEADER
================================================== */

.offer-popup-header{
    position:relative;

    padding:30px 44px 34px;

    overflow:hidden;

    display:flex;
    flex-direction:column;
    align-items:center;

    color:#ffffff;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(37,99,235,.42),
            transparent 39%
        ),
        linear-gradient(
            145deg,
            #000d20 0%,
            #00183f 56%,
            #002762 100%
        );
}

.offer-popup-header::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.07),
            transparent 36%
        );
}

.offer-popup-header-orbit{
    position:absolute;

    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;

    pointer-events:none;

    animation:offerPopupOrbit 22s linear infinite;
}

.offer-popup-header-orbit-one{
    top:-170px;
    right:-120px;

    width:380px;
    height:380px;
}

.offer-popup-header-orbit-two{
    bottom:-210px;
    left:-150px;

    width:420px;
    height:420px;

    animation-duration:29s;
    animation-direction:reverse;
}

/* ==================================================
   ICÔNE PRINCIPALE
================================================== */

.offer-popup-icon{
    position:relative;
    z-index:3;

    width:76px;
    height:76px;
    flex:0 0 76px;

    margin:0 auto 17px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;

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

    color:#ffffff;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.28),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #2879ff,
            #0757f9 55%,
            #0040b6
        );

    box-shadow:
        0 22px 48px rgba(7,87,249,.34),
        0 0 0 10px rgba(7,87,249,.10),
        inset 0 1px 0 rgba(255,255,255,.22);

    animation:offerPopupIconFloat 5.5s ease-in-out infinite;
}

.offer-popup-icon svg{
    width:37px;
    height:37px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ==================================================
   TITRES
================================================== */

.offer-popup-label{
    position:relative;
    z-index:3;

    display:inline-flex;
    align-items:center;
    gap:11px;

    margin-bottom:10px;

    color:#69a0ff;

    font-size:10px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

.offer-popup-label::before,
.offer-popup-label::after{
    content:"";

    width:24px;
    height:1.5px;

    border-radius:999px;

    background:#4d8cff;

    box-shadow:0 0 12px rgba(77,140,255,.55);
}

.offer-popup h2{
    position:relative;
    z-index:3;

    max-width:470px;

    margin:0 0 13px;

    color:#ffffff;

    font-size:clamp(25px,4vw,34px);
    font-weight:900;
    line-height:1.08;
    letter-spacing:-.9px;
}

.offer-popup h2 span{
    display:block;
    color:#4d8cff;
}

.offer-popup-intro{
    position:relative;
    z-index:3;

    max-width:455px;

    margin:0 auto 19px;
    padding-bottom:0 !important;

    color:rgba(255,255,255,.80);

    font-size:14px;
    font-weight:500;
    line-height:1.55;
}

/* ==================================================
   PASTILLES
================================================== */

.offer-popup-benefits{
    position:relative;
    z-index:3;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    flex-wrap:wrap;
}

.offer-popup-benefit{
    min-height:35px;
    padding:0 13px;

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

    display:inline-flex;
    align-items:center;
    gap:8px;

    color:rgba(255,255,255,.90);
    background:rgba(255,255,255,.06);

    font-size:10.5px;
    font-weight:800;

    backdrop-filter:blur(8px);
}

.offer-popup-benefit svg{
    width:15px;
    height:15px;

    fill:none;
    stroke:#69a0ff;
    stroke-width:2.3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ==================================================
   BODY
================================================== */

.offer-popup-body{
    padding:27px 36px 26px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(7,87,249,.05),
            transparent 30%
        ),
        #ffffff;
}

/* ==================================================
   OFFRE SÉLECTIONNÉE
================================================== */

.offer-popup-selected{
    min-height:82px;

    padding:15px 17px;

    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;

    border:1px solid rgba(7,87,249,.12);
    border-radius:15px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(7,87,249,.08),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #f9fbff,
            #f1f6ff
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 13px 30px rgba(0,13,32,.055);

    text-align:left;
}

.offer-popup-selected-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;

    border-radius:13px;

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

    color:#ffffff;

    background:
        linear-gradient(
            145deg,
            #2879ff,
            #0757f9
        );

    box-shadow:
        0 12px 25px rgba(7,87,249,.22);
}

.offer-popup-selected-icon svg{
    width:24px;
    height:24px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.offer-popup-selected-content{
    min-width:0;
}

.offer-popup-selected-content small{
    display:block;

    margin-bottom:3px;

    color:#748197;

    font-size:10px;
    font-weight:700;
    line-height:1.3;
}

.offer-popup-selected-content strong{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;

    color:#000d20;

    font-size:15px;
    font-weight:900;
    line-height:1.3;

    white-space:nowrap;
}

.offer-popup-selected-price{
    color:#0757f9;

    font-size:17px;
    font-weight:950;
    line-height:1.1;

    white-space:nowrap;
}

/* ==================================================
   SÉPARATEUR
================================================== */

.offer-popup-separator{
    position:relative;

    width:100%;
    height:1px;

    margin:26px 0 24px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,13,32,.12),
            transparent
        );
}

.offer-popup-separator span{
    position:absolute;
    top:50%;
    left:50%;

    padding:0 12px;

    color:#8995a6;
    background:#ffffff;

    font-size:10px;
    font-weight:800;
    text-transform:uppercase;

    transform:translate(-50%,-50%);
}

/* ==================================================
   FORMULAIRE
================================================== */

.offer-popup-form{
    display:flex;
    flex-direction:column;
    gap:16px;

    text-align:left;
}

.offer-popup-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.offer-popup-form label{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:7px;
}

.offer-field-label{
    color:#000d20;

    font-size:12px;
    font-weight:900;
    line-height:1.3;
}

.offer-field-label small{
    color:#0757f9;
    font:inherit;
}

.offer-input-wrap{
    position:relative;
    display:block;
}

.offer-input-icon{
    position:absolute;
    top:50%;
    left:16px;
    z-index:2;

    width:20px;
    height:20px;

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

    color:#8a96a8;

    transform:translateY(-50%);

    pointer-events:none;
}

.offer-input-icon svg{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.offer-popup-form input{
    width:100%;
    height:54px;

    padding:0 14px 0 52px;

    border:1px solid rgba(0,13,32,.13);
    border-radius:11px;

    color:#000d20;
    background:#ffffff;

    font-size:14px;
    font-weight:600;

    outline:none;

    box-shadow:
        inset 0 1px 2px rgba(0,13,32,.025);

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.offer-popup-form input::placeholder{
    color:#9ca5b3;
    opacity:1;

    font-weight:500;
}

.offer-popup-form input:hover{
    border-color:rgba(7,87,249,.25);
}

.offer-popup-form input:focus{
    border-color:#0757f9;

    box-shadow:
        0 0 0 4px rgba(7,87,249,.10),
        inset 0 1px 2px rgba(0,13,32,.02);
}

.offer-input-wrap:focus-within .offer-input-icon{
    color:#0757f9;
}

.offer-popup-form input:-webkit-autofill,
.offer-popup-form input:-webkit-autofill:hover,
.offer-popup-form input:-webkit-autofill:focus{
    -webkit-text-fill-color:#000d20;
    -webkit-box-shadow:0 0 0 1000px #ffffff inset;
    transition:background-color 9999s ease-out 0s;
}

/* ==================================================
   BOUTON
================================================== */

.offer-popup-submit{
    position:relative;

    width:100%;
    height:58px;

    padding:0 24px;

    overflow:hidden;

    border:0;
    border-radius:11px;

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

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #1f73ff,
            #0757f9 58%,
            #0048d5
        );

    cursor:pointer;

    box-shadow:
        0 18px 38px rgba(7,87,249,.28),
        inset 0 1px 0 rgba(255,255,255,.20);

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

.offer-popup-submit::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 30%,
            rgba(255,255,255,.20) 48%,
            transparent 66%
        );

    transform:translateX(-115%);

    transition:transform .6s ease;
}

.offer-popup-submit:hover::before{
    transform:translateX(115%);
}

.offer-popup-submit:hover{
    transform:translateY(-3px);

    box-shadow:
        0 24px 48px rgba(7,87,249,.38),
        inset 0 1px 0 rgba(255,255,255,.20);
}

.offer-popup-submit:disabled{
    cursor:not-allowed;
}

.offer-btn-text{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    color:#ffffff;

    font-size:14px;
    font-weight:900;
}

.offer-btn-text svg{
    width:21px;
    height:21px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.3;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:transform .3s ease;
}

.offer-popup-submit:hover .offer-btn-text svg{
    transform:translateX(5px);
}

/* ==================================================
   LOADER
================================================== */

.offer-loader{
    position:relative;
    z-index:3;

    display:none;

    width:23px;
    height:23px;

    border:3px solid rgba(255,255,255,.34);
    border-top-color:#ffffff;
    border-radius:50%;

    animation:offerPopupSpin .8s linear infinite;
}

.offer-popup-submit.is-loading .offer-btn-text{
    display:none;
}

.offer-popup-submit.is-loading .offer-loader{
    display:block;
}

/* ==================================================
   SÉCURITÉ
================================================== */

.offer-popup-secure{
    max-width:460px;

    margin:18px auto 0;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    color:#748197;

    font-size:10px;
    font-weight:600;
    line-height:1.45;

    text-align:left;
}

.offer-popup-secure-icon{
    width:29px;
    height:29px;
    flex:0 0 29px;

    border-radius:50%;

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

    color:#0757f9;
    background:#edf4ff;

    box-shadow:
        inset 0 0 0 1px rgba(7,87,249,.09);
}

.offer-popup-secure-icon svg{
    width:15px;
    height:15px;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ==================================================
   ERREURS
================================================== */

.offer-popup-form label.has-error input{
    border-color:#ef4444;
    background:#fff8f8;

    box-shadow:
        0 0 0 4px rgba(239,68,68,.09);
}

.offer-popup-form label.has-error .offer-input-icon{
    color:#ef4444;
}

.offer-field-error{
    margin-top:1px;

    color:#ef4444;

    font-size:11.5px;
    font-weight:750;
    line-height:1.4;
}

/* ==================================================
   BODY LOCK
================================================== */

body.offer-popup-open{
    overflow:hidden;
}

/* ==================================================
   TOAST
================================================== */

.offer-toast{
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:999999999;

    width:min(455px,calc(100vw - 36px));

    padding:18px 20px;

    overflow:hidden;

    border:1px solid rgba(7,87,249,.10);
    border-radius:18px;

    display:flex;
    align-items:flex-start;
    gap:15px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(7,87,249,.06),
            transparent 34%
        ),
        rgba(255,255,255,.98);

    box-shadow:
        0 26px 75px rgba(0,13,32,.23),
        inset 0 1px 0 rgba(255,255,255,.95);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:
        translateY(20px)
        scale(.97);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s cubic-bezier(.22,.61,.36,1);
}

.offer-toast::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            #0757f9,
            #4d8cff
        );
}

.offer-toast.is-visible{
    opacity:1;
    visibility:visible;

    transform:
        translateY(0)
        scale(1);
}

.offer-toast-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;

    border-radius:50%;

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

    color:#ffffff;

    background:
        linear-gradient(
            145deg,
            #38b96c,
            #1f9853
        );

    box-shadow:
        0 12px 26px rgba(31,152,83,.24);
}

.offer-toast-icon svg{
    width:20px;
    height:20px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.offer-toast-content{
    min-width:0;
}

.offer-toast strong{
    display:block;

    margin:0 0 4px;

    color:#000d20;

    font-size:14px;
    font-weight:900;
    line-height:1.35;
}

.offer-toast p{
    margin:0;
    padding-bottom:0 !important;

    color:#5e6d84;

    font-size:12.5px;
    font-weight:500;
    line-height:1.45;
}

/* ==================================================
   ANIMATIONS
================================================== */

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

@keyframes offerPopupOrbit{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes offerPopupIconFloat{
    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }
}

/* ==================================================
   RESPONSIVE
================================================== */

@media(max-width:600px){

    .offer-popup-overlay{
        padding:14px;
    }

    .offer-popup{
        width:min(440px,calc(100vw - 28px));
        max-height:calc(100dvh - 28px);

        border-radius:20px;
    }

    .offer-popup-header{
        padding:24px 18px 23px;
    }

    .offer-popup-close{
        top:11px;
        right:11px;

        width:36px;
        height:36px;
    }

    .offer-popup-icon{
        width:62px;
        height:62px;
        flex-basis:62px;

        margin-bottom:14px;
    }

    .offer-popup-icon svg{
        width:30px;
        height:30px;
    }

    .offer-popup-label{
        margin-bottom:8px;

        font-size:9px;
        letter-spacing:1.8px;
    }

    .offer-popup-label::before,
    .offer-popup-label::after{
        width:17px;
    }

    .offer-popup h2{
        max-width:370px;

        font-size:24px;
        line-height:1.13;
    }

    .offer-popup-intro{
        max-width:370px;

        margin-bottom:15px;

        font-size:12.8px;
        line-height:1.48;
    }

    .offer-popup-benefits{
        gap:7px;
    }

    .offer-popup-benefit{
        min-height:30px;
        padding:0 10px;

        font-size:9.5px;
    }

    .offer-popup-body{
        padding:19px 17px;
    }

    .offer-popup-selected{
        min-height:75px;

        grid-template-columns:42px minmax(0,1fr);
        gap:12px;

        padding:13px;
    }

    .offer-popup-selected-icon{
        width:42px;
        height:42px;
    }

    .offer-popup-selected-price{
        grid-column:2;

        font-size:15px;
    }

    .offer-popup-separator{
        margin:23px 0 20px;
    }

    .offer-popup-fields{
        grid-template-columns:1fr;
        gap:13px;
    }

    .offer-popup-form{
        gap:13px;
    }

    .offer-popup-form input{
        height:51px;

        font-size:16px;
    }

    .offer-popup-submit{
        height:54px;
    }

    .offer-popup-secure{
        font-size:9.5px;
    }

    .offer-toast{
        right:16px;
        bottom:16px;
        left:16px;

        width:auto;
    }

}

@media(max-width:380px){

    .offer-popup-overlay{
        padding:7px;
    }

    .offer-popup{
        width:calc(100vw - 14px);
        max-height:calc(100dvh - 14px);

        border-radius:16px;
    }

    .offer-popup-header{
        padding:22px 13px 20px;
    }

    .offer-popup h2{
        font-size:21px;
    }

    .offer-popup-body{
        padding:16px 14px;
    }

    .offer-popup-selected-content strong{
        font-size:14px;
    }

    .offer-popup-form input{
        padding-left:48px;
    }

}

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

    .offer-popup,
    .offer-popup-overlay,
    .offer-popup-close,
    .offer-popup-submit,
    .offer-toast,
    .offer-popup-icon,
    .offer-popup-header-orbit{
        animation:none !important;
        transition:none !important;
    }

}