/* ==========================================================================
   CSB PODCAST — FICHE ÉMISSION
   PREMIUM IMMERSIVE 2026
   ========================================================================== */

#csb-show {
    --csp-bg:#07070A;
    --csp-panel:#111017;
    --csp-panel-2:#17141D;

    --csp-white:#F7F7FB;
    --csp-text:#DCD8E2;
    --csp-muted:#96909F;

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

    --csp-line:rgba(255,255,255,.08);

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

    position:relative;

    min-height:100vh;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 82% 2%,
            rgba(139,67,168,.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 2% 50%,
            rgba(18,180,214,.04),
            transparent 28%
        ),
        #07070A;

    color:var(--csp-white);
}

#csb-show *,
#csb-show *::before,
#csb-show *::after {
    box-sizing:border-box;
}

#csb-show::before {
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.26;

    background-image:
        linear-gradient(
            rgba(255,255,255,.016) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.016) 1px,
            transparent 1px
        );

    background-size:
        78px 78px;

    mask-image:
        linear-gradient(
            #000,
            transparent 78%
        );
}

.csp-shell {
    position:relative;

    width:
        min(
            1480px,
            calc(100% - 42px)
        );

    margin:auto;

    padding:
        38px 0
        90px;
}

/* ==========================================================================
   ICON
   ========================================================================== */

.csp-icon {
    fill:none;

    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ==========================================================================
   TOPLINE
   ========================================================================== */

.csp-topline {
    display:flex;

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

    gap:20px;

    padding-bottom:30px;

    border-bottom:
        1px solid
        var(--csp-line);
}

.csp-back {
    display:inline-flex;

    align-items:center;

    gap:9px;

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

    font-size:.65rem;

    font-weight:780;

    text-decoration:none;

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

.csp-back
.csp-icon {
    transform:
        rotate(180deg);

    transition:
        transform .2s ease;
}

.csp-back:hover {
    color:var(--csp-cyan);
}

.csp-back:hover
.csp-icon {
    transform:
        rotate(180deg)
        translateX(4px);
}

.csp-brand {
    color:var(--csp-white);

    font-family:Georgia,serif;

    font-size:.68rem;

    font-weight:900;

    letter-spacing:.14em;
}

.csp-brand span {
    color:var(--csp-cyan);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.csp-hero {
    display:grid;

    grid-template-columns:
        minmax(370px,.80fr)
        minmax(0,1fr);

    gap:
        clamp(
            55px,
            8vw,
            130px
        );

    align-items:center;

    min-height:
        min(
            760px,
            calc(100vh - 145px)
        );

    padding:
        70px 0
        90px;
}

/* ==========================================================================
   VISUAL
   ========================================================================== */

.csp-visual {
    position:relative;

    width:
        min(
            560px,
            100%
        );

    justify-self:start;

    perspective:1300px;
}

.csp-orbit {
    position:absolute;

    z-index:0;

    inset:-48px;

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

    border-radius:50%;

    animation:
        cspOrbit
        24s linear
        infinite;
}

.csp-orbit::before,
.csp-orbit::after {
    content:"";

    position:absolute;

    border-radius:50%;
}

.csp-orbit::before {
    top:9%;
    left:19%;

    width:9px;
    height:9px;

    background:var(--csp-cyan);

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

.csp-orbit::after {
    right:5%;
    bottom:17%;

    width:7px;
    height:7px;

    background:var(--csp-pink);

    box-shadow:
        0 0 18px
        rgba(234,91,120,.55);
}

.csp-art {
    --shine-x:50%;
    --shine-y:50%;
    --rx:0deg;
    --ry:0deg;

    position:relative;

    z-index:2;

    aspect-ratio:1;

    overflow:hidden;

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

    border-radius:
        clamp(
            30px,
            4vw,
            48px
        );

    transform:
        rotateX(
            var(--rx)
        )
        rotateY(
            var(--ry)
        );

    transform-style:preserve-3d;

    background:var(--csp-panel);

    box-shadow:
        0 60px 150px
        rgba(0,0,0,.52),
        0 0 0 1px
        rgba(255,255,255,.02)
        inset;

    transition:
        transform .16s ease-out;
}

.csp-art::before {
    content:"";

    position:absolute;

    z-index:4;

    inset:0;

    pointer-events:none;

    opacity:.32;

    background:
        radial-gradient(
            circle at
            var(--shine-x)
            var(--shine-y),
            rgba(255,255,255,.30),
            transparent 28%
        );
}

.csp-art::after {
    content:"";

    position:absolute;

    z-index:3;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            transparent 25%,
            transparent 67%,
            rgba(7,7,10,.34)
        );
}

.csp-art img {
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.01);

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

.csp-art:hover img {
    transform:scale(1.055);
}

/* ==========================================================================
   COVER ELEMENTS
   ========================================================================== */

.csp-cover-badge {
    position:absolute;

    z-index:5;

    top:10%;
    right:-20px;

    display:flex;

    align-items:center;

    gap:8px;

    min-height:43px;

    padding:
        0
        13px;

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

    border-radius:12px;

    background:
        rgba(17,16,23,.82);

    color:var(--csp-white);

    font-size:.61rem;

    font-weight:850;

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

    backdrop-filter:
        blur(18px);

    animation:
        cspFloat
        3.7s ease-in-out
        infinite alternate;
}

.csp-cover-badge
.csp-icon {
    color:var(--csp-cyan);
}

.csp-cover-caption {
    position:absolute;

    z-index:5;

    right:20px;
    bottom:20px;
    left:20px;

    display:flex;

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

    gap:16px;

    padding:
        13px
        15px;

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

    border-radius:14px;

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

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.22);
}

.csp-cover-caption
> span {
    color:
        rgba(247,247,251,.73);

    font-size:.48rem;

    font-weight:900;

    letter-spacing:.14em;
}

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

.csp-wave {
    display:flex;

    align-items:center;

    gap:3px;

    height:22px;
}

.csp-wave i {
    display:block;

    width:2px;

    border-radius:99px;

    background:
        linear-gradient(
            to top,
            var(--csp-violet),
            var(--csp-cyan)
        );

    animation:
        cspWave
        1.1s ease-in-out
        infinite alternate;
}

.csp-wave i:nth-child(1) { height:7px; animation-delay:-.9s; }
.csp-wave i:nth-child(2) { height:15px; animation-delay:-.4s; }
.csp-wave i:nth-child(3) { height:9px; animation-delay:-.7s; }
.csp-wave i:nth-child(4) { height:19px; animation-delay:-.2s; }
.csp-wave i:nth-child(5) { height:12px; animation-delay:-.8s; }
.csp-wave i:nth-child(6) { height:21px; animation-delay:-.1s; }
.csp-wave i:nth-child(7) { height:8px; animation-delay:-.55s; }
.csp-wave i:nth-child(8) { height:17px; animation-delay:-.3s; }
.csp-wave i:nth-child(9) { height:11px; animation-delay:-.75s; }
.csp-wave i:nth-child(10) { height:20px; animation-delay:-.15s; }
.csp-wave i:nth-child(11) { height:13px; animation-delay:-.5s; }
.csp-wave i:nth-child(12) { height:6px; animation-delay:-.9s; }

/* ==========================================================================
   HERO COPY
   ========================================================================== */

.csp-copy {
    min-width:0;
}

.csp-meta {
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;
}

.csp-meta > span {
    display:inline-flex;

    align-items:center;

    min-height:29px;

    padding:
        0
        9px;

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

    border-radius:999px;

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

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

    font-size:.52rem;

    font-weight:820;
}

.csp-meta
.csp-category {
    color:var(--csp-cyan);

    border-color:
        rgba(18,180,214,.15);

    background:
        rgba(18,180,214,.035);
}

.csp-eyebrow {
    margin:
        28px 0
        0;

    color:var(--csp-cyan);

    font-size:.57rem;

    font-weight:900;

    letter-spacing:.18em;
}

.csp-copy h1 {
    max-width:900px;

    margin:
        17px 0
        0;

    color:var(--csp-white);

    font-family:
        Georgia,
        serif;

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

    line-height:.84;

    letter-spacing:-.075em;
}

.csp-brand-line {
    width:
        clamp(
            130px,
            23vw,
            330px
        );

    height:2px;

    margin-top:24px;

    background:var(--csp-gradient);

    transform-origin:left;

    animation:
        cspLineReveal
        .95s ease
        both;
}

.csp-description {
    max-width:760px;

    margin:
        27px 0
        0;

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

    font-size:
        clamp(
            .95rem,
            1.3vw,
            1.08rem
        );

    line-height:1.78;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.csp-actions {
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:9px;

    margin-top:34px;
}

.csp-button {
    position:relative;

    display:inline-flex;

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

    gap:10px;

    min-height:50px;

    padding:
        0
        17px;

    overflow:hidden;

    border:0;

    border-radius:13px;

    background:var(--csp-gradient);

    color:white;

    font-size:.69rem;

    font-weight:850;

    text-decoration:none;

    cursor:pointer;

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

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

.csp-button:hover {
    transform:
        translateY(-2px);

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

.csp-button-secondary {
    border:
        1px solid
        var(--csp-line);

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

    color:var(--csp-white);

    box-shadow:none;
}

.csp-button-secondary:hover {
    border-color:
        rgba(18,180,214,.22);

    color:var(--csp-cyan);

    box-shadow:none;
}

.csp-status {
    min-height:18px;

    margin:
        12px 0
        0;

    color:var(--csp-cyan);

    font-size:.61rem;
}

/* ==========================================================================
   SHARE COPY PANEL
   ========================================================================== */

.csp-copy-panel {
    margin-top:13px;

    padding:13px;

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

    border-radius:13px;

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

.csp-copy-panel label {
    display:block;

    margin-bottom:7px;

    color:var(--csp-muted);

    font-size:.56rem;
}

.csp-copy-panel input {
    width:100%;

    min-height:43px;

    padding:
        0
        12px;

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

    border-radius:9px;

    outline:0;

    background:
        #0A090D;

    color:var(--csp-white);

    font-size:.67rem;
}

/* ==========================================================================
   EPISODES SECTION
   ========================================================================== */

.csp-episodes {
    padding:
        clamp(
            65px,
            8vw,
            110px
        )
        0
        20px;

    border-top:
        1px solid
        var(--csp-line);
}

.csp-section-head {
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:35px;

    margin-bottom:27px;
}

.csp-section-head h2 {
    margin:
        10px 0
        0;

    font-family:
        Georgia,
        serif;

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

    line-height:.9;

    letter-spacing:-.06em;
}

.csp-section-head h2 span {
    color:var(--csp-pink);
}

.csp-results {
    margin:
        13px 0
        0;

    color:var(--csp-muted);

    font-size:.65rem;
}

/* ==========================================================================
   EPISODE TOOLS
   ========================================================================== */

.csp-tools {
    display:flex;

    align-items:center;

    gap:7px;
}

.csp-search,
.csp-sort {
    position:relative;

    display:flex;

    align-items:center;

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

    border-radius:12px;

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

.csp-search {
    width:
        min(
            330px,
            40vw
        );
}

.csp-search
.csp-icon {
    position:absolute;

    left:12px;

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

.csp-search input {
    width:100%;

    min-height:43px;

    padding:
        0
        12px
        0
        39px;

    border:0;

    outline:0;

    background:transparent;

    color:var(--csp-white);

    font-size:.66rem;
}

.csp-search input::placeholder {
    color:
        rgba(247,247,251,.32);
}

.csp-sort select {
    min-height:43px;

    padding:
        0
        34px
        0
        11px;

    appearance:none;

    border:0;

    outline:0;

    background:transparent;

    color:var(--csp-white);

    font-size:.62rem;
}

.csp-sort select option {
    background:#111017;
}

/* ==========================================================================
   EPISODE LIST
   ========================================================================== */

.csp-list {
    display:grid;

    gap:10px;

    margin:0;
    padding:0;

    list-style:none;
}

.csp-item {
    opacity:1;

    transform:none;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.csp-item[hidden] {
    display:none !important;
}

.csp-episode {
    --shine-x:50%;
    --shine-y:50%;

    position:relative;

    display:grid;

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

    gap:20px;

    align-items:center;

    min-height:128px;

    padding:
        11px
        14px
        11px
        11px;

    overflow:hidden;

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

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.022),
            rgba(255,255,255,.008)
        );

    color:inherit;

    text-decoration:none;

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

.csp-episode::before {
    content:"";

    position:absolute;

    z-index:0;

    inset:0;

    pointer-events:none;

    opacity:0;

    background:
        radial-gradient(
            circle at
            var(--shine-x)
            var(--shine-y),
            rgba(139,67,168,.12),
            transparent 28%
        );

    transition:
        opacity .2s ease;
}

.csp-episode:hover {
    transform:
        translateX(5px);

    border-color:
        rgba(139,67,168,.20);

    background:
        linear-gradient(
            100deg,
            rgba(139,67,168,.045),
            rgba(18,180,214,.012)
        );

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.16);
}

.csp-episode:hover::before {
    opacity:1;
}

/* ==========================================================================
   THUMBNAIL
   ========================================================================== */

.csp-thumbnail {
    position:relative;

    z-index:1;

    width:105px;
    height:105px;

    overflow:hidden;

    border-radius:14px;

    background:#111017;
}

.csp-thumbnail img {
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .4s ease;
}

.csp-episode:hover
.csp-thumbnail img {
    transform:
        scale(1.06);
}

/* ==========================================================================
   EPISODE COPY
   ========================================================================== */

.csp-episode-copy {
    position:relative;

    z-index:1;

    min-width:0;
}

.csp-episode-meta {
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:7px 13px;

    color:var(--csp-muted);

    font-size:.50rem;

    font-weight:800;
}

.csp-episode-meta
span {
    color:var(--csp-cyan);

    letter-spacing:.11em;
}

.csp-episode-copy h3 {
    margin:
        7px 0
        0;

    color:var(--csp-white);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            1.25rem,
            2.2vw,
            1.9rem
        );

    line-height:1.1;

    letter-spacing:-.025em;
}

.csp-summary {
    display:-webkit-box;

    max-width:850px;

    margin:
        8px 0
        0;

    overflow:hidden;

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

    font-size:.64rem;

    line-height:1.55;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.csp-open {
    position:relative;

    z-index:1;

    display:grid;

    place-items:center;

    width:42px;
    height:42px;

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

    border-radius:12px;

    color:var(--csp-muted);

    transition:
        color .22s ease,
        background .22s ease,
        transform .22s ease;
}

.csp-episode:hover
.csp-open {
    transform:
        translateX(3px);

    border-color:
        rgba(18,180,214,.18);

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

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

/* ==========================================================================
   EMPTY
   ========================================================================== */

.csp-empty {
    display:grid;

    place-items:center;
    align-content:center;

    min-height:330px;

    padding:35px;

    border:
        1px dashed
        rgba(255,255,255,.09);

    border-radius:22px;

    text-align:center;

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

.csp-empty
> .csp-icon {
    width:44px;
    height:44px;

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

.csp-empty h3 {
    margin:
        18px 0
        0;

    font-family:Georgia,serif;

    font-size:1.7rem;
}

.csp-empty p {
    margin:
        8px 0
        0;

    color:var(--csp-muted);
}

.csp-empty
.csp-button {
    margin-top:20px;
}

/* ==========================================================================
   SR ONLY
   ========================================================================== */

.csp-sr-only {
    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;
}

/* ==========================================================================
   REVEAL
   ========================================================================== */

.csp-hero,
.csp-section-head,
.csp-item {
    opacity:0;

    transform:
        translateY(24px);

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

.csp-hero.is-visible,
.csp-section-head.is-visible,
.csp-item.is-visible {
    opacity:1;

    transform:none;
}

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

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

@keyframes cspFloat {
    from {
        transform:
            translateY(-5px);
    }

    to {
        transform:
            translateY(7px);
    }
}

@keyframes cspWave {
    from {
        transform:
            scaleY(.55);

        opacity:.60;
    }

    to {
        transform:
            scaleY(1);

        opacity:1;
    }
}

@keyframes cspLineReveal {
    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }
}

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

@media(max-width:1050px) {

    .csp-hero {
        grid-template-columns:
            minmax(330px,.78fr)
            minmax(0,1fr);

        gap:55px;
    }

    .csp-copy h1 {
        font-size:
            clamp(
                3.5rem,
                7vw,
                6rem
            );
    }
}

@media(max-width:820px) {

    .csp-shell {
        width:
            calc(100% - 30px);
    }

    .csp-hero {
        grid-template-columns:1fr;

        min-height:0;

        padding:
            55px 0
            70px;
    }

    .csp-visual {
        width:
            min(
                560px,
                100%
            );
    }

    .csp-section-head {
        align-items:flex-start;

        flex-direction:column;
    }

    .csp-tools {
        width:100%;
    }

    .csp-search {
        flex:1;

        width:auto;
    }
}

@media(max-width:600px) {

    .csp-shell {
        width:
            calc(100% - 24px);

        padding-top:25px;
    }

    .csp-topline {
        padding-bottom:20px;
    }

    .csp-brand {
        display:none;
    }

    .csp-cover-badge {
        right:10px;
    }

    .csp-cover-caption {
        right:12px;
        bottom:12px;
        left:12px;
    }

    .csp-copy h1 {
        font-size:
            clamp(
                3.2rem,
                17vw,
                5rem
            );
    }

    .csp-actions {
        align-items:stretch;

        flex-direction:column;
    }

    .csp-actions
    .csp-button {
        width:100%;
    }

    .csp-tools {
        display:grid;

        grid-template-columns:1fr;
    }

    .csp-search {
        width:100%;
    }

    .csp-episode {
        grid-template-columns:
            78px
            minmax(0,1fr);

        gap:13px;

        min-height:102px;

        padding:10px;
    }

    .csp-thumbnail {
        width:78px;
        height:78px;
    }

    .csp-open {
        display:none;
    }

    .csp-summary {
        -webkit-line-clamp:1;
    }
}

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

    #csb-show *,
    #csb-show *::before,
    #csb-show *::after {
        animation:none !important;

        transition-duration:.001ms !important;
    }

    .csp-hero,
    .csp-section-head,
    .csp-item {
        opacity:1;

        transform:none;
    }
}