body {
        background-color: #1e1e2f;
        color: whitesmoke;
        /* background-image: url('images/background2.png');
        background-size: auto; */
    }

    header {
        background-image: url('images/header4.png'); 
        background-size:cover; /* Pour que l'image remplisse tout le header */
        background-color: #1e1e2f;
        background-position: center; /* Pour la centrer */
        background-repeat: no-repeat; /* Pour éviter qu'elle se répète */
        height: 320px; /* la hauteur du header */
        color: white; /* Pour que le texte reste lisible si besoin */
    }
    
    /* BACKGROUND PAGE MUSIQUE */
    
    .musique-section {
        background-image: url('images/Musique.png'); 
        border: 1px solid #444;
        background-position: bottom;
    }

    /* STYLE POUR LES COOCKIES */
    /* Modale */
    .cookie-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        font-family: 'Press Start 2P', cursive;
    }

        /* Boîte pixel */
    .pixel-border {
        background-color: #f2eecb;
        border: 8px solid #000;
        padding: 30px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 0 0 4px #fff, 0 0 0 8px #000;
        text-align: center;
    }

    /* Texte pixel */
    .cookie-text {
        font-size: 12px;
        color: #111;
        margin-bottom: 20px;
    }

    /* Boutons */
    .pixel-button {
        font-family: 'Press Start 2P', cursive;
        font-size: 10px;
        padding: 10px 20px;
        border: 3px solid #000;
        background-color: #ddd;
        cursor: pointer;
        margin: 5px;
        transition: all 0.1s ease-in-out;
    }

        
    .pixel-button.green {
        background-color: #88c070;
    }

    .pixel-button.red {
        background-color: #e07b7b;
    }

    .pixel-button:hover {
        transform: scale(1.05);
    }

    /* Lien */
    .cookie-link {
        display: inline-block;
        margin-top: 15px;
        font-size: 10px;
        color: #000;
        text-decoration: underline;
    }
    


    .hero {
        display: flex;
        background-image: url('images/banniere1.jpg'); /* Mets bien le bon chemin vers ton image */
        background-color: #08080f;
        color: #fff;
        height: 450px;
        background-size: cover;
        background-position: center; /* Pour la centrer */
        background-repeat: no-repeat; /* Pour éviter qu'elle se répète */
        padding: 80px 20px;
        text-align: center;
        flex-direction: column;
        justify-content: flex-start;
    }

    .hero .btn {
        align-self: center;
        width: auto;
        padding: 12px 24px;
        font-size: 1rem;
        background-color: #ff3366;
        color: #fff;
        box-shadow: 0 0 0 4px #9D2933, 8px 8px 0 0 #000; /* Effet pixel ombre */
        text-transform: uppercase;
        transition: transform 0.2s ease;
        cursor: pointer;
        margin-top: 40px;
    }
    
    .hero .btn:hover {
        transform: translate(-2px, -2px);
        box-shadow: 0 0 0 4px #9D2933, 10px 10px 0 0 #000;
        background-color: #c33742;
    }
    
    
    .hero h2 {
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 80px;  
    }

    .titre {
        color: #fff;
        font-family: 'Silkscreen', sans-serif;
    }

    h3 {
        color: #fff;
    }
        
    .card img {
        max-height: 180px;
        object-fit: cover;
    }
    
    h1{
        font-family: 'Silkscreen', sans-serif;
    }
    

    /* Couleurs personnalisées */
    .bg-custom {
        background-color: #2C3E50; /* Bleu marine élégant */
    }

    /* Nav */
    .navbar .nav-link {
        position: relative;
        color: #1e1e2f;
        transition: all 0.3s ease;
        font-weight: 600;
        padding: 8px 15px;
    }
    
    .navbar .nav-link::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0%;
        height: 2px;
        background: #ff3366; /* ton rouge foncé */
        transition: width 0.3s ease-in-out;
    }
    
    .navbar .nav-link:hover::before {
        width: 100%;
    }
    
    .navbar .nav-link:hover {
        color: #ff3366;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(157, 41, 51, 0.3);
    }
    

    .navbar {
        font-family: 'Orbitron', sans-serif;
        background-color: #fff2df;
    }

    .nav-link {
        color: #1e1e2f;
    }

    /* Style pour boutons tags et genres sur page d'accueil */

    /* Boutons des genres et tag */
    .style {
        border : solid 4px #fff2df;
        background-image: url('images/background4.png'); 
        background-position: bottom;
        background-size: cover; /* pour occuper tout l'espace */
        background-position: center;
        padding: 60px 30px; /* augmente l'espace intérieur */
        border-radius: 20px; /* optionnel pour arrondir les coins */
        margin: 50px auto; /* espace autour + centrage */
        width: 95%; /* ou max-width selon ton besoin */
        max-width: 1300px; /* évite que ça déborde trop en large écran */
    }


    .section-card {
        background-color: rgba(255, 242, 223, 0.5); /* Couleur avec 50% d’opacité */
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        transition: box-shadow 0.3s ease;
    }

    .section-card:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .section-title {
        font-size: 1.4rem;
        margin-bottom: 15px;
        font-weight: 600;
        color: #333;
    }

    .btn-genre,
    .btn-tag {
        font-family: 'Verdana', sans-serif; /* ou une police pixel si tu veux */
        text-transform: uppercase;
        background-color: #3b4c3e; /* vert foncé nature */
        color: #fff2df; /* beige pâle */
        border: 2px solid #2a342a;
        padding: 12px 20px;
        font-size: 0.95rem;
        cursor: pointer;
        box-shadow: 4px 4px 0 #1e1e2f;
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }

    .btn-genre:hover,
    .btn-tag:hover {
        transform: translateY(-2px);
        box-shadow: 6px 6px 0 #000000;
        background-color: #4f6b50; /* variante plus claire au survol */
    }

    .btn-tag:hover {
        background-color:  #4f6b50;
        color: white;
    }
    
     /* Backgroung col */
    
    .kraken {
        background: url('images/BGKraken.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }   
    
    .kraken2 {
        background: url('images/BG2Kraken.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }  
    
        /* Background musique */
    .musik {
        background: url('images/BGmusique.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }
    .musik2 {
        background: url('images/BGmusique2.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }
    .musik3 {
        background: url('images/BGmusique3.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }

    /* Background article */

   /* Section avec fond */
    .last {
        background: url('images/Background6.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }

    .last1 {
        background: url('images/Background12.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }

    .last2 {
        background: url('images/Background8.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }

    .last3 {
        background: url('images/Background9.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }

    .last4 {
        background: url('images/Background7.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }

    .last5 {
        background: url('images/Background10.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }

    .last6 {
        background: url('images/Background11.png') center center / cover no-repeat;
        padding: 60px 0;
        border-radius: 16px;
        position: relative;
    }

    /* Effet de transparence douce sur les cartes */
    .article-card {
        background: rgba(248, 244, 244, 0.85);
        backdrop-filter: blur(4px);
        border: none;
        border-radius: 12px;
        transition: transform 0.2s ease, box-shadow 0.3s ease;
    }

    /* Hover sympa */
    .article-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    /* Badge */
    .badge {
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        background: #f0f0f0;
        color: #333;
    }

    /* Bouton stylisé */
    .article-card .btn {
        font-weight: 500;
        border-radius: 20px;
    }

    /* Responsive : centrage */
    @media (max-width: 767px) {
    .last h2 {
        font-size: 1.5rem;
    }
    }




    /* Style pour la page administrateur index */
    
    .contrib-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
        gap: 1rem;
    }

    .contrib-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        padding: 55px;
        background: linear-gradient(135deg, #7d7fa3, #1a1c2b);
        color: #ffffff;
        border-radius: 20px;
        text-decoration: none;
        transition: transform 0.2s ease, background 0.3s ease;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        min-height: 160px;
    }

    .contrib-btn:hover {
        transform: translateY(-5px);
        background: linear-gradient(135deg, #3a3d5a, #25273c);
        text-decoration: none;
        color: #ffffff;
    }

    /* Style pour liste des choix d'articles à publier */

    .article {
        border: solid 4px #fff2df;
        background-image: url('images/background5.png');
        background-size: cover; /* pour occuper tout l'espace */
        background-position: center;
        padding: 60px 30px; /* augmente l'espace intérieur */
        border-radius: 20px; /* optionnel pour arrondir les coins */
        margin: 50px auto; /* espace autour + centrage */
        width: 95%; /* ou max-width selon ton besoin */
        max-width: 1300px; /* évite que ça déborde trop en large écran */
    }
    

    .custom-card {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        padding: 25px;
        background: linear-gradient(135deg, #505272, #1a1c2b);
        color: #ffffff;
        border-radius: 20px;
        text-decoration: none;
        transition: transform 0.2s ease, background 0.3s ease;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        min-height: 360px;
    }

    .custom-card:hover {
        transform: translateY(-5px);
        background: linear-gradient(135deg, #3a3d5a, #25273c);
        text-decoration: none;
        color: #ffffff;
    }

    .icon-card {
        font-size: 2.5rem;
        margin-bottom: 10px;
        color: #00ffc8;
    }

    /* Style show jeu */
    /* Texte général */
    .game-info p {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 1rem;
        color: #bbb; /* gris clair pour les réponses */
    }
    .game-info strong {
        font-weight: 700;
        color: #f0f0f0; /* clair et visible sur fond noir */
        display: block;
        margin-bottom: 0.3rem;
    }
    /* Encadré pour Description et Soundtrack */
    .highlight-box {
        border: 1.5px solid #555;
        padding: 1rem 1.25rem;
        border-radius: 8px;
        background-color: #111; /* un peu plus clair que le noir total */
        margin-bottom: 1.5rem;
        color: #ddd;
    }
    /* Badges tags & genres */
    .badge {
        color: #eee !important;
        background-color: #444 !important;
        margin-right: 0.4rem;
        margin-bottom: 0.4rem;
        display: inline-block;
        padding: 0.25em 0.6em;
        font-size: 0.85rem;
        text-decoration: none;
        border-radius: 0.25rem;
        transition: background-color 0.3s ease;
    }
    .badge:hover {
        background-color: #666 !important;
        color: #fff !important;
        text-decoration: none;
    }
    /* Bouton écouter musique */
    .btn-success {
        font-size: 0.85rem;
        padding: 0.25rem 0.6rem;
    }

    /* MUSIQUE */

    .audio-fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #222; /* Optionnel : fond sombre */
        padding: 5px 0;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
        z-index: 9999;
    }

    .audio-credit {
        position: fixed;
        bottom: 40px; /* juste au-dessus du lecteur qui fait 40px de hauteur */
        left: 0;
        width: 100%;
        background-color: #222;
        color: #eee;
        font-size: 0.9rem;
        text-align: center;
        padding: 3px 0;
        z-index: 9998;
        font-family: Arial, sans-serif;
        user-select: none; /* optionnel, empêche la sélection du texte */
    }

    .musique-link {
        color: #ffc107; /* Jaune doré pour bien contraster */
        text-decoration: none;
        transition: color 0.3s;
    }

    .musique-link:hover {
        color: #fff;
        text-decoration: underline;
    }

    .musique-desc {
        color: #ddd;
        margin-left: 1rem;
        font-style: italic;
    }

    .musique-menu {
        background-color: #222; /* Fond sombre pour trancher */
        border-radius: 10px;
        padding: 1.5rem;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }


    /* Titre et logo */
    .navbar-brand img {
        max-height: 95px;
        width: auto;
        height: fit-content;
    }

    .search-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .search-form input,
    .search-form select {
        padding: 10px;
        font-size: 1em;
        border: none;
        border-radius: 4px;
    }
    
    .search-form button {
        padding: 10px 20px;
        background-color: #ff3366;
        border: none;
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .random .btn {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 20px;
        background-color: #ff3366;
        color: white;
        text-decoration: none;
        border-radius: 4px;
    }

    /* .navbar-toggler {
        display: none;
    } */

    /* FOOTER */
    .footer-centered {
        text-align: center;
    }
    
    /* Style pour "apropos" */
    .about-container {
        max-width: 750px;
        background: #fff;
        padding: 30px 40px;
        margin: 3rem auto;
        box-shadow: 0 6px 18px rgba(0,0,0,0.1);
        border-radius: 10px;
        border: 2px solid #ff3366;
        color: #333;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f9f9fc;
    }

    .separator {
        border: none;
        height: 3px;
        background: linear-gradient(90deg, #ff3366, #ff3366);
        border-radius: 5px;
        margin-bottom: 2rem;
    }

    .title {
        color: #ff3366;
        font-weight: 700;
        font-size: 2.8rem;
        margin-bottom: 1rem;
        text-transform: uppercase;
        letter-spacing: 3px;
    }

    .subtitle {
        color: #ff3366;
        font-weight: 600;
        margin-top: 3rem;
        margin-bottom: 1rem;
        border-left: 5px solid #a78bfa;
        padding-left: 12px;
    }

    .paragraph {
        line-height: 1.7;
        font-size: 1.1rem;
        margin-bottom: 1.2rem;
    }

    .intro {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
    }

    .link-contact {
        color: #ff3366;
        text-decoration: none;
        font-weight: 600;
    }

    .link-contact:hover {
        text-decoration: underline;
        color: #5a2dbc;
    }

    .footer-text {
        color: #6b7280;
        margin-top: 3rem;
    }

    .btn-return {
        color: #ff3366;
        border-color: #ff3366;
        padding: 10px 24px;
        font-weight: 600;
        border-radius: 6px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .btn-return:hover {
        background-color: #4c51bf;
        color: #fff;
        border-color: #4c51bf;
    }

    /* CONTACT */

    .contact-page h1 {
        font-family: 'Press Start 2P', cursive;
        font-size: 1.8rem;
        color: #ff3366;
        text-shadow: 1px 1px #ccc;
    }

    .paragraph {
        font-size: 1.1rem;
        margin-bottom: 1.2rem;
        line-height: 1.7;
        text-align: center;
    }

    .email-contact a {
        font-size: 1.2rem;
        color: #ff3366;
        text-decoration: none;
        border-bottom: 2px solid #2c3e50;
    }

    .email-contact a:hover {
        color: #d35400;
        border-color: #d35400;
    }

    .location {
        font-style: italic;
        color: #555;
    }

    /* BARRE AUDIO */

    .audio-highlight {
        border: 3px solid #ff5555;
        padding: 1rem;
        border-radius: 15px;
        background: #fff0f0;
        box-shadow: 0 4px 15px rgba(255, 85, 85, 0.3);
        max-width: 500px;
        margin: 1rem auto;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .audio-highlight:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 20px rgba(255, 85, 85, 0.5);
    }

    .audio-info {
        font-size: 0.9rem;
        color: #a33;
        font-style: italic;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .audio-quote {
        text-align: center;
        margin-top: 1rem;
        font-style: italic;
        color: #aa9696;
    }

    @media (max-width: 768px) {

    body, html {
        overflow-x: hidden; /* Empêche le défilement horizontal */
        margin: 0;
        padding: 0;
    }

    header {
        background-image: url('images/header4.png'); 
        background-size: contain;
        background-color: #fffbf8;
    }

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

    /* Petits écrans (mobiles) */
    @media (max-width: 768px) {
        .hero {
            height: auto;
            padding: 40px 15px;
            background-position: center;
            background-size: cover;
        }

        .hero h2 {
            font-size: 1.8rem;
            margin-bottom: 30px;
        }

        .hero .btn {
            width: 100%;
            margin-top: 20px;
            position: relative;
        }

        .titre {
            font-size: 1rem;
            padding: 0 10px;
        }

        .audio-quote {
            font-size: 0.95rem;
            padding: 0 10px;
        }

        .audio-info {
            font-size: 0.85rem;
        }

        .audio-highlight audio {
            width: 100%;
            max-width: 100%;
        }

        .card-img-top {
            height: auto;
            max-height: 160px;
            object-fit: cover;
        }

        .card-title {
            font-size: 1rem;
        }

        .card-text {
            font-size: 0.9rem;
        }

        .contrib-grid {
            grid-template-columns: 1fr !important;
        }

        header {
            height: 200px;
            background-size: cover;
        }
    }

    /* Tablettes */
    @media (min-width: 769px) and (max-width: 1024px) {
        .hero {
            height: auto;
            padding: 60px 30px;
        }

        .hero h2 {
            font-size: 2.2rem;
        }

        .hero .btn {
            padding: 10px 20px;
            font-size: 1rem;
        }

        .card-img-top {
            max-height: 180px;
        }

        .audio-highlight audio {
            width: 100%;
        }
    }
}