/* ==================================================================
   NOBUO GALERIE FILM
   Les couleurs reprennent les variables de la fiche film.
   Si le CSS de la fiche n'est pas charge, les valeurs de repli
   ci-dessous prennent le relais.
   ================================================================== */

.ngf{
  --g-bg:var(--nb-bg,#0c0c0d);
  --g-panel:var(--nb-panel,#131315);
  --g-line:var(--nb-line,#26262a);
  --g-line2:var(--nb-line2,#333337);
  --g-text:var(--nb-text,#d8d6d2);
  --g-muted:var(--nb-muted,#8c8b88);
  --g-dim:var(--nb-dim,#63625f);
  --g-accent:#b96565;

  position:relative;
  color:var(--g-text);
}

.ngf *,
.ngf *::before,
.ngf *::after{ box-sizing:border-box; }

.ngf .ngf-ico{ flex:0 0 auto; vertical-align:middle; }

.ngf-sr{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- BARRE DE FILTRES ---------- */
.ngf-barre{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:0 0 20px; margin:0 0 26px;
  border-bottom:1px solid var(--g-line);
}

.ngf-recherche{
  display:flex; align-items:center; gap:9px;
  flex:1 1 240px; min-width:200px; max-width:340px;
  padding:0 13px; height:40px;
  background:var(--g-panel); border:1px solid var(--g-line);
  color:var(--g-dim);
}
.ngf-recherche:focus-within{ border-color:var(--g-line2); }
.ngf-recherche input{
  flex:1 1 auto; width:100%; height:100%;
  background:none!important; border:0!important; outline:0!important; box-shadow:none!important;
  color:var(--g-text)!important; font-size:14px; padding:0!important; margin:0!important;
}
.ngf-recherche input::placeholder{ color:var(--g-dim); }
.ngf-recherche input::-webkit-search-cancel-button{ filter:invert(.6); }

.ngf-select{ position:relative; display:block; }
.ngf-select select{
  appearance:none; -webkit-appearance:none;
  height:40px; padding:0 34px 0 13px; margin:0!important;
  background:var(--g-panel)!important; border:1px solid var(--g-line)!important;
  color:var(--g-muted)!important; font-size:13px; line-height:38px;
  border-radius:0!important; box-shadow:none!important; cursor:pointer; max-width:220px;
}
.ngf-select select:hover{ color:var(--g-text)!important; border-color:var(--g-line2)!important; }
.ngf-select select:focus{ outline:0; border-color:var(--g-line2)!important; }
.ngf-select::after{
  content:""; position:absolute; right:13px; top:50%; margin-top:-3px;
  width:7px; height:7px; border-right:1px solid var(--g-muted); border-bottom:1px solid var(--g-muted);
  transform:rotate(45deg) translateY(-2px); pointer-events:none;
}
.ngf-select select option{ background:#141416; color:#d8d6d2; }
.ngf-select.is-actif select{ color:var(--g-accent)!important; border-color:#3a2222!important; }
.ngf-select-tri{ margin-left:auto; }

.ngf-reset{
  display:inline-flex; align-items:center; gap:7px;
  height:40px; padding:0 14px;
  background:none!important; border:1px solid var(--g-line)!important;
  color:var(--g-muted)!important; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border-radius:0!important; cursor:pointer; box-shadow:none!important;
}
.ngf-reset:hover{ color:#fff!important; border-color:var(--g-line2)!important; }

.ngf-compteur{
  flex:1 0 100%; margin:4px 0 0!important;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--g-dim)!important;
}

/* ---------- GRILLE ---------- */
.ngf-grille{
  list-style:none!important; margin:0!important; padding:0!important;
  display:grid; gap:26px 20px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
}

/* ---------- RANGEES ---------- */
.ngf-rangee{ margin:0 0 42px; }
.ngf-rangee-titre{
  display:flex; align-items:baseline; gap:12px;
  margin:0 0 14px!important; padding:0 0 10px;
  font-size:14px!important; letter-spacing:.18em; text-transform:uppercase;
  color:var(--g-muted)!important; font-weight:600; border-bottom:1px solid var(--g-line);
}
.ngf-rangee-titre a{ color:inherit!important; text-decoration:none!important; }
.ngf-rangee-titre a:hover{ color:#fff!important; }
.ngf-rangee-titre span{ font-size:11px; letter-spacing:.1em; color:var(--g-dim); }

.ngf-piste-wrap{ position:relative; }
.ngf-piste{
  list-style:none!important; margin:0!important; padding:2px 0 10px!important;
  display:grid; grid-auto-flow:column; grid-auto-columns:168px; gap:16px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:var(--g-line2) transparent;
}
.ngf-piste::-webkit-scrollbar{ height:5px; }
.ngf-piste::-webkit-scrollbar-track{ background:transparent; }
.ngf-piste::-webkit-scrollbar-thumb{ background:var(--g-line); }
.ngf-piste:hover::-webkit-scrollbar-thumb{ background:var(--g-line2); }
.ngf-piste > .ngf-carte{ scroll-snap-align:start; }

.ngf-fleche{
  position:absolute; top:0; bottom:14px; width:46px; z-index:3;
  display:none; align-items:center; justify-content:center;
  background:linear-gradient(to right,rgba(8,8,9,.96),rgba(8,8,9,0))!important;
  border:0!important; border-radius:0!important; box-shadow:none!important;
  color:var(--g-muted)!important; cursor:pointer; padding:0!important;
}
.ngf-fleche:hover{ color:#fff!important; }
.ngf-prec{ left:0; }
.ngf-suiv{ right:0; background:linear-gradient(to left,rgba(8,8,9,.96),rgba(8,8,9,0))!important; }
.ngf-piste-wrap.peut-prec .ngf-prec,
.ngf-piste-wrap.peut-suiv .ngf-suiv{ display:flex; }
@media (hover:none){ .ngf-fleche{ display:none!important; } }

/* ---------- CARTE ---------- */
.ngf-carte{ list-style:none!important; margin:0!important; padding:0!important; min-width:0; }
.ngf-carte[hidden]{ display:none!important; }

.ngf-lien{
  display:block; text-decoration:none!important; color:inherit!important;
  outline-offset:3px;
}

.ngf-visuel{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:2/3; background:#17171a;
  border:1px solid var(--g-line);
  transition:border-color .2s ease, transform .25s ease;
}
.ngf-visuel img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.7) contrast(1.06) brightness(.82);
  transition:filter .3s ease, transform .5s ease;
}
.ngf-lien:hover .ngf-visuel{ border-color:var(--g-line2); transform:translateY(-3px); }
.ngf-lien:hover .ngf-visuel img{ filter:saturate(1) contrast(1.02) brightness(1); transform:scale(1.04); }
.ngf-lien:focus-visible .ngf-visuel{ border-color:var(--g-accent); }

/* voile sombre permanent, leve au survol */
.ngf-visuel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%);
  transition:opacity .3s ease;
}
.ngf-lien:hover .ngf-visuel::after{ opacity:.4; }

.ngf-vide{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:14px; text-align:center;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#43424a;
}

.ngf-badge{
  position:absolute; left:0; top:0; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 9px;
  background:rgba(9,9,10,.88); backdrop-filter:blur(2px);
  border-right:1px solid var(--g-line); border-bottom:1px solid var(--g-line);
  font-size:11px; font-weight:600; color:#ddd9d2; font-variant-numeric:tabular-nums;
}
.ngf-badge .ngf-ico{ color:var(--g-accent); }

.ngf-infos{ display:block; padding:11px 2px 0; }
.ngf-titre{
  display:block; font-size:13px; font-weight:500; line-height:1.35;
  color:var(--g-text); font-weight:600;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ngf-lien:hover .ngf-titre{ color:#fff; }
.ngf-meta{ display:block; margin-top:3px; font-size:12px; color:var(--g-dim); font-variant-numeric:tabular-nums; }
.ngf-genres{
  display:block; margin-top:5px;
  font-size:11px; letter-spacing:.05em; color:#4e4d4a;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ngf-lien:hover .ngf-genres{ color:var(--g-muted); }

/* ---------- ETATS VIDES ---------- */
.ngf-vide-msg,
.ngf-rien{
  padding:44px 0; text-align:center;
  font-size:14px; color:var(--nb-dim,#63625f)!important;
}

/* ---------- MOBILE ---------- */
@media (max-width:640px){
  .ngf-grille{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:20px 14px; }
  .ngf-piste{ grid-auto-columns:132px; gap:12px; }
  .ngf-select-tri{ margin-left:0; }
  .ngf-select select{ max-width:none; width:100%; }
  .ngf-recherche{ max-width:none; flex:1 0 100%; }
}

/* ---------- ACCESSIBILITE ---------- */
@media (prefers-reduced-motion:reduce){
  .ngf *{ transition:none!important; scroll-behavior:auto!important; }
  .ngf-lien:hover .ngf-visuel{ transform:none; }
  .ngf-lien:hover .ngf-visuel img{ transform:none; }
}