/* =========================================================
   SLY RADIO - FEUILLE DE STYLE GLOBALE
   Regroupement de tous les styles du site
   ========================================================= */


/* =========================================================
   DEDICACES 08 - TICKER
   ========================================================= */


/* =========================================================
   DÉDICACES 08 · AIRWAVE
========================================================= */

.sly-ded08{
    --cyan:#00d9e8;
    --pink:#ff2d8d;
    --black:#080a0d;
    --black2:#101318;
    --white:#f7f8fa;
    --muted:#89909b;

    width:100%;
    position:relative;
    z-index:999;
    font-family:Arial,Helvetica,sans-serif;
}

.sly-ded08 *,
.sly-ded08 *::before,
.sly-ded08 *::after{
    box-sizing:border-box;
}


/* =========================================================
   BARRE
========================================================= */

.sly-ded08__bar{
    width:100%;
    height:43px;
    display:flex;
    align-items:stretch;
    overflow:hidden;
    background:var(--black);
    border-top:1px solid rgba(0,217,232,.35);
    border-bottom:1px solid rgba(255,45,141,.35);
}


/* =========================================================
   BRAND
========================================================= */

.sly-ded08__brand{
    width:137px;
    min-width:137px;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#fff;
    background:var(--pink);
    position:relative;
    font-size:10px;
    font-weight:900;
    letter-spacing:.1em;
}

.sly-ded08__brand::after{
    content:"";
    position:absolute;
    right:-9px;
    top:0;
    width:18px;
    height:43px;
    background:var(--pink);
    clip-path:polygon(0 0,50% 50%,0 100%);
    z-index:4;
}

.sly-ded08__dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 9px rgba(255,255,255,.75);
    animation:slyDed08Blink 1.2s infinite;
}

@keyframes slyDed08Blink{
    0%,100%{
        opacity:1;
    }
    50%{
        opacity:.35;
    }
}


/* =========================================================
   FREQUENCE
========================================================= */

.sly-ded08__freq{
    width:73px;
    min-width:73px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    background:#0e1116;
    border-right:1px solid rgba(255,255,255,.08);
}

.sly-ded08__freq-number{
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:-.03em;
}

.sly-ded08__freq-unit{
    color:var(--cyan);
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}


/* =========================================================
   SIGNAL
========================================================= */

.sly-ded08__signal{
    width:66px;
    min-width:66px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    background:#0b0d11;
    border-right:1px solid rgba(255,255,255,.08);
}

.sly-ded08__signal i{
    width:2px;
    height:8px;
    background:var(--cyan);
    opacity:.65;
    transform-origin:center;
    animation:slyDed08Bars .9s ease-in-out infinite alternate;
}

.sly-ded08__signal i:nth-child(1){animation-delay:-.1s}
.sly-ded08__signal i:nth-child(2){animation-delay:-.4s}
.sly-ded08__signal i:nth-child(3){animation-delay:-.2s}
.sly-ded08__signal i:nth-child(4){animation-delay:-.6s}
.sly-ded08__signal i:nth-child(5){animation-delay:-.3s}
.sly-ded08__signal i:nth-child(6){animation-delay:-.7s}
.sly-ded08__signal i:nth-child(7){animation-delay:-.15s}
.sly-ded08__signal i:nth-child(8){animation-delay:-.5s}
.sly-ded08__signal i:nth-child(9){animation-delay:-.25s}
.sly-ded08__signal i:nth-child(10){animation-delay:-.8s}
.sly-ded08__signal i:nth-child(11){animation-delay:-.35s}
.sly-ded08__signal i:nth-child(12){animation-delay:-.55s}
.sly-ded08__signal i:nth-child(13){animation-delay:-.2s}
.sly-ded08__signal i:nth-child(14){animation-delay:-.65s}
.sly-ded08__signal i:nth-child(15){animation-delay:-.45s}

@keyframes slyDed08Bars{
    from{
        height:4px;
        opacity:.35;
    }
    to{
        height:20px;
        opacity:1;
    }
}


/* =========================================================
   TICKER
========================================================= */

.sly-ded08__viewport{
    flex:1;
    min-width:0;
    overflow:hidden;
    position:relative;
    background:
        linear-gradient(
            90deg,
            rgba(0,217,232,.025),
            transparent 20%,
            transparent 80%,
            rgba(255,45,141,.025)
        );
}

.sly-ded08__viewport::before,
.sly-ded08__viewport::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:38px;
    z-index:3;
    pointer-events:none;
}

.sly-ded08__viewport::before{
    left:0;
    background:linear-gradient(
        90deg,
        var(--black2),
        transparent
    );
}

.sly-ded08__viewport::after{
    right:0;
    background:linear-gradient(
        270deg,
        var(--black2),
        transparent
    );
}

.sly-ded08__track{
    height:43px;
    width:max-content;
    display:flex;
    align-items:center;
    animation:slyDed08Ticker 39s linear infinite;
}

.sly-ded08__viewport:hover .sly-ded08__track{
    animation-play-state:paused;
}

.sly-ded08__message{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 13px;
    white-space:nowrap;
}

.sly-ded08__message b{
    color:var(--cyan);
    font-size:10px;
    font-weight:900;
    letter-spacing:.05em;
}

.sly-ded08__message span{
    color:#d2d5da;
    font-size:10px;
    font-weight:500;
}

.sly-ded08__separator{
    color:var(--pink);
    font-size:14px;
    font-weight:900;
    opacity:.9;
}

@keyframes slyDed08Ticker{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}


/* =========================================================
   SEND
========================================================= */

.sly-ded08__send{
    width:103px;
    min-width:103px;
    border:0;
    border-left:1px solid rgba(255,255,255,.08);
    background:#12151a;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
    transition:
        background .2s ease,
        color .2s ease;
}

.sly-ded08__send-plus{
    width:19px;
    height:19px;
    border:1px solid var(--cyan);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--cyan);
    font-size:14px;
    line-height:1;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.sly-ded08__send:hover{
    background:var(--cyan);
    color:#050607;
}

.sly-ded08__send:hover .sly-ded08__send-plus{
    background:#050607;
    border-color:#050607;
    color:var(--cyan);
}


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

.sly-ded08__toast{
    position:absolute;
    top:50px;
    right:10px;
    padding:9px 13px;
    background:#0b0d10;
    color:#fff;
    border-left:3px solid var(--pink);
    font-size:10px;
    font-weight:700;
    opacity:0;
    visibility:hidden;
    transform:translateY(-5px);
    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
    box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.sly-ded08__toast.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}


/* =========================================================
   FORMULAIRE DÉDICACE · OVERLAY + MODALE
========================================================= */

.sly-ded08__overlay{

    position:fixed;
    inset:0;

    z-index:1000;

    background:rgba(6,4,10,.72);

    backdrop-filter:blur(6px);

    opacity:0;
    visibility:hidden;

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

.sly-ded08__overlay.is-open{
    opacity:1;
    visibility:visible;
}

.sly-ded08__modal{

    position:fixed;
    inset:0;

    z-index:1001;

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

    padding:20px;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

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

.sly-ded08__modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.sly-ded08__modal-box{

    position:relative;

    width:min(460px,100%);

    padding:32px 28px 28px;

    border-radius:22px;

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

    background:
        linear-gradient(
            160deg,
            #1c0f24,
            #0d0712
        );

    box-shadow:0 40px 100px rgba(0,0,0,.6);

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

    transition:transform .3s ease;
}

.sly-ded08__modal.is-open .sly-ded08__modal-box{
    transform:translateY(0) scale(1);
}

.sly-ded08__modal-close{

    position:absolute;
    top:14px;
    right:14px;

    width:32px;
    height:32px;

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

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

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

    color:#fff;

    font-size:17px;
    line-height:1;

    cursor:pointer;

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

.sly-ded08__modal-close:hover{
    background:var(--pink);
    border-color:var(--pink);
}

.sly-ded08__modal-head{
    margin-bottom:20px;
}

.sly-ded08__modal-kicker{

    display:block;

    margin-bottom:8px;

    color:var(--pink);

    font-size:10px;

    font-weight:900;

    letter-spacing:.14em;
}

.sly-ded08__modal-head h2{

    margin:0 0 6px;

    color:#fff;

    font-family:"Space Grotesk",Arial,sans-serif;

    font-size:22px;

    font-weight:800;

    letter-spacing:-.02em;
}

.sly-ded08__modal-head p{

    margin:0;

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

    font-size:12px;

    line-height:1.5;
}

.sly-ded08__field{

    display:block;

    margin-bottom:14px;
}

.sly-ded08__field span{

    display:block;

    margin-bottom:6px;

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

    font-size:10px;

    font-weight:700;

    letter-spacing:.04em;
}

.sly-ded08__field input,
.sly-ded08__field textarea{

    width:100%;

    padding:11px 13px;

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

    border-radius:10px;

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

    color:#fff;

    font-family:inherit;

    font-size:13px;

    outline:none;

    resize:vertical;

    transition:border-color .2s ease;
}

.sly-ded08__field input:focus,
.sly-ded08__field textarea:focus{
    border-color:var(--pink);
}

.sly-ded08__form-tools{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:16px;
}

.sly-ded08__counter{

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

    font-size:10px;

    font-variant-numeric:tabular-nums;
}

.sly-ded08__form-error{

    margin:-6px 0 12px;

    min-height:14px;

    color:#ff6b8b;

    font-size:11px;
}

.sly-ded08__submit{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    padding:13px;

    border:0;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            var(--pink),
            #8f3cff
        );

    color:#fff;

    font-family:inherit;

    font-size:12px;

    font-weight:900;

    letter-spacing:.03em;

    cursor:pointer;

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

.sly-ded08__submit:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
}

.sly-ded08__submit:disabled{
    opacity:.6;
    cursor:default;
    transform:none;
}


/* =========================================================
   SMILEYS
========================================================= */

.sly-ded08__emoji{
    position:relative;
}

.sly-ded08__emoji-toggle{

    display:flex;

    align-items:center;

    gap:6px;

    padding:8px 12px;

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

    border-radius:999px;

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

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

    font-family:inherit;

    font-size:10px;

    font-weight:700;

    cursor:pointer;

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

.sly-ded08__emoji-toggle span{
    font-size:15px;
}

.sly-ded08__emoji-toggle:hover,
.sly-ded08__emoji-toggle[aria-expanded="true"]{
    border-color:var(--pink);
    color:#fff;
}

.sly-ded08__emoji-panel{

    position:absolute;
    left:0;
    bottom:calc(100% + 10px);

    z-index:5;

    width:240px;

    display:grid;
    grid-template-columns:repeat(8,1fr);

    gap:2px;

    padding:10px;

    border-radius:14px;

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

    background:
        linear-gradient(
            160deg,
            rgba(28,15,36,.98),
            rgba(13,7,18,.98)
        );

    box-shadow:0 24px 60px rgba(0,0,0,.55);

    opacity:0;
    visibility:hidden;
    transform:translateY(8px);

    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.sly-ded08__emoji-panel.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.sly-ded08__emoji-panel button{

    width:28px;
    height:28px;

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

    border:0;
    border-radius:8px;

    background:none;

    font-size:16px;

    cursor:pointer;

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

.sly-ded08__emoji-panel button:hover{
    background:rgba(255,255,255,.08);
    transform:scale(1.15);
}

@media(max-width:520px){

    .sly-ded08__modal-box{
        padding:26px 20px 22px;
    }

    .sly-ded08__emoji-panel{
        left:auto;
        right:0;
        width:216px;
        grid-template-columns:repeat(7,1fr);
    }

}


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

@media(max-width:700px){

    .sly-ded08__bar{
        height:40px;
    }

    .sly-ded08__brand{
        width:108px;
        min-width:108px;
        height:40px;
        font-size:8px;
    }

    .sly-ded08__brand::after{
        height:40px;
    }

    .sly-ded08__freq{
        width:57px;
        min-width:57px;
    }

    .sly-ded08__freq-number{
        font-size:9px;
    }

    .sly-ded08__freq-unit{
        font-size:9px;
    }

    .sly-ded08__signal{
        width:45px;
        min-width:45px;
        gap:1px;
    }

    .sly-ded08__signal i{
        width:1px;
    }

    .sly-ded08__track{
        height:40px;
    }

    .sly-ded08__message{
        gap:6px;
        padding:0 10px;
    }

    .sly-ded08__message b{
        font-size:9px;
    }

    .sly-ded08__message span{
        font-size:9px;
    }

    .sly-ded08__send{
        width:78px;
        min-width:78px;
        font-size:8px;
    }

    .sly-ded08__send-plus{
        width:17px;
        height:17px;
        font-size:12px;
    }
}

@media(max-width:450px){

    .sly-ded08__freq{
        display:none;
    }

    .sly-ded08__signal{
        width:42px;
        min-width:42px;
    }

    .sly-ded08__brand{
        width:96px;
        min-width:96px;
    }

    .sly-ded08__send{
        width:70px;
        min-width:70px;
    }

    .sly-ded08__send-plus{
        display:none;
    }
}



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


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

.sly-hero05{

    --pink:#ff2d8d;
    --cyan:#00d9ed;
    --bg:#05060a;

    position:relative;

    width:100%;
    height:100vh;

    min-height:720px;
    max-height:1000px;

    overflow:hidden;

    background:var(--bg);

    color:#fff;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================================
   BACKGROUND
========================================================= */

.sh05-bg{

    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

}


.sh05-bg img{
    width:100%;
    height:100%;

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

    filter:
        brightness(.52)
        saturate(.85)
        contrast(1.08);

    transform:scale(1.08);

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


@keyframes sh05BgIn{

    from{

        opacity:0;

        transform:scale(1.15);

    }

    to{

        opacity:1;

        transform:scale(1.08);

    }

}

.sh05-bg-overlay{
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(255,45,141,.16),
            transparent 40%
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.38),
            rgba(0,0,0,.08) 50%,
            rgba(0,0,0,.42)
        );
}

.sh05-glow{

    position:absolute;

    z-index:2;

    border-radius:50%;

    pointer-events:none;

    filter:blur(35px);

}


.sh05-glow-a{

    width:500px;
    height:500px;

    left:25%;
    top:25%;

    background:
        radial-gradient(
            circle,
            rgba(255,45,141,.17),
            transparent 70%
        );

}


.sh05-glow-b{

    width:450px;
    height:450px;

    right:-200px;
    bottom:-200px;

    background:
        radial-gradient(
            circle,
            rgba(0,217,237,.12),
            transparent 70%
        );

}


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

.sh05-header{

    position:absolute;

    z-index:30;

    top:0;
    left:0;
    right:0;

    height:90px;

    display:flex;

    align-items:center;

    padding:
        0 clamp(25px,4vw,65px);

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

    animation:
        sh05HeaderIn
        .8s
        .15s
        ease
        both;

}


@keyframes sh05HeaderIn{

    from{

        opacity:0;

        transform:translateY(-15px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* LOGO */

.sh05-logo{

    display:flex;

    align-items:baseline;

    gap:7px;

    color:#fff;

    text-decoration:none;

}


.sh05-logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
    color:#fff;
    text-decoration:none;
}

.sh05-logo img{
    display:block;
    width:auto;
    height:110px;
    max-width:190px;
    object-fit:contain;
}

/* NAV */

.sh05-nav{

    display:flex;

    align-items:center;

    gap:
        clamp(20px,2.7vw,42px);

    margin-left:
        clamp(50px,8vw,125px);

}


.sh05-nav a{

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

    text-decoration:none;

    font-size:8px;

    font-weight:900;

    letter-spacing:.12em;

    transition:.2s ease;

}


.sh05-nav a:hover,
.sh05-nav a.active{

    color:#fff;

}


.sh05-nav a.active{

    position:relative;

}


.sh05-nav a.active:after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    bottom:-11px;

    height:2px;

    background:var(--pink);

}


/* =========================================================
   MENUS DÉROULANTS DE NAVIGATION
   ========================================================= */

.sh05-nav-item{

    position:relative;

    display:flex;

    align-items:center;
}

.sh05-nav-trigger{

    display:flex;

    align-items:center;

    gap:7px;

    border:0;

    background:none;

    padding:0;

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

    font-family:inherit;

    font-size:8px;

    font-weight:900;

    letter-spacing:.12em;

    cursor:pointer;

    transition:color .2s ease;
}

.sh05-nav-trigger i:first-child{

    font-size:9px;

    opacity:.75;

    transition:opacity .2s ease;
}

.sh05-nav-caret{

    display:inline-flex;

    font-size:9px;

    opacity:.5;

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

.sh05-nav-trigger:hover,
.sh05-nav-item.is-open .sh05-nav-trigger{

    color:#fff;
}

.sh05-nav-trigger:hover i:first-child,
.sh05-nav-item.is-open .sh05-nav-trigger i:first-child{

    opacity:1;
}

.sh05-nav-item.is-open .sh05-nav-caret{

    transform:rotate(180deg);

    color:var(--nav-pink,#ff2d8d);

    opacity:1;
}

.sh05-dropdown{

    --nav-pink:#ff2d8d;
    --nav-cyan:#00d9ed;
    --nav-violet:#8f3cff;

    position:fixed;

    top:0;
    left:0;

    z-index:2000;

    min-width:220px;

    max-width:92vw;

    padding:20px;

    border-radius:18px;

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

    background:
        linear-gradient(
            160deg,
            rgba(22,11,29,.98),
            rgba(8,4,12,.98)
        );

    backdrop-filter:blur(22px);

    box-shadow:0 30px 80px rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(10px);

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;
}

.sh05-dropdown.is-open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);
}

.sh05-dropdown-glow{

    position:absolute;

    top:-50px;
    left:15%;

    width:220px;
    height:130px;

    background:
        radial-gradient(
            circle,
            rgba(255,45,141,.22),
            transparent 70%
        );

    filter:blur(8px);

    pointer-events:none;
}

.sh05-dropdown-columns{

    position:relative;

    display:grid;

    gap:28px;
}

.sh05-dropdown-columns--1{
    grid-template-columns:minmax(210px,1fr);
}

.sh05-dropdown-columns--2{
    grid-template-columns:repeat(2,minmax(190px,1fr));
}

.sh05-dropdown-columns--3{
    grid-template-columns:repeat(3,minmax(195px,1fr));
}

.sh05-dropdown-col{

    display:flex;

    flex-direction:column;

    gap:2px;

    min-width:0;
}

.sh05-dropdown-title{

    display:block;

    margin:0 0 8px;

    padding-bottom:9px;

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

    color:var(--nav-pink);

    font-size:9px;

    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;

    white-space:nowrap;
}

.sh05-dropdown-title--sub{

    margin-top:16px;

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

.sh05-dropdown-col a{

    display:flex;

    align-items:center;

    gap:10px;

    padding:8px 9px;

    border-radius:10px;

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

    text-decoration:none;

    font-size:11px;

    font-weight:700;

    white-space:nowrap;

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

.sh05-dropdown-col a i{

    width:15px;
    flex-shrink:0;

    text-align:center;

    font-size:10.5px;

    color:var(--nav-cyan);

    transition:color .18s ease;
}

.sh05-dropdown-col a:hover{

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

    color:#fff;

    transform:translateX(2px);
}

.sh05-dropdown-col a:hover i{

    color:var(--nav-pink);
}

@media(max-width:1400px){

    .sh05-dropdown-columns--3{
        grid-template-columns:repeat(2,minmax(190px,1fr));
    }

}


/* HEADER RIGHT */

.sh05-header-right{

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:28px;

}

.sh05-socials{
    display:flex;
    align-items:center;
    gap:16px;
}

.sh05-socials a{
    display:flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

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

    text-decoration:none;

    font-size:15px;

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

.sh05-socials a:hover{
    color:var(--pink);
    transform:translateY(-2px);
}


/* MENU */

.sh05-menu{

    display:flex;

    align-items:center;

    gap:10px;

    border:0;

    background:none;

    color:#fff;

    cursor:pointer;

}


.sh05-menu > span{

    font-size:8px;

    font-weight:900;

    letter-spacing:.12em;

}


.sh05-menu i{

    width:42px;
    height:42px;

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

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

}


.sh05-menu i b{

    width:13px;
    height:1px;

    background:#fff;

}


/* =========================================================
   MAIN
========================================================= */

.sh05-main{

    position:absolute;

    inset:0;

    z-index:10;

    display:grid;

    grid-template-columns:
        29%
        44%
        27%;

    align-items:center;

    padding:
        110px 6vw 95px;

}


/* =========================================================
   LEFT
========================================================= */

.sh05-left{

    animation:
        sh05LeftIn
        1s
        .3s
        cubic-bezier(.2,.8,.2,1)
        both;

}


@keyframes sh05LeftIn{

    from{

        opacity:0;

        transform:translateX(-30px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


.sh05-eyebrow{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:25px;

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

    font-size:9px;

    font-weight:900;

    letter-spacing:.16em;

}


.sh05-dot{

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--pink);

    box-shadow:
        0 0 12px var(--pink);

}


.sh05-eyebrow i{

    width:25px;
    height:1px;

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

}


.sh05-left h1{

    margin:0;

    display:flex;

    flex-direction:column;

    font-size:
        clamp(53px,5.5vw,85px);

    line-height:.8;

    letter-spacing:-.08em;

    font-weight:900;

}


.sh05-left h1 span{

    color:#fff;

}


.sh05-left h1 strong{

    color:var(--pink);

    font-weight:950;

}


.sh05-left p{

    max-width:300px;

    margin:27px 0 0;

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

    font-size:11px;

    line-height:1.7;

}


.sh05-left-actions{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:25px;

}


.sh05-discover{

    display:flex;

    align-items:center;

    gap:9px;

    padding:
        12px 15px;

    background:#cf136b;

    color:#fff;

    text-decoration:none;

    font-size:8px;

    font-weight:900;

    letter-spacing:.11em;

}


.sh05-discover span{

    font-size:14px;

}


.sh05-location{

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

    font-size:9px;

    font-weight:900;

    letter-spacing:.12em;

}


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

.sh05-orbit-area{

    position:relative;

    width:
        min(34vw,495px);

    left:
        clamp(14px,3vw,56px);

    aspect-ratio:1;

    justify-self:center;

    display:flex;

    align-items:center;

    justify-content:center;

    animation:
        sh05OrbitIn
        1.1s
        .4s
        cubic-bezier(.2,.8,.2,1)
        both;

}


@keyframes sh05OrbitIn{

    from{

        opacity:0;

        transform:
            scale(.82)
            rotate(-8deg);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* RINGS */

.sh05-orbit-ring{

    position:absolute;

    border-radius:50%;

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

}


.sh05-ring-outer{

    inset:0;

    animation:
        sh05Rotate 28s
        linear
        infinite;

}


.sh05-ring-middle{

    inset:9%;

    border-color:
        rgba(255,45,141,.24);

    border-style:dashed;

    animation:
        sh05RotateReverse 20s
        linear
        infinite;

}


.sh05-ring-inner{

    inset:20%;

    border-color:
        rgba(0,217,237,.18);

}


@keyframes sh05Rotate{

    to{

        transform:rotate(360deg);

    }

}


@keyframes sh05RotateReverse{

    to{

        transform:rotate(-360deg);

    }

}


/* DOTS */

.sh05-orbit-dots{

    position:absolute;

    inset:0;

    animation:
        sh05Rotate
        28s
        linear
        infinite;

}


.sh05-orbit-dots i{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--pink);

    box-shadow:
        0 0 12px var(--pink);

}


.sh05-orbit-dots i:nth-child(1){

    top:-2px;
    left:50%;

}


.sh05-orbit-dots i:nth-child(2){

    right:-2px;
    top:50%;

}


.sh05-orbit-dots i:nth-child(3){

    bottom:-2px;
    left:50%;

}


.sh05-orbit-dots i:nth-child(4){

    left:-2px;
    top:50%;

}


/* DISC */

.sh05-disc{

    position:relative;

    width:
        62%;

    aspect-ratio:1;

    display:flex;

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

}


.sh05-disc-glow{

    position:absolute;

    inset:-12%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,45,141,.28),
            transparent 68%
        );

    filter:blur(22px);

    animation:
        sh05Pulse
        3s
        ease-in-out
        infinite;

}


@keyframes sh05Pulse{

    0%,100%{

        opacity:.55;

        transform:scale(.95);

    }

    50%{

        opacity:1;

        transform:scale(1.06);

    }

}


.sh05-disc-cover{

    position:relative;

    width:100%;
    height:100%;

    overflow:hidden;

    border-radius:50%;

    border:
        2px solid rgba(255,255,255,.3);

    box-shadow:
        0 30px 90px rgba(0,0,0,.65);

}


.sh05-disc-cover img{

    width:100%;
    height:100%;

    object-fit:cover;

    /* Fond transparent tant qu'aucune cover n'est chargée */
    opacity:0;

    transform:scale(1.18) rotate(-4deg);

    filter:
        saturate(.78)
        contrast(1.08)
        blur(14px);

    transition:
        opacity .45s ease,
        transform .45s cubic-bezier(.4,0,.8,.4),
        filter .45s ease;

    will-change:opacity,transform,filter;

}

/* Entrée : zoom doux + déflouté, avec un léger rebond */
.sh05-disc-cover img.is-visible{

    opacity:1;

    transform:scale(1) rotate(0);

    filter:
        saturate(.78)
        contrast(1.08)
        blur(0);

    transition:
        opacity .7s ease,
        transform .9s cubic-bezier(.16,1,.3,1),
        filter .8s ease;

}

/* Sortie : la cover se rétracte en se floutant */
.sh05-disc-cover img.is-leaving{

    opacity:0;

    transform:scale(.88) rotate(3deg);

    filter:
        saturate(.78)
        contrast(1.08)
        blur(10px);

}

/* Halo qui "respire" à chaque changement de cover */
.sh05-disc.is-changing .sh05-disc-glow{

    animation:sh05CoverBurst .9s ease-out;

}

@keyframes sh05CoverBurst{

    0%{ opacity:.55; transform:scale(.95); }

    35%{ opacity:1; transform:scale(1.18); }

    100%{ opacity:.55; transform:scale(1); }

}

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

    .sh05-disc-cover img,
    .sh05-disc-cover img.is-visible,
    .sh05-disc-cover img.is-leaving{

        transform:none;

        filter:saturate(.78) contrast(1.08);

        transition:opacity .3s ease;

    }

    .sh05-disc.is-changing .sh05-disc-glow{ animation:none; }

}


.sh05-disc-overlay{

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            transparent 20%,
            rgba(0,0,0,.6)
        );

}


.sh05-disc-logo{

    position:absolute;

    top:14%;
    left:50%;

    transform:
        translateX(-50%);

    font-size:18px;

    font-weight:950;

    letter-spacing:-.08em;

}


.sh05-disc-wave{

    position:absolute;

    left:23%;
    right:23%;
    bottom:16%;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:3px;

}


.sh05-disc-wave i{

    width:2px;

    height:
        calc(5px + var(--bar,8px));

    background:#fff;

    animation:
        sh05Bars
        .7s
        ease-in-out
        infinite
        alternate;

}


.sh05-disc-wave i:nth-child(2n){
    --bar:14px;
}

.sh05-disc-wave i:nth-child(3n){
    --bar:20px;
}

.sh05-disc-wave i:nth-child(5n){
    --bar:10px;
}


@keyframes sh05Bars{

    from{
        transform:scaleY(.35);
    }

    to{
        transform:scaleY(1);
    }

}


/* PLAY */

.sh05-disc-play{

    position:absolute;

    width:66px;
    height:66px;

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

    border-radius:50%;

    background:
        rgba(0,0,0,.25);

    backdrop-filter:blur(8px);

    color:#fff;

    font-size:12px;

    cursor:pointer;

    transition:.25s ease;

}


.sh05-disc-play:hover{

    background:var(--pink);

    border-color:var(--pink);

    transform:scale(1.08);

}


/* ORBIT LABELS */

.sh05-orbit-label{

    position:absolute;

    display:flex;

    flex-direction:column;

    gap:4px;

    z-index:5;

}


.sh05-orbit-label span{

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

    font-size:9px;

    font-weight:900;

    letter-spacing:.16em;

}


.sh05-orbit-label strong{

    font-size:13px;

    font-weight:900;

}


.sh05-label-top{

    top:2%;

    left:50%;

    transform:
        translateX(-50%);

    text-align:center;

}


.sh05-label-top strong{

    color:var(--pink);

}


.sh05-label-right{

    right:-5%;

    top:50%;

    transform:
        translateY(-50%);

}


.sh05-label-right strong{

    color:var(--cyan);

}


.sh05-label-bottom{

    bottom:1%;

    left:50%;

    transform:
        translateX(-50%);

    text-align:center;

}


/* =========================================================
   RIGHT
========================================================= */

.sh05-right{

    animation:
        sh05RightIn
        1s
        .55s
        cubic-bezier(.2,.8,.2,1)
        both;

}


@keyframes sh05RightIn{

    from{

        opacity:0;

        transform:translateX(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


.sh05-now-label{

    display:flex;

    align-items:center;

    gap:9px;

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

    font-size:9px;

    font-weight:900;

    letter-spacing:.17em;

}


.sh05-now-label i{

    width:25px;
    height:1px;

    background:var(--pink);

}


.sh05-track{

    margin-top:14px;

}


.sh05-track h2{

    margin:0;

    font-size:
        clamp(20px,2vw,29px);

    line-height:1;

    font-weight:900;

    letter-spacing:-.05em;

}


.sh05-track p{

    margin:6px 0 0;

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

    font-size:10px;

}


/* PROGRESS */

.sh05-progress{

    width:100%;

    height:1px;

    margin-top:20px;

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

}


.sh05-progress span{

    display:block;

    width:36%;

    height:100%;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--cyan)
        );

}


.sh05-times{

    display:flex;

    justify-content:space-between;

    margin-top:6px;

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

    font-family:monospace;

    font-size:9px;

}


/* SHOW */

.sh05-show{

    display:flex;

    flex-direction:column;

    gap:4px;

    margin-top:29px;

    padding-top:17px;

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

}


.sh05-show span{

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

    font-size:9px;

    font-weight:900;

    letter-spacing:.15em;

}


.sh05-show strong{

    font-size:15px;

}


.sh05-show small{

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

    font-size:8px;

}


/* NEXT */

.sh05-next{

    display:grid;

    grid-template-columns:
        1fr
        25px;

    gap:10px;

    align-items:end;

    margin-top:22px;

    padding-top:15px;

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

}


.sh05-next > span{

    grid-column:1 / -1;

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

    font-size:9px;

    font-weight:900;

    letter-spacing:.15em;

}


.sh05-next div{

    display:flex;

    flex-direction:column;

    gap:4px;

}


.sh05-next strong{

    font-size:12px;

}


.sh05-next small{

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

    font-size:8px;

}


.sh05-next b{

    color:var(--pink);

    font-size:18px;

}


/* =========================================================
   BOTTOM
========================================================= */

.sh05-bottom{

    position:absolute;

    z-index:30;

    left:0;
    right:0;
    bottom:0;

    height:47px;

    display:grid;

    grid-template-columns:
        280px
        1fr
        280px;

    align-items:center;

    padding:
        0 clamp(20px,4vw,60px);

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

    background:
        rgba(0,0,0,.2);

    backdrop-filter:blur(10px);

}


.sh05-bottom-left{

    display:flex;

    align-items:center;

    gap:8px;

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

    font-size:9px;

    font-weight:900;

    letter-spacing:.13em;

}


.sh05-bottom-left i{

    width:12px;
    height:1px;

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

}


.sh05-bottom-center{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:2px;

}


.sh05-wave{

    height:10px;

    display:flex;

    align-items:center;

    gap:2px;

}


.sh05-wave i{

    width:2px;

    height:
        calc(3px + var(--h,6px));

    background:var(--pink);

    animation:
        sh05BottomWave
        .7s
        ease-in-out
        infinite
        alternate;

}


.sh05-wave i:nth-child(3n){
    --h:9px;
}

.sh05-wave i:nth-child(5n){
    --h:5px;
}

.sh05-wave i:nth-child(7n){
    --h:12px;
}


@keyframes sh05BottomWave{

    from{
        transform:scaleY(.35);
    }

    to{
        transform:scaleY(1);
    }

}


.sh05-bottom-center span{

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

    font-size:9px;

    font-weight:900;

    letter-spacing:.18em;

}


.sh05-bottom-right{

    display:flex;

    justify-content:flex-end;

    gap:15px;

}


.sh05-bottom-right a{

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

    text-decoration:none;

    font-size:9px;

    font-weight:900;

}


.sh05-bottom-right a:hover{

    color:var(--pink);

}


/* =========================================================
   MENU OVERLAY
========================================================= */

.sh05-overlay{

    position:fixed;

    inset:0;

    z-index:80;

    background:
        rgba(0,0,0,.65);

    backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:.4s ease;

}


.sh05-overlay.open{

    opacity:1;

    visibility:visible;

}


/* =========================================================
   OFFCANVAS
========================================================= */

.sh05-offcanvas{

    position:fixed;

    z-index:100;

    top:0;
    right:0;
    bottom:0;

    width:
        min(500px,92vw);

    background:#08090e;

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

    transform:
        translateX(100%);

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

    box-shadow:
        -30px 0 100px rgba(0,0,0,.5);

}


.sh05-offcanvas.open{

    transform:translateX(0);

}


.sh05-off-header{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:
        0 30px;

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

}


.sh05-off-logo{

    color:#fff;

    text-decoration:none;

    font-size:31px;

    font-weight:950;

    letter-spacing:-.08em;

}


.sh05-off-logo small{

    margin-left:6px;

    font-size:8px;

    letter-spacing:.2em;

}


.sh05-close{

    width:42px;
    height:42px;

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

    border-radius:50%;

    background:transparent;

    color:#fff;

    font-size:27px;

    cursor:pointer;

}


.sh05-close:hover{

    background:#fff;

    color:#111;

}


.sh05-off-content{

    height:
        calc(100% - 90px);

    display:flex;

    flex-direction:column;

    padding:
        38px 35px 25px;

    overflow:auto;

}


.sh05-off-kicker{

    color:var(--pink);

    font-size:9px;

    font-weight:900;

    letter-spacing:.2em;

    margin-bottom:17px;

}


.sh05-off-nav{

    display:flex;

    flex-direction:column;

}


.sh05-off-nav a{

    display:grid;

    grid-template-columns:
        35px
        1fr
        25px;

    align-items:center;

    padding:
        16px 0;

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

    color:#fff;

    text-decoration:none;

    font-size:
        clamp(27px,4vw,40px);

    font-weight:900;

    letter-spacing:-.055em;

    transition:.2s ease;

}


.sh05-off-nav a small{

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

    font-size:9px;

}


.sh05-off-nav a b{

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

    font-size:17px;

}


.sh05-off-nav a:hover{

    color:var(--pink);

    padding-left:7px;

}


.sh05-off-nav a:hover b{

    color:var(--pink);

}


.sh05-off-live{

    margin-top:auto;

    display:grid;

    grid-template-columns:
        48px
        1fr
        35px;

    align-items:center;

    gap:12px;

    padding:10px;

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

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

}


.sh05-off-cover{

    width:48px;
    height:48px;

    overflow:hidden;

}


.sh05-off-cover img{

    width:100%;
    height:100%;

    object-fit:cover;

}


.sh05-off-live > div:nth-child(2){

    display:flex;

    flex-direction:column;

    gap:4px;

}


.sh05-off-live span{

    color:var(--pink);

    font-size:9px;

    font-weight:900;

}


.sh05-off-live strong{

    font-size:11px;

}


.sh05-off-live small{

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

    font-size:9px;

}


.sh05-off-live button{

    width:34px;
    height:34px;

    border:0;

    border-radius:50%;

    background:var(--pink);

    color:#fff;

}


.sh05-off-socials{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:20px;

}


.sh05-off-socials a{

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

    text-decoration:none;

    font-size:8px;

    font-weight:800;

}


.sh05-off-socials a:hover{

    color:#fff;

}


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

@media(max-width:1100px){

    .sh05-nav > :nth-child(4){

        display:none;

    }


    .sh05-socials{

        display:none;

    }


    .sh05-main{

        grid-template-columns:
            28%
            47%
            25%;

        padding-left:5vw;
        padding-right:5vw;

    }


    .sh05-orbit-area{

        width:
            min(39vw,440px);

    }


    .sh05-bottom{

        grid-template-columns:
            220px
            1fr
            220px;

    }

}


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

@media(max-width:760px){

    .sly-hero05{

        height:100svh;

        min-height:700px;

        max-height:none;

    }


    .sh05-bg img{

        object-position:center;

        filter:
            brightness(.28)
            saturate(.55)
            contrast(1.15);

    }


    .sh05-header{

        height:74px;

        padding:
            0 20px;

    }

.sh05-logo img{
    height:38px;
    max-width:155px;
}


    .sh05-nav{

        display:none;

    }


    .sh05-socials{

        display:none;

    }


    .sh05-main{

        display:block;

        padding:
            100px 20px 120px;

    }


    .sh05-left{

        position:relative;

        z-index:5;

        /* le bloc texte recouvre le disque : on le rend
           traversant pour que le play reste cliquable */
        pointer-events:none;

    }


    .sh05-left a{

        pointer-events:auto;

    }


    .sh05-disc-play{

        pointer-events:auto;

    }


    .sh05-left h1{

        font-size:
            clamp(48px,14vw,75px);

    }


    .sh05-left p{

        max-width:270px;

        font-size:10px;

        margin-top:20px;

    }


    .sh05-left-actions{

        margin-top:19px;

    }


    .sh05-orbit-area{

        position:absolute;

        width:310px;

        height:310px;

        left:auto;

        right:-85px;

        top:150px;

        opacity:.48;

        transform:scale(.7);

        transform-origin:center;

    }


    .sh05-right{

        display:none;

    }


    .sh05-bottom{

        height:48px;

        display:grid;

        grid-template-columns:
            80px
            1fr;

        padding:
            0 15px;

    }


    .sh05-bottom-left{

        display:none;

    }


    .sh05-bottom-right{

        display:none;

    }


    .sh05-bottom-center{

        grid-column:1 / -1;

    }


    .sh05-bottom-center span{

        font-size:9px;

    }

}


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

@media(max-width:430px){

    .sh05-main{

        padding:
            95px 20px 110px;

    }


    .sh05-left h1{

        font-size:51px;

    }


    .sh05-orbit-area{

        width:280px;
        height:280px;

        left:auto;

        right:-85px;

        top:170px;

        transform:scale(.65);

    }


    .sh05-left p{

        max-width:245px;

    }


    .sh05-off-header{

        padding:
            0 22px;

    }


    .sh05-off-content{

        padding:
            28px 22px 22px;

    }


    .sh05-off-nav a{

        font-size:28px;

        padding:13px 0;

    }

}


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

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

    .sh05-bg img,
    .sh05-header,
    .sh05-left,
    .sh05-orbit-area,
    .sh05-right,
    .sh05-ring-outer,
    .sh05-ring-middle,
    .sh05-orbit-dots,
    .sh05-disc-glow,
    .sh05-disc-wave i,
    .sh05-wave i{

        animation:none !important;

    }


    .sh05-offcanvas,
    .sh05-overlay{

        transition:none;

    }

}



/* =========================================================
   GENERAL NEWS (DARK GRID)
   ========================================================= */


.sly-dark-grid {

    --sdg-pink: #ff2d8d;
    --sdg-cyan: #00e5ff;
    --sdg-bg: #07080b;
    --sdg-panel: #111318;

    width: 100%;
    max-width: 1400px;

    margin: 35px auto;
    padding: 0 25px;

    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    box-sizing: border-box;

}

.sly-dark-grid * {
    box-sizing: border-box;
}


/* HEADER */

.sdg-header {

    height: 30px;

    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 10px;

}

.sdg-heading {

    display: flex;
    align-items: center;

    gap: 9px;

    white-space: nowrap;

}

.sdg-heading strong {

    font-size: 10px;

    letter-spacing: 2px;

}

.sdg-heading span:last-child {

    color: #8d93a0;

    font-size: 8px;

    letter-spacing: 1px;

}

.sdg-live {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--sdg-pink);

    box-shadow:
        0 0 12px var(--sdg-pink);

    animation:
        sdgLive 1.4s infinite;

}

@keyframes sdgLive {

    50% {
        opacity: .3;
    }

}

.sdg-header-line {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,45,141,.7),
            rgba(0,229,255,.25),
            transparent
        );

}

.sdg-count {

    color: #8d93a0;

    font-size: 8px;

    letter-spacing: 1px;

}

.sdg-count b {

    color: var(--sdg-cyan);

}

.sdg-empty {

    padding: 40px 0;

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

    font-size: 11px;

    text-align: center;

}


/* =========================================================
   SLIDER (VIEWPORT + TRACK)
   ========================================================= */

.sdg-viewport {

    overflow: hidden;

    --sdg-visible: 4;

    /* laisse le défilement vertical au navigateur, le glissement
       horizontal est géré par generalnews.js */
    touch-action: pan-y;

}

.sdg-image img {

    -webkit-user-drag: none;

    user-select: none;

}

.sdg-grid {

    display: flex;

    gap: 6px;

    will-change: transform;

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

}

.sdg-card {

    position: relative;

    overflow: hidden;

    flex: 0 0 calc((100% - (var(--sdg-visible) - 1) * 6px) / var(--sdg-visible));

    height: 270px;

    background: var(--sdg-panel);

    cursor: default;

    min-width: 0;

    animation:
        sdgCardIn .45s ease;

}

@keyframes sdgCardIn {

    from {
        opacity: .35;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.sdg-card:hover {

    transform:
        translateY(-3px);

}


/* IMAGE */

.sdg-image {

    position: absolute;

    inset: 0;

}

.sdg-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .78;

    transition:
        transform .7s ease,
        opacity .4s;

}

.sdg-card:hover .sdg-image img {

    transform: scale(1.06);

    opacity: .92;

}


/* OVERLAY */

.sdg-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.08),
            rgba(0,0,0,.9)
        ),

        linear-gradient(
            90deg,
            rgba(0,0,0,.25),
            transparent
        );

}


/* NUMBER */

.sdg-number {

    position: absolute;

    top: 15px;
    left: 15px;

    font-size: 10px;

    font-weight: 800;

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

}


/* CONTENT */

.sdg-content {

    position: absolute;

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

}

.sdg-meta {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 6px;

}

.sdg-meta span {

    color: var(--sdg-cyan);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.3px;

}

.sdg-meta small {

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

    font-size: 9px;

}

.sdg-content h2 {

    margin: 0;

    font-size: 15px;

    line-height: 1.12;

    letter-spacing: -.3px;

}

.sdg-content h2 a {

    color: inherit;

    text-decoration: none;

}

.sdg-content h2 a:hover {

    text-decoration: underline;

}

.sdg-open {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 9px;

    padding: 0;

    border: 0;

    background: transparent;

    color: white;

    text-decoration: none;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    cursor: pointer;

}

.sdg-open b {

    width: 19px;
    height: 19px;

    display: flex;

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

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

    border-radius: 50%;

    font-size: 9px;

    transition: .25s;

}

.sdg-open:hover b {

    background: var(--sdg-pink);

    border-color: var(--sdg-pink);

}


/* FOOTER */

.sdg-footer {

    height: 38px;

    display: flex;

    align-items: center;

    gap: 18px;

}

.sdg-label {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 220px;

    color: #8d93a0;

    font-size: 9px;

    letter-spacing: 1px;

    white-space: nowrap;

}

.sdg-label span {

    color: var(--sdg-pink);

    font-weight: 800;

}

.sdg-label i {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--sdg-cyan);

}

.sdg-progress {

    flex: 1;

    height: 1px;

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

}

.sdg-progress span {

    display: block;

    height: 100%;

    width: 25%;

    background:
        linear-gradient(
            90deg,
            var(--sdg-pink),
            var(--sdg-cyan)
        );

    transition:
        width .4s;

}

.sdg-navigation {

    display: flex;

    gap: 5px;

}

.sdg-navigation.is-hidden {

    display: none;

}

.sdg-footer.no-slide .sdg-progress {

    display: none;

}

.sdg-navigation button {

    width: 27px;
    height: 27px;

    border-radius: 50%;

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

    background:
        transparent;

    color: white;

    cursor: pointer;

    transition: .25s;

}

.sdg-navigation button:hover {

    background:
        var(--sdg-pink);

    border-color:
        var(--sdg-pink);

}

.sdg-navigation button:disabled {

    opacity: .3;

    cursor: default;

    background: transparent;
    border-color: rgba(255,255,255,.15);

}


/* RESPONSIVE */

@media (max-width: 800px) {

    .sdg-viewport {
        --sdg-visible: 2;
    }

    .sdg-card {
        height: 290px;
    }

    .sdg-content h2 {

        font-size: 20px;

    }

    .sdg-footer {

        gap: 10px;

    }

    .sdg-label {

        display: none;

    }

}

@media (max-width: 520px) {

    .sly-dark-grid {

        padding: 0 12px;

    }

    .sdg-heading span:last-child {

        display: none;

    }

    .sdg-viewport {
        --sdg-visible: 1;
    }

    .sdg-card {
        height: 300px;
    }

}



/* =========================================================
   NEWSRADIO (NEWS 22)
   ========================================================= */

/* =========================================================
   SLY NEWS 22 · VIOLET EDITORIAL
   ========================================================= */

:root{
    --n22-bg:#17091f;
    --n22-bg-deep:#100615;
    --n22-bg-light:#24102f;

    --n22-surface:#281333;
    --n22-surface-2:#32183e;
    --n22-surface-hover:#3b1c49;

    --n22-text:#ffffff;
    --n22-soft:#d3c8d8;
    --n22-muted:#a895ad;
    --n22-light:#765f7d;

    --n22-line:rgba(255,255,255,.11);

    --n22-pink:#ff2d8d;
    --n22-cyan:#00d9ed;
    --n22-violet:#9c4dff;

    --n22-shadow:0 20px 55px rgba(0,0,0,.28);

    --n22-radius:8px;
}


/* =========================================================
   GLOBAL
   ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#100615;
    color:var(--n22-text);
    font-family:'DM Sans',sans-serif;
}

img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

button{
    font:inherit;
}

button,
article{
    -webkit-tap-highlight-color:transparent;
}


/* =========================================================
   MODULE
   ========================================================= */

.sly-news22{
    position:relative;

    width:100%;
    max-width:none;

    margin:0;
    padding:
        85px
        max(22px,calc((100vw - 1180px) / 2))
        80px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(156,77,255,.17),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(255,45,141,.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #24102f 0%,
            #17091f 45%,
            #100615 100%
        );

    overflow:hidden;
    isolation:isolate;
}


/* =========================================================
   TOP ORGANIC SEPARATOR
   ========================================================= */

.sly-news22::before{
    content:"";

    position:absolute;

    top:-1px;
    left:-3%;
    width:106%;
    height:75px;

    z-index:5;

    background:#100615;

    clip-path:polygon(
        0 0,
        100% 0,
        100% 35%,
        96% 42%,
        92% 35%,
        87% 51%,
        82% 43%,
        77% 59%,
        71% 45%,
        65% 53%,
        59% 38%,
        52% 52%,
        45% 40%,
        38% 57%,
        31% 42%,
        24% 52%,
        17% 37%,
        10% 48%,
        4% 35%,
        0 43%
    );
}


/* =========================================================
   BOTTOM ORGANIC SEPARATOR
   ========================================================= */

.sly-news22::after{
    content:"";

    position:absolute;

    bottom:-1px;
    left:-3%;
    width:106%;
    height:70px;

    z-index:5;

    background:#100615;

    clip-path:polygon(
        0 65%,
        5% 52%,
        11% 63%,
        17% 43%,
        24% 57%,
        31% 39%,
        38% 54%,
        45% 42%,
        52% 61%,
        59% 45%,
        66% 57%,
        73% 40%,
        80% 54%,
        87% 42%,
        94% 58%,
        100% 45%,
        100% 100%,
        0 100%
    );
}


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

.n22-header{
    position:relative;
    z-index:10;

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

    gap:25px;

    padding-bottom:18px;

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

.n22-brand{
    display:flex;
    align-items:center;

    gap:10px;

    color:#fff;

    font-family:'Space Grotesk',sans-serif;
    font-size:11px;
    font-weight:700;

    letter-spacing:1.3px;
    text-transform:uppercase;
}

.n22-logo{
    position:relative;

    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    background:
        linear-gradient(
            135deg,
            var(--n22-pink),
            var(--n22-violet)
        );

    color:white;

    font-size:12px;

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

.n22-logo::after{
    content:"";

    position:absolute;

    right:-4px;
    bottom:-4px;

    width:9px;
    height:9px;

    background:var(--n22-cyan);
}

.n22-header-right{
    display:flex;
    align-items:center;

    gap:20px;
}

.n22-date,
.n22-live{
    font-family:'Space Grotesk',sans-serif;

    font-size:8px;
    font-weight:700;

    letter-spacing:.7px;
    text-transform:uppercase;
}

.n22-date{
    color:var(--n22-muted);
}

.n22-live{
    display:flex;
    align-items:center;

    gap:7px;

    color:#fff;
}

.n22-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--n22-pink);

    box-shadow:
        0 0 0 4px rgba(255,45,141,.12),
        0 0 18px rgba(255,45,141,.7);
}


/* =========================================================
   INTRO
   ========================================================= */

.n22-intro{
    position:relative;
    z-index:10;

    display:flex;

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

    gap:30px;

    padding:38px 0 25px;
}

.n22-kicker{
    display:flex;
    align-items:center;

    gap:9px;

    margin-bottom:11px;

    color:var(--n22-pink);

    font-family:'Space Grotesk',sans-serif;

    font-size:9px;
    font-weight:700;

    letter-spacing:1.4px;
    text-transform:uppercase;
}

.n22-kicker::before{
    content:"";

    width:27px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--n22-pink),
            var(--n22-cyan)
        );

    box-shadow:
        0 0 12px rgba(255,45,141,.3);
}

.n22-title{
    margin:0;

    color:#fff;

    font-family:'Space Grotesk',sans-serif;

    font-size:54px;
    line-height:.88;

    letter-spacing:-2.8px;
    text-transform:uppercase;
}

.n22-title span{
    color:var(--n22-pink);

    text-shadow:
        0 0 30px rgba(255,45,141,.25);
}

.n22-intro-text{
    max-width:360px;

    margin:0 0 3px;

    color:var(--n22-muted);

    font-size:10px;
    line-height:1.65;
}


/* =========================================================
   FILTERS
   ========================================================= */

.n22-filters{
    position:relative;
    z-index:10;

    display:flex;
    align-items:center;

    gap:7px;

    /* Marge interne : évite que l'ombre et le contour des filtres
       soient rognés par le overflow du conteneur. */
    padding:6px 10px;
    margin:-6px -10px 11px;

    overflow-x:auto;

    scrollbar-width:none;
}

.n22-filters::-webkit-scrollbar{
    display:none;
}

.n22-filter{
    flex:none;

    height:31px;

    padding:0 14px;

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

    border-radius:100px;

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

    color:var(--n22-muted);

    cursor:pointer;

    font-family:'Space Grotesk',sans-serif;

    font-size:8px;
    font-weight:700;

    letter-spacing:.7px;

    text-transform:uppercase;

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

.n22-filter:hover{
    color:#fff;

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

    border-color:
        rgba(255,255,255,.3);
}

.n22-filter:focus-visible{
    outline:2px solid rgba(255,45,141,.7);
    outline-offset:2px;
}

.n22-filter.active{
    background:
        linear-gradient(
            90deg,
            var(--n22-pink),
            #b946ff
        );

    border-color:transparent;

    color:#fff;

    box-shadow:
        0 6px 18px rgba(255,45,141,.22);
}

.n22-filter.active:hover{
    background:
        linear-gradient(
            90deg,
            var(--n22-pink),
            #b946ff
        );
}


/* =========================================================
   MAIN BOARD
   ========================================================= */

.n22-board{
    position:relative;
    z-index:10;

    display:grid;

    grid-template-columns:
        1.55fr
        .72fr
        .72fr;

    gap:10px;
}

.n22-empty{

    position:relative;
    z-index:10;

    padding:60px 0;

    color:var(--n22-muted);

    font-size:12px;

    text-align:center;
}


/* =========================================================
   CARD BASE
   ========================================================= */

.n22-card{
    position:relative;

    display:block;

    overflow:hidden;

    color:inherit;
    text-decoration:none;

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

    border-radius:var(--n22-radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    box-shadow:var(--n22-shadow);

    cursor:pointer;

    isolation:isolate;

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

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

    border-color:
        rgba(255,45,141,.35);

    box-shadow:
        0 25px 60px rgba(0,0,0,.4),
        0 0 0 1px rgba(255,45,141,.05);
}

.n22-card-image{
    position:relative;

    overflow:hidden;

    background:#21102a;
}

.n22-card-image::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(16,6,21,0) 30%,
            rgba(16,6,21,.15) 50%,
            rgba(16,6,21,.88) 100%
        );

    pointer-events:none;
}

.n22-card-image img{
    transition:
        transform .65s ease,
        filter .4s ease;
}

.n22-card:hover
.n22-card-image img{
    transform:scale(1.055);

    filter:saturate(1.08);
}


/* =========================================================
   FEATURE
   ========================================================= */

.n22-feature{
    grid-row:span 2;

    min-height:410px;
}

.n22-feature .n22-card-image{
    height:410px;
}

.n22-feature-content{
    position:absolute;

    z-index:3;

    left:0;
    right:0;
    bottom:0;

    padding:22px 21px 20px;

    color:white;
}

.n22-category{
    display:inline-flex;
    align-items:center;

    height:22px;

    padding:0 9px;

    margin-bottom:10px;

    background:
        linear-gradient(
            90deg,
            var(--n22-pink),
            #b946ff
        );

    color:white;

    font-family:'Space Grotesk',sans-serif;

    font-size:9px;
    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;
}

.n22-feature-title{
    max-width:590px;

    margin:0;

    font-family:'Space Grotesk',sans-serif;

    font-size:28px;
    line-height:1.05;

    letter-spacing:-.7px;

    font-weight:700;
}

.n22-feature-meta{
    display:flex;
    align-items:center;

    gap:7px;

    margin-top:10px;

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

    font-family:'Space Grotesk',sans-serif;

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

    letter-spacing:.45px;

    text-transform:uppercase;
}


/* =========================================================
   VERTICAL CARDS
   ========================================================= */

.n22-vertical{
    min-height:201px;
}

.n22-vertical .n22-card-image{
    height:201px;
}

.n22-vertical-content{
    position:absolute;

    z-index:3;

    left:0;
    right:0;
    bottom:0;

    padding:14px 13px 13px;

    color:white;
}

.n22-vertical .n22-category{
    height:19px;

    padding:0 7px;

    margin-bottom:7px;

    font-size:9px;
}

.n22-vertical-title{
    margin:0;

    font-family:'Space Grotesk',sans-serif;

    font-size:14px;
    line-height:1.08;

    font-weight:700;

    letter-spacing:-.25px;
}

.n22-vertical-meta{
    margin-top:6px;

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

    font-family:'Space Grotesk',sans-serif;

    font-size:9px;

    font-weight:600;

    text-transform:uppercase;
}


/* =========================================================
   LOWER CARDS
   ========================================================= */

.n22-lower{
    grid-column:1 / -1;

    display:grid;

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

    gap:10px;
}

.n22-small{
    display:grid;

    grid-template-columns:
        42% 58%;

    min-height:137px;

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

    box-shadow:none;
}

.n22-small:hover{
    transform:translateY(-3px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.3);
}

.n22-small .n22-card-image{
    height:137px;
}

.n22-small .n22-card-image::after{
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(16,6,21,.15)
        );
}

.n22-small-content{
    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;

    padding:14px;
}

.n22-small .n22-category{
    width:max-content;

    height:18px;

    padding:0 6px;

    margin-bottom:7px;

    font-size:9px;
}

.n22-small-title{
    margin:0;

    color:#fff;

    font-family:'Space Grotesk',sans-serif;

    font-size:13px;
    line-height:1.12;

    font-weight:700;
}

.n22-small-description{
    margin:6px 0 0;

    color:var(--n22-muted);

    font-size:8.5px;

    line-height:1.4;
}

.n22-small-meta{
    margin-top:7px;

    color:var(--n22-light);

    font-family:'Space Grotesk',sans-serif;

    font-size:9px;

    font-weight:600;

    letter-spacing:.35px;

    text-transform:uppercase;
}


/* =========================================================
   BOTTOM BAR
   ========================================================= */

.n22-bottom{
    position:relative;
    z-index:10;

    display:flex;

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

    gap:20px;

    margin-top:17px;

    padding-top:13px;

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

.n22-bottom-left{
    display:flex;
    align-items:center;

    gap:9px;

    color:#fff;

    font-family:'Space Grotesk',sans-serif;

    font-size:8px;
    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;
}

.n22-line{
    width:27px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--n22-pink),
            var(--n22-cyan)
        );

    box-shadow:
        0 0 10px rgba(255,45,141,.25);
}

.n22-bottom-right{
    color:var(--n22-muted);

    font-family:'Space Grotesk',sans-serif;

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

    text-transform:uppercase;
}


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

@media(max-width:900px){

    .sly-news22{
        padding:
            75px 22px 65px;
    }

    .n22-board{
        grid-template-columns:
            1.4fr
            .8fr
            .8fr;
    }

    .n22-feature{
        min-height:360px;
    }

    .n22-feature .n22-card-image{
        height:360px;
    }

    .n22-feature-title{
        font-size:24px;
    }

    .n22-vertical,
    .n22-vertical .n22-card-image{
        min-height:175px;
        height:175px;
    }

    .n22-lower{
        grid-template-columns:
            repeat(2,1fr);
    }
}


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

@media(max-width:650px){

    .sly-news22{
        padding:
            70px 13px 58px;
    }

    .sly-news22::before{
        height:58px;
    }

    .sly-news22::after{
        height:55px;
    }

    .n22-header{
        align-items:flex-start;

        flex-direction:column;

        gap:13px;
    }

    .n22-header-right{
        width:100%;

        justify-content:space-between;
    }

    .n22-intro{
        display:block;

        padding:
            28px 0 21px;
    }

    .n22-title{
        font-size:43px;
        letter-spacing:-2px;
    }

    .n22-intro-text{
        margin-top:14px;
    }

    .n22-board{
        display:block;
    }

    .n22-feature{
        min-height:0;
        margin-bottom:10px;
    }

    .n22-feature .n22-card-image{
        height:280px;
    }

    .n22-feature-content{
        padding:
            18px 16px 16px;
    }

    .n22-feature-title{
        font-size:22px;
    }

    /* Les cartes verticales adoptent la présentation des petites
       cartes : pleine largeur, image à gauche, texte à droite. */
    .n22-vertical{
        display:grid;

        grid-template-columns:
            42% 58%;

        height:auto;

        min-height:125px;

        margin-bottom:10px;

        box-shadow:none;
    }

    .n22-vertical .n22-card-image{
        height:125px;

        min-height:0;
    }

    .n22-vertical .n22-card-image::after{
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(16,6,21,.15)
            );
    }

    .n22-vertical-content{
        position:static;

        display:flex;

        flex-direction:column;

        justify-content:center;

        min-width:0;

        padding:14px;
    }

    .n22-vertical .n22-category{
        width:max-content;

        height:18px;

        padding:0 6px;
    }

    .n22-vertical-title{
        font-size:13px;

        line-height:1.12;
    }

    .n22-vertical-meta{
        margin-top:7px;

        color:var(--n22-light);

        letter-spacing:.35px;
    }

    .n22-lower{
        display:block;
    }

    .n22-small{
        margin-bottom:10px;

        min-height:125px;
    }

    .n22-small .n22-card-image{
        height:125px;
    }

    .n22-bottom{
        align-items:flex-start;

        flex-direction:column;

        gap:8px;
    }
}


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

@media(max-width:390px){

    .n22-title{
        font-size:37px;
    }

    .n22-feature .n22-card-image{
        height:245px;
    }

    .n22-feature-title{
        font-size:20px;
    }

    .n22-vertical-title{
        font-size:12px;
    }

    .n22-vertical,
    .n22-small{
        grid-template-columns:
            38% 62%;
    }

    .n22-small-title{
        font-size:12px;
    }
}



/* =========================================================
   ARTIST BLOC (ARTIST 01)
   ========================================================= */


/* =========================================================
   ARTISTE 01 · ARTIST SPOTLIGHT
========================================================= */

.sly-artist01{

    --bg:#f3f3f1;
    --surface:#ffffff;
    --text:#111216;
    --muted:#6b6d73;
    --line:#d9d9d5;
    --pink:#c4115f;

    width:100%;

    background:var(--bg);

    color:var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow:hidden;

    box-sizing:border-box;
}


.sly-artist01 *,
.sly-artist01 *::before,
.sly-artist01 *::after{

    box-sizing:border-box;
}


/* =========================================================
   INNER
========================================================= */

.sly-artist01__inner{

    width:100%;

    min-height:390px;

    display:grid;

    grid-template-columns:
        minmax(280px,42%)
        1fr;
}


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

.sly-artist01__visual{

    position:relative;

    min-height:390px;

    overflow:hidden;

    background:#17181c;
}


.sly-artist01__visual img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    filter:
        grayscale(100%)
        contrast(1.08);

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


.sly-artist01:hover
.sly-artist01__visual img{

    transform:scale(1.035);
}


.sly-artist01__visual-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.04) 20%,
            rgba(0,0,0,.68) 100%
        );
}


.sly-artist01__number{

    position:absolute;

    left:24px;
    bottom:-13px;

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

    font-size:
        clamp(120px,16vw,210px);

    line-height:.75;

    font-weight:1000;

    letter-spacing:-.12em;

    user-select:none;
}


.sly-artist01__visual-label{

    position:absolute;

    left:24px;
    top:24px;

    padding:7px 9px;

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

    color:#fff;

    font-size:9px;

    font-weight:900;

    letter-spacing:.2em;
}


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

.sly-artist01__content{

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;
}


/* =========================================================
   TOP
========================================================= */

.sly-artist01__top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding-bottom:17px;

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


.sly-artist01__eyebrow{

    color:var(--pink);

    font-size:8px;

    font-weight:900;

    letter-spacing:.2em;
}


.sly-artist01__genre{

    color:var(--muted);

    font-size:9px;

    font-weight:800;

    letter-spacing:.16em;
}


/* =========================================================
   TITLE
========================================================= */

.sly-artist01__title{

    margin-top:27px;
}


.sly-artist01__title > span{

    display:block;

    margin-bottom:2px;

    color:var(--muted);

    font-size:9px;

    font-weight:800;

    letter-spacing:.2em;
}


.sly-artist01__title h2{

    margin:0;

    font-size:
        clamp(60px,8vw,112px);

    line-height:.76;

    letter-spacing:-.09em;

    font-weight:1000;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.sly-artist01__description{

    max-width:570px;

    margin:
        24px
        0
        27px;

    color:#5e6066;

    font-size:11px;

    line-height:1.6;
}


/* =========================================================
   TRACK
========================================================= */

.sly-artist01__track{

    display:flex;

    align-items:center;

    gap:14px;

    padding:
        10px;

    background:var(--surface);

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

    box-shadow:
        0 10px 30px rgba(0,0,0,.045);
}


.sly-artist01__track-cover{

    position:relative;

    flex:0 0 53px;

    width:53px;
    height:53px;

    overflow:hidden;
}


.sly-artist01__track-cover img{

    width:100%;
    height:100%;

    object-fit:cover;
}


.sly-artist01__play{

    position:absolute;

    inset:0;

    display:flex;

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

    border:0;

    background:rgba(0,0,0,.38);

    color:#fff;

    font-size:13px;

    cursor:pointer;

    opacity:0;

    transition:opacity .2s ease;
}


.sly-artist01__track:hover
.sly-artist01__play{

    opacity:1;
}


.sly-artist01__track-info{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:4px;
}


.sly-artist01__track-info span{

    color:var(--pink);

    font-size:9px;

    font-weight:900;

    letter-spacing:.17em;
}


.sly-artist01__track-info strong{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:11px;

    font-weight:900;
}


.sly-artist01__track-info small{

    color:var(--muted);

    font-size:8px;
}


.sly-artist01__track-time{

    margin-left:auto;

    color:var(--muted);

    font-size:8px;

    font-weight:700;
}


/* =========================================================
   META
========================================================= */

.sly-artist01__meta{

    display:flex;

    align-items:stretch;

    margin-top:18px;

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

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


.sly-artist01__meta > div{

    flex:1;

    min-width:0;

    padding:
        12px 14px;

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


.sly-artist01__meta > div:first-child{

    padding-left:0;
}


.sly-artist01__meta > div:last-child{

    border-right:0;
}


.sly-artist01__meta small{

    display:block;

    margin-bottom:5px;

    color:var(--muted);

    font-size:9px;

    font-weight:900;

    letter-spacing:.16em;
}


.sly-artist01__meta strong{

    display:block;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:8px;

    font-weight:900;
}


/* =========================================================
   ACTIONS
========================================================= */

.sly-artist01__actions{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:20px;
}


.sly-artist01__actions button,
.sly-artist01__actions a{

    min-height:34px;

    padding:
        0
        14px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:13px;

    font-size:9px;

    font-weight:900;

    letter-spacing:.13em;

    text-decoration:none;

    cursor:pointer;

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


.sly-artist01__actions button{

    border:1px solid var(--pink);

    background:var(--pink);

    color:#fff;
}


.sly-artist01__actions button:hover{

    background:#111216;

    border-color:#111216;
}


.sly-artist01__actions button span{

    font-size:9px;
}


.sly-artist01__actions a{

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

    color:var(--text);
}


.sly-artist01__actions a:hover{

    border-color:var(--text);

    background:var(--text);

    color:#fff;
}


.sly-artist01__actions a span{

    font-size:12px;
}


/* =========================================================
   PLAY STATE
========================================================= */

.sly-artist01__slide.is-playing
.sly-artist01__play{

    opacity:1;

    background:rgba(255,45,141,.8);
}


.sly-artist01__slide.is-playing
.sly-artist01__actions button{

    background:#111216;

    border-color:#111216;
}


/* =========================================================
   SLIDER
========================================================= */

.sly-artist01__viewport{

    width:100%;

    overflow:hidden;
}


.sly-artist01__track{

    display:flex;

    width:100%;

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


.sly-artist01__slide{

    flex:0 0 100%;

    min-width:0;
}


.sly-artist01__nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    padding:14px 20px;

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


.sly-artist01__arrow{

    width:38px;
    height:38px;

    border:1px solid var(--text);

    background:transparent;

    color:var(--text);

    font-size:14px;

    cursor:pointer;

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


.sly-artist01__arrow:hover{

    background:var(--text);

    color:#fff;
}


.sly-artist01__dots{

    display:flex;

    gap:8px;
}


.sly-artist01__dot{

    width:22px;
    height:4px;

    padding:0;

    border:0;

    background:var(--line);

    cursor:pointer;

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


.sly-artist01__dot.is-active{

    width:38px;

    background:var(--pink);
}


.sly-artist01__count{

    min-width:60px;

    color:var(--muted);

    font-size:10px;

    font-weight:900;

    letter-spacing:.16em;

    text-align:center;
}


@media(max-width:560px){

    .sly-artist01__nav{
        gap:12px;
        padding:12px 14px;
    }

    .sly-artist01__dot{
        width:14px;
    }

    .sly-artist01__dot.is-active{
        width:26px;
    }
}


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

@media(max-width:850px){

    .sly-artist01__inner{

        grid-template-columns:
            36%
            1fr;
    }


    .sly-artist01__visual{

        min-height:360px;
    }


    .sly-artist01__content{

        padding:
            30px;
    }


    .sly-artist01__title h2{

        font-size:
            clamp(52px,8vw,80px);
    }


    .sly-artist01__description{

        font-size:10px;
    }

}


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

@media(max-width:620px){

    .sly-artist01__inner{

        display:block;
    }


    .sly-artist01__visual{

        height:270px;

        min-height:270px;
    }


    .sly-artist01__visual-label{

        left:18px;
        top:18px;
    }


    .sly-artist01__number{

        left:18px;

        font-size:130px;
    }


    .sly-artist01__content{

        padding:
            28px 20px
            32px;
    }


    .sly-artist01__top{

        align-items:flex-start;

        flex-direction:column;

        gap:9px;

        padding-bottom:14px;
    }


    .sly-artist01__title{

        margin-top:22px;
    }


    .sly-artist01__title h2{

        font-size:
            clamp(58px,18vw,90px);
    }


    .sly-artist01__description{

        margin:
            19px 0
            22px;

        font-size:10px;
    }


    .sly-artist01__track{

        padding:8px;
    }


    .sly-artist01__track-cover{

        flex-basis:48px;

        width:48px;
        height:48px;
    }


    .sly-artist01__track-time{

        display:none;
    }


    .sly-artist01__meta{

        overflow:hidden;
    }


    .sly-artist01__meta > div{

        padding:
            11px 8px;
    }


    .sly-artist01__meta > div:first-child{

        padding-left:0;
    }


    .sly-artist01__meta small{

        font-size:9px;
    }


    .sly-artist01__meta strong{

        font-size:9px;
    }


    .sly-artist01__actions{

        flex-direction:column;

        align-items:stretch;

        gap:9px;

        margin-top:16px;
    }


    .sly-artist01__actions button,
    .sly-artist01__actions a{

        width:100%;
    }

}



/* =========================================================
   SCHEDULE BLOC (PROGRAM CARDS 02)
   ========================================================= */


/* =========================================================
   SLY PROGRAM CARDS 02
========================================================= */

.sly-program-cards-02 {

    --spc02-pink: #ff2d8d;
    --spc02-cyan: #00e5ff;

    /* NOUVEL UNIVERS */
    --spc02-bg: #111329;
    --spc02-bg-deep: #0b0c1d;
    --spc02-bg-light: #191b3b;

    --spc02-card: #171a35;
    --spc02-card-hover: #20244a;

    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;

    padding:
        85px
        max(22px, calc((100vw - 1400px) / 2))
        75px;

    color: white;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(156,77,255,.18),
            transparent 28%
        ),
        radial-gradient(
            circle 420px at 88% 45%,
            rgba(0,229,255,.08),
            transparent
        ),
        linear-gradient(
            180deg,
            #191b3b 0%,
            #111329 48%,
            #0b0c1d 100%
        );

    overflow: hidden;
    isolation: isolate;
}

.sly-program-cards-02 *,
.sly-program-cards-02 *::before,
.sly-program-cards-02 *::after {
    box-sizing: border-box;
}


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

.spc02-header {

    height: 30px;

    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 10px;

}

.spc02-title {

    display: flex;
    align-items: center;

    gap: 8px;

}

.spc02-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--spc02-pink);

    box-shadow:
        0 0 10px var(--spc02-pink);

}

.spc02-title div {

    display: flex;
    flex-direction: column;

    gap: 2px;

}

.spc02-title strong {

    font-size: 10px;

    letter-spacing: 2px;

}

.spc02-title small {

    color: #5b6069;

    font-size: 9px;

    letter-spacing: 1px;

}

.spc02-line {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,45,141,.7),
            rgba(0,229,255,.25),
            transparent
        );

}

.spc02-date {

    color: #656a72;

    font-size: 8px;

    letter-spacing: 1px;

}


/* =========================================================
   DAYS
========================================================= */

.spc02-days {

    display: flex;

    gap: 4px;

    margin-bottom: 8px;

}

.spc02-days button {

    width: 55px;
    height: 43px;

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

    background:
        #0c0e12;

    color: #555a63;

    display: flex;

    flex-direction: column;

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

    gap: 2px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    cursor: pointer;

    transition: .25s;

}

.spc02-days button span {

    font-size: 13px;

    color: #858991;

    letter-spacing: 0;

}

.spc02-days button:hover {

    border-color:
        rgba(255,45,141,.4);

}

.spc02-days button.active {

    border-color:
        var(--spc02-pink);

    background:
        linear-gradient(
            145deg,
            rgba(255,45,141,.16),
            rgba(0,229,255,.04)
        );

    color:
        var(--spc02-pink);

}

.spc02-days button.active span {

    color: white;

}


/* =========================================================
   PROGRAM CARDS
========================================================= */

.spc02-programs {

    display: grid;

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

    gap: 5px;

}

.spc02-programs.is-hidden {
    display: none;
}

.spc02-empty {

    padding: 40px 0;

    color: #63676f;

    font-size: 11px;

    text-align: center;
}

.spc02-card {

    position: relative;

    min-width: 0;

    height: 245px;

    background:
        var(--spc02-card);

    overflow: hidden;

    cursor: pointer;

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

    transition:
        transform .35s ease,
        border-color .35s ease;

}

.spc02-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(255,255,255,.13);

}

.spc02-card.active {

    border-color:
        rgba(255,45,141,.55);

}


/* IMAGE */

.spc02-card-image {

    position: relative;

    height: 125px;

    overflow: hidden;

}

.spc02-card-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(7,8,11,.85)
        );

}

.spc02-card-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .68;

    transition:
        transform .6s ease,
        opacity .35s;

}

.spc02-card:hover
.spc02-card-image img {

    transform:
        scale(1.07);

    opacity: .85;

}

.spc02-card-image > span {

    position: absolute;

    top: 10px;
    left: 10px;

    z-index: 2;

    color:
        white;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

}

.spc02-card-image .spc02-live {

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 5px 7px;

    background:
        rgba(0,0,0,.65);

    font-size: 9px;

    color:
        var(--spc02-pink);

}

.spc02-live i {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--spc02-pink);

    box-shadow:
        0 0 8px var(--spc02-pink);

    animation:
        spc02Pulse 1.3s infinite;

}

@keyframes spc02Pulse {

    50% {
        opacity: .25;
    }

}


/* CONTENT */

.spc02-card-info {

    padding:
        15px 14px;

}

.spc02-card-info small {

    color:
        var(--spc02-cyan);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.3px;

}

.spc02-card-info h3 {

    margin:
        7px 0 6px;

    font-size: 15px;

    line-height: 1.08;

    letter-spacing: -.4px;

}

.spc02-card-info p {

    margin: 0;

    color:
        #626770;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .8px;

}

.spc02-time {

    position: absolute;

    left: 14px;
    bottom: 13px;

    display: flex;

    align-items: center;

    gap: 6px;

    color:
        #777c84;

    font-size: 9px;

    font-weight: 700;

}

.spc02-time i {

    width: 15px;

    height: 1px;

    background:
        #444850;

}

.spc02-active-line {

    position: absolute;

    left: 0;
    right: 0;

    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--spc02-pink),
            var(--spc02-cyan)
        );

}


/* =========================================================
   FOOTER
========================================================= */

.spc02-footer {

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.spc02-footer > div {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #8b919b;

    font-size: 9px;

    letter-spacing: 1px;

}

.spc02-footer > div span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--spc02-pink);

}

.spc02-footer button {

    border: 0;

    background: transparent;

    color: #9aa0a9;

    font-size: 9px;

    letter-spacing: 1px;

    cursor: pointer;

}

.spc02-footer a {

    color: #9aa0a9;

    font-size: 9px;

    letter-spacing: 1px;

    text-decoration: none;

    transition: color .2s;

}

.spc02-footer a:hover {

    color: #fff;

}

.spc02-footer a b {

    color:
        var(--spc02-pink);

    margin-left: 5px;

}

.spc02-footer button b {

    color:
        var(--spc02-pink);

    margin-left: 5px;

}


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

@media (max-width: 1050px) {

    .spc02-programs {

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

    }

    .spc02-card {

        height: 220px;

    }

}


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

@media (max-width: 650px) {

    .sly-program-cards-02 {

        padding: 0 12px;

    }

    .spc02-date {

        display: none;

    }

    .spc02-days {

        overflow-x: auto;

        scrollbar-width: none;

        padding-bottom: 3px;

    }

    .spc02-days::-webkit-scrollbar {

        display: none;

    }

    .spc02-days button {

        flex: 0 0 48px;

    }

    .spc02-programs {

        display: flex;

        overflow-x: auto;

        gap: 6px;

        scrollbar-width: none;

        scroll-snap-type: x mandatory;

        padding-bottom: 5px;

    }

    .spc02-programs::-webkit-scrollbar {

        display: none;

    }

    .spc02-card {

        flex:
            0 0 205px;

        height: 235px;

        scroll-snap-align: start;

    }

}


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

@media (max-width: 420px) {

    .spc02-card {

        flex-basis: 185px;

    }

    .spc02-card-image {

        height: 110px;

    }

    .spc02-card-info h3 {

        font-size: 14px;

    }

    .spc02-footer > div {

        display: none;

    }

    .spc02-footer {

        justify-content: flex-end;

    }

}



/* =========================================================
   RELEASE BLOC (RELEASE HOME 03)
   ========================================================= */


/* =========================================================
   SLY RELEASE HOME 03
   DARK ROSE / PLUM EDITORIAL
========================================================= */

.sly-release-home03{

    --pink:#ff2d8d;
    --pink-soft:#d91f72;
    --violet:#8f3cff;
    --cyan:#00d9ed;

    --bg:#2a0b1d;
    --bg-deep:#160711;
    --bg-light:#42132e;

    --surface:#351126;
    --surface-2:#42152f;
    --surface-hover:#4d1937;

    --text:#ffffff;
    --soft:#e5cfd9;
    --muted:#b28d9d;

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

    position:relative;

    width:100%;

    margin:0;

    padding:0;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(255,45,141,.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(143,60,255,.12),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #42132e 0%,
            #2a0b1d 42%,
            #160711 100%
        );

    color:var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow:hidden;

    isolation:isolate;
}


/* =========================================================
   BOTTOM ORGANIC SEPARATOR
========================================================= */

.sly-release-home03::after{

    content:"";

    position:absolute;

    bottom:-1px;
    left:-4%;

    width:108%;
    height:76px;

    z-index:5;

    background:#100615;

    clip-path:polygon(

        0 64%,
        6% 55%,
        12% 63%,
        18% 48%,
        25% 58%,
        32% 43%,
        39% 54%,
        46% 41%,
        53% 57%,
        60% 44%,
        67% 59%,
        74% 46%,
        81% 56%,
        88% 43%,
        94% 55%,
        100% 47%,

        100% 100%,
        0 100%
    );
}


/* =========================================================
   INNER
========================================================= */

.sr03-inner{

    position:relative;

    z-index:10;

    width:min(1180px,92%);

    margin:auto;

    padding:
        105px
        0
        105px;
}


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

.sr03-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:22px;
}


.sr03-kicker{

    display:block;

    margin-bottom:8px;

    color:var(--pink);

    font-size:9px;

    font-weight:900;

    letter-spacing:.2em;
}


.sr03-header h2{

    margin:0;

    color:#fff;

    font-size:
        clamp(30px,3vw,42px);

    line-height:.95;

    font-weight:900;

    letter-spacing:-.055em;
}


.sr03-more{

    display:flex;

    align-items:center;

    gap:7px;

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

    text-decoration:none;

    font-size:9px;

    font-weight:900;

    letter-spacing:.08em;

    white-space:nowrap;

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


.sr03-more span{

    color:var(--pink);

    font-size:16px;

    line-height:1;

    transition:
        transform .2s ease;
}


.sr03-more:hover{

    color:#fff;

}


.sr03-more:hover span{

    transform:translateX(4px);
}


/* =========================================================
   LAYOUT
========================================================= */

.sr03-layout{

    position:relative;

    display:grid;

    grid-template-columns:
        44%
        56%;

    min-height:360px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,45,141,.035)
        ),
        rgba(21,7,17,.72);

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

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.32);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


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

.sr03-list{

    padding:9px;

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


/* =========================================================
   RELEASE ITEM
========================================================= */

.sr03-release{

    position:relative;

    display:grid;

    grid-template-columns:
        30px
        60px
        1fr
        36px;

    align-items:center;

    gap:12px;

    width:100%;

    min-height:78px;

    padding:9px;

    border:0;

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

    background:transparent;

    color:#fff;

    text-align:left;

    cursor:pointer;

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


.sr03-release:last-child{

    border-bottom:0;
}


.sr03-release:hover{

    background:
        linear-gradient(
            90deg,
            rgba(255,45,141,.07),
            rgba(255,45,141,.025)
        );
}


.sr03-release.active{

    background:
        linear-gradient(
            90deg,
            rgba(255,45,141,.15),
            rgba(143,60,255,.06)
        );

    box-shadow:
        inset 3px 0 0
        var(--pink);
}


.sr03-number{

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

    font-size:9px;

    font-weight:900;

    letter-spacing:.08em;
}


.sr03-release.active
.sr03-number{

    color:var(--pink);
}


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

.sr03-cover{

    position:relative;

    width:60px;
    height:60px;

    overflow:hidden;

    background:#24101d;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.30);

    transition:
        transform .3s ease;
}


.sr03-release:hover
.sr03-cover{

    transform:
        scale(1.04);
}


.sr03-cover::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,45,141,.08),
            transparent 60%
        );

    pointer-events:none;
}


.sr03-cover img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .4s ease;
}


.sr03-release:hover
.sr03-cover img{

    transform:
        scale(1.06);
}


/* =========================================================
   TEXT
========================================================= */

.sr03-text{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:4px;
}


.sr03-text strong{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:#fff;

    font-size:14px;

    font-weight:900;

    letter-spacing:-.02em;
}


.sr03-text small{

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

    font-size:10px;

    font-weight:700;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.sr03-release.active
.sr03-text small{

    color:
        rgba(255,255,255,.68);
}


.sr03-text em{

    color:var(--pink);

    font-size:9px;

    font-style:normal;

    font-weight:900;

    letter-spacing:.13em;
}


/* =========================================================
   PLAY
========================================================= */

.sr03-play{

    width:32px;
    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

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

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

    font-size:8px;

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


.sr03-release.active
.sr03-play{

    background:var(--pink);

    border-color:var(--pink);

    color:#fff;

    box-shadow:
        0 5px 18px
        rgba(255,45,141,.22);
}


.sr03-release:hover
.sr03-play{

    transform:
        scale(1.08);
}


/* =========================================================
   VIDEO
========================================================= */

.sr03-video{

    min-width:0;

    display:flex;

    flex-direction:column;

    background:
        #12080f;
}


/* =========================================================
   VIDEO FRAME
========================================================= */

.sr03-video-frame{

    position:relative;

    flex:1;

    min-height:280px;

    background:#080609;

    overflow:hidden;
}


.sr03-video-frame::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.08),
            transparent 50%,
            rgba(0,0,0,.25)
        );
}


.sr03-video-frame iframe{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:block;

    border:0;
}


/* Barre de progression maison (contrôles YouTube masqués) */

.sr03-seek{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:4;
    height:14px;
    cursor:pointer;
    background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);
}

.sr03-seek[hidden]{ display:none; }

.sr03-seek::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:rgba(255,255,255,.22);
    transition:height .15s;
}

.sr03-seek span{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:linear-gradient(90deg,#ff2d8d,#9c4dff);
    transform:scaleX(0);
    transform-origin:left;
    transition:height .15s;
}

.sr03-seek:hover::before,
.sr03-seek:hover span{ height:8px; }

/* Vignette : le lecteur YouTube ne se charge qu'au clic */

.sr03-facade{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        radial-gradient(circle at 30% 30%,rgba(255,45,141,.35),transparent 55%),
        radial-gradient(circle at 75% 75%,rgba(156,77,255,.35),transparent 55%),
        #080609;
}

.sr03-facade[hidden]{ display:none; }

.sr03-facade img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(1.1) brightness(.7);
    transform:scale(1.02);
    transition:transform .6s,filter .3s;
}

.sr03-facade::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 50%,transparent 20%,rgba(8,6,9,.55) 100%);
    pointer-events:none;
}

.sr03-facade:hover img{ transform:scale(1.07); filter:saturate(1.15) brightness(.82); }

.sr03-facade-play{
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    display:grid;
    place-items:center;
    width:76px;
    height:76px;
    margin:-38px 0 0 -38px;
    padding:0;
    border:0;
    border-radius:50%;
    cursor:pointer;
    font-size:26px;
    color:#fff;
    background:linear-gradient(135deg,#ff2d8d,#9c4dff);
    box-shadow:0 12px 36px rgba(255,45,141,.5),0 0 0 8px rgba(255,255,255,.12);
    transition:transform .25s,box-shadow .25s;
}

.sr03-facade-play span{ margin-left:5px; line-height:1; }

.sr03-facade-play:hover{
    transform:scale(1.1);
    box-shadow:0 16px 44px rgba(255,45,141,.65),0 0 0 12px rgba(255,255,255,.14);
}

.sr03-facade.is-empty .sr03-facade-play{ display:none; }


/* =========================================================
   VIDEO OVERLAY
========================================================= */

.sr03-video-overlay{

    position:absolute;

    left:15px;
    top:15px;

    z-index:3;

    padding:
        6px 9px;

    background:
        rgba(22,7,17,.78);

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

    color:#fff;

    font-size:9px;

    font-weight:900;

    letter-spacing:.14em;

    pointer-events:none;

    backdrop-filter:
        blur(8px);
}


/* =========================================================
   VIDEO INFO
========================================================= */

.sr03-video-info{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    min-height:82px;

    padding:
        15px 18px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #351126,
            #24101d
        );

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


.sr03-video-label{

    display:block;

    margin-bottom:5px;

    color:var(--pink);

    font-size:9px;

    font-weight:900;

    letter-spacing:.15em;
}


.sr03-video-info h3{

    margin:0;

    color:#fff;

    font-size:19px;

    line-height:1;

    font-weight:900;

    letter-spacing:-.025em;
}


.sr03-video-info p{

    margin:5px 0 0;

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

    font-size:10px;
}


/* =========================================================
   AUDIO BUTTON
========================================================= */

.sr03-audio{

    flex:none;

    display:flex;

    align-items:center;

    gap:7px;

    padding:
        10px 14px;

    border:0;

    background:
        linear-gradient(
            135deg,
            var(--pink),
            var(--pink-soft)
        );

    color:#fff;

    cursor:pointer;

    font-size:8px;

    font-weight:900;

    letter-spacing:.06em;

    box-shadow:
        0 7px 22px
        rgba(255,45,141,.18);

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


.sr03-audio:hover{

    transform:
        translateY(-2px);

    filter:
        brightness(1.08);
}


.sr03-audio span{

    font-size:8px;
}


/* =========================================================
   DECORATIVE GLOWS
========================================================= */

.sly-release-home03
.sr03-layout::before{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:8%;
    top:-100px;

    background:
        radial-gradient(
            circle,
            rgba(255,45,141,.12),
            transparent 70%
        );

    filter:
        blur(30px);

    pointer-events:none;

    z-index:0;
}


.sly-release-home03
.sr03-layout::after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    left:22%;
    bottom:-120px;

    background:
        radial-gradient(
            circle,
            rgba(143,60,255,.10),
            transparent 70%
        );

    filter:
        blur(30px);

    pointer-events:none;

    z-index:0;
}


.sr03-list,
.sr03-video{

    position:relative;

    z-index:2;
}


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

@media(max-width:700px){

    .sly-release-home03::after{

        height:58px;
    }


    .sr03-inner{

        width:92%;

        padding:
            78px
            0
            80px;
    }


    .sr03-header{

        align-items:flex-start;

        flex-direction:column;

        gap:12px;

        margin-bottom:18px;
    }


    .sr03-header h2{

        font-size:27px;
    }


    .sr03-more{

        font-size:8px;
    }


    .sr03-layout{

        display:flex;

        flex-direction:column-reverse;

        min-height:0;
    }


    .sr03-list{

        border-right:0;

        padding:6px;
    }


    .sr03-video-frame{

        min-height:210px;

        aspect-ratio:16/9;
    }


    .sr03-video-info{

        min-height:70px;

        padding:
            13px;
    }


    .sr03-video-info h3{

        font-size:17px;
    }


    .sr03-release{

        grid-template-columns:
            25px
            50px
            1fr
            32px;

        min-height:68px;

        padding:7px;

        gap:9px;
    }


    .sr03-cover{

        width:50px;
        height:50px;
    }


    .sr03-text strong{

        font-size:12px;
    }


    .sr03-text small{

        font-size:9px;
    }


    .sr03-text em{

        font-size:9px;
    }


    .sr03-play{

        width:29px;
        height:29px;
    }

}


@media(max-width:420px){

    .sr03-inner{

        padding:
            72px
            0
            75px;
    }


    .sr03-header h2{

        font-size:24px;
    }


    .sr03-video-frame{

        min-height:185px;
    }


    .sr03-video-info{

        padding:11px;

        gap:10px;
    }


    .sr03-video-info h3{

        font-size:15px;
    }


    .sr03-video-info p{

        font-size:8px;
    }


    .sr03-audio{

        padding:
            8px 10px;

        font-size:9px;
    }


    .sr03-release{

        grid-template-columns:
            22px
            46px
            1fr
            30px;

        gap:8px;
    }


    .sr03-cover{

        width:46px;
        height:46px;
    }

}


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

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

    .sr03-release,
    .sr03-cover,
    .sr03-cover img,
    .sr03-play,
    .sr03-more,
    .sr03-more span,
    .sr03-audio{

        transition:none !important;
    }

}



/* =========================================================
   TEAM BLOC (TEAM HOME 06)
   ========================================================= */


/* =========================================================
   SLY TEAM HOME 06 · COVERFLOW
   ========================================================= */

.sly-team-home06{

    --sth06-bg:#08090c;
    --sth06-card:#111318;
    --sth06-text:#ffffff;
    --sth06-muted:#858892;
    --sth06-line:rgba(255,255,255,.11);
    --sth06-pink:#ff2d8d;
    --sth06-cyan:#00dff0;

    width:100%;

    padding:30px 20px 24px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,45,141,.10) 0%,
            transparent 48%
        ),
        var(--sth06-bg);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow:hidden;

}

.sth06-inner{

    width:min(1180px,100%);

    margin:auto;

}


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

.sth06-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

    margin-bottom:16px;

}

.sth06-kicker{

    display:block;

    margin-bottom:5px;

    color:var(--sth06-pink);

    font-size:8px;

    font-weight:900;

    letter-spacing:.20em;

}

.sth06-title{

    margin:0;

    color:white;

    font-size:29px;

    line-height:.9;

    letter-spacing:-.06em;

    font-weight:400;

}

.sth06-title strong{

    color:var(--sth06-pink);

    font-weight:900;

}

.sth06-more{

    color:var(--sth06-muted);

    font-size:9px;

    font-weight:800;

    text-decoration:none;

}

.sth06-more span{

    margin-left:5px;

    color:var(--sth06-cyan);

}


/* =========================================================
   COVERFLOW AREA
   ========================================================= */

.sth06-coverflow{

    position:relative;

    height:285px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* =========================================================
   STAGE
   ========================================================= */

.sth06-stage{

    position:relative;

    width:100%;

    height:100%;

    perspective:1100px;

    perspective-origin:center center;

}


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

.sth06-card{

    position:absolute;

    left:50%;
    top:50%;

    width:215px;
    height:255px;

    overflow:hidden;

    background:var(--sth06-card);

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

    transform:
        translate(-50%,-50%)
        translateX(0)
        rotateY(0deg)
        scale(1);

    opacity:0;

    filter:grayscale(.3);

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

    cursor:pointer;

    transition:
        transform .65s cubic-bezier(.2,.7,.2,1),
        opacity .5s ease,
        filter .5s ease,
        box-shadow .5s ease;

    will-change:
        transform,
        opacity;

}


/* =========================================================
   POSITIONS
   ========================================================= */

/* CENTRE */

.sth06-card.position-center{

    opacity:1;

    z-index:5;

    transform:
        translate(-50%,-50%)
        translateX(0)
        rotateY(0deg)
        scale(1.08);

    filter:none;

    border-color:
        rgba(255,45,141,.75);

    box-shadow:
        0 25px 65px rgba(0,0,0,.55),
        0 0 35px rgba(255,45,141,.10);

}


/* LEFT */

.sth06-card.position-left{

    opacity:.65;

    z-index:4;

    transform:
        translate(-50%,-50%)
        translateX(-225px)
        rotateY(35deg)
        scale(.86);

    filter:grayscale(.55);

}


/* RIGHT */

.sth06-card.position-right{

    opacity:.65;

    z-index:4;

    transform:
        translate(-50%,-50%)
        translateX(225px)
        rotateY(-35deg)
        scale(.86);

    filter:grayscale(.55);

}


/* FAR LEFT */

.sth06-card.position-far-left{

    opacity:.20;

    z-index:2;

    transform:
        translate(-50%,-50%)
        translateX(-410px)
        rotateY(48deg)
        scale(.72);

    filter:grayscale(1);

}


/* FAR RIGHT */

.sth06-card.position-far-right{

    opacity:.20;

    z-index:2;

    transform:
        translate(-50%,-50%)
        translateX(410px)
        rotateY(-48deg)
        scale(.72);

    filter:grayscale(1);

}


/* HIDDEN */

.sth06-card.position-hidden{

    opacity:0;

    z-index:0;

    transform:
        translate(-50%,-50%)
        translateX(0)
        scale(.5);

}


/* =========================================================
   IMAGE
   ========================================================= */

.sth06-image{

    position:absolute;

    inset:0;

    height:100%;

}

.sth06-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.sth06-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02) 35%,
            rgba(0,0,0,.92) 100%
        );

}


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

.sth06-card-info{

    position:absolute;

    left:18px;
    right:18px;
    bottom:17px;

    z-index:3;

}

.sth06-card-info strong{

    display:block;

    color:white;

    font-size:22px;

    line-height:.9;

    font-weight:900;

    letter-spacing:-.05em;

}

.sth06-card-info small{

    display:block;

    margin-top:6px;

    color:#c0c3ca;

    font-size:9px;

    line-height:1.25;

    font-weight:700;

}

.sth06-empty{

    padding:60px 0;

    color:var(--sth06-muted);

    font-size:12px;

    text-align:center;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.sth06-nav{

    position:absolute;

    top:50%;

    z-index:20;

    width:38px;
    height:38px;

    display:flex;

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

    border:1px solid rgba(255,45,141,.65);

    background:rgba(8,9,12,.92);

    color:white;

    font-size:24px;

    cursor:pointer;

    transform:translateY(-50%);

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

}

.sth06-nav:hover{

    background:var(--sth06-pink);

    border-color:var(--sth06-pink);

}

.sth06-prev{

    left:5px;

}

.sth06-next{

    right:5px;

}


/* =========================================================
   BOTTOM INFO
   ========================================================= */

.sth06-bottom{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:14px 0;

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

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

}

.sth06-bottom-head{

    display:flex;

    align-items:baseline;

    justify-content:space-between;

    gap:20px;
}

.sth06-current{

    display:flex;

    align-items:baseline;

    gap:9px;

    min-width:0;

}

.sth06-current > strong{

    color:white;

    font-size:14px;

    font-weight:900;

    white-space:nowrap;

}

.sth06-current > span:last-child{

    color:var(--sth06-cyan);

    font-size:9px;

    font-weight:900;

    letter-spacing:.08em;

    text-transform:uppercase;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.sth06-description{

    margin:0;

    max-width:720px;

    color:var(--sth06-muted);

    font-size:11.5px;

    line-height:1.6;

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

    overflow:hidden;
}

.sth06-counter{

    flex-shrink:0;

    color:#555862;

    font-size:8px;

    font-weight:900;

    letter-spacing:.15em;

    text-align:right;

}

.sth06-counter span{

    color:white;

}


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

@media(max-width:900px){

    .sth06-card.position-left{

        transform:
            translate(-50%,-50%)
            translateX(-185px)
            rotateY(30deg)
            scale(.8);

    }

    .sth06-card.position-right{

        transform:
            translate(-50%,-50%)
            translateX(185px)
            rotateY(-30deg)
            scale(.8);

    }

    .sth06-card.position-far-left,
    .sth06-card.position-far-right{

        opacity:0;

    }

}


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

@media(max-width:600px){

    .sly-team-home06{

        padding:24px 14px 20px;

    }

    .sth06-header{

        align-items:center;

    }

    .sth06-title{

        font-size:24px;

    }

    .sth06-more{

        font-size:8px;

    }

    .sth06-coverflow{

        height:270px;

    }

    .sth06-card{

        width:190px;
        height:235px;

    }

    .sth06-card.position-center{

        transform:
            translate(-50%,-50%)
            scale(1);

    }

    .sth06-card.position-left{

        opacity:.4;

        transform:
            translate(-50%,-50%)
            translateX(-125px)
            rotateY(35deg)
            scale(.72);

    }

    .sth06-card.position-right{

        opacity:.4;

        transform:
            translate(-50%,-50%)
            translateX(125px)
            rotateY(-35deg)
            scale(.72);

    }

    .sth06-card.position-far-left,
    .sth06-card.position-far-right{

        display:none;

    }

    .sth06-nav{

        width:32px;
        height:32px;

        font-size:20px;

    }

    .sth06-prev{

        left:0;

    }

    .sth06-next{

        right:0;

    }

    .sth06-bottom{

        gap:8px;

        padding:12px 0;

    }

    .sth06-description{

        -webkit-line-clamp:1;

    }

}



/* =========================================================
   HISTORY BLOC (HISTORY HOME 03)
   ========================================================= */


/* =========================================================
   SLY HISTORY · DARK BLUE
========================================================= */

.sly-history-home03{

    --pink:#ff2d8d;
    --cyan:#00dff5;

    --bg:#071426;
    --bg-deep:#040b16;

    --surface:#0c1d33;
    --surface-hover:#102944;

    --text:#ffffff;
    --muted:#8fa3b8;

    --line:rgba(255,255,255,.10);

    width:100%;

    position:relative;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(0,223,245,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(255,45,141,.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #0a1c32 0%,
            #071426 52%,
            #040b16 100%
        );

    color:var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow:hidden;
}


/* =========================================================
   TOP ORGANIC SEPARATOR
========================================================= */

.sly-history-home03::before{

    content:"";

    position:absolute;

    top:-1px;
    left:-4%;

    width:108%;
    height:48px;

    z-index:5;

    background:#040b16;

    clip-path:polygon(
        0 0,
        100% 0,
        100% 34%,
        96% 42%,
        91% 34%,
        86% 47%,
        81% 37%,
        76% 51%,
        71% 40%,
        66% 54%,
        61% 42%,
        56% 49%,
        51% 38%,
        46% 54%,
        41% 43%,
        36% 50%,
        31% 39%,
        26% 53%,
        21% 42%,
        16% 50%,
        11% 39%,
        6% 48%,
        0 40%
    );

}


/* =========================================================
   INNER
========================================================= */

.sh03-inner{

    width:min(1000px,92%);

    margin:auto;

    padding:55px 0 45px;

}


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

.sh03-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:22px;

}


.sh03-kicker{

    display:block;

    color:var(--pink);

    font-size:8px;

    font-weight:900;

    letter-spacing:.2em;

    margin-bottom:7px;

}


.sh03-header h2{

    margin:0;

    color:#fff;

    font-size:25px;

    line-height:1;

    letter-spacing:-.05em;

    font-weight:900;

}


.sh03-more{

    color:#8fa3b8;

    text-decoration:none;

    font-size:8px;

    font-weight:900;

    transition:
        color .2s ease;

}


.sh03-more:hover{

    color:#fff;

}


.sh03-more span{

    color:var(--pink);

    margin-left:4px;

    font-size:11px;

}


/* =========================================================
   TIMELINE
========================================================= */

.sh03-timeline{

    --sh03-visible:5;

    position:relative;

    padding-top:4px;

}

.sh03-header-side{

    display:flex;

    align-items:center;

    gap:18px;

}

.sh03-nav{

    display:flex;

    gap:8px;

}

.sh03-nav.is-hidden{
    display:none;
}

.sh03-arrow{

    width:34px;
    height:34px;

    display:flex;

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

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

    border-radius:50%;

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

    color:#fff;

    font-size:20px;

    line-height:1;

    cursor:pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        opacity .25s ease,
        transform .25s ease;

}

.sh03-arrow:hover:not(:disabled){

    background:var(--pink);

    border-color:var(--pink);

    transform:scale(1.06);

}

.sh03-arrow:disabled{

    opacity:.3;

    cursor:default;

}

.sh03-viewport{

    position:relative;

    z-index:1;

    overflow:hidden;

    margin:0 -6px;

    padding:0 0 6px;

    touch-action:pan-y;

    cursor:grab;

}

.sh03-viewport.is-dragging{

    cursor:grabbing;

    user-select:none;

}

.sh03-track{

    display:flex;

    transition:transform .7s cubic-bezier(.22,1,.36,1);

    will-change:transform;

}

.sh03-viewport.is-dragging .sh03-track{
    transition:none;
}

.sh03-viewport.is-dragging a,
.sh03-viewport.is-dragging button{
    pointer-events:none;
}

.sh03-progress{

    height:2px;

    margin-top:14px;

    border-radius:2px;

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

    overflow:hidden;

}

.sh03-progress span{

    display:block;

    height:100%;

    width:0;

    border-radius:2px;

    background:var(--pink);

    transition:width .7s cubic-bezier(.22,1,.36,1);

}

.sh03-timeline.no-slide .sh03-progress{
    display:none;
}

/* Sélecteur de flux */

.sh03-tabs{
    display:flex;
    gap:6px;
    margin-bottom:22px;
    overflow-x:auto;
    scrollbar-width:none;
}

.sh03-tabs::-webkit-scrollbar{ display:none; }

.sh03-tab{
    flex:0 0 auto;
    padding:9px 18px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:99px;
    background:transparent;
    color:#8fa3b8;
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
    cursor:pointer;
    transition:color .2s,border-color .2s,background .2s;
}

.sh03-tab:hover{ color:#fff; border-color:rgba(255,255,255,.35); }

.sh03-tab.is-active{
    color:#0b0c1d;
    border-color:var(--sh-c);
    background:var(--sh-c);
}

.sh03-panel{ display:none; }
.sh03-panel.is-active{ display:block; }

.sh03-empty{

    padding:40px 0;

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

    font-size:12px;

    text-align:center;
}


.sh03-line{

    position:absolute;

    left:5%;

    right:5%;

    top:34px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14) 12%,
            rgba(255,255,255,.10) 88%,
            transparent
        );

    z-index:0;

}


/* =========================================================
   ITEM
========================================================= */

.sh03-item{

    position:relative;

    flex:0 0 calc(100% / var(--sh03-visible));

    min-width:0;

    padding:0 6px;

    z-index:1;

}


/* =========================================================
   TIME
========================================================= */

.sh03-time{

    margin-bottom:13px;

    color:#70859d;

    font-size:8px;

    font-weight:900;

    text-align:center;

    font-variant-numeric:
        tabular-nums;

}


.sh03-item.current .sh03-time{

    color:var(--pink);

}


/* =========================================================
   DOT
========================================================= */

.sh03-dot{

    width:9px;

    height:9px;

    margin:
        0
        auto
        13px;

    border:
        2px
        solid
        var(--bg);

    border-radius:50%;

    background:#496079;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.12);

}


.sh03-item.current .sh03-dot{

    width:11px;

    height:11px;

    margin-bottom:11px;

    background:var(--pink);

    box-shadow:
        0 0 0 3px rgba(255,45,141,.14),
        0 0 18px rgba(255,45,141,.30);

}


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

.sh03-card{

    padding:7px;

    background:
        linear-gradient(
            145deg,
            rgba(16,41,68,.96),
            rgba(7,20,38,.98)
        );

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

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

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

}


.sh03-card:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(0,223,245,.20);

    box-shadow:
        0 18px 35px rgba(0,0,0,.32),
        0 0 25px rgba(0,223,245,.04);

}


.sh03-item.current .sh03-card{

    border-color:
        rgba(255,45,141,.35);

    box-shadow:
        0 15px 35px rgba(0,0,0,.28),
        0 0 30px rgba(255,45,141,.06);

}


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

.sh03-cover{

    position:relative;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:#09182a;

}


.sh03-cover::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(2,8,16,.38)
        );

}


.sh03-cover img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .35s ease;

}


.sh03-card:hover
.sh03-cover img{

    transform:
        scale(1.06);

}


/* =========================================================
   PLAY
========================================================= */

.sh03-play{

    position:absolute;

    right:7px;

    bottom:7px;

    width:27px;

    height:27px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:50%;

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

    color:#071426;

    cursor:pointer;

    font-size:9px;

    opacity:0;

    box-shadow:
        0 5px 18px rgba(0,0,0,.35);

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        opacity .2s ease;

}


.sh03-card:hover .sh03-play,
.sh03-item.current .sh03-play{

    opacity:1;

}

.sh03-play.is-loading::before{

    content:"";

    position:absolute;
    inset:-4px;

    border-radius:50%;

    padding:2px;

    background:
        conic-gradient(
            from 0deg,
            #ff2d8d,
            #8f3cff,
            #00d9ed,
            #ff2d8d
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    animation:slySpinRing .85s linear infinite;
}


.sh03-preview.is-unavailable{

    opacity:.45 !important;

}


@media(hover:none){

    .sh03-preview{
        opacity:1;
    }

}


.sh03-play:hover{

    background:var(--pink);

    color:#fff;

    transform:
        scale(1.08);

}


/* =========================================================
   INFO
========================================================= */

.sh03-info{

    padding:10px 3px 4px;

}


.sh03-status{

    display:block;

    margin-bottom:4px;

    color:var(--pink);

    font-size:9px;

    font-weight:900;

    letter-spacing:.15em;

}


.sh03-info strong{

    display:block;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:#fff;

    font-size:10px;

    font-weight:900;

}


.sh03-info small{

    display:block;

    margin-top:4px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--muted);

    font-size:9px;

    font-weight:700;

}


.sh03-item:not(.current) .sh03-status{

    display:none;

}


/* =========================================================
   FOOTER
========================================================= */

.sh03-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:16px;

    padding-top:10px;

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

    color:#70859d;

    font-size:9px;

    font-weight:900;

    letter-spacing:.1em;

}


.sh03-footer span{

    color:var(--pink);

}


.sh03-footer a{

    color:#8297ad;

    text-decoration:none;

    transition:
        color .2s ease;

}


.sh03-footer a:hover{

    color:#fff;

}


@media(max-width:1000px){

    .sh03-timeline{

        --sh03-visible:4;

    }

}


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

@media(max-width:700px){

    .sh03-inner{

        width:94%;

        padding:45px 0 32px;

    }


    .sh03-header h2{

        font-size:21px;

    }


    .sh03-more{

        display:none;

    }


    .sh03-timeline{

        --sh03-visible:2.4;

    }

    .sh03-nav{

        display:none;

    }


    .sh03-line{

        left:25px;

        right:25px;

        top:33px;

        width:
            calc(100% - 50px);

    }


    .sh03-item{

        padding:0 4px;

    }


    .sh03-card{

        padding:6px;

    }


    .sh03-time{

        font-size:9px;

        margin-bottom:12px;

    }


    .sh03-dot{

        margin-bottom:11px;

    }


    .sh03-info strong{

        font-size:9px;

    }


    .sh03-info small{

        font-size:9px;

    }

}


@media(max-width:420px){

    .sh03-timeline{

        --sh03-visible:2.1;

    }


    .sh03-footer{

        font-size:9px;

    }

}



/* =========================================================
   PARTNER BLOC (PARTNERS 06)
   ========================================================= */


.sly-partners-06{
  width:100%;
  padding:30px 36px;
  background:#f7f7f9;
  color:#111;
  font-family:Arial,Helvetica,sans-serif;
  box-sizing:border-box;
}

.sly-partners-06 *,
.sly-partners-06 *::before,
.sly-partners-06 *::after{
  box-sizing:border-box;
}


/* HEADER */

.sp06-header{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:18px;
}

.sp06-kicker{
  display:block;
  margin-bottom:6px;
  color:#9999a2;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.8px;
}

.sp06-header h2{
  margin:0;
  font-size:24px;
  font-weight:300;
  letter-spacing:-.7px;
}

.sp06-header h2 strong{
  font-weight:900;
  background:linear-gradient(90deg,#ff2d8d,#00cfe8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.sp06-line{
  flex:1;
  height:1px;
  background:#dedee3;
}

.sp06-label{
  color:#9999a2;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.5px;
}


/* GRID */

.sp06-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}


/* CARD */

.sp06-card{
  position:relative;
  min-height:125px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:15px;
  background:#fff;
  border:1px solid #e8e8ec;
  text-decoration:none;
  color:#111;
  overflow:hidden;

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

.sp06-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(
    90deg,
    #ff2d8d,
    #00cfe8
  );

  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}

.sp06-card:hover{
  transform:translateY(-4px);
  border-color:#dddde2;
  box-shadow:0 10px 25px rgba(20,20,30,.07);
}

.sp06-card:hover::before{
  transform:scaleX(1);
}


/* LOGO */

.sp06-logo{
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sp06-logo img{
  max-width:100%;
  max-height:48px;
  object-fit:contain;

  filter:grayscale(1);
  opacity:.55;

  transition:
    filter .3s ease,
    opacity .3s ease,
    transform .3s ease;
}

.sp06-card:hover .sp06-logo img{
  filter:grayscale(0);
  opacity:1;
  transform:scale(1.05);
}


/* BOTTOM */

.sp06-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:10px;
  border-top:1px solid #eeeeF1;
}

.sp06-bottom span{
  color:#888892;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
}

.sp06-bottom b{
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;

  color:#aaaab2;
  font-size:11px;
  font-weight:400;

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

.sp06-card:hover .sp06-bottom b{
  color:#fff;
  background:linear-gradient(
    135deg,
    #ff2d8d,
    #00cfe8
  );
  transform:translate(2px,-2px);
}


/* TABLET */

@media(max-width:1050px){

  .sp06-grid{
    grid-template-columns:repeat(3,1fr);
  }

}


/* MOBILE */

@media(max-width:600px){

  .sly-partners-06{
    padding:24px 15px;
  }

  .sp06-header{
    gap:12px;
  }

  .sp06-header h2{
    font-size:20px;
  }

  .sp06-label{
    display:none;
  }

  .sp06-grid{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }

  .sp06-card{
    min-height:110px;
    padding:12px;
  }

  .sp06-logo{
    height:58px;
  }

  .sp06-logo img{
    max-height:40px;
  }

}



/* =========================================================
   FOOTER (FOOTER 07)
   ========================================================= */


/* =========================================================
   FOOTER 07 · RADIO TICKER
========================================================= */

.sly-footer07{

    --bg:#0d0e11;
    --panel:#15171b;
    --pink:#ff2d8d;
    --cyan:#00dff5;
    --text:#f5f5f4;
    --muted:#858890;
    --line:rgba(255,255,255,.10);

    width:100%;

    background:var(--bg);
    color:var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow:hidden;
}


.sly-footer07 *,
.sly-footer07 *::before,
.sly-footer07 *::after{
    box-sizing:border-box;
}


/* =========================================================
   TOP
========================================================= */

.sly-footer07__top{

    min-height:72px;

    display:grid;

    grid-template-columns:
        auto
        auto
        1fr
        auto;

    align-items:center;

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


/* =========================================================
   STATION
========================================================= */

.sly-footer07__station{

    height:72px;

    padding:
        0
        clamp(20px,4vw,55px);

    display:flex;

    align-items:center;

    gap:8px;

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


.sly-footer07__station strong{

    font-size:35px;

    line-height:.8;

    font-weight:1000;

    letter-spacing:-.09em;
}


.sly-footer07__station span{

    color:var(--muted);

    font-size:8px;

    font-weight:900;

    letter-spacing:.2em;
}


/* =========================================================
   FREQUENCY
========================================================= */

.sly-footer07__frequency{

    height:72px;

    padding:
        0
        clamp(18px,3vw,40px);

    display:flex;

    align-items:center;

    gap:8px;

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


.sly-footer07__frequency small{

    color:var(--pink);

    font-size:8px;

    font-weight:900;

    letter-spacing:.12em;
}


.sly-footer07__frequency strong{

    font-size:32px;

    line-height:.8;

    letter-spacing:-.06em;
}


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

.sly-footer07__status{

    padding:
        0
        clamp(20px,4vw,55px);

    display:flex;

    align-items:center;

    gap:9px;

    color:var(--muted);

    font-size:8px;

    font-weight:800;

    letter-spacing:.15em;
}


.sly-footer07__status i{

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--pink);

    box-shadow:
        0 0 0 4px rgba(255,45,141,.12),
        0 0 12px rgba(255,45,141,.7);

    animation:
        slyFooter07Live
        1.4s
        ease-in-out
        infinite;
}


@keyframes slyFooter07Live{

    0%,100%{
        opacity:1;
    }

    50%{
        opacity:.35;
    }

}


/* =========================================================
   LISTEN
========================================================= */

.sly-footer07__listen{

    height:72px;

    padding:
        0
        clamp(20px,3vw,40px);

    display:flex;

    align-items:center;

    gap:15px;

    background:#cf136b;

    color:#fff;

    text-decoration:none;

    font-size:8px;

    font-weight:900;

    letter-spacing:.16em;

    transition:
        background .2s ease;
}


.sly-footer07__listen:hover{

    background:#b30f58;
}


.sly-footer07__listen b{

    font-size:9px;
}


/* =========================================================
   TICKER
========================================================= */

.sly-footer07__ticker{

    height:38px;

    display:flex;

    background:#090a0c;

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

    overflow:hidden;
}


.sly-footer07__ticker-label{

    flex:0 0 105px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    background:var(--pink);

    color:#fff;

    font-size:9px;

    font-weight:900;

    letter-spacing:.15em;
}


.sly-footer07__ticker-label i{

    width:5px;
    height:5px;

    border-radius:50%;

    background:#fff;
}


.sly-footer07__ticker-track{

    flex:1;

    overflow:hidden;

    display:flex;

    align-items:center;
}


.sly-footer07__ticker-content{

    display:flex;

    align-items:center;

    gap:25px;

    white-space:nowrap;

    padding-left:25px;

    animation:
        slyFooter07Ticker
        35s
        linear
        infinite;
}


.sly-footer07__ticker-content span{

    color:#c8c9cd;

    font-size:8px;

    font-weight:700;

    letter-spacing:.1em;
}


.sly-footer07__ticker-content b{

    color:var(--cyan);

    font-size:8px;
}


@keyframes slyFooter07Ticker{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}


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

.sly-footer07__content{

    display:grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1.5fr);

    gap:
        clamp(40px,6vw,90px);

    padding:
        clamp(50px,7vw,80px)
        clamp(25px,6vw,80px);
}


/* =========================================================
   MESSAGE
========================================================= */

.sly-footer07__message > span{

    color:var(--pink);

    font-size:8px;

    font-weight:900;

    letter-spacing:.22em;
}


.sly-footer07__message h2{

    margin:
        18px
        0
        18px;

    max-width:600px;

    font-size:
        clamp(42px,5.5vw,72px);

    line-height:.84;

    letter-spacing:-.07em;

    font-weight:300;
}


.sly-footer07__message h2 strong{

    display:block;

    font-weight:900;
}


.sly-footer07__message p{

    max-width:390px;

    margin:0;

    color:var(--muted);

    font-size:10px;

    line-height:1.6;
}


/* =========================================================
   LINKS
========================================================= */

.sly-footer07__links{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:25px;

    align-self:center;
}


.sly-footer07__links > div{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:10px;
}


.sly-footer07__links span{

    margin-bottom:9px;

    color:var(--cyan);

    font-size:9px;

    font-weight:900;

    letter-spacing:.2em;
}


.sly-footer07__links a{

    color:#d1d2d5;

    text-decoration:none;

    font-size:9px;

    font-weight:600;

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


.sly-footer07__links a:hover{

    color:#fff;

    transform:translateX(3px);
}


/* =========================================================
   BOTTOM
========================================================= */

.sly-footer07__bottom{

    min-height:46px;

    padding:
        0
        clamp(20px,6vw,80px);

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

    display:flex;

    align-items:center;

    color:var(--muted);

    font-size:8px;
}


.sly-footer07__bottom strong{

    color:#8d93a0;

    font-size:9px;

    letter-spacing:.16em;
}


/* Réserve la hauteur du player sticky (fixé en bas) pour que le bandeau reste visible. */

.sly-footer07{

    padding-bottom:84px;
}


/* Bandeau de copyright */

.sly-footer07__legal{

    padding:
        18px
        clamp(20px,6vw,80px);

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

    display:grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:center;

    gap:12px 25px;

    color:var(--muted);

    font-size:9px;
}


.sly-footer07__legal > div{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:6px 18px;
}


.sly-footer07__legal p{

    margin:0;

    text-align:right;
}


.sly-footer07__legal a{

    color:#d1d2d5;

    text-decoration:none;

    transition:color .2s ease;
}


.sly-footer07__legal a:hover{

    color:#fff;

    text-decoration:underline;
}


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

@media(max-width:850px){

    .sly-footer07__top{

        grid-template-columns:
            auto
            1fr
            auto;
    }


    .sly-footer07__frequency{

        display:none;
    }


    .sly-footer07__content{

        grid-template-columns:1fr;

        gap:50px;
    }


    .sly-footer07__links{

        max-width:760px;
    }


    .sly-footer07__legal{

        grid-template-columns:1fr auto;
    }


    .sly-footer07__legal > div{

        justify-content:flex-end;
    }


    .sly-footer07__legal p{

        grid-column:1 / -1;

        text-align:left;
    }

}


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

@media(max-width:600px){

    .sly-footer07__top{

        display:grid;

        grid-template-columns:1fr auto;

        min-height:65px;
    }


    .sly-footer07__station{

        height:65px;

        padding:0 20px;

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


    .sly-footer07__station strong{

        font-size:31px;
    }


    .sly-footer07__status{

        display:none;
    }


    .sly-footer07__listen{

        height:65px;

        padding:
            0
            18px;
    }


    .sly-footer07__ticker{

        height:36px;
    }


    .sly-footer07__ticker-label{

        flex-basis:92px;
    }


    .sly-footer07__content{

        display:block;

        padding:
            48px 20px;
    }


    .sly-footer07__message h2{

        font-size:
            clamp(43px,12vw,60px);
    }


    .sly-footer07__message p{

        font-size:10px;
    }


    .sly-footer07__links{

        grid-template-columns:
            repeat(2,1fr);

        gap:35px 25px;

        margin-top:50px;
    }


    .sly-footer07__links > div:last-child{

        grid-column:1 / -1;

        display:flex;

        flex-direction:row;

        flex-wrap:wrap;

        align-items:center;

        gap:10px 18px;
    }


    .sly-footer07__links > div:last-child span{

        width:100%;
    }


    .sly-footer07__bottom{

        padding:
            0
            20px;
    }


    .sly-footer07{

        padding-bottom:72px;
    }


    .sly-footer07__legal{

        grid-template-columns:1fr;

        padding:
            20px;
    }


    .sly-footer07__legal > div{

        justify-content:flex-start;
    }

}



/* =========================================================
   GLOBAL ROOT
   ========================================================= */

    :root {
    color-scheme: dark;
}



/* =========================================================
   COOKIE CONSENT (COOKIE 10)
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.sly-cookie10,
.sly-cookie10 *,
.sly-cookie10-modal,
.sly-cookie10-modal *{
    box-sizing:border-box;
}

.sly-cookie10,
.sly-cookie10-modal{
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.sly-cookie10{
    position:fixed;

    right:24px;
    bottom:24px;

    z-index:99990;

    width:min(410px,calc(100% - 48px));

    opacity:0;
    visibility:hidden;

    transform:
        translateY(28px)
        rotate(.8deg);

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

.sly-cookie10.is-visible{
    opacity:1;
    visibility:visible;

    transform:
        translateY(0)
        rotate(0deg);
}


/* =========================================================
   TICKET
   ========================================================= */

.sly-cookie10-ticket{
    position:relative;

    overflow:hidden;

    padding:19px 20px 15px;

    background:
        #f9f7f2;

    border:
        1px solid #d9d5cc;

    box-shadow:
        0 22px 55px rgba(0,0,0,.15);

    isolation:isolate;
}


/* GRAIN */

.sly-cookie10-ticket::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.23;

    background-image:
        radial-gradient(
            rgba(20,20,20,.18) .6px,
            transparent .6px
        );

    background-size:
        5px 5px;

    pointer-events:none;
}


/* CUTOUTS LEFT/RIGHT */

.sly-cookie10-ticket::after{
    content:"";

    position:absolute;

    top:92px;
    left:-9px;

    width:17px;
    height:17px;

    border-radius:50%;

    background:
        #fff;

    box-shadow:
        0 0 0 1px #d9d5cc;
}

.sly-cookie10-topline{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #15161a 0%,
            #15161a 67%,
            #ff2d8d 67%,
            #ff2d8d 82%,
            #00d8ef 82%,
            #00d8ef 100%
        );
}


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

.sly-cookie10-header{
    position:relative;
    z-index:2;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    padding-bottom:12px;

    border-bottom:
        1px dashed #cbc7be;
}

.sly-cookie10-brand{
    display:flex;
    align-items:baseline;

    gap:5px;
}

.sly-cookie10-brand strong{
    color:#15161a;

    font-size:20px;
    line-height:1;

    font-weight:950;

    letter-spacing:-.07em;
}

.sly-cookie10-brand span{
    color:#858078;

    font-size:9px;
    font-weight:900;

    letter-spacing:.16em;
}

.sly-cookie10-number{
    display:flex;
    align-items:baseline;

    gap:4px;

    color:#939087;

    font-size:9px;
    font-weight:900;

    letter-spacing:.12em;
}

.sly-cookie10-number strong{
    color:#15161a;

    font-size:10px;
}


/* =========================================================
   TITLE
   ========================================================= */

.sly-cookie10-title{
    position:relative;
    z-index:2;

    padding-top:16px;
}

.sly-cookie10-kicker{
    margin-bottom:6px;

    color:#ff2d8d;

    font-size:9px;
    font-weight:950;

    letter-spacing:.18em;
}

.sly-cookie10-title h3{
    margin:0;

    color:#15161a;

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

    font-size:26px;
    line-height:1.00;

    font-weight:700;

    letter-spacing:-.035em;
}

.sly-cookie10-title h3 span{
    display:block;

    color:#89867f;
}


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

.sly-cookie10-copy{
    position:relative;
    z-index:2;

    margin-top:10px;
}

.sly-cookie10-copy p{
    margin:0;

    color:#67645e;

    font-size:10px;
    line-height:1.58;
}

.sly-cookie10-link{
    display:inline-flex;
    align-items:center;

    gap:5px;

    margin-top:8px;

    color:#17181c;

    font-size:9px;
    font-weight:900;

    text-decoration:none;

    border-bottom:
        1px solid #c8c4bc;
}

.sly-cookie10-link span{
    color:#ff2d8d;

    transition:
        transform .18s ease;
}

.sly-cookie10-link:hover span{
    transform:translate(2px,-2px);
}


/* =========================================================
   INFO
   ========================================================= */

.sly-cookie10-info{
    position:relative;
    z-index:2;

    display:grid;

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

    margin-top:15px;

    border-top:
        1px solid #d8d4cc;

    border-bottom:
        1px solid #d8d4cc;
}

.sly-cookie10-info > div{
    min-height:43px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    gap:3px;

    padding:6px 8px;

    border-right:
        1px solid #d8d4cc;
}

.sly-cookie10-info > div:last-child{
    border-right:0;
}

.sly-cookie10-info span{
    color:#97938b;

    font-size:9px;
    font-weight:900;

    letter-spacing:.10em;
}

.sly-cookie10-info strong{
    color:#17191d;

    font-size:9px;
    font-weight:950;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.sly-cookie10-actions{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:7px;

    margin-top:15px;
}

.sly-cookie10-accept,
.sly-cookie10-settings{
    height:38px;

    border-radius:3px;

    font-family:inherit;

    font-size:9px;
    font-weight:950;

    cursor:pointer;

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

.sly-cookie10-accept:hover,
.sly-cookie10-settings:hover{
    transform:translateY(-1px);
}

.sly-cookie10-accept{
    border:
        1px solid #15161a;

    background:#15161a;

    color:#fff;
}

.sly-cookie10-accept:hover{
    border-color:#ff2d8d;
    background:#ff2d8d;
}

.sly-cookie10-settings{
    border:
        1px solid #c8c5bf;

    background:#fffefa;

    color:#202228;
}

.sly-cookie10-settings:hover{
    border-color:#15161a;
}

.sly-cookie10-refuse{
    grid-column:1 / -1;

    justify-self:center;

    padding:2px 5px;

    border:0;

    background:none;

    color:#97938b;

    font-family:inherit;

    font-size:9px;
    font-weight:700;

    cursor:pointer;

    text-decoration:underline;

    text-decoration-color:
        transparent;

    text-underline-offset:3px;

    transition:
        color .18s ease,
        text-decoration-color .18s ease;
}

.sly-cookie10-refuse:hover{
    color:#5e5b55;

    text-decoration-color:
        #b7b2aa;
}


/* =========================================================
   STAMP
   ========================================================= */

.sly-cookie10-stamp{
    position:absolute;

    right:-16px;
    top:143px;

    z-index:4;

    width:74px;
    height:74px;

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

    border:
        2px solid rgba(255,45,141,.72);

    border-radius:50%;

    color:#ff2d8d;

    transform:rotate(13deg);

    opacity:.82;
}

.sly-cookie10-stamp::before,
.sly-cookie10-stamp::after{
    content:"";

    position:absolute;

    width:10px;
    height:10px;

    border-radius:50%;

    border:
        1px solid rgba(255,45,141,.65);
}

.sly-cookie10-stamp::before{
    left:7px;
}

.sly-cookie10-stamp::after{
    right:7px;
}

.sly-cookie10-stamp span{
    font-size:9px;
    font-weight:900;

    letter-spacing:.16em;
}

.sly-cookie10-stamp strong{
    margin-top:2px;

    font-size:11px;
    font-weight:950;

    letter-spacing:.08em;
}


/* =========================================================
   FOOTER
   ========================================================= */

.sly-cookie10-footer{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    gap:7px;

    margin-top:13px;

    padding-top:10px;

    border-top:
        1px dashed #cbc7be;

    color:#aaa69e;

    font-size:9px;
    font-weight:900;

    letter-spacing:.14em;
}

.sly-cookie10-footer i{
    width:3px;
    height:3px;

    flex:0 0 3px;

    border-radius:50%;

    background:#ff2d8d;
}

.sly-cookie10-footer strong{
    margin-left:auto;

    color:#858178;
}


/* =========================================================
   PERFORATIONS
   ========================================================= */

.sly-cookie10-perforations{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:7px;

    display:flex;
    justify-content:space-between;

    pointer-events:none;
}

.sly-cookie10-perforations b{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#fff;
}


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

.sly-cookie10-modal{
    position:fixed;
    inset:0;

    z-index:100000;

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

    visibility:hidden;
    opacity:0;

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

.sly-cookie10-modal.is-open{
    visibility:visible;
    opacity:1;
}

.sly-cookie10-overlay{
    position:absolute;
    inset:0;

    background:
        rgba(15,15,16,.58);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}


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

.sly-cookie10-modal-box{
    position:relative;
    z-index:2;

    width:min(570px,calc(100% - 30px));

    padding:29px;

    background:#f9f7f2;

    border:1px solid #d8d4cc;

    box-shadow:
        0 30px 80px rgba(0,0,0,.24);

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

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

.sly-cookie10-modal.is-open
.sly-cookie10-modal-box{
    transform:
        translateY(0)
        scale(1);
}

.sly-cookie10-modal-box::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #15161a 65%,
            #ff2d8d 65%
        );
}


/* CLOSE */

.sly-cookie10-close{
    position:absolute;

    top:14px;
    right:14px;

    width:29px;
    height:29px;

    border:1px solid #d7d3cb;

    border-radius:50%;

    background:#fffefa;

    color:#55534e;

    font-size:18px;
    line-height:1;

    cursor:pointer;
}

.sly-cookie10-close:hover{
    background:#ece9e2;
    color:#15161a;
}


/* HEADER */

.sly-cookie10-modal-top{
    display:flex;
    align-items:center;

    gap:13px;

    margin-bottom:16px;
}

.sly-cookie10-modal-code{
    width:46px;
    height:46px;

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

    background:#15161a;

    color:#fff;

    font-size:11px;
    font-weight:950;
}

.sly-cookie10-modal-kicker{
    margin-bottom:4px;

    color:#ff2d8d;

    font-size:9px;
    font-weight:950;

    letter-spacing:.17em;
}

.sly-cookie10-modal-box h2{
    margin:0;

    color:#15161a;

    font-size:23px;
    line-height:1.15;

    letter-spacing:-.025em;
}

.sly-cookie10-modal-intro{
    margin:0 0 19px;

    color:#74716b;

    font-size:10px;
    line-height:1.55;
}


/* OPTIONS */

.sly-cookie10-option{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:15px 0;

    border-top:1px dashed #d4d0c8;
}

.sly-cookie10-option:last-of-type{
    border-bottom:1px dashed #d4d0c8;
}

.sly-cookie10-option-copy{
    display:flex;
    flex-direction:column;

    gap:4px;
}

.sly-cookie10-option-copy strong{
    color:#202229;

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

.sly-cookie10-option-copy span{
    color:#8a867e;

    font-size:9.5px;
    line-height:1.45;
}


/* SWITCH */

.sly-cookie10-switch{
    position:relative;

    width:42px;
    height:24px;

    flex:0 0 42px;

    padding:0;

    border:0;
    border-radius:999px;

    background:#ddd9d1;

    cursor:pointer;

    transition:
        background .2s ease;
}

.sly-cookie10-switch span{
    position:absolute;

    top:3px;
    left:3px;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 2px 4px rgba(0,0,0,.14);

    transition:
        transform .2s ease;
}

.sly-cookie10-switch[aria-pressed="true"]{
    background:#ff2d8d;
}

.sly-cookie10-switch[aria-pressed="true"] span{
    transform:translateX(18px);
}

.sly-cookie10-switch.fixed{
    background:#15161a;

    cursor:default;
}

.sly-cookie10-switch.fixed span{
    transform:translateX(18px);
}


/* MODAL FOOTER */

.sly-cookie10-modal-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:20px;

    color:#aaa69e;

    font-size:9px;
    font-weight:900;

    letter-spacing:.14em;
}

.sly-cookie10-save{
    height:41px;

    padding:0 21px;

    border:0;

    background:#15161a;

    color:#fff;

    font-family:inherit;

    font-size:9px;
    font-weight:900;

    cursor:pointer;

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

.sly-cookie10-save:hover{
    background:#ff2d8d;
    transform:translateY(-1px);
}


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

@media(max-width:560px){

    .sly-cookie10{
        right:10px;
        bottom:10px;

        width:calc(100% - 20px);
    }

    .sly-cookie10-ticket{
        padding:16px 15px 13px;
    }

    .sly-cookie10-title h3{
        font-size:23px;
    }

    .sly-cookie10-copy p{
        font-size:9.2px;
    }

    .sly-cookie10-stamp{
        top:136px;
        right:-19px;

        width:65px;
        height:65px;
    }

    .sly-cookie10-stamp span{
        font-size:9px;
    }

    .sly-cookie10-stamp strong{
        font-size:9px;
    }

    .sly-cookie10-actions{
        grid-template-columns:1fr 1fr;
    }

    .sly-cookie10-info > div{
        min-height:41px;
        padding:5px;
    }

    .sly-cookie10-info span{
        font-size:9px;
    }

    .sly-cookie10-info strong{
        font-size:9px;
    }

    .sly-cookie10-modal{
        align-items:flex-end;
    }

    .sly-cookie10-modal-box{
        width:100%;

        max-height:90vh;
        overflow-y:auto;

        padding:23px 18px 18px;

        border-radius:15px 15px 0 0;
    }

}


@media(max-width:380px){

    .sly-cookie10-title h3{
        font-size:21px;
    }

    .sly-cookie10-info{
        grid-template-columns:1fr;
    }

    .sly-cookie10-info > div{
        min-height:34px;

        border-right:0;
        border-bottom:1px solid #d8d4cc;
    }

    .sly-cookie10-info > div:last-child{
        border-bottom:0;
    }

    .sly-cookie10-stamp{
        display:none;
    }

}


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

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

    .sly-cookie10,
    .sly-cookie10-modal,
    .sly-cookie10-modal-box,
    .sly-cookie10-accept,
    .sly-cookie10-settings,
    .sly-cookie10-switch,
    .sly-cookie10-switch span,
    .sly-cookie10-link span,
    .sly-cookie10-save{
        transition:none !important;
    }

}



/* =========================================================
   STICKY PLAYER (STICKY 04D)
   ========================================================= */

/* =========================================================
   SLY STICKY PLAYER 04D · COVER RAIL
   ========================================================= */

.sly-sticky04d{

    --pink:#ff2d8d;
    --cyan:#00dff5;

    --bg:#07090e;
    --text:#ffffff;
    --muted:#858b97;

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:99990;

    width:100%;

    pointer-events:none;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* =========================================================
   ACCENT
   ========================================================= */

.sly-sticky04d__accent{

    width:100%;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--cyan) 65%,
            transparent
        );

    opacity:.9;

    transition:opacity .3s ease;
}


/* =========================================================
   INNER
   ========================================================= */

.sly-sticky04d__inner{

    pointer-events:auto;

    width:100%;

    min-height:72px;

    padding:
        7px
        max(15px,calc((100vw - 1220px) / 2));

    display:grid;

    grid-template-columns:
        58px
        auto
        minmax(220px,1fr)
        75px
        44px
        140px;

    align-items:center;

    gap:14px;

    background:
        linear-gradient(
            180deg,
            rgba(10,12,18,.99),
            rgba(6,8,12,.99)
        );

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

    box-shadow:
        0 -8px 28px rgba(0,0,0,.24);

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

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


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

.sly-sticky04d__cover{

    position:relative;

    width:58px;
    height:58px;

    overflow:hidden;

    border-radius:9px;

    background:#171a22;

    box-shadow:
        0 5px 14px rgba(0,0,0,.3);

    transition:
        transform .25s ease;
}

.sly-sticky04d.is-playing
.sly-sticky04d__cover{

    transform:scale(1.02);
}

.sly-sticky04d__cover img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

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

.sly-sticky04d__cover:hover img{

    transform:scale(1.05);
}


/* live point */

.sly-sticky04d__cover-live{

    position:absolute;

    left:6px;
    bottom:6px;

    width:8px;
    height:8px;

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

    border-radius:50%;

    background:rgba(7,9,14,.82);

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

.sly-sticky04d__cover-live span{

    width:5px;
    height:5px;

    border-radius:50%;

    background:#ff365c;

    box-shadow:
        0 0 0 3px rgba(255,54,92,.12),
        0 0 8px rgba(255,54,92,.72);

    animation:
        slySticky04dPulse 1.7s ease-in-out infinite;
}


/* =========================================================
   STATION
   ========================================================= */

.sly-sticky04d__station{

    min-width:0;

    padding-right:14px;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    column-gap:5px;
    row-gap:5px;

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

.sly-sticky04d__station strong{

    color:#fff;

    font-size:19px;
    line-height:1;

    font-weight:950;

    letter-spacing:-.08em;
}

/* LIVE */

.sly-sticky04d__live{

    width:100%;

    display:flex;
    align-items:center;

    gap:5px;

    color:#9197a3;

    font-size:9px;
    line-height:1;

    font-weight:900;

    letter-spacing:.1em;
}

.sly-sticky04d__live i{

    width:5px;
    height:5px;

    border-radius:50%;

    background:#ff355e;
}


/* =========================================================
   TRACK
   ========================================================= */

.sly-sticky04d__track{

    min-width:0;
    overflow:hidden;
}

.sly-sticky04d__label{

    margin-bottom:3px;

    color:var(--pink);

    font-size:9px;
    line-height:1;

    font-weight:900;

    letter-spacing:.14em;
}

.sly-sticky04d__title{

    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;

    color:var(--text);

    font-size:13px;
    line-height:1.15;

    font-weight:800;
}

.sly-sticky04d__meta{

    margin-top:4px;

    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;

    color:var(--muted);

    font-size:8px;
    line-height:1;

    font-weight:600;
}


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

.sly-sticky04d__wave{

    height:28px;

    display:flex;

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

    gap:3px;

    opacity:.38;
}

.sly-sticky04d__wave i{

    display:block;

    width:2px;

    border-radius:99px;

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

    transform-origin:center;

    animation:
        slySticky04dBars .9s ease-in-out infinite;

    animation-play-state:paused;
}

.sly-sticky04d.is-playing
.sly-sticky04d__wave i{

    animation-play-state:running;
}

.sly-sticky04d__wave i:nth-child(1){
    height:7px;
    animation-delay:-.12s;
}

.sly-sticky04d__wave i:nth-child(2){
    height:15px;
    animation-delay:-.38s;
}

.sly-sticky04d__wave i:nth-child(3){
    height:21px;
    animation-delay:-.7s;
}

.sly-sticky04d__wave i:nth-child(4){
    height:11px;
    animation-delay:-.26s;
}

.sly-sticky04d__wave i:nth-child(5){
    height:24px;
    animation-delay:-.58s;
}

.sly-sticky04d__wave i:nth-child(6){
    height:16px;
    animation-delay:-.8s;
}

.sly-sticky04d__wave i:nth-child(7){
    height:20px;
    animation-delay:-.45s;
}

.sly-sticky04d__wave i:nth-child(8){
    height:13px;
    animation-delay:-.22s;
}

.sly-sticky04d__wave i:nth-child(9){
    height:18px;
    animation-delay:-.67s;
}

.sly-sticky04d__wave i:nth-child(10){
    height:8px;
    animation-delay:-.34s;
}


/* =========================================================
   PLAY
   ========================================================= */

.sly-sticky04d__play{

    width:44px;
    height:44px;

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

    padding:0;

    border:0;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--pink),
            #d91877
        );

    color:#fff;

    cursor:pointer;

    box-shadow:
        0 6px 18px rgba(255,45,141,.2);

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

.sly-sticky04d__play:hover{

    transform:scale(1.05);

    filter:brightness(1.07);
}

.sly-sticky04d__play:active{

    transform:scale(.94);
}

.sly-sticky04d__icon{

    width:17px;
    height:17px;

    fill:none;

    stroke:#fff;

    stroke-width:2.2;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.sly-sticky04d__icon--play{

    fill:#fff;
    stroke:none;

    margin-left:2px;
}

.sly-sticky04d__icon--pause{
    display:none;
}

.sly-sticky04d.is-playing
.sly-sticky04d__icon--play{
    display:none;
}

.sly-sticky04d.is-playing
.sly-sticky04d__icon--pause{
    display:block;
}


/* =========================================================
   VOLUME
   ========================================================= */

.sly-sticky04d__volume{

    display:flex;
    align-items:center;

    gap:6px;
}

.sly-sticky04d__volume-btn{

    width:27px;
    height:27px;

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

    padding:0;

    border:0;

    border-radius:7px;

    background:transparent;

    color:#9096a2;

    cursor:pointer;

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

.sly-sticky04d__volume-btn:hover{

    color:#fff;

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

/* visualiseur : vagues audio au-dessus de la barre */

.sly-sticky04d__viz{

    position:absolute;

    left:0;
    bottom:calc(100% - 2px);

    z-index:-1;

    width:100%;
    height:70px;

    pointer-events:none;

    -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);
            mask-image:linear-gradient(180deg,transparent,#000 30%);
}

@media (max-width:600px){
    .sly-sticky04d__viz{ height:48px; }
}

.sly-sticky04d__volume-btn.is-muted,
.sly-sticky04d__volume-btn.is-muted:hover{

    color:#ff3b4a;
}

.sly-sticky04d__volume-btn svg{

    width:14px;
    height:14px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.sly-sticky04d__volume input{

    width:83px;
    height:3px;

    margin:0;

    appearance:none;
    -webkit-appearance:none;

    border:0;

    border-radius:99px;

    background:#292d36;

    cursor:pointer;
}

.sly-sticky04d__volume input::-webkit-slider-thumb{

    appearance:none;
    -webkit-appearance:none;

    width:9px;
    height:9px;

    border:0;

    border-radius:50%;

    background:#fff;
}

.sly-sticky04d__volume input::-moz-range-thumb{

    width:9px;
    height:9px;

    border:0;

    border-radius:50%;

    background:#fff;
}


/* =========================================================
   PLAYING
   ========================================================= */

.sly-sticky04d.is-playing
.sly-sticky04d__inner{

    box-shadow:
        0 -8px 28px rgba(0,0,0,.28),
        0 -1px 20px rgba(255,45,141,.04);
}


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

@keyframes slySticky04dBars{

    0%,100%{
        transform:scaleY(.4);
    }

    50%{
        transform:scaleY(1);
    }

}

@keyframes slySticky04dPulse{

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

    50%{
        opacity:.45;
        transform:scale(.78);
    }

}


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

@media(max-width:950px){

    .sly-sticky04d__inner{

        grid-template-columns:
            52px
            auto
            minmax(160px,1fr)
            55px
            42px
            110px;

        gap:10px;
    }

    .sly-sticky04d__volume input{
        width:55px;
    }

}


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

@media(max-width:760px){

    .sly-sticky04d__inner{

        grid-template-columns:
            52px
            auto
            minmax(140px,1fr)
            44px;

        gap:8px;
    }

    .sly-sticky04d__wave{
        display:none;
    }

    .sly-sticky04d__volume{
        display:none;
    }

    .sly-sticky04d__station{
        padding-right:8px;
    }

    .sly-sticky04d__station strong{
        font-size:17px;
    }

    .sly-sticky04d__station-kicker{
        display:none;
    }

}


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

@media(max-width:600px){

    .sly-sticky04d__inner{

        min-height:60px;

        padding:
            6px 8px;

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

        gap:8px;
    }

    .sly-sticky04d__cover{

        width:46px;
        height:46px;

        border-radius:7px;
    }

    .sly-sticky04d__cover-live{
        left:4px;
        bottom:4px;
    }

    .sly-sticky04d__station{
        display:none;
    }

    .sly-sticky04d__label{
        font-size:9px;
    }

    .sly-sticky04d__title{
        font-size:11px;
    }

    .sly-sticky04d__meta{
        font-size:9px;
    }

    .sly-sticky04d__play{

        width:40px;
        height:40px;
    }

}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media(max-width:380px){

    .sly-sticky04d__inner{

        min-height:55px;

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

        gap:6px;
    }

    .sly-sticky04d__cover{

        width:42px;
        height:42px;
    }

    .sly-sticky04d__title{
        font-size:10px;
    }

    .sly-sticky04d__meta{
        font-size:9px;
    }

    .sly-sticky04d__play{

        width:37px;
        height:37px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.sly-sticky04d button:focus-visible,
.sly-sticky04d input:focus-visible{

    outline:2px solid var(--cyan);
    outline-offset:3px;
}


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

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

    .sly-sticky04d *,
    .sly-sticky04d__wave i{

        animation:none !important;
        transition:none !important;
    }

}


/* =========================================================
   LECTEUR · ANNEAU DE CHARGEMENT DÉGRADÉ SLY
   ========================================================= */

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

.sly-sticky04d__play{
    position:relative;
    overflow:visible;
}

.sly-sticky04d__spinner{

    position:absolute;
    inset:-4px;

    border-radius:50%;

    padding:2px;

    background:
        conic-gradient(
            from 0deg,
            var(--pink),
            #8f3cff,
            var(--cyan),
            var(--pink)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    opacity:0;

    pointer-events:none;

    transition:opacity .2s ease;
}

.sly-sticky04d.is-loading .sly-sticky04d__spinner{

    opacity:1;

    animation:slySpinRing .85s linear infinite;
}

.sly-sticky04d.is-loading .sly-sticky04d__icon{
    opacity:.35;
}


#sh05Play{
    position:absolute;
}

#sh05Play.is-loading::before{

    content:"";

    position:absolute;
    inset:-6px;

    border-radius:50%;

    padding:2px;

    background:
        conic-gradient(
            from 0deg,
            #ff2d8d,
            #8f3cff,
            #00d9ed,
            #ff2d8d
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    animation:slySpinRing .85s linear infinite;
}


/* =========================================================
   LECTEUR · MENU DE SÉLECTION DES FLUX
   ========================================================= */

.sly-sticky04d__station{

    border:0;
    background:none;
    cursor:pointer;
    text-align:left;
    font:inherit;

    position:relative;
}

.sly-sticky04d__station-arrow{

    position:absolute;
    top:6px;
    right:-2px;

    font-size:9px;
    color:rgba(255,255,255,.35);

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

.sly-sticky04d__station[aria-expanded="true"] .sly-sticky04d__station-arrow{
    color:var(--pink);
    transform:rotate(180deg);
}

.sly-sticky04d__stations{

    position:absolute;
    left:18px;
    bottom:calc(100% + 14px);

    width:250px;

    display:flex;
    flex-direction:column;
    gap:4px;

    padding:12px;

    border-radius:16px;

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

    background:
        linear-gradient(
            160deg,
            rgba(24,10,32,.98),
            rgba(12,6,18,.98)
        );

    backdrop-filter:blur(18px);

    box-shadow:
        0 24px 60px rgba(0,0,0,.55);

    opacity:0;
    visibility:hidden;
    transform:translateY(10px) scale(.97);
    transform-origin:bottom left;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;

    z-index:60;
}

.sly-sticky04d__stations.is-open{

    /* le conteneur du lecteur est en pointer-events:none : sans ça,
       les clics traversent le menu et le choix n'est jamais reçu */
    pointer-events:auto;

    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.sly-sticky04d__stations-title{

    padding:4px 10px 8px;

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

    font-size:8px;
    font-weight:900;
    letter-spacing:.14em;

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

    margin-bottom:4px;
}

.sly-sticky04d__station-option{

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

    width:100%;

    padding:9px 10px;

    border:0;
    border-radius:11px;

    background:none;

    cursor:pointer;

    text-align:left;

    transition:background .18s ease;
}

.sly-sticky04d__station-option:hover{
    background:rgba(255,255,255,.06);
}

.sly-sticky04d__station-option.is-active{
    background:
        linear-gradient(
            120deg,
            rgba(255,45,141,.16),
            rgba(0,217,237,.1)
        );
}

.sly-sticky04d__station-dot{

    width:8px;
    height:8px;
    flex-shrink:0;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--pink),
            #8f3cff
        );

    box-shadow:0 0 0 3px rgba(255,45,141,.12);
}

.sly-sticky04d__station-name{

    flex:1;
    min-width:0;

    display:flex;
    flex-direction:column;

    color:#fff;

    font-size:12px;
    font-weight:800;
    letter-spacing:-.01em;
}

.sly-sticky04d__station-name small{

    margin-top:2px;

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

    font-size:9px;
    font-weight:600;
    letter-spacing:0;
}

.sly-sticky04d__station-check{

    flex-shrink:0;

    width:16px;
    height:16px;

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

    border-radius:50%;

    font-style:normal;
    font-size:9px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--pink),
            #8f3cff
        );

    opacity:0;
    transform:scale(.5);

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

.sly-sticky04d__station-option.is-active .sly-sticky04d__station-check{
    opacity:1;
    transform:scale(1);
}

@media(max-width:640px){

    .sly-sticky04d__stations{
        left:10px;
        width:min(88vw,280px);
    }

}


/* =========================================================
   LECTEUR · FLUX EN COURS (retour visuel sur la barre)
   ========================================================= */

.sly-sticky04d{
    --station:var(--pink);
}

.sly-sticky04d[data-station="live"]  { --station:#ff2d8d; }
.sly-sticky04d[data-station="urban"] { --station:#ffa726; }
.sly-sticky04d[data-station="club"]  { --station:#a35cff; }
.sly-sticky04d[data-station="golds"] { --station:#f5d020; }

.sly-sticky04d__accent{

    background:
        linear-gradient(
            90deg,
            var(--station),
            var(--cyan) 65%,
            transparent
        );
}

/* le sélecteur devient un vrai bouton, lisible d'un coup d'œil */

.sly-sticky04d__station{

    flex-direction:column;
    align-items:flex-start;
    flex-wrap:nowrap;

    gap:4px;

    padding:7px 24px 7px 12px;

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

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

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

.sly-sticky04d__station:hover,
.sly-sticky04d__station[aria-expanded="true"]{

    border-color:var(--station);

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

    box-shadow:0 0 0 3px color-mix(in srgb, var(--station) 22%, transparent);
}

.sly-sticky04d__station-kicker{

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

    font-size:9px;
    line-height:1;

    font-weight:900;

    letter-spacing:.16em;
}

.sly-sticky04d__station-current{

    display:flex;
    align-items:center;

    gap:6px;
}

.sly-sticky04d__station-current span{

    padding:3px 7px;

    border-radius:6px;

    background:var(--station);

    color:#0a0b10;

    font-size:10px;
    line-height:1;

    font-weight:900;

    letter-spacing:.08em;
}

.sly-sticky04d__live{
    color:#c3c8d2;
}

.sly-sticky04d__station-arrow{

    top:50%;
    right:9px;

    margin-top:-5px;

    font-size:9px;

    color:rgba(255,255,255,.6);
}

.sly-sticky04d__station[aria-expanded="true"] .sly-sticky04d__station-arrow{
    color:var(--station);
}

/* animation quand on change de flux */

.sly-sticky04d.is-switching .sly-sticky04d__station{
    animation:slyStationSwitch .9s ease;
}

.sly-sticky04d.is-switching .sly-sticky04d__title{
    animation:slyStationFade .9s ease;
}

@keyframes slyStationSwitch{

    0%{
        box-shadow:0 0 0 0 color-mix(in srgb, var(--station) 70%, transparent);
    }

    100%{
        box-shadow:0 0 0 14px transparent;
    }

}

@keyframes slyStationFade{

    0%{ opacity:.2; transform:translateY(4px); }

    100%{ opacity:1; transform:none; }

}

/* menu : une pastille de la couleur de chaque flux */

.sly-sticky04d__station-option[data-station="live"]  { --dot:#ff2d8d; }
.sly-sticky04d__station-option[data-station="urban"] { --dot:#ffa726; }
.sly-sticky04d__station-option[data-station="club"]  { --dot:#a35cff; }
.sly-sticky04d__station-option[data-station="golds"] { --dot:#f5d020; }

.sly-sticky04d__station-option .sly-sticky04d__station-dot{

    background:var(--dot);

    box-shadow:0 0 0 3px color-mix(in srgb, var(--dot) 25%, transparent);
}

.sly-sticky04d__station-option.is-active{

    background:color-mix(in srgb, var(--dot) 16%, transparent);

    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--dot) 55%, transparent);
}

.sly-sticky04d__station-option.is-active .sly-sticky04d__station-check{
    background:var(--dot);
    color:#0a0b10;
}


/* =========================================================
   LECTEUR · PLEIN ÉCRAN MOBILE
   ========================================================= */

.sly-sticky04d__full{
    display:none;
}

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

@media(max-width:600px){

    .sly-sticky04d__inner{
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .sly-sticky04d__full{

        position:fixed;
        inset:0;
        z-index:5;

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

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

        overflow:hidden;
        overscroll-behavior:contain;

        background:#07090e;

        color:#fff;

        pointer-events:auto;

        transform:translateY(100%);
        visibility:hidden;

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

    .sly-sticky04d__full.is-open{

        transform:none;
        visibility:visible;

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

    .sly-sticky04d__full-bg{

        position:absolute;
        inset:0;

        width:100%;
        height:100%;

        object-fit:cover;

        transform:scale(1.35);

        filter:blur(44px) saturate(1.35) brightness(.5);
    }

    .sly-sticky04d__full-shade{

        position:absolute;
        inset:0;

        background:
            linear-gradient(
                180deg,
                rgba(7,9,14,.55),
                rgba(7,9,14,.2) 40%,
                rgba(7,9,14,.85)
            );
    }

    .sly-sticky04d__full > *:not(.sly-sticky04d__full-bg):not(.sly-sticky04d__full-shade){
        position:relative;
    }

    .sly-sticky04d__full-top{

        width:100%;

        display:grid;
        grid-template-columns:44px 1fr 44px;
        align-items:center;
    }

    .sly-sticky04d__full-close{

        width:44px;
        height:44px;

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

        padding:0;

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

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

        color:#fff;

        cursor:pointer;
    }

    .sly-sticky04d__full-close svg{

        width:22px;
        height:22px;

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

    .sly-sticky04d__full-station{

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

        gap:7px;

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

        font-size:10px;
        font-weight:900;

        letter-spacing:.16em;
    }

    .sly-sticky04d__full-station span{

        padding:4px 8px;

        border-radius:6px;

        background:var(--station);

        color:#0a0b10;
    }

    .sly-sticky04d__full-station i{

        width:6px;
        height:6px;

        margin-left:4px;

        border-radius:50%;

        background:#ff355e;

        box-shadow:0 0 8px rgba(255,54,92,.8);
    }

    .sly-sticky04d__full-cover{

        flex:1;

        width:100%;
        min-height:0;

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

    .sly-sticky04d__full-disc{

        position:relative;

        width:min(78vw,44vh,340px);
        aspect-ratio:1;

        overflow:hidden;

        border-radius:50%;

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

        background:#171a22;

        box-shadow:
            0 24px 60px rgba(0,0,0,.55),
            0 0 0 1px rgba(255,255,255,.06),
            0 0 60px color-mix(in srgb, var(--station) 30%, transparent);

        animation:slyFullSpin 22s linear infinite;
        animation-play-state:paused;
    }

    .sly-sticky04d.is-playing .sly-sticky04d__full-disc{
        animation-play-state:running;
    }

    .sly-sticky04d__full-disc img{

        display:block;

        width:100%;
        height:100%;

        object-fit:cover;
    }

    .sly-sticky04d__full-hole{

        position:absolute;

        top:50%;
        left:50%;

        width:15%;
        aspect-ratio:1;

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

        border-radius:50%;

        background:#07090e;

        border:3px solid rgba(255,255,255,.14);
    }

    .sly-sticky04d__full-track{

        width:100%;

        margin-top:22px;

        text-align:center;
    }

    .sly-sticky04d__full-title{

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

        overflow:hidden;

        margin:0;

        font-size:24px;
        line-height:1.15;

        font-weight:800;

        letter-spacing:-.02em;
    }

    .sly-sticky04d__full-artist{

        margin:8px 0 0;

        overflow:hidden;

        white-space:nowrap;
        text-overflow:ellipsis;

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

        font-size:15px;
        font-weight:600;
    }

    .sly-sticky04d__full-play{

        width:76px;
        height:76px;

        margin:22px 0 20px;

        flex-shrink:0;
    }

    .sly-sticky04d__full-play .sly-sticky04d__icon{

        width:32px;
        height:32px;
    }

    .sly-sticky04d__full-stations{

        display:flex;
        flex-wrap:wrap;
        justify-content:center;

        gap:8px;
    }

    .sly-sticky04d__full-stations button{

        padding:9px 16px;

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

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

        color:#fff;

        font:inherit;
        font-size:12px;
        font-weight:800;

        cursor:pointer;
    }

    .sly-sticky04d__full-stations button.is-active{

        border-color:var(--station);

        background:var(--station);

        color:#0a0b10;
    }

}


/* =========================================================
   EN-TÊTE SIMPLE (PAGES INTERNES)
   ========================================================= */

.sly-page-header{

    position:sticky;
    top:0;
    z-index:40;

    display:flex;
    align-items:center;

    gap:0;

    height:84px;

    padding:0 clamp(25px,4vw,65px);

    background:
        linear-gradient(
            180deg,
            rgba(10,4,14,.97),
            rgba(10,4,14,.9)
        );

    backdrop-filter:blur(16px);

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

.sly-page-header .sh05-nav{
    margin-left:clamp(40px,6vw,90px);
}

@media(max-width:900px){

    .sly-page-header{
        justify-content:space-between;
    }

    /* Sur mobile / tablette, la navigation passe par le menu offcanvas. */
    .sly-page-header .sh05-nav{
        display:none;
    }

}

.sly-page-header__menu{
    margin-left:auto;
    display:none;
}

@media(max-width:900px){

    .sly-page-header__menu{
        display:flex;
    }

}


/* =========================================================
   PAGE · QUI SOMMES-NOUS
   ========================================================= */

.qsn-page{

    --qsn-pink:#ff2d8d;
    --qsn-violet:#8f3cff;
    --qsn-cyan:#00d9ed;

    position:relative;

    background:#0a040e;
    color:#fff;

    overflow:hidden;
}

.qsn-kicker{

    display:inline-block;

    margin-bottom:14px;

    color:var(--qsn-pink);

    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
}

.qsn-page h1,
.qsn-page h2{
    font-family:"Space Grotesk",sans-serif;
    line-height:1.05;
}

.qsn-page strong{
    background:
        linear-gradient(
            120deg,
            var(--qsn-pink),
            var(--qsn-violet)
        );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.qsn-page p{
    color:rgba(255,255,255,.62);
    line-height:1.65;
    font-size:14.5px;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.qsn-hero{

    position:relative;

    padding:90px clamp(25px,6vw,90px) 70px;

    text-align:center;

    max-width:900px;
    margin:0 auto;
}

.qsn-hero__glow{

    position:absolute;
    top:-120px;
    left:50%;

    width:600px;
    height:600px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(255,45,141,.22),
            transparent 70%
        );

    filter:blur(10px);

    pointer-events:none;
}

.qsn-hero h1{

    position:relative;

    margin-bottom:22px;

    font-size:clamp(34px,6vw,62px);
    font-weight:800;
}

.qsn-hero p{

    position:relative;

    max-width:640px;
    margin:0 auto;

    font-size:15.5px;
}

.qsn-hero__stats{

    position:relative;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:clamp(24px,5vw,60px);

    margin-top:50px;
}

.qsn-hero__stats div{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}

.qsn-hero__stats strong{

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

    background:
        linear-gradient(
            120deg,
            var(--qsn-cyan),
            var(--qsn-pink)
        );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.qsn-hero__stats span{

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

    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}


/* ---------------------------------------------------------
   MISSION
--------------------------------------------------------- */

.qsn-mission{

    display:grid;
    grid-template-columns:.85fr 1fr;

    gap:clamp(30px,5vw,70px);
    align-items:center;

    max-width:1180px;
    margin:0 auto;

    padding:60px clamp(25px,6vw,90px);
}

.qsn-mission__visual{

    border-radius:22px;
    overflow:hidden;

    aspect-ratio:4/3;

    box-shadow:0 30px 70px rgba(0,0,0,.5);
}

.qsn-mission__visual img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.qsn-mission__copy h2{

    margin-bottom:18px;

    font-size:clamp(24px,3.2vw,36px);
    font-weight:800;
}

.qsn-mission__copy p + p{
    margin-top:14px;
}


/* ---------------------------------------------------------
   NOS ANTENNES
--------------------------------------------------------- */

.qsn-stations{

    padding:60px clamp(25px,6vw,90px) 80px;

    max-width:1180px;
    margin:0 auto;
}

.qsn-stations__header{

    text-align:center;

    margin-bottom:44px;
}

.qsn-stations__header h2{
    font-size:clamp(24px,3.2vw,36px);
    font-weight:800;
}

.qsn-stations__grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:18px;
}

.qsn-station-card{

    position:relative;

    padding:26px 22px;

    border-radius:20px;

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

    background:
        linear-gradient(
            160deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.015)
        );

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

.qsn-station-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,45,141,.35);
}

.qsn-station-card__dot{

    display:inline-block;

    width:10px;
    height:10px;

    margin-bottom:16px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--qsn-pink),
            var(--qsn-violet)
        );

    box-shadow:0 0 0 5px rgba(255,45,141,.12);
}

.qsn-station-card h3{

    margin-bottom:8px;

    font-size:18px;
    font-weight:800;
}

.qsn-station-card p{

    min-height:52px;

    font-size:12.5px;
}

.qsn-station-card__play{

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

    margin-top:16px;
    padding:10px 16px;

    border:0;
    border-radius:999px;

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

    color:#fff;

    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;

    cursor:pointer;

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

.qsn-station-card__play:hover{

    background:
        linear-gradient(
            120deg,
            var(--qsn-pink),
            var(--qsn-violet)
        );

    transform:scale(1.03);
}


/* ---------------------------------------------------------
   TIMELINE
--------------------------------------------------------- */

.qsn-timeline{

    padding:60px clamp(25px,6vw,90px) 80px;

    max-width:1180px;
    margin:0 auto;
}

.qsn-timeline__header{

    text-align:center;

    margin-bottom:44px;
}

.qsn-timeline__header h2{
    font-size:clamp(24px,3.2vw,36px);
    font-weight:800;
}

.qsn-timeline__track{

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:18px;
}

.qsn-timeline__item{

    padding:24px 20px;

    border-radius:18px;

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

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

.qsn-timeline__item strong{

    display:block;

    margin-bottom:10px;

    font-size:26px;
    font-weight:800;
}

.qsn-timeline__item span{

    display:block;

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

    font-size:12.5px;
    line-height:1.5;
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.qsn-cta{

    position:relative;

    padding:80px clamp(25px,6vw,90px) 100px;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,45,141,.07)
        );
}

.qsn-cta h2{

    margin-bottom:14px;

    font-size:clamp(24px,3.6vw,40px);
    font-weight:800;
}

.qsn-cta p{
    margin:0 auto 30px;
    max-width:420px;
}

.qsn-cta__actions{

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

    gap:18px;
}

.qsn-cta__play{

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

    padding:15px 28px;

    border:0;
    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            var(--qsn-pink),
            #d91877
        );

    color:#fff;

    font-size:13px;
    font-weight:800;
    letter-spacing:.03em;

    cursor:pointer;

    box-shadow:0 15px 40px rgba(255,45,141,.25);

    transition:transform .2s ease;
}

.qsn-cta__play:hover{
    transform:scale(1.04);
}

.qsn-cta__home{

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

    font-size:12.5px;
    font-weight:700;

    text-decoration:none;

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

    padding-bottom:2px;

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

.qsn-cta__home:hover{
    color:#fff;
    border-color:#fff;
}


@media(max-width:900px){

    .qsn-mission{
        grid-template-columns:1fr;
    }

    .qsn-stations__grid,
    .qsn-timeline__track{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:560px){

    .qsn-stations__grid,
    .qsn-timeline__track{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   PAGE · DÉTAIL ACTUALITÉ (sly-news08)
   ========================================================= */

.sly-news08{

    --bg:#0a040e;
    --soft:#140a1a;
    --soft2:#1c0f24;

    --text:#ffffff;
    --muted:#9993a0;
    --light:#6d6875;

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

    --pink:#ff2d8d;

    width:100%;

    background:var(--bg);

    color:var(--text);

    font-family:Arial,Helvetica,sans-serif;

    box-sizing:border-box;
}

.sly-news08 *,
.sly-news08 *::before,
.sly-news08 *::after{
    box-sizing:border-box;
}


/* NOT FOUND */

.sly-news08__notfound{

    width:min(600px,calc(100% - 40px));
    margin:0 auto;

    padding:90px 0;

    text-align:center;
}

.sly-news08__notfound h1{
    margin:14px 0 8px;
    font-size:28px;
}

.sly-news08__notfound p{
    color:var(--muted);
    font-size:12px;
    margin-bottom:18px;
}

.sly-news08__notfound a{
    color:var(--pink);
    text-decoration:none;
    font-weight:800;
    font-size:11px;
}


/* MAIN */

.sly-news08__main,
.sly-news08 > .sly-news08__breadcrumb,
.sly-news08 > .sly-news08__layout{

    width:min(1180px,calc(100% - 40px));

    margin:0 auto;
}

.sly-news08 > .sly-news08__breadcrumb{
    padding-top:44px;
    padding-bottom:30px;
}

.sly-news08__breadcrumb{

    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:0;

    color:var(--muted);

    font-size:11px;
}

.sly-news08__breadcrumb a{

    color:var(--muted);

    text-decoration:none;
}

.sly-news08__breadcrumb a:hover{
    color:#fff;
}

.sly-news08__breadcrumb span{

    color:rgba(255,255,255,.25);
}

.sly-news08__breadcrumb strong{

    color:var(--text);
}


/* LAYOUT */

.sly-news08__layout{

    display:grid;

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

    gap:38px;

    align-items:start;

    padding-bottom:70px;
}


/* CATEGORY / DATE */

.sly-news08__category-row{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;
}

.sly-news08__category{

    padding:5px 8px;

    background:var(--pink);

    color:#fff;

    font-size:9px;

    font-weight:900;

    letter-spacing:.1em;
}

.sly-news08__date{

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:var(--muted);

    font-size:11px;

    font-weight:700;

    letter-spacing:.05em;
}


/* TITLE */

.sly-news08__article h1{

    max-width:820px;

    margin:0;

    font-family:"Space Grotesk",Arial,sans-serif;

    font-size:clamp(29px,3.8vw,46px);

    line-height:1.05;

    letter-spacing:-.03em;

    font-weight:800;
}

.sly-news08__subtitle{

    max-width:740px;

    margin:22px 0 28px;

    color:var(--muted);

    font-size:clamp(13px,1.1vw,15px);

    line-height:1.6;
}


/* AUTHOR */

.sly-news08__author-line{

    display:flex;

    align-items:center;

    gap:12px;

    padding-bottom:24px;

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

.sly-news08__author-avatar{

    width:34px;
    height:34px;

    flex:0 0 34px;

    display:flex;

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

    border-radius:50%;

    background:var(--soft2);

    color:var(--text);

    font-size:12px;

    font-weight:900;
}

.sly-news08__author-avatar--img{
    object-fit:cover;
}

.sly-news08__author-line strong{

    display:block;

    font-size:12px;
}

.sly-news08__author-line span{

    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:10px;
}


/* HERO */

.sly-news08__hero{
    margin:22px 0 0;
}

.sly-news08__hero img{

    width:100%;

    height:clamp(280px,38vw,460px);

    display:block;

    object-fit:cover;

    border-radius:4px;
}


/* BODY */

.sly-news08__body{

    margin-top:28px;

    color:#d7d2dc;

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

    font-size:clamp(14px,1.1vw,16px);

    line-height:1.8;
}

.sly-news08__body p{
    margin:0 0 18px;
}

.sly-news08__opening,
.sly-news08__body p.sly-news08__opening{

    color:var(--text);

    font-family:Arial,Helvetica,sans-serif;

    font-size:clamp(15px,1.3vw,18px);

    line-height:1.55;

    font-weight:600;

    letter-spacing:-.01em;
}

.sly-news08__body img{
    max-width:100%;
    height:auto;
    border-radius:4px;
    margin:10px 0;
}

.sly-news08__body h2,
.sly-news08__body h3{

    margin:34px 0 13px;

    color:var(--text);

    font-family:"Space Grotesk",Arial,sans-serif;

    letter-spacing:-.02em;

    font-weight:800;
}

.sly-news08__body h2{ font-size:clamp(20px,2vw,28px); }
.sly-news08__body h3{ font-size:clamp(17px,1.6vw,22px); }

.sly-news08__body blockquote{

    margin:28px 0;

    padding:14px 18px;

    border-left:2px solid var(--pink);

    background:var(--soft);

    font-family:Arial,Helvetica,sans-serif;
}

.sly-news08__body a{
    color:var(--pink);
}


/* SHARE */

.sly-news08__share{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:16px 0;

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

    font-family:Arial,Helvetica,sans-serif;
}

.sly-news08__share > span{

    color:var(--muted);

    font-size:10px;
}

.sly-news08__share > div{

    display:flex;

    align-items:center;

    gap:8px;
}

.sly-news08__share a,
.sly-news08__share button{

    padding:7px 11px;

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

    border-radius:999px;

    background:transparent;

    color:var(--muted);

    text-decoration:none;

    font-family:inherit;

    font-size:9px;

    font-weight:700;

    cursor:pointer;
}

.sly-news08__share a:hover,
.sly-news08__share button:hover{

    border-color:var(--pink);

    color:var(--pink);
}


/* AUTHOR BOX */

.sly-news08__author-box{

    margin-top:30px;

    padding:18px 0;

    display:flex;

    align-items:center;

    gap:14px;

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

.sly-news08__author-box-avatar{

    width:46px;
    height:46px;

    flex:0 0 46px;

    display:flex;

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

    border-radius:50%;

    background:var(--soft2);

    color:var(--text);

    font-size:15px;

    font-weight:900;
}

.sly-news08__author-box-avatar--img{
    object-fit:cover;
}

.sly-news08__author-box span{

    display:block;

    margin-bottom:4px;

    color:var(--pink);

    font-size:9px;

    font-weight:900;

    letter-spacing:.1em;
}

.sly-news08__author-box h3{
    margin:0;
    font-size:15px;
}

.sly-news08__author-box p{

    margin:6px 0 0;

    color:var(--muted);

    font-family:Arial,Helvetica,sans-serif;

    font-size:11px;

    line-height:1.5;

    max-width:520px;
}


/* POST NAV */

.sly-news08__post-nav{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

    margin-top:20px;

    padding:20px 0;

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

.sly-news08__post-nav a{

    display:block;

    padding:16px;

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

    border-radius:10px;

    color:var(--text);

    text-decoration:none;

    transition:border-color .2s ease;
}

.sly-news08__post-nav a:hover{
    border-color:var(--pink);
}

.sly-news08__post-nav .next{
    text-align:right;
}

.sly-news08__post-nav small{

    display:block;

    margin-bottom:6px;

    color:var(--pink);

    font-size:9px;

    font-weight:900;

    letter-spacing:.08em;
}

.sly-news08__post-nav strong{

    display:block;

    font-size:13px;

    line-height:1.35;
}


/* COMMENTS */

.sly-news08__comments{
    margin-top:38px;
}

.sly-news08__comments-title{

    margin-bottom:14px;

    padding-bottom:11px;

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

.sly-news08__comments-title span{

    display:block;

    margin-bottom:5px;

    color:var(--pink);

    font-size:9px;

    font-weight:900;

    letter-spacing:.1em;
}

.sly-news08__comments-title h2{

    margin:0;

    font-family:"Space Grotesk",Arial,sans-serif;

    font-size:22px;

    letter-spacing:-.02em;
}

.sly-news08__no-comments{

    padding:20px 0;

    color:var(--muted);

    font-size:12px;
}

.sly-news08__comment{

    display:flex;

    gap:12px;

    padding:16px 0;

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

.sly-news08__comment-avatar{

    width:34px;
    height:34px;

    flex:0 0 34px;

    display:flex;

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

    border-radius:50%;

    background:var(--soft2);

    color:var(--text);

    font-size:12px;

    font-weight:900;
}

.sly-news08__comment-meta{

    display:flex;

    align-items:baseline;

    gap:8px;
}

.sly-news08__comment-meta strong{
    font-size:12px;
}

.sly-news08__comment-meta span{
    color:var(--light);
    font-size:10px;
}

.sly-news08__comment p{

    margin:7px 0 0;

    color:var(--muted);

    font-family:Arial,Helvetica,sans-serif;

    font-size:12.5px;

    line-height:1.5;
}


/* COMMENT FORM */

.sly-news08__comment-form{

    margin-top:28px;

    padding-top:22px;

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

.sly-news08__comment-form h3{
    margin:0;
    font-size:16px;
}

.sly-news08__comment-form > p{

    margin:6px 0 14px;

    color:var(--muted);

    font-size:11px;
}

.sly-news08__comment-form form{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.sly-news08__fields{

    display:grid;

    grid-template-columns:1fr;

    gap:10px;
}

.sly-news08__comment-form input,
.sly-news08__comment-form textarea{

    width:100%;

    padding:11px 13px;

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

    border-radius:8px;

    background:var(--soft);

    color:var(--text);

    font-family:inherit;

    font-size:12px;

    outline:none;
}

.sly-news08__comment-form textarea{

    min-height:110px;

    resize:vertical;
}

.sly-news08__comment-form input:focus,
.sly-news08__comment-form textarea:focus{
    border-color:var(--pink);
}

.sly-news08__comment-form button{

    width:max-content;

    padding:11px 18px;

    border:0;

    border-radius:999px;

    background:linear-gradient(135deg,var(--pink),#8f3cff);

    color:#fff;

    font-family:inherit;

    font-size:10px;

    font-weight:900;

    letter-spacing:.04em;

    cursor:pointer;
}

.sly-news08__comment-form button:disabled{
    opacity:.6;
    cursor:default;
}


/* SIDEBAR */

.sly-news08__sidebar{

    display:flex;

    flex-direction:column;

    gap:26px;

    padding-top:2px;
}

.sly-news08__widget{

    padding-bottom:18px;

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

.sly-news08__widget-heading{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:12px;
}

.sly-news08__widget-heading span{

    color:var(--text);

    font-size:9px;

    font-weight:900;

    letter-spacing:.1em;
}

.sly-news08__widget-heading i{

    flex:1;

    height:1px;

    background:var(--line);
}


/* CATEGORIES */

.sly-news08__categories a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:9px 0;

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

    color:var(--muted);

    text-decoration:none;

    font-size:11px;
}

.sly-news08__categories a:last-child{
    border-bottom:0;
}

.sly-news08__categories a:hover{
    color:#fff;
}

.sly-news08__categories b{

    color:var(--light);

    font-size:9px;

    font-weight:700;
}


/* RECENT */

.sly-news08__recent{

    display:grid;

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

    gap:10px;

    padding:10px 0;

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

.sly-news08__recent:last-child{
    border-bottom:0;
}

.sly-news08__recent > a{

    width:60px;
    height:52px;

    display:block;

    overflow:hidden;

    border-radius:6px;
}

.sly-news08__recent img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.sly-news08__recent span{

    display:block;

    margin-bottom:4px;

    color:var(--pink);

    font-size:8px;

    font-weight:900;

    letter-spacing:.08em;
}

.sly-news08__recent h4{
    margin:0;
    font-size:11px;
    line-height:1.3;
    font-weight:700;
}

.sly-news08__recent h4 a{
    color:var(--text);
    text-decoration:none;
}

.sly-news08__recent h4 a:hover{
    color:var(--pink);
}

.sly-news08__recent small{

    display:block;

    margin-top:5px;

    color:var(--light);

    font-size:9px;
}


/* RADIO WIDGET */

.sly-news08__radio{

    padding:16px;

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

    border-radius:14px;

    background:var(--soft);

    color:#fff;
}

.sly-news08__radio-heading{

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.sly-news08__radio-heading span{

    color:var(--light);

    font-size:9px;

    font-weight:900;

    letter-spacing:.1em;
}

.sly-news08__radio-heading i{

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--pink);
}

.sly-news08__radio > strong{

    display:block;

    margin:8px 0 12px;

    font-size:13px;
}

.sly-news08__radio-song{

    display:flex;

    align-items:center;

    gap:10px;
}

.sly-news08__radio-song img{

    width:42px;
    height:42px;

    border-radius:6px;

    object-fit:cover;
}

.sly-news08__radio-song b{
    display:block;
    font-size:11px;
}

.sly-news08__radio-song span{

    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:9px;
}

.sly-news08__radio > a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:14px;

    padding-top:12px;

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

    color:#fff;

    text-decoration:none;

    font-size:10px;

    font-weight:900;
}

.sly-news08__radio > a b{
    color:var(--pink);
}


/* PROMO */

.sly-news08__promo{

    position:relative;

    display:block;

    height:200px;

    overflow:hidden;

    border-radius:14px;

    color:#fff;

    text-decoration:none;
}

.sly-news08__promo img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    filter:grayscale(25%) brightness(.62);
}

.sly-news08__promo::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,rgba(0,0,0,.85),transparent 68%);
}

.sly-news08__promo > div{

    position:absolute;

    left:16px;
    bottom:16px;

    z-index:2;
}

.sly-news08__promo span{

    display:block;

    margin-bottom:5px;

    color:var(--pink);

    font-size:9px;

    font-weight:900;

    letter-spacing:.1em;
}

.sly-news08__promo strong{

    display:block;

    font-size:15px;

    line-height:1.2;

    letter-spacing:-.02em;
}


/* TOAST */

.sly-news08__toast{

    position:fixed;

    left:50%;
    bottom:90px;

    z-index:200;

    padding:10px 16px;

    border-radius:999px;

    background:#111214;

    color:#fff;

    font-size:10px;

    font-weight:900;

    letter-spacing:.06em;

    opacity:0;

    transform:translate(-50%,8px);

    pointer-events:none;

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

.sly-news08__toast.is-visible{

    opacity:1;

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


/* RESPONSIVE */

@media(max-width:900px){

    .sly-news08__layout{
        grid-template-columns:1fr;
    }

}

@media(max-width:560px){

    .sly-news08__article h1{
        font-size:clamp(26px,8vw,36px);
    }

    .sly-news08__post-nav{
        grid-template-columns:1fr;
    }

    .sly-news08__share{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

}


/* =========================================================
   PAGE · DÉTAIL PODCAST (immersif)
   ========================================================= */

.pcd{

    --pcd-bg:#0a040e;
    --pcd-soft:#140a1a;
    --pcd-soft2:#1c0f24;
    --pcd-text:#ffffff;
    --pcd-muted:#9993a0;
    --pcd-light:#6d6875;
    --pcd-line:rgba(255,255,255,.09);
    --pcd-pink:#ff2d8d;
    --pcd-violet:#8f3cff;
    --pcd-cyan:#00d9ed;

    display:block;

    background:var(--pcd-bg);

    color:var(--pcd-text);

    font-family:Arial,Helvetica,sans-serif;
}

.pcd *,
.pcd *::before,
.pcd *::after{
    box-sizing:border-box;
}


/* NOT FOUND */

.pcd-notfound{

    width:min(600px,calc(100% - 40px));
    margin:0 auto;

    padding:90px 0;

    text-align:center;
}

.pcd-notfound h1{
    margin:14px 0 8px;
    font-size:28px;
}

.pcd-notfound p{
    color:var(--pcd-muted);
    font-size:12px;
    margin-bottom:18px;
}

.pcd-notfound a{
    color:var(--pcd-pink);
    text-decoration:none;
    font-weight:800;
    font-size:11px;
}


/* HERO IMMERSIF */

.pcd-hero{

    position:relative;

    overflow:hidden;

    padding:80px 0 60px;
}

.pcd-hero-bg{

    position:absolute;
    inset:-40px;

    background-image:var(--pcd-cover);
    background-size:cover;
    background-position:center;

    filter:blur(50px) saturate(1.4) brightness(.55);

    transform:scale(1.15);
}

.pcd-hero-overlay{

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(10,4,14,.55),
            rgba(10,4,14,.94) 70%,
            var(--pcd-bg) 100%
        );
}

.pcd-hero-inner{

    position:relative;
    z-index:2;

    width:min(1000px,calc(100% - 40px));
    margin:0 auto;

    display:flex;

    align-items:center;

    gap:38px;
}

.pcd-hero-cover{

    position:relative;

    flex-shrink:0;

    width:220px;
    height:220px;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 40px 90px rgba(0,0,0,.6);
}

.pcd-hero-cover img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.pcd-hero-play{

    position:absolute;
    inset:0;

    display:flex;

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

    border:0;

    background:rgba(10,4,14,.35);

    cursor:pointer;

    transition:background .2s ease;
}

.pcd-hero-play:hover{
    background:rgba(10,4,14,.55);
}

.pcd-hero-play-icon{

    width:64px;
    height:64px;

    display:flex;

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

    border-radius:50%;

    background:linear-gradient(135deg,var(--pcd-pink),var(--pcd-violet));

    color:#fff;

    font-size:22px;

    box-shadow:0 15px 40px rgba(255,45,141,.4);

    transition:transform .2s ease;
}

.pcd-hero-play:hover .pcd-hero-play-icon{
    transform:scale(1.08);
}

.pcd-hero-text{
    min-width:0;
}

.pcd-category{

    display:inline-block;

    padding:5px 10px;

    margin-bottom:14px;

    background:var(--pcd-pink);

    border-radius:999px;

    color:#fff;

    font-size:9px;

    font-weight:900;

    letter-spacing:.1em;
}

.pcd-hero-text h1{

    margin:0 0 14px;

    font-family:"Space Grotesk",Arial,sans-serif;

    font-size:clamp(26px,3.6vw,42px);

    line-height:1.08;

    letter-spacing:-.02em;

    font-weight:800;
}

.pcd-meta{

    margin-bottom:16px;

    color:var(--pcd-muted);

    font-size:11px;

    font-weight:700;

    letter-spacing:.03em;
}

.pcd-meta-dot,
.pod22-meta-dot{
    opacity:.5;
}

.pcd-author-line{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

    font-size:12px;

    font-weight:800;
}

.pcd-author-avatar{

    width:32px;
    height:32px;

    border-radius:50%;

    object-fit:cover;
}

.pcd-author-avatar--letter{

    display:flex;

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

    background:var(--pcd-soft2);

    color:#fff;

    font-size:12px;
}

.pcd-stats{

    display:flex;

    align-items:center;

    gap:12px;

    margin-left:auto;

    color:var(--pcd-light);

    font-size:10px;

    font-weight:700;
}

.pcd-stats i{
    margin-right:4px;
    color:var(--pcd-cyan);
}


/* PLAYER BAR */

.pcd-player{

    position:sticky;
    top:0;

    z-index:30;

    display:flex;

    align-items:center;

    gap:16px;

    width:min(1000px,calc(100% - 40px));
    margin:0 auto 40px;

    padding:14px 18px;

    border-radius:16px;

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

    background:
        linear-gradient(
            160deg,
            rgba(24,12,32,.96),
            rgba(12,6,16,.96)
        );

    backdrop-filter:blur(16px);

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

.pcd-player-toggle{

    flex-shrink:0;

    width:38px;
    height:38px;

    display:flex;

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

    border:0;
    border-radius:50%;

    background:linear-gradient(135deg,var(--pcd-pink),var(--pcd-violet));

    color:#fff;

    font-size:12px;

    cursor:pointer;
}

.pcd-progress{

    flex:1;

    height:5px;

    border-radius:999px;

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

    cursor:pointer;
    overflow:hidden;
}

.pcd-progress-bar{

    height:100%;

    width:0%;

    border-radius:999px;

    background:linear-gradient(90deg,var(--pcd-pink),var(--pcd-cyan));

    transition:width .15s linear;
}

.pcd-times{

    flex-shrink:0;

    display:flex;

    gap:4px;

    color:var(--pcd-muted);

    font-size:10px;

    font-variant-numeric:tabular-nums;
}

.pcd-download{

    flex-shrink:0;

    width:34px;
    height:34px;

    display:flex;

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

    border-radius:50%;

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

    color:var(--pcd-muted);

    text-decoration:none;

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

.pcd-download:hover{
    color:#fff;
    border-color:var(--pcd-pink);
}


/* LAYOUT */

.pcd-layout{

    width:min(1000px,calc(100% - 40px));
    margin:0 auto;

    display:grid;

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

    gap:38px;

    padding-bottom:70px;
}

.pcd-excerpt{

    color:var(--pcd-text);

    font-size:15px;

    line-height:1.6;

    font-weight:600;

    margin:0 0 20px;
}

.pcd-body{

    color:#d7d2dc;

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

    font-size:14.5px;

    line-height:1.8;
}

.pcd-body p{
    margin:0 0 16px;
}

.pcd-body h2,
.pcd-body h3{

    margin:28px 0 12px;

    color:#fff;

    font-family:"Space Grotesk",Arial,sans-serif;
}


/* SHARE */

.pcd-share{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:16px 0;

    margin-top:20px;

    border-top:1px solid var(--pcd-line);
    border-bottom:1px solid var(--pcd-line);

    font-size:11px;
}

.pcd-share > span{
    color:var(--pcd-muted);
}

.pcd-share > div{
    display:flex;
    gap:8px;
}

.pcd-share a,
.pcd-share button{

    padding:7px 12px;

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

    border-radius:999px;

    background:none;

    color:var(--pcd-muted);

    text-decoration:none;

    font-family:inherit;

    font-size:9px;

    font-weight:700;

    cursor:pointer;
}

.pcd-share a:hover,
.pcd-share button:hover{
    color:#fff;
    border-color:var(--pcd-pink);
}


/* POST NAV */

.pcd-post-nav{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

    margin-top:20px;
}

.pcd-post-nav a{

    display:block;

    padding:16px;

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

    border-radius:10px;

    color:#fff;

    text-decoration:none;
}

.pcd-post-nav a:hover{
    border-color:var(--pcd-pink);
}

.pcd-post-nav .next{
    text-align:right;
}

.pcd-post-nav small{

    display:block;

    margin-bottom:6px;

    color:var(--pcd-pink);

    font-size:9px;

    font-weight:900;

    letter-spacing:.08em;
}

.pcd-post-nav strong{
    display:block;
    font-size:13px;
}


/* SIDEBAR (partagé avec la structure sly-news08) */

.pcd-sidebar{

    display:flex;

    flex-direction:column;

    gap:26px;
}

.pcd-widget{

    padding-bottom:18px;

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

.pcd-widget-heading{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:12px;
}

.pcd-widget-heading span{

    color:#fff;

    font-size:9px;

    font-weight:900;

    letter-spacing:.1em;
}

.pcd-widget-heading i{

    flex:1;

    height:1px;

    background:var(--pcd-line);
}

.pcd-radio{

    padding:16px;

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

    border-radius:14px;

    background:var(--pcd-soft);
}

.pcd-radio-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.pcd-radio-heading span{
    color:var(--pcd-light);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.pcd-radio-heading i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--pcd-pink);
}

.pcd-radio > strong{
    display:block;
    margin:8px 0 12px;
    font-size:13px;
}

.pcd-radio-song{
    display:flex;
    align-items:center;
    gap:10px;
}

.pcd-radio-song img{
    width:42px;
    height:42px;
    border-radius:6px;
    object-fit:cover;
}

.pcd-radio-song b{
    display:block;
    font-size:11px;
}

.pcd-radio-song span{
    display:block;
    margin-top:3px;
    color:var(--pcd-muted);
    font-size:9px;
}

.pcd-radio > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--pcd-line);
    color:#fff;
    text-decoration:none;
    font-size:10px;
    font-weight:900;
}

.pcd-radio > a b{
    color:var(--pcd-pink);
}

.pcd-recent{

    display:grid;

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

    gap:10px;

    padding:10px 0;

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

.pcd-recent:last-child{
    border-bottom:0;
}

.pcd-recent > a{
    width:60px;
    height:52px;
    display:block;
    overflow:hidden;
    border-radius:6px;
}

.pcd-recent img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.pcd-recent span{
    display:block;
    margin-bottom:4px;
    color:var(--pcd-pink);
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}

.pcd-recent h4{
    margin:0;
    font-size:11px;
    line-height:1.3;
}

.pcd-recent h4 a{
    color:#fff;
    text-decoration:none;
}

.pcd-recent h4 a:hover{
    color:var(--pcd-pink);
}

.pcd-recent small{
    display:block;
    margin-top:5px;
    color:var(--pcd-light);
    font-size:9px;
}

.pcd-promo{

    position:relative;

    display:block;

    height:180px;

    overflow:hidden;

    border-radius:14px;

    color:#fff;

    text-decoration:none;
}

.pcd-promo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    filter:grayscale(25%) brightness(.6);
}

.pcd-promo::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.85),transparent 68%);
}

.pcd-promo > div{
    position:absolute;
    left:16px;
    bottom:16px;
}

.pcd-promo span{
    display:block;
    margin-bottom:4px;
    color:var(--pcd-pink);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.pcd-promo strong{
    display:block;
    font-size:14px;
    line-height:1.2;
}


/* TOAST */

.pcd-toast{

    position:fixed;

    left:50%;
    bottom:90px;

    z-index:200;

    padding:10px 16px;

    border-radius:999px;

    background:#111214;

    color:#fff;

    font-size:10px;

    font-weight:900;

    letter-spacing:.06em;

    opacity:0;

    transform:translate(-50%,8px);

    pointer-events:none;

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

.pcd-toast.is-visible{
    opacity:1;
    transform:translate(-50%,0);
}


@media(max-width:900px){

    .pcd-hero-inner{
        flex-direction:column;
        text-align:center;
    }

    .pcd-stats{
        margin-left:0;
        justify-content:center;
    }

    .pcd-layout{
        grid-template-columns:1fr;
    }

}

@media(max-width:560px){

    .pcd-hero-cover{
        width:170px;
        height:170px;
    }

    .pcd-player{
        flex-wrap:wrap;
    }

    .pcd-post-nav{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   PAGE HISTORIQUE COMPLET (historique.php)
========================================================= */

.hist{

    --pink:#ff2d8d;
    --cyan:#00dff5;

    --text:#ffffff;
    --muted:#8fa3b8;

    --line:rgba(255,255,255,.10);

    min-height:70vh;

    background:
        radial-gradient(circle at 8% 10%, rgba(0,223,245,.10), transparent 28%),
        radial-gradient(circle at 92% 60%, rgba(255,45,141,.08), transparent 30%),
        linear-gradient(180deg, #0a1c32 0%, #071426 55%, #040b16 100%);

    color:var(--text);

    font-family:Arial,Helvetica,sans-serif;
}

.hist-inner{

    width:min(920px,calc(100% - 40px));

    margin:0 auto;

    padding:64px 0 80px;
}

.hist-head{
    margin-bottom:38px;
}

.hist-kicker{

    display:block;

    margin-bottom:12px;

    color:var(--pink);

    font-size:10px;

    font-weight:900;

    letter-spacing:.2em;
}

.hist-tabs{
    display:flex;
    gap:6px;
    margin:0 0 22px;
    overflow-x:auto;
    scrollbar-width:none;
}

.hist-tabs::-webkit-scrollbar{ display:none; }

.hist-tab{
    flex:0 0 auto;
    padding:9px 18px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:99px;
    color:#8fa3b8;
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
    text-decoration:none;
    transition:color .2s,border-color .2s,background .2s;
}

.hist-tab:hover{ color:#fff; border-color:rgba(255,255,255,.35); }

.hist-tab.is-active{
    color:#0b0c1d;
    border-color:var(--h-c);
    background:var(--h-c);
}

.hist-head h1{

    margin:0;

    font-family:"Space Grotesk",Arial,sans-serif;

    font-size:clamp(30px,4vw,46px);

    line-height:1.05;

    letter-spacing:-.03em;
}

.hist-head p{

    max-width:560px;

    margin:14px 0 0;

    color:var(--muted);

    font-size:14px;

    line-height:1.6;
}

.hist-empty{

    padding:60px 0;

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

    font-size:13px;

    text-align:center;
}


/* JOURS */

.hist-day{

    display:flex;

    align-items:center;

    gap:14px;

    margin:34px 0 12px;

    color:var(--cyan);

    font-size:10px;

    font-weight:900;

    letter-spacing:.18em;

    text-transform:uppercase;
}

.hist-day::after{

    content:"";

    flex:1;

    height:1px;

    background:var(--line);
}

.hist-day:first-child{
    margin-top:0;
}


/* LIGNE */

.hist-row{

    display:grid;

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

    align-items:center;

    gap:16px;

    padding:10px 14px 10px 6px;

    border-radius:12px;

    transition:background .25s ease;
}

.hist-row:hover,
.hist-row.is-playing{
    background:rgba(255,255,255,.045);
}

.hist-time{

    color:#70859d;

    font-size:12px;

    font-weight:700;

    font-variant-numeric:tabular-nums;

    text-align:right;
}

.hist-cover{

    width:56px;
    height:56px;

    overflow:hidden;

    border-radius:8px;

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

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

.hist-cover img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.hist-info{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:4px;
}

.hist-info strong{

    overflow:hidden;

    font-size:14px;

    font-weight:800;

    white-space:nowrap;

    text-overflow:ellipsis;
}

.hist-info small{

    overflow:hidden;

    color:var(--muted);

    font-size:12px;

    white-space:nowrap;

    text-overflow:ellipsis;
}

.hist-row.is-playing .hist-info strong{
    color:var(--pink);
}


/* ACTIONS */

.hist-actions{

    display:flex;

    align-items:center;

    gap:10px;
}

.hist-play,
.hist-like{

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

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

    color:#fff;

    cursor:pointer;

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

.hist-play{

    width:38px;
    height:38px;

    border-radius:50%;

    font-size:12px;
}

.hist-play:hover,
.hist-row.is-playing .hist-play{

    background:var(--pink);

    border-color:var(--pink);

    transform:scale(1.07);
}

.hist-play i.fa-play{
    margin-left:2px;
}

.hist-like{

    min-width:64px;

    height:38px;

    gap:7px;

    padding:0 13px;

    border-radius:999px;

    font-size:12px;

    font-weight:800;
}

.hist-like:hover{

    border-color:var(--pink);

    color:var(--pink);
}

.hist-like.is-liked{

    border-color:rgba(255,45,141,.5);

    background:rgba(255,45,141,.14);

    color:var(--pink);

    cursor:default;
}

.hist-like .hist-like-count{
    font-variant-numeric:tabular-nums;
}

.hist-like.is-pop i{
    animation:histPop .6s cubic-bezier(.2,1.6,.4,1);
}

@keyframes histPop{

    0%{ transform:scale(1); }

    40%{ transform:scale(1.55); }

    100%{ transform:scale(1); }
}


/* PAGINATION */

.hist-pager{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-top:46px;

    padding-top:24px;

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

.hist-pager-btn{

    padding:11px 18px;

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

    border-radius:999px;

    color:#fff;

    font-size:11px;

    font-weight:800;

    letter-spacing:.06em;

    text-decoration:none;

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

a.hist-pager-btn:hover{

    background:var(--pink);

    border-color:var(--pink);
}

.hist-pager-btn.is-disabled{

    opacity:.3;
}

.hist-pager-info{

    color:var(--muted);

    font-size:11px;
}


/* TOAST */

.hist-toast{

    position:fixed;

    left:50%;
    bottom:100px;

    padding:11px 18px;

    border-radius:999px;

    background:#fff;

    color:#071426;

    font-size:12px;

    font-weight:800;

    opacity:0;

    pointer-events:none;

    transform:translate(-50%,12px);

    transition:opacity .3s ease, transform .3s ease;

    z-index:9999;
}

.hist-toast.is-visible{

    opacity:1;

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


@media(max-width:640px){

    .hist-inner{

        width:calc(100% - 28px);

        padding:40px 0 60px;
    }

    .hist-row{

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

        gap:10px;

        padding-right:4px;
    }

    .hist-time{
        font-size:11px;
    }

    .hist-cover{

        width:48px;
        height:48px;
    }

    .hist-actions{
        gap:6px;
    }

    .hist-play{

        width:34px;
        height:34px;
    }

    .hist-like{

        min-width:0;

        height:34px;

        padding:0 10px;
    }
}


/* =========================================================
   RÉACTIONS (smileys) — actualités & podcasts
========================================================= */

.sly-react{
    margin:34px 0;
    padding:22px 20px;
    text-align:center;
    background:var(--n22-surface,#281333);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:var(--n22-radius,8px);
}

.sly-react__title{
    margin:0 0 16px;
    font-weight:600;
    color:var(--n22-soft,#d3c8d8);
}

.sly-react__list{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.sly-react__btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    min-width:84px;
    padding:12px 10px 10px;
    font:inherit;
    color:var(--n22-soft,#d3c8d8);
    background:var(--n22-surface-2,#32183e);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:12px;
    cursor:pointer;
    transition:transform .18s ease,background .18s ease,border-color .18s ease;
}

.sly-react__btn:hover{
    transform:translateY(-3px);
    background:var(--n22-surface-hover,#3b1c49);
}

.sly-react__btn.is-active{
    border-color:var(--n22-pink,#ff2d8d);
    background:rgba(255,45,141,.16);
    color:#fff;
}

.sly-react__emoji{
    font-size:34px;
    line-height:1;
    transition:transform .18s ease;
}

.sly-react__btn:hover .sly-react__emoji{
    transform:scale(1.18);
}

.sly-react__btn.is-pop .sly-react__emoji{
    animation:slyReactPop .45s ease;
}

@keyframes slyReactPop{
    0%{transform:scale(1);}
    40%{transform:scale(1.5) rotate(-8deg);}
    100%{transform:scale(1);}
}

.sly-react__count{
    font-weight:700;
    font-size:16px;
    color:#fff;
}

.sly-react__label{
    font-size:12px;
    color:var(--n22-muted,#a895ad);
}

@media(max-width:560px){
    .sly-react__list{gap:8px;}
    .sly-react__btn{min-width:calc(33.333% - 8px);}
    .sly-react__emoji{font-size:28px;}
}

@media(prefers-reduced-motion:reduce){
    .sly-react__btn,
    .sly-react__emoji{transition:none;}
    .sly-react__btn.is-pop .sly-react__emoji{animation:none;}
}


/* =========================================================
   RECHERCHE & FICHES : paroles / artistes
========================================================= */

.sly-search,
.sly-detail{
    width:min(1180px,calc(100% - 40px));
    margin:0 auto;
    padding:40px 0 90px;
    color:var(--n22-text,#fff);
}

.sly-search__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.16em;
    color:var(--n22-cyan,#00d9ed);
}

.sly-search__hero{
    padding:30px 0 34px;
    text-align:center;
}

.sly-search__hero h1{
    margin:10px 0 26px;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(32px,5vw,52px);
}

.sly-search__form{
    max-width:720px;
    margin:0 auto;
}

.sly-search__field{
    display:flex;
    align-items:center;
    gap:12px;
    padding:6px 6px 6px 20px;
    background:var(--n22-surface,#281333);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:999px;
}

.sly-search__field:focus-within{
    border-color:var(--n22-pink,#ff2d8d);
}

.sly-search__field > i{ color:var(--n22-muted,#a895ad); }

.sly-search__field input{
    flex:1;
    min-width:0;
    padding:12px 0;
    font:inherit;
    font-size:16px;
    color:#fff;
    background:none;
    border:0;
    outline:0;
}

.sly-search__field button{
    padding:12px 26px;
    font:inherit;
    font-weight:700;
    color:#fff;
    background:var(--n22-pink,#ff2d8d);
    border:0;
    border-radius:999px;
    cursor:pointer;
}

.sly-search__scope{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:16px;
}

.sly-search__scope label{ position:relative; }

.sly-search__scope label span,
.sly-search__scope select{
    display:inline-block;
    padding:8px 18px;
    font:inherit;
    font-size:14px;
    color:var(--n22-soft,#d3c8d8);
    background:var(--n22-surface,#281333);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:999px;
    cursor:pointer;
}

.sly-search__scope input{ position:absolute; opacity:0; pointer-events:none; }

.sly-search__scope input:checked + span{
    color:#fff;
    background:rgba(255,45,141,.18);
    border-color:var(--n22-pink,#ff2d8d);
}

.sly-search__count{
    margin:0 0 18px;
    color:var(--n22-muted,#a895ad);
}

.sly-search__count strong{ color:#fff; }

.sly-search__empty{
    padding:40px 0;
    text-align:center;
    color:var(--n22-muted,#a895ad);
}

.sly-search__list{
    display:grid;
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}

.sly-result{
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 16px;
    color:inherit;
    text-decoration:none;
    background:var(--n22-surface,#281333);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:var(--n22-radius,8px);
    transition:background .18s,transform .18s;
}

.sly-result:hover{
    background:var(--n22-surface-hover,#3b1c49);
    transform:translateX(4px);
}

.sly-result__cover{
    flex:none;
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    overflow:hidden;
    color:var(--n22-muted,#a895ad);
    background:var(--n22-surface-2,#32183e);
    border-radius:6px;
}

.sly-result__cover img{ width:100%; height:100%; object-fit:cover; }

.sly-result__text{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.sly-result__text strong{ font-size:17px; }

.sly-result__text em{
    font-style:normal;
    color:var(--n22-cyan,#00d9ed);
    font-size:14px;
}

.sly-result__text small{
    margin-top:4px;
    color:var(--n22-muted,#a895ad);
    font-size:13px;
    line-height:1.4;
}

.sly-result__badge{
    padding:3px 10px;
    font-size:11px;
    font-weight:700;
    color:var(--n22-soft,#d3c8d8);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:999px;
}

.sly-result__go{ color:var(--n22-light,#765f7d); }

/* Grille d artistes */

.sly-artist-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    gap:20px;
    margin:0;
    padding:0;
    list-style:none;
}

.sly-artist-grid--small{
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:14px;
}

.sly-artist-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:16px 12px;
    text-align:center;
    color:inherit;
    text-decoration:none;
    background:var(--n22-surface,#281333);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:var(--n22-radius,8px);
    transition:background .18s,transform .18s;
}

.sly-artist-card:hover{
    background:var(--n22-surface-hover,#3b1c49);
    transform:translateY(-4px);
}

.sly-artist-card__photo{
    display:grid;
    place-items:center;
    width:100%;
    aspect-ratio:1;
    max-width:140px;
    overflow:hidden;
    font-size:34px;
    color:var(--n22-muted,#a895ad);
    background:var(--n22-surface-2,#32183e);
    border-radius:50%;
}

.sly-artist-card__photo img{ width:100%; height:100%; object-fit:cover; }

.sly-artist-card small{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--n22-muted,#a895ad);
}

.sly-flag{
    display:inline-block;
    width:20px;
    height:auto;
    border-radius:2px;
    vertical-align:middle;
}

/* Pagination */

.sly-pager{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    margin-top:34px;
}

.sly-pager__item,
.sly-pager__gap{
    min-width:40px;
    padding:9px 12px;
    text-align:center;
    color:var(--n22-soft,#d3c8d8);
    text-decoration:none;
    background:var(--n22-surface,#281333);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:8px;
}

.sly-pager__gap{ background:none; border:0; }

.sly-pager__item.is-current{
    color:#fff;
    background:var(--n22-pink,#ff2d8d);
    border-color:var(--n22-pink,#ff2d8d);
}

/* Fiches detail */

.sly-detail__crumbs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
    font-size:13px;
    color:var(--n22-muted,#a895ad);
}

.sly-detail__crumbs a{ color:var(--n22-soft,#d3c8d8); text-decoration:none; }
.sly-detail__crumbs strong{ color:#fff; font-weight:500; }

.sly-detail__hero{
    position:relative;
    overflow:hidden;
    padding:40px;
    background:var(--n22-surface,#281333);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:16px;
}

.sly-detail__hero-bg{
    position:absolute;
    inset:-30px;
    background:var(--sly-cover,none) center/cover no-repeat;
    filter:blur(40px) saturate(1.3);
    opacity:.35;
}

.sly-detail__hero-inner{
    position:relative;
    display:flex;
    align-items:center;
    gap:34px;
}

.sly-detail__cover{
    flex:none;
    display:grid;
    place-items:center;
    width:clamp(130px,22vw,230px);
    aspect-ratio:1;
    overflow:hidden;
    font-size:56px;
    color:var(--n22-muted,#a895ad);
    background:var(--n22-surface-2,#32183e);
    border-radius:12px;
    box-shadow:var(--n22-shadow,0 20px 55px rgba(0,0,0,.28));
}

.sly-detail__cover--round{ border-radius:50%; }

.sly-detail__cover img{ width:100%; height:100%; object-fit:cover; }

.sly-detail__heading{ min-width:0; }

.sly-detail__heading h1{
    margin:8px 0 6px;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(28px,4.4vw,50px);
    line-height:1.1;
    overflow-wrap:anywhere;
}

.sly-detail__artist{
    margin:0 0 16px;
    font-size:20px;
    color:var(--n22-cyan,#00d9ed);
}

.sly-detail__artist a{ color:inherit; text-decoration:none; }
.sly-detail__artist a:hover{ text-decoration:underline; }

.sly-detail__chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.sly-detail__chips span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 14px;
    font-size:13px;
    background:rgba(0,0,0,.28);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:999px;
}

.sly-stats{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:22px;
}

.sly-stats div{
    min-width:92px;
    padding:10px 16px;
    text-align:center;
    background:rgba(0,0,0,.28);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:10px;
}

.sly-stats strong{
    display:block;
    font-family:"Space Grotesk",sans-serif;
    font-size:22px;
}

.sly-stats span{
    font-size:12px;
    color:var(--n22-muted,#a895ad);
}

.sly-detail__layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:34px;
    margin-top:34px;
    align-items:start;
}

.sly-detail__h2{
    margin:34px 0 16px;
    font-family:"Space Grotesk",sans-serif;
    font-size:24px;
}

.sly-detail__h2:first-child{ margin-top:0; }

.sly-lyrics p{
    margin:0 0 26px;
    font-size:18px;
    line-height:1.75;
    color:var(--n22-soft,#d3c8d8);
}

.sly-bio p{
    margin:0 0 18px;
    font-size:17px;
    line-height:1.8;
    color:var(--n22-soft,#d3c8d8);
}

.sly-bio--lead p{
    font-size:20px;
    line-height:1.6;
    color:#fff;
}

.sly-audio{ width:100%; }

.sly-detail__side{
    position:sticky;
    top:104px;
    display:grid;
    gap:16px;
}

.sly-card{
    padding:20px;
    background:var(--n22-surface,#281333);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:var(--n22-radius,8px);
}

.sly-card h3{
    margin:0 0 14px;
    font-family:"Space Grotesk",sans-serif;
    font-size:16px;
    letter-spacing:.04em;
}

.sly-card--link{
    display:flex;
    align-items:center;
    gap:14px;
    color:inherit;
    text-decoration:none;
}

.sly-card--link span{ flex:1; }
.sly-card--link:hover{ background:var(--n22-surface-hover,#3b1c49); }

.sly-facts{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:10px 16px;
    margin:0;
}

.sly-facts dt{ color:var(--n22-muted,#a895ad); font-size:14px; }

.sly-facts dd{
    margin:0;
    text-align:right;
    overflow-wrap:anywhere;
}

.sly-facts a{ color:var(--n22-cyan,#00d9ed); text-decoration:none; }

.sly-mini-list{
    display:grid;
    gap:4px;
    margin:0;
    padding:0;
    list-style:none;
}

.sly-mini-list a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 0;
    color:var(--n22-soft,#d3c8d8);
    text-decoration:none;
    border-bottom:1px solid var(--n22-line,rgba(255,255,255,.11));
}

.sly-mini-list a:hover{ color:#fff; }
.sly-mini-list i{ color:var(--n22-pink,#ff2d8d); font-size:12px; }

.sly-detail__back{
    color:var(--n22-muted,#a895ad);
    text-decoration:none;
}

.sly-detail__notfound{
    max-width:600px;
    margin:0 auto;
    padding:90px 0;
    text-align:center;
}

.sly-detail__notfound a{ color:var(--n22-cyan,#00d9ed); }

@media(max-width:900px){
    .sly-detail__layout{ grid-template-columns:1fr; }
    .sly-detail__side{ position:static; }
}

@media(max-width:640px){
    .sly-detail__hero{ padding:24px 18px; }
    .sly-detail__hero-inner{ flex-direction:column; text-align:center; gap:20px; }
    .sly-detail__chips,
    .sly-stats{ justify-content:center; }
    .sly-search__field button{ padding:12px 18px; }
    .sly-result__badge{ display:none; }
}


/* =========================================================
   PAGE CONTACT
========================================================= */

.sly-contact{
    width:min(980px,calc(100% - 40px));
    margin:0 auto;
    padding:40px 0 100px;
    color:var(--n22-text,#fff);
}

.sly-contact__hero{
    text-align:center;
    padding:30px 0 36px;
}

.sly-contact__hero h1{
    margin:10px 0 14px;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(36px,6vw,64px);
    line-height:1.05;
}

.sly-contact__hero h1 span{
    background:linear-gradient(90deg,var(--n22-pink,#ff2d8d),var(--n22-violet,#9c4dff),var(--n22-cyan,#00d9ed));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.sly-contact__hero p{
    margin:0;
    font-size:18px;
    line-height:1.6;
    color:var(--n22-soft,#d3c8d8);
}

.sly-contact__card{
    position:relative;
    padding:clamp(22px,4vw,44px);
    background:var(--n22-surface,#281333);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:20px;
    box-shadow:var(--n22-shadow,0 20px 55px rgba(0,0,0,.28));
    overflow:hidden;
}

.sly-contact__card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:3px;
    background:linear-gradient(90deg,var(--n22-pink,#ff2d8d),var(--n22-violet,#9c4dff),var(--n22-cyan,#00d9ed));
}

.sly-contact__step{
    margin:0 0 34px;
    padding:0;
    border:0;
    min-width:0;
}

.sly-contact__step legend{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    padding:0;
    font-family:"Space Grotesk",sans-serif;
    font-size:20px;
    font-weight:600;
}

.sly-contact__step legend span{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    font-size:14px;
    background:var(--n22-pink,#ff2d8d);
    border-radius:50%;
}

/* Choix du motif */

.sly-reasons{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:12px;
}

.sly-reason{ position:relative; display:block; cursor:pointer; }

.sly-reason input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.sly-reason__box{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:4px;
    height:100%;
    padding:18px 16px 16px;
    background:var(--n22-surface-2,#32183e);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:14px;
    transition:transform .2s,background .2s,border-color .2s,box-shadow .2s;
}

.sly-reason__box > i{
    margin-bottom:8px;
    font-size:24px;
    color:var(--n22-cyan,#00d9ed);
    transition:color .2s,transform .2s;
}

.sly-reason__box strong{ font-size:16px; }

.sly-reason__box small{
    font-size:13px;
    line-height:1.4;
    color:var(--n22-muted,#a895ad);
}

.sly-reason:hover .sly-reason__box{
    transform:translateY(-3px);
    background:var(--n22-surface-hover,#3b1c49);
}

.sly-reason input:focus-visible + .sly-reason__box{
    outline:2px solid var(--n22-cyan,#00d9ed);
    outline-offset:2px;
}

.sly-reason input:checked + .sly-reason__box{
    background:linear-gradient(145deg,rgba(255,45,141,.2),rgba(156,77,255,.16));
    border-color:var(--n22-pink,#ff2d8d);
    box-shadow:0 10px 30px rgba(255,45,141,.18);
}

.sly-reason input:checked + .sly-reason__box > i{
    color:var(--n22-pink,#ff2d8d);
    transform:scale(1.12);
}

.sly-reason__check{
    position:absolute;
    top:12px;
    right:12px;
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    font-size:11px;
    background:var(--n22-pink,#ff2d8d);
    border-radius:50%;
    opacity:0;
    transform:scale(.4);
    transition:opacity .2s,transform .25s cubic-bezier(.2,1.6,.4,1);
}

.sly-reason input:checked + .sly-reason__box .sly-reason__check{
    opacity:1;
    transform:scale(1);
}

/* Champs */

.sly-contact__row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.sly-field{
    display:block;
    margin-bottom:16px;
}

.sly-field[hidden]{ display:none; }

.sly-field > span{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:var(--n22-soft,#d3c8d8);
}

.sly-field > span small{ font-weight:400; color:var(--n22-muted,#a895ad); }

.sly-field input,
.sly-field textarea{
    width:100%;
    box-sizing:border-box;
    padding:14px 16px;
    font:inherit;
    font-size:16px;
    color:#fff;
    background:var(--n22-bg-deep,#100615);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:12px;
    outline:0;
    transition:border-color .2s,box-shadow .2s;
}

.sly-field textarea{ resize:vertical; min-height:140px; }

.sly-field input::placeholder,
.sly-field textarea::placeholder{ color:var(--n22-light,#765f7d); }

.sly-field input:focus,
.sly-field textarea:focus{
    border-color:var(--n22-cyan,#00d9ed);
    box-shadow:0 0 0 3px rgba(0,217,237,.15);
}

.sly-field input.is-invalid,
.sly-field textarea.is-invalid{
    border-color:#ff5470;
    box-shadow:0 0 0 3px rgba(255,84,112,.15);
}

.sly-field__foot{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:6px;
}

.sly-field__foot small{ margin-left:auto; color:var(--n22-muted,#a895ad); }

.sly-field em,
.sly-contact__error{
    display:none;
    margin:6px 0 0;
    font-size:13px;
    font-style:normal;
    color:#ff7088;
}

.sly-field em.is-visible,
.sly-contact__error.is-visible{ display:block; }

.sly-contact__error--global{ display:block; text-align:center; }
.sly-contact__error--global:empty{ display:none; }

.sly-contact__trap{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* Envoi */

.sly-contact__actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:10px;
}

.sly-contact__actions p{
    margin:0;
    max-width:420px;
    font-size:13px;
    line-height:1.5;
    color:var(--n22-muted,#a895ad);
}

.sly-contact__submit{
    display:inline-flex;
    align-items:center;
    gap:12px;
    flex:none;
    padding:16px 30px;
    font:inherit;
    font-size:16px;
    font-weight:700;
    color:#fff;
    background:linear-gradient(90deg,var(--n22-pink,#ff2d8d),var(--n22-violet,#9c4dff));
    border:0;
    border-radius:999px;
    cursor:pointer;
    transition:transform .2s,box-shadow .2s,opacity .2s;
}

.sly-contact__submit:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(255,45,141,.35);
}

.sly-contact__submit:hover i{ transform:translateX(3px) rotate(-8deg); }
.sly-contact__submit i{ transition:transform .2s; }

.sly-contact__submit:disabled{ opacity:.7; cursor:progress; transform:none; }

.sly-contact__submit.is-loading i{
    animation:slyContactFly .8s ease-in-out infinite;
}

@keyframes slyContactFly{
    50%{ transform:translate(6px,-6px); }
}

/* Confirmation */

.sly-contact__done{
    padding:30px 10px 10px;
    text-align:center;
}

.sly-contact__done[hidden]{ display:none; }

.sly-contact__done-icon svg{
    width:96px;
    height:96px;
}

.sly-contact__done-icon circle{
    fill:rgba(0,217,237,.1);
    stroke:var(--n22-cyan,#00d9ed);
    stroke-width:2;
    stroke-dasharray:151;
    stroke-dashoffset:151;
}

.sly-contact__done-icon path{
    fill:none;
    stroke:var(--n22-cyan,#00d9ed);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:40;
    stroke-dashoffset:40;
}

.sly-contact__done.is-animated .sly-contact__done-icon circle{ animation:slyContactDraw .7s ease forwards; }
.sly-contact__done.is-animated .sly-contact__done-icon path{ animation:slyContactDraw .5s .55s ease forwards; }

@keyframes slyContactDraw{
    to{ stroke-dashoffset:0; }
}

.sly-contact__done h2{
    margin:18px 0 12px;
    font-family:"Space Grotesk",sans-serif;
    font-size:34px;
}

.sly-contact__done p{
    max-width:520px;
    margin:0 auto 14px;
    line-height:1.7;
    color:var(--n22-soft,#d3c8d8);
}

.sly-contact__done strong{ color:#fff; }

.sly-contact__ref{
    display:inline-block;
    padding:6px 16px;
    font-size:13px;
    color:var(--n22-muted,#a895ad) !important;
    border:1px dashed var(--n22-line,rgba(255,255,255,.2));
    border-radius:999px;
}

.sly-contact__done-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:22px;
}

.sly-contact__done-actions a,
.sly-contact__done-actions button{
    padding:12px 24px;
    font:inherit;
    font-weight:600;
    color:#fff;
    text-decoration:none;
    background:var(--n22-surface-2,#32183e);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:999px;
    cursor:pointer;
}

.sly-contact__done-actions a{
    background:var(--n22-pink,#ff2d8d);
    border-color:var(--n22-pink,#ff2d8d);
}

@media(max-width:700px){
    .sly-contact__row{ grid-template-columns:1fr; gap:0; }
    .sly-reasons{ grid-template-columns:1fr 1fr; gap:10px; }
    .sly-reason__box{ padding:14px 12px; }
    .sly-reason__box small{ display:none; }
    .sly-contact__actions{ flex-direction:column-reverse; align-items:stretch; text-align:center; }
    .sly-contact__actions p{ max-width:none; }
    .sly-contact__submit{ justify-content:center; }
}

@media(prefers-reduced-motion:reduce){
    .sly-reason__box,
    .sly-reason__check,
    .sly-contact__submit,
    .sly-contact__submit i{ transition:none; }
    .sly-contact__submit.is-loading i{ animation:none; }
    .sly-contact__done.is-animated .sly-contact__done-icon circle,
    .sly-contact__done.is-animated .sly-contact__done-icon path{ animation-duration:.01s; animation-delay:0s; }
}


/* =========================================================
   SUGGESTION / REQUEST : autocomplétion de titres
========================================================= */

.sly-songreq [hidden]{ display:none !important; }

.sly-ac{ position:relative; }

.sly-ac__box{
    display:flex;
    align-items:center;
    gap:12px;
    padding:4px 18px;
    background:var(--n22-bg-deep,#100615);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:14px;
    transition:border-color .2s,box-shadow .2s;
}

.sly-ac__box:focus-within{
    border-color:var(--n22-cyan,#00d9ed);
    box-shadow:0 0 0 3px rgba(0,217,237,.15);
}

.sly-ac__box > i{ color:var(--n22-muted,#a895ad); }

.sly-ac__box input{
    flex:1;
    min-width:0;
    padding:15px 0;
    font:inherit;
    font-size:17px;
    color:#fff;
    background:none;
    border:0;
    outline:0;
}

.sly-ac__list{
    position:absolute;
    z-index:20;
    left:0;
    right:0;
    max-height:360px;
    margin:8px 0 0;
    padding:6px;
    overflow-y:auto;
    list-style:none;
    background:var(--n22-surface-2,#32183e);
    border:1px solid var(--n22-line,rgba(255,255,255,.18));
    border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
}

.sly-ac__item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:8px 10px;
    border-radius:10px;
    cursor:pointer;
}

.sly-ac__item:hover,
.sly-ac__item.is-active{ background:var(--n22-surface-hover,#3b1c49); }

.sly-ac__empty{
    padding:16px;
    text-align:center;
    color:var(--n22-muted,#a895ad);
    font-size:14px;
}

.sly-ac__cover{
    flex:none;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    overflow:hidden;
    color:var(--n22-muted,#a895ad);
    background:var(--n22-surface,#281333);
    border-radius:8px;
}

.sly-ac__cover img{ width:100%; height:100%; object-fit:cover; }

.sly-ac__meta{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.sly-ac__meta strong,
.sly-ac__meta em{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.sly-ac__meta em{
    font-style:normal;
    font-size:13px;
    color:var(--n22-cyan,#00d9ed);
}

.sly-ac__picked{
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 16px;
    background:linear-gradient(145deg,rgba(255,45,141,.16),rgba(156,77,255,.12));
    border:1px solid var(--n22-pink,#ff2d8d);
    border-radius:14px;
    animation:slyAcIn .3s ease;
}

.sly-ac__picked .sly-ac__cover{ width:64px; height:64px; }
.sly-ac__picked .sly-ac__meta strong{ font-size:18px; }

.sly-ac__picked button{
    padding:8px 16px;
    font:inherit;
    font-size:13px;
    font-weight:600;
    color:#fff;
    background:rgba(0,0,0,.3);
    border:1px solid var(--n22-line,rgba(255,255,255,.2));
    border-radius:999px;
    cursor:pointer;
}

@keyframes slyAcIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:none; }
}

.sly-ac__manual-link{
    margin-top:12px;
    padding:0;
    font:inherit;
    font-size:14px;
    color:var(--n22-cyan,#00d9ed);
    background:none;
    border:0;
    cursor:pointer;
}

.sly-ac__manual-link:hover{ text-decoration:underline; }

.sly-ac__manual{ margin-top:16px; }

/* Genres */

.sly-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.sly-chip{ position:relative; cursor:pointer; }

.sly-chip input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.sly-chip span{
    display:inline-block;
    margin:0;
    padding:8px 16px;
    font-size:14px;
    font-weight:500;
    color:var(--n22-soft,#d3c8d8);
    background:var(--n22-surface-2,#32183e);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:999px;
    transition:background .2s,border-color .2s,color .2s;
}

.sly-chip:hover span{ background:var(--n22-surface-hover,#3b1c49); }

.sly-chip input:focus-visible + span{
    outline:2px solid var(--n22-cyan,#00d9ed);
    outline-offset:2px;
}

.sly-chip input:checked + span{
    color:#fff;
    background:rgba(255,45,141,.2);
    border-color:var(--n22-pink,#ff2d8d);
}

@media(max-width:700px){
    .sly-ac__picked{ flex-wrap:wrap; }
    .sly-ac__list{ max-height:300px; }
}

@media(prefers-reduced-motion:reduce){
    .sly-ac__picked{ animation:none; }
}


/* =========================================================
   PAGE TWITCH
========================================================= */

.sly-twitch{
    width:min(1400px,calc(100% - 40px));
    margin:0 auto;
    padding:40px 0 100px;
    color:var(--n22-text,#fff);
}

.sly-twitch [hidden]{ display:none !important; }

.sly-twitch__hero{
    text-align:center;
    padding:24px 0 34px;
}

.sly-twitch__hero h1{
    margin:10px 0 14px;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(34px,5.6vw,60px);
    line-height:1.05;
}

.sly-twitch__hero h1 span{ color:#a970ff; }

.sly-twitch__hero p{
    margin:0;
    font-size:18px;
    line-height:1.6;
    color:var(--n22-soft,#d3c8d8);
}

.sly-twitch__tabs{ display:none; }

.sly-twitch__layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:20px;
    align-items:stretch;
}

.sly-twitch__stream{ min-width:0; }

.sly-twitch__frame{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#0b0610;
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:16px;
    box-shadow:var(--n22-shadow,0 20px 55px rgba(0,0,0,.28));
}

.sly-twitch__frame iframe,
.sly-twitch__chat-body iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

/* Affiche cliquable (chargement différé) */

.sly-twitch__poster{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:20px;
    font:inherit;
    color:#fff;
    background:
        radial-gradient(ellipse at 30% 20%,rgba(169,112,255,.35),transparent 55%),
        radial-gradient(ellipse at 80% 90%,rgba(255,45,141,.28),transparent 55%),
        #140a1c;
    border:0;
    cursor:pointer;
    overflow:hidden;
}

.sly-twitch__poster strong{
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(20px,3vw,30px);
}

.sly-twitch__poster small{
    font-size:13px;
    color:var(--n22-soft,#d3c8d8);
    text-align:center;
}

.sly-twitch__poster-play{
    display:grid;
    place-items:center;
    width:clamp(70px,9vw,104px);
    aspect-ratio:1;
    font-size:clamp(24px,3.4vw,38px);
    padding-left:6px;
    box-sizing:border-box;
    background:#9146ff;
    border-radius:50%;
    box-shadow:0 0 0 0 rgba(145,70,255,.6);
    animation:slyTwitchPulse 2.2s infinite;
    transition:transform .2s;
}

.sly-twitch__poster:hover .sly-twitch__poster-play{ transform:scale(1.08); }

@keyframes slyTwitchPulse{
    70%{ box-shadow:0 0 0 26px rgba(145,70,255,0); }
    100%{ box-shadow:0 0 0 0 rgba(145,70,255,0); }
}

.sly-twitch__poster:focus-visible{
    outline:3px solid var(--n22-cyan,#00d9ed);
    outline-offset:-6px;
}

/* Barre sous le lecteur */

.sly-twitch__bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:16px;
}

.sly-twitch__channel{
    display:flex;
    align-items:center;
    gap:12px;
}

.sly-twitch__channel strong{ display:block; font-size:17px; }

.sly-twitch__channel small{ color:var(--n22-muted,#a895ad); }

.sly-twitch__logo{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    font-size:22px;
    background:#9146ff;
    border-radius:50%;
}

.sly-twitch__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.sly-twitch__actions a,
.sly-twitch__actions button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    font:inherit;
    font-size:14px;
    font-weight:600;
    color:#fff;
    text-decoration:none;
    background:var(--n22-surface-2,#32183e);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:999px;
    cursor:pointer;
    transition:background .2s,transform .2s;
}

.sly-twitch__actions a:hover,
.sly-twitch__actions button:hover{
    background:var(--n22-surface-hover,#3b1c49);
    transform:translateY(-2px);
}

.sly-twitch__actions .sly-twitch__follow{
    background:#9146ff;
    border-color:#9146ff;
}

.sly-twitch__actions .sly-twitch__follow:hover{ background:#a566ff; }

.sly-twitch__note{
    margin:18px 0 0;
    font-size:13px;
    line-height:1.6;
    color:var(--n22-muted,#a895ad);
}

.sly-twitch__note i{ margin-right:6px; color:var(--n22-cyan,#00d9ed); }

/* Chat */

.sly-twitch__chat{
    display:flex;
    flex-direction:column;
    min-height:420px;
    overflow:hidden;
    background:var(--n22-surface,#281333);
    border:1px solid var(--n22-line,rgba(255,255,255,.11));
    border-radius:16px;
}

.sly-twitch__chat header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    font-weight:600;
    border-bottom:1px solid var(--n22-line,rgba(255,255,255,.11));
}

.sly-twitch__chat header span i{ margin-right:8px; color:#a970ff; }

.sly-twitch__chat header a{ color:var(--n22-muted,#a895ad); }
.sly-twitch__chat header a:hover{ color:#fff; }

.sly-twitch__chat-body{
    position:relative;
    flex:1;
    display:grid;
    place-items:center;
    padding:20px;
    text-align:center;
    color:var(--n22-muted,#a895ad);
}

.sly-twitch__chat-body iframe{ position:absolute; }

/* Le chat suit la hauteur du lecteur sur grand écran */
@media(min-width:1001px){
    .sly-twitch__chat{ min-height:0; }
}

@media(max-width:1000px){

    .sly-twitch__tabs{
        display:flex;
        gap:8px;
        margin-bottom:14px;
        padding:5px;
        background:var(--n22-surface,#281333);
        border:1px solid var(--n22-line,rgba(255,255,255,.11));
        border-radius:999px;
    }

    .sly-twitch__tabs button{
        flex:1;
        padding:11px;
        font:inherit;
        font-weight:600;
        color:var(--n22-soft,#d3c8d8);
        background:none;
        border:0;
        border-radius:999px;
        cursor:pointer;
    }

    .sly-twitch__tabs button.is-active{
        color:#fff;
        background:#9146ff;
    }

    .sly-twitch__layout{ grid-template-columns:1fr; }

    .sly-twitch__layout[data-active="stream"] .sly-twitch__chat{ display:none; }
    .sly-twitch__layout[data-active="chat"] .sly-twitch__stream{ display:none; }

    .sly-twitch__chat{ height:70vh; }
}

@media(prefers-reduced-motion:reduce){
    .sly-twitch__poster-play{ animation:none; transition:none; }
}


/* =========================================================
   MENU MOBILE (offcanvas) : accordéon synchronisé avec le menu principal
========================================================= */

/* Au-dessus de la barre sticky du lecteur (z-index 99990). */
.sly-om-overlay{ z-index:99995; }
.sly-om{ z-index:99996; outline:0; }

body.sly-menu-open{ overflow:hidden; }

/* Tablettes : le hero bascule aussi sur le menu offcanvas (comme les pages internes). */
@media(max-width:900px){
    .sh05-nav{ display:none; }
    .sh05-socials{ display:none; }
}

.sly-om__content{
    padding:18px 18px 22px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.sly-om__nav{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sly-om__home,
.sly-om__trigger{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    box-sizing:border-box;
    padding:16px 14px;
    font:inherit;
    font-size:16px;
    font-weight:800;
    letter-spacing:.06em;
    text-align:left;
    color:#fff;
    text-decoration:none;
    background:none;
    border:0;
    border-radius:12px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .2s;
}

.sly-om__home > i:first-child,
.sly-om__trigger > i:first-child{
    width:22px;
    text-align:center;
    color:var(--n22-pink,#ff2d8d);
}

.sly-om__home span,
.sly-om__trigger span{ flex:1; }

.sly-om__home:hover,
.sly-om__trigger:hover,
.sly-om__group.is-open > .sly-om__trigger{
    background:rgba(255,255,255,.06);
}

.sly-om__home.is-current{ color:var(--n22-cyan,#00d9ed); }

.sly-om__caret{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    font-size:12px;
    color:var(--n22-muted,#a895ad);
    transition:transform .3s ease,color .3s;
}

.sly-om__group.is-open .sly-om__caret{
    transform:rotate(180deg);
    color:#fff;
}

.sly-om__trigger:focus-visible,
.sly-om__home:focus-visible,
.sly-om__panel a:focus-visible,
.sly-om__listen:focus-visible{
    outline:2px solid var(--n22-cyan,#00d9ed);
    outline-offset:-2px;
}

/* Panneau : hauteur animée en CSS pur (grid 0fr -> 1fr), sans mesure JS. */
.sly-om__panel{
    display:grid;
    grid-template-rows:0fr;
    visibility:hidden;
    transition:grid-template-rows .32s ease,visibility 0s .32s;
}

.sly-om__group.is-open .sly-om__panel{
    grid-template-rows:1fr;
    visibility:visible;
    transition:grid-template-rows .32s ease,visibility 0s;
}

.sly-om__panel-inner{
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    margin:0 0 6px 24px;
    padding-left:14px;
    border-left:1px solid rgba(255,255,255,.12);
}

.sly-om__panel a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 10px;
    font-size:15px;
    font-weight:500;
    color:var(--n22-soft,#d3c8d8);
    text-decoration:none;
    border-radius:10px;
    -webkit-tap-highlight-color:transparent;
}

.sly-om__panel a i{
    width:18px;
    text-align:center;
    font-size:13px;
    color:var(--n22-muted,#a895ad);
}

.sly-om__panel a:hover,
.sly-om__panel a:active{
    color:#fff;
    background:rgba(255,255,255,.06);
}

.sly-om__panel a.is-current{
    color:#fff;
    font-weight:700;
    background:rgba(255,45,141,.14);
}

.sly-om__panel a.is-current i{ color:var(--n22-pink,#ff2d8d); }

.sly-om__title{
    margin:12px 10px 4px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--n22-pink,#ff2d8d);
}

.sly-om__title:first-child{ margin-top:4px; }

.sly-om__foot{
    margin-top:auto;
    padding-top:26px;
    display:grid;
    gap:20px;
}

.sly-om__listen{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:15px 20px;
    font:inherit;
    font-weight:700;
    color:#fff;
    background:linear-gradient(90deg,var(--n22-pink,#ff2d8d),var(--n22-violet,#9c4dff));
    border:0;
    border-radius:999px;
    cursor:pointer;
}

.sly-om .sh05-off-socials{
    display:flex;
    justify-content:center;
    gap:12px;
    margin:0;
}

.sly-om .sh05-off-socials a{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    font-size:17px;
    border-radius:50%;
}

@media(prefers-reduced-motion:reduce){
    .sly-om__panel,
    .sly-om__group.is-open .sly-om__panel,
    .sly-om__caret{ transition:none; }
}


/* Nom d'émission : masqué tant que l'API n'a pas répondu */
.sh05-show:has(#sh05Show:empty){ visibility:hidden; }


/* Logo SLY utilisé comme cover par défaut : entier, centré, sur fond sombre */
img[src*="logo-slyradiomax--main-logo"].sly-cover-fallback,
.sh05-disc-cover img[src*="logo-slyradiomax--main-logo"],
.sly-sticky04d__cover img[src*="logo-slyradiomax--main-logo"],
.sly-sticky04d__full-cover img[src*="logo-slyradiomax--main-logo"],
#slySticky04dCover[src*="logo-slyradiomax--main-logo"],
#slyStickyFullCover[src*="logo-slyradiomax--main-logo"]{
    object-fit:contain;
    box-sizing:border-box;
    padding:14%;
    background:#0d0814;
}

.sh03-cover img[src*="logo-slyradiomax--main-logo"],
.hist-cover img[src*="logo-slyradiomax--main-logo"],
#newsSidebarSongCover[src*="logo-slyradiomax--main-logo"],
#podcastSidebarCover[src*="logo-slyradiomax--main-logo"]{
    object-fit:contain;
    box-sizing:border-box;
    padding:12%;
    background:#0d0814;
}



/* Carte de la grille : toute la carte mène à la fiche de l'émission */
.spc02-card{ position:relative; }

.spc02-card-link{
    position:absolute;
    inset:0;
    z-index:3;
    border-radius:inherit;
}


/* =========================================================
   GRILLE SLY · horaires en pastille rouge + covers agrandies
========================================================= */

.spc02-card{ height:305px; }

.spc02-card-image{ height:172px; }

.spc02-time,
.spc02-card-image > span:not(.spc02-live){
    padding:5px 8px;
    border-radius:4px;
    background:#e5173f;
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.6px;
    line-height:1;
    box-shadow:0 4px 12px rgba(229,23,63,.35);
}

.spc02-time{ gap:7px; }

.spc02-time i{ background:rgba(255,255,255,.7); }

@media(max-width:1050px){
    .spc02-card{ height:285px; }
}

@media(max-width:650px){
    .spc02-card{ height:292px; }
}

@media(max-width:420px){
    .spc02-card-image{ height:150px; }
}


/* =========================================================
   GRILLE SLY · sélecteur de jours plus lisible et centré
========================================================= */

.spc02-days{
    justify-content:center;
    gap:8px;
    width:fit-content;
    max-width:100%;
    margin:0 auto 18px;
}

.spc02-days button{
    width:78px;
    height:66px;
    gap:4px;
    border-radius:8px;
    border-color:rgba(255,255,255,.16);
    background:#141824;
    color:#c9ced8;
    font-size:12px;
    letter-spacing:1.4px;
}

.spc02-days button span{
    font-size:22px;
    font-weight:800;
    color:#fff;
}

.spc02-days button.active{
    border-color:var(--spc02-pink);
    background:linear-gradient(145deg,rgba(255,45,141,.3),rgba(0,229,255,.08));
    color:#fff;
}

.spc02-days .spc02-all-btn{
    width:auto;
    padding:0 18px;
    font-size:13px;
    font-weight:800;
}

.spc02-days .spc02-all-btn span{
    font-size:11px;
    letter-spacing:1.4px;
    font-weight:700;
    color:inherit;
}

@media(max-width:650px){
    .spc02-days{ justify-content:flex-start; margin:0 0 14px; }
    .spc02-days button{ flex:0 0 66px; width:66px; height:60px; }
    .spc02-days .spc02-all-btn{ flex:0 0 auto; width:auto; }
}


/* ---------- Vue "toutes les émissions" : une seule ligne qui slide ---------- */

.spc02-all-wrap{ position:relative; }

.spc02-all-wrap.is-hidden{ display:none; }

.spc02-programs--all{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    gap:5px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}

.spc02-programs--all::-webkit-scrollbar{ display:none; }

.spc02-programs--all .spc02-card{
    flex:0 0 calc((100% - 25px) / 6);
    scroll-snap-align:start;
}

.spc02-arrow{
    position:absolute;
    top:86px;
    z-index:5;
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    background:rgba(10,12,18,.88);
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s,border-color .2s;
}

.spc02-arrow:hover{ border-color:var(--spc02-pink); }
.spc02-arrow--prev{ left:10px; }
.spc02-arrow--next{ right:10px; }

.spc02-all-wrap.has-prev .spc02-arrow--prev,
.spc02-all-wrap.has-next .spc02-arrow--next{
    opacity:1;
    pointer-events:auto;
}

@media(max-width:1050px){
    .spc02-programs--all .spc02-card{ flex-basis:calc((100% - 10px) / 3); }
}

@media(max-width:650px){
    .spc02-programs--all .spc02-card{ flex-basis:205px; }
    .spc02-arrow{ display:none; }
}

@media(max-width:420px){
    .spc02-programs--all .spc02-card{ flex-basis:185px; }
}


/* =========================================================
   LECTEUR STICKY · poignée (mobile uniquement)
   ========================================================= */

.sly-sticky04d__handle{ display:none; }

@media(max-width:600px){

    .sly-sticky04d__inner{
        position:relative;
        padding-top:14px;
    }

    .sly-sticky04d__handle{
        display:block;
        position:absolute;
        top:5px;
        left:50%;
        width:38px;
        height:4px;
        margin-left:-19px;
        border-radius:4px;
        background:rgba(255,255,255,.5);
        pointer-events:none;
        animation:slyStickyHandle 2.6s ease-in-out 1.2s 3;
    }

    .sly-sticky04d.is-full .sly-sticky04d__handle{ display:none; }
}

@keyframes slyStickyHandle{
    0%,60%,100%{ transform:translateY(0); }
    25%{ transform:translateY(-4px); background:#fff; }
}

@media(prefers-reduced-motion:reduce){
    .sly-sticky04d__handle{ animation:none; }
}


/* =========================================================
   LECTEUR DÉPLOYÉ (mobile) · version moderne
   Fond cover flouté, anneau en pointillés, disque vinyle,
   halo qui pulse, verre dépoli, apparition en cascade.
   ========================================================= */

.sly-sticky04d__full-grabber,
.sly-sticky04d__full-halo,
.sly-sticky04d__full-ring{ display:none; }

@media(max-width:600px){

    /* ---------- Fond : la cover, floue et vivante ---------- */

    .sly-sticky04d__full-bg{
        transform:scale(1.5);
        filter:blur(34px) saturate(1.6) brightness(.72);
        animation:slyFullDrift 24s ease-in-out infinite alternate;
        transition:opacity .6s;
    }

    .sly-sticky04d__full-shade{
        background:
            radial-gradient(70% 45% at 50% 38%,transparent,rgba(7,9,14,.45)),
            linear-gradient(180deg,rgba(7,9,14,.5),rgba(7,9,14,.05) 38%,rgba(7,9,14,.9));
    }

    @keyframes slyFullDrift{
        from{ transform:scale(1.5) translate3d(-3%,-2%,0); }
        to  { transform:scale(1.65) translate3d(3%,3%,0); }
    }

    /* ---------- Poignée de fermeture ---------- */

    .sly-sticky04d__full-grabber{
        display:block;
        position:absolute !important;
        top:max(6px,env(safe-area-inset-top));
        left:50%;
        width:40px;
        height:4px;
        margin-left:-20px;
        border-radius:4px;
        background:rgba(255,255,255,.4);
    }

    /* ---------- Scène : disque + anneaux ---------- */

    .sly-sticky04d__full-stage{
        position:relative;
        width:min(66vw,38vh,300px);
        aspect-ratio:1;
    }

    .sly-sticky04d__full-disc{
        width:100%;
        border:0;
        box-shadow:
            0 26px 60px rgba(0,0,0,.6),
            0 0 0 1px rgba(255,255,255,.08);
    }

    /* sillons de vinyle + reflet */
    .sly-sticky04d__full-disc::after{
        content:"";
        position:absolute;
        inset:0;
        border-radius:50%;
        pointer-events:none;
        background:
            conic-gradient(from 20deg,transparent 0 18%,rgba(255,255,255,.2) 25%,transparent 32% 68%,rgba(255,255,255,.14) 75%,transparent 82%),
            repeating-radial-gradient(circle,transparent 0 3px,rgba(0,0,0,.07) 3px 4px);
        mix-blend-mode:soft-light;
    }

    .sly-sticky04d__full-hole{
        width:13%;
        border:3px solid rgba(255,255,255,.2);
        box-shadow:0 0 0 6px rgba(0,0,0,.25);
    }

    /* anneau en pointillés */
    .sly-sticky04d__full-ring{
        display:block;
        position:absolute;
        inset:-16px;
        border:2px dashed color-mix(in srgb,var(--station) 85%,#fff);
        border-radius:50%;
        opacity:.9;
        animation:slyFullSpin 40s linear infinite reverse;
        animation-play-state:paused;
    }

    .sly-sticky04d__full-ring--inner{
        inset:-30px;
        border-width:1px;
        border-style:dotted;
        opacity:.45;
        animation-duration:60s;
        animation-direction:normal;
    }

    .sly-sticky04d.is-playing .sly-sticky04d__full-ring{
        animation-play-state:running;
    }

    /* halo qui pulse quand ça joue */
    .sly-sticky04d__full-halo{
        display:block;
        position:absolute;
        inset:-6px;
        border-radius:50%;
        background:radial-gradient(circle,transparent 60%,color-mix(in srgb,var(--station) 55%,transparent) 100%);
        filter:blur(18px);
        opacity:.5;
        transition:opacity .5s;
    }

    .sly-sticky04d.is-playing .sly-sticky04d__full-halo{
        animation:slyFullHalo 2.4s ease-in-out infinite;
    }

    @keyframes slyFullHalo{
        0%,100%{ opacity:.45; transform:scale(1); }
        50%{ opacity:.95; transform:scale(1.12); }
    }

    /* ---------- Textes ---------- */

    .sly-sticky04d__full-track{ margin-top:30px; }

    .sly-sticky04d__full-title{
        font-size:26px;
        text-shadow:0 4px 24px rgba(0,0,0,.5);
    }

    .sly-sticky04d__full-artist{
        margin-top:10px;
        font-size:13px;
        font-weight:700;
        letter-spacing:.14em;
        text-transform:uppercase;
        color:rgba(255,255,255,.75);
    }

    /* ---------- Contrôles en verre dépoli ---------- */

    .sly-sticky04d__full-close,
    .sly-sticky04d__full-stations button{
        -webkit-backdrop-filter:blur(14px);
        backdrop-filter:blur(14px);
    }

    .sly-sticky04d__full-play{
        box-shadow:
            0 14px 34px -8px var(--station),
            0 0 0 8px color-mix(in srgb,var(--station) 18%,transparent);
    }

    .sly-sticky04d__full-stations{
        padding:5px;
        gap:4px;
        border:1px solid rgba(255,255,255,.14);
        border-radius:999px;
        background:rgba(255,255,255,.07);
        -webkit-backdrop-filter:blur(16px);
        backdrop-filter:blur(16px);
    }

    .sly-sticky04d__full-stations button{
        border-color:transparent;
        background:transparent;
        color:rgba(255,255,255,.8);
    }

    .sly-sticky04d__full-stations button.is-active{
        border-color:transparent;
        color:#0a0b10;
        box-shadow:0 6px 18px -4px var(--station);
    }

    /* ---------- Apparition en cascade ---------- */

    .sly-sticky04d__full.is-open .sly-sticky04d__full-stage,
    .sly-sticky04d__full.is-open .sly-sticky04d__full-track,
    .sly-sticky04d__full.is-open .sly-sticky04d__full-play,
    .sly-sticky04d__full.is-open .sly-sticky04d__full-stations{
        animation:slyFullIn .6s cubic-bezier(.2,.8,.2,1) both;
    }

    .sly-sticky04d__full.is-open .sly-sticky04d__full-track{ animation-delay:.08s; }
    .sly-sticky04d__full.is-open .sly-sticky04d__full-play{ animation-delay:.16s; }
    .sly-sticky04d__full.is-open .sly-sticky04d__full-stations{ animation-delay:.24s; }

    @keyframes slyFullIn{
        from{ opacity:0; transform:translateY(22px); }
        to{ opacity:1; transform:none; }
    }

    @media(prefers-reduced-motion:reduce){
        .sly-sticky04d__full-bg,
        .sly-sticky04d__full-ring,
        .sly-sticky04d__full-halo,
        .sly-sticky04d__full.is-open > *{ animation:none !important; }
    }
}


/* =========================================================
   RECHERCHE DANS LA BARRE DE MENU
   ========================================================= */

.sh05-search{
    position:relative;
    display:flex;
    align-items:center;
    margin-left:auto;
}

.sh05-search-toggle,
.sh05-search-close{
    border:0;
    background:none;
    padding:4px;
    color:rgba(255,255,255,.6);
    font-size:12px;
    cursor:pointer;
    transition:color .2s ease;
}

.sh05-search-toggle:hover,
.sh05-search-close:hover{ color:#fff; }

.sh05-search-form{
    display:none;
    align-items:center;
    gap:10px;
    width:100%;
}

.sh05-search-form > i{
    color:var(--pink,#ff2d8d);
    font-size:11px;
}

.sh05-search-form input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    background:none;
    color:#fff;
    font-family:inherit;
    font-size:12px;
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,.25);
}

.sh05-search-form input:focus{ border-bottom-color:var(--pink,#ff2d8d); }
.sh05-search-form input::placeholder{ color:rgba(255,255,255,.4); }

/* Mode recherche : le champ remplace les entrées du menu. */
.sh05-nav.is-searching > :not(.sh05-search){ display:none; }

.sh05-nav.is-searching .sh05-search{ flex:1 1 640px; width:640px; max-width:100%; margin-left:0; }
.sh05-nav.is-searching .sh05-search-toggle{ display:none; }
.sh05-nav.is-searching .sh05-search-form{ display:flex; }

.sh05-search-results{
    position:absolute;
    top:calc(100% + 18px);
    left:0;
    right:0;
    min-width:320px;
    max-height:60vh;
    overflow-y:auto;
    padding:8px;
    border-radius:14px;
    background:rgba(18,12,30,.96);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 20px 50px rgba(0,0,0,.5);
    backdrop-filter:blur(16px);
    z-index:60;
}

.sh05-search-results[hidden]{ display:none; }

.sh05-nav .sh05-search-results a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px;
    border-radius:10px;
    font-size:12px;
    font-weight:600;
    letter-spacing:0;
    color:rgba(255,255,255,.85);
}

.sh05-nav .sh05-search-results a:hover{ background:rgba(255,255,255,.07); color:#fff; }

.sh05-search-results img,
.sh05-search-thumb{
    flex:none;
    width:40px;
    height:40px;
    border-radius:8px;
    object-fit:cover;
    background:rgba(255,255,255,.08);
}

.sh05-search-results a span{
    display:block;
    min-width:0;
}

.sh05-search-results small{
    display:block;
    margin-top:2px;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--pink,#ff2d8d);
}

.sh05-search-empty{
    padding:14px;
    font-size:12px;
    color:rgba(255,255,255,.55);
}

/* =========================================================
   ZONES TACTILES : au moins 24 x 24 px (WCAG 2.2, critère 2.5.8)
========================================================= */

.sh05-search-toggle,
.sh05-search-close{
    min-width:24px;
    min-height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.sh05-socials a{
    width:24px;
    height:24px;
}

.sly-footer07__links a{
    display:inline-flex;
    align-items:center;
    min-height:24px;
}

/* Présentation (accueil) */
.sly-about-home{padding:56px 20px;background:var(--n22-bg-deep,#100615);color:var(--n22-soft,#d3c8d8)}
.sly-about-home__inner{max-width:900px;margin:0 auto;line-height:1.7}
.sly-about-home h2{margin:0 0 16px;color:var(--n22-text,#fff);font-size:clamp(1.4rem,3vw,2rem)}
.sly-about-home h3{margin:24px 0 8px;color:var(--n22-text,#fff);font-size:1.1rem}
.sly-about-home ul{margin:0 0 16px;padding-left:20px}
.sly-about-home a{color:#ff2d8d}
.sly-about-home strong{color:var(--n22-text,#fff)}