/* ==========================================================================
   medias7 — surcharges des deux bibliotheques tierces conservees
   (raty pour les notes en etoiles, selectize pour les champs multi-valeurs)
   ========================================================================== */

/* ---------- raty ---------- */

.raty, div[id$="scoreDiv"] { display: inline-flex; align-items: center; gap: 0.15rem; }
.raty img, div[id$="scoreDiv"] img {
  width: 1.15rem;
  height: 1.15rem;
  cursor: pointer;
}
/* Les etoiles de raty sont des PNG clairs : on les teinte a l'accent. */
.raty img[src*="star-on"], div[id$="scoreDiv"] img[src*="star-on"] {
  filter: brightness(0) saturate(100%) invert(30%) sepia(88%) saturate(4500%) hue-rotate(327deg) brightness(102%) contrast(103%);
}
.raty img[src*="star-off"], div[id$="scoreDiv"] img[src*="star-off"] {
  filter: brightness(0) invert(1);
  opacity: 0.25;
}
.raty-cancel { opacity: 0.5; }

/* ---------- selectize ---------- */

.selectize-control { min-width: 0; }

.selectize-input,
.selectize-input.form-control {
  min-height: var(--touch);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgba(5, 7, 24, 0.58);
  box-shadow: none;
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.5rem 0.9rem;
}
.selectize-input.focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 11, 88, 0.16);
}
.selectize-input input { color: #fff; min-height: 0; padding: 0; }
/* Une pastille vide n'existe pas : selectize en fabrique une quand la valeur
   initiale du champ est une chaîne vide, que son delimiter découpe en un
   élément unique et creux. Le JS la prévient déjà en vidant l'input avant de
   s'initialiser ; cette règle est la ceinture. */
.selectize-input > .item:empty { display: none; }

.selectize-input > div,
.selectize-input > .item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(255, 11, 88, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(255, 11, 88, 0.16);
  color: #ff8bae;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  margin: 0.15rem 0.3rem 0.15rem 0;
}
.selectize-input > .item.active {
  background: rgba(255, 11, 88, 0.3);
  color: #fff;
}
.selectize-input .remove {
  border-left: 0;
  color: inherit;
  opacity: 0.7;
  padding-left: 0.3rem;
  text-decoration: none;
}
.selectize-input .remove:hover { opacity: 1; background: transparent; }

/* Le menu déroulant vit à l'intérieur du panneau qui porte le champ, et .panel
   a un backdrop-filter — lequel crée un contexte d'empilement. Un z-index posé
   ici ne suffit donc PAS à passer au-dessus des panneaux suivants : il faut
   élever le panneau lui-même, ce que fait .has-dropdown-ouvert, posée par
   js/movie/index/edit.js à l'ouverture. Les deux vont ensemble. */
.panel.has-dropdown-ouvert,
.form-row.has-dropdown-ouvert {
  position: relative;
  z-index: var(--z-dropdown);
}

.selectize-dropdown {
  z-index: var(--z-dropdown);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #131832;
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  font-size: 0.9rem;
}
.selectize-dropdown .option { padding: 0.55rem 0.9rem; }
.selectize-dropdown .active { background: rgba(255, 11, 88, 0.18); color: #fff; }
.selectize-dropdown .create { color: var(--muted); }
.selectize-dropdown .optgroup-header {
  background: transparent;
  color: var(--faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}