/* ==========================================================================
   CSB PODCAST — LIVE PEOPLE EXPERIENCE
   COMPACT PREMIUM 2028
   MOBILE BIO FIX
   ========================================================================== */

.live-room .live-room-shell {
    width:min(
        1460px,
        calc(100% - 84px)
    ) !important;

    margin:0 auto !important;
}

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

.live-room .live-room-header {
    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        minmax(290px,360px) !important;

    gap:
        clamp(
            50px,
            7vw,
            100px
        ) !important;

    align-items:center !important;

    min-height:590px;

    padding:
        38px 0
        62px !important;
}

.live-room .live-room-copy {
    max-width:930px !important;

    padding-left:8px;
}

.live-room .live-room-header h1 {
    max-width:920px !important;

    margin-top:18px !important;

    font-size:
        clamp(
            3.8rem,
            6vw,
            6.7rem
        ) !important;

    line-height:.84 !important;

    letter-spacing:-.068em !important;
}

.live-room .live-description {
    max-width:760px;

    margin-top:24px;

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

    font-size:.90rem;

    line-height:1.82;
}

/* ==========================================================================
   PHOTO PRINCIPALE DU LIVE
   ========================================================================== */

.live-room .live-room-cover {
    position:relative;

    width:
        min(
            350px,
            100%
        ) !important;

    aspect-ratio:4 / 5 !important;

    justify-self:end !important;

    overflow:visible !important;

    margin:0 !important;

    border:0 !important;

    border-radius:30px !important;

    transform:none !important;

    background:transparent !important;

    box-shadow:none !important;
}

.live-room .live-room-cover > img {
    position:relative;
    z-index:2;

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

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

    border-radius:30px;

    box-shadow:
        0 50px 125px
        rgba(0,0,0,.48);

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

.live-room .live-room-cover:hover > img {
    transform:
        translateY(-6px)
        scale(1.012);

    filter:
        saturate(1.05)
        contrast(1.02);
}

.live-cover-glow {
    position:absolute;

    z-index:0;

    inset:
        10%
        -8%
        -8%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(139,67,168,.20),
            rgba(234,91,120,.06) 42%,
            transparent 72%
        );

    filter:blur(48px);

    opacity:.48;

    pointer-events:none;

    animation:
        liveCoverGlow
        5s ease-in-out
        infinite alternate;
}

.live-room .live-room-cover figcaption {
    position:absolute;
    z-index:5;

    right:14px;
    bottom:14px;
    left:14px;

    display:flex;

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

    gap:10px;

    min-height:48px;

    padding:
        9px
        12px;

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

    border-radius:13px;

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

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

.live-room
.live-room-cover figcaption span {
    color:#EA5B78;

    font-size:.45rem;

    font-weight:900;

    letter-spacing:.12em;
}

.live-room
.live-room-cover figcaption strong {
    color:
        rgba(247,247,251,.66);

    font-size:.50rem;

    font-weight:750;
}

/* ==========================================================================
   ÉQUIPE LIVE
   ========================================================================== */

.live-people-showcase {
    position:relative;

    margin-bottom:
        clamp(
            30px,
            5vw,
            58px
        );

    padding:
        clamp(
            25px,
            3.5vw,
            42px
        );

    overflow:hidden;

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

    border-radius:28px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(139,67,168,.085),
            transparent 30%
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(18,180,214,.025),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.004)
        );

    box-shadow:
        0 32px 100px
        rgba(0,0,0,.15);
}

.live-people-showcase::before {
    content:"";

    position:absolute;

    top:0;
    left:11%;
    right:11%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8B43A8,
            #EA5B78,
            #12B4D6,
            transparent
        );

    opacity:.55;
}

/* ==========================================================================
   HEADER ÉQUIPE
   ========================================================================== */

.live-people-header {
    display:flex;

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

    gap:30px;

    margin-bottom:28px;
}

.live-section-kicker {
    color:#12B4D6;

    font-size:.48rem;

    font-weight:900;

    letter-spacing:.17em;
}

.live-people-header h2 {
    margin:
        9px 0
        0;

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

    font-size:
        clamp(
            2.5rem,
            4.5vw,
            4.5rem
        );

    line-height:.90;

    letter-spacing:-.055em;
}

.live-people-header h2 span {
    color:transparent;

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

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

.live-people-header p {
    max-width:600px;

    margin:
        11px 0
        0;

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

    font-size:.66rem;

    line-height:1.65;
}

/* ==========================================================================
   COMPTEURS
   ========================================================================== */

.live-people-stats {
    display:flex;

    gap:6px;
}

.live-people-stats > span {
    min-width:88px;

    padding:
        10px
        12px;

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

    border-radius:12px;

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

    color:#8F8999;

    font-size:.43rem;

    text-align:center;
}

.live-people-stats strong {
    display:block;

    margin-bottom:2px;

    color:#F7F7FB;

    font-size:.90rem;
}

/* ==========================================================================
   GROUPES
   ========================================================================== */

.live-people-group + .live-people-group {
    margin-top:27px;

    padding-top:25px;

    border-top:
        1px solid
        rgba(255,255,255,.05);
}

.live-people-group-title {
    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:13px;
}

.live-people-group-title > span {
    display:grid;

    place-items:center;

    width:37px;
    height:37px;

    border-radius:11px;

    font-size:.56rem;

    font-weight:900;
}

.live-people-group-title > span.moderator {
    border:
        1px solid
        rgba(18,180,214,.15);

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

    color:#12B4D6;
}

.live-people-group-title > span.guest {
    border:
        1px solid
        rgba(234,91,120,.15);

    background:
        rgba(234,91,120,.035);

    color:#EA5B78;
}

.live-people-group-title strong,
.live-people-group-title small {
    display:block;
}

.live-people-group-title strong {
    font-size:.67rem;
}

.live-people-group-title small {
    margin-top:2px;

    color:#8F8999;

    font-size:.44rem;
}

/* ==========================================================================
   GRID PROFILS
   ========================================================================== */

.live-people-grid {
    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:10px;
}

/* ==========================================================================
   CARTE PROFIL
   ========================================================================== */

.live-person-card {
    position:relative;

    display:grid;

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

    align-items:center;

    min-height:120px;

    overflow:hidden;

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

    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.015),
            rgba(255,255,255,.004)
        );

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.08);

    transition:
        transform .3s
        cubic-bezier(.2,.8,.2,1),
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.live-person-card:hover {
    transform:
        translateY(-4px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.022),
            rgba(139,67,168,.012)
        );

    box-shadow:
        0 25px 65px
        rgba(0,0,0,.18);
}

.live-person-card.is-moderator:hover {
    border-color:
        rgba(18,180,214,.18);
}

.live-person-card.is-guest:hover {
    border-color:
        rgba(234,91,120,.18);
}

/* ==========================================================================
   PETITE PHOTO PROFIL
   ========================================================================== */

.live-person-photo {
    position:relative;

    width:76px;
    height:76px;

    margin-left:13px;

    overflow:hidden;

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

    border-radius:18px;

    background:#121017;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.20);
}

.live-person-photo::after {
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            transparent 40%,
            rgba(7,7,10,.16)
        );

    pointer-events:none;
}

.live-person-photo img {
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:
        transform .45s ease,
        filter .35s ease;
}

.live-person-card:hover
.live-person-photo img {
    transform:scale(1.07);

    filter:saturate(1.06);
}

.live-person-fallback {
    display:grid;

    place-items:center;

    width:100%;
    height:100%;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(139,67,168,.22),
            #111017 75%
        );

    color:#F7F7FB;

    font-family:Georgia,serif;

    font-size:1.8rem;
}

/* ==========================================================================
   ROLE
   ========================================================================== */

.live-person-role {
    position:absolute;
    z-index:4;

    right:4px;
    bottom:4px;
    left:4px;

    display:flex;

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

    min-height:20px;

    padding:
        0
        5px;

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

    border-radius:7px;

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

    font-size:.32rem;

    font-weight:900;

    letter-spacing:.08em;

    white-space:nowrap;

    backdrop-filter:blur(9px);
}

.is-moderator .live-person-role {
    color:#70DCEF;
}

.is-guest .live-person-role {
    color:#FF93AA;
}

/* ==========================================================================
   INFOS
   ========================================================================== */

.live-person-info {
    min-width:0;

    padding:
        15px
        15px
        15px
        11px;
}

.live-person-info h3 {
    margin:0;

    overflow:hidden;

    color:#F7F7FB;

    font-size:.82rem;

    line-height:1.2;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.live-person-info > p {
    min-height:0;

    margin:
        5px 0
        0;

    overflow:hidden;

    color:#8F8999;

    font-size:.49rem;

    line-height:1.45;

    text-overflow:ellipsis;

    white-space:nowrap;
}

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

.live-person-bio-button {
    display:inline-flex;

    align-items:center;

    gap:7px;

    width:auto;

    min-height:32px;

    margin-top:11px;

    padding:
        0
        9px;

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

    border-radius:9px;

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

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

    font-size:.44rem;

    font-weight:800;

    cursor:pointer;

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

.live-person-bio-button:hover {
    transform:
        translateY(-2px);

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

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

    color:#12B4D6;
}

/* ==========================================================================
   BIO MODAL
   ========================================================================== */

.live-bio-modal[hidden] {
    display:none !important;
}

.live-bio-modal {
    position:fixed;

    z-index:200000;

    inset:0;

    display:grid;

    place-items:center;

    padding:20px;

    overflow:auto;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

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

.live-bio-modal.is-open {
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}

.live-bio-backdrop {
    position:fixed;

    inset:0;

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

    backdrop-filter:
        blur(18px)
        saturate(120%);
}

/* ==========================================================================
   BIO DIALOG DESKTOP
   ========================================================================== */

.live-bio-dialog {
    position:relative;
    z-index:2;

    display:grid;

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

    width:
        min(
            760px,
            100%
        );

    max-height:
        min(
            500px,
            calc(100vh - 50px)
        );

    overflow:hidden;

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

    border-radius:24px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(139,67,168,.12),
            transparent 36%
        ),
        #0E0D13;

    box-shadow:
        0 55px 160px
        rgba(0,0,0,.68);

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

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

.live-bio-modal.is-open
.live-bio-dialog {
    transform:none;
}

/* ==========================================================================
   BIO PHOTO DESKTOP
   ========================================================================== */

.live-bio-visual {
    position:relative;

    min-height:420px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(139,67,168,.12),
            #09080D 72%
        );
}

.live-bio-visual::after {
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(7,7,10,.68)
        );
}

.live-bio-visual img {
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    background:#09080D;
}

.live-bio-visual > span {
    position:absolute;
    z-index:2;

    left:14px;
    bottom:14px;

    padding:
        7px
        9px;

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

    border-radius:999px;

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

    color:#12B4D6;

    font-size:.41rem;

    font-weight:900;

    letter-spacing:.10em;

    backdrop-filter:blur(10px);
}

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

.live-bio-content {
    display:flex;

    min-width:0;

    flex-direction:column;

    justify-content:center;

    padding:
        34px
        38px;

    overflow-y:auto;
}

.live-bio-content h2 {
    margin:
        10px 0
        0;

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

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

    line-height:.92;

    letter-spacing:-.05em;
}

.live-bio-job {
    margin:
        11px 0
        0;

    color:#12B4D6;

    font-size:.60rem;

    font-weight:800;
}

.live-bio-text {
    margin-top:18px;

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

    font-size:.66rem;

    line-height:1.72;

    white-space:pre-line;

    overflow-wrap:anywhere;
}

.live-bio-done {
    align-self:flex-start;

    min-height:38px;

    margin-top:22px;

    padding:
        0
        12px;

    border:0;

    border-radius:10px;

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

    color:white;

    font-size:.50rem;

    font-weight:850;

    cursor:pointer;

    box-shadow:
        0 14px 35px
        rgba(139,67,168,.18);
}

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

.live-bio-close {
    position:absolute;
    z-index:20;

    top:12px;
    right:12px;

    display:grid;

    place-items:center;

    width:37px;
    height:37px;

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

    border-radius:10px;

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

    color:white;

    font-size:1rem;

    cursor:pointer;

    backdrop-filter:blur(12px);
}

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

.live-person-card.people-reveal {
    opacity:0;

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

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

.live-person-card.people-reveal.is-visible {
    opacity:1;

    transform:none;
}

/* ==========================================================================
   ANIMATION
   ========================================================================== */

@keyframes liveCoverGlow {
    from {
        opacity:.30;

        transform:
            translate3d(
                -8px,
                4px,
                0
            )
            scale(.97);
    }

    to {
        opacity:.55;

        transform:
            translate3d(
                10px,
                -7px,
                0
            )
            scale(1.04);
    }
}

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

@media(max-width:1200px) {

    .live-room .live-room-header {
        grid-template-columns:
            minmax(0,1fr)
            290px !important;
    }

    .live-room .live-room-cover {
        width:290px !important;
    }

    .live-people-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}

/* ==========================================================================
   TABLET / SMALL LAPTOP
   ========================================================================== */

@media(max-width:900px) {

    .live-room .live-room-shell {
        width:
            calc(100% - 38px)
            !important;
    }

    .live-room .live-room-header {
        grid-template-columns:1fr !important;

        min-height:0;

        gap:30px !important;

        padding-top:30px !important;
    }

    .live-room .live-room-cover {
        width:
            min(
                340px,
                100%
            ) !important;

        justify-self:start !important;
    }

    .live-people-header {
        align-items:flex-start;

        flex-direction:column;
    }
}

/* ==========================================================================
   MOBILE — IMPORTANT BIO IMAGE FIX
   ========================================================================== */

@media(max-width:680px) {

    .live-room .live-room-shell {
        width:
            calc(100% - 22px)
            !important;
    }

    .live-room .live-room-header {
        padding-top:
            24px !important;

        padding-bottom:
            42px !important;
    }

    .live-room .live-room-header h1 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.8rem
            ) !important;
    }

    .live-room .live-room-cover {
        width:100% !important;

        max-width:430px;

        aspect-ratio:
            16 / 11
            !important;

        justify-self:center !important;
    }

    /* ----------------------------------------------------------
       PEOPLE
       ---------------------------------------------------------- */

    .live-people-showcase {
        padding:
            20px
            14px;

        border-radius:20px;
    }

    .live-people-grid {
        grid-template-columns:1fr;
    }

    .live-person-card {
        grid-template-columns:
            82px
            minmax(0,1fr);

        min-height:108px;
    }

    .live-person-photo {
        width:68px;
        height:68px;

        margin-left:10px;

        border-radius:15px;
    }

    .live-person-info {
        padding:
            12px
            12px
            12px
            8px;
    }

    .live-people-stats {
        width:100%;
    }

    .live-people-stats > span {
        flex:1;
    }

    /* ==========================================================
       BIO MODAL MOBILE
       ========================================================== */

    .live-bio-modal {
        display:flex;

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

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

        overflow-y:auto;

        overscroll-behavior:contain;
    }

    .live-bio-dialog {
        display:flex;

        width:
            min(
                430px,
                100%
            );

        max-height:none;

        min-height:0;

        margin:auto;

        flex-direction:column;

        overflow:hidden;

        border-radius:21px;

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

    /*
     * Le conteneur devient une vraie zone portrait.
     * Il n'impose plus un recadrage horizontal.
     */
    .live-bio-visual {
        position:relative;

        width:100%;

        height:auto;

        min-height:0;
        max-height:none;

        aspect-ratio:
            4 / 4.6;

        flex:
            0 0 auto;

        display:grid;

        place-items:center;

        overflow:hidden;

        background:
            radial-gradient(
                circle at 50% 35%,
                rgba(139,67,168,.17),
                rgba(10,9,14,.98) 72%
            );
    }

    /*
     * FIX PRINCIPAL :
     * contain affiche toute la photo sans couper
     * la tête, les cheveux ou les épaules.
     */
    .live-bio-visual img {
        position:relative;
        z-index:1;

        width:100%;
        height:100%;

        padding:0;

        object-fit:contain !important;

        object-position:
            center center !important;

        background:
            #09080D;
    }

    /*
     * Pas de sombre trop agressif sur la photo mobile.
     */
    .live-bio-visual::after {
        z-index:2;

        background:
            linear-gradient(
                180deg,
                transparent 65%,
                rgba(7,7,10,.42)
            );
    }

    .live-bio-visual > span {
        z-index:3;

        left:12px;
        bottom:12px;

        padding:
            6px
            8px;

        font-size:.39rem;
    }

    /*
     * Zone texte séparée et lisible.
     */
    .live-bio-content {
        display:block;

        padding:
            24px
            20px
            22px;

        overflow:visible;

        background:
            radial-gradient(
                circle at 100% 0,
                rgba(139,67,168,.08),
                transparent 35%
            ),
            #0E0D13;
    }

    .live-bio-content h2 {
        max-width:
            calc(100% - 15px);

        margin-top:9px;

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

        line-height:.93;
    }

    .live-bio-job {
        margin-top:10px;

        font-size:.57rem;

        line-height:1.45;
    }

    .live-bio-text {
        margin-top:17px;

        font-size:.64rem;

        line-height:1.72;
    }

    .live-bio-done {
        width:100%;

        min-height:42px;

        margin-top:20px;

        justify-content:center;
    }

    /*
     * Le bouton fermer reste visible
     * par-dessus l'image.
     */
    .live-bio-close {
        position:absolute;

        top:10px;
        right:10px;

        width:38px;
        height:38px;

        border-radius:11px;

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

        box-shadow:
            0 8px 25px
            rgba(0,0,0,.25);
    }
}

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

@media(max-width:430px) {

    .live-bio-modal {
        padding:
            max(
                8px,
                env(safe-area-inset-top)
            )
            8px
            max(
                8px,
                env(safe-area-inset-bottom)
            );
    }

    .live-bio-dialog {
        width:100%;

        border-radius:18px;
    }

    /*
     * Un peu moins haute sur les très petits écrans,
     * mais toujours sans recadrage grâce à contain.
     */
    .live-bio-visual {
        aspect-ratio:
            4 / 4.2;
    }

    .live-bio-content {
        padding:
            20px
            17px
            18px;
    }

    .live-bio-text {
        font-size:.62rem;
    }
}

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

@media(
    max-width:900px
)
and
(
    orientation:landscape
)
and
(
    max-height:600px
) {

    .live-bio-modal {
        align-items:flex-start;

        overflow-y:auto;
    }

    .live-bio-dialog {
        display:grid;

        grid-template-columns:
            minmax(190px,35%)
            minmax(0,65%);

        width:
            min(
                760px,
                96vw
            );

        margin:auto;

        flex-direction:initial;
    }

    .live-bio-visual {
        width:100%;

        height:
            min(
                470px,
                calc(100dvh - 24px)
            );

        aspect-ratio:auto;
    }

    .live-bio-visual img {
        object-fit:contain !important;
    }

    .live-bio-content {
        padding:
            25px
            26px;

        overflow-y:auto;
    }
}

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

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

    .live-person-card.people-reveal {
        opacity:1;

        transform:none;
    }

    .live-cover-glow {
        animation:none;
    }

    .live-bio-dialog {
        transition:none;
    }
}