/* ================================
   AFO – Bloc "Autre projection du même film" (liste simple)
   ================================ */

.proj-meme-film-list {
  margin: 64px 0px 32px 0px;
  font-family: inherit;
}

.proj-meme-film-list .pmfl-title {
  margin: 0 0 24px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  color: var(--global-palette1);
}

/* ===== Filtres (form + select) : EXACTEMENT comme "même partenaire" ===== */

.proj-meme-film-list .proj-filters {
  margin: 0 0 16px;
}

.proj-meme-film-list .proj-filters form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: flex-end;
}

.proj-meme-film-list .proj-filters .f-row {
  min-width: 200px;
}

.proj-meme-film-list .proj-filters label span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* === SELECT – même style que sur la MAP === */
.proj-meme-film-list .proj-filters select,
.proj-meme-film-list .proj-filters .pp-select {
  width: 100%;
  max-width: 260px;
  min-height: 52px;

  padding: 10px 42px 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--global-palette1);
  background-color: #ffffff;

  font-size: 16px;
  line-height: 1.3;
  color: #000;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23000000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;

  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Focus clavier fort (WCAG) : anneau rose */
.proj-meme-film-list .proj-filters .pp-select:hover,
.proj-meme-film-list .proj-filters .pp-select:focus,
.proj-meme-film-list .proj-filters .pp-select:focus-visible {
  outline: 2px solid var(--global-palette2);
  outline-offset: 2px;
}

/* État "filtré" : halo rose permanent */
.proj-meme-film-list .proj-filters .pp-select.is-filtered {
  outline: 2px solid var(--global-palette2);
  outline-offset: 2px;
}

/* IE/Edge legacy */
.proj-meme-film-list .proj-filters .pp-select::-ms-expand {
  display: none;
}

.proj-meme-film-list .proj-filters .f-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===== Boutons filtres – pastilles comme projection-map.css ===== */

.proj-meme-film-list .proj-filters .btn-primary,
.proj-meme-film-list .proj-filters .btn-ghost {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 32px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  white-space: nowrap;
}

/* Filtrer = violet */
.proj-meme-film-list .proj-filters .btn-primary {
  background: var(--global-palette1);
  color: #fff;
}

/* Réinitialiser = rose */
.proj-meme-film-list .proj-filters .btn-ghost {
  background: var(--global-palette2);
  color: #fff;
}

.proj-meme-film-list .proj-filters .btn-primary:hover { background: var(--global-palette1); }
.proj-meme-film-list .proj-filters .btn-ghost:hover  { background: var(--global-palette2); }

.proj-meme-film-list .proj-filters .btn-primary:focus-visible,
.proj-meme-film-list .proj-filters .btn-ghost:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

.proj-meme-film-list .proj-filters .btn-primary[disabled],
.proj-meme-film-list .proj-filters .btn-ghost[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* ---------- Liste verticale ---------- */

.pmfl-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Ligne cliquable ---------- */

.pmfl-item {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;

  padding: 18px 24px;
  border-radius: 0;
  border: 2px solid var(--global-palette1);
  border-left-width: 10px;

  background-color: #ffffff;
  text-decoration: none;
  color: var(--global-palette1);

  transition:
    background-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease,
    border-color .18s ease;
}

.pmfl-item:hover,
.pmfl-item:focus-visible {
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transform: translateY(-1px);
  outline: none;
}

/* Zone texte à gauche */
.pmfl-main { flex: 1 1 auto; }

.pmfl-date {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
}

.pmfl-place {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

/* Bouton œil à droite */
.pmfl-eye-btn {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;

  border-radius: 16px;
  background-color: var(--global-palette2);
  border: 2px solid var(--global-palette2);

  align-self: center;
  display: inline-block;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    transform .12s ease;
}

/* Icône œil 50x50 (blanc sur fond rose) */
.pmfl-eye-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' fill='none'%3E%3Cpath d='M25.0007 18.75C26.6583 18.75 28.248 19.4085 29.4201 20.5806C30.5922 21.7527 31.2507 23.3424 31.2507 25C31.2507 26.6576 30.5922 28.2473 29.4201 29.4194C28.248 30.5915 26.6583 31.25 25.0007 31.25C23.343 31.25 21.7533 30.5915 20.5812 29.4194C19.4091 28.2473 18.7507 26.6576 18.7507 25C18.7507 23.3424 19.4091 21.7527 20.5812 20.5806C21.7533 19.4085 23.343 18.75 25.0007 18.75ZM25.0007 9.375C35.4173 9.375 44.3131 15.8542 47.9173 25C44.3131 34.1458 35.4173 40.625 25.0007 40.625C14.584 40.625 5.68815 34.1458 2.08398 25C5.68815 15.8542 14.584 9.375 25.0007 9.375ZM6.62565 25C8.30951 28.4381 10.9242 31.3349 14.1725 33.3609C17.4208 35.387 21.1723 36.4611 25.0007 36.4611C28.829 36.4611 32.5805 35.387 35.8288 33.3609C39.0771 31.3349 41.6918 28.4381 43.3756 25C41.6918 21.5619 39.0771 18.6651 35.8288 16.6391C32.5805 14.613 28.829 13.5389 25.0007 13.5389C21.1723 13.5389 17.4208 14.613 14.1725 16.6391C10.9242 18.6651 8.30951 21.5619 6.62565 25Z' fill='white'/%3E%3C/svg%3E");
}

/* Hover/focus : inversion (fond blanc, œil rose) */
.pmfl-item:hover .pmfl-eye-btn,
.pmfl-item:focus-visible .pmfl-eye-btn {
  background-color: #ffffff;
  border-color: var(--global-palette2);
  transform: scale(1.03);
}

.pmfl-item:hover .pmfl-eye-btn::before,
.pmfl-item:focus-visible .pmfl-eye-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' fill='none'%3E%3Cpath d='M25.0007 18.75C26.6583 18.75 28.248 19.4085 29.4201 20.5806C30.5922 21.7527 31.2507 23.3424 31.2507 25C31.2507 26.6576 30.5922 28.2473 29.4201 29.4194C28.248 30.5915 26.6583 31.25 25.0007 31.25C23.343 31.25 21.7533 30.5915 20.5812 29.4194C19.4091 28.2473 18.7507 26.6576 18.7507 25C18.7507 23.3424 19.4091 21.7527 20.5812 20.5806C21.7533 19.4085 23.343 18.75 25.0007 18.75ZM25.0007 9.375C35.4173 9.375 44.3131 15.8542 47.9173 25C44.3131 34.1458 35.4173 40.625 25.0007 40.625C14.584 40.625 5.68815 34.1458 2.08398 25C5.68815 15.8542 14.584 9.375 25.0007 9.375ZM6.62565 25C8.30951 28.4381 10.9242 31.3349 14.1725 33.3609C17.4208 35.387 21.1723 36.4611 25.0007 36.4611C28.829 36.4611 32.5805 35.387 35.8288 33.3609C39.0771 31.3349 41.6918 28.4381 43.3756 25C41.6918 21.5619 39.0771 18.6651 35.8288 16.6391C32.5805 14.613 28.829 13.5389 25.0007 13.5389C21.1723 13.5389 17.4208 14.613 14.1725 16.6391C10.9242 18.6651 8.30951 21.5619 6.62565 25Z' fill='%23e5007d'/%3E%3C/svg%3E");
}

/* Accessible "sr-only" locale */
.proj-meme-film-list .sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ========================
   Responsive
   ======================== */

@media (max-width: 900px) {
  .pmfl-item {
    padding: 14px 16px;
    gap: 16px;
  }

  .pmfl-date { font-size: 16px; }
  .pmfl-place { font-size: 14px; }

  .pmfl-eye-btn {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }
}

@media (max-width: 600px) {
  .pmfl-item { align-items: center; }
  .proj-meme-film-list .pmfl-title { font-size: 30px; line-height:38px;}
}