:root {

    --primary: #ff4d6d; /* Rose Corail */

    --accent: #7209b7;  /* Violet Royal */

    --bg: #0b0b0e;

    --card-bg: rgba(255, 255, 255, 0.05);

    --text: #ffffff;

}



* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

body { background: var(--bg); color: var(--text); line-height: 1.6; font-family: 'Plus Jakarta Sans', sans-serif;}



/* Navbar */

.navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 8%;

    position: fixed;

    width: 100%;

    z-index: 1000;

    transition: 0.4s;

    font-family: 'Plus Jakarta Sans', sans-serif;

}



.logo {

    font-size: 2.5rem; /* Taille du logo */

    font-weight: 800; /* Très gras pour l'impact */

    color: white; /* Couleur principale */

    text-transform: none; /* Garde la casse d'origine */

    letter-spacing: -1.5px; /* Resserre les lettres pour un look moderne */

    user-select: none; /* Empêche la sélection du texte */

    cursor: pointer; /* Curseur main au survol */

    transition: 0.3s; /* Transition fluide */

    font-family: 'Plus Jakarta Sans', sans-serif;

    overflow-x: hidden;

    margin: 0;

}



/* Le point final néon */

.logo span {

    color: var(--primary); /* Utilise ta couleur rose/rouge */

    text-shadow: 0 0 10px var(--primary-glow); /* Ajoute la lueur néon */

}



/* Effet au survol (optionnel) */

.logo:hover {

    opacity: 0.8;

}



.nav-right { display: flex; align-items: center; gap: 20px; }

.nav-link { text-decoration: none; color: white; font-weight: 500; }



/* Boutons */

button { cursor: pointer; border-radius: 12px; font-weight: 600; transition: 0.3s; }



.btn-primary {

    background: linear-gradient(45deg, var(--primary), var(--accent));

    color: white; border: none; padding: 12px 24px;

}



.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 77, 109, 0.4); }



.btn-login { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: white; padding: 10px 20px; }



.btn-outline { background: rgba(255,255,255,0.1); border: 1px solid white; color: white; padding: 12px 24px; }



/* Hero Section */

.hero {

    height: 100vh;

    display: flex; align-items: center;

    padding: 0 8%;

    background: url('https://image.tmdb.org/t/p/original/m9Y9mS7f97v7S0Xj7o4D2vP9k6F.jpg') center/cover;

    position: relative;

}



.hero-overlay {

    position: absolute; top: 0; left: 0; width: 100%; height: 100%;

    background: linear-gradient(to right, var(--bg) 20%, transparent 80%);

}



.hero-content {

    position: relative;

    z-index: 2;

    /* On utilise une largeur relative qui s'adapte */

    width: 60%;

    padding-left: 8%;

    /* On s'assure que le contenu n'est pas limité par une largeur fixe trop petite */

    max-width: none;

}

.rating-badge { color: #ffd700; margin-bottom: 15px; font-weight: 600; }

.hero h1 {

    font-size: 5rem; /* Un peu plus gros pour donner du caractère */

    line-height: 1.1;

    margin-bottom: 30px;

    white-space: nowrap; /* Force le titre à rester sur une ligne si possible */

}

.hero h1 span {

    display: block;

    color: var(--primary);

    margin-top: 10px;

}

.hero-btns {

    display: flex;

    gap: 20px; /* Espace horizontal entre les deux boutons */

}



.btn-primary, .btn-outline {

    padding: 15px 30px; /* Un peu plus de "confort" à l'intérieur */

}



.hero {

    position: relative;

    height: 100vh;

    display: flex;

    align-items: center;

    padding: 0 8%;

    background: url('https://image.tmdb.org/t/p/original/m9Y9mS7f97v7S0Xj7o4D2vP9k6F.jpg') center/cover;

    overflow: hidden; /* Important pour que le perso qui dépasse soit coupé proprement */

}



/* Positionnement du perso */

.hero-character {

    position: absolute;

    right: 5%;

    bottom: 0;

    height: 85vh;

    z-index: 1;

    /* On ajoute un filtre de lueur ici */

    filter: drop-shadow(0 0 30px rgba(255, 77, 109, 0.4));

}



/* Lueur douce derrière le titre pour plus d'impact */

.hero-content h1 {

    text-shadow: 0 0 20px rgba(255, 77, 109, 0.3);

}



.hero-character img {

    height: 100%;

    width: auto;

    object-fit: contain;

   

    /* Cela crée une transition douce vers la transparence en bas */

    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);

    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);

}



/* S'assure que le contenu texte est au-dessus */

.hero-content {

    position: relative;

    z-index: 2;

    /* On utilise une largeur relative qui s'adapte */

    width: 60%;

    padding-left: 8%;

    /* On s'assure que le contenu n'est pas limité par une largeur fixe trop petite */

    max-width: none;

}



.hero p {

    font-size: 1.2rem;

    margin-bottom: 40px; /* On crée un vrai vide avant les boutons */

    max-width: 500px;

    opacity: 0.9;

}



/* Style de la Modale */

.modal-overlay {

    position: fixed;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: rgba(0, 0, 0, 0.85);

    backdrop-filter: blur(8px);

    display: none; /* Caché par défaut */

    justify-content: center;

    align-items: center;

    z-index: 2000;

    transition: 0.3s;

}



.modal-content {

    background: #111116;

    padding: 40px;

    border-radius: 24px;

    width: 90%;

    max-width: 400px;

    position: relative;

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

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

    text-align: center;

}



.close-modal {

    position: absolute;

    top: 20px; right: 20px;

    background: none; border: none;

    color: white; font-size: 2rem;

    cursor: pointer; opacity: 0.5;

}



.close-modal:hover { opacity: 1; }



.auth-header h2 { font-size: 1.8rem; margin: 20px 0 10px; }

.auth-header p { font-size: 0.9rem; opacity: 0.6; margin-bottom: 30px; }



.input-group { margin-bottom: 15px; }

.input-group input {

    width: 100%;

    padding: 14px;

    background: #1a1a20;

    border: 1px solid #333;

    border-radius: 12px;

    color: white;

    outline: none;

    box-sizing: border-box; /* Important pour la largeur */

}



.full-width { width: 100%; margin-top: 10px; }

.auth-footer { margin-top: 25px; font-size: 0.85rem; opacity: 0.7; }

.auth-footer a { color: var(--primary); text-decoration: none; font-weight: 600; }



/* Reviews Section */

.reviews-section { padding: 80px 8%; }

.section-header { margin-bottom: 40px; }

.section-header h2 { font-size: 2rem; }



.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }



.review-card {

    background: var(--card-bg);

    padding: 25px;

    border-radius: 20px;

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

    backdrop-filter: blur(10px);

}



.user-info { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }

.avatar { width: 45px; height: 45px; border-radius: 50%; background: var(--primary); }

.avatar.blue { background: #4cc9f0; }

.user-info h4 { font-size: 1rem; }

.user-info span { font-size: 0.8rem; opacity: 0.7; }



/* CTA Section */

.cta-section { padding: 80px 8%; text-align: center; }

.cta-box {

    background: linear-gradient(45deg, #1a1a2e, #16213e);

    padding: 60px; border-radius: 30px; border: 1px solid var(--accent);

}

.btn-primary.large { margin-top: 30px; padding: 18px 40px; font-size: 1.1rem; }



/* --- ANIMATION DE FOND (Ajoute ça au début du body) --- */

body::before {

    content: "";

    position: fixed;

    top: 0; left: 0; width: 100%; height: 100%;

    background:

        radial-gradient(circle at 10% 20%, rgba(255, 77, 109, 0.05) 0%, transparent 40%),

        radial-gradient(circle at 90% 80%, rgba(114, 9, 183, 0.1) 0%, transparent 40%);

    z-index: -1;

    animation: pulseBg 10s infinite alternate;

}



@keyframes pulseBg {

    0% { opacity: 0.5; transform: scale(1); }

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

}



/* --- SECTION FEATURES --- */

.features-section {

    padding: 60px 8%;

    margin-top: -50px; /* Chevauche légèrement le hero pour le style */

    position: relative;

    z-index: 10;

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

}



.feature-item {

    background: rgba(26, 26, 31, 0.8);

    padding: 30px;

    border-radius: 24px;

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

    text-align: center;

    transition: 0.3s;

    backdrop-filter: blur(10px);

}



.feature-item:hover {

    transform: translateY(-10px);

    border-color: var(--primary);

    box-shadow: 0 10px 30px rgba(255, 77, 109, 0.1);

}



.icon-circle {

    font-size: 2rem;

    margin-bottom: 15px;

    display: inline-block;

    padding: 15px;

    background: rgba(255, 77, 109, 0.1);

    border-radius: 50%;

}



.feature-item h3 { margin-bottom: 10px; font-weight: 700; }

.feature-item p { font-size: 0.9rem; opacity: 0.7; }



/* --- AJUSTEMENT REVIEWS --- */

.review-card {

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

    transition: 0.3s;

}



.review-card:hover {

    border-color: var(--accent);

}





@media (max-width: 768px) {

    /* 1. Correction de la Navbar (éviter le débordement) */

    .navbar {

        padding: 15px 5%;

        width: 90%;

        box-sizing: border-box;

    }

    .nav-right .nav-link { display: none; } /* Cache le texte "Découvrir" */



    /* 2. Correction du HERO (Le gros bug de texte/perso) */

    .hero {

        display: flex;

        flex-direction: column; /* Empile verticalement */

        height: auto;

        padding: 100px 5% 40px 5%;

        text-align: center;

        overflow: hidden;

    }



    .hero-content {

        order: 1; /* Force le texte à être en premier */

        width: 100% !important;

        padding: 0;

        z-index: 5;

    }



    .hero-content h1 {

        font-size: 2.2rem; /* Réduit la taille pour que ça tienne sur 2 lignes */

        line-height: 1.1;

    }



    .hero-character {

        order: 2; /* Met l'image sous le texte */

        position: relative;

        width: 100%;

        margin-top: 20px;

        right: auto;

        left: auto;

    }



    .hero-character img {

        width: 70%; /* Réduit la taille du perso */

        max-width: 300px;

        height: auto;

        filter: drop-shadow(0 0 20px rgba(255, 77, 109, 0.3));

    }



    .hero-btns {

        justify-content: center;

        flex-direction: row; /* Boutons l'un à côté de l'autre */

        gap: 10px;

    }



    .btn-primary, .btn-outline {

        padding: 12px 20px;

        font-size: 0.9rem;

    }



    /* 3. Correction de la Section Features (3 icônes) */

    .features-grid {

        grid-template-columns: 1fr; /* Une seule colonne sur mobile */

        gap: 20px;

        padding: 40px 5%;

    }



    /* 4. Correction de la Grille de Dramas (Explorer) */

    .drama-grid {

        grid-template-columns: repeat(2, 1fr) !important; /* Force 2 colonnes */

        gap: 15px;

        padding: 20px 5%;

    }



    .card-img {

        height: 250px; /* Moins haut pour éviter de scroller à l'infini */

    }

}

/* --- COMPLÉMENT CONNEXION / INSCRIPTION (Ne modifie pas le reste) --- */

/* 1. Affichage du profil dans la Navbar */
.user-profile-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.08);
    padding: 6px 15px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.avatar-small {
    width: 30px;
    height: 30px;
    background: linear-gradient(45deg, var(--primary), var(--accent));
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
}

.welcome-txt { 
    font-size: 0.85rem; 
    font-weight: 500; 
    color: white;
}

.btn-logout {
    background: none;
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
    margin-left: 5px;
    display: flex;
    align-items: center;
}

.btn-logout:hover { opacity: 1; color: var(--primary); }

/* 2. Ajustements des formulaires dans la modale */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-form input {
    width: 100%;
    padding: 14px;
    background: #1a1a20;
    border: 1px solid #333;
    border-radius: 12px;
    color: white;
    outline: none;
    font-family: inherit;
    transition: 0.3s;
}

.auth-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(255, 77, 109, 0.2);
}

/* 3. Masquer/Afficher les sections (Login vs Signup) */
#login-section, #signup-section {
    width: 100%;
}

.auth-footer p {
    margin-top: 20px;
    font-size: 0.85rem;
    opacity: 0.8;
}

.auth-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.auth-footer a:hover {
    text-decoration: underline;
}