:root{
	/* Couleurs / dimensions globales */
	--form-gap: 12px;
	--form-max-width: 760px;
	--form-padding: 24px;
	--bg-form: transparent;
	--control-bg: transparent;
	--control-border: var(--app-control-border, rgba(255, 255, 255, 0.24));
	--accent: var(--app-btn-bg, #28a745);
	--text: var(--text-color, #fff);
	--muted: var(--app-muted-text-color, #bdbdbd);
	--radius: var(--app-card-radius, 12px);

	/* tiles */
	--tile-w: 200px;
	--tile-h: 280px;
	--tile-gap: 18px;
	--bg: #1c1c1c;
	--caption-bg: rgba(0,0,0,0.45);
	--caption-bg-hover: rgba(0,0,0,0.6);
}

/* ===========================
   Aides optionnelles (admin films)
   =========================== */
.saga-optional-panel {
  --saga-panel-border: #c82333;
  --saga-panel-bg: #fff5f5;
  --saga-title-color: #a71d2a;
  --saga-alert-border: #f1b0b7;
  --saga-alert-bg: #ffffff;
  --saga-alert-text: #7d1b25;
  border: 1px solid var(--saga-panel-border);
  background: var(--saga-panel-bg);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 14px;
}

.saga-optional-panel .saga-optional-title {
  margin: 0 0 8px;
  color: var(--saga-title-color);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.saga-optional-panel .form-row {
  margin-left: 0;
  margin-right: 0;
}

.saga-optional-panel .alert {
  border-color: var(--saga-alert-border);
  background: var(--saga-alert-bg);
  color: var(--saga-alert-text);
}

.optional-help-note {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.55rem;
  border-left: 3px solid #c82333;
  border-radius: 4px;
  background: rgba(200, 35, 51, 0.08);
  color: #7d1b25;
  font-size: 0.75rem;
  line-height: 1.3;
}

html[data-theme='dark'] .saga-optional-panel {
  --saga-panel-border: #e06666;
  --saga-panel-bg: #2a1518;
  --saga-title-color: #ff9b9b;
  --saga-alert-border: #7a343b;
  --saga-alert-bg: #1f1719;
  --saga-alert-text: #ffd7d7;
}

html[data-theme='light'] .saga-optional-panel {
  --saga-panel-border: #c82333;
  --saga-panel-bg: #fff5f5;
  --saga-title-color: #a71d2a;
  --saga-alert-border: #f1b0b7;
  --saga-alert-bg: #ffffff;
  --saga-alert-text: #7d1b25;
}

html[data-theme='dark'] .optional-help-note {
  border-left-color: #e06666;
  background: rgba(224, 102, 102, 0.16);
  color: #ffd7d7;
}

html[data-theme='light'] .optional-help-note {
  border-left-color: #c82333;
  background: rgba(200, 35, 51, 0.08);
  color: #7d1b25;
}

/* ===========================
   Formulaire d'édition d'acteur (affinement contextuel)
   =========================== */

/* Applique le layout film seulement aux formulaires spécifiques au domaine film */
.edit-actor-wrapper,
.edit-film-form,
.actors-edit-form {
	max-width: var(--form-max-width);
	margin: 0 auto;
	padding: var(--form-padding);
	background: var(--bg-form);
	border-radius: var(--radius);
	box-shadow: 0 2px 8px rgba(128, 128, 128, 0.1);
	box-sizing: border-box;
	border: 1px solid var(--control-border);
}

/* Affinement des form-groups seulement dans film */
.edit-actor-wrapper .form-group,
.edit-film-form .form-group,
.actors-edit-form .form-group {
	margin-bottom: 18px;
}

.edit-actor-wrapper .form-group label,
.edit-film-form .form-group label,
.actors-edit-form .form-group label {
	display:block;
	margin-bottom:6px;
	font-weight:700;
	color: var(--accent);
}
.edit-actor-wrapper {
	max-width: 760px;
	width: 90%;
	margin: 24px auto;
	padding: 20px 22px;
	background: rgba(0, 0, 0, 0.03);
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
	box-sizing: border-box;
}
.edit-actor-wrapper .form-control,
.edit-actor-wrapper .profile-input,
.edit-actor-wrapper textarea { width:100%; box-sizing:border-box; }
.edit-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }

/* actor profile preview */
.actor-profile { width: 140px; height: 140px; margin: 0 auto 12px; display:flex; align-items:center; justify-content:center; }
.actor-profile img { width:100%; height:100%; object-fit:cover; border-radius:50%; border:2px solid rgba(0,0,0,0.15); box-shadow:0 6px 18px rgba(0,0,0,0.35); }
.actor-votes { width: fit-content; max-width: 100%; }
.actor-votes-actions { justify-content: center; gap: 18px; flex-wrap: nowrap; }
.actor-votes .vf-vote-form {
  display: inline-flex;
  align-items: center;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.actor-votes .vf-vote-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text-color);
  font-weight: 600;
  box-shadow: none;
}
.actor-votes .vf-vote-btn:hover:not(:disabled),
.actor-votes .vf-vote-btn:focus-visible:not(:disabled) {
  background: transparent !important;
  opacity: 0.82;
}
.actor-votes .vf-vote-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.actor-votes .vf-votes-alert { margin-bottom: 8px; text-align: center; }
.actor-votes .vf-vote-btn strong { min-width: 0; }
.actor-votes .vf-vote-btn i { font-size: 1.05rem; }
.profile-input { display:block; margin:8px auto 0; width:100%; max-width:320px; }

/* ===========================
   Tiles / vignettes films
   =========================== */
.film-list{
	display:flex;
	flex-wrap:wrap;
	gap:var(--tile-gap);
	justify-content:center;
	margin-top:16px;
}
.film-item{
	width: var(--tile-w);
	height: var(--tile-h);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
	overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	position: relative;
	text-align:center;
	display:flex;
	align-items:stretch;
}
.film-item:hover{
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.3);
}
.film-item a{ display:block; color:inherit; text-decoration:none; width:100%; height:100%; }
.film-item img{ display:block; width:100%; height:100%; object-fit:cover; }
.film-item h3{ margin:8px 0; font-size:1.1em; }

/* film-thumb overlay (category.php & view_film similar) */
.film-thumb{ position:relative !important; width:100%; height:100%; overflow:hidden; border-radius:8px; background:#111; display:block; }
.film-thumb img{ width:100%; height:100%; object-fit:cover; }

.film-thumb .film-age-badge-image {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

/* ===========================
  Unified film card overlays
  (category.php, view_acteur.php, list_category.php)
  =========================== */
.film-year-badge,
.view-film-year-band,
.film-subtitle-badge,
.view-film-subtitle-band {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  text-align: center;
  pointer-events: none;
}

.film-year-badge,
.view-film-year-band {
  top: 0;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ===========================
   Unified age rating badge (.age-badge)
   Inline pill par défaut ; overlay absolu à l’intérieur de .film-thumb
   Ancien alias : .film-age-badge
   =========================== */
.film-age-badge,
.age-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #111;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(2px);
  white-space: nowrap;
}

.film-thumb .film-age-badge,
.film-thumb .age-badge {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
}

.film-age-badge i,
.age-badge i {
  font-size: 0.8rem;
}

.film-age-badge__text,
.age-badge__text {
  display: inline-block;
  min-width: 26px;
}

.film-age-badge--age-10,
.age-badge--age-10 {
  background: rgba(214, 27, 27, 0.92);
  color: #ffffff;
  border-color: rgba(125, 15, 15, 0.95);
}

.film-age-badge--age-12,
.age-badge--age-12 {
  background: rgba(232, 113, 18, 0.92);
  color: #ffffff;
  border-color: rgba(156, 70, 5, 0.92);
}

.film-age-badge--age-16,
.age-badge--age-16 {
  background: rgba(235, 196, 26, 0.94);
  color: #2b2100;
  border-color: rgba(166, 132, 0, 0.92);
}

.film-age-badge--age-18,
.age-badge--age-18 {
  background: rgba(77, 10, 10, 0.96);
  color: #ffffff;
  border-color: rgba(28, 0, 0, 0.96);
}

.film-age-badge--tp,
.age-badge--tp {
  background: rgba(30, 160, 80, 0.90);
  color: #ffffff;
  border-color: rgba(15, 100, 45, 0.92);
}

.film-age-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(240, 180, 41, 0.15);
  color: #f0b429;
  border: 1px solid rgba(240, 180, 41, 0.28);
  font-weight: 800;
}

.film-subtitle-badge,
.view-film-subtitle-band {
  bottom: 0;
  padding: 6px 10px;
  font-size: 0.70rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-film-item-title {
  color: #fff !important;
  font-size: 0.9rem;
  padding: 8px 10px;
  margin: 0;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.view-film-item-title-center {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
}
.film-thumb .caption{ position:absolute; inset:0; background: transparent; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; box-sizing:border-box; transition: opacity .18s ease; pointer-events:none; }
.film-thumb:hover .caption{ background: transparent; }
.film-thumb .caption-inner{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 12px; box-sizing:border-box; pointer-events:auto; color:var(--text); }
.film-title{
  font-size: 0.98rem;
  font-weight:700;
  margin:0;
  line-height:1.15;
  color:var(--text);
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.55) !important;
  padding:8px 10px !important;
  border-radius:0 !important;
  display:block;
  width:100%;
  max-width:none;
  text-align:center;
  box-sizing:border-box;
}
.film-subtitle{ font-size: 0.72rem; font-weight:400; margin-top:6px; color:var(--muted); opacity:0.95; line-height:1.1; }

/* responsive tiles */
@media (max-width:1200px){ :root{ --tile-w:180px; --tile-h:252px; } }
@media (max-width:992px){  :root{ --tile-w:160px; --tile-h:224px; } }
@media (max-width:576px){  :root{ --tile-w:140px; --tile-h:196px; } }
@media (max-width:600px){
	.film-item, .film-caption{ width:48% !important; min-width:0 !important; height:auto; }
	.film-thumb img{ height:160px; object-fit:cover; }
	.film-title{ font-size:0.95rem; }
	.film-subtitle{ font-size:0.7rem; }
}

/* ===========================
   Categories list
   =========================== */
.category-list{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.category-item{ width:300px; background:var(--bg); border:2px solid var(--accent); border-radius:10px; overflow:hidden; position:relative; text-align:center; }
.category-item img{ width:100%; height:150px; object-fit:cover; }
.category-item h2{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text); background: rgba(0,0,0,0.35); padding:8px; margin:0; font-size:1rem; width:100%; border-radius:6px; }

.category-section {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 8px 22px rgba(0,0,0,0.14);
}

.category-section__header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.category-section-separator {
  margin: 18px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 1;
}

/* ===========================
   Series groups in category view
   =========================== */
.series-groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 16px;
}

.series-group {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

.series-group__header {
  display: block;
  margin-bottom: 18px;
  padding: 4px 2px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.series-group__headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.series-group__title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-color, #fff);
}

.series-group__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: #b8f7c7;
  font-size: 0.96rem;
  font-weight: 700;
  white-space: nowrap;
}

.series-group__list {
  margin-top: 0;
}

.series-group__seasons {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.season-group {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.season-group__header {
  display: block;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.season-group__headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.season-group__title {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-color, #fff);
}

.season-group__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: #f1f1f1;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}

.series-group-separator {
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 1;
}

@media (max-width: 576px) {
  .series-group {
    padding: 14px;
  }

  .series-group__headline,
  .season-group__headline {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===========================
   Actors list & search suggestions
   =========================== */
.actor-list .actor-item img { width:120px; height:120px; object-fit:cover; border-radius:50%; }
.actor-list .actor-item h2 { margin-top:8px; font-size:1.1em; }
.actor-list .actor-item small { display:block; margin-top:4px; color:#bbb; }

/* suggestions dropdown */
#actor-suggestions { margin:0; padding:0; list-style:none; border:1px solid rgba(0,0,0,0.08); border-radius:6px; background:#fff; max-height:360px; overflow:auto; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
#actor-suggestions .suggest-item { display:flex; gap:8px; align-items:center; padding:6px 8px; cursor:pointer; border-bottom:1px solid rgba(0,0,0,0.03); background: transparent; transition: background .18s ease; }
#actor-suggestions .suggest-item:last-child { border-bottom: none; }
#actor-suggestions .suggest-item img { width:36px; height:36px; object-fit:cover; border-radius:50%; flex:0 0 36px; }
#actor-suggestions .suggest-item .s-name {
	display:block;
	color:#222;
	font-size:0.95rem;
	line-height:1.1;
	opacity: 1;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 8px;
}
#actor-suggestions .suggest-item:hover { background: rgba(0,0,0,0.03); }
#actor-suggestions .no-results { padding:8px; color:#888; background:#fff; }

/* ===========================
   Generic suggestion dropdown (lisible)
   Utilisation HTML:
   <div class="suggest-wrap">
     <input class="form-control" ...>
     <ul class="suggest-dropdown">
       <li class="suggest-item">
         <img class="s-avatar" src="..." alt="">
         <div class="s-text">
           <div class="s-name">Nom lisible</div>
           <div class="s-meta">info secondaire optionnelle</div>
         </div>
       </li>
     </ul>
   </div>
   =========================== */
.suggest-wrap { position: relative; width: 100%; max-width: 360px; }
.suggest-dropdown {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 9999; /* au-dessus du contenu */
  display: none;              /* afficher via JS */
  max-height: 360px;
  overflow: auto;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background .18s ease;
}
.suggest-item:last-child { border-bottom: none; }
.s-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 40px;
}
.s-text { display: flex; flex-direction: column; min-width: 0; }
.s-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: #222;
  /* toujours visible et lisible */
  opacity: 1;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-meta {
  font-size: 0.86rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-item:hover,
.suggest-item.active { background: rgba(0,0,0,0.04); }

/* Thème sombre */
@media (prefers-color-scheme: dark) {
  .suggest-dropdown {
    background: #222;
    color: #eee;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  }
  .suggest-item { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .s-name { color: #eee; }
  .s-meta { color: #bbb; }
  .suggest-item:hover,
  .suggest-item.active { background: rgba(255,255,255,0.06); }
  #actor-suggestions { background:#222; border-color: rgba(255,255,255,0.1); }
  #actor-suggestions .suggest-item { background:#222; }
  #actor-suggestions .suggest-item .s-name { color:#eee; }
  #actor-suggestions .no-results { color:#bbb; background:#222; }
}

/* small helper */
.placeholder-img { width:100%; height:auto; }

.search-result-item .col-md-3 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-result-item .col-md-3 img {
  max-width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
}