/* site.css Version 3 - Propre et Compact */

:root { 
    --primary: #6c5ce7; 
    --dark: #2d3436; 
    --light: #f4f6f8; 
    --white: #ffffff; 
}

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

body { 
    font-family: 'Outfit', -apple-system, sans-serif; 
    background: #f0f3f8; 
    color: var(--dark); 
    line-height: 1.6; 
    overflow-x: hidden; 
    width: 100%;
}

/* --- NAVBAR (Barre de navigation) --- */
.navbar { 
    background: rgba(255, 255, 255, 0.98); 
    -webkit-backdrop-filter: blur(10px); 
    backdrop-filter: blur(10px); 
    padding: 12px 0; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    border-bottom: 1px solid rgba(0,0,0,0.05); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.nav-container { 
    max-width: 1100px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0 20px; 
}

/* 🟢 LOGO FINAL (Taille fixée pour le look pro) */
/* Dans site.css (vers la ligne 40) */
.logo-img {
    height: 60px; /* Taille pro sur ordinateur */
    width: auto;     
    display: block;
    filter: none; 
    /* 🛑 S'assurer qu'il n'y a AUCUNE transition qui cause le mouvement */
    transition: none !important; 
    transform: none !important; /* Pas de mouvement au survol */
}

/* --- SECTIONS PRINCIPALES --- */
.hero-section { 
    text-align: center; 
    padding: 50px 20px; 
    background: radial-gradient(circle at center, #e0e7ff 0%, #f0f3f8 70%); 
}

.hero-content h1 { 
    font-size: 2.5rem; 
    font-weight: 800; 
    margin-bottom: 10px; 
    color: var(--primary); 
    line-height: 1.2; 
}

.hero-content p { 
    font-size: 1.1rem; 
    color: #636e72; 
    max-width: 600px; 
    margin: 0 auto; 
}

.main-container { 
    max-width: 1000px; 
    margin: 0 auto 50px; 
    padding: 0 15px; 
}

.glass-card { 
    background: white; 
    border-radius: 25px; 
    padding: 30px; 
    box-shadow: 0 20px 60px rgba(108, 92, 231, 0.1); 
    min-height: 400px; 
}

/* ONGLETS */
.tabs-container { 
    display: flex; 
    background: #f1f2f6; 
    padding: 5px; 
    border-radius: 12px; 
    margin-bottom: 30px; 
}

.tab-btn { 
    flex: 1; 
    padding: 12px; 
    border: none; 
    background: transparent; 
    font-weight: 700; 
    color: #b2bec3; 
    cursor: pointer; 
    border-radius: 10px; 
    transition: 0.3s; 
    font-size: 0.95rem; 
}

.tab-btn.active { 
    background: white; 
    color: var(--primary); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}

/* FORMULAIRES */
.form-group { 
    margin-bottom: 20px; 
    animation: slideUp 0.4s ease; 
}

.form-group label { 
    display: block; 
    font-weight: 700; 
    margin-bottom: 8px; 
    color: var(--dark); 
    font-size: 1rem; 
}

select, .search-input { 
    width: 100%; 
    padding: 14px; 
    border: 2px solid #eee; 
    border-radius: 10px; 
    font-size: 1rem; 
    outline: none; 
    background: white; 
    -webkit-appearance: none; 
}

select:focus, .search-input:focus { 
    border-color: var(--primary); 
}

.btn-submit, .btn-primary { 
    width: 100%; 
    padding: 16px; 
    border: none; 
    border-radius: 12px; 
    font-weight: 800; 
    font-size: 1rem; 
    background: var(--primary); 
    color: white; 
    cursor: pointer; 
    margin-top: 15px; 
}

.btn-back { 
    background: transparent; 
    border: none; 
    color: #b2bec3; 
    font-weight: 600; 
    cursor: pointer; 
    margin-bottom: 5px; 
    padding: 5px 0; 
}

/* AUTOCOMPLETE & LOADER */
.autocomplete-wrapper { 
    position: relative; 
}

.suggestions-box { 
    position: absolute; 
    width: 100%; 
    background: white; 
    border: 1px solid #eee; 
    border-radius: 10px; 
    margin-top: 5px; 
    max-height: 250px; 
    overflow-y: auto; 
    z-index: 50; 
}

.suggestion-item { 
    display: flex; 
    align-items: center; 
    padding: 10px; 
    cursor: pointer; 
    border-bottom: 1px solid #f9f9f9; 
}

.suggestion-thumb { 
    width: 40px; 
    height: 60px; 
    object-fit: cover; 
    border-radius: 4px; 
    margin-right: 10px; 
    flex-shrink: 0; 
}

#loader { 
    text-align: center; 
    padding: 40px; 
}

.spinner { 
    width: 40px; 
    height: 40px; 
    border: 4px solid #eee; 
    border-top: 4px solid var(--primary); 
    border-radius: 50%; 
    margin: 0 auto 15px; 
    animation: spin 1s linear infinite; 
}

/* --- AFFICHAGE DES RÉSULTATS (COMPACT) --- */
.results-header { 
    text-align: center; 
    margin-bottom: 20px; 
}

/* 4 colonnes sur ordinateur */
.results-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
}

.result-card { 
    background: white; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    transition: 0.2s; 
    border: 1px solid #f0f0f0; 
    display: flex; 
    flex-direction: column; 
}

.result-card:hover { 
    transform: translateY(-3px); /* Plus subtil */
}

.result-poster { 
    width: 100%; 
    aspect-ratio: 2/3; 
    object-fit: cover; 
    cursor: pointer; 
}

.result-info { 
    padding: 12px; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}

.result-title { 
    font-size: 1rem; 
    font-weight: 700; 
    margin-bottom: 5px; 
    line-height: 1.2; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
}

.result-desc { 
    font-size: 0.85rem; 
    color: #636e72; 
    margin-bottom: 10px; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
}

.btn-result { 
    width: 100%; 
    padding: 10px; 
    background: #eef2ff; 
    color: var(--primary); 
    text-align: center; 
    border-radius: 8px; 
    font-weight: 600; 
    font-size: 0.9rem;
    margin-top: auto; 
    border: none; 
    cursor: pointer;
}

/* --- MODALE --- */
.modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.8); 
    z-index: 2000; 
    display: none; 
    justify-content: center; 
    align-items: center; 
    padding: 20px; 
}

.modal-content { 
    background: white; 
    padding: 30px; 
    border-radius: 20px; 
    position: relative; 
    max-height: 90vh; 
    overflow-y: auto; 
    width: 100%; 
    max-width: 800px; 
}

.close-modal { 
    position: absolute; 
    top: 15px; 
    right: 20px; 
    font-size: 28px; 
    cursor: pointer; 
    z-index: 50; 
}

.movie-hero { 
    height: 250px; 
    position: relative; 
    border-radius: 12px; 
    overflow: hidden; 
    margin-bottom: 20px; 
}

.movie-backdrop { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

footer { 
    background-color: #333; 
    color: white; 
    text-align: center; 
    padding: 20px 0; 
    margin-top: 40px; 
}

.mood-intro { 
    text-align: center; 
    margin-bottom: 20px; 
}

.mood-intro h3 { 
    font-size: 1.4rem; 
    color: var(--primary); 
}

.hidden { 
    display: none !important; 
}

/* ANIMATIONS */
@keyframes slideUp { 
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

@keyframes spin { 
    to { 
        transform: rotate(360deg); 
    } 
}


/* --- VERSION MOBILE (Moins de 768px) --- */

@media (max-width: 768px) { 
    .navbar { 
        padding: 10px 0; 
    }
    
    /* 🟢 Logo ajusté pour mobile */
    .logo-img { 
        height: 45px; 
    }

    .main-container { 
        padding: 0 10px; 
    }

    .glass-card { 
        padding: 20px 10px; 
    }
    
    .hero-section { 
        padding: 30px 15px; 
    }
    
    .hero-content h1 { 
        font-size: 1.8rem; 
    }

    /* Grille compacte : 2 films côte à côte */
    .results-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; 
    }

    .result-info { 
        padding: 8px; 
    }

    .result-title { 
        font-size: 0.9rem; 
        margin-bottom: 8px; 
    }

    /* On cache la description sur mobile */
    .result-desc { 
        display: none; 
    }

    .btn-result { 
        padding: 8px; 
        font-size: 0.8rem; 
    }
    
    .modal-content { 
        padding: 15px; 
        border-radius: 15px; 
    }

    .movie-hero { 
        height: 180px; 
    }
}


/* ------------------------------------------------------------------- */
/* BANNIÈRE DE CONSENTEMENT (Positionnement et couleurs de base) */
/* ------------------------------------------------------------------- */
#consentBanner {
    position: fixed; /* Reste en bas de l'écran */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50; /* Couleur de fond sombre (Bleu/Gris) */
    color: #ecf0f1; /* Texte très clair */
    padding: 15px 20px;
    z-index: 10000; /* Assure qu'elle est au-dessus de tout */
    display: none; /* Masqué par défaut (sera affiché par JS si besoin) */
    align-items: center; 
    justify-content: space-between; 
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    font-family: sans-serif;
}

/* S'assurer que le JS peut afficher la bannière */
#consentBanner:not(.hidden) {
    display: flex;
}

#consentBanner .cookie-content {
    flex-grow: 1; /* Le texte prend plus de place */
    margin-right: 20px;
}

#consentBanner p {
    margin: 0;
    font-size: 14px;
}

/* ------------------------------------------------------------------- */
/* BOUTONS : Appliquer la stratégie de visibilité */
/* ------------------------------------------------------------------- */
#consentBanner .cookie-buttons {
    display: flex;
    align-items: center;
    gap: 15px; /* Espace entre les deux boutons */
}

/* Style général des boutons */
#consentBanner .cookie-buttons button {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

/* 1. Bouton "Accepter" (Gros et voyant) */
#acceptConsentBtn {
    /* Rendre le bouton plus gros */
    font-size: 16px;
    padding: 12px 25px; 
    
    /* Couleur très visible */
    background-color: #2ecc71; /* Vert pomme brillant */
    color: white;
    
    /* Le rendre plus 'bouton' */
    box-shadow: 0 3px #27ae60; 
}

#acceptConsentBtn:hover {
    background-color: #27ae60;
}


/* 2. Bouton "Refuser" */
.barely-visible-btn {
    /* Style de lien/texte simple */
    background: none;
    padding: 5px 10px; /* Petit padding */
    font-size: 12px; /* Petite taille de police */
    
    /* Couleur discrète */
    color: #bdc3c7; /* Gris très clair */
    font-weight: normal;
    text-decoration: underline; /* Pour simuler un lien */
}

.barely-visible-btn:hover {
    color: #fff; /* Légère mise en évidence au survol */
}