/* =========================================================
   POPCORN TIME — Design System "Glassmorphism"
   ========================================================= */

:root {
    /* Fond de base (derrière le verre) */
    --bg-color: #0b0b12;
    --bg-color-alt: #14121e;

    /* Surfaces "verre" translucides */
    --surface-color: rgba(255, 255, 255, 0.09);
    --surface-color-strong: rgba(255, 255, 255, 0.13);
    --surface-card: rgba(255, 255, 255, 0.11);
    --surface-hover: rgba(255, 255, 255, 0.16);

    --border-color: rgba(255, 255, 255, 0.16);
    --border-color-strong: rgba(255, 255, 255, 0.30);

    /* Accent cinéma : rouge -> magenta */
    --primary-color: #ef1348;
    --primary-color-2: #ff5f6d;
    --primary-gradient: linear-gradient(135deg, #ff2d55 0%, #ef1348 45%, #9b1150 100%);
    --primary-glow: rgba(239, 19, 72, 0.45);

    --accent-teal: #34e0c8;
    --accent-purple: #7b5cff;

    --text-color: #f5f6fb;
    --text-muted: #b7b9c9;

    --glass-blur: blur(22px);
    --glass-blur-soft: blur(14px);

    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 10px;

    --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-strong: 0 18px 55px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    --shadow-btn-glass: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

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

/* ==========================================
   TRANSITIONS DE PAGE (navigation native)
   ==========================================
   Active les "View Transitions" du navigateur entre deux documents (ex :
   watchlist.php -> details.php). Pris en charge nativement par les
   navigateurs Chromium/Edge récents ; ignoré silencieusement ailleurs (la
   navigation reste alors instantanée comme avant, aucune régression). */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.28s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root) {
    animation-name: pt-page-out;
}

::view-transition-new(root) {
    animation-name: pt-page-in;
}

@keyframes pt-page-out {
    to { opacity: 0; transform: scale(0.99); }
}

@keyframes pt-page-in {
    from { opacity: 0; transform: scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

html {
    background-color: var(--bg-color);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
    display: flex;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------
   Fond animé : dégradé profond + halos de couleur flous,
   fixes derrière tout le contenu pour faire "vivre" le verre.
   --------------------------------------------------------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 15% 20%, rgba(239, 19, 72, 0.35), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(123, 92, 255, 0.30), transparent 45%),
        radial-gradient(circle at 25% 90%, rgba(52, 224, 200, 0.18), transparent 40%),
        radial-gradient(circle at 90% 85%, rgba(255, 95, 109, 0.22), transparent 45%),
        linear-gradient(160deg, var(--bg-color) 0%, var(--bg-color-alt) 100%);
    background-repeat: no-repeat;
    animation: bgFloat 22s ease-in-out infinite alternate;
}

body::after {
    /* Léger bruit / vignette pour donner de la profondeur au verre */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 50% 0%, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}

@keyframes bgFloat {
    0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 4% 6%, -4% -4%, 3% -3%, -3% 4%, 0% 0%; }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

/* Layout Responsive Global */
.app-container {
    width: 100%;
    max-width: 1200px;
    min-width: 0; /* empêche un contenu enfant large (ex: scroll horizontal) de forcer body (flex) à s'élargir au-delà de l'écran */
    margin: 0 auto;
    background-color: transparent;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 96px; /* Espace mobile pour la nav flottante */
}

@media (min-width: 768px) {
    .app-container {
        padding-bottom: 0;
        padding-left: 250px; /* Espace pour la navigation PC latérale */
    }
}

/* ---------------------------------------------------------
   Utilitaire "verre" générique — carte translucide standard
   --------------------------------------------------------- */
.glass,
.auth-container,
.login-container,
.legal-container,
.feed-post,
.result-item,
.watch-card,
.settings-card,
.modal-content,
.top-slot,
.history-slot,
.modal-watchlist-item,
.profile-stats-bar,
.rating-box,
.season-item,
.episodes-container,
.search-result-item,
.empty-state,
.stat-item,
.tabs-container {
    background: var(--surface-color);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
}

.result-item:hover,
.watch-card:hover,
.top-slot:hover,
.history-slot:hover,
.modal-watchlist-item:hover,
.season-item:hover,
.search-result-item:hover {
    background: var(--surface-hover);
    border-color: var(--border-color-strong);
}

/* ---------------------------------------------------------
   Cartes "affiche" (watchlist, Top 5, historique, modale
   watchlist) : elles reposent souvent sur un fond très sombre
   et peu coloré, donc le simple flou en verre n'y suffit pas.
   On leur donne un fond plus soutenu + un vrai séparateur
   entre l'affiche et le bloc de texte pour éviter l'effet
   "texte qui flotte" sous le poster.
   --------------------------------------------------------- */
.watch-card,
.top-slot,
.history-slot,
.modal-watchlist-item {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.watch-card:hover,
.top-slot:hover,
.history-slot:hover,
.modal-watchlist-item:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.36);
}

/* Séparateur visible entre l'affiche et le texte sous celle-ci */
.watch-card .watch-title,
.modal-watchlist-info {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 8px;
    margin-top: 2px;
}

/* ---------------------------------------------------------
   Boutons "secondaires" en verre (fond translucide + relief)
   utilisés partout où un bouton n'est pas dans le dégradé
   rouge principal : "S'abonner" (déjà suivi), "Ajouté à ma
   watchlist", "Voir plus", slots vides du Top 5, etc.
   --------------------------------------------------------- */
.glass-btn,
.action-btn.added,
.follow-btn.following,
.view-more-btn,
.top-slot-empty {
    background: var(--surface-card);
    -webkit-backdrop-filter: var(--glass-blur-soft);
    backdrop-filter: var(--glass-blur-soft);
    border: 1px solid var(--border-color-strong);
    box-shadow: var(--shadow-btn-glass);
    color: var(--text-color);
}

.glass-btn:hover,
.action-btn.added:hover,
.follow-btn.following:hover,
.view-more-btn:hover,
.top-slot-empty:hover {
    background: var(--surface-hover);
    border-color: rgba(255, 255, 255, 0.4);
}

.modal-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.modal-close:hover {
    background: var(--surface-hover);
    border-color: var(--border-color-strong);
}

.tab {
    border: 1px solid transparent;
}

.tab:not(.active):hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-color);
    color: #fff;
}

/* Formulaires Auth & Conteneurs */
.auth-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    margin: auto;
}

.auth-container,
.login-container {
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-strong);
    width: 100%;
    text-align: center;
}

/* Le formulaire de connexion/inscription flotte directement sur le fond
   animé de l'app, sans bordure dure : seul le flou en verre le distingue. */
.login-container {
    border: none;
}

.legal-container {
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    text-align: left;
}

h1 {
    font-size: 2rem;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

h3 {
    letter-spacing: -0.01em;
}

input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: var(--glass-blur-soft);
    backdrop-filter: var(--glass-blur-soft);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

input::placeholder {
    color: var(--text-muted);
}

input:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

button {
    width: 100%;
    padding: 14px;
    background: var(--primary-gradient);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 10px 25px -8px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -6px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

button:active {
    transform: translateY(0);
}

p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 1.5rem;
}

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

.hidden {
    display: none !important;
}

/* ==========================================
   NAVIGATION RESPONSIVE (dock flottant en verre)
   ========================================== */
.bottom-nav {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: 520px;
    height: 68px;
    background: rgba(20, 18, 28, 0.55);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
    border: 1px solid var(--border-color-strong);
    border-radius: 24px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
    transition: color 0.2s, transform 0.2s;
    gap: 2px;
}

.nav-item svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    fill: currentColor;
    display: inline-block;
    flex-shrink: 0;
    transition: filter 0.2s;
}

.nav-item.active,
.nav-item:hover {
    color: #fff;
    transform: translateY(-2px);
}

.nav-item.active svg {
    filter: drop-shadow(0 0 8px var(--primary-glow));
    color: var(--primary-color-2);
}

@media (min-width: 768px) {
    .bottom-nav {
        top: 20px;
        left: 20px;
        bottom: 20px;
        transform: none;
        width: 220px;
        max-width: none;
        height: calc(100vh - 40px);
        border-radius: var(--radius-lg);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 1.75rem 1.1rem;
        gap: 0.5rem;
    }
    .nav-item {
        flex-direction: row;
        gap: 14px;
        font-size: 1rem;
        font-weight: 500;
        width: 100%;
        padding: 12px 14px;
        border-radius: var(--radius-sm);
    }
    .nav-item svg {
        margin-bottom: 0;
    }
    .nav-item.active,
    .nav-item:hover {
        background-color: rgba(255, 255, 255, 0.08);
        transform: none;
    }
}

/* ==========================================
   CONTENU & PAGES
   ========================================== */
.page-header {
    padding: 1.5rem 1rem 1rem 1rem;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.tabs-container {
    display: flex;
    padding: 6px;
    margin: 0 1rem 1rem 1rem;
    border-radius: var(--radius-md);
    gap: 4px;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}

.tab.active {
    color: #fff;
    background: var(--primary-gradient);
    box-shadow: 0 6px 18px -6px var(--primary-glow);
}

.tab-content {
    padding: 0 1rem 1rem 1rem;
    flex: 1;
}

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
    border-radius: var(--radius-md);
}

/* =========================================================
   TRANSITIONS DE PAGE (navigation native, sans framework JS)
   ---------------------------------------------------------
   Active les "View Transitions" cross-document du navigateur : un fondu
   enchaîné automatique entre l'ancienne et la nouvelle page à chaque clic
   sur un lien interne, au lieu du "cut" brutal habituel. Ignoré sans risque
   par les navigateurs qui ne le supportent pas (retour au comportement
   standard).
   ========================================================= */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.28s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* =========================================================
   ÉCRAN DE CHARGEMENT (voir includes/loading_screen.php)
   ---------------------------------------------------------
   Affiché plein écran dès les premiers octets envoyés par les pages qui
   font des appels TMDB potentiellement longs (watchlist, fiche, épisode,
   profil), le temps que le contenu réel soit prêt. Évite l'écran blanc au
   premier chargement, surtout marqué en PWA.
   ========================================================= */
.pt-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--bg-color);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.pt-loader-logo {
    width: 74px;
    height: 74px;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: pt-loader-pulse 1.8s ease-in-out infinite;
}

.pt-loader-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.14);
    border-top-color: var(--primary-color);
    animation: pt-loader-spin 0.9s linear infinite;
}

.pt-loader-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    min-height: 1.2em;
    transition: opacity 0.25s ease;
}

.pt-loader-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

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

@keyframes pt-loader-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .pt-loader-logo,
    .pt-loader-spinner {
        animation: none;
    }
}

/* ==========================================
   ÉCRAN DE CHARGEMENT (voir includes/loading_screen.php)
   ==========================================
   Envoyé au tout début des pages qui font des appels TMDB potentiellement
   longs (watchlist, fiche détails, épisode, profil), avant même ces appels,
   pour éviter la page blanche du premier chargement (surtout visible en
   PWA). Recouvre tout l'écran le temps que le vrai contenu, généré derrière,
   soit prêt à être montré. */
.pt-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: var(--bg-color);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.pt-loader-logo {
    width: 74px;
    height: 74px;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: pt-loader-pulse 1.8s ease-in-out infinite;
}

.pt-loader-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.14);
    border-top-color: var(--primary-color);
    animation: pt-loader-spin 0.9s linear infinite;
}

.pt-loader-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    min-height: 1.2em;
    transition: opacity 0.25s ease;
}

.pt-loader-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

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

@keyframes pt-loader-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .pt-loader-logo,
    .pt-loader-spinner {
        animation: none;
    }
}