/*
 * Plustube — couche de design premium du site (frontend).
 * Chargée APRÈS les styles du thème : seule l'apparence change, aucun comportement.
 * Couleurs du thème conservées : rouge Plustube (--bs-primary), fond nuit, texte clair.
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --pt-red: var(--bs-primary, #e50914);
  --pt-red-deep: #b70710;
  --pt-night: #05080b;
  --pt-surface: #0e1418;
  --pt-surface-2: #151c21;
  --pt-line: rgba(255, 255, 255, 0.08);
  --pt-line-strong: rgba(255, 255, 255, 0.14);
  --pt-text: #f5f6f7;
  --pt-muted: #a7adb2;
  --pt-radius: 14px;
  --pt-radius-sm: 10px;
  --pt-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
  --pt-glow: 0 10px 28px -10px rgba(229, 9, 20, 0.65);
  --pt-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------ Typographie */
body,
button,
input,
select,
textarea,
.btn,
.form-control {
  font-family: 'Plus Jakarta Sans', Roboto, system-ui, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Plus Jakarta Sans', Roboto, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

::selection {
  background: rgba(229, 9, 20, 0.45);
  color: #fff;
}

/* ------------------------------------------------------------------ Barre de défilement */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.28); }

/* ------------------------------------------------------------------ En-tête */
header .iq-navbar,
header.header-absolute .iq-navbar {
  transition: background-color 0.35s var(--pt-ease), box-shadow 0.35s var(--pt-ease), backdrop-filter 0.35s var(--pt-ease);
}

header.header-absolute {
  background: linear-gradient(180deg, rgba(3, 6, 9, 0.88) 0%, rgba(3, 6, 9, 0.45) 60%, rgba(3, 6, 9, 0) 100%);
}

/* En-tête collé en haut au défilement (classes posées par le thème) */
header.header-sticky .iq-navbar,
header .iq-navbar.menu-sticky,
header .iq-navbar.sticky,
.iq-navbar.navs-sticky {
  background: rgba(6, 10, 13, 0.78) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 1px 0 var(--pt-line), 0 12px 30px -20px rgba(0, 0, 0, 0.9);
}

header .navbar-brand .logo {
  transition: transform 0.3s var(--pt-ease);
}
header .navbar-brand:hover .logo { transform: scale(1.04); }

header .navbar-nav .nav-link {
  position: relative;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}
header .navbar-nav .nav-link:hover,
header .navbar-nav .nav-link.active,
header .navbar-nav .nav-item.active > .nav-link {
  color: #fff;
}
@media (min-width: 1200px) {
  header .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--pt-red);
    transform: translateX(-50%);
    transition: width 0.3s var(--pt-ease);
  }
  header .navbar-nav .nav-link:hover::after,
  header .navbar-nav .nav-link.active::after,
  header .navbar-nav .nav-item.active > .nav-link::after {
    width: 22px;
  }
}

/* Menus déroulants */
.dropdown-menu {
  background: rgba(14, 20, 24, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--pt-line-strong);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  padding: 0.4rem;
}
.dropdown-menu .dropdown-item {
  border-radius: 8px;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

/* Menu mobile */
.offcanvas,
.mobile-offcanvas {
  background: rgba(8, 12, 15, 0.97) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* ------------------------------------------------------------------ Boutons */
.btn {
  border-radius: var(--pt-radius-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.2s var(--pt-ease), box-shadow 0.25s var(--pt-ease), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible {
  outline: 2px solid rgba(229, 9, 20, 0.7);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-primary,
.btn.bg-primary {
  background: linear-gradient(180deg, #f0141f 0%, var(--pt-red) 55%, #c9070f 100%);
  border-color: transparent;
  box-shadow: var(--pt-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(180deg, #ff2430 0%, #f00d18 55%, #d30810 100%);
  border-color: transparent;
  box-shadow: 0 14px 34px -10px rgba(229, 9, 20, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.btn-dark,
.btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--pt-line-strong);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline-light,
.btn-outline-primary {
  border-width: 1px;
}
.btn-outline-primary:hover { box-shadow: var(--pt-glow); }

/* Bouton « S'abonner » de l'en-tête : doré, plus premium */
.btn.subscribe,
.btn-warning-subtle.subscribe {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.18), rgba(255, 152, 0, 0.12));
  border: 1px solid rgba(255, 193, 7, 0.38);
  color: #ffc94a;
}
.btn.subscribe:hover {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.3), rgba(255, 152, 0, 0.2));
  color: #ffd76e;
  box-shadow: 0 10px 26px -12px rgba(255, 193, 7, 0.6);
}

/* Boutons ronds d'action (liste, partage…) */
.action-btn,
.watch-list-btn,
.share-list-btn {
  border-radius: 50% !important;
}

/* ------------------------------------------------------------------ Hero / bannière */
.banner-section {
  position: relative;
}
.banner-section .movie-banner,
.banner-section .slick-slide > div,
.banner-section .swiper-slide {
  position: relative;
}
.banner-section .slider-content,
.banner-section .movie-content,
.banner-section [class*="banner-content"] {
  position: relative;
  z-index: 2;
}
.banner-section::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 10, 15, 0) 0%, var(--bs-body-bg, #010a0f) 100%);
  z-index: 1;
}
.banner-section h1,
.banner-section h2,
.banner-section .big-font,
.banner-section [class*="title"] {
  font-weight: 800;
  letter-spacing: -0.03em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}
.banner-section p {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
}
.banner-section .btn-primary {
  padding-inline: 1.6rem;
}

/* Puces du carrousel */
.slick-dots li button::before { display: none; }
.slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.32);
  transition: width 0.3s var(--pt-ease), background-color 0.3s ease;
}
.slick-dots li.slick-active button {
  width: 24px;
  background: var(--pt-red) !important;
}

/* Flèches des carrousels */
.slick-arrow,
.swiper-button-next,
.swiper-button-prev {
  transition: opacity 0.2s ease, transform 0.2s var(--pt-ease), background-color 0.2s ease;
}

/* ------------------------------------------------------------------ Titres de section */
.main-title {
  position: relative;
  font-weight: 800 !important;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.02em;
  padding-left: 14px;
}
.main-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ff2a36, var(--pt-red-deep));
  box-shadow: 0 0 14px rgba(229, 9, 20, 0.6);
}

/* Lien « Voir tout » à côté des titres */
.section-wraper .d-flex > a,
.section-wraper a.view-all,
.view-all-btn {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--pt-muted);
  transition: color 0.2s ease;
}
.section-wraper .d-flex > a:hover,
.section-wraper a.view-all:hover,
.view-all-btn:hover {
  color: #fff;
}

.section-wraper {
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ Cartes de contenu */
.iq-card,
.entainment-slick-card,
.card-style-slider .slick-slide > div > div {
  border-radius: var(--pt-radius);
}
.iq-card .block-images,
.entainment-slick-card .block-images {
  border-radius: var(--pt-radius);
  overflow: hidden;
  /* Pas de fond ici : il assombrirait l'affiche (calques du thème). */
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.9);
  transition: transform 0.45s var(--pt-ease), box-shadow 0.45s var(--pt-ease);
}
.iq-card .block-images img,
.entainment-slick-card .block-images img {
  transition: transform 0.6s var(--pt-ease), filter 0.4s ease;
}
@media (hover: hover) {
  .iq-card:hover .block-images,
  .entainment-slick-card:hover .block-images {
    transform: translateY(-4px);
    box-shadow: 0 26px 46px -22px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(229, 9, 20, 0.35);
  }
  .iq-card:hover .block-images img,
  .entainment-slick-card:hover .block-images img {
    transform: scale(1.05);
    filter: brightness(1.06);
  }
}

/* Titres sous les cartes */
.iq-card .card-title,
.iq-card h5,
.iq-card h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Badges (location, gratuit, premium…) */
.badge,
[class*="badge"] {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.block-images .badge,
.block-images [class*="rent"],
.block-images [class*="premium"] {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.8);
}

/* Cartes génériques (compte, abonnements, paiements…) */
.card {
  background: linear-gradient(180deg, var(--pt-surface-2), var(--pt-surface));
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
}
.card .card-header,
.card .card-footer {
  background: transparent;
  border-color: var(--pt-line);
}

/* ------------------------------------------------------------------ Formulaires */
.form-control,
.form-select,
.input-group-text {
  border-radius: var(--pt-radius-sm);
  border-color: var(--pt-line-strong);
  background-color: rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(229, 9, 20, 0.7);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.16);
}
.form-control::placeholder { color: rgba(255, 255, 255, 0.4); }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-text:last-child,
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.form-label { font-weight: 600; }
.form-check-input:checked {
  background-color: var(--pt-red);
  border-color: var(--pt-red);
}
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.16); }

/* ------------------------------------------------------------------ Fenêtres (modales) */
.modal-content {
  background: linear-gradient(180deg, #121a1f, #0b1115);
  border: 1px solid var(--pt-line-strong);
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
}
.modal-header,
.modal-footer { border-color: var(--pt-line); }
.modal-backdrop.show {
  opacity: 0.75;
}

/* ------------------------------------------------------------------ Onglets et pastilles */
.nav-pills .nav-link,
.nav-tabs .nav-link {
  border-radius: 999px;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--pt-red);
  box-shadow: var(--pt-glow);
}
.nav-tabs { border-bottom-color: var(--pt-line); }
.nav-tabs .nav-link { border: 0; color: var(--pt-muted); }
.nav-tabs .nav-link.active {
  background: rgba(229, 9, 20, 0.14);
  color: #fff;
}

/* ------------------------------------------------------------------ Tableaux (historique, paiements) */
.table {
  --bs-table-bg: transparent;
  border-color: var(--pt-line);
}
.table > thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pt-muted);
  font-weight: 700;
}
.table-hover > tbody > tr:hover > * { background: rgba(255, 255, 255, 0.03); }

/* ------------------------------------------------------------------ Pagination */
.pagination .page-link {
  border-radius: 10px !important;
  margin: 0 3px;
  border-color: var(--pt-line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.pagination .page-item.active .page-link {
  background: var(--pt-red);
  border-color: var(--pt-red);
  box-shadow: var(--pt-glow);
}

/* ------------------------------------------------------------------ Pied de page */
footer {
  position: relative;
  background: linear-gradient(180deg, rgba(5, 8, 11, 0) 0%, #05080b 18%) !important;
}
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1100px, 90%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(229, 9, 20, 0.55), rgba(255, 255, 255, 0.12), transparent);
}
footer .footer-title {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
footer a {
  transition: color 0.2s ease;
}
footer ul li a:hover,
footer a.link-body-emphasis:hover {
  color: #fff !important;
}
footer .footer-bottom,
footer [class*="copyright"] {
  border-top: 1px solid var(--pt-line);
}

/* Bouton « remonter » */
#back-to-top .btn,
#back-to-top a,
.back-to-top {
  box-shadow: var(--pt-glow);
}

/* ------------------------------------------------------------------ Pages de connexion / inscription */
.auth-card,
.user-login-card,
[class*="login-card"] {
  background: rgba(12, 18, 22, 0.78) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--pt-line-strong) !important;
  border-radius: 20px !important;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.95);
}
#google-login,
#otp-login {
  border-radius: var(--pt-radius-sm);
  font-weight: 600;
}
#google-login {
  background: #fff;
  color: #1f1f1f;
  border-color: #fff;
}
#google-login:hover {
  background: #f1f3f4;
  color: #1f1f1f;
}
.border-style span {
  color: var(--pt-muted);
  font-weight: 600;
}

/* ------------------------------------------------------------------ Bandeau cookies */
.plustube-cookie-consent {
  border-radius: 16px;
  border: 1px solid var(--pt-line-strong);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--pt-shadow);
}

/* ------------------------------------------------------------------ Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}