@font-face{
  font-family:"Oxanium";
  src:url("../fonts/oxanium-v21-latin-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Oxanium";
  src:url("../fonts/oxanium-v21-latin-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Oxanium";
  src:url("../fonts/oxanium-v21-latin-300.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

/* === Ciné-Club des Raclures - Thème Néon v1.6 (10 thèmes + verrouillage + responsive) === */

:root {
  --bg:#050515;
  --card:#141437;
  --text:#e6e9ff;
  --muted:#a4a8ff;
  --accent:#6cf4ff;
  --accent2:#b77dff;
  --shadow:0 0 15px rgba(108,244,255,.4),0 0 30px rgba(183,125,255,.25);
}

* { box-sizing:border-box; }

body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
             radial-gradient(800px 400px at 15% 10%,color-mix(in srgb, var(--accent) 26%, transparent),transparent 70%),
             radial-gradient(800px 400px at 85% 10%,color-mix(in srgb, var(--accent2) 26%, transparent),transparent 70%),
             linear-gradient(180deg,var(--bg),#03030d 70%);
  color:var(--text);
  font-family:"Segoe UI",system-ui,sans-serif;
  transition:background-color .4s ease,color .4s ease;
  position:relative;
  overflow-x:hidden;
}


/* === HEADER === */


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

.skip-link {
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus {
  position:absolute;
  left:10px;
  top:10px;
  width:auto;
  height:auto;
  padding:8px 12px;
  background:var(--accent);
  color:#020414;
  border-radius:999px;
  font-weight:bold;
  z-index:9999;
}

header {
  text-align:center;
  padding:30px 10px 40px;
  background:rgba(10,10,30,.7);
  border-bottom:1px solid rgba(120,130,255,.15);
  position:relative;
}
header h1 {
  margin:0;
  font-size:2rem;
  color:var(--accent);
  text-shadow:0 0 8px var(--accent),0 0 22px var(--accent2);
}
header p {
  margin:6px 0 0;
  color:var(--muted);
}


/* Film du jour */
.featured-film {
  max-width: 980px;
  margin: 18px auto 4px;
  padding: 0 14px;
}

.featured-card {
  border-radius: 14px;
  padding: 12px 16px;
  background: radial-gradient(circle at top left, rgba(108,244,255,0.18), rgba(10,10,30,0.96));
  border: 1px solid rgba(116,240,255,0.4);
  box-shadow: 0 14px 32px rgba(0,0,0,0.9);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.featured-label {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.featured-title {
  margin: 2px 0 0;
  font-size: 1.1rem;
  color: var(--accent);
}

.featured-meta {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.featured-summary {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--text);
}

@media (max-width: 540px) {
  .featured-film {
    margin-top: 8px;
    margin-bottom: 2px;
    padding: 0 8px;
  }
  .featured-card {
    padding: 8px 10px;
  }
}
/* === SÉLECTEUR DE THÈME === */
#theme-selector {
  position:fixed;
  top:16px;
  right:18px;
  font-size:1.5rem;
  cursor:pointer;
  user-select:none;
  color:var(--accent);
  text-shadow:0 0 8px var(--accent2);
  transition:transform .2s;
  z-index:2000;
}
#theme-selector:hover { transform:scale(1.1); }

#theme-selector .theme-menu {
  position:absolute;
  top:35px;
  right:0;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background:rgba(10,10,30,.95);
  border:1px solid rgba(120,130,255,.25);
  border-radius:10px;
  padding:12px 10px;
  box-shadow:var(--shadow);
  z-index:3000;
}
#theme-selector .theme-menu.open { display:flex; }

#theme-selector .theme-menu button {
  width:28px;
  height:28px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  transition:transform .2s;
}
#theme-selector .theme-menu button:hover { transform:scale(1.25); }

#theme-selector hr {
  width:80%;
  border:0;
  border-top:1px solid rgba(150,150,255,.3);
  margin:6px 0;
}
.lock-btn {
  font-size:.85rem;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(150,150,255,.25);
  background:rgba(40,40,60,.4);
  color:var(--text);
  cursor:pointer;
}
.lock-btn:hover { background:rgba(60,60,90,.6); }

/* === PASTILLES === */
[data-theme="midnightgold"] {background:linear-gradient(90deg,#f5b642,#ffeb99);}
[data-theme="deepcosmos"] {background:linear-gradient(90deg,#4db8ff,#7c9fff);}
[data-theme="crimsonnoir"] {background:linear-gradient(90deg,#ff3b3b,#ff9f60);}
[data-theme="chromeobsidian"] {background:linear-gradient(90deg,#8affea,#ffffff);}
[data-theme="vaporgape"] {background:linear-gradient(90deg,#ff79e8,#b388ff);}
[data-theme="emeraldpulse"] {background:linear-gradient(90deg,#00ff99,#00ffaa);}
[data-theme="retrosunset"] {background:linear-gradient(90deg,#ff66c4,#ffb347);}
[data-theme="arcticwave"] {background:linear-gradient(90deg,#60eaff,#c1fdff);}
[data-theme="toxicsynth"] {background:linear-gradient(90deg,#9aff00,#ff55ff);}
[data-theme="infernoash"] {background:linear-gradient(90deg,#ff5e00,#ffce7a);}

/* === FILTRES === */
.filters {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding:15px;
  background:rgba(20,20,40,.55);
  backdrop-filter:blur(6px);
}
.filters input,
.filters select,
.filters button {
  background:#1b1b38;
  color:var(--text);
  border:1px solid rgba(120,130,255,.25);
  border-radius:8px;
  padding:9px 12px;
  transition:.2s;
}
.filters button {
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  color:#061018;
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--shadow);
}




@media (max-width: 640px) {
  .filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 10px;
  }
  .filters .search-wrap {
    width: 100%;
  }
  .filters input,
  .filters select,
  .filters button {
    width: 100%;
  }
}
/* === CARTES === */
#films-container {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
  padding:24px;
}

/* Ajuste la largeur minimale des cartes sur petits écrans pour que les affiches occupent moins de place
   et s'adaptent mieux aux téléphones. Sur écrans de 640px ou moins, les cartes se rétrécissent à 160px. */
@media (max-width: 640px) {
  #films-container {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}
.film-card {
  background:linear-gradient(180deg,var(--card),#101030);
  border:1px solid rgba(116,240,255,.15);
  border-radius:12px;
  padding:14px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
  position:relative;
}
.film-card:hover {
  transform:translateY(-10px) scale(1.02);
  border-color:rgba(116,240,255,.9);
  box-shadow:0 20px 48px rgba(0,0,0,0.95), 0 0 32px rgba(108,244,255,0.7);
}
.film-card h3 {
  margin:0 0 8px;
  font-size:1.05rem;
  color:var(--accent);
  text-shadow:0 0 10px rgba(116,240,255,.6);
}
.film-card p {
  margin:4px 0;
  color:var(--muted);
  font-size:.95rem;
}

/* === PAGINATION === */
.pagination {
  grid-column:1 / -1;
  text-align:center;
  margin-top:20px;
}
.pagination button {
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#061018;
  font-weight:700;
  border:none;
  border-radius:8px;
  padding:8px 14px;
  margin:0 10px;
  cursor:pointer;
  box-shadow:var(--shadow);
}

/* === POPUP === */
.resume-overlay {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(2,4,14,.75);
  backdrop-filter:blur(4px);
  z-index:9999;
}
.neon-box {
  position:relative;
  width:92%;
  max-width:720px;
  background:#0e0e26;
  border:1px solid rgba(116,240,255,.35);
  border-radius:14px;
  padding:22px;
  box-shadow:var(--shadow);
  color:var(--text);
}
.neon-box h2 {
  margin:0 0 10px;
  color:var(--accent);
  text-shadow:0 0 12px var(--accent2);
}
.neon-box .close {
  position:absolute;
  top:10px;
  right:12px;
  background:transparent;
  border:1px solid rgba(116,240,255,.4);
  color:var(--accent);
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
}
.resume-actions {
  text-align:right;
  margin-top:14px;
}
.resume-actions a {
  display:inline-block;
  text-decoration:none;
  color:#061018;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  padding:8px 12px;
  border-radius:8px;
  box-shadow:var(--shadow);
}

/* === FOOTER === */
footer {
  text-align:center;
  padding:16px;
  color:#9ab;
  border-top:1px solid rgba(120,130,255,.12);
  background:#0c0c1a;
}

/* === RESPONSIVE === */
@media (max-width:1024px){header h1{font-size:1.8rem;}header p{font-size:.95rem;}}
@media (max-width:768px){
  header h1{font-size:1.5rem;}
  header p{font-size:.9rem;}
  .filters{flex-direction:column;align-items:center;}
  .filters input,.filters select,.filters button{width:90%;max-width:400px;}
  #films-container{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:14px;}
  .film-card h3{font-size:1rem;}
  .film-card p{font-size:.85rem;}
  .neon-box{width:95%;max-height:90vh;overflow-y:auto;}
  .pagination button{padding:6px 10px;font-size:.9rem;}
  footer{font-size:.85rem;}
}
@media (max-width:480px){
  .filters input,.filters select,.filters button{width:95%;}
  header h1{font-size:1.3rem;}
  #films-container{grid-template-columns:1fr;}
}


/* v1.5 poster styles */
.resume-overlay { align-items: center; justify-content: center; }
.resume-box { max-width: 900px; width: 92%; }
.poster-wrap { width: 100%; display: flex; align-items: center; justify-content: center; margin: 6px 0 12px 0; }
.poster-wrap img { max-width: 58%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
@media (max-width: 640px) { .poster-wrap img { max-width: 78%; } }
.fade-in { animation: fadeInCine 160ms ease-out; }
@keyframes fadeInCine { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
.muted { opacity: 0.75; font-style: italic; }

.poster-wrap { min-height: 40px; }
.poster-wrap img { filter: blur(0); transition: filter .25s ease; }
.poster-wrap img[data-loading="1"] { filter: blur(6px); }

/* v1.6 UI polish */
.resume-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.resume-actions a, .resume-actions button { padding:8px 12px; border-radius:10px; border:0; cursor:pointer; }
.resume-actions button { background:#1f2440; color:#fff; }
.resume-actions a { background:#2a6df0; color:#fff; text-decoration:none; }
.resume-actions a:hover, .resume-actions button:hover { filter: brightness(1.1); }

/* simple skeleton for film cards (if used later) */
.skel { background: linear-gradient(90deg,#1c1c2b 0%,#26263b 50%,#1c1c2b 100%); background-size:200% 100%; animation: shimmer 1s infinite; border-radius:10px; height:72px; margin:8px 0; }
@keyframes shimmer { 0%{background-position:0 0;} 100%{background-position:200% 0;} }

/* v1.7 aesthetic refresh */
:root{
  --bg: hsl(233,35%,10%);
  --card: hsl(235,32%,14%);
  --text: hsl(0,0%,96%);
  --accent: hsl(220,90%,56%);
  --accent2: hsl(290,65%,62%);
}
body{ color: var(--text); background: var(--bg); }

.resume-overlay{ backdrop-filter: blur(6px); }
.resume-box{ box-shadow: 0 18px 60px rgba(0,0,0,.45); }
.resume-actions a, .resume-actions button{
  transition: transform .12s ease, filter .12s ease;
}
.resume-actions a:hover, .resume-actions button:hover{
  transform: translateY(-1px); filter: brightness(1.1);
}
@media (prefers-reduced-motion: reduce){
  .resume-actions a, .resume-actions button{ transition:none; }
}

#resume-content h2{ font-size: 1.35rem; line-height: 1.25; margin: 0 0 8px 0; }
#resume-content p{ font-size: 1rem; line-height: 1.45; }

.card:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.card{ transition: transform .12s ease, box-shadow .12s ease; }

/* filters bar add-ons */
.filters{ gap: 8px; flex-wrap: wrap; }
.filters .group{ display:flex; align-items:center; gap:6px; }
.filters select{ background: var(--card); color: var(--text); border-radius: 10px; border:1px solid rgba(255,255,255,.08); padding:6px 8px; }
.filters option{ color: var(--text); }
.filters label{ opacity:.85; }

/* debug panel */
#dbg-panel{ position: fixed; right: 10px; bottom: 10px; z-index: 9999; font-size: .85rem; opacity:.85;
  background: rgba(10,10,18,.7); color: var(--text); padding:8px 10px; border-radius: 10px; display:none; }
#dbg-panel.show{ display:block; }


/* v1.7g compact toolbar controls */
.filters input#search-input,
.filters select#genre-filter,
.filters select#sort-select,
.filters button,
#random-btn {
  height: 38px;
  padding: 6px 10px;
  font-size: 0.95rem;
  border-radius: 10px;
  box-shadow: none;
}

.filters { gap: 10px; }
.filters .group label { font-size: .95rem; }


/* v1.7h mobile chips for genres */
.chips-wrap{ display:flex; gap:8px; overflow:auto; padding:4px 2px; max-width:70vw; }
.chips-wrap::-webkit-scrollbar{ height:6px; }
.chips-wrap::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius:6px; }
.chip{ background: var(--card); color: var(--text); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 10px; font-size:.95rem; white-space:nowrap; }
.chip.active{ background: var(--accent); color:#fff; border-color: transparent; }
@media (min-width: 769px){
  #genre-chips{ display:none; }
}

/* A11y: visible focus for keyboard users */
:focus-visible {
  outline: 2px solid #ffd54d;
  outline-offset: 3px;
}

.ccr-popup .ccr-poster { max-height: var(--ccr-poster-maxvh, 50vh); object-fit: cover; }
/* iPad / iOS popup fix - résumé scrollable + actions visibles */
.ccr-popup{
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  max-height: calc(100svh - 24px);
}
@supports (height: 100dvh){
  .ccr-popup{ max-height: calc(100dvh - 24px); }
}
@supports not (height: 100dvh){
  .ccr-popup{ max-height: calc(var(--vh, 1vh) * 100 - 24px); }
}
.ccr-popup .ccr-summary{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
}
.ccr-popup .ccr-actions{
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px;
  background: linear-gradient(to top, rgba(12,12,18,.92), rgba(12,12,18,0));
  backdrop-filter: blur(6px);
}
@media (orientation: landscape){
  .ccr-popup { max-height: calc(100svh - 16px); }
  @supports (height: 100dvh){
    .ccr-popup{ max-height: calc(100dvh - 16px); }
  }
  .ccr-popup .ccr-poster { --ccr-poster-maxvh: 40vh; }
}


/* === CCR v8 Popup & UX Fix 2025-11-01 === */
.resume-overlay {
  overflow-y: auto;
  align-items: flex-start;
  padding: 4vh 0;
  overscroll-behavior: contain;
}
.resume-box {
  max-height: 92vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.poster-wrap img {
  max-height: 58vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Affiche plus petite quand la fiche est ouverte depuis une recherche active */
.resume-overlay.from-search .poster-wrap img {
  max-width: 42%;
  max-height: 46vh;
}
@media (max-width: 640px) {
  .resume-overlay.from-search .poster-wrap img {
    max-width: 66%;
    max-height: 36vh;
  }
}
body.ccr-lock { overflow: hidden; }

/* Toggle visual */
#poster-compact-toggle.active,
#text-plus-toggle.active {
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Compact poster size */
.resume-overlay.compact .poster-wrap img { max-height: 45vh; }

/* Text Plus */
.resume-overlay.textplus #resume-content,
.resume-overlay.textplus .resume-box {
  font-size: 1.08rem;
  line-height: 1.55;
}
.resume-overlay.textplus #resume-content p { margin-bottom: 0.9rem; }


/* === CCR v8.3.10 Mode TV === */
#tv-mode-toggle.active {
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.resume-overlay.tv .poster-wrap img { max-height: 42vh; }
.resume-overlay.tv .resume-box,
.resume-overlay.tv #resume-content {
  font-size: 1.16rem;
  line-height: 1.68;
}
.resume-overlay.tv #resume-content p { margin-bottom: 1rem; }


/* === CCR v8.3.11 Mode compact unifié === */
#compact-mode-toggle.active {
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Par précaution, masquer les anciens boutons si présents */
#poster-compact-toggle, #text-plus-toggle, #tv-mode-toggle { display: none !important; }

/* premium cards css placeholder */
.film-card{background:#111;padding:0;border-radius:10px;}
.film-poster{width:100%;}

/* v2.1 theme menu fix */
.theme-picker, .theme-selector { position: relative; z-index: 9999; }

/* v2.1.1 theme menu fix */
.theme-selector-wrapper, .theme-menu { position:absolute !important; z-index:999999 !important; overflow:visible !important; transform:translateZ(999px) !important; }
header{ overflow:visible !important; }

.theme-selector-wrapper,.theme-menu{position:absolute !important;z-index:999999 !important;transform:translateZ(999px)!important;overflow:visible!important;}
header{overflow:visible!important;}

/* v10 definitive override for wishlist buttons */
#wishlistSend,
#wishlistClose,
#wishlistSend.btn-disabled,
#wishlistClose.btn-disabled,
.modal button,
.modal .btn,
button,
button.btn,
button.wishlist-button {
    color: #000 !important;
    background: #ffffff !important;
    border: 1px solid #ccc !important;
    opacity: 1 !important;
    filter: none !important;
}

/* === Perf pack (fusionne depuis assets/perf_v140.css) ===
   Objectif: reduire le CLS, stabiliser cartes et affiches, limiter les reflows. */

html{overflow-y:scroll}
:root{--header-h:72px;--toolbar-h:64px;--controls-h:128px}

img,svg,video{display:block;max-width:100%;height:auto}
.poster,.film-poster,.grid-poster,.card img,.film-card img,#results img,.grid img,.cards img{aspect-ratio:2/3;object-fit:cover}

header,.header,#header{min-height:var(--header-h)}
nav,.nav,#nav,.topbar,#topbar,.toolbar,#toolbar{min-height:var(--toolbar-h)}
#controls,.controls,#filters,.filters,.search,#search-bar{min-height:var(--controls-h)}

#offline,#offline-banner,#network,#network-status,.offline,.offline-banner,.network-status,
#toast,.toast,.banner,#banner{position:fixed;top:0;left:0;right:0;z-index:9999}

.grid > *,.cards > *{contain:content}
main,#app,.content,.grid,.cards{contain:layout paint style}

img[loading="lazy"]{content-visibility:auto}
.card,.film-card{content-visibility:auto;contain-intrinsic-size:400px 600px}
h1,h2,h3,.title,.film-title{line-height:1.2}

@media (max-width:540px){
  :root{--header-h:80px;--controls-h:210px}
  .grid .card:nth-child(-n+8),.cards .card:nth-child(-n+8){content-visibility:visible;contain-intrinsic-size:auto}
}


/* === Hero header cinéma === */
.hero-header {
  text-align:center;
  padding:32px 16px 46px;
  background:
    radial-gradient(circle at top, rgba(255,210,120,0.35), transparent 55%),
    radial-gradient(circle at bottom, rgba(120,140,255,0.18), transparent 60%),
    linear-gradient(135deg, #0b0c1b 0%, #080716 45%, #100822 100%);
  border-bottom:1px solid rgba(120,130,255,0.25);
  position:relative;
  overflow:hidden;
}
.hero-header::before {
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 50% 0, rgba(255,240,200,0.12), transparent 65%);
  opacity:0.7;
  mix-blend-mode:screen;
  animation:heroGlow 9s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero-inner {
  position:relative;
  max-width:960px;
  margin:0 auto;
  transform:perspective(900px) rotateX(6deg);
}
.hero-sign {
  position:relative;
  display:inline-block;
  padding:10px 26px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(18,18,40,0.9), rgba(26,20,60,0.95));
  box-shadow:0 22px 60px rgba(0,0,0,0.78),0 0 26px rgba(241,201,122,0.55),0 0 34px rgba(121,182,255,0.35);
}
.hero-sign::before {
  content:"";
  position:absolute;
  inset:-14%;
  border-radius:inherit;
  border:1px solid rgba(241,201,122,0.32);
  box-shadow:0 0 26px rgba(241,201,122,0.55),0 0 34px rgba(121,182,255,0.28);
  opacity:0.28;
  pointer-events:none;
}
.hero-sign::after {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,220,160,0.45) 35%, rgba(120,180,255,0.35) 50%, rgba(255,255,255,0) 65%);
  transform:translateX(-140%);
  mix-blend-mode:screen;
  opacity:0.85;
  pointer-events:none;
  filter:blur(0.2px);
  animation:heroFlash 6.5s ease-in-out infinite alternate;
}


.hero-title {
  margin:0;
  font-size:3.05rem;
  font-family:"Oxanium", "Segoe UI", system-ui, sans-serif;
  font-weight:800;
  letter-spacing:0.03em;
  color:rgba(241,201,122,0.98);
  background:linear-gradient(180deg, rgba(255,235,200,1) 0%, rgba(241,201,122,0.98) 40%, rgba(120,182,255,0.95) 120%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 0 14px rgba(241,201,122,0.95),
    0 0 28px rgba(121,182,255,0.55),
    0 12px 34px rgba(0,0,0,0.70);
}

.hero-tagline {
  margin:14px auto 8px;
  font-size:1.16rem;
  color:rgba(245,247,255,0.92);
  letter-spacing:0.02em;
  line-height:1.35;
  display:inline-block;
  padding:9px 16px;
  border-radius:999px;
  background:rgba(8,10,18,0.68);
  border:1px solid rgba(241,201,122,0.28);
  box-shadow:0 10px 26px rgba(0,0,0,0.55);
  text-shadow:0 0 12px rgba(0,0,0,0.65);
  min-height:1.4em;
}

.hero-counter {
  margin:4px auto 0;
  font-size:0.9rem;
  color:rgba(255,240,215,0.9);
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(10,10,30,0.9);
  box-shadow:0 0 12px rgba(255,220,160,0.5);
  animation:heroCounterBreath 4.6s ease-in-out infinite;
}
.hero-counter span#hero-counter-count {
  font-weight:600;
}

/* Tagline lettres façon marquee */
.hero-tag-letter,
.hero-tag-space {
  opacity:0;
  display:inline-block;
  transform:translateY(4px);
  animation:heroTagIn 0.6s ease forwards;
}
.hero-tag-space {
  width:0.42em;
}

.hero-tag-letter.a { color:rgba(255,235,200,0.98); text-shadow:0 0 10px rgba(255,220,160,0.45); }
.hero-tag-letter.b { color:rgba(145,195,255,0.98); text-shadow:0 0 10px rgba(120,180,255,0.45); }

/* Animations */

@keyframes heroFlash {
  0% { transform:translateX(-140%); opacity:0; }
  18% { opacity:0.92; }
  50% { opacity:0.92; }
  82% { opacity:0.92; }
  100% { transform:translateX(140%); opacity:0; }
}

@keyframes heroGlow {
  0% { opacity:0.45; transform:translateY(0); }
  50% { opacity:0.9; transform:translateY(6px); }
  100% { opacity:0.4; transform:translateY(12px); }
}
@keyframes heroHalo {
  0% { opacity:0.0; transform:scale(0.9); }
  40% { opacity:0.8; transform:scale(1.02); }
  100% { opacity:0.0; transform:scale(1.08); }
}
@keyframes heroCounterBreath {
  0% { transform:scale(1); box-shadow:0 0 8px rgba(255,220,160,0.3); }
  50% { transform:scale(1.04); box-shadow:0 0 18px rgba(255,220,160,0.8); }
  100% { transform:scale(1); box-shadow:0 0 8px rgba(255,220,160,0.3); }
}
@keyframes heroTagIn {
  0% { opacity:0; transform:translateY(6px); }
  100% { opacity:1; transform:translateY(0); }
}

/* === Favoris et notes === */
.fav-btn {
  position:absolute;
  top:8px;
  right:8px;
  background:transparent;
  border:none;
  font-size:1.3rem;
  color:var(--accent);
  cursor:pointer;
  line-height:1;
  padding:2px;
}
.fav-btn:hover {
  transform:scale(1.1);
}
.rating-mini {
  position:absolute;
  bottom:8px;
  right:8px;
  font-size:0.9rem;
  color:var(--accent);
  pointer-events:none;
}
.favorites-toggle {
  background:#1b1b38;
  border:1px solid rgba(120,130,255,0.25);
  border-radius:8px;
  padding:9px 12px;
  color:var(--text);
  cursor:pointer;
  transition:0.2s;
}
.favorites-toggle.on {
  background:var(--accent);
  color:var(--bg);
}
.favorites-toggle:hover {
  transform:scale(1.03);
}
.rating-section {
  margin-top:12px;
  font-size:1rem;
}
.rating-section .rating-stars {
  display:inline-flex;
  gap:6px;
  margin-left:8px;
}
.rating-section .rating-star {
  font-size:1.4rem;
  cursor:pointer;
  color:var(--accent);
  user-select:none;
}
.rating-section .rating-star:focus {
  outline:2px solid var(--accent2);
  outline-offset:2px;
}
.rating-section .rating-star[aria-checked="true"] {
  /* Met en évidence les étoiles sélectionnées en utilisant la seconde couleur d'accent */
  color:var(--accent2);
}
.rating-section .rating-star:hover {
  transform:scale(1.15);
}
/* Affichage de la note moyenne dans la fiche détaillée */
.rating-section .avg-rating {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--muted);
  display: block;
}
@media (max-width:640px) {
  .hero-inner {
    transform:perspective(700px) rotateX(4deg);
  }
  .hero-title {
    font-size:1.7rem;
  }
  .hero-header {
    padding:24px 10px 32px;
  }
}

/* === Grille films élargie + cartes lisibles === */
#films-container {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;
  padding:24px;
}
.film-card h3 {
  margin:0 0 8px;
  font-size:1.12rem;
  color:var(--accent);
  text-shadow:0 0 10px rgba(116,240,255,.6);
}

/* Badges meta sur les cartes */
.film-meta {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 4px;
}
.badge {
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:600;
}
.badge-year {
  background:rgba(116,240,255,0.16);
  color:var(--accent2);
}
.badge-decade {
  background:rgba(255,255,255,0.06);
  color:var(--text);
}
.badge-genre {
  background:rgba(255,120,180,0.16);
  color:var(--accent);
}
.film-director {
  margin-top:4px;
  color:var(--muted);
  font-size:0.9rem;
}


/* === Ambiance globale : grain, vignette et parallax doux === */

body::before {
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px);
  opacity:0.06;
  mix-blend-mode:soft-light;
  z-index:0;
}

body::after {
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.75) 100%);
  opacity:0.38;
  mix-blend-mode:multiply;
  z-index:0;
}

/* Calque parallax de projecteurs / bobines floutées */
#bg-parallax {
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(500px 260px at 10% 0, rgba(255,220,160,0.16), transparent 60%),
    radial-gradient(620px 320px at 90% 0, rgba(120,190,255,0.18), transparent 65%),
    radial-gradient(480px 260px at 15% 100%, rgba(255,120,190,0.14), transparent 70%);
  opacity:0.55;
  mix-blend-mode:screen;
  transform:translate3d(0,0,0);
}

/* S’assure que le contenu reste au dessus des calques */
body > * {
  position:relative;
  z-index:1;
}


/* === Micro interactions "magiques" === */

/* Surprends-moi : hover secousse + glow léger */
#random-btn {
  position:relative;
  overflow:hidden;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
#random-btn:hover {
  animation:ccrRandomShake 0.24s ease-in-out;
  box-shadow:0 0 22px rgba(255,220,160,0.9),0 0 34px rgba(116,240,255,0.6);
}
#random-btn:active {
  transform:translateY(1px) scale(0.98);
}

@keyframes ccrRandomShake {
  0% { transform:translateX(0); }
  25% { transform:translateX(-1px); }
  50% { transform:translateX(1px); }
  75% { transform:translateX(-0.5px); }
  100% { transform:translateX(0); }
}

/* Toast bas d'écran pour le film aléatoire */
#ccr-toast {
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translate3d(-50%,120%,0);
  background:rgba(8,8,20,0.96);
  color:#fef9ec;
  padding:9px 16px;
  border-radius:999px;
  font-size:0.9rem;
  box-shadow:0 8px 26px rgba(0,0,0,0.7),0 0 18px rgba(255,220,160,0.55);
  opacity:0;
  pointer-events:none;
  z-index:12000;
  white-space:nowrap;
}
#ccr-toast.ccr-toast-show {
  opacity:1;
  transform:translate3d(-50%,0,0);
  transition:opacity 0.28s ease, transform 0.28s ease;
}
#ccr-toast.ccr-toast-hide {
  opacity:0;
  transform:translate3d(-50%,120%,0);
  transition:opacity 0.32s ease, transform 0.32s ease;
}

/* Bouton "Suggérer un film" qui respire doucement */
#ideasBtn {
  animation:ccrIdeaPulse 4.2s ease-in-out infinite;
  transform-origin:center center;
}
@keyframes ccrIdeaPulse {
  0% { transform:scale(1); box-shadow:0 4px 12px rgba(0,0,0,0.45); }
  50% { transform:scale(1.06); box-shadow:0 8px 26px rgba(0,0,0,0.7); }
  100% { transform:scale(1); box-shadow:0 4px 12px rgba(0,0,0,0.45); }
}

/* Popup suggestion : fond vignetté plus cinéma */
#ideasPopup {
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.78) 0, rgba(0,0,0,0.92) 55%, rgba(0,0,0,0.98) 100%);
}

/* Cartes : fade-in léger à chaque render */
.film-card {
  opacity:0;
  transform:translateY(8px);
  animation:ccrCardIn 0.26s ease-out forwards;
}
@keyframes ccrCardIn {
  0% { opacity:0; transform:translateY(8px); }
  100% { opacity:1; transform:translateY(0); }
}


/* v1.9.5 bigger toast + ideas popup glow */
#ccr-toast {
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translate3d(-50%,140%,0);
  background:rgba(5,5,18,0.98);
  color:#fef9ec;
  padding:14px 26px;
  border-radius:999px;
  font-size:1.05rem;
  font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,0.85),0 0 26px rgba(255,220,160,0.75);
  opacity:0;
  pointer-events:none;
  z-index:12000;
  white-space:normal;
  max-width:90vw;
  text-align:center;
}
#ccr-toast.ccr-toast-show {
  opacity:1;
  transform:translate3d(-50%,0,0);
  transition:opacity 0.28s ease, transform 0.28s ease;
}
#ccr-toast.ccr-toast-hide {
  opacity:0;
  transform:translate3d(-50%,140%,0);
  transition:opacity 0.32s ease, transform 0.32s ease;
}

/* Popup Proposer un film plus lumineuse */
#ideasPopup {
  background:
    radial-gradient(ellipse at top, rgba(255,220,160,0.16) 0, rgba(0,0,0,0.9) 55%, rgba(0,0,0,0.98) 100%);
  border-radius:18px;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.9),
    0 0 32px rgba(255,220,160,0.65),
    0 0 46px rgba(116,240,255,0.5);
  border:1px solid rgba(255,220,160,0.55);
}
#ideasPopup h2 {
  text-align:center;
  margin-top:0;
  margin-bottom:12px;
  font-size:1.15rem;
  text-shadow:0 0 12px rgba(255,220,160,0.7);
}
#ideasPopup label {
  font-weight:500;
}
#ideasPopup button[type="submit"] {
  box-shadow:0 0 16px rgba(116,240,255,0.7);
}


/* v1.9.6 bigger toast (x1.5) + stronger ideas popup */
#ccr-toast {
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translate3d(-50%,160%,0);
  background:rgba(5,5,18,0.98);
  color:#fef9ec;
  padding:18px 32px;
  border-radius:999px;
  font-size:1.6rem;
  font-weight:700;
  box-shadow:0 12px 40px rgba(0,0,0,0.9),0 0 34px rgba(255,220,160,0.85);
  opacity:0;
  pointer-events:none;
  z-index:12000;
  white-space:normal;
  max-width:90vw;
  text-align:center;
}
#ccr-toast.ccr-toast-show {
  opacity:1;
  transform:translate3d(-50%,0,0);
  transition:opacity 0.28s ease, transform 0.28s ease;
}
#ccr-toast.ccr-toast-hide {
  opacity:0;
  transform:translate3d(-50%,160%,0);
  transition:opacity 0.32s ease, transform 0.32s ease;
}

/* Proposer un film : popup glow up fort */
#ideasPopup {
  background:
    radial-gradient(ellipse at top, rgba(255,220,160,0.22) 0, rgba(8,8,18,0.95) 52%, rgba(0,0,0,0.98) 100%);
  border-radius:20px;
  box-shadow:
    0 28px 70px rgba(0,0,0,0.95),
    0 0 38px rgba(255,220,160,0.9),
    0 0 52px rgba(116,240,255,0.7);
  border:1px solid rgba(255,220,160,0.8);
}
#ideasPopup h2 {
  text-align:center;
  margin-top:4px;
  margin-bottom:14px;
  font-size:1.25rem;
  font-weight:700;
  text-shadow:0 0 14px rgba(255,220,160,0.9);
}
#ideasPopup label {
  font-weight:600;
}
#ideasPopup button[type="submit"] {
  box-shadow:0 0 22px rgba(116,240,255,0.9);
}


/* v1.9.7 hover boutons popup + contraste intérieur */
#ideasPopup {
  padding-top:22px;
  padding-bottom:20px;
}
#ideasPopup input[type="text"],
#ideasPopup textarea {
  background-color:#050512;
  border:1px solid rgba(255,220,160,0.35);
  color:#fefefe;
}
#ideasPopup input[type="text"]:focus,
#ideasPopup textarea:focus {
  outline:none;
  border-color:rgba(116,240,255,0.9);
  box-shadow:0 0 12px rgba(116,240,255,0.7);
}

#ideasPopup button {
  transition:transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
#ideasPopup button:hover {
  transform:translateY(-1px);
  box-shadow:0 0 18px rgba(255,220,160,0.9),0 0 26px rgba(116,240,255,0.7);
}
#ideasPopup button:active {
  transform:translateY(0);
  box-shadow:0 0 10px rgba(0,0,0,0.7);
}


/* v1.9.8 Popup Proposer un film hyper glow */
#ideasPopup {
  background:
    radial-gradient(ellipse at top, rgba(255,220,160,0.26) 0, rgba(10,10,24,0.96) 52%, rgba(0,0,0,0.99) 100%);
  border-radius:22px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.96),
    0 0 42px rgba(255,220,160,0.95),
    0 0 60px rgba(116,240,255,0.8);
  border:1px solid rgba(255,220,160,0.9);
  padding:26px 32px 24px;
}

#ideasPopup h2 {
  text-align:center;
  margin-top:0;
  margin-bottom:18px;
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:0.02em;
  text-shadow:0 0 16px rgba(255,220,160,1);
}

#ideasPopup input[type="text"],
#ideasPopup textarea {
  background-color:#050512;
  border:1px solid rgba(255,220,160,0.5);
  color:#fefefe;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

#ideasPopup input[type="text"]::placeholder,
#ideasPopup textarea::placeholder {
  color:rgba(230,230,240,0.65);
}

#ideasPopup input[type="text"]:hover,
#ideasPopup textarea:hover {
  border-color:rgba(255,220,160,0.8);
}

#ideasPopup input[type="text"]:focus,
#ideasPopup textarea:focus {
  outline:none;
  border-color:rgba(116,240,255,0.95);
  background-color:#070720;
  box-shadow:0 0 18px rgba(116,240,255,0.9);
}

/* Boutons Envoyer et Fermer avec feedback visuel fort */
#ideasPopup button {
  transition:transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

#ideasPopup button:hover {
  transform:translateY(-1px);
  background-color:#ffe3b0;
  color:#101020;
  box-shadow:0 0 22px rgba(255,220,160,1),0 0 30px rgba(116,240,255,0.85);
}

#ideasPopup button:active {
  transform:translateY(0);
  box-shadow:0 0 10px rgba(0,0,0,0.8);
}

/* v1.9.8 Toast Ce soir : [titre] XXL */
#ccr-toast {
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translate3d(-50%,160%,0);
  background:rgba(5,5,18,0.98);
  color:#fef9ec;
  padding:18px 32px;
  border-radius:999px;
  font-size:1.6rem;
  font-weight:700;
  box-shadow:0 12px 40px rgba(0,0,0,0.9),0 0 34px rgba(255,220,160,0.85);
  opacity:0;
  pointer-events:none;
  z-index:12000;
  white-space:normal;
  max-width:90vw;
  text-align:center;
}

#ccr-toast.ccr-toast-show {
  opacity:1;
  transform:translate3d(-50%,0,0);
  transition:opacity 0.28s ease, transform 0.28s ease;
}

#ccr-toast.ccr-toast-hide {
  opacity:0;
  transform:translate3d(-50%,160%,0);
  transition:opacity 0.32s ease, transform 0.32s ease;
}

/* v1.9.9 UX polish : hover cartes + pagination plus lisible */

/* Hover cartes : highlight doux sur desktop uniquement */
@media (hover: hover) and (pointer: fine) {
  .film-card {
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, border-color 0.16s ease-out, background-color 0.16s ease-out;
  }
  .film-card:hover {
    transform: translateY(-2px);
    background-color: rgba(32, 25, 55, 0.96);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 220, 160, 0.85);
  }
}

/* Pagination plus visible */
.ccr-pagination {
  font-size: 0.95rem;
  font-weight: 500;
}

.ccr-pagination .page-indicator {
  padding: 0 10px;
  opacity: 0.9;
}


/* v1.9.10 Fix : popup inner + hover plus visible */

/* Popup : cibler la boîte interne et écraser les styles inline */
#ideasPopup {
  background: rgba(0,0,0,0.6);
}

#ideasPopup > div {
  background:
    radial-gradient(ellipse at top, rgba(255,220,160,0.26) 0, rgba(10,10,24,0.96) 52%, rgba(0,0,0,0.99) 100%) !important;
  border-radius:22px !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.96),
    0 0 42px rgba(255,220,160,0.95),
    0 0 60px rgba(116,240,255,0.8) !important;
  border:1px solid rgba(255,220,160,0.9) !important;
  max-width:460px !important;
}

#ideasPopup h3 {
  text-align:center;
  margin-top:0;
  margin-bottom:18px;
  font-size:1.3rem !important;
  font-weight:700;
  letter-spacing:0.02em;
  color:#ffd56a !important;
  text-shadow:0 0 16px rgba(255,220,160,1);
}

#ideasPopup input[type="text"],
#ideasPopup textarea {
  background-color:#050512 !important;
  border:1px solid rgba(255,220,160,0.5) !important;
  color:#fefefe !important;
  box-shadow:0 0 0 rgba(0,0,0,0) !important;
  transition:border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

#ideasPopup input[type="text"]::placeholder,
#ideasPopup textarea::placeholder {
  color:rgba(230,230,240,0.65);
}

#ideasPopup input[type="text"]:hover,
#ideasPopup textarea:hover {
  border-color:rgba(255,220,160,0.8) !important;
}

#ideasPopup input[type="text"]:focus,
#ideasPopup textarea:focus {
  outline:none;
  border-color:rgba(116,240,255,0.95) !important;
  background-color:#070720 !important;
  box-shadow:0 0 18px rgba(116,240,255,0.9) !important;
}

/* Boutons Envoyer et Fermer */
#ideasPopup button {
  border-radius:8px !important;
  border:none !important;
  background:#f7e2b6 !important;
  color:#141421 !important;
  font-weight:600;
  transition:transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

#ideasPopup button:hover {
  transform:translateY(-1px);
  background-color:#ffeac6 !important;
  box-shadow:0 0 22px rgba(255,220,160,1),0 0 30px rgba(116,240,255,0.85);
}

#ideasPopup button:active {
  transform:translateY(0);
  box-shadow:0 0 10px rgba(0,0,0,0.8);
}

/* Hover cartes plus marqué */
@media (hover: hover) and (pointer: fine) {
  .film-card {
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out, background-color 0.18s ease-out;
  }
  .film-card:hover {
    transform: translateY(-4px);
    background-color: rgba(60, 40, 90, 0.98);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.95);
    border-color: rgba(255, 220, 160, 0.95);
  }
}

/* Pagination : on stylera via classe ajoutée en JS (.ccr-pagination / .page-indicator) */
.ccr-pagination {
  font-size: 0.95rem;
  font-weight: 500;
  gap: 8px;
}

.ccr-pagination .page-indicator {
  padding: 0 10px;
  opacity: 0.9;
}


/* v1.9.11 Safe hover: légère élévation + ombre, sans changer les couleurs */
.film-card {
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

.film-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: rgba(116,240,255,.9);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.95), 0 0 32px rgba(108,244,255,0.7);
}


/* GlowStep focus & mobile hover */
.film-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

@media (max-width: 640px) {
  #films-container {
    padding: 16px 10px;
    gap: 14px;
  }
  .film-card {
    padding: 10px 10px 12px;
  }
  .film-card h3 {
    font-size: 0.98rem;
  }
  .film-card p,
  .film-director {
    font-size: 0.88rem;
  }
  .film-meta {
    margin: 4px 0 2px;
    gap: 4px;
  }
  .film-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
}


/* Mise en avant de la carte liée au Film du jour */
.film-card.highlight-featured {
  box-shadow: 0 0 0 2px var(--accent2), 0 0 32px rgba(183,125,255,0.85);
  transform: translateY(-6px);
  animation: featuredPulse 1.1s ease-out 2;
}

@keyframes featuredPulse {
  0% { box-shadow: 0 0 0 0 rgba(183,125,255,0.0); }
  40% { box-shadow: 0 0 0 3px rgba(183,125,255,0.95); }
  100% { box-shadow: 0 0 0 0 rgba(183,125,255,0.0); }
}



/* GlowStep final desktop override */
@media (hover: hover) and (pointer: fine) {
  .film-card:hover {
    transform: translateY(-18px) scale(1.05) !important;
    border-color: rgba(190,250,255,1) !important;
    box-shadow:
      0 30px 70px rgba(0,0,0,0.98),
      0 0 22px rgba(108,244,255,0.95),
      0 0 46px rgba(183,125,255,0.95) !important;
  }
}

@media (max-width: 540px) {
  header {
    padding: 22px 10px 26px;
  }
}



.films-error {
  text-align:center;
  margin:40px 0;
  font-size:0.95rem;
  opacity:0.86;
}






.rb-meta {
  margin: 4px 0 8px;
  font-size: 0.9rem;
  color: var(--muted);
}
@media (max-width: 640px) {
  .rb-meta {
    font-size: 0.86rem;
  }
}

/* v2.0.8 : tagline en orange vif */
.hero-tagline{
  color:#ff8a00 !important;
  text-shadow:0 0 12px rgba(255,138,0,.55),0 0 26px rgba(255,200,120,.25) !important;
}
.hero-tagline .hero-tag-letter{
  color:inherit !important;
  text-shadow:inherit !important;
}

/* v2.0.8 fallback posters */
.poster-thumb.poster-fallback{object-fit:cover;}


/* v2.0.9 : fallback posters (cats) + note claire */
.film-poster{position:relative;overflow:hidden;}
.poster-thumb.poster-fallback{object-fit:cover;object-position:50% 72%;transform:scale(1.06);}
.poster-fallback-note{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.55);
  color:rgba(255,255,255,.94);
  font-weight:700;
  font-size:12px;
  line-height:1.25;
  text-align:center;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.film-poster.poster-missing .poster-fallback-note{
  opacity:1;
  transform:none;
}

/* Hide fallback text when fallback poster used */
.poster.fallback + .poster-message, .poster.fallback-text { display: none !important; }


/* === Fix : cartes XXL quand la recherche renvoie peu de résultats === */
#films-container.ccr-results-few {
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: center;
}
#films-container.ccr-results-few .film-card {
  width: 100%;
  max-width: 280px;
  justify-self: center;
  padding: 14px;
}
@media (max-width: 640px) {
  #films-container.ccr-results-few {
    grid-template-columns: repeat(auto-fit, minmax(140px, 200px));
  }
  #films-container.ccr-results-few .film-card {
    max-width: 200px;
    padding: 10px 10px 12px;
  }
}