/* Page Films : le panneau « filmothèque » sous la grille de cubes, en-tête
   de la liste, ajout par recherche, filtres et tri, grille d'affiches avec la
   note, pied d'enregistrement, et ses trois boîtes de dialogue : la fiche
   modifiable, le nom d'une liste, et la fiche de lecture montrée au visiteur
   non connecté. Aucune couleur ici hors tokens. */

.filmo {
  padding: 0 var(--stage-pad-x);
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

.filmo__inner {
  display: grid;
  gap: 20px;
}

/* Champs et boutons : un seul rendu pour tout le panneau. */
.filmo input[type="search"],
.filmo input[type="text"],
.filmo select,
.editor input:not([type="radio"]):not([type="checkbox"]),
.editor textarea,
.listdlg input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-code);
  color: var(--text-primary);
  font: var(--fw-regular) var(--fs-m) / 1.35 var(--font-sans);
}

.filmo input::placeholder,
.editor input::placeholder {
  color: var(--text-muted);
}

.filmo input:focus-visible,
.filmo select:focus-visible,
.filmo button:focus-visible,
.editor input:focus-visible,
.editor textarea:focus-visible,
.editor button:focus-visible,
.listdlg input:focus-visible,
.listdlg button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.filmo__action,
.filmo__manual,
.editor__cancel,
.editor__remove,
.editor__save {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-primary);
  font: var(--fw-regular) var(--fs-s) / 1.2 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.filmo__action:hover,
.filmo__manual:hover,
.editor__cancel:hover {
  border-color: var(--text-primary);
}

/* Ce qui supprime est corail : texte et filet au repos, plein au survol.
   Même dessin que les autres boutons, seule la teinte le distingue. */
.filmo__action--danger,
.editor__remove {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}

.filmo__action--danger:hover,
.filmo__action--danger:focus-visible,
.editor__remove:hover,
.editor__remove:focus-visible {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-on-danger);
}

/* En-tête ------------------------------------------------------------- */

.filmo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
}

.filmo__title {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.filmo__meta {
  margin: 6px 0 0;
  min-height: 1.35em;
  font-size: var(--fs-s);
  color: var(--text-muted);
}

.filmo__list-actions {
  display: flex;
  gap: 8px;
}

.filmo__list-actions[hidden] {
  display: none;
}

/* Ajout par recherche ------------------------------------------------- */

.filmo__add {
  position: relative;
}

.filmo__add-row {
  display: flex;
  gap: 8px;
}

.filmo__search {
  flex: 1 1 auto;
}

.filmo__results {
  position: absolute;
  z-index: 3;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-width: 640px;
  max-height: min(60vh, 480px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--surface-face);
}

.filmo__results[hidden] {
  display: none;
}

.result {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.result:hover,
.result--active {
  background: var(--surface-side);
}

.result__thumb {
  display: block;
  width: 44px;
  height: 66px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-code);
}

.result__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result__text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.result__title {
  font-size: var(--fs-m);
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.result__meta {
  font-size: var(--fs-s);
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.result__badge {
  justify-self: start;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-note);
  color: var(--text-on-note);
  font-size: var(--fs-s);
}

.filmo__search-note {
  margin: 6px 0 0;
  font-size: var(--fs-s);
  color: var(--text-muted);
}

.filmo__search-note[hidden] {
  display: none;
}

/* Filtres et tri ------------------------------------------------------ */

.filmo__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.filmo__seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.filmo__seg-btn {
  padding: 7px 14px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: var(--fw-regular) var(--fs-s) / 1.2 var(--font-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.filmo__seg-btn + .filmo__seg-btn {
  border-left: 1px solid var(--border);
}

.filmo__seg-btn:hover {
  color: var(--text-primary);
}

.filmo__seg-btn[aria-pressed="true"] {
  background: var(--menu-active-bg);
  color: var(--menu-active-fg);
}

.filmo__seg-btn:focus-visible {
  outline-offset: -3px;
}

.filmo__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-s);
  color: var(--text-muted);
  white-space: nowrap;
}

.filmo__select {
  width: auto;
  padding: 7px 10px;
}

.filmo__filter {
  flex: 1 1 160px;
  max-width: 260px;
  margin-left: auto;
}

/* Grille d'affiches --------------------------------------------------- */

.filmo__status {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  font-size: var(--fs-m);
}

.filmo__status[hidden] {
  display: none;
}

.filmo__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card__btn {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.card__btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 4px;
}

.card__poster {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-side);
}

.card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-fade) ease-out;
}

.card__btn:hover .card__img {
  transform: scale(1.03);
}

/* Sans affiche : le titre, centré sur la face. */
.card__poster--empty {
  display: grid;
  place-items: center;
  padding: 12px;
  background: linear-gradient(160deg, var(--surface-face), var(--surface-side));
}

.card__poster-text {
  font-size: var(--fs-m);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  text-align: center;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Note (ambre) ou pastille « À voir », en haut à droite de l'affiche. */
.card__rating,
.card__flag {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.card__rating {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  background: var(--surface-note);
  color: var(--text-on-note);
  font: var(--fw-medium) var(--fs-m) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.card__flag {
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: var(--fs-s);
}

.card__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.card__title {
  font-size: var(--fs-m);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.card__meta,
.card__seen {
  font-size: var(--fs-s);
  color: var(--text-muted);
}

/* Pied : enregistrement ----------------------------------------------- */

.filmo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.filmo__storage {
  margin: 0;
  font-size: var(--fs-s);
  color: var(--text-muted);
}

.filmo__storage--error {
  color: var(--text-primary);
}

.filmo__foot-actions {
  display: flex;
  gap: 8px;
}

/* Boîtes de dialogue -------------------------------------------------- */

.filmo__dialog {
  box-sizing: border-box;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--surface-face);
  color: var(--text-primary);
}

.filmo__dialog::backdrop {
  background: var(--backdrop);
}

.listdlg {
  width: min(440px, calc(100vw - 32px));
}

.editor__form,
.listdlg__form {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.editor__title {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.editor__grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
}

.editor__poster {
  display: grid;
  place-items: center;
  align-self: start;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(160deg, var(--surface-face), var(--surface-side));
}

.editor__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editor__poster .card__poster-text {
  padding: 12px;
}

.editor__fields {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.editor__field {
  display: grid;
  gap: 5px;
}

.editor__label,
.editor fieldset > legend,
.editor__lists > legend {
  font-size: var(--fs-s);
  color: var(--text-muted);
}

.editor__two {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

.editor textarea {
  resize: vertical;
}

.editor fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.editor fieldset > legend {
  padding: 0;
  margin-bottom: 5px;
}

/* Type et statut : boutons radio en segments. */
.editor__seg-row {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.editor__seg-opt {
  position: relative;
  display: block;
  padding: 7px 14px;
  color: var(--text-muted);
  font-size: var(--fs-s);
  cursor: pointer;
}

.editor__seg-opt + .editor__seg-opt {
  border-left: 1px solid var(--border);
}

.editor__seg-opt input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.editor__seg-opt:has(input:checked) {
  background: var(--menu-active-bg);
  color: var(--menu-active-fg);
}

.editor__seg-opt:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: -3px;
}

/* Un titre « à voir » n'a ni date de visionnage ni note. */
.editor__form[data-status="a-voir"] .editor__watched,
.editor__form[data-status="a-voir"] .editor__rating {
  display: none;
}

/* Note : douze cases (sans note, 0 à 10). */
.editor__rating-out {
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.editor__rating-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.editor__rate {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 36px;
  color: var(--text-muted);
  font: var(--fw-regular) var(--fs-s) / 1 var(--font-mono);
  cursor: pointer;
}

.editor__rate + .editor__rate {
  border-left: 1px solid var(--border);
}

.editor__rate input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.editor__rate:hover {
  color: var(--text-primary);
}

.editor__rate:has(input:checked) {
  background: var(--surface-note);
  color: var(--text-on-note);
}

.editor__rate:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: -3px;
}

.editor__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.editor__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-m);
  cursor: pointer;
}

.editor__check input {
  margin: 0;
  accent-color: var(--surface-note);
}

.editor__none {
  margin: 0;
  font-size: var(--fs-s);
  color: var(--text-muted);
}

.editor__error {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--fs-s);
}

.editor__error[hidden] {
  display: none;
}

.editor__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.editor__spacer {
  flex: 1 1 auto;
}

.editor__remove[hidden] {
  display: none;
}

.editor__save {
  border-color: transparent;
  background: var(--surface-note);
  color: var(--text-on-note);
  font-weight: var(--fw-medium);
}

/* Petits écrans ------------------------------------------------------- */

@media (max-width: 639.98px) {
  .editor__grid {
    grid-template-columns: 1fr;
  }

  .editor__poster {
    width: 120px;
  }

  .editor__two {
    grid-template-columns: 1fr;
  }

  .editor__rating-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .editor__rate:nth-child(7) {
    border-left: 0;
  }

  .editor__rate:nth-child(n + 7) {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 479.98px) {
  .filmo {
    padding: 0;
  }

  .filmo__cards {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px 12px;
  }

  .filmo__filter {
    max-width: none;
    margin-left: 0;
  }

  .filmo__add-row {
    flex-wrap: wrap;
  }

  .filmo__search {
    flex-basis: 100%;
  }

  .filmo__dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .editor__form,
  .listdlg__form {
    padding: 16px;
  }

  .viewer__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .viewer__poster {
    max-width: 200px;
  }
}

/* Fiche en lecture seule ----------------------------------------------
   Ce que voit un visiteur non connecté : l'affiche, le titre, l'année, la
   note en grand et le commentaire. Aucun champ. */

.viewer {
  width: min(620px, calc(100vw - 32px));
}

.viewer__inner {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
}

.viewer__poster {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-side);
}

.viewer__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.viewer__poster .card__poster-text {
  padding: 16px;
  text-align: center;
}

.viewer__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.viewer__title {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.viewer__title:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.viewer__meta {
  margin: 0;
  font-size: var(--fs-s);
  color: var(--text-muted);
}

/* La note, en grand : c'est ce qu'on vient lire. */
.viewer__rating {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 6px 0 2px;
  font-family: var(--font-mono);
  line-height: 1;
}

.viewer__rating-value {
  font-size: 56px;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.viewer__rating-max {
  font-size: var(--fs-m);
  color: var(--text-muted);
}

.viewer__rating-none {
  font-family: var(--font-sans);
  font-size: var(--fs-s);
  color: var(--text-muted);
}

/* Sans note : seul le libellé « Pas encore noté » reste. */
.viewer__rating .viewer__rating-none,
.viewer__rating--none .viewer__rating-value,
.viewer__rating--none .viewer__rating-max {
  display: none;
}

.viewer__rating--none .viewer__rating-none {
  display: inline;
}

.viewer__label {
  margin: 8px 0 0;
  font-size: var(--fs-s);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.viewer__notes {
  margin: 0;
  font-size: var(--fs-m);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.viewer__notes--empty {
  color: var(--text-muted);
  font-style: italic;
}

.viewer__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 12px;
}