/* =========================
   FONTS
========================= */

@font-face {
    font-family: "Boldonse";
    src: url("../fonts/Boldonse/Boldonse-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/Space_Grotesk/SpaceGrotesk-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Space Grotesk Bold";
    src: url("../fonts/Space_Grotesk/SpaceGrotesk-Bold.ttf") format("truetype");
}

/* =========================
   VARIABLES 
========================= */

:root{
    --bg:#0b0618;
    --bg-secondary:#120a25;
    --card:#18102e;
    --card-light:#22193d;

    --primary:#F35B04;
    --secondary:#F18701;
    --accent:#F7B801;

    --violet:#7678ED;
    --deep-violet:#3D348B;

    --text:#ffffff;
    --text-soft:#cbc8da;
    --border:rgba(255,255,255,.08);

    --radius:24px;
    --transition:.25s ease;
}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Space Grotesk", sans-serif;
    height: 100%;
    min-height: 100vh;
    background:
        radial-gradient(circle at top right,#2d206500 0%,#2d206540 30%,transparent 60%),
        linear-gradient(180deg,#0b0618 0%,#090414 100%);
    color:var(--text);
    overflow-x:hidden;
}

.container{
    max-width:1280px;
}

a{
    text-decoration:none;
}

/* =========================
   TYPOGRAPHY
========================= */

.logo,
.hero-title,
.section-title,
.emissions-grid h3{
    font-family:"Boldonse";
}

.logo{
    font-size:2rem;
    color:var(--primary);
    font-weight:normal;
}

.section-title{
    font-size:3rem;
    margin-bottom:0;
    color:white;
}

p{
    color:var(--text-soft);
    line-height:1.7;
}

/* =========================
   NAVBAR
========================= */

.navbar{
    background:rgba(11,6,24,.95);
    backdrop-filter:blur(20px);
    border-color:var(--border);
}

.nav-link{
    color:var(--text);
    margin:0 12px;
    font-size:1.1rem;
    transition:var(--transition);
    font-family: "Space Grotesk Bold";
}

.nav-link .bi{
    font-size:0.9rem;

}

.nav-link:hover{
    color:var(--primary) ;

}

.btn-listen{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:white;
    padding:12px 28px;
    border-radius:999px;
    transition:var(--transition);
    font-family:"Boldonse";
    display: flex;
    justify-content: center;
    align-items: center;
}

.bi-play-fill {
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-listen:hover{
    transform:translateY(-2px);
    color:white;
}

.btn-listen i{
    margin-right:8px;
}

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

.hero{
    position:relative;
    overflow:hidden;
    padding:120px 0 ;
    margin-bottom: 80px;
}

.hero::after{
    content:"CAMPUS";
    position:absolute;
    bottom:-50px;
    left:-20px;
    font-family:"Boldonse";
    font-size:18rem;
    color:rgba(255,255,255,.03);
    pointer-events:none;
    z-index:0;
}

.hero-line{
    border-left:4px solid var(--secondary);
    padding-left:30px;
    position:relative;
    z-index:2;
}

.hero-title{
    font-size:7rem;
    line-height:1.3;
    letter-spacing:-5px;
    color:white;
}

.hero-text{
    max-width:430px;
    font-size:1.1rem;
}

.btn-primary-custom{
    margin-top:20px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    border:none;
    border-radius:14px;
    color:white;
    padding:18px 30px;
    display:inline-block;
    transition:var(--transition);
    font-family:"Boldonse";

}

.btn-primary-custom:hover{
    transform:translateY(-3px);
    color:white;
}

/* =========================
   PLAYER
========================= */

.player-card{
    width:380px;    
    background: #1d1633;
    border-radius:30px;
    padding:35px;
    text-align:center;
    border:1px solid #2b2148;
    box-shadow: 0 10px 40px rgb(0,0,0,.35);
    z-index: 2;
}

.player-card small{
    color:var(--text);
}

.cover{
    width:160px;
    height:160px;
    border-radius:18px;
    margin:25px auto;
    background:linear-gradient(
        135deg,
        var(--deep-violet),
        var(--violet)
    );
}

.player-card h5{
    color:white;
    margin-bottom:5px;
}

.progress{
    height:6px;
    background:rgb(255,255,255);
    border-radius:999px;
}

.play-btn{
    width:70px;
    height:70px;
    border:none;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:white;
    transition:var(--transition);
}

.play-btn:hover{
    transform:scale(1.1);
}

/* =========================
   PROGRAMME
========================= */

.schedule-card{
    background:var(--card);
    border:1px solid var(--border);
    padding:35px;
    height:180px;
    position:relative;
    transition:var(--transition);
}

.schedule-card:hover{
    background:var(--card-light);
}

.schedule-card h4{
    font-family:"Boldonse";
    color:white;
    font-size:1.8rem;
}

.schedule-card.active{
    background:linear-gradient(
        135deg,
        rgba(118,120,237,.3),
        rgba(61,52,139,.4)
    );
}

.badge-now{
    position:absolute;
    top:-14px;
    left:20px;
    background:var(--primary);
    color:white;
    padding:5px 15px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:700;
}

/* =========================
   PODCASTS
========================= */

.slider-btn{
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:var(--card-light);
    color:white;
    margin-left:10px;
    transition: var(--transition);
}

.slider-btn:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

.podcast-card{
    background:var(--card);
    border-radius:24px;
    overflow:hidden;
    border:1px solid var(--border);
    transition:var(--transition);
}

.podcast-card:hover{
    transform:translateY(-2px);
}

.podcast-image{
    object-fit: cover;
    width: 100%;
    height: 200px;
    background:linear-gradient(
        135deg,
        var(--deep-violet),
        var(--violet)
    );
}

.podcast-content{
    padding:20px;
    position:relative;
}

.podcast-content h5{
    color:white;
}

.podcast-play{
    position:absolute;
    right:10px;
    top:-35px;
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:white;
}

.podcast-play:hover{
    transform: scale(1.1);
}

/* =========================
   NEWS
========================= */

.news-card{
    background:var(--card);
    border-radius:24px;
    overflow:hidden;
    border:1px solid var(--border);
    height:100%;
    transition:var(--transition);
}

.news-card:hover{
    transform:translateY(-2px);
}

.news-image{
    height:260px;
    background:linear-gradient(
        135deg,
        var(--deep-violet),
        var(--violet)
    );
}

.news-content{
    padding:30px;
}

.news-content h4{
    color:white;
    margin-bottom:20px;
    font-family: "Space Grotesk Bold";

}

.btn-news{
    display:inline-block;
    margin-top:15px;
    padding:12px 22px;
    border-radius:999px;
    background:var(--primary);
    color:var(--text);
}

.btn-news:hover{
    transform: scale(1.06);

}

/* =========================
   EMISSIONS
========================= */

.btn-outline-custom{
    border:1px solid rgba(255,255,255,.2);
    padding:12px 24px;
    border-radius:999px;
    color:white;
    transition: 0.2s;
}

.btn-outline-custom:hover{
    background-color: #ebebeb;
    color:rgb(24, 23, 23);
}

.emissions-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:260px 220px;
    gap:0;
    overflow:hidden;
    border-radius:30px;
}

.big-show,
.small-show{
    padding:40px;
    background:var(--card);
    border:1px solid var(--border);
}

.big-show{
    grid-column:1 / 3;
    background:linear-gradient(
        135deg,
        rgba(243,91,4,.15),
        rgba(118,120,237,.15)
    );
}

.small-show:nth-child(2){
    background:var(--card-light);
}

.small-show:nth-child(4){
    background:var(--card-light);
}

.big-show span,
.small-show span{
    color:var(--text-soft);
    text-transform:uppercase;
    font-size:.8rem;
}

.big-show h3{
    font-size:3rem;
    margin-top:15px;
}

.small-show h3{
    font-size:2rem;
    margin-top:15px;
}

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

.footer{
    border-top: #22193d;
    margin-bottom: 100px;
}

.footer-logo{
    width:120px;
    height:120px;
    margin:auto;
    border-radius:20px;
    background:linear-gradient(
        135deg,
        var(--deep-violet),
        var(--primary)
    );
}

.footer-links{
    list-style:none;
    padding:0;
}

.footer-links li{
    margin-bottom:18px;
}

.footer-links a{
    color:var(--text-soft);
}

.footer-links a:hover{
    color:white;
}

.socials{
    margin-top:20px;
}

.socials i{
    font-size:1.8rem;
    margin-right:18px;
    color:white;
}

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

@media(max-width:992px){

    .hero-title{
        font-size:4rem;
    }

    .player-card{
        margin-top:60px;
        width:100%;
    }

    .section-title{
        font-size:2.2rem;
    }

    .emissions-grid{
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .big-show{
        grid-column:auto;
    }

}

@media(max-width:768px){

    .hero{
        text-align:center;
    }

    .hero-line{
        border-left:none;
        padding-left:0;
    }

    .hero-title{
        font-size:3rem;
    }

    .hero::after{
        font-size:8rem;
        bottom:-30px;
    }

    .section-title{
        font-size:1.8rem;
    }

}







/* Radio Player */
.radio-player {
    position: fixed;
    bottom: -20px;
    left: 100px;
    right: 100px;
    border-radius: 18px;
    width: auto;
    padding: 15px 25px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color: var(--bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.radio-player.active {
    transform: translateY(0);
    bottom: 20px;
    left: 100px;
    right: 100px;
}

.track-info {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.album-art {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid #302f2f;
}

.track-details h4 {
    font-size: 1.1rem;
    text-transform: uppercase;
}

.track-details p {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Controls */
.controls {
    display: flex;
    align-items: center;
    gap: 30px;
}

.btn-control {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bg-color);
    display: flex;
    transition: transform 0.2s;
}

.btn-control svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.btn-control:hover {
    transform: scale(1.1);
}

.btn-play-big {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    color: #302f2f;

    display: grid;
    place-items: center;
}
/* Volume */
.volume-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    background: transparent;
    cursor: pointer;
}

/* Track */
input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

input[type="range"]::-moz-range-track {
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* Thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: 50%;
    background: #302f2f;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s;
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: var(--bg-color);
    transition: transform 0.2s;
}

input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.2);
}

input[type="range"]:focus {
    outline: none;
}

/* Icons */
svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 3rem;
    }

    .radio-player {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
        bottom: 10px;
        left: 50px;
        right: 5            0px;
    }

    .track-info,
    .controls {
        width: 100%;
        justify-content: space-between;
    }
}   








/* =========================
   FORMULAIRE ADMIN
========================= */

.admin-body{
    background: #ffffff;
    color: #000;
}

.admin-body h2{
    color: var(--secondary);
}

.admin-p {
    color:#000
}

.form-admin{
    max-width: 900px;
    margin: 60px auto;
}

.form-admin h2{
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.form-group{
    margin-bottom: 25px;
}

.form-group label{
    
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Space Grotesk Bold";
}

.form-group .upload-zone{
    border: none;
    border-radius: 0%;
}

.form-control{
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #7a7a7a;
    border-radius: 12px;
    font-size: 1rem;
    outline: none;
    transition: .2s;
}

.form-control:focus{

    border-color: #575757;
    box-shadow: 0 0 10px rgba(128, 128, 128, 0.2);
}

textarea.form-control{

    min-height: 180px;
    resize: vertical;
}

/* Upload */

.upload-zone{

    border:2px solid #7a7a7a;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    transition:.2s;
}

/* Bouton */

.btn-admin{

    background:var(--secondary);
    color:white;
    border:none;
    border-radius:12px;
    padding:15px 40px;
    font-size:1rem;
    font-family: "Space Grotesk Bold";
    cursor:pointer;
    transition:.2s;
}

.btn-admin:hover{

    background:var(--primary);
}

.btn-container{

    display:flex;
    justify-content:flex-end;
    margin-top:25px;
}

.table th td{
    border: 2px solid black;
}

.news-card-flat {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem;
    border:1px solid var(--border);
    border-radius: 8px;
    background:var(--card);
    height:100%;

}

.news-card-flat img,
.news-card-flat .news-image-flat {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
background:linear-gradient(
        135deg,
        var(--deep-violet),
        var(--violet)
    );}

.news-card-flat .news-content-flat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.news-card-flat h4 {
    margin: 0;
    font-family: "Space Grotesk Bold";
}

.news-card-flat p {
    margin: 0;
    font-size: 0.9rem;
    color: #ebebeb;
}

.news-card-flat .btn-news {
    align-self: flex-end;
    margin-top: 0.5rem;
}

.login-connexion{
    max-width: 500px;
    padding-bottom: 40px;
}



.podcast-carousel-wrapper {
    margin-top: 30px;
    overflow-x: auto;
    scrollbar-width: none;
}

.podcast-carousel-wrapper::-webkit-scrollbar {
    display: none;
}

#podcast-carousel {
    display: flex;
    flex-wrap: nowrap;
}

#podcast-carousel .podcast-card {
    flex: 0 0 290px;
    width: 290px;
}