/* Extracted from index.html <style> blocks (moved here) */

:root{--cc-header:140px;--cc-controls:210px}
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}
header{min-height:var(--cc-header)}
.filters{min-height:var(--cc-controls)}
#films-container{min-height:60vh}

/* Bouton Stats dans l’en-tête */
.stats-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 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:10px;}
/* 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:8px 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:10px 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:10px; margin:8px 0; border:1px solid #ccc; border-radius:6px; }
#ideaError{ color:#d33; display:none; margin-bottom:10px; }
#sendIdea{ padding:8px 14px; margin-right:6px; border-radius:6px; border:1px solid #333; background:#eee; cursor:pointer; }
#closeIdea{ padding:8px 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:12px;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:12px;padding:10px 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:10px 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:16px;margin:12px 0}
pre{white-space:pre-wrap;word-break:break-word;background:rgba(0,0,0,.35);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12)}
button{padding:10px 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:10px; 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) */