/* ==========================================================================
   CSB PODCAST — NEWSLETTER POPUP
   PREMIUM EXPERIENCE 2028
   ========================================================================== */

.csb-newsletter-popup {
    --nl-bg:#07070A;
    --nl-panel:#0F0E14;
    --nl-panel-2:#15121B;

    --nl-white:#F7F7FB;
    --nl-text:#DDD9E4;
    --nl-muted:#918B9B;

    --nl-violet:#8B43A8;
    --nl-cyan:#12B4D6;
    --nl-pink:#EA5B78;
    --nl-red:#FF3B30;

    --nl-line:
        rgba(255,255,255,.085);

    --nl-gradient:
        linear-gradient(
            115deg,
            #8B43A8,
            #EA5B78 52%,
            #12B4D6
        );

    position:fixed;

    z-index:300000;

    inset:0;

    display:grid;

    place-items:center;

    padding:22px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

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

.csb-newsletter-popup[hidden] {
    display:none !important;
}

.csb-newsletter-popup.is-open {
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}

/* ==========================================================================
   BACKDROP
   ========================================================================== */

.csb-newsletter-backdrop {
    position:absolute;

    inset:0;

    background:
        rgba(2,2,6,.80);

    backdrop-filter:
        blur(26px)
        saturate(125%);
}

/* ==========================================================================
   DIALOG
   ========================================================================== */

.csb-newsletter-dialog {
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(290px,.82fr)
        minmax(0,1.18fr);

    width:
        min(
            980px,
            100%
        );

    max-height:
        calc(100dvh - 44px);

    overflow:hidden;

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

    border-radius:32px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(234,91,120,.11),
            transparent 34%
        ),
        #0E0D13;

    box-shadow:
        0 80px 220px
        rgba(0,0,0,.72);

    transform:
        translateY(35px)
        scale(.95);

    transition:
        transform .48s
        cubic-bezier(.16,1,.3,1);
}

.csb-newsletter-popup.is-open
.csb-newsletter-dialog {
    transform:none;
}

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

.csb-newsletter-close {
    position:absolute;

    z-index:20;

    top:15px;
    right:15px;

    display:grid;

    place-items:center;

    width:42px;
    height:42px;

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

    border-radius:12px;

    background:
        rgba(7,7,10,.72);

    color:white;

    font-size:1.1rem;

    cursor:pointer;

    backdrop-filter:blur(13px);

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

.csb-newsletter-close:hover {
    transform:
        rotate(5deg)
        scale(1.05);

    background:
        rgba(234,91,120,.12);
}

/* ==========================================================================
   ART
   ========================================================================== */

.csb-newsletter-art {
    position:relative;

    display:flex;

    min-height:620px;

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

    flex-direction:column;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 45% 40%,
            rgba(139,67,168,.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #0D0B12,
            #09080D
        );
}

.csb-newsletter-art::before {
    content:"";

    position:absolute;

    width:410px;
    height:410px;

    border:
        1px solid
        rgba(139,67,168,.12);

    border-radius:50%;

    animation:
        csbNewsletterSpin
        24s linear
        infinite;
}

.csb-newsletter-art::after {
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            transparent,
            rgba(18,180,214,.025)
        );
}

/* ==========================================================================
   LOGO
   ========================================================================== */

.csb-newsletter-art-logo {
    position:relative;
    z-index:4;

    width:116px;
    height:116px;

    padding:9px;

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

    border-radius:31px;

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

    box-shadow:
        0 25px 65px
        rgba(0,0,0,.32),
        0 0 60px
        rgba(139,67,168,.10);

    transform:
        rotate(-3deg);
}

.csb-newsletter-art-logo img {
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:23px;
}

.csb-newsletter-art > strong {
    position:relative;
    z-index:4;

    margin-top:26px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            2.4rem,
            4vw,
            4rem
        );

    line-height:.88;

    letter-spacing:-.055em;

    text-align:center;
}

/* ==========================================================================
   ORBIT
   ========================================================================== */

.csb-newsletter-orbit {
    position:absolute;

    width:330px;
    height:330px;

    border:
        1px solid
        rgba(18,180,214,.08);

    border-radius:50%;

    animation:
        csbNewsletterSpin
        18s linear
        infinite reverse;
}

.csb-newsletter-orbit span {
    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--nl-cyan);

    box-shadow:
        0 0 18px
        rgba(18,180,214,.55);
}

.csb-newsletter-orbit
span:nth-child(1) {
    top:12%;
    left:19%;
}

.csb-newsletter-orbit
span:nth-child(2) {
    top:48%;
    right:-4px;

    background:var(--nl-pink);
}

.csb-newsletter-orbit
span:nth-child(3) {
    bottom:4%;
    left:45%;

    background:var(--nl-violet);
}

/* ==========================================================================
   WAVE
   ========================================================================== */

.csb-newsletter-wave {
    position:relative;
    z-index:4;

    display:flex;

    align-items:center;

    gap:3px;

    height:45px;

    margin-top:24px;
}

.csb-newsletter-wave i {
    width:2px;
    height:12px;

    border-radius:99px;

    background:
        var(--nl-gradient);

    animation:
        csbNewsletterWave
        .75s ease-in-out
        infinite alternate;
}

.csb-newsletter-wave
i:nth-child(3n) {
    height:27px;

    animation-delay:-.35s;
}

.csb-newsletter-wave
i:nth-child(4n) {
    height:18px;

    animation-delay:-.57s;
}

.csb-newsletter-wave
i:nth-child(5n) {
    height:34px;

    animation-delay:-.22s;
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

.csb-newsletter-content {
    display:flex;

    min-width:0;

    flex-direction:column;

    justify-content:center;

    padding:
        clamp(
            38px,
            5vw,
            70px
        );

    overflow-y:auto;
}

.csb-newsletter-kicker {
    color:var(--nl-cyan);

    font-size:.51rem;

    font-weight:900;

    letter-spacing:.18em;
}

.csb-newsletter-content h2,
.csb-newsletter-success h2 {
    margin:
        14px 0
        0;

    color:var(--nl-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    line-height:.88;

    letter-spacing:-.065em;
}

.csb-newsletter-content h2 span,
.csb-newsletter-success h2 span {
    color:transparent;

    background:
        var(--nl-gradient);

    background-clip:text;
    -webkit-background-clip:text;
}

.csb-newsletter-intro {
    max-width:570px;

    margin:
        21px 0
        0;

    color:
        rgba(247,247,251,.50);

    font-size:.78rem;

    line-height:1.72;
}

/* ==========================================================================
   FORM
   ========================================================================== */

.csb-newsletter-form {
    margin-top:27px;
}

.csb-newsletter-fields {
    display:grid;

    grid-template-columns:
        .78fr
        1.22fr;

    gap:8px;
}

.csb-newsletter-fields label {
    display:grid;

    gap:7px;
}

.csb-newsletter-fields label > span {
    color:var(--nl-muted);

    font-size:.49rem;

    font-weight:800;
}

.csb-newsletter-fields input {
    width:100%;

    min-height:47px;

    padding:
        0
        13px;

    border:
        1px solid
        var(--nl-line);

    border-radius:12px;

    outline:0;

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

    color:white;

    font-size:.63rem;

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

.csb-newsletter-fields input:focus {
    border-color:
        rgba(18,180,214,.25);

    background:
        rgba(18,180,214,.015);

    box-shadow:
        0 0 0 4px
        rgba(18,180,214,.025);
}

.csb-newsletter-fields
input::placeholder {
    color:
        rgba(247,247,251,.23);
}

/* ==========================================================================
   HONEYPOT
   ========================================================================== */

.csb-newsletter-honeypot {
    position:absolute !important;

    left:-10000px !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;
}

/* ==========================================================================
   CONSENT
   ========================================================================== */

.csb-newsletter-consent {
    display:grid;

    grid-template-columns:
        24px
        minmax(0,1fr);

    gap:9px;

    align-items:start;

    margin-top:14px;

    cursor:pointer;
}

.csb-newsletter-consent
input {
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;
}

.csb-newsletter-check {
    display:grid;

    place-items:center;

    width:24px;
    height:24px;

    border:
        1px solid
        var(--nl-line);

    border-radius:7px;

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

    color:transparent;

    font-size:.48rem;

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

.csb-newsletter-consent
input:checked
+
.csb-newsletter-check {
    border-color:
        rgba(18,180,214,.30);

    background:
        rgba(18,180,214,.08);

    color:var(--nl-cyan);
}

.csb-newsletter-consent
> span:last-child {
    color:
        rgba(247,247,251,.38);

    font-size:.49rem;

    line-height:1.55;
}

/* ==========================================================================
   SUBMIT
   ========================================================================== */

.csb-newsletter-submit {
    position:relative;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    width:100%;

    min-height:50px;

    margin-top:18px;

    padding:
        0
        17px;

    overflow:hidden;

    border:0;

    border-radius:12px;

    background:
        var(--nl-gradient);

    color:white;

    font-size:.61rem;

    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 18px 45px
        rgba(139,67,168,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.csb-newsletter-submit::before {
    content:"";

    position:absolute;

    top:-160%;
    left:-45%;

    width:30%;
    height:420%;

    transform:
        rotate(24deg);

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

    transition:
        left .75s ease;
}

.csb-newsletter-submit:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 23px 58px
        rgba(139,67,168,.27);
}

.csb-newsletter-submit:hover::before {
    left:125%;
}

.csb-newsletter-submit:disabled {
    opacity:.60;

    cursor:wait;

    transform:none;
}

/* ==========================================================================
   STATUS
   ========================================================================== */

.csb-newsletter-status {
    min-height:18px;

    margin-top:9px;

    color:#FF9994;

    font-size:.49rem;

    line-height:1.5;
}

.csb-newsletter-status.is-success {
    color:#72DDEE;
}

/* ==========================================================================
   BENEFITS
   ========================================================================== */

.csb-newsletter-benefits {
    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:17px;
}

.csb-newsletter-benefits > span {
    display:flex;

    align-items:center;

    gap:6px;

    min-height:28px;

    padding:
        0
        9px;

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

    border-radius:999px;

    color:
        rgba(247,247,251,.36);

    font-size:.43rem;
}

.csb-newsletter-benefits i {
    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--nl-cyan);

    box-shadow:
        0 0 10px
        rgba(18,180,214,.45);
}

/* ==========================================================================
   LATER
   ========================================================================== */

.csb-newsletter-later {
    align-self:center;

    margin-top:19px;

    padding:5px;

    border:0;

    background:transparent;

    color:
        rgba(247,247,251,.31);

    font-size:.48rem;

    cursor:pointer;

    transition:
        color .2s ease;
}

.csb-newsletter-later:hover {
    color:
        rgba(247,247,251,.68);
}

/* ==========================================================================
   SUCCESS
   ========================================================================== */

.csb-newsletter-success[hidden] {
    display:none !important;
}

.csb-newsletter-success {
    grid-column:
        1 / -1;

    display:flex;

    min-height:560px;

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

    flex-direction:column;

    padding:
        clamp(
            35px,
            6vw,
            80px
        );

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(139,67,168,.14),
            transparent 35%
        );
}

.csb-newsletter-success-icon {
    display:grid;

    place-items:center;

    width:75px;
    height:75px;

    margin-bottom:23px;

    border:
        1px solid
        rgba(18,180,214,.20);

    border-radius:24px;

    background:
        rgba(18,180,214,.055);

    color:var(--nl-cyan);

    font-size:1.6rem;

    box-shadow:
        0 0 70px
        rgba(18,180,214,.08);

    animation:
        csbNewsletterSuccess
        .55s
        cubic-bezier(.16,1,.3,1)
        both;
}

.csb-newsletter-success p {
    max-width:550px;

    margin:
        20px auto
        0;

    color:var(--nl-muted);

    line-height:1.7;
}

.csb-newsletter-success
.csb-newsletter-submit {
    width:auto;

    min-width:210px;

    justify-content:center;
}

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

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

@keyframes csbNewsletterWave {
    from {
        transform:
            scaleY(.40);

        opacity:.45;
    }

    to {
        transform:
            scaleY(1.2);

        opacity:1;
    }
}

@keyframes csbNewsletterSuccess {
    from {
        opacity:0;

        transform:
            scale(.65)
            rotate(-8deg);
    }

    to {
        opacity:1;

        transform:none;
    }
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media(max-width:850px) {

    .csb-newsletter-dialog {
        grid-template-columns:
            250px
            minmax(0,1fr);

        width:
            min(
                760px,
                100%
            );
    }

    .csb-newsletter-art {
        min-height:560px;
    }

    .csb-newsletter-art > strong {
        font-size:2.5rem;
    }

    .csb-newsletter-fields {
        grid-template-columns:1fr;
    }
}

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

@media(max-width:650px) {

    .csb-newsletter-popup {
        display:flex;

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

        padding:
            max(
                10px,
                env(safe-area-inset-top)
            )
            10px
            max(
                10px,
                env(safe-area-inset-bottom)
            );

        overflow-y:auto;
    }

    .csb-newsletter-dialog {
        display:flex;

        width:
            min(
                440px,
                100%
            );

        max-height:none;

        margin:auto;

        flex-direction:column;

        border-radius:22px;
    }

    /*
     * Art beaucoup plus petit sur téléphone.
     */
    .csb-newsletter-art {
        min-height:190px;
        height:190px;

        flex:
            0 0 190px;
    }

    .csb-newsletter-art::before {
        width:245px;
        height:245px;
    }

    .csb-newsletter-orbit {
        width:195px;
        height:195px;
    }

    .csb-newsletter-art-logo {
        width:70px;
        height:70px;

        padding:5px;

        border-radius:20px;
    }

    .csb-newsletter-art-logo img {
        border-radius:15px;
    }

    .csb-newsletter-art
    > strong {
        display:none;
    }

    .csb-newsletter-wave {
        display:none;
    }

    .csb-newsletter-content {
        display:block;

        padding:
            25px
            20px
            21px;

        overflow:visible;
    }

    .csb-newsletter-content h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }

    .csb-newsletter-intro {
        font-size:.70rem;
    }

    .csb-newsletter-fields {
        grid-template-columns:1fr;
    }

    .csb-newsletter-success {
        min-height:520px;

        padding:
            30px
            20px;
    }
}

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

@media(max-width:390px) {

    .csb-newsletter-content h2 {
        font-size:
            clamp(
                2.25rem,
                11vw,
                3.2rem
            );
    }

    .csb-newsletter-benefits {
        display:none;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    .csb-newsletter-popup *,
    .csb-newsletter-popup *::before,
    .csb-newsletter-popup *::after {
        animation:none !important;

        transition-duration:.001ms !important;
    }
}