/* UI CLEAN overrides (v2.0.52)
   Objectif : supprimer les coutures entre sections, stabiliser les tailles de cartes, et éviter les overrides de fond agressifs.
*/

:root{--cc-header:140px;--cc-controls:210px}

/* Ne pas écraser le fond global défini dans style.v25.css */
html{overflow-y:scroll}
body{margin:0}

/* Sections : fond cohérent, pas de bordure qui coupe */
header,.hero-header{
  background:transparent !important;
  border-bottom:none !important;
}
.filters{
  background:rgba(10,10,30,.28) !important;
  border-top:none !important;
  border-bottom:none !important;
  box-shadow:none !important;
}
main#films-container{
  background:transparent !important;
}

/* Grille : largeur maîtrisée, cartes régulières */
#films-container{
  max-width:min(1700px, 96vw);
  margin:0 auto;
  padding:22px 10px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;
}
@media (max-width:640px){
  #films-container{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:16px 10px;}
}
@media (min-width:1600px){
  #films-container{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
}

/* Cartes : moins de démarcation, hover moins agressif */
.card,.film-card{
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.40) !important;
  background:linear-gradient(180deg, rgba(20,20,55,.92), rgba(10,10,30,.96)) !important;
}
.card:hover,.film-card:hover{
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.55) !important;
}

/* Images : ratio garanti, pas de stretching */
.card img,.film-card img,.grid img,.cards img{
  width:100%;
  height:auto;
  aspect-ratio:2/3;
  object-fit:cover;
  display:block;
}

/* Footer : pas de bande qui tranche */
footer{
  background:transparent !important;
  border-top:none !important;
}


/* Bouton Stats dans l’en-tête */
.stats-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 14px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, filter .12s ease, background .12s ease;
}
.stats-btn:hover{
  filter: brightness(1.1);
  background: rgba(255,255,255,.10);
}
.stats-btn:active{
  transform: translateY(1px);
}
.controls-row{gap:14px;}
/* 1. Style du SÉLECTEUR DE THÈME (pilule) */
  #theme-select {
    appearance: none;           
    -webkit-appearance: none;   
    -moz-appearance: none;      
    
    background-color: #2b2d42;  
    color: #fff;                
    border: 1px solid #4b4e6d;  
    
    height: 42px;               
    line-height: 1.2;           
    padding: 0 35px 0 15px;     
    border-radius: 21px;        
    
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin: 0 8px;              
    vertical-align: middle;     
    
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
  }

  #theme-select:hover {
    background-color: #3b3e5a;  
    border-color: #777;
  }
  
  #theme-select:focus {
    outline: none;
    border-color: #8c7ae6;      
  }

  #theme-select option {
    background-color: #1a1c2e;
    color: #fff;
    padding: 10px;
  }

  /* 2. STYLE "DISCRET" POUR LE BOUTON RÉINITIALISER ORIGINAL */
  /* On cible le bouton généré par le script à l'intérieur de .search-wrap */
  .search-wrap button {
      display: inline-block !important; /* On force l'affichage (au cas où il était masqué) */
      
      /* Look discret : Fond sombre, texte gris clair, petit */
      background-color: #1e2030 !important; 
      color: #ccc !important; 
      border: 1px solid #444 !important;
      
      font-size: 0.75rem !important; /* Texte petit */
      padding: 4px 12px !important;  /* Bouton fin */
      border-radius: 12px !important; /* Arrondi doux */
      margin-top: 8px !important;    /* Espace sous la barre */
      
      cursor: pointer;
      box-shadow: none !important;
      transition: all 0.2s;
  }

  .search-wrap button:hover {
      background-color: #2b2d42 !important;
      color: #fff !important;
      border-color: #666 !important;
  }

  /* Si le script mettait ce bouton en position absolue bizarre, on le remet dans le flux normal */
  .search-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start; /* Aligne le bouton à gauche sous la barre (ou center si vous préférez) */
  }
  
  /* Sécurité : On masque tout bouton qui traînerait en dehors de la search-wrap et du random-btn */
  .filters > button:not(#random-btn) {
      display: none !important;
  }
html[data-theme="noirprestige"] body{
    background:
      radial-gradient(900px 420px at 18% 8%, rgba(121,182,255,0.16), transparent 70%),
      radial-gradient(900px 420px at 82% 10%, rgba(241,201,122,0.12), transparent 72%),
      linear-gradient(180deg, var(--bg), #05060a 72%);
  }

  .hero-sign::before{
    animation:none !important;
    opacity:0.25 !important;
    inset:-14% !important;
  }
  .hero-title{
    color:var(--accent) !important;
    text-shadow:
      0 0 10px rgba(241,201,122,0.85),
      0 0 28px rgba(121,182,255,0.55),
      0 10px 28px rgba(0,0,0,0.65) !important;
  }
  .hero-tagline{
    color:rgba(245,247,255,0.92) !important;
    font-size:1.06rem !important;
    line-height:1.35 !important;
    display:inline-block;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(8,10,18,0.58);
    border:1px solid rgba(241,201,122,0.18);
    box-shadow:0 10px 26px rgba(0,0,0,0.55);
    text-shadow:0 0 10px rgba(0,0,0,0.65);
  }
  .hero-tag-letter,.hero-tag-space{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
/* v1.4.0 inline fallback */
.grid > *, .cards > *, .card, .film-card, #results .card, #results .film-card {
  height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; display: block !important;
}
.card img, .film-card img, #results img, .grid img, .cards img { aspect-ratio: 2/3 !important; object-fit: cover; }
  @media (max-width: 768px) {
    }

  /* Effet warm-up + shiny pour le bouton Surprends‑moi */
  #random-btn{
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }
  #random-btn::before{
    content:'';
    position:absolute;
    inset:-10px;
    background:
      radial-gradient(circle at 30% 25%, rgba(255,210,140,0.55), rgba(255,120,60,0.18) 45%, rgba(0,0,0,0) 72%);
    opacity:0.55;
    filter: blur(10px);
    transform: scale(0.92);
    animation: randomWarmup 4.2s ease-in-out infinite;
    pointer-events:none;
    z-index:-1;
  }
  #random-btn::after{
    content:'';
    position:absolute;
    top:-60%;
    left:-120%;
    width:240%;
    height:240%;
    background: linear-gradient(45deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.25) 30%,
      rgba(255,230,180,0.75) 50%,
      rgba(255,255,255,0.25) 70%,
      rgba(255,255,255,0) 100%);
    transform: rotate(25deg);
    mix-blend-mode: screen;
    opacity:0.85;
    animation: randomShine 4.6s ease-in-out infinite;
    pointer-events:none;
    z-index:0;
  }
  #random-btn:hover::before{
    opacity:0.75;
    transform: scale(0.98);
  }
  #random-btn:hover::after{
    opacity:1;
  }
  @keyframes randomShine{
    0%   { left:-140%; opacity:0.15; }
    35%  { opacity:0.9; }
    55%  { left: 90%;  opacity:0.35; }
    100% { left: 90%;  opacity:0.0; }
  }
  @keyframes randomWarmup{
    0%, 100% { filter: blur(10px); transform: scale(0.92); }
    50%      { filter: blur(14px); transform: scale(1.02); }
  }
  @media (prefers-reduced-motion: reduce){
    #random-btn::before,
    #random-btn::after{ animation:none; }
  }
    to { left: 100%; }
  }
/* === CCR overrides (ex-inline + custom tweaks) v2.0.40 === */

.loading-text{ text-align:center; opacity:.7; }
.version{ opacity:.7; margin-top:6px; }
.sw-footer{ text-align:center; opacity:.5; font-size:.85rem; margin-top:6px; }
.ccr-footer-links{ text-align:center; opacity:.85; font-size:.95rem; margin-top:10px; }
.ccr-footer-links a{ color:inherit; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.35); padding-bottom:2px; }
#ios-img-test{ display:none; text-align:center; opacity:.9; margin:18px 0 8px 0; }
.ios-test-label{ font-size:.9rem; opacity:.75; margin-bottom:8px; }
.ios-test-img{ max-width:82%; height:auto; border-radius:14px; border:1px solid rgba(120,130,255,.25); }

/* Bouton idées + popup */
#ideasBtn{ position:fixed; right:22px; bottom:22px; background:#ffda6b; color:#000; padding:14px 18px; border-radius:24px; font-weight:600; z-index:10001; cursor:pointer; box-shadow:0 8px 28px rgba(0,0,0,.35); }
#ideasPopup{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:10000; justify-content:center; align-items:center; }
#ideasPopup .ideas-box{ background:#1b1e2d; color:#fff; padding:28px 26px; border-radius:14px; max-width:420px; width:90%; box-shadow:0 6px 20px rgba(0,0,0,.45); }
#ideasPopup h3{ margin-top:0; font-size:1.4rem; color:#ffd56a; }
#ideaTitle,#ideaMsg{ width:100%; padding:14px; margin:8px 0; border:1px solid #ccc; border-radius:6px; }
#ideaError{ color:#d33; display:none; margin-bottom:10px; }
#sendIdea{ padding:10px 14px; margin-right:6px; border-radius:6px; border:1px solid #333; background:#eee; cursor:pointer; }
#closeIdea{ padding:10px 14px; border-radius:6px; border:none; background:#ddd; cursor:pointer; }

/* Wishlist */
#wishlist-popup{ display:none; }

/* Scroll buttons */
#scroll-top-btn,#scroll-bottom-btn{ display:none; position:fixed; right:12px; width:42px; height:42px; line-height:42px; text-align:center; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#051020; font-size:1.4rem; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.4); z-index:10000; }
#scroll-top-btn{ bottom:92px; }
#scroll-bottom-btn{ bottom:42px; }

/* Résumé des filtres */
.active-filters{ margin-top:10px; font-size:.95rem; opacity:.92; text-align:center; }
.active-filters.is-hidden{ display:none; }
.active-filters .chip{ display:inline-block; margin:4px 6px 0 0; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.active-filters .count{ opacity:.85; margin-left:6px; }

/* Skeleton posters: shimmer overlay while loading */
.film-poster{ position:relative; overflow:hidden; }
.film-poster.loading::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,0) 90%); transform:translateX(-120%); animation:ccrShimmer 1.25s ease-in-out infinite; }
@keyframes ccrShimmer{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(120%);} }



/* === extracted from about.html === */

/* style block 1 from about.html */
html{overflow-y:scroll}
body{margin:0;background:#07070a;color:#f2f4f8;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif}


/* === extracted from stats.html === */

/* style block 1 from stats.html */
.stats-wrap{max-width:1100px;margin:0 auto;padding:22px 16px 60px}
    .stats-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
    .stats-title{font-size:1.35rem;font-weight:800;margin:0}
    .stats-sub{opacity:.75;margin:6px 0 0 0}
    .stats-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px 14px;margin-top:12px}
    .stats-row{display:flex;justify-content:space-between;gap:14px;padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
    .stats-row:last-child{border-bottom:none}
    .stats-left{min-width:0}
    .stats-film{font-weight:800;line-height:1.15}
    .stats-meta{opacity:.75;font-size:.95rem;margin-top:4px}
    .stats-right{text-align:right;white-space:nowrap}
    .stats-num{font-weight:800}
    .stats-small{opacity:.75;font-size:.9rem;margin-top:4px}
    .pill{display:inline-flex;align-items:center;gap:8px;padding:14px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:#f2f4f8;text-decoration:none;font-weight:700}
    .pill:hover{background:rgba(255,255,255,.06)}
    .muted{opacity:.75}
    .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
      .stats-last{opacity:.85;margin-top:10px;font-style:italic}


/* === extracted from diag.html === */

/* style block 1 from diag.html */
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:#0b0f1a;color:#e8eefc;margin:0;padding:24px}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:19px;margin:12px 0}
pre{white-space:pre-wrap;word-break:break-word;background:rgba(0,0,0,.35);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.12)}
button{padding:14px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#e8eefc;cursor:pointer}
small{opacity:.8}

/* Empty state (search) */
.empty-msg{ text-align:center; opacity:.7; margin-top:12px; }

/* Stats page (inline -> CSS) */
.stats-toolbar{ display:flex; gap:14px; flex-wrap:wrap; }
#statsList, #statsLastCommunity, #statsLastLocal, #statsDebug{ display:none; }
#statsLastCommunity, #statsLastLocal, #statsDebug{ margin-top:14px; }
#statsDebug{ margin-top:12px; }



/* Header banner: mobile sans crop, desktop inchangé (on ne touche pas au look PC) */

/* Desktop & tablette large: on laisse le hero cinéma du thème, on ajuste seulement
   la "capsule" qui contient l'image pour que ça ressemble à une carte. */
.hero-sign.hero-sign--image{
  border-radius:24px;
  padding:14px 18px;
}
.hero-banner{ display:block; }
.hero-banner img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:18px;
}

/* Mobile: on neutralise le tilt 3D et les pseudo-éléments qui peuvent provoquer
   des crops bizarres sur certains Android (Xiaomi, etc.). */
@media (max-width: 820px){
  .hero-inner{ transform:none !important; }
  .hero-sign.hero-sign--image{
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .hero-sign.hero-sign--image::before,
  .hero-sign.hero-sign--image::after{ display:none !important; }
  .hero-banner img{ border-radius:16px; }
}

@media (max-width: 640px){
  header.hero-header{ padding:16px 12px 18px; }
  .hero-counter{ margin-top:10px; }
}

/* === v2.0.42 : projecteur un poil plus rapide + glow latéral desktop === */

/* Projecteur (reflet) : accelere un peu, toujours en ping-pong */
.hero-sign::after{
  animation-duration: 5.1s !important;
}

/* Background floute sur tout le header (desktop) en re-utilisant la meme image que la bannière) */
header.hero-header{ position:relative; overflow:hidden; }
header.hero-header::before{
  content:"";
  position:absolute;
  inset:-64px;
  pointer-events:none;
  /* Plus visible : on garde le flou, mais on laisse "deviner" davantage les formes/lettres. */
  opacity:0.56;
  transform: scale(1.06);
  filter: blur(18px) saturate(1.22) contrast(1.18) brightness(0.96);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-image: url("../img/ccr_header_banner.v2.0.40.png");
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  header.hero-header::before{
    background-image: image-set(
      url("../img/ccr_header_banner.v2.0.40.webp") type("image/webp"),
      url("../img/ccr_header_banner.v2.0.40.png") type("image/png")
    );
  }
}
header.hero-header::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* Un poil moins sombre, pour que le fond flouté soit plus lisible sans nuire au texte. */
  background:
    radial-gradient(900px 340px at 50% 0%, rgba(0,0,0,0.10), rgba(0,0,0,0.78) 74%),
    linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.68));
}
.hero-inner{ position:relative; z-index:1; }

/* Mobile : on garde tres light pour éviter de charger, et on ne change pas le rendu */
@media (max-width: 820px){
  header.hero-header::before{ opacity:0.26; filter: blur(14px) saturate(1.08) contrast(1.08) brightness(0.98); }
  header.hero-header::after{ background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.72)); }
}

/* Sur mobile on ne touche a rien ici (pas d'effets parasites) */

/* PATCH 2026-01-20 : pastilles themes visibles sur mobile (iOS/Android)
   Force l'apparence des boutons et applique des gradients explicites. */
#theme-selector .theme-menu button[data-theme]{
  -webkit-appearance:none;
  appearance:none;
  background:#ffffff;
}
#theme-selector .theme-menu button[data-theme="noirprestige"]{ background:linear-gradient(90deg,#f1c97a,#79b6ff) !important; }
#theme-selector .theme-menu button[data-theme="midnightgold"]{ background:linear-gradient(90deg,#f5b642,#ffeb99) !important; }
#theme-selector .theme-menu button[data-theme="deepcosmos"]{ background:linear-gradient(90deg,#4db8ff,#7c9fff) !important; }
#theme-selector .theme-menu button[data-theme="crimsonnoir"]{ background:linear-gradient(90deg,#ff3b3b,#ff9f60) !important; }
#theme-selector .theme-menu button[data-theme="chromeobsidian"]{ background:linear-gradient(90deg,#8affea,#ffffff) !important; }
#theme-selector .theme-menu button[data-theme="vaporgape"]{ background:linear-gradient(90deg,#ff79e8,#b388ff) !important; }
#theme-selector .theme-menu button[data-theme="emeraldpulse"]{ background:linear-gradient(90deg,#00ff99,#00ffaa) !important; }
#theme-selector .theme-menu button[data-theme="retrosunset"]{ background:linear-gradient(90deg,#ff66c4,#ffb347) !important; }
#theme-selector .theme-menu button[data-theme="arcticwave"]{ background:linear-gradient(90deg,#60eaff,#c1fdff) !important; }
#theme-selector .theme-menu button[data-theme="toxicsynth"]{ background:linear-gradient(90deg,#9aff00,#ff55ff) !important; }
#theme-selector .theme-menu button[data-theme="infernoash"]{ background:linear-gradient(90deg,#ff5e00,#ffce7a) !important; }
#theme-selector .theme-menu button[data-theme="accessible"]{ background:linear-gradient(90deg,#ffcc00,#00bbff) !important; }


/* === CCR SERIES CATALOG : taille identique aux fiches film === */
#films-container.ccr-series-catalog{
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:18px !important;
  padding:24px !important;
}
#films-container.ccr-series-catalog .film-card.ccr-series-card{
  max-width:none !important;
  width:auto !important;
  justify-self:stretch !important;
}
/* Mobile : aligné sur les fiches film */
@media (max-width: 640px){
  #films-container.ccr-series-catalog{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important;
    gap:14px !important;
    padding:16px 10px !important;
  }
}
/* === CCR SERIES CATALOG COMPACT (Fix3) === */
#films-container.ccr-series-catalog{
  align-items:start !important;
  align-content:start !important;
}
#films-container.ccr-series-catalog .film-card.ccr-series-card{
  align-self:start !important;
  height:auto !important;
}
#films-container.ccr-series-catalog .film-card.ccr-series-card .film-poster{
  width:100% !important;
  aspect-ratio:2 / 3 !important;
  max-height:384px !important;
  overflow:hidden !important;
  border-radius:10px !important;
}
#films-container.ccr-series-catalog .film-card.ccr-series-card .poster-thumb{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
#films-container.ccr-series-catalog .film-card.ccr-series-card .film-meta{
  margin-top:10px !important;
}
@media (max-width: 640px){
  #films-container.ccr-series-catalog .film-card.ccr-series-card .film-poster{
    max-height:288px !important;
  }
}


/* === CCR_SERIES_CATALOG_COMPACT_V1 === */

#films-container.ccr-series-catalog{
  align-items:start;
  align-content:start;
  grid-auto-rows:auto;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  padding:19px;
}

#films-container.ccr-series-catalog .film-card.ccr-series-card{
  padding:14px;
}

#films-container.ccr-series-catalog .film-card.ccr-series-card:hover{
  transform:translateY(-6px) scale(1.01);
}

#films-container.ccr-series-catalog .film-card.ccr-series-card .film-poster{
  overflow:hidden;
  border-radius:10px;
}

#films-container.ccr-series-catalog .film-card.ccr-series-card img.poster-thumb{
  width:100%;
  display:block;
  max-height:384px;
  object-fit:cover;
}

@media (max-width: 640px){
  #films-container.ccr-series-catalog{
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:14px;
    padding:14px;
  }
  #films-container.ccr-series-catalog .film-card.ccr-series-card img.poster-thumb{
    max-height:288px;
  }
}



/* === CCR SERIES CATALOG : MATCH FILM CARD SIZE (Fix6) === */
#films-container.ccr-series-catalog{
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:18px !important;
  padding:24px !important;
  align-items:start !important;
  align-content:start !important;
}
#films-container.ccr-series-catalog .film-card.ccr-series-card{
  max-width:none !important;
  width:auto !important;
  justify-self:stretch !important;
  padding:14px !important;
  align-self:start !important;
  height:auto !important;
}
#films-container.ccr-series-catalog .film-card.ccr-series-card .film-poster{
  max-height:none !important;
  aspect-ratio:2 / 3 !important;
  overflow:hidden !important;
  border-radius:12px !important;
}
#films-container.ccr-series-catalog .film-card.ccr-series-card .poster-thumb{
  max-height:none !important;
  height:auto !important;
  width:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* === FIX7 : SERIES CATALOG MATCH FILM SIZE + HARD CACHE BUST === */
#films-container.ccr-series-catalog{
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:18px !important;
  padding:24px !important;
  align-items:start !important;
  align-content:start !important;
  grid-auto-rows:auto !important;
}

#films-container.ccr-series-catalog .film-card.ccr-series-card{
  padding:14px !important;
  height:auto !important;
  align-self:start !important;
  justify-self:stretch !important;
}

#films-container.ccr-series-catalog .film-card.ccr-series-card .film-poster{
  max-height:none !important;
  overflow:hidden !important;
  border-radius:12px !important;
}

#films-container.ccr-series-catalog .film-card.ccr-series-card img.poster-thumb{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block !important;
}

@media (max-width: 640px){
  #films-container.ccr-series-catalog{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important;
    gap:18px !important;
    padding:24px !important;
  }
}

/* === UI CLEAN FIX : recherche = cartes XXL / hauteur container === */
#films-container{ align-items: start; }
#films-container.ccr-search-active{
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  justify-content: center;
}
#films-container.ccr-search-active .film-card{ align-self: start; }

/* Poster : ratio piloté par le conteneur, pas par des effets de layout */
.film-poster{
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0,0,0,.10);
}
.film-poster img.poster-thumb{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* === UI CLEAN : WIDE PC LAYOUT (Fix7) === */
@media (min-width: 1200px){
  #films-container{ max-width: min(1800px, 97vw) !important; }
}
@media (min-width: 1600px){
  #films-container{ max-width: min(2000px, 97vw) !important; }
}
/* Keep search state consistent */
@media (min-width: 1200px){
  #films-container.ccr-search-active{ max-width: min(1800px, 97vw) !important; }
}

/* === UI HARMONY : HEADER vs CARDS (Fix8) === */
.header-hero, #hero, #header-hero, .hero, .top-hero{
  min-height: unset !important;
  height: auto !important;
}

#header, header, .site-header{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

#ccr-header-banner, .ccr-header-banner, .header-banner, #header-banner img, .header-banner img,
header img[alt*="Ciné"], header img[alt*="Cine"], header img[src*="ccr_header_banner"]{
  width: min(980px, 92vw) !important;
  max-height: clamp(170px, 22vh, 280px) !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

#header-banner, .header-banner, .banner-wrap, .hero-banner, .header-top{
  padding: 10px 0 6px 0 !important;
  margin: 0 auto !important;
}

#film-du-jour, .film-du-jour, #controls, .controls, .filters{
  margin-top: 10px !important;
}

@media (min-width: 1200px){
  .film-card, .movie-card, .card-film{
    border-radius: 16px !important;
  }
  .film-grid, .grid-films, #films-grid{
    gap: 18px !important;
  }
  #films-container{
    --ccr-card-min: 240px;
  }
  .film-grid, .grid-films, #films-grid{
    grid-template-columns: repeat(auto-fill, minmax(var(--ccr-card-min, 230px), 1fr)) !important;
  }
  #films-container.ccr-search-active{
    --ccr-card-min: 240px;
  }
}

/* === HEADER SPACING FIX (Fix9) === */
/* Move the counter up so it clears the header bottom line */
@media (min-width: 900px){
  .hero-counter-slot{ top: 46% !important; transform: translateY(55%) !important; }
}

/* Push Film du jour down so it never overlaps the header line */
.featured-film{ margin-top: 34px !important; }

/* === HEADER BANNER WIDER (Fix10) === */
/* Make the orange/gold CCR card feel less "lost" in the header on PC */
@media (min-width: 900px){
  #ccr-header-banner, .ccr-header-banner, .header-banner, #header-banner img, .header-banner img,
  header img[alt*="Ciné"], header img[alt*="Cine"], header img[src*="ccr_header_banner"]{
    width: min(1275px, 96vw) !important; /* ~980px * 1.30 */
  }
}

/* === HEADER BANNER WIDER + COLOR TUNE (Fix11) === */
/* Wider banner: +10% each side (extra +20% total vs previous step) */
@media (min-width: 900px){
  #ccr-header-banner, .ccr-header-banner, .header-banner, #header-banner img, .header-banner img,
  header img[alt*="Ciné"], header img[alt*="Cine"], header img[src*="ccr_header_banner"]{
    width: min(1530px, 97vw) !important;
  }
}

/* Kill the violet block under/around the banner and replace with warm cinema glow */
#header-banner, .header-banner, .banner-wrap, .hero-banner, .header-top,
.header-hero, #hero, #header-hero, .hero, .top-hero{
  background: radial-gradient(120% 90% at 50% 35%, rgba(255,150,70,0.18), rgba(10,10,14,0.88)) !important;
  border-color: rgba(255,170,90,0.14) !important;
}

/* If a pseudo panel sits behind the banner, soften it */
#header-banner::before, .header-banner::before, .hero-banner::before, .header-top::before,
#header-banner::after, .header-banner::after, .hero-banner::after, .header-top::after{
  opacity: 0.55 !important;
}

/* === HEADER BANNER EXTRA WIDE + REAL COLOR CHANGE (Fix12) === */
/* Banner: +15% each side, keep responsive cap */
@media (min-width: 900px){
  #ccr-header-banner, .ccr-header-banner, .header-banner img, #header-banner img,
  header img[src*="ccr_header_banner"], header img[alt*="Ciné"], header img[alt*="Cine"]{
    width: min(2000px, 98vw) !important;
  }
}

:root{
  --ccr-hero-base: rgba(10,10,12,0.92);
  --ccr-hero-glow: rgba(255,140,60,0.28);
  --ccr-hero-glow2: rgba(255,200,120,0.18);
  --ccr-hero-edge: rgba(255,170,90,0.26);
}

/* Replace the purple panel with a deep bronze/ember glow */
#header-banner, .header-banner, .banner-wrap, .hero-banner, .header-top,
.header-hero, #hero, #header-hero, .hero, .top-hero,
.hero-panel, .hero-shell, .hero-wrap, .hero-bg, .hero-card, .hero-frame,
#hero-panel, #hero-wrap, #hero-bg, #hero-card, #hero-frame{
  background: radial-gradient(140% 110% at 50% 40%, var(--ccr-hero-glow), var(--ccr-hero-base)) !important;
  border-color: var(--ccr-hero-edge) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.55), 0 0 42px rgba(255,120,40,0.22) !important;
}

/* Neutralize overlay layers */
#header-banner::before, .header-banner::before, .hero-banner::before, .header-top::before,
.hero-panel::before, .hero-shell::before, .hero-wrap::before, .hero-frame::before,
#header-banner::after, .header-banner::after, .hero-banner::after, .header-top::after,
.hero-panel::after, .hero-shell::after, .hero-wrap::after, .hero-frame::after{
  background: radial-gradient(140% 110% at 50% 40%, var(--ccr-hero-glow2), rgba(0,0,0,0)) !important;
  opacity: 0.8 !important;
}

/* If anything hardcodes violet inline, remove it */
[style*="purple"], [style*="#2b1"], [style*="rgb(60, 40"], [style*="rgba(60, 40"]{
  background: transparent !important;
}