/* VRadio — Styles de base */
:root {

    --noir: #070707;

    --noir-profond: #030303;

    --anthracite: #111111;

    --anthracite-clair: #1a1a1a;

    --bourgogne: #650014;

    --bourgogne-fonce: #35000b;

    --rouge: #b00025;

    --rouge-vif: #e00032;

    --or: #c8a45d;

    --or-clair: #e0c27a;

    --blanc: #f7f7f7;

    --gris: #a5a5a5;

    --gris-fonce: #555555;

}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    background-color: var(--noir);

    color: var(--blanc);

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

    line-height: 1.6;

    overflow-x: hidden;

}

a {

    color: inherit;

}

header {

    width: 100%;

    min-height: 95px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 6%;

    background:

        linear-gradient(

            180deg,

            rgba(10, 10, 10, 0.98),

            rgba(3, 3, 3, 0.95)

        );

    border-bottom: 1px solid rgba(200, 164, 93, 0.25);

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow:

        0 5px 30px rgba(0, 0, 0, 0.6);

}

.logo {

    display: flex;

    align-items: center;

}

.logo a {

    display: flex;

    align-items: center;

    text-decoration: none;

}

.logo img {

    width: 190px;

    height: auto;

    display: block;

    transition:

        transform 0.3s ease,

        filter 0.3s ease;

}

.logo img:hover {

    transform: scale(1.04);

    filter:

        drop-shadow(

            0 0 8px rgba(176, 0, 37, 0.5)

        );

}

nav {

    display: flex;

    align-items: center;

    gap: 30px;

}

nav a {

    position: relative;

    color: var(--blanc);

    text-decoration: none;

    text-transform: uppercase;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    padding: 10px 0;

    transition: color 0.3s ease;

}

nav a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 3px;

    width: 0;

    height: 2px;

    background:

        linear-gradient(

            90deg,

            var(--bourgogne),

            var(--rouge-vif),

            var(--or)

        );

    transform: translateX(-50%);

    transition: width 0.3s ease;

}

nav a:hover {

    color: var(--or-clair);

}

nav a:hover::after {

    width: 100%;

}

#accueil {

    min-height: calc(100vh - 95px);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: relative;

    text-align: center;

    padding: 100px 20px;

    overflow: hidden;

    background:

        radial-gradient(

            circle at center,

            rgba(101, 0, 20, 0.35) 0%,

            rgba(7, 7, 7, 0.80) 45%,

            rgba(3, 3, 3, 1) 80%

        );

}

#accueil::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background:

        rgba(176, 0, 37, 0.12);

    filter: blur(100px);

    pointer-events: none;

}

#accueil::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--bourgogne),

            var(--rouge-vif),

            var(--or),

            var(--rouge-vif),

            var(--bourgogne),

            transparent

        );

}

.sur-titre {

    position: relative;

    z-index: 2;

    color: var(--or);

    text-transform: uppercase;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 5px;

    margin-bottom: 15px;

}

#accueil h1 {

    position: relative;

    z-index: 2;

    font-size: clamp(70px, 11vw, 150px);

    line-height: 0.9;

    text-transform: uppercase;

    letter-spacing: 5px;

    margin-bottom: 30px;

    color: var(--blanc);

    text-shadow:

        0 3px 0 #222,

        0 0 25px rgba(176, 0, 37, 0.30);

}

#accueil h1::after {

    content: "";

    display: block;

    width: 130px;

    height: 4px;

    margin: 30px auto 0;

    background:

        linear-gradient(

            90deg,

            var(--bourgogne),

            var(--rouge-vif),

            var(--or)

        );

}

.slogan {

    position: relative;

    z-index: 2;

    color: var(--gris);

    text-transform: uppercase;

    letter-spacing: 4px;

    font-size: 13px;

}

.bouton-ecouter {

    position: relative;

    z-index: 2;

    display: inline-block;

    margin-top: 45px;

    padding: 17px 38px;

    background:

        linear-gradient(

            135deg,

            var(--bourgogne),

            var(--rouge)

        );

    color: var(--blanc);

    text-decoration: none;

    text-transform: uppercase;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    border:

        1px solid

        rgba(224, 194, 122, 0.45);

    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease,

        background 0.3s ease;

}

.bouton-ecouter:hover {

    transform: translateY(-4px);

    background:

        linear-gradient(

            135deg,

            var(--rouge),

            var(--rouge-vif)

        );

    box-shadow:

        0 12px 35px

        rgba(176, 0, 37, 0.35);

}

section:not(#accueil) {

    padding: 100px 10%;

}

.section-contenu {

    width: min(1200px, 100%);

    margin: 0 auto;

}

section h2 {

    font-size: clamp(34px, 5vw, 55px);

    text-transform: uppercase;

    letter-spacing: 3px;

    margin-bottom: 25px;

    line-height: 1.1;

}

section:not(#accueil) h2::after {

    content: "";

    display: block;

    width: 70px;

    height: 3px;

    margin-top: 18px;

    background:

        linear-gradient(

            90deg,

            var(--rouge),

            var(--or)

        );

}

#direct {

    position: relative;

    background:

        linear-gradient(

            135deg,

            #161616 0%,

            #090909 55%,

            #250008 100%

        );

    border-bottom:

        1px solid

        rgba(255, 255, 255, 0.05);

}

.direct-info {

    margin-top: 35px;

    padding-left: 25px;

    border-left:

        3px solid

        var(--bourgogne);

}

.direct-info > p:first-child {

    color: var(--rouge-vif);

    text-transform: uppercase;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

}

.direct-info h3 {

    font-size: clamp(35px, 6vw, 65px);

    margin: 5px 0;

    text-transform: uppercase;

}

.titre-en-cours {

    color: var(--gris);

    font-size: 15px;

}

.lecteur-radio {

    margin-top: 40px;

    width: min(650px, 100%);

    padding: 20px;

    background:

        rgba(255, 255, 255, 0.035);

    border:

        1px solid

        rgba(200, 164, 93, 0.18);

    box-shadow:

        0 15px 40px

        rgba(0, 0, 0, 0.3);

}

audio {

    display: block;

    width: 100%;

}

#programmation {

    background:

        linear-gradient(

            180deg,

            var(--noir),

            var(--noir-profond)

        );

}

#programmation > .section-contenu > p:not(.sur-titre) {

    color: var(--gris);

    max-width: 700px;

}

.grille-programmation {

    display: grid;

    grid-template-columns:

        repeat(3, 1fr);

    gap: 25px;

    margin-top: 50px;

}

.emission {

    min-height: 220px;

    padding: 35px;

    position: relative;

    overflow: hidden;

    background:

        linear-gradient(

            145deg,

            #181818,

            #0c0c0c

        );

    border:

        1px solid

        rgba(255, 255, 255, 0.07);

    transition:

        transform 0.3s ease,

        border-color 0.3s ease,

        box-shadow 0.3s ease;

}

.emission::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:

        linear-gradient(

            90deg,

            var(--bourgogne),

            var(--rouge),

            var(--or)

        );

}

.emission:hover {

    transform: translateY(-7px);

    border-color:

        rgba(200, 164, 93, 0.35);

    box-shadow:

        0 20px 40px

        rgba(0, 0, 0, 0.35);

}

.emission h3 {

    font-size: 22px;

    margin-bottom: 15px;

}

.emission p {

    color: var(--gris);

}

#radio {

    position: relative;

    background:

        linear-gradient(

            135deg,

            #111111,

            #080808

        );

}

#radio p:not(.sur-titre) {

    max-width: 800px;

    color: #c4c4c4;

    font-size: 17px;

}

#tchat {

    position: relative;

    text-align: center;

    background:

        radial-gradient(

            circle at center,

            #570011 0%,

            #210006 40%,

            #070707 80%

        );

}

#tchat .section-contenu {

    max-width: 850px;

}

#tchat .sur-titre {

    color: var(--or-clair);

}

#tchat h2::after {

    margin-left: auto;

    margin-right: auto;

}

#tchat p:not(.sur-titre) {

    color: #d0d0d0;

}

.bouton-tchat {

    display: inline-block;

    margin-top: 35px;

    padding: 16px 38px;

    color: var(--blanc);

    background:

        linear-gradient(

            135deg,

            var(--bourgogne),

            var(--rouge)

        );

    text-decoration: none;

    text-transform: uppercase;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    border:

        1px solid

        rgba(200, 164, 93, 0.5);

    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease;

}

.bouton-tchat:hover {

    transform: translateY(-4px);

    box-shadow:

        0 10px 35px

        rgba(176, 0, 37, 0.4);

}

#contact {

    background:

        var(--noir-profond);

}

#contact p:not(.sur-titre) {

    color: var(--gris);

    margin-bottom: 8px;

}

footer {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 15px;

    padding: 45px 20px;

    text-align: center;

    background: #020202;

    border-top:

        1px solid

        rgba(200, 164, 93, 0.20);

    color: var(--gris-fonce);

    font-size: 12px;

    letter-spacing: 1px;

}

.logo-footer {

    width: 130px;

    height: auto;

    opacity: 0.8;

}

::selection {

    background: var(--bourgogne);

    color: var(--blanc);

}

@media (max-width: 950px) {

    header {

        flex-direction: column;

        gap: 10px;

        padding: 15px 5%;

    }

    .logo img {

        width: 160px;

    }

    nav {

        justify-content: center;

        flex-wrap: wrap;

        gap: 12px 22px;

    }

    #accueil {

        min-height: 650px;

    }

    .grille-programmation {

        grid-template-columns:

            repeat(2, 1fr);

    }

}

@media (max-width: 650px) {

    header {

        position: relative;

    }

    .logo img {

        width: 145px;

    }

    nav {

        gap: 10px 15px;

    }

    nav a {

        font-size: 10px;

        letter-spacing: 1px;

    }

    #accueil {

        min-height: 550px;

        padding:

            80px 20px;

    }

    #accueil h1 {

        font-size: clamp(

            55px,

            18vw,

            85px

        );

    }

    .slogan {

        font-size: 10px;

        letter-spacing: 2px;

    }

    section:not(#accueil) {

        padding:

            70px 7%;

    }

    .grille-programmation {

        grid-template-columns: 1fr;

    }

    .direct-info h3 {

        font-size: 38px;

    }

    .bouton-ecouter,

    .bouton-tchat {

        width: 100%;

        max-width: 320px;

        text-align: center;

    }

}