/* Écrans de ToonFlix : accueil, panneaux de filtre, résultats, recherche, fiche et Ma liste,
   d'après les maquettes Figma.
   Mobile d'abord ; les mesures Desktop sont dans les blocs « min-width: 900px ». */

/* ---------- Page ---------- */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* L'en-tête et le bandeau hors ligne restent collés en haut de l'écran */
.page__haut {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fond);
}

.page__contenu {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espace-32);
  min-width: 0;
  /* La barre d'onglets (64 px et la zone sûre) recouvre le bas de la page */
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* Message seul au milieu de l'écran : erreur, état vide */
.page__centre {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: var(--espace-48) var(--gouttiere);
}

.page__message-bref {
  position: fixed;
  right: var(--espace-16);
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: var(--espace-16);
  /* Au-dessus de la fiche */
  z-index: 70;
  display: flex;
  justify-content: center;
}

.filtre {
  display: inline-flex;
  flex: none;
}

@media (min-width: 900px) {
  .page__contenu {
    gap: var(--espace-40);
    padding-bottom: 0;
  }

  .page__message-bref {
    bottom: var(--espace-24);
  }
}

/* ---------- Bandeau hors ligne ---------- */

.bandeau-hors-ligne {
  display: flex;
  align-items: center;
  gap: var(--espace-8);
  padding: var(--espace-12) var(--gouttiere);
  background: var(--surface-haute);
  color: var(--texte);
  font-weight: var(--petit-graisse);
  font-size: var(--petit-taille);
  line-height: var(--petit-interligne);
}

.bandeau-hors-ligne > .icone {
  color: var(--texte-doux);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--espace-16);
  height: 480px;
  margin: var(--espace-32) var(--gouttiere) 0;
  padding: var(--espace-16);
  overflow: hidden;
  border-radius: var(--arrondi-carte);
  background: var(--surface);
  box-shadow: 0 8px 24px var(--voile);
}

.hero__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Cadrée sur le haut de l'affiche : c'est là que se trouvent les personnages */
.hero__image img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.hero__image--absente img,
.hero__voile-gauche {
  display: none;
}

.hero__voile,
.hero__voile-bas {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.hero__voile {
  top: 0;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0) 40%, var(--fond));
}

.hero__voile-bas {
  height: 240px;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0), var(--fond));
}

.hero__textes {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-8);
  min-width: 0;
}

/* En Mobile, le nombre de chapitres passe au-dessus de la légende */
.hero__textes > .badge-chapitres {
  order: -1;
}

.hero__legende {
  color: var(--texte-doux);
  font-weight: var(--legende-graisse);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  letter-spacing: var(--legende-approche);
}

.hero__titre {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  color: var(--texte);
  font-weight: var(--titre-hero-graisse);
  font-size: var(--titre-hero-taille);
  line-height: var(--titre-hero-interligne);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.hero__resume {
  display: none;
}

.hero__boutons {
  position: relative;
  display: flex;
  gap: var(--espace-8);
}

.hero__boutons > .bouton {
  padding: 0 var(--espace-12);
}

.hero__boutons > a.bouton {
  flex: 1;
  min-width: 0;
}

@media (min-width: 900px) {
  .hero {
    gap: var(--espace-24);
    height: 640px;
    margin: 0;
    padding: 0 var(--gouttiere) var(--espace-80);
    border-radius: 0;
    background: var(--fond);
    box-shadow: none;
  }

  /* L'image occupe les 60 % de droite (864 px sur 1440), sans dépasser cette largeur : au-delà,
     l'affiche (480 px de large à la source) deviendrait trop floue. */
  .hero__image {
    inset: 0 0 0 auto;
    width: min(60%, 864px);
  }

  .hero__image img {
    position: absolute;
    top: -8.18%;
    left: 0;
    height: auto;
    min-height: 108.18%;
  }

  .hero__voile {
    display: none;
  }

  .hero__voile-gauche {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 74.07%;
    background: linear-gradient(to right, var(--fond), rgba(20, 20, 20, 0));
    pointer-events: none;
  }

  .hero__textes {
    gap: var(--espace-16);
    width: 520px;
    max-width: 100%;
  }

  .hero__textes > .badge-chapitres {
    order: 0;
    background: var(--surface-haute);
  }

  .hero__resume {
    display: -webkit-box;
    overflow: hidden;
    color: var(--texte-doux);
    font-weight: var(--corps-graisse);
    font-size: var(--corps-taille);
    line-height: var(--corps-interligne);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .hero__boutons {
    gap: var(--espace-12);
  }

  .hero__boutons > .bouton {
    padding: 0 var(--espace-20);
  }

  .hero__boutons > a.bouton {
    flex: none;
  }
}

/* ---------- Pied de catalogue ---------- */

.pied-de-catalogue {
  padding: var(--espace-24) var(--gouttiere);
  color: var(--texte-discret);
  font-weight: var(--legende-graisse);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  letter-spacing: var(--legende-approche);
  text-align: center;
}

@media (min-width: 900px) {
  .pied-de-catalogue {
    padding: var(--espace-40) var(--gouttiere);
  }
}

/* ---------- Squelettes (chargement) ---------- */

.squelettes {
  display: flex;
  flex-direction: column;
  gap: var(--espace-32);
  overflow: hidden;
}

.squelette {
  display: block;
  flex: none;
  border-radius: var(--arrondi-affiche);
  background: var(--surface);
  animation: squelette-pulsation 1s ease-in-out infinite alternate;
}

@keyframes squelette-pulsation {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.45;
  }
}

.squelette--hero {
  height: 480px;
  margin: var(--espace-32) var(--gouttiere) 0;
  border-radius: var(--arrondi-carte);
}

.squelettes__rangee {
  display: flex;
  flex-direction: column;
  gap: var(--rangee-ecart-titre);
}

.squelette--titre {
  width: 160px;
  height: 22px;
  margin: 0 var(--gouttiere);
}

.squelettes__piste {
  display: flex;
  gap: var(--rangee-ecart);
  padding: 0 var(--gouttiere);
  overflow: hidden;
}

.squelette--affiche {
  width: var(--affiche-petite-largeur);
  height: var(--affiche-petite-hauteur);
}

@media (min-width: 900px) {
  .squelettes {
    gap: var(--espace-40);
  }

  .squelette--hero {
    height: 640px;
    margin: 0;
    border-radius: 0;
  }

  .squelette--affiche {
    width: var(--affiche-moyenne-largeur);
    height: var(--affiche-moyenne-hauteur);
  }
}

/* ---------- Voile et panneau de filtre ---------- */

.voile {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.6);
  animation: voile-apparition 0.2s ease-out;
}

.panneau {
  position: fixed;
  z-index: 41;
  display: flex;
  flex-direction: column;
  gap: var(--espace-16);
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  background: var(--surface);
}

.panneau__poignee {
  flex: none;
  width: 36px;
  height: 4px;
  border-radius: var(--arrondi-pilule);
  background: var(--surface-haute);
}

.panneau__en-tete {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
}

.panneau__titre {
  color: var(--texte);
  font-weight: var(--titre-rangee-graisse);
  font-size: var(--titre-rangee-taille);
  line-height: var(--titre-rangee-interligne);
}

.panneau__phrase {
  color: var(--texte-doux);
  font-weight: var(--corps-graisse);
  font-size: var(--corps-taille);
  line-height: var(--corps-interligne);
}

.panneau > .curseur {
  flex: none;
}

.panneau__champs {
  display: flex;
  gap: var(--espace-12);
}

.panneau__champs > .champ-nombre {
  flex: 1;
  width: auto;
  min-width: 0;
}

.panneau__champs .champ-nombre__case {
  width: 100%;
}

.panneau__raccourcis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-8);
}

.panneau__themes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-8);
}

.panneau__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-4);
}

.panneau__actions > .bouton--principal {
  width: 100%;
}

@keyframes voile-apparition {
  from {
    opacity: 0;
  }
}

@keyframes panneau-montee {
  from {
    transform: translateY(32px);
    opacity: 0;
  }
}

@keyframes panneau-apparition {
  from {
    transform: translateY(-4px);
    opacity: 0;
  }
}

/* Mobile : feuille du bas. La place calculée pour le Desktop (sous la puce) est ignorée. */
@media (max-width: 899.98px) {
  .panneau {
    top: auto !important;
    right: 0;
    bottom: 0;
    left: 0 !important;
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    padding: var(--espace-8) var(--espace-16)
      calc(var(--espace-16) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--arrondi-panneau) var(--arrondi-panneau) 0 0;
    box-shadow: 0 -8px 40px var(--voile);
    animation: panneau-montee 0.2s ease-out;
  }

  /* La page ne défile pas sous la feuille */
  body:has(.voile) {
    overflow: hidden;
  }
}

/* Desktop : menu sous la puce, sans assombrir la page */
@media (min-width: 900px) {
  .voile {
    background: transparent;
    animation: none;
  }

  .panneau {
    width: 400px;
    max-height: calc(100vh - 96px);
    padding: var(--espace-24);
    border-radius: var(--arrondi-panneau);
    box-shadow: 0 8px 24px var(--voile);
    animation: panneau-apparition 0.15s ease-out;
  }

  .panneau__poignee {
    display: none;
  }
}

/* ---------- Barre de résultats ---------- */

.resultats {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.barre-resultats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "compte tri"
    "note note"
    "lues lues";
  align-items: center;
  gap: var(--espace-12);
  padding: var(--espace-16) var(--gouttiere);
}

.barre-resultats__compte {
  grid-area: compte;
  overflow: hidden;
  color: var(--texte);
  font-weight: var(--titre-rangee-graisse);
  font-size: var(--titre-rangee-taille);
  line-height: var(--titre-rangee-interligne);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barre-resultats__note {
  grid-area: note;
  margin-top: calc(-1 * var(--espace-8));
  color: var(--texte-discret);
  font-weight: var(--legende-graisse);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  letter-spacing: var(--legende-approche);
}

.barre-resultats__lues {
  grid-area: lues;
  display: flex;
  align-items: center;
  gap: var(--espace-12);
  color: var(--texte-doux);
  font-weight: var(--petit-graisse);
  font-size: var(--petit-taille);
  line-height: var(--petit-interligne);
}

.barre-resultats__tri {
  grid-area: tri;
  justify-self: end;
}

@media (min-width: 900px) {
  .barre-resultats {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "compte lues tri"
      "note note note";
    gap: var(--espace-4) var(--espace-24);
    padding: var(--espace-24) var(--gouttiere);
  }

  .barre-resultats__note {
    margin-top: 0;
  }
}

/* ---------- Menu de tri ---------- */

.menu-tri {
  position: relative;
  display: inline-flex;
}

.menu-tri__liste {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  width: 240px;
  padding: var(--espace-8);
  border-radius: var(--arrondi-carte);
  background: var(--surface);
  box-shadow: 0 8px 24px var(--voile);
  animation: panneau-apparition 0.15s ease-out;
}

.ligne-menu {
  display: flex;
  align-items: center;
  gap: var(--espace-12);
  width: 100%;
  height: 48px;
  padding: 0 var(--espace-12);
  border-radius: var(--arrondi-affiche);
  color: var(--texte-doux);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.ligne-menu:focus-visible {
  outline-offset: -2px;
}

.ligne-menu--choisie {
  color: var(--texte);
}

.ligne-menu > .icone {
  color: var(--primaire);
}

.ligne-menu__libelle {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) {
  .ligne-menu:hover {
    background: var(--surface-haute);
    color: var(--texte);
  }
}

/* ---------- Grille de résultats ---------- */

.grille-resultats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-16) 17px;
  padding: 0 var(--gouttiere);
}

.grille-resultats > li {
  min-width: 0;
}

.grille-resultats .carte-resultat {
  width: 100%;
}

.grille-resultats__suite {
  display: flex;
  justify-content: center;
  padding: var(--espace-24) var(--gouttiere) 0;
}

@media (min-width: 900px) {
  .grille-resultats {
    grid-template-columns: repeat(auto-fill, var(--affiche-moyenne-largeur));
    gap: var(--espace-32) var(--espace-24);
  }
}

/* ---------- Recherche : parcourir par thème ---------- */

.parcourir {
  display: flex;
  flex-direction: column;
  gap: var(--espace-16);
  padding: var(--espace-12) var(--gouttiere) 0;
}

.parcourir__titre {
  color: var(--texte);
  font-weight: var(--titre-rangee-graisse);
  font-size: var(--titre-rangee-taille);
  line-height: var(--titre-rangee-interligne);
}

.parcourir__themes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-8);
}

.parcourir__themes > li {
  display: flex;
}

@media (min-width: 900px) {
  .parcourir {
    padding-top: var(--espace-24);
  }
}

/* ---------- Ma liste ---------- */

.ma-liste {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

/* Le titre et les onglets, soulignés d'un trait sur toute la largeur */
.ma-liste__haut {
  display: flex;
  flex-direction: column;
  gap: var(--espace-12);
  padding: var(--espace-8) var(--gouttiere) 0;
  border-bottom: 1px solid var(--trait);
}

.ma-liste__titre {
  color: var(--texte);
  font-weight: var(--titre-ecran-graisse);
  font-size: var(--titre-ecran-taille);
  line-height: var(--titre-ecran-interligne);
}

.ma-liste__contenu {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: var(--espace-16);
}

.squelette--carte {
  width: 100%;
  aspect-ratio: 2 / 3;
}

@media (min-width: 900px) {
  .ma-liste__haut {
    gap: var(--espace-16);
    padding-top: var(--espace-32);
  }

  .ma-liste__contenu {
    padding-top: var(--espace-32);
    padding-bottom: var(--espace-48);
  }
}

/* ---------- Fiche de série ---------- */

/* La page garde la place de sa barre de défilement : elle ne bouge pas quand la fiche ouvre */
html {
  scrollbar-gutter: stable;
}

/* La page ne défile pas sous la fiche */
body:has(.fiche) {
  overflow: hidden;
}

/* La place de la barre de défilement prend la teinte de la page sous le voile (fond à 40 %) */
html:has(.fiche) {
  background: #080808;
}

/* La fiche recouvre la barre des onglets : le message bref descend */
body:has(.fiche) .page__message-bref {
  bottom: calc(var(--espace-24) + env(safe-area-inset-bottom, 0px));
}

.voile-fiche {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.6);
  animation: voile-apparition 0.2s ease-out;
}

/* Mobile : feuille du bas, qui laisse voir 84 px de la page au-dessus de la feuille */
.fiche {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px);
  height: calc(100dvh - 84px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Passer à une autre fiche ne doit pas faire suivre le défilement */
  overflow-anchor: none;
  scrollbar-width: thin;
  scrollbar-color: var(--trait) transparent;
  outline: none;
  border-radius: var(--arrondi-panneau) var(--arrondi-panneau) 0 0;
  background: var(--surface);
  box-shadow: 0 -8px 40px var(--voile);
  animation: panneau-montee 0.2s ease-out;
}

/* Le bandeau montre le haut de la grande image ; le corps de la fiche remonte dessus */
.fiche__bandeau {
  position: relative;
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: flex-end;
  height: 300px;
  margin-bottom: -96px;
  padding: var(--espace-12);
  overflow: hidden;
}

/* Cadrage sur le haut de la grande image : les personnages y sont */
.fiche__image {
  position: absolute;
  top: -15.76%;
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 115.76%;
  object-fit: cover;
  object-position: 50% 0;
}

.fiche__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(31, 31, 31, 0) 20%, var(--surface) 85%);
  pointer-events: none;
}

.fiche__poignee {
  position: absolute;
  top: var(--espace-8);
  left: 50%;
  width: 36px;
  height: 4px;
  border-radius: var(--arrondi-pilule);
  background: var(--texte);
  transform: translateX(-50%);
}

.fiche__corps {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--espace-16);
  min-width: 0;
  padding: var(--espace-16) var(--espace-16)
    calc(var(--espace-16) + env(safe-area-inset-bottom, 0px));
}

.fiche__identite,
.fiche__chiffres {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  min-width: 0;
}

.fiche__titre {
  color: var(--texte);
  font-weight: var(--titre-ecran-graisse);
  font-size: var(--titre-ecran-taille);
  line-height: var(--titre-ecran-interligne);
  overflow-wrap: anywhere;
}

.fiche__auteur,
.fiche__statut,
.fiche__compteurs {
  color: var(--texte-doux);
  font-weight: var(--petit-graisse);
  font-size: var(--petit-taille);
  line-height: var(--petit-interligne);
}

.fiche__serie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-4) var(--espace-8);
}

.fiche__chapitres {
  color: var(--primaire);
  font-weight: var(--libelle-graisse);
  font-size: var(--libelle-taille);
  line-height: var(--libelle-interligne);
}

.fiche__chapitres--inconnu {
  color: var(--texte-doux);
}

.fiche__legende {
  color: var(--texte-discret);
  font-weight: var(--legende-graisse);
  font-size: var(--legende-taille);
  line-height: var(--legende-interligne);
  letter-spacing: var(--legende-approche);
}

.fiche__actions {
  display: flex;
  flex-direction: column;
  gap: var(--espace-12);
}

.fiche__listes {
  display: flex;
  gap: var(--espace-12);
}

.fiche__listes > .bouton {
  flex: 1;
  min-width: 0;
}

.fiche__resume {
  color: var(--texte-doux);
  font-weight: var(--corps-graisse);
  font-size: var(--corps-taille);
  line-height: var(--corps-interligne);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.fiche__themes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-8);
}

.fiche__themes > li {
  display: flex;
}

/* La rangée va de bord à bord dans la fiche, avec la marge du corps pour gouttière */
.fiche__meme-theme {
  --gouttiere: var(--espace-16);

  margin: 0 calc(-1 * var(--espace-16));
}

@keyframes fiche-apparition {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
}

/* Desktop : fenêtre centrée */
@media (min-width: 900px) {
  .fiche {
    inset: 0;
    width: 880px;
    max-width: calc(100vw - var(--espace-48));
    height: 720px;
    max-height: calc(100vh - var(--espace-48));
    margin: auto;
    border-radius: var(--arrondi-panneau);
    animation: fiche-apparition 0.2s ease-out;
  }

  .fiche__bandeau {
    height: 380px;
    margin-bottom: -160px;
  }

  .fiche__image {
    top: -59.65%;
    min-height: 159.65%;
  }

  .fiche__poignee {
    display: none;
  }

  .fiche__corps {
    padding: var(--espace-32);
  }

  .fiche__actions {
    flex-flow: row wrap;
  }

  .fiche__listes > .bouton {
    flex: none;
  }

  .fiche__meme-theme {
    --gouttiere: var(--espace-32);

    margin: 0 calc(-1 * var(--espace-32));
  }
}