/* ==========================================================================
   CSB PODCAST — PUBLICITÉ ÉPISODE
   Premium 2026
   ========================================================================== */

:root {
    --csbad-bg: #07070a;
    --csbad-panel: #111017;
    --csbad-panel-2: #17141d;

    --csbad-white: #f7f7fb;
    --csbad-text: #ddd9e4;
    --csbad-muted: #9d97aa;

    --csbad-violet: #8b43a8;
    --csbad-cyan: #12b4d6;
    --csbad-pink: #ea5b78;
    --csbad-red: #ff3b30;

    --csbad-line:
        rgba(255,255,255,.09);

    --csbad-gradient:
        linear-gradient(
            115deg,
            #8b43a8,
            #ea5b78 52%,
            #12b4d6
        );
}

/* ==========================================================================
   DISPLAY ADS
   ========================================================================== */

.csbad-display {
    position:relative;

    max-width:1400px;

    margin:
        20px auto;

    overflow:hidden;

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

    border-radius:22px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(139,67,168,.12),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        );

    color:
        var(--csbad-white);

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

    animation:
        csbadReveal
        .6s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.csbad-display::before {
    content:"";

    position:absolute;

    top:0;
    left:8%;
    right:8%;

    height:1px;

    background:
        var(--csbad-gradient);

    opacity:.65;
}

.csbad-banner {
    display:grid;

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

    min-height:180px;
}

.csbad-banner-media {
    min-height:180px;

    overflow:hidden;

    background:
        #0c0b10;
}

.csbad-banner-media img,
.csbad-banner-media video {
    display:block;

    width:100%;
    height:100%;

    min-height:180px;

    object-fit:cover;
}

.csbad-banner-copy {
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        26px
        clamp(22px,4vw,45px);
}

.csbad-label {
    display:inline-flex;

    width:max-content;

    align-items:center;

    gap:7px;

    padding:
        6px 9px;

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

    border-radius:999px;

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

    color:
        var(--csbad-cyan);

    font-size:.58rem;

    font-weight:900;

    letter-spacing:.13em;
}

.csbad-label::before {
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--csbad-cyan);

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

.csbad-display h3 {
    margin:
        14px 0
        0;

    color:
        var(--csbad-white);

    font-size:
        clamp(
            1.3rem,
            3vw,
            2rem
        );

    line-height:1.1;
}

.csbad-sponsor {
    display:flex;

    align-items:center;

    gap:9px;

    margin-top:9px;

    color:
        var(--csbad-muted);

    font-size:.72rem;
}

.csbad-sponsor-logo {
    width:30px;
    height:30px;

    overflow:hidden;

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

    border-radius:9px;

    background:
        rgba(255,255,255,.03);
}

.csbad-sponsor-logo img {
    width:100%;
    height:100%;

    object-fit:cover;
}

.csbad-cta {
    display:inline-flex;

    width:max-content;

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

    min-height:43px;

    margin-top:18px;

    padding:
        0
        16px;

    border-radius:12px;

    background:
        var(--csbad-gradient);

    color:#fff;

    font-size:.72rem;

    font-weight:850;

    text-decoration:none;

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

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

.csbad-cta:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 20px 46px
        rgba(139,67,168,.28);
}

/* ==========================================================================
   SPONSORED CARD
   ========================================================================== */

.csbad-sponsored-card {
    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;
}

.csbad-sponsored-card-media {
    flex:
        0 0
        120px;

    width:120px;
    height:120px;

    overflow:hidden;

    border-radius:17px;

    background:#0c0b10;
}

.csbad-sponsored-card-media img {
    width:100%;
    height:100%;

    object-fit:cover;
}

.csbad-sponsored-card-copy {
    min-width:0;

    flex:1;
}

/* ==========================================================================
   INTERSTITIAL
   ========================================================================== */

.csbad-overlay[hidden] {
    display:none !important;
}

.csbad-overlay {
    position:fixed;

    z-index:200000;

    inset:0;

    display:grid;

    place-items:center;

    padding:18px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

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

.csbad-overlay.is-open {
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}

.csbad-overlay-backdrop {
    position:absolute;

    inset:0;

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

    backdrop-filter:
        blur(30px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(135%);
}

.csbad-dialog {
    position:relative;

    z-index:2;

    width:
        min(
            780px,
            100%
        );

    max-height:
        calc(100vh - 36px);

    overflow:auto;

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

    border-radius:30px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(139,67,168,.18),
            transparent 37%
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(18,180,214,.06),
            transparent 34%
        ),
        #111017;

    color:
        var(--csbad-white);

    box-shadow:
        0 70px 200px
        rgba(0,0,0,.72);

    transform:
        translateY(24px)
        scale(.965);

    transition:
        transform .34s
        cubic-bezier(.2,.8,.2,1);
}

.csbad-overlay.is-open
.csbad-dialog {
    transform:none;
}

.csbad-dialog-head {
    display:flex;

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

    gap:20px;

    padding:
        23px
        26px;

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

.csbad-dialog-brand {
    display:flex;

    align-items:center;

    gap:12px;
}

.csbad-dialog-logo {
    display:grid;

    place-items:center;

    width:46px;
    height:46px;

    overflow:hidden;

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

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(139,67,168,.28),
            rgba(18,180,214,.12)
        );

    font-weight:950;
}

.csbad-dialog-logo img {
    width:100%;
    height:100%;

    object-fit:cover;
}

.csbad-dialog-brand strong {
    display:block;

    font-size:.82rem;
}

.csbad-dialog-brand small {
    display:block;

    margin-top:3px;

    color:
        var(--csbad-muted);

    font-size:.61rem;
}

.csbad-dialog-body {
    padding:
        clamp(
            22px,
            4vw,
            36px
        );
}

.csbad-dialog-title {
    margin:
        18px 0
        0;

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

    line-height:.95;

    letter-spacing:-.055em;
}

.csbad-media-wrap {
    position:relative;

    margin-top:25px;

    overflow:hidden;

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

    border-radius:20px;

    background:#08080c;
}

.csbad-media-wrap video {
    display:block;

    width:100%;

    max-height:440px;

    background:#000;
}

.csbad-media-wrap audio {
    display:block;

    width:
        calc(100% - 36px);

    margin:
        32px 18px;
}

.csbad-audio-visual {
    display:grid;

    place-items:center;

    min-height:210px;

    background:
        radial-gradient(
            circle,
            rgba(139,67,168,.14),
            transparent 56%
        );
}

.csbad-audio-icon {
    display:grid;

    place-items:center;

    width:85px;
    height:85px;

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

    border-radius:28px;

    color:
        var(--csbad-cyan);

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

    font-size:2rem;

    animation:
        csbadPulse
        1.8s ease-in-out
        infinite;
}

.csbad-progress {
    height:3px;

    margin-top:18px;

    overflow:hidden;

    border-radius:99px;

    background:
        rgba(255,255,255,.06);
}

.csbad-progress > span {
    display:block;

    width:0;
    height:100%;

    border-radius:99px;

    background:
        var(--csbad-gradient);

    transition:
        width .2s linear;
}

.csbad-dialog-actions {
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-top:20px;
}

.csbad-dialog-actions small {
    color:
        var(--csbad-muted);

    font-size:.63rem;
}

.csbad-manual-play,
.csbad-continue {
    display:none;

    min-height:43px;

    padding:
        0
        15px;

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

    border-radius:11px;

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

    color:
        var(--csbad-white);

    cursor:pointer;
}

.csbad-manual-play.is-visible,
.csbad-continue.is-visible {
    display:inline-flex;

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

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

@media(max-width:720px) {

    .csbad-banner {
        grid-template-columns:1fr;
    }

    .csbad-banner-media {
        max-height:220px;
    }

    .csbad-sponsored-card {
        align-items:flex-start;
    }

    .csbad-sponsored-card-media {
        flex-basis:90px;

        width:90px;
        height:90px;
    }

    .csbad-dialog {
        border-radius:22px;
    }

    .csbad-dialog-head {
        padding:18px;
    }

    .csbad-dialog-body {
        padding:20px 17px;
    }

    .csbad-dialog-actions {
        align-items:stretch;

        flex-direction:column;
    }

    .csbad-cta {
        width:100%;
    }
}

@media(max-width:470px) {

    .csbad-display {
        border-radius:17px;
    }

    .csbad-sponsored-card {
        flex-direction:column;
    }

    .csbad-sponsored-card-media {
        width:100%;
        height:180px;

        flex-basis:auto;
    }

    .csbad-overlay {
        padding:8px;
    }

    .csbad-dialog {
        max-height:
            calc(100vh - 16px);

        border-radius:18px;
    }
}

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

@keyframes csbadReveal {

    from {
        opacity:0;

        transform:
            translateY(16px)
            scale(.985);
    }

    to {
        opacity:1;

        transform:none;
    }
}

@keyframes csbadPulse {

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

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

    50% {
        transform:scale(1.04);

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

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

    .csbad-display,
    .csbad-dialog,
    .csbad-audio-icon {
        animation:none !important;
        transition:none !important;
    }
}