/* ================================================================
   YumeList - anime.html (fiche anime : hero-affiche, synopsis,
   trailer, avis, personnages, œuvres liées, similaires)
   ----------------------------------------------------------------
   Chargée après styles.css. Namespace "an-". Les #ids utilisés par
   le JS (animeHeroBg, reviewsHeader, reviewFormZone, reviewsList,
   charsGrid, relationsSection, relationsGrid, similarGrid,
   synopsisText, translateBtn, toggleBtn, review-*, likeBtn-*…)
   sont conservés.

   Composition : la fiche est une affiche de cinéma. Le visuel de
   l'anime occupe tout le premier écran (flouté, assombri, en
   parallaxe), l'affiche nette est posée dessus, le titre est en
   Noto Serif JP à l'échelle de la landing. Le reste de la page se
   lit en deux colonnes, séparé par des filets.
   ================================================================ */

body.anime-shell { padding-bottom: 96px; }

/* ============================================================
   1. HERO - l'affiche
============================================================ */
.an-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
#animeHeroBg {
  position: absolute; inset: -8% 0 0 0;
  background-size: cover; background-position: center 20%;
  filter: blur(6px) saturate(1.1) brightness(.45);
  transform: scale(1.06);
}
.an-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,15,.35) 0%, rgba(10,10,15,.72) 55%, var(--ink) 100%),
    linear-gradient(90deg, rgba(10,10,15,.55) 0%, transparent 60%);
}
.an-hero__inner {
  position: relative; width: 100%; max-width: var(--container); margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: end;
}
.an-poster {
  position: relative;
  aspect-ratio: 2/3; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-3);
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.8), 0 0 0 1px var(--border-2);
}
.an-poster img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }

.an-hero__body { min-width: 0; }

/* ------------------------------------------------------------
   Thème clair : le hero est une bande adossée à l'affiche floutée.
   Plutôt que de garder une bande sombre au-dessus d'une page en
   papier - ce qui ferait tache en tête de chaque fiche - on éclaircit
   le voile et on remonte la luminosité de l'image. Le texte garde
   donc les jetons du thème clair et reste lisible.
   Le voile des vignettes (.an-card__scrim) et la pastille de
   bande-annonce, eux, restent sombres : ils portent du texte blanc
   par-dessus une affiche, dans les deux thèmes.
   ------------------------------------------------------------ */
:root[data-theme="light"] #animeHeroBg {
  filter: blur(6px) saturate(1.04) brightness(1.08);
}
:root[data-theme="light"] .an-hero__veil {
  background:
    linear-gradient(180deg, rgba(244,239,232,.60) 0%, rgba(244,239,232,.88) 55%, var(--ink) 100%),
    linear-gradient(90deg, rgba(244,239,232,.74) 0%, transparent 60%);
}
:root[data-theme="light"] .an-title { text-shadow: 0 2px 26px rgba(244,239,232,.9); }
:root[data-theme="light"] .an-scores__cell { background: rgba(255,253,249,.8); }
:root[data-theme="light"] .an-poster { box-shadow: var(--shadow-3), 0 0 0 1px var(--border-2); }
:root[data-theme="light"] .an-actions { background: rgba(255,253,249,.82); }
.an-genres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.an-title {
  font: 500 clamp(34px, 5vw, 66px)/1.04 var(--font-jp); color: var(--text);
  letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.an-title-jp { margin-top: 10px; font: 300 16px var(--font-jp); color: var(--text-2); letter-spacing: .06em; }
.an-aussi { margin: 6px 0 0; font: 400 13px var(--font-body); color: var(--text-3); line-height: 1.5; }
.an-meta { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 20px; font: 400 13px var(--font-body); color: var(--text-2); }
.an-meta b { color: var(--text); font-weight: 600; }

.an-scores { display: inline-grid; grid-auto-flow: column; gap: 1px; margin-top: 26px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; max-width: 100%; }
.an-scores__cell { background: rgba(10,10,15,.72); padding: 16px 24px; min-width: 110px; }
.an-scores__cell b { display: flex; align-items: center; gap: 6px; font: 600 24px/1 var(--font-body); color: var(--text); letter-spacing: -.02em; white-space: nowrap; }
.an-scores__cell b.is-gold { color: var(--gold); }
.an-scores__cell > span { display: block; margin-top: 7px; font: 500 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* Panneau d'action : statut, progression, note, favori */
.an-actions { margin-top: 28px; padding: 22px 24px; background: rgba(18,18,26,.82); backdrop-filter: blur(12px); border: 1px solid var(--border-2); border-radius: var(--r-xl); max-width: 640px; }
.an-actions__lbl { font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
/* Fiche servie déjà remplie : « Ma liste » attend de savoir qui regarde */
.an-actions__attente { display: flex; flex-wrap: wrap; gap: 8px; }
.an-actions__attente span { height: 36px; width: 104px; border-radius: var(--r-pill); background: var(--surface-2); animation: anAttente 1.1s ease-in-out infinite alternate; }
@keyframes anAttente { from { opacity: .4; } to { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .an-actions__attente span { animation: none; } }
.an-actions__echec { color: var(--text-2); margin: 0 0 12px; }
.an-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.an-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px; border-radius: var(--r-ctrl);
  border: 1px solid var(--border-2); background: transparent; color: var(--text-2);
  font: 500 12.5px/1 var(--font-body); cursor: pointer; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.an-pill:hover { color: var(--text); border-color: var(--text-3); }
.an-pill.active { color: var(--sakura); border-color: var(--sakura-line); background: var(--sakura-soft); }
.an-pill.is-remove { color: var(--text-3); }
.an-pill.is-remove:hover { color: var(--red-text); border-color: rgba(220,60,60,.4); }
.an-pill .ym-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.an-progress { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 22px; align-items: center; }
.an-progress__row { display: flex; justify-content: space-between; gap: 12px; font: 400 12px var(--font-body); color: var(--text-2); margin-bottom: 8px; }
.an-progress__row b { color: var(--text); font-weight: 600; }
.an-progress__bar { height: 3px; background: var(--ink-4); border-radius: 2px; overflow: hidden; }
.an-progress__bar div { height: 100%; background: var(--sakura); }
.an-progress__ctl { display: flex; gap: 6px; margin-top: 10px; }
.an-step {
  height: 30px; min-width: 30px; padding: 0 10px; border-radius: var(--r-ctrl);
  border: 1px solid var(--border-2); background: transparent; color: var(--text-2);
  font: 500 12px var(--font-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.an-step:hover { color: var(--text); border-color: var(--text-3); background: var(--glass); }
.an-step svg { width: 12px; height: 12px; }
/* Nombre d'épisodes vus, à taper entre − et + (2026-10-01) */
.an-ep-input {
  width: 64px; height: 30px; padding: 0 8px; border-radius: var(--r-ctrl);
  border: 1px solid var(--border-2); background: var(--glass); color: var(--text);
  font: 600 12.5px var(--font-body); font-variant-numeric: tabular-nums; text-align: center;
  transition: border-color .2s ease;
}
.an-ep-input:hover { border-color: var(--text-3); }
.an-ep-input:focus { outline: none; border-color: var(--sakura-line); }
.an-ep-input:focus-visible { outline: 2px solid var(--sakura); outline-offset: 2px; }
/* En-tête du bloc : libellé à gauche, cloche « Être prévenu » à droite */
.an-actions__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.an-actions__head .an-actions__lbl { margin-bottom: 0; }
.an-follow {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: var(--r-ctrl);
  border: 1px solid var(--border-2); background: transparent; color: var(--text-2);
  font: 500 12px/1 var(--font-body); cursor: pointer; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.an-follow:hover { color: var(--text); border-color: var(--text-3); }
.an-follow.is-on { color: var(--sakura); border-color: var(--sakura-line); background: var(--sakura-soft); }
.an-follow:disabled { opacity: .6; cursor: default; }
.an-follow .ico { width: 14px; height: 14px; }
.an-rating { display: flex; flex-direction: column; gap: 8px; }
.an-rating span.lbl { font: 400 12px var(--font-body); color: var(--text-2); }
.an-stars { display: flex; gap: 3px; }
.an-stars span { font-size: 18px; line-height: 1; cursor: pointer; color: var(--text-3); transition: color .15s ease, transform .15s ease; }
.an-stars span.is-on { color: var(--gold); }
.an-stars span:hover { transform: scale(1.15); }
.an-fav {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-3);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .3s var(--ease);
}
.an-fav svg { width: 18px; height: 18px; }
.an-fav:hover { transform: scale(1.06); color: var(--text); }
.an-fav.active { color: var(--gold); border-color: rgba(201,150,58,.5); background: rgba(201,150,58,.1); }

/* ============================================================
   2. CONTENU - deux colonnes
============================================================ */
.an-body > *, .an-hero__inner > * { min-width: 0; }
.an-body {
  width: 100%; max-width: var(--container); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start;
}
.an-main { min-width: 0; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 72px); }
.an-aside { min-width: 0; position: sticky; top: 92px; display: flex; flex-direction: column; gap: 24px; }

.an-h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.an-h h2 { margin: 0; font: 500 var(--fs-sub)/1.3 var(--font-jp); color: var(--text); }
.an-h span { font: 400 12.5px var(--font-body); color: var(--text-3); }
.an-h .an-link { margin-left: auto; }
.an-link { position: relative; font: 500 12.5px var(--font-body); color: var(--sakura); cursor: pointer; background: none; border: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
/* Zone de clic portée à 25px de haut sans décaler la mise en page :
   le texte seul n'en fait que 15, trop peu au doigt. */
.an-link::after { content: ''; position: absolute; inset: -5px 0; }
.an-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.an-link svg { width: 13px; height: 13px; }

/* Pastille de lecture sur l'affiche, posée seulement quand une bande-annonce
   existe. Elle reste lisible sur une affiche claire grâce au fond encre. */
.an-poster__play {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px 0 11px;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-ctrl);
  background: rgba(10,10,15,.78); backdrop-filter: blur(8px);
  color: #fff; font: 500 11.5px var(--font-body); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.an-poster__play:hover { background: var(--sakura-deep); border-color: transparent; transform: translateY(-1px); }
.an-poster__play svg { width: 12px; height: 12px; margin-left: 1px; }
@media (max-width: 560px) {
  .an-poster__play span { display: none; }
  .an-poster__play { padding: 0; width: 34px; justify-content: center; }
}

/* Où regarder - plateformes officielles */
.an-watch { display: flex; flex-wrap: wrap; gap: 10px; }
.an-watch__link {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 15px;
  border: 1px solid var(--border-2); border-radius: var(--r-ctrl);
  background: var(--ink-2); color: var(--text);
  font: 500 13px var(--font-body); text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.an-watch__link:hover { border-color: var(--sakura-line); background: var(--sakura-soft); transform: translateY(-1px); }
.an-watch__link svg { width: 13px; height: 13px; color: var(--text-3); }
.an-watch__link:hover svg { color: var(--sakura); }
.an-watch__none { font: 400 13.5px/1.7 var(--font-body); color: var(--text-3); }
.an-watch__none a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--border-2); }
.an-watch__none a:hover { color: var(--sakura); border-bottom-color: var(--sakura-line); }

/* Fenêtre de lecture ouverte depuis l'affiche */
.an-trailer-modal__box { max-width: 900px; width: 100%; padding-bottom: 0; }
.an-trailer-modal__video { aspect-ratio: 16/9; background: #000; border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }
.an-trailer-modal__video iframe { width: 100%; height: 100%; border: 0; display: block; }

.an-trailer { aspect-ratio: 16/9; border-radius: var(--r-xl); overflow: hidden; background: var(--ink-2); box-shadow: 0 0 0 1px var(--border); }
.an-trailer iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Vignette avant lecture : posée sur l'affiche, elle reste sombre dans les
   deux thèmes (texte blanc sur voile). */
.an-trailer__facade {
  position: relative; width: 100%; height: 100%; padding: 0; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: #0a0a0f; color: #fff; cursor: pointer; overflow: hidden;
  font: 500 14px var(--font-body);
}
.an-trailer__bg {
  position: absolute; inset: -20px; background: center / cover no-repeat;
  filter: blur(18px) brightness(.45) saturate(1.1); transform: scale(1.05);
  transition: filter .3s ease;
}
.an-trailer__facade:hover .an-trailer__bg { filter: blur(14px) brightness(.55) saturate(1.2); }
.an-trailer__facade > span:not(.an-trailer__bg) { position: relative; }
.an-trailer__btn {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sakura-deep); box-shadow: 0 8px 30px rgba(0,0,0,.45);
  transition: transform .2s ease;
}
.an-trailer__facade:hover .an-trailer__btn { transform: scale(1.06); }
.an-trailer__btn svg { width: 22px; height: 22px; margin-left: 3px; }
.an-trailer__empty { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-3); font: 400 13px var(--font-body); }
.an-trailer__empty span { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; }
.an-trailer__empty svg { width: 18px; height: 18px; margin-left: 2px; }

.an-synopsis { font: 400 15.5px/1.85 var(--font-body); color: var(--text-2); max-width: 66ch; text-wrap: pretty; }
.an-synopsis + .an-link { margin-top: 12px; }

/* Avis */
.an-review-form { background: var(--ink-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px 24px; margin-bottom: 26px; }
.an-review-form .an-actions__lbl { margin-bottom: 10px; }
.an-review-form textarea { min-height: 96px; }
.an-review-form .an-stars { margin-bottom: 14px; }
.an-review-form__acts { display: flex; gap: 10px; margin-top: 12px; }
.an-note { padding: 14px 18px; border: 1px dashed var(--border-2); border-radius: var(--r-lg); font: 400 13px var(--font-body); color: var(--text-3); margin-bottom: 26px; }
.an-reviews { display: flex; flex-direction: column; }
.an-review { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.an-review:first-child { padding-top: 0; }
.an-review .af-avatar-circle { width: 40px; height: 40px; cursor: pointer; border: 1px solid var(--border-2); font: 500 14px var(--font-body); color: var(--text-2); }
.an-review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.an-review__name { font: 600 14px var(--font-body); color: var(--text); cursor: pointer; }
.an-review__name:hover { color: var(--sakura); }
.an-review__tag { font: 400 11.5px var(--font-body); color: var(--text-3); }
.an-review__score { display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px var(--font-body); color: var(--gold); }
.an-review__score svg { width: 12px; height: 12px; }
.an-review__date { font: 400 11.5px var(--font-body); color: var(--text-3); margin-left: auto; }
.an-review__text { margin-top: 8px; font: 400 14px/1.7 var(--font-body); color: var(--text-2); white-space: pre-wrap; text-wrap: pretty; }
.an-review__acts { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.an-act { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--font-body); color: var(--text-3); cursor: pointer; background: none; border: none; padding: 0; transition: color .2s ease; }
.an-act svg { width: 14px; height: 14px; }
.an-act:hover { color: var(--text); }
.an-act.is-on { color: var(--sakura); }
.an-act.is-danger:hover { color: var(--red-text); }
.an-act.is-done { color: var(--text-3); cursor: default; }
.an-review--edit { display: block; padding: 20px; background: var(--ink-2); border: 1px solid var(--sakura-line); border-radius: var(--r-xl); }
.an-review--edit textarea { min-height: 90px; }
.an-more { align-self: center; margin-top: 18px; }

/* Personnages */
/* Pas de cadre commun : chaque personnage porte son filet, une grille
   incomplète ne laisse aucune cellule vide encadrée. */
.an-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 20px; }
.an-char { display: flex; gap: 12px; align-items: center; padding: 14px 6px; border-top: 1px solid var(--border); min-width: 0; transition: background .2s ease; }
.an-char:hover { background: var(--glass); }
.an-char__img { width: 44px; height: 58px; border-radius: var(--r-xs); object-fit: cover; flex-shrink: 0; background: var(--ink-3); display: flex; align-items: center; justify-content: center; font: 500 16px var(--font-jp); color: var(--text-3); }
.an-char__body { min-width: 0; }
.an-char__name { display: block; font: 600 13px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-char__role { display: block; margin-top: 3px; font: 400 11px var(--font-body); color: var(--text-3); }
.an-char__va { display: block; margin-top: 2px; font: 400 11px var(--font-body); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-empty { grid-column: 1 / -1; padding: 24px; text-align: center; font: 400 13px var(--font-body); color: var(--text-3); background: var(--ink); }

/* Œuvres liées */
.an-relations { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.an-relation { display: grid; grid-template-columns: auto 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border); transition: background .2s ease; }
.an-relation[onclick] { cursor: pointer; }
.an-relation[onclick]:hover { background: var(--glass); }
.an-relation.is-off { opacity: .55; }
.an-relation__kind { font: 600 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; min-width: 110px; }
.an-relation__img { width: 34px; height: 48px; border-radius: 4px; object-fit: cover; background: var(--ink-3); display: flex; align-items: center; justify-content: center; font: 500 13px var(--font-jp); color: var(--text-3); }
.an-relation__title { display: block; font: 500 14px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-relation__meta { display: block; margin-top: 2px; font: 400 11.5px var(--font-body); color: var(--text-3); }
.an-relation__arrow { color: var(--text-3); }
.an-relation__arrow svg { width: 16px; height: 16px; }

/* Similaires : affiches + scrim, même grammaire que l'app */
.an-similar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.an-card { position: relative; aspect-ratio: 2/3; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-3); box-shadow: 0 0 0 1px var(--border); cursor: pointer; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.an-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--border-2), 0 28px 48px -16px rgba(0,0,0,.7); }
.an-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.an-card:hover img { transform: scale(1.05); }
.an-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.an-card__scrim { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(180deg, transparent, rgba(6,6,9,.7) 40%, rgba(6,6,9,.97)); }
.an-card__title { font: 600 13px/1.3 var(--font-body); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.an-card__score { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font: 600 11.5px var(--font-body); color: var(--gold); }
.an-card__score svg { width: 11px; height: 11px; }

/* Colonne latérale */
.an-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.an-ledger__cell { background: var(--ink); padding: 20px 18px; }
.an-ledger__cell b { display: block; font: 600 26px/1 var(--font-body); color: var(--text); letter-spacing: -.02em; }
.an-ledger__cell b.is-accent { color: var(--sakura); }
.an-ledger__cell b.is-gold { color: var(--gold); }
.an-ledger__cell > span { display: block; margin-top: 8px; font: 500 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
/* Deux exemplaires : la colonne de droite au bureau, la tête du contenu sous
   900px. La colonne y passe sous tout le reste, et la note de la communauté
   n'apparaissait qu'après les avis, personnages et animes similaires
   (signalé le 2026-10-03). */
.an-ledger--haut { display: none; }
@media (max-width: 900px) {
  .an-ledger--haut { display: grid; }
  .an-ledger--cote { display: none; }
}
.an-info { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 6px 20px; background: var(--ink-2); }
.an-info__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.an-info__row:last-child { border-bottom: none; }
.an-info__row span:first-child { font: 400 12.5px var(--font-body); color: var(--text-3); white-space: nowrap; }
.an-info__row span:last-child { font: 500 13px var(--font-body); color: var(--text); text-align: right; }
.an-info__row .is-gold { color: var(--gold) !important; }
.an-info__lien { color: var(--sakura-2); text-decoration: none; }
.an-info__lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.an-info__row .is-green { color: var(--green) !important; }
.an-tags { padding: 20px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--ink-2); }
.an-tags .ym-label { margin-bottom: 12px; }
.an-tags__list { display: flex; gap: 6px; flex-wrap: wrap; }
.an-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-ctrl); border: 1px solid var(--border-2); font: 500 12px var(--font-body); color: var(--text-2); }
.an-tags .af-pill { cursor: pointer; }

/* ============================================================
   3. RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .an-body > *, .an-hero__inner > * { min-width: 0; }
.an-body { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
  .an-hero__inner { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 900px) {
  body.anime-shell { padding-bottom: 64px; }
  .an-hero__inner { grid-template-columns: 1fr; gap: 24px; padding-top: 36px; align-items: start; }
  .an-poster { width: 150px; }
  .an-body > *, .an-hero__inner > * { min-width: 0; }
.an-body { grid-template-columns: 1fr; gap: 48px; }
  .an-aside { position: static; }
  .an-scores__cell { padding: 12px 16px; min-width: 90px; }
  .an-scores__cell b { font-size: 20px; }
  .an-actions { padding: 18px; }
  .an-progress { grid-template-columns: 1fr; gap: 16px; }
  .an-similar { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .an-relation { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .an-relation__kind { grid-column: 1 / -1; min-width: 0; }
}
@media (max-width: 560px) {
  .an-similar { grid-template-columns: repeat(2, 1fr); }
  .an-chars { grid-template-columns: 1fr; }
}

/* ---------- Résumé écrit par le serveur (routes/fiche.js) : lu par les
   moteurs. Avec JavaScript (classe ym-js posée en tête d'anime.html), il
   reste caché : la vraie fiche le remplace sans flash. Filet : s'il est
   encore là au bout de 4 s (API lente ou en panne), il s'affiche. */
.ym-js .an-pre { visibility: hidden; animation: anPreFilet 0s 4s forwards; }
@keyframes anPreFilet { to { visibility: visible; } }
.an-pre { width: 100%; max-width: var(--container); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gutter) 64px; color: var(--text-2); font: 400 15px/1.7 var(--font-body); }
.an-pre__tete { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 32px; }
.an-pre__affiche { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--r-lg); background: var(--ink-3); }
.an-pre__titre { margin: 0; font: 500 clamp(30px, 4.5vw, 56px)/1.08 var(--font-jp); color: var(--text); text-wrap: balance; }
.an-pre__sous { margin: 10px 0 0; font: 300 16px var(--font-jp); color: var(--text-2); }
.an-pre__aussi { margin: 6px 0 0; font: 400 13px var(--font-body); color: var(--text-3); }
.an-pre__faits { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 24px; margin: 24px 0 0; }
.an-pre__faits dt { font: 500 12px var(--font-body); color: var(--text-3); }
.an-pre__faits dd { margin: 2px 0 0; color: var(--text); }
.an-pre section { max-width: 75ch; margin-top: 28px; }
.an-pre h2 { margin: 0 0 8px; font: 500 22px/1.3 var(--font-jp); color: var(--text); }
.an-pre ul { margin: 0; padding-left: 20px; }
.an-pre a { color: var(--sakura-2); }
@media (max-width: 700px) {
  .an-pre__tete { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
}