/*
 * pro_glowup.v1.css
 *
 * This custom stylesheet introduces a mini design system for Ciné‑Club des Raclures.
 * It defines a palette of colours, typographic scale and component styles to give
 * the site a cohesive, premium feel reminiscent of an 80s neon cinema interface.
 * The goal is to remain accessible across devices (desktop, tablet, mobile) with
 * improved contrast and clarity. Use this file in conjunction with the existing
 * core stylesheets. It should be included after the default CSS to override
 * specific rules.
 */

/* -----------------------------------------------------------------------
   Colour tokens
   ----------------------------------------------------------------------- */
:root {
  /* Base palette */
  --clr-bg: #0d0d20;
  --clr-surface: #12122b;
  --clr-surface-alt: #1a1a40;
  --clr-text: #e6e6f0;
  --clr-text-muted: #aaaacc;
  --clr-border: #2a2a50;
  /* Neon accents */
  --clr-accent: #9c27b0; /* violet neon */
  --clr-accent-alt: #673ab7;
  --clr-accent-glow: rgba(156, 39, 176, 0.5);
  /* Success/warning/info colours for chips */
  --clr-chip-bg: #26264f;
  --clr-chip-text: #b5b5d3;
  --clr-chip-border: #3f3f70;
  /* Layout constants */
  --radius: 8px;
  --padding: 1rem;
  --transition: 0.2s ease;
}

/* -----------------------------------------------------------------------
   Typography
   ----------------------------------------------------------------------- */
body {
  font-family: 'Montserrat', 'Inter', sans-serif;
  line-height: 1.5;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  /* Overscroll-behaviour removed to restore proper scrolling on some mobile browsers */
  /* overscroll-behavior-y: none; */
}

/*
 * Override the default behaviour of the `.ccr-lock` class on the body.
 *
 * In the core style sheet (`style.v25.css`), the rule `body.ccr-lock { overflow: hidden; }`
 * is used to prevent background scrolling when a film resume modal is open.
 * Unfortunately some mobile WebViews (e.g. Telegram or Brave) never re‑enable
 * scrolling after this class is removed, causing single‑finger scroll to remain
 * locked.  Here we explicitly reset the overflow property whenever
 * `.ccr-lock` is present so that the page remains scrollable.
 */
body.ccr-lock {
  overflow: unset !important;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin-top: 0;
  color: var(--clr-text);
}
h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------------------
   Hero section and tagline
   ----------------------------------------------------------------------- */
.hero {
  background-color: var(--clr-surface);
  padding: 2rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--clr-border);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.hero h1 {
  font-size: 2.5rem;
  letter-spacing: 0.05rem;
  margin: 0.5rem 0;
}
.hero .tagline {
  font-size: 1rem;
  color: var(--clr-text-muted);
  margin-top: 0.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.hero-counter {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--clr-text-muted);
}

/* -----------------------------------------------------------------------
   Search bar & filters
   ----------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: var(--padding) auto;
  max-width: 900px;
}
.filters input[type="text"] {
  flex-grow: 1;
  min-width: 220px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  background-color: var(--clr-surface-alt);
  color: var(--clr-text);
  font-size: 1rem;
  outline: none;
  transition: border var(--transition), box-shadow var(--transition);
}
.filters input[type="text"]:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 2px var(--clr-accent-glow);
}
.filters button {
  padding: 0.7rem 0.9rem;
  border: none;
  border-radius: var(--radius);
  background-color: var(--clr-accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition), transform var(--transition);
}
.filters button:hover {
  background-color: var(--clr-accent-alt);
  transform: translateY(-1px);
}
.filters .genre-selector {
  appearance: none;
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  background-color: var(--clr-surface-alt);
  color: var(--clr-text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border var(--transition);
}
.filters .genre-selector:focus {
  border-color: var(--clr-accent);
}

/* -----------------------------------------------------------------------
   Results bar
   ----------------------------------------------------------------------- */
#results-bar {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 0 auto 1rem;
  max-width: 900px;
  border-radius: var(--radius);
  background-color: var(--clr-surface-alt);
  border: 1px solid var(--clr-border);
  font-size: 0.9rem;
  color: var(--clr-text);
  flex-wrap: wrap;
}
#results-bar.active {
  display: flex;
}
#results-bar .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
#results-bar .chip {
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  background-color: var(--clr-chip-bg);
  color: var(--clr-chip-text);
  border: 1px solid var(--clr-chip-border);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
#results-bar .chip strong {
  color: var(--clr-accent);
}

/* -----------------------------------------------------------------------
   Movies grid & cards
   ----------------------------------------------------------------------- */
.movies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* -----------------------------------------------------------------------
   Search bar enhancements
   ----------------------------------------------------------------------- */
/*
   Pour mettre davantage en avant la recherche (feature cœur du site), on
   stylise la barre de recherche comme un élément principal. La zone de
   saisie occupe toute la largeur disponible et les boutons sont alignés
   horizontalement. Les tailles et espacements augmentent légèrement pour
   attirer l’œil, sans nuire à l’accessibilité sur mobile.
*/
/*
 * Mise en avant visuelle de la barre de recherche :
 * - Augmentation de la largeur et de la hauteur de la zone pour attirer l’œil
 * - Espacement supérieur et inférieur pour l’isoler du reste
 * - Alignement centré avec un conteneur flexible et un espacement généreux
 */
.search-steampunk-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  max-width: 960px;
  margin: 1.5rem auto;
}

.search-steampunk-wrap input[type="text"] {
  flex-grow: 1;
  min-width: 0;
  padding: 1rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  background-color: var(--clr-surface-alt);
  color: var(--clr-text);
  font-size: 1.2rem;
  outline: none;
  transition: border var(--transition), box-shadow var(--transition);
  /* mettre subtilement en valeur la zone de recherche avec une lueur contrôlée */
  box-shadow: 0 0 0 2px var(--clr-accent-glow);
}

.search-steampunk-wrap input[type="text"]:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 2px var(--clr-accent-glow);
}

.search-steampunk-wrap button {
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

/* Bouton de recherche principal */
#search-btn {
  background-color: var(--clr-accent);
  color: #fff;
}
#search-btn:hover {
  background-color: var(--clr-accent-alt);
  transform: translateY(-2px);
}

/* Bouton de réinitialisation de la recherche */
#reset-search-btn {
  background-color: var(--clr-border);
  color: var(--clr-text);
  /* Override inline styles injected by JS (important to align visually) */
  margin-left: 0 !important;
  padding: 0.9rem 1.2rem !important;
  border-radius: var(--radius) !important;
  border: none !important;
}
#reset-search-btn:hover {
  background-color: var(--clr-border);
  filter: brightness(1.2);
  transform: translateY(-1px);
}

@media (max-width: 540px) {
  .search-steampunk-wrap {
    max-width: 100%;
    gap: 0.4rem;
    margin: 1rem auto;
  }
  .search-steampunk-wrap input[type="text"] {
    padding: 0.8rem 1rem;
    font-size: 1rem;
  }
  .search-steampunk-wrap button {
    padding: 0.8rem 0.9rem;
    font-size: 1rem;
  }
}

/* -----------------------------------------------------------------------
   Section films similaires (resume overlay)
   ----------------------------------------------------------------------- */
/*
   Cette section est insérée dynamiquement dans la fiche film (overlay) pour
   proposer jusqu’à six films proches. Elle est séparée du résumé par une
   bordure et possède une mise en page flexible qui s’adapte aux petits
   écrans. Les boutons reprennent la palette de couleurs du design system.
*/
#similar-section {
  border-top: 1px solid var(--clr-border);
  margin-top: 1rem;
  padding-top: 1rem;
}
#similar-section h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  color: var(--clr-accent);
}
#similar-section .similar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#similar-section .similar-item {
  background-color: var(--clr-surface-alt);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 0.45rem 0.8rem;
  color: var(--clr-accent);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color var(--transition), transform var(--transition);
}
#similar-section .similar-item:hover {
  background-color: var(--clr-surface);
  transform: translateY(-2px);
}

/* Ordre des éléments dans la barre de recherche (input, recherche, reset) */
.search-steampunk-wrap #search-input {
  order: 0;
}
.search-steampunk-wrap #search-btn {
  order: 1;
}
.search-steampunk-wrap #reset-search-btn {
  order: 2;
}
.movie {
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
}
.movie:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.movie .poster {
  width: 100%;
  height: 270px;
  object-fit: cover;
  background-color: var(--clr-surface-alt);
}
.movie .content {
  flex-grow: 1;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.movie .content h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: var(--clr-text);
}
.movie .content .meta {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  margin-bottom: 0.5rem;
}
.movie .content .description {
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  margin-bottom: 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.movie .content .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.movie .content .actions button {
  flex: 1;
  margin-right: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: none;
  background-color: var(--clr-accent);
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color var(--transition);
}
.movie .content .actions button:hover {
  background-color: var(--clr-accent-alt);
}
.movie .content .actions button:last-child {
  margin-right: 0;
}

/* -----------------------------------------------------------------------
   Popup / modal
   ----------------------------------------------------------------------- */
#movieModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
#movieModal.active {
  display: flex;
}
#movieModal .modal-content {
  background-color: var(--clr-surface);
  border-radius: var(--radius);
  width: 90%;
  max-width: 700px;
  max-height: 90%;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  position: relative;
}
#movieModal .modal-content header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 1rem;
  border-bottom: 1px solid var(--clr-border);
}
#movieModal .modal-content header h2 {
  margin: 0;
  font-size: 1.5rem;
}
#movieModal .modal-content header button {
  background: none;
  border: none;
  color: var(--clr-text-muted);
  font-size: 1.2rem;
  cursor: pointer;
}
#movieModal .modal-content .body {
  padding: 1rem;
  line-height: 1.4;
  color: var(--clr-text);
}
#movieModal .modal-content .body p {
  margin: 0.5rem 0;
}
#movieModal .modal-content .actions {
  padding: 1rem;
  border-top: 1px solid var(--clr-border);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
#movieModal .modal-content .actions button {
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: none;
  background-color: var(--clr-accent);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color var(--transition);
}
#movieModal .modal-content .actions button:hover {
  background-color: var(--clr-accent-alt);
}

/* -----------------------------------------------------------------------
   Pick grid (for selections)
   ----------------------------------------------------------------------- */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}
.pick-card {
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  color: var(--clr-text);
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.pick-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  background-color: var(--clr-surface-alt);
}
.pick-card a {
  color: var(--clr-accent);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
}
.pick-card p {
  margin-top: 0.5rem;
  color: var(--clr-text-muted);
  font-size: 0.85rem;
}

/* -----------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------- */
.footer {
  padding: 2rem 1rem;
  text-align: center;
  background-color: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  font-size: 0.8rem;
  color: var(--clr-text-muted);
}
.footer a {
  color: var(--clr-accent);
  text-decoration: none;
  margin: 0 0.25rem;
  transition: color var(--transition);
}
.footer a:hover {
  color: var(--clr-accent-alt);
}

/* -----------------------------------------------------------------------
   Utility classes
   ----------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

#similar-section .similar-empty {
  margin-top: 8px;
  opacity: 0.85;
  font-size: 0.95rem;
}