/* =========================================================
   À DONF LES WATTS
   STYLE PRINCIPAL
   VERSION CHANSON + ÉMISSION
   FOOTER AUTOMATIQUE EN BAS DE PAGE
   ========================================================= */

:root {
    --red: #ff2638;
    --orange: #ff7300;
    --yellow: #ffd400;
    --blue: #008cff;
    --cyan: #00c8ff;
    --purple: #7650ff;

    --white: #ffffff;
    --dark: #070711;
}


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

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;

    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    margin: 0;

    display: flex;
    flex-direction: column;

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

    color: #ffffff;

    background-image:
        url("../images/fond-watts.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


a {
    color: inherit;
}


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

.site-header {
    position: sticky;
    top: 0;

    z-index: 1000;

    min-height: 64px;

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

    padding: 0 5%;

    background:
        rgba(5, 5, 15, 0.92);

    border-bottom:
        2px solid var(--red);

    box-shadow:
        0 5px 16px
        rgba(0, 0, 0, 0.30);
}


.logo {
    font-family:
        "Staatliches",
        Impact,
        sans-serif;

    font-size: 25px;

    letter-spacing: 1.5px;

    color: #ffffff;

    text-shadow:
        2px 2px 0 #d91d30,
        0 0 10px
        rgba(255, 255, 255, 0.25);
}


.menu {
    display: flex;
    align-items: center;

    gap: 30px;
}


.menu a {
    position: relative;

    padding: 9px 0;

    color: #ffffff;

    text-decoration: none;

    font-size: 20px;
    font-weight: 900;

    text-shadow:
        1px 2px 3px #000000;
}


.menu a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 2px;

    width: 0;
    height: 3px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #ff2638,
            #ff8a00,
            #ffd400
        );

    transition: 0.2s;
}


.menu a:hover {
    color: var(--yellow);
}


.menu a:hover::after {
    width: 100%;
}


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

main {
    width: 100%;

    flex: 1;
}


/* =========================================================
   GRAND TITRE ACCUEIL
   ========================================================= */

.home-hero {
    min-height: 128px;

    display: flex;
    flex-direction: column;

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

    padding:
        12px 20px
        7px;

    text-align: center;

    background: transparent;
}


.home-hero h1 {
    margin: 0;

    font-family:
        "Staatliches",
        Impact,
        sans-serif;

    font-size:
        clamp(50px, 5vw, 78px);

    line-height: 1;

    letter-spacing: 3px;

    color: #ffffff;

    text-shadow:
        3px 3px 0 #c61f36,
        0 0 8px
        rgba(255, 255, 255, 0.35),
        0 0 18px
        rgba(255, 40, 80, 0.45);
}


.home-hero p {
    display: inline-block;

    margin: 9px 0 0;

    padding:
        5px 13px;

    border-radius: 18px;

    background:
        rgba(5, 5, 15, 0.72);

    color: #ffffff;

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

    text-shadow:
        1px 2px 2px #000000;
}


.home-hero strong {
    color: var(--yellow);

    background: none;

    padding: 0;
}


/* =========================================================
   ZONE PRINCIPALE ACCUEIL
   ========================================================= */

.home-showcase {
    width: 96%;
    max-width: 1700px;

    margin:
        4px auto 0;

    display: grid;

    grid-template-columns:
        minmax(165px, 0.65fr)
        minmax(760px, 3fr)
        minmax(165px, 0.65fr);

    gap: 22px;

    align-items: stretch;
}


/* =========================================================
   MOTS LATÉRAUX
   ========================================================= */

.home-side {
    display: flex;
    flex-direction: column;

    justify-content: space-evenly;

    min-width: 0;

    padding: 2px 0;

    overflow: visible;
}


.side-item {
    position: relative;

    width: max-content;
    max-width: 100%;

    min-height: 45px;

    display: flex;
    align-items: center;

    padding: 3px 8px;

    border: 0;
    background: none;

    font-family:
        "Staatliches",
        Impact,
        sans-serif;

    font-size:
        clamp(25px, 1.7vw, 37px);

    line-height: 0.95;

    letter-spacing: 1.2px;

    -webkit-text-stroke:
        1px rgba(0, 0, 0, 0.85);

    text-shadow:
        2px 3px 0
        rgba(0, 0, 0, 0.82),
        0 0 5px
        rgba(0, 0, 0, 0.50);

    transition:
        transform 0.2s,
        filter 0.2s;
}


.side-item::after {
    content: "";

    position: absolute;

    height: 4px;

    border-radius: 50%;

    opacity: 0.9;
}


/* =========================================================
   GAUCHE
   ========================================================= */

.home-side-left
.side-item:nth-child(1) {

    align-self: flex-start;

    margin-left: 2%;

    color: #ff2638;

    font-size:
        clamp(28px, 1.9vw, 40px);

    transform:
        rotate(-5deg);
}


.home-side-left
.side-item:nth-child(1)::after {

    width: 90%;

    left: 2px;
    bottom: -1px;

    background:
        #ffd400;
}


.home-side-left
.side-item:nth-child(2) {

    align-self: flex-end;

    margin-right: 3%;

    color: #ff7300;

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

    transform:
        rotate(3deg);
}


.home-side-left
.side-item:nth-child(2)::after {

    width: 72%;

    right: 0;
    bottom: 0;

    background:
        #ff2f86;
}


.home-side-left
.side-item:nth-child(3) {

    align-self: center;

    margin-left: -18%;

    color: #008cff;

    font-size:
        clamp(32px, 2.2vw, 46px);

    transform:
        rotate(-3deg);
}


.home-side-left
.side-item:nth-child(3)::after {

    width: 115%;

    left: -7%;
    bottom: -2px;

    background:
        #ffd400;
}


.home-side-left
.side-item:nth-child(4) {

    align-self: flex-end;

    margin-right: 7%;

    color: #ff3333;

    font-size:
        clamp(28px, 1.9vw, 41px);

    transform:
        rotate(5deg);
}


.home-side-left
.side-item:nth-child(4)::after {

    width: 80%;

    right: 0;
    bottom: 0;

    background:
        #ff7300;
}


.home-side-left
.side-item:nth-child(5) {

    align-self: flex-start;

    margin-left: 7%;

    color: #704cff;

    font-size:
        clamp(26px, 1.75vw, 37px);

    transform:
        rotate(-2deg);
}


.home-side-left
.side-item:nth-child(5)::after {

    width: 84%;

    left: 0;
    bottom: 0;

    background:
        #00d7d0;
}


.home-side-left
.side-item:nth-child(6) {

    align-self: flex-end;

    margin-right: 0;

    color: #ff7900;

    font-size:
        clamp(20px, 1.35vw, 27px);

    transform:
        rotate(4deg);
}


.home-side-left
.side-item:nth-child(6)::after {

    width: 68%;

    right: 0;
    bottom: -1px;

    background:
        #ffd400;
}


/* =========================================================
   DROITE
   ========================================================= */

.home-side-right .side-item {
    text-align: right;
}


.home-side-right
.side-item:nth-child(1) {

    align-self: flex-end;

    margin-right: 6%;

    color: #ff1744;

    font-size:
        clamp(32px, 2.2vw, 46px);

    transform:
        rotate(5deg);
}


.home-side-right
.side-item:nth-child(1)::after {

    width: 78%;

    right: 0;
    bottom: -2px;

    background:
        #ffd400;
}


.home-side-right
.side-item:nth-child(2) {

    align-self: flex-start;

    margin-left: 8%;

    color: #00aaff;

    font-size:
        clamp(28px, 2vw, 42px);

    transform:
        rotate(-3deg);
}


.home-side-right
.side-item:nth-child(2)::after {

    width: 95%;

    left: 0;
    bottom: 0;

    background:
        #00e0d0;
}


.home-side-right
.side-item:nth-child(3) {

    align-self: flex-end;

    margin-right: 1%;

    color: #ff6a00;

    font-size:
        clamp(31px, 2.1vw, 44px);

    transform:
        rotate(2deg);
}


.home-side-right
.side-item:nth-child(3)::after {

    width: 105%;

    right: 0;
    bottom: -1px;

    background:
        #ff276a;
}


.home-side-right
.side-item:nth-child(4) {

    align-self: flex-start;

    margin-left: 0;

    color: #ff2020;

    font-size:
        clamp(27px, 1.8vw, 38px);

    transform:
        rotate(-5deg);
}


.home-side-right
.side-item:nth-child(4)::after {

    width: 80%;

    left: 0;
    bottom: 0;

    background:
        #ffd400;
}


.home-side-right
.side-item:nth-child(5) {

    align-self: flex-end;

    margin-right: 12%;

    color: #1677ff;

    font-size:
        clamp(26px, 1.75vw, 37px);

    transform:
        rotate(3deg);
}


.home-side-right
.side-item:nth-child(5)::after {

    width: 88%;

    right: 0;
    bottom: -1px;

    background:
        #00ded0;
}


.home-side-right
.side-item:nth-child(6) {

    align-self: flex-start;

    margin-left: 8%;

    color: #ffd400;

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

    transform:
        rotate(-4deg);

    -webkit-text-stroke:
        1px #8d1b00;

    text-shadow:
        2px 3px 0 #d52c00,
        0 0 8px
        rgba(255, 190, 0, 0.65);
}


.home-side-right
.side-item:nth-child(6)::after {
    display: none;
}


.side-item:hover {
    transform:
        rotate(0deg)
        scale(1.07);

    filter:
        saturate(1.15)
        brightness(1.05);
}


/* =========================================================
   CENTRE : CHANSON + ÉMISSION
   ========================================================= */

.home-new-content {
    min-width: 0;

    display: grid;

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

    gap: 18px;

    align-items: stretch;
}


/* =========================================================
   CHAQUE NOUVEAUTÉ
   ========================================================= */

.home-feature {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.home-feature > h2 {
    margin:
        0 0 7px;

    text-align: center;

    font-family:
        "Staatliches",
        Impact,
        sans-serif;

    font-size:
        clamp(20px, 1.45vw, 27px);

    line-height: 1;

    letter-spacing: 1.3px;

    color: #ffffff;

    text-shadow:
        2px 2px 0 #b7192c,
        0 0 8px #000000;
}


.home-feature > h2 span {
    margin:
        0 5px;

    color: #ffd400;

    text-shadow:
        1px 2px 3px #000000;
}


/* =========================================================
   CARTES CENTRALES
   ========================================================= */

.home-feature-card {
    flex: 1;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border:
        2px solid #ff7300;

    border-radius: 13px;

    background:
        rgba(5, 5, 15, 0.94);

    box-shadow:
        0 0 0 2px
        rgba(255, 255, 255, 0.10),

        0 0 16px
        rgba(255, 70, 30, 0.28),

        0 10px 22px
        rgba(0, 0, 0, 0.42);
}


/* =========================================================
   IMAGES
   ========================================================= */

.home-feature-image {
    position: relative;

    display: block;

    width: 100%;

    overflow: hidden;

    background: #000000;
}


.home-feature-image img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    transition: 0.25s;
}


.home-feature-image:hover img {
    transform:
        scale(1.02);

    filter:
        saturate(1.08)
        brightness(1.03);
}


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

.play-button {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 62px;
    height: 44px;

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

    padding-left: 4px;

    border-radius: 12px;

    background:
        #f12632;

    color: #ffffff;

    font-size: 22px;

    box-shadow:
        0 0 0 4px
        rgba(255, 255, 255, 0.72),

        0 6px 15px
        rgba(0, 0, 0, 0.40);

    transition: 0.2s;
}


.home-feature-image:hover
.play-button {

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

    background:
        #ff6a00;
}


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

.home-feature-info {
    flex: 1;

    padding:
        9px 12px
        11px;

    background:
        rgba(5, 5, 15, 0.96);

    color: #ffffff;
}


.home-feature-date {
    margin:
        0 0 3px;

    color:
        #ffd400;

    font-size:
        11px;

    font-weight:
        900;

    text-transform:
        uppercase;
}


.home-feature-info h3 {
    margin: 0;

    font-family:
        "Staatliches",
        Impact,
        sans-serif;

    color:
        #ffffff;

    font-size:
        clamp(20px, 1.5vw, 27px);

    line-height: 1.05;

    letter-spacing: 0.6px;
}


.home-feature-description {
    margin:
        5px 0 9px;

    color:
        #eeeeee;

    font-size:
        12px;

    line-height:
        1.3;
}


/* =========================================================
   BOUTON YOUTUBE
   ========================================================= */

.youtube-button {
    display: inline-block;

    padding:
        8px 14px;

    border-radius:
        6px;

    background:
        linear-gradient(
            90deg,
            #ed2734,
            #ff7100
        );

    color:
        #ffffff;

    text-decoration:
        none;

    font-family:
        "Staatliches",
        Impact,
        sans-serif;

    font-size:
        17px;

    letter-spacing:
        0.5px;

    box-shadow:
        3px 3px 0
        #ffd400;

    transition:
        0.2s;
}


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

    box-shadow:
        4px 5px 0
        #ffd400;
}


/* =========================================================
   PREMIÈRE ÉMISSION BIENTÔT
   ========================================================= */

.upcoming-emission {
    position: relative;

    min-height: 0;

    display: flex;

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

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(255, 212, 0, 0.20),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(0, 140, 255, 0.22),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            rgba(190, 18, 45, 0.96),
            rgba(45, 10, 85, 0.96)
        );
}


.upcoming-emission-content {
    width: 100%;

    padding:
        25px 20px;

    text-align: center;

    color:
        #ffffff;
}


.upcoming-stars {
    margin-bottom:
        5px;

    color:
        #ffd400;

    font-size:
        30px;

    letter-spacing:
        7px;

    text-shadow:
        0 0 12px
        rgba(255, 212, 0, 0.65);
}


.upcoming-small {
    margin:
        0 0 5px;

    color:
        #ffd400;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.upcoming-emission-content h3 {
    margin:
        0 0 12px;

    font-family:
        "Staatliches",
        Impact,
        sans-serif;

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

    line-height:
        0.95;

    letter-spacing:
        1px;

    color:
        #ffffff;

    text-shadow:
        3px 3px 0
        rgba(150, 0, 20, 0.70);
}


.upcoming-text {
    max-width:
        330px;

    margin:
        0 auto 15px;

    color:
        #f4eafa;

    font-size:
        13px;

    line-height:
        1.45;
}


.upcoming-return {
    display:
        inline-block;

    padding:
        7px 14px;

    border-radius:
        20px;

    background:
        #ffd400;

    color:
        #491119;

    font-size:
        14px;

    font-weight:
        900;

    transform:
        rotate(-2deg);

    box-shadow:
        3px 3px 0
        #ff6a00;
}


/* =========================================================
   4 CHANSONS RÉCENTES
   ========================================================= */

.recent-songs {
    width: 94%;
    max-width: 1540px;

    margin:
        27px auto
        60px;
}


.recent-songs > h2 {
    display: inline-block;

    margin:
        0 0 12px;

    padding:
        6px 16px;

    border-radius:
        25px;

    background:
        linear-gradient(
            90deg,
            #ed2734,
            #ff7100
        );

    color:
        #ffffff;

    font-family:
        "Staatliches",
        Impact,
        sans-serif;

    font-size:
        23px;

    letter-spacing:
        0.8px;

    box-shadow:
        4px 4px 0
        #ffd400;
}


.recent-grid {
    display: grid;

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

    gap:
        16px;
}


/* =========================================================
   PETITES CARTES
   ========================================================= */

.song-card {
    overflow: hidden;

    display: block;

    border:
        3px solid
        rgba(255, 255, 255, 0.92);

    border-radius:
        11px;

    background:
        rgba(5, 5, 15, 0.95);

    color:
        #ffffff;

    text-decoration:
        none;

    box-shadow:
        0 0 0 2px
        rgba(255, 115, 0, 0.48),

        0 8px 17px
        rgba(0, 0, 0, 0.38);

    transition:
        0.2s;
}


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

    border-color:
        #ffd400;
}


.song-card img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


.song-card-info {
    padding:
        9px 11px
        11px;

    background:
        rgba(5, 5, 15, 0.96);
}


.song-card-info h3 {
    margin:
        0 0 5px;

    font-family:
        "Staatliches",
        Impact,
        sans-serif;

    color:
        #ffffff;

    font-size:
        19px;

    line-height:
        1.1;
}


.song-card-info p {
    margin: 0;

    color:
        #cccccc;

    font-size:
        11px;
}


/* =========================================================
   PAGE CHANSONS ANCIENNE / SÉCURITÉ
   ========================================================= */

.catalogue-page {
    width: 92%;
    max-width: 1200px;

    margin:
        0 auto;

    padding:
        42px 0 70px;
}


.catalogue-page > h1 {
    display: inline-block;

    margin:
        0 0 10px;

    padding:
        8px 18px;

    border-radius:
        8px;

    background:
        linear-gradient(
            90deg,
            #ed2734,
            #ff7100
        );

    color:
        #ffffff;

    font-family:
        "Staatliches",
        Impact,
        sans-serif;

    font-size:
        42px;

    letter-spacing:
        1px;

    box-shadow:
        5px 5px 0
        #ffd400;
}


.catalogue-page > p {
    display: inline-block;

    padding:
        6px 10px;

    border-radius:
        6px;

    background:
        rgba(5, 5, 15, 0.78);

    color:
        #ffffff;
}


.catalogue-grid {
    display: grid;

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

    gap:
        20px;

    margin-top:
        30px;
}


.catalogue-card {
    overflow: hidden;

    border:
        3px solid
        rgba(255, 255, 255, 0.90);

    border-radius:
        11px;

    background:
        rgba(5, 5, 15, 0.95);

    color:
        #ffffff;

    box-shadow:
        0 0 0 2px
        rgba(255, 115, 0, 0.40),

        0 8px 18px
        rgba(0, 0, 0, 0.35);

    transition:
        0.2s;
}


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

    border-color:
        #ffd400;
}


.catalogue-card img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


.catalogue-card-info {
    padding:
        14px;

    background:
        rgba(5, 5, 15, 0.96);
}


.catalogue-card-info h2,
.catalogue-card-info h3 {

    margin:
        6px 0 10px;

    color:
        #ffffff;

    font-family:
        "Staatliches",
        Impact,
        sans-serif;
}


.catalogue-card-info p {
    color:
        #cccccc;
}


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

.site-footer {
    margin-top: auto;

    padding:
        28px 20px;

    text-align:
        center;

    color:
        #cccccc;

    background:
        rgba(5, 5, 15, 0.93);

    border-top:
        2px solid
        #ff2638;

    font-size:
        13px;
}


/* =========================================================
   ÉCRANS MOYENS
   ========================================================= */

@media (max-width: 1300px) {

    .home-showcase {
        grid-template-columns:
            150px
            minmax(700px, 1fr)
            150px;

        gap:
            14px;
    }


    .side-item {
        font-size:
            25px;
    }

}


/* =========================================================
   TABLETTES
   ========================================================= */

@media (max-width: 1050px) {

    body {
        background-attachment:
            scroll;
    }


    .home-side {
        display:
            none;
    }


    .home-showcase {
        width:
            92%;

        grid-template-columns:
            1fr;
    }


    .home-new-content {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .recent-songs {
        width:
            92%;
    }


    .recent-grid,
    .catalogue-grid {

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

}


/* =========================================================
   PETITES TABLETTES
   ========================================================= */

@media (max-width: 760px) {

    .home-new-content {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   MOBILES
   ========================================================= */

@media (max-width: 650px) {

    .site-header {
        flex-direction:
            column;

        justify-content:
            center;

        gap:
            7px;

        padding:
            9px 15px;
    }


    .logo {
        font-size:
            22px;
    }


    .menu {
        gap:
            17px;
    }


    .menu a {
        font-size:
            15px;
    }


    .home-hero {
        min-height:
            115px;

        padding:
            14px 12px;
    }


    .home-hero h1 {
        font-size:
            42px;
    }


    .home-hero p {
        font-size:
            14px;
    }


    .home-showcase {
        margin-top:
            8px;
    }


    .home-feature > h2 {
        font-size:
            22px;
    }


    .home-feature-info h3 {
        font-size:
            25px;
    }


    .recent-songs {
        margin-top:
            24px;
    }


    .recent-songs > h2 {
        font-size:
            21px;
    }


    .recent-grid,
    .catalogue-grid {

        grid-template-columns:
            1fr;
    }


    .catalogue-page {
        width:
            90%;

        padding-top:
            30px;
    }


    .catalogue-page > h1 {
        font-size:
            34px;
    }

}