/* Composants de ToonFlix, d'après le kit Figma (« Éléments de base » et « Blocs de contenu »).
   Les mesures qui changent en Desktop passent par les variables de jetons.css. */

/* ---------- Icône ---------- */

.icone {
  flex: none;
}

.icone--miroir {
  transform: scaleX(-1);
}

/* ---------- Bouton ---------- */

.bouton {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--espace-8);
  min-height: var(--bouton-hauteur);
  padding: 0 var(--espace-20);
  border-radius: var(--arrondi-carte);
  font-weight: var(--libelle-graisse);
  font-size: var(--libelle-taille);
  line-height: var(--libelle-interligne);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}

.bouton--principal {
  background: var(--primaire);
  color: var(--sur-primaire);
}

.bouton--secondaire {
  background: var(--surface-haute);
  color: var(--texte);
}

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

@media (hover: hover) {
  .bouton--principal:hover {
    background: var(--primaire-survol);
  }

  .bouton--secondaire:hover {
    box-shadow: inset 0 0 0 1px var(--texte-discret);
  }

  .bouton--texte:hover {
    color: var(--texte);
  }
}

/* Bouton de liste coché (« Dans ma liste », « Déjà lu ») : contour et icône verts */
.bouton--secondaire.bouton--coche {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--primaire);
}

.bouton--coche > .icone {
  color: var(--primaire);
}

@media (hover: hover) {
  .bouton--secondaire.bouton--coche:hover {
    box-shadow: inset 0 0 0 1.5px var(--primaire-survol);
  }
}

/* ---------- Bouton icône ---------- */

.bouton-icone {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--trait);
  border-radius: var(--arrondi-pilule);
  background: var(--surface-haute);
  color: var(--texte);
  transition:
    border-color 0.15s,
    color 0.15s;
}

/* Cible tactile de 44 px autour du rond de 40 px */
.bouton-icone::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.bouton-icone--actif {
  border-color: var(--primaire);
  color: var(--primaire);
}

@media (hover: hover) {
  .bouton-icone:not(.bouton-icone--actif):hover {
    border-color: var(--texte-discret);
  }
}

/* ---------- Puce de filtre ---------- */

.puce {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--espace-4);
  height: 36px;
  padding: 0 var(--espace-16);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi-pilule);
  color: var(--texte);
  font-weight: var(--libelle-graisse);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

/* Cible tactile de 44 px autour de la puce de 36 px */
.puce::after {
  content: "";
  position: absolute;
  inset: -5px 0;
}

.puce--active {
  border-color: var(--primaire);
  background: var(--primaire);
  color: var(--sur-primaire);
}

.puce--ouverte {
  border-color: var(--texte);
  background: var(--texte);
  color: var(--sur-primaire);
}

.puce > .icone {
  transition: transform 0.15s;
}

/* Panneau ouvert : le chevron pointe vers le haut */
.puce--ouverte > .icone {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .puce:not(.puce--active, .puce--ouverte):hover {
    border-color: var(--texte-discret);
  }
}

/* ---------- Badge de type ---------- */

/* « ORIGINAL » : aplat vert, texte sombre */
.badge-type {
  display: inline-flex;
  flex: none;
  align-items: center;
  align-self: flex-start;
  height: 20px;
  padding: 0 var(--espace-8);
  border-radius: var(--arrondi-pilule);
  background: var(--primaire);
  color: var(--sur-primaire);
  font-weight: var(--legende-graisse);
  font-size: 11px;
  line-height: var(--legende-interligne);
  letter-spacing: var(--legende-approche);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Badge chapitres ---------- */

.badge-chapitres {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--espace-4);
  height: 22px;
  padding: 0 var(--espace-8);
  border-radius: var(--arrondi-pilule);
  background: var(--fond-translucide);
  color: var(--texte);
  font-weight: var(--chapitres-graisse);
  font-size: var(--chapitres-taille);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.badge-chapitres .icone {
  color: var(--primaire);
}

/* ---------- Champ de recherche ---------- */

.champ-recherche {
  display: flex;
  align-items: center;
  gap: var(--espace-12);
  height: 48px;
  padding: 0 var(--espace-16);
  border-radius: var(--arrondi-carte);
  background: var(--surface);
  cursor: text;
  transition: box-shadow 0.15s;
}

.champ-recherche:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--primaire);
}

.champ-recherche > .icone {
  color: var(--texte-discret);
}

.champ-recherche__saisie {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: none;
  color: var(--texte);
  font-weight: 400;
  /* 16 px en Mobile : en dessous, iOS zoome dans la page à la prise de focus */
  font-size: 16px;
  line-height: 1.5;
  appearance: none;
}

@media (min-width: 900px) {
  .champ-recherche__saisie {
    font-size: 15px;
  }
}

.champ-recherche__saisie::placeholder {
  color: var(--texte-discret);
  opacity: 1;
}

/* La croix du navigateur est remplacée par la nôtre */
.champ-recherche__saisie::-webkit-search-cancel-button,
.champ-recherche__saisie::-webkit-search-decoration {
  display: none;
  appearance: none;
}

.champ-recherche__effacer {
  position: relative;
  display: inline-flex;
  flex: none;
  border-radius: var(--arrondi-pilule);
  color: var(--texte-doux);
}

.champ-recherche__effacer::after {
  content: "";
  position: absolute;
  inset: -10px;
}

@media (hover: hover) {
  .champ-recherche__effacer:hover {
    color: var(--texte);
  }
}

/* ---------- Champ nombre ---------- */

.champ-nombre {
  display: inline-flex;
  flex-direction: column;
  gap: var(--espace-8);
  width: 96px;
}

.champ-nombre__etiquette {
  color: var(--texte-doux);
  font-weight: var(--legende-graisse);
  font-size: 11px;
  line-height: var(--legende-interligne);
  letter-spacing: var(--legende-approche);
}

.champ-nombre__case {
  width: 96px;
  height: 48px;
  padding: 0 var(--espace-8);
  border: 0;
  border-radius: var(--arrondi-carte);
  outline: none;
  background: var(--surface-haute);
  color: var(--texte);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-align: center;
  transition: box-shadow 0.15s;
}

.champ-nombre__case:focus {
  box-shadow: inset 0 0 0 1.5px var(--primaire);
}

/* ---------- Curseur double ---------- */

.curseur {
  position: relative;
  width: 100%;
  height: 24px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.curseur__piste,
.curseur__actif {
  position: absolute;
  top: 10px;
  height: 4px;
  border-radius: var(--arrondi-pilule);
  pointer-events: none;
}

.curseur__piste {
  right: 0;
  left: 0;
  background: var(--surface-haute);
}

.curseur__actif {
  background: var(--primaire);
}

.curseur__poignee {
  position: absolute;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--texte);
  box-shadow: 0 8px 24px var(--voile);
  cursor: grab;
  touch-action: none;
}

/* Cible tactile de 44 px autour de la poignée de 24 px */
.curseur__poignee::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.curseur--tire,
.curseur--tire .curseur__poignee {
  cursor: grabbing;
}

/* ---------- Interrupteur ---------- */

.interrupteur {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  width: 44px;
  height: 26px;
  padding: 0 3px;
  border-radius: var(--arrondi-pilule);
  background: var(--surface-haute);
  transition: background-color 0.15s;
}

/* Cible tactile de 44 px autour de la piste de 26 px */
.interrupteur::after {
  content: "";
  position: absolute;
  inset: -9px 0;
}

.interrupteur__pastille {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--texte);
  transition: transform 0.15s;
}

.interrupteur--allume {
  background: var(--primaire);
}

.interrupteur--allume .interrupteur__pastille {
  transform: translateX(18px);
}

/* ---------- Onglet ---------- */

.onglets {
  display: flex;
  gap: var(--espace-24);
}

.onglet {
  position: relative;
  flex: none;
  padding: 12px 0;
  border-bottom: 2px solid transparent;
  color: var(--texte-discret);
  font-weight: var(--libelle-graisse);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color 0.15s,
    color 0.15s;
}

/* Cible tactile de 44 px de haut, élargie de 8 px de chaque côté */
.onglet::after {
  content: "";
  position: absolute;
  inset: -2px -8px;
}

.onglet--actif {
  border-bottom-color: var(--primaire);
  color: var(--texte);
}

@media (hover: hover) {
  .onglet:not(.onglet--actif):hover {
    color: var(--texte-doux);
  }
}

/* ---------- Affiche ---------- */

.affiche {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  border-radius: var(--arrondi-affiche);
  background: var(--surface);
  text-align: left;
}

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

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

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

@media (min-width: 900px) {
  .affiche--desktop-petite {
    width: var(--affiche-petite-largeur);
    height: var(--affiche-petite-hauteur);
  }

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

  .affiche--desktop-grande {
    width: var(--affiche-grande-largeur);
    height: var(--affiche-grande-hauteur);
  }
}

.affiche__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s;
}

.affiche--lue .affiche__image {
  opacity: 0.4;
}

/* Dégradé du tiers bas, pour que le badge reste lisible */
.affiche__voile {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 33.334%;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0), var(--fond));
  pointer-events: none;
}

.affiche > .badge-chapitres {
  position: absolute;
  bottom: 6px;
  left: 6px;
}

.affiche__pastille {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--arrondi-pilule);
  background: var(--fond-translucide);
}

.affiche__pastille--a-lire {
  color: var(--primaire);
}

.affiche__pastille--lue {
  color: var(--texte);
}

/* Repli quand l'image manque : monogramme estompé et titre */
.affiche__repli {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-8);
  padding: var(--espace-8);
}

.affiche__repli .logo {
  height: 32px;
  opacity: 0.3;
}

.affiche__repli-titre {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  color: var(--texte-doux);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* ---------- Carte de résultat ---------- */

.carte-resultat {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--espace-8);
  width: var(--affiche-petite-largeur);
  border-radius: var(--arrondi-affiche);
  text-align: left;
}

/* Dans la carte, l'affiche suit la largeur de la carte (colonnes souples de la grille) */
.carte-resultat > .affiche {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
}

.carte-resultat__textes {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  min-width: 0;
}

.carte-resultat__titre {
  display: -webkit-box;
  overflow: hidden;
  color: var(--texte);
  font-weight: var(--petit-graisse);
  font-size: var(--petit-taille);
  line-height: var(--petit-interligne);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.carte-resultat__auteur {
  overflow: hidden;
  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-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .carte-resultat {
    width: var(--affiche-moyenne-largeur);
  }
}

/* ---------- En-tête de rangée ---------- */

.en-tete-rangee {
  display: flex;
  align-items: center;
  gap: var(--espace-12);
}

.en-tete-rangee__titre {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  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;
}

.en-tete-rangee__lien {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--espace-4);
  color: var(--texte-doux);
  font-weight: var(--petit-graisse);
  font-size: var(--petit-taille);
  line-height: var(--petit-interligne);
  white-space: nowrap;
  transition: color 0.15s;
}

/* Cible tactile de 44 px de haut */
.en-tete-rangee__lien::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}

@media (hover: hover) {
  .en-tete-rangee__lien:hover {
    color: var(--texte);
  }
}

/* ---------- Rangée ---------- */

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

.rangee__titre {
  padding: 0 var(--gouttiere);
}

.rangee__cadre {
  position: relative;
}

.rangee__piste {
  position: relative;
  display: flex;
  gap: var(--rangee-ecart);
  padding: 0 var(--gouttiere);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gouttiere);
  scrollbar-width: none;
}

.rangee__piste::-webkit-scrollbar {
  display: none;
}

/* Le contour des grands chiffres descend sous la base des affiches */
.rangee--top10 .rangee__piste {
  padding-bottom: var(--espace-4);
}

/* En position relative : les textes réservés aux lecteurs d'écran (hors écran, en position
   absolue) restent ainsi dans la piste et ne font pas défiler la page de côté. */
.rangee__element {
  position: relative;
  flex: none;
  scroll-snap-align: start;
}

.rangee__bouton {
  display: flex;
  border-radius: var(--arrondi-affiche);
}

/* Flèches : en Desktop seulement, à 16 px des bords, au milieu des affiches */
.rangee__fleche {
  position: absolute;
  top: 50%;
  display: none;
  transform: translateY(-50%);
  transition: opacity 0.15s;
}

.rangee--top10 .rangee__fleche {
  top: calc(50% - 2px);
}

.rangee__fleche--precedent {
  left: var(--espace-16);
}

.rangee__fleche--suivant {
  right: var(--espace-16);
}

.rangee__fleche--cachee {
  visibility: hidden;
  opacity: 0;
}

@media (min-width: 900px) {
  .rangee__fleche {
    display: block;
  }
}

/* ---------- Rang top 10 ---------- */

.rang-top10 {
  display: flex;
  align-items: flex-end;
}

/* Le chiffre : contour vert de 2 px à l'extérieur du tracé (contour de 4 px dont la moitié
   intérieure est recouverte par le remplissage, de la couleur du fond). L'interligne de 0,727
   (hauteur des capitales d'Inter) pose la base du chiffre sur le bas de l'affiche. */
.rang-top10__chiffre {
  margin-right: -8px;
  color: var(--fond);
  font-weight: var(--rang-graisse);
  font-size: var(--rang-taille);
  line-height: 0.727;
  -webkit-text-stroke: 4px var(--primaire);
  paint-order: stroke fill;
}

.rang-top10 > .affiche {
  z-index: 1;
}

/* ---------- Message ---------- */

.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-16);
  width: 100%;
  max-width: 326px;
  text-align: center;
}

.message > .icone {
  color: var(--texte-discret);
}

.message__textes {
  display: flex;
  flex-direction: column;
  gap: var(--espace-8);
}

.message__titre {
  color: var(--texte);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
}

.message__phrase {
  color: var(--texte-doux);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- Message bref ---------- */

.message-bref {
  display: flex;
  align-items: center;
  gap: var(--espace-12);
  width: 100%;
  max-width: 358px;
  padding: var(--espace-12) var(--espace-16);
  border-radius: var(--arrondi-carte);
  background: var(--surface-haute);
  box-shadow: 0 8px 24px var(--voile);
}

.message-bref > .icone {
  color: var(--erreur);
}

.message-bref__texte {
  flex: 1;
  min-width: 0;
  color: var(--texte);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- Barre de filtres ---------- */

.barre-filtres {
  display: flex;
  align-items: center;
  gap: var(--espace-8);
  /* 5 px de marge haute et basse pour ne pas rogner les cibles tactiles ni le contour de focus */
  margin: -5px 0;
  padding: 5px var(--gouttiere);
  overflow-x: auto;
  scrollbar-width: none;
}

.barre-filtres::-webkit-scrollbar {
  display: none;
}

@media (min-width: 900px) {
  .barre-filtres {
    flex: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* ---------- Barre d'onglets (Mobile) ---------- */

.barre-onglets {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--trait);
  background: var(--fond);
}

.barre-onglets--fixe {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
}

.barre-onglets__entrees {
  display: flex;
}

.barre-onglets__entrees > li {
  flex: 1;
  min-width: 0;
}

.barre-onglets__entree {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-4);
  height: 63px;
  color: var(--texte-discret);
  transition: color 0.15s;
}

.barre-onglets__entree:focus-visible {
  outline-offset: -2px;
}

.barre-onglets__entree[aria-current="page"] {
  color: var(--texte);
}

.barre-onglets__libelle {
  font-weight: var(--legende-graisse);
  font-size: 11px;
  line-height: var(--legende-interligne);
  letter-spacing: var(--legende-approche);
}

@media (min-width: 900px) {
  .barre-onglets {
    display: none;
  }
}

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

.en-tete {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--espace-12);
  background: var(--fond);
}

.en-tete--fixe {
  position: sticky;
  top: 0;
  z-index: 20;
}

.en-tete__marque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--gouttiere);
}

.en-tete__logo {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--arrondi-affiche);
}

.en-tete__monogramme,
.en-tete__complet {
  display: inline-flex;
}

.en-tete__complet,
.en-tete__liens,
.en-tete__outils {
  display: none;
}

/* Ligne du champ de recherche : en Mobile, sur la page Recherche seulement */
.en-tete__ligne-recherche {
  display: none;
}

/* Ma liste : pas de filtres */
.en-tete--ma-liste .barre-filtres {
  display: none;
}

@media (max-width: 899.98px) {
  .en-tete--recherche .en-tete__marque {
    display: none;
  }

  .en-tete--recherche .en-tete__ligne-recherche {
    display: flex;
    padding: var(--espace-12) var(--gouttiere);
  }

  .en-tete__ligne-recherche > .champ-recherche {
    flex: 1;
    min-width: 0;
  }

  .en-tete--ma-liste {
    padding-bottom: 0;
  }
}

.en-tete__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: var(--arrondi-affiche);
  color: var(--texte-doux);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.15s;
}

.en-tete__lien[aria-current="page"] {
  color: var(--texte);
}

@media (hover: hover) {
  .en-tete__lien:hover {
    color: var(--texte);
  }
}

@media (min-width: 900px) {
  .en-tete {
    flex-direction: row;
    align-items: center;
    gap: var(--espace-24);
    height: 72px;
    padding: 0 var(--gouttiere);
  }

  .en-tete__marque {
    flex: 1;
    justify-content: flex-start;
    gap: var(--espace-32);
    height: auto;
    min-width: 0;
    padding: 0;
  }

  .en-tete__monogramme {
    display: none;
  }

  .en-tete__complet {
    display: inline-flex;
  }

  .en-tete__liens {
    display: flex;
    gap: var(--espace-32);
  }

  .en-tete__outils {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
  }

  .en-tete__outils > .champ-recherche {
    width: 280px;
  }
}