/*
 * Interface volontairement sombre : c'est un navigateur de catalogue de films,
 * consulté le soir. Le parti est assumé, donc toutes les couleurs sont peintes
 * explicitement plutôt que laissées à l'appréciation du système.
 */

:root {
  --fond:        #141210;
  --surface:     #1D1A17;
  --surface-2:   #262220;
  --surface-3:   #322D29;
  --bord:        #362F2A;
  --texte:       #F0EBE4;
  --texte-2:     #B3AAA0;
  --texte-3:     #837A70;

  --accent:      #D6453C;   /* rouge affiche, pour l'action principale */
  --accent-fonce:#A82F27;
  --a-voir:      #E0A83C;   /* ambre : intention */
  --vu:          #5FAF7F;   /* vert : accompli */

  --rayon:       6px;
  --ombre:       0 2px 10px rgba(0, 0, 0, .45);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--a-voir);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- en-tête */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(var(--surface), var(--surface) 82%, rgba(29, 26, 23, .96));
  border-bottom: 1px solid var(--bord);
  padding: 1rem clamp(.9rem, 3vw, 2rem) .75rem;
  box-shadow: var(--ombre);
}

.entete__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}

.entete h1 {
  font: 600 1.35rem/1 var(--serif);
  letter-spacing: -.01em;
  margin: 0;
}

.raccourcis { display: flex; gap: .5rem; }

.puce {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .34rem .7rem;
  border: 1px solid var(--bord);
  border-radius: 100px;
  background: var(--surface-2);
  color: var(--texte-2);
  text-decoration: none;
  font-size: .82rem;
  transition: border-color .12s, color .12s;
}
.puce b { font-variant-numeric: tabular-nums; color: var(--texte); }
.puce:hover { border-color: var(--texte-3); color: var(--texte); }
.puce--voir.est-actif { border-color: var(--a-voir); color: var(--a-voir); }
.puce--voir.est-actif b { color: var(--a-voir); }
.puce--vu.est-actif { border-color: var(--vu); color: var(--vu); }
.puce--vu.est-actif b { color: var(--vu); }

/* ---------------------------------------------------------------- filtres */

.filtres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .7rem .9rem;
  align-items: end;
}

.champ { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
.champ--large { grid-column: span 2; }

.champ label {
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-3);
}

.champ input[type="search"],
.champ input[type="number"],
.champ select {
  width: 100%;
  padding: .42rem .55rem;
  background: var(--surface-2);
  color: var(--texte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  font: inherit;
  font-size: .88rem;
}
.champ input:hover, .champ select:hover { border-color: var(--texte-3); }

.curseur { display: flex; align-items: center; gap: .5rem; }
.curseur input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.curseur output {
  min-width: 2.1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .9rem;
}

.tri { display: flex; gap: .35rem; }
.tri select { flex: 1; min-width: 0; }

.bouton-sens {
  flex: 0 0 2.1rem;
  background: var(--surface-2);
  color: var(--texte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.bouton-sens:hover { border-color: var(--accent); color: var(--accent); }

.avance { grid-column: 1 / -1; margin-top: .1rem; }
.avance summary {
  cursor: pointer;
  font-size: .78rem;
  color: var(--texte-3);
  padding: .2rem 0;
  width: fit-content;
}
.avance summary:hover { color: var(--texte); }
.avance__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .7rem .9rem;
  padding: .7rem 0 .2rem;
}
.champ--case { justify-content: end; }
.champ--case label {
  display: flex;
  align-items: center;
  gap: .4rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: .8rem;
  color: var(--texte-2);
  cursor: pointer;
}
.champ--case input { accent-color: var(--accent); }

.actions-filtres {
  grid-column: 1 / -1;
  display: flex;
  gap: .5rem;
  align-items: center;
}

.bouton {
  padding: .44rem .95rem;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  font: inherit;
  font-size: .87rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.bouton--primaire { background: var(--accent); color: #fff; font-weight: 500; }
.bouton--primaire:hover { background: var(--accent-fonce); }
.bouton--fantome { background: transparent; color: var(--texte-2); border-color: var(--bord); }
.bouton--fantome:hover { color: var(--texte); border-color: var(--texte-3); }

.resume {
  margin: .8rem 0 0;
  font-size: .8rem;
  color: var(--texte-3);
}
.resume b { color: var(--texte); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- grille */

main { padding: 1.4rem clamp(.9rem, 3vw, 2rem) 3rem; }

.grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 1.15rem;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .13s ease, border-color .13s ease;
}
.carte:hover { transform: translateY(-2px); border-color: var(--texte-3); }

.carte__visuel { position: relative; background: var(--surface-3); }

.carte__affiche {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 185 / 278;
  object-fit: cover;
  background: var(--surface-3);
}
.carte__affiche--vide {
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: var(--texte-3);
}

.badge-note {
  position: absolute;
  top: .4rem;
  left: .4rem;
  padding: .12rem .4rem;
  border-radius: 4px;
  background: rgba(10, 9, 8, .82);
  backdrop-filter: blur(3px);
  color: var(--texte);
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Film sorti du catalogue : l'état doit se lire d'un coup d'œil, sans survol.
   Trois signaux cumulés — affiche désaturée, bandeau plein, cadre rouge — pour
   que l'information ne repose pas sur la seule couleur. */
.badge-parti {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: .3rem .3rem .32rem;
  background: var(--accent-fonce);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-top: 2px solid #fff3;
}

.carte--parti { border-color: var(--accent-fonce); }
.carte--parti .carte__affiche {
  filter: grayscale(.85) brightness(.62);
}
.carte--parti .carte__titre { color: var(--texte-2); }
.carte--parti:hover .carte__affiche { filter: grayscale(.4) brightness(.8); }

/* Bandeau d'information en tête de liste */
.avertissement {
  margin: 0 0 1.2rem;
  padding: .65rem .9rem;
  background: color-mix(in srgb, var(--a-voir) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--a-voir) 40%, var(--bord));
  border-radius: var(--rayon);
  font-size: .85rem;
  color: var(--texte);
}
.avertissement strong { font-variant-numeric: tabular-nums; }
.avertissement a { margin-left: .3rem; font-weight: 600; }
.avertissement--anciens {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--bord));
}

.champ--alerte { border-color: var(--accent) !important; color: var(--texte); }

/* Bandeau d'état : l'information de marquage n'est pas portée par la seule
   couleur, elle se double d'un libellé textuel dans le coin de l'affiche. */
.marque {
  position: absolute;
  top: .4rem;
  right: .4rem;
  padding: .12rem .4rem;
  border-radius: 4px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  display: none;
}
.carte--a_voir .marque {
  display: block;
  background: var(--a-voir);
  color: #241a05;
}
.carte--a_voir .marque::after { content: "à voir"; }
.carte--vu .marque {
  display: block;
  background: var(--vu);
  color: #06210f;
}
.carte--vu .marque::after { content: "vu"; }

.carte--vu .carte__affiche { opacity: .55; }
.carte--a_voir { border-color: color-mix(in srgb, var(--a-voir) 45%, var(--bord)); }
.carte--vu { border-color: color-mix(in srgb, var(--vu) 40%, var(--bord)); }

.carte__corps { padding: .6rem .65rem .5rem; flex: 1; min-width: 0; }

.carte__titre {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte__meta {
  margin: 0 0 .3rem;
  font-size: .76rem;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

.carte__genres {
  margin: 0 0 .4rem;
  font-size: .72rem;
  color: var(--texte-3);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte__pitch {
  margin: 0;
  font-size: .78rem;
  color: var(--texte-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte__pied {
  padding: .5rem .65rem .6rem;
  border-top: 1px solid var(--bord);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}

.marquage { display: flex; gap: .3rem; }

.bascule {
  padding: .26rem .5rem;
  font: inherit;
  font-size: .74rem;
  background: var(--surface-2);
  color: var(--texte-2);
  border: 1px solid var(--bord);
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.bascule:hover { color: var(--texte); border-color: var(--texte-3); }
.bascule--voir.est-actif {
  background: var(--a-voir); border-color: var(--a-voir); color: #241a05; font-weight: 600;
}
.bascule--vu.est-actif {
  background: var(--vu); border-color: var(--vu); color: #06210f; font-weight: 600;
}
.bascule[disabled] { opacity: .5; cursor: progress; }

.lien-netflix {
  font-size: .72rem;
  color: var(--texte-3);
  text-decoration: none;
  white-space: nowrap;
}
.lien-netflix:hover { color: var(--accent); }

/* ---------------------------------------------------------------- divers */

.message {
  max-width: 34rem;
  margin: 4rem auto;
  text-align: center;
  color: var(--texte-2);
}
.message h2 { font: 600 1.3rem/1.2 var(--serif); color: var(--texte); margin: 0 0 .6rem; }
.message pre {
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: .7rem 1rem;
  color: var(--texte);
  overflow-x: auto;
  text-align: left;
  font-size: .85rem;
}
.discret { font-size: .82rem; color: var(--texte-3); }

.pagination { margin: 2.2rem 0 0; }
.pagination ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  align-items: center;
}
.pagination a, .pagination span, .pagination .ellipse {
  display: block;
  padding: .35rem .65rem;
  border-radius: var(--rayon);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.pagination a { color: var(--texte-2); border: 1px solid var(--bord); background: var(--surface-2); }
.pagination a:hover { color: var(--texte); border-color: var(--texte-3); }
.pagination [aria-current="page"] {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border: 1px solid var(--accent);
}
.pagination .ellipse { color: var(--texte-3); }

.pied {
  padding: 1.4rem clamp(.9rem, 3vw, 2rem) 2.4rem;
  border-top: 1px solid var(--bord);
  color: var(--texte-3);
  font-size: .78rem;
}

.toast {
  position: fixed;
  bottom: 1.1rem;
  left: 50%;
  transform: translate(-50%, 130%);
  background: var(--surface-3);
  border: 1px solid var(--bord);
  color: var(--texte);
  padding: .5rem .9rem;
  border-radius: 100px;
  font-size: .84rem;
  box-shadow: var(--ombre);
  transition: transform .22s ease;
  z-index: 50;
  pointer-events: none;
}
.toast.est-visible { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .carte:hover { transform: none; }
}

@media (max-width: 34rem) {
  .champ--large { grid-column: 1 / -1; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .8rem; }
  .carte__pitch { display: none; }
  .carte__pied { flex-direction: column; align-items: stretch; }
  .lien-netflix { text-align: center; }
}

/* ============================================================
   Ajouts Symfony : authentification, séries, états
   ============================================================ */

/* --- marque et compte utilisateur dans l'en-tête --- */
.marque {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: 600 1.3rem/1 var(--serif);
  color: var(--texte);
  text-decoration: none;
  letter-spacing: -.01em;
}
.marque__pastille {
  width: .7rem; height: 1.15rem;
  background: var(--accent);
  border-radius: 2px;
  display: inline-block;
}
.compte-util {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  color: var(--texte-2);
  padding-left: .5rem;
  border-left: 1px solid var(--bord);
  margin-left: .2rem;
}
.lien-discret { color: var(--texte-3); text-decoration: none; font-size: .78rem; }
.lien-discret:hover { color: var(--accent); text-decoration: underline; }

/* --- badge de type (film / série) --- */
.badge-type {
  position: absolute;
  bottom: .4rem;
  right: .4rem;
  padding: .1rem .38rem;
  border-radius: 3px;
  background: rgba(10, 9, 8, .8);
  backdrop-filter: blur(3px);
  color: var(--texte-2);
  font-size: .64rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.carte--parti .badge-type { display: none; }

/* --- pastille d'état de marquage (renommée depuis .marque) --- */
.marque-etat {
  position: absolute;
  top: .4rem; right: .4rem;
  padding: .12rem .4rem;
  border-radius: 4px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  display: none;
}
.carte--a_voir .marque-etat { display: block; background: var(--a-voir); color: #241a05; }
.carte--a_voir .marque-etat::after { content: "à voir"; }
.carte--vu .marque-etat { display: block; background: var(--vu); color: #06210f; }
.carte--vu .marque-etat::after { content: "vu"; }

/* --- pages d'authentification --- */
.corps--centre {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}
.corps--centre main { padding: 0; width: 100%; }

.carte-auth {
  width: 100%;
  max-width: 25rem;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 1.9rem 1.7rem 1.6rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.carte-auth h1 {
  font: 600 1.5rem/1.15 var(--serif);
  margin: 0 0 .4rem;
  letter-spacing: -.015em;
}
.carte-auth__intro { margin: 0 0 1.4rem; color: var(--texte-2); font-size: .88rem; }
.carte-auth__pied {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bord);
  font-size: .84rem;
  color: var(--texte-2);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.formulaire { display: flex; flex-direction: column; gap: .9rem; }
.formulaire .champ { gap: .3rem; }
.formulaire label { text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--texte-2); }
.formulaire input[type="email"],
.formulaire input[type="password"],
.formulaire input[type="text"] {
  width: 100%;
  padding: .55rem .65rem;
  background: var(--surface-2);
  color: var(--texte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  font: inherit;
  font-size: .95rem;
}
.formulaire input:focus-visible { border-color: var(--accent); }
.aide { color: var(--texte-3); font-size: .76rem; }

.bouton--bloc { width: 100%; text-align: center; padding: .6rem; font-size: .95rem; margin-top: .3rem; }

.case {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: var(--texte-2);
  cursor: pointer;
}
.case input { accent-color: var(--accent); }

/* --- alertes et erreurs de formulaire --- */
.alerte {
  margin: 0 0 1rem;
  padding: .6rem .85rem;
  border-radius: var(--rayon);
  font-size: .86rem;
  border: 1px solid;
}
.alerte--erreur, .alerte--error {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--bord));
  color: var(--texte);
}
.alerte--succes, .alerte--success {
  background: color-mix(in srgb, var(--vu) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--vu) 45%, var(--bord));
  color: var(--texte);
}
main > .alerte { max-width: 46rem; margin-inline: auto; }

ul.form-error-messages, .form-error-message {
  list-style: none;
  margin: .15rem 0 0;
  padding: 0;
  color: #F0918A;
  font-size: .79rem;
}

/* Le contrôle d'inversion du tri est un lien (et non un bouton) pour ne pas
   entrer en conflit avec le champ caché « sens » du formulaire. */
a.bouton-sens {
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--texte);
}
a.bouton-sens:hover { color: var(--accent); border-color: var(--accent); }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.alerte--info {
  background: color-mix(in srgb, var(--a-voir) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--a-voir) 40%, var(--bord));
  color: var(--texte);
}